/* ========================================================================
   1) HAM ÖLÇEK — tema-bağımsız (nötr rampa: R=G=B, doygunluk SIFIR)
   ======================================================================== */
:root{
  --n-0:#FFFFFF; --n-1:#FAFAFA; --n-2:#F4F4F5; --n-3:#E5E5E8; --n-4:#DCDCDF;
  --n-5:#C3C3C7; --n-6:#A8A8AE; --n-7:#6E6E74; --n-8:#4A4A4F; --n-9:#3A3A3E;
  --n-10:#26262A; --n-11:#1B1B1E; --n-12:#121214; --n-13:#0B0B0C;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px;

  --fs-50:11px; --fs-100:12px; --fs-200:13px; --fs-300:15px;
  --fs-400:17px; --fs-500:20px; --fs-600:24px; --fs-700:30px;
  --fs-input:16px;                    /* ☠️ 16px altı = iOS odakta ZORLA yakınlaştırır */
  --lh-tight:1.25; --lh:1.5; --lh-loose:1.6;

  --r-1:8px; --r-2:12px; --r-3:16px; --r-pill:999px;
  --tap:44px; --tap-row:56px; --bar-h:56px;

  --z-bar:30; --z-drawer:60; --z-modal:80; --z-toast:90; --z-progress:100;
  --dur-1:120ms; --dur-2:180ms; --dur-3:260ms; --ease:cubic-bezier(.2,.6,.2,1);
  --blur-1:14px; --blur-2:22px;

  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* ========================================================================
   2) ANLAMSAL TOKEN'LAR — GÜNDÜZ (varsayılan)
   ======================================================================== */
:root,:root[data-theme="light"]{
  color-scheme:light;
  --bg:var(--n-2); --bg-sunken:var(--n-3);
  --surface:var(--n-0); --surface-2:var(--n-1); --surface-3:var(--n-0);
  --border:var(--n-3); --border-strong:#8A8A90;      /* 3,4:1 — WCAG 1.4.11 */
  --fg:#111113; --fg-muted:var(--n-8); --fg-faint:var(--n-7);
  --accent:#111113; --accent-fg:var(--n-0);
  --sel-bg:rgba(17,17,19,.06); --sel-line:rgba(17,17,19,.18);
  --ok:#1F7A4D; --warn:#8A5A00; --danger:#B3261E;
  --ok-mark:#2E9E63; --warn-mark:#B87A00; --danger-mark:#D13A31;

  --glass-bg:rgba(250,250,250,.80); --glass-solid:var(--n-1);
  --glass-edge:rgba(255,255,255,.90); --glass-blur:var(--blur-1);
  --scrim:rgba(12,12,14,.36);

  --shadow-1:0 1px 2px rgba(9,9,11,.05);
  --shadow-2:0 2px 4px rgba(9,9,11,.05),0 8px 24px rgba(9,9,11,.07);
  --shadow-3:0 12px 40px rgba(9,9,11,.16);
  --edge-top:inset 0 1px 0 rgba(255,255,255,.9);
  --ambient:radial-gradient(60% 40% at 50% 0%,rgba(17,17,19,.05),transparent 70%);
  --ring:var(--fg);
  /* Geçici köprü — v3 taşınması bitince SİLİNİR (bkz. 10-TASARIM-SISTEMI.md §7) */
  --text:var(--fg); --muted:var(--fg-muted);
}

/* ---- GECE ---- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#060607; --bg-sunken:#030304;
  --surface:#101012; --surface-2:#17171A; --surface-3:#1E1E21;
  --border:#232326; --border-strong:#6A6A70;     /* 3,5:1 */
  --fg:#F2F2F3; --fg-muted:var(--n-6); --fg-faint:#85858C;
  --accent:#F2F2F3; --accent-fg:var(--n-13);
  --sel-bg:rgba(242,242,243,.08); --sel-line:rgba(242,242,243,.22);
  --ok:#57C98A; --warn:#E3AE3A; --danger:#F2685F;
  --ok-mark:#57C98A; --warn-mark:#E3AE3A; --danger-mark:#F2685F;

  --glass-bg:rgba(12,12,14,.74); --glass-solid:#0E0E10;
  --glass-edge:rgba(255,255,255,.08); --glass-blur:var(--blur-1);
  --scrim:rgba(0,0,0,.58);

  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 2px 6px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.5);
  --shadow-3:0 16px 48px rgba(0,0,0,.62);
  --edge-top:inset 0 1px 0 rgba(255,255,255,.06);
  --ambient:radial-gradient(60% 40% at 50% 0%,rgba(255,255,255,.030),transparent 70%);
}

/* ---- ÜÇÜNCÜ DURUM: SİSTEM TEMASI ---- */
@media (prefers-color-scheme:dark){
  :root[data-theme="system"]{
    color-scheme:dark;
    --bg:#060607; --bg-sunken:#030304;
    --surface:#101012; --surface-2:#17171A; --surface-3:#1E1E21;
    --border:#232326; --border-strong:#6A6A70;
    --fg:#F2F2F3; --fg-muted:var(--n-6); --fg-faint:#85858C;
    --accent:#F2F2F3; --accent-fg:var(--n-13);
    --sel-bg:rgba(242,242,243,.08); --sel-line:rgba(242,242,243,.22);
    --ok:#57C98A; --warn:#E3AE3A; --danger:#F2685F;
    --ok-mark:#57C98A; --warn-mark:#E3AE3A; --danger-mark:#F2685F;
    --glass-bg:rgba(12,12,14,.74); --glass-solid:#0E0E10;
    --glass-edge:rgba(255,255,255,.08);
    --scrim:rgba(0,0,0,.58);
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 2px 6px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.5);
    --shadow-3:0 16px 48px rgba(0,0,0,.62);
    --edge-top:inset 0 1px 0 rgba(255,255,255,.06);
    --ambient:radial-gradient(60% 40% at 50% 0%,rgba(255,255,255,.030),transparent 70%);
  }
}

