/* ═══════════════════════════════════════════════════════════
   KOZMO ERP 2030 — site.css v1.0  (Kabuk + Tasarım Sistemi)
   ═══════════════════════════════════════════════════════════ */

/* ─── Alpine cloak ─── */
[x-cloak] { display: none !important; }

/* ─── CSS Değişkenleri — Açık Tema (varsayılan) ─── */
/* ════════════════════════════════════════════════════════════════════
   SaaS teması — sessiz kabuk, konuşan veri.

   YÖNETEN KURAL: bu ekranlarda 8 saat çalışılıyor ve ekranın çoğu yoğun
   tablo. Arayüz geri çekilir, RENK YALNIZ BİLGİ TAŞIR:

     • yakın-siyah  → birincil eylem (tek düğme, düz, gradyansız)
     • mavi         → yalnız bağlantı, odak halkası, seçim
     • KEHRİBAR     → yalnız "SİZDEN İŞLEM BEKLİYOR"  ⟵ imza sinyal
     • yeşil/kırmızı→ yalnız sonuç durumu (başarılı / hata)
     • geri kalan her şey gri

   ⛔ Kehribarı dekorasyon olarak KULLANMA. Değeri, başka hiçbir şeyin
      onunla yarışmamasından geliyor: ekranda tek bir kehribar varsa göz
      oraya gider ve bu her zaman doğru yerdir.
   ⛔ Gradyan YOK. Gradyan, kabuğu veriyle yarıştırır.
════════════════════════════════════════════════════════════════════ */
:root {
  /* ══ REMZİ BORDOSU ══════════════════════════════════════════════════
     Marka rengi logodan ÖLÇÜLDÜ: kalkanın baskın pikseli #9B193F.
     Bu bir "kurumsal kırmızı" değil, klasik yayıncılık bordosu — ciltli
     kitap sırtlarının, kütüphane damgalarının rengi. Kimlik buradan kurulur. */
  --brand:       #9B193F;
  --brand-dk:    #77102E;
  --brand-2:     #B8365A;
  --brand-light: #FDF2F5;
  --brand-tint:  #F7E3E9;
  --brand-rgb:   155,25,63;

  /* ⛔ TUZAK: koyu temada --brand BEYAZA döner (birincil buton ters kontrast
     kuralı). Bu yüzden bordoyu YÜZEY veya MARKA METNİ olarak kullanan hiçbir
     kural --brand okuyamaz — üst menü beyaz bir şerite dönüşür. Marka kimliği
     her iki temada da bordo kalmalı, o yüzden ayrı belirteçler: */
  --nav-bg:       #9B193F;   /* üst menü zemini */
  --nav-line:     #77102E;   /* üst menü alt bandı */
  --brand-fg:     #9B193F;   /* bordo METİN — zemin üstünde okunur */
  --brand-surface:#FDF2F5;   /* bordo TİNT yüzey */
  /* Üst menüdeki beyaz hap/yonga her iki temada da beyaz kalır; üstündeki
     metin bu yüzden temadan bağımsız sabit bordodur. */
  --nav-pill-fg:  #9B193F;

  /* Oval girdilerin yatay iç boşluğu. DevExtreme girdilerinde ikon ve yer tutucu
     konumu buna bağlı olduğu için TEK YERDEN okunur (bkz. bms-list.css arama kutusu). */
  --dx-pad-x:     16px;

  /* Bağlantı / odak / seçim. Bordoyla yarışmaz, ona eşlik eder. */
  --accent:      #1B4B8F;
  --accent-bg:   #EAF1FB;

  /* İşlem bekleyen — imza sinyal. Bordonun tamamlayıcısı: pirinç sarısı. */
  --pop:         #B45309;
  --pop-dk:      #8A3D06;
  --pop-bg:      #FEF3C7;

  /* Zemin — soğuk gri yerine SICAK kâğıt tonu. Kitap sayfası gibi. */
  --bg:          #FAF7F4;
  --bg-side:     #FFFFFF;
  --bg-card:     #FFFFFF;
  --bg-top:      #FFFFFF;
  --bg-input:    #FFFFFF;

  /* Metin — mürekkep, mavi-siyah değil kahve-siyah */
  --ink:         #221A1C;
  --ink-2:       #4A3B3F;
  --muted:       #857478;

  /* Çizgi */
  --line:        #E7DDDF;
  --line-2:      #F4EDEF;

  /* Kenar yarıçapı — OVAL dil: girdi ve düğmeler hap biçiminde */
  --r-sm:        6px;
  --r-md:        10px;
  --r-lg:        14px;
  --r-pill:      999px;

  /* Sidebar genişliği */
  --sw:          260px;
  --sw-collapsed: 76px;

  /* Gölge — yalnız katman ayrımı için, dekorasyon değil */
  --shadow-sm:   0 1px 2px rgba(15,23,42,.04);
  --shadow-md:   0 8px 24px rgba(15,23,42,.08);

  /* ══ KİTAP SIRTI PALETİ ══════════════════════════════════════════════
     Klasik ciltli kitap bandı mantığı: rengin kendisi SINIFLANDIRMADIR.
     Rafta hangi bandı gördüğünüzde ne olduğunu bilirsiniz; burada da renk
     "hangi modüldesiniz" sorusunu yanıtlar.

     ⛔ Aynı anda EKRANDA TEK sırt rengi bulunur (etkin menü + sayfa etiketi).
        Yan yana on renk, "kehribar = sizde" sinyalini yeniden sağırlaştırırdı.
     ⛔ Bu renkler DURUM RENGİ DEĞİLDİR. Başarılı/hata/bekliyor için
        --ok/--no/--pop kullanılır; sırtlar yalnız KİMLİK taşır.
     ⛔ Gradyan yok — bandın gücü düz ve doygun olmasından geliyor. */
  --spine-ink:     #9B193F;   /* Ana Sayfa — marka bordosu */
  --spine-blue:    #1B4B8F;   /* Şubeler */
  --spine-teal:    #0B7A6E;   /* Kullanıcılar */
  --spine-slate:   #5B4B4F;   /* Parametreler */
  --spine-orange:  #C8500F;   /* Siparişler */
  --spine-plum:    #7B2069;   /* Onay Bekleyenler */
  --spine-green:   #196B3A;   /* Faturalar */
  --spine-crimson: #B01234;   /* Gelen Belgeler */
  --spine-indigo:  #3B3392;   /* Muhasebe Eşleme */
  --spine-ochre:   #9A6B10;   /* yedek / yakında */

  /* Hareket — tek yerden ayarlanır ki ritim tutarlı olsun */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

/* ─── Koyu Tema ─── */
[data-theme="dark"] {
  /* Gerçek slate karanlığı — lacivert değil. Yüzeyler birbirinden yalnız bir
     tık ayrışır; katman hissi gölgeden değil kıl çizgiden gelir. */
  --bg:          #0b0f19;
  --bg-side:     #0f1523;
  --bg-card:     #121a2a;
  --bg-top:      #0f1523;
  --bg-input:    #182236;
  --ink:         #e2e8f0;
  --ink-2:       #cbd5e1;
  --muted:       #94a3b8;
  --line:        #1e293b;
  --line-2:      #182236;

  /* Koyu zeminde yakın-siyah buton görünmez olur; birincil eylem BEYAZA döner
     (ters kontrast) — hâlâ tek ve gradyansız. */
  --brand:       #f8fafc;
  --brand-dk:    #ffffff;
  --brand-light: #1e293b;
  --brand-rgb:   248,250,252;

  /* Marka yüzeyleri koyu temada da BORDO kalır — yalnız derinleşir/açılır. */
  --nav-bg:       #3D0D1B;
  --nav-line:     #5E1428;
  --brand-fg:     #F0899F;
  --brand-surface:#2A1119;

  --accent:      #60a5fa;
  --accent-bg:   #14213d;

  --pop:         #fbbf24;
  --pop-dk:      #f59e0b;
  --pop-bg:      #2a1f06;

  /* Sırtlar koyu zeminde açılır — doygunluk korunur, parlaklık yükselir. */
  --spine-ink:     #94A3B8;
  --spine-blue:    #60A5FA;
  --spine-teal:    #2DD4BF;
  --spine-slate:   #94A3B8;
  --spine-orange:  #FB7A45;
  --spine-plum:    #E879F9;
  --spine-green:   #4ADE80;
  --spine-crimson: #FB7185;
  --spine-indigo:  #A5B4FC;
  --spine-ochre:   #FBBF24;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

/* ════════════════════════════════════
   APP SHELL
════════════════════════════════════ */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* Backward compat */
.app { display: flex; min-height: 100vh; }

/* ════════════════════════════════════
   SIDEBAR
════════════════════════════════════ */
.sidebar {
  width: var(--sw);
  min-width: var(--sw);
  background: var(--bg-side);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  z-index: 20;
  transition: width .2s ease, min-width .2s ease, transform .25s ease;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* ─── Marka ─── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.brand-logo {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.1;
  flex: 1;
}
.brand-logo span { color: var(--brand); }
.brand-badge {
  /* ⛔ color:#fff SABİT OLAMAZ: koyu temada --brand yakın-BEYAZa dönüyor
     (ters kontrast butonlar için), beyaz üstünde beyaz yazı görünmezdi. */
  background: var(--brand-light);
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: .62rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  letter-spacing: .04em;
  flex-shrink: 0;
}

/* ─── Navigasyon ─── */
.sidebar-nav {
  flex: 1;
  padding: 8px 8px 4px;
  overflow-y: auto;
  overflow-x: hidden;
}

.nav-section-label {
  font-size: .67rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 8px 4px;
  user-select: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-md);
  min-height: 44px;
  font-size: .875rem;
  font-weight: 500;
  transition: background .15s, color .15s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  line-height: 1.3;
}
.nav-item:hover {
  background: var(--brand-light);
  color: var(--brand);
}
.nav-item.active {
  background: var(--brand-light);
  color: var(--brand);
  font-weight: 600;
}

/* ─── Nav İkon (gradient kare) ─── */
.nav-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.nav-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Menü ikonları: TEK NÖTR yüzey.
   Önceden her ikon kendi gradyanını taşıyordu (17 farklı renk çifti); bir kenar
   çubuğunda 17 renk, "kehribar = sizde" kuralını duyulmaz hale getiriyordu.
   İkonun işi bölümü tanıtmak, dikkat çekmek değil. */
.nav-icon,
.ic-home, .ic-sales, .ic-quote, .ic-order, .ic-prod, .ic-plan, .ic-recipe,
.ic-material, .ic-package, .ic-purchase, .ic-warehouse, .ic-quality, .ic-lab,
.ic-logi, .ic-finance, .ic-hr, .ic-maint, .ic-report, .ic-dashboard, .ic-settings {
  background: transparent;
  color: var(--muted);
}
.nav-item.active .nav-icon { color: var(--ink); }

/* ─── Accordion Grubu ─── */
.nav-group-arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .2s;
}
.nav-group-arrow.rotated { transform: rotate(180deg); }
.nav-group-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.nav-group-content {
  padding-left: 12px;
  overflow: hidden;
}
.nav-group-content .nav-item {
  font-size: .83rem;
  min-height: 40px;
  padding: 7px 10px;
}

/* ─── Sidebar Footer ─── */
.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--muted);
  gap: 8px;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 11px;
  cursor: pointer;
  transition: background .2s;
}
.toggle-switch input:checked ~ .toggle-track { background: var(--brand); }
.toggle-track::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked ~ .toggle-track::after { transform: translateX(16px); }
.sidebar-version {
  font-size: .7rem;
  color: var(--muted);
  text-align: center;
}

