:root {
  --sticky-menu-h: 44px;
  --paper: #F7F8FA;
  /* v1292 - Kullanıcı isteği (birebir): "Bir de DRP Klasik ve kullanılan
     başka temalar varsa gir arka planlarda daha açık bir gri kullanılşabilir
     mi" — netleştirme: "sadece satırlarda kullanılan gri arka planları
     kastediyorum" + "daha açık bir gri tonunda uyumluluk istiyorum. Bu hali
     biraz göz yoruyor." Bu değişken (--paper-2), programın onlarca tablosunda
     alt-toplam/başlık/vurgu SATIRI arka planı olarak kullanılıyor (ayrıca
     birkaç kart/panelde) — eski #E4E9F2 (daha koyu, mavimsi gri) yerine
     DRP Turuncu temasındaki (zaten neredeyse beyaza yakın, #FFFFFF) tonla
     UYUMLU, çok daha açık bir gri (#EFF2F6) verildi. Kapsam: sadece DRP
     Klasik (bu :root bloğu) ve DRP Lacivert (aşağıdaki drp-lacivert bloğu,
     aynı görsel aileden) — kullanıcının "DRP marka temalarının hepsi"
     seçimiyle birebir; DRP Turuncu zaten #FFFFFF olduğu için dokunulmadı,
     diğer (Koyu/Gül/Lavanta/Sakura vb.) dekoratif temalara dokunulmadı.
     --paper (sayfa zemini, #F7F8FA) ve --card (kutu zemini, #FFFFFF)
     DEĞİŞMEDİ — sadece satır/vurgu tonu daha açıldı. */
  --paper-2: #EFF2F6;
  --ink: #0B1B33;
  --ink-soft: #2C4064;
  --muted: #5C6B85;
  --line: #C7D0DE;
  --accent: #D9A227;
  --accent-dark: #0B1B33;
  --accent-tint: #FBEDCB;
  --alert: #B05D4F;
  --alert-tint: #F0E2DE;
  --success: #4B703F;
  --success-tint: #DFE6DB;
  --card: #FFFFFF;
  --radius: 3px;
  --shadow: 0 2px 6px rgba(11,27,51,0.10), 0 1px 2px rgba(11,27,51,0.06);
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sidebar-bg: linear-gradient(165deg, #0B1B33 0%, #1B3A63 55%, #0F2A52 100%);
  --sidebar-text-rgb: 239,244,241;
  --accent-rgb: 217,162,39;
  --sidebar-active-rgb: 74,144,217;
}

/* ---------- Temalar ---------- */
html[data-theme="light"] {
  --paper: #FFFFFF; --paper-2: #F0F2F5; --ink: #16181D; --ink-soft: #383D47;
  --muted: #6B7280; --line: #E3E6EB; --accent: #2563EB; --accent-dark: #1E3A8A;
  --accent-tint: #DBEAFE; --alert: #B24D4D; --alert-tint: #F8E8E8; --card: #FFFFFF;
  --success: #357A4F; --success-tint: #E3F5E9;
  --sidebar-bg: #1E293B; --sidebar-text-rgb: 241,245,249; --accent-rgb: 37,99,235;
}
html[data-theme="dark"] {
  --paper: #14181F; --paper-2: #1D232C; --ink: #E8EAED; --ink-soft: #B8BEC9;
  --muted: #8891A0; --line: #2A303B; --accent: #E8B84B; --accent-dark: #0B1B33;
  --accent-tint: #3A3220; --alert: #E5534B; --alert-tint: #402020; --card: #1B212B;
  --success: #6FCF7B; --success-tint: #1E3320;
  --sidebar-bg: #05090F; --sidebar-text-rgb: 230,232,235; --accent-rgb: 232,184,75;
  --shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.25);
}
html[data-theme="vivid"] {
  --paper: #F5F3FF; --paper-2: #ECE7FB; --ink: #1A1A2E; --ink-soft: #3D3D5C;
  --muted: #6B6B8D; --line: #D8D3F0; --accent: #E85D75; --accent-dark: #4A2545;
  --accent-tint: #FFE0E6; --alert: #AE515C; --alert-tint: #F7E8E9; --card: #FFFFFF;
  --success: #51966C; --success-tint: #E4F1E9;
  --sidebar-bg: #2D1B4E; --sidebar-text-rgb: 245,243,255; --accent-rgb: 232,93,117;
}
html[data-theme="drp"] {
  --paper: #FAF6EC; --paper-2: #F1E9D3; --ink: #0B1B33; --ink-soft: #1B3A63;
  --muted: #5C6B85; --line: #E3D6AE; --accent: #E8B23A; --accent-dark: #0F2A52;
  --accent-tint: #FCE8B8; --alert: #AF5C50; --alert-tint: #F0DFDB; --card: #FFFFFF;
  --success: #4B703F; --success-tint: #E4EADF;
  --sidebar-bg: var(--accent-dark);
  --sidebar-text-rgb: 239,244,241;
  --btn-bg: linear-gradient(135deg, #E8B23A 0%, #F3CC6E 100%);
  --accent-rgb: 232,178,58;
  --sidebar-active-rgb: 74,144,217;
}
html[data-theme="windows"] {
  --paper: #F3F3F3; --paper-2: #E9E9E9; --ink: #1B1B1B; --ink-soft: #3B3B3B;
  --muted: #6E6E6E; --line: #E1E1E1; --accent: #0078D4; --accent-dark: #005A9E;
  --accent-tint: #E5F1FB; --alert: #B05249; --alert-tint: #F8ECED; --card: #FFFFFF;
  --success: #307630; --success-tint: #E4F0E3;
  --radius: 6px; --sidebar-bg: #FAFAFA; --sidebar-text-rgb: 27,27,27; --accent-rgb: 0,120,212;
  --shadow: 0 1px 3px rgba(0,0,0,0.09), 0 1px 2px rgba(0,0,0,0.06);
}

html[data-theme="minimal"] {
  --paper: #FFFFFF; --paper-2: #F5F5F5; --ink: #1A1A1A; --ink-soft: #4A4A4A;
  --muted: #8A8A8A; --line: #E5E5E5; --accent: #1A1A1A; --accent-dark: #000000;
  --accent-tint: #F0F0F0; --alert: #AD5252; --alert-tint: #F9EFEE; --card: #FFFFFF;
  --success: #508F53; --success-tint: #EBF2EB;
  --radius: 2px; --sidebar-bg: #FAFAFA; --sidebar-text-rgb: 26,26,26; --accent-rgb: 26,26,26;
  --sidebar-active-rgb: 26,26,26;
  --shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Kullanıcı isteği: "Japon Kiraz Çiçeği (Sakura) teması da eklermisin?" —
   Zarif (Gül) temasından FARKLI olarak, sakura'nın hafif/açık/pastel
   petal hissini vermek için sol menü KOYU değil, AÇIK pembe-beyaz bir
   geçiş kullanır; vurgu rengi yumuşak kiraz çiçeği pembesi. */
html[data-theme="sakura"] {
  --paper: #FFF8F9; --paper-2: #FFEDF1; --ink: #4A3B3E; --ink-soft: #6B5458;
  --muted: #A98D92; --line: #F7DCE2; --accent: #F2A6BC; --accent-dark: #D9748F;
  --accent-tint: #FCE9EE; --alert: #A3635C; --alert-tint: #F2E4E1; --card: #FFFFFF;
  --success: #5CA361; --success-tint: #E7ECE5;
  --sidebar-bg: linear-gradient(160deg, #FFF0F4 0%, #FCDCE5 55%, #F7C8D6 100%);
  --sidebar-text-rgb: 74,59,62; --accent-rgb: 242,166,188;
  --sidebar-active-rgb: 242,166,188;
}
html[data-theme="sakura"] .sidebar { border-right: 1px solid #F7DCE2; }

/* 🌿 Sürdürülebilirlik / ESG — orman yeşili kimlik + toprak tonlu vurgular.
   ESG'nin üç sütununu çağrıştırır: Çevre (yeşil), Sosyal (sıcak toprak
   tonu), Yönetişim (koyu, kararlı ana renk). Sol menü, koyu orman
   yeşilinden açık yaprak yeşiline doğal bir geçiş yapar. */
html[data-theme="esg"] {
  --paper: #F6FAF3; --paper-2: #E9F2E2; --ink: #1F3620; --ink-soft: #3D5940;
  --muted: #6F8368; --line: #D3E4C9; --accent: #3F7D46; --accent-dark: #2C5A32;
  --accent-tint: #DCEEDA; --alert: #A86D57; --alert-tint: #EDDFD7; --card: #FFFFFF;
  --success: #4D8954; --success-tint: #E0E9DE;
  --sidebar-bg: linear-gradient(165deg, #16301B 0%, #2C5A32 55%, #5B8A46 100%);
  --sidebar-text-rgb: 238,245,232; --accent-rgb: 63,125,70;
  --sidebar-active-rgb: 168,201,99;
}

html[data-theme="zarif"] {
  --paper: #FFF5F7; --paper-2: #FCE7EC; --ink: #4A1942; --ink-soft: #6B2F5C;
  --muted: #9B6B8C; --line: #F0D0DC; --accent: #D46A8A; --accent-dark: #8B3A5C;
  --accent-tint: #FBE0E8; --alert: #A55A6C; --alert-tint: #F4E4E8; --card: #FFFFFF;
  --success: #569978; --success-tint: #E2EAE5;
  --sidebar-bg: linear-gradient(160deg, #8B3A5C 0%, #B85678 100%);
  --sidebar-text-rgb: 255,245,247; --accent-rgb: 212,106,138;
}

html[data-theme="lavanta"] {
  --paper: #F8F6FC; --paper-2: #ECE6F7; --ink: #362A52; --ink-soft: #5A4A7A;
  --muted: #8B7BA8; --line: #DCD0EC; --accent: #8B6BC7; --accent-dark: #5A3F8C;
  --accent-tint: #E8DFF7; --alert: #A35C68; --alert-tint: #F4E4E6; --card: #FFFFFF;
  --success: #569978; --success-tint: #E2EAE5;
  --sidebar-bg: linear-gradient(160deg, #5A3F8C 0%, #7A5CAD 100%);
  --sidebar-text-rgb: 248,246,252; --accent-rgb: 139,107,199;
}

/* Papatya — çiçeğin kendisi gibi: SARI (papatya sarısı) baskın renk sol menüde,
   YEŞİL (yaprak/sap) butonlarda uyumlu vurgu olarak, zemin beyaza yakın hafif
   sarımsı, yazılar siyaha yakın. */
html[data-theme="papatya"] {
  --paper: #FFFEF7; --paper-2: #FFFBE6; --ink: #1E1B10; --ink-soft: #4A4530;
  --muted: #8C8560; --line: #F2E9B8; --accent: #6FA83C; --accent-dark: #4F7C29;
  --accent-tint: #E3F0D4; --alert: #AD5552; --alert-tint: #F5E7E7; --card: #FFFFFF;
  --success: #7DA25B; --success-tint: #E3EADA;
  --sidebar-bg: linear-gradient(160deg, #F5D033 0%, #FCE580 100%);
  --sidebar-text-rgb: 46,42,20; --accent-rgb: 111,168,60;
  --sidebar-active-rgb: 111,168,60;
}
/* NOT: Sol menü artık AÇIK/parlak sarı olduğundan, varsayılan beyaz menü yazısı
   okunmaz hâle gelir — bu yüzden koyu (neredeyse siyah) menü yazısı kullanılır.
   Aynı şekilde --accent yeşil zaten yeterince koyu olduğundan buton yazısı
   beyaz kalabilir (okunabilir). */
html[data-theme="papatya"] .sidebar { border-right: none; }
html[data-theme="papatya"] .sidebar .link-btn { color: rgba(46,42,20,0.65); }
html[data-theme="papatya"] .sidebar .link-btn:hover { color: rgb(46,42,20); }

/* Papatya Yaprak — önceki tasarım: sarı vurgular ön planda, yeşilimsi kenar
   çubuğu (istenirse bu alternatif de kullanılabilir, silinmedi). */
html[data-theme="papatya-yaprak"] {
  --paper: #FFFEF7; --paper-2: #FFFBE6; --ink: #3A3620; --ink-soft: #6B6544;
  --muted: #A39C6E; --line: #F2E9B8; --accent: #F0C419; --accent-dark: #C79E0A;
  --accent-tint: #FFF3C4; --alert: #AD5552; --alert-tint: #F5E7E7; --card: #FFFFFF;
  --success: #829D50; --success-tint: #E7ECDD;
  --sidebar-bg: linear-gradient(160deg, #8CB93A 0%, #B7D66A 100%);
  --sidebar-text-rgb: 255,255,255; --accent-rgb: 240,196,25;
  --sidebar-active-rgb: 240,196,25;
}
html[data-theme="papatya-yaprak"] .sidebar { border-right: none; }
html[data-theme="papatya-yaprak"] .btn:not(.secondary):not(.danger) { color: #3A3620; }
/* Canlı Beyaz — LazyTask/modern SaaS tarzı: beyaz zemin + canlı mavi/turuncu/yeşil
   vurgular, açık renkli (koyu değil) sol menü. */
html[data-theme="canli-beyaz"] {
  --paper: #F7F8FA; --paper-2: #FFFFFF; --ink: #1F2937; --ink-soft: #4B5563;
  --muted: #9CA3AF; --line: #E5E7EB; --accent: #2563EB; --accent-dark: #1D4ED8;
  --accent-tint: #DBEAFE; --alert: #BB4444; --alert-tint: #F8E8E8; --card: #FFFFFF;
  --success: #3D955E; --success-tint: #E3F5E9;
  --sidebar-bg: #FFFFFF;
  --sidebar-text-rgb: 31,41,55; --accent-rgb: 37,99,235;
  --sidebar-active-rgb: 37,99,235;
}
html[data-theme="canli-beyaz"] .sidebar { border-right: 1px solid #E5E7EB; }
html[data-theme="canli-beyaz"] .brand { border-bottom-color: #E5E7EB; }
html[data-theme="canli-beyaz"] .sidebar-footer { border-top-color: #E5E7EB; }
/* NOT: .btn.secondary şeffaf/açık renkli zemin kullanır — bu yüzden beyaz metin
   SADECE dolu renkli (birincil) butonlara uygulanır, secondary'ye DOKUNULMAZ.
   Önceki sürümde ".btn" seçicisi ikisini de kapsadığından secondary butonlardaki
   yazı (beyaz metin + neredeyse beyaz zemin) görünmez hâle geliyordu. */
html[data-theme="canli-beyaz"] .btn:not(.secondary):not(.danger) { color: #fff; }
html[data-theme="canli-beyaz"] .btn.secondary { color: var(--ink); }

/* Beyaz (Turuncu Vurgu) — "DRP Beyaz" temasının BİREBİR AYNISI (sidebar
   dahil her şey beyaz kalır), TEK FARKI accent (buton/imleç/vurgu) rengi
   mavi yerine turuncudur. Ayrı bir tasarım DEĞİL, sadece renk değişkeni
   değişimidir — bu yüzden "canli-beyaz" ile TAMAMEN AYNI diğer kurallara
   sahiptir, sadece --accent* değişkenleri farklıdır. */
html[data-theme="beyaz-turuncu-vurgu"] {
  --paper: #F7F8FA; --paper-2: #FFFFFF; --ink: #1F2937; --ink-soft: #4B5563;
  --muted: #9CA3AF; --line: #E5E7EB; --accent: #EA580C; --accent-dark: #C2410C;
  --accent-tint: #FFEDD5; --alert: #BB4444; --alert-tint: #F8E8E8; --card: #FFFFFF;
  --success: #3D955E; --success-tint: #E3F5E9;
  --sidebar-bg: #FFFFFF;
  --sidebar-text-rgb: 31,41,55; --accent-rgb: 234,88,12;
  --sidebar-active-rgb: 234,88,12;
}
html[data-theme="beyaz-turuncu-vurgu"] .sidebar { border-right: 1px solid #E5E7EB; }
html[data-theme="beyaz-turuncu-vurgu"] .brand { border-bottom-color: #E5E7EB; }
html[data-theme="beyaz-turuncu-vurgu"] .sidebar-footer { border-top-color: #E5E7EB; }
html[data-theme="beyaz-turuncu-vurgu"] .btn:not(.secondary):not(.danger) { color: #fff; }
html[data-theme="beyaz-turuncu-vurgu"] .btn.secondary { color: var(--ink); }
html[data-theme="beyaz-turuncu-vurgu"] input, html[data-theme="beyaz-turuncu-vurgu"] select, html[data-theme="beyaz-turuncu-vurgu"] textarea {
  caret-color: var(--accent);
}

/* Kullanıcı isteği: "Turuncu Vurgulu Temadan DRP Turuncu adlı tema üret.
   Bu temada turuncu DRP turuncu olsun ve daha belirgin olsun butonlarda
   olduğu gibi, gezinirken sol menüde %95 tramlı yani hafif renkli olsun
   diğer gezinme alanların tram kullanmasın tam renkli olsun." — İçerik
   alanındaki butonlar/vurgular TAM/canlı turuncu; sol menü ise sadece
   HAFİF (soluk/tramlı) bir turuncu ton — diğer gezinme alanları (üst
   sekme çubuğu, aktif sekme vurgusu) TAM RENKLİ turuncu kalır. */
html[data-theme="drp-turuncu"] {
  --paper: #F7F8FA; --paper-2: #FFFFFF; --ink: #1F2937; --ink-soft: #4B5563;
  --muted: #9CA3AF; --line: #FDE0C4; --accent: #EEBE29; --accent-dark: #BE9820;
  --accent-tint: #FFF6D9; --alert: #BB4444; --alert-tint: #F8E8E8; --card: #FFFFFF;
  --success: #3D955E; --success-tint: #E3F5E9;
  /* Kullanıcı isteği: "Sol menüde zemin beyazımsı olsun." */
  --sidebar-bg: #FFFDF8;
  --sidebar-text-rgb: 31,41,55; --accent-rgb: 238,190,41;
  --sidebar-active-rgb: 238,190,41;
  /* Kullanıcı isteği: "Renk paleti olarak bu turuncuyu (EEBE29) kullan,
     lacivert olarak lacivertteki kodun (#1064AD) koyusunu kullan." —
     Lacivert, turuncu zemin üzerinde YAZI rengi olarak (beyazdan daha
     okunaklı bir kontrast sağladığı için) kullanılır. */
  --drp-lacivert-koyu: #0B487C;
}
html[data-theme="drp-turuncu"] .sidebar { border-right: 1px solid #FDE0C4; }
html[data-theme="drp-turuncu"] .brand { border-bottom-color: #FDE0C4; }
html[data-theme="drp-turuncu"] .sidebar-footer { border-top-color: #FDE0C4; }
html[data-theme="drp-turuncu"] .btn:not(.secondary):not(.danger) { color: var(--drp-lacivert-koyu); background: var(--accent); border-color: var(--accent); font-weight: 600; }
html[data-theme="drp-turuncu"] .btn.secondary { color: var(--ink); }
html[data-theme="drp-turuncu"] input, html[data-theme="drp-turuncu"] select, html[data-theme="drp-turuncu"] textarea {
  caret-color: var(--accent);
}
/* Kullanıcı isteği: "Seçili sol menü tam DRP turuncusu olsun." — sol
   menüdeki seçili öğe artık %28 tramlı DEĞİL, TAM dolgu turuncu; yazı
   rengi kontrast için koyu lacivert. */
html[data-theme="drp-turuncu"] .phase-list li.active {
  background: var(--accent); color: var(--drp-lacivert-koyu); font-weight: 700;
}
/* Üst sekme çubuğu ve aktif sekme — sol menüden FARKLI olarak TAM RENKLİ
   turuncu vurgu kullanır (kullanıcı isteği: "diğer gezinme alanların tram
   kullanmasın tam renkli olsun"). */
html[data-theme="drp-turuncu"] .tab.active,
html[data-theme="drp-turuncu"] .dropdown-item.active {
  background: var(--accent); color: var(--drp-lacivert-koyu);
}

/* Canlı Beyaz — Turuncu: içerik alanı beyaza yakın kalır, ama sol menü CANLI
   turuncu — gezinme (hover) durumlarında yumuşak/açık turuncu vurgu kullanılır. */
html[data-theme="canli-turuncu"] {
  --paper: #F7F8FA; --paper-2: #FFFFFF; --ink: #1F2937; --ink-soft: #4B5563;
  --muted: #9CA3AF; --line: #E5E7EB; --accent: #EA580C; --accent-dark: #C2410C;
  --accent-tint: #FFEDD5; --alert: #BB4444; --alert-tint: #F8E8E8; --card: #FFFFFF;
  --success: #3D955E; --success-tint: #E3F5E9;
  --sidebar-bg: linear-gradient(160deg, #EA580C 0%, #FB8B3C 100%);
  --sidebar-text-rgb: 255,255,255; --accent-rgb: 234,88,12;
  --sidebar-active-rgb: 255,255,255;
}
html[data-theme="canli-turuncu"] .sidebar { border-right: none; }
html[data-theme="canli-turuncu"] .brand { border-bottom-color: rgba(255,255,255,0.25); }
html[data-theme="canli-turuncu"] .sidebar-footer { border-top-color: rgba(255,255,255,0.25); }
html[data-theme="canli-turuncu"] .btn:not(.secondary):not(.danger) { color: #fff; }
html[data-theme="canli-turuncu"] .btn.secondary { color: var(--ink); }
html[data-theme="canli-turuncu"] input, html[data-theme="canli-turuncu"] select, html[data-theme="canli-turuncu"] textarea {
  caret-color: var(--accent);
}
/* Sol menüde ve Yönetim açılır menüsünde fare ile gezinirken (hover), sert
   beyaz yerine turuncuyla uyumlu YUMUŞAK/AÇIK bir turuncu vurgu kullanılır. */
html[data-theme="canli-turuncu"] .phase-list li:hover { background: rgba(255,237,213,0.35); }
html[data-theme="canli-turuncu"] .phase-list li.active { background: rgba(255,237,213,0.5); border-left-color: #fff; }
html[data-theme="canli-turuncu"] .dropdown-item:hover { background: #FFEDD5; color: #C2410C; }

/* Kuzey Işıkları (Aurora) — sol menüde yeşil/turkuaz/mor tonlarında yavaşça
   kayan, aurora borealis'i andıran canlı bir gradyan; ÇALIŞMA ALANI ise (sağ
   taraf) bilerek sade/açık renkli bırakılır ki okunabilirlik ve iş akışı
   hiçbir şekilde etkilenmesin — canlılık sadece dekoratif alanda kalır. */
html[data-theme="aurora"] {
  --paper: #F6FAF9; --paper-2: #ECF5F3; --ink: #142420; --ink-soft: #33473F;
  --muted: #6E8079; --line: #D3E6E1; --accent: #16A085; --accent-dark: #0E7B67;
  --accent-tint: #D3F3EC; --alert: #B64952; --alert-tint: #F5E6E7; --card: #FFFFFF;
  --success: #3C9382; --success-tint: #DAECE8;
  --sidebar-bg: linear-gradient(-45deg, #0B1D3A, #124E66, #16A085, #5B3CBD, #0B1D3A);
  --sidebar-bg-size: 400% 400%;
  --sidebar-text-rgb: 236,250,247; --accent-rgb: 22,160,133;
  --sidebar-active-rgb: 255,255,255;
}
html[data-theme="aurora"] .sidebar {
  background-size: 400% 400%;
  animation: drp-aurora-shift 25s ease infinite;
  border-right: none;
}
html[data-theme="aurora"] .phase-list li:hover { background: rgba(255,255,255,0.12); }
html[data-theme="aurora"] .phase-list li.active { background: rgba(255,255,255,0.18); border-left-color: #fff; }
html[data-theme="aurora"] .dropdown-item:hover { background: var(--accent-tint); color: var(--accent-dark); }

/* Kullanıcı isteği: "DRP lacivert teması hazırlar mısın." — DRP Klasik'in
   AYNI yapısı, sadece vurgu rengi paylaştığınız DRP lacivert kodu
   (#1064AD) ve onun koyusu (#0B487C). */
html[data-theme="drp-lacivert"] {
  /* v1292 - bkz. yukarıdaki :root bloğundaki AYNI v1292 notu — DRP Lacivert
     DRP Klasik'in AYNI yapısını paylaştığı için satır grisi burada da
     aynı şekilde (#E4E9F2 -> #EFF2F6) açıldı. */
  --paper: #F7F8FA; --paper-2: #EFF2F6; --ink: #0B1B33; --ink-soft: #2C4064;
  --muted: #5C6B85; --line: #C7D0DE; --accent: #1064AD; --accent-dark: #0B487C;
  --accent-tint: #DCEAF7; --alert: #B05D4F; --alert-tint: #F0E2DE;
  --success: #4B703F; --success-tint: #DFE6DB; --card: #FFFFFF;
  --sidebar-bg: linear-gradient(165deg, #0B1B33 0%, #0B487C 55%, #1064AD 100%);
  --sidebar-text-rgb: 239,244,241; --accent-rgb: 16,100,173;
  --sidebar-active-rgb: 16,100,173;
}

/* Kullanıcı isteği: "Turuncu Lacivert Tema Ekler misin, DRP Klasik
   teması gibi olacak sadece renkler paletine yüklediğim DRP Renk
   kodlarını kullan." — Turuncu (#EEBE29) + Lacivert (#1064AD/#0B487C)
   birlikte, DRP Klasik'in AYNI yapısında. */
html[data-theme="turuncu-lacivert"] {
  --paper: #F7F8FA; --paper-2: #E4E9F2; --ink: #0B1B33; --ink-soft: #2C4064;
  --muted: #5C6B85; --line: #C7D0DE; --accent: #EEBE29; --accent-dark: #0B487C;
  --accent-tint: #FFF6D9; --alert: #B05D4F; --alert-tint: #F0E2DE;
  --success: #4B703F; --success-tint: #DFE6DB; --card: #FFFFFF;
  --sidebar-bg: linear-gradient(165deg, #0B1B33 0%, #0B487C 55%, #1064AD 100%);
  --sidebar-text-rgb: 239,244,241; --accent-rgb: 238,190,41;
  --sidebar-active-rgb: 238,190,41;
}
@keyframes drp-aurora-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100%; }
a { color: inherit; }
button { font-family: inherit; }
/* Kullanıcı isteği: "Gereksiz olan boşlukları kaldırmak ... çalışma
   ekranını genişletmek." — h1-h4 etiketleri, hiçbir özel kural
   olmadığı için, tarayıcının GENİŞ, varsayılan dikey margin'lerini
   (genelde ~1em üst+alt) kullanıyordu — bu, uygulamadaki 194 ayrı
   başlık için TUTARLI bir gereksiz boşluk kaynağıydı. Artık dar,
   kompakt bir dikey boşlukları var; her ekranın kendi başlık METNİNE
   (194 ayrı h2/h3'e) HİÇ dokunulmadı — sadece etraflarındaki boş alan
   daraltıldı. */
h1, h2, h3, h4 { margin: 0 0 8px; line-height: 1.25; }

/* ---------- Login ---------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  padding: 24px;
}
.login-shell {
  width: 100%;
  max-width: 960px;
  min-height: 560px;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(11,27,51,0.22);
}
.login-brand-panel {
  flex: 1.1;
  background: linear-gradient(160deg, #0B1B33 0%, #132845 60%, #0B1B33 100%);
  color: #fff;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.login-brand-panel::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), transparent 80%);
}
.login-brand-top { display: flex; align-items: center; gap: 12px; }
.login-brand-mark {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 13px; letter-spacing: 0.03em;
}
.login-brand-name {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.75);
}
.login-brand-mid h1 {
  font-family: var(--serif); font-size: 40px; margin: 0 0 10px; color: #fff;
}
.login-brand-mid p {
  margin: 0; font-size: 14px; color: rgba(255,255,255,0.72); max-width: 320px; line-height: 1.5;
}
.login-phase-preview { list-style: none; margin: 28px 0 0; padding: 0; }
.login-phase-preview li {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: rgba(255,255,255,0.85);
  padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.12);
}
.login-phase-preview li:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.login-phase-preview span {
  font-family: var(--mono); color: var(--accent); font-size: 11px; width: 20px; flex-shrink: 0;
}
.login-brand-foot {
  font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); margin-top: 28px;
}
.login-form-panel {
  flex: 1;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.login-card { width: 100%; max-width: 320px; }
.login-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
  font-weight: 700;
}
.login-title {
  font-family: var(--serif);
  font-size: 24px;
  margin: 0 0 26px;
  color: var(--ink);
}
@media (max-width: 720px) {
  .login-shell { flex-direction: column; min-height: 0; }
  .login-brand-panel { padding: 32px 28px; }
  .login-phase-preview { display: none; }
  .login-form-panel { padding: 32px 28px; }
}
.field { margin-bottom: 10px; }
.field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 14px;
  color: var(--ink);
  font-family: var(--sans);
}
/* Kullanıcı isteği: "Kutular tarih girişler fazla alanları kırkmak ...
   çalışma ekranını genişletmek." — tarih/saat girişleri, doğaları
   gereği (GG.AA.YYYY / SS:DD gibi) SABİT, DAR bir alana sığar; "width:
   100%" (yukarıdaki genel kural), bunları GEREKSİZ YERE, satırın TÜM
   genişliğine yayıyordu — bu, hem görsel olarak hem de kullanılabilir
   alan açısından israftı. Artık kendi içeriklerine uygun, dar bir
   genişlik alırlar (bir .form-row içinde, yanlarına başka alanlar
   sığabilir). */
.field input[type="date"], .field input[type="time"], .field input[type="month"] {
  width: auto; min-width: 130px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%), var(--btn-bg, var(--accent));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.btn:hover { filter: brightness(1.08); border-color: var(--accent-dark); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 500; }
.btn.secondary:hover { border-color: var(--ink-soft); }
.btn.danger { background: var(--alert); border-color: var(--alert); }
.btn.block { width: 100%; }

/* Kullanıcı isteği (v1009): "Filtre alanları tüm ekranlar Varsayılan
   Kapalı olsun" + "Ayrı bir satır açma, başlık satırına sığdır, tıklayınca
   üste açılsın." — program genelinde tekrar eden "dağınık filtre/bilgi
   alanı" ekranları için TEK, paylaşılan bir buton+panel deseni. Panel,
   mevcut .dropdown-menu ile AYNI mekanizmayı (açılınca position:absolute
   ile İÇERİĞİN ÜSTÜNE biner — sayfayı aşağı itmez; ata elemanların
   z-index'i otomatik yükseltilir; sol sınır taşması otomatik düzeltilir,
   bkz. dropdownSolSinirGozlemcisi/z-index gözlemcisi) kullanır — sadece
   sınıf eklenir, YENİ bir gözlemci/mekanizma YAZILMADI.
   .btn ile birebir aynı boyut/köşe dilini paylaşır ama genişliği İÇERİĞE
   göredir (satırı kaplamaz, başlık satırına sığar). */
.filtre-arac-toggle-btn {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  white-space: nowrap;
}
.filtre-arac-toggle-btn:hover { filter: brightness(0.97); }
.filtre-arac-toggle-btn.uyari { border-color: var(--alert); background: #FDECEC; color: var(--alert); }
.filtre-arac-panel.dropdown-menu { left: 0; right: auto; padding: 10px 12px; min-width: 300px; max-width: min(640px, 90vw); }
.error-msg {
  background: var(--alert-tint);
  color: var(--alert);
  border: 1px solid var(--alert);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}
.hint { font-size: 12px; color: var(--muted); margin-top: 18px; line-height: 1.5; }

/* ---------- App shell ---------- */
.shell { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: 270px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: rgb(var(--sidebar-text-rgb));
  display: flex;
  flex-direction: column;
  padding: 22px 0 16px;
  transition: width 0.15s ease;
}
.sidebar.is-wide { width: 340px; }
.sidebar.is-collapsed { width: 0; padding: 0; overflow: hidden; border: none !important; }
/* Kullanıcı isteği: "Menü gizle ve daralt butonlarını sağ altta görülen
   kapat butonun yanına kapatla uyumlu bir tasarımla taşıyalım." — ☰/⇔
   artık sidebar'ın içinde (user-chip'te, .sidebar .link-btn stiliyle);
   masaüstünde sidebar kapandığında menüyü yeniden açabilmek için bu
   küçük yedek buton, SADECE o durumda topbar'da görünür (JS ile toggle
   edilir — bkz. renderShell).
*/
.topbar-sidebar-ac-btn {
  background: var(--card); border: 1px solid var(--line); color: var(--accent-dark);
  cursor: pointer; font-size: 15px; padding: 5px 9px; line-height: 1;
  border-radius: var(--radius); margin-right: 10px; flex-shrink: 0;
}
.topbar-sidebar-ac-btn:hover { background: var(--accent-tint); border-color: var(--accent); }
@media (max-width: 768px) {
  /* Kullanıcı isteği: "Mobilde mesaj ekranın kişiler seçilince mesaj
     bölümü solda ekran dışında kalıyor farklı tasarlamamız lazım." —
     Masaüstünde YAN YANA duran kişi listesi + mesaj alanı, mobilde TEK
     SÜTUNA döner: bir sohbet seçiliyken SADECE mesaj alanı (tam genişlik),
     seçili değilken SADECE kişi listesi görünür — "←" ile geri dönülür. */
  .msg-layout { flex-direction: column; }
  .msg-layout .msg-conv-list { width: 100% !important; border-right: none !important; }
  .msg-layout.thread-active .msg-conv-list { display: none; }
  .msg-layout:not(.thread-active) .msg-thread-panel { display: none; }
  .msg-back-btn { display: inline-block !important; }
}
.brand {
  font-family: var(--serif);
  font-size: 15px;
  padding: 0 20px 20px;
  border-bottom: 1px solid rgba(var(--sidebar-text-rgb),0.12);
  margin-bottom: 8px;
}
.brand small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; opacity: 0.6; margin-top: 4px; }
.nav-section-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  padding: 14px 20px 6px;
  display: flex; align-items: center; justify-content: space-between; padding-right: 12px;
}
.sidebar-widen-btn {
  background: #fff; border: 1px solid var(--accent); color: var(--accent);
  cursor: pointer; font-size: 13px; padding: 4px 6px; line-height: 1;
  border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.sidebar-widen-btn:hover { background: var(--accent-tint); }
.phase-list { list-style: none; margin: 0; padding: 0 8px; flex: 1; overflow-y: auto; }
.phase-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: 13px;
  color: rgba(var(--sidebar-text-rgb),0.85);
}
.phase-list li .phase-name {
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar.is-wide .phase-list li .phase-name { white-space: normal; }
.phase-list li:hover { background: rgba(var(--sidebar-text-rgb),0.08); }
.phase-list li.active { background: rgba(var(--sidebar-active-rgb, var(--accent-rgb)),0.28); border-left-color: var(--accent); color: rgb(var(--sidebar-text-rgb)); }
.phase-list li.active .num { color: var(--accent); opacity: 1; }
.phase-list .num { font-family: var(--mono); font-size: 11px; opacity: 0.6; width: 16px; }
.sidebar-footer { padding: 10px 20px 40px; border-top: 1px solid rgba(var(--sidebar-text-rgb),0.12); margin-top: 8px; }
.sol-menu-gizle-btn { transition: color 0.15s; }
#sidebar-sabit-alt-cubuk .link-btn { color: rgba(var(--sidebar-text-rgb),0.85); background: rgba(var(--sidebar-text-rgb),0.08); border-color: transparent; }
#sidebar-sabit-alt-cubuk .link-btn:hover { color: rgba(var(--sidebar-text-rgb),1); background: rgba(var(--sidebar-text-rgb),0.16); }
.sol-menu-gizle-btn-kapali-izi { color: silver !important; }
.sol-menu-gizle-btn-kapali-izi:hover { color: var(--accent-dark) !important; }
.user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 4px; padding: 8px; border-radius: 8px; background: rgba(var(--sidebar-text-rgb),0.06); }
.user-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(var(--sidebar-text-rgb),0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; flex-shrink: 0;
}
.link-btn {
  background: var(--card); border: 1px solid var(--line); color: var(--accent-dark);
  font-size: 12px; cursor: pointer; padding: 4px 10px; border-radius: var(--radius);
  text-decoration: none; font-weight: 500; display: inline-flex; align-items: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.link-btn:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--ink); }
.sidebar .link-btn {
  color: rgba(var(--sidebar-text-rgb),0.85); background: rgba(var(--sidebar-text-rgb),0.08);
  border-color: rgba(var(--sidebar-text-rgb),0.25);
}
.sidebar .link-btn:hover { color: rgb(var(--sidebar-text-rgb)); background: rgba(var(--sidebar-text-rgb),0.16); }
/* Windows 11 / Fluent Design tarzı: kenarlıksız, yuvarlak köşeli, çok hafif
   (~%3-4) renk ipucu veren, sade ve zarif ikon butonları. */
.topbar-icon-btn {
  position: relative; border: none; border-radius: 7px;
  width: 28px; height: 28px; cursor: pointer;
  background: transparent;
  color: var(--ink-soft, var(--ink));
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
/* Kullanıcı isteği: "Sağ üstteki hızlı simge setini daha etkin biçimde
   şık tasarımlar ekler misin?" — hover'da hafif YUKARI kalkma + yumuşak
   gölge, basınca (active) hafif küçülme — daha "tıklanabilir" ve canlı
   hissettiren, ama hâlâ sade/rahatsız etmeyen bir mikro-etkileşim. */
.topbar-icon-btn:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.10); }
.topbar-icon-btn:active { background: color-mix(in srgb, var(--ink) 15%, transparent); transform: translateY(0) scale(0.94); box-shadow: none; }
/* Kullanıcı isteği: "Geri dönüş oku da sol menüdeki cursor gezinme
   rengi olsun." — bu ok, ikon temasından bağımsız olarak HER ZAMAN sol
   menünün vurgu (accent) rengini kullanır. */
#global-geri-btn { color: var(--accent); }
#global-geri-btn:hover { background: var(--accent-tint); }
/* Kullanıcı isteği: "Mesaj simgesi daha kullanışlı ve hızlı kullanışlı ve
   teşvik edici bir çözüm bulunabilir mi?" — okunmamış mesaj varken rozet
   HAFİFÇE nabız gibi atarak (rahatsız etmeyen, yumuşak bir animasyon)
   dikkat çeker; simgenin kendisi de her zaman hafif bir yeşilimsi zemin
   taşır (diğer simgelerden ayırt edilsin, "mesaj" olduğu daha belli olsun). */
.topbar-icon-btn-mesaj { background: color-mix(in srgb, #34D399 10%, transparent); }
.topbar-icon-btn-mesaj:hover { background: color-mix(in srgb, #34D399 20%, transparent); }
@keyframes topbar-badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.topbar-icon-badge:not([style*="display: none"]) { animation: topbar-badge-pulse 1.8s ease-in-out infinite; }
.topbar-icon-badge {
  position: absolute; top: -4px; right: -4px; background: #E8720C; color: #fff;
  border-radius: 9px; padding: 0 5px; font-size: 10px; font-weight: 700; line-height: 16px;
}
/* Kullanıcı isteği: "Tebligatlar için ... baloncuk rengi kırmızı." —
   diğer baloncuklar turuncu kalır, Tebligat'ınki KIRMIZI olur (resmi
   tebligatların aciliyetini vurgulamak için). */
.topbar-icon-badge-red { background: #DC2626 !important; }

/* Kullanıcı isteği: "Renk Teması gibi simge teması" — mevcut simgelerin
   (SVG path'leri AYNI kalır) çizgi kalınlığı/köşe/boyut stilini değiştirir.
   Her simge için ayrı bir set çizmek yerine tek bir CSS kuralıyla TÜM
   simgelere tutarlı şekilde uygulanır — eksik/tutarsız ikon riski olmadan. */
html[data-icon-theme="bold"] .topbar-icon-btn svg { stroke-width: 2.8; }
/* Kullanıcı isteği: "renkli simge gibi tüm hızlı menü için yeni birkaç
   simge seti ekler misin?" — "Canlı Renkli" teması, mevcut çizgi
   ikonları AYNI kalır ama her biri kendine özgü canlı bir renk alır. */
html[data-icon-theme="canli"] #tabs-notes-btn { color: #F59E0B; }
html[data-icon-theme="canli"] #tabs-messages-btn { color: #10B981; }
html[data-icon-theme="canli"] #tabs-tebligat-btn { color: #DC2626; }
html[data-icon-theme="canli"] #tabs-quicktask-btn { color: #EAB308; }
html[data-icon-theme="canli"] #tabs-calendar-btn { color: #3B82F6; }
html[data-icon-theme="canli"] #tabs-hesapmakinesi-btn { color: #6366F1; }
html[data-icon-theme="canli"] #tabs-mukellefbilgileri-btn { color: #EC4899; }
html[data-icon-theme="canli"] #tabs-rehber-btn { color: #14B8A6; }
html[data-icon-theme="canli"] #tabs-commlog-btn { color: #8B5CF6; }
html[data-icon-theme="canli"] #tabs-global-search-btn { color: #64748B; }
/* Kullanıcı isteği: "Temalarda simge çizgileri seçili tema ile uyumlu
   Çizgi rengi teması eklenebilir mi." — Bu mod, TÜM hızlı menü
   simgelerini seçili RENK TEMASININ vurgu rengiyle (--accent) boyar;
   renk teması değişince simge rengi de OTOMATİK olarak değişir. */
html[data-icon-theme="temauyumlu"] .topbar-icon-btn { color: var(--accent); }
html[data-icon-theme="sharp"] .topbar-icon-btn svg path,
html[data-icon-theme="sharp"] .topbar-icon-btn svg polyline,
html[data-icon-theme="sharp"] .topbar-icon-btn svg polygon,
html[data-icon-theme="sharp"] .topbar-icon-btn svg rect,
html[data-icon-theme="sharp"] .topbar-icon-btn svg line {
  stroke-linecap: butt; stroke-linejoin: miter;
}
html[data-icon-theme="rounded"] .topbar-icon-btn svg { width: 24px; height: 24px; }
html[data-icon-theme="rounded"] .topbar-icon-btn svg path,
html[data-icon-theme="rounded"] .topbar-icon-btn svg polyline,
html[data-icon-theme="rounded"] .topbar-icon-btn svg polygon,
html[data-icon-theme="rounded"] .topbar-icon-btn svg rect,
html[data-icon-theme="rounded"] .topbar-icon-btn svg line {
  stroke-linecap: round; stroke-linejoin: round;
}
html[data-icon-theme="minimal"] .topbar-icon-btn svg { width: 18px; height: 18px; stroke-width: 1.5; }

/* Bir üst seviyeye dönüş butonları (örn. "← Firmalara Dön") — küçük, kaybolan bir
   metin linki yerine; belirgin, tutarlı, pill biçimli gerçek bir buton görünümü. */
.back-nav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px 8px 12px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink-soft); font-size: 13px; font-weight: 600;
  cursor: pointer; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.back-nav-btn:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-dark); }
.back-nav-btn:active { transform: scale(0.97); }
.back-nav-btn .arrow { font-size: 15px; line-height: 1; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; border-bottom: 1px solid var(--line); gap: 16px; flex-wrap: wrap;
}
.topbar-title { font-family: var(--serif); font-size: 20px; margin: 0; }
.topbar-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Kullanıcı isteği: "% alanları yazımdan sonra soluna % konsun." —
   Yüzde/oran giriş alanlarının SOLUNDA, sabit bir "%" işareti gösterir.
   Input'un kendi value'suna hiç dokunmaz (mevcut submit/okuma mantığı
   değişmeden çalışır) — sadece görsel bir önek ekler. */
.oran-wrap { position: relative; display: inline-block; }
.oran-wrap::before {
  content: '%'; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 12px; pointer-events: none; z-index: 1;
}
.oran-wrap input { padding-left: 20px !important; }

.select-inline {
  padding: 6px 26px 6px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 11px; font-weight: 500; color: var(--ink); line-height: 1.3;
  background-color: var(--card);
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 7.5L10 12.5L15 7.5' stroke='%235C6B85' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
  cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.select-inline:hover { border-color: var(--accent); }
.select-inline:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); outline: none; }
.select-inline option { font-size: 11px; padding: 6px 10px; }
.select-inline:hover { border-color: var(--ink-soft); }
.select-inline:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
/* Firma/Sözleşme/Proje seçiciler: kelime uzunluğuna göre genişlik değişmesin, sabit kalsın. */
#company-select, #contract-select, #project-select {
  width: 168px !important; max-width: 168px !important; min-width: 168px !important;
  box-sizing: border-box; flex: 0 0 168px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11px; font-weight: 600; padding: 11px 24px 11px 10px;
  border-width: 1px; border-color: var(--line);
}
#company-select option, #contract-select option, #project-select option {
  font-size: 11px; padding: 6px 10px;
}
@media (max-width: 900px) {
  #company-select, #contract-select, #project-select { width: 120px !important; max-width: 120px !important; min-width: 120px !important; flex: 0 0 120px; }
}
/* Kullanıcı isteği: "Mizan türlerini seçerken Hariç Dahil bölümü Tik
   mantığıyla çalışsın." — Yönetim > Mizan Türleri ekranındaki Dahil
   Et/Hariç Tut kutuları eskiden native <select multiple> idi (birden
   fazla seçim için Ctrl/Cmd+tıklama gerektiriyordu, hangilerinin seçili
   olduğu tek bakışta belli olmuyordu). Artık her seçenek kendi checkbox'ı
   ile listelenen, kaydırılabilir sabit yükseklikte bir kutu — tek
   tıklamayla işaretle/kaldır, tüm seçili olanlar her zaman görünür. */
.mizan-turu-tikli-liste {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  min-width: 160px; max-height: 118px; overflow-y: auto; padding: 4px 8px;
}
.mizan-turu-tikli-liste label {
  display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 0;
  white-space: nowrap; cursor: pointer;
}
.mizan-turu-tikli-liste input[type="checkbox"] { margin: 0; cursor: pointer; flex-shrink: 0; }

.menu-wrap { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(11,27,51,0.16);
  /* Kullanıcı isteği: "Aşağıya açılan menüler yaklaşık %20 daha fazla
     genişlet ve satırlar ikinci satıra geçmesin." — eski 220px'ten ~%20
     genişletildi (264px); satırların tek satırda kalması aşağıdaki
     .dropdown-item kuralıyla (white-space:nowrap) sağlanıyor. */
  min-width: 264px; z-index: 20;
  /* Kullanıcı geri bildirimi: mobilde bazı sekmeler menüsü "aşağı açılmıyor,
     altta kalıyor" gibi görünüyordu — bunun olası bir sebebi, menü içeriği
     kullanılabilir alandan uzun olduğunda eski "overflow:hidden" kuralının
     alt kısmı KESMESİYDİ. Artık menü, ekran yüksekliğinin en fazla %70'ini
     kaplar ve gerekirse KENDİ İÇİNDE kaydırılır (kesilmez). */
  max-height: 70vh; overflow-y: auto;
}
@media (max-width: 640px) {
  /* Küçük ekranlarda, düğmenin sağına dayalı menü ekran dışına taşabiliyordu
     — mobilde sağdan hizalamayı kaldırıp, menüyü butonun genişliğine göre
     ekrana daha güvenli sığdırıyoruz. */
  .dropdown-menu { right: auto; left: 0; max-width: calc(100vw - 32px); }
}
.dropdown-menu.open { display: block; }
/* Kullanıcı isteği: "Açılır menülerin genişliği eşit olsun ve soldan üst
   menü ile hizalı olsun." — üst sekme çubuğundaki 4 açılır menü (İşlemler ▾/
   Raporlar ▾/Diğer ▾/İstem ▾) artık HEPSİ AYNI sabit genişlikte (en uzun
   içeriğe — İşlemler ▾'nin en uzun satırına — göre ölçülüp yuvarlandı) ve
   tetikleyen butonun SOL kenarıyla hizalı açılıyor (eskiden butonun sağına
   yaslanıyordu, bu yüzden her menü kendi içeriğine göre farklı genişlik ve
   farklı bir sol/sağ konumda açılıyordu). Diğer (Denetim HUB/Mizan gibi)
   açılır menüler bu kuraldan etkilenmez, kendi otomatik genişlik/sağa-yaslı
   davranışlarını korur. */
/* Kullanıcı isteği (v985): "Açılır menülerin genişliğini yaklaşık %12
   küçültelim." — 424px'ten ~%12 küçültülüp 373px'e indirildi. Metinler
   zaten white-space:nowrap + gerektiğinde "…" kısaltma + title tooltip ile
   korunuyor (bkz. .dropdown-item altındaki not), bu yüzden daha dar
   genişlikte de okunabilirlik bozulmuyor. */
/* Kullanıcı isteği (v986): "Açılır menü genişliği 373px → 320px olsun." —
   ikinci bir küçültme turu, aynı gerekçeyle (nowrap + "…" kısaltma + title
   tooltip) daha da daraltıldı. */
.ust-menu-acilir { left: 0; right: auto; width: 320px; }
@media (max-width: 640px) {
  .ust-menu-acilir { width: auto; max-width: calc(100vw - 32px); }
}
.dropdown-item {
  /* Kullanıcı isteği (v1272): "satır yüksekliklerini %10 azalt" — dikey
     padding 10px'ten 9px'e indirildi (satır yüksekliğini oluşturan ana
     etken; yatay padding ve font boyutu değişmedi). */
  padding: 9px 14px; font-size: 13px; cursor: pointer; color: var(--ink);
  border-bottom: 1px solid var(--line);
  /* Kullanıcı isteği: "satırlar ikinci satıra geçmesin üzerine gelince
     okunsun." — satır ARTIK ikinci satıra kaçmıyor (nowrap); genişletilmiş
     264px kutuya SIĞMAYAN nadir çok-uzun etiketler üç nokta (…) ile
     kısaltılır, TAM metin ise fare üzerine gelince tarayıcının doğal
     tooltip'i (title özniteliği — bkz. app-v554.js'teki dropdown-item
     üretimi) ile okunur. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--paper-2); }
.dropdown-item.active { background: var(--accent-tint); font-weight: 600; }
/* v1173 — Kullanıcı isteği: "Raporlar ve işlemelerin sıralamasını alaka ve
   ilişki yakınlığına göre sınıfla ve ayraç kullanabilirsin." — İşlemler ▾/
   Raporlar ▾ açılır menülerinde ilişkili öge gruplarını görsel olarak
   ayırmak için ince bir bölücü çizgi (bkz. app-v554.js getIslemlerVe
   RaporlarGruplari/temizleAyraclar). .dropdown-item'ın kendi border-bottom
   çizgisinden KASITLI olarak farklı (daha belirgin) — o her satırı ayırır,
   bu SADECE grup sınırını işaretler.
*/
.dropdown-divider { height: 1px; margin: 6px 10px; background: var(--line); opacity: 0.8; }
.content { padding: 16px 20px; flex: 1; overflow-y: auto; }

/* Kullanıcı bildirdi: "firma seçimde dikey kaydırma çubuğu da yok" —
   birçok işletim sisteminde (özellikle macOS/trackpad) tarayıcı
   kaydırma çubuğunu varsayılan olarak ince/görünmez tutar; kaydırma
   fiilen ÇALIŞIR ama kullanıcı daha fazla içerik olduğunu FARK EDEMEZ.
   Ana içerik alanına ve Mizan/Muavin'in kendi sınırlı tablo kutularına
   (.gorunur-scrollbar) her zaman görünür, ince bir kaydırma çubuğu
   eklendi — işlev hiç değişmedi, sadece "daha içerik var" ipucu artık
   her zaman görünür. */
.content,
.gorunur-scrollbar {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--ink-soft, #94a3b8) transparent;
}
.content::-webkit-scrollbar,
.gorunur-scrollbar::-webkit-scrollbar {
  width: 10px; height: 10px;
}
.content::-webkit-scrollbar-track,
.gorunur-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.content::-webkit-scrollbar-thumb,
.gorunur-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--ink-soft, #94a3b8);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.content::-webkit-scrollbar-thumb:hover,
.gorunur-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--muted, #6b7280);
}
/* "Dokunmatik Ekran" modu kullanıcının kendi tercihidir (Hesabım
   ekranından açılır) — o modda kaydırma çubuklarının bilerek
   gizlenmesi (yukarıdaki body.dokunmatik-mod kuralı) burada da
   korunur, bu görünürlük düzeltmesini geçersiz kılar. */
body.dokunmatik-mod .content,
body.dokunmatik-mod .gorunur-scrollbar {
  scrollbar-width: none;
}
body.dokunmatik-mod .content::-webkit-scrollbar,
body.dokunmatik-mod .gorunur-scrollbar::-webkit-scrollbar {
  display: none;
}

/* v1220 — Kullanici bildirdi (ekran goruntusuyle, Tebligat ekraninda,
   birebir): "Asagidaki sag sola yatay kaydirma cubugu duruyor neyi
   duzeltmis oldun." KOK SEBEP: v1218'de duzeltilen Surecler/Kanban
   asirisi (.board-columns) AYRI, DAHA BUYUK bir tasmaydi (bir <select>'in
   dogal genisligi yuzunden) - ama BUNDAN TAMAMEN BAGIMSIZ, .content'in
   HER SAYFADA gorunen .tabs (ust sekme) satirinda KUCUK ama SABIT (ekran
   genisliginden BAGIMSIZ, HER ZAMAN ayni) bir tasma daha VARDI: .tabs,
   .content'in kendi 20px'lik yatay padding'ini "yutup" kenara-kenara
   (edge-to-edge) yaslanmak icin negatif kenar bosluguyla "tasarim
   numarasi" (bleed) yapiyor (margin-left/right: -28px + padding-left/
   right: 28px) - ama .content'in GERCEK yatay padding'i 28px DEGIL,
   SADECE 20px (bkz. ".content { padding: 16px 20px; }" satiri). Yani
   .tabs, .content'in sahip oldugundan 8px (28-20) DAHA FAZLA disari
   tasiyordu - bu, .content'in overflow-y:auto olmasi yuzunden (CSS
   kurali geregi overflow-x de fiilen "auto" olur) HER SAYFADA, ekran
   genisligi ne olursa olsun SABIT ~8px'lik, kucuk ama surekli goze
   carpan bir yatay kaydirma cubugu olarak ortaya cikiyordu - v1218'in
   duzelttigi Kanban-e-ozel buyuk tasmadan TAMAMEN AYRI bir hataydi,
   Tebligat gibi Kanban ICERMEYEN ekranlarda da GORULUYORDU.
   DUZELTME: .tabs'in bleed miktari (-28px/28px) .content'in GERCEK
   padding'iyle (20px) BIREBIR ESITLENDI - artik .tabs .content'in
   kenarina TAM oturuyor, ne eksik ne fazla. Ayni mantikla, asagidaki
   @media (max-width: 820px) icinde .content'in padding'i 16px'e
   dustugu icin, .tabs icin de AYNI breakpoint'te 16px'lik bir bleed
   override'i eklendi (once orada da .content 16px, .tabs hala 28px
   kullaniyordu - mobilde DAHA BUYUK, 12px'lik bir tasma vardi). */
.tabs {
  display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
  position: sticky; top: -24px; z-index: 15; background: var(--paper);
  padding-top: 16px; margin-top: -24px; margin-left: -20px; margin-right: -20px;
  padding-left: 20px; padding-right: 20px;
  transition: box-shadow 0.15s ease;
  /* v1268 — Kullanıcı bildirdi (birebir, canlı üretim sitesinden 2 ekran
     görüntüsüyle): "üstmenü çok yüksekliği daraltılmış ve enine
     genişlemiş ekrana sığmıyor." KÖK SEBEP: aşağıdaki v1262 notunda
     anlatılan "TEK satır kendi içinde kayar" çözümü, nav sekmelerini VE
     sağdaki hızlı-erişim simge kümesini AYNI kaydırma şeridinde
     tutuyordu — sekme sayısı v1259/v1260/v1261 ile arttıkça, taşan bu
     TEK şeritte simge kümesine ulaşmak için TÜM sekmelerin kaydırılması
     gerekiyordu. DÜZELTME: kaydırma davranışı artık BU elemanda (.tabs)
     DEĞİL, sadece nav sekmelerini saran YENİ iç sarmalayıcıda
     (.tabs-scroll, aşağıda) uygulanıyor — .tabs artık SADECE iki sabit
     çocuğu (.tabs-scroll + sağdaki simge kümesi div'i) yan yana
     dizen, kendisi kaymayan bir çerçeve; simge kümesi flex-shrink:0
     ile HER genişlikte tam görünür kalır. app-v554.js renderTabs()
     içindeki HTML yapısı da buna göre güncellendi (bkz. oradaki v1268
     notu). */
  /* v1262 — Kullanıcı bildirdi (birebir): "Ana ekranda sağa sola ve aşağı
     yukarı kaydırma çubukları çıktı." KÖK SEBEP: .tabs (ana sekme şeridi)
     varsayılan flex davranışıyla (nowrap, taşma/kayma kuralı YOK) sadece
     820px altı genişlikte tek-satır+kendi-içinde-kaydırma moduna
     geçiyordu (bkz. @media max-width:820px, aşağıda); 820px ile yaklaşık
     1300px arası (1366x768, 1280x800 gibi ÇOK YAYGIN dizüstü
     çözünürlükleri dahil) hiçbir koruma yoktu. Sekme sayısı sürüm sürüm
     arttıkça (en son v1259/v1261'de eklenen kalemlerle) bu şerit artık bu
     orta genişliklerde de konteynerine sığmıyor; .content'in kendi
     overflow-y:auto'su CSS kuralı gereği overflow-x'i de fiilen "auto"
     yaptığından (bkz. v1220 notu, yukarıda), taşan .tabs'in kendisi
     DEĞİL, üstündeki TÜM .content alanı yatay kaydırılabilir hale
     geliyor — mevcut dikey kaydırmayla birleşince "hem sağa-sola hem
     aşağı-yukarı kaydırma çubuğu" görüntüsü ortaya çıkıyordu. DÜZELTME:
     820px altı için zaten var olan "tek satır + kendi içinde ince
     kaydırma çubuğuyla kaysın" deseni artık TÜM genişliklerde (mobil
     ayrımı olmadan) geçerli — .tabs kendi sınırları içinde taşar/kayar,
     .content'e hiç taşmaz. */
  flex-wrap: nowrap;
}
/* v1268 — nav sekmelerinin kendi bağımsız kaydırma şeridi (bkz. .tabs
   üzerindeki not). flex:1 ile mevcut TÜM boş alanı doldurur, bu sayede
   sağdaki simge kümesi (flex-shrink:0) her zaman sağa yaslı ve tam
   görünür kalır; min-width:0 flex item'ın içeriğine göre büyüyüp
   kardeşini dışarı itmesini (klasik flexbox taşma hatası) engeller. */
.tabs-scroll {
  display: flex; gap: 4px; flex: 1 1 auto; min-width: 0;
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tabs .tab { flex-shrink: 0; white-space: nowrap; }
.tabs-scroll::-webkit-scrollbar { height: 4px; }
.tabs-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
/* v1177 — Kullanıcı bildirdi (birebir): "Sayfa aşağı kayarken Windows 10
   ve öncesinde işletim sistemlerinde ekran titriyor" + netleştirme:
   "aşılamayacak veya kronik problem ise aşağı kayarken üst satır
   yüksekliklerini değiştirme." KÖK SEBEP: bu satır (.tabs) ve hemen
   altındaki .toolbar, aşağı kaydırıldıkça padding/font-size/margin
   DEĞİŞTİREREK (.is-scrolled) daha ince bir hale "daralıyordu" — bu,
   scroll olayının HER tetiklenişinde bir düzen (layout) yeniden hesabı
   zorluyordu (ayrıca app-v554.js'teki scroll dinleyicisi bu daralmaya
   bağlı olarak her seferinde boardBaslikSinirGuncelle() ile ek
   getBoundingClientRect ölçümleri de yapıyordu) — düşük performanslı
   Windows 10/öncesi makinelerde bu sürekli düzen değişimi görünür bir
   titremeye yol açıyordu. DÜZELTME: .tabs/.toolbar ARTIK kaydırma
   sırasında YÜKSEKLİK DEĞİŞTİRMİYOR — sadece hafif bir gölge (box-shadow,
   düzeni etkilemeyen, sadece boyama/repaint gerektiren bir özellik)
   eklenir. Alttaki "Pano" sütun başlıklarının sabitlenme referansı artık
   kaydırma sırasında değişmediğinden, bu ölçüm de artık scroll'da değil
   sadece ilk çizimde/pencere yeniden boyutlandırıldığında/içerik yeniden
   çizildiğinde yapılıyor (bkz. app-v554.js). */
.tabs.is-scrolled { box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
/* Pano/Liste/Dosya gibi ekranlardaki ilk araç çubuğu (toolbar), sekmelerin hemen
   altında sabit kalır. */
.toolbar {
  display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center;
  position: sticky; top: 41px; z-index: 14; background: var(--paper);
}

.tab {
  /* Kullanıcı isteği: "Üst menü satırları daraltılabilir." — varsayılan
     yükseklik/boşluk azaltıldı (kaydırılmadan da daha ince görünür). */
  padding: 6px 12px; font-size: 12.5px; cursor: pointer; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 700; }

/* Engagement cards */
.eng-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 24px; }
.eng-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); cursor: pointer; position: relative;
}
.eng-card.active { border-color: var(--accent); }
/* Kullanıcı isteği: "Kutu(HUB) şeklinde olan firma kartlarının altında
   ki Firma kartı ve sil butonları alt tarafta sabit konumda olsun." —
   Farklı içerik uzunluğuna sahip kartlarda bile butonlar HER ZAMAN
   kartın en altında hizalı durur. */
.firma-hub-kart { display: flex; flex-direction: column; height: 100%; }
.firma-hub-kart-govde { flex: 1; }
.firma-hub-kart-butonlar { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
/* v1434 — Firma Kartı girişi: program paletine uygun, sakin ama belirgin düğme. */
.firma-kart-ac { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-size: 12px; font-weight: 600;
  color: var(--ink); background: var(--accent-tint); border: 1px solid var(--accent); border-radius: 999px; cursor: pointer; line-height: 1.2; }
.firma-kart-ac:hover { box-shadow: inset 0 0 0 1px var(--accent); filter: brightness(0.97); }
.firma-kart-ac:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#firma-karti-git-btn.firma-kart-giris { font-size: 12px; padding: 6px 10px; border-color: var(--accent); background: var(--accent-tint); color: var(--ink); font-weight: 600; white-space: nowrap; }
#firma-karti-git-btn.firma-kart-giris:hover { box-shadow: inset 0 0 0 1px var(--accent); filter: brightness(0.97); }
.settings-list-row:hover { background: var(--paper-2); }
@keyframes bildirim-toast-gir { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.eng-card h3 { font-family: var(--serif); font-size: 16px; margin: 0 0 4px; }
.eng-card .client { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.stamp {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--accent); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  transform: rotate(-6deg);
}
.progress-bar { height: 5px; background: var(--paper-2); border-radius: 4px; overflow: hidden; }
.progress-bar > div { height: 100%; background: var(--accent); }
.new-eng-card {
  border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px; cursor: pointer; min-height: 96px;
}
.new-eng-card:hover { border-color: var(--accent); color: var(--accent); }

/* Board / table */
/* v1218 — Kullanıcı bildirdi (birebir, ekran görüntüsüyle): "Aşağıdaki
   sağa sola yatay kaydırma çubuğunu kaldırmanın yolu yok mu" (Süreçler
   panosu, "Duruma göre" gruplamada — tam 4 sütun, board-columns-scroll
   DEĞİL, düz grid modu). KÖK SEBEP: CSS Grid'de "1fr" sütunlar, GERÇEKTE
   "minmax(auto, 1fr)" gibi davranır — bir sütunun İÇİNDEKİ herhangi bir
   öğenin (ör. "Detay (not, evrak, tarih, kontrol listesi)" düğmesi gibi
   uzun bir metin) doğal minimum genişliği, o sütuna ayrılan 1fr payından
   büyükse, sütun KÜÇÜLMEZ — tüm grid (ve dolayısıyla sayfa) sağa taşar,
   bu yüzden altta yatay bir kaydırma çubuğu belirir. DÜZELTME: "1fr" yerine
   "minmax(0, 1fr)" (sütunun küçülebileceği GERÇEK alt sınırı 0 olarak
   belirtilir) + .board-col'a min-width:0 (grid ÖĞESİNİN kendisi de
   varsayılan min-width:auto ile içeriğinin doğal genişliğinden küçülmeyi
   REDDEDER — ikisi birden gerekir). Sonuç: sütunlar artık konteynerin
   genişliğine göre GERÇEKTEN eşit bölünüyor, içindeki uzun düğme metni
   (zaten nowrap DEĞİL) gerektiğinde kendi satırı içinde sarmalanıyor,
   sayfa taşmıyor. "Gruplama: Süreç/Sorumlu/Tarih" gibi kasıtlı yatay
   kaydırmalı modu (.board-columns-scroll, sabit 260px genişlikli sütunlar)
   BU DEĞİŞİKLİKTEN ETKİLENMEZ — o hâlâ kendi min-width:260px kuralını
   (daha yüksek özgüllük) kullanır. */
.board-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.board-columns.board-columns-scroll {
  display: flex; overflow-x: auto; padding-bottom: 6px;
}
.board-columns.board-columns-scroll .board-col { flex: 0 0 260px; min-width: 260px; }
.board-col { background: var(--paper-2); border-radius: var(--radius); padding: 10px; min-height: 200px; border-top: 3px solid var(--line); min-width: 0; }
.board-col.col-todo { border-top-color: var(--ink-soft); }
.board-col.col-in_progress { border-top-color: var(--accent); }
.board-col.col-done { border-top-color: var(--success); }
.board-col.col-blocked { border-top-color: var(--alert); }
.board-col h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft);
  margin: 4px 6px 10px; display: flex; justify-content: space-between; font-weight: 700;
  /* Kullanıcı isteği (birebir): "Kanbanda durum başlıkları aşağı yukarı
     gezinirken sabit kalsın" — sütun uzun bir görev listesiyle .content
     içinde aşağı kaydırılınca, o kolonun durum başlığı (ör. "YAPILACAK
     12") görünür kalır. .table th'deki gibi düz "top:0" burada İŞE
     YARAMAZ: Pano ekranında üstte AYRICA sticky .tabs ve .toolbar var
     (bkz. yukarısı) — top:0 verilirse başlık onların ARKASINA saklanıp
     görünmez olur.
     v1044 — Kullanıcı bildirdi: "başlıklar hala kayboluyor". KÖK SEBEP:
     top değeri ÖNCEDEN iki elle-tahmin edilmiş sabit piksele (78px
     normal / 68px .toolbar.is-scrolled) göre hizalanmıştı — ama
     .toolbar flex-wrap:wrap olduğundan GERÇEK yüksekliği (dar pencere/
     yakınlaştırma/2 satıra bölünme ile) bu tahminlerden farklı
     olabiliyordu, bu durumda başlık yine .toolbar'ın (daha yüksek
     z-index'li) ARKASINA kayıyordu. Artık top değeri, #tabs + .toolbar'ın
     GERÇEK (o anki) toplam yüksekliği ÖLÇÜLEREK bir CSS değişkenine
     yazılıyor (bkz. app-v554.js `boardBaslikSinirGuncelle`) — normal VE
     daralmış (.is-scrolled) halin İKİSİNDE de otomatik doğru sonucu
     verir, bu yüzden eskiden burada olan ikinci/duruma-özel sabit kural
     artık gereksiz ve kaldırıldı.
     Kendi arka planını taşır ki alttaki kartlar başlığın ARKASINDAN
     kaymasın, kartların üstüne binsin.
  */
  position: sticky; top: var(--board-h4-top, 78px); z-index: 2; background: var(--paper-2);
  padding-top: 4px; padding-bottom: 2px;
  transition: top 0.15s ease;
}
.task-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow); font-size: 13px;
  /* Kullanıcı isteği: "başlık ve genel panoya tıklandığında da görevi
     açmalı" — kartın kendisi artık tıklanabilir (bkz. bindTaskCardOpenOnClick),
     bu yüzden imleç de bunu ipucu olarak gösterir. */
  cursor: pointer;
}
.task-card:hover { border-color: var(--accent); }
.task-card .phase-tag { font-family: var(--mono); font-size: 10px; color: var(--accent-dark); text-transform: uppercase; letter-spacing: 0.05em; }
.task-card .title { margin: 4px 0 6px; font-weight: 500; }
.task-card .meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); align-items: center; }
.task-card .due.overdue { color: var(--alert); font-weight: 600; }
.task-card select { font-size: 11px; border: 1px solid var(--line); border-radius: 3px; padding: 2px 4px; }
.task-card[draggable="true"] { cursor: grab; }
.task-card.dragging { opacity: 0.4; }
.board-col.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--paper); }

/* Süreç Zinciri — salt-okunur, bağlantılı işlem adımlarının durum zinciri
   (kullanıcı isteği: "işlem işlem bağlantılı işlemlerin net durumunu
   görmek"). Pano'daki görev kartlarından BİLİNÇLİ OLARAK farklı
   görünür (draggable/cursor:grab YOK) — bu kartlar elle taşınamaz. */
.surec-zinciri-adim {
  min-width: 140px;
  max-width: 190px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.surec-zinciri-adim.durum-tamamlandi { border-color: #2E7D32; background: rgba(46, 125, 50, 0.08); }
.surec-zinciri-adim.durum-bekliyor { border-color: var(--line); }
.surec-zinciri-adim.durum-bilgi, .surec-zinciri-adim.durum-uygulanmiyor { border-style: dashed; opacity: 0.75; }
.surec-zinciri-adim.durum-hata, .surec-zinciri-adim.durum-bilinmiyor { border-color: var(--alert); }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line);
  /* Kullanıcı isteği: "Programın tamamında listelerde başlıklar
     mutlaka sabit olabilir mi, her seferinde tekrar tekrar
     uğraşıyoruz." — TÜM tablolarda (bu tek kural, .table class'ını
     kullanan her yerde geçerli), dikey kaydırmada başlık satırı
     görünür kalır, kullanıcı sürekli yukarı kaydırmak zorunda kalmaz. */
  position: sticky; top: 0; z-index: 1; background: var(--card);
}
.table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:hover td { background: rgba(47,111,98,0.04); }
/* Kullanıcı bildirdi: Mizan Detay tablolarında satırlar dağınık
   görünüyordu — bir hücrede (ör. Not, Beyanname) birden çok satırlık
   içerik olunca, o hücre dikeyde ORTALANIYOR ve yanındaki kısa
   hücreler (Kod, Risk, Kontrol) havada yüzüyormuş gibi görünüyordu.
   Bu tabloda tüm hücreler ÜSTTEN hizalanır — satır yüksekliği
   içerik kadar uzasa bile düzen sabit ve temiz kalır. */
.mizan-detay-tablosu td { vertical-align: top; }
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
}
.badge.todo { background: var(--paper-2); color: var(--ink-soft); }
.badge.in_progress { background: var(--accent-tint); color: var(--accent-dark); }
.badge.done { background: var(--success-tint); color: var(--success); }
.badge.blocked { background: var(--alert-tint); color: var(--alert); }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.panel h3 { font-family: var(--serif); margin: 0 0 14px; font-size: 17px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row .field { flex: 1; min-width: 160px; }
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.empty-state { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 13px; }
.empty-state .stamp-big { width: 64px; height: 64px; margin: 0 auto 14px; }
textarea.json-input { width: 100%; min-height: 140px; font-family: var(--mono); font-size: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); }

.mobile-menu-toggle {
  display: none; background: none; border: none; font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--ink); padding: 4px 8px 4px 0; margin-right: 4px;
}
@media (max-width: 820px) {
  .shell { position: relative; overflow: hidden; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 260px; max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 12px 0 28px rgba(11,27,51,0.25);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(11,27,51,0.45); z-index: 50;
  }
  .sidebar-backdrop.mobile-open { display: block; }
  .main { width: 100%; min-width: 0; }
  .mobile-menu-toggle { display: inline-flex; }
  .topbar-sidebar-ac-btn { display: none !important; }
  .topbar { padding: 8px 14px; }
  .topbar-title { font-size: 17px; }
  .content { padding: 16px; }
  /* v1220 — .content'in yatay padding'i bu breakpoint'te 16px'e
     duruyor; .tabs'in bleed miktari da (bkz. yukarida ana .tabs kurali)
     AYNI degere esitlenmeli, aksi halde mobilde DAHA BUYUK bir tasma
     olusuyordu (28-16=12px). */
  .tabs { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  /* v1268 — Playwright ile bu breakpoint'te AYRICA test edilirken
     KEŞFEDİLEN yeni bir kırılma (kullanıcı henüz bildirmedi, masaüstü
     düzeltmesi sırasında BULUNUP burada ÖNLENDİ): masaüstü için
     yukarıda tanımlanan ".tabs-scroll flex:1 + simge kümesi
     flex-shrink:0" ayrımı, dar (mobil) ekranlarda TERSİNE TEPİYOR —
     13 simgelik küme TEK BAŞINA (~380px) zaten dar ekranın (ör. 400px)
     çoğunu kaplıyor; flex-shrink:0 sayesinde HİÇ küçülmediği için nav
     sekmeleri (.tabs-scroll) 0 genişliğe sıkışıp TAMAMEN kayboluyor,
     simge kümesinin sonu (Geri butonu) ekranın DIŞINA taşıyor ve
     ARTIK HİÇBİR KAYDIRMA İLE ULAŞILAMIYOR (masaüstündeki asıl
     şikayetten farklı, ondan DAHA KÖTÜ bir durum). DÜZELTME: 820px
     altında ESKİ (v1262) davranışa dönülür — nav sekmeleri ve simge
     kümesi YENİDEN TEK bir kaydırma şeridinde birleşir (.tabs'in
     kendisi kayar; .tabs-scroll artık ayrı büyüyüp kaymaz, sadece
     doğal içerik genişliğinde kalır). Masaüstündeki asıl kullanıcı
     şikâyeti (1366x768/1280x800 gibi ORTA-GENİŞ ekranlar) bu
     breakpoint'in DIŞINDA olduğu için buradan etkilenmez. */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .tabs-scroll { flex: 0 0 auto; overflow-x: visible; }
  .board-columns { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }
  .form-row .field { min-width: 0; }
  table.table { display: block; overflow-x: auto; white-space: nowrap; }
  /* v1262 — tek-satır+kendi-içinde-kaydırma davranışı artık .tabs'in ana
     (mobil dışı) kuralında tanımlı (bkz. yukarıdaki ana .tabs kuralı,
     v1262 notu) — buradaki 16px bleed genişliği zaten yukarıda (v1220
     notunun hemen altındaki .tabs kuralında) tanımlı, burada TEKRAR
     edilmiyor (eski hali burada birebir aynı kuralı bir daha yazıyordu). */
  /* Kullanıcı bildirdi: "mobil HUB'lar ve sekmeler açık ve sayısı fazla
     olduğunda ekranda çalışma alanı kalmıyor." — KÖK SEBEP: Denetim
     HUB sekme çubuğu, Firma Kartı hızlı navigasyonu ve Mizan filtre
     çubuğu "flex-wrap:wrap" kullanıyordu — sekme sayısı arttıkça (bugün
     eklenen Hata Hile Denetimi modülleriyle iyice arttı) ÇOK SATIRA
     bölünüyor, hepsi "sticky" (ekrana yapışık) olduğu için mobilde
     içerik alanının BÜYÜK KISMINI kaplıyordu. Artık bu üçü de ana
     .tabs ile AYNI desene (tek satır + yatay kaydırma) geçiyor —
     inline stil önceliğini aşmak için !important gerekli.
  */
  #audit-hub-tab-bar, #company-card-hizli-nav, .mizan-filtre-bar {
    flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #audit-hub-tab-bar > *, #company-card-hizli-nav > *, .mizan-filtre-bar > * { flex-shrink: 0; white-space: nowrap; }
  #audit-hub-tab-bar::-webkit-scrollbar, #company-card-hizli-nav::-webkit-scrollbar, .mizan-filtre-bar::-webkit-scrollbar { height: 4px; }
  #audit-hub-tab-bar::-webkit-scrollbar-thumb, #company-card-hizli-nav::-webkit-scrollbar-thumb, .mizan-filtre-bar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
  /* v1293 — e-posta detay penceresinin (.modal-panel-eposta) 760px sabit
     genişliği SADECE bu mobil kırılma noktasında (uygulamanın HER YERDE
     kullandığı AYNI eşik) esner, taşmasın diye - yukarıdaki (masaüstü)
     kuralda artık max-width de sabit 760px (bkz. o kuraldaki v1293 notu). */
  .modal-panel-eposta { max-width: calc(100vw - 24px); }
}

/* ---------- Görev Detayı Modal ---------- */
/* Kullanıcı isteği (birebir): "Program içerisinde pencereler açılırken
   her zaman üste olsun. bazen altta kalıyor başlıklar pencerleri
   kesebiliyor." — KÖK SEBEP: sayfa içi sabit (sticky) başlıklar (.tabs,
   .toolbar vb.) en fazla z-index:15 kullanıyor, bu YETERLİYDİ; ama
   programda AYRICA "açık kalan" yüzen pencereler var — Hesap Makinesi
   (z-index:1999), Hızlı Görev katmanı (1997-1998), açılır menüler
   (1200) — HEPSİ standart .modal-backdrop'un ESKİ z-index'inden (100)
   YÜKSEKTİ. Yani Hesap Makinesi veya bir açılır menü açıkken normal bir
   pencere (Firma Kartı, Görev Detayı, Kullanıcı Düzenle vb.) açılırsa,
   o YENİ pencere bu eski/yüzen katmanların ARKASINDA kalıp kesiliyordu.
   Artık TÜM standart .modal-backdrop pencereleri bunların ÜSTÜNDE
   (2500) — ama uygulama-içi onay penceresinin (.confirm-backdrop,
   z-index:3000 — bir modalin İÇİNDEN açılan "silmek istediğinize emin
   misiniz?" gibi sorular) HÂLÂ ALTINDA, ki bir modal içinden açılan
   onay sorusu her zaman en üstte kalsın.
*/
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(11,27,51,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 2500; padding: 20px;
}
.modal-panel {
  background: var(--card); border-radius: var(--radius); max-width: 580px; width: 100%;
  max-height: 88vh; box-shadow: 0 20px 60px rgba(11,27,51,0.3);
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
/* Firma Kartı gibi çok tablolu/geniş içerikli modallar için — dar 580px
   sınırı, Taşıt/Huzur Hakkı/İlişkili Taraf tablolarının taşıp yatay
   kaydırma çubuğu gerektirmesine sebep oluyordu (kullanıcı geri bildirimi). */
.modal-panel-wide { max-width: 920px; }
.modal-body { overflow-x: hidden; }
/* v1284 - Kullanıcı isteği (birebir): "eposta ekranı genişliği sabit olsun
   ve zarif ve okunabilir renk ve şekilsel bir tasarım olsun, ekler yukarıda
   olsun ve tıklanınca açılsın". Gelen E-posta detay penceresi için: normal
   .modal-panel-wide bir ÜST SINIR tanımlar (içerik izin verirse penceresi
   daralabilir) - bu yüzden kısa bir e-posta ile uzun/HTML-ağırlıklı bir
   e-posta arasında pencere genişliği FARKLI görünebiliyordu. Bu yeni sınıf
   sabit bir genişlik verir.
   v1293 DÜZELTME - Kullanıcı ısrarla ve tekrar tekrar bildirdi (birebir):
   "gelen eposta penceri hala sabit değil" / "sabit genişlikte değil" /
   "ve yine sabit genişlik değil" / "yine takıldın gibi sanki geniş yükeseklik
   herşeyi sabit olamaz ekran aynı değiş". KÖK SEBEP BULUNDU: yukarıdaki eski
   satırdaki `max-width: calc(100vw - 40px)` her zaman aktifti - yani pencere
   820px'ten (uygulamanın KENDİ mobil kırılma noktası, bkz. aşağıdaki
   @media (max-width: 820px) bloğu) GENİŞ olsa bile, pencere TAM 800px'in
   altına her indiğinde (ör. tarayıcı tam ekran değilken, yakınlaştırma
   %100'ün üzerindeyken ya da pencere başka bir uygulamayla yan yana
   kullanılırken) kutu 760px'in ALTINA gerçekten küçülüyordu - kullanıcının
   günlük kullanımında bu durum yaygın olduğu için genişlik "sabit değilmiş"
   gibi görünüyordu (test ortamındaki geniş/sabit tarayıcı pencerelerinde bu
   hiç fark edilmemişti). DÜZELTME: masaüstü modunda (>820px, uygulamanın
   HER YERDE kullandığı AYNI eşik) artık max-width de SABİT 760px - kutu bu
   modda ASLA küçülmez. Sadece uygulamanın zaten mobil görünüme geçtiği
   (<=820px) durumda, ekran taşmasın diye viewport'a göre daralır (aşağıdaki
   @media bloğuna taşındı) - yani "esneklik" SADECE gerçek mobil/çok dar
   pencerede, uygulamanın geri kalanıyla AYNI kuralla devam eder. */
.modal-panel-eposta { width: 760px; max-width: 760px; }
/* v1322 - Kullanıcı isteği (birebir): "epostalarda açılan eposta pencersinin
   genişlik ve yükseliği sabit olsa eposta uzunluğuna göre değişmese". Yükseklik
   de artık SABİT: pencere her e-postada aynı boyda açılır, uzun içerik
   pencerenin içinde (modal-body) kaydırılır; kısa e-postada pencere küçülmez. */
.modal-panel-eposta { height: min(86vh, 860px); max-height: min(86vh, 860px); }
.modal-panel-eposta .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* E-posta gövdesi (özellikle body_html - gönderenin kendi biçimlendirdiği,
   bazen geniş tablo/görsel içerebilen HTML) pencerenin taşmasına sebep
   olmasın diye kendi içinde yatay kaydırılabilir bir kutuya alınır; içindeki
   görsel/tablo elemanları da kutunun genişliğini aşamaz. */
.eposta-govde-kutusu { max-width: 100%; overflow-x: auto; }
.eposta-govde-kutusu img { max-width: 100%; height: auto; }
.eposta-govde-kutusu table { max-width: 100%; }
/* Ekler paneli - native <details>/<summary> (programda zaten yaygın kullanılan
   aç/kapa deseni), sadece tarayıcının varsayılan üçgen okunu gizleyip kendi
   ok ikonumuzu (aç/kapa durumuna göre döner) koyuyoruz. */
.eposta-ek-details summary { list-style: none; cursor: pointer; }
.eposta-ek-details summary::-webkit-details-marker { display: none; }
.eposta-ek-details .ek-ok { display: inline-block; transition: transform 0.15s; }
.eposta-ek-details[open] .ek-ok { transform: rotate(180deg); }
/* Firma Kartı akordiyon başlıkları — tıklanabilir, aç/kapa oku ile. */
.accordion-baslik { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.accordion-baslik .accordion-ok { display: inline-block; width: 12px; font-size: 11px; transition: transform 0.15s; }
.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 0; flex-shrink: 0;
}
.modal-body { overflow-y: auto; padding: 0 24px 20px; flex: 1; }
.modal-footer {
  flex-shrink: 0; padding: 14px 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; background: var(--card);
}
.modal-close { cursor: pointer; color: var(--muted); font-size: 22px; line-height: 1; background:none; border:none; }
.modal-close:hover { color: var(--ink); }
.checklist-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.checklist-item.done span { text-decoration: line-through; color: var(--muted); }

/* ---------- Görev Şablonu formu: gruplu bölümler ---------- */
.form-section {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 14px; background: var(--paper);
}
.form-section > .form-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700; margin-bottom: 10px;
}
.form-section .form-row:last-child { margin-bottom: 0; }

/* ---------- Uygulama içi onay penceresi (tarayıcı confirm() yerine) ---------- */
/* v1259 — Kullanıcı isteği (birebir) DEĞİL, testler sırasında KEŞFEDİLEN bir
   hata: Müşteri Kabul Testi panelindeki "Testi Onayla"/"Sil" gibi butonlar,
   yüksek özel z-index kullanan bazı modallerin (ör. Aday Müşteri Dosyası
   #aday-dosyasi-backdrop, z-index:9046) İÇİNDEN confirmDialog() çağırdığında,
   açılan onay penceresi bu z-index:3000 değeriyle o modalin ARKASINDA kalıp
   TIKLANAMAZ hale geliyordu — yukarıdaki yorumun ("onay sorusu her zaman en
   üstte kalsın") kodda GERÇEKLEŞMEDİĞİ, sadece standart .modal-backdrop
   (2500) için doğru olduğu görüldü (programda 9000-99999 arası özel z-index
   kullanan başka pencereler de var). Bu, SADECE bu sürümde eklenen ekranlara
   özgü değil, confirmDialog()'un HER çağrıldığı yerde (ör. Aday Dosyası
   "Kartı Sil") potansiyel olarak var olan, önceden fark edilmemiş bir
   hataydı — çözüm, .confirm-backdrop'u HER ZAMAN gerçekten en üstte
   kalacak şekilde yükseltmek (programdaki bilinen en yüksek özel z-index
   olan 99999'un dahi üzerine).
*/
.confirm-backdrop {
  position: fixed; inset: 0; background: rgba(11,27,51,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 999999; padding: 20px;
}
.confirm-panel {
  background: var(--card); border-radius: var(--radius); max-width: 420px; width: 100%;
  padding: 22px; box-shadow: 0 20px 60px rgba(11,27,51,0.3);
}
.confirm-panel p { margin: 0 0 18px; font-size: 14px; line-height: 1.5; }
.confirm-panel .confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- Takvim ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-grid.cal-header { margin-bottom: 6px; }
.cal-headcell { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; padding: 4px 0; }
.cal-cell {
  min-height: 84px; border: 1px solid var(--line); border-radius: 6px; padding: 6px;
  background: var(--card); cursor: pointer; overflow: hidden;
}
.cal-cell:hover { border-color: var(--accent); }
.cal-cell.cal-empty { background: transparent; border: none; cursor: default; }
.cal-cell.cal-today { border-color: var(--accent); background: var(--accent-tint); }
.cal-daynum { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.cal-task-chip {
  font-size: 10px; padding: 2px 5px; border-radius: 3px; margin-bottom: 2px;
  background: var(--paper-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-task-chip.done { text-decoration: line-through; color: var(--muted); }
.cal-task-chip.blocked { background: #fde3e3; }
.cal-more { font-size: 10px; color: var(--muted); }

/* ---------- Hesap Kodu/Adı Autocomplete Dropdown (Fiş girişi) ---------- */
.hesap-autocomplete-dropdown {
  display: none; position: absolute; top: 100%; left: 0; z-index: 1200;
  min-width: 220px; max-height: 220px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18); margin-top: 2px;
}
.hesap-autocomplete-dropdown.open { display: block; }
.hesap-autocomplete-item { padding: 5px 8px; font-size: 11px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hesap-autocomplete-item:hover, .hesap-autocomplete-item.active { background: var(--accent-tint); }
.hesap-autocomplete-item .kod { font-weight: 700; margin-right: 6px; }
.hesap-autocomplete-item .adi { color: var(--muted); }
.hesap-autocomplete-empty { padding: 6px 8px; font-size: 11px; color: var(--muted); }

/* ---------- Hesap Kodu Chip Kutusu (virgüllü hesap kodu alanları) ----------
   Kullanıcı isteği: "seçilen hesaplar tekrar tıklanınca eklenen hesaplar
   kaldırılabilsin." — wireVirgulluHesapAutocomplete tarafından, virgülle
   ayrılmış hesap kodu girilen HER alanın altına eklenir; her kod ayrı bir
   tıklanabilir (kaldırılabilir) etiket olarak görünür. */
.hesap-kodu-chip-kutusu { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.hesap-kodu-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 6px;
  border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line);
  white-space: nowrap; cursor: pointer;
}
.hesap-kodu-chip:hover { background: #FDECEC; border-color: var(--alert); color: var(--alert); }
.hesap-kodu-chip .x { opacity: 0.6; font-weight: 700; }
.hesap-kodu-chip:hover .x { opacity: 1; }

/* ---------- Sayı Girişi Oklarını Kaldır (kullanıcı geri bildirimi: "çok
   boğuyor") — tüm number input'larda tarayıcının varsayılan yukarı/aşağı
   spinner oklarını gizler, kazanılan alanı değer girişine bırakır. ---------- */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Kullanıcı isteği: "PDF olarak ve yazıcıdan döküm alınabilsin" — Bilanço/
   Gelir Tablosu ekranında "🖨️ Yazdır / PDF" butonu window.print()'i
   tetikler; tarayıcının "PDF olarak kaydet" seçeneği native PDF çıktısı
   sağlar. Bu kural, yazdırma sırasında gezinme/buton gibi ekrana özel
   öğeleri gizler, sadece tabloları temiz bir döküm halinde bırakır. */
/* v1256 — DÜZELTME (fark edilen, istenmeyen eski hata): yukarıdaki yorum
   bloğu daha önce KAPANMAMIŞTI ("*/" eksikti) — bu yüzden hemen altındaki
   ".no-print { }" ve ".print-only-baslik { display: none; }" kuralları,
   aşağıdaki İKİNCİ açıklama paragrafıyla birlikte YANLIŞLIKLA yorum
   metninin İÇİNDE kalıp hiç ÇALIŞMIYORDU — ".print-only-baslik" öğeleri
   (örn. Vergi Hesaplama Tablosu/Bilanço ekranlarındaki "... itibarıyla"
   başlık satırı) normal ekran görünümünde de (sadece yazdırırken değil)
   HER ZAMAN görünür kalıyordu. Bu iş üzerinde çalışılırken fark edildi,
   ayrıca düzeltildi — yorum artık doğru kapanıyor, iki kural da gerçekten
   uygulanıyor. */
.no-print { }
.print-only-baslik { display: none; }
/* Kullanıcı isteği: "Yazdır özelliği tüm rapor ve ekranlar temiz pdf
   dökümüne uygun ve sadece form ve yazılar kalsın ekran kalıntıları
   eklenmesin." — ÖNCEKİ kural SADECE Bilanço ekranı için çalışıyordu;
   diğer TÜM ekranlarda yazdırma BOMBOŞ sayfa veriyordu (body * hidden
   kuralı, sadece #finansal-tablo-print-alani'nı görünür yapıyordu).
   Artık GENEL bir yaklaşım kullanılır: gezinme/arayüz "çerçevesi" (sol
   menü, sekmeler, üst çubuk simgeleri, .no-print işaretli her şey)
   gizlenir, asıl İÇERİK (hangi ekranda olunursa olsun) olduğu gibi basılır. */
/* v1256 — Kullanıcı isteği (birebir): "Tüm fiş ve rapor hesaplama
   ekranlarında PDF word excel olarak döküm alma özelliği eklense ve
   mümkün oldukça A4 dik formatta puntolar satırlar 8 başlıklarda 9
   puntoyu geçmeyen bir sayfa ayarı olabilir geniş tablolarda A4 yatay
   formatına sığdırma özelliği olabilir" — AskUserQuestion netleştirmesi:
   önce PDF + Excel (Word hariç), önce bir pilot ekran grubuyla (Mizan/
   Muavin/Fiş Görüntüleme). PDF için YENİ bir sunucu tarafı PDF motoru
   EKLENMEDİ — yukarıdaki, ZATEN tüm ekranlarda çalışan genel @media
   print kuralı temel alınıp A4 sayfa boyutu + punto sınırları + sayfa
   kırılması kurallarıyla güçlendirildi; tarayıcının kendi "Yazdır → PDF
   olarak kaydet" akışı kullanılıyor (bkz. app-v554.js — yazdirBaslat()).
   A4 DİK varsayılan @page kuralı aşağıda TANIMLANIR; YATAYA geçiş ise
   (bir @page kuralı class ile koşullu ÇALIŞTIRILAMADIĞI için) yazdırma
   anında JS ile enjekte edilen ikinci bir <style> etiketiyle (aynı @page
   seçicisini SONRADAN, dolayısıyla KASKATTA ÜSTÜNE yazarak) sağlanır. */
@page {
  size: A4 portrait;
  margin: 12mm;
}
@media print {
  .sidebar, .sidebar-expand-btn, .sidebar-backdrop, .tabs, #tabs,
  .no-print, .modal-header .modal-close, .modal-footer,
  .toolbar button, button:not(.print-only-buton) { display: none !important; }
  html, body { background: #fff !important; }
  .shell, .content { display: block !important; height: auto !important; overflow: visible !important; }
  #tab-content { overflow: visible !important; height: auto !important; }
  .modal-backdrop { position: static !important; background: none !important; padding: 0 !important; }
  .modal-panel, .modal-panel-wide { position: static !important; max-width: 100% !important; max-height: none !important; overflow: visible !important; box-shadow: none !important; border: none !important; }
  .modal-body { overflow: visible !important; max-height: none !important; }
  .print-only-baslik { display: block !important; font-size: 14px !important; font-weight: 700; color: #000 !important; margin-bottom: 12px; }
  /* v1256 — kullanıcının istediği punto sınırı: satırlar en fazla 8pt,
     başlıklar en fazla 9pt. th kuralı, eşit özgüllükte SONRA geldiği
     için td/th ortak kuralın üzerine yazar (kaskat sırası). */
  .table td, .table th { font-size: 8pt !important; }
  .table th { font-size: 9pt !important; font-weight: 700 !important; }
  /* Bir satırın sayfa ortasında ikiye bölünmesini engeller, tablo
     başlığının HER sayfada tekrar etmesini sağlar — böylece çok satırlı
     bir mizan/muavin dökümü birden çok A4 sayfasına DÜZGÜN bölünür. */
  .table thead { display: table-header-group; }
  .table tr { page-break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
}
/* Bilanço/Gelir Tablosu ekranı KENDİ özel yazdırma alanını kullanır — bu
   alan dışındaki (ekranın üstündeki uyarı/buton şeritleri gibi) kısımlar
   yine .no-print ile ayrıca gizlenir; #finansal-tablo-print-alani'nın
   KENDİSİ artık yukarıdaki genel kuralla zaten normal şekilde basılır. */

/* Kullanıcı isteği: "Tutarlar her zaman sağa dayalı olmalı — sayı ve
   tutar aynı şey değil." — Bu kural, GERÇEK parasal tutar alanlarını
   (data-tutar-input ile işaretli, formatBinlik kullanan alanlar) sağa
   hizalar. Yıl, oran, adet gibi sayısal ama PARASAL OLMAYAN alanlar
   (type="number") buradan etkilenmez — istenen genişlik kadar geniş.
   Beyanname önizleme/KDV Kontrol gibi doğrudan type="number" kullanan
   ekranlarda tutar girişleri de aynı şekilde hedeflenir. */
[data-tutar-input],
input[data-preview-field],
input[data-kdv-hucre] {
  text-align: right;
}

/* Hücre Seçim Durum Çubuğu (Excel benzeri) — Mizan/Muavin sürükleyerek seçim */
table.table td.hucre-secili {
  background: rgba(59, 130, 246, 0.22) !important;
  outline: 1px solid rgba(59, 130, 246, 0.5);
  outline-offset: -1px;
}

/* Kullanıcı isteği: "Kullanıcı profilinde PC Dokunmatik Ekran: Evet /
   Hayır ekler misin? ... pc de .exe dosyasıyla veya web sitesinde
   açarken tuşları daha kolay ve ergonomik tuş yapısı ile Yatay ve Dikey
   kaydırma çubukları kaladırılacak. Böylece ergonomik hızlı erişilebilir
   yapı oluşacak." — Dokunmatik ekran modu: butonlar/tıklanabilir alanlar
   büyütülür, kaydırma çubukları (scrollbar) tamamen gizlenir (kaydırma
   işlevi KAYBOLMAZ — sadece görünmez, dokunarak/kaydırarak çalışır). */
body.dokunmatik-mod .btn,
body.dokunmatik-mod .link-btn,
body.dokunmatik-mod .select-inline,
body.dokunmatik-mod input[type="checkbox"],
body.dokunmatik-mod input[type="radio"] {
  min-height: 42px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 15px;
}
body.dokunmatik-mod input[type="checkbox"],
body.dokunmatik-mod input[type="radio"] {
  min-width: 22px;
  min-height: 22px;
  transform: scale(1.3);
}
body.dokunmatik-mod .phase-list li,
body.dokunmatik-mod .table td,
body.dokunmatik-mod .table th {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* Yatay ve Dikey kaydırma çubukları kaldırılır — kaydırma hâlâ çalışır
   (dokunma/tekerlek ile), sadece görsel çubuk gizlenir. */
body.dokunmatik-mod * {
  scrollbar-width: none; /* Firefox */
}
body.dokunmatik-mod *::-webkit-scrollbar {
  display: none; /* Chrome, Edge, Safari */
}

/* Kullanıcı isteği: "Program içerisinde tüm kaydet butonlarında kayıt
   işlemi tamamlandığında kaydedildiğine dair bilgi göstersin." — TÜM
   POST/PATCH/PUT kaydetme işlemleri için TEK, MERKEZİ bildirim (toast):
   bkz. public/js/api-v554.js (showSaveToast). Sağ altta belirir, ~2.2
   saniye sonra kendiliğinden kaybolur; kullanıcı işine devam edebilir. */
#save-toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.save-toast {
  background: var(--success);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.save-toast.save-toast-gorunur {
  opacity: 1;
  transform: translateY(0);
}

/* v1378 — Kullanıcı isteği: "Denetçi Kararındaki satırları aralarını daraltıp biraz
   daha minimalist bir pencere olabilir" — Mizan / Aylık Mizan "⚙️ İşlem ▾" menüsü. */
.dropdown-menu.karar-menu-kompakt { min-width: 176px; padding: 3px 0; border-radius: 8px; }
.karar-menu-kompakt .dropdown-item { padding: 4px 12px; font-size: 12px; line-height: 1.35; border-bottom: none; }
.karar-menu-kompakt .dropdown-item[data-ayrac-ust] { border-top: 1px solid var(--line); margin-top: 3px; padding-top: 6px; }

/* v1437 — Firma Kartı: bölüm başlıkları üstteki sekme çubuğuna yapışmasın; nefes alan, ergonomik düzen. */
#company-card-hizli-nav + .modal-body { padding-top: 18px; }
#company-card-hizli-nav + .modal-body > h4 { margin: 22px 0 12px; padding: 8px 12px; background: var(--paper-2); border-left: 3px solid var(--accent); border-radius: var(--radius); }
#company-card-hizli-nav + .modal-body > h4:first-child { margin-top: 2px; }
#company-card-hizli-nav + .modal-body > form, #company-card-hizli-nav + .modal-body > div { margin-bottom: 6px; }
#company-card-hizli-nav + .modal-body .form-row { gap: 14px; margin-bottom: 4px; }

/* v1438 — Mobil: menü (☰) açıldığında alt çubuk (Çıkış ⏻) menünün altında, görünür ve dokunulabilir.
   Menü kapalıyken içerik üstünde soluk/görünmez kalmasın diye gizlenir. 100dvh + güvenli alan ile tarayıcı alt çubuğu altında kalmaz. */
@media (max-width: 820px) {
  #sidebar-sabit-alt-cubuk { display: none !important; left: 12px !important; width: calc(min(260px, 82vw) - 24px) !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; z-index: 61 !important; }
  .shell:has(.sidebar.mobile-open) #sidebar-sabit-alt-cubuk { display: flex !important; }
  #sidebar-sabit-alt-cubuk #sidebar-expand-btn, #sidebar-sabit-alt-cubuk #sidebar-widen-btn { display: none !important; }
  #sidebar-sabit-alt-cubuk #logout-btn { flex: 1; justify-content: center; gap: 6px; min-height: 40px; font-size: 15px; font-weight: 600; color: #fff; background: var(--alert); border-radius: 8px; }
  #sidebar-sabit-alt-cubuk #logout-btn::after { content: " Çıkış Yap"; font-size: 14px; }
  .sidebar { height: 100vh; height: 100dvh; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
}

/* v1440 — Mobil pencereler (tüm .modal-backdrop pencereleri: ödeme, firma kartı, toplantı, İK…):
   tam ekran, opak, kendi katmanında; arkadaki sayfa kaymaz / üstüne binmez; çok sütunlu formlar tek sütun;
   geniş tablolar pencere içinde yatay kayar. Masaüstü değişmez. */
@media (max-width: 820px) {
  html:has(.modal-backdrop), body:has(.modal-backdrop) { overflow: hidden !important; overscroll-behavior: none; }
  body:has(.modal-backdrop) .content, body:has(.modal-backdrop) #tab-content { overflow: hidden !important; }
  .modal-backdrop { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; background: rgba(11,27,51,0.7) !important; isolation: isolate; transform: translateZ(0); }
  .modal-backdrop > .modal-panel { width: 100% !important; max-width: 100% !important; height: 100vh; height: 100dvh; max-height: 100vh !important; max-height: 100dvh !important; border-radius: 0 !important; box-shadow: none !important; background: var(--card) !important; }
  .modal-backdrop > .modal-panel > .modal-header { position: sticky; top: 0; z-index: 3; background: var(--card); padding: 12px 14px; border-bottom: 1px solid var(--line); gap: 8px; }
  .modal-backdrop > .modal-panel > .modal-header h3 { font-size: 15px !important; line-height: 1.3; }
  .modal-backdrop .modal-close { min-width: 40px; min-height: 40px; font-size: 26px; flex-shrink: 0; }
  .modal-backdrop > .modal-panel > .modal-body { flex: 1 1 auto; max-height: none !important; overflow-y: auto !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding: 12px 14px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
  .modal-backdrop .modal-body [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .modal-backdrop .modal-body .form-row { flex-direction: column; }
  .modal-backdrop .modal-body input, .modal-backdrop .modal-body select, .modal-backdrop .modal-body textarea { max-width: 100%; font-size: 16px; }
}
/* v1440 — Mobil İK: sekme düğmeleri tek satırda yatay kayar (ekranın yarısını kaplamasın); maaş üst satırı sıkı. */
@media (max-width: 820px) {
  .ik-sekme-bar { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .ik-sekme-bar::-webkit-scrollbar { display: none; }
  .ik-sekme-bar .btn { flex: 0 0 auto; white-space: nowrap; padding: 6px 10px; }
}

/* v1445 — Toplantı Oluştur: sıkı aralıklar; Oluştur şeridi pencerenin altına yapışık (küçük ekranda da görünür). */
.ytm-panel #yeni-toplanti-form { padding: 10px 18px 0 !important; }
.ytm-panel #yeni-toplanti-form .field { margin-top: 6px !important; margin-bottom: 0; }
.ytm-panel #yeni-toplanti-form label { margin-bottom: 2px; }
.ytm-panel #yeni-toplanti-form input:not([type=checkbox]):not([type=radio]), .ytm-panel #yeni-toplanti-form select { padding-top: 6px; padding-bottom: 6px; }
.ytm-panel #yeni-toplanti-katilimci-liste label[data-katilimci-satir] { padding: 2px 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ytm-panel .modal-header { padding-top: 10px; padding-bottom: 8px; }
.ytm-panel .ytm-alt { position: sticky; bottom: 0; background: var(--card); z-index: 2; }

/* v1453b — görüşme küçük pencere (ekran paylaşımında ayna döngüsünü önler, DAS kullanılabilir kalır) */
#meeting-modal-backdrop.meeting-mini{background:transparent !important;pointer-events:none;backdrop-filter:none !important;}
#meeting-modal-backdrop.meeting-mini .meeting-panel{position:fixed !important;right:16px;bottom:16px;left:auto;top:auto;width:340px !important;height:240px !important;max-height:none;pointer-events:auto;box-shadow:0 10px 30px rgba(0,0,0,.35);border-radius:10px;transform:none !important;margin:0;}
#meeting-modal-backdrop.meeting-mini .meeting-panel .modal-header{padding:4px 10px !important;}
#meeting-modal-backdrop.meeting-mini .meeting-panel .modal-header h3{font-size:12px !important;}
#meeting-modal-backdrop.meeting-mini #meeting-modal-bitir-herkes-btn{display:none;}
@media (max-width:700px){#meeting-modal-backdrop.meeting-mini .meeting-panel{width:calc(100vw - 24px) !important;right:12px;height:200px !important;}}

/* v1461 — gelen e-posta okunmamış rozet / nokta */
.gelen-okunmamis-rozet{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#D9534F;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.gelen-okunmamis-nokta{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2F6FD6;margin-right:6px;vertical-align:middle;}