/* ========================================================================
   3) TEMEL — TELEFON (masaüstü aşağıda min-width ile EKLENİR)
   ======================================================================== */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:var(--fs-300)/var(--lh) var(--font);
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  overflow-wrap:anywhere;
}
body.is-locked{overflow:hidden}
h1,h2,h3,p,ul,ol{margin:0}
ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

/* Ortam tonu — camın GÖRÜNMESİ için gereken tek katman (§2.4) */
.ambient{position:fixed;inset:0;background:var(--ambient);pointer-events:none;z-index:0}

.shell{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.main{display:flex;flex-direction:column;min-width:0;flex:1}

/* --- Üst bar (cam) --- */
.topbar{
  position:sticky;top:0;z-index:var(--z-bar);
  display:flex;align-items:center;gap:var(--sp-2);
  height:var(--bar-h);padding:0 var(--sp-4);
  border-bottom:1px solid var(--border);
}
/* Marka çekmecenin/kenar çubuğunun tepesinde duruyor → üst barda TEKRARLANMAZ.
   Üst bar telefonda: [☰] [ekran adı] … [🔍] [▒] [◐] — 390px'te rahat sığar. */
.topbar__title{font-weight:600;font-size:var(--fs-400);letter-spacing:-.01em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar__spacer{flex:1}
.topbar__user{display:none;color:var(--fg-muted);font-size:var(--fs-200)}

/* --- İçerik --- */
.view{
  flex:1;width:100%;max-width:1180px;margin-inline:auto;
  padding:var(--sp-5) var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:var(--sp-5);
}
.page{display:flex;flex-direction:column;gap:var(--sp-5)}
/* F3: sayfa içinde tek parça gibi yeniden çizilen kart grubu (dealer kartı hizmet bölümleri) — .page ile AYNI aralık */
.stack{display:flex;flex-direction:column;gap:var(--sp-5)}
.page__head{display:flex;flex-direction:column;gap:var(--sp-3)}
.page__title{font-size:var(--fs-600);letter-spacing:-.02em;font-weight:600}
.page__title small{display:block;font-size:var(--fs-200);font-weight:400;color:var(--fg-muted);letter-spacing:0;margin-top:2px}

/* --- GEZİNME: TELEFONDA ÇEKMECE (sahibin kararı, 2026-09-20) ---
   Tek DOM düğümü, iki davranış: burada çekmece, ≥920px'te kalıcı kenar çubuğu.
   ☠️ Kapalıyken `visibility:hidden` ŞART — yalnız translateX ekran dışına iter ama öğeler
   TAB SIRASINDA kalır ve klavye kullanıcısı görünmeyen bir menüde kaybolur. */
.sidebar{
  position:fixed;top:0;bottom:0;left:0;z-index:calc(var(--z-drawer) + 1);
  width:288px;max-width:86vw;                     /* 18rem — PasarGuard mobil çekmece ölçüsü */
  display:flex;flex-direction:column;gap:var(--sp-4);overflow:auto;
  padding:calc(var(--sp-4) + env(safe-area-inset-top,0px)) var(--sp-3)
          calc(var(--sp-4) + env(safe-area-inset-bottom,0px))
          calc(var(--sp-3) + env(safe-area-inset-left,0px));
  border-right:1px solid var(--border);
  visibility:hidden;transform:translateX(-100%);
  transition:transform var(--dur-3) var(--ease),visibility 0s linear var(--dur-3);
}
.sidebar[data-open="1"]{
  visibility:visible;transform:none;
  transition:transform var(--dur-3) var(--ease);
}
.sidebar__brand{display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-400);font-weight:600;padding:0 var(--sp-3);letter-spacing:-.01em}
.sidebar__foot{margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--border)}
.burger__dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--danger-mark)}

/* ========================================================================
   4) CAM — önce KATI yedek, blur yalnız @supports ile EKLENİR (§2.3)
   ======================================================================== */
.glass{background:var(--glass-solid)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{
    background:var(--glass-bg);
    -webkit-backdrop-filter:blur(var(--glass-blur));
    backdrop-filter:blur(var(--glass-blur));
    box-shadow:var(--edge-top);
  }
}

/* ========================================================================
   5) BİLEŞENLER
   ======================================================================== */

/* --- Düğmeler (dokunma hedefi ≥44px) --- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--tap);padding:0 var(--sp-4);
  border:1px solid var(--border-strong);border-radius:var(--r-1);
  background:var(--surface);color:var(--fg);font-size:var(--fs-200);font-weight:500;
  cursor:pointer;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
.btn:hover:not(:disabled){background:var(--surface-2)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}
.btn--primary:hover:not(:disabled){background:var(--accent);opacity:.9}
.btn--ghost{background:transparent;border-color:transparent}
.btn--ghost:hover:not(:disabled){background:var(--sel-bg)}
.btn--danger{border-color:var(--danger);color:var(--danger)}
.btn--block{width:100%}
.btn--sm{min-height:36px;padding:0 var(--sp-3);font-size:var(--fs-100)}
.btn--sm::after{content:"";position:absolute;inset:-6px}   /* görsel 36px, dokunma 48px */
.btn--icon{min-width:var(--tap);padding:0;font-size:17px;border-color:transparent;background:transparent}
.btn--icon:hover{background:var(--sel-bg)}

/* Tek-uçuş göstergesi */
.btn.is-busy{cursor:progress}
.btn.is-busy::before{
  content:"";width:13px;height:13px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Odak: ÇİFT HALKA — bulanık zeminde de görünür (§6.3) --- */
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ring);
  border-radius:var(--r-1);
}