/* ════════════════════════════════════
   SIDEBAR — DARALTILMIŞ (ikon rayı, masaüstü)
════════════════════════════════════ */
@media (min-width: 769px) {
  .sidebar-collapsed .sidebar {
    width: var(--sw-collapsed);
    min-width: var(--sw-collapsed);
  }
  .sidebar-collapsed .main-wrap { margin-left: var(--sw-collapsed); }

  /* Metni gizle, ikonu ortala */
  .sidebar-collapsed .nav-item {
    font-size: 0;
    gap: 0;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .sidebar-collapsed .nav-group-arrow,
  .sidebar-collapsed .badge-soon,
  .sidebar-collapsed .brand-logo,
  .sidebar-collapsed .brand-badge,
  .sidebar-collapsed .theme-toggle span,
  .sidebar-collapsed .sidebar-version { display: none; }

  /* Daraltılmışken açılır grup içerikleri kapalı kalsın (Alpine inline display'i ezmek için !important) */
  .sidebar-collapsed .nav-group-content { display: none !important; }

  .sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .sidebar-collapsed .theme-toggle { justify-content: center; }

  /* Daralt butonu chevron yönü */
  .sidebar-collapsed .collapse-btn svg { transform: rotate(180deg); }
}

/* ─── Daralt/Genişlet butonu (masaüstü) ─── */
.collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
}
.collapse-btn:hover { background: var(--brand-light); color: var(--brand); }
.collapse-btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
  display: block;
}

/* ════════════════════════════════════
   TOPBAR
════════════════════════════════════ */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  height: 58px;
  background: var(--bg-top);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 15;
  flex-shrink: 0;
}
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
}
.hamburger-btn:hover { background: var(--brand-light); color: var(--brand); }
.hamburger-btn svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round;
  display: block;
}

.topbar-search {
  flex: 1;
  max-width: 380px;
  position: relative;
}
.topbar-search input {
  width: 100%;
  padding: 0 14px 0 38px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  color: var(--ink);
  font-size: .875rem;
  height: 38px;
  outline: none;
  transition: border .15s;
  font-family: inherit;
}
.topbar-search input::placeholder { color: var(--muted); }
.topbar-search input:focus { border-color: var(--brand); background: var(--bg-card); }
.search-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search-icon svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round;
  display: block;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.btn-ai {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 36px;
  /* Düz nötr: avatar bir kimlik göstergesi, dikkat çekmesi gereken bir şey değil. */
  background: var(--line-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  color: #fff;
  border: none;
  border-radius: 18px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
  transition: opacity .15s;
}
.btn-ai:hover { opacity: .88; }
.btn-ai svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-2);
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--brand-light); color: var(--brand); }
.icon-btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.badge-dot {
  position: absolute;
  top: 4px; right: 4px;
  background: #ef4444;
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--bg-top);
  line-height: 1;
}

.lang-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: .8rem;
  color: var(--muted);
  cursor: pointer;
  background: none;
  font-family: inherit;
  transition: background .15s;
}
.lang-flag:hover { background: var(--brand-light); color: var(--brand); }

