:root{
  --bg:#0b1220;
  --panel:#121a2b;
  --panel-2:#0f1726;
  --text:#e7ecf6;
  --muted:#9fb0d0;
  --primary:#2f6df6;
  --danger:#ef4444;
  --card:#0f1726;
  --border:#24324c;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg, var(--bg), #0e1626 60%, #0b1220);
  color:var(--text);
}

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:rgba(10,16,30,.85); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand .logo{color:var(--primary)}
.brand .divider{opacity:.4}

.actions{display:flex; gap:10px}
.btn{
  background:var(--primary); border:1px solid transparent; color:white;
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
}
.btn:hover{opacity:.95}
.btn.ghost{background:transparent; border:1px solid var(--border); color:var(--text)}
.btn.danger{background:var(--danger)}
.btn.primary{background:var(--primary)}

.container{max-width:1180px; margin:24px auto; padding:0 16px}

.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-radius:18px; padding:16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}
.card-title{font-weight:700; margin-bottom:10px}

.banner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; background:#0e1626; color:var(--text);
  border-bottom:1px solid var(--border);
}
.banner.hidden{display:none}
.banner-left{display:flex; flex-direction:column; gap:2px}
.banner-right .btn{padding:8px 12px}

.filters .userline{margin-bottom:10px; color:var(--muted)}
.filter-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px; align-items:end;
}
.filter-grid label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
select,input{width:100%; padding:10px; border-radius:10px; border:1px solid var(--border);
  background:#0b1324; color:var(--text)}
.filter-actions{display:flex; gap:8px}

.stats-grid{
  margin:16px 0;
  display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:12px;
}
.stat{padding:14px}
.stat-title{font-size:12px; color:var(--muted); margin-bottom:6px}
.stat-value{font-size:26px; font-weight:700}

.charts-grid{
  display:grid; grid-template-columns: repeat(3,minmax(0,1fr));
  gap:12px; margin:16px 0;
}
.table-head{display:flex; justify-content:space-between; align-items:baseline}
.table-wrap{overflow:auto}
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th,.table td{border-bottom:1px solid var(--border); padding:10px; text-align:center}
.table thead th{position:sticky; top:0; background:#0d1524; z-index:1}

.lock{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
}
.lock.hidden{display:none}
.lock-box{background:#0e1626; border:1px solid var(--border); border-radius:16px; padding:20px; text-align:center}

.premium-only.premium-disabled{
  filter: blur(2px) grayscale(.5);
  pointer-events:none;
  position:relative;
}
.muted{color:var(--muted)}

@media (max-width:1024px){
  .charts-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* === Topbar: buton aralığını koru, küçülürken de bozulmasın === */
.actions{
  display:flex;
  flex-wrap:wrap;
  gap: clamp(8px, 1.2vw, 14px);           /* ZORUNLU boşluk */
}
.actions .btn{
  padding: clamp(6px, 1.2vw, 10px) clamp(10px, 2vw, 14px);
  font-size: clamp(12px, 1.6vw, 15px);
  border-radius: 12px;
}

/* Çok dar ekranda 2x grid + Çıkış tam genişlik */
@media (max-width: 420px){
  .topbar{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .brand{ grid-column: 1 / -1; }
  .actions{
    grid-column: 1 / -1;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .actions .btn{ width: 100%; }
  .actions .btn.danger{ grid-column: 1 / -1; } /* Çıkış tam genişlik */
}

/* === Metin ve sayısal özetlerde adaptif boyut === */
.card-title{ font-size: clamp(14px, 2.2vw, 18px); }
.stat-title{ font-size: clamp(11px, 1.6vw, 12px); }
.stat-value{ font-size: clamp(18px, 4vw, 26px); }

/* Filtre ve inputlar daralınca okunaklı kalsın */
select, input{
  font-size: clamp(12px, 1.6vw, 14px);
  min-width: 0;                           /* container daralınca taşmayı engeller */
}
.filter-actions .btn{
  padding: clamp(8px, 1.2vw, 10px) clamp(10px, 2vw, 14px);
  font-size: clamp(12px, 1.6vw, 14px);
}

/* === Grafikler asla taşmasın === */
.charts-grid > .card{
  min-width: 0;        /* grid item’larda overflow’un ana sebebi */
  overflow: hidden;    /* taşmayı tamamen kes */
}
.charts-grid canvas{
  width: 100% !important;
  height: auto !important;       /* Chart.js maintainAspectRatio ile uyumlu */
  aspect-ratio: 16 / 9;          /* yüksekliği sabit oranla yönet */
  max-height: 60vh;              /* çok uzun ekranlarda taşmayı önle */
  display: block;
  box-sizing: border-box;
}

/* Tablo kaydırılabilir, küçükte font küçülsün */
.table-wrap{ overflow:auto; -webkit-overflow-scrolling: touch; }
.table{ font-size: clamp(12px, 1.6vw, 14px); }

/* === Grid kırılımları: küçükte tek kolon, orta ekranda iki === */
@media (max-width: 1024px){
  .charts-grid{ grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .filter-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .stats-grid { grid-template-columns: 1fr; }
  .filter-grid{ grid-template-columns: 1fr; }
}
/* --- OVERRIDES: Profil + Çıkış tek satır, sabit aralık, küçülerek sığsın --- */
.topbar { column-gap: 12px; }

.actions{
  display: flex;                 /* grid'e geçmesini engelle */
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;             /* <— asla alta düşmesin */
  gap: clamp(8px, 1.2vw, 14px);  /* zorunlu boşluk, ekrana göre ölçek */
  margin-left: auto;             /* brand solda, actions sağda kalsın */
  min-width: 0;
}
.actions .btn{
  flex: 0 0 auto;
  white-space: nowrap;           /* satır kırma yok */
  width: auto;                   /* önceki %100 genişlik kuralını geçersiz kıl */
  padding: clamp(6px, 1vw, 10px) clamp(10px, 1.8vw, 14px);
  font-size: clamp(11px, 1.5vw, 14px);
  border-radius: 12px;
}

/* Çok dar ekranlarda bile tek satır kalsın (eski grid kuralını override et) */
@media (max-width: 420px){
  .topbar{
    display: flex;               /* grid → flex */
    grid-template-columns: unset;
    gap: 8px;
  }
  .brand{ grid-column: auto; }
  .actions{
    display: flex !important;    /* önceki display:grid'i bastır */
    grid-template-columns: unset;
    flex-wrap: nowrap;
  }
  .actions .btn{
    width: auto !important;      /* önceki width:100% kuralını bastır */
  }
  .actions .btn.danger{
    grid-column: auto;           /* tam genişlik zorlamasını kaldır */
  }
}

/* Ekstra dar cihazlar için biraz daha sıkılaştırma */
@media (max-width: 340px){
  .actions .btn{
    padding: 6px 8px;
    font-size: 11px;
  }
}
/* === Premium CTA (banner + kilit penceresi) === */
:root { --premium: #ffb30e; }

/* Banner'daki buton */
#trialBanner .banner-right .btn.primary,
/* Kilit penceresindeki buton */
#lockOverlay .lock-box .btn.primary{
  background: var(--premium) !important;
  border-color: var(--premium) !important;
  color: #0f172a !important;

  /* zorla yan/üst boşluklar ve dinamik küçülme */
  padding: clamp(6px, 1.1vw, 10px) clamp(12px, 2vw, 16px) !important;
  font-size: clamp(12px, 1.5vw, 14px) !important;
  line-height: 1.1;
  border-radius: 12px;
  white-space: nowrap;      /* tek satır kalsın */
}

/* Hover etkisi */
#trialBanner .banner-right .btn.primary:hover,
#lockOverlay .lock-box .btn.primary:hover{
  filter: brightness(.95);
}

/* Butonu sağ kenarda sabit hizalı tut (mesafeyi koru) */
#trialBanner .banner-right{ margin-left: auto; }
/* — Alt çizgiyi kaldır — */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active,
#trialBanner .banner-right .btn.primary,
#lockOverlay .lock-box .btn.primary{
  text-decoration: none !important;
}