/* ════════════════════════════════════════════════════════════
   GÜLER YAZILIM — TECHNICAL EDITORIAL
   CRM theme.css  •  Açık tema  •  Dark mode YOK  •  Sıfır radius
   Bu dosyayı CrmApp/wwwroot/css/theme.css olarak kullan.
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   KENDİNDE BARINDIRILAN YAZI TİPLERİ (OFL 1.1)
   🔴 Google Fonts CDN'i KULLANILMAZ (STATUS #6 / E9): depoda internet
   olmayabilir ve yurt dışına IP aktarımı "Türkiye'de veri lokasyonu"
   anlatısıyla çelişir. Kesimler PDF ile paylaşılır (wwwroot/fonts/pdf).
   Lisans: OFL-Archivo.txt · OFL-IBMPlex.txt (aynı klasör).
   Türkçe karakterler tam TTF kesiminde gelir (ş, ğ, ı, İ, ö, ü, ç).
   ════════════════════════════════════════════════════════════ */

/* Archivo — başlık */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pdf/Archivo-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/pdf/Archivo-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/pdf/Archivo-Bold.ttf') format('truetype');
}

/* IBM Plex Sans — gövde */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pdf/IBMPlexSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pdf/IBMPlexSans-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/pdf/IBMPlexSans-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/pdf/IBMPlexSans-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/pdf/IBMPlexSans-Bold.ttf') format('truetype');
}

/* IBM Plex Mono — sayı/etiket/kod */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pdf/IBMPlexMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/pdf/IBMPlexMono-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/pdf/IBMPlexMono-Bold.ttf') format('truetype');
}

/* ════════════════════════════════════════════════════════════
   MATERIAL SYMBOLS OUTLINED — ikon yazı tipi (Apache-2.0)
   🔴 Aynı kural burada da geçerlidir (STATUS #6 / E9): CDN YOK.
   Kesim yalnız FİİLEN KULLANILAN 126 ikonla alt kümelenmiştir (132 KB);
   tam değişken font ~4 MB olurdu ve büyük kısmı hiç kullanılmazdı.
   Yeni bir ikon eklenirse alt küme YENİDEN üretilmelidir, yoksa ikon
   boş kare olarak görünür — tasarim/IKON-LISTESI.md dosyasına bak.
   font-display: block → swap DEĞİL: ikon fontunda swap, yazı tipi
   yüklenene kadar ikon ADINI ("dashboard") ham metin olarak bastırır.
   ════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/MaterialSymbolsOutlined-Subset.woff2') format('woff2');
}

/* Kullanım: <span class="ico" aria-hidden="true">dashboard</span>
   🔴 aria-hidden zorunlu: ikon adı ekran okuyucuda anlamsız metindir.
   Tek başına anlam taşıyan ikonun yanında görünmez .sr-only etiket bulunur. */
.ico {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  flex-shrink: 0;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  user-select: none;
}

.ico--sm { font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.ico--lg { font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.ico--xl { font-size: 32px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40; }
.ico--fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }

/* Yalnız ekran okuyucu — ikonun anlamını taşıyan görünmez etiket. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
  /* Yeşil ailesi */
  --green:        #3F7537;
  --green-deep:   #2A5224;
  --green-dark:   #1A3415;
  --green-soft:   #5C9551;
  --green-lite:   #E8EFE6;

  /* Nötr */
  --ink:          #0A0A0A;
  --ink-soft:     #6B6B6B;
  --paper:        #FAF9F6;
  --surface:      #FFFFFF;
  --border:       #DAD7CE;
  --border-strong:#0A0A0A;

  /* Fonksiyonel (yalnızca durum/badge) */
  --status-neutral-bg:  #EFEDE8;
  --status-neutral-fg:  #6B6B6B;
  --status-success-bg:  #2A5224;
  --status-success-fg:  #FAF9F6;
  --status-danger-bg:   #F2E4E2;
  --status-danger-fg:   #8A2C2C;
  --status-expired-bg:  #F0EBDD;
  --status-expired-fg:  #8A6D3B;

  /* Tipografi */
  --font-display: 'Archivo', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* SIFIR RADIUS — değiştirme */
  --radius: 0px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin: 0; }
a { color: var(--green-deep); }

/* ── Mono etiket (Linear tarzı) ── */
.label-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* ── Layout iskeleti ── */
.app { display: flex; min-height: 100vh; }
.sidebar {
  flex: 0 0 248px;
  background: var(--green-dark);
  color: var(--paper);
  display: flex;
  flex-direction: column;
}
.sidebar a { color: var(--paper); text-decoration: none; }
.sidebar .nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px;
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  border-left: 3px solid transparent;
}
.sidebar .nav-item:hover { background: rgba(255,255,255,0.06); }
.sidebar .nav-item.active { background: rgba(255,255,255,0.10); border-left-color: var(--green-soft); }
.main { flex: 1 1 auto; display: flex; flex-direction: column; }
.topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--border-strong);
  padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.content { background: var(--paper); padding: 32px 40px; flex: 1 1 auto; }

/* ── Kart: gölgesiz, keskin köşe, ince border ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

/* ── Buton ── */
.btn { border-radius: var(--radius); padding: 10px 18px; font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--green-deep); color: var(--paper); border-color: var(--green-deep); }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--green-lite); }

/* ── Form ── */
.form-control {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; width: 100%; font-family: var(--font-body); font-size: 15px;
  outline: none; transition: border-color .12s, box-shadow .12s;
}
.form-control:focus { border-color: var(--green-deep); box-shadow: 0 0 0 3px rgba(42,82,36,0.13); }
.form-control::placeholder { color: #A8A39B; }
.form-control.input-validation-error { border-color: var(--status-danger-fg); }
.form-label { display: block; font-family: var(--font-body); font-weight: 500; font-size: 14px; margin-bottom: 8px; }
.field-validation-error { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--status-danger-fg); text-transform: uppercase; margin-top: 6px; display: block; }

/* ── Durum etiketi: DİKDÖRTGEN (pill değil) ── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.badge-neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.badge-sent    { background: transparent; color: var(--green-deep); border: 1px solid var(--green-deep); }
.badge-success { background: var(--status-success-bg); color: var(--status-success-fg); }
.badge-danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.badge-expired { background: var(--status-expired-bg); color: var(--status-expired-fg); }

/* ── Tablo: editorial, ince yatay çizgi ── */
table { width: 100%; border-collapse: collapse; }
thead th {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-soft); text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--border-strong);
}
tbody td { padding: 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
tbody tr:hover { background: var(--green-lite); }
.num { font-family: var(--font-mono); }

/* ── Toast (sağ alt) ── */
.toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast { border-radius: var(--radius); border: 1px solid var(--border); padding: 12px 16px; font-family: var(--font-body); font-size: 14px; background: var(--surface); }
.toast-success { background: var(--green-deep); color: var(--paper); border-color: var(--green-deep); }
.toast-error { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-fg); }

/* ── Sekme (editorial underline) ── */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); }
.tabs .tab { padding: 12px 0; font-family: var(--font-body); font-weight: 500; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; }
.tabs .tab.active { color: var(--ink); border-bottom-color: var(--green-deep); }

/* ── Responsive ── */
@media (max-width: 860px) {
  .sidebar { position: fixed; left: -248px; transition: left .2s; z-index: 50; height: 100vh; }
  .sidebar.open { left: 0; }
  .content { padding: 24px 16px; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ════════════════════════════════════════════════════════════
   LAYOUT & BİLEŞEN EKLERİ — Güler CRM (theme.css uzantısı)
   ════════════════════════════════════════════════════════════ */

/* ── Sidebar marka ── */
.sidebar__brand { display:flex; align-items:center; gap:12px; padding:22px 20px 18px; border-bottom:1px solid rgba(255,255,255,0.08); }
.sidebar__logo { position:relative; width:30px; height:30px; border:1.5px solid #FFFFFF; flex:none; }
.sidebar__logo span { position:absolute; right:5px; bottom:5px; width:11px; height:11px; background:#FFFFFF; }
.sidebar__wordmark { font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:0.16em; color:#FFFFFF; }

/* ── Sidebar nav ── */
.sidebar__nav { display:flex; flex-direction:column; padding:12px 0; }
.sidebar .nav-item svg { width:18px; height:18px; flex:none; opacity:0.9; }
.sidebar__nav .nav-item span { line-height:1; }

/* Sidebar ikonu — pasif hâlde soluk, aktif/hover'da tam opak.
   🔴 .nav-item zaten flex + gap:12px; ikon YENİ bir hizalama kuralı GEREKTİRMEZ.
   Boyut 18px: yanındaki 14px gövde metniyle optik olarak eşit ağırlıkta durur. */
.sidebar__nav .nav-item .ico { font-size:18px; opacity:0.72; transition:opacity .15s; }
.sidebar__nav .nav-item:hover .ico,
.sidebar__nav .nav-item.active .ico { opacity:1; }

/* ── Sidebar kullanıcı ── */
.sidebar__user { margin-top:auto; padding:16px 20px; border-top:1px solid rgba(255,255,255,0.08); }
.sidebar__user-name { font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--paper); }
/* Palet dışı alfa kapatıldı: rgba(250,249,246,0.55) → var(--green-lite).
   Koyu yeşil zemin üzeri ikincil metnin ev kalıbı budur (.btn-hero__desc,
   .chain-score__value .label-mono aynı token'ı kullanır). Hiyerarşi renkle değil
   TİPOGRAFİYLE taşınır: bu satır .label-mono'dur (küçük, UPPERCASE, letter-spaced),
   üstündeki .sidebar__user-name ise 14px/600 gövde metnidir. */
.sidebar__user-role { color:var(--green-lite); margin-top:3px; }
.sidebar__logout { margin-top:12px; }
.sidebar__logout button { display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid rgba(255,255,255,0.22); color:var(--paper); font-family:var(--font-body); font-size:13px; font-weight:500; padding:7px 12px; cursor:pointer; }
.sidebar__logout button:hover { background:rgba(255,255,255,0.08); }
.sidebar__logout svg { width:15px; height:15px; }

/* ── Topbar ── */
.topbar__left { display:flex; align-items:center; gap:14px; }
.topbar__right { display:flex; align-items:center; gap:16px; }
.topbar__menu { display:none; background:none; border:none; cursor:pointer; color:var(--ink); padding:0; }
.topbar__menu svg { width:22px; height:22px; }
.topbar__icon { width:18px; height:18px; color:var(--ink-soft); }
.topbar__user { font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--ink); }

/* ── Sayfa başlığı ── */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:28px; }
.page-title { font-family:var(--font-display); font-weight:700; font-size:28px; letter-spacing:-0.01em; margin-top:6px; }
.page-actions { display:flex; align-items:center; gap:10px; }

/* ── Buton ek varyantları ── */
.btn { display:inline-flex; align-items:center; gap:8px; text-decoration:none; line-height:1; }
.btn svg { width:16px; height:16px; }
.btn-sm { padding:7px 12px; font-size:13px; }
.btn-danger { background:var(--status-danger-fg); color:var(--paper); border-color:var(--status-danger-fg); }
.btn-danger:hover { background:#6f2222; border-color:#6f2222; }

/* ── "Denetçi Sordu" — ana panodaki tek büyük düğme ──
   Ürünün tek cümlelik vaadinin ekran karşılığıdır (CLAUDE.md Bölüm 0): denetçi sorduğunda
   cevap klasörde değil ekrandadır. Panoda BİR TANEDİR; ikinci bir birincil düğme eklenmez,
   aksi hâlde "tek düğme" vaadi bozulur. */
.btn-hero { display:flex; align-items:center; justify-content:space-between; gap:24px;
            width:100%; padding:26px 32px; margin-bottom:28px; text-decoration:none;
            background:var(--green-dark); color:var(--paper);
            border:1px solid var(--green-dark); }
.btn-hero:hover { background:var(--green-deep); border-color:var(--green-deep); }
.btn-hero__text { display:flex; flex-direction:column; gap:8px; }
.btn-hero__title { font-family:var(--font-display); font-weight:700; font-size:30px;
                   letter-spacing:-0.01em; line-height:1.1; }
.btn-hero__desc { font-family:var(--font-body); font-size:14px; line-height:1.5;
                  color:var(--green-lite); max-width:64ch; }
.btn-hero__cue { font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
                 letter-spacing:0.06em; color:var(--green-lite); white-space:nowrap; }

@media (max-width: 720px) {
  .btn-hero { flex-direction:column; align-items:flex-start; gap:14px; padding:20px; }
  .btn-hero__title { font-size:24px; }
}

/* ── İstatistik kartları ── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; }
.stat { background:var(--surface); border:1px solid var(--border); padding:20px; }
.stat__label { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); }
.stat__value { font-family:var(--font-display); font-weight:700; font-size:30px; margin-top:8px; color:var(--ink); }
.stat__meta { font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); margin-top:6px; }

/* ── Filtre çubuğu ── */
.filter-bar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; margin-bottom:20px; }
.filter-bar .form-control, .filter-bar select { min-width:180px; width:auto; }

/* ── Boş durum ── */
.empty-state { text-align:center; padding:56px 24px; color:var(--ink-soft); border:1px dashed var(--border); }
.empty-state__title { font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); margin-bottom:8px; }

/* ── Tablo aksiyon ikonları ──
   🔴 `opacity:0` + `tbody tr:hover .row-actions { opacity:1 }` KALDIRILDI (T4/Adım 0):
   dokunmatik ekranda hover YOKTUR ve klavye odağı da bu kuralı tetiklemez, yani eylem
   yalnız fareyle satırın üzerine gelen kullanıcıya görünüyordu. Görünmeyen eylem
   olmayan eylemdir; "Çıkar"/"Sil" gibi kayıt düşüren düğmelerin gizli kalması ayrıca
   erişilebilirlik hatasıdır. Eylemler artık daima görünür; ciddiyeti .row-actions--text
   (mono, küçük, ikincil renk) taşır. */
.row-actions { display:inline-flex; gap:10px; }
.row-actions a, .row-actions button { color:var(--ink-soft); display:inline-flex; background:none; border:none; cursor:pointer; padding:0; }
.row-actions a:hover, .row-actions button:hover { color:var(--green-deep); }
.row-actions svg { width:16px; height:16px; }

/* ── Yan çekmece (drawer) ── */
.drawer-overlay { position:fixed; inset:0; background:rgba(10,10,10,0.32); z-index:80; display:none; }
.drawer-overlay.open { display:block; }
.drawer { position:fixed; top:0; right:-460px; width:460px; max-width:92vw; height:100vh; background:var(--surface); border-left:1px solid var(--border); z-index:90; transition:right .2s; display:flex; flex-direction:column; }
.drawer.open { right:0; }
.drawer__head { padding:22px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.drawer__title { font-family:var(--font-display); font-weight:700; font-size:20px; }
.drawer__body { padding:24px; overflow-y:auto; flex:1; }
.drawer__foot { padding:18px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }
.drawer__close { background:none; border:none; cursor:pointer; color:var(--ink-soft); }
.drawer__close svg { width:20px; height:20px; }

/* ── Modal ── */
.modal-overlay { position:fixed; inset:0; background:rgba(10,10,10,0.40); z-index:80; display:none; align-items:center; justify-content:center; padding:24px; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--surface); border:1px solid var(--border); width:100%; max-width:560px; max-height:88vh; overflow-y:auto; }
.modal-box__head { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-box__body { padding:24px; }
.modal-box__foot { padding:18px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

/* ── Form yardımcıları ── */
.form-row { margin-bottom:18px; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ── Sekme içerik ── */
.tab-pane { display:none; padding-top:24px; }
.tab-pane.active { display:block; }

/* ── Select2 sıfır radius uyumu ── */
.select2-container--default .select2-selection--single { border:1px solid var(--border); border-radius:0; height:42px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height:40px; padding-left:12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height:40px; }

/* ── Mobil ── */
@media (max-width: 860px) {
  .topbar__menu { display:inline-flex; }
  .form-grid-2 { grid-template-columns:1fr; }
  .page-head { flex-direction:column; }
}

/* ── Etkileşim timeline (Sprint 7) ── */
.timeline { display:flex; flex-direction:column; }
.timeline-item { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }
.timeline-icon { flex:none; width:32px; height:32px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--green-deep); }
.timeline-icon svg { width:16px; height:16px; }
.timeline-body { flex:1; }
.timeline-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.task-done { display:inline-flex; align-items:center; gap:6px; cursor:pointer; margin-left:10px; font-size:13px; }
.svc-bar { height:4px; background:var(--green-lite); position:relative; margin-top:4px; width:90px; }
.svc-bar span { position:absolute; left:0; top:0; bottom:0; }

/* ── Footer (Sprint 9) ── */
.app-footer { padding:16px 40px; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--ink-soft); background:var(--paper); }
@media (max-width:860px){ .app-footer{ padding:14px 16px; } }

/* ── Select2 sonuç vurgusu: mavi yerine yeşil (UI denetimi düzeltmesi) ── */
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--green-deep); color: var(--paper); }
.select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--green-lite); color: var(--ink); }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--green-deep); outline: none; }

