/* =============================================================================
   SERVİS YÖNETİMİ — TEK TEMA DOSYASI
   -----------------------------------------------------------------------------
   Bu dosya ürünün TEK stil kaynağıdır. Sayfaya özel <style> bloğu YAZILMAZ:
   bir kalıp burada tanımlanır, her ekranda aynen kullanılır. (Kabul edilen
   tasarım yeni ekranda birebir kullanılır, yenisi uydurulmaz.)

   Görsel desen İSKAY ERP yönetim panelinden süzülerek alınmıştır; ERP'nin
   e-Dönüşüm / fatura / stok / panoya özgü katmanları ve ölü CSS dosyaları
   BURAYA TAŞINMAMIŞTIR.

   ERP'de ölçülen DÖRT KUSUR burada baştan düzeltilmiştir:
     (a) Bootstrap mavisi köprüsü liste bazlıydı, her yeni bileşende unutuluyordu.
         Artık TEK KAYNAK: --marka + --marka-rgb. Bootstrap'in parlak mavisi bu
         dosyada HİÇ GEÇMEZ; SVG ok/ikon gömülü renkleri de ezilir.
     (b) Koyu temada .card rengi kabukla tutmuyordu. Bootstrap'in kendi gövde /
         kenar / ikincil zemin değişkenleri artık bizim paletimize bağlıdır.
     (c) body'de overflow-x: hidden YOK — `hidden` kök kapsayıcıda bir kaydırma
         alanı doğurur, yapışkan (sticky) başlığı ve sayfa kaydırmasını bozar.
         Yerine `clip` kullanılır.
     (d) Satır içi punto YAZILMAZ. Her font-size tipografi merdiveninden (--ty-*)
         gelir; merdiven yetmiyorsa kademe eklenir, tek seferlik rakam yazılmaz.

   KURALLAR
     · Ölçeklenen her uzunluk rem'dir. px yalnız üç yerde geçer: kök yazı tabanı,
       dokunma hedefi alt sınırları (max(2rem, 30px) gibi) ve saç teli kenarlıklar.
     · Sabit hex renk yalnız TEMA/ACCENT TANIM BLOKLARINDA bulunur; başka her yerde
       renk değişkenden gelir.
     · Yazı tipi TEK aile: Inter.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


/* =============================================================================
   1. KÖK DEĞİŞKENLER — AÇIK TEMA
   Neden burada: renk, ölçü ve yazı ailesi tek bir yerden okunur. Aşağıdaki hiçbir
   bölüm kendi rengini uydurmaz; hepsi bu bloktaki adları kullanır.
   Palet: nötr slate (gri-mavi) + marka teal. Nötrler kurumsal panelde okunurluk
   için seçildi; marka tonu kullanıcı tarafından değiştirilebilir (bkz. bölüm 7).
   ============================================================================= */
:root {
    color-scheme: light;

    /* --- Yazı ailesi: ürünün tamamında tek aile. Helvetica/Segoe karışımı YOK. --- */
    --yazi-ailesi: 'Inter', system-ui, -apple-system, 'Noto Sans', sans-serif;
    --yazi-ailesi-sayi: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

    /* --- Nötr zeminler ve metin (slate) --- */
    --bg-body: #f1f5f9;
    --bg-sidebar: #ffffff;
    --bg-header: #ffffff;
    --card-bg: #ffffff;
    --hover-bg: #f1f5f9;
    --text-main: #0f172a;
    --text-muted: #475569;
    --border-color: #e2e8f0;

    /* --- Marka accent (varsayılan: teal) ---
       🔴 --marka, stil kurtarma betiğinin aradığı SABİT değişkendir: betik bu adın
          hesaplanmış değerine bakarak temanın gerçekten yüklenip yüklenmediğini
          ölçer. Adı DEĞİŞMEZ ve :root'ta daima TANIMLI kalır.
       🔴 --marka-rgb, Bootstrap köprüsünün tek kaynağıdır (bölüm 8). Her accent
          tonu kendi rgb üçlüsünü yazmak ZORUNDADIR; CSS hex'ten rgb türetemez. */
    /* 🔴 VARSAYILAN TON EMERALD YEŞİL (01.10.2026, kullanıcı: "renk yeşil").
       Önceki değer teal (#0d9488) idi — yeşile çalan ama mavi tarafı ağır bir tondu.
       Accent seçenekleri (bölüm 7) DURUYOR: kullanıcı görünüm menüsünden eskisine
       dönebilir; değişen yalnız VARSAYILAN. */
    --marka: #059669;
    --marka-hover: #047857;
    --marka-soft: #ecfdf5;
    --marka-contrast: #ffffff;
    --marka-rgb: 5, 150, 105;

    /* Teknolojik izgara dokusu (bölüm 41). Açık temada neredeyse görünmez;
       amacı zemine derinlik vermek, desen çizmek değil. */
    --izgara-cizgi: rgba(15, 23, 42, .035);

    /* --- Gölgeler --- */
    --golge: 0 4px 6px -1px rgba(15, 23, 42, .05), 0 2px 4px -1px rgba(15, 23, 42, .03);
    --golge-orta: 0 2px 6px rgba(15, 23, 42, .08), 0 4px 14px rgba(15, 23, 42, .06);
    --golge-yuksek: 0 8px 28px rgba(15, 23, 42, .16);

    /* --- Köşe yarıçapları (rem: yazı ölçeğiyle birlikte büyür) --- */
    --kose-mikro: 0.25rem;
    --kose-kucuk: 0.375rem;
    --kose: 0.5rem;
    --kose-buyuk: 0.75rem;

    /* --- Geçiş süreleri: tek yerden, böylece hareket ritmi ekranlar arasında aynı --- */
    --gecis-hizli: .12s ease;
    --gecis: .18s ease;
    --gecis-yavas: .3s cubic-bezier(.4, 0, .2, 1);

    /* --- Kesinti şeridi renkleri (bölüm 25) --- */
    --serit-zemin-1: #0f2f3a;
    --serit-zemin-2: #14505c;
    --serit-metin: #e8fbff;
    --serit-vurgu: #41d3c0;

    /* --- Sayfa üstü uyarı bantları (bölüm 22) --- */
    --bant-kirmizi: #b91c1c;
    --bant-turuncu: #b45309;
    --bant-metin: #ffffff;
}


/* =============================================================================
   2. YAZI ÖLÇEĞİ — KULLANICI AYARI
   Neden burada: "sayfanın tamamının yazısı kullanıcıya göre büyüyüp küçülebilmeli"
   isteği tek bir çarpanla karşılanır. Kök yazı boyutu çarpıldığı için rem kullanan
   HER ŞEY (Bootstrap dâhil) birlikte ölçeklenir; ayrı ayrı font-size yazmaya gerek
   kalmaz. 🔴 Bu yüzden panelde ölçeklenmesi gereken uzunluklar px DEĞİL rem yazılır.
   Öznitelik <html> üzerine yazılır: <html data-yazi="buyuk">
   ============================================================================= */
:root { --yazi-olcegi: 1; }

/* px burada ZORUNLU: ölçeğin çarpacağı taban budur. Tek px kullanımı. */
html { font-size: calc(16px * var(--yazi-olcegi)); }

:root[data-yazi="kucuk"]    { --yazi-olcegi: 0.875; }
:root[data-yazi="normal"]   { --yazi-olcegi: 1; }
:root[data-yazi="buyuk"]    { --yazi-olcegi: 1.125; }
:root[data-yazi="cokBuyuk"] { --yazi-olcegi: 1.25; }
:root[data-yazi="devasa"]   { --yazi-olcegi: 1.4; }


/* =============================================================================
   3. TİPOGRAFİ MERDİVENİ
   Neden burada: ERP'de aylar içinde "şu ekran sığmıyor, küçült" turlarıyla 85 ayrı
   font-size yazılmış, 61'inde line-height yokmuş; göz "hepsi farklı ama hiçbiri
   oturmamış" diye okuyordu. Burada 7 kademeli TEK merdiven var, ardışık oran ~1,15
   ve her kademenin KENDİ satır yüksekliği var.

   🔴 KULLANIM: yeni bir yazı boyutu gerektiğinde ARA DEĞER UYDURMA. En yakın kademe
      seçilir:  font-size: var(--ty-kucuk); line-height: var(--lh-kucuk);
      Merdiven yetmiyorsa buraya kademe EKLENİR, ekrana tek seferlik rakam yazılmaz.
   🔴 rem ŞART: kök yazı boyutu calc(16px * --yazi-olcegi) olduğundan merdivenin
      tamamı kullanıcı ayarıyla ORANINI KORUYARAK büyür/küçülür.
   ============================================================================= */
:root {
    /* Piksel karşılıkları ayar "normal" (ölçek 1) içindir. */
    --ty-mikro:  0.60rem;   /*  9,6 px — rozet, dipnot, sütun başlığı            */
    --ty-kucuk:  0.70rem;   /* 11,2 px — liste satırı, süzgeç kutuları           */
    --ty-govde:  0.80rem;   /* 12,8 px — form alanları, normal metin, sekme      */
    --ty-orta:   0.92rem;   /* 14,7 px — alan değerleri, kart başlığı, düğme     */
    --ty-baslik: 1.05rem;   /* 16,8 px — sayfa başlığı, bölüm başlığı            */
    --ty-buyuk:  1.20rem;   /* 19,2 px — vurgulu sayı, ana başlık                */
    --ty-dev:    1.40rem;   /* 22,4 px — karşılama başlığı, tek tük büyük rakam  */

    /* Satır yüksekliği: küçük punto daha sıkı, büyük punto daha ferah okunur. */
    --lh-mikro:  1.3;
    --lh-kucuk:  1.35;
    --lh-govde:  1.45;
    --lh-orta:   1.4;
    --lh-baslik: 1.3;
    --lh-buyuk:  1.25;
    --lh-dev:    1.2;
}


/* =============================================================================
   4. DURUM RENKLERİ
   Neden burada: servis kaydının hâli (açık / beklemede / kapandı) ekranın her
   yerinde AYNI renkle anlatılmalı. ERP'de bu değişkenler kullanılıyor ama hiç
   tanımlı değildi; hep yedek değere düşüyor ve koyu temada uyum sağlamıyordu.
   ============================================================================= */
:root {
    --ok: #16a34a;
    --ok-bg: #eafaef;
    --warn: #b45309;
    --warn-bg: #fdf4e3;
    --err: #dc2626;
    --err-bg: #fdeaea;
    --bilgi: #0f5f73;
    --bilgi-bg: #e4f2f6;
}


/* =============================================================================
   5. SOL MENÜ ÖLÇÜLERİ VE MENÜ YOĞUNLUĞU
   Neden burada: menü genişliği ve satır sıklığı iki ayrı ayardır ve ikisi de
   iskeletin birçok kuralını besler; tek yerde durmaları şart.
   🔴 TAVAN: kök yazı "devasa"da 22,4 px olduğu için 17.5rem = 392 px ediyor;
      1280 px'lik bir dizüstünde ekranın üçte biri menüye giderdi. Genişlik 288 px'i
      geçmez — menü yazısı ölçekle büyümeye devam eder, yalnız kutusu şişmez.
      (Buradaki px bilinçli bir ÜST SINIRDIR, ölçeklenen bir uzunluk değildir.)
   ============================================================================= */
:root {
    --menu-genislik: min(17.5rem, 288px);
    --menu-dar-genislik: 4.5rem;
    --menu-satir-y: 0.34rem;    /* satır dikey dolgusu — menü yoğunluğu bunu değiştirir */
    --menu-yazi: var(--ty-govde);
    --menu-alt-yazi: var(--ty-kucuk);
    --ust-bar-yukseklik: 3.4rem;
    --menu-header-yukseklik: 3.9rem;
}

/* Menü yoğunluğu yalnız satır dolgusunu değiştirir, yazıya DOKUNMAZ. */
:root[data-menu="sik"]    { --menu-satir-y: 0.2rem; }
:root[data-menu="normal"] { --menu-satir-y: 0.34rem; }
:root[data-menu="ferah"]  { --menu-satir-y: 0.6rem; }


/* =============================================================================
   6. Z-İNDEKS KATMANLARI
   Neden burada: katman kavgası, sayısı kuralın içine gömüldüğünde çıkar. Sıra tek
   yerde yazılıdır; yeni bir katman gerekirse buraya eklenir.
   Bootstrap'in kendi katmanları: modal-backdrop 1050, modal 1055, tooltip 1080.
   Sol menü 1050'dedir; modal yine onun ÜSTÜNE biner — istenen davranış budur.
   ============================================================================= */
:root {
    --z-icerik: 1;
    --z-yapisal: 10;     /* tablo başlığı, sayfa içi yapışkan şeritler */
    --z-ortu: 1040;      /* mobil karartma perdesi                     */
    --z-ust-bar: 1049;
    --z-sidebar: 1050;
    --z-acilir: 1100;    /* üst çubuktaki açılır menüler                */
    --z-serit: 9999;     /* kesinti şeridi — her şeyin üstünde          */
}


/* =============================================================================
   7. KOYU TEMA
   Neden burada: koyu temada yalnız renkler değişir; hiçbir ölçü, hiçbir yerleşim
   kuralı tekrar yazılmaz. Böylece iki tema arasında yapı farkı oluşamaz.
   ============================================================================= */
:root[data-bs-theme="dark"] {
    color-scheme: dark;

    --bg-body: #0f172a;
    --bg-sidebar: #1e293b;
    --bg-header: #1e293b;
    --card-bg: #1e293b;
    --hover-bg: #334155;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: #334155;

    --marka: #34d399;
    --marka-hover: #6ee7b7;
    --marka-soft: #064e3b;
    --marka-contrast: #052e23;
    --marka-rgb: 52, 211, 153;

    /* Koyu zeminde izgara dokusu İKI KADEME BELİRGİN: siyaha yakın zeminde
       aynı opaklık hiç görünmez. */
    --izgara-cizgi: rgba(148, 163, 184, .055);

    --golge: 0 4px 10px -2px rgba(0, 0, 0, .45);
    --golge-orta: 0 6px 18px rgba(0, 0, 0, .5);
    --golge-yuksek: 0 10px 32px rgba(0, 0, 0, .6);

    /* Durum renkleri koyu zeminde açık tona çekilir; zeminler saydam kalır ki
       kartın kendi rengi altlarından okunsun. */
    --ok: #34d07f;
    --ok-bg: rgba(52, 208, 127, .12);
    --warn: #f0b04a;
    --warn-bg: rgba(240, 176, 74, .12);
    --err: #f87171;
    --err-bg: rgba(248, 113, 113, .12);
    --bilgi: #5fc7dd;
    --bilgi-bg: rgba(95, 199, 221, .12);

    --serit-zemin-1: #0b2028;
    --serit-zemin-2: #10404b;
}


/* =============================================================================
   8. MARKA ACCENT TONLARI — KULLANICI SEÇER  (<html data-accent="...">)
   Neden burada: kurumsal panelde marka rengi müşteriye göre değişir. Her ton
   açık ve koyu için AYRI ayarlanmıştır; kontrast oranı ikisinde de güvenlidir.

   🔴 HER TON --marka-rgb YAZMAK ZORUNDADIR. Bootstrap köprüsü (bölüm 9) yalnız
      bu iki değişkeni okur; tona özel --bs-* satırı YAZILMAZ. ERP'de köprü liste
      bazlıydı ve her yeni ton/bileşende bir satır unutuluyordu.
   ============================================================================= */
