/* ============================================
   EDER MALİYET / FAIRVALUE - STYLES
   Tab-Based Layout
   ============================================ */

/* ---- CSS Custom Properties ----
   Üç görünüm modu vardır: Koyu (varsayılan, aşağıdaki :root), Açık ve Renkli.
   Açık/Renkli yalnızca DEĞİŞKENLERİ ezer (`html[data-tema="..."]`), tek bir
   bileşen kuralı bile tekrarlanmaz — yeni bileşen yazarken rengi doğrudan
   yazmak yerine buradaki değişkenlerden alın, yoksa mod değiştirince okunmaz
   olur. Mod `state.tema` içinde saklanır, temaUygula() ile uygulanır. */
:root {
  /* Tarayıcının KENDİ çizdiği parçalar (açılır menü listesi, kaydırma çubuğu,
     tarih seçici) değişkenlerimizi görmez; hangi tonu kullanacaklarını
     `color-scheme` söyler. Bildirilmediğinde tarayıcı "light" varsayıyor ve
     açılır menü BEYAZ zeminle çiziliyordu — koyu ve renkli modda yazı da
     beyaz olduğu için liste okunamaz hâle geliyordu. Üç modda da bildirilir. */
  color-scheme: dark;
  --bg-primary: #06080f;
  --bg-secondary: #0c1021;
  --bg-card: rgba(15, 23, 42, 0.65);
  --bg-card-hover: rgba(20, 30, 55, 0.75);
  --bg-input: rgba(15, 23, 42, 0.6);
  --bg-input-focus: rgba(30, 41, 68, 0.8);
  /* Açılır menü satırları. OPAK olmak zorunda: `--bg-input` yarı saydam ve
     tarayıcı menüsünün arkasında birleştirilecek bir zemin yok. */
  --bg-secenek: #131a2e;
  --on-secenek: #e2e8f0;
  --bg-row-hover: rgba(59, 130, 246, 0.04);
  --bg-row-alt: rgba(148, 163, 184, 0.02);

  /* Liste (tablo) başlıkları: kolon başlığı satırı ve renkli grup şeritleri.
     Renkli modda bunların tamamı mora çevrilir. */
  --bg-thead: var(--bg-secondary);
  --text-thead: var(--text-secondary);
  --bg-thead-grup: var(--bg-secondary);
  --text-thead-grup: var(--text-secondary);

  /* Model Maliyet'in yapışkan üst şeridi: kart zemininin OPAK karşılığı */
  --bg-serit: #0c1221;
  /* Maliyet kartlarındaki TOPLAM kutusu: vurgu rengiyle tonlanmış opak zemin */
  --bg-toplam: #0f2b2a;
  --on-toplam: #2dd4bf;
  /* Maliyet Formu sonuç kutuları: maliyet turuncu · satış kırmızı · termin lacivert */
  --on-toplam-maliyet: #fb923c;
  --on-toplam-satis: #ff6b6b;
  --on-toplam-termin: #7088ff;
  --border-toplam: rgba(20, 184, 166, 0.45);
  --bg-kart-bas: rgba(148, 163, 184, 0.06);
  /* Doygun vurgu zemini üzerindeki metin — üç modda da aynı */
  --on-accent: #ffffff;

  /* Hücre girdilerinin DURGUN hâli. Eskiden saydam ve çerçevesizdi; kullanıcı
     hangi alana yazabileceğini anlayamadığı için ÜÇ MODDA DA görünür kılındı.
     Yoğun tablolarda gürültü olmasın diye çerçeve ölçülü, zemin hafif. */
  --border-input: rgba(148, 163, 184, 0.22);
  --bg-input-durgun: rgba(15, 23, 42, 0.35);

  /* Sekme çubuğu, açılır menü, modal perdesi ve geniş tabloların yapışkan
     kolonları OPAK zemin ister: altından satırlar kayar. */
  --bg-nav: rgba(6, 8, 15, 0.92);
  --bg-dropdown: rgba(15, 23, 42, 0.9);
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --bg-scol-1: rgba(12, 16, 33, 0.97);
  --bg-scol-2: rgba(12, 17, 38, 0.97);
  --bg-scol-3: rgba(10, 18, 33, 0.97);
  --bg-scol-4: rgba(13, 15, 38, 0.97);
  --bg-scol-hover: rgba(15, 22, 48, 0.98);

  --border-subtle: rgba(148, 163, 184, 0.08);
  --border-default: rgba(148, 163, 184, 0.12);
  --border-hover: rgba(148, 163, 184, 0.2);
  --border-focus: rgba(59, 130, 246, 0.5);

  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-accent: #60a5fa;

  --accent-blue: #3b82f6;
  /* Maliyet dağılımı şeridi: sekiz dilim, zincir sırasında açıktan koyuya */
  --md-r1: #93c5fd;
  --md-r2: #bfdbfe;
  --md-r3: #60a5fa;
  --md-r4: #3b82f6;
  --md-r5: #2563eb;
  --md-r6: #1d4ed8;
  --md-r7: #1e40af;
  --md-r8: #172554;
  --md-on-acik: #0b1020;   /* rampanın açık dilimleri üzerindeki metin */
  --md-on-koyu: #ffffff;   /* koyu dilimler üzerindeki metin */
  --accent-purple: #8b5cf6;
  --accent-teal: #14b8a6;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --accent-green: #10b981;
  /* Sohbette TL fiyatının rengi (USD yeşil kalır). Kullanıcı "koyu lacivert"
     istedi; KOYU MODDA zemin zaten lacivert tonunda olduğu için koyu bir
     lacivert yazı görünmez olurdu. Değişken üç temada da OKUNUR bir lacivert
     taşır: açık temada gerçek koyu lacivert, koyu ve renkli temada onun
     açılmış hâli. */
  --sb-tl: #6f9dff;        /* parlak lacivert — koyu zeminde canlı */
  --sb-usd: #22e07a;       /* parlak yeşil */
  --accent-orange: #f97316;

  /* Dolu silme düğmesi: koyu kırmızı zemin + beyaz ikon. Üç modun da
     zemininde okunduğu için tema bloklarında ezilmesi gerekmiyor. */
  --sil-koyu: #991b1b;
  --sil-koyu-hover: #b91c1c;

  /* Renk tonlu zemin üzerindeki METİN tonları (rozetler, kolon grupları).
     Koyu zeminde açık ton okunur; açık temada koyulaştırılırlar. */
  --on-blue: #60a5fa;
  --on-green: #34d399;
  --on-teal: #2dd4bf;
  --on-purple: #a78bfa;
  --on-violet: #c084fc;
  --on-indigo: #818cf8;
  --on-orange: #fb923c;
  --on-amber: #fbbf24;
  --on-rose: #fb7185;
  --on-pink: #f472b6;
  --on-cyan: #22d3ee;
  --on-slate: #94a3b8;

  --gradient-primary: linear-gradient(135deg, #3b82f6, #8b5cf6);
  --gradient-success: linear-gradient(135deg, #10b981, #14b8a6);
  /* Zemindeki yumuşak ışık lekeleri (body::before) */
  --isik-1: rgba(59, 130, 246, 0.05);
  --isik-2: rgba(139, 92, 246, 0.04);

  /* Buzlu cam etkisi. Yarı saydam kart zeminleriyle birlikte çalışır; zemini
     opak olan bir temada `none` verilir, aksi hâlde ekranın önünde filtre
     varmış gibi puslu görünür. */
  --bulanik-kart: blur(20px);
  --bulanik-nav: blur(16px);
  --bulanik-perde: blur(6px);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.15);

  /* Yazı tipleri dışarıdan ÇEKİLMEZ (Gündem #13): program internetsiz
     açılır ve paket hiçbir dış adrese bağlanmaz. Inter / JetBrains Mono
     bilgisayarda kuruluysa kullanılır, değilse işletim sisteminin kendi
     arayüz yazı tipine düşülür (Windows: Segoe UI / Cascadia · Consolas). */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-default: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- AÇIK MOD ----
   Beyaz zeminde okunurluk: vurgu renkleri bir tık koyulaştırılır (koyu zeminde
   parlayan #3b82f6 beyazda soluk kalır), tonlu metinler ise belirgin biçimde
   koyulaştırılır — çünkü aynı rozetlerin zemini hâlâ %10 alfalı açık lekedir.
   Geniş tablonun yapışkan kolonları saydam olamaz: dört satır tonu için
   beyaza yakın dört opak karşılık verilir. */
html[data-tema="acik"] {
  color-scheme: light;
  --bg-primary: #f4f6fb;
  --bg-secondary: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-card-hover: #ffffff;
  --bg-input: #ffffff;
  --bg-input-focus: #ffffff;
  --bg-secenek: #ffffff;
  --on-secenek: #0f172a;
  --bg-row-hover: rgba(37, 99, 235, 0.06);
  --bg-row-alt: rgba(15, 23, 42, 0.025);

  --bg-serit: #ffffff;
  --bg-toplam: #e9f7f5;
  --on-toplam: #0f766e;
  /* Maliyet Formu sonuç kutuları: maliyet turuncu · satış kırmızı · termin lacivert */
  --on-toplam-maliyet: #c2410c;
  --on-toplam-satis: #c81e1e;
  --on-toplam-termin: #1e3a8a;
  --border-toplam: rgba(13, 148, 136, 0.40);
  --bg-kart-bas: rgba(15, 23, 42, 0.04);
  /* Doygun vurgu zemini üzerindeki metin — üç modda da aynı */
  --on-accent: #ffffff;

  --border-input: rgba(15, 23, 42, 0.18);
  --bg-input-durgun: #ffffff;

  --bg-thead: #eef1f7;
  --text-thead: #475569;
  --bg-thead-grup: #eef1f7;
  --text-thead-grup: #475569;

  --bg-nav: rgba(255, 255, 255, 0.94);
  --bg-dropdown: #ffffff;
  --bg-overlay: rgba(15, 23, 42, 0.45);
  --bg-scol-1: #ffffff;
  --bg-scol-2: #f8fafc;
  --bg-scol-3: #f7fbf9;
  --bg-scol-4: #f9f8fd;
  --bg-scol-hover: #eef4ff;

  --border-subtle: rgba(15, 23, 42, 0.07);
  --border-default: rgba(15, 23, 42, 0.13);
  --border-hover: rgba(15, 23, 42, 0.26);
  --border-focus: rgba(37, 99, 235, 0.55);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #6b7a8f;
  --text-accent: #1d4ed8;

  --accent-blue: #2563eb;
  /* Maliyet dağılımı şeridi: sekiz dilim, zincir sırasında açıktan koyuya */
  --md-r1: #93c5fd;
  --md-r2: #c7dbfd;
  --md-r3: #60a5fa;
  --md-r4: #3b82f6;
  --md-r5: #2563eb;
  --md-r6: #1d4ed8;
  --md-r7: #1e3a8a;
  --md-r8: #111c44;
  --md-on-acik: #0b1020;   /* rampanın açık dilimleri üzerindeki metin */
  --md-on-koyu: #ffffff;   /* koyu dilimler üzerindeki metin */
  --accent-purple: #7c3aed;
  --accent-teal: #0d9488;
  --accent-amber: #b45309;
  --accent-rose: #e11d48;
  --accent-green: #059669;
  --sb-tl: #1d4ed8;        /* açık tema: parlak ama okunur lacivert */
  --sb-usd: #059669;
  --accent-orange: #ea580c;

  --on-blue: #1d4ed8;
  --on-green: #047857;
  --on-teal: #0f766e;
  --on-purple: #6d28d9;
  --on-violet: #7e22ce;
  --on-indigo: #4338ca;
  --on-orange: #c2410c;
  --on-amber: #a16207;
  --on-rose: #be123c;
  --on-pink: #be185d;
  --on-cyan: #0e7490;
  --on-slate: #475569;

  --gradient-primary: linear-gradient(135deg, #2563eb, #7c3aed);
  --gradient-success: linear-gradient(135deg, #059669, #0d9488);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);
  --shadow-glow-blue: 0 0 20px rgba(37, 99, 235, 0.14);

  --isik-1: rgba(37, 99, 235, 0.06);
  --isik-2: rgba(124, 58, 237, 0.05);
  /* Seçim zemini açık mavi lekedir; beyaz metin okunmaz */
  --secim-metin: #0f172a;
}

/* ---- RENKLİ MOD (nötr gri zemin + mor ağırlık) ----
   Zemin bilerek NÖTR GRİ: mor tonlu bir zeminde mor vurgular kayboluyordu,
   gride ise öne çıkıyor. Birincil etkileşim rengi (--accent-blue) mora
   çevrilir, böylece düğmeler, etkin sekme ve odak halkaları mor olur; diğer
   vurgular canlı bırakılır ki mod "renkli" okunsun. */
html[data-tema="renkli"] {
  color-scheme: dark;
  /* Gri antrasit değil, orta ton — ama yüzeyler arasında AÇIK bir basamak
     farkı var: zemin koyu, kartlar ve tablo belirgin biçimde daha açık.
     Hepsi aynı tonda olduğunda mod "mat/puslu" görünüyordu; canlılık renkten
     değil, katmanlar arasındaki kontrasttan geliyor.
     Bütün yüzeyler OPAK: koyu temanın yarı saydam katmanları gri zeminde
     üst üste binip "önünde filtre var" hissi veriyordu. Aynı sebeple buzlu
     cam (backdrop-filter) da bu modda kapalı. */
  --bg-primary: #474b52;
  --bg-secondary: #565b63;
  --bg-card: #5f646c;
  --bg-card-hover: #6d727b;
  --bg-input: #3d4147;
  --bg-input-focus: #4a4f56;
  /* Açılır menü: girdi kutusundan bir tık AÇIK, yazı beyaz. Bu modda
     `--text-primary` beyaz olduğu için menü beyaz zeminle çizilseydi hiçbir
     satır okunmazdı — kullanıcının bildirdiği hata buydu. */
  --bg-secenek: #4a4f56;
  --on-secenek: #ffffff;
  --bg-row-hover: rgba(168, 85, 247, 0.3);
  --bg-row-alt: rgba(255, 255, 255, 0.07);

  --bulanik-kart: none;
  --bulanik-nav: none;
  --bulanik-perde: none;

  --bg-serit: #5f646c;
  --bg-toplam: #3f5a58;
  --on-toplam: #5eead4;
  /* Maliyet Formu sonuç kutuları: maliyet turuncu · satış kırmızı · termin lacivert */
  --on-toplam-maliyet: #fdba74;
  --on-toplam-satis: #ffb0b0;
  --on-toplam-termin: #c7d2fe;
  --border-toplam: rgba(45, 212, 191, 0.55);
  --bg-kart-bas: rgba(255, 255, 255, 0.09);
  /* Doygun vurgu zemini üzerindeki metin — üç modda da aynı */
  --on-accent: #ffffff;

  /* Gri zeminde saydam kutu görünmüyor: girdilere çerçeve ve koyu zemin */
  --border-input: rgba(255, 255, 255, 0.3);
  --bg-input-durgun: rgba(32, 34, 38, 0.5);

  /* Kullanıcı isteği: renkli modda TÜM liste başlıkları mor. Kolon başlığı
     satırı biraz koyu, üstündeki grup şeridi bir ton açık — ikisi de belirgin
     mor kalsın diye orta tonlar seçildi (çok koyusu gride kaybediyor). */
  --bg-thead: #6d28d9;
  --text-thead: #f5edff;
  --bg-thead-grup: #7c3aed;
  --text-thead-grup: #faf5ff;

  --bg-nav: #3f4349;
  --bg-dropdown: #565b63;
  --bg-overlay: rgba(24, 26, 29, 0.74);
  /* Yapışkan kolonlar opak gri; satır tonlarını izlemek için çok hafif
     morumsu/yeşilimsi sapmalar verilir */
  --bg-scol-1: #5f646c;
  --bg-scol-2: #61656f;
  --bg-scol-3: #5e656b;
  --bg-scol-4: #63646e;
  --bg-scol-hover: #6f747d;

  --border-subtle: rgba(255, 255, 255, 0.14);
  --border-default: rgba(255, 255, 255, 0.24);
  --border-hover: rgba(255, 255, 255, 0.42);
  --border-focus: rgba(192, 132, 252, 0.85);

  --text-primary: #ffffff;
  --text-secondary: #e9ebef;
  --text-muted: #c9cdd4;
  --text-accent: #d8b4fe;

  /* Doygun vurgular: gri zeminde soluk renk hemen "mat" okunuyor */
  --accent-blue: #b366ff;      /* birincil renk: mor */
  /* Maliyet dağılımı şeridi: sekiz dilim, zincir sırasında açıktan koyuya */
  --md-r1: #d8b4fe;
  --md-r2: #e9d5ff;
  --md-r3: #c084fc;
  --md-r4: #a855f7;
  --md-r5: #9333ea;
  --md-r6: #7e22ce;
  --md-r7: #6b21a8;
  --md-r8: #3b0764;
  --md-on-acik: #0b1020;   /* rampanın açık dilimleri üzerindeki metin */
  --md-on-koyu: #ffffff;   /* koyu dilimler üzerindeki metin */
  --accent-purple: #e879f9;
  --accent-teal: #2dd4bf;
  --accent-amber: #fcd34d;
  --accent-rose: #fb7185;
  --accent-green: #4ade80;
  /* Renkli tema zemini ORTA GRİDİR (#565b63), koyu değil: koyu temanın
     lacivertini burada kullanmak kontrastı 2,92'ye düşürüyordu (ölçüldü,
     eşik 3,0). Ton bu yüzden daha açık. */
  --sb-tl: #bdd2ff;
  --sb-usd: #34e57f;
  --accent-orange: #fb923c;

  /* Tonlu metinler: pastelin bir basamak altı — koyulaşan zeminde hem
     kontrast yeterli hem renk belli oluyor. */
  --on-blue: #c4b5fd;
  --on-green: #6ee7b7;
  --on-teal: #5eead4;
  --on-purple: #d8b4fe;
  --on-violet: #e9d5ff;
  --on-indigo: #a5b4fc;
  --on-orange: #fdba74;
  --on-amber: #fcd34d;
  --on-rose: #fda4af;
  --on-pink: #f9a8d4;
  --on-cyan: #67e8f9;
  --on-slate: #dfe2e7;

  --gradient-primary: linear-gradient(135deg, #a855f7, #ec4899);
  --gradient-success: linear-gradient(135deg, #34d399, #2dd4bf);

  /* Gölge kartları zeminden ayırır: katman farkı canlılığın yarısı */
  --shadow-sm: 0 1px 3px rgba(16, 17, 20, 0.3);
  --shadow-md: 0 6px 18px rgba(16, 17, 20, 0.38);
  --shadow-lg: 0 12px 36px rgba(16, 17, 20, 0.45);
  --shadow-glow-blue: 0 0 24px rgba(179, 102, 255, 0.4);

  /* Zemindeki ışık lekeleri kapalı: gri üstünde mor/pembe bulut, ekranın
     önünde renkli bir filtre varmış gibi görünüyordu. */
  --isik-1: transparent;
  --isik-2: transparent;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 10% 20%, var(--isik-1) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 85% 70%, var(--isik-2) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.app {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

/* ---- Header ---- */
/* İNCE VE YAPIŞKAN ŞERİT (kullanıcının isteği, 20.10.2026): aşağı inildikçe
   ekranda kalır. Yüksekliği `--ust-serit-h` değişkenine ölçülerek yazılır
   (ustSeritGozle, 25-modal-init.js); yan menü, tablo başlıkları ve yapışkan
   paneller `top` değerini ona göre alır, şeridin altında kalmaz. Zemin OPAK
   (--bg-serit): altından içerik geçiyor. Negatif kenar boşluğu şeridi `.app`
   dolgusunun kenarına yaslar. */
:root { --ust-serit-h: 0px; }
.app-header {
  position: sticky;
  top: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -24px;
  padding: 5px 24px;
  background: var(--bg-serit);
  border-bottom: 1px solid var(--border-subtle);
}

.header-left { display: flex; align-items: center; gap: 16px; }
.header-right { display: flex; align-items: center; gap: 12px; }

.logo { display: flex; align-items: center; gap: 12px; }
.logo-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 24px; height: 24px; }

.logo-text h1 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.logo-subtitle {
  font-size: 0.64rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.4px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition-default);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  padding: 9px 16px;
  font-size: 0.82rem;
  box-shadow: var(--shadow-glow-blue);
}
.btn-primary:hover { box-shadow: 0 0 30px rgba(59, 130, 246, 0.25); filter: brightness(1.1); }

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  padding: 9px 16px;
  font-size: 0.82rem;
}
.btn-outline:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(59, 130, 246, 0.06); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  padding: 8px;
  border-radius: var(--radius-sm);
}
.btn-ghost:hover { color: var(--text-primary); background: rgba(148, 163, 184, 0.08); }

.btn-sm { padding: 7px 12px; font-size: 0.78rem; }

.btn-danger {
  background: rgba(244, 63, 94, 0.1);
  color: var(--accent-rose);
  border: 1px solid rgba(244, 63, 94, 0.2);
  padding: 7px 12px;
  font-size: 0.78rem;
}
.btn-danger:hover { background: rgba(244, 63, 94, 0.2); border-color: rgba(244, 63, 94, 0.4); }

.btn-success {
  background: var(--gradient-success);
  color: white;
  padding: 9px 18px;
  font-size: 0.82rem;
}
.btn-success:hover { filter: brightness(1.1); }

/* Düzenlemeyi Kapat — kullanıcının isteği: "Örneği Düzenle" (btn-primary)
   renkliyken kapatma düğmesi renksiz (btn-ghost) kalıyordu. Amber → rose
   geçişi; tema değişkenlerinden okunduğu için üç görünüm modunda da renkli. */
.btn-kapat {
  background: linear-gradient(135deg, var(--accent-amber), var(--accent-rose));
  color: white;
  padding: 9px 16px;
  font-size: 0.82rem;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.18);
}
.btn-kapat:hover { box-shadow: 0 0 30px rgba(244, 63, 94, 0.3); filter: brightness(1.1); }
.btn-kapat.btn-sm { padding: 7px 12px; font-size: 0.78rem; }

/* ---- Tab Navigation ---- */
.tab-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-nav);
  backdrop-filter: var(--bulanik-nav);
  border-bottom: 1px solid var(--border-subtle);
  margin: 0 -24px;
  padding: 0 24px;
}

/* Sekme sayısı 12'ye çıkınca en geniş ekranda bile tek satır yetmiyordu ve son
   sekmeler (Uyarı Havuzu, Sabitler) gizli kalıyordu — gizli kaydırma çubuğu
   yüzünden kaydırılabilir olduğu da belli olmuyordu. Bu yüzden geniş ekranda
   satır kaydırma yerine sarma kullanılır; mobilde etiketler gizlendiği için
   ikonlar tek satıra sığar (bkz. 760px medya sorgusu). Sekme çubuğunun
   yüksekliği değiştiğinde masrafBaslikSabitle() ofsetleri yeniden ölçer. */
.tab-nav-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tab-nav-inner::-webkit-scrollbar { display: none; }

.tab-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: all var(--transition-default);
  border-bottom: 2px solid transparent;
}

.tab-btn:hover {
  color: var(--text-secondary);
  background: rgba(148, 163, 184, 0.04);
}

.tab-btn.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent-blue);
}

.tab-btn.active svg {
  color: var(--accent-blue);
}

.tab-btn svg {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color var(--transition-default);
}

/* ---- Tab Content ---- */
.tab-content {
  padding-top: 20px;
}

.tab-panel {
  display: none;
  animation: fadeInUp 0.35s ease-out;
}

.tab-panel.active {
  display: block;
}

/* ---- Panel Toolbar ---- */
.panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 8px;
}

.toolbar-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---- Açılır menü satırları ----
   Sınıfa DEĞİL, `select` etiketine bağlanır: programda beş ayrı seçici sınıfı
   var (.filter-select, .form-select, .cell-select, .filtre-select ve sınıfsız
   olanlar) ve yeni eklenen bir menü bu kuralın dışında kalmamalı.

   Neden gerekli: `<option>` renk almadığında tarayıcı listeyi kendi
   varsayılanıyla (beyaz zemin) çizer ama YAZI rengini seçiciden miras alır.
   Koyu ve renkli modda yazı beyaza yakın olduğu için menü beyaz-üstüne-beyaz
   çıkıyor ve hiçbir satır okunmuyordu (kullanıcının bildirdiği hata).
   `color-scheme` tek başına Chrome'da yetiyor ama Firefox ile eski sürümlerde
   yetmiyor; ikisi birlikte yazılır. Zemin OPAK olmalı — tarayıcı menüsünün
   arkasında birleştirilecek bir katman yok. */
select option,
select optgroup {
  background-color: var(--bg-secenek);
  color: var(--on-secenek);
}
select optgroup {
  font-weight: 600;
  font-style: normal;
  color: var(--text-muted);
}
/* Grup içindeki satırlar normal ağırlıkta ve tam kontrastta kalsın */
select optgroup option {
  font-weight: 400;
  color: var(--on-secenek);
}
/* Devre dışı satırlar (ör. "— Seçiniz —" yer tutucuları) soluk ama okunur */
select option:disabled { color: var(--text-muted); }

.filter-select {
  padding: 6px 28px 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.filter-select:focus {
  border-color: var(--border-focus);
  background-color: var(--bg-input-focus);
}

/* ---- Data Table ---- */
/* DİKKAT: burada overflow: hidden VARDI ve tablo başlığının sticky olmasını
   engelliyordu — overflow bir kaydırma bağlamı yaratıp sticky'yi görünüm
   penceresinden koparıyor. Köşeleri kırpmak için tablo hücrelerine yarıçap
   verildi (aşağıda), sarmalayıcıda overflow kullanılmıyor. */
.data-table-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--bulanik-kart);
}
.data-table-wrapper > table:first-child > thead:first-child > tr:first-child > th:first-child {
  border-top-left-radius: var(--radius-lg);
}
.data-table-wrapper > table:first-child > thead:first-child > tr:first-child > th:last-child {
  border-top-right-radius: var(--radius-lg);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

/* Başlık satırları sayfa kaydırılırken görünür kalır. Sticky <thead> yerine
   hücre bazında uygulanır: iki başlık satırı (kolonlar + filtreler) farklı
   `top` değerleri alır ve bunlar sekme çubuğunun gerçek yüksekliğine göre
   masrafBaslikSabitle() içinde ölçülerek yazılır. */
.data-table thead th {
  position: sticky;
  top: var(--ust-serit-h);
  z-index: 12;
  background: var(--bg-thead);
}

.data-table thead th {
  padding: 12px 14px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-thead);
  background: var(--bg-thead);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
  user-select: none;
}

.data-table thead th.col-fiyat,
.data-table thead th.col-tlfiyat {
  text-align: right;
}

.data-table thead th.col-actions {
  width: 50px;
  text-align: center;
}

.data-table tbody tr {
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--border-subtle);
}

.data-table tbody tr:nth-child(even) {
  background: var(--bg-row-alt);
}

.data-table tbody tr:hover {
  background: var(--bg-row-hover);
}

.data-table tbody td {
  padding: 6px 14px;
  vertical-align: middle;
  color: var(--text-primary);
}

.data-table tbody td.col-fiyat,
.data-table tbody td.col-tlfiyat {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.84rem;
}

.data-table tbody td.col-tlfiyat {
  color: var(--accent-teal);
}

.data-table tbody td.col-actions {
  text-align: center;
}

/* ---- Inline editable cells ---- */
.cell-input {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg-input-durgun);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  outline: none;
  transition: all var(--transition-fast);
}

.cell-input:hover {
  border-color: var(--border-default);
  background: var(--bg-input);
}

.cell-input:focus {
  border-color: var(--border-focus);
  background: var(--bg-input-focus);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.cell-input-number {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
}

.cell-input-tl {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-teal);
}

/* Hesaplanan (düzenlenemez) hücre — ör. Masraf Listesi'nde TL Fiyat */
.cell-hesaplanan {
  display: inline-block;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-teal);
  cursor: help;
  border-bottom: 1px dashed rgba(20, 184, 166, 0.35);
}

/* İki satırda kesilen metin hücresi — Kumaş Kısa Tanım gibi uzun metinlerin
   dar bir kolonda okunabilir kalması için (kullanıcının isteği). Kolon yarıya
   indirildi, metin sarılır, 2 satırı aşan kısım "…" olur; tam metin `title`
   ile hücrenin üzerine gelince görünür.
   `-webkit-line-clamp` satır kesmenin tek yaygın yoludur ve Chrome/Edge/Safari/
   Firefox'un tamamında çalışır; `display: -webkit-box` şart olduğu için
   .cell-hesaplanan'ın inline-block'unu ezer. */
.cell-satir2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  /* Ondalık hizası gerekmiyor; dar kolonda gövde yazı tipi daha çok kelime alır */
  font-family: inherit;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
}

/* Döviz kolonu dar tutulur */
.data-table thead th.col-doviz { width: 90px; }
.data-table tbody td.col-doviz { width: 90px; }

/* Maliyet Merkezi kolonu. Masraf Grup'a da alt sınır verilir; aksi hâlde
   eklenen kolon onu sıkıştırıp "Hammadde" gibi değerleri kırpıyor. */
.data-table thead th.col-maliyetmerkezi,
.data-table tbody td.col-maliyetmerkezi { width: 150px; }
.data-table thead th.col-masrafgrup,
.data-table tbody td.col-masrafgrup { min-width: 145px; }

/* Formda hesaplanan, salt okunur alan */
.form-input-hesap {
  font-family: var(--font-mono);
  color: var(--accent-teal);
  background: rgba(20, 184, 166, 0.06);
  border-style: dashed;
  cursor: default;
}

.cell-select {
  width: 100%;
  padding: 6px 24px 6px 8px;
  background: var(--bg-input-durgun);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}

.cell-select:hover {
  border-color: var(--border-default);
  background-color: var(--bg-input);
}

.cell-select:focus {
  border-color: var(--border-focus);
  background-color: var(--bg-input-focus);
}

/* Row delete button */
.btn-row-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.data-table tbody tr:hover .btn-row-delete {
  opacity: 1;
}

.btn-row-delete:hover {
  color: var(--accent-rose);
  background: rgba(244, 63, 94, 0.1);
}

/* ---- Table Footer ---- */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.table-footer .row-count {
  font-weight: 600;
}

/* ---- Placeholder Content ---- */
.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  backdrop-filter: var(--bulanik-kart);
}

.placeholder-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.placeholder-content h3 {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.placeholder-content p {
  font-size: 0.9rem;
  max-width: 400px;
}

/* ---- Dönem Badge in Table ---- */
.donem-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(59, 130, 246, 0.08);
  color: var(--accent-blue);
  border: 1px solid rgba(59, 130, 246, 0.15);
  white-space: nowrap;
}

/* ---- Masraf Grup Badge ---- */
.masraf-grup-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.masraf-grup-badge.enerji { background: rgba(249,115,22,0.1); color: var(--on-orange); border: 1px solid rgba(249,115,22,0.15); }
.masraf-grup-badge.hammadde { background: rgba(16,185,129,0.1); color: var(--on-green); border: 1px solid rgba(16,185,129,0.15); }
.masraf-grup-badge.iscilik { background: rgba(139,92,246,0.1); color: var(--on-purple); border: 1px solid rgba(139,92,246,0.15); }
.masraf-grup-badge.sabit { background: rgba(236,72,153,0.1); color: var(--on-pink); border: 1px solid rgba(236,72,153,0.15); }
.masraf-grup-badge.kimyasal { background: rgba(168,85,247,0.1); color: var(--on-violet); border: 1px solid rgba(168,85,247,0.15); }
.masraf-grup-badge.diger { background: rgba(148,163,184,0.1); color: var(--on-slate); border: 1px solid rgba(148,163,184,0.15); }

/* ---- Toolbar Hint ---- */
.toolbar-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ---- Sabitler Sections ---- */
.sabitler-section {
  margin-bottom: 28px;
}

.sabitler-section:last-child {
  margin-bottom: 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.section-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.section-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.section-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Param table specific columns */
.col-key {
  font-family: var(--font-mono);
}

.col-deger {
  text-align: right !important;
}

.col-aciklama {
  min-width: 160px;
}

.cell-key {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-purple);
  background: rgba(139, 92, 246, 0.06);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.param-kategori-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

.param-kategori-badge.doviz     { background: rgba(59,130,246,0.1);  color: var(--on-blue); border: 1px solid rgba(59,130,246,0.15); }
.param-kategori-badge.vergi     { background: rgba(244,63,94,0.1);   color: var(--on-rose); border: 1px solid rgba(244,63,94,0.15); }
.param-kategori-badge.uretim    { background: rgba(16,185,129,0.1);  color: var(--on-green); border: 1px solid rgba(16,185,129,0.15); }
.param-kategori-badge.iscilik   { background: rgba(139,92,246,0.1);  color: var(--on-purple); border: 1px solid rgba(139,92,246,0.15); }
.param-kategori-badge.enerji    { background: rgba(249,115,22,0.1);  color: var(--on-orange); border: 1px solid rgba(249,115,22,0.15); }
.param-kategori-badge.kapasite  { background: rgba(6,182,212,0.1);   color: var(--on-cyan); border: 1px solid rgba(6,182,212,0.15); }
.param-kategori-badge.maliyet   { background: rgba(245,158,11,0.1);  color: var(--on-amber); border: 1px solid rgba(245,158,11,0.15); }
.param-kategori-badge.genel     { background: rgba(148,163,184,0.1); color: var(--on-slate); border: 1px solid rgba(148,163,184,0.15); }
.param-kategori-badge.maliyetmerkezi { background: rgba(99,102,241,0.1); color: var(--on-indigo); border: 1px solid rgba(99,102,241,0.15); }

/* ---- Sabitler Grid ---- */
.sabitler-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.sabit-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--bulanik-kart);
  overflow: hidden;
  animation: fadeInUp 0.35s ease-out;
}

.sabit-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.sabit-card-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.sabit-card-header .sabit-icon {
  font-size: 1.05rem;
}

.sabit-card-header .sabit-count {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.08);
  padding: 2px 8px;
  border-radius: 10px;
}

.sabit-card-body {
  padding: 6px 0;
  max-height: 340px;
  overflow-y: auto;
}