/* ════════════════════════════════════════════════════════════
   SweetAlert2 — Güler teması (onay diyalogları + toast)
   ════════════════════════════════════════════════════════════ */
.swal2-container { z-index: 10050; }
.swal-guler.swal2-popup { border-radius: 0; border: 1px solid var(--border-strong); box-shadow: none; font-family: var(--font-body); background: var(--surface); padding: 28px; }
.swal-guler .swal2-title { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--ink); }
.swal-guler .swal2-html-container { font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.swal-guler .swal2-actions { gap: 10px; margin-top: 20px; }
.swal-guler .swal2-styled { border-radius: 0 !important; box-shadow: none !important; font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 11px 20px; margin: 0; transition: background .12s; }
.swal-guler .swal2-styled.swal2-confirm { background: var(--green-deep); color: var(--paper); border: 1px solid var(--green-deep); }
.swal-guler .swal2-styled.swal2-confirm:hover { background: var(--green-dark); border-color: var(--green-dark); }
.swal-guler .swal2-styled.swal2-cancel { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); }
.swal-guler .swal2-styled.swal2-cancel:hover { background: var(--green-lite); }
.swal-guler .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(42,82,36,0.18) !important; }

/* Danger (silme/reddet): kırmızı onay + kırmızı uyarı ikonu — turuncu YOK */
.swal-guler.swal-danger .swal2-styled.swal2-confirm { background: var(--status-danger-fg); border-color: var(--status-danger-fg); }
.swal-guler.swal-danger .swal2-styled.swal2-confirm:hover { background: #6f2222; border-color: #6f2222; }
.swal-guler.swal-danger .swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(138,44,44,0.20) !important; }
.swal-guler.swal-danger .swal2-icon.swal2-warning { border-color: var(--status-danger-fg); color: var(--status-danger-fg); }

/* İkon renkleri — palet dışı sarı/turuncuyu bastır */
.swal-guler .swal2-icon.swal2-warning { border-color: var(--status-expired-fg); color: var(--status-expired-fg); }
.swal-guler .swal2-icon.swal2-question { border-color: var(--green-deep); color: var(--green-deep); }
.swal-guler .swal2-icon.swal2-success { border-color: var(--green-deep); color: var(--green-deep); }
.swal-guler .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--green-deep); }
.swal-guler .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(42,82,36,0.30); }
.swal-guler .swal2-icon.swal2-error { border-color: var(--status-danger-fg); color: var(--status-danger-fg); }
.swal-guler .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--status-danger-fg); }

/* Toast (sağ alt) */
.swal-guler.swal-toast { border-radius: 0; border: 1px solid var(--border); box-shadow: none; padding: 14px 16px; }
.swal-guler.swal-toast .swal2-title { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--ink); margin: 0; }
.swal-guler.swal-toast--success { border-left: 3px solid var(--green-deep); }
.swal-guler.swal-toast--error { border-left: 3px solid var(--status-danger-fg); }
.swal-guler.swal-toast .swal2-timer-progress-bar { background: var(--green-soft); }
.swal-guler.swal-toast--error .swal2-timer-progress-bar { background: var(--status-danger-fg); }

/* ── Sidebar profil linki (T1) ── */
/* Palet dışı alfa kapatıldı: rgba(250,249,246,0.82) → var(--green-lite). Bkz. üstteki not.
   ⚠️ Yalnız rgba(255,255,255,X) ZEMİN/ÇİZGİ kullanımları korunur (hover, ayırıcı border):
   onlar renk değil YÜZEY işlemidir ve palet kuralının konusu değildir. */
.sidebar__profile { display:inline-flex; align-items:center; gap:8px; margin-top:14px; color:var(--green-lite); text-decoration:none; font-size:13px; font-weight:500; }
.sidebar__profile:hover { color:#FFFFFF; }
.sidebar__profile svg { width:15px; height:15px; }

/* ── Bildirim merkezi (T2) ── */
.notif { position: relative; display: inline-flex; }
.notif__btn { position: relative; background: none; border: none; cursor: pointer; color: var(--ink-soft); padding: 4px; display: inline-flex; }
.notif__btn:hover { color: var(--ink); }
.notif__btn svg { width: 18px; height: 18px; }
.notif__badge { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--status-danger-fg); color: #FFFFFF; font-family: var(--font-mono); font-size: 10px; line-height: 16px; text-align: center; }
.notif__panel { position: absolute; top: 34px; right: 0; width: 340px; max-height: 440px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); display: none; z-index: 60; }
.notif__panel.open { display: block; }
.notif__head { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.notif__item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--ink); }
.notif__item:hover { background: var(--green-lite); }
.notif__icon { flex: none; width: 28px; height: 28px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.notif__icon svg { width: 15px; height: 15px; }
.notif__item--danger .notif__icon { border-color: var(--status-danger-fg); color: var(--status-danger-fg); }
.notif__item--warning .notif__icon { border-color: var(--status-expired-fg); color: var(--status-expired-fg); }
.notif__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif__title { font-size: 13px; font-weight: 500; }
.notif__sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.notif__empty { padding: 28px 16px; text-align: center; color: var(--ink-soft); font-size: 13px; }

/* ── Topbar arama (T4) ── */
.topbar__search { display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--surface); padding:6px 12px; min-width:300px; }
.topbar__search svg { width:16px; height:16px; color:var(--ink-soft); flex:none; }
.topbar__search input { border:none; outline:none; background:transparent; font-family:var(--font-body); font-size:14px; width:100%; color:var(--ink); }
.topbar__search input::placeholder { color:#A8A39B; }
.search-hit { display:flex; align-items:baseline; gap:14px; padding:10px 0; border-bottom:1px solid var(--border); text-decoration:none; color:var(--ink); }
.search-hit:last-child { border-bottom:none; }
.search-hit:hover .search-hit__title { color:var(--green-deep); }
.search-hit__title { font-weight:500; font-size:14px; }
.search-hit__sub { font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); }
@media (max-width:860px){ .topbar__search { display:none; } }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   SPRINT 2 — ortak liste/form kalıbı (§2.6)
   🔴 Sıfır radius, gölge yok, ayrım 1px solid var(--border) ile (CLAUDE.md Bölüm 4).
   Yeni renk sabiti tanımlanmaz; yalnız :root değişkenleri kullanılır.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Filtre çubuğu (_ListToolbar.cshtml) ── */
.filter-bar__field { display:flex; flex-direction:column; gap:6px; }
.filter-bar__field .label-mono { color:var(--ink-soft); }
.filter-bar__actions { display:flex; align-items:center; gap:8px; margin-left:auto; }

/* ── Sayfalayıcı (_Pager.cshtml) ── */
.pager { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.pager__info { color:var(--ink-soft); }
.pager__links { display:flex; flex-wrap:wrap; gap:6px; }
.pager__link { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); text-decoration:none; }
.pager__link:hover { background:var(--green-lite); }
.pager__link.is-active { background:var(--green-deep); border-color:var(--green-deep); color:var(--paper); }
.pager__link.is-disabled { background:var(--paper); color:#A8A39B; pointer-events:none; }

/* ── Boş durum (_EmptyState.cshtml) ── */
.empty-state__desc { margin:0 auto; max-width:520px; font-size:14px; line-height:1.6; }
.empty-state__action { margin-top:20px; }

/* ── Form bölümü (_FormSection.cshtml) ── */
.form-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:20px; }
.form-section__head { margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.form-section__title { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.form-section__desc { margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--ink-soft); }
.form-section .form-row:last-child { margin-bottom:0; }

/* ── Form yerleşimi: tek sütun (CLAUDE.md Bölüm 4) ── */
.form-narrow { max-width:760px; }
.form-actions { display:flex; align-items:center; gap:10px; }
.form-hint { margin-top:6px; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.checkbox-row { display:flex; align-items:center; gap:10px; }
.checkbox-row label { margin:0; font-size:14px; }

/* ── Mevzuat / bilgi notu ── */
.note { margin-bottom:20px; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--green-deep); border-radius:var(--radius); font-size:13px; line-height:1.6; color:var(--ink-soft); }
.note strong { color:var(--ink); }
.note p { margin:0 0 8px; }
.note p:last-child { margin-bottom:0; }

/* ── Tablo sarmalayıcı: dar ekranda yatay kaydırma ── */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow-x:auto; }
.table-wrap table { min-width:640px; }