/* --- Segmented (v2 .tabs yerine) --- */
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-pill);overflow-x:auto;max-width:100%;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg__btn{white-space:nowrap;min-height:38px;padding:0 var(--sp-4);border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--fg-muted);font-size:var(--fs-200);font-weight:500;cursor:pointer}
.seg__btn[aria-selected="true"]{background:var(--surface);color:var(--fg);font-weight:600;box-shadow:var(--shadow-1)}

/* --- İstatistik (v2 .tile + .chip + .mybot-stat birleşimi) --- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.stat{
  position:relative;padding:var(--sp-4);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-2);
  box-shadow:var(--shadow-1),var(--edge-top);overflow:hidden;
}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent}
.stat--ok::before{background:var(--ok-mark)}
.stat--warn::before{background:var(--warn-mark)}
.stat--danger::before{background:var(--danger-mark)}
.stat__label{font-size:var(--fs-50);text-transform:uppercase;letter-spacing:.06em;color:var(--fg-faint);font-weight:600}
.stat__value{margin-top:var(--sp-2);font-size:var(--fs-700);font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:var(--lh-tight)}
.stat--warn .stat__value{color:var(--warn)}
.stat--danger .stat__value{color:var(--danger)}
.stat__sub{margin-top:2px;font-size:var(--fs-100);color:var(--fg-muted)}

/* --- Durum şeridi (v2 .legend yerine) --- */
.statusbar{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);
  padding:var(--sp-3) var(--sp-4);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-2);box-shadow:var(--shadow-1),var(--edge-top);font-size:var(--fs-200)}
.statusbar span{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--fg-muted)}
.statusbar b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.dot{width:8px;height:8px;border-radius:50%;background:var(--fg-faint);flex:none}
.dot--ok{background:var(--ok-mark)} .dot--warn{background:var(--warn-mark)}
.dot--danger{background:var(--danger-mark)} .dot--muted{background:var(--border-strong)}

/* --- Kart --- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);
  box-shadow:var(--shadow-1),var(--edge-top);overflow:hidden}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4);border-bottom:1px solid var(--border);background:var(--surface-2)}
.card__title{font-size:var(--fs-400);font-weight:600;letter-spacing:-.01em}
.card__body{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4)}
.card__foot{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-4);
  border-top:1px solid var(--border);background:var(--surface-2)}
.card--danger{border-color:var(--danger)}

/* --- Rozet: dolgu YOK (monokrom kuralı) --- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface);
  font-size:var(--fs-100);font-weight:600;color:var(--fg-muted);white-space:nowrap}
.badge--ok{color:var(--ok);border-color:var(--ok-mark)}
.badge--warn{color:var(--warn);border-color:var(--warn-mark)}
.badge--danger{color:var(--danger);border-color:var(--danger-mark)}
.badge--solid{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
/* KİLİT: kesikli çerçeve tüm sistemde YALNIZ «kilitli» demektir (§5.2) */
.badge--lock{border-style:dashed;border-color:var(--border-strong);color:var(--fg-muted)}

/* --- Kontrol listesi (v2 .cap-list yerine) --- */
.checklist{display:flex;flex-direction:column;gap:var(--sp-2)}
.check-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);
  padding:var(--sp-3);border-radius:var(--r-1);background:var(--surface-2);
  border-left:2px solid var(--border-strong)}
.check-item--ok{border-left-color:var(--ok-mark)}
.check-item--warn{border-left-color:var(--warn-mark)}
.check-item--gap{border-left-color:var(--danger-mark)}
.check-item__ico{font-size:var(--fs-200);line-height:var(--lh);width:16px;text-align:center}
.check-item__t{font-weight:500}
.check-item__d{margin-top:2px;font-size:var(--fs-100);color:var(--fg-muted)}

/* --- LİSTE: telefonda KART, geniş ekranda sütun (§4.1) --- */
.list{display:flex;flex-direction:column;gap:var(--sp-2)}
.list__head{display:none}
.row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:var(--sp-3);row-gap:2px;
  min-height:var(--tap-row);padding:var(--sp-3) var(--sp-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);
  box-shadow:var(--shadow-1),var(--edge-top)}
.row__link{grid-column:1;grid-row:1;font-size:var(--fs-400);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row__link::after{content:"";position:absolute;inset:0;border-radius:inherit}  /* tüm satır hedef */
.row__meta{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;gap:0 var(--sp-2);
  font-size:var(--fs-100);color:var(--fg-faint);min-width:0}
.row__meta .cell{font-variant-numeric:tabular-nums}
.row__meta .cell+.cell::before{content:"·";margin-right:var(--sp-2);color:var(--border-strong)}
.cell[data-unit]::after{content:" " attr(data-unit)}
.row__end{grid-column:2;grid-row:1/3;display:flex;align-items:center;gap:var(--sp-2);position:relative;z-index:1}
.row.is-hidden{display:none}
/* F10 toplu fatura listesi: Итого satırı (doğrudan dealerların toplamı) — .list önekiyle geniş ekrandaki `.row{background:transparent}`i yener */
.list .row--total{background:var(--surface-2);font-weight:600}
.list .row--total .row__link::after{content:none}

/* AKORDİYON SATIR (§4.1) — telefonda satıra dokununca satır İÇİ detay açılır.
   Geniş ekranda aynı dokunuş bağlantıyı izler (JS genişliğe göre dallanır). */
.row__chev{flex:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--fg-faint);font-size:15px;transition:transform var(--dur-1) var(--ease)}
.row--open .row__chev{transform:rotate(90deg)}
.row__detail{display:none;grid-column:1/-1;margin-top:var(--sp-3);padding-top:var(--sp-3);
  border-top:1px dashed var(--border);position:relative;z-index:1}
.row--open .row__detail{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4);
  font-size:var(--fs-200)}