.user-chip-wrap { position: relative; }
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  cursor: pointer;
  background: var(--bg);
  border: 1px solid var(--line);
  transition: background .15s, border-color .15s;
  font-family: inherit;
}
.user-chip:hover { background: var(--brand-light); border-color: var(--brand); }
.user-avatar {
  width: 30px; height: 30px;
  /* Düz nötr: avatar bir kimlik göstergesidir, dikkat çekmesi gereken bir şey değil.
     Mor gradyan, hiçbir şeyin mor olmadığı bu palette tek başına göze batıyordu. */
  border-radius: var(--r-md);
  background: var(--line-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: .72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}
.user-name { font-size: .78rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.user-role { font-size: .68rem; color: var(--muted); white-space: nowrap; }

.user-dropdown {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  min-width: 170px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 50;
}
.user-dropdown form button {
  display: block;
  width: 100%;
  padding: 11px 16px;
  text-align: left;
  background: none;
  border: none;
  color: #ef4444;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
  transition: background .12s;
}
.user-dropdown form button:hover { background: #fff5f5; }
[data-theme="dark"] .user-dropdown form button:hover { background: #3d0b0b; }

/* ════════════════════════════════════
   MAIN LAYOUT
════════════════════════════════════ */
.main-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  margin-left: var(--sw);
  transition: margin-left .2s ease;
}
.content {
  flex: 1;
  padding: 24px 28px;
  overflow-x: hidden;
  max-width: 100%;
}
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.page-head h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ink);
}

/* ════════════════════════════════════
   KPI GRID
════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .15s, transform .15s;
  text-decoration: none;
  color: inherit;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi-card-label { font-size: .8rem; color: var(--muted); font-weight: 500; }
.kpi-card-value { font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1; }
.kpi-card-trend { font-size: .75rem; color: var(--muted); }

.kpi-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.kpi-icon svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Düz ve doygun — gradyan yok. Renkler kitap sırtı paletinden gelir. */
.kpi-green  { background: var(--spine-green); }
.kpi-blue   { background: var(--spine-blue); }
.kpi-orange { background: var(--spine-orange); }
.kpi-purple { background: var(--spine-plum); }

/* ════════════════════════════════════
   PANEL
════════════════════════════════════ */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
}
.panel-link { font-size: .8rem; color: var(--brand); text-decoration: none; font-weight: 500; }
.panel-link:hover { text-decoration: underline; }

/* ════════════════════════════════════
   DATA TABLE
════════════════════════════════════ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--line-2);
}
.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-size: .875rem;
  color: var(--ink);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--line-2); }

/* ─── Eski .grid alias (preserved) ─── */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; }

/* ════════════════════════════════════
   SAYFA AKSİYON ÇUBUĞU (KURAL: her ekranın üstünde)
   Kaydet / Sil / Yazdır / Listeye Dön
════════════════════════════════════ */
.page-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  animation: pa-slide .35s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes pa-slide {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-actions-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin-right: auto;
}
/* Sayfa eylem düğmeleri DAİMA sağa dayanır — proje genelinde tek kural.
   ⛔ .page-actions-title üzerindeki `margin-right: auto` YETMİYOR: çoğu ekranda
      başlık bir sarmalayıcı <div> içinde duruyor (pa-eyebrow + h1). Esnek öge o
      sarmalayıcı olduğu için auto pay içeride kalıyor ve sarmalayıcıyı itmiyor;
      düğmeler başlığın hemen dibine yapışıyordu.
      Payı düğmelerin KENDİSİNE vermek, önünde ne olursa olsun çalışır. */
.page-actions-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
  justify-content: flex-end;
}
/* Panel altındaki eylem satırı — sayfa başlığındakiyle aynı kural: sağa dayalı.
   Bir bölümü kapatan düğme, okuma yönünün SONUNDA durur.
   ⛔ .panel'in kendi yatay dolgusu YOK (çocuklar kendi dolgusunu taşır), bu yüzden
      yan boşluk burada verilir — .form-group-label ile aynı 18px. */
.panel-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 0 18px 18px;
}

.act-del-form { display: inline; margin: 0; }