:root[data-accent="indigo"]  { --marka:#4f46e5; --marka-hover:#4338ca; --marka-soft:#eef2ff; --marka-contrast:#ffffff; --marka-rgb:79,70,229; }
:root[data-accent="teal"]    { --marka:#0d9488; --marka-hover:#0f766e; --marka-soft:#f0fdfa; --marka-contrast:#ffffff; --marka-rgb:13,148,136; }
:root[data-accent="emerald"] { --marka:#059669; --marka-hover:#047857; --marka-soft:#ecfdf5; --marka-contrast:#ffffff; --marka-rgb:5,150,105; }
:root[data-accent="royal"]   { --marka:#1e40af; --marka-hover:#1e3a8a; --marka-soft:#eff6ff; --marka-contrast:#ffffff; --marka-rgb:30,64,175; }
:root[data-accent="slate"]   { --marka:#475569; --marka-hover:#334155; --marka-soft:#f1f5f9; --marka-contrast:#ffffff; --marka-rgb:71,85,105; }
:root[data-accent="rose"]    { --marka:#e11d48; --marka-hover:#be123c; --marka-soft:#fff1f2; --marka-contrast:#ffffff; --marka-rgb:225,29,72; }
:root[data-accent="amber"]   { --marka:#b45309; --marka-hover:#92400e; --marka-soft:#fffbeb; --marka-contrast:#ffffff; --marka-rgb:180,83,9; }

:root[data-bs-theme="dark"][data-accent="indigo"]  { --marka:#818cf8; --marka-hover:#a5b4fc; --marka-soft:#312e81; --marka-contrast:#0f172a; --marka-rgb:129,140,248; }
:root[data-bs-theme="dark"][data-accent="teal"]    { --marka:#2dd4bf; --marka-hover:#5eead4; --marka-soft:#134e4a; --marka-contrast:#0f172a; --marka-rgb:45,212,191; }
:root[data-bs-theme="dark"][data-accent="emerald"] { --marka:#34d399; --marka-hover:#6ee7b7; --marka-soft:#064e3b; --marka-contrast:#0f172a; --marka-rgb:52,211,153; }
:root[data-bs-theme="dark"][data-accent="royal"]   { --marka:#60a5fa; --marka-hover:#93c5fd; --marka-soft:#1e3a8a; --marka-contrast:#0f172a; --marka-rgb:96,165,250; }
:root[data-bs-theme="dark"][data-accent="slate"]   { --marka:#94a3b8; --marka-hover:#cbd5e1; --marka-soft:#334155; --marka-contrast:#0f172a; --marka-rgb:148,163,184; }
:root[data-bs-theme="dark"][data-accent="rose"]    { --marka:#fb7185; --marka-hover:#fda4af; --marka-soft:#881337; --marka-contrast:#0f172a; --marka-rgb:251,113,133; }
:root[data-bs-theme="dark"][data-accent="amber"]   { --marka:#fbbf24; --marka-hover:#fcd34d; --marka-soft:#78350f; --marka-contrast:#0f172a; --marka-rgb:251,191,36; }


/* =============================================================================
   9. BOOTSTRAP KÖPRÜSÜ — TEK KAYNAK           (ERP KUSURU (a) — BURADA DÜZELTİLDİ)
   -----------------------------------------------------------------------------
   Neden burada: Bootstrap'in "primary" kavramı kendi parlak mavisine çıpalıdır ve
   o mavi düzinelerce değişkene dağılmıştır. ERP'de bunların yalnız bir kısmı
   markaya bağlanmış, gerisi mavi kalmıştı; her yeni bileşende mavi geri geliyordu.

   ÇÖZÜM: köprü TEK YERDE ve TEK KAYNAKTAN kurulur. Aşağıdaki hiçbir satır bir
   tonun adını geçirmez; hepsi --marka / --marka-rgb okur. Yeni bir accent tonu
   eklendiğinde buraya DOKUNULMAZ.

   🔴 Kural: Bootstrap'in iki parlak mavi kodu bu dosyada HİÇ GEÇMEZ — denetim bir
      metin aramasıyla yapılır, o yüzden yorum satırlarında bile yazılmazlar.
      Gömülü SVG'lerdeki mavi de aşağıda ayrıca ezilir (bkz. bölüm 10).
   ============================================================================= */
:root {
    --bs-blue: var(--marka);
    --bs-primary: var(--marka);
    --bs-primary-rgb: var(--marka-rgb);
    --bs-primary-text-emphasis: var(--marka-hover);
    --bs-primary-bg-subtle: var(--marka-soft);
    --bs-primary-border-subtle: color-mix(in srgb, var(--marka) 45%, var(--card-bg));

    --bs-link-color: var(--marka);
    --bs-link-color-rgb: var(--marka-rgb);
    --bs-link-hover-color: var(--marka-hover);
    --bs-link-hover-color-rgb: var(--marka-rgb);

    --bs-focus-ring-color: rgba(var(--marka-rgb), .25);

    /* Gövde / kenar / ikincil zemin — açık temada da bizim paletimize bağlanır ki
       iki tema arasında yapı farkı kalmasın (bkz. bölüm 11, kusur (b)). */
    --bs-body-bg: var(--bg-body);
    --bs-body-color: var(--text-main);
    --bs-body-font-family: var(--yazi-ailesi);
    --bs-border-color: var(--border-color);
    --bs-secondary-bg: var(--card-bg);
    --bs-tertiary-bg: var(--hover-bg);
    --bs-emphasis-color: var(--text-main);
    --bs-secondary-color: var(--text-muted);
}

/* --- Dolu / çerçeveli düğmeler --- */
.btn-primary {
    --bs-btn-bg: var(--marka);
    --bs-btn-border-color: var(--marka);
    --bs-btn-hover-bg: var(--marka-hover);
    --bs-btn-hover-border-color: var(--marka-hover);
    --bs-btn-active-bg: var(--marka-hover);
    --bs-btn-active-border-color: var(--marka-hover);
    --bs-btn-disabled-bg: var(--marka);
    --bs-btn-disabled-border-color: var(--marka);
    --bs-btn-color: var(--marka-contrast);
    --bs-btn-hover-color: var(--marka-contrast);
    --bs-btn-active-color: var(--marka-contrast);
    --bs-btn-disabled-color: var(--marka-contrast);
    --bs-btn-focus-shadow-rgb: var(--marka-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--marka);
    --bs-btn-border-color: var(--marka);
    --bs-btn-hover-bg: var(--marka);
    --bs-btn-hover-border-color: var(--marka);
    --bs-btn-hover-color: var(--marka-contrast);
    --bs-btn-active-bg: var(--marka);
    --bs-btn-active-border-color: var(--marka);
    --bs-btn-active-color: var(--marka-contrast);
    --bs-btn-disabled-color: var(--marka);
    /* 26.10.2026 ölçüldü: devre dışı düğmenin (sayfalamadaki "Önceki") kenarı köprüye bağlı değildi ve Bootstrap'in
       kendi mavisine düşüyordu. */
    --bs-btn-disabled-border-color: var(--marka);
    --bs-btn-focus-shadow-rgb: var(--marka-rgb);
}

.btn-link {
    --bs-btn-color: var(--marka);
    --bs-btn-hover-color: var(--marka-hover);
    --bs-btn-active-color: var(--marka-hover);
}

/* --- Sekmeler, sayfalama, onay kutusu, ilerleme --- */
/* Aktif sekme: koyu temada marka rengi AÇIK tonda olduğu için yazı beyaz kalırsa
   okunmuyordu; yazı rengi tonun kendi kontrast değişkenine bağlanır. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--marka);
    --bs-nav-pills-link-active-color: var(--marka-contrast);
}

.nav-pills .nav-link { color: var(--text-main); }
.nav-pills .nav-link.active,
.nav-pills .nav-link.active * { color: var(--marka-contrast) !important; }

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--marka);
    --bs-nav-tabs-link-active-bg: var(--card-bg);
    --bs-nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--card-bg);
    --bs-nav-tabs-border-color: var(--border-color);
}

.page-item.active .page-link {
    background-color: var(--marka);
    border-color: var(--marka);
    color: var(--marka-contrast);
}

.page-link { color: var(--marka); background-color: var(--card-bg); border-color: var(--border-color); }
.page-link:hover { color: var(--marka-hover); background-color: var(--hover-bg); }

.form-check-input:checked { background-color: var(--marka); border-color: var(--marka); }
.form-check-input:focus { border-color: var(--marka); box-shadow: 0 0 0 .2rem rgba(var(--marka-rgb), .2); }
.form-range::-webkit-slider-thumb { background-color: var(--marka); }
.form-range::-moz-range-thumb { background-color: var(--marka); }

.progress { --bs-progress-bar-bg: var(--marka); --bs-progress-bg: var(--hover-bg); }
.spinner-border, .spinner-grow { color: var(--marka); }

.form-control:focus,
.form-select:focus { border-color: var(--marka); box-shadow: 0 0 0 .2rem rgba(var(--marka-rgb), .2); }

/* Bootstrap'in kendi odak halkası yardımcı sınıfı */
.focus-ring:focus { box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }

/* --- Metin / zemin / kenar yardımcıları --- */
.text-primary { color: var(--marka) !important; }
.bg-primary { background-color: var(--marka) !important; color: var(--marka-contrast) !important; }
.border-primary { border-color: var(--marka) !important; }
.link-primary { color: var(--marka) !important; }
.link-primary:hover { color: var(--marka-hover) !important; }
.text-bg-primary { background-color: var(--marka) !important; color: var(--marka-contrast) !important; }
.badge.bg-primary { background-color: var(--marka) !important; color: var(--marka-contrast) !important; }
.list-group-item.active { background-color: var(--marka); border-color: var(--marka); color: var(--marka-contrast); }
.dropdown-item.active,
.dropdown-item:active { background-color: var(--marka); color: var(--marka-contrast); }


/* =============================================================================
   10. GÖMÜLÜ SVG İKONLARDAKİ MAVİ            (ERP KUSURU (a) — İKİNCİ YARISI)
   -----------------------------------------------------------------------------
   Neden burada: Bootstrap'in akordeon oku ve açılır liste oku bir CSS değişkeni
   DEĞİL, içine rengi GÖMÜLMÜŞ bir SVG data-URI'sidir. Renk değişkenlerini markaya
   bağlamak bu iki oku maviden kurtarmaz — ERP'de tam olarak bu yaşandı: her yer
   teal olmuşken açık akordeon başlığının oku mavi kalıyordu.

   ÇÖZÜM:
     · Akordeon oku: SVG artık RENKSİZ çizilir ve MASKE olarak kullanılır; rengi
       `background-color: currentColor` verir. Böylece ok, başlığın yazı rengini
       (kapalıyken nötr, açıkken marka) otomatik izler — ayrıca boyamak gerekmez.
     · Açılır liste (.form-select) oku: eleman kendi zeminini çizdiği için maske
       uygun değil; ok, temaya göre tanımlanmış NÖTR bir data-URI ile değiştirilir.
   ============================================================================= */
:root {
    /* Renksiz ok — yalnız maske olarak kullanılır, içindeki dolgu rengi önemsizdir. */
    --ok-ikon-maske: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 11.4 1.6 5 3 3.6l5 5 5-5L14.4 5z'/%3e%3c/svg%3e");
    /* Açılır liste oku — nötr slate (açık tema). */
    --ok-ikon-secim: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root[data-bs-theme="dark"] {
    --ok-ikon-secim: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-image: none;
    background-color: currentColor;
    mask-image: var(--ok-ikon-maske);
    -webkit-mask-image: var(--ok-ikon-maske);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    transform: none;
}

.accordion-button:not(.collapsed) {
    color: var(--marka);
    background-color: var(--marka-soft);
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after { transform: rotate(-180deg); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(var(--marka-rgb), .2); border-color: var(--marka); }

.form-select {
    --bs-form-select-bg-img: var(--ok-ikon-secim);
    background-image: var(--ok-ikon-secim);
}


/* =============================================================================
   11. KOYU TEMADA BOOTSTRAP GÖVDESİ          (ERP KUSURU (b) — BURADA DÜZELTİLDİ)
   -----------------------------------------------------------------------------
   Neden burada: ERP'de koyu temada kart rengi kabukla TUTMUYORDU. Sebep, .card'ın
   kendi zemininin Bootstrap'in --bs-body-bg / --bs-secondary-bg değişkenlerinden
   gelmesi ve o değişkenlerin bizim paletimize hiç bağlanmamasıydı: sayfa slate
   koyusuna dönerken kartlar Bootstrap'in kendi koyu grisinde kalıyordu.
   ============================================================================= */
:root[data-bs-theme="dark"] {
    --bs-body-bg: var(--bg-body);
    --bs-body-color: var(--text-main);
    --bs-border-color: var(--border-color);
    --bs-secondary-bg: var(--card-bg);
    --bs-tertiary-bg: var(--hover-bg);
    --bs-emphasis-color: var(--text-main);
    --bs-secondary-color: var(--text-muted);
}

/* Kart zemini her iki temada da TEK kaynaktan gelir. */
.card {
    --bs-card-bg: var(--card-bg);
    --bs-card-border-color: var(--border-color);
    --bs-card-color: var(--text-main);
    --bs-card-cap-bg: transparent;
    border-radius: var(--kose);
    box-shadow: var(--golge);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--ty-orta);
    line-height: var(--lh-orta);
    font-weight: 700;
    color: var(--text-main);
}

.card-footer { background-color: transparent; border-top: 1px solid var(--border-color); }


/* =============================================================================
   12. GENEL AYARLAR — GÖVDE                  (ERP KUSURU (c) — BURADA DÜZELTİLDİ)
   -----------------------------------------------------------------------------
   🔴 body { overflow-x: hidden } YAZILMAZ. `hidden` kök kapsayıcıda bir KAYDIRMA
      ALANI doğurur: yapışkan (position: sticky) başlıklar çıpalarını kaybeder ve
      programla yapılan kaydırma sessizce çalışmaz olur. `clip` taşmayı aynı şekilde
      keser ama kaydırma alanı üretmez — doğru araç budur.
   ============================================================================= */
* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--yazi-ailesi);
    font-size: var(--ty-orta);
    line-height: var(--lh-orta);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--marka); text-decoration: none; }
a:hover { color: var(--marka-hover); text-decoration: underline; }
hr { border-color: var(--border-color); opacity: .5; }

/* Başlıklar merdivene bağlanır — satır içi punto YAZILMAZ (kusur (d)). */
h1, .h1 { font-size: var(--ty-dev);    line-height: var(--lh-dev);    font-weight: 800; }
h2, .h2 { font-size: var(--ty-buyuk);  line-height: var(--lh-buyuk);  font-weight: 800; }
h3, .h3 { font-size: var(--ty-buyuk);  line-height: var(--lh-buyuk);  font-weight: 700; }
h4, .h4 { font-size: var(--ty-baslik); line-height: var(--lh-baslik); font-weight: 700; }
h5, .h5 { font-size: var(--ty-orta);   line-height: var(--lh-orta);   font-weight: 700; }
h6, .h6 { font-size: var(--ty-orta);   line-height: var(--lh-orta);   font-weight: 600; }

/* Sayısal sütunlar tek genişlikli rakamla dizilir — tablo sütunu zıplamaz. */
.sayi, .tutar { font-variant-numeric: tabular-nums; }


/* =============================================================================
   13. İSKELET — SAYFA KABUĞU
   Neden burada: bütün ekranlar aynı iskelete oturur: solda sabit menü, sağda
   üst çubuk + kayan gövde. Bu düzen tek yerde kurulur; sayfalar yeniden kurmaz.
   ============================================================================= */
.sayfa-kabugu {
    display: flex;

    /* 🔴 KABUK TAM EKRAN YÜKSEKLİĞİNDEDİR, min-height DEĞİL.
       Eskiden min-height: 100vh idi: içerik uzayınca kabuk da uzuyor, BELGE
       kayıyor ve alt şerit ekrandan çıkıyordu (02.10.2026 ölçüldü: /teklif/1
       sayfasında footer 790-829, görünür alan 820'de bitiyor). Kesin yükseklik
       verilince kaydırma .sayfa-govdesi'ne düşer, üst çubuk ve alt şerit
       YERİNDE KALIR — alt bilgi bileşeninin kendi yorumunun söylediği davranış.
       🔴 dvh: telefonda adres çubuğu kayarken kabuk zıplamasın. vh yedek kalır. */
    height: 100vh;
    height: 100dvh;
    min-height: 0;

    transition: all var(--gecis-yavas);
}

.sidebar {
    width: var(--menu-genislik);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    transition: all var(--gecis-yavas);
}

/* Menü sarmalayıcısı gerçek bir esnek sütun olmalı; yoksa nav'daki esnek yükseklik
   boşa çalışır ve uzun menü KAYDIRILAMAZ. */
.sol-menu-kapsayici {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.sol-menu-liste {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .4rem 0;
}

/* --- Logo alanı --- */
.menu-header {
    height: var(--menu-header-yukseklik);
    display: flex;
    align-items: center;
    padding-left: .9rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-sidebar);
    flex-shrink: 0;
    position: relative;
}

.marka-ikon {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    margin-right: .55rem;
    border-radius: var(--kose-kucuk);
    background: linear-gradient(135deg, var(--marka), var(--marka-hover));
    color: var(--marka-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: var(--ty-orta);
}

.marka-metin-grubu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;   /* çocuklarının kırpılabilmesi için ŞART */
    overflow: hidden;
}

/* Marka adı kiracı kaydından gelir ve uzun olabilir: tek satır kalır, taşan kısım
   üç nokta olur, tamamı title ipucunda durur. */
.marka-adi {
    font-size: var(--ty-baslik);
    line-height: var(--lh-baslik);
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.marka-alt {
    font-size: var(--ty-mikro);
    line-height: var(--lh-mikro);
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-top: .1rem;
    opacity: .85;
}


/* =============================================================================
   14. MENÜ SATIRLARI
   Neden burada: uzun menü adları ("Saha İş Ortağı Atama Ekranı") sarmaya
   başladığında her satır üç kat yer kaplar ve menü kullanılamaz hâle gelir.
   🔴 Menü yazısı ASLA sarmaz — sığmazsa üç nokta olur, tam adı title'da durur.
   ============================================================================= */
.nav-link,
.grup-baslik {
    display: flex;
    align-items: center;
    min-width: 0;                 /* flex çocuğun ellipsis yapabilmesi için ŞART */
    margin: .0625rem .4rem;
    padding: var(--menu-satir-y) .45rem;
    border-radius: var(--kose-kucuk);
    color: var(--text-muted);
    font-size: var(--menu-yazi);
    line-height: var(--lh-kucuk);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--gecis-hizli), color var(--gecis-hizli);
}

.nav-link:hover,
.grup-baslik:hover {
    color: var(--marka);
    background-color: var(--marka-soft);
    text-decoration: none;
}

.nav-link.active,
.grup-baslik.aktif {
    color: var(--marka);
    background-color: var(--marka-soft);
}

.nav-link i,
.grup-baslik i {
    flex: 0 0 auto;
    width: 1.15em;
    margin-right: .4rem;
    font-size: 1.02em;
    text-align: center;
    color: inherit;
}

.grup-baslik .menu-yazi,
.nav-link .menu-yazi {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Açılır ok — dar tutulur, metne yer kalsın. */
.menu-ok {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: var(--ty-mikro);
    opacity: .6;
    transition: transform var(--gecis);
}

.grup-baslik.aktif .menu-ok { transform: rotate(180deg); opacity: .9; }

/* --- Alt menü --- */
.alt-menu-container {
    display: none;
    padding: .0625rem 0 .125rem;
}

.alt-menu-container.acik {
    display: block;
    animation: sy-kayarak-gir .2s ease-out;
}

.alt-menu-container .nav-link {
    margin-left: 1.1rem;
    margin-right: .5rem;
    padding-left: .6rem;
    border-left: 2px solid transparent;
    border-radius: var(--kose-mikro);
    font-size: var(--menu-alt-yazi);
    font-weight: 500;
    color: var(--text-muted);
}

.alt-menu-container .nav-link:hover,
.alt-menu-container .nav-link.active {
    background-color: var(--marka-soft);
    color: var(--marka);
    border-left-color: var(--marka);
}

.alt-menu-container .nav-link.active { font-weight: 600; }

/* Alt menü satırı: bağlantı + kısayol yıldızı ikilisi. */
.alt-menu-satir { display: flex; align-items: center; gap: .125rem; }
.alt-menu-satir .nav-link { min-width: 0; }

/* Kısayol yıldızı HER ZAMAN görünür (soluk); keşfedilebilirlik gizlilikten önemlidir. */
.kisayol-dugme {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: .125rem .5rem .125rem .25rem;
    line-height: 1;
    font-size: var(--ty-orta);
    color: var(--text-muted);
    opacity: .45;
    cursor: pointer;
    transition: opacity var(--gecis-hizli), color var(--gecis-hizli), transform var(--gecis-hizli);
}

.alt-menu-satir:hover .kisayol-dugme { opacity: .9; }
.kisayol-dugme:hover { opacity: 1; color: var(--marka); transform: scale(1.15); }
.kisayol-dugme.dolu { opacity: 1; color: var(--marka); }

/* Dokunmatikte hover yok — yıldız daha belirgin dursun. */
@media (hover: none) {
    .kisayol-dugme { opacity: .7; }
}

/* Hızlı menü bloğu, diğer gruplardan ince bir çizgiyle ayrılır. */
.hizli-menu {
    padding-bottom: .375rem;
    margin-bottom: .375rem;
    border-bottom: 1px solid var(--border-color);
}

.hizli-rozet {
    flex: 0 0 auto;
    min-width: 1.25rem;
    margin-left: auto;
    padding: .18rem .375rem;
    border-radius: .625rem;
    text-align: center;
    font-size: var(--ty-mikro);
    line-height: 1;
    font-weight: 700;
    background-color: var(--marka-soft);
    color: var(--marka);
}

/* --- Sol menü alt bilgisi: sürüm + derleme numarası --- */
.sy-alt-bilgi {
    flex: 0 0 auto;
    padding: .5rem .6rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-sidebar);
    color: var(--text-muted);
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    display: flex;
    align-items: center;
    gap: .375rem;
    min-width: 0;
}

.sy-alt-bilgi .sy-alt-yazi {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Derleme rozeti — her derlemede artan numara burada görünür. */
.derleme-rozeti {
    display: inline-block;
    flex: 0 0 auto;
    padding: .0625rem .3125rem;
    border-radius: var(--kose-mikro);
    font-family: var(--yazi-ailesi-sayi);
    font-size: var(--ty-mikro);
    font-weight: 700;
    letter-spacing: .02em;
    background-color: var(--marka-soft);
    color: var(--marka);
    vertical-align: middle;
}

@keyframes sy-kayarak-gir {
    from { opacity: 0; transform: translateY(-.3125rem); }
    to   { opacity: 1; transform: translateY(0); }
}


/* =============================================================================
   15. DARALTILMIŞ MENÜ (MASAÜSTÜ)
   Neden burada: dar ekranda menü kendiliğinden daralır. Daralmış hâlde alt
   sayfalara erişilebilmesi ŞART.
   🔴 :not(:hover) ŞART: menünün üstüne gelince menü genişler ve gizleme kuralı
      UYGULANMAZ. Böylece hiçbir "display" değeri tahmin edilmez (span mı blok mu
      sorusu ortadan kalkar) ve kırpılan bir açılır kutu gerekmez.
   ============================================================================= */
.sayfa-kabugu.menu-dar .sidebar { width: var(--menu-dar-genislik); }

.sayfa-kabugu.menu-dar .ana-icerik {
    margin-left: var(--menu-dar-genislik);
    width: calc(100% - var(--menu-dar-genislik));
}

.sayfa-kabugu.menu-dar .sidebar:not(:hover) .menu-yazi,
.sayfa-kabugu.menu-dar .sidebar:not(:hover) .menu-ok,
.sayfa-kabugu.menu-dar .sidebar:not(:hover) .hizli-rozet,
.sayfa-kabugu.menu-dar .sidebar:not(:hover) .kisayol-dugme,
.sayfa-kabugu.menu-dar .sidebar:not(:hover) .sy-alt-bilgi,
.sayfa-kabugu.menu-dar .sidebar:not(:hover) .marka-metin-grubu,
.sayfa-kabugu.menu-dar .sidebar:not(:hover) .alt-menu-container {
    display: none !important;
}

/* Daraltılmış menü üstüne gelince tam genişliğe açılır. .sidebar sabit konumlu ve
   üst katmanda olduğu için içeriğin ÜSTÜNE biner; sayfa yeniden akmaz. */
.sayfa-kabugu.menu-dar .sidebar:hover {
    width: var(--menu-genislik);
    box-shadow: var(--golge-yuksek);
}

.sayfa-kabugu.menu-dar .marka-ikon { display: flex !important; margin-right: 0; }

.sayfa-kabugu.menu-dar .sidebar:not(:hover) .menu-header {
    padding-left: 0;
    justify-content: center;
}

.sayfa-kabugu.menu-dar .sidebar:not(:hover) .nav-link,
.sayfa-kabugu.menu-dar .sidebar:not(:hover) .grup-baslik {
    justify-content: center;
    padding: .55rem 0;
    margin: .25rem .5rem;
}

.sayfa-kabugu.menu-dar .sidebar:not(:hover) .nav-link i,
.sayfa-kabugu.menu-dar .sidebar:not(:hover) .grup-baslik i {
    margin-right: 0;
    font-size: var(--ty-baslik);
}


/* =============================================================================
   16. MOBİL — YANDAN AÇILAN MENÜ
   🔴 767.98 eşiği: tam 768 px'te Bootstrap'in `md` eşiği (min-width: 768px) ile bu
      blok AYNI ANDA geçerli olur; menü ekran dışına atılırken `d-md-none` mobil açma
      düğmesini gizler ve menü HİÇ açılamaz. Yarım piksel bunu keser.
   ============================================================================= */
.mobil-kapat-btn { display: none; }   /* masaüstünde ASLA görünmez */

@media (max-width: 767.98px) {
    /* Gizleme mesafesi menü genişliğine BAĞLI olmalı; yoksa büyük yazı ölçeğinde
       menünün bir kısmı ekranda asılı kalır. */
    .sidebar { left: calc(-1 * var(--menu-genislik) - 1rem); }

    /* İçeriğin sol boşluğu burada SIFIRLANMAZ: bölüm 18'de zaten varsayılan
       olarak 0'dır ve masaüstü değeri min-width: 768px sorgusundan gelir. */

    .sayfa-kabugu.mobil-acik .sidebar { left: 0; box-shadow: var(--golge-yuksek); }

    .menu-header { padding-right: 3.75rem; }

    .mobil-kapat-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: .9rem;
        transform: translateY(-50%);
        width: max(2.5rem, 40px);
        height: max(2.5rem, 40px);
        border-radius: 50%;
        border: 1px solid var(--border-color);
        background-color: var(--hover-bg);
        color: var(--marka);
        cursor: pointer;
        z-index: var(--z-acilir);
        box-shadow: var(--golge);
    }

    .mobil-kapat-btn:active { background-color: var(--border-color); }

    /* 🔴 Masaüstü daraltması mobilde ETKİSİZ olmalı: mobilde menü zaten ekran
       dışındadır, daraltma sınıfı kalırsa içerik 4.5rem soldan boşluklu kalır. */
    .sayfa-kabugu.menu-dar .sidebar { width: var(--menu-genislik); }
    .sayfa-kabugu.menu-dar .ana-icerik { margin-left: 0; width: 100%; }
    .sayfa-kabugu.menu-dar .sidebar .menu-yazi,
    .sayfa-kabugu.menu-dar .sidebar .marka-metin-grubu,
    .sayfa-kabugu.menu-dar .sidebar .sy-alt-bilgi { display: revert !important; }
}

.mobil-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    z-index: var(--z-ortu);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gecis-yavas);
}

.mobil-overlay.aktif { opacity: 1; pointer-events: auto; }


/* =============================================================================
   17. ÜST ÇUBUK
   Neden burada: üst çubuk dar ekranda TAŞAN tek yerdir; dayanıklılığı burada
   kurulur. İki ayak:
     1) Sol blok gerçekten daralabilsin (min-width: 0) ve kurum adı tek satır kalıp
        üç nokta ile kırpılsın.
     2) Sağ bloktaki İKİNCİL öğeler ekran daraldıkça öncelik sırasıyla gizlensin.
   🔴 .ust-bar'a overflow: hidden VERİLMEZ — açılır menüler (tema/profil/bildirim)
      çubuğun dışına taşar, kırpılırlar.
   ============================================================================= */
.ust-bar {
    height: var(--ust-bar-yukseklik);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 1rem;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--golge);
    position: sticky;
    top: 0;
    z-index: var(--z-ust-bar);
}

/* Açılır menüler her zaman sayfa içeriğinin ÜSTÜNDE kalsın. */
.ust-bar .dropdown-menu { z-index: var(--z-acilir); }

/* Flex öğesi içeriğinden küçülebilsin — bu satır olmadan aşağıdakiler işe yaramaz. */
.ust-bar-sol,
.ust-bar-sag { min-width: 0; display: flex; align-items: center; gap: .75rem; }

.ust-bar-sol { flex: 1 1 auto; overflow: hidden; }   /* kırpma bu blokta yapılır */
.ust-bar-sag { flex: 0 0 auto; }                      /* araçlar ezilmez, GİZLENİR */

/* Kurum kimliği: iki satır da TEK SATIR kalır, sığmayan kısım üç nokta olur. */
.kurum-kimlik { min-width: 0; overflow: hidden; }

.kurum-kimlik > span {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kurum-kimlik .kurum-ad { font-size: var(--ty-orta); line-height: var(--lh-orta); font-weight: 700; }
.kurum-kimlik .kurum-alt { font-size: var(--ty-mikro); line-height: var(--lh-mikro); color: var(--text-muted); }

.sayfa-basligi {
    font-size: var(--ty-baslik);
    line-height: var(--lh-baslik);
    font-weight: 700;
    color: var(--text-main);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Üst çubuk düğmeleri ---
   🔴 SABİT GENİŞLİK DEĞİL: bu sınıf hem ikon-only hem de YAZILI düğmelerde
      kullanılır. Sabit genişlikte yazı kutunun dışına taşar ve komşu düğmenin
      üstüne biner. min-width ile ikon düğmeler yine kare kalır. */
.header-btn {
    flex: 0 0 auto;
    min-width: max(2.1rem, 32px);
    width: auto;
    height: max(2.1rem, 32px);
    padding: 0 .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    border: none;
    border-radius: var(--kose-kucuk);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--ty-orta);
    cursor: pointer;
    position: relative;
    transition: background-color var(--gecis-hizli), color var(--gecis-hizli);
}

.header-btn:hover { background: var(--hover-bg); color: var(--marka); }
.header-btn.aktif { background: var(--marka-soft); color: var(--marka); }

/* Okunmamış işaretçisi — düğmenin köşesine biner. */
.badge-dot {
    position: absolute;
    top: .3rem;
    right: .3rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--err);
    border: 2px solid var(--bg-header);
}

.header-avatar {
    width: max(2.25rem, 34px);
    height: max(2.25rem, 34px);
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid var(--bg-header);
    background: linear-gradient(135deg, var(--marka), var(--marka-hover));
    color: var(--marka-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ty-govde);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(var(--marka-rgb), .25);
}

/* --- ÖNCELİK SIRASI: ekran daraldıkça önce EN AZ gereken bilgi gider ---------- */
@media (max-width: 1399.98px) {
    .ust-bar-sag { gap: .55rem; }
    .ust-bar .oncelik-3 { display: none !important; }
}

@media (max-width: 1199.98px) {
    .ust-bar-sag { gap: .45rem; }
    .ust-bar .oncelik-2 { display: none !important; }
}

@media (max-width: 899.98px) {
    .ust-bar-sag { gap: .35rem; }
    .ust-bar .oncelik-1 { display: none !important; }
    .kurum-kimlik .kurum-alt { display: none; }
}

@media (max-width: 575.98px) {
    .ust-bar { padding: 0 .6rem; }
    .sayfa-basligi { display: none; }
}


/* =============================================================================
   18. İÇERİK ALANI
   🔴 min-width: 0 — flex zincirinin ÜST halkası. Bu satır olmadan gövdenin en küçük
      boyutu üst çubuğun min-content'ine kilitlenir ve taşan kısım sessizce kırpılır.
   ============================================================================= */
.ana-icerik {
    flex: 1;
    min-width: 0;

    /* 🔴 VARSAYILAN MOBİLDİR: menü 768 px altında ekran dışındadır (bölüm 16),
       içerik tüm genişliği kullanır. Masaüstü kaydırma aşağıdaki min-width
       sorgusunda verilir.

       🔴 BU SIRA ÖNEMLİ: daha önce masaüstü kaydırması burada koşulsuz
          duruyordu ve bölüm 16'daki mobil sıfırlama ONDAN ÖNCE geldiği için,
          özgüllükler eşit olduğundan kaynak sırası kazanıyordu: 375 px'te menü
          ekran dışına çıkıyor ama içeriğe 280 px sol boşluk kalıyor, geriye
          95 px'lik bir şerit kalıyordu (01.10.2026 canlıda ölçüldü: liste
          satırında şube adı ve il/ilçe üç noktaya düşüyordu). Koşul artık
          TEK YERDE ve POZİTİF yazılı; sıfırlama kuralına gerek kalmadı. */
    margin-left: 0;
    width: 100%;

    display: flex;
    flex-direction: column;

    /* 🔴 Esnek kutunun çocuğu varsayılan olarak içeriğinden küçülemez; bu satır
       olmadan .sayfa-govdesi'nin overflow-y:auto'su hiç devreye girmez ve taşma
       belgeye döner (alt şerit ekrandan çıkar). */
    min-height: 0;

    transition: all var(--gecis-yavas);
}

@media (min-width: 768px) {
    .ana-icerik {
        margin-left: var(--menu-genislik);
        width: calc(100% - var(--menu-genislik));
    }
}

.sayfa-govdesi {
    flex: 1;
    min-height: 0;
    padding: 1rem;
    overflow-y: auto;
}


/* =============================================================================
   19. KAYDIRMA ÇUBUĞU
   Neden burada: kurumsal panelde kalın sistem kaydırma çubuğu hem yer yer hem de
   ucuz görünür. İnce ve sessiz; fare üstüne gelince markaya döner.
   ============================================================================= */
::-webkit-scrollbar { width: .375rem; height: .375rem; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, .5);
    border-radius: 1.25rem;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover { background-color: var(--marka); border: 0; }

.custom-scroll,
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .5) transparent;
}

.custom-scrollbar::-webkit-scrollbar { width: .375rem; height: .375rem; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, .5); border-radius: 1.25rem; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--marka); }


/* =============================================================================
   20. YOĞUNLUK KATMANI                        (<html data-yogunluk="ferah"> ile kapanır)
   -----------------------------------------------------------------------------
   Neden burada: ERP'de ölçüldü — 1366x768'de bir listede 100 kayıttan ekranda TAM
   görünen sayı 2, bir formda 27 alandan görünen 7 idi. KÖK BULGU: kart yüksekliğinin
   yarısından fazlası BOŞLUK ve ÇİZGİ; sorun yazı boyutu DEĞİL.
   Bu yüzden bu katman RENK ve PUNTO yazmaz; yalnız dolgu / kenar boşluğu / oluk /
   satır aralığı / yükseklik ayarlar. Varsayılan SIK; eski ferah görünüme dönüş
   <html data-yogunluk="ferah"> ile yapılır.
   🔴 -sm varyantları BİLEREK dışarıdadır: .btn-sm / .form-control-sm / .table-sm
      bizim kuralımızla aynı özgüllükte ama ÖNCE geldiği için :not() süzgeci olmadan
      hepsi BÜYÜRDÜ — istenenin tam tersi.
   🔴 Dokunma hedefi tabanı KORUNUR: max(2rem, 30px) — "küçük" yazı ayarında bile
      tıklama alanı 30 px'in altına inmez. Buradaki px bilinçli ALT SINIRDIR.
   ============================================================================= */
:root:not([data-yogunluk="ferah"]) body { line-height: 1.4; }

:root:not([data-yogunluk="ferah"]) .card {
    --bs-card-spacer-y: .6rem;
    --bs-card-spacer-x: .75rem;
    --bs-card-cap-padding-y: .4rem;
    --bs-card-cap-padding-x: .75rem;
}

:root:not([data-yogunluk="ferah"]) .btn:not(.btn-sm):not(.btn-lg) {
    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .6rem;
    --bs-btn-font-size: var(--ty-orta);
    min-height: max(2rem, 30px);
}

:root:not([data-yogunluk="ferah"]) .row   { --bs-gutter-x: .75rem; }
:root:not([data-yogunluk="ferah"]) .modal { --bs-modal-padding: .75rem; }
:root:not([data-yogunluk="ferah"]) .alert { --bs-alert-padding-y: .55rem; --bs-alert-padding-x: .75rem; }
:root:not([data-yogunluk="ferah"]) .nav   { --bs-nav-link-padding-y: .3rem; --bs-nav-link-padding-x: .7rem; }

:root:not([data-yogunluk="ferah"]) .table:not(.table-sm) > :not(caption) > * > * {
    padding: .35rem .5rem;
}

/* 🔴 .input-group-sm içindekiler HARİÇ — yoksa ön ek kutusu ile girdi arasında
   birkaç pikselllik hizasızlık doğar (süzgeç çubuklarının çoğu input-group-sm). */
:root:not([data-yogunluk="ferah"]) .form-control:not(.form-control-sm):not(.form-control-lg),
:root:not([data-yogunluk="ferah"]) .form-select:not(.form-select-sm):not(.form-select-lg),
:root:not([data-yogunluk="ferah"]) .input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-text {
    padding-top: .3rem;
    padding-bottom: .3rem;
    font-size: var(--ty-orta);
    min-height: max(2rem, 30px);
}

:root:not([data-yogunluk="ferah"]) .form-control:not(.form-control-sm):not(.form-control-lg) { padding-left: .5rem; padding-right: .5rem; }
:root:not([data-yogunluk="ferah"]) .form-select:not(.form-select-sm):not(.form-select-lg)   { padding-left: .5rem; padding-right: 1.75rem; }
:root:not([data-yogunluk="ferah"]) .form-label { margin-bottom: .2rem; }
:root:not([data-yogunluk="ferah"]) .form-text  { margin-top: .1rem; font-size: var(--ty-kucuk); }
:root:not([data-yogunluk="ferah"]) .badge      { padding: .25em .45em; }

:root:not([data-yogunluk="ferah"]) .sayfa-govdesi { padding: .8rem; }

/* --- Bootstrap boşluk yardımcıları — !important ŞART ------------------------
   🔴 TÜM-YÖN kısayolları (.p-2/.p-3/.p-4) yalnız TEK BAŞINA kullanıldıklarında
      ezilir: "p-3 px-2" gibi bir birleşimde bizim kuralımız daha özgül olduğu için
      px-2'yi de ezerdi ve yatay dolgu bozulurdu. :not() süzgeci bunu önler. */
:root:not([data-yogunluk="ferah"]) .p-2:not([class*="px-"]):not([class*="py-"]):not([class*="pt-"]):not([class*="pb-"]):not([class*="ps-"]):not([class*="pe-"]) { padding: .4rem !important; }
:root:not([data-yogunluk="ferah"]) .p-3:not([class*="px-"]):not([class*="py-"]):not([class*="pt-"]):not([class*="pb-"]):not([class*="ps-"]):not([class*="pe-"]) { padding: .6rem !important; }
:root:not([data-yogunluk="ferah"]) .p-4:not([class*="px-"]):not([class*="py-"]):not([class*="pt-"]):not([class*="pb-"]):not([class*="ps-"]):not([class*="pe-"]) { padding: .85rem !important; }

:root:not([data-yogunluk="ferah"]) .py-2 { padding-top: .3rem !important; padding-bottom: .3rem !important; }
:root:not([data-yogunluk="ferah"]) .py-3 { padding-top: .45rem !important; padding-bottom: .45rem !important; }
:root:not([data-yogunluk="ferah"]) .py-4 { padding-top: .7rem !important; padding-bottom: .7rem !important; }
:root:not([data-yogunluk="ferah"]) .py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
:root:not([data-yogunluk="ferah"]) .pt-3 { padding-top: .45rem !important; }
:root:not([data-yogunluk="ferah"]) .pb-3 { padding-bottom: .45rem !important; }
:root:not([data-yogunluk="ferah"]) .px-3 { padding-left: .55rem !important; padding-right: .55rem !important; }
:root:not([data-yogunluk="ferah"]) .px-4 { padding-left: .8rem !important; padding-right: .8rem !important; }

:root:not([data-yogunluk="ferah"]) .mb-2 { margin-bottom: .35rem !important; }
:root:not([data-yogunluk="ferah"]) .mb-3 { margin-bottom: .6rem !important; }
:root:not([data-yogunluk="ferah"]) .mb-4 { margin-bottom: .75rem !important; }
:root:not([data-yogunluk="ferah"]) .mt-2 { margin-top: .35rem !important; }
:root:not([data-yogunluk="ferah"]) .mt-3 { margin-top: .6rem !important; }
:root:not([data-yogunluk="ferah"]) .mt-4 { margin-top: .75rem !important; }

:root:not([data-yogunluk="ferah"]) .g-2 { --bs-gutter-x: .4rem !important; --bs-gutter-y: .4rem !important; }
:root:not([data-yogunluk="ferah"]) .g-3 { --bs-gutter-x: .6rem !important; --bs-gutter-y: .6rem !important; }
:root:not([data-yogunluk="ferah"]) .g-4 { --bs-gutter-x: .75rem !important; --bs-gutter-y: .75rem !important; }

:root:not([data-yogunluk="ferah"]) .gap-2 { gap: .35rem !important; }
:root:not([data-yogunluk="ferah"]) .gap-3 { gap: .6rem !important; }
:root:not([data-yogunluk="ferah"]) .gap-4 { gap: .8rem !important; }

/* Küçük düğmeler: dolgularına dokunulmadan yalnız DOKUNMA HEDEFİ tabanı verilir.
   Görsel olarak büyümezler, tıklama alanı büyür. */
:root:not([data-yogunluk="ferah"]) .btn-sm,
:root:not([data-yogunluk="ferah"]) .btn-link {
    min-height: max(1.75rem, 28px);
}

/* 🔴 ÜST ÇUBUK yoğunluk katmanının boşluk kısıtlamasının DIŞINDA tutulur: buradaki
   düğmelerin bir kısmı köşesine mutlak konumlu rozet taşır; boşluk daraldığında
   rozet komşusuna değer. Üst çubuk kendi kırılma noktalarıyla yönetilir (bölüm 17). */
:root:not([data-yogunluk="ferah"]) .ust-bar .gap-3 { gap: .8rem !important; }
:root:not([data-yogunluk="ferah"]) .ust-bar .gap-2 { gap: .55rem !important; }
:root:not([data-yogunluk="ferah"]) .ust-bar .gap-1 { gap: .3rem !important; }


/* =============================================================================
   21. ORTAK BİLEŞENLER
   Neden burada: aynı işi yapan her ekran BİREBİR aynı kalıbı kullanır. Bir sayfaya
   özel kopya YAZILMAZ — o sayfa çizilmediğinde stil hiç yüklenmez ve öğeler
   tarayıcının çıplak hâliyle görünür.
   ============================================================================= */

/* --- Tablo: renkleri temaya bağlanır, sabit gri kalmaz --- */
.table {
    --bs-table-color: var(--text-main);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-color: var(--text-main);
    --bs-table-striped-bg: color-mix(in srgb, var(--text-main) 4%, transparent);
    --bs-table-hover-color: var(--text-main);
    --bs-table-hover-bg: var(--hover-bg);
    --bs-table-active-color: var(--text-main);
    --bs-table-active-bg: var(--marka-soft);
    color: var(--text-main);
    font-size: var(--ty-govde);
    line-height: var(--lh-govde);
}

.table > thead {
    font-size: var(--ty-mikro);
    line-height: var(--lh-mikro);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.table > thead th {
    font-weight: 700;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

/* Uzun listede başlık satırı yerinde kalır — kaydırma kabı .sy-tablo-kabi'dir.
   🔴 Bu, body'de overflow-x: clip kullanmamızın da sebebidir: `hidden` olsaydı
      kök bir kaydırma alanı doğar ve buradaki sticky çıpasını kaybederdi. */
.sy-tablo-kabi {
    overflow: auto;
    max-height: 100%;
    min-height: 0;
    border-radius: var(--kose);
}

.sy-tablo-kabi .table > thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-yapisal);
    background-color: var(--card-bg);
}

/* --- Sık tablo: satır başına düşen yer yarıya iner ---
   Yalnız bu sınıfı taşıyan tablolara uygulanır, global DEĞİLDİR. */
.sy-sik-tablo > :not(caption) > * > * {
    padding-top: .3rem;
    padding-bottom: .3rem;
    vertical-align: middle;
}

.sy-sik-tablo td > div + div { margin-top: 0 !important; line-height: var(--lh-mikro); }
.sy-sik-tablo .badge { padding-top: .15rem !important; padding-bottom: .15rem !important; line-height: var(--lh-mikro); }
.sy-sik-tablo td .btn:not(.btn-lg) { padding-top: .18rem; padding-bottom: .18rem; min-height: max(1.875rem, 30px); }

/* Uzun metin satırı ŞİŞİRMESİN: tek satırda kalır, taşan kısım üç nokta olur.
   Esnek kutu / düğme grubu kapsam dışı — onların düzeni bozulmasın. */
.sy-sik-tablo td > div:not(.d-flex):not(.btn-group):not(.dropdown):not(.input-group) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-word;
}

/* --- Ekran-sabit sayfa: başlık ve süzgeç yerinde durur, LİSTE kendi içinde kayar ---
   🔴 Medya sorgusu ŞART: .row esnek bir kutudur, yüksekliği kesin olsa bile SÜTUN
      içeriği kadar uzar ve taşma sayfaya döner. Dar ekranda sütunlar alt alta
      düştüğü için kural yalnız lg (992px) ve üstünde çalışır.
   🔴 Dikey oluk sıfırlanır: Bootstrap dikey oluğu sütuna margin-top olarak dağıtır;
      sütun height:100% iken bu, kartın SON pikselini kırptırır. */
@media (min-width: 992px) {
    .sy-ekran-sabit { height: 100%; display: flex; flex-direction: column; }

    .sy-ekran-sabit > .row {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        --bs-gutter-y: 0 !important;
        margin-top: 0 !important;
    }

    .sy-ekran-sabit > .row > [class*="col-"] {
        height: 100%;
        min-height: 0;
        margin-top: 0 !important;
    }
}

/* --- Liste satırı: kart yerine geçen ortak kalıp (servis kayıtları listesi) --- */
.sy-liste {
    display: flex;
    flex-direction: column;
    gap: 0;                        /* aralık satırın kendi kenarlığıyla verilir */
    overflow-y: auto;
    min-height: 0;
}

.sy-liste-satir {
    display: block;
    width: 100%;
    text-align: inherit;
    background: var(--card-bg);
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid transparent;   /* seçili göstergesi buraya biner, satır zıplamaz */
    padding: .38rem .55rem;
    min-height: max(2.75rem, 42px);
    cursor: pointer;
    transition: background-color var(--gecis-hizli), border-color var(--gecis-hizli);
}

.sy-liste-satir:hover { background: var(--hover-bg); }
.sy-liste-satir.secili { background: var(--hover-bg); border-left-color: var(--marka); }

.sy-liste-satir .sy-satir-ust,
.sy-liste-satir .sy-satir-alt { display: flex; align-items: center; gap: .4rem; min-width: 0; }

.sy-liste-satir .sy-satir-ust { font-size: var(--ty-kucuk); line-height: var(--lh-kucuk); font-weight: 600; color: var(--text-main); }
.sy-liste-satir .sy-satir-alt { font-size: var(--ty-mikro); line-height: var(--lh-mikro); color: var(--text-muted); margin-top: .1rem; }

/* Satırın birincil kimliği yardımcı işaretten KÜÇÜK olmaz: rozetler en alt kademe. */
.sy-liste-satir .badge { font-size: var(--ty-mikro); line-height: var(--lh-mikro); }

/* --- Form denetimleri --- */
.form-control,
.form-select {
    background-color: var(--card-bg);
    color: var(--text-main);
    border-color: var(--border-color);
    border-radius: var(--kose-kucuk);
}

.form-control::placeholder { color: var(--text-muted); opacity: .8; }
.form-control:disabled, .form-select:disabled { background-color: var(--hover-bg); color: var(--text-muted); }
.form-label { font-size: var(--ty-govde); line-height: var(--lh-govde); font-weight: 600; color: var(--text-main); }
.form-text { color: var(--text-muted); }
.input-group-text { background-color: var(--hover-bg); color: var(--text-main); border-color: var(--border-color); }

/* Sayfa içinde tema değişkenlerine zorla bağlanması gereken girdiler (ör. açılır
   kutu içindeki arama alanı) — sınıf markup'a eklenir. */
.theme-input {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

.theme-input::placeholder { color: var(--text-muted) !important; opacity: .8; }

.theme-input:focus {
    border-color: var(--marka) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--marka-rgb), .2) !important;
}

/* --- Sabit gri/beyaz Bootstrap bileşenlerini temaya bağla --- */
.text-muted { color: var(--text-muted) !important; }
.dropdown-menu {
    --bs-dropdown-bg: var(--card-bg);
    --bs-dropdown-color: var(--text-main);
    --bs-dropdown-link-color: var(--text-main);
    --bs-dropdown-link-hover-bg: var(--hover-bg);
    --bs-dropdown-link-hover-color: var(--text-main);
    --bs-dropdown-border-color: var(--border-color);
    --bs-dropdown-font-size: var(--ty-govde);
    box-shadow: var(--golge-orta);
}

.modal-content { background-color: var(--card-bg); color: var(--text-main); border-color: var(--border-color); }
.modal-header, .modal-footer { border-color: var(--border-color); }
.offcanvas { background-color: var(--card-bg); color: var(--text-main); }

.list-group {
    --bs-list-group-bg: var(--card-bg);
    --bs-list-group-color: var(--text-main);
    --bs-list-group-border-color: var(--border-color);
    --bs-list-group-action-hover-bg: var(--hover-bg);
    --bs-list-group-action-hover-color: var(--text-main);
}

.accordion {
    --bs-accordion-bg: var(--card-bg);
    --bs-accordion-color: var(--text-main);
    --bs-accordion-border-color: var(--border-color);
    --bs-accordion-btn-color: var(--text-main);
    --bs-accordion-active-color: var(--marka);
    --bs-accordion-active-bg: var(--marka-soft);
}

.tooltip { --bs-tooltip-bg: var(--text-main); --bs-tooltip-color: var(--bg-body); --bs-tooltip-font-size: var(--ty-kucuk); }
.popover { --bs-popover-bg: var(--card-bg); --bs-popover-border-color: var(--border-color); --bs-popover-body-color: var(--text-main); }

/* --- Uyarı kutuları: durum renklerine bağlanır --- */
.alert { border-radius: var(--kose-kucuk); font-size: var(--ty-govde); line-height: var(--lh-govde); }
.alert-success { background-color: var(--ok-bg);    color: var(--ok);    border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.alert-warning { background-color: var(--warn-bg);  color: var(--warn);  border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.alert-danger  { background-color: var(--err-bg);   color: var(--err);   border-color: color-mix(in srgb, var(--err) 28%, transparent); }
.alert-info    { background-color: var(--bilgi-bg); color: var(--bilgi); border-color: color-mix(in srgb, var(--bilgi) 28%, transparent); }

/* --- Durum rozetleri: servis kaydının hâli her ekranda AYNI renkle anlatılır --- */
.sy-durum {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .45rem;
    border-radius: 1rem;
    font-size: var(--ty-mikro);
    line-height: var(--lh-mikro);
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}

.sy-durum::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.sy-durum.acik      { background: var(--err-bg);   color: var(--err);   border-color: color-mix(in srgb, var(--err) 26%, transparent); }
.sy-durum.beklemede { background: var(--warn-bg);  color: var(--warn);  border-color: color-mix(in srgb, var(--warn) 26%, transparent); }
.sy-durum.sahada    { background: var(--bilgi-bg); color: var(--bilgi); border-color: color-mix(in srgb, var(--bilgi) 26%, transparent); }
.sy-durum.kapandi   { background: var(--ok-bg);    color: var(--ok);    border-color: color-mix(in srgb, var(--ok) 26%, transparent); }

/* --- Seçim çipi: durum süzgeci, açık/kapalı seçimi ---
   Seçili: marka rengi + kontrast yazı. Seçili değil: şeffaf, çerçeveli; üstüne
   gelince hafif tonlama (dolu gri YOK).
   🔴 Seçili çip marka yerine bir ton KOYU tonu kullanır: beyaz yazıyla kontrast
      oranı 3,7'den 5,5'e çıkar (küçük kalın yazıda 4,5 alt sınırdır). */
.secim-cipi {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-main);
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    font-weight: 600;
    cursor: pointer;
    min-height: max(1.75rem, 28px);
    transition: background-color var(--gecis-hizli), border-color var(--gecis-hizli), color var(--gecis-hizli);
}

.secim-cipi:hover,
.secim-cipi:focus-visible { background-color: var(--hover-bg); border-color: var(--marka); color: var(--text-main); }

.secim-cipi.secili,
.secim-cipi.secili:hover,
.secim-cipi.secili:focus-visible {
    background-color: var(--marka-hover);
    border-color: var(--marka-hover);
    color: var(--marka-contrast);
}

.secim-cipi .badge { background-color: rgba(128, 128, 128, .22); color: var(--text-main); }
.secim-cipi.secili .badge { background-color: rgba(255, 255, 255, .25); color: var(--marka-contrast); }

/* --- Düğme kontrast güvenliği ---
   .text-adapt (!important) Bootstrap'in DOLU buton durumlarındaki beyaz yazıyı
   eziyordu → üzerine gelince gri zemin + koyu yazı çıkıyor ve okunmuyordu.
   Çözüm: buton dolduğunda yazı rengi butonun KENDİ kontrast değişkenine döner. */
.btn.text-adapt:hover,
.btn.text-adapt:focus-visible,
.btn.text-adapt:active,
.btn.text-adapt.active,
.btn-check:checked + .btn.text-adapt {
    color: var(--bs-btn-hover-color, var(--text-main)) !important;
}

/* --- Boş durum: "kayıt yok" ekranı her yerde aynı --- */
.sy-bos-durum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--ty-govde);
    line-height: var(--lh-govde);
}

.sy-bos-durum i { font-size: var(--ty-dev); opacity: .45; }

/* --- Etiket + değer satırı (kayıt özeti, iş ortağı bilgileri) --- */
.sy-bilgi-satir {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .32rem 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: var(--ty-govde);
    line-height: var(--lh-govde);
}

.sy-bilgi-satir:last-child { border-bottom: none; }
.sy-bilgi-satir .etiket { flex: 0 0 9.5rem; width: 9.5rem; font-size: var(--ty-kucuk); color: var(--text-muted); }
.sy-bilgi-satir .deger { min-width: 0; color: var(--text-main); font-weight: 600; }

/* --- İki sütunlu içerik ızgarası — ayrıntı ve rapor ekranları --- */
.sy-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }

@media (max-width: 1000px) {
    .sy-veri-izgara { grid-template-columns: minmax(0, 1fr); }
}


/* =============================================================================
   22. SAYFA ÜSTÜ UYARI BANTLARI              (ERP KUSURU (d) — BURADA DÜZELTİLDİ)
   -----------------------------------------------------------------------------
   Neden burada: ERP'de tam genişlik uyarı bantları her sayfada satır içi punto ve
   satır içi renkle yeniden yazılıyordu; aynı bant üç ekranda üç farklı boyda
   çiziliyordu. Burada TEK sınıf var; punto merdivenden, renk değişkenden gelir.
   Kullanım:  <div class="sy-bant sy-bant-kirmizi">...</div>
   ============================================================================= */
.sy-bant {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .45rem 1rem;
    text-align: center;
    font-size: var(--ty-govde);
    line-height: var(--lh-govde);
    font-weight: 600;
    color: var(--bant-metin);
}

.sy-bant i { flex: 0 0 auto; font-size: 1.05em; }
.sy-bant-kirmizi { background-color: var(--bant-kirmizi); }
.sy-bant-turuncu { background-color: var(--bant-turuncu); }


/* =============================================================================
   23. GÖRÜNÜM AYARLARI PANELİ + ACCENT SEÇİCİ
   Neden burada: yazı boyutu / menü sıklığı / marka tonu seçimleri üst çubuktan
   yapılır. Sabit renk yoktur; açık ve koyu temada aynı okunurluk.
   ============================================================================= */
.gorunum-secim { display: flex; gap: .375rem; align-items: stretch; }

.gorunum-dugme {
    flex: 1 1 0;
    min-width: 0;
    min-height: max(1.875rem, 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .375rem .25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--kose-kucuk);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--ty-kucuk);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--gecis-hizli), background-color var(--gecis-hizli), color var(--gecis-hizli);
}