/* ── Doğrulama özeti ── */
.validation-summary-errors { margin-bottom:20px; padding:14px 16px; background:var(--status-danger-bg); border:1px solid var(--status-danger-fg); border-radius:var(--radius); color:var(--status-danger-fg); font-size:13px; }
.validation-summary-errors ul { margin:0; padding-left:18px; }
.validation-summary-valid { display:none; }

/* ══════════════════════════════════════════════════════════════════
   SPRINT 2 — ÇOK SATIRLI FORM BÖLÜMÜ (ürün alerjenleri, reçete kalemleri)
   Sıfır radius, gölge yok, yalnız 1px çizgiyle ayırma (CLAUDE.md Bölüm 4).
   ══════════════════════════════════════════════════════════════════ */
.line-table { margin-top:16px; border-top:1px solid var(--border); }
.line-row { display:grid; grid-template-columns:1fr 1.4fr 1fr 1fr auto; gap:12px; align-items:end; padding:14px 0; border-bottom:1px solid var(--border); }
.line-row .form-row { margin:0; }
.line-row__actions { padding-bottom:2px; }
.line-row--wide { grid-template-columns:1.6fr 1fr .8fr .8fr .6fr auto; }
/* Tür + serbest metin + kaldır (ürün zorunlu ibareleri). */
.line-row--trio { grid-template-columns:1fr 2.4fr auto; }

@media (max-width: 860px) {
  .line-row, .line-row--wide, .line-row--trio { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   SPRINT 3 — VARLIK KİMLİK BLOĞU VE TANIM IZGARASI (parti detayı)
   Sıfır radius, gölge yok, yalnız 1px çizgiyle ayırma (CLAUDE.md Bölüm 4).
   Yeni renk sabiti TANIMLANMAZ; yalnız :root değişkenleri kullanılır.
   ══════════════════════════════════════════════════════════════════ */
.entity-head { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:24px; }
.entity-head__main { padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--border); }
.entity-head__no { font-family:var(--font-mono); font-weight:500; font-size:30px; letter-spacing:.04em; color:var(--ink); margin-top:8px; }
.entity-head__meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; }
.entity-head__meta .label-mono { color:var(--ink-soft); }
.entity-head .note { margin-top:20px; margin-bottom:0; }

/* ── Tanım ızgarası: etiket mono/UPPERCASE, değer gövde fontu ── */
.def-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:20px 24px; }
.def-item { min-width:0; }
.def-label { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
.def-value { font-family:var(--font-body); font-size:14px; color:var(--ink); margin-top:6px; word-break:break-word; }
.def-value.num { font-family:var(--font-mono); }

/* ── Stok defteri miktar yönü: renk DEĞİL, işaret ve ağırlık taşır ── */
.qty-in { font-weight:500; color:var(--green-deep); }
.qty-out { font-weight:500; color:var(--status-danger-fg); }

@media (max-width: 860px) {
  .entity-head { padding:18px; }
  .entity-head__no { font-size:24px; }
}

/* ══════════════════════════════════════════════════════════════════
   SPRINT 3 — MAL KABUL EKRANI (tek ekran, mobil uyumlu)
   🔴 Ayrı bir "kiosk" görünümü YOKTUR: aynı sayfa depoda telefonla kullanılır.
   Dokunma hedefleri 44px'e çıkarılır (Apple/Google erişilebilirlik tabanı), kalem satırı
   dar ekranda tek sütuna düşer. Sıfır radius, gölge yok; yeni renk sabiti tanımlanmaz.
   ══════════════════════════════════════════════════════════════════ */

/* ── Büyük dokunma hedefi: eldivenle ve araç başında kullanılır ── */
.form-control--touch { min-height:44px; font-size:15px; }

/* ── Kalem satırı: 7 alan + tam genişlik ayrıntı bloğu ── */
.receipt-line { grid-template-columns:1.6fr .8fr 1.1fr .7fr .7fr .9fr 1fr auto; }
.receipt-line > .line-detail { grid-column:1 / -1; }
.receipt-line__product { min-width:0; }

/* ── Katlanabilir ayrıntı: alan sayısını 8'in altında tutar (§3.1 mobil ergonomi) ── */
.line-detail { margin-top:12px; border-top:1px dashed var(--border); padding-top:10px; }
.line-detail__summary { font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; padding:6px 0; }
.line-detail__summary:hover { color:var(--ink); }
.line-detail__body { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px 20px; padding:12px 0 4px; }
.line-detail__body .form-row { margin:0; }
.line-detail__body .line-row--wide { grid-column:1 / -1; display:block; padding:0; border:0; }

/* ── Ek dosya yükleme satırı ── */
.upload-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }
.upload-row .form-row { margin:0; flex:1 1 220px; }
.upload-row .form-actions { margin:0; }

@media (max-width: 1100px) {
  .receipt-line { grid-template-columns:1fr 1fr 1fr auto; }
}

@media (max-width: 860px) {
  .receipt-line { grid-template-columns:1fr; }
  .upload-row { flex-direction:column; align-items:stretch; }
}

/* ══════════════════════════════════════════════════════════════════
   SPRINT 5 — İZLEME EKRANLARI VE DENETİM MODU
   Sıfır radius, gölge yok, gradient yok; yeni renk sabiti TANIMLANMAZ — yalnız mevcut
   :root değişkenleri kullanılır (CLAUDE.md Bölüm 4).
   ══════════════════════════════════════════════════════════════════ */

/* ── Girintili zincir ağacı: parti numarası mono, girinti sunucudan gelir ── */
.trace-tree { list-style:none; margin:0; padding:0; border:1px solid var(--border); background:var(--surface); }
.trace-tree__row { display:flex; align-items:baseline; gap:16px; padding:10px 16px; border-bottom:1px solid var(--border); }
.trace-tree__row:last-child { border-bottom:0; }
.trace-tree__lot { font-family:var(--font-mono); font-size:13px; font-weight:500; min-width:150px; }
.trace-tree__body { min-width:0; }
.trace-tree__product { font-family:var(--font-body); font-size:14px; }
.trace-tree__meta { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:4px; }

/* ── Denetim Modu künyesi: BÜYÜK tipografi (denetçi karşısında okunaklı) ── */
.audit-head { background:var(--surface); border:1px solid var(--border-strong); padding:28px 32px; margin-bottom:24px; }
.audit-head__no { font-family:var(--font-mono); font-size:44px; font-weight:500; letter-spacing:.02em; line-height:1.1; margin-top:6px; }
.audit-head__product { font-family:var(--font-display); font-weight:700; font-size:24px; margin-top:8px; }
.audit-head__timing { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }

/* ── Dört hazır soru: dikdörtgen, aktif olan koyu blok ── */
.audit-questions { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:0; border:1px solid var(--border-strong); margin-bottom:24px; }
.audit-q { display:flex; align-items:flex-start; gap:12px; padding:18px 20px; background:var(--surface); color:var(--ink); text-decoration:none; border-right:1px solid var(--border); }
.audit-q:last-child { border-right:0; }
.audit-q:hover { background:var(--green-lite); }
.audit-q--active { background:var(--green-dark); color:var(--paper); }
.audit-q--active:hover { background:var(--green-dark); }
.audit-q__index { font-size:12px; }
.audit-q--active .audit-q__index { color:var(--green-lite); }
.audit-q__text { font-family:var(--font-display); font-weight:600; font-size:16px; line-height:1.35; }

/* ── Tek soruya tek cevap bloğu ── */
.audit-answer { background:var(--surface); border:1px solid var(--border); padding:28px 32px; }
.audit-answer__title { font-size:26px; margin-bottom:20px; }
.audit-answer .stat-grid { margin-bottom:24px; }
.audit-answer .table-wrap { margin-bottom:20px; }
.audit-answer .trace-tree { margin-bottom:20px; }

/* ── Belge indirme bloğu: Denetim Modu akışının SONU ──
   Demo senaryosu Adım 5'in ★ asıl sahnesi burasıdır ("PDF indir → denetim dosyası açılır").
   Blok akışın sonunda ve GÖRÜNÜR olmalıdır: denetçinin karşısında "dosyayı da verebilir miyiz"
   sorusunun cevabı bir menüde aranmaz. Parti seçili değilken düğme PASİF basılır ve nedeni
   yazılır — kaybolan bir düğme, kullanıcıya özelliğin var olmadığını düşündürür. */
.audit-export { background:var(--green-dark); color:var(--paper); border:1px solid var(--green-dark);
                padding:28px 32px; margin-top:24px; }
.audit-export__label { font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
                       letter-spacing:0.06em; color:var(--green-lite); }
.audit-export__title { font-family:var(--font-display); font-weight:700; font-size:26px;
                       line-height:1.15; margin-top:8px; }
.audit-export__desc { font-family:var(--font-body); font-size:14px; line-height:1.5;
                      color:var(--green-lite); max-width:72ch; margin-top:10px; }
.audit-export__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.btn-xl { padding:18px 28px; font-size:18px; font-family:var(--font-display); font-weight:700; }
.btn-invert { background:var(--paper); color:var(--green-dark); border-color:var(--paper); }
.btn-invert:hover { background:var(--green-lite); border-color:var(--green-lite); }
.btn-ghost { background:transparent; color:var(--paper); border-color:var(--green-lite); }
.btn-ghost:hover { background:var(--green-deep); }
.btn.is-disabled { background:transparent; color:var(--green-lite); border-color:var(--green-soft);
                   opacity:.6; pointer-events:none; cursor:default; }

@media (max-width: 860px) {
  .trace-tree__row { flex-direction:column; gap:4px; }
  .audit-head { padding:20px; }
  .audit-head__no { font-size:30px; }
  .audit-q { border-right:0; border-bottom:1px solid var(--border); }
  .audit-answer { padding:20px; }
  .audit-answer__title { font-size:20px; }
  .audit-export { padding:20px; }
  .audit-export__title { font-size:20px; }
  .btn-xl { padding:14px 20px; font-size:16px; }
}

/* ════════════════════════════════════════════════════════════
   SPRINT 6 — SKT/FEFO panosu, Zincir Sağlığı, Tasarruf Defteri
   🔴 Sıfır radius · gölge YOK · monokrom yeşil · gradient YOK
   Grafikler inline SVG'dir; harici kütüphane ve CDN kullanılmaz.
   ════════════════════════════════════════════════════════════ */

/* ── Kritik kova rozeti: koyu blok (Sprint-6 §6.1 renk tablosu) ── */
.badge-critical { background: var(--green-dark); color: var(--paper); }

/* ── Satır aksiyonları: küçük düğmeler yan yana, satır yüksekliğini bozmadan ── */
.expiry-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.expiry-actions form { margin:0; }

/* ── Panel kartı bağlantı olduğunda ── */
.stat--link { display:block; text-decoration:none; color:inherit; }
.stat--link:hover { background:var(--green-lite); border-color:var(--green-deep); }

/* ── Zincir Sağlığı: skor bloğu + sparkline ── */
.chain-score { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:24px; }
.chain-score__value { flex:0 0 240px; background:var(--green-dark); color:var(--paper); padding:24px; }
/* Palet dışı alfa kaçağı kapatıldı (Adım 0): rgba(250,249,246,0.65) → var(--green-lite).
   Koyu yeşil zemin üzeri ikincil metin ev kalıbı budur (bkz. .btn-hero__desc). */
.chain-score__value .label-mono { color:var(--green-lite); }
.chain-score__value .stat__meta { color:var(--green-lite); }
.chain-score__number { font-family:var(--font-display); font-weight:700; font-size:64px; line-height:1; margin:10px 0 8px; }
.chain-score__trend { flex:1 1 320px; background:var(--surface); border:1px solid var(--border); padding:24px; }

.sparkline { display:block; width:100%; height:120px; }
.sparkline__axis { stroke:var(--border); stroke-width:1; stroke-dasharray:3 3; }
.sparkline__line { fill:none; stroke:var(--green-deep); stroke-width:2; vector-effect:non-scaling-stroke; }
.sparkline__dot { fill:var(--green-dark); }
.sparkline__legend { display:flex; justify-content:space-between; margin-top:10px; }

/* ── Tasarruf Defteri: aylık sütun grafiği ── */
.savings-legend { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-bottom:16px; }
.savings-legend__item { display:inline-flex; align-items:center; gap:8px; }
.savings-legend__swatch { width:12px; height:12px; display:inline-block; }
.savings-legend__swatch--rescued { background:var(--green-deep); }
.savings-legend__swatch--wasted { background:var(--status-danger-fg); }
.savings-legend__scale { margin-left:auto; }