.act-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease,
              background .15s, border-color .15s, opacity .15s;
  animation: pa-btn-in .4s ease both;
}
.act-btn:nth-child(1) { animation-delay: .03s; }
.act-btn:nth-child(2) { animation-delay: .06s; }
.act-btn:nth-child(3) { animation-delay: .09s; }
.act-btn:nth-child(4) { animation-delay: .12s; }
@keyframes pa-btn-in {
  from { opacity: 0; transform: translateY(-6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.act-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.act-btn:active { transform: translateY(0) scale(.95); box-shadow: none; }
.act-btn svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.act-btn.pa-back { margin-left: 4px; }

/* Temiz yazdırma — kabuk gizlenir, sadece içerik basılır */
@media print {
  .sidebar, .topbar, .mobile-nav, .sidebar-overlay, .page-actions { display: none !important; }
  .main-wrap { margin-left: 0 !important; }
  .content { padding: 0 !important; }
  .panel { border: none; box-shadow: none; }
}

/* ════════════════════════════════════
   FORM ALANLARI + SEKMELER (Reçete vb.)
════════════════════════════════════ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 18px;
  padding: 18px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field > span { font-size: .78rem; font-weight: 600; color: var(--muted); }
.form-field input, .form-field select {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-input);
  color: var(--ink);
  font-size: .875rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
.form-field input:focus, .form-field select:focus { border-color: var(--brand); }
.form-field.full { grid-column: 1 / -1; }

.tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 18px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab .tab-count {
  font-size: .7rem;
  font-weight: 700;
  background: var(--brand-light);
  color: var(--brand);
  padding: 1px 7px;
  border-radius: 20px;
}

.line-table { width: 100%; border-collapse: collapse; }
.line-table th {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--line-2);
  white-space: nowrap;
}
.line-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.line-table tr:hover td { background: var(--line-2); }
.line-table input, .line-table select {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-input);
  color: var(--ink);
  font-size: .85rem;
  font-family: inherit;
  outline: none;
}
.line-table input:focus, .line-table select:focus { border-color: var(--brand); }

/* Tablo inputları sütun genişliğini doldursun (sabit px'leri ezer); checkbox hariç */
.line-table td input:not([type="checkbox"]),
.line-table td select {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  box-sizing: border-box;
}
.line-table td input[type="checkbox"] { width: auto !important; }
.line-table td { white-space: nowrap; }
.line-table .empty-row td {
  text-align: center;
  color: var(--muted);
  padding: 22px;
  font-size: .85rem;
}

/* Satır vergi/istisna açılımı (Görev 11) — Kalemler tablosunda, vergi/istisna/GTİP/marka/
   üretici kodu/iskonto taşıyan satırın hemen altına eklenen ikinci <tr>. Details.cshtml
   veri yoksa bu satırı HİÇ basmaz; burada yalnız GÖRÜNÜRKEN aldığı biçim tanımlanır.
   .line-table normalde hücreleri nowrap yapar (satır 1013) — açılım hücresi bunu ezer ki
   pill'ler sarabilsin. */
.g-subrow td {
  padding: 8px 10px 12px;
  background: var(--bg-card);
  white-space: normal;
}
.g-subrow-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: .8rem;
}

/* ════════════════════════════════════
   DETAY — KAPALI ALT BÖLÜMLER
   (Gelen Belge: Vergi/İstisna · Ödeme · Taraflar · Referanslar · Toplamlar)

   Mevcut sade /Inbox/Details görünümü DEĞİŞMEDİ; bu kutular yalnız altına eklenir ve
   <details> varsayılan kapalı gelir — .panel ile aynı kabuk dilini paylaşır ama kendi
   sınıfı vardır, çünkü .panel çocuklarının kendi dolgusunu taşıması beklenir, <summary>
   ise başlık + açma/kapama ok'unu TEK satırda birleştirir.
════════════════════════════════════ */
.g-section {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.g-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.g-section-head::marker,
.g-section-head::-webkit-details-marker { display: none; content: ''; }
.g-section-head::before {
  content: '▸';
  color: var(--muted);
  font-size: .7rem;
  transition: transform .15s var(--ease-out);
}
.g-section[open] .g-section-head::before { transform: rotate(90deg); }
.g-section-head:hover { background: var(--line-2); }
.g-section[open] .g-section-head { border-bottom: 1px solid var(--line); }

/* Bölüm içindeki nested tablolar: .line-table'ın tüm görünümünü miras alır, yalnız
   kenar boşluğu/genişliği kutunun dolgusuna oturur (mevcut satır-içi stil tekrarının
   yerini alır — bkz. Details.cshtml'deki "Kalemler" tablosu). */
.g-subtable { margin: 0 18px 14px; width: calc(100% - 36px); }
.g-subtable th, .g-subtable td { font-size: .8rem; }

/* Sayısal hücreler: sağa yaslı + eşit genişlikli rakamlar, tutar sütunları arasında
   sallanma olmasın diye. */
.g-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Beyan ile hesaplanan tutmadığında çıkan uyarı satırı (K4). ⛔ Renk sabit hex DEĞİL,
   --warn/--warn-bg tokenlarından — ikisi de light+dark'ta ayrı tanımlı (bkz. yukarısı,
   ':root' ve '[data-theme="dark"]' bloklarındaki --warn/--warn-bg). */
.g-row-warn td {
  background: var(--warn-bg);
  color: color-mix(in srgb, var(--warn) 62%, var(--ink));
  font-weight: 700;
}

.recipe-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding: 14px 18px;
  background: var(--line-2);
  border-top: 1px solid var(--line);
  font-size: .85rem;
  align-items: center;
}
.recipe-summary .sum-label { color: var(--muted); margin-right: 6px; }
.recipe-summary b { color: var(--ink); font-weight: 700; }
.recipe-summary .warn { color: #b91c1c; font-weight: 700; }

/* ════════════════════════════════════
   PROGRESS
════════════════════════════════════ */
.progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress-bar {
  height: 100%;
  background: var(--brand-fg);
  border-radius: 3px;
  transition: width .4s ease;
}

/* ════════════════════════════════════
   QUICK ACTIONS
════════════════════════════════════ */
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.quick-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: var(--brand-light);
  color: var(--brand);
  border-radius: var(--r-lg);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  min-height: 44px;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.quick-action:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.quick-action svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ════════════════════════════════════
   BADGES
════════════════════════════════════ */
.badge-soon {
  display: inline-block;
  padding: 1px 7px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 20px;
  font-size: .6rem;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: .04em;
}
[data-theme="dark"] .badge-soon { background: #3d2e0a; color: #fcd34d; }

.demo-tag {
  display: inline-block;
  padding: 2px 8px;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 600;
}
[data-theme="dark"] .demo-tag { background: #0c2a3e; color: #7dd3fc; }

/* ════════════════════════════════════
   BTN (preserved + genişletildi)
════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--brand-dk); border-color: var(--brand-dk); }
.btn.secondary { background: var(--bg-card); color: var(--brand); }
.btn.secondary:hover { background: var(--brand-light); }
/* ⛔ ÖLÇÜLDÜ: .btn.ghost YALNIZ [data-theme="dark"] altında tanımlıydı; AÇIK temada hiçbir
   kuralı yoktu ve .btn'in marka zeminini/beyaz metnini devralıyordu — yani "hayalet" düğme
   birincil düğmeden ayırt edilemiyordu. Match ekranında 5, Inbox ekranlarında 2 kullanım var. */
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--line-2); border-color: var(--muted); }
.btn.danger { background: var(--no); border-color: var(--no); color: #fff; }
.btn.danger:hover { background: var(--no); border-color: var(--no); filter: brightness(.92); }
/* .primary = .btn ile aynı; renk SABİTLENMEZ (koyu temada --brand beyazlaşır). */
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--bg-card); }
[data-theme="dark"] .btn.primary { color: #0b0f19; }
.btn.primary:hover { background: var(--brand-dk); border-color: var(--brand-dk); }

/* ════════════════════════════════════
   FORM CONTROLS (preserved — ≥44px, iOS zoom 16px)
════════════════════════════════════ */
.content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.content select,
.content textarea {
  min-height: 44px;
  font-size: 16px;
  background: var(--bg-input);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.content select:focus,
.content textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(118,75,162,.12);
}
.content textarea { min-height: 88px; }

/* ════════════════════════════════════
   CARD LIST (mobile, preserved)
════════════════════════════════════ */
.card-list { display: none; }
.card-list .card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-bottom: 10px;
  background: var(--bg-card);
}

/* ════════════════════════════════════
   SIDEBAR OVERLAY (mobile drawer)
════════════════════════════════════ */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.40);
  z-index: 19;
}

/* ════════════════════════════════════
   MOBILE BOTTOM NAV
════════════════════════════════════ */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-top);
  border-top: 1px solid var(--line);
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: 56px;
}
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 2px;
  text-decoration: none;
  color: var(--muted);
  font-size: .6rem;
  font-weight: 500;
  min-height: 44px;
  padding: 4px 2px;
  transition: color .15s;
  border: none;
  background: none;
  cursor: pointer;
}
.mobile-nav-item.active,
.mobile-nav-item:hover { color: var(--brand); }
.mobile-nav-item svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ════════════════════════════════════
   DASHBOARD GRID HELPERS
════════════════════════════════════ */
.dash-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.dash-2col { display: grid; grid-template-columns: 2fr 1fr;     gap: 20px; margin-bottom: 24px; }
.dash-2col-eq { display: grid; grid-template-columns: 1fr 1fr;  gap: 20px; margin-bottom: 24px; }

/* ════════════════════════════════════
   CANLI RENK GİYDİRME (tüm ekranlar)
════════════════════════════════════ */
/* Gradyanlar DÜZ renge indirildi. Değişken adları korundu (30+ yerde
   kullanılıyor); artık ikisi de tek tonlu — böylece kabuk veriyle yarışmaz. */
:root {
  --grad-head: var(--brand);
  --grad-btn:  var(--brand);
  --ok:#059669;  --ok-bg:#ecfdf5;
  --no:#dc2626;  --no-bg:#fef2f2;
  --info:#2563eb;--info-bg:#eff6ff;
  --warn:#d97706;--warn-bg:#fffbeb;
}
[data-theme="dark"] {
  --ok:#34d399;  --ok-bg:#052e21;
  --no:#f87171;  --no-bg:#2c1114;
  --info:#60a5fa;--info-bg:#14213d;
  --warn:#fbbf24;--warn-bg:#2a1f06;
}

/* Panel başlığı: düz, kıl çizgiyle ayrılır. Renkli şerit yok. */
.panel-head {
  background: transparent;
  border-left: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.005em;
}

/* Tablo başlıkları: gri, küçük, harf aralıklı — veriye yer bırakır */
table.grid thead th, .line-table th, .data-table th {
  background: var(--bg);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .045em;
}
table.grid thead th { border-bottom: 1px solid var(--line); }

/* Aktif menü = RAFTAKİ KİTAP SIRTI: kalın, düz, doygun bir bant.
   Renk modülün kendi sırt rengidir (--spine, _Layout'ta her öğeye verilir),
   böylece renk "neredesiniz" bilgisini taşır. Aynı anda yalnız BİRİ görünür. */
.nav-item.active {
  background: var(--brand-light);
  box-shadow: inset 4px 0 0 var(--spine, var(--ink));
  color: var(--ink);
  font-weight: 600;
}
.nav-item.active .nav-icon { color: var(--spine, var(--ink)); }

/* Sırt, tıklanınca rafa "oturur" — kısa ve tek seferlik. */
.nav-item.active { animation: spine-in .32s var(--ease-out) both; }
@keyframes spine-in {
  from { box-shadow: inset 0 0 0 var(--spine, var(--ink)); background: transparent; }
  to   { box-shadow: inset 4px 0 0 var(--spine, var(--ink)); }
}

