/* ============================================================================
   SENİN HESAP ERP NEXT — Operasyon Merkezi
   styles.css · Sprint 1.2A · Design System Cleanup

   TEK KAYNAK KURALI
   Ham px değeri yalnızca şu dört yerde kullanılabilir:
     1) Token tanımlarının kendisi (§02)
     2) Kenarlık kalınlıkları (1px / 2px hairline) ve odak halkası
     3) İkon kutu ölçüleri (.ico / .ico--sm / .ico--xs) ve bunlara dayanan calc()
     4) Görünüm-göreli konumlandırma (min(14vh, 120px) gibi)
   Bunun dışında her boşluk, yarıçap, tipografi ve yükseklik değeri token'dan gelir.
   Denetim: `grep -cE "(padding|margin|gap).*[0-9]+px" styles.css` → yalnızca §3/§4.

   Ölçek özeti
     Tipografi : 8 kademe   (11 · 12 · 13 · 14 · 16 · 20 · 26 · 30)
     Ağırlık   : 3 kademe   (400 · 500 · 600)
     Boşluk    : 4px tabanlı, tek yarım adım (2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40)
     Yarıçap   : 3 + tam    (6 · 8 · 12 · full)
     Kontrast  : tüm metin/zemin çiftleri WCAG AA (≥4.5:1)

   Yapı
   01 Reset            06 Sol navigasyon      11 Timeline
   02 Design tokens    07 Bölüm/kart iskeleti 12 Sağ ray
   03 Temel tipografi  08 Business Pulse      13 Drawer
   04 Kabuk (layout)   09 Bugün Yapılacaklar  14 Command palette
   05 Header + search  10 Risk / Hızlı işlem  15 Toast · 16 Responsive
   ========================================================================== */

/* ── 01 · RESET ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
/* .drawer/.palette-wrap gibi display tanımlı katmanlarda [hidden] ezilmesin */
[hidden] { display: none !important; }

/* ── 02 · DESIGN TOKENS ─────────────────────────────────────────────────── */
:root {
  /* — Yüzeyler ve kenarlar — ekranın %80'i buradan beslenir
       (erp-dashboard-design-e0f0fe referans paleti — panel-referans-klon.html
       ile birebir; bkz. dosya başı Sprint notu) */
  --bg:          hsl(228 33% 97%);
  --surface:     hsl(0 0% 100%);
  --surface-2:   hsl(240 67% 99%);
  --surface-3:   hsl(228 20% 96%);
  --border:      hsl(231 23% 94%);
  --border-2:    hsl(229 22% 90%);

  /* — Metin — üç kademe, hepsi zemininde WCAG AA
       text-1 ≈ 14.9:1 · text-2 ≈ 7.4:1 · text-3 ≈ 4.7:1 (beyaz üzerinde) */
  --text-1:      hsl(229 26% 16%);
  --text-2:      hsl(228 14% 41%);
  --text-3:      hsl(228 13% 62%);

  /* — Marka — yalnızca kullanıcı kararı beklenen noktada */
  --brand:       hsl(247 74% 63%);
  --brand-2:     hsl(298 32% 56%);
  --brand-hover: hsl(247 63% 57%);
  --brand-soft:  hsl(252 79% 96%);
  --brand-ring:  hsl(247 74% 63% / .30);
  /* Cam düğme varyantları — hsl(from ...) yerine SABİT alfa tanımları
     kullanılır (tarayıcı desteği/uyumluluk için tek doğruluk kaynağı budur). */
  --brand-glass: hsl(247 74% 63% / .88);
  --brand-glow:  hsl(247 74% 63% / .35);
  --brand-glow-strong: hsl(247 74% 63% / .45);

  /* — Anlamsal durum — platform genelinde sabit karşılık, metin olarak AA */
  --ok:      hsl(142 76% 36%);   --ok-soft:      hsl(141 84% 93%);
  --warn:    hsl(25 95% 53%);    --warn-soft:    hsl(34 100% 92%);
  --danger:  hsl(0 72% 51%);     --danger-soft:  hsl(0 93% 94%);
  --info:    hsl(221 83% 53%);   --info-soft:    hsl(214 95% 93%);

  /* — Yeni oluşturma eylemi (Sprint 6e) — "Yeni Müşteri/Ürün/Hareket" gibi
       KAYIT OLUŞTURAN düğmeler; mevcut eylemlerden (--brand: düzenle/kaydet)
       kasıtlı olarak AYRI bir renk taşır. */
  --success:       hsl(142 71% 40%);
  --success-hover: hsl(142 76% 32%);
  --success-soft:  hsl(142 60% 94%);
  --success-ring:  hsl(142 71% 40% / .30);
  --success-glass: hsl(142 71% 40% / .88);
  --success-glow:  hsl(142 71% 40% / .35);
  --success-glow-strong: hsl(142 71% 40% / .45);

  /* — Dalga 1 (Theme Foundation) additive token'lar — varsayılan değerleri
       mevcut görünümü BİREBİR korur (no-op); Satış Faturası pilotu kendi
       :root:not([data-theme="dark"]) bloğunda bunları YENİDEN tanımlar. */
  --surface-header: hsl(228 20% 96%);
  --surface-hover:  hsl(228 20% 96%);
  --surface-input:  hsl(0 0% 100%);
  --on-brand:       #fff;
  --on-success:     #fff;
  /* İterasyon 8 — dolu (filled) semantik durum butonları için (ör. Action
     Modal segmented control). --on-success ile AYNI mantık, üç yeni token. */
  --on-ok:          #fff;
  --on-danger:      #fff;
  --on-warn:        #fff;
  --overlay:        hsl(228 20% 10% / .5);
  --header-bg:      var(--surface-header);

  /* — Cam yüzey (Sprint 6e) — YALNIZCA yüzen kontrollerde kullanılır (header,
       düğmeler, açılır menüler): sabit içerik kartlarında (.kart/.bolum)
       OKUNABİLİRLİK için düz zemin korunur, cam efekti UYGULANMAZ. */
  --glass-bg:     hsl(0 0% 100% / .55);
  --glass-border: hsl(0 0% 100% / .7);
  --glass-blur:   16px;

  /* — Tipografi: 8 kademe. 16px, mobil odakta tarayıcı zoom'unu engeller. */
  --fs-11: .6875rem;  --fs-12: .75rem;   --fs-13: .8125rem;  --fs-14: .875rem;
  --fs-16: 1rem;      --fs-20: 1.25rem;  --fs-26: 1.625rem;  --fs-30: 1.875rem;

  /* — Ağırlık: 3 kademe. Hiyerarşi ağırlıkla değil, boyut+renkle kurulur. */
  --fw-normal: 400;   --fw-medium: 500;  --fw-strong: 600;

  /* — Boşluk: 4px tabanlı. --s-2 tek yarım adımdır, sadece hairline hizalama.
       --s-48/--s-64 (Design System v1) yalnız SAYFA düzeyi ritim için —
       bir bileşenin İÇİNDE kullanılmaz, bölümler ARASI nefes payı içindir. */
  --s-2: 2px;   --s-4: 4px;   --s-8: 8px;   --s-12: 12px;  --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px;
  --s-48: 48px; --s-64: 64px;

  /* — Yarıçap: 3 kademe + tam yuvarlak. --r-xl (Design System v1) yalnız
       büyük yüzeyler/paneller için — kart varsayılanı r-lg'de KALIR. */
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-full: 999px;

  /* — Kontrol yükseklikleri: 4 kademe, hepsi 4px skalasında */
  --h-sm: 24px;   --h-md: 32px;   --h-lg: 36px;   --h-xl: 52px;

  /* — Yükselti: 3 kademe, dekoratif gölge yok */
  --sh-1: 0 1px 2px hsl(222 30% 14% / .05);
  --sh-2: 0 4px 12px hsl(222 30% 14% / .07), 0 1px 3px hsl(222 30% 14% / .05);
  --sh-3: 0 16px 48px hsl(222 30% 14% / .16), 0 4px 12px hsl(222 30% 14% / .08);

  /* — Yapısal ölçüler */
  --hdr-h: 56px;
  --searchbar-h: 52px;   /* mobilde header altına inen arama şeridi */
  --nav-w: 244px;
  --nav-w-collapsed: 64px;
  --rail-w: 320px;

  /* — Hareket */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 160ms;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", "Segoe UI", var(--font);
}