.savings-chart { display:block; width:100%; height:200px; border-bottom:1px solid var(--border-strong); }
.savings-chart__bar--rescued { fill:var(--green-deep); }
.savings-chart__bar--wasted { fill:var(--status-danger-fg); }
.savings-chart__axis { display:flex; margin-top:8px; }
.savings-chart__tick { flex:1 1 0; text-align:center; }

@media (max-width: 860px) {
  .chain-score__value { flex:1 1 100%; }
  .chain-score__number { font-size:48px; }
  .expiry-actions { flex-direction:column; align-items:stretch; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STITCH TASARIM TURU — ÇEVRİLMİŞ DESENLER
   Kaynak: tasarim/stitch-ham/*.html (53 ekran) → tasarim/CSS-UYGULAMA-PLANI.md
   🔴 Ham Stitch HTML'i projeye ALINMADI. Sebep: Tailwind CDN + Google Fonts CDN
   (CLAUDE.md B4 · STATUS #6/E9 ikisini de yasaklar) ve ham markup Razor tag
   helper'larını, anti-forgery token'ını ve rol kapılarını yok eder.
   Ekranların ~%78'i ayrıca UYDURMA bir fintech kabuğu taşıyordu — alınmadı.
   Alınan şey: yerleşim, yoğunluk, bilgi hiyerarşisi ve ikonografi.
   Uydurma kalemlerin tam listesi: CSS-UYGULAMA-PLANI.md Bölüm 5.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   SPRINT T — STITCH GÖRSEL ÇEVİRİSİ (tasarim/CSS-UYGULAMA-PLANI.md)
   53 ekranlık Stitch çıktısının GÖRSEL kararları; ham HTML kopyalanmadı (Tailwind + CDN
   yasak, CLAUDE.md B4 · STATUS #6/E9). Yeni renk sabiti TANIMLANMAZ, yalnız :root kullanılır.
   Sıfır radius · gölge YOK · dikdörtgen badge · editorial tablo (zebra YOK).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────────
   T0 · MEVCUT KURALLARIN ONARIMI
   İkonlar artık <span class="ico"> ile basılıyor; eski `... svg { width:16px }`
   kuralları bu span'lara HİÇ DENK GELMİYOR ve ikon varsayılan 20px'te kalıyor.
   Boyutlar yanındaki metinle optik eşitlenir.
   ─────────────────────────────────────────────────────────────────────────────── */
.btn .ico            { font-size: 18px; }   /* .btn 14px metin */
.btn-sm .ico         { font-size: 16px; }
.btn-xl .ico         { font-size: 24px; }
.row-actions .ico    { font-size: 18px; }
.timeline-icon .ico  { font-size: 16px; }
.notif__icon .ico    { font-size: 15px; }

/* Bölüm başlığı çizgisi editorial kurala çekilir (yumuşak --border → koyu 1px).
   ⚠️ Bu satır MEVCUT davranışı değiştirir ve TÜM formlarda aynı anda uygulanır.
   Bilinçli tek satırlık global karar; bu yüzden dosya SONUNDA durur (cascade). */
.form-section__head { border-bottom-color: var(--border-strong); }

/* ───────────────────────────────────────────────────────────────────────────────
   T1 · SAYISAL KOLON HİZALAMASI
   NEDEN: mevcut .num yalnız yazı tipini mono yapar, hizalamayı DEĞİŞTİRMEZ ve
   `thead th { text-align:left }` koşulsuzdur — hücre sağa alınsa bile başlık solda
   kalır. Basamaklar alt alta gelmediği için miktar kolonları gözle kıyaslanamıyor.
   ─────────────────────────────────────────────────────────────────────────────── */
th.col-num, td.col-num       { text-align: right; }
td.col-num                   { font-family: var(--font-mono); }
th.col-center, td.col-center { text-align: center; }

/* Birim eki sayıdan daha hafif basılır ("1.240 KG"). */
.col-num__unit { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
                 text-transform: uppercase; color: var(--ink-soft); margin-left: 4px; }

/* ───────────────────────────────────────────────────────────────────────────────
   T2 · HÜCRE İÇİ İKİNCİL SATIR  (en yüksek getirili tek desen)
   NEDEN: bu kalıp bugün 19 GÖRÜNÜMDE 42 KEZ satır içi stille yazılıyor
   (`<div class="form-hint" style="margin-top:4px;">`, en yoğunu Expiry/Index).
   Notifications/Index dördüncü bir varyant kullanıyor. .form-hint yalnız
   mono/UPPERCASE tek biçim sunuyor; cümle ve italik atıf varyantı yok.
   .cell-sub tek başına da (sarmalayıcı olmadan) çalışır — 42 yerin drop-in karşılığı.
   ─────────────────────────────────────────────────────────────────────────────── */
.cell-sub { margin-top: 4px; font-family: var(--font-mono); font-size: 11px;
            letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.cell-sub a { color: var(--green-deep); }

/* Cümle taşıyan ikincil satır (uyarı gövdesi) — mono/UPPERCASE okunmaz. */
.cell-sub--plain { font-family: var(--font-body); font-size: 13px; letter-spacing: normal;
                   text-transform: none; line-height: 1.55; margin-top: 6px; }

/* Mevzuat atfı: italik + gövde fontu; kod/sayı olmadığı için mono DEĞİL. */
.cell-sub--cite { font-family: var(--font-body); font-size: 12px; font-style: italic;
                  letter-spacing: normal; text-transform: none; color: var(--ink-soft); }

/* Eksik/uyarı taşıyan ikincil satır: renk TEK taşıyıcı olmasın, ikon eşlik eder. */
.cell-sub--warn { color: var(--status-expired-fg); }
.cell-sub .ico  { font-size: 13px; vertical-align: -2px; margin-right: 4px; }

/* Boşluğu gap yöneten yığın (ana değer + altında ikincil satır). */
.cell-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cell-stack__main { font-family: var(--font-body); font-size: 14px; font-weight: 500;
                    color: var(--ink); }
.cell-stack .cell-sub { margin-top: 0; }   /* gap zaten boşluğu veriyor */

/* Bir hücrede çoklu DİKDÖRTGEN rozet: dar ekranda hücreyi taşırmasın. */
.cell-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cell-badges .badge { flex: none; }

/* Düzenlenemez sistem kaydının eylem hücresi (Suppliers/Index: SYS-000 devreden stok).
   Bugün `<span class="form-hint">KİLİTLİ</span>` ile sınıfsız basılıyor. */
.cell-lock { display: inline-flex; align-items: center; gap: 6px;
             font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
             letter-spacing: .05em; color: var(--ink-soft); }
.cell-lock .ico { font-size: 14px; }

/* ───────────────────────────────────────────────────────────────────────────────
   T3 · SATIR DURUMU
   NEDEN: bugün tablo satırlarının tamamı beyaz; ciddiyet yalnız ilk hücredeki
   badge'de duruyor ve 37 satırlık FEFO listesinde göz taramada kaçıyor.
   🔴 ZEMİN VERİLMEZ: `tbody tr:hover { background: var(--green-lite) }` tehlike
   zeminini hover'da YEŞİLE çevirir — "acil" satır fareyle üzerine gelindiğinde
   "normal" görünür. Şerit hover'dan etkilenmez ve zebra yasağını ihlal etmez
   (zebra ritmiktir, şerit anlam taşır).
   ⚠️ Şerit td üzerinde tanımlanır: border-collapse altında tr kenarı güvenilmez.
   ─────────────────────────────────────────────────────────────────────────────── */
tbody tr.is-flagged > td:first-child { border-left: 3px solid var(--border-strong); }
tbody tr.is-danger  > td:first-child { border-left: 3px solid var(--status-danger-fg); }
tbody tr.is-warning > td:first-child { border-left: 3px solid var(--status-expired-fg); }
tbody tr.is-flagged > td:first-child,
tbody tr.is-danger  > td:first-child,
tbody tr.is-warning > td:first-child { padding-left: 11px; }   /* 14px − 3px şerit */

/* Pasif kayıt: satır düzeyinde soldurma.
   🔴 opacity ve grayscale KULLANILMAZ (kontrastı WCAG altına düşürür).
   🔴 line-through KESİNLİKLE YOK — "kayıt silindi" okunur, CLAUDE.md B.7.2 ile çelişir. */
tbody tr.is-passive td { color: var(--ink-soft); }
tbody tr.is-passive .cell-stack__main { color: var(--ink-soft); font-weight: 400; }
tbody tr.is-passive .num,
tbody tr.is-passive .col-num { color: var(--ink-soft); }

/* Kilitli sistem satırı: bir eylem sunmuyor, tıklanabilir görünmemeli → hover bastırılır. */
tbody tr.is-locked td,
tbody tr.is-locked:hover td { background: var(--status-neutral-bg); }

/* ───────────────────────────────────────────────────────────────────────────────
   T4 · SATIR EYLEMLERİ
   ✔ `.row-actions { opacity:0 }` ve `tbody tr:hover .row-actions { opacity:1 }`
   yukarıdaki taban tanımdan SİLİNDİ (Adım 0 tamamlandı).
   Dokunmatikte ve klavyede erişilemeyen eylem, olmayan eylemdir.
   Metin eylem çifti kalıbı da yok; görünümler bunun yerine .form-actions'ı
   tablo hücresinde yanlış kullanıyor (Suppliers/Index:115).
   ─────────────────────────────────────────────────────────────────────────────── */
.row-actions { flex-wrap: wrap; align-items: center; }
.row-actions form { margin: 0; }

.row-actions--text a, .row-actions--text button {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.row-actions--text a:hover, .row-actions--text button:hover {
  color: var(--green-deep); text-decoration: underline; }
.row-actions--text .is-primary { color: var(--green-deep); font-weight: 500; }
.row-actions__sep { color: var(--border); user-select: none; }

.row-actions a:focus-visible, .row-actions button:focus-visible {
  outline: 2px solid var(--green-deep); outline-offset: 2px; }

/* ───────────────────────────────────────────────────────────────────────────────
   T5 · TABLO ÇERÇEVESİ, YOĞUNLUK, ÜST/ALT ŞERİT
   NEDEN (--wide): mevcut `.table-wrap table { min-width:640px }` 10 kolonlu mal
   kabul listesini KAYDIRMIYOR, 640px'e SIKIŞTIRIYOR — hücreler okunamıyor.
   NEDEN (toolbar/foot): kayıt sayısı şu an yalnız sayfanın en altındaki
   .pager__info'da; uzun listede kullanıcı toplamı görmek için sona kaydırıyor.
   🔴 Şerit .table-wrap'in İÇİNE konulamaz: .table-wrap `overflow-x:auto` olduğu için
   yatay kaydırmada şerit de tabloyla birlikte kayar. Bu yüzden KARDEŞ elemandır.
   ─────────────────────────────────────────────────────────────────────────────── */
.table-wrap--wide table { min-width: 1100px; }

/* Yoğun satır — YALNIZ operasyon listelerinde (mal kabul, üretim, sevkiyat).
   Referans listeleri (tedarikçi, ürün, reçete) varsayılan yoğunlukta kalır. */
.table--dense thead th  { padding: 10px 12px; }
.table--dense tbody td  { padding: 9px 12px; font-size: 13px; }
.table--dense .cell-stack { gap: 2px; }

.table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
                 padding: 14px 16px; background: var(--surface);
                 border: 1px solid var(--border); }
.table-toolbar__count { margin-left: auto; font-family: var(--font-mono); font-size: 11px;
                        text-transform: uppercase; letter-spacing: .05em;
                        color: var(--ink-soft); white-space: nowrap; }

.table-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
              padding: 12px 16px; background: var(--paper);
              border: 1px solid var(--border); border-top: 0; }

/* Şerit(ler) ile tablo TEK çerçeve gibi dursun: aradaki çizgi paylaşılır. */
.table-toolbar + .table-wrap { border-top: 0; }
.table-foot > .pager { margin: 0; padding: 0; border-top: 0; width: 100%; }

@media (max-width: 860px) {
  .table-toolbar { padding: 12px; }
  .table-toolbar__count { margin-left: 0; width: 100%; }
}

/* ───────────────────────────────────────────────────────────────────────────────
   T6 · ARAMA ALANI VE FİLTRE PANELİ
   NEDEN (.search-field): 8 liste ekranının tamamı aramayı ikonlu çiziyor; projede
   arama, diğer select'lerden ayırt edilemeyen çıplak bir .form-control.
   .topbar__search topbar'a özgüdür (min-width 300px, 860px altında display:none).
   NEDEN (--panel/--inline): süzgeç çubuğu cream zeminde çerçevesiz yüzüyor;
   kontrol alanı ile veri alanı görsel olarak ayrılmıyor. --inline etiketleri
   alanın SOLUNA alır: 5 süzgeç iki satıra taşmak yerine tek satıra sığar.
   ─────────────────────────────────────────────────────────────────────────────── */
.search-field { position: relative; flex: 1 1 260px; min-width: 220px; }
.search-field .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
                     font-size: 18px; color: var(--ink-soft); pointer-events: none; }
.search-field .form-control { padding-left: 36px; }
/* 🔴 `.filter-bar .form-control { width:auto }` kuralını ez, yoksa flex büyümez. */
.filter-bar .search-field .form-control { width: 100%; }

/* Çerçeveli panel — 3+ süzgeçli listelerde. Az filtreli referans listelerinde
   çıplak çubuk KALIR; panel her yerde kullanılırsa sayfa kutu yığınına döner. */
.filter-bar--panel { background: var(--surface); border: 1px solid var(--border);
                     padding: 16px; }
.filter-bar--panel + .table-wrap,
.filter-bar--panel + .table-toolbar { border-top: 0; }

/* Yatay etiket + kompakt yükseklik. .filter-bar--panel ile birlikte kullanılır.
   🔴 Depoda telefonla kullanılan ekranlarda (mal kabul) KULLANILMAZ:
   36px, .form-control--touch'ın 44px dokunma tabanının altındadır. */
.filter-bar--inline { align-items: center; gap: 12px 20px; }
.filter-bar--inline .filter-bar__field { flex-direction: row; align-items: center; gap: 8px; }
.filter-bar--inline .form-control,
.filter-bar--inline select { min-height: 36px; padding: 6px 10px; font-size: 14px; }

@media (max-width: 860px) {
  .filter-bar--panel { padding: 12px; }
  .filter-bar--inline { align-items: stretch; }
  .filter-bar--inline .filter-bar__field { flex-direction: column; align-items: stretch; gap: 6px; }
  .filter-bar--inline .filter-bar__actions { margin-left: 0; }
}

/* ───────────────────────────────────────────────────────────────────────────────
   T7 · SAYFALAYICI TAMAMLAMALARI
   NEDEN: 11 liste ekranının 11'i önceki/sonraki'yi chevron ikonuyla çiziyor;
   uzun listede kesilen sayfa penceresi için "..." göstergesi yok; ve sayfa boyutu
   _ListToolbar'da GİZLİ ALAN olarak taşınıyor ama kullanıcıya hiç gösterilmiyor
   (_ListToolbar.cshtml:88) — yani özellik var, arayüzü yok.
   ─────────────────────────────────────────────────────────────────────────────── */
.pager__link--icon { min-width: 34px; padding: 0; }
.pager__link--icon .ico { font-size: 18px; }

/* Kesilen sayfa penceresi göstergesi — düğme DEĞİL, tıklanamaz. */
.pager__gap { display: inline-flex; align-items: center; justify-content: center;
              min-width: 24px; height: 34px; font-family: var(--font-mono);
              font-size: 11px; color: var(--ink-soft); }

.pager__size { display: flex; align-items: center; gap: 8px; }
.pager__size select { width: auto; min-width: 0; padding: 6px 10px; font-size: 13px; }

/* ───────────────────────────────────────────────────────────────────────────────
   T8 · ÇERÇEVELİ İKON KARESİ VE İKON DÜĞMESİ
   NEDEN: gölgesiz/radiussuz bir sistemde ikonu "ağırlıklandırmanın" tek yolu
   dolu daire değil ince çerçeveli KARE'dir. Aynı şeklin iki kopyası bugün kendi
   bileşenlerine kilitli (.notif__icon 28px, .timeline-icon 32px) ve ikisinin de
   markup'ı hiçbir görünümde kullanılmıyor — üçüncü kopya yazmak yerine tek
   genel gövde çıkarılır. .icon-box DEKORATİF, .icon-btn ETKİLEŞİMLİ.
   ─────────────────────────────────────────────────────────────────────────────── */
.icon-box, .icon-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--ink-soft); }