.row__detail dt{color:var(--fg-faint)}
.row__detail dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
/* Akordiyon eylemleri: <dl>'in DIŞINDA (geçerli HTML) ve yalnız satır açıkken görünür.
   ⚠️ En çok 2 düğme (§4.3); fazlası tam kart ekranına aittir. */
.row__acts{display:none}
.row--open .row__acts{display:flex;flex-wrap:wrap;gap:var(--sp-2);
  grid-column:1/-1;margin-top:var(--sp-3);position:relative;z-index:1}

/* --- KOMUT PALETİ (§4.4) — telefonda alt sayfa, masaüstünde ortalanmış kutu --- */
.cmdk-host{position:fixed;inset:0;z-index:calc(var(--z-modal) + 2);
  display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.cmdk{pointer-events:auto;width:100%;max-height:80dvh;display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:var(--r-3) var(--r-3) 0 0;
  box-shadow:var(--shadow-3);overflow:hidden;animation:riseIn var(--dur-3) var(--ease)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cmdk{--glass-blur:var(--blur-2)}
}
.cmdk__input{font:var(--fs-input)/1.4 var(--font);color:var(--fg);background:transparent;
  border:0;border-bottom:1px solid var(--border);min-height:54px;padding:0 var(--sp-4);width:100%}
.cmdk__input:focus{outline:none}
.cmdk__list{overflow:auto;padding:var(--sp-2);margin:0;
  padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px))}
.cmdk__sec{font-size:var(--fs-50);text-transform:uppercase;letter-spacing:.06em;
  color:var(--fg-faint);font-weight:600;padding:var(--sp-3) var(--sp-3) var(--sp-1)}
.cmdk__opt{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-1);cursor:pointer}
.cmdk__opt[aria-selected="true"]{background:var(--sel-bg)}
.cmdk__hint{margin-left:auto;font-size:var(--fs-100);color:var(--fg-faint)}
.cmdk__empty{padding:var(--sp-5) var(--sp-3);color:var(--fg-muted);font-size:var(--fs-200)}

/* Bölüm başlığı — çekmecedeki ve kenar çubuğundaki menü bölümleri (Remnawave deseni) */
.nav__sec{font-size:var(--fs-50);text-transform:uppercase;letter-spacing:.06em;
  color:var(--fg-faint);font-weight:600;padding:var(--sp-3) var(--sp-3) var(--sp-1)}

/* --- Sayfalama: dar = «ещё», geniş = numaralar --- */
.pager{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border)}
.pager__info{color:var(--fg-muted);font-size:var(--fs-100);margin-right:auto;font-variant-numeric:tabular-nums}
.pager__pages{display:none;gap:var(--sp-1)}
.pager__btn{min-width:38px;min-height:38px;padding:0 var(--sp-2);border:1px solid var(--border);
  border-radius:var(--r-1);background:var(--surface);font-size:var(--fs-200);cursor:pointer}
.pager__btn[aria-current="true"]{background:var(--sel-bg);border-color:var(--sel-line);font-weight:600}

/* --- Form --- */
.form{display:flex;flex-direction:column;gap:var(--sp-4)}
.grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field__label{font-size:var(--fs-200);font-weight:500;color:var(--fg)}
.field__unit{color:var(--fg-faint);font-weight:400}
.field input,.field select,.field textarea{
  font:var(--fs-input)/1.4 var(--font);color:var(--fg);
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-1);
  min-height:48px;padding:0 var(--sp-3);width:100%;
}
.field textarea{padding:var(--sp-3);min-height:96px;resize:vertical;line-height:var(--lh)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--fg)}
.field__hint{font-size:var(--fs-200);color:var(--fg-muted)}   /* DÜZEY 1: ≤60 karakter */
.switch{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);cursor:pointer}
.switch input{width:20px;height:20px;accent-color:var(--fg);flex:none}

/* --- Kısa açıklama (kart başına EN ÇOK 1, ≤120 karakter) --- */
.hint{font-size:var(--fs-200);color:var(--fg-muted);line-height:var(--lh-loose)}

/* --- DÜZEY 2: kapalıyken 0 piksel metin --- */
.more{border-top:1px dashed var(--border);padding-top:var(--sp-3)}
.more>summary{cursor:pointer;list-style:none;min-height:var(--tap);display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-200);font-weight:500;color:var(--fg-muted)}
.more>summary::-webkit-details-marker{display:none}
.more>summary::before{content:"▸";transition:transform var(--dur-1) var(--ease)}
.more[open]>summary::before{transform:rotate(90deg)}
.more__body{font-size:var(--fs-200);color:var(--fg-muted);line-height:var(--lh-loose);
  display:flex;flex-direction:column;gap:var(--sp-2);padding-bottom:var(--sp-2)}
.more__body code{font-size:.92em;background:var(--surface-2);border:1px solid var(--border);
  border-radius:4px;padding:1px 5px}

/* --- Boş/hata durumu (v2 .empty + .error-box + .spinner birleşimi) --- */
.state{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;
  padding:var(--sp-6) var(--sp-4);border:1px dashed var(--border-strong);border-radius:var(--r-2);
  background:var(--surface)}

/* --- Bölüm ayıracı (v2 .section-label yerine; envanterde §4.3'te zaten kararlıydı) --- */
.card__sep{display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-50);text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  color:var(--fg-faint);padding:var(--sp-5) 0 var(--sp-2)}
.card__sep::after{content:"";flex:1;height:1px;background:var(--border);order:0}
.card__sep b{order:1;font-variant-numeric:tabular-nums;color:var(--fg-muted);font-weight:600}

/* Anlam taşıyan meta hücresi bir kademe yukarı: `--fg-faint` bir bilginin TEK taşıyıcısı olamaz (§6.1) */
.row__meta .cell--key{color:var(--fg-muted);font-weight:500}
/* Durum noktası ADA YAPIŞIR — dar ekranda ayrı sütun bütçesi yok */
.row__link .dot{margin-right:var(--sp-2);vertical-align:baseline}