/* Koyu tema — sonradan giydirilmiş değil, eşdeğer tasarım.
   Metin kademeleri koyu zeminde de AA eşiğini karşılar. */
:root[data-theme="dark"] {
  --bg:        hsl(224 16% 9%);
  --surface:   hsl(224 14% 12%);
  --surface-2: hsl(224 13% 14.5%);
  --surface-3: hsl(224 12% 18%);
  --border:    hsl(224 11% 21%);
  --border-2:  hsl(224 11% 28%);

  --text-1:    hsl(220 22% 95%);
  --text-2:    hsl(220 13% 74%);
  --text-3:    hsl(220 11% 62%);

  --brand:       hsl(247 77% 78%);
  --brand-2:     hsl(298 35% 71%);
  --brand-hover: hsl(247 82% 84%);
  --brand-soft:  hsl(247 34% 22%);
  --brand-ring:  hsl(247 77% 78% / .34);
  --brand-glass: hsl(247 77% 78% / .82);
  --brand-glow:  hsl(247 77% 78% / .30);
  --brand-glow-strong: hsl(247 77% 78% / .40);

  --success:       hsl(142 60% 55%);
  --success-hover: hsl(142 65% 62%);
  --success-soft:  hsl(142 30% 18%);
  --success-ring:  hsl(142 60% 55% / .34);
  --success-glass: hsl(142 60% 55% / .82);
  --success-glow:  hsl(142 60% 55% / .30);
  --success-glow-strong: hsl(142 60% 55% / .40);

  /* — Dalga 1 additive token'lar (koyu tema no-op karşılıkları) — pilot
       dosyalar bu bloğu DEĞİŞTİRMEZ, koyu tema mevcut görünümünü korur. */
  --surface-header: hsl(224 12% 18%);
  --surface-hover:  hsl(224 12% 18%);
  --surface-input:  hsl(224 14% 12%);
  --on-brand:       hsl(224 30% 10%);
  --on-success:     hsl(224 30% 10%);
  --on-ok:          hsl(224 30% 10%);
  --on-danger:      hsl(224 30% 10%);
  --on-warn:         hsl(224 30% 10%);
  --overlay:        hsl(0 0% 0% / .6);
  --header-bg:      var(--surface-header);

  --glass-bg:     hsl(224 20% 20% / .55);
  --glass-border: hsl(224 16% 45% / .45);

  --ok:     hsl(142 65% 60%);  --ok-soft:     hsl(142 30% 18%);
  --warn:   hsl(30 95% 68%);   --warn-soft:   hsl(30 40% 18%);
  --danger: hsl(0 86% 76%);    --danger-soft: hsl(0 36% 20%);
  --info:   hsl(221 89% 83%);  --info-soft:   hsl(221 38% 19%);

  --sh-1: 0 1px 2px hsl(0 0% 0% / .30);
  --sh-2: 0 4px 14px hsl(0 0% 0% / .40);
  --sh-3: 0 20px 56px hsl(0 0% 0% / .60), 0 4px 12px hsl(0 0% 0% / .40);
}

body, .card, .hdr, .nav, .drawer, .palette {
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 03 · TEMEL TİPOGRAFİ & YARDIMCILAR ─────────────────────────────────── */
body {
  font-family: var(--font);
  font-size: var(--fs-14);
  font-weight: var(--fw-normal);
  line-height: 1.5;
  color: var(--text-1);
  background: var(--bg);
}

.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7;
       stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--sm { width: 16px; height: 16px; stroke-width: 1.85; }
.ico--xs { width: 14px; height: 14px; stroke-width: 2; }

.kbd, kbd {
  font-family: var(--font); font-size: var(--fs-11); font-weight: var(--fw-strong);
  color: var(--text-3); background: var(--surface-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4); min-width: var(--s-20); display: inline-block; text-align: center;
}

.skip-link {
  position: fixed; top: var(--s-8); left: var(--s-8); z-index: 999;
  padding: var(--s-8) var(--s-16); border-radius: var(--r-md); font-weight: var(--fw-strong);
  background: var(--brand); color: #fff; transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm);
}

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

@keyframes flash {
  0%   { background: transparent; }
  18%  { background: var(--brand-soft); }
  100% { background: transparent; }
}
.is-flash { animation: flash 1.4s var(--ease); border-radius: var(--r-sm); }

/* Butonlar — yükseklikler 4px skalasında: 24 / 28 / 32.
   Cam yüzey (Sprint 6e): dolu düğmeler yarı saydam + backdrop-blur taşır,
   köşe tam yuvarlaktır (pill) — metin YİNE TAM OPAK/koyu-kontrastlı kalır,
   okunabilirlik camdan ödün vermez. */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-8);
  height: var(--h-md); padding: 0 var(--s-16); border-radius: var(--r-full);
  font-size: var(--fs-13); font-weight: var(--fw-medium); white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn--primary {
  background: var(--brand-glass); backdrop-filter: blur(6px);
  color: #fff; border-color: hsl(0 0% 100% / .4);
  box-shadow: 0 2px 10px var(--brand-glow);
}
.btn--primary:hover {
  background: var(--brand-hover);
  box-shadow: 0 4px 16px var(--brand-glow-strong);
}
.btn--primary:active { transform: scale(.97); }
:root[data-theme="dark"] .btn--primary { color: hsl(224 30% 10%); }

.btn--success {
  background: var(--success-glass); backdrop-filter: blur(6px);
  color: #fff; border-color: hsl(0 0% 100% / .4);
  box-shadow: 0 2px 10px var(--success-glow);
}
.btn--success:hover {
  background: var(--success-hover);
  box-shadow: 0 4px 16px var(--success-glow-strong);
}
.btn--success:active { transform: scale(.97); }
:root[data-theme="dark"] .btn--success { color: hsl(224 30% 10%); }