.icon-box--sm { width: 28px; height: 28px; }
.icon-box--lg { width: 56px; height: 56px; }
.icon-box--lg .ico { font-size: 28px; }
.icon-box--danger  { border-color: var(--status-danger-fg);  color: var(--status-danger-fg); }
.icon-box--warning { border-color: var(--status-expired-fg); color: var(--status-expired-fg); }
.icon-box--good    { border-color: var(--green-deep);        color: var(--green-deep); }

.icon-btn { cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--green-lite); border-color: var(--green-deep);
                  color: var(--green-deep); }
.icon-btn:focus-visible { outline: 2px solid var(--green-deep); outline-offset: -1px; }
.icon-btn--danger:hover { background: var(--status-danger-bg);
                          border-color: var(--status-danger-fg);
                          color: var(--status-danger-fg); }
.icon-btn[disabled], .icon-btn.is-disabled { background: var(--paper); color: var(--ink-soft);
                                             pointer-events: none; }

/* ───────────────────────────────────────────────────────────────────────────────
   T9 · BOŞ DURUM İKONU
   NEDEN: boş durum bugün yalnız iki satır metin; kullanıcı "ekran yüklenmedi mi,
   filtre mi tuttu, gerçekten kayıt yok mu" ayrımını yapamıyor. Yeni kiracıda
   11 listenin 11'i boş açılır — onboarding'in en çok görülen ekranıdır. Ürünün
   en çok görülecek boş durumu SKT panosudur (İYİ haber: eşiği geçen parti yok);
   ikon olmadan bu iyi haber kötü haber gibi duruyor.
   🔴 Stitch her ikisini de `rounded-full` DAİRE içine koyuyor — alınmaz, radius sıfır.
   ─────────────────────────────────────────────────────────────────────────────── */
.empty-state__icon { width: 56px; height: 56px; margin: 0 auto 18px;
                     display: flex; align-items: center; justify-content: center;
                     border: 1px solid var(--border); background: var(--surface);
                     color: var(--ink-soft); }
.empty-state__icon .ico { font-size: 28px; }

/* Süzgeç sonucu boş kaldığında 56px fazla gelir; tablo yerine geçtiğinde daralır. */
.empty-state--compact { padding: 32px 24px; }
.empty-state--compact .empty-state__icon { width: 44px; height: 44px; margin-bottom: 12px; }
.empty-state--compact .empty-state__icon .ico { font-size: 22px; }

/* ───────────────────────────────────────────────────────────────────────────────
   T10 · VERİ ÇİPİ  (durum rozetinden AYRI bir iş)
   NEDEN: .badge DURUM taşır (dolu zemin: "Yürürlükte", "İhlal"); chip VERİ taşır
   (beyaz zemin, ince çerçeve: bir ürün adı, bir alerjen, bir tesis). Mevzuat ekranı
   "etkilenen 14 kayıt"ı tam tablo ile basıyor ve sayfa boğuluyor; çip listesi
   kapsamı bir bakışta verir, tablo detaya inmek isteyene kalır. Badge'i veri için
   kullanmak "Süt Ürünleri" ile "Yürürlükte"yi aynı görsel sınıfa koyar ve rozetin
   anlamını sulandırır.
   ─────────────────────────────────────────────────────────────────────────────── */
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); font-family: var(--font-mono); font-size: 12px;
        line-height: 1.2; color: var(--ink); }
.chip .ico { font-size: 14px; }
.chip--strong { border-color: var(--border-strong); }
/* Taşma çipi ("+9 diğer"): kesikli çerçeve = "burada daha var". */
.chip--muted { color: var(--ink-soft); border-style: dashed; }
a.chip { text-decoration: none; }
a.chip:hover { background: var(--green-lite); border-color: var(--green-deep); }

/* ───────────────────────────────────────────────────────────────────────────────
   T11 · SAYFA İÇİ BÖLÜM BAŞLIĞI  (ikinci en yüksek getirili desen)
   NEDEN: 9 GÖRÜNÜMDE 13 KEZ `<h2 style="font-size:20px; margin:28px 0 6px;">`
   satır içi stili var (Recalls/Details'te dört kez, ChainHealth'te iki kez).
   En yakın mevcut sınıf .form-section__head yalnız .form-section kutusunun İÇİNDE
   çalışır ve mono 11px etiket kullanır; .page-head ise sayfa başıdır, bölüm başı değil.
   Başlığın sağında kalan genişliği dolduran 1px çizgi Stitch 50'nin katkısı:
   editorial dilde bölümü KART kullanmadan ayırır.
   ─────────────────────────────────────────────────────────────────────────────── */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px;
                margin: 28px 0 14px; }
.section-head:first-child { margin-top: 0; }
.section-head__title { font-family: var(--font-display); font-weight: 700; font-size: 20px;
                       letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.section-head__rule  { flex: 1 1 60px; height: 1px; background: var(--border); }
.section-head__meta  { font-family: var(--font-mono); font-size: 11px;
                       text-transform: uppercase; letter-spacing: .06em;
                       color: var(--ink-soft); white-space: nowrap; }
.section-head__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Çizgi yerine kenardan kenara koyu alt kural (Stitch 37 kalıbı). */
.section-head--ruled { padding-bottom: 8px; border-bottom: 1px solid var(--border-strong); }
.section-head--ruled .section-head__rule { display: none; }
/* Alt çizgi yerine sol yeşil kılavuz (Stitch 30 kalıbı). */
.section-head--rail { padding-left: 12px; border-left: 3px solid var(--green-deep); }

@media (max-width: 860px) {
  .section-head__rule { display: none; }
  .section-head__actions { margin-left: 0; }
}

/* ───────────────────────────────────────────────────────────────────────────────
   T12 · SAYFA BAŞI EKLERİ
   NEDEN: .page-head her ekranda kullanılıyor ama alt çizgisi yok (yalnız
   margin-bottom:28px) — uzun detay sayfalarında başlık gövdeye karışıyor.
   Kicker etiketi (MAL KABUL, GERİ ÇAĞIRMA DOSYASI) düz gri metin;
   küp hâli sayfanın BELGE SINIFINI söyler. 🔴 .badge ile karıştırılmaz:
   .badge bir KAYDIN durumudur, küp sayfanın türüdür.
   ─────────────────────────────────────────────────────────────────────────────── */
.page-head--ruled { padding-bottom: 20px; border-bottom: 1px solid var(--border-strong); }
.label-mono--chip { display: inline-block; padding: 3px 8px; letter-spacing: .08em;
                    background: var(--green-lite); color: var(--green-deep); }
.label-mono--chip-dark { display: inline-block; padding: 3px 8px; letter-spacing: .08em;
                         background: var(--green-dark); color: var(--paper); }

/* ───────────────────────────────────────────────────────────────────────────────
   T13 · KART BAŞLIK ŞERİDİ
   NEDEN: .card'ın dolgusu sabit 24px olduğu için iç ayraç çizgisi kenardan kenara
   uzatılamıyor; grafik kutuları ve araç çubuklu tablolar başlık koymak için kendi
   satır içi stilini yazıyor (Home/Index.cshtml:107).
   ─────────────────────────────────────────────────────────────────────────────── */
.card--flush { padding: 0; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
              padding: 14px 20px; background: var(--paper);
              border-bottom: 1px solid var(--border); }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: 15px;
               color: var(--ink); }
.card__meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono);
              font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
              color: var(--ink-soft); }
.card__body { padding: 20px 24px; }
.card--flush > .table-wrap { border: 0; }   /* çift çerçeve olmasın */

@media (max-width: 860px) {
  .card__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .card__body { padding: 16px; }
}

/* ───────────────────────────────────────────────────────────────────────────────
   T14 · BİLGİ NOTU TONLARI VE BAŞLIKLI NOT
   NEDEN: .note tek varyant ve HER ZAMAN yeşil sol çizgi taşıyor; Recalls/Open.cshtml
   geri dönüşü olmayan bir işlemin uyarısını YEŞİL notta basıyor — sinyal yanlış.
   UYARI (amber) düzeyi hiç yok. İkon yuvası da yok: metin kutunun soluna dayanıyor.
   🔴 AYRI BİR `.alert` BİLEŞENİ YAZILMAZ: gövdesi .note ile %90 aynı olurdu ve
   projede İKİ farklı bilgi kutusu doğardı. Başlık/liste yuvası .note'a eklenir.
   .validation-summary-errors ADI KORUNUR (jQuery validation üretir), yalnız
   görsel olarak .note--danger ile aynı hizaya çekilir.
   ─────────────────────────────────────────────────────────────────────────────── */