/* Hover: sırt rengi belirir ama incedir — henüz oraya gitmediniz. */
.nav-item:hover:not(.active) { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--spine, var(--muted)) 45%, transparent); }
.nav-item:hover:not(.active) .nav-icon { color: var(--spine, var(--ink-2)); }

/* Birincil buton: TEK, düz, yakın-siyah. Ekranda bir sayfada yalnız bir tane
   olmalı — "asıl eylem" oysa. */
.btn {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--bg-card);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.btn:hover {
  background: var(--brand-dk);
  border-color: var(--brand-dk);
  filter: none;
}
/* ⛔ TERS KONTRAST YALNIZ BİRİNCİL BUTONA. Koyu temada --brand yakın-BEYAZ olduğu
   için birincil butonun METNİ koyulaşmalı. Ama bu kural .secondary/.ghost/.danger'ı
   da yakalarsa onların koyu zemini üstüne koyu yazı gelir ve buton GÖRÜNMEZ olur
   (tarayıcıda ölçüldü: #0b0f19 metin, #121a2a zemin). */
[data-theme="dark"] .btn:not(.secondary):not(.ghost):not(.danger) { color: #0b0f19; }
[data-theme="dark"] .btn.secondary,
[data-theme="dark"] .btn.ghost { color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .btn.secondary:hover,
[data-theme="dark"] .btn.ghost:hover { background: var(--line-2); border-color: var(--muted); }

/* Odak halkası mavidir — eylem rengiyle karışmasın, klavye kullanıcısı
   nerede olduğunu her zaman görsün. */
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Sekme aktif çizgisi biraz daha belirgin */
.tab.active { border-bottom-width: 3px; }

/* Özet çubuğu marka tonlu */
.recipe-summary { background: var(--brand-surface); }

/* Canlı durum etiketi (renkli pill) — istenirse view'da class="pill ok|no|info|warn" */
.pill {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.pill.ok   { background: var(--ok-bg);   color: var(--ok); }
.pill.no   { background: var(--no-bg);   color: var(--no); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }

/* Marka logo görseli */
.sidebar-brand { flex-direction: column; align-items: flex-start; gap: 6px; }
.brand-img { max-width: 100%; height: auto; display: block; }

/* Form alt-grup başlığı (Teklif vb. gruplanmış alanlar) */
.form-group-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--brand); padding: 14px 18px 0;
}
/* İki grubu yan yana göster */
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
@media (max-width: 760px) { .form-2col { grid-template-columns: 1fr; } }

/* Liste özet kartları (durum filtreleri) */
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.summary-card {
  display: flex; align-items: center; gap: 12px; min-width: 170px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-card); text-decoration: none; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, border-color .15s;
  animation: sc-in .45s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes sc-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.summary-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--sc, var(--brand));
}
.summary-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sc, var(--brand)); }
.summary-card:active { transform: translateY(-1px) scale(.98); }

.summary-card .sc-icon {
  width: 42px; height: 42px; min-width: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sc) 16%, transparent); color: var(--sc, var(--brand));
  transition: transform .2s ease;
}
.summary-card:hover .sc-icon { transform: scale(1.12) rotate(-4deg); }
.summary-card .sc-icon svg { width: 20px; height: 20px; }
.summary-card .sc-body { display: flex; flex-direction: column; gap: 1px; }
.summary-card .sc-count { font-size: 1.6rem; font-weight: 800; color: var(--sc, var(--ink)); line-height: 1; }
.summary-card .sc-label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.summary-card .sc-amount { font-size: .78rem; font-weight: 600; color: var(--ink-2); margin-top: 2px; }

.summary-card.active { background: var(--sc, var(--brand)); border-color: var(--sc, var(--brand)); }
.summary-card.active::before { background: rgba(255,255,255,.5); }
.summary-card.active .sc-count, .summary-card.active .sc-label, .summary-card.active .sc-amount { color: #fff; }
.summary-card.active .sc-icon { background: rgba(255,255,255,.22); color: #fff; }

/* ── Aramalı combobox (sunucu arama) ── */
.ac-cell { position: relative; }
.ac-panel {
  position: fixed; z-index: 1000; min-width: 260px; max-width: 380px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); max-height: 280px; overflow-y: auto;
}
.ac-item { padding: 8px 12px; cursor: pointer; font-size: .85rem; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--brand-light); }

/* ── Çoklu seçimli stok popup (modal) ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px);
  animation: modal-fade .15s ease;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  width: 580px; max-width: 100%; max-height: 82vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-card); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(0,0,0,.35);
  animation: modal-pop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modal-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
/* Modal başlığı: düz yüzey + kıl çizgi. Renkli bant, içindeki arama
   sonuçlarıyla yarışıyordu. */
.modal-head {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 18px;
  font-weight: 600; color: var(--ink); background: var(--bg-card);
  border-bottom: 1px solid var(--line);
}
.modal-x { background: var(--line-2); border: none; color: var(--ink-2); width: 26px; height: 26px; border-radius: var(--r-sm); cursor: pointer; font-size: .9rem; }
.modal-x:hover { background: var(--line); color: var(--ink); }
.modal-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; }
.chip { padding: 5px 13px; border: 1.5px solid var(--line-input); background: var(--bg-card); border-radius: 999px; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--ink-2); transition: all .12s; }
.chip:hover { border-color: var(--brand); }
.chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.modal-search { margin: 12px 18px; padding: 10px 12px; border: 1.5px solid var(--line-input); border-radius: 8px; font-size: .9rem; }
.modal-list { flex: 1; overflow-y: auto; padding: 0 18px 6px; min-height: 120px; }
.modal-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid var(--line-2); cursor: pointer; font-size: .85rem; border-radius: 6px; }
.modal-row:hover { background: var(--brand-light); }
.modal-row.sel { background: var(--brand-light); }
.modal-row input[type=checkbox] { width: 17px; height: 17px; flex-shrink: 0; }
/* Arama sonucu satırı: kod sabit, ad esner ve kırpılır, ek bilgi sağda kalır.
   Uzun cari/stok adları kutuyu genişletip yatay kaydırma çubuğu doğurmamalı. */
.modal-row .g-badge { flex: none; }
.modal-row .mr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-row .mr-extra { flex: none; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.modal-empty { padding: 26px; text-align: center; color: var(--muted); }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Üretim Takip Kanban ── */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.kb-col { flex: 0 0 270px; background: var(--bg-soft, #f5f4f9); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; max-height: calc(100vh - 220px); }
.kb-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-weight: 700; font-size: .85rem; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--bg-card); }
.kb-count { color: #fff; border-radius: 999px; min-width: 22px; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; }
.kb-body { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }
.kb-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow-sm); }
.kb-no { font-size: .72rem; font-weight: 700; color: var(--brand); }
.kb-prod { font-weight: 600; font-size: .85rem; margin: 2px 0 4px; }
.kb-meta { font-size: .76rem; color: var(--muted); margin-top: 1px; }
.kb-rep { background: var(--brand-light); color: var(--brand); border-radius: 999px; padding: 1px 8px; font-size: .68rem; font-weight: 600; margin-left: 4px; }
.kb-empty { text-align: center; color: var(--muted); font-size: .8rem; padding: 12px 0; }

