:root {
  --bg:        #0d0f12;
  --bg-2:      #14171c;
  --panel:     #171b21;
  --card:      #1b2029;
  --card-2:    #20262f;
  --line:      #2a313c;
  --line-2:    #363f4c;
  --txt:       #e7ebf0;
  --txt-2:     #a3adba;
  --muted:     #6b7684;
  --accent:    #e2583e;   /* Socialand kiremit */
  --accent-2:  #f0805f;
  --accent-dim:#3a2019;
  --green:     #3fb27f;
  --amber:     #e0a13f;
  --red:       #e2583e;
  --blue:      #4f8cf0;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 4px 20px rgba(0,0,0,.35);
  --mono:      ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin:0; height:100%; }
body {
  font-family: var(--sans);
  background: radial-gradient(1200px 600px at 80% -10%, #1a1f27 0%, var(--bg) 55%) fixed;
  color: var(--txt);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
#app { min-height:100%; display:flex; flex-direction:column; }

/* ---------- TOPBAR ---------- */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 22px;
  border-bottom:1px solid var(--line);
  background: rgba(20,23,28,.7);
  backdrop-filter: blur(8px);
  position: sticky; top:0; z-index:20;
}
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark {
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:grid; place-items:center; color:#fff; font-size:18px;
  box-shadow: 0 4px 14px rgba(226,88,62,.4);
}
.brand-title { font-weight:700; font-size:15px; letter-spacing:.2px; }
.brand-sub { font-size:11px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }

.quota { display:flex; align-items:center; gap:12px; }
.quota-ring { position:relative; width:46px; height:46px; }
.ring { width:46px; height:46px; transform: rotate(0deg); }
.ring-bg { fill:none; stroke:var(--line); stroke-width:3.2; }
.ring-fg { fill:none; stroke:var(--green); stroke-width:3.2; stroke-linecap:round;
  stroke-dasharray: 100 100; stroke-dashoffset:100; transition: stroke-dashoffset .4s, stroke .4s; }
.quota-pct { position:absolute; inset:0; display:grid; place-items:center; font-size:10px; font-weight:700; }
.quota-meta { font-size:12px; line-height:1.5; }
.quota-meta b { font-variant-numeric: tabular-nums; }

/* ---------- LAYOUT ---------- */
.grid {
  display:grid; grid-template-columns: 380px 1fr; gap:18px;
  padding:18px 22px; flex:1; align-items:start;
}
.panel { min-width:0; }
.controls { display:flex; flex-direction:column; gap:14px; position:sticky; top:78px; }

.card {
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
}
.card h3 {
  margin:0 0 12px; font-size:13px; font-weight:600; color:var(--txt);
  display:flex; align-items:center; gap:8px;
}
.count-badge {
  background: var(--accent-dim); color: var(--accent-2);
  border-radius: 20px; padding: 1px 9px; font-size:11px; font-weight:700;
  font-variant-numeric: tabular-nums;
}

/* ---------- FORM ---------- */
.field { position:relative; display:flex; }
input, textarea, select {
  width:100%; background: var(--bg-2); border:1px solid var(--line);
  color:var(--txt); border-radius: var(--radius-sm); padding:9px 11px;
  font-size:13px; font-family: var(--sans); outline:none; transition: border-color .15s;
}
input:focus, textarea:focus { border-color: var(--accent); }
input[type="date"] { color-scheme: dark; }
textarea { resize:vertical; font-family: var(--mono); font-size:12px; }
.btn-icon {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:15px; opacity:.6;
}
.lbl { display:block; font-size:11px; color:var(--txt-2); margin:14px 0 6px; font-weight:500; }
.chk { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--txt-2); margin:8px 0; cursor:pointer; }
.chk input { width:auto; }
.hint { font-size:11px; color:var(--muted); margin:10px 0 0; line-height:1.5; }
.small { font-size:11px; }

.row { display:flex; align-items:center; }
.gap { gap:8px; }
.row.gap { margin-top:10px; }