.note--danger { background: var(--status-danger-bg); border-color: var(--status-danger-fg);
                border-left-color: var(--status-danger-fg); color: var(--status-danger-fg); }
.note--danger strong, .note--danger .note__title { color: var(--status-danger-fg); }

.note--warn { background: var(--status-expired-bg); border-color: var(--status-expired-fg);
              border-left-color: var(--status-expired-fg); color: var(--status-expired-fg); }
.note--warn strong, .note--warn .note__title { color: var(--status-expired-fg); }

/* Mevzuat dışı, yalnız bilgilendiren not: yeşil vurgu tüketilmez. */
.note--muted { border-left-color: var(--ink-soft); }

.note--icon { display: flex; align-items: flex-start; gap: 12px; }
.note--icon > .ico { flex: none; font-size: 18px; margin-top: 2px; }
.note--icon > div  { min-width: 0; }

/* Engel/uyarı bildirimi: ikonlu mono başlık + gövde + madde listesi. */
.note__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.note__head .ico { flex: none; }
.note__title { font-family: var(--font-mono); font-size: 11px; font-weight: 700;
               text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.note__list { margin: 10px 0 0; padding-left: 18px; }
.note__list li + li { margin-top: 4px; }

/* ───────────────────────────────────────────────────────────────────────────────
   T15 · SAYAÇ KARTI GENİŞLETMELERİ
   NEDEN: dört kart da aynı SİYAH rakamı basıyor — SKT panosunda "Süresi geçmiş 3"
   ile "Uyarı 14" ayırt edilemiyor ve göz en büyük sayıya (yanlış olana) gidiyor.
   Ayrıca .stat__value sayıları --font-display (Archivo) ile basıyor; CLAUDE.md B4
   sayı/etiket/kod için IBM Plex Mono diyor → ölçülmüş büyüklüklerde --mono kullanılır.
   🔴 Renk TEK taşıyıcı DEĞİL: .stat__label metni ve kartın rozeti anlamı zaten yazıyor.
   🔴 Ton adları --danger/--warn/--good; --up/--down DEĞİL (bkz. T16 gerekçesi).
   ─────────────────────────────────────────────────────────────────────────────── */
.stat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stat__head .stat__label { flex: 1 1 auto; min-width: 0; }
.stat__icon          { flex: none; color: var(--ink-soft); }
.stat__icon--danger  { color: var(--status-danger-fg); }
.stat__icon--warn    { color: var(--status-expired-fg); }
.stat__icon--good    { color: var(--green-deep); }

.stat__value--mono    { font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; }
.stat__value--danger  { color: var(--status-danger-fg); }
.stat__value--warn    { color: var(--status-expired-fg); }
.stat__value--good    { color: var(--green-deep); }

/* Sayıdan AYRI, sönük küçültülmüş birim (42 sn · 99,8 % · 246,4 KG · TL).
   Birim ayrı span olunca sayı kolonu .col-num ile hizalanabilir hâle gelir. */
.stat__unit { margin-left: 6px; font-family: var(--font-mono); font-size: 12px;
              font-weight: 400; text-transform: uppercase; letter-spacing: .06em;
              color: var(--ink-soft); }
.stat__foot { margin-top: 12px; }

/* Kova payı — yüzde sunucudan satır içi width ile verilir (VERİ, stil değil). */
.stat__meter { height: 4px; margin-top: 14px; background: var(--status-neutral-bg); }
.stat__meter > span { display: block; height: 100%; background: var(--green-deep); }
.stat__meter--danger > span { background: var(--status-danger-fg); }
.stat__meter--warn   > span { background: var(--status-expired-fg); }

/* Sol 3px şeritle ton — hangi kart dikkat istiyor. */
.stat--accent        { border-left: 3px solid var(--green-deep); }
.stat--accent-danger { border-left: 3px solid var(--status-danger-fg); }
.stat--accent-warn   { border-left: 3px solid var(--status-expired-fg); }

/* Koyu zeminli kart: bugün .chain-score__value içinde ÖZEL olarak bir kez yazılmış
   ve yalnız Zincir Sağlığı ekranında kullanılabiliyor; burada genelleşir
   (Tasarruf Defteri kümülatif kartı, Mevzuat kalan gün sayacı). */
.stat--invert { background: var(--green-dark); border-color: var(--green-dark); color: var(--paper); }
.stat--invert .stat__value { color: var(--paper); }
.stat--invert .stat__label,
.stat--invert .stat__meta,
.stat--invert .stat__unit,
.stat--invert .label-mono { color: var(--green-lite); }

/* ───────────────────────────────────────────────────────────────────────────────
   T16 · BİTİŞİK SAYAÇ IZGARASI  (formül/dağılım şeridi)
   NEDEN: bir DENKLEMİN terimleri (GİRDİ / ÇIKTI / FİRE / DENGE) dört bağımsız KPI
   gibi 16px boşlukla basılmamalıdır — bunlar dört kart değil bir hesaptır. Aynısı
   SKT panosundaki dört kova için de geçerli: tek bir dağılımın parçalarıdır.
   🔴 Stitch'in yöntemi (gap:0 + her karta border-left) auto-fit SATIR KAYDIĞINDA
   bozulur (ikinci satırın ilk kartı sol çizgisini taşımaya devam eder). Aşağıdaki
   gap:1px + konteyner zemini yöntemi kaç sütuna sararsa sarsın doğru çalışır.
   🔴 Ayrı bir `.metric-strip` BİLEŞENİ YAZILMAZ: gövdesi .stat-grid + .stat ile
   aynı olurdu; farkı yalnız mono değer, ayrı birim ve vurgulu sonuç hücresidir —
   üçü de T15'te .stat üzerinde tanımlandı.
   ─────────────────────────────────────────────────────────────────────────────── */
.stat-grid--joined { gap: 1px; background: var(--border);
                     border: 1px solid var(--border); border-radius: var(--radius); }
.stat-grid--joined > .stat { border: 0; }
/* Sonuç/denge hücresi vurgulanır (kütle dengesi kapanışı). */
.stat-grid--joined > .stat--result { background: var(--green-lite); }
.stat--result .stat__label, .stat--result .stat__value { color: var(--green-deep); }
/* Künye hücresi (referans gün, sonraki vade) sayaçlardan cream zeminle ayrılır. */
.stat-grid--joined > .stat--meta { background: var(--paper); }

/* ───────────────────────────────────────────────────────────────────────────────
   T17 · EĞİLİM GÖSTERGESİ
   NEDEN: Zincir Sağlığı'nın "skor iki hafta düşerse uyar" erken uyarısının
   (CLAUDE.md B6) sayısal yüzü bu göstergedir ve projede HİÇ yok — sparkline
   eğilimi çizer ama deltayı basmaz. .qty-in/.qty-out miktar YÖNÜ içindir
   (giriş/çıkış), zaman içindeki DEĞİŞİM için bir sınıf yok.
   🔴 Ton adları kasıtlı olarak YÖN değil ANLAM taşır (--good/--bad, --up/--down
   değil): Stitch 49'da fire %4,2 DÜŞMÜŞ ama kırmızıya boyanmış — fire düşmesi iyi
   haberdir. Yönü İKON taşır, iyi/kötüyü RENK taşır.
   ─────────────────────────────────────────────────────────────────────────────── */
.trend { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
         font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.trend .ico { font-size: 16px; }
.trend--good { color: var(--green-deep); }
.trend--bad  { color: var(--status-danger-fg); }
.trend--flat { color: var(--ink-soft); }
.trend__note { font-family: var(--font-body); font-size: 12px; font-weight: 400;
               letter-spacing: 0; text-transform: none; color: var(--ink-soft); }

/* ───────────────────────────────────────────────────────────────────────────────
   T18 · ASİMETRİK DETAY YERLEŞİMİ
   NEDEN: projede iki sütunlu sayfa yerleşimi primitifi YOK, her şey tam genişlikte
   üst üste diziliyor. Recalls/Details.cshtml 525 satır: dört ödev formu + üç tablo
   dikey olarak birbirini kovalıyor; kullanıcı gerekçe yazarken etkilenen müşteri
   listesini göremiyor. min-width:0 iç tabloların ızgarayı taşırmasını da önler.
   🔴 Ayrı bir `.form-split` YAZILMAZ — aynı yerleşimin ikinci adı olurdu.
   ─────────────────────────────────────────────────────────────────────────────── */
.detail-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
                gap: 24px; align-items: start; margin-bottom: 28px; }
.detail-split--even        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-split--aside-first { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.detail-split--narrow-aside{ grid-template-columns: minmax(0, 1fr) 380px; }
.detail-split__col { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.detail-split__col > *:last-child { margin-bottom: 0; }
/* Karar formu kaydırmada görünür kalır. */
.detail-split__col--sticky { position: sticky; top: 24px; }

@media (max-width: 1100px) {
  .detail-split, .detail-split--even,
  .detail-split--aside-first, .detail-split--narrow-aside { grid-template-columns: 1fr; }
  .detail-split__col--sticky { position: static; }
}

/* ───────────────────────────────────────────────────────────────────────────────
   T19 · SIRALI ÖDEV KARTLARI  (geri çağırma dört ödevi — 5996 s.K. m.22)
   NEDEN: CLAUDE.md'ye göre ürünün farklılaştırıcısı tam olarak bu kayıttır.
   Recalls/Details bugün dört ödevi .stat-grid + .stat + içine .badge ile basıyor:
   (a) sıra numarası etiketin içine gömülmüş, (b) BEKLEYEN ödev ile TAMAMLANAN ödev
   kart düzeyinde aynı görünüyor — yalnız rozetin rengi değişiyor, (c) 4. ödevin
   KOŞULA BAĞLI olduğu (tedbirler yetersiz kalırsa) görsel olarak anlatılamıyor.
   ─────────────────────────────────────────────────────────────────────────────── */
.duty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
             gap: 16px; margin-bottom: 24px; }
.duty { position: relative; background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); padding: 20px 22px; }
.duty__ordinal { position: absolute; top: 14px; right: 16px; font-family: var(--font-mono);
                 font-size: 22px; font-weight: 500; color: var(--border); }
.duty__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
               letter-spacing: .06em; color: var(--ink-soft); }
.duty__title { font-family: var(--font-display); font-weight: 700; font-size: 17px;
               line-height: 1.25; margin: 8px 36px 14px 0; color: var(--ink); }
.duty__state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
               font-weight: 500; color: var(--green-deep); }
.duty--pending { background: var(--status-danger-bg); border-color: var(--status-danger-fg); }
.duty--pending .duty__label,
.duty--pending .duty__state,
.duty--pending .duty__ordinal { color: var(--status-danger-fg); }
.duty--waiting .duty__state { color: var(--status-expired-fg); }
.duty--locked { background: var(--paper); }
.duty--locked .duty__title, .duty--locked .duty__state { color: var(--ink-soft); }

/* ───────────────────────────────────────────────────────────────────────────────
   T20 · KAYIT KÜNYESİ ŞERİDİ
   NEDEN: "kim oluşturdu, ne zaman, son güncelleyen kim" denetimde ilk sorulan
   şeylerden biri ve hiçbir detay ekranında gösterilmiyor (CreatedByUserId /
   RecordedAt entity'lerde VAR, ekranda yok). Süs değil, eksik bir DENETİM
   BİLGİSİNİN yerleştirileceği kap. Mevcut .def-* dili yeniden kullanılır;
   yeni bir __pair/__label/__value ailesi yazılmaz.
   🔴 Künyede "DENETÇİ" alanı YAZILMAZ: "Denetci" rolü yoktur (CLAUDE.md B6).
   Alan adı KAYDEDEN'dir ve değeri uygulamanın kullanıcısıdır.
   ─────────────────────────────────────────────────────────────────────────────── */
.record-foot { display: flex; flex-wrap: wrap; gap: 20px 40px;
               margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border); }
.record-foot .def-item  { min-width: 0; }
.record-foot .def-label { font-size: 10px; }
.record-foot .def-value { font-family: var(--font-mono); font-size: 12px;
                          color: var(--ink-soft); margin-top: 4px; }
.record-foot__aside { margin-left: auto; text-align: right; }

@media (max-width: 860px) {
  .record-foot__aside { margin-left: 0; text-align: left; }
}

/* ───────────────────────────────────────────────────────────────────────────────
   T21 · ZİNCİR AĞACI DERİNLİK RAYI
   NEDEN: girinti sunucudan geliyor ama görsel bir ray veya bağlayıcı yok ve kök
   düğüm vurgulanmıyor — satırlar düz bir liste gibi duruyor. Denetçi karşısında
   "bu partinin hammaddesi" sorusunun cevabı İLK bakışta okunmalı.
   Sunucu tarafında satıra `style="--depth:2"` yazmak yeterlidir (VERİ, stil değil).
   ─────────────────────────────────────────────────────────────────────────────── */