/* ========================================================================
   6) PREMIUM — «GÖRÜNÜR AMA KİLİTLİ» (§5)
   ======================================================================== */
.lockwrap{position:relative;min-height:420px}
/* ☠️ backdrop-filter DEĞİL, filter: eleman BİR KEZ rasterize edilir; kaydırmada yeniden hesaplanmaz */
.lockwrap__preview{
  filter:blur(6px);opacity:.5;pointer-events:none;user-select:none;
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.lockcard{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:var(--sp-5);                       /* telefonda BAŞPARMAK bölgesi (§5.5) */
  width:min(100% - 32px,420px);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-3);
  box-shadow:var(--shadow-3);padding:var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.lockcard__title{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-500);font-weight:600;letter-spacing:-.01em}
.lockcard__lead{font-size:var(--fs-200);color:var(--fg-muted)}
.lockcard__list{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-200)}
.lockcard__list li{display:flex;align-items:center;gap:var(--sp-2)}
.lockcard__why{font-size:var(--fs-100);color:var(--fg-faint)}
/* «Premium» hissi SÜSLE değil METİNLE kurulur (§5.4 — Happ araçlarında ölçüldü):
   rozet + monospace satır + BÜYÜK HARF birincil düğme. Blur burada ARTIRILMAZ. */
.mono{display:block;font-family:var(--font-mono);font-size:var(--fs-200);color:var(--fg-muted);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-1);
  padding:var(--sp-2) var(--sp-3);overflow-x:auto;white-space:nowrap}
/* ⚠️ Metin kaynakta NORMAL yazılır, büyütme CSS'tedir — ekran okuyucu harf harf okumasın. */
.btn--caps{text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-200)}

/* --- Kilitli menü öğesi --- */
.nav__item--locked{color:var(--fg-muted)}
.nav__item--locked .nav__lock{margin-left:auto}

/* ========================================================================
   7) ÖRTÜ KATMANLARI — perde / modal / palet / toast (hepsi cam, hepsi küçük)
   ======================================================================== */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-drawer);border:0}
.modal-scrim{z-index:var(--z-modal)}
.cmdk-scrim{z-index:calc(var(--z-modal) + 1)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .scrim{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
}

/* Çekmece açıkken gövde kaydırması KİLİTLİ → blur burada UCUZ (statik kompozit, §2.1). */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sidebar{--glass-blur:var(--blur-2)}
}
@keyframes riseIn{from{transform:translateY(16px);opacity:.6}to{transform:none;opacity:1}}

.nav{display:flex;flex-direction:column}
.nav__item{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-1);color:var(--fg);font-size:var(--fs-300);
  position:relative;cursor:pointer;background:none;border:0;text-align:left;width:100%}
.nav__item:hover{background:var(--sel-bg)}
.nav__item[aria-current="page"]{background:var(--sel-bg);font-weight:600}
.nav__item[aria-current="page"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;
  border-radius:0 2px 2px 0;background:var(--fg)}
.nav__ico{width:20px;text-align:center;flex:none}
.nav__badge{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--accent-fg);font-size:var(--fs-50);font-weight:700}

.modal-host{position:fixed;inset:0;z-index:calc(var(--z-modal) + 1);
  display:flex;align-items:flex-end;justify-content:center;padding:var(--sp-4);
  padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px));pointer-events:none}
.modal{
  pointer-events:auto;width:min(100%,460px);
  border:1px solid var(--border);border-radius:var(--r-3);box-shadow:var(--shadow-3);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);
  animation:riseIn var(--dur-3) var(--ease);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .modal{--glass-blur:var(--blur-2)}
}
.modal__title{font-size:var(--fs-400);font-weight:600}
.modal__text{font-size:var(--fs-200);color:var(--fg-muted);line-height:var(--lh-loose)}
/* Yıkıcı eylemin üç zorunlu satırı — etiket solda, değer sağda, sayılar tabular */
.modal__facts{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4);
  font-size:var(--fs-200);padding:var(--sp-3);border-radius:var(--r-1);
  background:var(--surface-2);border:1px solid var(--border)}
.modal__facts dt{color:var(--fg-faint)}
.modal__facts dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.modal__facts dd .mono{display:inline;background:none;border:0;padding:0;white-space:normal}
/* Kademe B: onay kutusu işaretlenmeden birincil düğme açılmaz */
.modal__ack{display:flex;align-items:flex-start;gap:var(--sp-3);min-height:var(--tap);
  font-size:var(--fs-200);color:var(--danger);cursor:pointer}
.modal__ack input{width:20px;height:20px;accent-color:var(--fg);flex:none;margin-top:1px}
.modal__actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.modal__actions .btn{flex:1}
.modal__actions .btn[disabled]{opacity:.45;cursor:not-allowed}

/* ⚠️ TELEFONDA ÜST-ORTA (2026-09-20): alt kenarı parmak ve açılan klavye örtüyor.
   Masaüstünde sağ-alta döner (aşağıdaki min-width bloğu). */
.toasts{position:fixed;left:var(--sp-4);right:var(--sp-4);z-index:var(--z-toast);
  top:calc(var(--bar-h) + var(--sp-2) + env(safe-area-inset-top,0px));
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:var(--sp-2);max-width:100%;
  padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-2);
  box-shadow:var(--shadow-2);font-size:var(--fs-200);cursor:pointer;
  animation:toastIn var(--dur-2) var(--ease);transition:opacity var(--dur-3) var(--ease)}
@keyframes toastIn{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
.toast--out{opacity:0}
.toast__ico{flex:none}
.toast--ok .toast__ico{color:var(--ok)}
.toast--warn .toast__ico{color:var(--warn)}
.toast--danger .toast__ico{color:var(--danger)}

/* Üst ilerleme çizgisi */
#progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:var(--z-progress);
  background:var(--fg);transform:scaleX(0);transform-origin:left;opacity:0}