.btn--ghost {
  color: var(--text-2); border-color: var(--border); background: var(--glass-bg);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: var(--surface-hover); color: var(--text-1); }
.btn--ghost:active { transform: scale(.97); }

.tbtn {
  font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-2);
  padding: var(--s-4) var(--s-8); border-radius: var(--r-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tbtn:hover { background: var(--surface-hover); color: var(--text-1); }

.ibtn {
  display: inline-grid; place-items: center; width: var(--h-md); height: var(--h-md);
  border-radius: var(--r-md); color: var(--text-2); position: relative;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ibtn:hover { background: var(--surface-hover); color: var(--text-1); }
.ibtn--badge .badge {
  position: absolute; top: var(--s-2); right: var(--s-2);
  min-width: var(--s-16); height: var(--s-16); padding: 0 var(--s-4);
  border-radius: var(--r-full); background: var(--danger); color: #fff;
  font-size: var(--fs-11); font-weight: var(--fw-strong);
  /* border-box + 2px kenar içerik kutusunu daraltır; line-height yerine flex ile ortala */
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
}
:root[data-theme="dark"] .ibtn--badge .badge { color: hsl(224 30% 10%); }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-4);
  height: var(--s-20); padding: 0 var(--s-8);
  border-radius: var(--r-full); font-size: var(--fs-11); font-weight: var(--fw-strong);
  background: var(--surface-3); color: var(--text-2);
}
.chip--count  { background: var(--brand-soft); color: var(--brand); }
.chip--danger { background: var(--danger-soft); color: var(--danger); }
.chip--warn   { background: var(--warn-soft);   color: var(--warn); }
.chip--ok     { background: var(--ok-soft);     color: var(--ok); }
.chip--info   { background: var(--info-soft);   color: var(--info); }

/* ── 04 · KABUK ─────────────────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--rail-w);
  align-items: start;
  padding-top: var(--hdr-h);
  min-height: 100vh;
}
.shell.is-collapsed { grid-template-columns: var(--nav-w-collapsed) minmax(0, 1fr) var(--rail-w); }

.main { padding: var(--s-24) var(--s-24) var(--s-40); min-width: 0; }
.main:focus { outline: none; }

.main__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-20); flex-wrap: wrap; margin-bottom: var(--s-24);
}
.main__title { font-size: var(--fs-26); font-weight: var(--fw-strong); letter-spacing: -.02em; }
.main__sub { font-size: var(--fs-13); color: var(--text-2); margin-top: var(--s-2); }

.grid { display: grid; gap: var(--s-16); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── 05 · HEADER ────────────────────────────────────────────────────────── */
/* Cam üst çubuk (Sprint 6e): sabit konumlu olduğu için altından İÇERİK
   KAYDIRILIR — backdrop-blur bu yüzden görsel olarak ANLAMLIDIR (klasik
   "frosted nav" deseni). Kimlik/gezinme metinleri opak kalır. */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--hdr-h);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--s-20); padding: 0 var(--s-16);
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border-bottom: 1px solid var(--glass-border);
}
.hdr__left, .hdr__right { display: flex; align-items: center; gap: var(--s-8); }
.hdr__center { display: flex; justify-content: center; min-width: 0; }

.brand { display: flex; align-items: center; gap: var(--s-8); padding: 0 var(--s-8); }
.brand__mark {
  width: var(--s-24); height: var(--s-24); border-radius: var(--r-md);
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
}
:root[data-theme="dark"] .brand__mark { color: hsl(224 30% 10%); }
.brand__text { font-weight: var(--fw-strong); font-size: var(--fs-14); letter-spacing: -.01em; }

.org {
  display: flex; align-items: center; gap: var(--s-8);
  height: var(--h-md); padding: 0 var(--s-8);
  border-radius: var(--r-md); border: 1px solid var(--border); margin-left: var(--s-12);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.org:hover { background: var(--surface-hover); border-color: var(--border-2); }
.org__avatar {
  width: var(--s-24); height: var(--s-24); border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2);
  font-size: var(--fs-11); font-weight: var(--fw-strong);
}
.org__name { font-size: var(--fs-13); font-weight: var(--fw-medium); }
.org__chev { color: var(--text-3); }

/* Global Search */
.gsearch { position: relative; width: min(560px, 100%); }
.gsearch__icon { position: absolute; left: var(--s-12); top: 50%; transform: translateY(-50%);
                 color: var(--text-3); pointer-events: none; }
.gsearch__input {
  /* Sol dolgu = ikon sol boşluğu + ikon + metin boşluğu */
  width: 100%; height: var(--h-lg);
  padding: 0 var(--s-40) 0 calc(var(--s-12) + 16px + var(--s-8));
  border-radius: var(--r-md); background: var(--surface-2);
  border: 1px solid var(--border); font-size: var(--fs-13);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.gsearch__input::placeholder { color: var(--text-3); }
.gsearch__input:hover { border-color: var(--border-2); }
.gsearch__input:focus {
  outline: none; background: var(--surface);
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring);
}
.gsearch__kbd { position: absolute; right: var(--s-12); top: 50%; transform: translateY(-50%); }
.gsearch__input:focus ~ .gsearch__kbd { opacity: 0; }

.gsearch__panel {
  position: absolute; top: calc(100% + var(--s-8)); left: 0; right: 0; z-index: 70;
  max-height: min(440px, 70vh); overflow-y: auto;
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: var(--s-8);
}
.gres__group { padding: var(--s-8) var(--s-8) var(--s-2); }
.gres__label {
  font-size: var(--fs-11); font-weight: var(--fw-strong); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; padding: 0 var(--s-8) var(--s-8);
}
.gres {
  display: flex; align-items: center; gap: var(--s-12); width: 100%;
  padding: var(--s-8) var(--s-12); border-radius: var(--r-md); text-align: left;
}
.gres:hover, .gres.is-active { background: var(--surface-hover); }
.gres__ico { color: var(--text-3); }
.gres.is-active .gres__ico { color: var(--brand); }
.gres__main { min-width: 0; flex: 1; }
.gres__title { font-size: var(--fs-13); font-weight: var(--fw-medium);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gres__sub { font-size: var(--fs-12); color: var(--text-2);
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gres__hint { font-size: var(--fs-11); color: var(--text-3); opacity: 0; }
.gres.is-active .gres__hint { opacity: 1; }
.gres__empty { padding: var(--s-20) var(--s-12); text-align: center;
               font-size: var(--fs-13); color: var(--text-2); }

.cmdk {
  display: flex; align-items: center; gap: var(--s-4);
  height: var(--h-md); padding: 0 var(--s-8);
  border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--text-3);
  font-size: var(--fs-11); font-weight: var(--fw-strong);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cmdk:hover { background: var(--surface-hover); color: var(--text-1); }

.live { display: flex; align-items: center; gap: var(--s-8);
        padding: 0 var(--s-8); height: var(--h-sm);
        border-radius: var(--r-full); background: var(--ok-soft); }
.live__dot { width: var(--s-8); height: var(--s-8); border-radius: var(--r-full);
             background: var(--ok); animation: breathe 2.4s ease-in-out infinite; }
.live__txt { font-size: var(--fs-11); font-weight: var(--fw-strong); color: var(--ok); }
@keyframes breathe { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.85); } }