.gorunum-dugme:hover { border-color: var(--marka); color: var(--marka); }
.gorunum-dugme.secili { border-color: var(--marka); background-color: var(--marka-soft); color: var(--marka); font-weight: 700; }

.accent-nokta {
    width: 1.625rem;
    height: 1.625rem;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: transform var(--gecis-hizli);
}

.accent-nokta:hover { transform: scale(1.15); }
.accent-nokta.secili { border-color: var(--text-main); box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--marka); }


/* =============================================================================
   24. YARDIMCI SINIFLAR
   Neden burada: bunlar markup'ta çok geçen küçük kalıplardır. Bootstrap'te
   karşılığı olmayanlar (.x-small, .min-w-0) ERP'de 240 dosyada kullanılıp HİÇBİR
   yerde tanımlı olmadığı için sessizce etkisizdi — burada gerçekten tanımlıdır.
   ============================================================================= */
.text-adapt { color: var(--text-main) !important; }
.text-muted-adapt { color: var(--text-main) !important; opacity: .65; }
.text-marka { color: var(--marka) !important; }

.x-small,
.text-small { font-size: var(--ty-govde); line-height: var(--lh-govde); }

.min-w-0 { min-width: 0; }
/* Esnek kutu içinde kaydırma kurabilmek için ŞART: min-height:auto varsayılanı
   çocuğu küçültmez ve taşma SAYFAYA döner. */
