/* Plus++ Panel — yönetim arayüzü (v2.1 görünüm).
   Marka mavisi (#00a8ff, TV uygulamasıyla aynı) tek vurgu; koyu kenar menü, açık içerik; ince gölgeli yüzeyler.
   Sistem koyu temadaysa tüm arayüz koyu. Renkler yalnız aşağıdaki değişkenlerden. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/Inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/Inter-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#f4f6fa; --surface:#ffffff; --surface-2:#f8fafc; --hover:#f1f5f9;
  --border:#e5e9f0; --border-2:#d3dae4;
  --text:#0f172a; --text-2:#334155; --muted:#64748b; --faint:#94a3b8;
  --brand:#00a8ff; --brand-2:#0066e0;
  --accent:#0a72d6; --accent-hover:#075db3; --accent-ink:#ffffff; --accent-soft:#eaf4fe; --accent-line:#b7d8f8;
  --ok:#08794a; --ok-bg:#eaf8f1; --ok-line:#b4e6cc;
  --warn:#b25400; --warn-bg:#fff5e6; --warn-line:#f9d596;
  --bad:#c42b2f; --bad-bg:#fdefef; --bad-line:#f5c5c6;
  --info:#5b3fd6; --info-bg:#f1eefe; --info-line:#d3c9fa;
  --neutral-bg:#f1f4f8; --neutral-line:#e2e7ee;
  --side:#0b1322; --side-line:rgba(255,255,255,.07); --side-text:#98a3b6; --side-hi:#e6ebf2; --side-active:rgba(0,168,255,.14); --side-icon:#38bdf8;
  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:0 1px 3px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.18);
  --focus:0 0 0 4px rgba(10,114,214,.16);
  --r:12px; --r-sm:8px;
  /* eski adlar (sayfalardaki satır içi stiller) */
  --acc:var(--accent); --acc2:var(--accent-hover); --line:var(--border); --mu:var(--muted); --fg:var(--text); --card:var(--surface); --soft:var(--accent-soft);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0a0e16; --surface:#111724; --surface-2:#141b29; --hover:#1a2232;
  --border:#212a3a; --border-2:#2f394b;
  --text:#e9eef6; --text-2:#c4ccd9; --muted:#8c97aa; --faint:#5e697c;
  --accent:#2d9bff; --accent-hover:#5cb3ff; --accent-ink:#ffffff; --accent-soft:rgba(45,155,255,.12); --accent-line:rgba(45,155,255,.36);
  --ok:#4ad295; --ok-bg:rgba(74,210,149,.10); --ok-line:rgba(74,210,149,.28);
  --warn:#ffb547; --warn-bg:rgba(255,181,71,.10); --warn-line:rgba(255,181,71,.28);
  --bad:#ff7a75; --bad-bg:rgba(255,122,117,.10); --bad-line:rgba(255,122,117,.28);
  --info:#a894ff; --info-bg:rgba(168,148,255,.11); --info-line:rgba(168,148,255,.30);
  --neutral-bg:#182031; --neutral-line:#263044;
  --side:#070a11; --side-line:rgba(255,255,255,.06);
  --shadow-xs:0 1px 2px rgba(0,0,0,.3); --shadow-sm:0 1px 3px rgba(0,0,0,.35); --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
  --focus:0 0 0 4px rgba(45,155,255,.24);
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}
h1{font-size:24px;line-height:32px;font-weight:650;letter-spacing:-.02em;margin:0 0 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--text)}
h2{font-size:15px;line-height:22px;font-weight:600;margin:0 0 14px;letter-spacing:-.01em;color:var(--text)}
h3{font-size:13px;font-weight:600;margin:0 0 10px;color:var(--text)}
p{margin:0 0 10px}
.mu{color:var(--muted)}
b,strong{font-weight:600}
code{font:500 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--neutral-bg);padding:2px 6px;border-radius:6px;color:var(--text-2);white-space:nowrap;letter-spacing:.01em}
hr{border:0;border-top:1px solid var(--border);margin:20px 0}
svg.i{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}

