/*
  Miner's Reign yönetim paneli — açık içerik alanı, koyu lacivert kenar çubuğu, turuncu vurgu.
  Kırılımlar: ≥1200 tam düzen · 768–1199 metrik/eylem 2×2, alt bölümler tek sütun · <768 kenar çubuğu çekmece,
  her şey tek sütun, dokunma hedefleri ≥44 px. Satır içi stil yok (CSP style-src 'self').
  Renk çiftleri WCAG AA: metin/zemin en az 4.5:1 (büyük ve kalın yazıda 3:1).
*/
:root{
  --bg:#f3f5f8; --card:#fff; --line:#e2e7ee; --line2:#cfd7e2;
  --ink:#0f172a; --dim:#556070; --faint:#8a94a3;
  --side:#0f1b2d; --side2:#16263d; --side-ink:#d5deea; --side-dim:#8d9bb0;
  --accent:#ea580c; --accent-strong:#c2410c; --accent-soft:#fff1e8; --accent-line:#fdd3b8;
  --good:#15803d; --good-dot:#22c55e; --good-soft:#e8f6ed;
  --bad:#b91c1c; --bad-soft:#fdeceb; --warn:#a16207; --warn-soft:#fdf6e3;
  --band:#0f1b2d; --band-ink:#e6edf6; --band-dim:#9fb0c6; --band-line:rgba(255,255,255,.12);
  --field:#fff; --focus:#2563eb;
  --hover:#f8fafc; --chip:#eef2f7; --chip-ink:#334155; --track:#e7ecf2; --topbar-bg:rgba(243,245,248,.94);
  --disabled:#f1f4f8; --placeholder:#677080; --btn:#c2410c; --btn-hover:#9a3412; --btn-ink:#fff;
  --bad-line:#f3b7b2; --good-line:#a9dcb9; --warn-line:#f0dca2; --bad-ink:#7f1d1d; --good-ink:#14532d;
  --info:#1d4ed8; --info-soft:#e8effd; --shadow:rgba(15,23,42,.08); --mask:rgba(15,23,42,.55);
  --c1:#ea580c; --c2:#15803d; --c3:#2563eb; --c4:#9333ea;
  /* tipografi ölçeği ve boşluklar: bütün bileşenler bunlardan */
  --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:26px;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --r:12px; --side-w:248px; --hit:44px;
}
/* koyu tema: sistem tercihi (seçim "sistem" iken) ya da elle seçim; kenar çubuğu ve bant her temada koyu */
:root[data-tema="koyu"]{
  --bg:#0b1220; --card:#121a2b; --line:#24324a; --line2:#34445f;
  --ink:#e6edf6; --dim:#a3b1c6; --faint:#7d8ca4;
  --accent:#f97316; --accent-strong:#fdba74; --accent-soft:#2d1b10; --accent-line:#7c3a12;
  --good:#4ade80; --good-dot:#22c55e; --good-soft:#0f2a1b; --bad:#f87171; --bad-soft:#341416; --warn:#fbbf24; --warn-soft:#30250b;
  --band:#0a1424; --field:#0e1627; --focus:#60a5fa;
  --hover:#172238; --chip:#1c2840; --chip-ink:#cbd5e1; --track:#24324a; --topbar-bg:rgba(11,18,32,.92);
  --disabled:#172238; --placeholder:#8e9bb0; --btn:#c2410c; --btn-hover:#ea580c; --btn-ink:#fff;
  --bad-line:#7f2a2a; --good-line:#1f6b3d; --warn-line:#6b5512; --bad-ink:#fecaca; --good-ink:#bbf7d0;
  --info:#93c5fd; --info-soft:#13264a; --shadow:rgba(0,0,0,.45); --mask:rgba(0,0,0,.65);
  --c1:#fb923c; --c2:#4ade80; --c3:#60a5fa; --c4:#c084fc;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="acik"]){
  --bg:#0b1220; --card:#121a2b; --line:#24324a; --line2:#34445f;
  --ink:#e6edf6; --dim:#a3b1c6; --faint:#7d8ca4;
  --accent:#f97316; --accent-strong:#fdba74; --accent-soft:#2d1b10; --accent-line:#7c3a12;
  --good:#4ade80; --good-dot:#22c55e; --good-soft:#0f2a1b; --bad:#f87171; --bad-soft:#341416; --warn:#fbbf24; --warn-soft:#30250b;
  --band:#0a1424; --field:#0e1627; --focus:#60a5fa;
  --hover:#172238; --chip:#1c2840; --chip-ink:#cbd5e1; --track:#24324a; --topbar-bg:rgba(11,18,32,.92);
  --disabled:#172238; --placeholder:#8e9bb0; --btn:#c2410c; --btn-hover:#ea580c; --btn-ink:#fff;
  --bad-line:#7f2a2a; --good-line:#1f6b3d; --warn-line:#6b5512; --bad-ink:#fecaca; --good-ink:#bbf7d0;
  --info:#93c5fd; --info-soft:#13264a; --shadow:rgba(0,0,0,.45); --mask:rgba(0,0,0,.65);
  --c1:#fb923c; --c2:#4ade80; --c3:#60a5fa; --c4:#c084fc;
  color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--ui);-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body.kilitli{overflow:hidden}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.01em}
