/* Çözüm SMS panel — premium koyu tema (kullanıcının referans tasarımına göre).
   Lacivert/petrol zemin + cyan/turuncu ikili vurgu, cam/gradyan kartlar,
   ince mono etiketler. Okunabilirlik için referanstaki çok küçük font
   boyutları büyütüldü. */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

[hidden] { display: none !important; }

:root {
  --bg: #071119;
  --sidebar: #08131cf0;
  --card: #101d27;
  --card-2: #0d1821;
  --card-3: #142633;
  --line: #24404e;
  --line-strong: #35596a;
  --text: #edf7f9;
  --text-dim: #9db3bd;
  --text-faint: #6d8896;
  --green: #39d69d;
  --red: #ff6573;
  --violet: #aa8aff;
  --cyan: #29d7e7;
  --cyan-strong: #5aeaf3;
  --cyan-soft: rgba(41, 215, 231, .14);
  --brand: #fb862c;
  --brand-strong: #ff9d53;
  --brand-soft: rgba(251, 134, 44, .16);
  --accent: #fb862c; /* geriye uyumluluk: eski --accent kullanan yerler artık turuncu */
  --s1: #fb862c; --s2: #29d7e7; --s3: #aa8aff; --s4: #39d69d; --s5: #ff6573;
  --good: #39d69d; --warning: #ffb36c; --critical: #ff6573;
  /* SAYI RENKLERİ (2026-09-14) — sayı metinleri için ayrı değişkenler.
     Süpervizör kararı: renkler CANLI kalsın, soluklaştırma yok; okunurluk
     rakam boyutu ve yazı tipiyle çözüldü (bkz. td.mono / .stat-chip b). */
  --num-ok: #39d69d;
  --num-bad: #ff6573;
  --num-warm: #ffb36c;
  --grid-line: rgba(255,255,255,.05); --axis-muted: #6d8896;
  --radius: 12px;
  --font-base: 13.5px;
  --ease: cubic-bezier(.22,.9,.3,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(720px 500px at 68% -20%, #134660b3, transparent 64%),
    radial-gradient(500px 430px at -14% 90%, #0b5261a6, transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--font-base);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--text); }

/* --- düzen --- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 258px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #08131ce8, #08141ded);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  gap: 3px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  backdrop-filter: blur(16px);
}

.logo-row { display: flex; align-items: center; gap: 10px; padding: 2px 6px 20px; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg,#153e51,#122535);
  border: 1px solid #318aa0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--cyan); font-size: 14px;
  box-shadow: inset 0 0 16px rgba(41,215,231,.11), 0 0 22px rgba(41,215,231,.1);
  object-fit: cover;
}
img.logo-mark { background: linear-gradient(135deg,#153e51,#122535); }
.logo-name { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.logo-tag { font: 9px 'DM Mono', monospace; letter-spacing: .12em; color: var(--brand); font-weight: 500; margin-top: 3px; text-transform: uppercase; }

.workspace-card {
  margin: 0 2px 18px; padding: 10px; border: 1px solid var(--line); border-radius: 9px;
  background: rgba(255,255,255,.03); display: flex; align-items: center; gap: 9px;
}
.workspace-avatar {
  height: 27px; width: 27px; flex: 0 0 27px; border-radius: 7px;
  background: linear-gradient(135deg,#e49b68,#8a4fb0);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #1a1220;
}
.workspace-card b { display: block; font-size: 11.5px; }
.workspace-card small { display: block; font-size: 9.5px; color: var(--text-faint); margin-top: 2px; }

.nav-section-label {
  font: 9.5px 'DM Mono', monospace; font-weight: 500; color: #587281;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 10px 7px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px;
  color: #90a7b2; font-size: 12.5px; font-weight: 600;
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  transition: background .12s, color .12s;
}
.nav-item svg { width: 16px; height: 16px; flex: 0 0 16px; }
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item.active {
  color: #fff; font-weight: 700;
  background: linear-gradient(90deg,#123e51,#0f2938);
  box-shadow: inset 2px 0 var(--cyan);
}
.nav-badge {
  margin-left: auto; font: 9.5px 'DM Mono', monospace; font-weight: 500;
  background: var(--red); color: #fff;
  border-radius: 20px; padding: 1px 7px;
}

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.balance-card {
  border: 1px solid #2c5362; border-radius: 10px; padding: 12px;
  background: linear-gradient(135deg,#0e2634,#0d1924);
}
.balance-card small { font: 9px 'DM Mono', monospace; color: #8ba4af; letter-spacing: .05em; }
.balance-card b { display: block; font-size: 16px; margin-top: 6px; letter-spacing: -.01em; }
.balance-card-top {
  margin: 0 2px 16px;
  border-color: #1f5866;
  background: linear-gradient(135deg,#123449,#0e2634);
}
.balance-card-top small { color: var(--cyan); }

.who { display: flex; align-items: center; gap: 9px; padding-top: 4px; }
.avatar {
  height: 28px; width: 28px; flex: 0 0 28px; border-radius: 50%;
  background: linear-gradient(135deg,#eab07b,#7d442e);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #241207;
}
.who b { display: block; font-size: 11.5px; color: var(--text); }
.who span { display: block; font-size: 10px; color: var(--text-faint); margin-top: 1px; }
.who + .btn, .sidebar-foot .btn { margin-top: 2px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 64px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 28px; gap: 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(9,21,29,.6); backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 3;
}
.eyebrow { font: 9px 'DM Mono', monospace; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.page-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; }

.topbar-search {
  height: 34px; flex: 0 1 320px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 8px; padding: 0 11px;
  color: var(--text-faint); font-size: 12px; background: rgba(255,255,255,.03);
}
.topbar-search svg { width: 14px; height: 14px; flex-shrink: 0; }
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.online-pill { font: 9px 'DM Mono', monospace; border: 1px solid var(--line); border-radius: 20px; color: #9bb6c0; padding: 6px 10px; white-space: nowrap; }
.online-pill i { display: inline-block; width: 5px; height: 5px; background: var(--green); border-radius: 50%; margin-right: 5px; box-shadow: 0 0 8px var(--green); }
.icon-btn {
  height: 32px; width: 32px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(255,255,255,.03); color: #a7bbc4;
  display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.icon-btn.has-dot::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--card); }

/* Sağ üstte her zaman görünen "ibre" göstergeleri — sağlayıcı bakiyesi (süpervizör), kendi kredi havuzu (bayi) */
.topbar-gauges { display: flex; align-items: center; gap: 6px; }
.topbar-gauge {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035);
  cursor: default; transition: background .15s var(--ease), border-color .15s var(--ease);
}
.topbar-gauge:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.topbar-gauge-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.topbar-gauge-text small { font: 600 10px 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--text-dim); letter-spacing: .09em; }
.topbar-gauge-text b { font: 700 19px/1.1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
/* Kırılım satırı: etiketler soluk, RAKAMLAR okunur. 9px mono soluk hâli
   ekranda görünmüyordu (kullanıcı bildirdi, 14 Eylül). */
.topbar-gauge-text i { font: 500 11px/1.25 'Plus Jakarta Sans', system-ui, sans-serif; font-style: normal; color: var(--text-dim); letter-spacing: 0; white-space: nowrap; }
.topbar-gauge-text i em { font-style: normal; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.topbar-gauge-text i .isaret { color: var(--text-faint); padding: 0 1px; }
@media (max-width: 980px) { .topbar-gauges { display: none; } }

.content { flex: 1; padding: 20px 22px 56px; display: flex; flex-direction: column; gap: 16px; max-width: none; width: 100%; margin: 0; }
.view { display: none; flex-direction: column; gap: 16px; animation: viewIn .22s var(--ease); }
.view.active { display: flex; }
@keyframes viewIn { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.page-head h1 { font-size: 19px; letter-spacing: -.01em; margin: 0 0 4px; }
.page-head p { font-size: 11.5px; color: var(--text-dim); margin: 0; }

/* --- kartlar --- */
.grid { display: grid; gap: 14px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: linear-gradient(145deg, #101d27ef, #0d1821ef);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
}
.card-title {
  font-size: 13px; font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; letter-spacing: -.005em;
}
.card-title .hint { font-size: 11px; font-weight: 500; color: var(--text-faint); }
/* Aynı ipucu stili etiketlerin (label) içinde de kullanılabilsin — aksi
   hâlde .hint yalnız .card-title altında tanımlı olduğu için etiket
   içindeki ipucu, etiketin kalın/koyu stilini miras alıp ipucu gibi
   görünmüyordu. */
label .hint { font-size: 11px; font-weight: 500; color: var(--text-faint); }
.card-sub { font-size: 10.5px; color: var(--text-faint); }

/* --- bildirim şeridi --- */
.notice {
  border: 1px solid #246175; background: linear-gradient(96deg,#0e2e3d,#102533);
  border-radius: 10px; padding: 13px 16px; display: flex; justify-content: space-between; align-items: center;
  position: relative; overflow: hidden; gap: 14px; flex-wrap: wrap;
}
.notice:after { content: ""; position: absolute; right: 6%; top: -60px; width: 150px; height: 150px; border: 1px solid rgba(50,220,228,.2); border-radius: 50%; box-shadow: 0 0 0 20px rgba(50,220,228,.03); }
.notice b { font-size: 12.5px; position: relative; }
.notice span { display: block; font-size: 10.5px; color: #86a2ae; margin-top: 4px; position: relative; }
.notice button, .notice a.btn { z-index: 1; }

/* --- metrik kartları (Genel Bakış) --- */
.metric {
  background: linear-gradient(145deg,#142633,#0e1a24); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 14px; min-height: 92px; position: relative; overflow: hidden; --ac: var(--cyan);
}
.metric:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--ac); }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.metric-label { font-size: 10.5px; color: #8ea5af; font-weight: 600; letter-spacing: .01em; }
.metric-delta { font: 9.5px 'DM Mono', monospace; color: var(--ac); }
.metric-num { font-size: clamp(17px, 1.5vw, 23px); white-space: nowrap; font-weight: 800; letter-spacing: -.02em; display: block; margin-top: 9px; font-variant-numeric: tabular-nums; }
.metric-unit { font: 9px 'DM Mono', monospace; color: #8299a6; margin-top: 2px; display: block; }
.metric-spark { position: absolute; right: 8px; bottom: 7px; width: 78px; height: 27px; opacity: .85; }

/* --- ana genel bakış grid --- */
.dashboard-grid { display: grid; grid-template-columns: 1.6fr .85fr; gap: 14px; }
@media (max-width: 1180px) { .dashboard-grid { grid-template-columns: 1fr; } }
.card-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.card-head-row b { font-size: 12.5px; }
.card-head-row span { font-size: 10.5px; color: var(--text-faint); }

.chart-legend { display: flex; justify-content: flex-end; gap: 14px; font-size: 10.5px; color: #8ba2ad; }
.chart-legend-item { display: flex; align-items: center; gap: 5px; }
.chart-legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.chart-svg .axis-label { fill: var(--axis-muted); font-size: 9px; font-family: 'DM Mono', monospace; }
.chart-svg .grid-line { stroke: var(--grid-line); stroke-width: 1; }
.chart-tooltip rect { fill: #0a1620; stroke: var(--line-strong); stroke-width: 1; }
.chart-tooltip text { fill: var(--text); }

/* --- aktif kampanya listesi --- */
.camp-list { display: flex; flex-direction: column; }
.camp-row { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.camp-row:last-child { border-bottom: none; padding-bottom: 0; }
.camp-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.camp-top b { font-size: 12px; font-weight: 700; }
.camp-badge { font: 9px 'DM Mono', monospace; font-weight: 500; border-radius: 5px; padding: 3px 6px; background: #143c36; color: #7af0d1; white-space: nowrap; }
.camp-badge.run { background: #48331f; color: #ffc183; }
.camp-badge.rej { background: #43222a; color: #ff9aa8; }
.camp-meta { font-size: 10.5px; color: #718b98; margin-top: 4px; }
.camp-track { height: 4px; margin-top: 7px; background: rgba(255,255,255,.08); border-radius: 5px; overflow: hidden; }
.camp-track i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--cyan), #6da9ff); }

/* --- halka (ring) + operatör/sağlayıcı dağılımı --- */
.ring-wrap { display: flex; align-items: center; gap: 16px; }
.ring { height: 100px; width: 100px; flex: 0 0 100px; border-radius: 50%; position: relative; }
.ring:after { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: #101c25; }
.ring-center { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.carrier-list { display: grid; gap: 8px; flex: 1; min-width: 0; }
.carrier-row { font-size: 11px; color: #a9bbc4; display: flex; align-items: center; gap: 6px; }
.carrier-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrier-dot { height: 7px; width: 7px; border-radius: 50%; flex-shrink: 0; }
.carrier-val { font: 10px 'DM Mono', monospace; color: #d5e6e9; }

/* --- son aktivite --- */
.activity-row { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.activity-row:last-child { border-bottom: none; }
.activity-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); margin-top: 6px; flex-shrink: 0; }
.activity-text { font-size: 11.5px; color: var(--text-dim); flex: 1; }
.activity-time { font: 9.5px 'DM Mono', monospace; color: var(--text-faint); white-space: nowrap; }

/* --- tablo --- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: 9.5px 'DM Mono', monospace; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #9bb7c2; padding: 0 10px 11px 0; border-bottom: 1px solid var(--line-strong); }
td { padding: 12px 10px 12px 0; font-size: 12.5px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; color: #dbe8ec; }
td b { color: #fff; }
tr:hover td { background: rgba(255,255,255,.02); }
tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }
.muted { color: var(--text-dim); }
.mono { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
/* SAYILAR OKUNAKLI (2026-09-14): tablo sayıları ince mono yüzünden küçük ve
   soluk kalıyordu. Sayı hücreleri (td.mono) ve üst kutular arayüz yazı tipine
   (Plus Jakarta Sans, eşit genişlikli rakam) geçti: aynı boyutta belirgin
   daha büyük ve net. Kampanya no / telefon gibi KOD benzeri metinler
   (span.mono) mono kalır — hizalama ve "kod" hissi orada işe yarıyor. */
td.mono, th.mono, td[style*="text-align:right"], .lg-list td, .ledger-delta {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
}
td.mono .mono, td .mono, td.mono .helptext { font-family: 'DM Mono', ui-monospace, monospace; font-weight: 400; }
td.mono .helptext, td .helptext { font-size: 11px; font-weight: 400; letter-spacing: 0; }
.stat-num { font-family: 'DM Mono', ui-monospace, monospace; font-weight: 700; color: #fff; letter-spacing: -.01em; }

/* --- tablo üstü arama/filtre şeridi (bkz. .filter-row kullanan sayfalar) --- */
.filter-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-row input[type="text"] { flex: 1 1 260px; min-width: 200px; }
.filter-row select { flex: 0 0 auto; width: auto; min-width: 150px; }

.status-pill, .type-pill {
  font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; display: inline-block; white-space: nowrap;
}
.pill-green { background: rgba(57,214,157,.15); color: var(--green); }
.pill-red { background: rgba(255,101,115,.15); color: var(--red); }
.pill-gold { background: rgba(251,134,44,.16); color: var(--brand-strong); }
.pill-silver { background: rgba(170,138,255,.16); color: var(--violet); }
.pill-dim { background: rgba(255,255,255,.07); color: var(--text-dim); }

/* --- form --- */
label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 7px; }
input, textarea, select {
  width: 100%; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px;
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 12px;
  background: rgba(255,255,255,.03); color: var(--text);
}
/* Tarayıcının native <select> açılır listesi (dropdown popup) varsayılan
   olarak sistem temasını (genelde beyaz zemin/siyah yazı) kullanır ve bizim
   CSS'imizi görmezden gelir — "ne yazdığı anlaşılmıyor" şikayetinin sebebi
   buydu. color-scheme: dark tarayıcıya bu kontrolün (ve olası kaydırma
   çubuğunun) karanlık temada çizilmesini söyler; option'a da yedek olarak
   açıkça koyu zemin/açık yazı veriyoruz. */
select { color-scheme: dark; }
select option { background: var(--card-2); color: var(--text); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
textarea { resize: vertical; min-height: 74px; font-family: 'DM Mono', monospace; font-size: 12px; }
.field { margin-bottom: 15px; }
.field-row { display: flex; gap: 12px; }
.field-row > .field { flex: 1; }
.helptext { font-size: 11px; color: var(--text-faint); margin-top: 6px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 700; border-radius: 8px; padding: 9px 16px;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); color: #bed0d7;
  cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;
}
.btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn-primary { background: linear-gradient(135deg,#f27822,#ff963e); border-color: #ff9e54; color: #fff; box-shadow: 0 7px 18px rgba(243,117,37,.25); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger { background: rgba(255,101,115,.1); color: #ffb0b0; border-color: rgba(255,101,115,.3); }
.btn-sm { padding: 6px 12px; font-size: 11px; border-radius: 7px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Tablo satırlarındaki "⋯ diğer işlemler" menüsü — kalabalık buton
   sıralarını toparlamak için (bkz. app.js openRowMenu). Panel
   position:fixed olarak body'ye eklenir (bkz. JS), burada sadece görünüm. */
.row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }
.row-menu-btn {
  width: 28px; height: 28px; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; letter-spacing: 1px; font-weight: 700;
  border-radius: 7px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); color: #bed0d7;
  cursor: pointer;
}
.row-menu-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.row-menu-panel {
  position: fixed; z-index: 400; min-width: 168px;
  background: var(--card-3); border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 5px; box-shadow: 0 14px 34px rgba(0,0,0,.45); animation: rowMenuIn .12s ease;
}
.row-menu-panel button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 8px 10px; font-size: 12px; font-weight: 600; color: #dbe8ec; border-radius: 6px; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.row-menu-panel button:hover { background: rgba(255,255,255,.07); color: #fff; }
.row-menu-panel button.danger { color: #ffb0b0; }
.row-menu-panel button.danger:hover { background: rgba(255,101,115,.12); }
@keyframes rowMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* --- login --- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 100%; max-width: 400px; }
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; }
.login-logo .logo-mark { width: 52px; height: 52px; border-radius: 14px; font-size: 20px; }
.login-title { font-size: 19px; font-weight: 800; }
.login-sub { font-size: 12px; color: var(--text-dim); text-align: center; }

.tabs { display: flex; gap: 4px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 9px; padding: 4px; margin-bottom: 20px; }
.tab { flex: 1; text-align: center; padding: 9px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-dim); cursor: pointer; }
.tab.active { background: var(--brand); color: #fff; }

.error-box { background: rgba(255,101,115,.1); border: 1px solid rgba(255,101,115,.3); color: #ffb0b0; font-size: 12px; padding: 10px 13px; border-radius: 8px; margin-bottom: 14px; }

/* --- toast / modal --- */
.toast-stack { position: fixed; top: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 999; }
.toast {
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 12px 16px; font-size: 12px; font-weight: 500; color: var(--text);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.9); max-width: 320px;
  animation: toastIn .18s var(--ease);
}
.toast.leaving { animation: toastOut .18s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(16px); } }
.toast.err { border-color: rgba(255,101,115,.5); color: #ffb0b0; }
.toast.ok { border-color: rgba(57,214,157,.5); color: #8cf0c7; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(3,8,12,.66); display: flex; align-items: center; justify-content: center; z-index: 998; padding: 20px; animation: backdropIn .15s var(--ease); }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 22px; width: 100%; max-width: 460px; max-height: 86vh; overflow-y: auto; animation: modalIn .18s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-title { font-size: 15px; font-weight: 800; margin-bottom: 17px; }

.modal-section { margin-top: 14px; padding: 13px 14px 15px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.modal-section:first-of-type { margin-top: 0; }
.modal-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--cyan);
  text-transform: uppercase; margin-bottom: 11px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.modal-section-title .modal-section-note {
  font-size: 10.5px; font-weight: 500; color: var(--text-faint); text-transform: none; letter-spacing: 0;
}
.credentials-summary { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 2px; }
.credentials-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); }
.credentials-row span:first-child { font-size: 10.5px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.credentials-row b { font-family: 'DM Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700; }

.empty { text-align: center; padding: 46px 20px; color: var(--text-faint); font-size: 12.5px; border: 1px dashed #365766; border-radius: 10px; background: rgba(255,255,255,.015); }
.loading { text-align: center; padding: 42px 20px; color: var(--text-faint); font-size: 12.5px; }

/* --- skeleton/shimmer yükleniyor durumu --- */
.skel-table { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.skel-row { height: 13px; border-radius: 5px; background: rgba(255,255,255,.05); }
.skel-shimmer { position: relative; overflow: hidden; }
.skel-shimmer::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

.badge-count { font: 9.5px 'DM Mono', monospace; background: var(--red); color: #fff; border-radius: 999px; padding: 1px 6px; margin-left: 6px; }

code, .code-inline { font-family: 'DM Mono', monospace; font-size: 11.5px; background: rgba(255,255,255,.05); padding: 2px 6px; border-radius: 5px; color: var(--cyan); }

/* --- destek talebi mesaj akışı --- */
.msg-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.msg-bubble { max-width: 78%; padding: 10px 14px; border-radius: 13px; font-size: 12.5px; line-height: 1.55; }
.msg-bubble.me { align-self: flex-end; background: linear-gradient(135deg,#f27822,#ff963e); color: #fff; border-bottom-right-radius: 4px; }
.msg-bubble.them { align-self: flex-start; background: var(--card-2); border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 4px; }
.msg-meta { font-size: 9.5px; color: var(--text-faint); margin-top: 5px; }
.msg-bubble.me .msg-meta { color: rgba(255,255,255,.75); text-align: right; }

/* --- filtre satırı (raporlar) --- */
.filter-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filter-row .field { margin-bottom: 0; min-width: 140px; }

/* --- küçük istatistik şeridi --- */
.stat-strip { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.stat-chip { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; min-width: 120px; }
.stat-chip small { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
.stat-chip b { display: block; font-size: clamp(15px, 1.35vw, 20px); white-space: nowrap; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--text); }

/* --- ticket liste satırı --- */
.ticket-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.05); cursor: pointer; }
.ticket-row:last-child { border-bottom: none; }
.ticket-row:hover { background: rgba(255,255,255,.02); }
.ticket-row .ticket-main { flex: 1; min-width: 0; }
.ticket-row .ticket-subject { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; }
.ticket-row .ticket-preview { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row .ticket-meta { font-size: 10px; color: var(--text-faint); white-space: nowrap; }

/* --- kredi hareketi tutarı +/- renkli --- */
.ledger-delta.pos { color: var(--num-ok); font-weight: 600; }
.ledger-delta.neg { color: var(--num-bad); font-weight: 600; }

@media (max-width: 900px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; }
  .content { padding: 18px 16px 40px; }
  .topbar { padding: 0 16px; }
  .topbar-search, .online-pill { display: none; }
}

.panel-version {
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: .2px;
}
.panel-version b { color: var(--text-dim); font-weight: 600; }

/* ============================================================
   SMS GÖNDERİM EKRANI (Toplu SMS composer)
   Mesaj ve alıcı listesi yan yana; altta başlık/kodlama/zaman
   ve "ne kadar kredi gidecek" kutusu. Amaç: müşteri gönder'e
   basmadan ÖNCE ne göndereceğini ve ne ödeyeceğini görsün.
   ============================================================ */
.composer {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 18px;
}
.composer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card-3), var(--card));
}
.composer-title { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.composer-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; max-width: 62ch; }
.composer-balance {
  text-align: right; white-space: nowrap;
  padding: 8px 14px; border-radius: 10px;
  background: var(--card-2); border: 1px solid var(--line);
}
.composer-balance span { display: block; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.composer-balance b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }

.composer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.composer-col { padding: 18px 20px; min-width: 0; }
.composer-col + .composer-col { border-left: 1px solid var(--line); }
.composer-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; min-height: 28px;
}
.composer-col-head label { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.composer textarea { width: 100%; resize: vertical; line-height: 1.55; }
#cmp-message { min-height: 190px; }
#cmp-recipients { min-height: 190px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* Sayaç şeridi — karakter / parça / kodlama */
.meter-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px;
}
.meter {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 9px; border-radius: 7px;
  background: var(--card-2); border: 1px solid var(--line);
  font-size: 11px; color: var(--text-dim);
}
.meter b { font-size: 12.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.meter.is-good { border-color: rgba(57,214,157,.4); }
.meter.is-good b { color: var(--green); }
.meter.is-warn { border-color: rgba(255,179,108,.45); }
.meter.is-warn b { color: var(--warning); }
.meter.is-bad { border-color: rgba(255,101,115,.45); }
.meter.is-bad b { color: var(--red); }

/* Telefon önizlemesi */
.sms-preview { margin-top: 14px; }
.sms-preview-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.sms-phone {
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px;
}
.sms-from {
  font-size: 10.5px; font-weight: 700; color: var(--text-faint);
  text-align: center; margin-bottom: 8px; letter-spacing: .04em;
}
.sms-bubble {
  background: var(--card-3); border: 1px solid var(--line-strong);
  border-radius: 4px 14px 14px 14px;
  padding: 10px 13px; font-size: 12.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  max-height: 150px; overflow-y: auto;
}
.sms-bubble.is-empty { color: var(--text-faint); font-style: italic; }

/* Alıcı özeti */
.recipient-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rstat {
  flex: 1 1 90px; min-width: 90px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--card-2); border: 1px solid var(--line);
}
.rstat span { display: block; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.rstat b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rstat.ok b { color: var(--green); }
.rstat.dup b { color: var(--warning); }
.rstat.bad b { color: var(--red); }
.rstat.bad.is-zero b, .rstat.dup.is-zero b { color: var(--text-faint); }
.invalid-list {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: rgba(255,101,115,.07); border: 1px solid rgba(255,101,115,.28);
  font-size: 11px; color: var(--text-dim);
}
.invalid-list b { color: var(--red); }
.invalid-chips { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.invalid-chips code {
  background: var(--card-3); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 5px; font-size: 11px;
}

/* Alt bar — başlık, kodlama, zaman, maliyet, gönder */
.composer-foot {
  border-top: 1px solid var(--line);
  background: var(--card-2);
  padding: 14px 20px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
}
.composer-foot .field { margin-bottom: 0; flex: 0 1 190px; min-width: 150px; }
.composer-foot .field label { font-size: 11px; }
.cost-box {
  flex: 1 1 240px; min-width: 220px;
  padding: 9px 13px; border-radius: 9px;
  background: var(--card-3); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-dim); line-height: 1.5;
}
.cost-box b { color: var(--text); font-variant-numeric: tabular-nums; }
.cost-box.is-bad { border-color: rgba(255,101,115,.5); background: rgba(255,101,115,.08); }
.cost-box.is-bad b { color: var(--red); }
.composer-actions { display: flex; gap: 8px; margin-left: auto; }
.composer-actions .btn { height: 40px; padding: 0 20px; }

@media (max-width: 1100px) {
  .composer-grid { grid-template-columns: 1fr; }
  .composer-col + .composer-col { border-left: 0; border-top: 1px solid var(--line); }
  .composer-actions { margin-left: 0; width: 100%; }
  .composer-actions .btn { flex: 1; }
}

/* Numara Sorgula — durum kutuları */
.nl-alert {
  padding: 11px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  border: 1px solid var(--line); background: var(--card-2); margin-bottom: 8px;
}
.nl-alert:last-child { margin-bottom: 0; }
.nl-alert b { font-weight: 700; }
.nl-alert.ok { border-color: rgba(57,214,157,.35); background: rgba(57,214,157,.07); }
.nl-alert.ok b { color: var(--green); }
.nl-alert.bad { border-color: rgba(255,101,115,.4); background: rgba(255,101,115,.07); }
.nl-alert.bad b { color: var(--red); }
.nl-alert.warn { border-color: rgba(255,179,108,.4); background: rgba(255,179,108,.07); }
.nl-alert.warn b { color: var(--warning); }

/* Süpervizör bakiyesi kutuları — Numara Sorgula ile aynı uyarı stilini
   kullanıyor. Metin hizasını açıkça soldan veriyoruz: bu kutular kart
   içinde ortalanmış bir bağlamda da kullanılabiliyor. */
.nl-alert, .nl-alert .helptext { text-align: left; }
#platform-balance-box .helptext { text-align: left; }
#platform-balance-box .field label { white-space: nowrap; }

/* ================= REHBER (panel içi eğitim turu) ================= */
.rehber-katman { position: fixed; inset: 0; background: rgba(4,8,16,.72); z-index: 900; animation: rehberGir .18s ease; }
@keyframes rehberGir { from { opacity: 0 } to { opacity: 1 } }
.rehber-isik {
  position: fixed; z-index: 901; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--brand), 0 0 0 9999px rgba(4,8,16,.72), 0 0 28px rgba(242,120,34,.55);
}
.rehber-hedef { position: relative; z-index: 902; }
.rehber-balon {
  position: fixed; z-index: 903; width: min(380px, calc(100vw - 32px));
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
  animation: rehberGir .2s ease;
}
.rehber-sayac { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--brand); margin-bottom: 6px; }
.rehber-baslik { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.rehber-metin { font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.rehber-metin b { color: var(--text); }
.rehber-dugmeler { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.rehber-ac { cursor: pointer; position: relative; }
/* Daha önce izlenmemiş ekranda küçük bir nokta — tur kendiliğinden
   açılmıyor, sadece "burada rehber var" diye haber veriyor. */
.rehber-ac.is-yeni:after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #32dce4; box-shadow: 0 0 0 0 rgba(50,220,228,.55);
  animation: rehberNokta 2.2s ease-out infinite;
}
@keyframes rehberNokta {
  0%   { box-shadow: 0 0 0 0 rgba(50,220,228,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(50,220,228,0); }
  100% { box-shadow: 0 0 0 0 rgba(50,220,228,0); }
}

/* Kişiye Özel SMS — dosyadan okunan alan etiketleri.
   .tabs varsayılan olarak sekmeleri eşit genişliğe yayıyor; burada
   etiketler içeriği kadar dursun (10 sütunlu dosyada da düzgün aksın). */
#ps-kolonlar { gap: 7px; background: none; border: none; padding: 0; margin-bottom: 4px; }
#ps-kolonlar .tab {
  flex: 0 0 auto; padding: 7px 13px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255,255,255,.03); color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}
#ps-kolonlar .tab:hover { border-color: var(--brand); color: var(--brand); }
#ps-onizleme table { font-size: 12px; }
#ps-onizleme td { vertical-align: top; }

/* =====================================================================
   2026-09-04 — DÜZEN VE OKUNABİLİRLİK GEÇİŞİ
   Rapor ekranları büyüdükçe tablolar uzadı; başlıklar kaybolmasın,
   sayılar hizalı dursun, süzgeç şeridi düzenli kırılsın, klavye odağı
   görünsün. Renk ve karakter aynen; sadece düzen.
   ===================================================================== */
:root { --gold: #ffb36c; --silver: #aa8aff; }

/* Tablo başlığı kaydırınca üstte kalır. */
.table-wrap { position: relative; max-height: min(72vh, 900px); overflow: auto; border-radius: 10px; }
.table-wrap thead th { position: sticky; top: 0; z-index: 2; background: var(--card); box-shadow: 0 1px 0 var(--line-strong); }
/* Köşe yuvarlaklığı (10px) ilk başlığın ilk harfini kırpıyordu — küçük iç boşluk. */
.table-wrap th:first-child, .table-wrap td:first-child { padding-left: 6px; }
/* Uzun tablolarda satır ayrımı — çok hafif zebra. */
.table-wrap tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); }
.table-wrap tbody tr:hover td { background: rgba(41,215,231,.05); }
/* Sayı sütunları hep sağa, tabular rakamlarla. */
td.mono, th[style*="text-align:right"], td[style*="text-align:right"] { font-variant-numeric: tabular-nums; }
th { white-space: nowrap; }

/* Süzgeç şeridi: alanlar eşit genişlikte kırılır, düğmeler dipte hizalanır. */
.filter-row .field { flex: 1 1 180px; max-width: 320px; }
.filter-row .field input, .filter-row .field select { width: 100%; }
.filter-row > .btn { align-self: flex-end; }
.filter-row > label { align-self: flex-end; padding-bottom: 9px; }

/* İstatistik kutuları: eşit yükseklik, ikinci satır (alt bilgi) hizalı. */
.stat-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.stat-chip { display: flex; flex-direction: column; justify-content: flex-start; flex: 1 1 140px; max-width: 260px; }
.stat-chip b { line-height: 1.15; }
.stat-chip b + small { margin-top: 5px; text-transform: none; letter-spacing: 0; font-size: 10.5px; color: var(--text-faint); }

/* Kartlar: başlık ile içerik arası tutarlı boşluk. */
.card + .card { margin-top: 16px; }
.card-title { margin-bottom: 12px; }
.helptext b { color: var(--text-dim); }

/* Klavye odağı — düğme, alan, seçim. */
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .nav-item:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}
/* Yardım metinleri satır satır okunsun. */
.helptext { line-height: 1.5; }
/* Dar ekran: süzgeçler tek sütun, tablolar yatay kaydırır. */
@media (max-width: 760px) {
  .filter-row .field { flex: 1 1 100%; max-width: none; }
  .stat-chip { flex: 1 1 calc(50% - 10px); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Rapor tabloları: kampanya adı sütunu daralmasın, işlem düğmeleri kesilmesin. */
#campaign-report-table table { min-width: 0; }
#campaign-report-table td:nth-child(2) { min-width: 140px; }
#campaign-report-table td:last-child .btn-row { flex-wrap: wrap; gap: 4px; }
#campaign-report-table td:last-child .btn { white-space: nowrap; }
#campaign-report-table .btn-row { flex-wrap: nowrap; gap: 6px; }
/* Üst şerit 8 kutuya kadar tek satırda kalsın. */
.stat-strip .stat-chip { flex: 1 1 118px; min-width: 118px; max-width: 220px; padding: 10px 12px; }
.stat-strip .stat-chip b { font-size: clamp(14.5px, 1.3vw, 19px); }
/* Kazanç kırılımı: başlıklar ve satırlar sola yaslı, sayılar sağda. */
#profit-explain td { text-align: left; }
#profit-explain td:last-child { text-align: right; }
#profit-explain tr:hover td { background: transparent; }
#profit-explain .helptext, #profit-explain > .helptext { text-align: left; }

/* Müşteri kampanya listesi: dağılım çubuğu ve açılır İndir menüsü. */
.cmp-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.07); }
.cmp-bar i { display: block; height: 100%; }
.cmp-list td:nth-child(2) { min-width: 140px; }
.cmp-list td:first-child { white-space: nowrap; }
.menu-wrap { position: relative; display: inline-block; }
.menu-wrap .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 250px; background: var(--card-3); border: 1px solid var(--line-strong); border-radius: 10px; padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.menu-wrap .menu a { display: block; padding: 9px 12px; border-radius: 7px; font-size: 12.5px; color: var(--text); text-decoration: none; white-space: nowrap; }
.menu-wrap .menu a:hover { background: rgba(41,215,231,.10); color: #fff; }
/* Detay rapor: grafik tam genişlik, yanında sonuç dağılımı. */
#view-detail-report .grid-2 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1000px) { #view-detail-report .grid-2 { grid-template-columns: 1fr; } }
.dagilim-satir { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 10px; margin: 9px 0; font-size: 12.5px; }
.dagilim-satir .cmp-bar { height: 10px; }
.dagilim-satir b { text-align: right; font-family: 'DM Mono', monospace; }

/* ===== MÜŞTERİ RAPOR EKRANLARI — 2026-09-05 (sağlayıcı paneli düzeni) =====
   Üstte sayı kutuları (5'li şerit eşit genişlik), altında süzgeç kartı,
   altında tablo. "Tarih/Saat" hücresi iki satır: gün kalın, saat küçük. */
.stat-strip-5 .stat-chip { flex: 1 1 0; min-width: 0; max-width: none; }
.stat-strip-5 .stat-chip b { font-size: clamp(16px, 1.6vw, 24px); }
.stat-chip .stat-alt { margin-top: 5px; text-transform: none; letter-spacing: 0; font-size: 10.5px; color: var(--text-faint); }
@media (max-width: 900px) { .stat-strip-5 .stat-chip { flex: 1 1 calc(33.33% - 10px); } }
@media (max-width: 560px) { .stat-strip-5 .stat-chip { flex: 1 1 calc(50% - 10px); } }
.rapor-suzgec { padding-bottom: 14px; }
.rapor-suzgec .filter-row { margin-bottom: 0; }
.rapor-suzgec .filter-row .field { flex: 1 1 170px; max-width: 260px; }
.rapor-suzgec .btn-row { margin: 0; }
.ts { line-height: 1.25; white-space: nowrap; }
.ts b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.ts small { display: block; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
/* KAMPANYA RAPORU TABLOSU — EKRANA SIĞAR (2026-09-15).
   Eskiden sabit min-width: 1120px vardı; sütunlar sığsa bile tablo
   kendini 1120px'e zorluyor, ekran daha genişken bile yatay kaydırma
   çubuğu çıkıyordu. Artık tablo ekranı doldurur, sütunlar içeriğe göre
   daralır. Yatay kaydırma yalnızca gerçekten sığmayan dar ekranlarda
   (telefon/tablet) kalır — orada da min-width 860px'e indirildi. */
.kr-list { width: 100%; min-width: 0; table-layout: auto; }
.kr-list td, .kr-list th { padding-left: 8px; padding-right: 8px; }
/* En geniş iki sütun: kampanya adı ve başlık kırpılır, sayılar ezilmez. */
.kr-list td:nth-child(2) .helptext { max-width: 140px; }
.kr-list td:nth-child(3) { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1280px) {
  .kr-list { font-size: 12.5px; }
  .kr-list td, .kr-list th { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 1040px) { .kr-list { min-width: 0; } }
.kr-list td:first-child, .dr-list td:first-child, .lg-list td:first-child { white-space: nowrap; }
.kr-list td { vertical-align: top; padding-top: 12px; }
.kr-list th, .dr-list th, .lg-list th { white-space: normal; }
.kr-list td:last-child, .cmp-list td:last-child { white-space: nowrap; }
.dr-list { min-width: 0; width: 100%; }
.dr-list .dr-mesaj { max-width: 260px; white-space: normal; overflow-wrap: anywhere; }
.lg-list { min-width: 0; width: 100%; }
.menu-wrap .menu a { white-space: nowrap; }


/* ===== SMS GÖNDERİMİ DURUM ŞERİDİ (müşteri, 2026-09-05) =====
   Gönderim ekranlarının en üstünde: açık / saat dışı / kapalı. Müşteri
   "SMS aktif mi" diye test atmak zorunda kalmasın. Sağlayıcı adı geçmez. */
.sms-durum { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; margin-bottom: 14px;
  border: 1px solid var(--line); background: var(--card-2); }
.sms-durum .sd-isik { position: relative; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; background: var(--text-faint); }
.sms-durum .sd-isik::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; opacity: .35; }
.sms-durum .sd-metin { flex: 1; min-width: 0; }
.sms-durum .sd-baslik { font-weight: 700; font-size: 13.5px; color: #fff; letter-spacing: .01em; }
.sms-durum .sd-alt { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.sms-durum .sd-zaman { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; font-family: 'DM Mono', monospace; }
.sms-durum.acik { border-color: rgba(46, 213, 137, .35); background: linear-gradient(90deg, rgba(46,213,137,.10), rgba(46,213,137,.02)); }
.sms-durum.acik .sd-isik { background: var(--green); color: var(--green); box-shadow: 0 0 10px rgba(46,213,137,.7); }
.sms-durum.acik .sd-isik::after { animation: sd-nabiz 2s ease-out infinite; }
.sms-durum.saat { border-color: rgba(255,179,108,.4); background: linear-gradient(90deg, rgba(255,179,108,.12), rgba(255,179,108,.02)); }
.sms-durum.saat .sd-isik { background: var(--gold); color: var(--gold); box-shadow: 0 0 10px rgba(255,179,108,.6); }
.sms-durum.kapali { border-color: rgba(255,92,108,.45); background: linear-gradient(90deg, rgba(255,92,108,.14), rgba(255,92,108,.03)); }
.sms-durum.kapali .sd-isik { background: var(--red); color: var(--red); box-shadow: 0 0 10px rgba(255,92,108,.6); }
.sms-durum.kapali .sd-baslik { color: #ffd2d7; }
@keyframes sd-nabiz { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sms-durum .sd-isik::after { animation: none; } }
.online-pill.is-off { border-color: rgba(255,92,108,.5); color: #ffb3bb; }
.online-pill.is-off i { background: var(--red); box-shadow: 0 0 8px var(--red); }
.online-pill.is-warn { border-color: rgba(255,179,108,.5); color: #ffd7b0; }
.online-pill.is-warn i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* "MÜŞTERİ GÖZÜYLE" ANAHTARI — süpervizör rapor ekranları (2026-09-12).
   Açıkken rapor, müşterinin kendi panelinde gördüğü hâle döner. */
.mg-switch { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none;
             font-size:12px; font-weight:600; color:var(--text-dim); white-space:nowrap; }
.mg-switch input { position:absolute; opacity:0; width:0; height:0; }
.mg-switch .mg-track { width:42px; height:24px; border-radius:99px; border:2px solid var(--line);
                       background:var(--card-2); position:relative; transition:border-color .15s, background .15s; flex:0 0 auto; }
.mg-switch .mg-track::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%;
                              background:var(--text-dim); transition:left .15s, background .15s; }
.mg-switch input:checked + .mg-track { border-color:var(--cyan); background:rgba(41,215,231,.14); }
.mg-switch input:checked + .mg-track::after { left:21px; background:var(--cyan); box-shadow:0 0 8px rgba(41,215,231,.6); }
.mg-switch input:focus-visible + .mg-track { outline:2px solid var(--cyan); outline-offset:2px; }
.mg-switch.is-on { color:var(--cyan); }

/* KISALTILMIŞ BÜYÜK SAYI (bkz. app.js → kisaSayilariUygula): tam değer
   ipucu olarak (title) durur, ekranda "1,93 mn" gibi okunur bir biçim var. */
.stat-chip b[data-tam] { cursor: help; }
.stat-chip b .birim { font-size: .58em; font-weight: 600; letter-spacing: .01em; color: var(--text-dim); margin-left: 4px; }

/* TAM RAKAM (2026-09-14): üst kutularda kısaltma kaldırıldı, "2.487.124"
   gibi 9-10 haneli sayılar yazılıyor. Kutu daralınca rakam küçülsün ama
   ASLA satır kırmasın — okunurluk boyuttan değil, bütünlükten gelir. */
.stat-chip b { overflow: hidden; text-overflow: clip; }
@media (max-width: 1100px) {
  .stat-strip-5 .stat-chip b { font-size: clamp(15px, 2.1vw, 20px); }
  .stat-chip b { font-size: clamp(14px, 1.9vw, 18px); }
}

/* Kredi yükleme kısayolları (100k / 1mn …) */
.tutar-kisayol { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tutar-kisayol button {
  font: 600 12.5px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  padding: 7px 11px; border-radius: 8px; cursor: pointer;
  color: var(--text-dim); background: var(--surface-2, rgba(255,255,255,.04));
  border: 1px solid var(--border); transition: all .12s ease;
}
.tutar-kisayol button:hover { color: var(--text); border-color: var(--accent, #39d69d); }
.tutar-kisayol button.secili { color: #06231a; background: var(--num-ok); border-color: var(--num-ok); }
.tutar-onizleme { margin-top: 7px; font: 700 14px/1.2 'Plus Jakarta Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--text-dim); min-height: 17px; }
.tutar-onizleme.arti { color: var(--num-ok); }
.tutar-onizleme.eksi { color: var(--num-bad); }

/* Genel Bakış kutuları da TAM rakam gösteriyor (2.545.740). Dar ekranda
   rakam küçülür ama satır kırmaz. */
@media (max-width: 1250px) { .metric-num { font-size: clamp(15px, 2vw, 19px); } }

/* Kilitli sekme (örn. Postgres yokken "Tek kampanya" modu) */
.tabs .tab.disabled { opacity: .45; cursor: not-allowed; }
.tabs .tab.disabled:hover { color: var(--text-dim); border-color: var(--border); }

/* ===== EKRANA SIĞAN TABLOLAR — 2026-09-18 (süpervizör isteği: "hiçbir yerde
   kaydırma istemiyorum"). Tablo genişliği %100'e sabit; metin hücreleri
   (kampanya adı, mesaj, müşteri) SATIR KIRAR, sayı hücreleri tek satır kalır.
   Böylece 14 sütunlu Kampanya Raporu bile geniş ekrana sığar. Mesaj artık
   40/60/90 karakterde kesilmiyor, tamamı okunur. ===== */
.table-wrap { overflow-x: hidden; }
.table-wrap table { width: 100%; table-layout: auto; }
.table-wrap td { white-space: normal; overflow-wrap: anywhere; }
.table-wrap td.mono, .table-wrap td[style*="text-align:right"], .table-wrap td[style*="nowrap"] { white-space: nowrap; }
.table-wrap td .pill { white-space: nowrap; }
.table-wrap td.td-metin { min-width: 160px; max-width: 26vw; width: 24%; }
.table-wrap td:not(.td-metin) .helptext { white-space: nowrap; }
#campaign-report-table td:nth-child(6) { min-width: 96px; }
#campaign-report-table td:nth-child(6) .helptext { white-space: nowrap; }
#campaign-report-table td:last-child { min-width: 110px; }
#campaign-report-table td:last-child .btn-row { flex-wrap: nowrap; }
#campaign-report-table td:last-child .btn-sm { padding: 4px 8px; font-size: 12px; line-height: 1; }
.table-wrap td.td-metin b { display: block; overflow-wrap: anywhere; }
/* Mesaj: varsayılan 2 satır (satır boyu şişmesin), tıklayınca tamamı açılır. */
/* Mesaj HEP TAM görünür (süpervizör isteği, 2026-09-18): küçük punto, sık
   satır aralığı — satır fazla uzamaz ama metin hiç kesilmez. Tıklayınca
   2 satıra katlanır, tekrar tıklayınca açılır. */
.mesaj-tam { font-size: 10.5px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 3px; color: var(--text-dim); cursor: pointer; display: block; }
.mesaj-tam:hover { color: var(--text); }
.mesaj-tam:not(.acik) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mesaj-tam:not(.acik):not(:empty)::before { content: "▸ "; color: var(--cyan, #29d7e7); font-size: 9px; }
.dr-list .dr-mesaj { max-width: 340px; }
.table-wrap td.td-metin .helptext { margin-top: 2px; }
th { white-space: normal; line-height: 1.2; }
.table-wrap th, .table-wrap td { padding-right: 8px; }
/* Dar ekranda tabloyu küçülterek sığdır — kaydırma yerine. */
@media (max-width: 1750px) { .table-wrap th { font-size: 9px; } .table-wrap td { font-size: 11.5px; padding-top: 9px; padding-bottom: 9px; } .table-wrap .btn-sm { padding: 4px 7px; font-size: 10.5px; } }
@media (max-width: 1400px) { .table-wrap td { font-size: 11px; } .table-wrap td.td-metin { max-width: 14vw; } .table-wrap .helptext { display: none; } }

/* HİÇBİR TABLO KABINDAN GENİŞ OLMASIN (2026-09-18, "tüm her şey ekrana sığmalı"). */
.table-wrap table, .table-wrap > div > table { min-width: 0 !important; max-width: 100%; }
.table-wrap { scrollbar-gutter: stable; }
.table-wrap th { padding-right: 6px; }

/* GENİŞ EKRAN: içerik kenarlara kadar, tablo tam genişlik (2026-09-18). */
.stat-chip { max-width: none; }
.stat-strip .stat-chip { max-width: none; }
.filter-row .field { max-width: none; }
.rapor-suzgec .filter-row .field { max-width: none; }