/* ── yerleşim: koyu sol menü + üst çubuk + içerik ── */
body.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;background:linear-gradient(90deg,var(--side) 248px,var(--bg) 248px)}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--side);padding:18px 14px 14px;color:var(--side-text)}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 22px;font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--side-hi)}
.brand .mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:800;letter-spacing:-.04em;box-shadow:0 4px 12px rgba(0,140,255,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.brand .mark sup{font-size:8px;top:-.7em;margin-left:0}
.brand .wm sup{font-size:10px;color:var(--brand);font-weight:800;position:relative;top:-.6em;margin-left:1px}
.brand small{font-size:10px;font-weight:600;color:var(--side-text);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--side-line);border-radius:6px;padding:1px 6px;margin-left:auto}
.side nav{display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto;margin:0 -2px;padding:0 2px}
.side nav .grp{font-size:10.5px;font-weight:600;color:#5d6a80;text-transform:uppercase;letter-spacing:.09em;padding:16px 10px 6px}
.side nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;color:var(--side-text);font-weight:500;position:relative;transition:background .12s,color .12s}
.side nav a svg{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side nav a:hover{background:rgba(255,255,255,.05);color:var(--side-hi)}
.side nav a.on{background:var(--side-active);color:#fff;font-weight:600}
.side nav a.on svg{color:var(--side-icon)}
.side nav a.on::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.badge{margin-left:auto;min-width:20px;padding:0 6px;border-radius:999px;background:#f59e0b;color:#1f1300;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.me{border-top:1px solid var(--side-line);padding:14px 6px 2px;margin-top:10px;font-size:13px;display:flex;align-items:center;gap:10px}
.me .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#334155,#1e293b);color:var(--side-hi);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;text-transform:uppercase;flex:0 0 32px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.me .who{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.me b{color:var(--side-hi);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .who span{font-size:12px;color:var(--side-text)}
.me a{margin-left:auto;color:var(--side-text);display:inline-flex;padding:7px;border-radius:8px}.me a:hover{background:rgba(255,255,255,.06);color:var(--side-hi)}
.me a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wrap{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:10;height:60px;display:flex;align-items:center;gap:14px;padding:0 32px;background:var(--bg);border-bottom:1px solid var(--border)}
.gs{position:relative;flex:0 1 420px;margin:0}
.gs svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.gs input{margin:0;padding:8px 12px 8px 36px;background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-xs);font-size:13.5px}
.gs kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font:600 11px/1 "Inter",sans-serif;color:var(--faint);border:1px solid var(--border);border-radius:5px;padding:3px 5px;background:var(--surface-2)}
.top .sp{flex:1}
.top .date{color:var(--muted);font-size:13px;white-space:nowrap}
.top .btn{padding:7px 12px;font-size:13px}
main{width:100%;max-width:1240px;margin:0 auto;padding:28px 32px 72px}

/* ── sayfa başlığı ── */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 24px}
.ph h1{margin:0}
.ph p{margin:4px 0 0;color:var(--muted);max-width:720px}
.ph-a{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ph-a form{display:flex;gap:8px;align-items:center;margin:0}
.ph-a input{margin:0;width:auto}
.crumb{font-size:13px;color:var(--muted);margin:0 0 6px;display:flex;align-items:center;gap:6px}.crumb a{color:var(--muted)}.crumb a:hover{color:var(--text)}
.sec-t{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:28px 0 12px}
.sec-t h2{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
.sec-t a{font-size:13px;font-weight:500}

/* ── yüzeyler ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow-xs)}
.card>h2:first-child,.card>input[type=hidden]+h2,.card h2.ct{display:flex;align-items:center;gap:8px}
.card .card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 14px}
.card .card-h h2{margin:0}
.card.flush{padding:0;overflow:hidden}
.card.flush>.card-h{margin:0;padding:16px 20px;border-bottom:1px solid var(--border)}
.card.flush .tw{border:0;border-radius:0;box-shadow:none}
.card.act{border-color:var(--accent-line);box-shadow:var(--shadow-sm),inset 0 3px 0 var(--accent)}
.card.danger{border-color:var(--bad-line)}
.card.danger h2{color:var(--bad)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;align-items:start}
.grid>div>.card:last-child,.grid>.card{margin-bottom:0}
.grid+.card,.grid+.tw,.grid+form{margin-top:16px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.split>div>.card:last-child{margin-bottom:0}
.tw{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin-bottom:16px;box-shadow:var(--shadow-xs)}
.card .tw{margin-bottom:0;box-shadow:none}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:0}
th{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--surface-2);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em;padding-top:9px;padding-bottom:9px}
td{color:var(--text-2)}td a{font-weight:500}
td a code{color:var(--accent);background:var(--accent-soft)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.nw{white-space:nowrap}
td .sub{display:block;font-size:12px;color:var(--muted);margin-top:1px}
tbody tr,table tr{transition:background .1s}
tr:hover td{background:var(--surface-2)}
tr.off td{color:var(--faint)}
tr.off td b{color:var(--muted)}
tr.refunded td{color:var(--faint);text-decoration:line-through}
td.empty{text-align:center;color:var(--muted);padding:36px 16px}
dl{display:grid;grid-template-columns:150px 1fr;gap:10px 16px;margin:0}dt{color:var(--muted)}dd{margin:0;color:var(--text-2);word-break:break-word}
dl.kv{grid-template-columns:1fr;gap:0}
dl.kv dt{font-size:12px;font-weight:500;color:var(--muted);padding-top:12px}
dl.kv dt:first-child{padding-top:0}
dl.kv dd{padding:2px 0 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
dl.kv dd:last-child{border-bottom:0;padding-bottom:0}

/* ── form ── */
label{display:block;margin:0 0 14px;font-weight:500;font-size:13px;color:var(--text-2)}
label .hint,.hint{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:2px}
input,select,textarea{display:block;width:100%;margin-top:6px;padding:9px 12px;border:1px solid var(--border-2);border-radius:var(--r-sm);font:inherit;font-size:14px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs);transition:border-color .12s,box-shadow .12s}
select{-webkit-appearance:none;appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover,select:hover,textarea:hover{border-color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:var(--focus)}
input[readonly]{background:var(--surface-2);color:var(--muted);box-shadow:none}
textarea{min-height:84px;resize:vertical;line-height:1.5}
input[type=checkbox]{width:16px;height:16px;display:inline-block;margin:0 8px 0 0;vertical-align:-3px;accent-color:var(--accent);box-shadow:none}
input[type=date],input[type=month]{min-height:40px}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;border:1px solid var(--accent);border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;box-shadow:0 1px 2px rgba(10,80,160,.2),inset 0 1px 0 rgba(255,255,255,.12);transition:background .12s,border-color .12s,box-shadow .12s,color .12s}
button:hover,.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink);text-decoration:none}
button:focus-visible,.btn:focus-visible{outline:0;box-shadow:var(--focus)}
button:disabled{opacity:.45;cursor:not-allowed}
button svg,.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button.sec,.btn.sec{background:var(--surface);color:var(--text-2);border-color:var(--border-2);box-shadow:var(--shadow-xs)}
button.sec:hover,.btn.sec:hover{background:var(--hover);color:var(--text);border-color:var(--border-2)}
button.bad,.btn.bad{background:var(--surface);color:var(--bad);border-color:var(--bad-line);box-shadow:var(--shadow-xs)}
button.bad:hover{background:var(--bad-bg)}
button.ghost,.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2);box-shadow:none}
button.ghost:hover,.btn.ghost:hover{background:var(--hover);color:var(--text)}
button.sm,.btn.sm{padding:4px 10px;font-size:12.5px;border-radius:7px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}.row>*{flex:1;min-width:150px}.row>button,.row>a,.row>form,.row>.btn{flex:0 0 auto;min-width:0}.row>label{margin-bottom:0}
.row>a:not(.btn){padding:9px 4px;font-weight:500}
form>.row:last-child,.card>.row:last-child,form.row{margin-bottom:0}
form.card.row{padding:16px 20px}
.card form.row+p,.card .row+p{margin-top:10px}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.inline{display:inline}
details summary{cursor:pointer;font-weight:500;color:var(--muted);margin:14px 0 10px;list-style:none;display:inline-flex;align-items:center;gap:6px}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
details[open] summary::before{transform:rotate(45deg)}
details summary:hover{color:var(--text)}