.sabit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  font-size: 0.85rem;
  color: var(--text-primary);
  transition: background var(--transition-fast);
}

.sabit-item:hover {
  background: rgba(148, 163, 184, 0.04);
}

.sabit-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sabit-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.sabit-item:hover .sabit-item-actions {
  opacity: 1;
}

.sabit-item .btn-sabit-move,
.sabit-item .btn-sabit-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sabit-item .btn-sabit-move:hover {
  color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.1);
}

.sabit-item .btn-sabit-move:disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

.sabit-item .btn-sabit-delete:hover {
  color: var(--accent-rose);
  background: rgba(244, 63, 94, 0.1);
}

.sabit-card-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border-subtle);
}

.sabit-add-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sabit-add-input {
  flex: 1;
  padding: 7px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  outline: none;
  transition: all var(--transition-fast);
}

.sabit-add-input:focus {
  border-color: var(--border-focus);
  background: var(--bg-input-focus);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.sabit-add-input::placeholder {
  color: var(--text-muted);
}

.btn-sabit-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.btn-sabit-add:hover {
  filter: brightness(1.15);
  box-shadow: var(--shadow-glow-blue);
}

.btn-sabit-add:active {
  transform: scale(0.93);
}

.sabit-empty {
  padding: 20px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ---- Wide Table (Ana Bileşen) ---- */
.wide-table-container {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  backdrop-filter: var(--bulanik-kart);
}

.wide-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
}

/* ---- Group header row ---- */
.wide-table thead tr.group-header th {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.wide-table thead tr.group-header .grp-info {
  background: rgba(16, 185, 129, 0.06);
  color: var(--on-green);
  border-right: 2px solid rgba(16, 185, 129, 0.15);
}

.wide-table thead tr.group-header .grp-proses {
  background: rgba(59, 130, 246, 0.06);
  color: var(--on-blue);
  border-right: 2px solid rgba(59, 130, 246, 0.15);
}

.wide-table thead tr.group-header .grp-malzeme {
  background: rgba(249, 115, 22, 0.06);
  color: var(--on-orange);
  border-right: 2px solid rgba(249, 115, 22, 0.15);
}

.wide-table thead tr.group-header .grp-maliyet {
  background: rgba(139, 92, 246, 0.06);
  color: var(--on-purple);
}

/* ---- Sticky header (vertical scroll) ---- */
.wide-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-thead);
  padding: 8px 12px;
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--text-thead);
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-default);
}

/* Second header row sits below group-header */
.wide-table thead tr:nth-child(2) th {
  top: 33px; /* height of group-header row */
}

/* ---- Sticky left columns ---- */
.wide-table .scol {
  position: sticky;
  z-index: 2;
}

.wide-table thead .scol {
  z-index: 5 !important; /* corner cell: both sticky directions */
}

.wide-table .scol-0 { left: 0;     min-width: 44px;  max-width: 44px; }
.wide-table .scol-1 { left: 44px;  min-width: 150px; }
.wide-table .scol-2 { left: 194px; min-width: 140px; }
.wide-table .scol-3 { left: 334px; min-width: 130px; }
.wide-table .scol-4 { left: 464px; min-width: 120px; border-right: 2px solid rgba(16,185,129,0.15); }

.merkez-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--on-indigo);
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.18);
}

.wide-table tbody .scol {
  background: var(--bg-secondary);
}

/* ---- Row striping with tint for tracking ---- */
.wide-table tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background var(--transition-fast); }
.wide-table tbody tr:nth-child(4n+1) { background: rgba(148,163,184, 0.020); }
.wide-table tbody tr:nth-child(4n+2) { background: rgba(59,130,246,  0.018); }
.wide-table tbody tr:nth-child(4n+3) { background: rgba(16,185,129,  0.018); }
.wide-table tbody tr:nth-child(4n+4) { background: rgba(139,92,246,  0.018); }
.wide-table tbody tr:hover { background: rgba(59,130,246,0.06) !important; }

.wide-table tbody tr:nth-child(4n+1) .scol { background: var(--bg-scol-1); }
.wide-table tbody tr:nth-child(4n+2) .scol { background: var(--bg-scol-2); }
.wide-table tbody tr:nth-child(4n+3) .scol { background: var(--bg-scol-3); }
.wide-table tbody tr:nth-child(4n+4) .scol { background: var(--bg-scol-4); }
.wide-table tbody tr:hover .scol { background: var(--bg-scol-hover) !important; }

/* ---- Cell styles ---- */
.wide-table tbody td {
  padding: 5px 10px;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--text-primary);
}

.wide-table tbody td.td-no {
  text-align: center;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.76rem;
}

.wide-table tbody td.td-name {
  font-weight: 600;
}

.wide-table tbody td.td-num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.wide-table tbody td.td-calc {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-teal);
  font-weight: 600;
}

.wide-table tbody td.td-pct {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-amber);
}

.wide-table tbody td.td-border-r {
  border-right: 2px solid rgba(148,163,184,0.06);
}

.wide-table .cell-input-sm {
  width: 72px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: right;
  outline: none;
  transition: all var(--transition-fast);
}

.wide-table .cell-input-sm:hover {
  border-color: var(--border-default);
  background: var(--bg-input);
}

.wide-table .cell-input-sm:focus {
  border-color: var(--border-focus);
  background: var(--bg-input-focus);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
}

.hammadde-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 600;
  background: rgba(249,115,22,0.08);
  color: var(--on-orange);
  border: 1px solid rgba(249,115,22,0.12);
  white-space: nowrap;
}

.wide-table-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.wide-table-empty-icon {
  font-size: 2.2rem;
  margin-bottom: 10px;
  opacity: 0.4;
}

/* ---- Form multi-col ---- */
.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.form-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin: 16px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}

.form-section-title:first-child {
  margin-top: 0;
}

/* ---- Modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: var(--bulanik-perde);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-overlay.active {
  display: flex;
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.3s ease-out;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}

.modal.modal-wide {
  max-width: 680px;
}

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-header h3 { font-size: 1.05rem; font-weight: 700; }

.modal-body { padding: 20px 24px; }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--border-subtle);
}

.form-group { margin-bottom: 14px; }
.form-group:last-child { margin-bottom: 0; }

.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.form-input {
  width: 100%;
  padding: 9px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  outline: none;
  transition: all var(--transition-fast);
}

.form-input:focus {
  border-color: var(--border-focus);
  background: var(--bg-input-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-select {
  width: 100%;
  padding: 9px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: all var(--transition-fast);
}

.form-select:focus {
  border-color: var(--border-focus);
  background-color: var(--bg-input-focus);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---- Toast ---- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.3s ease-out;
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast.success { border-color: rgba(16, 185, 129, 0.3); }
.toast.warning { border-color: rgba(245, 158, 11, 0.3); }
.toast-icon { font-size: 1.1rem; }

/* ---- Animations ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.25); }

/* ---- Number Input Arrows ---- */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

::selection { background: rgba(59, 130, 246, 0.3); color: var(--secim-metin, white); }

/* ---- RENKLİ MOD: bütün liste başlıkları mor ----
   Kolon başlığı satırının zemini `--bg-thead` üzerinden zaten geliyor. Grup
   şeritleri ise dokuz ayrı renk sınıfı (grp-temel yeşil, grp-iplik indigo …)
   taşıdığı için tek tek ezilmeleri gerekiyor: bu blok, tema bloklarının
   "yalnızca değişken" kuralına BİLEREK açılmış tek istisnadır — modun kimliği
   başlıkların mor olması. Renkler yine değişkenlerden okunur. */
html[data-tema="renkli"] .wide-table thead tr.group-header th,
html[data-tema="renkli"] .kumas-table thead tr.group-header th,
html[data-tema="renkli"] .kumas-table thead tr.kl-grup-satir th {
  background: var(--bg-thead-grup);
  color: var(--text-thead-grup);
  border-right-color: rgba(233, 213, 255, 0.28);
}
html[data-tema="renkli"] .kumas-table thead tr.group-header .grp-label,
html[data-tema="renkli"] .kumas-table thead tr.kl-grup-satir .grp-label,
html[data-tema="renkli"] .grp-toggle {
  color: var(--text-thead-grup);
}
/* Grup şeridindeki kolon sayısı rozeti mor zeminde okunur kalsın */
html[data-tema="renkli"] .kumas-table .grp-say,
html[data-tema="renkli"] .wide-table .grp-say {
  color: var(--text-thead-grup);
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
}
html[data-tema="renkli"] .kumas-table .grp-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}
html[data-tema="renkli"] .kumas-table thead th.th-stub { background: var(--bg-thead); }
/* Formülle üretilen kolon başlığı normalde soluk gri; mor zeminde okunmuyor */
html[data-tema="renkli"] .kumas-table thead th.th-hesap { color: #d8c9f5; }
/* Masraf Listesi'nin filtre satırı da başlığın parçası */
html[data-tema="renkli"] #masrafTable thead tr.filtre-satiri th { background: var(--bg-thead-grup); }

/* Renk tonlu rozetler koyu tema için %8–10 alfayla çizilmiş; orta gri üstünde
   bu tint görünmüyor ve bütün rozetler gri lekeye dönüşüyordu — modun mat
   durmasının başlıca sebebi buydu. Rozet zemini koyulaştırılıp kenarlık
   metnin rengine bağlanır: renk hem doygun hem okunur olur. */
html[data-tema="renkli"] .donem-badge,
html[data-tema="renkli"] .masraf-grup-badge,
html[data-tema="renkli"] .param-kategori-badge,
html[data-tema="renkli"] .merkez-badge,
html[data-tema="renkli"] .hammadde-badge,
html[data-tema="renkli"] .rozet {
  background: rgba(22, 23, 27, 0.42);
  border: 1px solid currentColor;
}
html[data-tema="renkli"] .m-kod {
  background: rgba(22, 23, 27, 0.42);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ---- Görünüm modu seçici ---- */
.tema-secici {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.tema-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.tema-btn:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.tema-btn.aktif { color: #fff; background: var(--gradient-primary); box-shadow: var(--shadow-sm); }
.tema-btn svg { flex: 0 0 auto; }

/* Logodaki gradyan durakları da temayı izler */
.logo-icon linearGradient stop:first-child { stop-color: var(--accent-blue); }
.logo-icon linearGradient stop:last-child  { stop-color: var(--accent-purple); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .app { padding: 0 12px 32px; }
  .tab-nav { margin: 0 -12px; padding: 0 12px; }
  /* Etiketler gizli, yalnızca ikon: tek satır kaydırma daha az yer tutar */
  .tab-nav-inner { flex-wrap: nowrap; }
  .tab-btn span { display: none; }
  .tab-btn { padding: 12px 14px; }
  .panel-toolbar { flex-direction: column; align-items: flex-start; }
  .toolbar-left, .toolbar-right { width: 100%; }
  .data-table { font-size: 0.78rem; }
  .data-table thead th, .data-table tbody td { padding: 6px 8px; }
}

/* ==========================================
   MALIYET FORMU
   ========================================== */
.maliyet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

/* ---- Maliyet Formu kartları ----
   `mfKart()` / `mfSatir()` / `mfToplam()` ile üretilen kutular. Bu sınıfların
   HİÇ CSS'i yoktu: kart bir kutu gibi görünmüyor, başlık gövde metninden
   ayrışmıyor ve TOPLAM satırı sıradan bir satır gibi duruyordu (kullanıcı
   İplik ekranında fark etti). Kurallar altı merkezin tamamında ortaktır —
   Kumaş, İplik, Aksesuar, İmalat, Parça ve Yıkama aynı yardımcıları kullanıyor. */
.maliyet-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 0 0 16px;
  backdrop-filter: var(--bulanik-kart);
}
/* Başlık: kartın kendi şeridi — gövdeden zemin ve alt çizgiyle ayrılır.
   DİKKAT: karta `overflow: hidden` VERİLMEZ — Maliyet Kırılımı kartında geniş
   bir tablo var ve kırpılırdı. Köşeleri bu yüzden başlığın kendisi yuvarlar. */
.maliyet-card .card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 12px 18px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-primary);
  background: var(--bg-kart-bas);
  border-bottom: 1px solid var(--border-default);
}
/* Sol kenarda vurgu çubuğu: başlığı taramadan bulunur kılar */
.maliyet-card .card-title::before {
  content: '';
  flex: 0 0 auto;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent-teal);
}
.maliyet-card > *:not(.card-title) { margin-left: 18px; margin-right: 18px; }
/* Kart içindeki geniş tablolar (Maliyet Kırılımı) kartı taşırmasın */
.maliyet-card > table { display: block; overflow-x: auto; }

/* Kırılım satırları: etiket solda, sayı sağda ve monospace — rakamlar alt alta
   hizalansın diye. Aradaki ince çizgi satırları birbirinden ayırır. */
.maliyet-card .sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  border-bottom: 1px dashed var(--border-subtle);
}
.maliyet-card .sum-row:last-of-type { border-bottom: none; }
.maliyet-card .sum-row > span:last-child {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
  white-space: nowrap;
}
/* Ara toplam: zincirin o noktadaki değeri — kalemlerden ayrışsın */
.maliyet-card .sum-row.ara {
  font-weight: 600;
  color: var(--text-primary);
  border-bottom-style: solid;
  border-bottom-color: var(--border-default);
}
.maliyet-card .sum-row.ara > span:last-child { color: var(--accent-blue); }
/* Çarpan/bölen satırı: tutar değil oran taşır, soluk gösterilir */
.maliyet-card .sum-row.carpan { color: var(--text-muted); font-size: 0.78rem; }
.maliyet-card .sum-row.carpan > span:last-child { color: var(--text-secondary); }

/* Kartın kimlik şeridi: neyin fiyatlandığı (iplik adı + kalınlık) */
.maliyet-card .mf-kimlik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-default);
}
.maliyet-card .mf-kimlik strong {
  font-size: 0.88rem;
  color: var(--text-primary);
}
.maliyet-card .mf-kimlik span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--accent-teal);
  white-space: nowrap;
}

/* TOPLAM kutusu: kartın sonucu. Vurgu zeminli ve çerçeveli, sayı büyük. */
.maliyet-card .sum-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bg-toplam);
  border: 1px solid var(--border-toplam);
  border-radius: var(--radius-md);
}
.maliyet-card .sum-total .sum-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}
.maliyet-card .sum-total .sum-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  /* `--accent-teal` DEĞİL: açık temada o ton kendi zemininde 3,4 kontrast
     veriyordu. `--on-toplam` her temada TOPLAM zeminine göre ayarlıdır. */
  color: var(--on-toplam);
}

.maliyet-section {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 20px;
  backdrop-filter: var(--bulanik-kart);
}
.maliyet-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.maliyet-section-title .sec-icon {
  font-size: 1.1rem;
}
.maliyet-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.maliyet-form-row.full { grid-template-columns: 1fr; }
.maliyet-form-row.triple { grid-template-columns: 1fr 1fr 1fr; }
.maliyet-form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.maliyet-form-group select,
.maliyet-form-group input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-main);
  color: var(--text-primary);
  font-size: 0.82rem;
  transition: border-color .2s;
}
.maliyet-form-group select:focus,
.maliyet-form-group input:focus {
  border-color: var(--accent);
  outline: none;
}
.maliyet-full-width {
  grid-column: 1 / -1;
}
.maliyet-cost-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  margin-top: 8px;
}
.maliyet-cost-table th {
  text-align: left;
  padding: 8px 12px;
  background: rgba(99,102,241,0.08);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-default);
}
.maliyet-cost-table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.maliyet-cost-table .cost-category {
  font-weight: 600;
  color: var(--text-primary);
}
.maliyet-cost-table .cost-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.maliyet-cost-table .cost-value input {
  width: 100px;
  text-align: right;
  padding: 4px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-main);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.maliyet-cost-table .cost-value input:focus {
  border-color: var(--accent);
  outline: none;
}
.maliyet-cost-table tr.cost-group-header td {
  background: rgba(99,102,241,0.04);
  font-weight: 700;
  color: var(--accent);
  font-size: 0.78rem;
  text-transform: uppercase;
  padding: 10px 12px 6px;
  border-bottom: 2px solid rgba(99,102,241,0.15);
}
.maliyet-cost-table tr.cost-total td {
  background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(168,85,247,0.08) 100%);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px;
  border-top: 2px solid var(--accent);
}
.maliyet-cost-table tr.cost-subtotal td {
  background: rgba(99,102,241,0.03);
  font-weight: 600;
  border-top: 1px solid rgba(99,102,241,0.12);
}
.maliyet-summary-card {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(168,85,247,0.06) 100%);
  border: 1px solid rgba(99,102,241,0.15);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px;
}
.maliyet-summary-item {
  text-align: center;
}
.maliyet-summary-item .sum-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.maliyet-summary-item .sum-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Şeridin sonucu: kalemlerden ayrılan, büyütülmüş nihai fiyat */
.maliyet-summary-item.vurgu {
  padding-left: 20px;
  border-left: 2px solid var(--accent-blue);
}
.maliyet-summary-item.vurgu .sum-value {
  font-size: 1.7rem;
  color: var(--on-toplam);
}
.maliyet-kumas-info {
  background: rgba(52,168,83,0.06);
  border: 1px solid rgba(52,168,83,0.15);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: none;
}
.maliyet-kumas-info.visible { display: block; }
.maliyet-kumas-info strong { color: var(--text-primary); }

/* ==========================================
   KUMAŞ LİSTELERİ (Örme / Dokuma)
   Excel sayfalarının kolon grupları
   ========================================== */
/* Grup hücreleri onlarca kolon genişliğinde olabildiği için etiket ortalanmaz;
   ortalanırsa yazı ekranın dışında kalır. Etiket, hücre içinde yapışkandır:
   sabit kolonların (No + Kumaş Kısa Tanım = 304px) sağında durur ve grup
   ekranda olduğu sürece görünür kalır. */
.kumas-table thead tr.group-header th {
  border-right: 2px solid var(--border-default);
  text-align: left;
  padding: 0;
}
.kumas-table thead tr.group-header .grp-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: sticky;
  left: 304px;
  padding: 8px 12px;
}

/* ---- Grup daralt / genişlet ---- */
.kumas-table .grp-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.kumas-table .grp-toggle:hover {
  opacity: 1;
  background: rgba(148, 163, 184, 0.14);
}
.kumas-table .grp-ad { white-space: nowrap; }
.kumas-table .grp-say {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(148, 163, 184, 0.14);
  opacity: 0.8;
}
.kumas-table thead tr.group-header th.grp-kapali { opacity: 0.75; }

/* Daraltılmış, sabit kolonu olmayan grubun tek hücresi */
.kumas-table thead th.th-stub {
  min-width: 46px;
  max-width: 46px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
}
.kumas-table thead th.th-stub:hover { color: var(--accent-blue); }
.kumas-table tbody td.td-stub {
  text-align: center;
  color: var(--text-muted);
  opacity: 0.4;
  min-width: 46px;
  max-width: 46px;
}

/* ==========================================
   KUMAŞ KARTLARI — dar ekran / saha görünümü
   Örme 154, Dokuma 171 kolonluk tablo telefona sığmaz (gerçek genişlik
   16.500–18.700 px). Kart görünümü tabloyu değiştirir, tablo hiç basılmaz.
   ========================================== */