/* Bildirim zili — rozet/sayı YOK (bkz. .ibtn--badge, bilinçli olarak kullanılmaz):
   gerçek bir bildirim üretim altyapısı yok, dürüst boş durum gösterilir. */
.hdr__bell { position: relative; }
.bell__panel {
  position: absolute; top: calc(100% + var(--s-8)); right: 0; z-index: 70;
  width: min(280px, 80vw);
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  padding: var(--s-20) var(--s-16); text-align: center;
  font-size: var(--fs-13); color: var(--text-2);
}

/* Kullanıcı menüsü — bell__panel ile AYNI aç/kapa ve kart deseni, liste
   biçiminde (bkz. kabuk.js · kullaniciMenüsünüKur). */
.hdr__user { position: relative; }
.user__toggle {
  display: flex; align-items: center; gap: var(--s-8);
  background: none; border: none; cursor: pointer;
  padding: var(--s-4) var(--s-8); border-radius: var(--r-md);
  color: inherit; font: inherit;
}
.user__toggle:hover { background: var(--surface-2); }
.user__panel {
  position: absolute; top: calc(100% + var(--s-8)); right: 0; z-index: 70;
  width: min(220px, 80vw); display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  padding: var(--s-8);
}
.user__panelitem {
  display: block; width: 100%; text-align: left;
  padding: var(--s-10) var(--s-12); border-radius: var(--r-md);
  background: none; border: none; cursor: pointer;
  color: var(--text-1); text-decoration: none;
  font-size: var(--fs-13); font-family: inherit;
}
.user__panelitem:hover { background: var(--surface-2); }
.user__panelitem--danger { color: var(--danger, #d33); }

.ico--dark { display: none; }
:root[data-theme="dark"] .ico--light { display: none; }
:root[data-theme="dark"] .ico--dark { display: block; }

.user__avatar {
  width: var(--s-32); height: var(--s-32); border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  font-size: var(--fs-11); font-weight: var(--fw-strong);
}

/* ── 06 · SOL NAVİGASYON ────────────────────────────────────────────────── */
.nav {
  position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h));
  border-right: 1px solid var(--border); background: var(--surface);
  overflow: hidden;
}
.nav__inner { display: flex; flex-direction: column; height: 100%;
              padding: var(--s-12) var(--s-12) var(--s-8); }
.nav__scroll { flex: 1; overflow-y: auto; margin-top: var(--s-8); padding-right: var(--s-2); }
.nav__foot { border-top: 1px solid var(--border); padding-top: var(--s-8); margin-top: var(--s-8); }