#progress.on{opacity:1;transform:scaleX(.8);transition:transform 1.2s var(--ease),opacity .1s}
#progress.done{opacity:0;transform:scaleX(1);transition:transform var(--dur-2) var(--ease),opacity var(--dur-3) .1s}

/* Yardımcılar */
.u-wide{display:none}
/* Yalnız ekran okuyucu: `display:none` OLMAZ — o, öğeyi erişilebilirlik ağacından da SİLER */
.u-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.txt--ok{color:var(--ok)} .txt--warn{color:var(--warn)} .txt--danger{color:var(--danger)}
.protonote{font-size:var(--fs-100);color:var(--fg-faint);text-align:center;padding:var(--sp-4) 0}

/* ========================================================================
   7b) ETKİLEŞİM DESENLERİ — `25-ETKILESIM-DESENLERI.md`
   ======================================================================== */

/* --- §1 BÖLÜMLÜ SAYFA: 10 sekmelik yatay şeridin YERİNE --- */
.sectwrap{display:flex;flex-direction:column;gap:var(--sp-5)}
.sectcol{min-width:0}                      /* grid çocuğu: uzun içerik sütunu taşırmasın */
.sect{display:flex;flex-direction:column;gap:var(--sp-4);
  scroll-margin-top:calc(var(--bar-h) + var(--sp-4))}   /* yapışkan üst bar hedefi ÖRTMESİN */
.sect+.sect{margin-top:var(--sp-6)}
.sect:focus{outline:none}                  /* atlayınca odak buraya taşınır, halka çizilmez */
/* ☠️ KATI YÜZEY, cam DEĞİL: kaydırma akışının İÇİNDEdir → §2.2 kuralı 2.
   ☠️ z-index üst barın ALTINDA (§10). Atasına transform/filter/opacity<1 KONULAMAZ:
      o an `position:sticky` sessizce ölür ve hiçbir yerde hata yazmaz. */
.sect__head{position:sticky;top:calc(var(--bar-h) + var(--sp-2));z-index:calc(var(--z-bar) - 1);
  display:flex;align-items:center;gap:var(--sp-3);min-height:48px;padding:0 var(--sp-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-1);
  box-shadow:var(--shadow-1),var(--edge-top);
  font-size:var(--fs-500);font-weight:600;letter-spacing:-.01em}
.sect__body{display:flex;flex-direction:column;gap:var(--sp-4)}

/* --- ATLAYICI ---
   ☠️ TELEFONDA HİÇ ÇİZİLMEZ (sahip, 2026-09-20: «berbat görünecek gibi duruyor» — açık liste
      ekranın yarısını yiyip asıl içeriği kıyıya itiyordu). Telefonda bölümlere geçiş üst bardaki
      AYRI DÜĞMEDEN (🗂) açılan ALT SAYFA ile olur — ⋮ menüsüyle AYNI mekanizma, yeni desen YOK.
   ≥920px'te bu blok yapışkan yan sütun olur (sahip orayı sorun etmedi). */
.jump{display:none;border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface);
  box-shadow:var(--shadow-1),var(--edge-top);overflow:hidden}
.jump__cap{font-size:var(--fs-50);text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  color:var(--fg-faint);padding:var(--sp-3) var(--sp-4) var(--sp-1)}
.jump__list{display:flex;flex-direction:column}
.jump__list a{position:relative;display:flex;align-items:center;min-height:var(--tap);
  padding:0 var(--sp-4);font-size:var(--fs-200);color:var(--fg-muted)}
.jump__list a+a{border-top:1px solid var(--border)}
.jump__list a[aria-current="true"]{background:var(--sel-bg);color:var(--fg);font-weight:600}
.jump__list a[aria-current="true"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;
  width:2px;background:var(--fg);border-radius:0 2px 2px 0}

/* --- §3 Araç çubuğu (v2 .search + .inline-form + .banner-row birleşimi) --- */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.searchbox{flex:1 1 180px;min-width:0}
.searchbox input{font:var(--fs-input)/1.4 var(--font);color:var(--fg);background:var(--surface-2);
  border:1px solid var(--border-strong);border-radius:var(--r-1);min-height:var(--tap);
  padding:0 var(--sp-3);width:100%}
.searchbox input:focus{outline:none;border-color:var(--fg)}
/* Tıklanabilir metrik: «Не работают» sayısı listeyi süzer */
.stat--act{cursor:pointer;text-align:left;width:100%;font:inherit}
.stat--act[aria-pressed="true"]{border-color:var(--fg)}

/* --- §2 SATIR EYLEM MENÜSÜ (⋮) — telefonda ALT SAYFA, ≥920px'te POPOVER ---
   ☠️ Menü ve perdesi <body> KÖKÜNDEdir. İki sebep birden:
      (1) §10 yığınlama kuralı (perde ile panel aynı bağlamın çocuğu olmalı),
      (2) `.list` geniş ekranda `overflow:hidden` taşır → satırın İÇİNE konan menü KIRPILIRDI. */
.row__more{min-width:var(--tap);min-height:var(--tap);flex:none;font-size:19px;line-height:1}
.menu-scrim{z-index:calc(var(--z-modal) + 1)}
.menu-host{position:fixed;inset:0;z-index:calc(var(--z-modal) + 2);
  display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.menu{pointer-events:auto;width:100%;max-height:80dvh;display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:var(--r-3) var(--r-3) 0 0;
  box-shadow:var(--shadow-3);overflow:hidden;animation:riseIn var(--dur-3) var(--ease)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .menu{--glass-blur:var(--blur-2)}
}
/* Başlık SATIRIN ADINI taşır: sheet açılınca hangi satıra baktığın görünmez olmasın */
.menu__head{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);
  font-size:var(--fs-100);color:var(--fg-faint)}