a{color:var(--accent-strong)}
code,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--dim)}
.small{font-size:13px}
.grow{flex:1;min-width:0}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.nowrap{white-space:nowrap}
.sep{height:1px;background:var(--line);margin:14px 0}
.flat{margin:0}
.only-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- odak: her etkileşimli öğede görünür halka ---- */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.side :focus-visible{outline-color:#93c5fd}

/* ---- form öğeleri ---- */
button{font:inherit;color:inherit;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;border:1px solid var(--line2);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 14px;font-weight:600;line-height:1.2}
.btn:hover{border-color:var(--faint);background:var(--hover)}
.btn.primary{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.btn.primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn.danger{border-color:var(--bad-line);color:var(--bad);background:var(--bad-soft)}
.btn.danger:hover{border-color:var(--bad)}
.btn.good{border-color:var(--good-line);color:var(--good);background:var(--good-soft)}
.btn.ghost{background:transparent}
.btn.small{min-height:32px;padding:5px 11px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.on{border-color:var(--accent-strong);color:var(--accent-strong);background:var(--accent-soft)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--line2);border-radius:10px;padding:8px 11px;max-width:100%;min-height:38px}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input[type=number]{font-variant-numeric:tabular-nums}
input:disabled,select:disabled,textarea:disabled{background:var(--disabled);color:var(--dim)}
textarea{resize:vertical;min-height:84px;line-height:1.5;width:100%;display:block}
label.fld{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:13px;color:var(--dim)}
label.fld > input,label.fld > select,label.fld > textarea{color:var(--ink);font-weight:400}
.iconbtn svg{width:20px;height:20px}
.iconbtn{display:inline-grid;place-items:center;width:var(--hit);height:var(--hit);border:0;border-radius:10px;background:transparent;color:inherit;font-size:20px;line-height:1;flex:0 0 auto}
.iconbtn:hover{background:rgba(255,255,255,.08)}
.topbar .iconbtn:hover{background:var(--chip)}

/* ---- logo işareti (kendi baş harfimiz) ---- */
.mark{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--accent);color:#fff;font:800 19px/1 var(--ui);flex:0 0 auto}

/* ---- giriş ---- */
#login{max-width:420px;margin:10vh auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
#login .card{display:flex;flex-direction:column;gap:12px;padding:22px}
#login h1{font-size:24px;font-weight:700}
#login .btn.primary{min-height:var(--hit)}

/* ---- kabuk ---- */
#app{min-height:100vh}
.side{position:fixed;inset:0 auto 0 0;width:var(--side-w);background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;z-index:60}
.logo{display:flex;align-items:center;gap:10px;padding:16px 14px 12px}
.logo b{display:block;font-size:15px;color:#fff}
.logo small{display:block;font-size:12px;color:var(--side-dim)}
#nav{flex:1;overflow-y:auto;padding:4px 10px 12px;overscroll-behavior:contain}
.navgrp{margin:14px 10px 4px;font-size:12px;font-weight:600;color:var(--side-dim)}
#nav button{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:40px;text-align:left;border:0;background:none;color:var(--side-ink);border-radius:9px;padding:8px 10px;font-size:14px;font-weight:500}
#nav button:hover{background:rgba(255,255,255,.06);color:#fff}
#nav button.on{background:var(--side2);color:#fff;font-weight:600}
#nav button.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
#nav .ico{width:20px;text-align:center;opacity:.9;font-size:15px;flex:0 0 auto}
#nav .pill{margin-left:auto;background:var(--accent);color:#fff;font:700 11px/18px var(--ui);min-width:20px;height:18px;border-radius:9px;padding:0 6px;text-align:center}
.sidebtn{margin:0 10px 8px;min-height:38px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:transparent;color:var(--side-ink);font-size:13px;font-weight:500;padding:6px 10px}
.sidebtn:hover{background:rgba(255,255,255,.06);color:#fff}
.me{display:flex;align-items:center;gap:10px;padding:12px 10px 12px 14px;border-top:1px solid rgba(255,255,255,.08)}
.me b{display:block;font-size:14px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me small{display:block;font-size:12px;color:var(--side-dim)}
.avatar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#2a3d5a;color:#fff;font-weight:700;flex:0 0 auto}
.scrim{position:fixed;inset:0;background:rgba(10,18,30,.5);z-index:55}
.mainwrap{margin-left:var(--side-w);min-width:0;min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 24px;background:var(--topbar-bg);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(6px)}
.topbar .world{font-size:13px;color:var(--dim)}
.topbar select{min-height:36px;padding:5px 10px}
.mobil{display:none}
main{padding:22px 24px 40px;min-width:0;outline:none}
.viewhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.viewhead h2{font-size:26px;font-weight:700}

/* ---- şerit / bildirim ---- */
#bar{position:fixed;left:0;right:0;top:0;z-index:100;display:flex;gap:10px;align-items:center;padding:12px 16px;background:var(--bad-soft);border-bottom:2px solid var(--bad);color:var(--bad-ink);font-weight:600}
#bar.good{background:var(--good-soft);border-bottom-color:var(--good);color:var(--good-ink)}
/* kısmi sonuç: işlem yapıldı ama bir kısmı ulaşmadı — hata kırmızısı değil, uyarı amberi */
#bar.kismi{background:var(--warn-soft);border-bottom-color:var(--warn);color:var(--warn)}
#bar button{border:1px solid currentColor;background:transparent;border-radius:8px;padding:4px 10px;font-weight:600;min-height:32px}

/* ---- genel bakış: üst bant ---- */
.band{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:1px;background:#2a3a52;color:var(--band-ink);border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
/* bölücü çizgiler 1 px aralıktan (her kırılımda kendiliğinden doğru) */
.band > *{padding:18px 20px;min-width:0;background:var(--band)}
.band .hello{font-size:19px;font-weight:700;color:#fff}
.band .status{display:flex;align-items:center;gap:7px;margin:4px 0 12px;font-size:13px;color:var(--band-dim)}
.band dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:13px}
.band dt{color:var(--band-dim)}
.band dd{margin:0;font-family:var(--mono);color:var(--band-ink);overflow-wrap:anywhere}
.bm-top{display:flex;align-items:baseline;gap:4px 10px;justify-content:space-between;flex-wrap:wrap}
.bm-head{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--band-dim);min-width:0}
.bm-head .grow{overflow-wrap:anywhere}
.bm-val{font-size:26px;font-weight:700;color:#fff;margin:0 0 10px auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.bm-val.bad{color:#fca5a5}
.meter{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.meter i{display:block;height:100%;background:var(--good-dot)}
.meter i.hot{background:#f97316}
.bm-sub{font-size:12.5px;color:var(--band-dim);margin-top:6px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#94a3b8;margin-right:5px;flex:0 0 auto}
.dot.on{background:var(--good-dot)}
.dot.off{background:#ef4444}
.dot.warn{background:#f59e0b}

/* ---- hızlı eylemler ---- */
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.qa{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-height:72px;color:var(--ink)}
.qa:hover{border-color:var(--accent-line);box-shadow:0 2px 8px var(--shadow)}
.qa .qi{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--accent-soft);color:var(--accent-strong);font-size:19px;flex:0 0 auto}
.qa b{display:block;font-size:14.5px}
.qa small{display:block;font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qa span.grow{min-width:0}

/* ---- alt bölümler ---- */
.duo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}
.cardhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cardhead h3{font-size:16px;font-weight:700}
.linkbtn{border:0;background:none;color:var(--accent-strong);font-weight:600;font-size:13px;padding:6px 4px;min-height:32px}
.linkbtn:hover{text-decoration:underline}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px}
.strip > div{padding:12px 14px;min-width:0;background:var(--card)}
.strip b{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.strip span{font-size:12.5px;color:var(--dim)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line);min-width:0}
.list li:first-child{border-top:0}
.list .nm{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.list .ver{font-family:var(--mono);font-size:12.5px;color:var(--dim);white-space:nowrap}
.list .st{display:inline-flex;align-items:center;font-size:13px;color:var(--dim);white-space:nowrap}
.emptybox{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 12px;text-align:center;color:var(--dim)}
.emptybox .qi{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent-strong);font-size:21px}

/* ---- metrik kartları / grafikler (diğer bölümler) ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;min-width:0}
.metric .k{font-size:12.5px;color:var(--dim);font-weight:600}
.metric .v{font-size:24px;font-weight:700;color:var(--ink);margin-top:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.metric .v.good{color:var(--good)} .metric .v.bad{color:var(--bad)} .metric .v.plain{color:var(--ink)}
.metric .s{font-size:12.5px;color:var(--dim);margin-top:2px}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.chart{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px;min-width:0}
.chart h4{font-size:14px;font-weight:600}
.chart .last{font-size:18px;font-weight:700;color:var(--accent-strong);font-variant-numeric:tabular-nums}
.chart svg{display:block;width:100%;height:64px;margin-top:6px}
.chart .izgara{stroke:var(--line)} .chart .alan{fill:var(--c1);opacity:.12} .chart .cizgi{fill:none;stroke:var(--c1)} .chart .nokta{fill:var(--c1)} .chart .eksen{fill:var(--dim)}
.bar{height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;background:var(--good-dot)}
.bar i.hot{background:#f97316}

/* ---- tablolar: geniş ekranda tablo, dar ekranda yatay kaydırma ---- */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--dim);font-weight:600;font-size:12.5px;white-space:nowrap;position:sticky;top:0;background:var(--hover);z-index:1}
tbody tr:hover{background:var(--hover)}
tr.pick{cursor:pointer}
/* denetim kaydı ayrıntısı: uzun JSON hücreden taşmaz, kırılarak sarılır; tamamı açılır kutuda, yüksekliği sınırlı */
td.ayrinti{min-width:220px;max-width:520px;overflow-wrap:anywhere;word-break:break-word}
td.ayrinti summary{cursor:pointer;color:var(--ink)}
td.ayrinti summary:hover{color:var(--accent)}
.ayrinti-tam{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;font:inherit;background:var(--hover);border-radius:8px;padding:8px}
tr.sel{background:var(--accent-soft)!important;box-shadow:inset 3px 0 0 var(--accent)}
.tag{display:inline-block;padding:1px 8px;border-radius:7px;font-size:12px;font-weight:600;background:var(--chip);color:var(--chip-ink);margin:1px 2px 1px 0;white-space:nowrap}
.tag.bad{background:var(--bad-soft);color:var(--bad)}
.tag.good{background:var(--good-soft);color:var(--good)}
.tag.amber{background:var(--warn-soft);color:var(--warn)}
.card.bad{border-color:var(--bad-line);background:var(--bad-soft)}
.card.amber{border-color:var(--warn-line);background:var(--warn-soft)}
.empty{padding:22px;text-align:center;color:var(--dim);font-weight:500}

/* ---- iki sütunlu düzenler ---- */
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13.5px}
.kv dt{color:var(--dim);font-weight:600}
.kv dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ---- destek yazışması ---- */
.msgs{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto;padding:2px}
.msg{border:1px solid var(--line);border-radius:12px;padding:9px 11px;background:var(--hover);max-width:92%}
.msg.staff{background:var(--accent-soft);border-color:var(--accent-line);align-self:flex-end}
.msg .who{font-size:12px;color:var(--dim);font-weight:600;margin-bottom:3px}
.msg .txt{white-space:pre-wrap;overflow-wrap:anywhere}

/* ---- denge / matematik ---- */
.tgroup{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px;margin-bottom:12px}
.tgroup > header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.tgroup h3{font-size:17px;color:var(--ink)}
.tgroup .key{font-size:12px;color:var(--dim);font-weight:600}
.flds{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.fld2{display:flex;flex-direction:column;gap:3px;min-width:0}
.fld2 .lbl{font-size:12.5px;font-weight:600;color:var(--dim)}
.fld2 .lbl code{color:var(--faint);font-size:11.5px}
.cell{position:relative;display:block}
.cell input{width:100%;min-width:82px;padding:7px 9px;font-size:13.5px}
.cell.off input{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-line) inset}
.cell.pend input{background:var(--accent-soft)}
.cell .rv{position:absolute;right:3px;top:3px;display:none;border:0;background:var(--accent-soft);color:var(--accent-strong);border-radius:6px;font-size:11px;line-height:1;padding:3px 4px}
.cell.off .rv{display:block}
.cell .rv:hover{background:var(--btn);color:var(--btn-ink)}
.subgrid{display:grid;grid-template-columns:repeat(2,minmax(56px,1fr));gap:3px 6px;min-width:146px}
.fld2 .subgrid{grid-template-columns:repeat(3,minmax(52px,1fr));border:1px dashed var(--line2);border-radius:9px;padding:6px}
.sub{display:flex;flex-direction:column;gap:1px;min-width:0}
.sub > .sl{font-size:10.5px;font-weight:600;color:var(--dim);white-space:nowrap}
.subgrid .cell input{padding:4px 6px;font-size:12.5px;min-width:50px;min-height:30px}
.subgrid .cell .rv{top:-15px;right:0;background:none;padding:0 2px;font-size:11px}
.subgrid .cell.off input{box-shadow:none}
td.ro{color:var(--dim);font-size:13px}
.rowname{font-weight:600;white-space:nowrap;position:sticky;left:0;background:var(--card);z-index:1}
.savebar{position:sticky;bottom:0;z-index:25;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--accent-line);border-radius:var(--r);padding:11px 13px;margin-top:4px;box-shadow:0 -6px 18px var(--shadow)}
.savebar b{color:var(--accent-strong);font-size:18px}

/* ---- kip (modal) ---- */
.mask{position:fixed;inset:0;z-index:80;background:var(--mask);display:grid;place-items:center;padding:16px}
.mask .box{width:min(100%,480px);max-height:90vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px var(--shadow)}
.mask h3{font-size:19px}

/* ---- giriş ekranı ve denetim ---- */
.lerr{margin:0;color:var(--bad);min-height:1.3em;font-weight:600}
input.otp{letter-spacing:.35em;font-variant-numeric:tabular-nums;max-width:12em}
.langsw{display:inline-flex;gap:4px}

/* ---- grafikler (SVG/DOM, kütüphanesiz; renkler sınıftan, temaya uyar) ---- */
.trends{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.gr{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp4);min-width:0}
.gr-head{display:flex;align-items:baseline;gap:var(--sp2);flex-wrap:wrap}
.gr-head h3{font-size:var(--fs-md);font-weight:600}
.gr-son{margin-left:auto;font-size:var(--fs-xl);font-weight:700;font-variant-numeric:tabular-nums}
.gr-alt{font-size:var(--fs-xs);color:var(--dim);margin-top:2px}
.gr-govde{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp2);margin-top:var(--sp3)}
.gr-y{display:flex;flex-direction:column;justify-content:space-between;height:140px;font-size:11px;color:var(--dim);text-align:right;font-variant-numeric:tabular-nums}
.gr-x{grid-column:2;display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:4px}
.gr svg{display:block;width:100%;height:140px}
.gr .izgara{stroke:var(--line);stroke-width:1}
.gr .eksen{fill:var(--dim);font-size:11px;font-family:var(--ui)}
.gr .cizgi{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.gr .alan{stroke:none;opacity:.12}
.gr .nokta{stroke:var(--card);stroke-width:2}
.gr-c1 .cizgi{stroke:var(--c1)} .gr-c1 .alan,.gr-c1 .nokta{fill:var(--c1)}
.gr-c2 .cizgi{stroke:var(--c2)} .gr-c2 .alan,.gr-c2 .nokta{fill:var(--c2)}
.gr-c3 .cizgi{stroke:var(--c3)} .gr-c3 .alan,.gr-c3 .nokta{fill:var(--c3)}
.gr-c4 .cizgi{stroke:var(--c4)} .gr-c4 .alan,.gr-c4 .nokta{fill:var(--c4)}
.gr-bos{display:grid;place-items:center;height:140px;color:var(--dim);font-size:var(--fs-sm);text-align:center}
.cubuklar{list-style:none;margin:var(--sp3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp2)}
.cubuklar li{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;gap:var(--sp2);align-items:center;font-size:var(--fs-sm)}
.cubuklar .ad{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cubuklar .iz{height:10px;border-radius:5px;background:var(--track);overflow:hidden}
.cubuklar .iz i{display:block;height:100%;border-radius:5px;background:var(--c3)}
.cubuklar .dg{font-variant-numeric:tabular-nums;font-weight:600}

/* ---- durum blokları: yükleniyor, boş, hata (her bölümde aynı) ---- */
.durum{display:flex;flex-direction:column;align-items:center;gap:var(--sp2);padding:var(--sp5) var(--sp4);text-align:center;color:var(--dim)}
.durum .qi{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--chip);font-size:21px}
.durum.hata .qi{background:var(--bad-soft);color:var(--bad)}
.durum b{color:var(--ink);font-size:var(--fs-md)}
.durum p{margin:0;max-width:52ch}
.spin{display:flex;align-items:center;justify-content:center;gap:10px;padding:var(--sp5);color:var(--dim);font-weight:600}
.spin::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--accent);animation:don .8s linear infinite}
@keyframes don{to{transform:rotate(360deg)}}
.tag.info{background:var(--info-soft);color:var(--info)}
.temabtn{min-width:var(--hit)}

/* ---- oyun ayarları ---- */
.oa-arac{margin:var(--sp3) 0}
.oa-arac input[type=search]{min-width:240px;flex:1 1 260px}
.oa-duzen{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr);gap:var(--sp4);align-items:start}
.agac{position:sticky;top:64px;display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp2);max-height:calc(100vh - 90px);overflow-y:auto}
.agac button{display:flex;align-items:center;gap:6px;width:100%;min-height:36px;border:0;background:none;border-radius:8px;padding:6px 10px;text-align:left;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.agac button.alt{padding-left:24px;font-weight:400;color:var(--dim)}
.agac button:hover{background:var(--hover)}
.agac button.on{background:var(--accent-soft);color:var(--accent-strong)}
.agac .say{font-size:var(--fs-xs);color:var(--dim);font-variant-numeric:tabular-nums}
.oa-list{padding:0 var(--sp4) var(--sp2)}
.oa-grup{font-size:var(--fs-sm);font-weight:700;color:var(--dim);padding:var(--sp4) 0 var(--sp2);border-bottom:1px solid var(--line)}
.oa-satir{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.8fr) auto;gap:var(--sp3);align-items:start;padding:var(--sp3) 0;border-bottom:1px solid var(--line)}
.oa-satir.taslak{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);margin:0 calc(-1 * var(--sp4));padding-left:var(--sp4);padding-right:var(--sp4)}
.oa-satir.gecersiz{background:var(--bad-soft);box-shadow:inset 3px 0 0 var(--bad)}
.oa-ad{display:flex;flex-direction:column;gap:2px;min-width:0}
.oa-ad code{overflow-wrap:anywhere}
.oa-deger,.oa-yeni{display:flex;flex-direction:column;gap:4px;min-width:0}
.oa-deger > span:nth-child(2){font-variant-numeric:tabular-nums;font-weight:600}
.oa-satir .lbl{font-size:var(--fs-xs);color:var(--dim)}
.oa-yeni input{width:9em}
.oa-err{color:var(--bad);font-weight:600}
.oa-satir .tag{white-space:normal;align-self:flex-start}
.oa-err:empty{display:none}
.oa-cubuk{margin-top:var(--sp4)}
.oa-cubuk .ozet{display:flex;align-items:center;gap:6px}
.oa-cubuk .ozet b{font-size:var(--fs-lg)}
.oa-gecmis{margin-top:var(--sp4)}
.oa-ret{flex-basis:100%;margin:2px 0 0 18px;padding:0;color:var(--bad)}
.cakisma{margin:var(--sp3) 0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* ============================================================
   Kırılımlar
   ============================================================ */
@media (max-width:1199px){
  :root{--side-w:220px}
  .topbar .stamp{display:none}
  .band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band > :first-child{grid-column:1 / -1}
  .quick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo,.split,.trends{grid-template-columns:minmax(0,1fr)}
  .oa-duzen{grid-template-columns:minmax(0,1fr)}
  .agac{position:static;max-height:none;flex-direction:row;flex-wrap:wrap}
  .agac button{width:auto}
  .agac button.alt{padding-left:10px}
  .oa-satir{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .oa-ad{grid-column:1 / -1}
}
@media (max-width:767px){
  :root{--side-w:min(300px,86vw)}
  .side{transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.35);visibility:hidden}
  .side.acik{transform:none;visibility:visible}
  .mobil{display:inline-grid}
  .mainwrap{margin-left:0}
  .topbar{padding:8px 12px;gap:6px}
  .topbar .world{display:none}
  .topbar #worldSel{flex:1;min-width:0}
  .topbar .langsw{margin-left:auto}
  main{padding:16px 12px 32px}
  .viewhead h2{font-size:22px}
  .band{grid-template-columns:minmax(0,1fr)}
  .quick{grid-template-columns:minmax(0,1fr)}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* dokunma hedefleri ≥44 px */
  .btn,.btn.small,#nav button,input,select,.linkbtn,#bar button,.sidebtn{min-height:var(--hit)}
  input[type=checkbox],input[type=radio]{min-height:0;width:22px;height:22px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oa-satir{grid-template-columns:minmax(0,1fr)}
  .oa-yeni input{width:100%;flex:1}
  .oa-arac input[type=search]{min-width:0}
  .flds{grid-template-columns:minmax(0,1fr)}
  table{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}.spin::before{animation:none}}

/* ---- sunucu ve kapasite: politika satırları ---- */
.kp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp3);align-items:start;padding:var(--sp3) 0;border-bottom:1px solid var(--line)}
.kp-row input{width:120px}
.metric.kp-m .v{font-size:19px}
@media (max-width:560px){.kp-row{grid-template-columns:1fr}.kp-row input{width:100%}}