.nav__item {
  display: flex; align-items: center; gap: var(--s-12);
  height: var(--h-lg); padding: 0 var(--s-8);
  border-radius: var(--r-md); color: var(--text-2);
  font-size: var(--fs-13); font-weight: var(--fw-medium);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__item:hover { background: var(--surface-hover); color: var(--text-1); }
.nav__item.is-active { background: var(--brand-soft); color: var(--brand); font-weight: var(--fw-strong); }
.nav__item--home { margin-bottom: var(--s-2); }
.nav__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav__group { margin-bottom: var(--s-2); }
.nav__grouphead {
  display: flex; align-items: center; gap: var(--s-12); width: 100%;
  height: var(--h-lg); padding: 0 var(--s-8);
  border-radius: var(--r-md); color: var(--text-2);
  font-size: var(--fs-13); font-weight: var(--fw-medium);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__grouphead:hover { background: var(--surface-hover); color: var(--text-1); }
.nav__chev { margin-left: auto; color: var(--text-3); transition: transform var(--dur) var(--ease); }
.nav__group.is-open .nav__chev { transform: rotate(90deg); }
.nav__sub {
  max-height: 0; overflow: hidden; opacity: 0;
  margin: 0 0 0 var(--s-32); padding-left: var(--s-12); border-left: 1px solid var(--border);
  transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__group.is-open .nav__sub { max-height: 320px; opacity: 1; }
.nav__subitem {
  display: block; padding: var(--s-4) var(--s-8); border-radius: var(--r-sm);
  font-size: var(--fs-13); color: var(--text-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__subitem:hover { background: var(--surface-hover); color: var(--text-1); }
.nav__subitem.is-active { color: var(--brand); font-weight: var(--fw-strong); }

/* PLANLANMIŞ (henüz yazılmamış) modül — tıklanamaz, "Yakında" rozetli.
   `hazır:false` (TAM GİZLEME) İLE KARIŞTIRILMAZ: bu BİLİNÇLİ OLARAK
   görünür kalır (bkz. menu/definition.js dosya başı). */
.nav__subitem--planli {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-8);
  padding: var(--s-4) var(--s-8); border-radius: var(--r-sm);
  font-size: var(--fs-13); color: var(--text-3); cursor: default;
}
.rozet--planli {
  font-size: var(--fs-11); font-weight: var(--fw-medium); line-height: 1;
  padding: 2px var(--s-6); border-radius: var(--r-full);
  background: var(--surface-3); color: var(--text-3); white-space: nowrap;
}
.nav__lock { font-size: var(--fs-11); color: var(--text-3); margin-left: var(--s-4); }

.shell.is-collapsed .nav__label,
.shell.is-collapsed .nav__chev,
.shell.is-collapsed .nav__sub { display: none; }
.shell.is-collapsed .nav__item,
.shell.is-collapsed .nav__grouphead { justify-content: center; padding: 0; }

/* ── 07 · BÖLÜM / KART İSKELETİ ─────────────────────────────────────────── */
.sec { margin-bottom: var(--s-20); }
.sec__head { display: flex; align-items: center; justify-content: space-between;
             gap: var(--s-12); margin-bottom: var(--s-12); }
.sec__head--tight { margin-bottom: var(--s-8); }
/* Bölüm başlığının sağ tarafı: özet bilgi + "Tümünü Gör" */
.sec__actions { display: flex; align-items: center; gap: var(--s-12); }
.sec__title { font-size: var(--fs-13); font-weight: var(--fw-strong); }
.sec__meta { font-size: var(--fs-12); color: var(--text-3); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-16);
  box-shadow: var(--sh-1);
}

/* ── 08 · BUSINESS PULSE ────────────────────────────────────────────────── */
.pulse { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-12); }

.pcard {
  position: relative; text-align: left; padding: var(--s-16);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.pcard:hover { border-color: var(--border-2); transform: translateY(-1px); box-shadow: var(--sh-2); }
.pcard:active { transform: translateY(0); }

.pcard__top { display: flex; align-items: center; justify-content: space-between;
              gap: var(--s-8); margin-bottom: var(--s-12); }
.pcard__label { font-size: var(--fs-12); color: var(--text-2); font-weight: var(--fw-medium); }
/* Rakam asla satır kırmaz. Boyut, kart genişliğine göre iki kademeli (bkz. §16). */
.pcard__value { font-size: var(--fs-26); font-weight: var(--fw-strong);
                letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.pcard__foot { display: flex; align-items: center; gap: var(--s-8); margin-top: var(--s-12);
               font-size: var(--fs-12); white-space: nowrap; overflow: hidden; }
.pcard__ctx { overflow: hidden; text-overflow: ellipsis; color: var(--text-3); }
.pcard__trend { display: inline-flex; align-items: center; gap: var(--s-4); font-weight: var(--fw-strong); }
.pcard__trend--up { color: var(--ok); }
.pcard__trend--down { color: var(--danger); }
.pcard__trend--flat { color: var(--text-3); }

/* Durum, yalnızca renkle değil ince şeritle de anlatılır (erişilebilirlik) */
.pcard::before {
  content: ""; position: absolute; left: var(--s-16); right: var(--s-16); top: 0; height: 2px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); background: transparent;
}
.pcard[data-state="danger"]::before { background: var(--danger); }
.pcard[data-state="warn"]::before   { background: var(--warn); }
.pcard[data-state="ok"]::before     { background: var(--ok); }

.pcard__go { position: absolute; right: var(--s-16); bottom: var(--s-16); color: var(--text-3);
             opacity: 0; transform: translateX(-2px);
             transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pcard:hover .pcard__go { opacity: 1; transform: none; }

/* ── 09 · BUGÜN YAPILACAKLAR ────────────────────────────────────────────── */
.todo { display: flex; flex-direction: column; }
.todo__item {
  display: flex; align-items: center; gap: var(--s-12); width: 100%;
  padding: var(--s-12) var(--s-8); border-radius: var(--r-md); text-align: left;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur) var(--ease);
}
.todo__item:last-child { border-bottom: 0; }
.todo__item:hover { background: var(--surface-2); }

.todo__ico { width: var(--s-32); height: var(--s-32); border-radius: var(--r-md);
             display: grid; place-items: center; flex: none; }
.todo__ico--danger { background: var(--danger-soft); color: var(--danger); }
.todo__ico--warn   { background: var(--warn-soft);   color: var(--warn); }
.todo__ico--info   { background: var(--info-soft);   color: var(--info); }
.todo__ico--ok     { background: var(--ok-soft);     color: var(--ok); }

.todo__main { flex: 1; min-width: 0; }
.todo__title { font-size: var(--fs-13); font-weight: var(--fw-medium); }
.todo__meta { font-size: var(--fs-12); color: var(--text-2); margin-top: var(--s-2); }
.todo__cta {
  font-size: var(--fs-12); font-weight: var(--fw-strong); color: var(--brand);
  padding: var(--s-4) var(--s-8); border-radius: var(--r-sm); white-space: nowrap;
  opacity: 0; transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.todo__item:hover .todo__cta, .todo__item:focus-within .todo__cta { opacity: 1; }
.todo__cta:hover { background: var(--brand-soft); }

.empty { padding: var(--s-32) var(--s-16); text-align: center; }
.empty__title { font-size: var(--fs-13); font-weight: var(--fw-strong); margin-bottom: var(--s-4); }
.empty__sub { font-size: var(--fs-12); color: var(--text-2); }

/* ── 10 · RİSK MERKEZİ + HIZLI İŞLEMLER ─────────────────────────────────── */
.risk { display: flex; flex-direction: column; gap: var(--s-8); }
.risk__item { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
              transition: border-color var(--dur) var(--ease); }
.risk__item:hover, .risk__item.is-open { border-color: var(--border-2); }

.risk__head { display: flex; align-items: center; gap: var(--s-12); width: 100%;
              padding: var(--s-12); text-align: left; }
.risk__dot { width: var(--s-8); height: var(--s-8); border-radius: var(--r-full); flex: none; }
.risk__dot--danger { background: var(--danger); }
.risk__dot--warn   { background: var(--warn); }
.risk__main { flex: 1; min-width: 0; }
.risk__title { font-size: var(--fs-13); font-weight: var(--fw-medium); }
.risk__amount { font-size: var(--fs-12); font-weight: var(--fw-strong); color: var(--text-2); }
.risk__chev { color: var(--text-3); transition: transform var(--dur) var(--ease); }
.risk__item.is-open .risk__chev { transform: rotate(90deg); }

/* 32px = dot(8) + gap(12) + padding(12) — metinle aynı hizada başlar */
.risk__body { display: none; padding: 0 var(--s-12) var(--s-12) var(--s-32); }
.risk__item.is-open .risk__body { display: block; animation: slideDown 180ms var(--ease); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.risk__why { font-size: var(--fs-12); color: var(--text-2); margin-bottom: var(--s-8); }
.risk__rows { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-12); }
.risk__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12);
             padding: var(--s-4) var(--s-8); border-radius: var(--r-sm);
             background: var(--surface-2); font-size: var(--fs-12); }
.risk__row b { font-weight: var(--fw-strong); }
.risk__actions { display: flex; gap: var(--s-8); }

.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--s-8); }
.qa__btn {
  display: flex; align-items: center; gap: var(--s-12); padding: var(--s-12);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-13); font-weight: var(--fw-medium); text-align: left;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.qa__btn:hover { border-color: var(--brand); background: var(--brand-soft);
                 color: var(--brand); transform: translateY(-1px); }
.qa__ico { color: var(--text-3); transition: color var(--dur) var(--ease); }
.qa__btn:hover .qa__ico { color: var(--brand); }

/* ── 11 · TIMELINE ──────────────────────────────────────────────────────── */
.tl { display: flex; flex-direction: column; }
.tl__story { border-bottom: 1px solid var(--border); padding: var(--s-12) 0; }
.tl__story:last-child { border-bottom: 0; padding-bottom: 0; }
.tl__story:first-child { padding-top: 0; }

.tl__head { display: flex; align-items: center; gap: var(--s-12); width: 100%;
            text-align: left; padding: var(--s-2) 0; }
.tl__avatar {
  width: var(--s-32); height: var(--s-32); border-radius: var(--r-md);
  display: grid; place-items: center; flex: none;
  background: var(--surface-3); color: var(--text-2);
  font-size: var(--fs-11); font-weight: var(--fw-strong);
}
.tl__who { font-size: var(--fs-13); font-weight: var(--fw-strong); }
.tl__summary { font-size: var(--fs-12); color: var(--text-2); }
.tl__age { font-size: var(--fs-11); color: var(--text-3); margin-left: auto; white-space: nowrap; }