.menu__head b{display:block;font-size:var(--fs-400);color:var(--fg);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu__list{overflow:auto;padding:var(--sp-2);
  padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px))}
.menu__item{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;
  min-height:48px;padding:0 var(--sp-3);border:0;border-radius:var(--r-1);
  background:none;color:var(--fg);font-size:var(--fs-300);cursor:pointer}
.menu__item:hover,.menu__item[data-cur="1"]{background:var(--sel-bg)}
.menu__ico{width:20px;text-align:center;flex:none}
/* ☠️ YIKICI: renk TEK KANAL DEĞİL — glif + üst ayraç + kendi grubu + --danger METİN.
   Dolgu kırmızı zemin YASAK (monokrom kuralı §1.3). */
.menu__item--danger{color:var(--danger)}
.menu__sep{height:1px;margin:var(--sp-2) var(--sp-3);background:var(--border)}
.menu__lock{margin-left:auto}

/* ========================================================================
   8) MASAÜSTÜ — min-width ile EKLENİR (v2'nin max-width deseninin TERSİ)
   ======================================================================== */
@media (min-width:920px){
  :root{--fs-600:28px;--fs-700:34px}
  .shell{flex-direction:row}
  /* ☠️ Aynı DOM, başka davranış: çekmece → KALICI sütun. Blur burada geri alınır
     (altından içerik akmaz → cam hiçbir şey göstermez, bedeli boşa gider). */
  .sidebar{
    position:sticky;top:0;height:100dvh;width:248px;max-width:none;flex:none;
    visibility:visible;transform:none;transition:none;z-index:auto;
    padding:var(--sp-5) var(--sp-3);gap:var(--sp-5);
    background:var(--surface)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  .drawer-only{display:none!important}     /* burger + çekmece perdesi */
  .topbar__user{display:block}
  .view{padding:var(--sp-6) var(--sp-6) var(--sp-9);gap:var(--sp-6)}
  .page__head{flex-direction:row;align-items:center;justify-content:space-between}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .toasts{left:auto;right:var(--sp-6);top:auto;bottom:var(--sp-6);align-items:stretch;
    width:min(420px,calc(100vw - 48px))}
  .modal-host{align-items:center}
  .u-narrow{display:none!important}
  .u-wide{display:block}
  .pager__pages{display:flex}

  /* LİSTE ikinci sunumu: aynı DOM, sütunlar açılır */
  .list{gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);
    box-shadow:var(--shadow-1),var(--edge-top);overflow:hidden}
  .list__head{display:grid;grid-template-columns:var(--cols);gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-4);background:var(--surface-2);border-bottom:1px solid var(--border);
    font-size:var(--fs-50);text-transform:uppercase;letter-spacing:.06em;color:var(--fg-faint);font-weight:600}
  .list__head .num{text-align:right}
  .row{grid-template-columns:var(--cols);row-gap:0;min-height:52px;
    border:0;border-radius:0;box-shadow:none;background:transparent;padding:var(--sp-2) var(--sp-4)}
  .row+.row{border-top:1px solid var(--border)}
  .row:hover{background:var(--surface-2)}
  .row__link{grid-column:auto;grid-row:auto;font-size:var(--fs-300)}
  .row__meta{display:contents}
  .row__meta .cell{font-size:var(--fs-200);color:var(--fg-muted);text-align:right}
  .row__meta .cell+.cell::before{content:none}
  .cell[data-unit]::after{content:none}
  .row__end{grid-column:auto;grid-row:auto;justify-content:flex-end}
  .row__chev{display:none}                 /* geniş ekranda akordiyon yok: satır DETAYA gider */
  .row__detail,.row__acts{display:none!important}
  .cmdk-host{align-items:flex-start;padding-top:12vh}
  .cmdk{width:min(560px,calc(100vw - 48px));border-radius:var(--r-3);max-height:min(60vh,520px)}
  .lockcard{position:static;transform:none;margin:calc(-1 * var(--sp-8)) auto 0}
  .lockwrap{display:flex;flex-direction:column}

  /* --- §1 ATLAYICI: geniş ekranda YAPIŞKAN YAN SÜTUN (telefonda hiç çizilmiyor) --- */
  .sectwrap{display:grid;grid-template-columns:216px minmax(0,1fr);gap:var(--sp-6);align-items:start}
  .jump{display:block;position:sticky;top:calc(var(--bar-h) + var(--sp-4))}
  .u-narrow-only{display:none!important}   /* yalnız telefonda anlamı olan denetimler */
  .sect+.sect{margin-top:var(--sp-7)}

  /* --- §2 MENÜ: alt sayfa DEĞİL, düğmeye yapışan POPOVER --- */
  .menu-host{display:block}
  .menu{position:absolute;width:260px;max-height:min(70vh,440px);
    border-radius:var(--r-2);animation:none}
  .menu__head{display:none}            /* satır ekranda duruyor → başlık tekrar olurdu */
  .menu__item{min-height:38px;font-size:var(--fs-200)}
}