.min-h-0 { min-height: 0; }
.overflow-x-auto { overflow-x: auto; }
.cursor-pointer { cursor: pointer; }

.tek-satir { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fade-in { animation: sy-belir .3s ease-in-out; }
@keyframes sy-belir {
    from { opacity: 0; transform: translateY(.3125rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.hover-scale { transition: transform var(--gecis-hizli), box-shadow var(--gecis-hizli); }
.hover-scale:hover { transform: translateY(-2px); box-shadow: var(--golge-orta); }

/* Tek satırda kalan sekme çubuğunun kaydırma çubuğu dikey yer YEMESİN. */
.nav-tabs.flex-nowrap { scrollbar-width: thin; }
.nav-tabs.flex-nowrap::-webkit-scrollbar { height: .25rem; }

/* Hareketi azaltılmış kullanıcı için tüm geçişler kısalır. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* =============================================================================
   25. KESİNTİSİZ BAĞLANTI ŞERİDİ
   -----------------------------------------------------------------------------
   Blazor'un kendi tam ekran kutusu gizlenir; üstte ince, hareketli bir şerit çıkar.
   3 saniye gecikmeli — kısa kesintide kullanıcı hiçbir şey görmez.
   Kimlik (#components-reconnect-modal) Blazor'un beklediği adla KALMAK ZORUNDA.
   Kaynak: I:\CLAUDE\_ORTAK_BLAZOR_KESINTISIZ\ (tek doğruluk kaynağı).
   🔴 Ortak kesinti katmanının iskay* adları AYNEN korunur (iskay-stil-kurtarma).
   ============================================================================= */
#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-serit);
    padding: .5rem 1rem;
    text-align: center;
    background: linear-gradient(90deg, var(--serit-zemin-1), var(--serit-zemin-2), var(--serit-zemin-1));
    color: var(--serit-metin);
    font-family: var(--yazi-ailesi);
    font-size: var(--ty-govde);
    line-height: var(--lh-govde);
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
    pointer-events: none;
    animation: sy-serit-in .25s ease-out 3s both;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
/* Stil kurtarması sürerken de görünür: o anda kopan şey bağlantı değil, tek bir
   dosya isteğidir; kullanıcı ekranın kendiliğinden düzeleceğini buradan anlar. */
#components-reconnect-modal.iskay-stil-kurtarma { display: block; }

#components-reconnect-modal::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--serit-vurgu), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: sy-serit-akis 1.15s linear infinite;
}

@keyframes sy-serit-in {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: none; }
}

@keyframes sy-serit-akis {
    from { background-position: -40% 0; }
    to   { background-position: 140% 0; }
}

.kb-serit-donen {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin-right: .45rem;
    vertical-align: -2px;
    border: 2px solid rgba(232, 251, 255, .35);
    border-top-color: var(--serit-vurgu);
    border-radius: 50%;
    animation: sy-don .7s linear infinite;
}

@keyframes sy-don { to { transform: rotate(360deg); } }

/* Blazor'un sarı hata çubuğu kullanıcıya gösterilmez ama YER DE KAPLAMAZ.
   🔴 display'e DOKUNULMAZ: Blazor hatayı onun satır içi display:block'u ile bildirir
   ve otomatik toparlanma tam olarak onu dinler. Akıştan çıkarmak için KONUMU değişir. */
#blazor-error-ui {
    visibility: hidden !important;
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}


/* =============================================================================
   26. BASKI
   Neden burada: aylık raporun kağıda dökülmesi ürünün açık isteklerinden biridir.
   Menü, üst çubuk ve düğmeler basılmaz; içerik tam genişlik alır.
   ============================================================================= */
@media print {
    .no-print,
    .sidebar,
    .ust-bar,
    .mobil-overlay,
    #components-reconnect-modal { display: none !important; }

    .ana-icerik { margin-left: 0 !important; width: 100% !important; }
    .sayfa-govdesi { padding: 0 !important; overflow: visible !important; }
    .card { box-shadow: none !important; border: 1px solid var(--border-color) !important; }
    body { background: #ffffff; color: #000000; }
}


/* =============================================================================
   27. DÜZEN TAMAMLAYICILARI — üst bar hesap menüsü, görünüm açılırı, alt şerit
   -----------------------------------------------------------------------------
   Neden burada: bu parçalar düzen bileşenlerinin (UstBar/AltBilgi) birlikte
   kullandığı kalıplardır. Bileşenin içine satır içi stil yazılsaydı aynı kutu
   üç ekranda üç farklı boyda çizilirdi (ERP'de ölçülen kusur).
   ============================================================================= */

/* Masaüstünde menüyü daraltan düğme; telefonda hamburger zaten var, bu gizlenir. */
@media (max-width: 767.98px) {
    .sy-daralt-dugme { display: none !important; }
}

/* Hesap düğmesi: avatar + iki satır (ad / rol). Dar ekranda yazı gider, avatar kalır. */
.sy-kullanici-dugme {
    gap: .45rem;
    padding-left: .3rem;
    padding-right: .5rem;
    min-width: 0;
}

.sy-kullanici-metin {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.15;
    font-size: var(--ty-kucuk);
    font-weight: 600;
}

.sy-kullanici-metin .tek-satir { max-width: 11rem; }

@media (max-width: 1399.98px) {
    .sy-kullanici-metin { display: none; }
}

/* Hesap açılırının başındaki özet satırı. */
.sy-hesap-ozet {
    padding: .5rem .85rem .35rem;
    min-width: 0;
    font-size: var(--ty-govde);
    font-weight: 600;
    color: var(--text-main);
}

/* Görünüm açılırı: başlık + seçim düğmeleri. */
.sy-gorunum-menu { min-width: 14rem; padding: .55rem .7rem; }

.sy-gorunum-baslik {
    margin: .35rem 0 .3rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}

/* Sayfa alt şeridi — gövdenin altına yapışık durur, içerik kendi içinde kayar. */
.sy-alt-serit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 2.4rem;
    padding: 0 1.1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-sidebar);
    color: var(--text-muted);
    font-size: var(--ty-mikro);
    line-height: var(--lh-mikro);
}