/* ── durum rozetleri ── */
.b{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:18px;white-space:nowrap;border:1px solid var(--neutral-line);background:var(--neutral-bg);color:var(--text-2);letter-spacing:0;vertical-align:middle}
.b::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
a.b:hover{text-decoration:none;filter:brightness(.97)}
.b-active{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.b-pending{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.b-expired{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.b-blocked{background:var(--neutral-bg);color:var(--muted);border-color:var(--neutral-line)}
.b-code_changed,.b-info{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.b-accent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.b.flat::before{display:none}
h1 .b{font-size:12px}
h1 code{font-size:18px;padding:3px 9px;color:var(--text)}
td>form.inline+form.inline,td>a+form.inline{margin-left:8px}
.ev{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--text);white-space:nowrap}
.ev::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--faint);box-shadow:0 0 0 3px var(--neutral-bg)}
.ev-ok::before{background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
.ev-warn::before{background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg)}
.ev-bad::before{background:var(--bad);box-shadow:0 0 0 3px var(--bad-bg)}
.ev-info::before{background:var(--info);box-shadow:0 0 0 3px var(--info-bg)}
.ev-accent::before{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:12.5px;font-weight:500;white-space:nowrap}
.chip b{font-weight:650;color:var(--text)}

.chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
a.chip:hover{border-color:var(--border-2);background:var(--hover);color:var(--text)}
a.chip.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}