/* buttons */
.btn {
  border:1px solid var(--line-2); background: var(--card-2); color:var(--txt);
  padding:9px 14px; border-radius: var(--radius-sm); cursor:pointer; font-size:13px;
  font-weight:500; transition: all .15s; font-family:var(--sans);
}
.btn:hover { border-color:var(--accent); background:var(--card); }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border:none; color:#fff; font-weight:600; }
.btn.primary:hover { filter:brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { color:var(--red); border-color:transparent; }
.btn.danger:hover { border-color:var(--red); background: rgba(226,88,62,.08); }
.btn.big { flex:1; padding:12px; font-size:14px; }
.btn:disabled { opacity:.4; cursor:not-allowed; }

.pill {
  font-size:11px; padding:3px 9px; border-radius:20px; font-weight:600;
  background: var(--card-2); border:1px solid var(--line);
}
.pill.muted { color:var(--muted); }
.pill.ok { color:var(--green); border-color: rgba(63,178,127,.4); background: rgba(63,178,127,.1); }
.pill.err { color:var(--red); border-color: rgba(226,88,62,.4); background: rgba(226,88,62,.1); }
.muted { color: var(--muted); }

/* date presets */
.quick-dates { display:flex; gap:6px; margin-top:8px; }
.chip {
  background: var(--card-2); border:1px solid var(--line); color:var(--txt-2);
  padding:5px 10px; border-radius:20px; font-size:11px; cursor:pointer; transition: all .15s;
}
.chip:hover { border-color: var(--accent); color: var(--txt); }

/* segmented */
.segmented { display:flex; background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-sm); padding:3px; gap:3px; }
.seg { flex:1; border:none; background:none; color:var(--txt-2); padding:8px; border-radius:6px; cursor:pointer; font-size:12px; font-weight:500; transition: all .15s; }
.seg.active { background: var(--accent); color:#fff; }

details.adv { margin-top:14px; border-top:1px solid var(--line); padding-top:6px; }
details.adv summary { cursor:pointer; font-size:12px; color:var(--txt-2); padding:6px 0; }
details.adv[open] summary { color: var(--accent-2); }

/* pool list */
.pool-list { margin-top:10px; display:flex; flex-direction:column; gap:4px; max-height:180px; overflow:auto; }
.pool-item { display:flex; align-items:center; justify-content:space-between; gap:8px; background: var(--bg-2); border:1px solid var(--line); border-radius:6px; padding:6px 9px; font-size:12px; }
.pool-item .pi-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pool-item .pi-id { font-family:var(--mono); font-size:10px; color:var(--muted); }
.pool-item button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; }
.pool-item button:hover { color: var(--red); }
.pool-item.resolved { border-color: rgba(63,178,127,.3); }

/* run */
.run-card { display:flex; flex-wrap:wrap; gap:8px; }
.progress-wrap { width:100%; margin-top:6px; }
.progress { height:6px; background: var(--bg-2); border-radius:20px; overflow:hidden; }
.progress-bar { height:100%; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s; }

/* ---------- RESULTS ---------- */
.results { background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; min-height: 70vh; }
.results-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tabs, .results-actions { display:flex; align-items:center; gap:8px; }
.tab { background:none; border:none; color:var(--txt-2); padding:8px 12px; border-radius:6px; cursor:pointer; font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; }
.tab.active { background: var(--card); color: var(--txt); }
.results-actions input[type="search"] { width:180px; }
.facet { width:auto; min-width:120px; padding:7px 9px; font-size:12px; background:var(--card-2); border-color:var(--line-2); cursor:pointer; }
.facet:focus { border-color:var(--accent); }