.kumas-kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  padding: 4px 0;
}
.kk-kart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.kk-kart-ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.kk-kart-kod {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-blue);
}
.kk-kart-tip { font-size: 0.75rem; color: var(--text-muted); text-align: right; }
.kk-kart-ad {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.kk-kart-fiyat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
}
.kk-kart-tutar {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-teal);
  font-variant-numeric: tabular-nums;
}
.kk-kart-tutar.kk-kart-yok { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); }
.kk-kart-birim { font-size: 0.76rem; color: var(--text-muted); }
.kk-kart-usd { margin-left: auto; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-secondary); }
.kk-kart-kalem {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-secondary);
}
.kk-kart-kalem span { display: flex; gap: 5px; }
.kk-kart-kalem i {
  font-style: normal;
  font-family: var(--font-sans, inherit);
  color: var(--text-muted);
}
.kk-kart-tahmin { color: var(--accent-purple); }
/* İplik kartı: alt satırdaki düğmeler (Düzenle, Numaralar, İlave İşlem, Proses, Maliyet, Maliyet Formu) */
.kk-kart-aksiyon { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.kk-kart-aksiyon .btn { padding: 4px 9px; font-size: 0.74rem; }
/* Should-cost benchmark tablosu: aralık dışı ölçü */
.tk-benchmark td { white-space: nowrap; }
.tk-benchmark .tk-disari { color: var(--accent-amber, #d97706); font-weight: 600; }
/* İplik kayıt formu (Düzenle / Kayıt Oluştur): alanlar ızgarada */
.ikf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px 14px;
  margin-bottom: 12px;
}
.ikf-alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ikf-alan label { font-size: 0.74rem; color: var(--text-secondary); }
.ikf-alan .form-input, .ikf-alan .form-select { width: 100%; }
.kk-kart-btn {
  margin-top: 2px;
  min-height: 44px;          /* dokunma hedefi */
  justify-content: center;
}
.toolbar-ara .filter-select { min-width: 200px; }

/* ==========================================
   DAR EKRAN — saha kullanımı (≤ 760px)
   Hedef: fiyat bakma ve tek kumaşı düzeltme.
   ========================================== */
@media (max-width: 760px) {
  /* Dokunma hedefleri: Apple/Google alt sınırı 44px */
  .btn, .btn-sm { min-height: 44px; padding: 10px 16px; }
  .btn-row-edit, .btn-row-delete, .btn-git, .btn-filtre-temizle,
  .fm-sekme-btn, .mf-merkez-btn, .kk-bolum-bas, .grp-toggle {
    min-height: 44px;
    min-width: 44px;
  }
  .btn-git { padding: 10px 14px; }
  .cell-input, .cell-select, .filter-select, .form-input, .form-select {
    min-height: 40px;
    font-size: 0.9rem;       /* iOS 16px altı girdide sayfayı yakınlaştırır */
  }
  .cell-input, .cell-select { font-size: 16px; }

  /* Araç çubuğu ve filtreler tek kolona iner */
  .toolbar-left, .toolbar-right { flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbar-filter { display: flex; align-items: center; gap: 8px; }
  .toolbar-filter .filter-select, .toolbar-ara .filter-select { flex: 1; min-width: 0; }
  .toolbar-right .btn { width: 100%; }

  /* Kartlar tek kolon */
  .kumas-kartlar { grid-template-columns: 1fr; }

  /* Maliyet Formu: iki kolonlu ızgaralar tek kolona */
  .maliyet-grid { grid-template-columns: 1fr; gap: 14px; padding: 0; }
  .maliyet-form-row,
  .maliyet-form-row.triple { grid-template-columns: 1fr; }
  .maliyet-summary-card { flex-direction: column; align-items: flex-start; gap: 14px; }
  .maliyet-summary-item { border-left: none !important; padding-left: 0 !important; }

  /* Kendi Kumaşını Yap: fiyat paneli yapışkan kalmasın, üstte dursun */
  .kk-govde { grid-template-columns: 1fr; }
  .kk-fiyat { position: static; }
  .kk-izgara { grid-template-columns: 1fr; }
  .kk-baslik { flex-direction: column; align-items: stretch; gap: 10px; }
  .kk-hesap-izgara { grid-template-columns: 1fr; }

  /* Sola sabitlenen kolonlar 304px ile ekranın %78'ini yiyor: yalnızca ilk
     kolon sabit kalır, kalanlar normal akışa döner. */
  .wide-table .scol-2, .wide-table .scol-3, .wide-table .scol-4 {
    position: static;
    left: auto;
  }
  /* Mobilde de dar: iki satırlık kesme zaten metni sığdırıyor. DİKKAT — bu
     blok `.kumas-table .scol-1` tanımından ÖNCE geldiği için aynı özgüllükteki
     bildirim aşağıdakine yeniliyor; ikisi de 130 olduğu için sorun yok. */
  .kumas-table .scol-1 { min-width: 130px; max-width: 130px; }
  .kumas-table thead tr.group-header .grp-label,
  .kumas-table thead tr.kl-grup-satir .grp-label { position: static; left: auto; }

  /* Fiyat Motoru ve validasyon üst şeritleri.
     DİKKAT: `.kl-*` kurallarının geri kalanı dosyanın SONUNDAKİ mobil bloktadır
     — bu blok `.kl-ust` tanımından ÖNCE geldiği için aynı özgüllükteki
     bildirimler burada yazılsa kaybediyordu. */
  .fm-donem { flex-direction: column; align-items: stretch; }
  .fm-donem-sag { margin-left: 0; }
  .fm-donem-sag .filter-select { width: 100%; max-width: none; }
  .fm-sekme { overflow-x: auto; flex-wrap: nowrap; }
  .fm-sekme-btn { white-space: nowrap; }
  .val-ozet { grid-template-columns: 1fr; }
  .fm-notlar { grid-template-columns: 1fr; }

  /* Modallar tam ekrana yakın */
  .modal { max-width: 100%; width: 100%; margin: 0; border-radius: 0; max-height: 100vh; }
}

/* ==========================================
   MASRAF LİSTESİ — kolon filtreleri
   Başlık satırının altında, her filtrelenebilir kolonun kendi menüsü.
   ========================================== */
#masrafTable thead tr.filtre-satiri th {
  padding: 4px 6px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
}
.filtre-select {
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 0.74rem;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.filtre-select:hover { border-color: var(--border-hover); }
.filtre-select:focus {
  outline: none;
  border-color: var(--border-focus);
  background-color: var(--bg-input-focus);
}
/* Etkin filtre görsel olarak ayırt edilir */
.filtre-select.dolu {
  color: var(--accent-teal);
  border-color: rgba(20, 184, 166, 0.45);
  background: rgba(20, 184, 166, 0.07);
  font-weight: 600;
}
.btn-filtre-temizle {
  width: 22px;
  height: 22px;
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--accent-rose);
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.28);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-filtre-temizle:hover { background: rgba(244, 63, 94, 0.18); border-color: var(--accent-rose); }
/* Ortak kolon filtresi satırı — bütün listelerde aynı görünüm (kullanıcının
   isteği: her listede başlık-altı filtre). Masraf Listesi'nin id'li kuralı
   kendi zeminini korur. */
.data-table thead tr.filtre-satiri th {
  padding: 4px 6px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
}
.masraf-filtre-ozet { font-size: 0.75rem; color: var(--text-secondary); }
.masraf-filtre-ozet strong { color: var(--accent-teal); }

/* ==========================================
   MALİYET FORMU — maliyet merkezi seçici
   Form uçtan uca: ürün maliyeti merkezlerin toplamıdır. Bugün yalnızca Kumaş
   merkezinin hesabı var; diğerleri hazırlık durumunu gösterir.
   ========================================== */
.mf-merkez {
  padding: 14px 18px 16px;
  margin-bottom: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.mf-merkez-bas {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 11px;
}
.mf-merkez-not {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.mf-merkez-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-merkez-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 128px;
  padding: 9px 14px;
  font-family: inherit;
  text-align: left;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast),
              background var(--transition-fast);
}
.mf-merkez-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.mf-merkez-btn.aktif {
  color: var(--accent-teal);
  border-color: var(--accent-teal);
  background: rgba(20, 184, 166, 0.08);
}
.mf-merkez-btn.pasif .mf-merkez-ad { color: var(--text-muted); }
.mf-merkez-btn.aktif .mf-merkez-ad { color: var(--accent-teal); }
.mf-merkez-ad { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.mf-merkez-durum {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Motoru yazılmamış merkezin hazırlık paneli */
.mf-hazirlik {
  padding: 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-amber);
  border-radius: var(--radius-md);
  max-width: 78ch;
}
.mf-hazirlik-bas { font-size: 1.02rem; font-weight: 600; color: var(--text-primary); }
.mf-hazirlik-ac {
  margin: 8px 0 14px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.mf-hazirlik-liste { margin: 0; padding-left: 22px; }
.mf-hazirlik-liste li {
  margin: 9px 0;
  font-size: 0.87rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.mf-ok { color: var(--accent-green); font-weight: 600; }
.mf-eksik { color: var(--accent-amber); font-weight: 600; }
.m-kod {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 1px 6px;
  margin: 1px 2px;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 3px;
}

/* ==========================================
   MODEL MALİYET — Maliyet Formu'nun son alanı
   ========================================== */
.mm-blok {
  margin-top: 22px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

/* TEK ŞERİT — kimlik alanları · fiyatlar · ürün resmi.
   Şeridin yüksekliğini resim belirler (128px); kimlik ızgarası ve fiyat
   kartları buna göre sıkıştırılmıştır.
   YAPIŞKAN: aşağı inildikçe ekranda kalır. `top` değeri sekme çubuğunun
   yüksekliğine göre modelSeritSabitle() ile ölçülerek yazılır. Zemin OPAK
   olmak zorunda (--bg-serit): altından tablo satırları geçiyor. Negatif
   kenar boşlukları şeridi kartın kenarlarına yaslar, yoksa yanlardan içerik
   sızar. */
.mm-serit {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 14px;
  margin: -20px -20px 16px;
  padding: 14px 20px;
  background: var(--bg-serit);
  border-bottom: 1px solid var(--border-default);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Beş kolon sabit: ilk satırda kimlik (Müşteri … Model Tanımı), ikinci satırda
   Ürün Türü · Form No · Revizyon. auto-fit kullanılsaydı geniş ekranda hepsi
   tek satıra dizilirdi. */
/* Dört kolon sabit: ilk satırda kimlik (Müşteri … Style No), ikinci satırda
   Model Tanımı · Ürün Türü · Form No · Revizyon. auto-fit kullanılsaydı geniş
   ekranda hepsi tek satıra dizilirdi. */
.mm-serit-kimlik {
  flex: 1 1 420px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 12px;
  align-content: start;
}
@media (max-width: 1100px) { .mm-serit-kimlik { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Kutu başlıkları açık mor; kutuların kendisi çerçeveli olmalı — `.cell-input`
   varsayılan olarak saydam ve çerçevesiz olduğu için burada veri girilebildiği
   anlaşılmıyordu. */
.mm-serit-kimlik .mm-alan > label {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--on-purple);
}
.mm-serit-kimlik .cell-input {
  padding: 4px 8px;
  font-size: 0.82rem;
  background: var(--bg-input);
  border-color: var(--border-default);
}
.mm-serit-kimlik .cell-input:hover { border-color: var(--border-hover); }
.mm-serit-kimlik .cell-input::placeholder { color: var(--text-muted); }
.mm-serit-fiyat { display: flex; gap: 10px; align-items: stretch; }
.mm-serit-fiyat .mm-baslik-sonuc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 150px;
  padding: 8px 16px;
}
/* Şeridin en görünür iki sayısı: tavsiye ve satış fiyatı */
.mm-serit-fiyat .mm-bs-deger { font-size: 1.75rem; }
.mm-serit-fiyat .mm-bs-deger span { font-size: 0.82rem; }

/* Şeridin sonundaki iki resim: modelin önü ve arkası */
.mm-resimler { display: flex; gap: 10px; }
.mm-resim {
  position: relative;
  flex: 0 0 132px;
  width: 132px;
}
.mm-resim-etiket {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 1px 7px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 20px;
}
.mm-resim img {
  display: block;
  width: 100%;
  height: 128px;
  object-fit: contain;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: zoom-in;
}
.mm-resim .sh-resim-sil { top: 6px; right: 6px; width: 20px; height: 20px; }
.mm-resim-bos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 128px;
  padding: 8px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  line-height: 1.4;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border: 2px dashed var(--border-hover);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.mm-resim-bos strong {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.mm-resim-bos small { font-size: 0.64rem; opacity: 0.85; }
.mm-resim-ikon { font-size: 1.4rem; line-height: 1; }
.mm-resim-bos:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.mm-baslik-sonuc {
  padding: 10px 18px;
  text-align: right;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.mm-bs-etiket {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}
.mm-bs-deger {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--accent-teal);
  font-variant-numeric: tabular-nums;
}
.mm-bs-deger span { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.mm-bs-tavsiye { color: var(--accent-amber); }
.mm-bs-alt { font-size: 0.74rem; color: var(--text-muted); }

.mm-alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mm-alan > label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mm-ikili { display: flex; gap: 6px; }
.mm-ikili input { min-width: 0; }

/* Aşama tablosu */
.mm-tablo-sar {
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}
.mm-tablo { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.mm-tablo thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 10px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-thead);
  background: var(--bg-thead);
  border-bottom: 1px solid var(--border-default);
}
.mm-tablo tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.mm-tablo tbody tr:hover td { background: var(--bg-row-hover); }
.mm-k-no { width: 40px; }
.mm-k-ad { width: 150px; }
.mm-k-ack { min-width: 190px; }
.mm-k-kyn { width: 220px; }
.mm-k-sy { width: 104px; text-align: right !important; }
.mm-k-dv { width: 78px; }
.mm-no { font-family: var(--font-mono); color: var(--text-muted); text-align: center; }
.mm-ad { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.mm-sag { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mm-tutar { color: var(--text-primary); font-weight: 600; }
.mm-pay { color: var(--text-muted); font-size: 0.78rem; }
.mm-hedef { color: var(--accent-amber); }
.mm-tablo input.mm-sayi { text-align: right; }
.mm-kilit {
  color: var(--accent-teal);
  border-style: dashed;
  cursor: not-allowed;
}
.mm-bagli .mm-ad { color: var(--accent-teal); }
/* Kaynak sütunu KADEMELİ menü taşır: kumaşta dört, masrafta üç seçici alt
   alta durur. Etiket yerine her seçicinin ilk seçeneği kademeyi adlandırır —
   sütun 220 px ve etiketler satırı gereksiz yükseltirdi. */
.mm-kyn { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mm-kyn-sec { max-width: 100%; font-size: 0.76rem; }
/* İlk kademe (kaynak türü) diğerlerinden ayrılsın: seçim onunla başlıyor */
.mm-kyn-sec[data-mm-kyn="tur"] { font-weight: 600; }
.mm-kaynak-hata {
  margin-top: 3px;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--accent-amber);
}

/* Grup şeridi */
.mm-tablo tr.mm-grup td {
  padding: 7px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-thead-grup);
  background: var(--bg-thead-grup);
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
}
.mm-grup-ac { display: inline-block; width: 12px; color: inherit; }
.mm-tablo tr.mm-net td {
  padding: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-hover);
}

/* Parametre kutuları */
.mm-param {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.mm-param-kutu {
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.mm-param-bas {
  margin-bottom: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-blue);
}
.mm-param-ic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Sonuç kartları */
.mm-sonuc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.mm-kart {
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.mm-kart-etiket {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mm-kart-deger {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.mm-kart-alt { margin-top: 3px; font-size: 0.72rem; line-height: 1.45; color: var(--text-muted); }
.mm-kart-sonuc { border-color: var(--accent-teal); background: rgba(20, 184, 166, 0.08); }
.mm-kart-sonuc .mm-kart-deger { color: var(--accent-teal); font-size: 1.35rem; }
.mm-kart-uyari { border-color: var(--accent-amber); }
.mm-kart-uyari .mm-kart-deger { color: var(--accent-amber); }
.mm-not {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 100ch;
}

/* ---- Kumaş sarfiyat hesabı (Model Maliyet'in yanındaki alan) ---- */
.sh-blok { margin-top: 18px; }
.sh-kart {
  padding: 14px;
  margin-bottom: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.sh-ust { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sh-sira {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  background: var(--gradient-primary);
  border-radius: 50%;
}
.sh-ad { flex: 1 1 auto; min-width: 0; }
/* Kart içindeki silme düğmesi. `.btn-row-delete` tablo satırında hover ile
   açılıyor (`opacity: 0`), kartta ise hiç görünmüyordu — burada kalıcı olarak
   dolu ve KOYU KIRMIZI: üç görünüm modunun zemininde de okunur. */
.sh-sil {
  flex: 0 0 auto;
  opacity: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--sil-koyu);
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: var(--radius-sm);
}
.sh-sil:hover { color: #fff; background: var(--sil-koyu-hover); }

/* Ölçü Tablosu Yükle kalıbındaki tablo resmi */
.sh-olcu-resim {
  position: relative;
  margin: 10px 0 0;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}
.sh-olcu-resim img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: var(--bg-input);
  border-radius: 4px;
  cursor: zoom-in;
}
.sh-olcu-resim figcaption {
  margin-top: 5px;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.sh-resim-sil {
  position: absolute;
  top: 26px;
  right: 12px;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--sil-koyu);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  cursor: pointer;
}
.sh-resim-sil:hover { background: var(--sil-koyu-hover); }
.sh-resim-alan {
  padding: 26px 18px;
  margin-bottom: 12px;
  text-align: center;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 2px dashed var(--border-hover);
  border-radius: var(--radius-md);
}
.sh-resim-alan:focus { outline: none; border-color: var(--accent-blue); }
.sh-resim-ikon { font-size: 2rem; margin-bottom: 6px; }
.sh-resim-dugmeler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.sh-resim-dugmeler label { margin: 0; cursor: pointer; }

.sh-kutu {
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.sh-kutu:last-child { margin-bottom: 0; }
.sh-kutu-bas {
  margin-bottom: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-blue);
}
.sh-secim { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-btn {
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast),
              background var(--transition-fast);
}
.sh-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.sh-btn.aktif {
  color: #fff;
  background: var(--gradient-primary);
  border-color: transparent;
}
/* Formülü henüz verilmemiş kalıp: seçilebilir ama sonuç üretmez */
.sh-btn-bekle { border-style: dashed; }

.sh-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.sh-brm { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.sh-formul {
  margin-top: 10px;
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--bg-input);
  border-left: 2px solid var(--accent-blue);
  border-radius: var(--radius-sm);
}
/* Ölçü tablosu yükleme alanı */
.sh-dosya {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.sh-dosya-btn { cursor: pointer; margin: 0; }
.sh-dosya-bilgi { display: flex; flex-direction: column; min-width: 0; }
.sh-dosya-bilgi strong {
  font-size: 0.82rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sh-dosya-bilgi span { font-size: 0.72rem; color: var(--text-muted); }
.sh-onizleme {
  margin-top: 10px;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.sh-onizleme-tablo { border-collapse: collapse; font-size: 0.74rem; }
.sh-onizleme-tablo td {
  padding: 4px 8px;
  white-space: nowrap;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
}
.sh-onizleme-tablo tr:first-child td {
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-input);
}
.sh-onizleme-not { padding: 4px 8px; font-size: 0.7rem; color: var(--text-muted); }
.sh-esleme {
  margin-top: 10px;
  font-size: 0.74rem;
  line-height: 2;
  color: var(--text-muted);
}
.sh-eslesme-cip {
  display: inline-block;
  margin: 0 5px;
  padding: 2px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--on-teal);
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: 20px;
}
.sh-cip-nötr {
  color: var(--on-slate);
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.3);
}
.sh-eksik-deger { opacity: 0.6; }
.sh-eksik-deger span { font-size: 0.72rem; }

.sh-varsayilan {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--on-amber);
}
.sh-not {
  margin-top: 8px;
  padding: 7px 10px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--accent-amber);
  background: rgba(245, 158, 11, 0.08);
  border-left: 2px solid var(--accent-amber);
  border-radius: var(--radius-sm);
}
/* Yapıştırma penceresindeki ölçü tablosu resmi */
.sh-yapistir-resim { margin-bottom: 14px; }
.sh-yapistir-resim img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}
/* Çizgili onay kutusu — ölçü ızgarasının bir hücresi */
.sh-onay {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg-input-durgun);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.sh-onay input { width: 16px; height: 16px; accent-color: var(--accent-blue); cursor: pointer; }
.sh-onay span { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); }
.sh-onay:hover { border-color: var(--border-hover); }

/* Kumaş listesi altbilgisindeki "boş kolonlar gizlendi" bağlantısı */
.kl-bos-link {
  color: var(--accent-blue);
  text-decoration: underline dotted;
  cursor: pointer;
}
.kl-bos-link:hover { color: var(--on-blue); }

/* Değişiklik günlüğü */
.gn-tip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--border-input);
}
.gn-ekleme { color: var(--on-green); }
.gn-degisiklik { color: var(--on-amber); }
.gn-silme { color: var(--on-rose); }
.gn-eski { color: var(--text-muted); text-decoration: line-through; }
.gn-yeni { color: var(--text-primary); font-weight: 600; }

/* Gündem Maddeleri — paydaş notları = Yönetici'nin (ajanın) iş listesi.
   Renkler yalnızca değişkenlerden: üç temada da ayrı tanımlı --on-* / --accent-* tonları. */
.gd-uyari {
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-blue);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.6;
}
.gd-uyari code { font-size: 0.78rem; padding: 1px 5px; border-radius: 4px; background: var(--bg-kart-bas); color: var(--text-primary); }
.gd-uyari .btn { margin: 0 6px; }
.gd-uyari-yerel { border-left-color: var(--accent-amber); }
.gd-uyari-hata { border-left-color: var(--accent-rose); color: var(--on-rose); }
.gd-not { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; }
.gd-uyari .gd-not { display: block; margin-top: 2px; }

.gd-sayaclar { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin-bottom: 14px; }
.gd-sayac {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 128px;
  padding: 9px 13px;
  border: 1px solid var(--border-default);
  border-bottom: 3px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.gd-sayac:hover { border-color: var(--border-hover); }
.gd-sayac.aktif { background: var(--bg-kart-bas); border-color: var(--border-focus); }
.gd-sayac-etiket {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  font-weight: 700;
}
.gd-sayac-deger { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.gd-s-onay_bekliyor { border-bottom-color: var(--accent-amber); }
.gd-s-onay_bekliyor .gd-sayac-deger { color: var(--on-amber); }
.gd-s-onaylandi { border-bottom-color: var(--accent-blue); }
.gd-s-onaylandi .gd-sayac-deger { color: var(--on-blue); }
.gd-s-tamamlandi { border-bottom-color: var(--accent-green); }
.gd-s-tamamlandi .gd-sayac-deger { color: var(--on-green); }
.gd-s-silindi .gd-sayac-deger { color: var(--text-muted); }
.gd-s-beklemede { border-bottom-color: var(--accent-purple); }
.gd-s-beklemede .gd-sayac-deger { color: var(--on-purple); }
.gd-s-iptal { border-bottom-color: var(--accent-rose); }
.gd-s-iptal .gd-sayac-deger { color: var(--on-rose); }
.gd-yenile { margin-left: auto; align-self: center; }
/* Filtre çubuğu (durum · ilgili alan · aktaran) */
.gd-filtre-cubuk { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 0 0 10px; }
.gd-filtre-alan { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-secondary); }
.gd-filtre-alan .cell-select { min-width: 180px; max-width: 280px; }

.gd-form {
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.gd-form-bas { font-size: 0.8rem; font-weight: 700; margin-bottom: 10px; }
.gd-form .kh-form-dugme { align-items: center; }
textarea.gd-metin { min-height: 84px; line-height: 1.5; }

.gd-tablo td { vertical-align: top; }
.gd-tablo .gd-no { width: 48px; text-align: center; font-weight: 700; }
.gd-tablo .gd-tarih { white-space: nowrap; }
.gd-tablo .gd-madde-th { min-width: 320px; }
.gd-tablo .gd-tam-th { min-width: 160px; }
.gd-madde, .gd-tablo td.gd-madde, .gd-iz td.gd-madde { white-space: pre-wrap; line-height: 1.5; max-width: 520px; min-width: 260px; }
.gd-tablo td.gd-tam { white-space: normal; min-width: 150px; }
.gd-footer .row-count { white-space: nowrap; }
.gd-bos { color: var(--text-muted); }
.gd-kucuk { font-size: 0.7rem; color: var(--text-muted); margin-top: 3px; white-space: nowrap; }
.gd-onay-kutu { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.78rem; white-space: nowrap; }
.gd-onay-kutu input { width: 16px; height: 16px; accent-color: var(--accent-blue); cursor: pointer; }
.gd-onay-kutu input:disabled { cursor: not-allowed; }
.gd-rozet {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--border-input);
  background: var(--bg-kart-bas);
}
.gd-r-onay_bekliyor { color: var(--on-amber); }
.gd-r-onaylandi { color: var(--on-blue); }
.gd-r-tamamlandi { color: var(--on-green); border-color: var(--accent-green); }
.gd-r-silindi { color: var(--text-muted); }
.gd-r-beklemede { color: var(--on-purple); border-color: var(--accent-purple); }
.gd-r-iptal { color: var(--on-rose); border-color: var(--accent-rose); }
.gd-ozel-not { font-size: 0.72rem; color: var(--text-secondary); margin-top: 3px; white-space: pre-wrap; max-width: 220px; }
.gd-tik { color: var(--on-green); font-weight: 900; font-size: 1rem; }
.gd-tam-tarih { white-space: nowrap; font-weight: 600; }
.gd-tam-not { white-space: pre-wrap; font-size: 0.78rem; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
/* Tamamlanma açıklaması: kapalıyken tek satır özet (…), tıklayınca tam metin. */
.gd-tam-ac { margin-top: 3px; max-width: 260px; }
.gd-tam-ac > summary {
  display: flex; align-items: center; gap: 4px; cursor: pointer; list-style: none;
  font-size: 0.75rem; color: var(--text-muted);
}
.gd-tam-ac > summary::-webkit-details-marker { display: none; }
.gd-tam-ac > summary::before { content: '▸'; flex: 0 0 auto; color: var(--text-muted); }
.gd-tam-ac[open] > summary::before { content: '▾'; }
.gd-tam-ac > summary:hover { color: var(--text-primary); }
.gd-tam-ozet { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-tam-ac[open] .gd-tam-ozet { display: none; }
.gd-tam-ac[open] > summary::after { content: 'Açıklamayı gizle'; }
.gd-tam-ac[open] { max-width: 420px; }
.gd-tablo td.gd-islem { white-space: normal; min-width: 170px; max-width: 210px; }
.gd-islem .btn { margin: 0 2px 4px 0; }
.gd-islem .gd-sil:hover { color: var(--accent-rose); }
.gd-satir.gd-d-tamamlandi td:first-child { box-shadow: inset 3px 0 0 var(--accent-green); }
.gd-satir.gd-d-onaylandi td:first-child { box-shadow: inset 3px 0 0 var(--accent-blue); }
.gd-satir.gd-d-silindi td { opacity: 0.55; }
.gd-satir.gd-d-beklemede td:first-child { box-shadow: inset 3px 0 0 var(--accent-purple); }
.gd-satir.gd-d-iptal td:first-child { box-shadow: inset 3px 0 0 var(--accent-rose); }
.gd-satir.gd-d-iptal .gd-madde { color: var(--text-muted); }
.gd-satir.gd-d-silindi .gd-madde { text-decoration: line-through; }
.gd-modal-p { color: var(--text-secondary); line-height: 1.7; }
.modal.gd-modal { max-width: 760px; width: 100%; }
.gd-iz td { vertical-align: top; }
@media (max-width: 768px) {
  .gd-sayac { min-width: 0; flex: 1 1 42%; }
  .gd-yenile { margin-left: 0; }
  .gd-madde { max-width: none; min-width: 240px; }
}

/* İplik numarası: ana kolon + türetilen üç kolon.
   Türetilenler SALT OKUNUR DEĞİLDİR — yazılırsa birim o kolona geçer; bu
   yüzden .mm-kilit'in "not-allowed" görünümü değil, yalnızca soluk bir ton
   ve kesik çerçeve kullanılır. */
.ip-no { text-align: right; }
.ip-turev {
  color: var(--text-muted);
  border-style: dashed;
}
.ip-turev:focus { color: var(--text-primary); border-style: solid; }
/* Numara penceresinde bu kalitede fiilen kullanılan numaralar */
.ip-kullanilan { background: var(--bg-input-durgun); }
.ip-kullanilan td { color: var(--text-primary); }

/* "Listeye Ekle" — düzenleyicideki en belirgin eylem */
.kk-ekle {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 16px;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}
.kk-ekle:hover { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.24); }

/* Maliyet Formu içinde açılan kumaş düzenleyici — ayrı sekmeye gidilmez */
/* Gündem #35 — Satış fiyatı · üretim süresi · karbon: bütün merkezlerde
   seçimlerin altındaki ortak blok. Kartlar mfKart() ile, renkler değişkenden. */
.mf-cikti {
  margin: 0 20px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border-default);
}
.mf-cikti-bas {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mf-cikti-girdi {
  display: grid;
  /* 125px: dokuz girdi (DDP dâhil) geniş ekranda tek satıra sığar */
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 10px 14px;
  margin-bottom: 16px;
}
.mf-cikti-girdi .form-group { margin-bottom: 0; }
.mf-cikti-sabit { padding: 7px 0; font-weight: 600; }
.mf-cikti-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.mf-cikti-eksik { color: var(--accent-amber); }
/* Sonuç kutuları (kullanıcının isteği, 03.10.2026): dört kartın sonucu kartın
   EN ALTINDA ve aynı hizada. Izgara kartları eşit boya gerer; gövde esner,
   kutu dibe oturur. Kutu dört kartta aynı dört satırdır → aynı yükseklik. */
.mf-cikti-grid > .maliyet-card { display: flex; flex-direction: column; }
.mf-cikti-govde { flex: 1 1 auto; padding-bottom: 14px; }
.maliyet-card .sum-total.mf-cikti-sonuc {
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: 0;
  text-align: center;
}
.mf-cikti-sonuc .mf-cikti-ikinci {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  min-height: 1.3em;
}
/* Değer rengi türe göre; zemin hep TOPLAM yeşili. Karbon `--on-toplam` kalır. */
.maliyet-card .mf-cikti-maliyet .sum-value, .mf-cikti-maliyet .mf-cikti-ikinci { color: var(--on-toplam-maliyet); }
.maliyet-card .mf-cikti-satis .sum-value, .mf-cikti-satis .mf-cikti-ikinci { color: var(--on-toplam-satis); }
.maliyet-card .mf-cikti-termin .sum-value, .mf-cikti-termin .mf-cikti-ikinci { color: var(--on-toplam-termin); }
.mf-cikti-karbon .mf-cikti-ikinci { color: var(--on-toplam); }
/* Landed (Plan 1 · Faz 4) satış rengini paylaşır */
.maliyet-card .mf-cikti-landed .sum-value, .mf-cikti-landed .mf-cikti-ikinci { color: var(--on-toplam-satis); }
.ulke-test ul { margin: 4px 0 0 18px; padding: 0; font-size: 0.8rem; }
.ulke-test li { margin: 2px 0; }
/* Gündem #37 — Model Maliyet / Uçtan Uca aşama bazında karbon ve termin */
.mm-cikti { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-default); }
.mm-cikti-tablo td.mm-cikti-alt { padding-left: 22px; color: var(--text-muted); }
/* Açılır kapanır bölüm (acilirHtml): özet satırı tıklanır, ok yönü durumu gösterir */
.acilir { margin-top: 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.acilir > summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 0.82rem; font-weight: 700; color: var(--text-primary); user-select: none; }
.acilir > summary::-webkit-details-marker { display: none; }
.acilir > summary::before { content: '▸'; flex: 0 0 auto; color: var(--text-muted); }
.acilir[open] > summary::before { content: '▾'; }
.acilir[open] > summary { border-bottom: 1px solid var(--border-default); }
.acilir > summary:hover { background: var(--bg-kart-bas); }
.acilir { overflow-x: auto; }
.acilir > table { width: 100%; }
.maliyet-card > .acilir { margin-bottom: 18px; }
/* Aşamalar arası rota: durak başına bir satır; taşıma sonraki durağa gidiştir */
.mm-rota { margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-card); }
.mm-rota-bas { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.mm-rota-satir { display: grid; grid-template-columns: 22px minmax(140px, 1.3fr) minmax(120px, 1fr) minmax(150px, 1fr) 90px minmax(150px, 1fr) 34px; gap: 8px; align-items: center; margin-bottom: 6px; }
.mm-rota-no { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-muted); text-align: right; }
.mm-rota-km, .mm-rota-sonuc, .mm-rota-son { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; }
.mm-rota-km { font-family: 'JetBrains Mono', monospace; text-align: right; }
.mm-rota-son { color: var(--text-muted); }
.mm-rota-alt { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
@media (max-width: 760px) { .mm-rota-satir { grid-template-columns: 22px 1fr 1fr; } }
.mf-duzenle {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid var(--accent-teal);
}

/* ---- Teknik Kütüphane ---- */
.tk-ozet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--bg-input-durgun);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
}
.tk-ozet-kutu {
  display: flex;
  flex-direction: column;
  min-width: 74px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.tk-ozet-kutu span {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-teal);
  line-height: 1.1;
}
.tk-ozet-not { flex: 1; min-width: 240px; font-size: 0.75rem; color: var(--text-muted); }

.tk-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.tk-kart {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--bg-input-durgun);
  border: 1px solid var(--border-input);
  border-left: 3px solid var(--border-input);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tk-kart:hover { border-color: var(--border-hover); }
.tk-kart.tanimli { border-left-color: var(--accent-teal); }
.tk-kart-resim {
  flex: 0 0 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-overlay);
  border-radius: var(--radius-sm);
}
.tk-kart-resim img { width: 100%; height: 100%; object-fit: cover; }
.tk-resim-yok { font-size: 0.66rem; color: var(--text-muted); text-align: center; }
.tk-kart-govde { flex: 1; min-width: 0; }
.tk-kart-ad {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.tk-kart-kaynak { font-size: 0.7rem; margin-bottom: 4px; }
.tk-kart-ac {
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tk-kart-ac.tk-katalog { color: var(--text-muted); font-style: italic; }
.tk-resim-yuva {
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-overlay);
  border: 1px dashed var(--border-input);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tk-resim-yuva img { max-width: 100%; max-height: 260px; object-fit: contain; }
/* İki bölüm (Teknik Bilgiler / Teknik Kelime Anlamları) ve merkez çipleri */
.tk-bolumler {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.tk-bolum {
  padding: 8px 14px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-input-durgun);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.tk-bolum span, .tk-merkez span {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.tk-bolum.aktif {
  color: var(--text-primary);
  border-color: var(--accent-teal);
  border-bottom: 3px solid var(--accent-teal);
}
.tk-merkezler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.tk-merkez {
  padding: 4px 10px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  background: var(--bg-input-durgun);
  border: 1px solid var(--border-input);
  border-radius: 999px;
  cursor: pointer;
}
.tk-merkez.aktif { color: var(--text-primary); border-color: var(--accent-teal); }
.tk-merkez.bos { opacity: 0.55; }
.tk-grup-bas {
  margin: 14px 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 4px;
}
.tk-grup-bas span {
  margin-left: 8px;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--text-muted);
}
/* İplik Bilgisi uyum matrisi: X uyumlu, O uyumsuz */
.tk-matris-sar { overflow-x: auto; margin-bottom: 10px; }
.tk-matris th, .tk-matris td { text-align: center; font-size: 0.74rem; padding: 4px 6px; }
.tk-matris .tk-matris-ad { text-align: left; white-space: nowrap; }
.tk-matris .tk-x { color: var(--accent-teal); font-weight: 700; }
.tk-matris .tk-o { color: var(--text-muted); }

/* İlave işlem penceresi: grup başlığı ve seçili işlem özeti */
.ip-ilave-grup {
  margin: 14px 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-teal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ip-ilave-ozet {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 22px;
  align-items: center;
}

/* İplik proses rotası penceresi */
.ip-proses-bas {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-default);
}
.ip-proses-bas strong { font-size: 0.95rem; color: var(--text-primary); }
.ip-proses-bas span { font-size: 0.78rem; color: var(--text-muted); }
.ip-proses-liste { display: flex; flex-direction: column; gap: 4px; }
.ip-proses {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 10px;
  background: var(--bg-input-durgun);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ip-proses:hover { border-color: var(--border-hover); }
.ip-proses input { width: 16px; height: 16px; accent-color: var(--accent-blue); }
.ip-proses-ad { font-size: 0.86rem; font-weight: 600; color: var(--text-primary); }
.ip-proses-ad em { font-style: normal; font-size: 0.72rem; color: var(--accent-teal); }
.ip-proses-not,
.ip-proses-pay { grid-column: 2; font-size: 0.73rem; color: var(--text-muted); }
.ip-proses-pay { color: var(--on-amber); }

/* AI karşılaştırma tahmini */
.ai-ayar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
.sh-ai {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-default);
}
.sh-ai-sonuc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sh-ai-sonuc strong {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--on-violet);
}
.sh-ai-ust { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.sh-ai-ust .mm-alan { width: 110px; }
.sh-ai-fark { font-size: 0.76rem; font-weight: 600; color: var(--accent-amber); }
.sh-ai-tablo {
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}
.sh-ai-tablo th,
.sh-ai-tablo td {
  padding: 2px 8px;
  text-align: right;
  white-space: nowrap;
  border: 1px solid var(--border-subtle);
}
.sh-ai-tablo th {
  text-align: left;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-input);
}
.sh-ai-not { font-size: 0.72rem; line-height: 1.45; color: var(--text-muted); }
.sh-ai-hata { font-size: 0.76rem; line-height: 1.5; color: var(--accent-rose); }

.sh-hesapla-sar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.sh-hesapla-not { font-size: 0.74rem; color: var(--text-muted); }
.sh-sonuc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.sh-sonuc-deger {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-teal);
  font-variant-numeric: tabular-nums;
}
.sh-sonuc-deger span { font-size: 0.76rem; font-weight: 600; color: var(--text-muted); }
.sh-aktar { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sh-aktar label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sh-aktar select { min-width: 140px; }
.sh-bekle {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--accent-amber);
}
.sh-ekle-sar { margin-top: 4px; }

/* ==========================================
   UYARI HAVUZU — veri bütünlüğü denetimi
   ========================================== */
.uyari-sayac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent-rose);
  border-radius: 9px;
}
.uyari-ozet {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 16px;
}
.uyari-kart {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 108px;
  padding: 14px 18px;
  font-family: inherit;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.uyari-kart:hover { border-color: var(--border-hover); }
.uyari-kart-sayi {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.uyari-kart-ad {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.uyari-kart.uyari-kritik .uyari-kart-sayi { color: var(--accent-rose); }
.uyari-kart.uyari-uyari  .uyari-kart-sayi { color: var(--accent-amber); }
.uyari-kart.uyari-bilgi  .uyari-kart-sayi { color: var(--text-secondary); }
.uyari-kart.aktif.uyari-kritik { border-color: var(--accent-rose); background: rgba(244,63,94,0.07); }
.uyari-kart.aktif.uyari-uyari  { border-color: var(--accent-amber); background: rgba(245,158,11,0.07); }
.uyari-kart.aktif.uyari-bilgi  { border-color: var(--border-hover); background: var(--bg-card-hover); }
.uyari-ozet-not {
  flex: 1 1 320px;
  align-self: center;
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.uyari-liste { display: flex; flex-direction: column; gap: 10px; }
.uyari-madde {
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-md);
}
.uyari-madde.uyari-kritik { border-left-color: var(--accent-rose); }
.uyari-madde.uyari-uyari  { border-left-color: var(--accent-amber); }
.uyari-madde.uyari-bilgi  { border-left-color: var(--text-muted); }
.uyari-madde-ust {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}
.uyari-rozet-kritik { color: var(--accent-rose); background: rgba(244,63,94,0.1); }
.uyari-rozet-uyari  { color: var(--accent-amber); background: rgba(245,158,11,0.1); }
.uyari-rozet-bilgi  { color: var(--text-muted); }
.uyari-kategori {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.uyari-sayi {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.uyari-baslik {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.uyari-detay {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 92ch;
}
.uyari-git { margin-top: 10px; }

/* ==========================================
   FİYAT MOTORU — iç piyasa satış fiyatı
   ========================================== */
.fm-sekme { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.fm-sekme-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast),
              background var(--transition-fast);
}
.fm-sekme-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.fm-sekme-btn.aktif {
  color: var(--accent-teal);
  border-color: var(--accent-teal);
  background: rgba(20, 184, 166, 0.08);
  font-weight: 600;
}
/* İplik / Boya görünümlerinin başındaki dönem şeridi */
.fm-donem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  margin-bottom: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius-sm);
}
.fm-donem-sol { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: 1; }
.fm-donem-etiket {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fm-donem-deger {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-teal);
}
.fm-donem-not { font-size: 0.78rem; color: var(--text-secondary); }
.fm-donem-sag { display: flex; align-items: center; gap: 8px; }
.fm-donem-sag .filter-select { max-width: 190px; }

.fm-degisen { font-size: 0.78rem; color: var(--accent-amber); font-weight: 600; }
.fm-degisti { color: var(--text-muted); text-decoration: line-through; }
.fm-uyari {
  display: inline-block;
  width: 15px;
  height: 15px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  color: var(--accent-amber);
  background: rgba(245, 158, 11, 0.15);
  border-radius: 50%;
}
.fm-notlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}
.fm-not-blok {
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.fm-not-blok h3 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-teal);
}
.fm-not-blok ul { margin: 0; padding-left: 20px; }
.fm-not-blok li {
  margin: 6px 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ==========================================
   VALİDASYON — Eder maliyeti / piyasa uyumu
   ========================================== */
.val-aciklama {
  flex: 1 1 280px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 60ch;
}
.val-ozet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.val-ozet-kart {
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.val-ozet-bas {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.val-ozet-deger {
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent-teal);
  font-variant-numeric: tabular-nums;
}
.val-ozet-deger.val-yok { color: var(--text-muted); }
.val-ozet-sapma { margin-top: 2px; font-size: 0.85rem; font-weight: 600; }
.val-ozet-not { margin-top: 8px; font-size: 0.74rem; line-height: 1.6; color: var(--text-muted); }

.val-iyi   { color: var(--accent-green); }
.val-orta  { color: var(--accent-amber); }
.val-kotu  { color: var(--accent-rose); }

.val-bolum { margin-bottom: 24px; }
.val-bolum-bas {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 4px;
  font-size: 0.92rem;
  color: var(--text-primary);
}
.val-bolum-not { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }
.kl-grup-satir th.val-grp-piyasa {
  color: var(--accent-amber);
  background: rgba(245, 158, 11, 0.08);
}
/* Fiyat Motoru'ndan gelen kalemler — girdi değil, okunan değer */
.kl-grup-satir th.val-grp-fiyat {
  color: var(--accent-purple);
  background: rgba(139, 92, 246, 0.09);
}
.kumas-table td.val-fiyat { background: rgba(139, 92, 246, 0.04); }
.kumas-table td.val-fiyat .cell-select { width: 100%; }
.val-oneri {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 5px;
  color: var(--accent-purple);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 3px;
}

/* Validasyon dönemi şeridi ve dönem uyumu bildirimi */
.val-donem-serit { border-left-color: var(--accent-blue); }
.val-donem-serit .fm-donem-deger { color: var(--accent-blue); }
.val-donem-sec { max-width: 160px; }
.val-uyum-bilgi {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  margin-bottom: 12px;
  font-size: 0.83rem;
  line-height: 1.55;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}
.val-uyum-tamam {
  color: var(--accent-green);
  background: rgba(16, 185, 129, 0.07);
  border-color: rgba(16, 185, 129, 0.28);
}
.val-uyum-farkli {
  color: var(--accent-amber);
  background: rgba(245, 158, 11, 0.07);
  border-color: rgba(245, 158, 11, 0.3);
}
.val-uyum-bilgi strong { color: inherit; }
.kumas-table td.val-girdi { padding: 3px 5px; background: rgba(245, 158, 11, 0.035); }
.kumas-table td.val-girdi .cell-input { width: 100%; text-align: right; }
.kumas-table td.val-girdi .cell-input[type="text"] { text-align: left; }
.val-adet {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  padding: 0 5px;
  color: var(--text-muted);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

/* ==========================================
   KUMAŞ LİSTEM — seçilen kumaşların maliyet özeti
   ========================================== */
.kl-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  padding: 14px 18px;
  margin-bottom: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.kl-alan { display: flex; flex-direction: column; gap: 5px; }
.kl-alan .filter-label { margin: 0; }
.kl-sayi { width: 110px; }
.kl-kod input { width: 170px; }
.kl-kur { justify-content: flex-end; }
.kl-kur-deger {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  color: var(--accent-teal);
  padding: 6px 0;
}
.kl-ust-sag { margin-left: auto; }

/* Grup başlığı satırı: kimlik / maliyet kırılımı / sonuç.
   Satır ayrıca .group-header taşıdığı için daraltma düğmesi, yapışkan etiket
   ve stub biçimlendirmesi kumaş listeleriyle aynı CSS'ten gelir. */
.kumas-table thead tr.kl-grup-satir th {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 0;
  border-bottom: 1px solid var(--border-default);
}
.kumas-table thead tr.kl-grup-satir .grp-label { padding: 6px 10px; }
.kl-ust-sag { display: flex; gap: 8px; align-items: center; }
.kl-grp-kimlik { color: var(--text-muted); background: var(--bg-secondary); }
.kl-grp-maliyet { color: var(--accent-blue); background: rgba(59, 130, 246, 0.07); }
.kl-grp-sonuc { color: var(--accent-teal); background: rgba(20, 184, 166, 0.08); }

.kumas-table td.kl-metin {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.kumas-table td.kl-say {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  white-space: nowrap;
}
.kumas-table td.kl-say.kl-sonuc { color: var(--accent-teal); font-weight: 600; }
.kumas-table td.kl-bos, .kl-bos { color: var(--text-muted); opacity: 0.45; }

.btn-git {
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 9px;
  margin-right: 4px;
  color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.btn-git:hover { background: rgba(59, 130, 246, 0.18); border-color: var(--accent-blue); }
.kumas-table td.col-actions { width: 118px; min-width: 118px; white-space: nowrap; }
.kl-toplam { font-size: 0.8rem; color: var(--text-secondary); }
.kl-toplam strong { color: var(--accent-teal); font-family: 'JetBrains Mono', monospace; }

/* ==========================================
   KENDİ KUMAŞINI YAP — kumaş düzenleyici
   Solda daraltılabilir form bölümleri, sağda sayfayla birlikte kaymayan
   canlı maliyet paneli.
   ========================================== */
.kk-baslik {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  margin-bottom: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.kk-baslik-ad { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kk-baslik-ad strong { font-size: 1.05rem; color: var(--text-primary); }
.kk-baslik-kod { font-size: 0.75rem; color: var(--text-muted); }

/* Düzenleme listedeki kaydı DEĞİL, onun taslağını değiştirir. Rozet ve not bunu
   ekranda da söyler; renkler üç görünüm modunda da değişkenlerden gelir. */
.kk-taslak-rozet {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  color: var(--accent-amber);
  background: var(--bg-input-durgun);
  border: 1px solid var(--accent-amber);
  white-space: nowrap;
}
.kk-taslak-not {
  margin: 8px 0 0;
  padding: 8px 12px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--bg-input-durgun);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-amber);
  border-radius: var(--radius-sm);
}
.kk-taslak-not strong { color: var(--text-primary); }

/* "Kumaşı Düzenle" ve "Temizle" — Kumaş merkezinin kendi ekranında, seçim
   kartının altında. Sekme çubuğundan buraya taşındılar. */
.mf-kumas-eylem {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
}
/* Kartın içinde duran bu iki düğme varsayılan hâlleriyle SOLUK kalıyordu
   (kullanıcı bildirdi): `btn-ghost` saydam zeminli ve --text-muted renkliydi,
   `btn-danger` da primary'den ince dolguluydu. Üçü de aynı gövdeye getirilir;
   renkler üç görünüm modunda da değişkenlerden gelir. */
.mf-kumas-eylem .btn {
  flex: 1;
  justify-content: center;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: var(--radius-md);
}
.mf-kumas-eylem .btn-outline {
  background: var(--bg-input-durgun);
  border: 1px solid var(--accent-blue);
  color: var(--accent-blue);
}
.mf-kumas-eylem .btn-outline:hover {
  background: var(--accent-blue);
  color: white;
}
.mf-kumas-eylem .btn-danger {
  border: 1px solid var(--accent-rose);
  color: var(--accent-rose);
}
.mf-kumas-eylem .btn-danger:hover {
  background: var(--accent-rose);
  color: white;
}

.kk-govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .kk-govde { grid-template-columns: minmax(0, 1fr); }
}
.kk-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.kk-bolum {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.kk-bolum-bas {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
}
.kk-bolum-bas:hover { background: var(--bg-card-hover); }
.kk-bolum-ok { color: var(--text-muted); font-size: 0.7rem; width: 10px; }
.kk-bolum-ad { flex: 1; font-weight: 600; }
.kk-bolum-sayi { font-size: 0.72rem; color: var(--text-muted); }
.kk-bolum:not(.kapali) .kk-bolum-bas { border-bottom: 1px solid var(--border-subtle); }
.kk-bolum-govde { padding: 16px; }

.kk-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px 16px;
}
/* Fiyatı etkileyen alanların işareti */
.kk-fiyat-nokta { color: var(--accent-teal); font-size: 0.6rem; vertical-align: middle; }

/* İplik matrisi: satırlar iplikler, kolonlar özellikler */
.kk-matris-sar { overflow-x: auto; margin: -4px 0 10px; }
.kk-matris { border-collapse: separate; border-spacing: 0; font-size: 0.78rem; }
.kk-matris th {
  padding: 6px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-default);
}
.kk-matris td { padding: 4px 5px; border-bottom: 1px solid var(--border-subtle); }
.kk-matris tbody tr:last-child td { border-bottom: none; }
.kk-matris th.kk-matris-ad {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  text-transform: none;
  font-size: 0.78rem;
  min-width: 78px;
}
.kk-matris td.kk-matris-bos { color: var(--text-muted); opacity: 0.4; text-align: center; }
/* İplik kartı düzeninde boş durum bir <div>; tablo hücresi değil. */
div.kk-matris-bos {
  color: var(--text-muted);
  text-align: center;
  padding: 14px 8px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  font-size: .82rem;
}
.kk-matris .cell-input,
.kk-matris .cell-select { width: 100%; }

/* İplik matrisi — satırlar kumaşın iplikleri, kaynağı İplik Listesi */
.kk-ipkart .kk-ip-pay,
.kk-ipkart .kk-ip-fiyat {
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
  white-space: nowrap;
}
.kk-ipkart .kk-ip-fiyat { color: var(--accent-teal); }
.kk-ipkart .kk-ip-yok { color: var(--accent-amber); font-family: inherit; }
.kk-ipkart .kk-ipsil {
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  padding: 2px 6px;
}
.kk-ipkart .kk-ipsil:hover {
  color: var(--accent-red);
  border-color: var(--border-default);
  background: var(--bg-hover);
}
.kk-ipekle-sar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.kk-ipekle-sar .form-hint { margin: 0; flex: 1 1 260px; }
.kk-ip-uyari {
  margin-top: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-amber);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.78rem;
}
/* Kumaş listelerindeki tek satırlık iplik özeti */
.kumas-iplik-ozet { white-space: nowrap; }

/* Hesaplanan alanlar — salt okunur döküm */
/* ===== Hesaplanan Alanlar =====
   Kullanıcının eleştirisi: *"çok dümdüz; başlıklar, yazılar, alanlar çok aynı
   renk ve hiç ayrım yok."* 70'e yakın alan tek tip bir listede duruyor, bir
   fire oranı ile nihai kumaş fiyatı aynı ağırlıkta görünüyordu.
   Alanlar artık TÜRÜNE göre renklenir (`tur-*` sınıfları, adından çıkarılır).
   Renkler tema değişkenlerinden gelir — üç modda da okunur. */
.kk-hesap-grup {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  padding-left: 9px;
  border-left: 3px solid var(--hesap-renk, var(--border-color));
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kk-hesap-grup::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border-color), transparent);
}
.kk-hesap-grup-ad { flex: 0 0 auto; }
/* Dolu/toplam sayacı: grubun gerçekten hesaplanıp hesaplanmadığı bir bakışta */
.kk-hesap-grup-sayi {
  flex: 0 0 auto;
  order: 3;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--hesap-renk, var(--text-muted));
  /* `color-mix` desteklenmezse bu satır geçerli kalır (CSS Color 5, 2023+) */
  background: var(--bg-toplam);
  background: color-mix(in srgb, var(--hesap-renk, var(--text-muted)) 14%, transparent);
}
.kk-hesap-grup:first-child { margin-top: 0; }
.kk-hesap-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 6px 8px;
  margin-bottom: 2px;
}
.kk-hesap-oge {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 9px;
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--hesap-renk, var(--border-color));
  border-radius: 6px;
  background: var(--bg-input-durgun);
  font-size: 0.78rem;
  min-width: 0;
}
.kk-hesap-ad {
  color: var(--text-muted);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kk-hesap-deger {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hesap-renk, var(--text-primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kk-hesap-birim {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 400;
  margin-left: 3px;
  color: var(--text-muted);
}
/* Metin alanları sayı değildir: dar puntoyla ve normal yazı tipiyle */
.kk-hesap-oge.metin .kk-hesap-deger {
  font-family: var(--font-sans, inherit);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: normal;
}
/* Değeri olmayan alan geri çekilir — dolu olanlar göze çarpsın */
.kk-hesap-oge.bos { opacity: 0.45; border-left-color: var(--border-subtle); }
.kk-hesap-oge.bos .kk-hesap-deger { color: var(--text-muted); font-weight: 400; }

/* --- tür renkleri: hepsi tema değişkeninden --- */
.kk-hesap-oge.tur-para,   .kk-hesap-grup.tur-para   { --hesap-renk: var(--accent-teal); }
.kk-hesap-oge.tur-doviz,  .kk-hesap-grup.tur-doviz  { --hesap-renk: var(--accent-green); }
.kk-hesap-oge.tur-oran,   .kk-hesap-grup.tur-oran   { --hesap-renk: var(--accent-amber); }
.kk-hesap-oge.tur-olcu,   .kk-hesap-grup.tur-olcu   { --hesap-renk: var(--accent-blue); }
.kk-hesap-oge.tur-uretim, .kk-hesap-grup.tur-uretim { --hesap-renk: var(--accent-purple); }
.kk-hesap-oge.tur-genel,  .kk-hesap-grup.tur-genel  { --hesap-renk: var(--text-muted); }
/* Nihai fiyatlar en güçlü vurgu: dolgulu zemin ve büyük punto */
.kk-hesap-oge.tur-nihai, .kk-hesap-grup.tur-nihai { --hesap-renk: var(--accent-teal); }
.kk-hesap-oge.tur-nihai {
  border-left-width: 3px;
  background: var(--bg-toplam);
  background: color-mix(in srgb, var(--accent-teal) 10%, var(--bg-input-durgun));
}
.kk-hesap-oge.tur-nihai .kk-hesap-deger { font-size: 1.02rem; font-weight: 700; }

/* Canlı maliyet paneli */
.kk-fiyat {
  position: sticky;
  top: calc(var(--ust-serit-h) + 16px);
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.kk-fiyat-bas {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kk-fiyat-tutar {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-teal);
  line-height: 1.1;
}
.kk-fiyat-tutar.kk-fiyat-yok { color: var(--text-muted); }
.kk-fiyat-birim { margin-left: 6px; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.kk-fiyat-alt { margin-top: 2px; font-size: 0.78rem; color: var(--text-secondary); }
.kk-fiyat-uyari {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--accent-amber);
}
.kk-fiyat-liste { margin: 14px 0 10px; }
/* Düzenleyici fiyat panelleri satırı `mfSatir` ile (.sum-row) basar, ama
   .sum-row biçimi yalnız `.maliyet-card` içinde tanımlıydı: taslak panelinde
   etiket ile tutar bitişik yazılıyordu ("Alan0,140 m²", "Hammadde306,205").
   Kural bütün `.kk-fiyat` panellerine (aksesuar, imalat, ürün dışı…) uygulanır. */
.kk-fiyat .sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
  border-bottom: 1px dashed var(--border-subtle);
}
.kk-fiyat .sum-row:last-of-type { border-bottom: none; }
.kk-fiyat .sum-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.kk-fiyat .sum-row > span:last-child {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
  white-space: nowrap;
}
.kk-fiyat-satir {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.kk-fiyat-satir span:last-child { font-family: 'JetBrains Mono', monospace; color: var(--text-primary); }
.kk-fiyat-satir.ara {
  font-weight: 600;
  color: var(--text-primary);
  border-bottom-color: var(--border-default);
}

/* ---- Kayıt Oluştur sihirbazı ---- */
.modal.modal-wizard { max-width: 760px; }

.wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.wizard-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 5px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 220px;
  transition: all var(--transition-fast);
}
.wizard-step:hover { border-color: var(--border-hover); color: var(--text-secondary); }
.wizard-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.14);
  font-family: var(--font-mono);
  font-size: 0.66rem;
}
.wizard-step-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-step.done { color: var(--text-secondary); border-color: rgba(16, 185, 129, 0.3); }
.wizard-step.done .wizard-step-no { background: rgba(16, 185, 129, 0.2); color: var(--on-green); }
.wizard-step.active {
  color: white;
  border-color: transparent;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-glow-blue);
}
.wizard-step.active .wizard-step-no { background: rgba(255, 255, 255, 0.22); color: white; }

.wizard-not {
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: var(--radius-lg);
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.6;
}

.form-etiket-not {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-teal);
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(20, 184, 166, 0.1);
}
.kumas-table thead tr.group-header .grp-temel {
  background: rgba(16, 185, 129, 0.07); color: var(--on-green);
  border-right-color: rgba(16, 185, 129, 0.22);
}
.kumas-table thead tr.group-header .grp-ana {
  background: rgba(20, 184, 166, 0.07); color: var(--on-teal);
  border-right-color: rgba(20, 184, 166, 0.22);
}
.kumas-table thead tr.group-header .grp-bilesen {
  background: rgba(59, 130, 246, 0.07); color: var(--on-blue);
  border-right-color: rgba(59, 130, 246, 0.22);
}
.kumas-table thead tr.group-header .grp-iplik {
  background: rgba(99, 102, 241, 0.07); color: var(--on-indigo);
  border-right-color: rgba(99, 102, 241, 0.22);
}
.kumas-table thead tr.group-header .grp-uretim {
  background: rgba(139, 92, 246, 0.07); color: var(--on-purple);
  border-right-color: rgba(139, 92, 246, 0.22);
}
.kumas-table thead tr.group-header .grp-hesap {
  background: rgba(148, 163, 184, 0.07); color: var(--on-slate);
  border-right-color: rgba(148, 163, 184, 0.22);
}
.kumas-table thead tr.group-header .grp-maliyet-toplam {
  background: rgba(249, 115, 22, 0.07); color: var(--on-orange);
  border-right-color: rgba(249, 115, 22, 0.22);
}
.kumas-table thead tr.group-header .grp-asama {
  background: rgba(244, 63, 94, 0.07); color: var(--on-rose);
  border-right-color: rgba(244, 63, 94, 0.22);
}
.kumas-table thead tr.group-header .grp-diger {
  background: rgba(245, 158, 11, 0.07); color: var(--on-amber);
  border-right-color: rgba(245, 158, 11, 0.22);
}