/* ── Proforma belgesi ── */
.pf { max-width: 820px; margin: 0 auto; background: #fff; color: #1f2430; padding: 28px 32px; font-size: 13px; }
.pf-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 3px solid #1d4ed8; padding-bottom: 14px; }
.pf-brand { display: flex; gap: 14px; align-items: flex-start; }
.pf-brand img { height: 54px; width: auto; }
.pf-co { font-size: 1.15rem; font-weight: 800; color: #1d4ed8; }
.pf-co-sub { font-size: 11px; color: #555; margin-top: 2px; }
.pf-title { text-align: right; }
.pf-title h1 { font-size: 1.2rem; letter-spacing: .06em; margin: 0 0 6px; color: #1f2430; }
.pf-title table { font-size: 12px; margin-left: auto; }
.pf-title td { padding: 1px 4px; }
.pf-title td:first-child { color: #777; text-align: right; }
.pf-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.pf-lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #1d4ed8; margin-bottom: 3px; }
.pf-strong { font-weight: 700; font-size: 14px; }
.pf-muted { color: #777; font-size: 12px; }
.pf-lines { width: 100%; border-collapse: collapse; margin: 8px 0; }
.pf-lines th { background: #e8effd; color: #1e3a8a; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 8px 8px; text-align: left; border-bottom: 2px solid #1d4ed8; }
.pf-lines td { padding: 7px 8px; border-bottom: 1px solid #eee; }
.pf-lines .r, .pf-totals .r { text-align: right; }
.pf-empty { text-align: center; color: #999; padding: 16px; }
.pf-foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 14px; }
.pf-terms { font-size: 12px; flex: 1; }
.pf-totals { border-collapse: collapse; min-width: 260px; align-self: flex-start; }
.pf-totals td { padding: 6px 10px; }
.pf-totals tr.grand td { font-size: 1.05rem; font-weight: 800; color: #1d4ed8; border-top: 2px solid #1d4ed8; }
.pf-page { background: #eceaf3; min-height: 100vh; padding: 24px 12px; }
@media print { .pf-page { background: #fff; padding: 0; } .no-print { display: none !important; } }

/* ── Tek-seçim entity picker (master: ürün/cari) ── */
.entity-picker { position: relative; display: flex; align-items: center; gap: 6px; }
.picker-box {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border: 1.5px solid var(--line-input); border-radius: 8px;
  background: var(--bg-card); cursor: pointer; font-size: .9rem; text-align: left; color: var(--ink);
  transition: border-color .12s;
}
.picker-box:hover { border-color: var(--brand); }
.picker-ph { color: var(--muted); }
.picker-caret { color: var(--muted); font-size: .75rem; }
.picker-clear { border: none; background: none; color: var(--muted); cursor: pointer; font-size: .95rem; padding: 4px 6px; line-height: 1; }
.picker-clear:hover { color: #dc2626; }

/* ── Daha belirgin input kenarları (silik durmasın) ── */
:root { --line-input: #b6bdc9; }
[data-theme="dark"] { --line-input: #4a4866; }
.form-field input, .form-field select, .form-field textarea,
.line-table td input, .line-table td select,
.content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.content select, .content textarea {
  border: 1.5px solid var(--line-input) !important;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus,
.line-table td input:focus, .line-table td select:focus,
.content input:focus, .content select:focus, .content textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-light);
}

/* ── Daha fazla canlılık: panel/başlık/kart/hareket ── */

/* Panel: kıl çizgi kenarlık, renkli şerit YOK, hover'da zıplamaz.
   Yoğun tabloların üstünde her panelin kıpırdaması yorucu olur. */
.panel {
  position: relative;
  border: 1px solid var(--line);
  box-shadow: none;
  transition: none;
}
.panel::before { content: none; }
.panel:hover { box-shadow: none; }

/* Sayfa başlıkları: düz mürekkep, sıkı harf aralığı. Gradyan yazı YOK —
   okunurluğu düşürüyordu ve her başlığı dekorasyona çeviriyordu. */
.content h1, .page-actions-title, .page-head h1 {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
  letter-spacing: -.02em;
  font-weight: 650;
}

/* KPI kartları: düz kenarlık, hareket yok. Sayı konuşur, kart değil. */
.kpi-card { border-top: 1px solid var(--line); }
.kpi-card:hover { box-shadow: none; transform: none; }

/* Sayısal her şey hizalı: rakamlar sütun sütun dizilsin, göz kaymasın. */
.kpi-value, .sc-value, .g-badge, .line-table td, .data-table td, table.grid td {
  font-variant-numeric: tabular-nums;
}

/* Tablo satırları hover marka tonu */
table.grid tbody tr { transition: background .12s; }
table.grid tbody tr:hover td { background: var(--brand-light); }

/* Topbar: ince marka alt çizgi; arama odakta canlı */
.topbar { border-bottom: 2px solid var(--brand-light); }

/* Sidebar: çok hafif marka tonlu degrade */
/* Sidebar düz yüzey — dipteki gradyan, yeni palette kirli bir leke gibi duruyordu. */
.sidebar { background: var(--bg-side); }

/* Nav ikonları hover'da hafif büyüsün */
.nav-item { transition: background .15s, color .15s, transform .12s; }
.nav-item:hover .nav-icon { transform: scale(1.08); }
.nav-icon { transition: transform .12s ease; }

/* Sekme barı zemini hafif tonlu */
.tabs { background: transparent; }

/* ── ŞIK LİSTE TABLOSU (table.grid — tüm liste ekranları) ── */
table.grid {
  border-collapse: separate; border-spacing: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
table.grid thead th {
  background: var(--brand-surface);
  color: var(--brand-fg);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 13px 16px; text-align: left;
  border-bottom: 2px solid var(--brand);
}
[data-theme="dark"] table.grid thead th { color: var(--ink-2); }
table.grid td {
  padding: 12px 16px; border-bottom: 1px solid var(--line-2);
  font-size: .875rem; vertical-align: middle; color: var(--ink);
}
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid tbody tr:nth-child(even) td { background: var(--line-2); }
table.grid tbody tr { transition: background .12s; }
table.grid tbody tr:hover td { background: var(--brand-light); }

/* Liste arama/araç çubuğu inputları biraz daha şık (satır-içi stilleri ezer) */
.content form input[type="search"], .content form input[name="q"] {
  height: 40px !important; border-radius: 22px !important; padding: 0 16px !important;
  box-shadow: var(--shadow-sm); min-width: 240px;
}

/* Mobil kart listesi premium */
.card-list .card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm);
}

/* ════════════════════════════════════
   RESPONSIVE — 768px altı
════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100%;
    transform: translateX(calc(-1 * var(--sw)));
    z-index: 30;
    box-shadow: var(--shadow-md);
  }
  .sidebar.open { transform: translateX(0); }

  .main-wrap { margin-left: 0; }

  .hamburger-btn { display: inline-flex; }
  .collapse-btn { display: none; }
  .content { padding: 16px; padding-bottom: 80px; }
  .topbar-search { max-width: 160px; }
  .ai-label { display: none; }
  .user-info { display: none; }
  .lang-flag { display: none; }

  table.grid { display: none; }
  .table-wrap { display: none; }
  .card-list { display: block; }
  .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .content select,
  .content textarea { width: 100%; }

  .mobile-nav { display: block; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-3col { grid-template-columns: 1fr; }
  .dash-2col { grid-template-columns: 1fr; }
  .dash-2col-eq { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .dash-3col { grid-template-columns: 1fr 1fr; }
  .dash-2col { grid-template-columns: 1fr; }
}

/* Kitap sırtı şeridi KALDIRILDI (SaaS dönüşümü): kabuk artık dekorasyon
   taşımıyor, sidebar logodan sonra doğrudan kıl çizgiyle biter. */
.sidebar-brand { position: relative; border-bottom: 1px solid var(--line); }

/* ════════════════════════════════════════════════════════════════════
   HAREKET — her animasyonun bir İŞİ var

   Kural: hareket ya bir DEĞİŞİKLİĞİ anlatır (yeni geldi, sıralandı, sizi
   bekliyor) ya da hiç olmaz. Süsleme amaçlı kıpırtı, gün boyu bu ekrana
   bakan biri için yorgunluktur.

   Tek DÖNGÜSEL animasyon kehribar "sizde" işaretidir; gerisi tek seferlik.
   Tümü prefers-reduced-motion ile kapanır (en altta).
════════════════════════════════════════════════════════════════════ */

/* Sayfa etiketi, modülün sırt rengini taşır — kenar çubuğuna bakmadan
   "neredeyim" sorusunu yanıtlar. */
.lh-eyebrow, .pa-eyebrow { color: var(--spine, var(--muted)); }
.lh-eyebrow::before { background: var(--spine, var(--muted)); width: 18px; height: 2px; }

/* Panel girişi: sıralı ve kısa. Sayfa "dizilerek" açılır — kitap rafına
   kitap yerleştirmenin ritmi. */
.panel, .stat, .grid-panel, .dash-panel {
  animation: sayfa-in .34s var(--ease-out) both;
}
.stat:nth-child(2), .panel:nth-child(2)      { animation-delay: .04s; }
.stat:nth-child(3), .panel:nth-child(3)      { animation-delay: .08s; }
.stat:nth-child(4), .panel:nth-child(4)      { animation-delay: .12s; }
.grid-panel                                   { animation-delay: .10s; }
@keyframes sayfa-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* İstatistik kartı: sol kenarda modül/durum sırtı geri geldi — ama DÜZ ve
   yalnız o kartın anlamını taşıyan renkte (--sc). */
.stat { position: relative; overflow: hidden; }
.stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sc, var(--spine, var(--muted)));
  transform: scaleY(0); transform-origin: top;
  animation: sirt-uzat .4s var(--ease-out) .12s both;
}
@keyframes sirt-uzat { to { transform: scaleY(1); } }
/* Yatay sırt bandı (kart üst kenarı) — dash.css'teki akış kartlarıyla ortak. */
@keyframes sirt-cek { to { transform: scaleX(1); } }

/* Satır girişi hover'da: yalnız zemin değişir, konum DEĞİL — kayan satır
   okumayı bozar. */
.dash-table tr, table.grid tbody tr { transition: background .12s ease; }

/* Buton basışı: 1px oturma. Tıklamanın fiziksel karşılığı. */
.btn { transition: background .14s ease, border-color .14s ease, transform .06s ease; }
.btn:active { transform: translateY(1px); }

/* KEHRİBAR NABIZ — ekrandaki TEK döngüsel hareket.
   "Sıra sizde" işareti yavaşça soluk alır; göz onu tarama yapmadan bulur.
   Yavaş (2.4s) ve düşük genlikli: uyarı değil, hatırlatma. */
.flow-seg.active .fs-dot,
.lg-rail .lr-step.is-you .lr-node {
  animation: nabiz 2.4s ease-in-out infinite;
}
/* Halka rengi segmentin KENDİ rengini alır (--seg); aksi halde yeşil "Onaylandı"
   kartı turuncu nabız atardı ve renk haritası bozulurdu. */
@keyframes nabiz {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--seg, var(--pop)) 14%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--seg, var(--pop)) 26%, transparent); }
}

/* Durum rayı düğümleri sırayla belirir — akışın yönünü hareket anlatır. */
.flow-seg:nth-child(1) .fs-dot { animation-delay: 0s; }
.flow-seg .fs-dot { animation: dugum-in .3s var(--ease-out) both; }
.flow-seg:nth-child(2) .fs-dot { animation-delay: .09s; }
.flow-seg:nth-child(3) .fs-dot { animation-delay: .18s; }
@keyframes dugum-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
/* Etkin düğüm önce belirir, SONRA nabza geçer (iki animasyon çakışmasın). */
.flow-seg.active .fs-dot { animation: dugum-in .3s var(--ease-out) both, nabiz 2.4s ease-in-out .3s infinite; }

@media (prefers-reduced-motion: reduce) {
  .panel, .stat, .grid-panel, .dash-panel,
  .stat::before, .flow-seg::before, .dash-hello::after,
  .flow-seg .fs-dot, .flow-seg.active .fs-dot,
  .lg-rail .lr-step.is-you .lr-node, .nav-item.active {
    animation: none !important;
  }
  .stat::before, .flow-seg::before, .dash-hello::after { transform: none; }
  .btn:active { transform: none; }
  .stat:hover, .flow-seg:hover { transform: none; }
}

/* ── Durum renkleri: daha DOYGUN ────────────────────────────────────────
   Aynı anlam, daha yüksek ses. Soluk pastel rozetler yoğun bir gridde
   birbirine karışıyordu; doygunluk arttı ama ANLAM HARİTASI değişmedi. */
:root {
  --ok:#047857;  --ok-bg:#d1fae5;
  --no:#be123c;  --no-bg:#ffe4e6;
  --info:#1d4ed8;--info-bg:#dbeafe;
  --warn:#b45309;--warn-bg:#fef3c7;
  --pop:#c2410c; --pop-dk:#9a3412; --pop-bg:#ffedd5;
}
[data-theme="dark"] {
  --ok:#34d399;  --ok-bg:#053b2a;
  --no:#fb7185;  --no-bg:#3b1119;
  --info:#60a5fa;--info-bg:#152a52;
  --warn:#fbbf24;--warn-bg:#3a2a08;
  --pop:#fb923c; --pop-dk:#fdba74; --pop-bg:#3a1e0a;
}

/* Rozetler: dolu zemin + ince kendi renginden kenarlık — düz, gradyansız. */
.g-pill {
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  font-weight: 600;
}

/* Panel başlığında modülün sırtı: 2px'lik küçük bir bant.
   Panelin hangi modüle ait olduğunu söyler, dekorasyon değildir. */
.panel-head, .form-group-label {
  position: relative; padding-left: 16px;
}
.panel-head::before, .form-group-label::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px; border-radius: 2px;
  background: var(--spine, var(--muted));
}

/* ════════════════════════════════════════════════════════════════════
   REMZİ KİTABEVİ — tipografi, oval dil, üst menü
════════════════════════════════════════════════════════════════════ */

:root {
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body:    "Source Sans 3", system-ui, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

/* Gövde: metin için tasarlanmış bir sans — yoğun tabloda okunaklı. */
body, .nav-item, .btn, input, select, textarea, button, table {
  font-family: var(--font-body);
}

/* Başlıklar ve BÜYÜK SAYILAR: logodaki yüksek kontrastlı serifin akrabası.
   Sayıların serif olması bilinçli — yayıncılıkta rakam da dizgidir ve
   panodaki büyük değerler böylece "veri" değil "haber" gibi okunur. */
h1, h2, h3, .brand-logo, .lg-logo,
.st-num, .fs-num, .kpi-value, .di-num, .sc-value {
  font-family: var(--font-display);
  letter-spacing: -.015em;
  font-weight: 700;
}
h1 { font-weight: 800; }

/* Veri alanları daima mono: ISBN, belge no, stok/cari kodu hizalı okunur. */
.g-badge, code, .mono { font-family: var(--font-mono); font-weight: 500; }

/* ── OVAL DİL: girdi ve düğmeler hap biçimli ───────────────────────── */
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="email"],
select, .lg-input, .form-field input, .form-field select,
.modal-search, .dx-texteditor-input-container, .bms-grid .dx-texteditor {
  border-radius: var(--r-pill) !important;
  padding-left: var(--dx-pad-x); padding-right: var(--dx-pad-x);
}
textarea { border-radius: var(--r-lg); padding-left: 16px; padding-right: 16px; }

.btn, .chip, .g-pill, .brand-badge { border-radius: var(--r-pill); }
.btn { padding-left: 20px; padding-right: 20px; }
.g-icbtn { border-radius: var(--r-pill); }

/* Odak halkası bordonun mavisi — girdinin oval hattını takip eder. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* ── ÜST MENÜ ──────────────────────────────────────────────────────────
   Kenar çubuğu kaldırıldı: içerik tüm genişliği kullanır ki yoğun tablolar
   yatayda nefes alsın. Etkin modülün sırt rengi ÜSTTE bant olarak durur. */
.app-shell { display: block; }

.topnav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 6px;
  padding: 0 20px; height: 60px;
  background: var(--nav-bg);
  border-bottom: 3px solid var(--nav-line);
}
.topnav-brand {
  display: flex; align-items: center; gap: 9px;
  margin-right: 18px; text-decoration: none; flex: none;
}
.topnav-mark {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px 8px 12px 12px;      /* logodaki kalkan silueti */
  background: #fff; color: var(--nav-pill-fg);
  font-family: var(--font-display); font-weight: 800; font-size: .84rem;
  letter-spacing: -.02em;
}
.topnav-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: #fff; line-height: 1.1; }
.topnav-title small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.62); }

.topnav-links { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topnav-links::-webkit-scrollbar { display: none; }

.topnav .nav-item {
  width: auto; min-height: 0; white-space: nowrap;
  padding: 8px 15px; border-radius: var(--r-pill);
  color: rgba(255,255,255,.82); font-weight: 500; font-size: .875rem;
  background: transparent; box-shadow: none;
}
.topnav .nav-item:hover { background: rgba(255,255,255,.13); color: #fff; box-shadow: none; }
.topnav .nav-item.active {
  background: #fff; color: var(--nav-pill-fg); font-weight: 600;
  box-shadow: none; animation: hap-in .28s var(--ease-out) both;
}
.topnav .nav-item.active .nav-icon,
.topnav .nav-item:hover .nav-icon { color: inherit; }
.topnav .nav-icon { width: 17px; height: 17px; min-width: 17px; color: inherit; }
.topnav .nav-icon svg { width: 15px; height: 15px; }
@keyframes hap-in { from { transform: scale(.9); opacity: .4; } to { transform: none; opacity: 1; } }

.topnav-right { display: flex; align-items: center; gap: 10px; flex: none; margin-left: 10px; }

/* Etkin modülün sırt rengi: menünün hemen altında ince bant. */
.spine-bar { height: 3px; background: var(--spine, var(--brand)); }

.main-wrap { margin-left: 0; width: 100%; }
.content { max-width: none; padding: 22px 24px 40px; }

/* Üst menüdeki kullanıcı yongası bordo zeminde okunur olmalı. */
.topnav-right .user-chip { background: rgba(255,255,255,.14); border-radius: var(--r-pill); padding: 4px 12px 4px 5px; }
.topnav-right .user-name { color: #fff; }
.topnav-right .user-role { color: rgba(255,255,255,.66); }
.topnav-right .user-avatar { background: #fff; color: var(--nav-pill-fg); border: none; font-family: var(--font-display); font-weight: 700; }

/* Mobil: bağlantılar yatay kaydırılır, marka sabit kalır. */
@media (max-width: 860px) {
  .topnav { padding: 0 12px; gap: 4px; }
  .topnav-title { display: none; }
  .content { padding: 16px 12px 32px; }
}

/* Üst menü ayracı: bölüm başlıkları yatayda çalışmaz, yerini ince çizgi aldı. */
.topnav-sep { width: 1px; height: 20px; background: rgba(255,255,255,.22); margin: 0 7px; flex: none; }

/* Tema anahtarı bordo zeminde: rayı beyazlaştır. */
.topnav-right .toggle-track { background: rgba(255,255,255,.26); }
.topnav-right .toggle-switch input:checked + .toggle-track { background: rgba(255,255,255,.6); }
.topnav-right .toggle-track::after { background: #fff; }

/* Çıkış menüsü üst menüden sarkar. */
.topnav-right .user-dropdown { right: 0; left: auto; top: calc(100% + 8px); }

/* ── Onay bildirimi zili ─────────────────────────────────────────────────
   Menü LİNKLERİ satırına değil sağ bloğa konuldu: .topnav-links yatay kaydırmalı ve
   Yönetici rolünde zaten 11 öğe taşıyor; sağ blok yatay yer tüketmez, dar ekranda da
   yerinde kalır (.topnav-title gizlenir, .topnav-right gizlenmez).

   ⛔ .icon-btn'in kendi renkleri BEYAZ zemin varsayar: color:var(--ink-2) bordo menüde
      neredeyse görünmez, :hover ise var(--brand-light) zemin verir — koyu temada
      lacivert bir daire olurdu. Bu yüzden .topnav-right altında ezilir; aynı yaklaşım
      tema anahtarı ve kullanıcı yongası için de uygulanmış (yukarıya bak). */
.topnav-right .icon-btn { color: rgba(255,255,255,.82); text-decoration: none; }
.topnav-right .icon-btn:hover { background: rgba(255,255,255,.13); color: #fff; }
.topnav-right .icon-btn.has-new { color: #fff; }

/* Sayı rozeti. ⛔ Kehribar bu projede "SİZDEN İŞLEM BEKLİYOR" imza sinyalidir (bkz. renk
   doktrini, dosya başı); kırmızı HATA demektir ve bekleyen onay bir hata değildir.
   --pop açık temada koyu turuncu, koyu temada AÇIK sarıdır: metin rengi bu yüzden sabit
   beyaz OLAMAZ, tema başına ayrı tanımlanır. */
.nav-badge {
  position: absolute;
  top: 1px; right: 1px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--pop);
  color: var(--bell-fg);
  border: 2px solid var(--nav-bg);
  font-size: .6rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
:root { --bell-fg: #fff; }
[data-theme="dark"] { --bell-fg: #3D0D1B; }

/* Kenar çubuğuna ait kalan kurallar üst menüde geçersiz. */
.sidebar, .sidebar-overlay, .hamburger-btn, .topbar { display: none !important; }

/* ── Pano: DAHA CANLI ───────────────────────────────────────────────────
   Kartın kendisi renk taşır (soluk zemin + doygun sırt), sayı serif ve büyük.
   Panoda renk bolluğu kabul edilir: burası tarama ekranı, karar ekranı değil. */
.stat { background: var(--bg-card); border-color: var(--line); transition: transform .16s var(--ease), box-shadow .16s ease, border-color .16s ease; }
/* Sırt yatay: kartın ÜST kenarında, panodaki akış kartlarıyla aynı dil. */
.stat::before {
  top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 5px;
  transform: scaleX(0); transform-origin: left;
  animation: sirt-cek .5s var(--ease-out) .1s both;
}
.stat:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--sc, var(--brand-fg)) 38%, transparent);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--sc, var(--brand-fg)) 16%, transparent);
}
.stat .st-ic {
  background: color-mix(in srgb, var(--sc, var(--brand-fg)) 14%, transparent);
  color: var(--sc, var(--brand-fg));
  border-radius: var(--r-pill);
}
/* Sayı kartın kendi rengini taşır — üç kart yan yana tarandığında hangisinin
   hangi durumu saydığı renkle anlaşılır, etiketi okumadan. */
.st-num { font-size: 2rem; color: var(--sc, var(--ink)); }
.st-lbl { color: var(--muted); letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; font-weight: 600; }

/* Akış hattı segmentlerinin tamamı dash.css'te tanımlıdır (kart düzeni,
   --seg renkleri, sırt bandı). Burada tekrarlanmaz: iki dosyada aynı kuralı
   tutmak, dash.css sonra yüklendiği için sessizce ölü kod üretiyordu. */