/* 🔴 MARKA LOGOSU (GENEL K-231, 26.10.2026): BİTİŞİK "İskay" (Segoe UI 600, koyu) + "soft" (Segoe UI 300, ince, küçük
   harf, ikincil gri); arada boşluk yok. Logo bir yazı resmi gibidir: tek aile kuralının (Inter) tek istisnası. */
.sy-alt-marka { display: flex; align-items: baseline; gap: 0; white-space: nowrap; font-family: 'Segoe UI', system-ui, sans-serif; }
.sy-marka-iskay { font-weight: 600; color: var(--text-main); }
.sy-marka-soft  { font-weight: 300; color: var(--text-muted); }

@media (max-width: 575.98px) {
    .sy-alt-serit > .tek-satir { overflow: hidden; text-overflow: ellipsis; }
}


/* =============================================================================
   28. TEK İLETİLİ EKRANLAR — yetkisiz, hata, bulunamadı
   -----------------------------------------------------------------------------
   Üç ekran da aynı kalıbı kullanır; her biri kendi kutusunu çizseydi üç farklı
   görünüm olurdu (CLAUDE.md: kabul edilen tasarım yeni ekranda aynen kullanılır).
   ============================================================================= */
.sy-tek-ileti {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: 100vh;
    padding: 2rem 1.25rem;
    text-align: center;
    background: var(--bg-body);
    color: var(--text-muted);
}

.sy-tek-ileti > i { font-size: 2.4rem; color: var(--marka); opacity: .8; }

.sy-tek-baslik {
    margin: 0;
    font-size: var(--ty-baslik);
    line-height: var(--lh-baslik);
    font-weight: 700;
    color: var(--text-main);
}

.sy-tek-aciklama {
    margin: 0;
    max-width: 30rem;
    font-size: var(--ty-govde);
    line-height: var(--lh-govde);
}


/* =============================================================================
   29. GİRİŞ EKRANI — ISKAY ERP DESENİ
   -----------------------------------------------------------------------------
   Kaynak: I:\CLAUDE\ISKAY_ERP_WORKER\Components\Pages\Login.razor (satır 51-548).
   Ölçüler, renkler, animasyon süreleri ve sınıf adları ERP'den BİREBİR alınmıştır;
   yeni tasarım uydurulmamıştır (CLAUDE.md: kabul edilen tasarım aynen kullanılır).

   🔴 Giriş ekranı DAİMA KOYUDUR ve ana temadan bağımsız kendi değişkenlerini kullanır:
      oturum açmamış kişinin tema tercihi okunamaz, okunsaydı da marka panelinin açık
      zeminde karşılığı yoktur. Bu, ERP'de de böyledir.
   🔴 ERP bu stilleri sayfanın kendi <style> bloğunda tutuyor; burada TEK TEMA DOSYASI
      sözleşmesi gereği buraya alındı. İçerik aynıdır.
   ============================================================================= */
.gr-kabuk {
    --erp-bg-start: #0f172a;
    --erp-bg-mid: #1e293b;
    --erp-bg-end: #0b1120;
    --erp-primary: #14b8a6;
    --erp-primary-hover: #0d9488;
    --erp-card-bg: rgba(30, 41, 59, 0.85);
    --erp-card-border: rgba(255, 255, 255, 0.08);
    --erp-text-main: #ffffff;
    --erp-text-muted: #94a3b8;
    --erp-input-bg: rgba(15, 23, 42, 0.6);
    --erp-input-border: rgba(148, 163, 184, 0.2);
    --erp-input-focus: #14b8a6;

    /* ERP'nin giriş ekranı yazı ailesi. Panelin Inter'i buraya taşınmaz: ekran
       ERP'nin giriş deseniyle birebir aynı görünmelidir. */
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--erp-text-main);
}

/* Arka plan animasyonu — sayfanın tamamını kaplar, içeriğin ARKASINDA durur. */
.gr-kabuk .bg-animation {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: linear-gradient(-45deg, var(--erp-bg-start), var(--erp-bg-mid), var(--erp-bg-end), var(--erp-bg-mid));
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* === İKİ PANELLİ DÜZEN === */
.login-shell {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.brand-panel {
    flex: 1.15;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    overflow: hidden;
    background: #060b16;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    isolation: isolate;
}

/* Aurora — yavaşça kayan ışık bulutları */
.brand-panel::before {
    content: "";
    position: absolute;
    inset: -25%;
    z-index: -2;
    background:
        radial-gradient(38% 48% at 22% 26%, rgba(20, 184, 166, 0.35), transparent 60%),
        radial-gradient(34% 44% at 80% 18%, rgba(13, 148, 136, 0.30), transparent 60%),
        radial-gradient(46% 56% at 66% 84%, rgba(45, 212, 191, 0.26), transparent 60%),
        radial-gradient(40% 50% at 12% 82%, rgba(8, 145, 178, 0.24), transparent 60%);
    filter: blur(22px);
    animation: auroraMove 18s ease-in-out infinite alternate;
}

/* Izgara — merkeze doğru maskelenmiş ince çizgi deseni */
.brand-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 28%, transparent 76%);
    mask-image: radial-gradient(circle at 50% 42%, #000 28%, transparent 76%);
}

@keyframes auroraMove {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, -2.5%, 0) scale(1.1); }
    100% { transform: translate3d(-2.5%, 2.5%, 0) scale(1.05); }
}

/* Yüzen ışık küreleri */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
    opacity: .5;
    z-index: -1;
    pointer-events: none;
}

.orb-1 { width: 300px; height: 300px; background: #14b8a6; top: 6%; left: -70px; animation: floatA 15s ease-in-out infinite; }
.orb-2 { width: 220px; height: 220px; background: #2dd4bf; bottom: 4%; right: -50px; animation: floatB 18s ease-in-out infinite; }
.orb-3 { width: 170px; height: 170px; background: #0891b2; top: 48%; left: 56%; animation: floatA 22s ease-in-out infinite reverse; }

@keyframes floatA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(34px, -42px); } }
@keyframes floatB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-38px, 28px); } }

.brand-inner {
    position: relative;
    z-index: 2;
    max-width: 470px;
    animation: cardFadeIn .9s cubic-bezier(.25, .8, .25, 1) both;
}

@keyframes cardFadeIn { to { opacity: 1; transform: translateY(0); } }

/* Logo + dönen yörünge halkaları */
.brand-mark {
    position: relative;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.brand-mark svg {
    width: 56px;
    height: 56px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 6px 18px rgba(20, 184, 166, .5));
}

.brand-mark::before,
.brand-mark::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.brand-mark::before {
    inset: -4px;
    border: 1px solid rgba(45, 212, 191, .30);
    border-top-color: #2dd4bf;
    animation: spin 8s linear infinite;
}

.brand-mark::after {
    inset: -16px;
    border: 1px dashed rgba(20, 184, 166, .18);
    animation: spin 18s linear infinite reverse;
}

@keyframes spin { to { transform: rotate(360deg); } }

.brand-mark .draw {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: draw 1.8s ease forwards .25s;
}

@keyframes draw { to { stroke-dashoffset: 0; } }

.brand-mark .shimmer { animation: shimmer 3s ease-in-out infinite; }

@keyframes shimmer { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

.brand-name-lg {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.1;
    background: linear-gradient(90deg, #ffffff, #99f6e4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 🔴 Uzun unvan KESİLMEZ, sarar (K-077 ilkesi). */
    overflow-wrap: anywhere;
}

.brand-tagline {
    margin-top: 10px;
    font-size: .92rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #5eead4;
}

/* NOT: ERP'nin giriş ekranındaki üç tanıtım maddesi (.brand-features) bu üründe
   KULLANILMIYOR — kullanıcı kararı 01.10.2026: "bunları kaldıralım". Kuralları da
   silindi; ölü stil bırakılmaz. Geri istenirse ERP'deki Login.razor'dan alınır. */

.brand-foot {
    margin-top: 44px;
    font-size: .8rem;
    color: #64748b;
    letter-spacing: .5px;
}

/* === SAĞ: FORM PANELİ === */
.form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    min-width: min(100%, 480px);
}

.login-card {
    width: 100%;
    max-width: 410px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(30px);
    animation: cardFadeIn .8s cubic-bezier(.25, .8, .25, 1) forwards;
}

.welcome-head { margin-bottom: 30px; }
.welcome-head h2 { font-size: 1.65rem; font-weight: 700; margin: 0; }
.welcome-head p { color: var(--erp-text-muted); margin: 8px 0 0; font-size: .95rem; }

.gr-kabuk .input-group {
    position: relative;
    margin-bottom: 20px;
    display: block;
}

.custom-input {
    width: 100%;
    background: var(--erp-input-bg);
    border: 1px solid var(--erp-input-border);
    border-radius: 8px;
    padding: 16px 16px 16px 45px;
    color: var(--erp-text-main);
    font-size: 1rem;
    transition: all .3s ease;
    box-sizing: border-box;
}

.custom-input::placeholder { color: #64748b; }

.custom-input:focus {
    outline: none;
    border-color: var(--erp-input-focus);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .22);
    background: rgba(15, 23, 42, .8);
}

.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--erp-text-muted);
    font-size: 1.2rem;
    transition: color .3s ease;
    pointer-events: none;
}

.custom-input:focus + .input-icon { color: var(--erp-primary); }

.btn-corporate {
    width: 100%;
    padding: 16px;
    background-color: var(--erp-primary);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color .3s ease, transform .1s ease;
    letter-spacing: .5px;
}