/* Zincir: Cari → Teklif → Sipariş → Sevkiyat → Fatura → Tahsilat */
.tl__chain { display: flex; align-items: center; margin: var(--s-12) 0 0 var(--s-40); flex-wrap: wrap; }
.tl__node { display: flex; align-items: center; gap: var(--s-4);
            padding: var(--s-4) var(--s-8); border-radius: var(--r-full);
            font-size: var(--fs-11); font-weight: var(--fw-strong); white-space: nowrap; }
.tl__node--done    { background: var(--ok-soft); color: var(--ok); }
.tl__node--active  { background: var(--brand-soft); color: var(--brand); box-shadow: 0 0 0 1px var(--brand-ring); }
.tl__node--pending { background: var(--surface-3); color: var(--text-3); }
.tl__node--blocked { background: var(--danger-soft); color: var(--danger); }
.tl__link { width: var(--s-16); height: 1px; background: var(--border-2); flex: none; }

.tl__detail { display: none; margin: var(--s-12) 0 var(--s-4) var(--s-40); padding: var(--s-12);
              background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--border); }
.tl__story.is-open .tl__detail { display: block; animation: slideDown 180ms var(--ease); }
.tl__events { display: flex; flex-direction: column; gap: var(--s-8); }
.tl__event { display: flex; gap: var(--s-12); font-size: var(--fs-12); }
.tl__time { color: var(--text-3); min-width: 72px; font-variant-numeric: tabular-nums; }
.tl__what { color: var(--text-2); }
.tl__what b { color: var(--text-1); font-weight: var(--fw-strong); }

/* ── 12 · SAĞ RAY ───────────────────────────────────────────────────────── */
.rail { position: sticky; top: var(--hdr-h); padding: var(--s-24) var(--s-24) var(--s-24) 0;
        display: flex; flex-direction: column; gap: var(--s-16); }

.ai__head { display: flex; align-items: center; gap: var(--s-8); margin-bottom: var(--s-12); }
.ai__mark { width: var(--s-24); height: var(--s-24); border-radius: var(--r-md);
            display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.ai__item { padding: var(--s-12) 0; border-bottom: 1px solid var(--border); }
.ai__item:last-of-type { border-bottom: 0; padding-bottom: var(--s-8); }
.ai__text { font-size: var(--fs-13); line-height: 1.55; color: var(--text-1); }
.ai__text b { font-weight: var(--fw-strong); }
.ai__link { display: inline-flex; align-items: center; gap: var(--s-4); margin-top: var(--s-8);
            font-size: var(--fs-12); font-weight: var(--fw-strong); color: var(--brand);
            padding: var(--s-2) 0; }
.ai__link:hover { text-decoration: underline; }
.ai__note { font-size: var(--fs-11); color: var(--text-3);
            border-top: 1px solid var(--border); padding-top: var(--s-8); }

.act__list { display: flex; flex-direction: column; }
.act__item { display: flex; gap: var(--s-12); padding: var(--s-8) 0; border-bottom: 1px solid var(--border); }
.act__item:last-child { border-bottom: 0; }
.act__dot { width: var(--s-8); height: var(--s-8); border-radius: var(--r-full);
            background: var(--border-2); margin-top: var(--s-4); flex: none; }
.act__dot--new { background: var(--brand); }
.act__text { font-size: var(--fs-12); color: var(--text-2); line-height: 1.45; }
.act__text b { color: var(--text-1); font-weight: var(--fw-strong); }
.act__time { font-size: var(--fs-11); color: var(--text-3); margin-top: var(--s-2); }

/* ── 13 · DRAWER ────────────────────────────────────────────────────────── */
.ovl { position: fixed; inset: 0; z-index: 80; background: var(--overlay);
       backdrop-filter: blur(2px); animation: fade 140ms var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(520px, 100vw);
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--sh-3);
  animation: slideIn 220ms var(--ease);
}
@keyframes slideIn { from { transform: translateX(16px); opacity: .4; } to { transform: none; opacity: 1; } }

.drawer__head { display: flex; align-items: flex-start; justify-content: space-between;
                gap: var(--s-16); padding: var(--s-20); border-bottom: 1px solid var(--border); }
.drawer__eyebrow { font-size: var(--fs-11); font-weight: var(--fw-strong); color: var(--text-3);
                   text-transform: uppercase; letter-spacing: .04em; }
.drawer__title { font-size: var(--fs-20); font-weight: var(--fw-strong);
                 letter-spacing: -.02em; margin-top: var(--s-2); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-16) var(--s-20); }
.drawer__foot { display: flex; justify-content: flex-end; gap: var(--s-8);
                padding: var(--s-16) var(--s-20); border-top: 1px solid var(--border);
                background: var(--surface-2); }

.drow { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-12) var(--s-8);
        border-bottom: 1px solid var(--border); border-radius: var(--r-sm);
        transition: background-color var(--dur) var(--ease); }
.drow:last-child { border-bottom: 0; }
.drow:hover { background: var(--surface-2); }
.drow__main { flex: 1; min-width: 0; }
.drow__title { font-size: var(--fs-13); font-weight: var(--fw-medium); }
.drow__sub { font-size: var(--fs-12); color: var(--text-2); margin-top: var(--s-2); }
.drow__val { font-size: var(--fs-13); font-weight: var(--fw-strong); white-space: nowrap; }
.drow__val--danger { color: var(--danger); }

/* Ayarlar → seçenek listesi (radyo davranışı, drawer içinde) */
.setnote { font-size: var(--fs-12); color: var(--text-2); line-height: 1.5;
           margin-bottom: var(--s-16); }