/* kanal meta (video tablosunda) + kategori chip + cinsiyet */
.ch-meta { display:flex; align-items:center; gap:5px; margin-top:4px; flex-wrap:wrap; }
.cat-chip { font-size:10px; padding:2px 7px; border-radius:5px; background:var(--card-2); border:1px solid var(--line-2); color:var(--txt-2); white-space:nowrap; }
.g { font-size:10px; padding:2px 6px; border-radius:5px; white-space:nowrap; font-weight:600; }
.g-f { background:rgba(224,88,180,.14); border:1px solid rgba(224,88,180,.4); color:#e879c4; }
.g-m { background:rgba(79,140,240,.14); border:1px solid rgba(79,140,240,.4); color:#7ba9f5; }
.g-u { background:var(--card-2); border:1px solid var(--line); color:var(--muted); }

/* kanallar tablosu — elle düzeltme select'leri */
.mini-sel { width:auto; min-width:120px; padding:5px 7px; font-size:11.5px; background:var(--bg-2); border-color:var(--line); cursor:pointer; }
.mini-sel:focus { border-color:var(--accent); }
.edited-dot { color:var(--accent-2); font-size:11px; margin-left:4px; }

.stat-strip { display:flex; gap:0; border-bottom:1px solid var(--line); background: var(--bg-2); }
.stat { flex:1; padding:12px 16px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.stat:last-child { border-right:none; }
.stat-num { font-size:20px; font-weight:700; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

.tab-pane { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.tab-pane[hidden] { display:none; }
.table-scroll { overflow:auto; flex:1; }
table.data { width:100%; border-collapse: collapse; font-size:12.5px; }
table.data thead th {
  position:sticky; top:0; background: var(--card); z-index:5; text-align:left;
  padding:10px 12px; font-weight:600; color:var(--txt-2); font-size:11px; text-transform:uppercase;
  letter-spacing:.4px; cursor:pointer; user-select:none; white-space:nowrap; border-bottom:1px solid var(--line);
}
table.data thead th.num { text-align:right; }
table.data thead th:hover { color: var(--txt); }
table.data thead th.sorted::after { content:" ▾"; color: var(--accent); }
table.data thead th.sorted.asc::after { content:" ▴"; }
table.data tbody td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
table.data tbody td.num { text-align:right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: rgba(255,255,255,.02); }
table.data a { color: var(--accent-2); text-decoration:none; }
table.data a:hover { text-decoration:underline; }
.vid-title { max-width:340px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-name { font-weight:500; white-space:nowrap; }

/* signal tags */
.tags { display:flex; flex-wrap:wrap; gap:4px; max-width:230px; }
.tag { font-size:10px; padding:2px 7px; border-radius:5px; background: var(--card-2); border:1px solid var(--line); color:var(--txt-2); white-space:nowrap; }
.tag.paid { background: rgba(226,88,62,.15); border-color: rgba(226,88,62,.5); color: var(--accent-2); font-weight:600; }
.tag.kw   { background: rgba(224,161,63,.12); border-color: rgba(224,161,63,.35); color: var(--amber); }
.tag.code { background: rgba(79,140,240,.12); border-color: rgba(79,140,240,.35); color: var(--blue); }
.tag.link { background: rgba(63,178,127,.12); border-color: rgba(63,178,127,.35); color: var(--green); }
.brand-chip { font-size:11px; padding:2px 8px; border-radius:5px; background: var(--accent-dim); color: var(--accent-2); margin:2px 2px 0 0; display:inline-block; font-weight:500; }

/* score */
.score { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-variant-numeric: tabular-nums; }
.score-dot { width:8px; height:8px; border-radius:50%; }
.s-high .score-dot { background: var(--red); }
.s-mid  .score-dot { background: var(--amber); }
.s-low  .score-dot { background: var(--muted); }
.s-high { color: var(--accent-2); }
.s-mid  { color: var(--amber); }
.s-low  { color: var(--muted); }

.empty { padding:48px 24px; text-align:center; color:var(--muted); font-size:13px; }

/* footer */
.foot { display:flex; justify-content:space-between; padding:10px 22px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); }

/* toast */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background: var(--card); border:1px solid var(--line-2); color:var(--txt); padding:12px 20px; border-radius:10px; box-shadow: var(--shadow); z-index:100; font-size:13px; max-width:420px; }
.toast.err { border-color: var(--red); }
.toast.ok  { border-color: var(--green); }

@media (max-width: 980px) {
  .grid { grid-template-columns: 1fr; }
  .controls { position:static; }
  .results-actions input[type="search"] { width:140px; }
}
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius:10px; border:2px solid var(--panel); }
::-webkit-scrollbar-track { background: transparent; }