.btn-corporate:hover { background-color: var(--erp-primary-hover); }
.btn-corporate:active { transform: scale(.98); }

.error-msg {
    background: rgba(239, 68, 68, .15);
    border-left: 4px solid #ef4444;
    color: #fca5a5;
    padding: 14px 16px;
    border-radius: 6px;
    margin-bottom: 25px;
    font-size: .95rem;
    animation: slideDown .3s ease;
    /* İleti SARAR, kesilmez. */
    overflow-wrap: anywhere;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.footer-info {
    margin-top: 40px;
    border-top: 1px solid var(--erp-card-border);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .8rem;
    color: var(--erp-text-muted);
}

.footer-info .gr-derleme { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

@media (prefers-reduced-motion: reduce) {
    .gr-kabuk .bg-animation,
    .brand-panel::before, .orb, .brand-mark::before, .brand-mark::after,
    .brand-mark .draw, .brand-mark .shimmer,
    .brand-inner, .login-card {
        animation: none !important;
    }

    .login-card { opacity: 1; transform: none; }
    .brand-mark .draw { stroke-dashoffset: 0; }
}

/* 900 px altında marka paneli kalkar; form kartı zemin/çerçeve/gölgeyi geri alır. */
@media (max-width: 900px) {
    .brand-panel { display: none; }

    .form-panel { flex: 1; padding: 20px; min-width: 0; }

    .login-card {
        background: var(--erp-card-bg);
        border: 1px solid var(--erp-card-border);
        backdrop-filter: blur(20px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
        border-radius: 16px;
        padding: 40px 30px;
    }
}


/* =============================================================================
   30. GÖRÜNMEZ SAYFA BAŞLIĞI VE YÖNLENDİRME ODAĞI
   -----------------------------------------------------------------------------
   🔴 NEDEN VAR (01.10.2026, kullanıcı bildirdi — "Vhena İnşaat yazısının etrafında
      beyazlık çıkıyor"): Routes.razor'daki <FocusOnNavigate Selector="h1" /> her
      gezinmede sayfanın ilk <h1>'ine tabindex="-1" verip ODAKLIYOR. Tarayıcı da odak
      halkasını çiziyor; giriş ekranının koyu panelinde bu, marka adının etrafında
      BEYAZ bir dikdörtgen olarak görünüyordu.

      İki katmanlı çözüm:
      (1) Marka adı artık <h1> değil <div>; sayfanın <h1>'i aşağıdaki görünmez başlıktır
          (ERP'de de marka adı div'dir). Ekran okuyucu yine bir sayfa başlığı bulur.
      (2) Program eliyle odaklanan başlıklarda halka çizilmez. Kullanıcı KENDİ klavyesiyle
          odaklarsa (:focus-visible) halka DURUR — erişilebilirlik kaybı yoktur.
   ============================================================================= */
.sy-gizli-baslik {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    margin: 0;
    padding: 0;
    border: 0;
}

/* 🔴 KALICI ÇÖZÜM (01.10.2026, kullanıcı iki kez bildirdi: "yazının etrafında beyazlık").
   Blazor'un <FocusOnNavigate Selector="h1" /> bileşeni HER gezinmede sayfanın ilk
   başlığına tabindex="-1" verip ODAKLIYOR. Tarayıcı bu odağı kullanıcının kendi
   yaptığı odak gibi değerlendirip halka çiziyordu; koyu panelde ve koyu temada bu,
   başlığın etrafında BEYAZ bir dikdörtgen olarak görünüyor.

   İlk denemede yalnız ":focus:not(:focus-visible)" kapatılmıştı; Chrome bu odağı
   çoğu zaman :focus-visible SAYDIĞI için halka geri geliyordu. Kural artık KOŞULSUZ.

   🔴 ERİŞİLEBİLİRLİK KAYBI YOKTUR: tabindex="-1" taşıyan bir öğeye Tab ile ULAŞILAMAZ;
      oraya odak yalnızca program eliyle gelir. Yani bastırılan halka, kullanıcının
      kendi klavye hareketiyle hiç çizilmeyecek olan halkadır. Gerçek etkileşimli
      öğeler (düğme, bağlantı, girdi) bu kuralın DIŞINDADIR ve odak halkalarını korur.  */
[tabindex="-1"]:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* =============================================================================
   31. DURUM VE ÖNCELİK ROZETİ AİLESİ
   -----------------------------------------------------------------------------
   Neden burada: bölüm 21'deki .sy-durum yalnız dört hâl tanıyordu (.acik /
   .beklemede / .sahada / .kapandi). Oysa TalepDurumlari.RozetSinifi sekiz durumu
   altı sınıfa, OncelikSinifi üç önceliği üç sınıfa eşliyor. Eksik sınıflar burada
   tamamlanır; ekran kendi rengini SEÇMEZ, yalnız sınıf adını basar.

   🔴 TEK MOTOR: her hâl iki değişken yazar (--sy-hal-renk, --sy-hal-zemin), rengi
      ve kenarlığı aşağıdaki TEK kural türetir. Böylece yeni bir hâl eklendiğinde
      üç ayrı yere renk yazılmaz. Sabit hex YOKTUR; hepsi bölüm 4'ün durum
      değişkenlerinden, markadan ve nötrlerden gelir.

   🔴 OKUNURLUK (WCAG 1.4.3, küçük yazı için en az 4,5:1): rozet yazısı --ty-mikro
      kademesindedir, yani küçük yazıdır. Durum değişkenlerinin ham hâli kendi açık
      zeminlerinde bu eşiği GEÇMİYOR — ölçüldü: --err (#dc2626) / --err-bg (#fdeaea)
      = 4,17:1, --ok (#16a34a) / --ok-bg (#eafaef) = 3,05:1 ve koyu temada
      --text-muted (#94a3b8) / --hover-bg (#334155) = 4,04:1. Bu yüzden yazı rengi
      %70 hâl rengi + %30 --text-main karışımıdır. --text-main açık temada koyu,
      koyu temada açık olduğundan karışım iki temada da DOĞRU yöne koyulaşır/açılır.

      Ölçülen kontrastlar (açık tema · koyu tema):
        .yeni      #9f2227 / #fdeaea = 6,64  ·  #f89a9b / #383241 = 5,93
        .islemde   #0e6f6c / #f0fdfa = 5,74  ·  #6adfd1 / #134e4a = 5,91
        .beklemede #834113 / #fdf4e3 = 7,04  ·  #f2c67f / #37393d = 7,25
        .tamam     #147940 / #eafaef = 5,06  ·  #6fdda5 / #213d43 = 6,93
        .kapali    #364256 / #f1f5f9 = 9,26  ·  #b2bdcc / #334155 = 5,45
        .iptal     #70303c / #f1f5f9 = 8,81  ·  #d9aab1 / #334155 = 5,10
        .acil      .yeni ile aynı             ·  .yeni ile aynı
        .normal    .kapali ile aynı           ·  .kapali ile aynı
        .dusuk     #364256 / #ffffff = 10,14 ·  #b2bdcc / #1e293b = 7,69
      (Koyu temada zeminler %12 saydam olduğundan hesap, kart zemini #1e293b ile
       harmanlanmış GERÇEK renk üzerinden yapıldı. En düşük değer 5,06 — eşiğin
       üstünde. Hesap betiği: WCAG 2.x bağıl parlaklık formülü.)

   🔴 .beklemede bölüm 21'de de tanımlıdır; burada AYNI --warn ailesiyle yeniden
      yazılır çünkü oradaki ham --warn yukarıdaki eşiği karşılamıyordu. Renk kaynağı
      değişmedi, yalnız koyulaştırıldı.
   ============================================================================= */

/* Hâl → renk eşlemesi. Tek satırda hem rozet hem zaman çizelgesi noktası beslenir. */
.sy-durum.yeni,      .sy-cizelge-nokta.yeni      { --sy-hal-renk: var(--err);        --sy-hal-zemin: var(--err-bg); }
.sy-durum.islemde,   .sy-cizelge-nokta.islemde   { --sy-hal-renk: var(--marka);      --sy-hal-zemin: var(--marka-soft); }
.sy-durum.beklemede, .sy-cizelge-nokta.beklemede { --sy-hal-renk: var(--warn);       --sy-hal-zemin: var(--warn-bg); }
.sy-durum.tamam,     .sy-cizelge-nokta.tamam     { --sy-hal-renk: var(--ok);         --sy-hal-zemin: var(--ok-bg); }
.sy-durum.kapali,    .sy-cizelge-nokta.kapali    { --sy-hal-renk: var(--text-muted); --sy-hal-zemin: var(--hover-bg); }

/* İptal, kapanıştan AYRILMALI: iş bitmedi, geri çekildi. Kırmızıyı nötre doğru
   söndürüp zemini nötr bırakıyoruz — .yeni'nin kırmızı zeminiyle karışmaz. */
.sy-durum.iptal,     .sy-cizelge-nokta.iptal     { --sy-hal-renk: color-mix(in srgb, var(--err) 55%, var(--text-muted)); --sy-hal-zemin: var(--hover-bg); }

/* Öncelikler. Acil, Yeni ile aynı kırmızıyı kullanır; ayrımı RENK değil BİÇİM verir
   (aşağıda: köşesi keskin, önünde nokta yok). Normal ve Düşük sessiz kalır, çünkü
   listedeki satırların çoğu bu ikisidir. */
.sy-durum.acil   { --sy-hal-renk: var(--err);        --sy-hal-zemin: var(--err-bg); }
.sy-durum.normal { --sy-hal-renk: var(--text-muted); --sy-hal-zemin: var(--hover-bg); }
.sy-durum.dusuk  { --sy-hal-renk: var(--text-muted); --sy-hal-zemin: transparent; }

/* TEK TÜRETME KURALI — yukarıdaki iki değişkenden renk, zemin ve kenarlık. */
.sy-durum.yeni,
.sy-durum.islemde,
.sy-durum.beklemede,
.sy-durum.tamam,
.sy-durum.kapali,
.sy-durum.iptal,
.sy-durum.acil,
.sy-durum.normal,
.sy-durum.dusuk {
    background: var(--sy-hal-zemin);
    color: color-mix(in srgb, var(--sy-hal-renk) 70%, var(--text-main));
    border-color: color-mix(in srgb, var(--sy-hal-renk) 32%, transparent);
}

/* Öncelik çipinin biçimi: köşe keskin, baştaki nokta yok. Durum rozeti (yuvarlak,
   noktalı) ile yan yana durduğunda hangisinin ne olduğu tek bakışta ayrılır. */
.sy-durum.acil,
.sy-durum.normal,
.sy-durum.dusuk {
    border-radius: var(--kose-mikro);
    letter-spacing: .03em;
}

.sy-durum.acil::before,
.sy-durum.normal::before,
.sy-durum.dusuk::before { display: none; }

/* Acil tek istisna: kenarlığı belirgin, yazısı daha kalın. Saha önceliğini
   listede gözden kaçırmamak için. */
.sy-durum.acil {
    border-color: color-mix(in srgb, var(--err) 70%, transparent);
    font-weight: 800;
}


/* =============================================================================
   32. PANO KARTLARI
   -----------------------------------------------------------------------------
   Neden burada: pano hem firma hem müşteri hem iş ortağı tarafında AYNI kutularla
   çizilir (PanoOzeti tek kayıttır). Üç ekranda üç ayrı kart kalıbı çıkmasın diye
   kalıp tek yerde durur.
   🔴 Kırılım 2 / 3 / 4 sütundur: dar ekranda iki kutu yan yana hâlâ okunur, geniş
      ekranda dörtten fazlası satırı anlamsız inceltirdi.
   ============================================================================= */
.sy-pano {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    align-items: stretch;
}

@media (min-width: 48rem) { .sy-pano { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .sy-pano { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sy-pano-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    width: 100%;
    text-align: inherit;
    padding: .7rem .8rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--kose);
    box-shadow: var(--golge);
    transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli), background-color var(--gecis-hizli);
}

/* Kart tıklanabilir olduğunda (süzgece götürür) düğme olarak basılır; görünümü değişmez. */
.sy-pano-kart:is(button, a) { cursor: pointer; color: inherit; text-decoration: none; }
.sy-pano-kart:is(button, a):hover { border-color: var(--marka); box-shadow: var(--golge-orta); }

.sy-pano-sayi {
    font-size: var(--ty-dev);
    line-height: var(--lh-dev);
    font-weight: 800;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    /* Rakam sarmaz, yanındaki etiket sarar. */
    white-space: nowrap;
}

.sy-pano-etiket {
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    color: var(--text-muted);
    /* 🔴 Metin KESİLMEZ: dar kutuda alt satıra iner. */
    overflow-wrap: anywhere;
}

.sy-pano-ikon {
    position: absolute;
    top: .6rem;
    right: .7rem;
    font-size: var(--ty-buyuk);
    line-height: 1;
    color: var(--marka);
    opacity: .28;
    pointer-events: none;
}

/* Geciken iş kutusu: sayı da kenar da uyarı tonuna geçer. Kontrast ölçüsü bölüm
   31'deki .beklemede ile aynı karışımdır (7,04 / 7,25). */
.sy-pano-kart.vurgulu {
    background: var(--warn-bg);
    border-color: color-mix(in srgb, var(--warn) 38%, transparent);
}

.sy-pano-kart.vurgulu .sy-pano-sayi { color: color-mix(in srgb, var(--warn) 70%, var(--text-main)); }
.sy-pano-kart.vurgulu .sy-pano-etiket { color: color-mix(in srgb, var(--warn) 55%, var(--text-main)); }
.sy-pano-kart.vurgulu .sy-pano-ikon { color: var(--warn); opacity: .4; }


/* =============================================================================
   33. ŞUBE SEÇİCİ
   -----------------------------------------------------------------------------
   Neden burada: ilk müşterinin 220 şubesi var. Açılır kutuya 220 satır koymak
   şube görevlisine iş çıkarır; yazarak süzülen bir seçici gerekir. Kalıp burada
   durur ki talep açma, süzgeç çubuğu ve rapor ekranı aynı seçiciyi kullansın.
   🔴 Liste MUTLAK konumludur: açıldığında formun kalanını aşağı itmez, kart
      yüksekliği zıplamaz.
   🔴 z-index üst bardan (--z-ust-bar) yüksek olan --z-acilir katmanındadır; liste
      sayfanın üstüne yakın bir formda açıldığında üst çubuğun altında kalmaz.
   ============================================================================= */
.sy-secici { position: relative; min-width: 0; }

.sy-secici-girdi { width: 100%; }

.sy-secici-liste {
    position: absolute;
    top: calc(100% + .2rem);
    left: 0;
    right: 0;
    z-index: var(--z-acilir);
    max-height: 18rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: .2rem;
    list-style: none;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--kose-kucuk);
    box-shadow: var(--golge-orta);
}

.sy-secici-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
    width: 100%;
    text-align: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--kose-mikro);
    padding: .3rem .4rem;
    min-height: max(1.875rem, 30px);
    cursor: pointer;
    color: var(--text-main);
}

.sy-secici-satir:hover,
.sy-secici-satir.vurgulu { background: var(--hover-bg); }

/* Klavyeyle gezinen satır ayrıca sol kenardan işaretlenir: fare imleci başka bir
   satırın üzerindeyken hangisinin SEÇİLİ olduğu kaybolmasın. */
.sy-secici-satir.vurgulu { box-shadow: inset .15rem 0 0 var(--marka); }

.sy-secici-kod {
    flex: 0 0 auto;
    font-family: var(--yazi-ailesi-sayi);
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    color: var(--text-muted);
}

.sy-secici-ad {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ty-govde);
    line-height: var(--lh-govde);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sy-secici-yer {
    flex: 0 0 auto;
    font-size: var(--ty-mikro);
    line-height: var(--lh-mikro);
    color: var(--text-muted);
}

.sy-secici-bos {
    padding: .55rem .5rem;
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    color: var(--text-muted);
    text-align: center;
}


/* =============================================================================
   34. ZAMAN ÇİZELGESİ (TALEP HAREKETLERİ)
   -----------------------------------------------------------------------------
   Neden burada: "bu talebe ne oldu" sorusunun cevabı tek bir dikey akışta okunur.
   Çizgi sol kenarda süreklidir, noktalar durum rengini taşır — hangi aşamada ne
   olduğu renkle de anlaşılır, yalnız yazıya bakmak gerekmez.
   🔴 İÇ NOT GÖRSEL OLARAK AYRILIR: müşteriye kapalı not ile müşterinin okuduğu not
      aynı görünürse, firma personeli er geç müşteriye açık alana iç yazışma yazar.
      Kesikli kenarlık + rozet bu yüzden vardır.
   ============================================================================= */
.sy-cizelge {
    position: relative;
    margin: 0;
    padding: 0 0 0 1.1rem;
    list-style: none;
}

/* Sürekli dikey çizgi. İlk noktanın üstünde ve son noktanın altında sarkmasın
   diye iki uçtan .45rem içeri çekilir — nokta merkezleri tam o hizadadır. */
.sy-cizelge::before {
    content: "";
    position: absolute;
    top: .45rem;
    bottom: .45rem;
    left: .28rem;
    width: 1px;
    background: var(--border-color);
}

.sy-cizelge-satir {
    position: relative;
    display: flex;
    gap: .5rem;
    padding: .4rem 0;
    min-width: 0;
}

.sy-cizelge-nokta {
    position: absolute;
    top: .72rem;
    left: -1.1rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    /* Hâl sınıfı verilmediyse nötr kalır (bölüm 31'deki eşleme). */
    background: var(--sy-hal-renk, var(--text-muted));
    /* Halka, noktayı çizginin üstünden ayırır. */
    box-shadow: 0 0 0 .18rem var(--card-bg);
}

.sy-cizelge-govde {
    flex: 1 1 auto;
    min-width: 0;
}

.sy-cizelge-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    color: var(--text-muted);
}

.sy-cizelge-ust .kisi { font-weight: 700; color: var(--text-main); }

.sy-cizelge-metin {
    margin-top: .15rem;
    font-size: var(--ty-govde);
    line-height: var(--lh-govde);
    color: var(--text-main);
    /* 🔴 Uzun açıklama kesilmez, sarar. */
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* İç not: kesikli kenarlıklı kutu. Zemin nötr, çünkü renk durum anlamı taşır. */
.sy-cizelge-ic-not {
    margin-top: .25rem;
    padding: .4rem .5rem;
    background: var(--hover-bg);
    border: 1px dashed color-mix(in srgb, var(--text-muted) 55%, transparent);
    border-radius: var(--kose-kucuk);
}

.sy-ic-rozet {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .2rem;
    padding: .1rem .35rem;
    border-radius: var(--kose-mikro);
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--text-muted) 60%, transparent);
    font-size: var(--ty-mikro);
    line-height: var(--lh-mikro);
    font-weight: 700;
    /* Kontrast: açık temada #364256 / #f1f5f9 = 9,26 · koyuda #b2bdcc / #334155 = 5,45 */
    color: color-mix(in srgb, var(--text-muted) 70%, var(--text-main));
    white-space: nowrap;
}