/* Excel'de formülle üretilen kolonlar */
.kumas-table thead th.th-hesap { color: var(--text-muted); font-style: italic; }
.kumas-table .cell-input-hesap {
  background: rgba(148, 163, 184, 0.05);
  border-style: dashed;
  color: var(--accent-teal);
  font-family: var(--font-mono);
}

/* Sabit değerli hücre (Kumaş Tip) */
.kumas-table .cell-sabit {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(148, 163, 184, 0.09);
  border: 1px solid var(--border-subtle);
}

/* Sola sabitlenen kolonlar: No + Kumaş Kısa Tanım.
   Varsayılan genişlik 260 → 130 (kullanıcının isteği): tanım metni iki satıra
   sarılıp "…" ile kesiliyor, tam metin üzerine gelince görünüyor. Genişlik
   ayrıca başlıktaki tutamakla sürüklenerek ayarlanabilir ve liste başına
   saklanır; o değer hücrenin `style`ına yazıldığı için buradaki ölçüyü ezer.
   DİKKAT: buradaki `min-width` satır içi `max-width`i EZER (CSS'te min-width,
   max-width'i yener), bu yüzden ikisi birlikte yazılmalı. */
.kumas-table .scol-1 {
  min-width: 130px;
  max-width: 130px;
  border-right: 2px solid rgba(16, 185, 129, 0.22);
}

/* Genişlik tutamağı: başlığın sağ kenarında ince bir şerit */
.kumas-table th.th-ayarli { position: sticky; }
.kumas-table th.th-ayarli .kolon-tut {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  border-right: 2px solid transparent;
  z-index: 2;
}
.kumas-table th.th-ayarli .kolon-tut:hover,
body.kolon-suruklu .kumas-table th.th-ayarli .kolon-tut {
  border-right-color: var(--accent-teal);
  background: var(--bg-hover);
}
/* Sürükleme sırasında metin seçilmesin ve imleç tutarlı kalsın */
body.kolon-suruklu { cursor: col-resize; user-select: none; }

/* ---- İşlem kolonu sağa sabit ----
   Yatay kayan geniş tablolarda (Ana Bileşen, Alt Bileşen, Örme, Dokuma)
   işlem kolonu en sağda kalırsa düğmelere ulaşmak için tüm tabloyu
   kaydırmak gerekir; bu yüzden sağa pinlenir. */
.wide-table th.col-actions,
.wide-table td.col-actions {
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: 84px;
  width: 84px;
  text-align: center;
  background: var(--bg-secondary);
  border-left: 2px solid var(--border-default);
  white-space: nowrap;
}
.wide-table thead th.col-actions { z-index: 5; }
.wide-table tbody tr:nth-child(4n+1) td.col-actions { background: var(--bg-scol-1); }
.wide-table tbody tr:nth-child(4n+2) td.col-actions { background: var(--bg-scol-2); }
.wide-table tbody tr:nth-child(4n+3) td.col-actions { background: var(--bg-scol-3); }
.wide-table tbody tr:nth-child(4n+4) td.col-actions { background: var(--bg-scol-4); }
.wide-table tbody tr:hover td.col-actions { background: var(--bg-scol-hover) !important; }

/* Satır düzenleme düğmesi */
.btn-row-edit {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
}
.data-table tbody tr:hover .btn-row-edit { opacity: 1; }
.btn-row-edit:hover {
  color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.12);
}

/* Düzenle/sil düğmeleri kalıcı görünür — yalnızca hover'da görünen düğmeler
   geniş tablolarda keşfedilmiyor. (Diğer tablolarda .btn-row-delete
   opacity: 0 ile hover'a bağlı kalır.) */
.wide-table td.col-actions .btn-row-edit,
.wide-table td.col-actions .btn-row-delete,
#masrafTable td.col-actions .btn-row-edit,
#masrafTable td.col-actions .btn-row-delete { opacity: 0.55; }
.wide-table tbody tr:hover td.col-actions .btn-row-edit,
.wide-table tbody tr:hover td.col-actions .btn-row-delete,
#masrafTable tbody tr:hover td.col-actions .btn-row-edit,
#masrafTable tbody tr:hover td.col-actions .btn-row-delete { opacity: 1; }

/* Masraf Listesi tablosu 9 kolonluk ve sarmalayıcısı yatay kaymıyor
   (.data-table-wrapper → overflow: hidden), bu yüzden işlem kolonu zaten
   hep ekranda; sabitlemeye gerek yok, yalnızca iki düğmeye yer açılır. */
#masrafTable thead th.col-actions,
#masrafTable tbody td.col-actions { width: 84px; min-width: 84px; text-align: center; white-space: nowrap; }

/* ==========================================
   UÇTAN UCA KENDİN YAP
   ==========================================
   Adım şeridi + iki kolon (içerik | yapışkan canlı maliyet). Model Maliyet'in
   `.mm-*` alan ve kart bileşenleri yeniden kullanılır; burada yalnızca akışa
   ait kabuk tanımlanır. */
.uu-serit {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-default);
}
.uu-adim {
  flex: 1 0 auto;
  min-width: 128px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "no ikon ad" "no ikon alt";
  align-items: center;
  gap: 2px 8px;
  padding: 9px 12px;
  text-align: left;
  cursor: pointer;
  background: var(--bg-input-durgun);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  transition: all var(--transition-default);
}
.uu-adim:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.uu-adim.aktif {
  border-color: var(--accent-blue);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--accent-blue);
}
.uu-adim-no {
  grid-area: no;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 0.7rem; font-weight: 800;
  background: var(--bg-card);
  border: 1px solid var(--border-input);
}
.uu-adim.dolu .uu-adim-no {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: white;
}
.uu-adim-ikon { grid-area: ikon; font-size: 1.05rem; }
.uu-adim-ad { grid-area: ad; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.uu-adim-alt { grid-area: alt; font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; }

.uu-govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.uu-icerik { min-width: 0; }
.uu-panel { position: sticky; top: calc(var(--ust-serit-h) + 12px); }

.uu-bas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.uu-bas-ikon { font-size: 1.7rem; }
.uu-bas h3 { margin: 0; font-size: 1.05rem; color: var(--text-primary); }
.uu-bas p { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-muted); }
.uu-bas-sayac {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.uu-kartlar { display: flex; flex-direction: column; gap: 12px; }
.uu-kart {
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.uu-kartlar .uu-kart { margin-bottom: 0; }
.uu-kart.dolu { border-left: 3px solid var(--accent-green); }
.uu-kart-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}
.uu-kart-tutar { font-size: 0.9rem; color: var(--accent-teal); font-variant-numeric: tabular-nums; }
.uu-genis { grid-column: 1 / -1; }
.uu-alan-not { font-size: 0.66rem; color: var(--text-muted); }
.uu-kaynak-not {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 6px 10px;
  background: var(--bg-input-durgun);
  border-radius: var(--radius-sm);
}
.uu-kaynak-not.hatali { color: var(--accent-amber); }

/* Modele özel kumaş varyantı: ilave işlem çipleri + iplik kalınlığı.
   Liste kaydına dokunulmadığı için görsel olarak da "ek katman" gibi durur. */
.uu-ozel {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-input-durgun);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
}
.uu-ozel-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.uu-ozel-kume + .uu-ozel-kume { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-default); }
.uu-ozel-ad { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 6px; }
.uu-ozel-sayi { font-weight: 600; opacity: 0.75; }
.uu-ozel-not { font-size: 0.68rem; font-weight: 500; color: var(--text-muted); }
.uu-ozel-bos { font-size: 0.72rem; color: var(--text-muted); }
.uu-cipler { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.uu-cip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  font-size: 0.74rem;
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  border-radius: 999px;
  color: var(--text-primary);
}
.uu-cip.degisti { border-color: var(--accent-teal); color: var(--accent-teal); }
/* APS kaydı olmayan işlem kumaşın TÜM maliyetini sıfırlar — görünür olmalı */
.uu-cip.yok { border-color: var(--accent-amber); color: var(--accent-amber); }
.uu-cip-sil {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--text-muted);
}
.uu-cip-sil:hover { color: var(--accent-rose); }
.uu-ozel-ekle { max-width: 260px; }
.uu-degisti { border-color: var(--accent-teal); color: var(--accent-teal); font-weight: 700; }

.uu-gezinme {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-default);
}
.uu-gezinme .btn { min-width: 130px; justify-content: center; }
.uu-gezinme .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ==========================================
   MODEL LİSTESİ — İMALAT (KDP)
   ==========================================
   Aşama özet kutuları (Kesim / Dikim / Ütü Paket) ve model düzenleyicinin
   tabloları. Renkler değişkenlerden gelir. */
.md-ozet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.md-ozet-kutu {
  padding: 10px 12px;
  background: var(--bg-input-durgun);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
}
.md-ozet-kutu.vurgu { border-color: var(--accent-teal); background: var(--bg-card); }
.md-ozet-ad {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.md-ozet-deger {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.md-ozet-kutu.vurgu .md-ozet-deger { color: var(--accent-teal); }
.md-ozet-alt { font-size: 0.68rem; color: var(--text-muted); }

.md-bolum-bas {
  margin: 16px 0 8px;
  padding-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-default);
}
.md-tablo { font-size: 0.78rem; }
/* Parça baskı/nakış ve yıkama pencerelerinde türün tanımı + formülü */
.pn-not {
  margin-bottom: 12px;
  padding: 10px 12px;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--bg-input-durgun);
  border: 1px solid var(--border-input);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius-sm);
}
.pn-not strong { color: var(--text-primary); }
/* Kayıtta olmayıp program tarafından doldurulmuş ölçü: değer görünür ama
   kullanıcının kendi verisi olmadığı kenarlıktan anlaşılsın. */
.form-input.pn-varsayilan {
  border-style: dashed;
  border-color: var(--accent-amber);
}
.md-tablo .cell-input { width: 100%; }
.md-fiyat { font-weight: 700; color: var(--accent-teal); }


/* ==========================================================================
   BANT PLANLAMA
   Renk değeri YAZILMAZ: üç görünüm modu yalnızca değişkenleri ezerek çalışır.
   ========================================================================== */
#bantPlanlamaContainer { display: flex; flex-direction: column; gap: 18px; }
.bp-bos {
  padding: 22px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.7;
}
.bp-kademe { display: flex; gap: 14px; flex-wrap: wrap; }
.bp-kademe label,
.bp-ayar label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 190px;
  flex: 1 1 190px;
}
.bp-model-not {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.bp-model-not .btn { margin-left: auto; }

/* Ölçü kutuları */
.bp-olculer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.bp-olcu {
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.bp-olcu-etiket {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  font-weight: 700;
}
.bp-olcu-deger { font-size: 1.5rem; font-weight: 800; margin-top: 4px; }
.bp-olcu-alt { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.bp-olcu.bp-iyi { border-left-color: var(--accent-teal); }
.bp-olcu.bp-orta { border-left-color: var(--accent-amber); }
.bp-olcu.bp-dusuk { border-left-color: var(--accent-rose); }
.bp-olcu.bp-orta .bp-olcu-deger { color: var(--accent-amber); }
.bp-olcu.bp-dusuk .bp-olcu-deger { color: var(--accent-rose); }

.bp-ayar { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.bp-ayar-bilgi {
  flex: 1 1 240px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-kart-bas);
}
.bp-not {
  margin-top: 10px;
  font-size: 0.73rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.bp-uyari {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-amber);
  background: var(--bg-kart-bas);
  color: var(--accent-amber);
  font-size: 0.76rem;
}

/* Görsel bant: istasyonlar yan yana, taşarsa yatay kayar */
.bp-hat {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: flex-start;
}
.bp-istasyon {
  flex: 0 0 210px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  padding: 12px;
}
/* Hedef çevrimi aşan istasyon darboğazdır: gözle ayırt edilebilmeli */
.bp-istasyon.bp-asiri { border-color: var(--accent-amber); }
.bp-ist-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.bp-ist-no {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--bg-toplam);
  color: var(--on-toplam);
  font-size: 0.74rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-ist-dk { font-size: 0.82rem; font-weight: 700; }
.bp-ist-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-kart-bas);
  overflow: hidden;
}
.bp-ist-bar span {
  display: block;
  height: 100%;
  background: var(--accent-teal);
}
.bp-istasyon.bp-asiri .bp-ist-bar span { background: var(--accent-amber); }
.bp-ist-oran { font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; }
.bp-ist-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.bp-ist-liste li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  padding: 4px 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.bp-ist-op { margin-left: auto; font-weight: 700; color: var(--text-primary); }

.bp-asama {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 100px;
  font-size: 0.64rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--bg-kart-bas);
  color: var(--text-secondary);
}
.bp-asama-kesim { color: var(--accent-amber); }
.bp-asama-dikim { color: var(--accent-teal); }
.bp-asama-utu { color: var(--accent-purple); }
.bp-rozet {
  font-size: 0.66rem;
  padding: 1px 6px;
  border-radius: 100px;
  background: var(--bg-toplam);
  color: var(--on-toplam);
}
.bp-soluk { font-size: 0.7rem; color: var(--text-muted); }
.bp-tablo td, .bp-tablo th { white-space: nowrap; }
.bp-tablo td:nth-child(3) { white-space: normal; }


/* ==========================================================================
   RİSK ANALİZ MERKEZİ
   ========================================================================== */
#riskMerkeziContainer { display: flex; flex-direction: column; gap: 18px; }
.rm-ozet {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 18px;
}
.rm-ozet-bas { display: flex; align-items: center; gap: 14px; }
.rm-ozet-bas > span { font-size: 1.5rem; }
.rm-ozet-bas h3 { font-size: 1.05rem; font-weight: 700; }
.rm-ozet-bas .rm-rozet { margin-left: auto; }
.rm-not { font-size: 0.73rem; line-height: 1.6; color: var(--text-muted); }
.rm-soluk { font-size: 0.7rem; color: var(--text-muted); }
.rm-bos {
  padding: 18px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.7;
}
.rm-bos .btn { margin-left: 10px; }

/* Seviye rozeti — dört seviye, üç temada da okunur */
.rm-rozet {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--bg-kart-bas);
  border: 1px solid var(--border-default);
}
.rm-rozet.rm-dusuk  { color: var(--accent-teal);   border-color: var(--accent-teal); }
.rm-rozet.rm-orta   { color: var(--accent-amber);  border-color: var(--accent-amber); }
.rm-rozet.rm-yuksek { color: var(--accent-orange); border-color: var(--accent-orange); }
.rm-rozet.rm-kritik { color: var(--accent-rose);   border-color: var(--accent-rose); }

.rm-kirilim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.rm-kutu {
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.rm-kutu-etiket {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  font-weight: 700;
}
.rm-kutu-deger { font-size: 1.4rem; font-weight: 800; margin: 3px 0 5px; }
.rm-kutu-alt { font-size: 0.66rem; color: var(--text-muted); margin-top: 5px; }
.rm-cubuk {
  height: 5px;
  border-radius: 3px;
  background: var(--bg-kart-bas);
  overflow: hidden;
}
.rm-cubuk span { display: block; height: 100%; background: var(--accent-teal); }

.rm-bayrak { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.rm-bayrak-oge {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-amber);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-family: inherit;
  cursor: pointer;
}
.rm-bayrak-oge:hover { border-color: var(--border-hover); }
.rm-bayrak-oge strong { color: var(--accent-amber); }

.rm-model-bas {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.rm-model-bas .rm-rozet { margin-left: auto; }

.rm-merkezler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 16px;
}
.rm-merkez {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 16px;
}
.rm-merkez-bas { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rm-merkez-bas h3 { font-size: 0.95rem; font-weight: 700; }
.rm-merkez-bas .rm-rozet { margin-left: auto; }
.rm-merkez-kirilim {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}
.rm-merkez-kirilim > div { font-size: 0.68rem; color: var(--text-muted); }
.rm-merkez-kirilim strong {
  display: block;
  font-size: 1rem;
  color: var(--text-primary);
  margin: 2px 0 4px;
}
.rm-merkez .btn { margin-top: 10px; }
.rm-tablo { margin-top: 10px; }
.rm-mini td, .rm-mini th { font-size: 0.72rem; padding: 5px 7px; }
.rm-etiket {
  font-size: 0.62rem;
  padding: 1px 6px;
  border-radius: 100px;
  background: var(--bg-kart-bas);
  color: var(--text-muted);
}
.rm-etiket.rm-uyari-etiket { color: var(--accent-amber); }
.rm-agirlik { display: flex; gap: 14px; flex-wrap: wrap; }
.rm-agirlik label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  flex: 1 1 160px;
}


/* ==========================================================================
   CPS PLANI
   ========================================================================== */
#cpsPlaniContainer { display: flex; flex-direction: column; gap: 18px; }
.cps-bos {
  padding: 22px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.7;
}
.cps-bos .btn { margin-left: 12px; }
.cps-not { margin-top: 10px; font-size: 0.73rem; line-height: 1.65; color: var(--text-muted); }
.cps-not .btn { margin-left: 8px; }
.cps-soluk { font-size: 0.7rem; color: var(--text-muted); }
.cps-uyari {
  margin-top: 10px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-amber);
  background: var(--bg-kart-bas);
  color: var(--accent-amber);
  font-size: 0.78rem;
  line-height: 1.6;
}
.cps-uyari .btn { margin-left: 8px; }

.cps-ust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
}
.cps-kutu {
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.cps-kutu.cps-yesil { border-left-color: var(--accent-green); }
.cps-kutu.cps-kirmizi { border-left-color: var(--accent-rose); }
.cps-kutu.cps-kirmizi .cps-kutu-deger { color: var(--accent-rose); }
.cps-kutu-etiket {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  font-weight: 700;
}
.cps-kutu-deger { font-size: 1.3rem; font-weight: 800; margin-top: 4px; }
.cps-kutu-alt { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }

/* Zaman şeridi */
.cps-serit { display: flex; flex-direction: column; gap: 9px; }
.cps-satir { display: flex; align-items: center; gap: 12px; }
.cps-satir-ad {
  flex: 0 0 210px;
  font-size: 0.79rem;
  font-weight: 600;
}
.cps-hat {
  position: relative;
  flex: 1;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--bg-kart-bas);
  overflow: hidden;
}
.cps-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 4px;
  background: var(--accent-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4px;
}
.cps-bar span {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--on-toplam);
  white-space: nowrap;
}
/* Tampon: serbest sürenin bu aşamaya ÜRETİM PAYINA göre ayrılmış kısmı.
   Plana dâhil olduğu için DOLU çizilir — çizgili olan (aşağıdaki .cps-buffer)
   dağıtılmamış, paylaşılan serbestliktir. İkisi ayrı şeydir. */
.cps-tampon {
  position: absolute;
  top: 5px;
  bottom: 5px;
  border-radius: 3px;
  background: var(--accent-blue);
  opacity: 0.55;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cps-tampon span {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--on-toplam);
  white-space: nowrap;
}
.cps-ornek-tampon { background: var(--accent-blue); opacity: 0.55; }
.cps-pay { color: var(--text-muted); }
.cps-tampon-deger { color: var(--accent-blue); font-weight: 700; }
/* Buffer, iş barının hemen ardında ve çizgili: dolu süre değil, pay */
.cps-buffer {
  position: absolute;
  top: 7px;
  bottom: 7px;
  border-radius: 3px;
  background: repeating-linear-gradient(45deg,
    var(--accent-amber) 0 4px, transparent 4px 8px);
  opacity: 0.75;
}
.cps-satir-tarih {
  flex: 0 0 210px;
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.cps-lejant { display: flex; gap: 16px; margin-top: 12px; }
.cps-lejant-oge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.71rem;
  color: var(--text-muted);
}
.cps-lejant-oge i { width: 18px; height: 8px; border-radius: 3px; display: inline-block; }
.cps-ornek-is { background: var(--accent-teal); }
.cps-ornek-buffer {
  background: repeating-linear-gradient(45deg,
    var(--accent-amber) 0 4px, transparent 4px 8px);
}

.cps-tablo tr.cps-pasif td { opacity: 0.5; }
.cps-buffer-deger { color: var(--accent-amber); font-weight: 700; }
.cps-sure { display: flex; gap: 14px; flex-wrap: wrap; }
.cps-sure label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  flex: 1 1 175px;
}
.mm-termin { font-size: 0.9rem; padding-top: 6px; }


/* ==========================================================================
   TEST MOTORU
   ========================================================================== */
