/* SoSo Kontrol Merkezi — arayüz. Tokenlar ve bileşenler ürünün web/css/app.css desenini izler (aynı adlar, aynı değerler);
   depolar arası içe aktarma yok. Bölümler: 1 tokenlar · 2 temel · 3 bileşenler · 4 kabuk · 5 sayfalar · 6 medya sorguları.
   CSP style-src 'self': satır içi stil yok. */

/* ================================================================ 1. tokenlar */
:root{
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-ctl:14px; --fs-lg:15px; --fs-xl:17px; --fs-2xl:20px; --fs-3xl:24px;
  --r-xs:4px; --r-sm:6px; --r-md:9px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  --fg:#111a33; --fg-2:#46536e; --fg-muted:#5f6b85; --fg-on-accent:#fff; --fg-placeholder:#5f6b85;
  --bg:#ffffff; --bg-subtle:#f5f7fb; --bg-canvas:#eef1f6; --bg-input:#fafbfd;
  --border:#e4e8f0; --border-2:#eef1f6; --border-input:#d8dfeb; --border-strong:#cbd5e1;
  --primary:#2C3D82; --primary-2:#3d52a8; --primary-bg:#eef1fb; --primary-border:#d7ddf3;
  --navy:#1b2a63;
  --danger:#b91c1c; --danger-bg:#fdecec; --danger-border:#f7caca;
  --warning:#b45309; --warning-bg:#fdf3e4; --warning-border:#f4dfae; --warning-fg:#6b4c0a;
  --success:#147638; --success-bg:#e8f5ec;
  --focus:#3d52a8; --focus-ring:0 0 0 3px rgba(44,61,130,.16);
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow:0 2px 4px rgba(16,24,40,.05),0 10px 28px rgba(16,24,40,.13);
  --shadow-lg:0 12px 40px rgba(16,24,40,.22);
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono-font:ui-monospace,SFMono-Regular,Menlo,monospace;
  --z-top:20; --z-modal:60; --z-toast:70;
  --tb:58px;
}

/* ================================================================ 2. temel */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{font:13px/1.45 var(--font);color:var(--fg);background:var(--bg-canvas);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::placeholder{color:var(--fg-placeholder);opacity:1}
.mono{font-family:var(--mono-font);font-size:var(--fs-sm)}
.muted{color:var(--fg-muted)}
.grow{flex:1}
.r{text-align:right}
.empty{color:var(--fg-muted);padding:18px;text-align:center}

/* ================================================================ 3. bileşenler */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--bg);border-radius:var(--r-md);padding:7px 12px;cursor:pointer;font-weight:600;color:var(--fg);text-decoration:none}
.btn:hover{filter:brightness(.97)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--fg-on-accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.sm{padding:5px 9px;font-size:var(--fs-sm)}
.btn.danger{color:var(--danger);border-color:var(--danger-border)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--s-3)}
.field label{font-weight:600;font-size:var(--fs-sm);color:var(--fg-2)}
.field .hint{font-size:var(--fs-xs);color:var(--fg-muted)}
.inp{width:100%;border:1px solid var(--border-input);background:var(--bg-input);border-radius:var(--r-md);padding:8px 10px;font-size:var(--fs-ctl)}
.inp:focus{border-color:var(--focus);box-shadow:var(--focus-ring);outline:none;background:var(--bg)}
.inp.code{font-family:var(--mono-font);letter-spacing:.3em;text-align:center;font-size:var(--fs-xl)}
.row{display:flex;gap:var(--s-3);align-items:flex-end;flex-wrap:wrap}
.row>.field{flex:1;min-width:140px}
.badge{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:2px 8px;font-size:var(--fs-xs);font-weight:700;background:var(--bg-subtle);color:var(--fg-2);border:1px solid var(--border)}
.badge.ok{background:var(--success-bg);color:var(--success);border-color:transparent}
.badge.warn{background:var(--warning-bg);color:var(--warning-fg);border-color:var(--warning-border)}
.badge.bad{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)}
.note{border-radius:var(--r-md);padding:10px 12px;margin:0 0 var(--s-3);border:1px solid var(--border);background:var(--bg-subtle)}
.note.warn{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-fg)}
.note.bad{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4)}
.card h2{margin:0 0 var(--s-3);font-size:var(--fs-xl)}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-2);vertical-align:top}
.tbl th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);font-weight:700}
.tbl tr:hover td{background:var(--bg-subtle)}
.tbl td.mono{white-space:nowrap}
.tbl-wrap{overflow-x:auto}
.secret{font-family:var(--mono-font);background:var(--bg-subtle);border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:10px 12px;word-break:break-all;font-size:var(--fs-lg)}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}