.optlist { display: flex; flex-direction: column; gap: var(--s-8); }
.opt {
  display: flex; align-items: flex-start; gap: var(--s-12); width: 100%;
  padding: var(--s-12); text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.opt:hover { border-color: var(--border-2); background: var(--surface-2); }
.opt.is-selected { border-color: var(--brand); background: var(--brand-soft); }
.opt__mark {
  width: var(--s-16); height: var(--s-16); border-radius: var(--r-full);
  border: 2px solid var(--border-2); flex: none; margin-top: var(--s-2);
  display: grid; place-items: center;
}
.opt.is-selected .opt__mark { border-color: var(--brand); }
.opt.is-selected .opt__mark::after {
  content: ""; width: var(--s-8); height: var(--s-8);
  border-radius: var(--r-full); background: var(--brand);
}
.opt__main { min-width: 0; flex: 1; }
/* span oldukları için blok davranışı açıkça verilir; aksi hâlde kısa başlıkta
   açıklama aynı satıra kaçar */
.opt__title { display: block; font-size: var(--fs-13); font-weight: var(--fw-strong); }
.opt__sub { display: block; font-size: var(--fs-12); color: var(--text-2);
            line-height: 1.45; margin-top: var(--s-2); }

.dsum { display: flex; gap: var(--s-20); padding: var(--s-12) var(--s-8) var(--s-16);
        border-bottom: 1px solid var(--border); margin-bottom: var(--s-8); }
.dsum__label { font-size: var(--fs-11); color: var(--text-3); font-weight: var(--fw-strong);
               text-transform: uppercase; letter-spacing: .04em; }
.dsum__value { font-size: var(--fs-20); font-weight: var(--fw-strong);
               letter-spacing: -.02em; margin-top: var(--s-2); }

/* ── 14 · COMMAND PALETTE ───────────────────────────────────────────────── */
.palette-wrap { position: fixed; inset: 0; z-index: 100; display: grid;
                justify-items: center; align-content: start; padding-top: min(14vh, 120px); }
.ovl--palette { z-index: -1; }
.palette {
  width: min(620px, calc(100vw - var(--s-32))); background: var(--surface);
  border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  overflow: hidden; animation: pop 160ms var(--ease);
}
@keyframes pop { from { transform: scale(.975) translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

.palette__input-row { display: flex; align-items: center; gap: var(--s-12);
                      padding: 0 var(--s-16); height: var(--h-xl);
                      border-bottom: 1px solid var(--border); }
.palette__icon { color: var(--text-3); }
.palette__input { flex: 1; font-size: var(--fs-16); }
.palette__input:focus { outline: none; }
.palette__input::placeholder { color: var(--text-3); }

.palette__list { max-height: min(400px, 56vh); overflow-y: auto; padding: var(--s-8); }
.pgroup__label { font-size: var(--fs-11); font-weight: var(--fw-strong); color: var(--text-3);
                 text-transform: uppercase; letter-spacing: .04em;
                 padding: var(--s-12) var(--s-12) var(--s-4); }
.pitem { display: flex; align-items: center; gap: var(--s-12); width: 100%;
         padding: var(--s-8) var(--s-12); border-radius: var(--r-md); text-align: left; }
.pitem:hover, .pitem.is-active { background: var(--surface-hover); }
.pitem.is-active { box-shadow: inset 2px 0 0 var(--brand); }
.pitem__ico { color: var(--text-3); }
.pitem.is-active .pitem__ico { color: var(--brand); }
.pitem__main { flex: 1; min-width: 0; }
.pitem__title { font-size: var(--fs-13); font-weight: var(--fw-medium); }
.pitem__sub { font-size: var(--fs-11); color: var(--text-3); }
.pitem__kbd { display: flex; gap: var(--s-4); }

.palette__foot { display: flex; align-items: center; gap: var(--s-16);
                 padding: var(--s-8) var(--s-16); border-top: 1px solid var(--border);
                 background: var(--surface-2); font-size: var(--fs-11); color: var(--text-3); }
.palette__foot span { display: flex; align-items: center; gap: var(--s-4); }
.palette__ctx { margin-left: auto; font-weight: var(--fw-strong); }

/* ── 15 · TOAST ─────────────────────────────────────────────────────────── */
.toasts { position: fixed; right: var(--s-20); bottom: var(--s-20); z-index: 110;
          display: flex; flex-direction: column; gap: var(--s-8); pointer-events: none; }
.toast {
  display: flex; align-items: flex-start; gap: var(--s-12); min-width: 280px; max-width: 380px;
  padding: var(--s-12); background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--brand); border-radius: var(--r-md); box-shadow: var(--sh-2);
  pointer-events: auto; animation: toastIn 220ms var(--ease);
}
.toast.is-out { animation: toastOut 180ms var(--ease) forwards; }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateX(12px); opacity: 0; } }
.toast--ok     { border-left-color: var(--ok); }
.toast--warn   { border-left-color: var(--warn); }
.toast--danger { border-left-color: var(--danger); }
.toast__ico { color: var(--text-3); margin-top: var(--s-2); }
.toast--ok .toast__ico { color: var(--ok); }
.toast--warn .toast__ico { color: var(--warn); }
.toast--danger .toast__ico { color: var(--danger); }
.toast__title { font-size: var(--fs-13); font-weight: var(--fw-strong); }
.toast__sub { font-size: var(--fs-12); color: var(--text-2); margin-top: var(--s-2); }

/* ── 16 · RESPONSIVE ────────────────────────────────────────────────────── */
/* Laptop: sağ ray daralır, Pulse 2x2'ye geçer — kart genişleyince rakam bir kademe büyür */
@media (max-width: 1440px) {
  :root { --rail-w: 296px; }
  .pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcard__value { font-size: var(--fs-30); }
}

/* Küçük laptop: sağ ray ana akışa iner */
@media (max-width: 1220px) {
  .shell, .shell.is-collapsed { grid-template-columns: var(--nav-w-collapsed) minmax(0, 1fr); }
  .shell .nav__label, .shell .nav__chev, .shell .nav__sub { display: none; }
  .shell .nav__item, .shell .nav__grouphead { justify-content: center; padding: 0; }
  .rail { position: static; grid-column: 2; padding: 0 var(--s-24) var(--s-40); flex-direction: row; }
  .rail > * { flex: 1; }
}

/* Tablet */
@media (max-width: 980px) {
  .pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .hdr { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-12); }
  .org__name, .brand__text { display: none; }
  .rail { flex-direction: column; }
}

/* Mobil: aksiyon önce — Pulse dikey, gereksiz kabuk kalkar */
@media (max-width: 720px) {
  :root { --hdr-h: 52px; }
  .shell, .shell.is-collapsed { grid-template-columns: minmax(0, 1fr); }
  /* 1220px kuralındaki grid-column: 2 sızmasın — tek sütunda örtük kolon yaratır */
  .rail { grid-column: auto; }
  .nav { position: fixed; top: var(--hdr-h); left: 0; width: 268px; z-index: 70;
         transform: translateX(-100%); transition: transform 200ms var(--ease); box-shadow: var(--sh-3); }
  .shell.is-navopen .nav { transform: none; }
  .shell.is-navopen .nav__label, .shell.is-navopen .nav__chev { display: block; }
  .shell.is-navopen .nav__group.is-open .nav__sub { display: block; }
  .shell.is-navopen .nav__item, .shell.is-navopen .nav__grouphead {
    justify-content: flex-start; padding: 0 var(--s-8); }
  .main { padding: var(--s-16) var(--s-16) var(--s-32); }
  .rail { padding: 0 var(--s-16) var(--s-32); }
  .pulse { grid-template-columns: minmax(0, 1fr); }
  .hdr__center { position: fixed; top: var(--hdr-h); left: 0; right: 0;
                 padding: var(--s-8) var(--s-16);
                 background: var(--surface); border-bottom: 1px solid var(--border); }
  .shell { padding-top: calc(var(--hdr-h) + var(--searchbar-h)); }
  .nav { top: calc(var(--hdr-h) + var(--searchbar-h)); }
  .cmdk, .live { display: none; }
  .main__head { flex-direction: column; align-items: flex-start; }
  .toasts { right: var(--s-12); left: var(--s-12); bottom: var(--s-12); }
  .toast { max-width: none; }
  .drawer { width: 100vw; }
  .tl__chain, .tl__detail { margin-left: 0; }
}