.trace-tree__row { position: relative; }
.trace-tree__row--child { padding-left: calc(16px + var(--depth, 1) * 22px); }
.trace-tree__row--child::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  left: calc(8px + (var(--depth, 1) - 1) * 22px); background: var(--border); }
.trace-tree__arrow { flex: none; color: var(--green-deep); font-size: 18px; }
.trace-tree__row--root { background: var(--green-lite); }
.trace-tree__row--root .trace-tree__lot { color: var(--green-dark); font-weight: 700; }

@media (max-width: 860px) {
  .trace-tree__row--child { padding-left: calc(12px + var(--depth, 1) * 12px); }
}

/* ───────────────────────────────────────────────────────────────────────────────
   T22 · EK DOSYA LİSTESİ
   NEDEN: 1-5 dosyada 4 kolonlu tablo fazla ağır; ek türüne göre ikon tanıyıcılığı
   artırır. Lots/_LotAttachments.cshtml şu an .table-wrap + <table> kullanıyor.
   🔴 UYARI: Stitch'in sağdaki "Aç" düğmesi ALINMAZ — _LotAttachments.cshtml'deki
   yorum, kiracı doğrulaması + beyaz liste + path traversal koruması olan dosya
   sunma uç noktasının henüz yazılmadığını ve bağlantının KASITLI basılmadığını
   söylüyor. __actions yuvası BOŞ bırakılır, uç nokta yazılınca doldurulur.
   ─────────────────────────────────────────────────────────────────────────────── */
.file-list { background: var(--surface); border: 1px solid var(--border);
             border-radius: var(--radius); }
.file-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px;
            border-bottom: 1px solid var(--border); }
.file-row:last-child { border-bottom: 0; }
.file-row:hover { background: var(--green-lite); }
.file-row__icon { flex: none; width: 36px; height: 36px; display: flex;
                  align-items: center; justify-content: center; background: var(--paper);
                  border: 1px solid var(--border); color: var(--ink-soft); }