#testMotoruContainer { display: flex; flex-direction: column; gap: 18px; }
.tm-ozet {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 18px;
}
.tm-ozet-bas { display: flex; align-items: center; gap: 14px; }
.tm-ozet-bas > span { font-size: 1.5rem; }
.tm-ozet-bas h3 { font-size: 1.05rem; font-weight: 700; }
.tm-rozet {
  margin-left: auto;
  padding: 4px 13px;
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid var(--border-default);
  background: var(--bg-kart-bas);
  white-space: nowrap;
}
.tm-rozet.tm-hazir { color: var(--accent-teal); border-color: var(--accent-teal); }
.tm-rozet.tm-eksik { color: var(--accent-amber); border-color: var(--accent-amber); }
.tm-not { font-size: 0.73rem; line-height: 1.6; color: var(--text-muted); }
.tm-not .btn { margin-left: 8px; }
.tm-soluk { font-size: 0.7rem; color: var(--text-muted); line-height: 1.5; }
.tm-bos {
  padding: 22px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.tm-kutular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.tm-kutu {
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.tm-kutu.tm-yesil { border-left-color: var(--accent-teal); }
.tm-kutu.tm-kirmizi { border-left-color: var(--accent-rose); }
.tm-kutu.tm-kirmizi .tm-kutu-deger { color: var(--accent-rose); }
.tm-kutu.tm-sari { border-left-color: var(--accent-amber); }
.tm-kutu-etiket {
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  font-weight: 700;
}
.tm-kutu-deger { font-size: 1.4rem; font-weight: 800; margin-top: 3px; }
.tm-kutu-alt { font-size: 0.66rem; color: var(--text-muted); }
.tm-filtre { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.tm-filtre label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  flex: 0 1 300px;
}
.tm-filtre label.tm-onay {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding-bottom: 7px;
}
.tm-asama .card-title { display: flex; align-items: center; gap: 10px; }
.tm-asama-sayi {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}
.tm-tablo td { vertical-align: top; }
.tm-tablo .cell-input, .tm-tablo .cell-select { width: 100%; }
/* Durum satırın solundan okunsun: tabloda göz taraması hızlansın */
.tm-satir td:first-child { border-left: 3px solid transparent; }
.tm-satir.tm-d-gecti td:first-child { border-left-color: var(--accent-teal); }
.tm-satir.tm-d-kaldi td:first-child { border-left-color: var(--accent-rose); }
.tm-satir.tm-d-bekliyor td:first-child { border-left-color: var(--accent-amber); }
.tm-satir.tm-pasif { opacity: 0.5; }
.tm-etiket {
  font-size: 0.62rem;
  padding: 1px 7px;
  border-radius: 100px;
  background: var(--bg-kart-bas);
  color: var(--text-muted);
}


/* ==========================================================================
   KURAL HAVUZU
   ========================================================================== */
#kuralHavuzuContainer { display: flex; flex-direction: column; gap: 18px; }
.kh-ozet {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 18px;
}
.kh-ozet-bas { display: flex; align-items: center; gap: 14px; }
.kh-ozet-bas > span { font-size: 1.5rem; }
.kh-ozet-bas h3 { font-size: 1.05rem; font-weight: 700; }
.kh-ozet-bas .btn { margin-left: auto; align-self: flex-start; }
.kh-not { font-size: 0.73rem; line-height: 1.6; color: var(--text-muted); }
.kh-bos {
  padding: 18px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.83rem;
}
.kh-kutular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.kh-kutu {
  padding: 11px 13px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.kh-kutu-etiket {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  font-weight: 700;
}
.kh-kutu-deger { font-size: 1.35rem; font-weight: 800; margin-top: 2px; }
.kh-kutu-alt { font-size: 0.65rem; color: var(--text-muted); }

.kh-filtre { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.kh-filtre label, .kh-form-satir label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  flex: 0 1 210px;
}
.kh-filtre label.kh-onay, .kh-onay {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding-bottom: 7px;
}
.kh-genis { flex: 1 1 320px !important; }
.kh-form-satir { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.kh-form-satir textarea.cell-input { resize: vertical; font-family: inherit; }
.kh-form-satir.kh-alt {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-kart-bas);
  margin-top: 8px;
}
.kh-form-dugme { display: flex; gap: 8px; margin-top: 6px; }
.kh-form-dugme .kh-sil { color: var(--accent-rose); border-color: var(--accent-rose); }

.kh-kapsam, .kh-besle {
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  margin-bottom: 12px;
}
.kh-kapsam-bas { font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; }
.kh-kapsam-bas .kh-not { font-weight: 400; margin-left: 8px; }
.kh-kapsam-ekle { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kh-kapsam-ekle select, .kh-kapsam-ekle input { flex: 1 1 200px; }
.kh-besle-kutular { display: flex; gap: 16px; flex-wrap: wrap; }

/* Kapsam çipleri: çapraz kuralın görünen yüzü */
.kh-cipler { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.kh-cip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.72rem;
  background: var(--bg-kart-bas);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}
/* Modelde FİİLEN bulunan kapsam öğesi vurgulanır: kuralın neden tetiklendiği
   ya da neden tetiklenmediği tek bakışta görünsün. */
.kh-cip.kh-cip-var { border-color: var(--accent-teal); color: var(--accent-teal); }
.kh-cip button {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0;
  font-family: inherit;
}
.kh-cip button:hover { color: var(--accent-rose); }

.kh-liste { display: flex; flex-direction: column; gap: 12px; }
.kh-kural {
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  padding: 13px 15px;
}
.kh-kural.kh-aktif { border-left-color: var(--accent-teal); }
.kh-kural.kh-pasif { opacity: 0.5; }
.kh-kural-bas { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kh-kural-bas strong { font-size: 0.87rem; }
.kh-kural-bas .btn { margin-left: auto; }
.kh-kural-ic { margin-top: 8px; }
.kh-seviye {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  background: var(--bg-kart-bas);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.kh-s4 { color: var(--accent-orange); }
.kh-s5 { color: var(--accent-rose); }
.kh-s3 { color: var(--accent-amber); }
.kh-rozet {
  font-size: 0.62rem;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--bg-kart-bas);
  color: var(--text-muted);
  font-weight: 700;
}
.kh-rozet.kh-capraz { color: var(--accent-purple); }
.kh-asama, .kh-bolumler, .kh-sayi {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.kh-sayi { margin-left: auto; font-weight: 600; }
.kh-risk, .kh-onlem {
  font-size: 0.79rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 5px;
  padding-left: 58px;
  position: relative;
}
.kh-risk > span, .kh-onlem > span {
  position: absolute;
  left: 0;
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kh-risk > span { color: var(--accent-amber); }
.kh-onlem > span { color: var(--accent-teal); }
.kh-etki {
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.kh-elle { padding: 4px 0 0; font-size: 0.75rem; color: var(--text-secondary); }

/* Risk sayfasındaki sözel risk bölümü ve döküman */
.rm-kurallar {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  background: var(--bg-kart-bas);
}
.rm-kurallar-bas {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 7px;
}
.rm-kurallar-bas span { color: var(--text-muted); font-weight: 400; margin-left: 6px; }
.rm-kural-mini { display: flex; gap: 9px; padding: 5px 0; font-size: 0.78rem; }
.kh-onlem-mini {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 2px;
}
.rm-dokuman .card-title { display: flex; align-items: center; gap: 10px; }
.rm-dok-sayi { font-size: 0.72rem; font-weight: 400; color: var(--text-muted); }
.rm-dokuman .card-title .btn:first-of-type { margin-left: auto; }
.rm-dok-govde { display: flex; flex-direction: column; gap: 18px; }
.rm-dok-asama h4 {
  font-size: 0.88rem;
  font-weight: 700;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-default);
}
.rm-dok-asama h4 span {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 7px;
}
.rm-dok-madde {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.rm-dok-bas { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.rm-dok-kapsam { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.tm-etiket.tm-kural { color: var(--accent-purple); }
.cps-kural { font-size: 0.68rem; color: var(--accent-purple); margin-top: 3px; }


/* ---- Pano: validasyon oranı ve referans satır ---- */
.db-val {
  display: inline-block;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
}
/* Oran 1,00'in üstü piyasanın bizden pahalı olduğunu söyler — iyi haber. */
.db-val-iyi { border-color: var(--accent-teal); color: var(--accent-teal); }
.db-val-orta { border-color: var(--accent-amber); color: var(--accent-amber); }
.db-val-kotu { border-color: var(--accent-rose); color: var(--accent-rose); }
.db-ref {
  background: none;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-ref:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.db-ref-yok { border-style: dashed; color: var(--text-muted); }
.db-ref-var { border-color: var(--accent-blue); color: var(--text-primary); }
.db-ref-not { font-size: 0.74rem; line-height: 1.6; color: var(--text-muted); margin-bottom: 10px; }
.db-ref-liste {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  margin-top: 10px;
}
.db-ref-satir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font-size: 0.76rem;
}
.db-ref-satir:hover { background: var(--bg-kart-bas); }
.db-ref-satir.secili { background: var(--bg-kart-bas); border-left: 3px solid var(--accent-blue); }
.db-ref-kutu {
  flex: 0 0 16px;
  height: 16px;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent-blue);
}
.db-ref-satir.secili .db-ref-kutu { border-color: var(--accent-blue); }
.db-bekle { font-size: 0.72rem; font-weight: 600; color: var(--accent-amber); }
.db-ref-ad { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-ref-fiyat { font-weight: 700; white-space: nowrap; }
.db-ref-fiyat em { font-style: normal; font-weight: 400; color: var(--text-muted); }


.td-brm { display: block; font-size: 0.62rem; color: var(--text-muted); }
.th-brm { font-size: 0.62rem; font-weight: 400; opacity: 0.75; }


/* İplik matrisinin altındaki canlı hesaplanmış içerik */
.kk-icerik {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-top: 10px;
  border: 1px solid var(--border-default); border-radius: 8px;
  background: var(--bg-kart-bas); font-size: 0.8rem;
}
.kk-icerik-bas { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.kk-icerik strong { color: var(--accent-teal); }
.kk-icerik-eksik { font-size: 0.7rem; color: var(--accent-amber); margin-left: auto; }

/* Proses Sarfiyat — toplu değişiklik penceresi */
.at-ust { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.at-ust .mm-alan { min-width: 180px; flex: 1; }
.at-bolum { margin-bottom: 14px; }
.at-bas { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; }
.at-bas span { font-weight: 400; color: var(--text-muted); }
.at-bas .btn { margin-left: 0; }
.at-bas .btn:first-of-type { margin-left: auto; }
.at-kolonlar { display: flex; gap: 6px; flex-wrap: wrap; }
.at-kolon {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--border-input); border-radius: 999px;
  font-size: 0.72rem; cursor: pointer; color: var(--text-secondary);
}
.at-kolon.secili { border-color: var(--accent-teal); color: var(--accent-teal); }
.at-onay { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-muted); }
.at-ozet { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.at-rozet {
  font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border-default); color: var(--text-muted);
}
.at-rozet.at-etkin { border-color: var(--accent-teal); color: var(--accent-teal); }
.at-tablo-sar { max-height: 300px; overflow: auto; border: 1px solid var(--border-default); border-radius: 6px; }
.at-tablo { font-size: 0.74rem; }
.at-tablo thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-card); }
.at-soluk { font-size: 0.66rem; color: var(--text-muted); }
.at-hucre {
  display: inline-block; margin: 1px 6px 1px 0; padding: 1px 7px;
  border-radius: 4px; background: var(--bg-kart-bas); font-size: 0.7rem;
}
.at-hucre b { color: var(--accent-teal); }
.at-not { font-size: 0.72rem; line-height: 1.6; color: var(--text-muted); margin-top: 10px; }

/* Proses Sarfiyat araç çubuğundaki maliyet dönemi seçici */
.ab-donem { display: flex; align-items: center; gap: 8px; }
.ab-donem-etiket { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.ab-donem .filter-select { min-width: 118px; }
.ab-donem-kur {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-family: var(--font-mono);
}
@media (max-width: 900px) { .ab-donem-etiket, .ab-donem-kur { display: none; } }


/* ==========================================================================
   SİMÜLASYON — "bu masraf artarsa fiyat ne olur?"
   Maliyet formlarının altındaki Simülasyon Yap düğmesinin penceresi.
   ========================================================================== */
.mf-eylem { display: flex; gap: 8px; margin-top: 10px; }
.mf-eylem .btn { flex: 1; }
.sim-ust {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.sim-kutu {
  flex: 1;
  min-width: 150px;
  padding: 10px 14px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-kart-bas);
}
.sim-kutu span { display: block; font-size: 0.68rem; color: var(--text-muted); }
.sim-kutu b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.sim-kutu em { font-style: normal; font-size: 0.68rem; color: var(--text-muted); }
.sim-kutu.sim-sonuc { border-color: var(--border-input); }
.sim-kutu.sim-sonuc.etkin { border-color: var(--accent-teal); }
.sim-kutu.sim-sonuc.etkin b { color: var(--accent-teal); }
.sim-ok { align-self: center; font-size: 1.2rem; color: var(--text-muted); }
.sim-fark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 120px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px dashed var(--border-default);
}
.sim-fark b { font-size: 1.3rem; font-weight: 800; }
.sim-fark span { font-size: 0.66rem; color: var(--text-muted); }
.sim-fark.arti b { color: var(--accent-rose); }
.sim-fark.eksi b { color: var(--accent-teal); }
.sim-tablo-sar {
  max-height: 340px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 6px;
}
.sim-tablo { font-size: 0.75rem; }
.sim-tablo thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-card); }
.sim-soluk { font-size: 0.66rem; color: var(--text-muted); }
.sim-degisti { background: var(--bg-kart-bas); }
.sim-arti { color: var(--accent-rose); }
.sim-eksi { color: var(--accent-teal); }
.sim-giris { width: 100%; }
/* Etki çubuğu: mutlak değil, kalemler arası ÖNEM SIRASI okunsun diye
   en büyük etkiye göre ölçeklenir. */
.sim-etki {
  height: 5px;
  border-radius: 3px;
  background: var(--border-subtle);
  overflow: hidden;
  margin-bottom: 3px;
}
.sim-etki span { display: block; height: 100%; background: var(--accent-blue); }
.sim-tablo em { font-style: normal; font-size: 0.63rem; color: var(--text-muted); }
.sim-not { font-size: 0.72rem; line-height: 1.6; color: var(--text-muted); margin-top: 10px; }


/* ==========================================================================
   TANITIM — Gösterge Panelinin en üstündeki müşteri sunumu
   Renkler tema değişkenlerinden gelir; üç görünüm modunda da okunur.
   ========================================================================== */
.tn-kart {
  position: relative;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  margin-bottom: 20px;
  overflow: hidden;
}
.tn-kart.kapali { margin-bottom: 14px; }
.tn-ac {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: var(--bg-kart-bas);
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  text-align: left;
}
.tn-ac strong { font-size: 0.82rem; letter-spacing: 0.08em; }
.tn-ac em { font-style: normal; font-size: 0.72rem; color: var(--text-muted); }
.tn-ac .tn-ok { margin-left: auto; color: var(--text-muted); }
.tn-bas {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--bg-kart-bas);
  border-bottom: 1px solid var(--border-default);
}
.tn-etiket {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent-teal);
}
.tn-sayac { font-size: 0.7rem; color: var(--text-muted); }
.tn-bas .btn { margin-left: auto; }
.tn-kapat {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
}
.tn-kapat:hover { color: var(--accent-rose); background: var(--bg-kart-bas); }
.tn-govde { padding: 20px 22px 6px; min-height: 232px; }
.tn-slayt-bas { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.tn-ikon { font-size: 2rem; line-height: 1; }
.tn-slayt-bas h3 {
  margin: 0 0 5px;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.tn-iddia {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 78ch;
}
/* Oklu akış: hiyerarşi ve zincir slaytları */
.tn-zincir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; }
.tn-halka {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 13px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-kart-bas);
  font-size: 0.75rem;
  font-weight: 700;
}
.tn-halka em {
  font-style: normal;
  font-weight: 400;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.tn-ok-ara { color: var(--accent-teal); font-weight: 700; }
/* Canlı rakam kutuları */
.tn-rakamlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  margin: 16px 0 4px;
}
.tn-rakam {
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-kart-bas);
}
.tn-rakam b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.tn-rakam span { font-size: 0.68rem; color: var(--text-muted); }
.tn-maddeler { margin: 14px 0 4px; padding-left: 0; list-style: none; }
.tn-maddeler li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.tn-maddeler li::before {
  content: '▸';
  position: absolute;
  left: 4px;
  color: var(--accent-teal);
  font-weight: 700;
}
.tn-not {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.73rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.tn-alt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-default);
}
.tn-gez {
  background: none;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
}
.tn-gez:hover:not([disabled]) { border-color: var(--accent-teal); color: var(--accent-teal); }
.tn-gez[disabled] { opacity: 0.35; cursor: default; }
.tn-noktalar { display: flex; gap: 6px; margin: 0 auto; }
.tn-nokta {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--border-input);
}
.tn-nokta.etkin { background: var(--accent-teal); transform: scale(1.35); }
/* Otomatik oynatmada slayt süresini gösteren ince çubuk */
.tn-cubuk { height: 2px; background: var(--border-subtle); overflow: hidden; }
.tn-cubuk i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent-teal);
  transform-origin: left center;
  animation: tn-ilerle 9s linear forwards;
}
@keyframes tn-ilerle { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 760px) {
  .tn-govde { padding: 14px 14px 4px; min-height: 0; }
  .tn-slayt-bas h3 { font-size: 1rem; }
  .tn-zincir { gap: 5px; }
  .tn-ok-ara { display: none; }
}


/* ==========================================================================
   MASRAF LİSTESİ — TOPLU GİRİŞ
   Döviz cinsine göre oranla yeni dönem açma penceresi. Satır satır listeden
   çıkarılabilir; renkler tema değişkenlerinden gelir.
   ========================================================================== */
.mt-ust { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.mt-ust .mm-alan { min-width: 200px; flex: 1; }
.mt-baslik { font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; }
.mt-baslik span { font-weight: 400; font-size: 0.7rem; color: var(--text-muted); }
.mt-oranlar {
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-kart-bas);
  margin-bottom: 12px;
}
.mt-oran {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 6px 0;
  font-size: 0.76rem;
  font-weight: 600;
}
.mt-oran span { display: flex; flex-direction: column; }
.mt-oran em { font-style: normal; font-weight: 400; font-size: 0.66rem; color: var(--text-muted); }
.mt-oran .cell-input { width: 90px; }
.mt-ozet { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.mt-rozet {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
}
.mt-rozet.mt-ekle { border-color: var(--accent-teal); color: var(--accent-teal); }
.mt-rozet.mt-guncelle { border-color: var(--accent-blue); color: var(--accent-blue); }
.mt-rozet.mt-haric { border-color: var(--accent-rose); color: var(--accent-rose); }
.mt-rozet.mt-oransiz { border-color: var(--accent-amber); color: var(--accent-amber); }
.mt-tahmin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
}
.mt-arac { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mt-arac .cell-input { flex: 1; min-width: 180px; }
/* Tablo kendi içinde kaydırılır: pencere yüksekliği taşarsa düğmeler
   görünmez oluyordu. */
.mt-tablo-sar { max-height: 340px; overflow: auto; border: 1px solid var(--border-default); border-radius: 6px; }
.mt-tablo { font-size: 0.74rem; }
.mt-tablo thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-card); }
.mt-satir.mt-haric { opacity: 0.5; }
.mt-satir.mt-oransiz-satir .cost-value { color: var(--text-muted); }
.mt-satir.mt-atla { opacity: 0.7; }
.mt-soluk { color: var(--text-muted); }
.mt-durum { font-size: 0.68rem; color: var(--text-muted); }
.mt-satir.mt-ekle .mt-durum { color: var(--accent-teal); }
.mt-satir.mt-guncelle .mt-durum { color: var(--accent-blue); }
.mt-not { font-size: 0.72rem; line-height: 1.6; color: var(--text-muted); margin-top: 10px; }


/* ==========================================================================
   MODEL KURGUSU  (Bant Planlama)
   Model seçilince kumaş / baskı / nakış / aksesuar / yıkama sorulur. Kartlar
   Model Maliyet satırlarına yazar; ikinci bir model tanımı yoktur.
   ========================================================================== */
.bp-kurgu .card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bp-kurgu-not {
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
  flex: 1;
  min-width: 200px;
}
.bp-kurgu .card-title .btn { margin-left: auto; }
.bk-uyum {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--accent-amber);
  border-radius: 8px;
  background: var(--bg-kart-bas);
  font-size: 0.76rem;
  line-height: 1.6;
}
.bk-uyum .btn { margin-left: auto; }
.bk-bolum {
  padding: 12px 0;
  border-top: 1px solid var(--border-default);
}
.bk-bolum:first-of-type { border-top: none; padding-top: 0; }
.bk-bolum-bas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.bk-bolum-bas h4 { font-size: 0.86rem; font-weight: 700; margin: 0; }
.bk-bolum-bas span { font-size: 0.72rem; color: var(--text-muted); }
.bk-bolum-bas .btn { margin-left: auto; }
.bk-soru { display: inline-flex; gap: 0; border-radius: 6px; overflow: hidden; }
.bk-cevap {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 14px;
  cursor: pointer;
  border: 1px solid var(--border-input);
  background: var(--bg-input-durgun);
  color: var(--text-secondary);
}
.bk-cevap + .bk-cevap { border-left: none; }
.bk-cevap:hover { color: var(--text-primary); }
.bk-cevap.secili {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  color: var(--on-toplam);
}
.bk-kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.bk-kart {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--bg-kart-bas);
}
.bk-kart.dolu { border-color: var(--accent-teal); }
.bk-kart-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.bk-kart-tutar { font-weight: 800; color: var(--text-primary); }
.bk-kaynak-not {
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 7px;
}
.bk-kaynak-not.hatali { color: var(--accent-rose); }
.bk-ipucu {
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 8px;
}
.bk-ipucu.bk-yok { color: var(--text-secondary); }
.bk-aks-ust { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.bk-aks-ust .mm-alan { min-width: 260px; }
.bk-aks-toplam { display: flex; align-items: baseline; gap: 7px; font-size: 0.72rem; }
.bk-aks-toplam b { font-size: 1.1rem; color: var(--text-primary); }
.bk-aks-toplam em { font-style: normal; color: var(--text-muted); }
.bk-aks-kalem { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.bk-aks-kalem .kh-cip em { font-style: normal; color: var(--text-muted); }
.kh-cip.bk-eksik { border-color: var(--accent-rose); color: var(--accent-rose); }
.bk-aks-mevcut {
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 10px;
}
/* Katlanır bölümler (Risk / CPS / Test). Başlık her zaman durur; kapalıyken
   gövde HİÇ çizilmez, bu yüzden sadece görsel bir gizleme değil. */
.bp-katlanir { padding: 0; overflow: hidden; }
.bp-katlanir-bas {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-kart-bas);
  border-bottom: 1px solid var(--border-default);
}
.bp-katlanir.kapali .bp-katlanir-bas { border-bottom: none; }
.bp-katla {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  color: var(--text-primary);
}
.bp-katla-ok { font-size: 0.8rem; color: var(--text-muted); width: 12px; }
.bp-katla-ad { font-size: 0.92rem; font-weight: 700; white-space: nowrap; }
.bp-katla-not {
  font-size: 0.7rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-katlanir-ic { padding: 14px 16px 16px; }
.bp-cps-ozet { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 0.74rem; color: var(--text-muted); }
.bp-cps-ozet b { font-size: 1.05rem; color: var(--text-primary); margin-right: 3px; }
.bp-cps-artik b, .bp-cps-artik { color: var(--accent-amber); }
.bp-test-gecti b { color: var(--accent-teal); }
.bp-test-kaldi b { color: var(--accent-rose); }
.bp-test-hazir { color: var(--accent-teal); font-weight: 700; }
.bp-kirmizi { color: var(--accent-rose); }
.bp-test-govde { display: flex; flex-direction: column; gap: 14px; }
.bp-test-asama h5 {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-default);
}
.bp-test-asama h5 span { font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.bp-test-satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; font-size: 0.76rem; }
.bp-test-durum {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
}
.bp-test-satir.tm-gecti .bp-test-durum { border-color: var(--accent-teal); color: var(--accent-teal); }
.bp-test-satir.tm-kaldi .bp-test-durum { border-color: var(--accent-rose); color: var(--accent-rose); }
.bp-test-satir.tm-uygulanmaz { opacity: 0.55; }
.bp-test-zorunlu { font-size: 0.62rem; font-weight: 700; color: var(--accent-amber); }
.bp-test-kural { font-size: 0.62rem; font-weight: 700; color: var(--accent-purple); }
.bp-test-std { font-size: 0.68rem; color: var(--text-muted); margin-left: auto; }
.bp-risk .card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bp-risk .card-title .btn { margin-left: auto; }
.bp-risk-not { font-size: 0.73rem; line-height: 1.6; color: var(--text-muted); }


/* ==========================================================================
   RİSK ANALİZİ LİSTESİ
   Model seçilince beslenen katalog (risk_verisi.js). Renkler doğrudan yazılmaz;
   üç görünüm modunun ikisinde okunmaz olurdu (bkz. AGENT.md renk kuralı).
   ========================================================================== */
.rl-kaynak-not { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 10px; }
.rl-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-default);
}
.rl-sayi { font-size: 0.72rem; color: var(--text-muted); }
.rl-sayi strong { font-size: 1.3rem; color: var(--text-primary); }
.rl-filtre {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.rl-filtre .cell-select { min-width: 190px; }
.rl-filtre .cell-input { flex: 1; min-width: 200px; }
.rl-onay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.rl-govde { display: flex; flex-direction: column; gap: 18px; }
.rl-asama h4 {
  font-size: 0.88rem;
  font-weight: 700;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-default);
}
.rl-asama h4 span {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 7px;
}
.rl-madde {
  padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle);
}
/* Kumaş kategorisi modelinkiyle uyuşmayan kayıt SİLİNMEZ, soluklaşır: triko
   riski örme bir modelde de yol gösterir ama kullanıcının verisi o kategoriye
   ait değildir. */
.rl-madde.rl-kat-fark { opacity: 0.62; }
.rl-madde-bas {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.rl-madde-bas strong { font-size: 0.82rem; }
.rl-kademe {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
}
.rl-kademe.rl-tam { border-color: var(--accent-teal); color: var(--accent-teal); }
.rl-kademe.rl-tip { border-color: var(--accent-blue); color: var(--accent-blue); }
.rl-kademe.rl-benzer { border-color: var(--accent-amber); color: var(--accent-amber); }
.rl-bolge {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-kart-bas);
  border-radius: 4px;
  padding: 2px 6px;
}
.rl-etiket { font-size: 0.66rem; color: var(--text-muted); }
.rl-tekrar {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--accent-teal);
}
/* "Kurala çevir": katalogun uzun kuyruğunu Kural Havuzuna taşıyan düğme.
   Satırın sağına, gizle düğmesinin soluna yaslanır. */
.rl-kural {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border-input);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.63rem;
  font-weight: 600;
  padding: 2px 9px;
  color: var(--text-muted);
}
.rl-kural:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.rl-kural + .rl-gizle { margin-left: 0; }
/* VEYA kapsamı: kapsam çipinden ayrışsın diye kesik kenarlık */
.kh-cip.kh-cip-veya { border-style: dashed; border-color: var(--accent-blue); }
.rl-gizle {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--text-muted);
}
.rl-gizle:hover { color: var(--accent-rose); background: var(--bg-kart-bas); }
.rl-metin {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-line;
}
.rl-acik-liste {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.rl-acik-bas {
  width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.rl-acik-bas span {
  font-weight: 400;
  color: var(--accent-amber);
  margin-left: 7px;
}
.rl-acik-liste .rm-not { width: 100%; margin-top: 6px; }
.rl-kapsam .rm-not .btn { margin-left: 8px; }


/* ==========================================================================
   YAN MENÜ
   Sekme sayısı 26'ya çıkınca üst çubuk iki-üç satıra sarıyor ve içeriğin
   yerini yiyordu; menü yana alındı. Kapandığında yalnızca logolar kalır,
   üzerine gelince adı bir ipucu olarak çıkar.
   ========================================================================== */
.app-govde {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.tab-nav {
  position: sticky;
  top: var(--ust-serit-h);
  z-index: 100;
  flex: 0 0 var(--menu-genislik);
  width: var(--menu-genislik);
  max-height: calc(100vh - var(--ust-serit-h));
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-nav);
  backdrop-filter: var(--bulanik-nav);
  border-right: 1px solid var(--border-subtle);
  border-bottom: none;
  margin: 0;
  padding: 10px 0 20px;
  transition: flex-basis var(--transition-default), width var(--transition-default);
  scrollbar-width: thin;
}
:root { --menu-genislik: 236px; --menu-dar: 58px; }
body.menu-kapali .tab-nav {
  flex-basis: var(--menu-dar);
  width: var(--menu-dar);
  overflow: visible;          /* ipucu balonu dışarı taşabilsin */
}

.menu-ust {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}
/* "MENÜ" başlığı kullanıcının isteğiyle KIRMIZI ve KALIN: soluk gri tonda
   fark edilmiyordu. Renk sabit hex değil `--accent-rose` — üç görünüm
   modunun her birinde kendi kırmızısı tanımlı. */
.menu-baslik {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--accent-rose);
  white-space: nowrap;
  overflow: hidden;
}
.menu-katla {
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-default);
}
.menu-katla:hover { border-color: var(--border-hover); color: var(--text-primary); }
.menu-katla svg { transition: transform var(--transition-default); }
body.menu-kapali .menu-katla svg { transform: rotate(180deg); }
body.menu-kapali .menu-baslik { display: none; }
body.menu-kapali .menu-ust { justify-content: center; padding: 0 0 10px; }
body.menu-kapali .menu-katla { margin-left: 0; }

.tab-nav-inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 1px;
  overflow: visible;
  padding: 0 8px;
}
body.menu-kapali .tab-nav-inner { padding: 0 6px; align-items: center; }

.tab-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.79rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  text-align: left;
  transition: background var(--transition-default), color var(--transition-default);
  border-bottom: none;
}
.tab-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-btn:hover { color: var(--text-primary); background: var(--bg-kart-bas); }
.tab-btn.active {
  color: var(--text-primary);
  background: var(--bg-secondary);
  border-bottom-color: transparent;
}
/* Etkin sekmenin sol kenarında kendi renginde bir çubuk */
.tab-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--menu-renk, var(--accent-blue));
}
.tab-btn svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  /* RENKLİ LOGO: her sekmenin kendi tonu, etkin olmasa da görünür */
  color: var(--menu-renk, var(--accent-blue));
  transition: none;
}
.tab-btn.active svg { color: var(--menu-renk, var(--accent-blue)); }
.tab-btn:hover svg { color: var(--menu-renk, var(--accent-blue)); }

/* Sekme renkleri — hepsi tema değişkenlerinden, üç modda da tanımlı */
.tab-btn[data-renk="mavi"]     { --menu-renk: var(--accent-blue); }
.tab-btn[data-renk="teal"]     { --menu-renk: var(--accent-teal); }
.tab-btn[data-renk="mor"]      { --menu-renk: var(--accent-purple); }
.tab-btn[data-renk="turuncu"]  { --menu-renk: var(--accent-orange); }
.tab-btn[data-renk="yesil"]    { --menu-renk: var(--accent-green); }
.tab-btn[data-renk="kehribar"] { --menu-renk: var(--accent-amber); }
.tab-btn[data-renk="gul"]      { --menu-renk: var(--accent-rose); }

/* Menü kapalıyken: yalnızca logo + üzerine gelince ad balonu */
body.menu-kapali .tab-btn {
  width: 42px;
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}
body.menu-kapali .tab-btn > span { display: none; }
body.menu-kapali .tab-btn::after {
  content: attr(data-ad);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  background: var(--bg-dropdown);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 300;
  transition: opacity var(--transition-default);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
body.menu-kapali .tab-btn:hover::after { opacity: 1; }
body.menu-kapali .tab-btn.active::before { top: 4px; bottom: 4px; }

/* Menü ayrı bir sütun olduğu için içerik kendi genişliğini almalı; taşan
   tablolar sayfayı yatay kaydırmasın diye min-width sıfırlanır. */
.tab-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 14px;
}

/* Sayaç rozeti (Uyarı Havuzu) yan menüde sağa yaslanır */
.tab-btn .uyari-sayac { margin-left: auto; }
body.menu-kapali .tab-btn .uyari-sayac {
  position: absolute;
  top: 2px;
  right: 0;
  margin-left: 0;
  min-width: 15px;
  height: 15px;
  font-size: 0.6rem;
}


/* ==========================================================================
   İŞ AKIŞI — DENETİM VE PLANLAMA KATMANI
   ========================================================================== */
.ia-katman {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 18px;
  margin-top: 18px;
}
.ia-katman-zincir { margin: 14px 0 18px; }
.ia-halka.ia-uclu { border-color: var(--accent-teal); }
.ia-katmanlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 16px;
}
.ia-katman-kart {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  padding: 15px;
}
.ia-katman-ozet {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 10px 0 12px;
}
.ia-katman-ikili {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ia-katman-bas {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.ia-katman-ikili ul { margin: 0; padding-left: 16px; }
.ia-katman-ikili li {
  font-size: 0.73rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 3px;
}
.ia-besler {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.ia-besler-oge {
  padding: 4px 11px;
  border-radius: 100px;
  border: 1px solid var(--border-default);
  background: var(--bg-kart-bas);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ia-besler-oge:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.ia-baglar { margin-top: 18px; }
.ia-bag-ok { text-align: center; color: var(--accent-teal); font-weight: 700; }


/* ==========================================================================
   SAYFALAMA
   ========================================================================== */
.sayfa-kontrol {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-right: 14px;
}
.sayfa-bilgi {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-right: 4px;
  white-space: nowrap;
}
.sayfa-btn {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-default);
}
.sayfa-btn:hover:not(.pasif) { border-color: var(--accent-teal); color: var(--accent-teal); }
.sayfa-btn.pasif { opacity: 0.35; cursor: default; }
.sayfa-no {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0 6px;
  white-space: nowrap;
}
.sayfa-boyut { height: 26px; font-size: 0.74rem; padding: 0 6px; }


/* ---- Menü grupları ----
   26 sekme tek listede aranır hâldeydi; başlıklarla bölündü. Menü
   kapanınca başlık metni yerini ince bir ayraç çizgisine bırakır — gruplama
   dar menüde de hissedilsin ama yer kaplamasın. */
.menu-grup { display: flex; flex-direction: column; gap: 1px; }
.menu-grup + .menu-grup { margin-top: 12px; }
.menu-grup-bas {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font-family: inherit;
  font-size: 0.63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 11px 5px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}
.menu-grup-bas:hover { color: var(--text-secondary); }
.menu-grup-bas > span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.menu-grup-ok { flex-shrink: 0; transition: transform var(--transition-default); }
.menu-grup.grup-kapali .menu-grup-ok { transform: rotate(-90deg); }
/* Katlanan grup: yalnızca gövdesi gizlenir, başlık durur ki geri açılabilsin */
.menu-grup-ic { display: flex; flex-direction: column; gap: 1px; }
.menu-grup.grup-kapali .menu-grup-ic { display: none; }
body.menu-kapali .menu-grup-bas {
  /* Metni gizle, yerine ayraç çizgisi koy. Dar menude grup katlaması
     YOK SAYILIR (bkz. menuGruplariUygula): başlık tıklanamaz olur. */
  font-size: 0;
  padding: 0;
  height: 1px;
  margin: 9px 8px 8px;
  background: var(--border-default);
  cursor: default;
  pointer-events: none;
}
body.menu-kapali .menu-grup-ok { display: none; }
body.menu-kapali .menu-grup-ic { display: flex !important; align-items: center; }
body.menu-kapali .menu-grup + .menu-grup { margin-top: 0; }


/* ==========================================================
   GÖSTERGE PANELİ (DASHBOARD)
   Renk değeri YAZILMAZ; üç görünüm modu yalnızca değişkenleri
   ezerek çalıştığı için her ton bir --accent-* / --bg-* alır.
   ========================================================== */
.db-sayfa { display: flex; flex-direction: column; gap: 22px; }

.db-serit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
}
.db-kutu {
  position: relative;
  padding: 14px 16px 13px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
  overflow: hidden;
}
.db-kutu::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--db-renk, var(--accent-blue));
}
.db-mavi    { --db-renk: var(--accent-blue); }
.db-turkuaz { --db-renk: var(--accent-teal); }
.db-yesil   { --db-renk: var(--accent-green); }
.db-mor     { --db-renk: var(--accent-purple); }
.db-kehribar{ --db-renk: var(--accent-amber); }
.db-kirmizi { --db-renk: var(--accent-rose); }
.db-kutu-deger {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--db-renk, var(--accent-blue));
  font-variant-numeric: tabular-nums;
}
.db-kutu-deger small { font-size: 0.9rem; font-weight: 600; opacity: 0.7; }
.db-kutu-ad {
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.db-kutu-alt { margin-top: 2px; font-size: 0.7rem; color: var(--text-secondary); }
.db-serit-model .db-kutu-deger { font-size: 1.3rem; }

.db-bolum {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 16px 18px 18px;
}
.db-bolum > h3 {
  margin: 0 0 3px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
}
.db-not {
  margin: 0 0 14px;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 78ch;
}
.db-not strong { color: var(--text-primary); font-weight: 600; }

.db-tablo-sar { overflow-x: auto; }
.db-tablo { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.db-tablo th {
  text-align: left;
  padding: 9px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Başlık satırı belli olsun (kullanıcının isteği, 04.10.2026): eskiden zemini
     yoktu ve soluk yazıyla gövdeden ayrışmıyordu. Zemin birincil rengin
     OPAK karışımıdır (üç temada değişkenden), yazı tam metin rengi. */
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent-blue) 22%, var(--bg-secondary));
  border-bottom: 2px solid var(--accent-blue);
  white-space: nowrap;
}
.db-tablo th:first-child { border-top-left-radius: 7px; }
.db-tablo th:last-child { border-top-right-radius: 7px; }
.db-tablo td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  white-space: nowrap;
}
.db-tablo tr:last-child td { border-bottom: none; }
.db-tablo .sag { text-align: right; font-variant-numeric: tabular-nums; }
.db-ad { font-weight: 600; color: var(--text-primary); }
.db-soluk { color: var(--text-secondary); font-size: 0.74rem; }
.db-para { font-weight: 600; color: var(--text-primary); }
.db-para small { font-weight: 500; color: var(--text-secondary); font-size: 0.68rem; }
.db-yol {
  display: inline-block;
  width: 74px;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-input-durgun);
  overflow: hidden;
  vertical-align: middle;
}
.db-yol > i { display: block; height: 100%; background: var(--accent-blue); }
.db-yol > i.tam { background: var(--accent-green); }
.db-yol > i.az { background: var(--accent-amber); }
.db-tablo td > em {
  font-style: normal;
  margin-left: 7px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.db-kart-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 12px;
}
.db-kart {
  padding: 13px 14px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-input-durgun);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.db-kart:hover { border-color: var(--accent-blue); transform: translateY(-1px); }