/* ── bildirimler ── */
.flash,.err,.warnbox{display:flex;align-items:flex-start;gap:10px;border-radius:var(--r-sm);padding:11px 14px;margin-bottom:18px;font-size:14px;border:1px solid}
.flash::before,.err::before{content:"";flex:0 0 18px;height:18px;margin-top:1px;background-color:currentColor;-webkit-mask:var(--ic) center/16px no-repeat;mask:var(--ic) center/16px no-repeat}
.flash{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok);--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E")}
.flash.bad,.err{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad);--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E")}
.flash span,.err span{color:var(--text)}
.warnbox{background:var(--info-bg);border-color:var(--info-line);color:var(--text-2);display:block}
.warnbox b{color:var(--text)}.warnbox ul{margin:6px 0 0;padding-left:18px}.warnbox li{margin:3px 0}
.warnbox.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.callout{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r);padding:14px 16px;margin-bottom:16px;color:var(--text-2)}
.callout .ci{width:34px;height:34px;border-radius:9px;background:var(--surface);color:var(--warn);display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;box-shadow:var(--shadow-xs)}
.callout .ci svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.callout .cb{flex:1;min-width:240px}
.callout .cb b{color:var(--text);display:block;margin-bottom:2px}
.callout .ca{display:flex;gap:8px;align-items:center}

/* ── göstergeler ── */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:8px}
.kpi>a,.kpi>div{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;color:var(--text);position:relative;box-shadow:var(--shadow-xs);transition:border-color .12s,box-shadow .12s,transform .12s}
.kpi>a:hover{border-color:var(--border-2);box-shadow:var(--shadow-sm);text-decoration:none;color:var(--text)}
.kpi .kh{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:500;line-height:1.3}
.kpi .ki{width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--neutral-bg);color:var(--muted);flex:0 0 32px}
.kpi .ki svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kpi b{display:block;font-size:28px;line-height:34px;font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--text)}
.kpi small{display:block;color:var(--muted);font-size:13px;font-weight:500}
.kpi .kf{font-size:12.5px;color:var(--muted);margin-top:-6px}
.kpi>.warn .ki{background:var(--warn-bg);color:var(--warn)}
.kpi>.bad .ki{background:var(--bad-bg);color:var(--bad)}
.kpi>.ok .ki{background:var(--ok-bg);color:var(--ok)}
.kpi>.info .ki{background:var(--info-bg);color:var(--info)}
.kpi>.acc .ki{background:var(--accent-soft);color:var(--accent)}
.kpi>.bad b{color:var(--bad)}
.kpi>.warn b{color:var(--warn)}
.kpi>.warn::after,.kpi>.bad::after{content:"";position:absolute;top:18px;right:18px;width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 4px var(--warn-bg)}
.kpi>.bad::after{background:var(--bad);box-shadow:0 0 0 4px var(--bad-bg)}
.kpi b .money{font-size:22px;line-height:34px}
.kpi.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi.lg b{font-size:30px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:0 0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a span{min-width:22px;padding:0 7px;border-radius:999px;background:var(--neutral-bg);color:var(--muted);font-size:12px;font-weight:600;line-height:20px;text-align:center}
.tabs a:hover{color:var(--text)}
.tabs a.on{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
.tabs a.on span{background:var(--accent-soft);color:var(--accent)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.toolbar .gs{flex:1 1 320px;max-width:460px}
.toolbar .gs input{padding-top:9px;padding-bottom:9px}
.linkbox{display:flex;align-items:center;gap:8px;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);border:1px dashed var(--border-2);color:var(--text-2);padding:9px 12px;border-radius:var(--r-sm);word-break:break-all}
.empty-s{text-align:center;padding:28px 12px;color:var(--muted)}
.empty-s svg{width:28px;height:28px;stroke:var(--faint);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto 8px}

/* ── cihaz başlığı ── */
.dh{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 22px;margin-bottom:16px;box-shadow:var(--shadow-xs)}
.dh .di{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;box-shadow:0 6px 16px rgba(0,120,240,.25)}
.dh .di svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dh .dt{flex:1;min-width:220px}
.dh h1{margin:0;font-size:22px;line-height:30px}
.dh h1 .code{font:650 21px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em;color:var(--text)}
.dh h1 .nm{font-family:"Inter",sans-serif;font-weight:500;color:var(--muted);font-size:17px}
.dh .meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px;color:var(--muted);font-size:13px}
.dh .meta span{display:inline-flex;align-items:center;gap:6px}
.dh .meta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dh .exp{text-align:right}
.dh .exp small{display:block;color:var(--muted);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.dh .exp b{font-size:17px;font-variant-numeric:tabular-nums}

/* ── plan düğmeleri ── */
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:4px 0 18px}
.plans .plan{position:relative;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;text-align:left;background:var(--surface);color:var(--text);border:1px solid var(--border-2);border-radius:10px;white-space:normal;box-shadow:var(--shadow-xs)}
.plans .plan::after{content:"";position:absolute;right:14px;top:16px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border-2);transition:border-color .12s,background .12s}
.plans .plan b{font-size:15px;font-weight:650;padding-right:24px}.plans .plan span{font-size:12.5px;font-weight:500;color:var(--muted)}
.plans .plan:hover{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)}.plans .plan:hover span{color:var(--text-2)}
.plans .plan:hover::after{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--surface)}
.plans .plan.trial{border-style:dashed}
.plans .plan:disabled:hover{border-color:var(--border-2);background:var(--surface);box-shadow:none}
.pr{font-weight:600}.pr-ok{color:var(--ok)}.pr-account_missing,.pr-account_off,.pr-device_locked,.pr-old_firmware{color:var(--warn)}.pr-no_portal,.pr-unreachable,.pr-bad_request{color:var(--bad)}