/* =============================================================================
   35. DOSYA ALANI
   -----------------------------------------------------------------------------
   Neden burada: saha fotoğrafı ve taranmış iş formu her talepte var. Sürükle-bırak
   kutusu ile ek listesi aynı kalıpla her ekranda (talep ayrıntısı, kapatma formu)
   çizilir.
   ============================================================================= */
.sy-dosya-birak {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: 1rem .75rem;
    text-align: center;
    background: var(--hover-bg);
    border: 2px dashed color-mix(in srgb, var(--text-muted) 45%, transparent);
    border-radius: var(--kose);
    color: var(--text-muted);
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    cursor: pointer;
    transition: border-color var(--gecis-hizli), background-color var(--gecis-hizli), color var(--gecis-hizli);
}

.sy-dosya-birak i { font-size: var(--ty-buyuk); line-height: 1; opacity: .7; }

/* Dosya kutunun üzerine sürüklendiğinde: bırakılabilir olduğu belli olmalı. */
.sy-dosya-birak.uzerinde {
    background: var(--marka-soft);
    border-color: var(--marka);
    color: color-mix(in srgb, var(--marka) 70%, var(--text-main));
}

.sy-dosya-liste {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: .4rem 0 0;
    padding: 0;
    list-style: none;
}

.sy-dosya-satir {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    padding: .35rem .4rem;
    border-bottom: 1px solid var(--border-color);
}

.sy-dosya-satir:last-child { border-bottom: none; }

.sy-dosya-ikon {
    flex: 0 0 auto;
    font-size: var(--ty-orta);
    line-height: 1;
    color: var(--marka);
}

.sy-dosya-ad {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ty-govde);
    line-height: var(--lh-govde);
    color: var(--text-main);
    /* 🔴 Dosya adı KESİLMEZ: uzun adlar sarar, "...jpg" diye kırpılmaz. */
    overflow-wrap: anywhere;
}

.sy-dosya-boyut {
    flex: 0 0 auto;
    font-family: var(--yazi-ailesi-sayi);
    font-size: var(--ty-mikro);
    line-height: var(--lh-mikro);
    color: var(--text-muted);
    white-space: nowrap;
}


/* =============================================================================
   36. TALEP BAŞLIĞI
   -----------------------------------------------------------------------------
   Neden burada: talep ayrıntısının en üstünde numara, durum ve öncelik yan yana
   durur. Telefonla arayan şube görevlisine okunan şey talep numarasıdır; bu yüzden
   numara monospace ve büyük kademededir — rakamlar eşit genişlikte hizalanır.
   ============================================================================= */
.sy-talep-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/* Dar ekranda yan yana sığmaz: numara üstte, rozetler altta. */
@media (max-width: 36rem) {
    .sy-talep-ust { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

.sy-talep-no {
    font-family: var(--yazi-ailesi-sayi);
    font-size: var(--ty-buyuk);
    line-height: var(--lh-buyuk);
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: .01em;
    white-space: nowrap;
}

.sy-talep-ozet {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .5rem;
    margin-top: .2rem;
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* Satırdaki parçaları ayıran orta nokta; işaret ekrana elle yazılmaz. */
.sy-talep-ozet > span + span::before {
    content: "·";
    margin-right: .5rem;
    color: var(--border-color);
}


/* =============================================================================
   37. RAPOR — KARTLAR VE SAF CSS ÇUBUK GRAFİK
   -----------------------------------------------------------------------------
   Neden burada: rapor ekranında "şubeye göre", "türe göre", "iş ortağına göre"
   dağılımlar gösterilecek. 🔴 GRAFİK KÜTÜPHANESİ ALINMADI: üç yatay çubuk için
   ürüne 60-200 KB'lik bir bağımlılık girmesi, koyu temaya ayrıca uyarlanması ve
   yazı ölçeği ayarıyla birlikte büyümemesi anlamına gelirdi. Çubuk burada iki
   div'dir; temayı ve yazı ölçeğini kendiliğinden izler.

   🔴 TEK SATIR İÇİ STİL İSTİSNASI: .sy-cubuk-dolu'nun GENİŞLİĞİ ekranda
      style="width:42%" olarak verilir. Sebep: oran veriden gelir, CSS bunu
      bilemez; her olası yüzde için sınıf üretmek (w-1 ... w-100) hem dosyayı
      şişirir hem ara değerleri yuvarlardı. Satır içinde yalnız YÜZDE yazılır —
      renk, punto ve yükseklik yine buradan gelir.
   ============================================================================= */
.sy-rapor-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}

@media (min-width: 62rem) { .sy-rapor-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sy-rapor-kart {
    min-width: 0;
    padding: .75rem .85rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--kose);
    box-shadow: var(--golge);
}

.sy-rapor-kart > .baslik {
    display: block;
    margin-bottom: .5rem;
    font-size: var(--ty-orta);
    line-height: var(--lh-orta);
    font-weight: 700;
    color: var(--text-main);
}

.sy-cubuk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .15rem .6rem;
    padding: .3rem 0;
}

.sy-cubuk-etiket {
    grid-column: 1;
    min-width: 0;
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.sy-cubuk-deger {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--yazi-ailesi-sayi);
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    font-weight: 700;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Yol (boş kanal) ile dolu kısım aynı yükseklikte; yol satırın tamamını kaplar. */
.sy-cubuk-yol {
    grid-column: 1 / -1;
    grid-row: 2;
    /* 🔴 display:block ŞART. Ekranda bu iki öğe <span> olarak yazılabiliyor; satır içi
       bir kutuda yükseklik hiç uygulanmaz ve çubuk görünmez olur (ölçüldü: dolu kısım
       hiç çizilmedi). Etiketi <div> yazmaya zorlamak yerine stil kendi garantisini verir. */
    display: block;
    height: .45rem;
    border-radius: 1rem;
    background: var(--hover-bg);
    overflow: hidden;
}

.sy-cubuk-dolu {
    display: block;
    height: 100%;
    /* 🔴 En küçük genişlik VERİLMEDİ: %0'lık bir dilime görünür bir parça çizmek,
       ekranda olmayan bir değeri varmış gibi gösterirdi. Sıfır, sıfır görünür. */
    border-radius: inherit;
    background: var(--marka);
    transition: width var(--gecis-yavas);
}

/* Çubuk da durum rengini alabilir: .sy-cubuk-yol içindeki dolu kısma hâl sınıfı
   verilirse bölüm 31'deki eşleme kullanılır, yeni renk uydurulmaz. */
.sy-cubuk-dolu.yeni      { background: var(--err); }
.sy-cubuk-dolu.islemde   { background: var(--marka); }
.sy-cubuk-dolu.beklemede { background: var(--warn); }
.sy-cubuk-dolu.tamam     { background: var(--ok); }
.sy-cubuk-dolu.kapali    { background: var(--text-muted); }
.sy-cubuk-dolu.iptal     { background: color-mix(in srgb, var(--err) 55%, var(--text-muted)); }


/* =============================================================================
   38. GECİKMİŞ İŞ VURGUSU
   -----------------------------------------------------------------------------
   Neden burada: TalepOzet.GecikmisMi hesaplanmış bir alandır; hedef çözüm zamanı
   geçmiş iş listede gözden kaçmamalı. Vurgu SOL KENARDADIR — satırın zemini
   boyanmaz, çünkü zemin seçili satırı anlatır ve iki anlam çakışır.
   ============================================================================= */
.sy-gecikmis { box-shadow: inset .18rem 0 0 var(--warn); }

/* Liste satırında zaten 3 px'lik şeffaf bir sol şerit var (bölüm 21); orayı
   boyamak gölgeyle ikinci bir şerit çizmekten temiz. */
.sy-liste-satir.sy-gecikmis { box-shadow: none; border-left-color: var(--warn); }

/* Gecikmiş satır AYNI ZAMANDA seçiliyse iki işaret de durur: sol şerit seçimi
   (marka), onun içindeki ince çizgi gecikmeyi (uyarı) anlatır. */
.sy-liste-satir.sy-gecikmis.secili {
    border-left-color: var(--marka);
    box-shadow: inset .18rem 0 0 var(--warn);
}


/* =============================================================================
   39. ŞUBE KİMLİĞİ (KONUM ETİKETİ)
   -----------------------------------------------------------------------------
   Neden burada: Bu üründe bir talebin ilk sorusu "hangi şube" değil, "hangi KOD,
   hangi şube, hangi il/ilçe" sorusudur — saha ekibi işi şube koduyla konuşur,
   yönlendirme ili bilmeden yapılamaz. Önceden bu bilgi satırın alt sırasında
   --ty-mikro boyutunda ve soluk renkteydi; ilçe hiç yazmıyordu. Artık dördü de
   TEK ÖBEKTE ve alt sıranın kalanından BİR KADEME BÜYÜK + koyu renkte durur.

   🔴 Boyut yükseltmesi yalnız bu öbeğe verilir; alt sıranın tamamı büyütülürse
      satır yüksekliği artar ve ekrana sığan kayıt sayısı düşer (liste yoğunluğu
      bölüm 5'te bilinçli olarak sıkı seçildi).
   🔴 Kod kutusu --marka-soft zemin kullanır, kendi rengini uydurmaz: accent
      değişince (bölüm 7) etiket de onunla birlikte döner.
   ============================================================================= */
.sy-konum {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
    min-width: 0;
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    color: var(--text-main);
}

/* Pin simgesi bilgi değil işarettir: metnin önüne geçmez. */
.sy-konum > .bi { color: var(--text-muted); font-size: var(--ty-kucuk); }

/* Şube kodu: listedeki tek "arayıp bulunan" değer, o yüzden kutulanır. */
.sy-konum-kod {
    display: inline-block;
    padding: 0 .3rem;
    border: 1px solid color-mix(in srgb, var(--marka) 35%, transparent);
    border-radius: var(--kose-kucuk);
    background: var(--marka-soft);
    color: var(--marka-hover);
    font-weight: 700;
    white-space: nowrap;
}

.sy-konum-ad {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* İl / ilçe: şube adının devamıdır, ayracı kendi çizer — satıra elle "·"
   koymak gerekmiyor, boşsa ayraç da çizilmiyor. */
.sy-konum-yer {
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sy-konum-yer::before {
    content: "·";
    margin-right: .3rem;
    color: var(--border-color);
}

/* Dar ekranda şube adı ile il/ilçe alt alta düşer; ayraç orada yanlış yerde
   kalacağı için satır başına düşen etikette gizlenir. */
@media (max-width: 575.98px) {
    .sy-konum { gap: .2rem .3rem; }
}


/* =============================================================================
   40. KOLONLU IZGARA (sy-izgara) — SUTUN BASLIGI, SIRALAMA, SUTUN SUZGECI
   -----------------------------------------------------------------------------
   Neden burada: talep listesi 01.10.2026'da kart satirindan sutunlu izgaraya
   gecti (kullanici: "tum alanlar kolonlar halinde gorunmeli ve filtrelenebilmeli").
   Tablo kalibinin kendisi bolum 21'de (.sy-tablo-kabi + .sy-sik-tablo) zaten
   vardi; burada YALNIZ izgaraya ozgu uc sey tanimlanir: tiklanabilir baslik,
   ikinci satirdaki suzgec seridi ve sutun ayirici cizgiler.

   🔴 IKI SATIRLI YAPISKAN BASLIK TUZAGI. Bolum 21'deki kural thead icindeki HER
      th'ye top:0 verir. Suzgec satiri ikinci bir <tr> oldugu icin o da top:0'a
      yapisir ve baslik satirinin USTUNE biner. Cozum asagidadir: ilk satir 0'da,
      ikinci satir ilk satirin yuksekligi kadar asagida durur. Yukseklik SABIT
      yazilmaz, --sy-veri-bas-yuksekligi degiskeninden gelir; yazi olcegi
      degisince (bolum 2) tek yerden ayarlanir.
   ============================================================================= */
:root {
    /* Baslik satirinin yuksekligi: punto + dolgu + alt cizgi. Yazi olcegi
       buyudukce buyur, bu yuzden rem cinsindendir. */
    --sy-veri-bas-yuksekligi: 1.85rem;
}

:root[data-yazi="buyuk"],
:root[data-yazi="cokBuyuk"],
:root[data-yazi="devasa"] { --sy-veri-bas-yuksekligi: 2.1rem; }

/* 🔴 IZGARA SAYFASI GOVDEYI DOLDURUR.
      Kusur (02.10.2026 canlida olculdu): .sy-tablo-kabi'de max-height:100%
      vardi; yuzde, kartin yuksekligine gore cozuluyor, kartin yuksekligi de
      icerigine gore belirleniyordu. Dairesel hesap kabi 67 px'e dusurdu ve
      iki satirlik yapiskan basligin altinda veri satiri GORUNMEZ oldu.
      Dogru kurulum: kart govdeyi doldurur, izgara kabi kalan yeri alir ve
      KENDI ICINDE kayar. Yuzde yok, dairesel hesap yok.
   🔴 Dar ekranda (992 px alti) sayfa normal akar; izgaraya tavan verilir ki
      sayfa sonsuz uzamasin. */
.sy-veri-sayfa { display: flex; flex-direction: column; min-height: 0; }

.sy-veri-sayfa > .sy-tablo-kabi {
    flex: 1 1 auto;
    min-height: 12rem;
    max-height: none;
}

@media (min-width: 992px) {
    .sy-veri-sayfa { height: 100%; }
}

@media (max-width: 991.98px) {
    .sy-veri-sayfa > .sy-tablo-kabi { max-height: 60vh; max-height: 60dvh; }
}

/* --- Kolon secici --- */
.sy-kolon-secici {
    max-height: 18rem;
    overflow: auto;
    padding: .35rem .5rem;
    min-width: 13rem;
}

.sy-kolon-secici .form-check {
    margin: 0;
    padding-top: .1rem;
    padding-bottom: .1rem;
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
}

/* 🔴 SINIF ADI sy-veri-izgara'DIR, sy-izgara DEGIL. Bolum 20'de ayni adla
      BASKA bir sey var: "iki sutunlu icerik izgarasi", display:grid. Tabloya
      o adi verdigimizde tablo grid'e donustu, thead/tbody grid ogesi oldu ve
      duzen tumden coktu (02.10.2026 iki ayri ekran goruntusu: once hucreler
      harf harf dikey yazildi, sonra veri satiri basligin altinda kayboldu).
      Ad verirken once servis.css'te ARANIR.
   🔴 Hucreler tek satirdir; tabloya yapay bir asgari genislik VERILMEZ.
      Tablo dogal genisligini alir, sigmazsa .sy-tablo-kabi (bolum 21) yatay
      kaydirir. Veri izgarasinda dogru davranis budur. */

.sy-veri-izgara > thead > tr > th,
.sy-veri-izgara > tbody > tr > td {
    white-space: nowrap;
    vertical-align: middle;
}

/* 🔴 BASLIK SATIRININ YUKSEKLIGI SABITLENIR ve --sy-veri-bas-yuksekligi ile
      BIREBIR ayni olur. Sebep: suzgec satiri o degisken kadar asagi yapisiyor.
      Baslik dogal yuksekligine birakilirsa (olculdu: 25 px) degiskenden
      (29,6 px) kucuk kaliyor, suzgec satiri akistaki yerinden 5 px asagi
      kayiyor ve ilk veri satirinin uzerine biniyor (02.10.2026 olculdu).
      Iki sayi tek yerden gelsin diye yukseklik de ayni degiskenden verilir. */
.sy-veri-izgara > thead > tr:first-child > th {
    height: var(--sy-veri-bas-yuksekligi);
    padding-top: 0;
    padding-bottom: 0;
}

/* Uzun metin kolonu: tek satir, tasan kisim uc nokta. Genislik SINIRLI ki
   tek bir uzun konu butun tabloyu yana itmesin. */
.sy-veri-izgara td.sy-metin {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bolum 21'deki "hucre icindeki div tek satira kirpilir" kurali izgarada
   kelime kirmasin: orada word-break: break-word var. */
.sy-veri-izgara td > div {
    white-space: nowrap;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Suzgec satirindaki kutular daralmasin. */
.sy-veri-izgara > thead > tr.sy-suzgec-satiri > th { white-space: nowrap; }

/* Sutun ayirici: izgaranin "veri tablosu" hissini veren tek sey. Yalniz
   .sy-veri-izgara tasiyan tablolara girer, oteki tablolar sade kalir. */
.sy-veri-izgara > thead > tr > th + th,
.sy-veri-izgara > tbody > tr > td + td {
    border-left: 1px solid var(--border-color);
}

.sy-veri-izgara > tbody > tr { cursor: pointer; }

/* Satir ayirt edilebilirligi: zebra YOK (satir rengi "gecikmis" isaretiyle
   cakisirdi), bunun yerine ince alt cizgi ve belirgin hover. */
.sy-veri-izgara > tbody > tr > td { border-bottom: 1px solid var(--border-color); }

/* --- Tiklanabilir sutun basligi --- */
.sy-kolon-bas {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.sy-kolon-bas:hover { color: var(--marka); }
.sy-kolon-bas > .bi { font-size: var(--ty-mikro); }

/* Siralanmayan kolonun oku SOLUK durur: "buraya tiklanabilir" bilgisini verir
   ama hangi kolonun etkin oldugunu govdeleyip karistirmaz. */
.sy-sira-bos { opacity: .35; }

/* --- Sutun suzgec satiri --- */
.sy-tablo-kabi .sy-veri-izgara > thead > tr.sy-suzgec-satiri > th {
    top: var(--sy-veri-bas-yuksekligi);   /* 🔴 ust uste binmeyi kesen satir */
    z-index: calc(var(--z-yapisal) - 1);
    padding-top: .18rem;
    padding-bottom: .18rem;
    border-bottom: 2px solid var(--border-color);
    text-transform: none;
    letter-spacing: 0;
}

.sy-kolon-suzgec {
    min-width: 5rem;
    padding: .1rem .35rem;
    font-size: var(--ty-mikro);
    line-height: var(--lh-mikro);
    min-height: 0;
    height: auto;
}

/* Arama kutusunun tarayici "temizle" carpisi bu yukseklikte satiri bozuyor. */
.sy-kolon-suzgec::-webkit-search-cancel-button { display: none; }

/* Suzgec yazilmis kolon GORUNUR olsun: kullanici neden az kayit gordugunu
   kolonun kendisinden anlasin, alt bilgideki sayiyi aramak zorunda kalmasin. */
.sy-kolon-suzgec:not(:placeholder-shown),
.sy-kolon-suzgec:focus {
    border-color: var(--marka);
    background-color: var(--marka-soft);
}

/* Dar ekranda izgara yatay kayar; satir yuksekligi artmasin diye hucreler
   kirpilmaya devam eder (bolum 21'deki kural gecerli). */
@media (max-width: 767.98px) {
    .sy-kolon-suzgec { min-width: 4rem; }
}


/* =============================================================================
   41. TEKNOLOJIK ENTERPRISE KATMANI
   -----------------------------------------------------------------------------
   Kullanici 01.10.2026: "renk yesil, daha teknolojik enterprise bir tema haline
   getir, cok bos duruyor". Uc ayri sikayet var ve ucune ayri cevap verildi:

   (1) RENK — varsayilan marka tonu teal'den EMERALD yesile cekildi (bolum 1 ve
       bolum 6'daki koyu tema). Accent secenekleri DURUYOR; kullanici isterse
       gorunum menusunden eskisine doner.
   (2) TEKNOLOJIK — bu bolum: govde zemininde cok soluk bir izgara dokusu, kart
       basliklarinda marka serit, sayilarin tamamen tablo rakamiyla yazilmasi,
       ince ve net kenarliklar.
   (3) COK BOS — doldurmanin dogru yolu susleme degil BILGIDIR: talep listesi
       16 kolona cikti (bolum 40), ust cubuga bildirim zili geldi, ana sayfaya
       kirilim seritleri eklendi. Bu bolum yalniz onlarin cercevesini verir.

   🔴 DOKU PERFORMANS ICIN SABIT: repeating-linear-gradient tek bir boya katmani
      uretir, resim indirilmez, kaydirmada yeniden hesaplanmaz.
   🔴 Doku YALNIZ govde zemininde durur; kart icinde okunabilirligi bozardi.
   ============================================================================= */
.sayfa-govdesi {
    background-image:
        repeating-linear-gradient(0deg,  var(--izgara-cizgi) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(90deg, var(--izgara-cizgi) 0 1px, transparent 1px 32px);
    background-attachment: local;
}

/* Kart basligi: solda ince marka serit. Enterprise panellerde bolum baslangicini
   gosteren en ucuz ve en okunakli isaret budur. */
.card > .card-header {
    position: relative;
    padding-left: .85rem;
}

.card > .card-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45rem;
    bottom: .45rem;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--marka);
}

/* Sayi hucreleri: tablo rakami + hafif harf araligi. Rakamlar alt alta hizalanir,
   gozle karsilastirma yapilabilir. */
.sy-veri-izgara .sayi,
.sy-pano .sayi { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Pano karti: ust kenarda marka cizgisi. Kartlarin "kutu" degil "olcu" oldugunu
   anlatir ve bos ekranin tekduzeligini kirar. */
.sy-pano-kart { position: relative; overflow: hidden; }

.sy-pano-kart::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--marka), transparent);
}

/* --- Kirilim seridi: pano altinda tek satirda dagilim --- */
.sy-serit {
    display: flex;
    width: 100%;
    height: .55rem;
    border-radius: var(--kose-kucuk);
    overflow: hidden;
    background: var(--hover-bg);
}

.sy-serit-parca { height: 100%; }
.sy-serit-parca.yeni      { background: var(--bilgi); }
.sy-serit-parca.islemde   { background: var(--marka); }
.sy-serit-parca.beklemede { background: var(--warn); }
.sy-serit-parca.tamam     { background: var(--ok); }
.sy-serit-parca.kapali    { background: var(--text-muted); }
.sy-serit-parca.iptal     { background: color-mix(in srgb, var(--err) 55%, var(--text-muted)); }

.sy-serit-aciklama {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    margin-top: .35rem;
    font-size: var(--ty-mikro);
    line-height: var(--lh-mikro);
    color: var(--text-muted);
}

.sy-serit-aciklama > span { display: inline-flex; align-items: center; gap: .3rem; }

.sy-serit-nokta {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex: 0 0 auto;
}


/* =============================================================================
   42. DOSYA ONIZLEME PENCERESI
   -----------------------------------------------------------------------------
   Kullanici 01.10.2026: "servis kayitlarinin icine dokuman resim pdf de
   rahatlikla yukleyebilsin, vede modal icinde goruntuleyebilsin."

   🔴 PERDE VE PENCERE AYRI KARDES OGELERDIR. Perde penceresinin ICINDE olsaydi
      perdeye tiklamak pencereye de tiklamak olurdu ve pencere kendi uzerine
      tiklaninca kapanirdi. Ikisi de position:fixed, perde altta.
   🔴 YUKSEKLIK EKRANA GORE: dvh kullanilir (dinamik gorunum yuksekligi) ki
      telefonda adres cubugu kayarken pencere zıplamasin. Yedek olarak vh kalir.
   🔴 Govde KENDI ICINDE kayar; sayfa arkada kaymaz. Baslik seridi sabit durur.
   ============================================================================= */
.sy-onizleme-perde {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(2px);
    z-index: var(--z-ortu);
}

.sy-onizleme {
    position: fixed;
    inset: 2.5vh 2.5vw;
    inset: 2.5dvh 2.5vw;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--kose);
    box-shadow: var(--golge-yuksek);
    z-index: var(--z-acilir);
    overflow: hidden;
}

/* Pencere programla odaklanir; odak halkasi cizilmez (bolum 30 kurali). */
.sy-onizleme:focus { outline: none; }

.sy-onizleme-bas {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--hover-bg);
}

.sy-onizleme-ikon { font-size: var(--ty-baslik); color: var(--marka); }

.sy-onizleme-ad {
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sy-onizleme-alt {
    font-size: var(--ty-mikro);
    line-height: var(--lh-mikro);
    color: var(--text-muted);
}

.sy-onizleme-govde {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: .5rem;
    /* Saydam PNG'nin seffaf yerleri belli olsun diye damali olmayan ama notr
       bir zemin: kart zemininden bir ton koyu. */
    background: var(--hover-bg);
}

.sy-onizleme-resim {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--kose-kucuk);
    background: #ffffff;   /* saydam resimler beyaz kagit uzerinde okunur */
}

.sy-onizleme-cerceve {
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
}

/* Telefonda pencere ekrani tam kaplar: 2,5vw kenar bosluk dar ekranda yer israfi. */
@media (max-width: 575.98px) {
    .sy-onizleme {
        inset: 0;
        border-radius: 0;
        border: 0;
    }
}

/* --- Dosya listesi satirindaki ad artik DUGME --- */
.sy-dosya-baglanti {
    padding: 0;
    border: 0;
    background: none;
    color: var(--marka);
    font: inherit;
    text-align: left;
    cursor: pointer;
    word-break: break-word;
}

.sy-dosya-baglanti:hover { color: var(--marka-hover); text-decoration: underline; }

/* Indirme dugmesi satirin sagina yapisir, boyutun yanina. */
.sy-dosya-indir {
    flex: 0 0 auto;
    padding: .1rem .4rem;
    line-height: 1;
}


/* =============================================================================
   43. POSTA KUTUSU DUZENI (UC PANEL) — ERP POSTA EKRANI DESENI
   -----------------------------------------------------------------------------
   Kullanici 01.10.2026: "iskay erp tarafindaki mailbox desenini bu tarafa da
   kopyala". Alinan DUZEN KALIBIDIR: klasor agaci + ileti listesi + okuma bolmesi.

   🔴 KAYNAK BLOK EKRANIN KENDI <style> ETIKETINDEYDI, buraya TASINDI. ERP'de
      ekranin icine yazilan 137 satirlik blok tema degisince geride kalmisti;
      bu uründe tek tema dosyasi vardir (bolum 0 kurali).
   🔴 OLCULER PX DEGIL REM: kaynak blok 61 yerde px kullaniyordu. Burada yazi
      olcegi degisince (bolum 2) panel de buyur.
   🔴 YUKSEKLIK ERP'nin calc(100vh - 110px) SABITIYLE ALINMADI: o sayi ERP'nin
      kendi ust cubugudur. Burada kabuk zaten esnek kutudur; panel 100% alir ve
      kendi icinde kayar.
   ============================================================================= */
.sy-kutu {
    display: flex;
    gap: .5rem;
    min-height: 0;
    height: 100%;
    align-items: stretch;
}

.sy-kutu-sol,
.sy-kutu-orta,
.sy-kutu-sag {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--kose);
    overflow: hidden;
}

.sy-kutu-sol  { flex: 0 0 13rem; }
.sy-kutu-orta { flex: 0 0 24rem; }
.sy-kutu-sag  { flex: 1; }

.sy-kutu-sol > nav { overflow: auto; padding: .25rem; }

.sy-kutu-bas,
.sy-kutu-arac,
.sy-kutu-oku-bas {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--hover-bg);
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    font-weight: 600;
    color: var(--text-main);
    flex: 0 0 auto;
}