/* Renkli kart (kullanıcının isteği, 04.10.2026): "Her maliyetin ortak yapısı"
   halkalarının diliyle — üstte renk çubuğu, renge boyanmış hafif zemin,
   ikon rozeti ve renkli sayı. Renk `db-r-*` sınıfının `--hr` değişkenidir,
   yani üç temada da tema değişkenlerinden gelir. */
.db-kart[class*="db-r-"] {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hr) 14%, transparent), transparent 62%),
    var(--bg-input-durgun);
}
.db-kart[class*="db-r-"]::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--hr);
}
.db-kart[class*="db-r-"]:hover { border-color: var(--hr); }
.db-kart[class*="db-r-"] h4 { display: flex; align-items: center; gap: 7px; color: var(--text-primary); }
.db-kart-ikon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--hr) 20%, transparent);
  font-size: 0.95rem;
  line-height: 1;
  text-transform: none;
}
.db-kart[class*="db-r-"] .db-kart-buyuk { color: color-mix(in srgb, var(--hr) 72%, var(--text-primary)); }
.db-kart[class*="db-r-"] .db-kart-not { color: var(--hr); }
/* Bölüm başlığı: ikon rozeti + rengin ince alt çizgisi */
.db-bolum > h3.db-bas {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--hr) 35%, var(--border-color));
}
.db-bas-ikon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--hr) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hr) 40%, transparent);
  font-size: 1.05rem;
  line-height: 1;
}
.db-kart h4 {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.db-kart-buyuk {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.db-kart-alt { margin-top: 3px; font-size: 0.72rem; color: var(--text-secondary); }
.db-kart-not {
  margin-top: 6px;
  font-size: 0.68rem;
  color: var(--accent-teal);
}

.db-uyari-liste { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.db-uyari {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--bg-input-durgun);
  border-left: 3px solid var(--border-color);
  font-size: 0.78rem;
}
.db-uyari.sv-kritik { border-left-color: var(--accent-rose); }
.db-uyari.sv-uyari { border-left-color: var(--accent-amber); }
.db-uyari.sv-gorev { border-left-color: var(--accent-blue); }
.db-uyari.sv-bilgi { border-left-color: var(--accent-teal); }
.db-uyari-sv {
  min-width: 52px;
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.db-uyari-ad { flex: 1; min-width: 0; color: var(--text-primary); }
.db-uyari-sayi {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.db-temiz {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-input-durgun);
  color: var(--accent-green);
  font-size: 0.82rem;
  font-weight: 600;
}


/* --- Validasyon: 11 alanın özet kartları --- */
/* Kart artık TIKLANABİLİR bir düğmedir: hangi alanın tablosunun açılacağını
   seçer. Bu yüzden düğme varsayılanları sıfırlanır. */
.val-ozet-kart {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  border-left: 3px solid var(--border-color);
  transition: border-color 0.15s, transform 0.15s;
}
.val-ozet-kart:hover { transform: translateY(-1px); }
.val-ozet-kart.acik { border-color: var(--accent-blue); box-shadow: 0 0 0 1px var(--accent-blue); }
.val-ozet-kart.iyi { border-left-color: var(--accent-green); }
.val-ozet-kart.orta { border-left-color: var(--accent-amber); }
.val-ozet-kart.zayif { border-left-color: var(--accent-rose); }
.val-ozet-kart.bos { border-left-color: var(--border-color); opacity: 0.72; }
.val-ozet-ad {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
}
.val-ozet-sayi {
  margin-top: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.val-ozet-sayi small { font-size: 0.7rem; font-weight: 500; color: var(--text-secondary); }
.val-ozet-kart .val-ozet-sapma {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.val-alt {
  margin-top: 10px;
  padding: 9px 12px;
  border-left: 3px solid var(--accent-blue);
  border-radius: 0 7px 7px 0;
  background: var(--bg-input-durgun);
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.val-alt strong { color: var(--text-primary); }
/* Bölüm başlığındaki düğmeler sağa yaslansın */
.val-bolum-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.val-bolum-bas .btn { margin-left: auto; }
.val-bolum-bas .btn + .btn { margin-left: 0; }

/* --- Ortak yapı zinciri: her halka kendi rengini taşır --- */
.db-r-teal     { --hr: var(--accent-teal); }
.db-r-mavi     { --hr: var(--accent-blue); }
.db-r-mor      { --hr: var(--accent-purple); }
.db-r-kehribar { --hr: var(--accent-amber); }
.db-r-gul      { --hr: var(--accent-rose); }
.db-r-yesil    { --hr: var(--accent-green); }

.db-zincir {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  padding: 4px 0 8px;
}
/* Ok, iki halkanın renkleri arasında geçiş yapar: akış hissi versin */
.db-ok {
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.db-ok > span {
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--border-color), var(--text-muted));
  position: relative;
}
.db-ok > span::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid var(--text-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.db-halka {
  flex: 1 1 0;
  min-width: 138px;
  padding: 12px 12px 11px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hr) 14%, transparent), transparent 62%),
    var(--bg-input-durgun);
  position: relative;
  overflow: hidden;
}
.db-halka::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--hr);
}
.db-halka.tikla { cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.db-halka.tikla:hover { transform: translateY(-2px); border-color: var(--hr); }

.db-halka-ust { display: flex; align-items: center; justify-content: space-between; }
.db-halka-ikon { font-size: 1.2rem; line-height: 1; }
.db-halka-no {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--hr);
  color: var(--on-accent);
  font-size: 0.66rem;
  font-weight: 700;
}
.db-halka-ad {
  margin-top: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.db-halka-vurgu {
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--hr);
  letter-spacing: 0.01em;
}
.db-halka-sayi {
  margin-top: 8px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.db-halka-sayi.bos { color: var(--text-muted); font-size: 1.1rem; }
.db-halka-ornek {
  margin-top: 6px;
  font-size: 0.64rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.db-halka-rozet {
  margin-top: 7px;
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--hr) 18%, transparent);
  color: var(--hr);
  font-size: 0.62rem;
  font-weight: 600;
  white-space: nowrap;
}
.db-yapi-cipler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.db-cip {
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid;
}
.db-c-teal { border-color: var(--accent-teal); color: var(--accent-teal);
  background: color-mix(in srgb, var(--accent-teal) 12%, transparent); }
.db-c-gul { border-color: var(--accent-rose); color: var(--accent-rose);
  background: color-mix(in srgb, var(--accent-rose) 12%, transparent); }
.db-c-mor { border-color: var(--accent-purple); color: var(--accent-purple);
  background: color-mix(in srgb, var(--accent-purple) 12%, transparent); }

/* Dar ekranda zincir dikey akar; yatay kaydırma yerine alt alta okunur */
@media (max-width: 860px) {
  .db-zincir { flex-direction: column; }
  .db-ok { flex: 0 0 16px; transform: rotate(90deg); }
}

/* Yönetim katmanı kartları */
.db-y-satirlar { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.db-y-satir {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.74rem;
  color: var(--text-secondary);
}
.db-y-satir b {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.db-kart.db-y-iyi { border-left: 3px solid var(--accent-green); }
.db-kart.db-y-orta { border-left: 3px solid var(--accent-amber); }
.db-kart.db-y-zayif { border-left: 3px solid var(--accent-rose); }
.db-kart.db-y-bilgi { border-left: 3px solid var(--accent-blue); }
.db-kart.db-y-bos { border-left: 3px solid var(--border-color); }

/* Menünün başındaki tek başına duran sekmeler (Gösterge Paneli · Sohbet) */
/* Menünün başındaki tek başına duran sekmeler (Gösterge Paneli · Sohbet).
   Kullanıcının isteği: menü ne kadar aşağı kaydırılırsa kaydırılsın bu ikisi
   HEP ÜSTTE kalsın. Kaydırma kabı `.tab-nav`dır (overflow-y: auto), bu yüzden
   sticky ona göre çalışır. Zemin OPAK olmak zorunda — altından menü düğmeleri
   geçiyor; `--bg-nav` yarı saydam olduğu için `--bg-serit` kullanılır. */
.menu-tek {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
  padding-bottom: 6px;
  background: var(--bg-serit);
  border-bottom: 1px solid var(--border-color);
}
/* Dar menüde de aynı kural geçerli; yalnızca yatay boşluk daralır. */
body.menu-kapali .menu-tek { padding-bottom: 5px; }


/* ==========================================================
   EDER OYUNU
   Sertifika kutusu ekran görüntüsü alınacak şekilde kurgulandı:
   zemini OPAK ve kendi içinde kapalı.
   ========================================================== */
.oy-sayfa { display: flex; flex-direction: column; gap: 18px; max-width: 940px; }
.oy-kart {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
  padding: 22px 24px;
}
.oy-giris-ic { text-align: center; padding: 12px 0 6px; }
.oy-giris-ic h3 {
  margin: 0 0 16px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}
.oy-ad { max-width: 320px; margin: 0 auto 16px; text-align: left; }
.oy-basla { font-size: 1rem; padding: 11px 26px; }

.oy-kural {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}
.oy-kural-blok h4 {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.oy-kural-blok p { margin: 0; font-size: 0.8rem; line-height: 1.6; color: var(--text-secondary); }
.oy-kural-blok strong { color: var(--text-primary); }
.oy-carpanlar { display: flex; flex-wrap: wrap; gap: 6px; }
.oy-carpanlar span {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 20px;
  background: var(--bg-input-durgun);
  font-size: 0.68rem;
  color: var(--text-secondary);
}
.oy-carpanlar b { color: var(--accent-amber); font-size: 0.76rem; }

.oy-rekor { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.oy-rekor h4 {
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.oy-rekor ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.oy-rekor li { display: flex; gap: 10px; align-items: baseline; font-size: 0.82rem; }
.oy-rekor li span { color: var(--text-primary); font-weight: 600; }
.oy-rekor li em { font-style: normal; color: var(--text-muted); font-size: 0.72rem; }
.oy-rekor li b { margin-left: auto; color: var(--accent-amber); font-variant-numeric: tabular-nums; }

/* --- Soru --- */
.oy-serit {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.oy-adim { font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); }
.oy-noktalar { display: flex; gap: 6px; flex: 1; }
.oy-noktalar i {
  width: 26px; height: 5px; border-radius: 3px;
  background: var(--bg-input-durgun);
}
.oy-noktalar i.gecti { background: var(--accent-green); }
.oy-noktalar i.simdi { background: var(--accent-amber); }
.oy-puan-ara {
  font-size: 0.84rem; font-weight: 700; color: var(--accent-amber);
  font-variant-numeric: tabular-nums;
}
.oy-soru-ic { text-align: center; padding: 26px 0 12px; }
.oy-alan {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-secondary);
}
.oy-kayit {
  margin: 8px auto 4px;
  max-width: 640px;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  text-wrap: balance;
}
.oy-soru-metin { font-size: 0.86rem; color: var(--text-secondary); }
.oy-soru-metin b { color: var(--accent-teal); }
.oy-giris-satir {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 20px; flex-wrap: wrap;
}
.oy-cevap {
  width: 200px; text-align: right;
  font-size: 1.5rem !important; font-weight: 700;
  padding: 10px 14px !important;
  font-variant-numeric: tabular-nums;
}
.oy-birim { font-size: 0.9rem; color: var(--text-secondary); min-width: 56px; text-align: left; }
.oy-sayac {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.oy-sayac.hizli { color: var(--accent-green); }
.oy-sayac.orta { color: var(--accent-amber); }
.oy-sayac.yavas { color: var(--accent-rose); }
.oy-vazgec { margin-top: 6px; }

/* --- Sertifika --- */
.oy-sertifika {
  position: relative;
  padding: 30px 34px 24px;
  border: 3px solid var(--accent-amber);
  border-radius: 14px;
  /* Zemin OPAK olmak zorunda: kutu ekran görüntüsü alınıyor ve yarı saydam
     bir zemin arkasındaki tabloyu içine alırdı. */
  background: var(--bg-serit);
}
.oy-sert-ust { text-align: center; }
.oy-sert-marka {
  display: block;
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.22em;
  color: var(--accent-amber);
}
.oy-sert-alt {
  display: block; margin-top: 3px;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.oy-sert-ad {
  margin-top: 18px; text-align: center;
  font-size: 1.7rem; font-weight: 700; color: var(--text-primary);
}
.oy-sert-puan {
  margin-top: 6px; text-align: center;
  font-size: 3.4rem; font-weight: 800; line-height: 1;
  color: var(--accent-amber);
  font-variant-numeric: tabular-nums;
}
.oy-sert-puan small {
  font-size: 0.9rem; font-weight: 600; margin-left: 8px;
  color: var(--text-secondary);
}
.oy-sert-unvan {
  margin-top: 6px; text-align: center;
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.oy-sert-ozet {
  display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;
  margin: 20px 0 4px; padding: 12px 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-color);
}
.oy-sert-ozet div { text-align: center; }
.oy-sert-ozet span {
  display: block; font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
}
.oy-sert-ozet b {
  font-size: 1.05rem; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.oy-sert-tablo { overflow-x: auto; margin-top: 14px; }
.oy-sert-tablo table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.oy-sert-tablo th {
  text-align: left; padding: 6px 8px;
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.oy-sert-tablo td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  white-space: nowrap;
}
.oy-sert-tablo .sag { text-align: right; font-variant-numeric: tabular-nums; }
.oy-sert-tablo tr td:first-child { color: var(--text-primary); }
.oy-satir-puan { font-weight: 700; color: var(--accent-amber) !important; }
.oy-sert-tablo tr.oy-iyi td:first-child { border-left: 3px solid var(--accent-green); padding-left: 8px; }
.oy-sert-tablo tr.oy-orta td:first-child { border-left: 3px solid var(--accent-amber); padding-left: 8px; }
.oy-sert-tablo tr.oy-zayif td:first-child { border-left: 3px solid var(--accent-rose); padding-left: 8px; }
.oy-sert-imza {
  display: flex; justify-content: space-between; margin-top: 16px;
  font-size: 0.68rem; color: var(--text-muted);
}
.oy-sonuc-eylem { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oy-en-iyi { font-size: 0.78rem; color: var(--text-secondary); }
.oy-en-iyi b { color: var(--text-primary); }
.oy-not { margin: 0; font-size: 0.74rem; line-height: 1.6; color: var(--text-muted); }

/* ==========================================
   MOBİL — SON SÖZ SAHİBİ KURALLAR
   ==========================================
   Buradaki bildirimler dosyanın en sonunda durur ÇÜNKÜ hedefledikleri
   bileşenler (.kl-ust, .kl-ust-sag, .kl-sayi, .uyari-*) daha aşağıda
   tanımlıdır: aynı özgüllükte son yazan kazandığı için üstteki mobil bloğa
   yazılsalar sessizce kaybederlerdi. Yeni bir mobil düzeltme, hedefi bu
   satırdan sonra tanımlıysa buraya yazılmalıdır.
   ========================================== */
@media (max-width: 760px) {
  /* Kumaş Listem / Validasyon / Uyarı Havuzu üst şeridi tek kolona iner.
     Kolon yönünde flex-basis YÜKSEKLİĞE uygulanır: "flex: 1 1 280px" taşıyan
     açıklama metni 280px'lik boş bir kutuya dönüşüyordu. */
  .kl-ust { flex-direction: column; align-items: stretch; }
  .kl-ust .val-aciklama { flex: 0 0 auto; }
  .kl-ust .filter-select, .kl-ust .kl-sayi { width: 100%; max-width: none; }
  .kl-ust-sag { margin-left: 0; flex-wrap: wrap; }

  /* Uyarı Havuzu özeti: üç sayaç yan yana, açıklama altta tam genişlik */
  .uyari-kart { min-width: 0; flex: 1 1 28%; padding: 12px 10px; }
  .uyari-kart-sayi { font-size: 1.5rem; }
  .uyari-ozet-not { flex: 1 1 100%; }
  .uyari-madde { padding: 12px 14px; }
  .uyari-detay { font-size: 0.82rem; }

  /* Görünüm modu seçici: başlıkta yer kalmadığı için yalnızca ikonlar */
  .tema-btn span { display: none; }
  .tema-btn { padding: 8px 10px; min-height: 40px; }
}

@media (max-width: 760px) {
  /* Model Maliyet: parametre kutuları ve sonuç kartları tek kolona iner */
  .mm-blok { padding: 14px; }
  .mm-param-ic { grid-template-columns: 1fr; }
  .mm-sonuc { grid-template-columns: 1fr 1fr; }
  /* Üst şerit alt alta: kimlik iki kolon, fiyatlar ve resim tam genişlik */
  .mm-serit-kimlik { grid-template-columns: 1fr 1fr; }
  .mm-serit-fiyat { flex: 1 1 100%; }
  .mm-serit-fiyat .mm-baslik-sonuc { flex: 1 1 0; text-align: left; }
  .mm-resim { flex: 1 1 100%; width: auto; }

  /* Uçtan Uca: canlı maliyet paneli içeriğin ALTINA iner ve yapışkanlığı
     bırakır — dar ekranda 300px'lik ikinci kolon içeriği eziyordu. */
  .uu-govde { grid-template-columns: 1fr; }
  .uu-panel { position: static; }
  .uu-adim { min-width: 108px; }
  .uu-adim-ad { font-size: 0.74rem; }
  .uu-gezinme .btn { min-width: 0; flex: 1; }
}

/* ==========================================
   SABİTLER — ÜÇ SÜTUNLU EKRAN
   ==========================================
   Kullanıcının kurgusu: solda başlıklar, tıklayınca ortada o başlığın listesi,
   listeden bir madde seçilince sağda alt listesi. Kaynak bir, iki ya da üç
   katmanlı olabilir; sütun sayısı sabit kalır, içerik değişir. */
.sb-duzen {
  display: grid;
  grid-template-columns: 260px minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 14px;
  padding: 20px;
  align-items: start;
}

/* ---- 1. sütun: başlıklar ---- */
.sb-sol {
  position: sticky;
  top: calc(var(--ust-serit-h) + 12px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.sb-ara-sar { margin-bottom: 8px; }
.sb-ara { width: 100%; }
.sb-bolum-bas {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 8px 2px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}
.sb-bolum-say {
  margin-left: auto;
  font-size: 0.66rem;
  color: var(--text-muted);
}
.sb-bolum-not {
  padding: 0 8px 6px;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.sb-baslik {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  text-align: left;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.sb-baslik:hover { background: var(--bg-hover); color: var(--text-primary); }
.sb-baslik.etkin {
  background: var(--bg-toplam);
  border-color: var(--border-toplam);
  color: var(--text-primary);
  font-weight: 600;
}
.sb-baslik-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Katman göstergesi: bir/iki/üç nokta — kaynağın kaç kırılımı olduğunu söyler */
.sb-katman { color: var(--accent-teal); letter-spacing: 2px; font-size: 0.9rem; }
.sb-baslik-say {
  min-width: 24px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.sb-bos-kucuk { padding: 4px 9px 8px; font-size: 0.72rem; color: var(--text-muted); }

/* ---- 2. ve 3. sütun ---- */
.sb-sutun {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  min-width: 0;
}
.sb-sutun-bas {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-kart-bas);
  border-bottom: 1px solid var(--border-default);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.sb-ucuncu .sb-sutun-bas { border-radius: 0; }
.sb-sutun-ikon { font-size: 1.05rem; line-height: 1.3; }
.sb-sutun-bas h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}
.sb-sutun-not {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.sb-sutun-say {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-teal);
}
.sb-liste { padding: 6px; max-height: 460px; overflow-y: auto; }
.sb-satir {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
}
.sb-satir:hover { background: var(--bg-hover); }
.sb-satir.secili {
  background: var(--bg-toplam);
  border-color: var(--border-toplam);
}
.sb-satir-ad {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Alt kayıt rozeti: bu maddenin altında kaç madde var */
.sb-alt-rozet {
  flex: 0 0 auto;
  padding: 1px 6px;
  font-size: 0.66rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
}
/* Kullanım sayacı — sayfanın analiz tarafı. Sıfır soluk gösterilir ki
   "hiç kullanılmıyor" bir bakışta görünsün. */
.sb-kullanim {
  flex: 0 0 auto;
  min-width: 34px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--accent-teal);
}
.sb-kullanim.sifir { color: var(--text-muted); opacity: 0.55; }
.sb-satir-eylem { display: flex; gap: 2px; opacity: 0; transition: opacity var(--transition-fast); }
.sb-satir:hover .sb-satir-eylem,
.sb-satir.secili .sb-satir-eylem { opacity: 1; }
.sb-satir-eylem button {
  padding: 1px 5px;
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.sb-satir-eylem button:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--border-default);
  background: var(--bg-input);
}
.sb-satir-eylem button:disabled { opacity: 0.25; cursor: default; }
.sb-satir-eylem .btn-sabit-delete:hover { color: var(--accent-red); }
.sb-ekle {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-default);
}
.sb-ekle input { flex: 1; min-width: 0; }
.sb-bos {
  padding: 18px 16px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.sb-sag-bos { justify-content: center; }
.sb-ucuncu { border-top: 2px solid var(--border-default); }
.sb-tablo { margin: 0; }
.sb-tablo .sb-aciklama { font-size: 0.74rem; color: var(--text-muted); }
.sb-tek-deger {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 16px;
  padding: 12px 14px;
  background: var(--bg-toplam);
  border: 1px solid var(--border-toplam);
  border-radius: var(--radius-md);
}
.sb-tek-deger strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem;
  color: var(--on-toplam);
}

/* Sabitler ekranının mobil düzeni. DİKKAT: bu blok `.sb-*` tanımlarından SONRA
   durmak ZORUNDA — dosyanın ortasındaki mobil bloğa yazılsaydı aynı özgüllükte
   ezilirdi (bkz. dosyadaki "MOBİL — SON SÖZ SAHİBİ" notu). */
@media (max-width: 900px) {
  .sb-duzen {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }
  .sb-sol {
    position: static;
    max-height: none;
    /* Başlıklar dar ekranda yatay şerit olur; dikey liste ekranı yiyordu */
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sb-ara-sar { flex: 1 0 100%; margin-bottom: 4px; }
  .sb-bolum-bas, .sb-bolum-not { flex: 1 0 100%; margin-top: 6px; }
  .sb-baslik { width: auto; flex: 0 1 auto; }
  .sb-baslik-ad { max-width: 42vw; }
  .sb-liste { max-height: 320px; }
}

/* ==========================================
   İŞ AKIŞI
   ==========================================
   Modüllerin uçtan uca akışını gösteren sayfa. Kullanıcının onayına sunulur:
   "maliyet kalemi → bileşen → proses sarfiyat → masraf listesi → maliyet"
   halkası her modülde aynı olmalı. */
#isAkisiContainer { padding: 20px; display: flex; flex-direction: column; gap: 18px; }

.ia-kural, .ia-denetim, .ia-modul, .ia-proje {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
}
/* Proje dosyası kartı sayfanin en ustunde durur ve tek satirdir */
.ia-proje { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 18px; margin-bottom: 16px; }
/* Sayfa içi gezinti ve bölüm ayracı (karbon / termin ayrı bölüm) */
.ia-gezinti { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ia-ayrac { margin: 26px 0 14px; padding-top: 16px; border-top: 2px solid var(--border-default); font-size: 0.8rem; color: var(--text-muted); }
.ia-ayrac > span { display: block; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); margin-bottom: 2px; }
#iaKarbon, #iaTermin, #iaKatman, #iaKural, #iaDenetim, #iaModuller { scroll-margin-top: 70px; }
.ia-proje-bas { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 260px; }
.ia-proje-bas h3 { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--text-primary); }
.ia-proje-bas > span:first-child { font-size: 1.4rem; }
.ia-proje-eylem { display: flex; gap: 8px; flex-wrap: wrap; }
/* Bağlantı düğme gibi görünür; .btn zaten kendi biçimini taşıyor,
   yalnızca <a> için gereken hizalama eklenir. */
.ia-proje-eylem .btn { text-decoration: none; display: inline-flex; align-items: center; }
.ia-kural-bas, .ia-modul-bas {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--bg-kart-bas);
  border-bottom: 1px solid var(--border-default);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.ia-kural-bas h3, .ia-modul-bas h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}
.ia-kural-bas > span:first-child,
.ia-modul-ikon { font-size: 1.3rem; }
.ia-kural-bas > button, .ia-modul-bas > button { margin-left: auto; }
.ia-not {
  display: block;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Ortak kural zinciri: beş halka, aralarında ok */
.ia-zincir {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 18px;
}
.ia-halka {
  flex: 1 1 170px;
  min-width: 0;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.ia-halka-ikon { font-size: 1.2rem; }
.ia-halka-ad {
  margin: 4px 0 5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
}
.ia-halka-not { font-size: 0.72rem; line-height: 1.5; color: var(--text-secondary); }
.ia-ok {
  align-self: center;
  flex: 0 0 auto;
  font-size: 1.1rem;
  color: var(--accent-teal);
}
.ia-vurgu {
  margin: 0 18px 16px;
  padding: 11px 14px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--bg-toplam);
  border: 1px solid var(--border-toplam);
  border-radius: var(--radius-md);
}

/* Uyum denetimi */
.ia-turler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  padding: 16px 18px 6px;
}
.ia-tur {
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.ia-tur-bas {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}
.ia-tur-bas span {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-teal);
}
.ia-tur-not { margin-top: 4px; font-size: 0.7rem; line-height: 1.45; color: var(--text-muted); }
.ia-ihlal {
  margin: 12px 18px 16px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-amber);
  border-radius: var(--radius-md);
}
.ia-ihlal-bas {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-amber);
  margin-bottom: 4px;
}
.ia-temiz {
  margin: 12px 18px 16px;
  padding: 12px 14px;
  font-size: 0.82rem;
  color: var(--on-toplam);
  background: var(--bg-toplam);
  border: 1px solid var(--border-toplam);
  border-radius: var(--radius-md);
}
.ia-duzelt {
  margin: 12px 18px 16px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius-md);
}
/* Kalem taşınmıyor, yalnızca etiketi düzeltiliyor: ihlalden daha yumuşak
   bir ton taşısın ki gerçek ihlal gözün önünde kalsın. */
.ia-duzelt .ia-ihlal-bas { color: var(--accent-teal); }
.ia-kayit {
  margin: 12px 18px 16px;
  padding: 12px 14px;
  background: var(--bg-toplam);
  border: 1px solid var(--border-toplam);
  border-radius: var(--radius-md);
}
.ia-kayit-bas {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--on-toplam);
  margin-bottom: 4px;
}
.ia-kayit-liste { margin: 8px 0 8px 18px; padding: 0; }
.ia-kayit-liste li {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 3px;
}
.ia-kayit-liste li.ia-kayit-uyari { color: var(--accent-amber); }
.ia-tablo { margin-top: 10px; }
.ia-var { color: var(--accent-teal); font-size: 0.76rem; }

/* Modül kartı: beş adım yan yana */
.ia-moduller { display: flex; flex-direction: column; gap: 18px; }
.ia-adimlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  padding: 16px 18px 8px;
}
.ia-adim {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ia-adim.ia-eksik { border-color: var(--accent-amber); }
.ia-adim-bas {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-kart-bas);
  border-bottom: 1px solid var(--border-subtle);
}
.ia-rozet {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent-teal);
  white-space: nowrap;
}
.ia-adim-ic {
  padding: 10px 11px;
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.ia-adim-ic ul { margin: 0; padding-left: 16px; }
.ia-adim-ic li { margin-bottom: 2px; }
.ia-grup { margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.ia-uyari {
  margin-top: 7px;
  padding: 6px 8px;
  font-size: 0.71rem;
  color: var(--accent-amber);
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}

/* Zincir formülü */
.ia-formul { padding: 4px 18px 16px; }
/* Termin kuralları: Sabitler'den canlı okunan değer */
.ia-prm { font-weight: 700; color: var(--accent-teal); white-space: nowrap; border-bottom: 1px dotted var(--accent-teal); cursor: help; }
/* CPS adım planı (KDP-Operasyon) */
.kdp-kpiler { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.kdp-kpi { padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 8px; display: flex; flex-direction: column; gap: 2px; }
.kdp-kpi span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.kdp-kpi strong { font-size: 1.3rem; }
.kdp-kpi em { font-style: normal; font-size: 0.75rem; color: var(--text-muted); }
.kdp-kpi-kotu strong { color: var(--accent-rose); }
.kdp-tablo { margin-bottom: 12px; }
.kdp-tablo td.kdp-vurgu { color: var(--accent-amber); font-weight: 600; }
.kdp-alt-bas { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 8px 0 6px; }
.kdp-cps { margin-bottom: 18px; }
.kdp-tarih { width: auto; display: inline-block; padding: 3px 6px; }
.kdp-durum { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; }
.kdp-d-tamam { color: var(--on-green); border: 1px solid var(--accent-teal); }
.kdp-d-plan { color: var(--on-blue); border: 1px solid var(--border-default); }
.kdp-d-gec { color: var(--accent-rose); border: 1px solid var(--accent-rose); }
.kdp-d-sira { color: var(--accent-amber); border: 1px solid var(--accent-amber); }
.kdp-d-bek { color: var(--text-muted); border: 1px solid var(--border-default); }
.ia-formul-bas {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.ia-formul-satir {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border-subtle);
}
.ia-formul-satir:last-child { border-bottom: none; }
.ia-formul-satir > span {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--on-toplam);
  background: var(--bg-toplam);
  border: 1px solid var(--border-toplam);
  border-radius: 50%;
}
.ia-formul-satir code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-primary);
}

/* Dar ekran — bu blok `.ia-*` tanımlarından SONRA durmalı */
@media (max-width: 900px) {
  #isAkisiContainer { padding: 12px; gap: 12px; }
  .ia-zincir { flex-direction: column; }
  .ia-ok { transform: rotate(90deg); align-self: center; }
  .ia-adimlar, .ia-turler { grid-template-columns: 1fr; }
}

/* Bant Planlama — dar ekranda kademeler ve istasyonlar alt alta */
@media (max-width: 900px) {
  .bp-kademe label, .bp-ayar label { min-width: 100%; flex: 1 1 100%; }
  .bp-olculer { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .bp-olcu-deger { font-size: 1.2rem; }
  .bp-istasyon { flex: 0 0 180px; }
  .bp-model-not { flex-wrap: wrap; }
  .bp-model-not .btn { margin-left: 0; }
}
.bp-ist-op-say { font-size: 0.66rem; color: var(--accent-amber); margin-bottom: 5px; }
.bp-tablo tr.bp-etkin td { background: var(--bg-kart-bas); }

/* Bant Planlama — yükleme kalibrasyonu */
.bp-kalibre {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius-md);
  background: var(--bg-kart-bas);
}
.bp-kalibre-bas {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-teal);
  margin-bottom: 6px;
}
.bp-kalibre .bp-ayar { margin-top: 10px; }
.bp-kalibre-dugme { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

/* Risk Analiz Merkezi — dar ekran */
@media (max-width: 900px) {
  .rm-merkezler { grid-template-columns: 1fr; }
  .rm-merkez-kirilim { grid-template-columns: repeat(2, 1fr); }
  .rm-agirlik label { flex: 1 1 100%; }
  .rm-ozet-bas { flex-wrap: wrap; }
  .rm-ozet-bas .rm-rozet { margin-left: 0; }
}

/* CPS Planı — dar ekranda şerit alt alta */
@media (max-width: 900px) {
  .cps-satir { flex-wrap: wrap; }
  .cps-satir-ad, .cps-satir-tarih { flex: 1 1 100%; text-align: left; }
  .cps-hat { flex: 1 1 100%; }
  .cps-sure label { flex: 1 1 100%; }
}

/* Test Motoru — dar ekran */
@media (max-width: 900px) {
  .tm-filtre label { flex: 1 1 100%; }
  .tm-ozet-bas { flex-wrap: wrap; }
  .tm-rozet { margin-left: 0; }
}
.mm-termin-is { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.cps-is-gunu { color: var(--text-secondary); }

/* Yan menü — dar ekran. Mobilde menü her zaman dar durur; etiketler zaten
   sığmaz ve içeriğin genişliği değerlidir. */
@media (max-width: 900px) {
  .app-govde { gap: 10px; }
  .tab-nav { flex-basis: var(--menu-dar) !important; width: var(--menu-dar) !important; }
  .tab-nav .menu-baslik { display: none; }
  .tab-nav .menu-ust { justify-content: center; padding: 0 0 10px; }
  .tab-nav .menu-katla { margin-left: 0; }
  .tab-nav-inner { padding: 0 6px; align-items: center; }
  .tab-btn { width: 42px; justify-content: center; padding: 10px 0; gap: 0; }
  .tab-btn > span { display: none; }
  .tab-btn::after {
    content: attr(data-ad);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-dropdown);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 300;
  }
  .tab-btn:hover::after { opacity: 1; }
}

/* İş Akışı katmanı — dar ekran */
@media (max-width: 900px) {
  .ia-katmanlar { grid-template-columns: 1fr; }
  .ia-katman-ikili { grid-template-columns: 1fr; }
}

/* Menü grupları — dar ekranda menü zaten dar: başlık ayraça dönüşür */
@media (max-width: 900px) {
  .menu-grup-bas {
    font-size: 0;
    padding: 0;
    height: 1px;
    margin: 9px 8px 8px;
    background: var(--border-default);
  }
  .menu-grup + .menu-grup { margin-top: 0; }
}

/* ==========================================================================
   DÖRT KATMANLI RİSK — çıpa, katman, kart bölümü ve liste sayaçları
   Renkler tema değişkenlerinden gelir; sabit #hex yazılmaz, yoksa üç görünüm
   modunun ikisinde okunmaz olur.
   ========================================================================== */

/* --- Kural formundaki çıpa çipleri --- */
.kh-cip.kh-capa { border-color: var(--accent-blue); color: var(--text-primary); }
.kh-cip.kh-capa em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--accent-blue);
  color: var(--on-accent);
}
/* Çıpası kayıp kural: kayıt silinmiş ya da adı değişmiş olabilir */
.kh-cip.kh-capa-kayip { border-color: var(--accent-rose); color: var(--accent-rose); }
.kh-cip.kh-capa-kayip em { background: var(--accent-rose); }
.kh-capa-kayit { flex: 2 1 280px !important; }
.kh-katman {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--bg-kart-bas);
  border: 1px solid var(--border-default);
}
.kh-katman.k1 { color: var(--accent-blue);   border-color: var(--accent-blue); }
.kh-katman.k2 { color: var(--accent-teal);   border-color: var(--accent-teal); }
.kh-katman.k3 { color: var(--accent-amber);  border-color: var(--accent-amber); }
.kh-katman.k4 { color: var(--accent-rose);   border-color: var(--accent-rose); }
.kh-capa-filtre {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--accent-blue);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* --- Liste kolonlarındaki risk/test sayacı --- */
.kh-sayac {
  min-width: 34px;
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid var(--border-default);
  background: var(--bg-kart-bas);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  cursor: pointer;
}
.kh-sayac:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.kh-sayac.bos { color: var(--text-muted); border-style: dashed; }
/* Şiddet 1-5 → sakinden keskine. Dolu kural sayacı göz önünde kalmalı. */
.kh-sayac.s1, .kh-sayac.s2 { border-color: var(--accent-teal);  color: var(--accent-teal); }
.kh-sayac.s3 { border-color: var(--accent-amber); color: var(--accent-amber); }
.kh-sayac.s4, .kh-sayac.s5 { border-color: var(--accent-rose); color: var(--accent-rose); }
.kh-sayac .kh-capraz { margin-left: 4px; font-size: 0.66rem; }

/* --- Kayıt kartındaki Risk/Test bölümü --- */
.kart-kural-kutu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-kart-bas);
}
.kart-kural-bos { font-size: 0.82rem; color: var(--text-muted); }
.kart-kural {
  padding: 8px 10px;
  border-left: 3px solid var(--border-default);
  background: var(--bg-input-durgun);
  border-radius: 0 4px 4px 0;
}
.kart-kural.s1, .kart-kural.s2 { border-left-color: var(--accent-teal); }
.kart-kural.s3 { border-left-color: var(--accent-amber); }
.kart-kural.s4, .kart-kural.s5 { border-left-color: var(--accent-rose); }
.kart-kural-bas { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); }
.kart-kural-kat {
  display: inline-block;
  margin-right: 7px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
}
.kart-kural-tahmin {
  margin-left: 7px;
  font-size: 0.64rem;
  font-weight: 400;
  color: var(--accent-amber);
}
.kart-kural-onlem { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; }
.kart-kural-test { font-size: 0.76rem; color: var(--accent-teal); margin-top: 3px; }
.kart-kural-eylem { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* --- Risk sayfası: on bir aşama, dört katman --- */
.rm-baslik-not { margin-left: 10px; font-size: 0.72rem; font-weight: 400; color: var(--text-muted); }
.rm-asamalar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.rm-asama {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 14px;
  background: var(--bg-card);
  min-width: 0;
}
.rm-asama-bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rm-asama-bas h4 { margin: 0; font-size: 0.95rem; color: var(--text-primary); }
.rm-asama-alt { font-size: 0.74rem; color: var(--text-muted); margin: 4px 0 10px; }
.rm-katmanlar { display: flex; flex-direction: column; gap: 7px; }
.rm-katman {
  border-left: 3px solid var(--border-default);
  padding: 6px 0 6px 9px;
}
.rm-katman.k1 { border-left-color: var(--accent-blue); }
.rm-katman.k2 { border-left-color: var(--accent-teal); }
.rm-katman.k3 { border-left-color: var(--accent-amber); }
.rm-katman.k4 { border-left-color: var(--accent-rose); }
.rm-katman.bos { opacity: 0.45; }
.rm-katman-bas {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.rm-katman-bas b { font-family: var(--font-mono); color: var(--text-primary); }
.rm-katman-liste { margin: 5px 0 0; padding: 0; list-style: none; }
.rm-katman-liste li {
  font-size: 0.78rem;
  color: var(--text-primary);
  padding: 3px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.rm-katman-liste li:last-child { border-bottom: none; }
.rm-katman-liste em {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 1px;
}
.rm-sev {
  display: inline-block;
  min-width: 16px;
  margin-right: 6px;
  text-align: center;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  background: var(--bg-kart-bas);
  color: var(--text-secondary);
}
.rm-sev.s4, .rm-sev.s5 { background: var(--accent-rose); color: var(--on-accent); }
.rm-sev.s3 { background: var(--accent-amber); color: var(--on-accent); }
.rm-katman-daha { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
.rm-asama-capraz {
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 0.76rem;
  background: var(--bg-input-durgun);
  color: var(--accent-rose);
}

/* ==========================================================================
   MALİYET DAĞILIMI — satış fiyatının değer zinciri boyunca kırılımı
   Şerit dilimleri zincir SIRASINI izler; genişlikleri paylarıyla orantılıdır.
   Renkler `--md-r1..r8` rampasından gelir ve üç temada ayrı tanımlıdır.
   ========================================================================== */
.md-dagilim { margin-top: 18px; }
.md-alt {
  margin: 0 0 16px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  max-width: 76ch;
}
.md-serit {
  display: flex;
  gap: 2px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 5px;
  overflow: hidden;
}
.md-dilim {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  /* Rampanın açık ucunda koyu, koyu ucunda açık metin okunur kalsın */
  color: var(--md-on-acik);
  white-space: nowrap;
  overflow: hidden;
}
.md-dilim.r5, .md-dilim.r6, .md-dilim.r7, .md-dilim.r8 { color: var(--md-on-koyu); }
.md-dilim.r1 { background: var(--md-r1); }
.md-dilim.r2 { background: var(--md-r2); }
.md-dilim.r3 { background: var(--md-r3); }
.md-dilim.r4 { background: var(--md-r4); }
.md-dilim.r5 { background: var(--md-r5); }
.md-dilim.r6 { background: var(--md-r6); }
.md-dilim.r7 { background: var(--md-r7); }
.md-dilim.r8 { background: var(--md-r8); }

/* Künye: dar ekranda tek, geniş ekranda üç sütun — görseldeki düzen */
.md-kunye {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 26px;
}
.md-satir {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.84rem;
}
.md-satir.bos { opacity: 0.5; }
.md-nokta {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  align-self: center;
}
.md-nokta.r1 { background: var(--md-r1); }
.md-nokta.r2 { background: var(--md-r2); }
.md-nokta.r3 { background: var(--md-r3); }
.md-nokta.r4 { background: var(--md-r4); }
.md-nokta.r5 { background: var(--md-r5); }
.md-nokta.r6 { background: var(--md-r6); }
.md-nokta.r7 { background: var(--md-r7); }
.md-nokta.r8 { background: var(--md-r8); }
.md-ad { flex: 1 1 auto; color: var(--text-primary); min-width: 0; }
.md-ad em {
  display: block;
  font-style: normal;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.md-oran {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.md-taban {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 82ch;
}

/* ==========================================================================
   ÜRÜN DIŞI — Havlu · Nevresim · Ayakkabı · Çanta
   Dört sekme tek çizimi paylaşır; biçim de ortaktır.
   ========================================================================== */
.ud-ust {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ud-baslik { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ud-ikon { font-size: 1.6rem; line-height: 1; }
.ud-baslik strong { font-size: 1rem; color: var(--text-primary); }
.ud-alt { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.ud-arac { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ud-arac select { min-width: 220px; }
.ud-arac input[type="text"] { min-width: 180px; }
.ud-tablo-sar { overflow-x: auto; }
.ud-tablo th.say, .ud-tablo td.cost-value { text-align: right; }
/* Konstrüksiyon adları uzun (kullanıcının tablosu): iki satıra sarılır */
.ud-alt-tip { max-width: 260px; font-size: 0.8rem; color: var(--text-secondary); }
.ud-olcu { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.ud-fiyat { font-weight: 600; color: var(--text-primary); }
.ud-not {
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 88ch;
}
/* Formdaki proses rotası: adım · türev · tekrar · ölçü */
.ud-rota { display: flex; flex-direction: column; gap: 6px; }
.ud-rota-satir {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 88px 54px;
  gap: 8px;
  align-items: center;
}
@media (max-width: 700px) {
  .ud-rota-satir { grid-template-columns: minmax(0, 1fr) 78px; }
  .ud-rota-satir > select { grid-column: 1 / -1; }
}
.ud-rota-ac { display: flex; align-items: center; gap: 7px; font-size: 0.84rem; min-width: 0; }
.ud-rota-ac span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ud-rota-olcu {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: right;
}
.ud-ham-satir {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 130px;
  gap: 8px;
  margin-bottom: 6px;
}

/* Ürün Dışı: tek listedeki grup rozeti, birim ve grup özetleri */
.ud-grup-rozet {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 0.72rem;
  white-space: nowrap;
  background: var(--bg-kart-bas);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}
.ud-birim { font-size: 0.76rem; color: var(--text-muted); }
/* Birimler farklı (adet · takım · çift), bu yüzden TOPLANMAZ; her grup ayrı */
.ud-ozet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ud-ozet-kutu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-kart-bas);
}
.ud-ozet-kutu span { font-size: 0.78rem; color: var(--text-secondary); }
.ud-ozet-kutu strong {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--text-primary);
}
.ud-ozet-kutu em { font-style: normal; font-size: 0.72rem; color: var(--text-muted); }

/* ==========================================================================
   SOHBET — soru sorarak Eder maliyetine ulaşma
   Akış kendi içinde kaydırılır; giriş satırı altta sabit durur.
   ========================================================================== */
.sb-kabuk {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
}
.sb-akis {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 260px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-kart-bas);
}
.sb-mesaj { display: flex; flex-direction: column; gap: 6px; max-width: 78%; }
.sb-mesaj.bot { align-self: flex-start; align-items: flex-start; }
.sb-mesaj.kul { align-self: flex-end; align-items: flex-end; }
.sb-balon {
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  border: 1px solid var(--border-default);
}
.sb-mesaj.bot .sb-balon {
  background: var(--bg-card);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}
.sb-mesaj.kul .sb-balon {
  background: var(--accent-blue);
  color: var(--on-accent);
  border-color: transparent;
  border-bottom-right-radius: 4px;
}
/* Sonuç cümlesi vurgulanır: sohbetin vardığı yer odur */
.sb-balon.sonuc {
  background: var(--bg-toplam);
  color: var(--on-toplam);
  border-color: var(--border-toplam);
  font-weight: 600;
}
.sb-oneri, .sb-cipler { display: flex; gap: 7px; flex-wrap: wrap; }
.sb-cipler { padding: 0 2px; }
.sb-cip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 100px;
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.83rem;
  cursor: pointer;
}
.sb-cip:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.sb-cip em { font-style: normal; font-size: 0.72rem; color: var(--text-muted); }
.sb-daha { align-self: center; font-size: 0.76rem; color: var(--text-muted); }
/* TL ve USD yan yana: TL lacivert, USD mevcut yeşil (kullanıcının isteği) */
/* Kullanıcının isteği: TL parlak lacivert, USD parlak yeşil ve daha KALIN.
   Renkler doğrudan yazılmaz, üç temada tanımlı değişkenlerden gelir. */
.sb-tl, .sb-usd {
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.sb-tl { color: var(--sb-tl); }
.sb-usd { color: var(--sb-usd); margin-left: 7px; }
.sb-tl em, .sb-usd em {
  font-style: normal;
  font-weight: 400;
  font-size: 0.78em;
  opacity: 0.75;
  margin-left: 1px;
}
.sb-tl.sb-buyuk, .sb-usd.sb-buyuk { font-size: 1.7rem; font-weight: 900; }
.sb-usd.sb-buyuk { margin-left: 10px; }
.sb-cip-fiyat { display: block; margin-top: 2px; font-size: 0.72rem; }
.sb-cip-fiyat .sb-tl, .sb-cip-fiyat .sb-usd { font-size: 0.78rem; }
.sb-giris { display: flex; gap: 8px; }
.sb-giris input { flex: 1 1 auto; }

/* Sonuç kartı */
.sb-sonuc-kart {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border-toplam);
  border-radius: 8px;
  background: var(--bg-toplam);
}
.sb-sonuc-bas {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sb-sonuc-ad { font-size: 0.94rem; color: var(--text-primary); }
.sb-sonuc-fiyat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  /* Boyut ve renk artık .sb-tl / .sb-usd üzerindedir */
  font-size: 1.9rem;
  color: var(--on-toplam);
}
.sb-sonuc-fiyat span { font-size: 0.82rem; color: var(--text-secondary); }
/* Kırılım satırlarındaki fiyatlar da okunur punto */
.sb-sonuc-detay .sb-tl, .sb-sonuc-detay .sb-usd { font-size: 0.86rem; }
.sb-sonuc-detay {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 3px 18px;
  font-size: 0.8rem;
}
.sb-sonuc-detay > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.sb-sonuc-detay b { font-family: var(--font-mono); color: var(--text-primary); }
.sb-sonuc-kart .btn { align-self: flex-start; }
@media (max-width: 700px) {
  .sb-mesaj { max-width: 92%; }
  .sb-akis { max-height: 46vh; }
}
.sb-sonuc-not {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
}
/* Sonuç kartındaki sözel riskler (Risk Analiz akışı). Seviye rozeti Kural
   Havuzu'nun .kh-seviye sınıfıdır — ikinci bir rozet dili açılmadı. */
.sb-sozel {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
}
.sb-sozel-bas {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sb-sozel-bas span { margin-left: 6px; color: var(--text-secondary); }
.sb-sozel-madde {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.sb-sozel-madde > .kh-seviye { flex: 0 0 auto; }
.sb-sozel-madde strong { color: var(--text-primary); }
.sb-sozel-madde em {
  margin-left: 6px;
  font-style: normal;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.sb-sozel-metin { font-size: 0.78rem; }
.sb-sozel-onlem { font-size: 0.76rem; color: var(--accent-teal); }

/* Sohbet üst şeridi: nerede olduğun + her zaman görünen geri/sıfırla.
   "baştan" yazmak da işe yarıyor ama akışın ortasında başa dönmek için
   komut hatırlamak gerekmemeli. */
.sb-ust {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sb-iz { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.sb-iz > span {
  font-size: 0.76rem;
  color: var(--text-secondary);
  white-space: nowrap;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Kademeler arasına ayraç: izlenen yol tek bakışta okunsun */
.sb-iz > span + span::before { content: '›'; margin-right: 6px; color: var(--text-muted); }
.sb-iz-bos { color: var(--text-muted) !important; }
.sb-ust-dugme { display: flex; gap: 6px; flex-shrink: 0; }

/* ==========================================================================
   MALİYET TRENDİ — Maliyet Formu'nun altındaki ortak panel
   Sütun grafiği: şimdiki dönem dolu, geçen yıl SOLUK arkada durur.
   ========================================================================== */
.mt-panel { margin-top: 18px; }
.mt-ad {
  margin-left: 10px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
}
.mt-ozet {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.mt-ozet strong { color: var(--text-primary); font-size: 1.2rem; }
.mt-fark { margin-left: 10px; font-size: 0.82rem; }
.mt-fark.artis, .mt-yuzde.artis { color: var(--accent-rose); }
.mt-fark.azalis, .mt-yuzde.azalis { color: var(--accent-green); }
.mt-grafik {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.mt-sutun {
  flex: 1 1 0;
  min-width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
/* Çubuklar aynı tabana oturur; kıyas açıkken yan yana durur */
/* Yüzde çubuğun ORTASINDA durduğu için kap konumlandırılır. */
.mt-cubuklar {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 132px;
  width: 100%;
}
.mt-cubuklar i {
  display: block;
  width: 30px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--accent-blue);
}
/* Geçen yıl: aynı renk, soluk — kıyas olduğu ilk bakışta anlaşılsın */
.mt-cubuklar i.mt-once { background: var(--accent-blue); opacity: 0.32; }
.mt-grafik.kiyasli .mt-cubuklar i { width: 20px; }
/* Fiyat sütunun ÜSTÜNDE, dönem adı ALTINDA (kullanıcının isteği). */
.mt-deger {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.mt-etiket { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; }
/* Değişim yüzdesi çubuğun ortasında yüzer; zemini opak olmalı, altından
   çubuğun rengi geçiyor. */
.mt-yuzde {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1px 4px;
  border-radius: 4px;
  /* Zemin OPAK olmalı: rozet çubuğun üstünde duruyor, yarı saydam bir
     zeminden çubuğun rengi geçip yazıyı okunmaz yapardı. */
  background: var(--bg-secenek);
  border: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.mt-yuzde.artis { color: var(--accent-rose); }
.mt-yuzde.azalis { color: var(--accent-teal); }
.mt-dugmeler { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.mt-not {
  margin-top: 10px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 86ch;
}
.mt-bos { font-size: 0.85rem; color: var(--text-muted); }

/* Sohbetteki trend: aynı veriyi yatay çubukla verir, yer dar */
.sb-trend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.sb-trend-bas {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.sb-trend-fark.artis { color: var(--accent-rose); }
.sb-trend-fark.azalis { color: var(--accent-green); }
.sb-trend-satir { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; }
.sb-trend-etiket {
  flex: 0 0 52px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.sb-trend-cubuk { flex: 1 1 auto; height: 8px; background: var(--bg-input-durgun); border-radius: 4px; }
.sb-trend-cubuk i { display: block; height: 100%; border-radius: 4px; background: var(--accent-blue); }
.sb-trend-deger {
  flex: 0 0 66px;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.sb-trend-not { font-size: 0.7rem; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }
.sb-trend-bos { font-size: 0.78rem; color: var(--text-muted); }
/* Sohbet sonuç kutusundaki trend soruları ve düğmeleri */
.sb-trend-soru {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.84rem;
  color: var(--text-secondary);
}
/* Sohbet dar; grafik sütunları biraz daha ince olsun */
.sb-trend .mt-cubuklar { height: 96px; }
.sb-trend .mt-sutun { min-width: 34px; }
/* Sütun değerinin altındaki "önceki döneme göre" yüzdesi */
.mt-fark {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 1px;
}
.mt-fark.artis { color: var(--accent-rose); }
.mt-fark.azalis { color: var(--accent-teal); }

/* Sohbet trendi — YATAY çizelge (kullanıcının isteği).
   Etiket solda, çubuk ortada, fiyat ve önceki döneme göre değişim sağ uçta. */
.sb-cizelge { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 8px; }
.sb-cz-satir { display: grid; grid-template-columns: 58px 1fr 104px; align-items: center; gap: 8px; }
.sb-cz-etiket {
  font-size: 0.74rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sb-cz-yol {
  position: relative;
  height: 16px;
  border-radius: 4px;
  background: var(--bg-input-durgun);
  overflow: hidden;
}
.sb-cz-yol > i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-teal), var(--accent-blue));
}
.sb-cz-deger {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.sb-cz-fark { font-size: 0.68rem; font-weight: 600; font-style: normal; min-width: 40px; text-align: right; }
.sb-cz-fark.artis { color: var(--accent-rose); }
.sb-cz-fark.azalis { color: var(--accent-teal); }

/* ==========================================================
   AKSESUAR SETİ (Model Maliyet)
   Kumaş Sarfiyat panelinin deseni: aşağıda set kurulur,
   yukarıdaki Aksesuar satırlarına aktarılır.
   ========================================================== */
.aks-set-ust {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.aks-set-ust .mm-alan { min-width: 280px; }
.aks-set-toplam {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--bg-toplam);
  border: 1px solid var(--border-color);
}
.aks-set-toplam span {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.aks-set-toplam b {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--on-toplam);
  font-variant-numeric: tabular-nums;
}
.aks-set-toplam em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--text-muted);
}
/* Aksesuar Listesi'nde karşılığı olmayan kalem: 0 ₺ sayılır, göze çarpsın */
.aks-set-eksik td { background: color-mix(in srgb, var(--accent-amber) 10%, transparent); }
.aks-set-eksik .cell-select { border-color: var(--accent-amber); }

/* Oyun — kapsam seçimi (genel / daraltılmış alan) */
.oy-kapsam { max-width: 520px; margin: 0 auto 18px; text-align: left; }
.oy-kapsam-bas {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.oy-kapsam-secim { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oy-kapsam-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-input-durgun);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.15s, transform 0.15s;
}
.oy-kapsam-btn:hover { transform: translateY(-1px); border-color: var(--accent-amber); }
.oy-kapsam-btn.secili {
  border-color: var(--accent-amber);
  box-shadow: inset 0 0 0 1px var(--accent-amber);
}
.oy-kapsam-ikon { font-size: 1.2rem; line-height: 1; }
.oy-kapsam-ad { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); }
.oy-kapsam-not { font-size: 0.68rem; line-height: 1.4; color: var(--text-muted); }
.oy-alan-sec { margin-top: 10px; }
.oy-sert-kapsam {
  margin-top: 4px;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
@media (max-width: 620px) {
  .oy-kapsam-secim { grid-template-columns: 1fr; }
}

/* Oyun — geç kalma cezası */
.oy-sayac.cezali { color: var(--accent-rose); font-weight: 700; }
.oy-ceza-serit {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.oy-ceza-serit span {
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--bg-input-durgun);
  font-size: 0.66rem;
  color: var(--text-muted);
}
.oy-ceza-serit b { color: var(--accent-rose); }
.oy-ceza-serit .son b { color: var(--text-primary); }
.oy-ceza-not {
  margin: 10px 0 0;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.oy-ceza-not strong { color: var(--accent-rose); }
.oy-ceza {
  font-style: normal;
  margin-left: 4px;
  color: var(--accent-rose);
  font-weight: 700;
}

/* ===== Kumaş üretim özeti (maliyet kırılımının altı) =====
   İğne sayısı / çözgü tel sayısı ve üretim miktarı, maliyet kalemlerinden
   AYRI bir blokta durur: ikisi farklı büyüklüktür (₺ ile kg/gün) ve aynı
   listede yan yana yazmak üretimi bir maliyet kalemi gibi gösteriyordu. */
.kk-uretim {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-input-durgun);
}
.kk-uretim-bas {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.kk-uretim-kutu {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.kk-uretim-ad { flex: 1 1 auto; font-size: .82rem; }
.kk-uretim-deger { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.kk-uretim-not { font-size: .72rem; color: var(--text-muted); flex: 0 0 auto; }
.kk-uretim-girdi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
  font-size: .74rem;
  color: var(--text-muted);
}
.kk-uretim-girdi b { font-variant-numeric: tabular-nums; color: var(--text-color); }
/* Eksik girdi vurgulanır: üretim miktarı sıfırsa sebebi burada görünür. */
.kk-uretim-eksik, .kk-uretim-eksik b { color: var(--accent-rose); }

/* ===== İplik kartları (Maliyet Formu › Kumaşı Düzenle) =====
   Kullanıcının isteği: iplikler bölümünde yatay kaydırma OLMASIN, bütün
   alanlar ilk bakışta görünsün. Eskiden 18 kolonluk bir tablo vardı ve
   genişliği 1.400 pikseli aşıyordu; tablo hücreleri sarmadığı için düzenin
   kendisi değişti — her iplik bir kart, alanlar saran bir ızgarada. */
.kk-ipkartlar { display: flex; flex-direction: column; gap: 10px; margin: -4px 0 10px; }
.kk-ipkart {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-input-durgun);
  overflow: hidden;
}
.kk-ipkart-bas {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.kk-ipkart-no {
  flex: 0 0 auto;
  min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--bg-toplam);
  font-size: .72rem; font-weight: 700;
}
/* Seçici esner, sayılar sabit kalır — kart daralınca önce seçici kısalsın. */
.kk-ipkart-sec { flex: 1 1 220px; min-width: 0; }
.kk-ipkart-sec select, .kk-ipkart-sec input { width: 100%; }
.kk-ipkart-pay, .kk-ipkart-fiyat {
  flex: 0 0 auto;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.kk-ipkart-pay { color: var(--text-muted); }
.kk-ipkart-fiyat { font-weight: 700; }
.kk-ipkart-fiyat small { font-weight: 400; color: var(--text-muted); }
/* ESNEK KUTU, ızgara DEĞİL. `auto-fit` bütün kolonları eşit yapıyor ve %
   kutusu elyaf adı kadar yer kaplıyordu; kullanıcının isteği ise % kutularının
   küçülmesi ve toplamın 2 satıra inmesi. Genişlik artık alan başına
   `flex-basis` ile verilir, alanlar kalan boşluğu paylaşarak sarar. */
.kk-ipkart-izgara {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 8px;
  padding: 8px;
}
.kk-ipalan-sar {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  flex: 1 1 78px;
}
/* Elyaf adı ve ilave işlem gibi uzun alanlar daha geniş başlar */
.kk-ipalan-sar.genis { flex: 2 1 118px; }
/* % kutuları: dar ve ESNEMEZ — 11 alanın 2 satıra sığmasını bunlar sağlıyor */
.kk-ipalan-sar.dar { flex: 0 0 50px; }
/* Ölçü: örmede 11 alanın toplam taban genişliği 962 px + 80 px boşluk = 1042.
   Panelin iç genişliği ~580 px'in üstündeyken düzen İKİ SATIRA oturur; daha
   dar ekranlarda üçe sarar ve bu kabul edilir — hiçbir alan gizlenmez. */
.kk-ipalan-et {
  font-size: .68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kk-ipkart-izgara .cell-input,
.kk-ipkart-izgara .cell-select { width: 100%; min-width: 0; }
/* Dar ekranda alanlar küçülür ama % kutuları dar kalır; 2 satır hedefi geniş
   ekran içindir, telefonda daha çok satıra sarması normaldir. */
@media (max-width: 700px) {
  .kk-ipalan-sar { flex: 1 1 84px; }
  .kk-ipalan-sar.genis { flex: 2 1 128px; }
  .kk-ipalan-sar.dar { flex: 0 0 52px; }
}

/* Esnek kutuda sarmayı belirli bir noktada ZORLAR: iki ilave işlem slotu her
   zaman alt satırda yan yana dursun diye (kullanıcının isteği). Sıfır
   yükseklik, tam genişlik — görünmez ama satırı bitirir. */
.kk-satir-kir { flex: 1 0 100%; height: 0; margin: 0; padding: 0; }

/* ===== Maliyet kuralı uyarıları =====
   Kullanıcının isteği: yapılamayacak kombinasyonlar seçtirilmesin ve uyarı
   çıksın. Menüde `⛔` ile kapatılan seçenek tarayıcının kendi `disabled`
   biçimini alır; buradaki kutular ise ZATEN SEÇİLİ olan ihlalleri anlatır —
   onları menüde kapatmak kaydın gerçek hâlini gizlerdi. */
.kk-kural-not {
  margin-top: 3px;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.kk-kural-ihlal {
  margin-top: 4px;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--accent-amber);
  border: 1px solid var(--accent-amber);
  background: var(--bg-input-durgun);
}
.kk-kural-ihlal.engel { color: var(--accent-rose); border-color: var(--accent-rose); }
.kk-ihlal-kutu {
  margin-top: 10px;
  border: 1px solid var(--accent-rose);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-input-durgun);
}
.kk-ihlal-bas {
  padding: 6px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--on-uyari, var(--accent-rose));
  background: var(--bg-toplam);
  border-bottom: 1px solid var(--accent-rose);
}
.kk-ihlal-satir {
  padding: 6px 10px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.kk-ihlal-satir:last-child { border-bottom: none; }
.kk-ihlal-satir strong { color: var(--accent-rose); }
.kk-ihlal-satir.engel strong { color: var(--accent-rose); }

/* ===== Maliyet Kuralları bölümü (Kural Havuzu) ===== */
.mk-bolum { margin-bottom: 14px; }
.mk-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mk-satir {
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--mk-renk, var(--accent-amber));
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--bg-input-durgun);
}
.mk-satir.sev-engel { --mk-renk: var(--accent-rose); }
.mk-satir.sev-uyari { --mk-renk: var(--accent-amber); }
.mk-satir.pasif { opacity: 0.45; }
.mk-satir-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-rozet {
  flex: 0 0 auto;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 999px;
  color: var(--mk-renk); border: 1px solid var(--mk-renk);
}
.mk-ad { flex: 1 1 auto; font-size: 0.86rem; min-width: 0; }
.mk-merkez, .mk-tahmin {
  flex: 0 0 auto; font-size: 0.66rem; color: var(--text-muted);
  padding: 1px 6px; border-radius: 4px; background: var(--bg-toplam);
}
.mk-tahmin { color: var(--accent-amber); }
.mk-eylem { flex: 0 0 auto; display: flex; gap: 2px; }
.mk-kosul {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin-top: 6px; font-size: 0.72rem;
}
.mk-et { color: var(--text-muted); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; }
.mk-ok { color: var(--text-muted); margin: 0 2px; }
.mk-cip {
  padding: 1px 7px; border-radius: 999px; font-size: 0.7rem;
  border: 1px solid var(--border-color); background: var(--bg-toplam);
}
.mk-cip.var { color: var(--accent-teal); border-color: var(--accent-teal); }
.mk-cip.yok { color: var(--accent-blue); border-color: var(--accent-blue); }
.mk-cip.yasak { color: var(--accent-rose); border-color: var(--accent-rose); }
.mk-alanlar { margin-top: 4px; font-size: 0.66rem; color: var(--text-muted); }
.mk-mesaj {
  margin-top: 5px; font-size: 0.73rem; line-height: 1.4;
  color: var(--text-secondary);
  padding-left: 8px; border-left: 2px solid var(--border-subtle);
}
/* --- form --- */
.mk-form {
  margin-top: 10px; padding: 10px;
  border: 1px solid var(--accent-blue); border-radius: 8px;
  background: var(--bg-input-durgun);
}
.mk-form-bas { font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; }
.mk-form-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px;
}
.mk-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mk-f > span { font-size: 0.68rem; color: var(--text-muted); }
.mk-f.genis { grid-column: span 2; }
.mk-f.tam { grid-column: 1 / -1; }
.mk-form-eylem { display: flex; gap: 6px; margin-top: 10px; }
@media (max-width: 700px) {
  .mk-f.genis { grid-column: span 1; }
}

/* Gündem #32 — sabitlerin kaynak rozeti ve ± belirsizlik bandı */
.kaynak-rozet {
  display: inline-block;
  font-size: 0.68rem;
  line-height: 1.3;
  padding: 0 6px;
  margin-left: 4px;
  border: 1px solid currentColor;
  border-radius: 8px;
  white-space: nowrap;
  vertical-align: middle;
  font-weight: 600;
}
.kaynak-kaynakli { color: var(--accent-teal); }
.kaynak-tahmini, .kaynak-yer-tutucu { color: var(--accent-amber); }
.kaynak-excel, .kaynak-belirsiz { color: var(--text-muted); }
.belirsizlik-bant {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 2px 0 6px;
}

/* Masraf Listesi · ülke fiyat sütunları (Plan 1 · Faz 1) */
.data-table th.col-ulke { min-width: 118px; text-align: right; white-space: nowrap; }
.data-table th.col-ulke .ulke-doviz { display: block; font-size: 0.68rem; font-weight: 500; color: var(--text-muted); }
.data-table td.col-ulke { min-width: 118px; text-align: right; vertical-align: top; }
.data-table td.col-ulke .cell-ulke { width: 100%; text-align: right; }
.data-table td.col-ulke .ulke-usd { display: block; margin-top: 2px; font-size: 0.68rem; color: var(--text-muted); }
.data-table td.col-ulke .ulke-usd.kur-yok { color: var(--accent-amber); }
.data-table td.col-ulke.turetilmis .cell-ulke::placeholder { font-style: italic; color: var(--text-muted); opacity: 0.85; }
.data-table td.col-ulke-bos { color: var(--text-muted); text-align: center; }

/* Sabitler · Ülke Sarfiyat Katsayıları matrisi (Plan 1 · Faz 2) */
.sb-matris-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 18px; }
.sb-matris-ust .form-select { max-width: 220px; }
.sb-matris-kap { overflow-x: auto; margin: 0 18px; }
.sb-matris th { white-space: nowrap; font-size: 0.72rem; }
.sb-matris td.sb-matris-merkez { white-space: nowrap; font-weight: 600; }
.sb-matris .sb-matris-hucre { min-width: 64px; text-align: right; }
.sb-matris .sb-matris-hucre::placeholder { color: var(--text-muted); opacity: 0.8; }
.sb-matris .sb-matris-hucre.miras::placeholder { color: var(--accent-teal); font-style: italic; opacity: 1; }

/* Ülke bağlam çubuğu ve referans kıyası (Plan 1 · Faz 3) */
.ulke-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-right: 12px; font-size: 0.76rem; color: var(--text-muted); }
.ulke-bar label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ulke-bar .form-select { padding: 3px 8px; font-size: 0.76rem; min-width: 120px; height: 28px; }
.ulke-bar-not { font-size: 0.7rem; color: var(--accent-amber); }
@media (max-width: 1100px) { .ulke-bar-not { display: none; } }
/* Şerit tek satır kalsın: alt yazı başlığın yanında, çubuk sarmaz, tema düğmeleri ve yenile küçülür */
.app-header .logo-text { display: flex; align-items: baseline; gap: 10px; }
.app-header .logo-text h1 { line-height: 1.1; white-space: nowrap; }
.app-header .logo-subtitle { white-space: nowrap; }
@media (max-width: 1280px) { .app-header .logo-subtitle { display: none; } }
.app-header .ulke-bar { flex-wrap: nowrap; }
.app-header .tema-secici { padding: 2px; }
.app-header .tema-btn { padding: 4px 9px; }
.app-header .btn-ghost { padding: 5px 8px; }
@media (max-width: 1280px) { .app-header .tema-btn span { display: none; } }
@media (max-width: 900px) {
  .app-header { margin: 0 -12px; padding: 4px 12px; }
  .logo-text { display: none; }
  .ulke-bar { gap: 6px; margin-right: 4px; }
  .ulke-bar label { gap: 4px; font-size: 0.7rem; }
  .ulke-bar .form-select { min-width: 92px; }
}
@media (max-width: 560px) { .ulke-bar label { font-size: 0; gap: 0; } }
/* Dar ekranın 40–44px dokunma hedefi kuralı şeridi kalınlaştırmasın: şeritte 32px */
@media (max-width: 760px) {
  .app-header .form-select, .app-header .tema-btn, .app-header .btn { min-height: 32px; }
  .app-header .ulke-bar .form-select { height: 32px; padding: 2px 6px; }
  .app-header .tema-btn { padding: 4px 8px; }
  .app-header .btn { padding: 4px 8px; }
}
body.ulke-yabanci .ulke-bar #ulkeMaliyetSec { border-color: var(--accent-amber); box-shadow: 0 0 0 1px var(--accent-amber); }
.ulke-ref { margin-top: 6px; font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; }
.ulke-ref b { color: var(--text-primary, inherit); }
.ulke-fark-artar { color: var(--accent-red); font-weight: 600; }
.ulke-fark-azalir { color: var(--accent-green); font-weight: 600; }
.ulke-kur-yok { color: var(--accent-amber); font-size: 0.8em; }

/* Validasyon ülke kapsaması (Plan 3 Faz 3) */
.val-kapsama { margin: 10px 0 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-card); }
.val-kapsama > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 0.86rem; }
.val-kapsama .wide-table-container { margin: 0 14px; }
.val-kapsama-tablo td { text-align: center; font-variant-numeric: tabular-nums; }
.val-kapsama-tablo td:first-child { text-align: left; }
.val-kapsama-tablo td.kap-tam { color: var(--accent-green); font-weight: 600; }
.val-kapsama-tablo td.kap-kismi { color: var(--accent-amber); font-weight: 600; }
.val-kapsama-tablo td.kap-bos { color: var(--text-muted); }
.val-kapsama .form-hint { padding: 8px 14px 12px; }

/* Validasyon görünümü: platform / firma önizleme (Plan 3 Faz 4) */
.val-gorunum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.val-ozet-platform { margin-top: 3px; font-size: 0.68rem; color: var(--accent-amber); }

/* DDP seçicisinin notu (Maliyet Formu çıktı girdileri) */
.mf-ddp-not { margin-top: 3px; font-size: 0.68rem; line-height: 1.25; }


/* ==========================================================================
   GİRİŞ EKRANI (Plan 2 · Faz 1) — Noverba Entegre giriş ekranının tasarımı,
   sahne Eder'e özgü: boşta lacivert tozlar, kullanıcı adında kırmızı tuğla
   duvar, şifrede çatılı / pencereli ev (kullanıcının isteği, 20.10.2026).
   Kurallar #ederGiris altında kapsanır; tema değişkenleri Eder'inkilere eşlenir.
   ========================================================================== */
#ederGiris { position: fixed; inset: 0; z-index: 3000; overflow: auto;
  --sayfa: var(--bg-primary); --yuzey: var(--bg-card); --kenar: var(--border-default); --soluk: var(--text-muted);
  --metin: var(--text-primary); --metin-2: var(--text-secondary); --vurgu: #3d5bd9; }
body.giris-acik { overflow: hidden; }
/* Giriş sayfası */
#ederGiris { --kumas: #c8102e; --kumas-koyu: #8e0a20; --motif: #f5d27a; --isik: 236 64 82; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 46%); background: var(--sayfa); }
#ederGiris.ucus { --kumas: #13235e; --kumas-koyu: #0a1440; --motif: #8fd3ff; --isik: 64 140 255; }
#ederGiris.iplik { --kumas: #e9dfc6; --kumas-koyu: #b9a782; --motif: #fff6df; --isik: 236 220 178; }
#ederGiris .giris-sol { position: relative; overflow: hidden; color: #eef1ff; background: radial-gradient(120% 90% at 20% 10%, #2a2470 0%, #141336 45%, #0a0b20 100%); display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; min-height: 100vh; }
#ederGiris .giris-sahne { position: absolute; inset: 0; }
#ederGiris .giris-izgara { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%; background-image: linear-gradient(rgba(140, 160, 255, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 160, 255, .16) 1px, transparent 1px); background-size: 46px 46px; transform: perspective(520px) rotateX(62deg); transform-origin: bottom; mask-image: linear-gradient(to top, #000 10%, transparent 90%); animation: giris-izgara 6s linear infinite; }
#ederGiris.ucus .giris-izgara { animation-duration: 1.6s; }
@keyframes giris-izgara { to { background-position: 0 46px, 0 0; } }
#ederGiris .giris-isik { position: absolute; border-radius: 50%; filter: blur(60px); transition: background 1.2s ease, transform 1.2s ease; }
#ederGiris .giris-isik.a { width: 46%; height: 46%; left: 6%; top: 12%; background: rgb(var(--isik) / .45); animation: giris-nefes 7s ease-in-out infinite; }
#ederGiris .giris-isik.b { width: 36%; height: 36%; right: 4%; top: 44%; background: rgb(var(--isik) / .22); animation: giris-nefes 9s ease-in-out infinite reverse; }
#ederGiris.ucus .giris-isik.a { transform: translateX(55%); }
@keyframes giris-nefes { 50% { opacity: .55; } }
#ederGiris .giris-parcacik { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: rgb(var(--isik) / .9); box-shadow: 0 0 8px rgb(var(--isik)); animation: giris-yuksel 7s linear infinite; transition: background 1s, box-shadow 1s; }
#ederGiris.ucus .giris-parcacik { animation-duration: 2.2s; }
@keyframes giris-yuksel { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-105vh) translateX(calc(var(--i) * 3px - 25px)); opacity: 0; } }
#ederGiris .giris-kumas { position: absolute; width: 70%; max-width: 640px; left: 0; top: 2%; transform: translateX(0) rotate(-6deg); transition: transform 1.3s cubic-bezier(.6, -0.25, .25, 1.35), filter 1.2s ease; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); animation: giris-suzul 6s ease-in-out infinite; }
#ederGiris.ucus .giris-kumas { transform: translateX(42%) translateY(-2%) rotate(5deg) scale(.92); filter: drop-shadow(0 18px 40px rgb(var(--isik) / .55)); }
@keyframes giris-suzul { 50% { margin-top: 14px; } }
#ederGiris .giris-kumas .gk-zemin { fill: var(--kumas); transition: fill 1.2s ease .15s; }
#ederGiris .giris-kumas .gk-motif path { fill: var(--motif); transition: fill 1.2s ease .2s; }
#ederGiris .giris-kumas .gk-goz { fill: var(--kumas-koyu); stroke: var(--motif); stroke-width: 2; transition: fill 1.2s, stroke 1.2s; }
#ederGiris .giris-kumas .gk-nokta { fill: var(--motif); opacity: .7; transition: fill 1.2s; }
#ederGiris .giris-kumas .gk-hale rect { fill: rgb(var(--isik) / .5); transition: fill 1.2s; }
#ederGiris .giris-kumas .gk-iz line { stroke: rgb(var(--isik) / .9); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 60 400; stroke-dashoffset: 460; opacity: 0; }
#ederGiris.ucus .giris-kumas .gk-iz line { animation: giris-iz 1.3s ease-out; }
#ederGiris.ucus .giris-kumas .gk-iz line:nth-child(2) { animation-delay: .08s; }
#ederGiris.ucus .giris-kumas .gk-iz line:nth-child(3) { animation-delay: .16s; }
#ederGiris.ucus .giris-kumas .gk-iz line:nth-child(4) { animation-delay: .24s; }
@keyframes giris-iz { 0% { opacity: 0; stroke-dashoffset: 460; } 30% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -60; } }
#ederGiris .giris-metin { position: relative; z-index: 1; margin-top: 30vh; max-width: 560px; }
#ederGiris .giris-marka { display: flex; align-items: center; gap: 10px; letter-spacing: .32em; font-size: 14px; margin-bottom: 14px; }
#ederGiris .giris-logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--kumas), #6c4cff); font-weight: 800; letter-spacing: 0; transition: background 1.2s; }
#ederGiris .giris-metin h1 { margin: 0 0 14px; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; font-weight: 800; background: linear-gradient(90deg, #fff, rgb(var(--isik)) 140%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#ederGiris .giris-motto { display: grid; gap: 8px; }
#ederGiris .giris-motto p { margin: 0; display: grid; }
#ederGiris .giris-motto b { font-size: 16px; }
#ederGiris .giris-motto span { font-size: 13px; color: #aeb6e6; letter-spacing: .04em; }
#ederGiris .giris-cizgi { display: block; width: 64px; height: 2px; margin: 18px 0; background: rgb(var(--isik)); transition: background 1.2s; }
#ederGiris .giris-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: #d7dcfb; }
#ederGiris .giris-liste li { display: flex; gap: 10px; align-items: flex-start; }
#ederGiris .giris-liste li span { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; border: 1px solid rgb(var(--isik) / .6); font-size: 12px; transition: border-color 1.2s; }
#ederGiris .giris-sag { display: grid; place-items: center; padding: 32px 20px; background: radial-gradient(100% 60% at 70% 0%, color-mix(in srgb, #6c4cff 8%, transparent), transparent), var(--sayfa); }
#ederGiris .giris-kart { width: min(420px, 100%); background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 18px; padding: 30px 28px 24px; box-shadow: 0 24px 60px rgba(20, 20, 60, .12); display: grid; gap: 14px; position: relative; overflow: hidden; }
#ederGiris .giris-kart::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #6c4cff, transparent); }
#ederGiris .giris-kart h2 { margin: 0; font-size: 24px; }
#ederGiris .giris-kart > .soluk { margin: -8px 0 6px; font-size: 13px; }
#ederGiris .giris-kart label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; }
#ederGiris .giris-alan { position: relative; display: flex; align-items: center; }
#ederGiris .giris-alan svg { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--soluk); stroke-width: 1.8; }
#ederGiris .giris-alan input { width: 100%; padding: 11px 38px 11px 38px; border-radius: 10px; font-size: 14px; }
#ederGiris .giris-alan input:focus { outline: none; border-color: #6c4cff; box-shadow: 0 0 0 3px color-mix(in srgb, #6c4cff 20%, transparent); }
#ederGiris .giris-goz { position: absolute; right: 8px; border: none; background: transparent; cursor: pointer; color: var(--soluk); font-size: 16px; }
#ederGiris .giris-hatirla { display: flex !important; flex-direction: row; align-items: center; gap: 8px; font-weight: 400 !important; }
#ederGiris .giris-dugme { padding: 12px; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; background: linear-gradient(90deg, #5b5cf0, #7b4dff); box-shadow: 0 8px 20px rgba(91, 92, 240, .35); }
#ederGiris .giris-dugme:disabled { opacity: .7; }
#ederGiris .giris-ayrac { display: flex; align-items: center; gap: 10px; color: var(--soluk); font-size: 11px; letter-spacing: .15em; }
#ederGiris .giris-ayrac::before, #ederGiris .giris-ayrac::after { content: ''; flex: 1; height: 1px; background: var(--kenar); }
#ederGiris .giris-alt { text-align: center; font-size: 12.5px; margin: 0; line-height: 1.6; }
#ederGiris .giris-bildirim { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, #e8833a 55%, var(--kenar)); background: color-mix(in srgb, #e8833a 10%, var(--yuzey)); color: var(--metin); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
#ederGiris .giris-bildirim:hover { text-decoration: none; transform: translateY(-1px); background: color-mix(in srgb, #e8833a 16%, var(--yuzey)); box-shadow: 0 8px 18px color-mix(in srgb, #e8833a 25%, transparent); }
#ederGiris .giris-bildirim-ikon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 10px; background: #e8833a; }
#ederGiris .giris-bildirim-ikon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ederGiris .giris-bildirim-metin { display: grid; gap: 2px; flex: 1; min-width: 0; }
#ederGiris .giris-bildirim-metin b { font-size: 14px; }
#ederGiris .giris-bildirim-metin span { font-size: 12.5px; color: var(--metin-2); }
#ederGiris .giris-bildirim-ok { font-size: 18px; font-weight: 700; color: #c4621c; transition: transform .15s ease; }
#ederGiris .giris-bildirim:hover .giris-bildirim-ok { transform: translateX(3px); }
@media (max-width: 900px) { #ederGiris { grid-template-columns: 1fr; } #ederGiris .giris-sol { min-height: auto; padding: 28px 20px 32px; } #ederGiris .giris-metin { margin-top: 220px; } #ederGiris .giris-kumas { width: 80%; } #ederGiris.ucus .giris-kumas { transform: translateX(28%) rotate(4deg) scale(.9); } }
@media (prefers-reduced-motion: reduce) { #ederGiris .giris-kumas, #ederGiris .giris-izgara, #ederGiris .giris-parcacik, #ederGiris .giris-isik { animation: none !important; } }
#ederGiris .giris-etiket { display: inline; }
/* Giriş: kumaştan cekete */
.giris-kumas .gk-bez, #ederGiris .giris-kumas .gk-ceket { transform-box: fill-box; transform-origin: center; }
#ederGiris .giris-kumas .gk-bez { transition: opacity .45s ease .6s, transform .9s cubic-bezier(.5, 0, .3, 1) .35s; }
#ederGiris .giris-kumas .gk-ceket { opacity: 0; transform: scale(.35) rotate(14deg); transition: opacity .55s ease .7s, transform .85s cubic-bezier(.2, 1.35, .4, 1) .65s; }
#ederGiris.ucus .giris-kumas .gk-bez { opacity: 0; transform: scale(.45) rotate(-10deg); }
#ederGiris.ucus .giris-kumas .gk-ceket { opacity: 1; transform: none; }
#ederGiris:not(.ucus) .giris-kumas .gk-bez { transition-delay: .1s, 0s; }
#ederGiris:not(.ucus) .giris-kumas .gk-ceket { transition: opacity .3s ease, transform .5s ease; }
#ederGiris .giris-kumas .gk-yaka { fill: color-mix(in srgb, var(--kumas) 70%, #6f86d6); stroke: rgb(255 255 255 / .45); stroke-width: 1.2; transition: fill 1.2s; }
#ederGiris .giris-kumas .gk-kravat { fill: var(--motif); transition: fill 1.2s; }
#ederGiris .giris-kumas .gk-dikis { fill: none; stroke: rgb(255 255 255 / .35); stroke-width: 1.4; stroke-dasharray: 4 3; }
#ederGiris .giris-kumas .gk-dugme { fill: var(--motif); stroke: rgb(0 0 0 / .4); stroke-width: 1; }
#ederGiris .giris-kumas .gk-hale ellipse { fill: rgb(var(--isik) / .38); transition: fill 1.2s; }
/* Boşta: ekru iplik bobinleri (kumaşa geçerken küçülüp kaybolur) */
.giris-kumas .gk-iplik { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.6) rotate(6deg); transition: opacity .45s ease, transform .7s ease; }
#ederGiris.iplik .giris-kumas .gk-iplik { opacity: 1; transform: none; transition: opacity .6s ease .35s, transform .8s cubic-bezier(.2, 1.3, .4, 1) .3s; }
#ederGiris.iplik .giris-kumas .gk-bez { opacity: 0; transform: scale(.5) rotate(8deg); transition: opacity .35s ease, transform .6s ease; }
#ederGiris.iplik .giris-kumas { transform: translateX(0) rotate(0deg); }
#ederGiris .giris-kumas .gk-bobin { animation: gk-bobin-salla 4s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes gk-bobin-salla { 50% { transform: translateY(-5px); } }
#ederGiris .giris-kumas .gk-bobin-golge { fill: rgb(0 0 0 / .28); }
#ederGiris .giris-kumas .gk-sarim { fill: none; stroke: rgb(120 100 60 / .22); stroke-width: 1; }
#ederGiris .giris-kumas .gk-bobin-alt { fill: #d8cba9; stroke: rgb(120 100 60 / .35); }
#ederGiris .giris-kumas .gk-masura { fill: #9a7a4c; }
#ederGiris .giris-kumas .gk-iplik-uc, #ederGiris .giris-kumas .gk-iplik-serbest { fill: none; stroke: #f3ead3; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 10 7; animation: gk-iplik-ak 2.6s linear infinite; opacity: .85; }
#ederGiris .giris-kumas .gk-iplik-serbest { stroke-width: 1.1; opacity: .45; animation-duration: 4s; animation-delay: calc(var(--i) * -1.2s); }
@keyframes gk-iplik-ak { to { stroke-dashoffset: -34; } }
/* Şifrede ürünler: desensiz lacivert erkek ceketi ve pembe kadın elbisesi */
.giris-kumas .gk-lacivert { fill: #1a2a63; }
#ederGiris .giris-kumas .gk-elbise-aski { fill: #e2649e; }
#ederGiris .giris-kumas .gk-elbise-kemer { fill: #a8326a; }
#ederGiris .giris-kumas .gk-elbise-pli { fill: none; stroke: rgb(255 255 255 / .28); stroke-width: 1.4; stroke-linecap: round; }
#ederGiris .giris-kumas .gk-elbise-yaka { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 1.6; }
#ederGiris.ucus .giris-kumas .gk-hale ellipse { fill: rgb(var(--isik) / .28); }
/* Kontrol Paneli — katlanır kartlar ve son 5 gün siparişleri */
/* Giriş ekranı dil seçici (TR / EN) */
.giris-kart { position: relative; }
#ederGiris .giris-dil { position: absolute; top: 14px; right: 14px; display: inline-flex; border: 1px solid var(--kenar); border-radius: 999px; overflow: hidden; }
#ederGiris .giris-dil button { border: 0; background: transparent; padding: 3px 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--metin-2); cursor: pointer; }
#ederGiris .giris-dil button.secili { background: var(--vurgu); color: #fff; }
/* Eder sahnesi: aşamaya göre ışık */
#ederGiris { --isik: 214 64 52; }
#ederGiris.iplik { --isik: 70 110 214; }
#ederGiris.ucus { --isik: 255 190 100; }
#ederGiris .giris-kumas { transform: rotate(-3deg); }
#ederGiris.iplik .giris-kumas { transform: none; }
#ederGiris.ucus .giris-kumas { transform: translateX(14%) scale(.96); }
#ederGiris .giris-parcacik { width: 4px; height: 4px; background: rgb(66 102 214 / .95); box-shadow: 0 0 10px rgb(66 102 214 / .9); }
#ederGiris .giris-logo { background: linear-gradient(135deg, #b8322a, #23408e); }
#ederGiris .giris-dugme { background: linear-gradient(90deg, #23408e, #3d5bd9); box-shadow: 0 8px 20px rgba(35, 64, 142, .35); }
#ederGiris .giris-kart::before { background: linear-gradient(90deg, transparent, #3d5bd9, #b8322a, transparent); }
#ederGiris .giris-alan input:focus { border-color: #3d5bd9; box-shadow: 0 0 0 3px rgba(61, 91, 217, .2); }
#ederGiris .hata { margin: 0; color: var(--accent-red); font-size: 13px; }
#ederGiris .zorunlu { color: var(--accent-red); }
/* 1) lacivert toz */
#ederGiris .gk-toz-tane { fill: #23408e; opacity: .85; transform-box: fill-box; transform-origin: center; animation: gk-toz-dans 6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.13s); }
#ederGiris .gk-toz-tane.acik { fill: #5b82e6; }
@keyframes gk-toz-dans { 50% { transform: translate(7px, -9px); opacity: .4; } }
/* 2) tuğla duvar */
#ederGiris .gk-harc { fill: #d8c8b4; }
#ederGiris .gk-tugla-a { fill: #b8322a; }
#ederGiris .gk-tugla-b { fill: #a02a23; }
#ederGiris .gk-duvar-ust { fill: #8f241f; }
#ederGiris .gk-duvar-alt { fill: #5c1814; }
/* 3) ev */
#ederGiris .gk-baca { fill: #8f2a22; }
#ederGiris .gk-baca-ust { fill: #5c1814; }
#ederGiris .gk-cati { stroke: #141730; stroke-width: 2; }
#ederGiris .gk-kiremit { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 1.5; }
#ederGiris .gk-cam { fill: url(#gk-isik-cam); stroke: #f4f1e8; stroke-width: 3; }
#ederGiris .gk-kayit { fill: none; stroke: #f4f1e8; stroke-width: 3; }
#ederGiris .gk-denizlik { fill: #ece6d8; }
#ederGiris .gk-kapi { fill: #5a3622; stroke: #3a2214; stroke-width: 2; }
#ederGiris .gk-kapi-cizgi { fill: none; stroke: rgb(0 0 0 / .25); stroke-width: 2; }
#ederGiris .gk-tokmak { fill: #f2c45a; }
#ederGiris .gk-esik { fill: #cfc7b8; }
#ederGiris .gk-zemin-cizgi { fill: rgb(0 0 0 / .25); }
#ederGiris.ucus .gk-cam { animation: gk-cam-yan 3s ease-in-out infinite; }
@keyframes gk-cam-yan { 50% { opacity: .78; } }
/* Profil düğmesi ve kartı */
.profil-dugme { padding: 3px !important; border-radius: 50% !important; }
.profil-bas { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #23408e, #3d5bd9); color: #fff; font-size: 0.72rem; font-weight: 700; }
.profil-bas.buyuk { width: 44px; height: 44px; font-size: 1.1rem; }
.profil-ust { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.profil-sifre { margin-top: 6px; }
.profil-sifre > summary { cursor: pointer; font-weight: 600; font-size: 0.86rem; margin-bottom: 8px; }

/* Marka temel vurgudur: Teknik Veri Merkezi (kullanıcının kararı, 20.10.2026) */
#ederGiris .giris-marka { font-size: 19px; letter-spacing: .22em; margin-bottom: 18px; }
#ederGiris .giris-marka b { font-weight: 800; background: linear-gradient(90deg, #fff, rgb(var(--isik)) 160%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#ederGiris .giris-logo { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; }
/* Dar ekranda sahne metnin üstüne binmesin: kendi satırında, metnin üstünde */
@media (max-width: 900px) {
  #ederGiris .giris-sahne { position: static; }   /* ışık ve parçacıklar .giris-sol'a göre konumlanır */
  #ederGiris .giris-sol { justify-content: flex-start; overflow: visible; }
  #ederGiris .giris-kumas { position: relative; display: block; width: 100%; max-width: 440px; margin: 0 auto 4px; top: 0; }
  #ederGiris .giris-metin { margin-top: 0; }
}
/* Lacivert tozlar daha görünür (kullanıcının isteği: "lacivert tozlar olsun her yerde") */
#ederGiris .gk-toz-tane { fill: #3a63d6; opacity: .95; }
#ederGiris .gk-toz-tane.acik { fill: #8fb0ff; }
#ederGiris.iplik .gk-hale ellipse { fill: rgb(40 70 170 / .30); }
/* Küre sahnesi (canvas) — yalnız mavi tozlar; duvar / ev ve ızgara kaldırıldı (kullanıcının isteği) */
#ederGiris .giris-tuval { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ederGiris .giris-sol { background: radial-gradient(120% 90% at 30% 20%, #16205a 0%, #0b1033 50%, #05071a 100%); }
@media (max-width: 900px) {
  #ederGiris .giris-tuval { position: relative; inset: auto; height: 300px; }
}
/* Geniş ekranda metin alta, küre üst yarıda */
#ederGiris .giris-sol { justify-content: flex-end; }
#ederGiris .giris-metin { margin-top: 0; }
@media (max-width: 900px) { #ederGiris .giris-sol { justify-content: flex-start; } }

/* ===== Plan 2 · Faz 2 — yetki ve Sistem Yönetimi (49-yetki-yonetim.js) ===== */
.bitis-bandi { padding: 6px 16px; font-size: 0.82rem; text-align: center; color: var(--text-primary);
  background: color-mix(in srgb, var(--accent-amber) 18%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--accent-amber) 45%, transparent); }
.bitis-bandi.yakin { background: color-mix(in srgb, var(--accent-orange) 22%, transparent); }
.bitis-bandi.kritik { background: color-mix(in srgb, var(--accent-rose) 24%, transparent); border-bottom-color: var(--accent-rose); }
.salt-okunur-serit { margin: 0 0 10px; padding: 7px 12px; border-radius: 8px; font-size: 0.82rem; color: var(--text-secondary);
  background: color-mix(in srgb, var(--accent-amber) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-amber) 35%, transparent); }
/* Yazılamayan ekran: hücre düzenleyicileri ve satır ekle / sil düğmeleri kilitli (sunucu da reddeder) */
.sekme-salt-okunur .cell-input, .sekme-salt-okunur .cell-select, .sekme-salt-okunur td input, .sekme-salt-okunur td select,
.sekme-salt-okunur td textarea { pointer-events: none; opacity: 0.75; }
.sekme-salt-okunur .btn-row-delete, .sekme-salt-okunur .btn-row-edit, .sekme-salt-okunur .btn-danger,
.sekme-salt-okunur .panel-toolbar .btn-primary, .sekme-salt-okunur [id^="btnAdd"], .sekme-salt-okunur #btnMasrafKur,
.sekme-salt-okunur #btnMasrafToplu, .sekme-salt-okunur #btnGunlukTemizle, .sekme-salt-okunur #uuSifirla,
body.salt-okunur-hesap #btnResetData { display: none !important; }
.sy-sekmeler { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.sy-sekme { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--bg-card);
  color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 0.85rem; }
.sy-sekme.secili { color: var(--text-primary); border-color: var(--accent-rose); background: color-mix(in srgb, var(--accent-rose) 14%, transparent); }
.sy-arac { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.82rem; }
.sy-bos, .sy-hata { padding: 24px; text-align: center; color: var(--text-secondary); }
.sy-hata { color: var(--accent-rose); }
.sy-yaklasan { margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; font-size: 0.85rem;
  background: color-mix(in srgb, var(--accent-amber) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-amber) 35%, transparent); }
.sy-yaklasan ul { margin: 6px 0 0; padding-left: 18px; }
.sy-tablo td, .sy-tablo th { white-space: nowrap; font-size: 0.82rem; }
.sy-tablo tr.sy-pasif td { opacity: 0.55; }
.sy-islem { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; }
.sy-rozet { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem; color: var(--text-secondary);
  border: 1px solid var(--border-subtle); background: var(--bg-card); }
.sy-rozet.sari { color: var(--text-primary); background: color-mix(in srgb, var(--accent-amber) 22%, transparent); }
.sy-rozet.turuncu { color: var(--text-primary); background: color-mix(in srgb, var(--accent-orange) 26%, transparent); }
.sy-rozet.kirmizi { color: var(--text-primary); background: color-mix(in srgb, var(--accent-rose) 30%, transparent); }
.sy-baslik { margin: 16px 0 8px; font-size: 0.95rem; }
.sy-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sy-kaydir { max-height: 420px; overflow: auto; }
.sy-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sy-genis { grid-column: 1 / -1; }
.sy-onay { display: inline-flex; gap: 6px; align-items: center; font-size: 0.85rem; cursor: pointer; }
.sy-yetki { margin-top: 10px; border-top: 1px solid var(--border-subtle); padding-top: 8px; }
.sy-yetki summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; }
.sy-yetki h4 { margin: 12px 0 6px; font-size: 0.85rem; }
.sy-yetki-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sy-modul { display: grid; grid-template-columns: 1fr 130px; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 0.82rem; }
.sy-modul select { padding: 4px 6px; font-size: 0.8rem; }
.sy-ekranlar { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; max-height: 340px; overflow: auto; }
.sy-mesaj { color: var(--text-secondary); line-height: 1.6; }
@media (max-width: 900px) {
  .sy-iki, .sy-form, .sy-yetki-izgara, .sy-ekranlar { grid-template-columns: 1fr; }
}

/* ===== Plan 2 · Faz 3 — firma kabuğu (istemci/kabuk) ===== */
.kabuk-logo { display: grid; place-items: center; font-weight: 800; color: var(--text-primary);
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-rose)); border-radius: 8px; }
.kabuk-ikon { width: 16px; text-align: center; }
.kabuk-hosgeldin h3 { margin: 0 0 4px; }
.kabuk-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kabuk-kart { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border-subtle); }
.kabuk-kart:hover { background: var(--bg-card-hover); }
.kabuk-kart b { font-size: 1.4rem; color: var(--text-primary); }
.kabuk-kart span { font-size: 0.8rem; color: var(--text-secondary); }
.kabuk-not { margin-top: 14px; font-size: 0.82rem; }
.kabuk-ara { max-width: 280px; }
.kabuk-hata { position: fixed; left: 50%; top: 20px; transform: translateX(-50%); padding: 10px 16px; border-radius: 8px; z-index: 9999;
  color: var(--text-primary); background: color-mix(in srgb, var(--accent-rose) 30%, var(--bg-secondary)); }
/* `hidden` niteliği tarayıcının varsayılan display:none'ıdır; .tab-btn { display: flex } gibi
   yazar kuralları onu ezer. Yetkiye göre gizlenen menü öğeleri ve kabuk iskeleti için açıkça zorlanır. */
.tab-btn[hidden], .menu-grup[hidden], .app-govde[hidden], .app-header[hidden] { display: none !important; }
/* Firma · Maliyet Hesabı (istemci/kabuk/61-firma-maliyet.js) */
.mh-izgara { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 18px; align-items: start; }
.mh-form, .mh-sonuc { min-width: 0; }
.mh-alan { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.mh-alan select[size] { height: auto; }
.mh-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.mh-not { font-size: 0.78rem; margin-top: 8px; }
.mh-baslik { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 10px; }
.mh-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.mh-kart { padding: 12px 14px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border-subtle); }
.mh-kart h4 { margin: 0 0 8px; font-size: 0.85rem; color: var(--text-secondary); }
.mh-satir { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 0.84rem; }
.mh-satir b { font-weight: 600; text-align: right; }
.mh-satir.vurgu b { font-size: 1.05rem; color: var(--on-toplam, var(--text-primary)); }
.mh-eksik { font-size: 0.75rem; margin: 6px 0 0; }
@media (max-width: 900px) { .mh-izgara, .mh-iki { grid-template-columns: 1fr; } }
/* Firma · Model Maliyetim (istemci/kabuk/62-firma-model.js) */
.mm-ust { margin-bottom: 12px; }
.mm-model-sec { max-width: 280px; }
.mm-param { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 12px; margin-bottom: 12px; }
.mm-satirlar td { vertical-align: middle; }
.mm-satirlar .form-input { padding: 4px 6px; font-size: 0.8rem; }
.mm-ad { min-width: 120px; }
.mm-kayit { max-width: 320px; }
.mm-sayi { width: 90px; }
.mm-elle { display: inline-flex; gap: 4px; }
.mm-elle select { width: 70px; }
.mm-satirlar tr.mm-hatali td { background: color-mix(in srgb, var(--accent-rose) 8%, transparent); }
.mm-sonuc { margin-top: 12px; }
.mm-plan { margin: 0 0 12px; }
.mm-plan summary, .mm-risk summary { cursor: pointer; font-weight: 600; font-size: 0.86rem; padding: 6px 0; }
.mm-analiz { margin-top: 16px; border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.mm-risk ul { margin: 4px 0 10px; padding-left: 18px; font-size: 0.82rem; }
.mm-risk li { margin-bottom: 4px; }
/* Kabuk menüsünün simgesi bir span; dar düzende etiket gizlenirken simge görünür kalır */
.tab-btn > span.kabuk-ikon { display: inline-block !important; }
/* Firma · Maliyet İkizim (istemci/kabuk/63-firma-ikiz.js) */
.mi-ust { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.mi-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mi-sayi { width: 90px; padding: 4px 6px; }
.mi-kutu p { font-size: 0.8rem; margin: 0 0 6px; }
@media (max-width: 900px) { .mi-izgara { grid-template-columns: 1fr; } }
/* Firma · Teklifler (istemci/kabuk/65-firma-teklif.js) */
.tk-ozet { margin-bottom: 12px; }
.tk-kalem .form-input { padding: 4px 6px; font-size: 0.8rem; }
.tk-kisa { width: 110px; }
.tk-baglanti .form-input { flex: 1; min-width: 220px; }
.tk-toplam { display: flex; justify-content: flex-end; margin: 6px 0 12px; font-weight: 700; }
.sy-rozet.yesil { color: var(--text-primary); background: color-mix(in srgb, var(--accent-teal) 26%, transparent); }
.mh-baslik #mhTeklif { order: 9; margin-left: auto; }
/* Plan 2 · Faz 4 — marka rengi ve logosu (sunucu/marka.js → window.EDER_MARKA; 48-giris.js markaUygula) */
:root[style*="--marka-renk"] #ederGiris .giris-logo, :root[style*="--marka-renk"] .kabuk-logo { background: var(--marka-renk); }
:root[style*="--marka-renk"] #ederGiris .giris-dugme { background: var(--marka-renk); }
#ederGiris .giris-logo img, .logo-icon img.marka-logo { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.sy-marka { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; background: var(--bg-card); }
.sy-marka-logo { max-height: 40px; max-width: 140px; vertical-align: middle; }
.sy-renk { display: inline-flex; gap: 10px; align-items: center; }