/* ── ayarlar bölümleri ── */
.sect{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px 40px;padding:28px 0;border-top:1px solid var(--border)}
.sect:first-of-type{border-top:0;padding-top:4px}
.sect .sd h2{margin:0 0 6px}
.sect .sd p{color:var(--muted);font-size:13.5px;margin:0 0 8px}
.sect .sd .b{margin-top:4px}
.sect .sb{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-xs);min-width:0}
.sect .sb>label:last-child,.sect .sb>.row:last-child{margin-bottom:0}
.sect .sb p.mu{font-size:13px}
.savebar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:14px 0;margin-top:8px;background:var(--bg);border-top:1px solid var(--border)}
.savebar span{margin-right:auto;color:var(--muted);font-size:13px}

/* ── giriş ── */
body.guest{min-height:100vh;margin:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
body.guest main{max-width:none;padding:0;margin:0;display:contents}
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 10% -10%,rgba(0,168,255,.35),transparent 60%),radial-gradient(900px 500px at 110% 110%,rgba(0,102,224,.35),transparent 60%),#070c18;color:#e6ebf2;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero .brand{padding:0;color:#fff;font-size:20px}
.hero h2{font-size:34px;line-height:1.18;letter-spacing:-.03em;font-weight:700;color:#fff;margin:0 0 14px;max-width:460px}
.hero h2 em{font-style:normal;background:linear-gradient(90deg,#38bdf8,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#98a3b6;font-size:15px;max-width:440px;margin:0 0 26px}
.hero ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hero li{display:flex;align-items:center;gap:12px;color:#c9d2de;font-size:14px}
.hero li svg{width:30px;height:30px;padding:7px;border-radius:8px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);stroke:#38bdf8;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 30px}
.hero .foot{color:#5d6a80;font-size:12.5px}
.auth-side{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--surface)}
.auth{width:100%;max-width:380px}
.auth .brand{display:none;color:var(--text);padding:0 0 28px}
.auth h1{font-size:26px;margin-bottom:6px}
.auth>p{margin-bottom:26px}
.auth button{width:100%;margin-top:6px;padding:11px}
.auth input{padding:10px 12px}

/* ── dar ekran ── */
@media (max-width:1100px){
  .split{grid-template-columns:minmax(0,1fr)}
  .sect{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media (max-width:900px){
  body.app{display:block;background:var(--bg)}
  .side{position:sticky;top:0;z-index:20;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 12px}
  .brand{padding:0 6px 0 2px;font-size:16px}.brand .mark{width:28px;height:28px;font-size:13px}.brand small{margin-left:4px}
  .me{order:2;margin:0 0 0 auto;padding:0;border:0}.me .av,.me .who{display:none}
  .side nav{order:3;flex:1 0 100%;flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:4px;padding-bottom:2px}
  .side nav .grp{display:none}
  .side nav a{white-space:nowrap;padding:6px 10px;font-size:13px}.side nav a svg{display:none}.side nav a.on::before{display:none}
  .top{position:static;height:auto;padding:10px 14px}.top .date{display:none}.gs{flex:1}.gs kbd{display:none}
  main{padding:18px 14px 48px}
  .grid{grid-template-columns:minmax(0,1fr)}
  dl{grid-template-columns:120px 1fr}
  .kpi,.kpi.c3,.kpi.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  h1{font-size:20px}
  body.guest{grid-template-columns:1fr}
  .hero{display:none}
  .auth .brand{display:flex}
  .dh .exp{text-align:left}
  .ph-a{width:100%}
  .toolbar .gs{max-width:none}
  .sect .sb{padding:16px}
  .card{padding:16px}
  .card.flush{padding:0}
}

/* ── kurulum notları listesi ── */
.todo{display:flex;flex-direction:column;margin:0 -10px}
.todo .td{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:10px;color:var(--text-2)}
.todo .td:hover{background:var(--hover);color:var(--text)}
.todo .ki{width:32px;height:32px;border-radius:9px;background:var(--warn-bg);color:var(--warn);display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px}
.todo .ki svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.todo b{display:block;color:var(--text);font-size:13.5px}
.todo small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:1px}
.card-h h2 svg.i{color:var(--muted);width:17px;height:17px}
.card.act .card-h h2 svg.i{color:var(--accent)}
.card.danger .card-h h2 svg.i{color:var(--bad)}
.pr svg.i{vertical-align:-3px}

.card-h h2{display:flex;align-items:center;gap:8px}
.sect,[id]{scroll-margin-top:80px}
.steps{margin:0;padding:0;list-style:none;counter-reset:st;display:grid;gap:14px}
.steps li{position:relative;padding-left:38px;color:var(--muted);font-size:13px;line-height:1.45;counter-increment:st}
.steps li::before{content:counter(st);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center}
.steps li b{display:block;color:var(--text);font-size:13.5px}
.plist{display:flex;flex-direction:column;gap:6px;width:100%}
.pli{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
.pli.on{border-color:var(--ok-line);background:var(--ok-bg)}
.pli .sub{word-break:break-all}
.pla{display:flex;gap:4px;flex:0 0 auto}

/* dil seçimi (EN | TR) */
.lang{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.lang b{color:var(--text)}.lang a{color:var(--muted)}.lang a:hover{color:var(--accent)}.lang i{font-style:normal;color:var(--border-2)}
.auth .lang{float:right;margin-top:6px}
/* iki dilli metin alanı (Ayarlar → TV ve müşteri) */
.txt2{margin-bottom:14px}.txt2 .t2l{font-weight:500;font-size:13px;color:var(--text-2);margin-bottom:6px}.txt2 .t2l .hint{display:inline;margin:0 0 0 4px}
.txt2 .row{margin-bottom:0}.txt2 .row label .hint{margin:0 0 4px;text-transform:uppercase;letter-spacing:.04em;font-size:11px}
/* bekleyen işler şeridi (Cihazlar sayfası üstü) */
.todobar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.todobar .tb{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;font-weight:500;color:var(--text-2)}
.todobar .tb b{font-size:14px;color:var(--text)}
.todobar .tb.warn{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)}
.todobar .tb.warn b{color:var(--warn)}
.todobar .tb.bad{border-color:var(--bad-line);background:var(--bad-bg);color:var(--bad)}
.todobar .tb.bad b{color:var(--bad)}
.todobar .tb.info{border-color:var(--info-line);background:var(--info-bg);color:var(--info)}
.todobar .tb.info b{color:var(--info)}
.todobar .tb:hover{border-color:var(--accent);color:var(--accent)}