/* --- Klasor satiri --- */
.sy-kutu-klasor {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: .35rem .5rem;
    border: 0;
    border-radius: var(--kose-kucuk);
    background: none;
    color: var(--text-main);
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    text-align: left;
    cursor: pointer;
}

.sy-kutu-klasor:hover { background: var(--hover-bg); }

.sy-kutu-klasor.aktif {
    background: var(--marka-soft);
    color: var(--marka-hover);
    font-weight: 600;
}

.sy-kutu-klasor > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sy-kutu-rozet {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 0 .35rem;
    border-radius: var(--kose-mikro);
    background: var(--marka-soft);
    color: var(--marka-hover);
    font-size: var(--ty-mikro);
    line-height: calc(var(--lh-mikro) + .15rem);
    font-weight: 700;
}

/* --- Ileti listesi: iki satirli kart (ERP'deki .msatir karsiligi) --- */
.sy-kutu-liste { overflow: auto; flex: 1; min-height: 0; }

.sy-kutu-satir {
    display: block;
    width: 100%;
    padding: .4rem .55rem;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid transparent;
    background: var(--card-bg);
    text-align: left;
    cursor: pointer;
}

.sy-kutu-satir:hover { background: var(--hover-bg); }
.sy-kutu-satir.secili { background: var(--marka-soft); border-left-color: var(--marka); }

/* Gonderilemeyen ileti SOL KENARDAN isaretlenir; zemin boyanmaz cunku zemin
   secili satiri anlatir ve iki anlam cakisirdi (bolum 38'deki ayni karar). */
.sy-kutu-satir.hatali { border-left-color: var(--err); }

.sy-kutu-satir-ust,
.sy-kutu-satir-alt {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.sy-kutu-satir-ust { font-size: var(--ty-kucuk); line-height: var(--lh-kucuk); }
.sy-kutu-satir-alt { font-size: var(--ty-mikro); line-height: var(--lh-mikro); color: var(--text-muted); margin-top: .15rem; flex-wrap: wrap; }

.sy-kutu-kanal { color: var(--marka); flex: 0 0 auto; }

.sy-kutu-kim {
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sy-kutu-trh { margin-left: auto; flex: 0 0 auto; color: var(--text-muted); font-size: var(--ty-mikro); }

.sy-kutu-konu {
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: .1rem;
}

.sy-kutu-alt {
    flex: 0 0 auto;
    padding: .3rem .6rem;
    border-top: 1px solid var(--border-color);
    font-size: var(--ty-mikro);
    line-height: var(--lh-mikro);
    color: var(--text-muted);
}

/* --- Okuma bolmesi --- */
.sy-kutu-oku-govde { flex: 1; min-height: 0; overflow: auto; padding: .6rem; }
.sy-kutu-oku-konu { font-size: var(--ty-govde); line-height: var(--lh-govde); font-weight: 600; }
.sy-kutu-oku-alt {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .4rem;
    font-size: var(--ty-mikro);
    line-height: var(--lh-mikro);
    font-weight: 400;
    color: var(--text-muted);
}

.sy-kutu-kunye {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .15rem .6rem;
    margin: 0 0 .6rem;
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
}

.sy-kutu-kunye dt { color: var(--text-muted); font-weight: 600; }
.sy-kutu-kunye dd { margin: 0; color: var(--text-main); }

.sy-kutu-govde-metin {
    padding: .5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--kose-kucuk);
    background: var(--hover-bg);
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
    white-space: pre-wrap;
    word-break: break-word;
}

/* 🔴 TASINAN POSTA EKRANININ YUKSEKLIGI BIZIM KABUGUMUZA UYARLANIR.
      ERP'nin kendi <style> blogunda .mail-kabuk { height: calc(100vh - 110px) }
      yaziyor; o 110 px ERP'nin ust cubugu + alt seridi demek. Bizim kabugumuz
      artik kesin yukseklikte ve govde kendi icinde kaydigi icin dogru deger
      %100'dur. Ozgulluk IKI sinif: sayfanin kendi <style> blogu belgede daha
      SONRA geldigi icin tek sinifla yazsak kaybederdik.
   🔴 Tasinan dosyaya DOKUNULMADI; uyarlama burada duruyor. */
.sayfa-govdesi .mail-kabuk { height: 100%; min-height: 0; }

/* --- Telefon: TEK PANEL. ERP'de de boyle; uc paneli 375 px'e sigdirmak
       okunakli degil, kullanici panel arasinda gezinir. --- */
@media (max-width: 991.98px) {
    .sy-kutu-sol,
    .sy-kutu-orta,
    .sy-kutu-sag { display: none; flex: 1 1 100%; }

    .sy-kutu-sol.mobil-acik,
    .sy-kutu-orta.mobil-acik,
    .sy-kutu-sag.mobil-acik { display: flex; }
}


/* =============================================================================
   44. TEKLIF EKRANI
   -----------------------------------------------------------------------------
   Kalem izgarasindaki sayi kutulari ve toplam blogu. Izgaranin kendisi bolum
   40'tan gelir; burada yalniz teklife ozgu olculer var.
   ============================================================================= */
.sy-kalem-sayi  { min-width: 5.5rem; }
.sy-kalem-oran  { min-width: 4.5rem; }
.sy-kalem-birim { min-width: 4.5rem; }

.sy-teklif-toplam {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-left: auto;
    margin-top: .6rem;
    max-width: 22rem;
    font-size: var(--ty-kucuk);
    line-height: var(--lh-kucuk);
}

.sy-teklif-toplam > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .2rem .5rem;
    border-bottom: 1px solid var(--border-color);
}

.sy-teklif-toplam > div.genel {
    border-bottom: 0;
    border-top: 2px solid var(--marka);
    margin-top: .2rem;
    padding-top: .35rem;
    font-size: var(--ty-govde);
    font-weight: 700;
    color: var(--text-main);
}

/* Yan form: liste ile form yan yana duran ekranlarda (musteri karti). */
.sy-yan-form {
    padding: .6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--kose);
    background: var(--hover-bg);
}


/* =============================================================================
   45. ZIL ROZETI VE DAR PANO
   ============================================================================= */
.sy-zil { position: relative; }

.sy-zil-rozet {
    position: absolute;
    top: .05rem;
    right: .05rem;
    min-width: 1rem;
    padding: 0 .2rem;
    border-radius: .6rem;
    background: var(--err);
    color: #ffffff;
    font-size: .55rem;
    line-height: 1rem;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
}

/* Dar pano: ozet seridi olarak kullanilan kucuk kart izgarasi. Ana sayfadaki
   buyuk panodan farki, satir basina daha cok kart almasi. */
.sy-pano-dar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }

@media (min-width: 48rem)  { .sy-pano-dar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 62rem)  { .sy-pano-dar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 85rem)  { .sy-pano-dar { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.sy-pano-dar .sy-pano-sayi { font-size: var(--ty-baslik); }

/* ---------------------------------------------------------------------------
   SATIR BAGLANTISI — veri izgarasinda kaydi acan gercek baglanti.
   🔴 Satirin kendisi @onclick ile de aciliyor, ama onclick'li bir <tr>
      klavyeyle odaklanamaz ve yeni sekmede acilamaz. Bu baglanti o yuzden
      var; gorunumu hucrenin metninden AYRILMAZ, yalniz odak ve fare
      ustunde kendini belli eder.
   --------------------------------------------------------------------------- */
.sy-satir-baglanti {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.sy-satir-baglanti:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sy-satir-baglanti:focus-visible {
    outline: 2px solid var(--marka);
    outline-offset: 2px;
    border-radius: 3px;
}