/* ── 17 · RAYSIZ SHELL VARYANTI ─────────────────────────────────────────────
   .shell--no-rail

   Sağ yardımcı rayı OLMAYAN tam genişlik modülleri için ortak varyant:
   Cari (Müşteriler / Tedarikçiler), Ürünler, Siparişler, Stok…
   Cari modülüne özel geçici bir yama DEĞİLDİR.

   Sözleşme değişmez: .is-collapsed ve .is-navopen aynı anlamı taşır,
   yalnızca ızgara iki sütuna iner.

   NEDEN 1220px KURALINI EZİYOR
   ----------------------------
   Ana shell'de 1220px altında sol menü ZORLA daraltılır; çünkü sağ ray ana
   akışa inip 2. sütunu paylaşır ve yere ihtiyaç duyar. Ray yokken bu baskı
   yoktur — kullanıcının daraltma kararını ezmek gereksiz bir kısıtlama olur.

   NEDEN 720px'te --searchbar-h EKLENMEZ
   -------------------------------------
   Ana shell'de mobilde .hdr__center (genel arama) header altına sabit bir
   şerit olarak iner ve .shell ona yer açar. Bu ekranlarda genel arama
   GÖSTERİLMİYOR (altyapısı yok); dolayısıyla o şerit için 52px boşluk
   bırakmak ekranın tepesinde boş bir bant üretirdi.
   ------------------------------------------------------------------------- */
.shell--no-rail { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
.shell--no-rail.is-collapsed { grid-template-columns: var(--nav-w-collapsed) minmax(0, 1fr); }

@media (max-width: 1220px) {
  .shell--no-rail { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .shell--no-rail.is-collapsed { grid-template-columns: var(--nav-w-collapsed) minmax(0, 1fr); }
  .shell--no-rail .nav__label { display: block; }
  .shell--no-rail .nav__item { justify-content: flex-start; padding: 0 var(--s-8); }
  /* Üstteki genel .shell kuralı (927. satır civarı) .nav__chev/.nav__sub'ı
     bu genişlikte KAPATIR; raysız varyantta sol menü daralmadığından
     (nav__label zaten yukarıda geri açılıyor) akordeon de AYNI ŞEKİLDE
     geri açılmalı — aksi halde grup başlığı tıklanır ama alt menü hiç
     görünmez. */
  .shell--no-rail .nav__grouphead { justify-content: flex-start; padding: 0 var(--s-8); }
  .shell--no-rail .nav__chev { display: block; }
  .shell--no-rail .nav__sub { display: block; }
  .shell--no-rail.is-collapsed .nav__label { display: none; }
  .shell--no-rail.is-collapsed .nav__item { justify-content: center; padding: 0; }
  .shell--no-rail.is-collapsed .nav__grouphead { justify-content: center; padding: 0; }
  .shell--no-rail.is-collapsed .nav__chev,
  .shell--no-rail.is-collapsed .nav__sub { display: none; }
}

@media (max-width: 720px) {
  .shell--no-rail, .shell--no-rail.is-collapsed { grid-template-columns: minmax(0, 1fr); }
  .shell--no-rail { padding-top: var(--hdr-h); }
  .shell--no-rail .nav { top: var(--hdr-h); }
  .shell--no-rail .nav__label { display: block; }
  .shell--no-rail .nav__item { justify-content: flex-start; padding: 0 var(--s-8); }
}

/* Kaba işaretçide (dokunmatik) menü öğesi dokunma hedefine büyür.
   Kabuk KENDİ bileşeninden sorumludur; sayfa CSS'i buna karışmaz. */
@media (pointer: coarse) {
  .nav__item { min-height: 44px; }
}

/* Header'daki çıkış düğmesi ve kullanıcı adı.

   NEDEN .btn KULLANILMIYOR
   ------------------------
   Projede iki ayrı .btn tanımı var: styles.css (şeffaf kenar + .btn--ghost)
   ve cari.css (kenarlı, kendi başına). Hangisinin kazandığı sayfanın hangi
   CSS'i yüklediğine bağlıdır — aynı kabuk düğmesi iki ekranda farklı boyda
   görünürdü. Kabuk KENDİ bileşenini tanımlar; hangi sayfada olduğundan
   bağımsız aynı görünür. (İki .btn sisteminin birleştirilmesi ayrı bir iştir.) */
.hdr__cikis {
  height: var(--h-md); padding: 0 var(--s-12);
  border: 1px solid var(--border-2); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-1);
  font-size: var(--fs-13); font-weight: var(--fw-medium);
  display: inline-flex; align-items: center; cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.hdr__cikis:hover { background: var(--surface-hover); }
.hdr__kisi { font-size: var(--fs-13); color: var(--text-2); }

/* Sprite kabı — akışta yer tutmaz. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Tenant çipinin OKUNUR hâli. Şirket değiştirme altyapısı yok; hover
   vurgusu tıklanabilirlik vaat ederdi. Çip aynı görünür, davet etmez. */
.org--durgun { cursor: default; }
.org--durgun:hover { background: none; border-color: var(--border); }

/* ── 18 · MOBİL MENÜ PERDESİ ────────────────────────────────────────────────
   Ana shell'de .is-navopen menüyü içeriğin ÜZERİNE kaydırıyor ama arkada
   perde yoktu: kullanıcı hangi katmanın etkin olduğunu görmüyor ve perdeye
   dokunarak kapatamıyordu. Perde, mevcut .ovl görsel diliyle aynıdır.

   Yalnızca menü açıkken ve yalnızca mobil kırılmada görünür. Masaüstünde
   menü kalıcıdır; orada perde yanlış olurdu. */
.nav-perde {
  display: none;
  position: fixed; inset: 0;
  /* .nav z-index 70; perde onun ALTINDA, içeriğin ÜSTÜNDE kalır. */
  z-index: 65;
  background: var(--overlay);
  animation: fade 140ms var(--ease);
}

/* Perde YALNIZCA menü açıkken ve YALNIZCA mobil kırılmada görünür.
   Masaüstünde menü kalıcıdır; orada perde yanlış olurdu. */
@media (max-width: 720px) {
  .nav-perde[data-acik="1"] { display: block; }
}

/* ============================================================================
   404 — ÖZEL "SAYFA BULUNAMADI" EKRANI
   ============================================================================
   Kabuksuz tek sayfa (bkz. 404.html başlığı) — yalnız burada kullanılan,
   çok küçük bir blok; mevcut token/buton dilini kullanır, yeni bir tasarım
   dili İCAT ETMEZ. */
.hata-404 {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--s-24); background: var(--bg);
}
.hata-404__kart {
  max-width: 420px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--sh-1); padding: var(--s-48) var(--s-32);
}
.hata-404__kod {
  display: block; font-size: 56px; font-weight: var(--fw-strong);
  color: var(--brand); line-height: 1; margin-bottom: var(--s-16);
}
.hata-404__kart h1 { font-size: var(--fs-20); color: var(--text-1); margin: 0 0 var(--s-8); }
.hata-404__kart p { font-size: var(--fs-13); color: var(--text-3); margin: 0 0 var(--s-24); }
.hata-404__eylem { display: flex; gap: var(--s-8); justify-content: center; flex-wrap: wrap; }