.file-row__body { flex: 1 1 auto; min-width: 0; }
.file-row__name { font-size: 14px; font-weight: 500; color: var(--ink); word-break: break-word; }
.file-row__meta { margin-top: 4px; font-family: var(--font-mono); font-size: 11px;
                  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.file-row__actions { flex: none; display: flex; align-items: center; gap: 8px; }

@media (max-width: 860px) { .file-row { flex-wrap: wrap; } }

/* ───────────────────────────────────────────────────────────────────────────────
   T23 · DOĞRULAMA KODU VE QR BLOĞU
   NEDEN: TraceabilityReview.VerificationCode alanı GERÇEKTEN var ve "İzlenebilirlik
   Yeterlilik Raporu"nun "müşteri denetiminde sunulabilir, QR doğrulama kodlu belge"
   vaadinin (CLAUDE.md B6) ekran karşılığıdır. Bugün kod
   TraceabilityReviews/Details.cshtml:113'te `<div class="def-value num">` ile 14px
   basılıyor — okunması güç, ekranda QR HİÇ yok: müşteri kodu telefonuyla okutamıyor,
   denetçiye yüksek sesle okuyamıyor. QR görüntüsünü ZXing sunucuda üretir;
   CSS'in işi yalnız çerçevelemektir.
   ─────────────────────────────────────────────────────────────────────────────── */
.verify-code { display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
               background: var(--surface); border: 1px solid var(--border-strong);
               border-radius: var(--radius); padding: 22px 24px; margin-bottom: 24px; }
.verify-code__body  { flex: 1 1 240px; min-width: 0; }
.verify-code__value { font-family: var(--font-mono); font-weight: 500; font-size: 26px;
                      letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
                      margin-top: 8px; word-break: break-all; }
.verify-code__url   { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
                      color: var(--ink-soft); margin-top: 10px; word-break: break-all; }

/* Satır içi küçük hâl (Labels/Check gibi kodun yan bilgi olduğu yerler). */
.verify-code--inline { display: inline-flex; gap: 10px; padding: 8px 12px; margin: 0;
                       background: var(--status-neutral-bg); border-color: var(--border);
                       font-family: var(--font-mono); font-size: 12px; font-weight: 500;
                       letter-spacing: .14em; text-transform: uppercase; }
.verify-code--inline .ico { flex: none; color: var(--green-deep); }

.qr-frame { flex: none; width: 132px; height: 132px; padding: 8px;
            background: var(--surface); border: 1px solid var(--border); }
.qr-frame img, .qr-frame svg { display: block; width: 100%; height: 100%; }
.qr-frame--lg { width: 180px; height: 180px; }

/* Kod GİRİŞ alanı: elle yazan kabul birimi için mono + harf aralığı + 44px dokunma. */
.form-control--code { font-family: var(--font-mono); font-size: 16px; letter-spacing: .12em;
                      text-transform: uppercase; min-height: 44px; }

@media (max-width: 640px) {
  .verify-code { gap: 16px; }
  .qr-frame { width: 108px; height: 108px; }
}

/* ───────────────────────────────────────────────────────────────────────────────
   T24 · SPARKLINE ALAN DOLGUSU VE EŞİK ÇİZGİSİ · SEKME TAMAMLAMALARI
   NEDEN: dolgu, çizgiyi 120px'lik alanda gözle takip etmeyi kolaylaştırır; kesikli
   eşik çizgisi "skor iki hafta düşerse uyar" mantığını görünür kılar.
   🔴 GRADIENT DEĞİL, tek düz token rengi. Stitch'in fill-opacity="0.5" alfası
   alınmaz — var(--green-lite) tam opak yeterlidir, çizgi üstünde kalır.
   Sekmeler: .tabs esnek bir satır ve TAŞMA YÖNETİMİ YOK — 5-6 sekme 375px'te kırılır.
   ─────────────────────────────────────────────────────────────────────────────── */
.sparkline__area   { fill: var(--green-lite); stroke: none; }
.sparkline__target { fill: none; stroke: var(--border-strong); stroke-width: 1;
                     stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sparkline__legend .label-mono { white-space: nowrap; }

.tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs .tab { white-space: nowrap; }
.tabs--section { border-bottom-color: var(--border-strong); margin-bottom: 20px; }
.tab__count { margin-left: 6px; font-family: var(--font-mono); font-size: 11px;
              letter-spacing: .04em; color: var(--ink-soft); }
.tab.active .tab__count { color: var(--green-deep); }

/* ───────────────────────────────────────────────────────────────────────────────
   T25 · ZAMAN ÇİZELGESİ TAMAMLAMALARI
   NEDEN: .timeline ailesi CRM'den devralınmış ve LotDefteri görünümlerinde SIFIR
   kullanımda; geri çağırma bildirim geçmişi, stok defteri ve parti geçmişi için
   doğru gösterimdir ama sağa hizalı zaman damgası ve hâl tonları eksik.
   ─────────────────────────────────────────────────────────────────────────────── */
.timeline__time { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
                  letter-spacing: .06em; color: var(--ink-soft); white-space: nowrap; }
.timeline-item--now .timeline-icon { border-color: var(--green-deep); background: var(--green-lite); }
.timeline-item--alert .timeline-icon { border-color: var(--status-danger-fg);
                                       color: var(--status-danger-fg); }
.timeline-item--muted .timeline-icon { color: var(--ink-soft); }

@media (max-width: 860px) {
  .timeline-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ───────────────────────────────────────────────────────────────────────────────
   T26 · FORM YERLEŞİMİ: GENİŞ · 3 SÜTUN · TAM GENİŞLİK SATIR
   NEDEN: .form-narrow (760px) ONBİR form görünümünün TAMAMINA uygulanmış ve
   GoodsReceipts/Create'in 8 sütunlu .receipt-line ızgarasını 760px'e sıkıştırıyor
   (alan başına ~80px). 3 sütun yok; ızgara içinde tam genişlik satır yok, bu yüzden
   görünümler üst üste üç ayrı .form-grid-2 açıyor ve aradaki tam genişlik alanlar
   (adres, not, onay kutusu) ızgaranın DIŞINA düşüyor. align-items da yok: farklı
   uzunluktaki .form-hint'ler komşu alanları dikeyde kaydırıyor.
   Kimlik formları .form-narrow'da KALIR — tek sütunluk formu 1180px'e yaymak
   okuma satırını bozar.
   ─────────────────────────────────────────────────────────────────────────────── */
.form-wide { max-width: 1180px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.form-row--span-all { grid-column: 1 / -1; }
.form-grid-2, .form-grid-3 { align-items: start; }

/* JS'siz odak yönlendirmesi. 🔴 Stitch bunu JS ile ve HEX SABİTİYLE yapıyor
   ('#133b0f' — bu renk palette bile yok); token ile ve JS'siz yapılır. */
.form-row:focus-within .form-label { color: var(--green-deep); }

@media (max-width: 860px) { .form-grid-3 { grid-template-columns: 1fr; } }

/* ───────────────────────────────────────────────────────────────────────────────
   T27 · ZORUNLU ALAN İŞARETİ
   NEDEN: tüm .cshtml ve theme.css tarandı — projede zorunlu alan işareti HİÇ YOK.
   Zorunluluk yalnız POST sonrası kırmızı hata olarak görünüyor; kullanıcı formu
   bir kez boşa gönderiyor. Yoğun kalem satırında etiket dar olduğu için yıldız
   kayboluyor → sol kenar çizgisi okunur kalan ikinci sinyaldir.
   ⚠️ Yıldız GÖRSEL sinyaldir; erişilebilirlik karşılığı `required`/`aria-required`
   özniteliğidir ve tag helper bunu [Required] doğrulamasından zaten üretir.
   ─────────────────────────────────────────────────────────────────────────────── */
.form-label--req::after { content: " *"; font-family: var(--font-mono);
                          color: var(--status-danger-fg); }
.form-control--req { border-left: 3px solid var(--green-deep); }
.form-control--req.input-validation-error { border-left-color: var(--status-danger-fg); }

/* ───────────────────────────────────────────────────────────────────────────────
   T28 · FORM BÖLÜMÜ OMURGASI
   NEDEN: Products/Form 8 bölüm, Customers 4, Recipes/Users/Facility 3 — numarasız
   hepsi aynı ağırlıkta görünüyor, kullanıcı nerede olduğunu bilmiyor. Sağ üstveri
   yuvası da yok. 🔴 Stitch'in "01 //" ve "01 /" süslemeleri ALINMAZ (tipografik gürültü).
   ─────────────────────────────────────────────────────────────────────────────── */
.form-section__head--row { display: flex; align-items: baseline;
                           justify-content: space-between; gap: 16px; }
.form-section__no { display: inline-block; margin-right: 10px; padding: 2px 7px;
                    background: var(--green-dark); color: var(--paper);
                    font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.form-section__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
                      text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }

/* Bölüm düzeyinde hata işareti: 8 bölümlü formda 6. bölümdeki bir alan hatası
   sayfanın tepesinden görünmüyor, kullanıcı hatayı arıyor.
   🔴 Bu desen STITCH'TEN GELMİYOR — Stitch form ekranlarında doğrulama durumu HİÇ
   yok; mevcut mimarinin boşluğudur. */
.form-section--invalid { border-color: var(--status-danger-fg); }
.form-section--invalid .form-section__head { border-bottom-color: var(--status-danger-fg); }
.form-section__errors { margin-top: 8px; font-family: var(--font-mono); font-size: 11px;
                        letter-spacing: .05em; text-transform: uppercase;
                        color: var(--status-danger-fg); }

/* Alan hatası yalnız renkle taşınmaz; boş span'de tetiklenmesin diye :not(:empty). */
.field-validation-error:not(:empty) { display: flex; align-items: baseline; gap: 6px; }
.field-validation-error:not(:empty)::before { content: "!"; font-weight: 700; }
.validation-summary-errors a { color: var(--status-danger-fg); text-decoration: underline; }

/* ───────────────────────────────────────────────────────────────────────────────
   T29 · ALANA YAPIŞIK BİRİM VE YANDAŞ DÜĞME
   NEDEN: .form-control `width:100%` olduğu için yanına hiçbir şey konamıyor;
   GoodsReceipts/Create'te barkod okutma düğmesi yok, ProductionBatches/Create'te
   miktarın birimi belirsiz. .upload-row var ama o dosya yükleme satırıdır.
   ─────────────────────────────────────────────────────────────────────────────── */
.input-group { display: flex; align-items: stretch; }
.input-group .form-control { flex: 1 1 auto; min-width: 0; }
.input-group__unit, .input-group__btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; padding: 0 12px;
  border: 1px solid var(--border); border-left: 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase; }
.input-group__unit { background: var(--status-neutral-bg); color: var(--ink-soft); }
.input-group__btn  { background: var(--surface); color: var(--ink); cursor: pointer; }
.input-group__btn:hover { background: var(--green-lite); }
/* ⚠️ .form-control:focus halkası (mevcut 3px rgba) komşu tarafından kırpılır. */
.input-group .form-control:focus { position: relative; z-index: 1; }

/* ───────────────────────────────────────────────────────────────────────────────
   T30 · AÇIKLAMALI ONAY KUTUSU VE SEÇİLEBİLİR KART
   NEDEN (.check-block): Suppliers/Form'da "Aktif" onay kutusundan sonra gelen
   .form-hint KARDEŞ elementtir ve bölümün genel ipucu gibi okunur — hangi alana
   ait olduğu belirsiz. .checkbox-row tek satır, açıklama yuvası ve çerçeve yok.
   NEDEN (.choice-card): Users/Form dört rolü açıklamasız düz .checkbox-row satırı
   olarak basıyor; her rolün ne yaptığı yazılmıyor ve "son yönetici kilitli" durumu
   yalnız disabled özniteliğinden anlaşılıyor.
   🔴 Ayrı bir `.choice-row/.choice/.choice__box` ailesi YAZILMAZ: segment görünümü
   `.choice-card--segment` ile aynı gövdeden alınır.
   ⚠️ :has() desteklenmezse kart seçilmemiş görünür — İŞLEV kaybı yok, yalnız vurgu.
   ─────────────────────────────────────────────────────────────────────────────── */
.check-block { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
               background: var(--paper); border: 1px solid var(--border); }
.check-block--accent { background: var(--green-lite); border-color: var(--green-deep); }
.check-block input[type="checkbox"] { flex: none; width: 16px; height: 16px;
                                      margin: 2px 0 0; accent-color: var(--green-deep); }
.check-block__body  { min-width: 0; }
.check-block__label { display: block; font-family: var(--font-body); font-weight: 500;
                      font-size: 14px; margin: 0; }
.check-block .form-hint { margin-top: 6px; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
               gap: 12px; }
.choice-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
               background: var(--surface); border: 1px solid var(--border); cursor: pointer; }
.choice-card:hover { background: var(--green-lite); }
.choice-card:has(input:checked)  { border-color: var(--green-deep); background: var(--green-lite); }
.choice-card:has(input:disabled) { background: var(--status-neutral-bg); cursor: not-allowed; }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.choice-card input { flex: none; width: 16px; height: 16px; margin: 2px 0 0;
                     accent-color: var(--green-deep); }
.choice-card__title { display: block; font-family: var(--font-body); font-weight: 600;
                      font-size: 14px; }
.choice-card__desc { display: block; margin-top: 5px; font-family: var(--font-mono);
                     font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
                     color: var(--ink-soft); }
.choice-card__lock { margin-left: auto; color: var(--ink-soft); }

/* Segment hâli: 3-4 seçenekli tekil seçim (tatbikat sonucu). Kutucuk ortalanır,
   radyo görsel olarak kaldırılır ama DOM'da ve klavyede kalır. */
.choice-card--segment { justify-content: center; text-align: center; }
.choice-card--segment input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-card--segment:has(input:checked) .choice-card__title { color: var(--green-deep); }
.choice-card--segment.choice-card--warn:has(input:checked) {
  background: var(--status-expired-bg); border-color: var(--status-expired-fg); }
.choice-card--segment.choice-card--warn:has(input:checked) .choice-card__title {
  color: var(--status-expired-fg); }
.choice-card--segment.choice-card--danger:has(input:checked) {
  background: var(--status-danger-bg); border-color: var(--status-danger-fg); }
.choice-card--segment.choice-card--danger:has(input:checked) .choice-card__title {
  color: var(--status-danger-fg); }

/* ───────────────────────────────────────────────────────────────────────────────
   T31 · KALEM TABLOSU: KOLON BAŞLIĞI, EKLE AYAĞI, BOŞ DURUM
   NEDEN (.line-head): her satır kendi etiket setini TEKRAR ediyor — 6 alerjen satırı
   = "GRUP (EK-1)" 6 kez, "SPESİFİK KAYNAK" 6 kez. Products/Form, Recipes/Form,
   GoodsReceipts/Create, ProductionBatches/Complete: dördü de .label-mono'yu her
   satırda basıyor.
   NEDEN (__foot): ekle düğmesi bugün `<div class="form-actions" style="margin-top:16px">`
   içinde YÜZÜYOR — satır içi stil var, tabloyla görsel bağı yok (Products/Form'da
   üç kez tekrar ediyor). Satır sayacı ve sıfır satır durumu da yok.
   ⚠️ Kolon değerleri .line-row modifier'larıyla BİLİNÇLİ olarak tekrarlanır: çalışan
   dört görünümü kırmamak için mevcut .line-row kuralları HİÇ değiştirilmez.
   Modifier eklerken ikisini birlikte güncelle.
   ─────────────────────────────────────────────────────────────────────────────── */
.line-head { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1fr auto; gap: 12px;
             padding: 10px 0; border-bottom: 1px solid var(--border-strong); }
.line-head--wide    { grid-template-columns: 1.6fr 1fr .8fr .8fr .6fr auto; }
.line-head--trio    { grid-template-columns: 1fr 2.4fr auto; }
.line-head--receipt { grid-template-columns: 1.6fr .8fr 1.1fr .7fr .7fr .9fr 1fr auto; }
.line-head > span { font-family: var(--font-mono); font-size: 11px;
                    text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }

/* Başlık varsa satır içi etiket masaüstünde gizlenir; ekran okuyucudan SİLİNMEZ. */
.line-table--headed .line-row .label-mono {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.line-table__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
                    padding: 14px 0 0; }
.line-table__count { margin-left: auto; }
.line-table__empty { padding: 20px 0; border-bottom: 1px solid var(--border);
                     font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
                     text-transform: uppercase; color: var(--ink-soft); }

@media (max-width: 1100px) {
  .line-head--receipt { grid-template-columns: 1fr 1fr 1fr auto; }
}
@media (max-width: 860px) {
  .line-head, .line-head--wide, .line-head--trio, .line-head--receipt { display: none; }
  .line-table--headed .line-row .label-mono {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* ───────────────────────────────────────────────────────────────────────────────
   T32 · FORM AYAĞI: YAPIŞKAN · BÖLÜNMÜŞ
   NEDEN (--sticky): Products/Form.cshtml 838 satır ve 8 bölüm; kaydet düğmesi formun
   en dibinde. ProductionBatches/Complete.cshtml 766 satır: kullanıcı kütle dengesini
   üstte görüp aşağı kaydırıyor, tamamla düğmesine varınca denge yüzdesi ekrandan
   çıkmış oluyor → __context o sayıyı düğmenin yanında tutar.
   🔴 Stitch'in `position:fixed; left:280px` çözümü ALINMAZ: kenar çubuğu genişliğini
   (.sidebar flex 248px) CSS'te İKİNCİ bir yere yazar ve 860px altında (kenar çubuğu
   ekran dışına kaydığında) çubuk kayar. sticky, formun akışı içinde kaldığı için
   hiçbir yerleşimle bağ kurmaz.
   ⚠️ Çubuk ile .content arasında overflow:hidden/auto taşıyan ata OLMAMALIDIR.
   NEDEN (--split): Suppliers/Form silme formunu ayrı bir <form> olarak
   `style="margin-top:24px"` ile aşağıya koyuyor; Customers, Products ve FacilityForm
   aynı kalıbı tekrar ediyor.
   🔴 İki <form> İÇ İÇE GEÇEMEZ: bölünmüş ayak, kaydet formunu ve silme formunu yan
   yana tutan bir SARMALAYICI div'dir — .form-actions'ın kendisi değildir.
   ─────────────────────────────────────────────────────────────────────────────── */
.form-actions--sticky { position: sticky; bottom: 0; z-index: 20;
                        flex-wrap: wrap; margin-top: 24px; padding: 16px 0;
                        background: var(--paper);
                        border-top: 1px solid var(--border-strong); }
.form-actions--sticky .form-hint { margin-top: 0; }
.form-actions__context { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-right: auto; }

.form-actions--split { display: flex; flex-wrap: wrap; align-items: flex-start;
                       justify-content: space-between; gap: 24px; }
.form-actions__danger { display: flex; flex-direction: column; align-items: flex-end;
                        gap: 8px; margin-left: auto; }
.form-actions__danger form { margin: 0; }
.form-actions__danger .form-hint { margin: 0; max-width: 46ch; text-align: right; }

@media (max-width: 860px) {
  .form-actions--split { flex-direction: column; }
  .form-actions__danger { align-items: flex-start; margin-left: 0; }
  .form-actions__danger .form-hint { text-align: left; }
}

/* ───────────────────────────────────────────────────────────────────────────────
   T33 · KABUKSUZ KAMUYA AÇIK BELGE SAYFALARI  (Belge Doğrulama · KVKK · Giriş)
   NEDEN: Belge Doğrulama, ürünün DIŞ DÜNYAYA AÇIK tek ekranıdır — zincir marketin
   kabul birimi ve BRC/IFS denetçisi ürünü İLK burada görür. 30+ satırlık .doc-*
   bloğu bugün ReviewVerification/Index.cshtml içinde inline <style> olarak duruyor
   ve Home/Kvkk.cshtml'de İKİNCİ KEZ yazılmış.
   🔴 GERÇEK HATA DÜZELTMESİ: o bloklar `var(--font-head)` kullanıyor, theme.css ise
   `--font-display` tanımlıyor. Değişken TANIMSIZ olduğu için font-family hiç
   uygulanmıyor ve TÜM başlıklar sessizce IBM Plex Sans'a düşüyor — Archivo hiç
   görünmüyor. 8 bildirim: ReviewVerification/Index:34,43 · Kvkk:25,28,30,31 ·
   Login:21,24.
   ⚠️ Taşıma sırasında inline bloğun YARISI SİLİNİR, çünkü mevcut sınıfların
   kopyasıdır: .doc-table/.doc-table-wrap → global table + .table-wrap ·
   .doc-note → .note · .doc-form → .card veya .form-section · .doc-num → .num ·
   .doc-input → .form-control.form-control--code. Bir ad-hoc renk kaçağı da var:
   rgba(250,249,246,.72) → var(--green-lite).
   ─────────────────────────────────────────────────────────────────────────────── */
.doc-page { background: var(--paper); min-height: 100vh; }
.doc-top { background: var(--green-dark); color: var(--paper); padding: 28px 32px; }
.doc-top-inner { max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap;
                 align-items: center; justify-content: space-between; gap: 24px; }
.doc-wordmark { font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em;
                text-transform: uppercase; }
.doc-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
              text-transform: uppercase; color: var(--green-lite); }
.doc-body { max-width: 760px; margin: 0 auto; padding: 40px 32px 72px; }

/* 🔴 --font-display: --font-head TANIMSIZDI, başlık gövde fontuna düşüyordu. */
.doc-title { font-family: var(--font-display); font-weight: 700; font-size: 30px;
             line-height: 1.25; margin: 0 0 6px; color: var(--ink); }
.doc-sub { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 32px; }
.doc-h  { font-family: var(--font-display); font-weight: 700; font-size: 20px;
          margin: 40px 0 12px; padding-bottom: 8px;
          border-bottom: 1px solid var(--border-strong); color: var(--ink); }
.doc-h3 { font-family: var(--font-display); font-weight: 600; font-size: 15px;
          margin: 26px 0 10px; color: var(--ink); }

.doc-state { border: 1px solid var(--border-strong); border-radius: var(--radius);
             padding: 20px 22px; margin-bottom: 28px; }
.doc-state__head { display: flex; align-items: center; gap: 12px; }
.doc-state h2 { font-family: var(--font-display); font-weight: 700; font-size: 17px;
                margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.doc-state p  { font-size: 14px; line-height: 1.65; margin: 0; }
.doc-state--ok   { border-color: var(--green-deep); background: var(--green-lite); }
.doc-state--none { border-color: var(--status-danger-fg); background: var(--status-danger-bg);
                   color: var(--status-danger-fg); }
.doc-foot { border-top: 1px solid var(--border-strong); margin-top: 44px; padding-top: 20px;
            font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
            text-transform: uppercase; color: var(--ink-soft); }

@media (max-width: 640px) {
  .doc-body { padding: 28px 20px 56px; }
  .doc-title { font-size: 24px; }
}