/* pencere ve bildirim */
.modal-bg{position:fixed;inset:0;background:rgba(17,26,51,.42);display:grid;place-items:center;z-index:var(--z-modal);padding:var(--s-4)}
.modal{background:var(--bg);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);width:min(560px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.modal.wide{width:min(820px,100%)}
.modal-h{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--border)}
.modal-h h3{margin:0;font-size:var(--fs-xl);flex:1}
.modal-b{padding:var(--s-4) var(--s-5);overflow:auto}
.modal-f{display:flex;gap:var(--s-2);justify-content:flex-end;padding:var(--s-3) var(--s-5);border-top:1px solid var(--border)}
.icon-btn{border:0;background:transparent;cursor:pointer;padding:6px;border-radius:var(--r-sm);color:var(--fg-muted)}
.icon-btn:hover{background:var(--bg-subtle)}
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:var(--z-toast)}
.toast{background:var(--navy);color:#fff;border-radius:var(--r-md);padding:10px 14px;box-shadow:var(--shadow);max-width:420px}
.toast.bad{background:var(--danger)}
.err{color:var(--danger);font-size:var(--fs-sm);min-height:1em}

/* ================================================================ 4. kabuk */
.top{position:sticky;top:0;z-index:var(--z-top);height:var(--tb);display:flex;align-items:center;gap:var(--s-4);padding:0 var(--s-5);background:var(--navy);color:#fff}
.top .brand{font-weight:800;letter-spacing:.01em;white-space:nowrap}
.top nav{display:flex;gap:2px;flex:1;overflow-x:auto}
.top nav a{color:#c9d2f0;text-decoration:none;padding:8px 12px;border-radius:var(--r-md);font-weight:600;white-space:nowrap}
.top nav a.on,.top nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.top .who{display:flex;align-items:center;gap:var(--s-2);white-space:nowrap}
.top .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.taze{font-size:var(--fs-xs);color:#c9d2f0}
main{max-width:1200px;margin:0 auto;padding:var(--s-5)}
.page-h{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.page-h h1{margin:0;font-size:var(--fs-3xl);flex:1}

/* ================================================================ 5. sayfalar: giriş */
.giris-kabuk{min-height:100vh;display:grid;place-items:center;padding:var(--s-4)}
.giris-kart{background:var(--bg);border-radius:var(--r-xl);box-shadow:var(--shadow);width:min(400px,100%);padding:var(--s-6)}
.giris-kart h1{margin:0 0 4px;font-size:var(--fs-2xl)}
.giris-kart p.alt{margin:0 0 var(--s-5);color:var(--fg-muted)}
.giris-kart .btn.primary{width:100%;justify-content:center;padding:10px}
.link{background:none;border:0;color:var(--primary);cursor:pointer;padding:0;font-weight:600}

/* ================================================================ 6. medya sorguları */
@media (max-width:720px){
  .top{padding:0 var(--s-3);gap:var(--s-2)}
  .top .brand,#ben{display:none}
  main{padding:var(--s-3)}
  .codes{grid-template-columns:1fr}
}

/* KM-7: uzun zarflar ve kiracı eylemleri dar ekrana taşmadan okunur. */
.json-onizleme{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;padding:12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-subtle);font:12px/1.5 var(--mono-font)}
.kiraci-okuma,.kiraci-eylemler{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.islem-menu{margin:12px 0}
.islem-menu>summary{width:max-content;list-style:none}
.islem-menu>summary::after{content:' ▾'}
.islem-menu[open]>summary::after{content:' ▴'}
@media(max-width:720px){.page-h{flex-wrap:wrap}.page-h h1{flex-basis:100%}.modal-h,.modal-b{padding:12px}.modal-f{padding:10px;flex-wrap:wrap}.kiraci-eylemler{flex-direction:column}.kiraci-eylemler>.btn{justify-content:flex-start;text-align:left}.top nav a{padding:8px}}