/* ========================================================================
   9) SİSTEM TERCİHLERİ — üçü de zorunlu (§6.4)
   ======================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (prefers-reduced-transparency:reduce){
  .glass,.sidebar,.modal,.toast,.cmdk,.menu,.topbar{
    background:var(--glass-solid)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .scrim{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .lockwrap__preview{display:none}       /* bulanık dekor istenmiyor demektir */
}
@media (prefers-contrast:more){
  :root{--border:var(--border-strong)}
  .glass,.sidebar,.modal,.toast,.cmdk,.menu{background:var(--glass-solid)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .lockwrap__preview{display:none}
}
/* Kullanıcı düğmesi: camı kapat (prefers-reduced-transparency'yi desteklemeyen tarayıcılar için) */
[data-glass="off"] .glass,
[data-glass="off"] .sidebar,
[data-glass="off"] .modal,
[data-glass="off"] .cmdk,
[data-glass="off"] .menu,
[data-glass="off"] .toast{
  background:var(--glass-solid)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
[data-glass="off"] .scrim{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
[data-glass="off"] .lockwrap__preview{display:none}

/* ☠️ EN SONDA VE BİLEREK: masaüstünde kenar çubuğu DAİMA katıdır.
   Aynı DOM iki bağlamda yaşıyor; yukarıdaki cam kuralları (ve cam-kapatma) telefondaki
   ÇEKMECE içindir. Seçici `[data-glass] .sidebar` — üstteki `[data-glass="off"] .sidebar`
   ile aynı özgüllükte ama SONRA geldiği için kazanır. */
@media (min-width:920px){
  [data-glass] .sidebar{
    background:var(--surface)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* ========================================================================
   10) GİRİŞ EKRANI + AÇILIŞ — kabuğun DIŞINDAKİ tek yüzey
   Prototipte yoktu (orası tek sayfalık maketti); üretimde giriş zorunlu.
   Kendi token'larını ICAT ETMEZ: yalnız yukarıdaki anlamsal token'ları kullanır,
   böylece gece/gündüz ve cam-kapatma tercihleri burada da kendiliğinden geçerlidir.
   ======================================================================== */
.boot{display:flex;align-items:center;justify-content:center;min-height:100dvh;
  color:var(--fg-faint);font-size:var(--fs-200)}

/* Dikey ortalama DEĞİL, üstten pay: telefonda klavye açılınca form yukarı sıçramasın. */
.auth{min-height:100dvh;display:flex;justify-content:center;
  padding:var(--sp-5) var(--sp-4);
  padding-top:calc(var(--sp-6) + env(safe-area-inset-top,0px));
  padding-bottom:calc(var(--sp-5) + env(safe-area-inset-bottom,0px))}
.auth__card{width:min(100%,380px);align-self:flex-start;
  display:flex;flex-direction:column;gap:var(--sp-5)}

.login{display:flex;flex-direction:column;gap:var(--sp-4)}
.login__brand{display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-400);font-weight:600;letter-spacing:-.01em}
.login__title{font-size:var(--fs-600);font-weight:600;letter-spacing:-.02em}
.login__hint{font-size:var(--fs-200);color:var(--fg-muted);line-height:var(--lh-loose)}
/* Hata: renk TEK KANAL olamaz → kenar çizgisi + glif metinde taşınır (§1.3) */
.login__err{font-size:var(--fs-200);color:var(--danger);
  border-left:2px solid var(--danger);padding:var(--sp-2) var(--sp-3);
  background:var(--surface-2);border-radius:0 var(--r-1) var(--r-1) 0}

/* 2FA kurulumu: QR beyaz zemin İSTER — gece temasında koyu zemine basılan QR okunmaz. */
.qr{display:block;width:180px;height:180px;align-self:center;
  background:#FFF;padding:var(--sp-3);border-radius:var(--r-2);border:1px solid var(--border)}
.secret{font-size:var(--fs-200);color:var(--fg-muted);text-align:center;word-break:break-all}
.secret code{font-family:var(--font-mono);font-size:var(--fs-200);color:var(--fg);
  background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:2px 6px}

/* Ekran girişi — yalnız opaklık+kayma. `prefers-reduced-motion` altında tamamen kapanır. */
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.view--enter{animation:viewIn var(--dur-2) var(--ease)}
@media (prefers-reduced-motion:reduce){
  .view--enter{animation:none}
}

/* ☠️ `.muted` — ikincil metin. TANIMSIZDI ve dört yerde kullanılıyordu (app.js ×2, ui.js empty()):
   sınıf yoksa metin TAM kontrastla çizilir, yani «bu ikincil bilgi» ayrımı sessizce kaybolur.
   Hiçbir hata vermez — tam olarak bu kod tabanının «sessiz arıza» sınıfı. Doğrulama turunda ölçüldü.
   ⚠️ `--fg-muted` (4,6:1) kullanır, `--fg-faint` DEĞİL: `--fg-faint` bir bilginin TEK taşıyıcısı olamaz. */
.muted{color:var(--fg-muted)}

/* ===========================================================================
   §12  EKMEK KIRINTISI (breadcrumb) + GERİ  — 2026-09-20, sahibin isteği:
   «geri dönme tuşu da sekmesi de olsun, sadece ana ekrana dönmemek açısından»

   İki ayrı şey, ikisi de gerekli:
     · GERİ  (.crumbs__back) — BİR seviye yukarı. Telefonda parmağın ulaştığı yer, solda.
     · SEKME (.crumbs__item) — tüm zincir. Üç seviye aşağıdayken ortaya atlamayı sağlar;
       geri tuşu tek başına insanı ya bir adım ya ana ekrana götürürdü.
   ⚠️ Telefonda zincir TAŞMAZ, KAYAR (overflow-x) — sarmalamak başlığı iki satıra böler ve
      sayfanın üstünü yer.
   =========================================================================== */
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:10px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.crumbs::-webkit-scrollbar{display:none}
.crumbs__back{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface);color:var(--fg);text-decoration:none;font-size:15px;line-height:1}
.crumbs__back:hover{background:var(--surface-2);border-color:var(--border-strong)}
.crumbs__trail{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;font-size:12.5px}
.crumbs__item{color:var(--fg-muted);text-decoration:none;padding:2px 0;border-bottom:1px solid transparent}
.crumbs__item:hover{color:var(--fg);border-bottom-color:var(--border-strong)}
/* Son halka = BULUNDUĞUN yer: bağlantı DEĞİL (kendine giden bağlantı kullanıcıyı yanıltır). */
.crumbs__item--now{color:var(--fg);font-weight:600;cursor:default}
.crumbs__sep{color:var(--fg-faint);flex:none}