/* ============================================================================
   icra uzmanı — arayüz teması

   Bootstrap üstüne geçen tema katmanı. Bootstrap'in ızgarası ve yardımcı
   sınıfları korunur; görünüm tamamen buradan gelir.

   Tasarım kararı: avukat bu ekranda günde yüzlerce satır okuyacak. Yoğun ama
   nefes alan bir düzen, güçlü tipografik hiyerarşi, sakin renk. Süs yok;
   modern olan şey netlik.
   ========================================================================= */

:root {
    color-scheme: light dark;

    /* Yüzeyler */
    --yz-zemin: #f4f6fb;
    --yz-kart: #ffffff;
    --yz-kenar: #e3e8f0;
    --yz-kenar-koyu: #ccd5e3;
    --yz-vurgu-zemin: #eef2ff;

    /* Metin */
    --yz-metin: #16202e;
    --yz-metin-soluk: #5b6b81;
    --yz-metin-cok-soluk: #8996a8;

    /* Marka */
    --yz-ana: #3d5afe;
    --yz-ana-koyu: #2f47cc;
    --yz-ana-soluk: #e8ecff;

    /* Durum */
    --yz-basari: #0f9d58;
    --yz-basari-zemin: #e6f6ee;
    --yz-uyari: #d97706;
    --yz-uyari-zemin: #fef3e2;
    --yz-tehlike: #dc2626;
    --yz-tehlike-zemin: #fdeaea;
    --yz-bilgi: #0891b2;
    --yz-bilgi-zemin: #e4f6fa;

    /* Kenar yuvarlaklığı ve gölge */
    --yz-r: 10px;
    --yz-r-kucuk: 6px;
    --yz-golge: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --yz-golge-orta: 0 4px 12px rgba(16, 24, 40, .08);

    --yz-kenar-cubugu: 232px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --yz-zemin: #0e131b;
        --yz-kart: #161d28;
        --yz-kenar: #26303f;
        --yz-kenar-koyu: #33405280;
        --yz-vurgu-zemin: #1b2436;
        --yz-metin: #e6ecf5;
        --yz-metin-soluk: #94a3b8;
        --yz-metin-cok-soluk: #64748b;
        --yz-ana: #7c8fff;
        --yz-ana-koyu: #94a3ff;
        --yz-ana-soluk: #1e2745;
        --yz-basari-zemin: #10261c;
        --yz-uyari-zemin: #2a1f0e;
        --yz-tehlike-zemin: #2a1414;
        --yz-bilgi-zemin: #0d2630;
        --yz-golge: 0 1px 2px rgba(0, 0, 0, .3);
        --yz-golge-orta: 0 4px 14px rgba(0, 0, 0, .4);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   EK TOKEN'LAR — 2026-08 görsel yenileme.
   Yukarıdaki :root bloğu KORUNUYOR; burada yalnız (a) rol boşlukları
   dolduruluyor, (b) AA altında ölçülen değerlerin metin karşılıkları açılıyor.
   Sonra gelen kazandığı için 30+ ekranı besleyen mevcut değerlere dokunulmadan
   yeni roller doğuyor.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Ürün kabuğu: ÜÇÜNCÜ yüzey katmanı ───────────────────────────────────
       .kenar-cubugu gradyanının literal hex'leri tokena çıkarıldı. Tek kaynak:
       kenar çubuğu da artık bu tokenı okuyor.
       Her iki temada AYNI — otorite yüzeyi tema tercihiyle kimlik değiştirmez. */
    --yz-kabuk-ust: #131b29;
    --yz-kabuk-alt: #0d1420;
    --yz-kabuk-metin: #eaf0fa;              /* #131b29 üstünde 15.10 ✓ AAA · haleli en açık noktada 11.37 ✓ */
    --yz-kabuk-soluk: #9fb0c8;              /* 7.84 ✓ AAA · haleli en açık noktada 5.90 ✓ AA */
    --yz-kabuk-kenar: rgba(255, 255, 255, .09);
    --yz-kabuk-izgara: rgba(255, 255, 255, .055);
    --yz-kabuk-vurgu: rgba(61, 90, 254, .18);
    --yz-kabuk-baglanti: #a8b6ff;           /* 8.89 ✓ AAA · haleli 6.70 ✓ — --yz-ana koyu bantta 3.36, metin olamaz */
    --yz-kabuk-hale: rgba(61, 90, 254, .28);/* ölçüldü: bu opaklıkta soluk metin 5.90 — tavan budur, artırılmaz */

    /* ── Yalnız tanıtım + giriş zemini ───────────────────────────────────────
       Global --yz-zemin (#f4f6fb) BOZULMUYOR. Bu token karta göre ΔL* 6.0
       üretir (eskisi 3.1 = görünmez); --yz-metin-soluk burada 4.67 ✓ AA. */
    --yz-zemin-tanitim: #eaeef6;

    /* ── Durum renginin İKİNCİ rolü: tint zemin üstünde küçük punto metin ────
       Mevcut --yz-basari/uyari/tehlike/bilgi DOLGU-İKON rolünde kalır (3:1 yeter).
       Rozetlerin beşi de AA altındaydı: 3.14 / 2.90 / 4.17 / 3.31 / 4.37. */
    --yz-basari-metin:  #0b6e3f;   /* #e6f6ee üstünde 5.66 ✓ */
    --yz-uyari-metin:   #92400e;   /* #fef3e2 üstünde 6.46 ✓ */
    --yz-tehlike-metin: #b91c1c;   /* #fdeaea üstünde 5.59 ✓ · beyazda 6.47 ✓ */
    --yz-bilgi-metin:   #0b6a83;   /* #e4f6fa üstünde 5.54 ✓ */
    --yz-ana-metin:     #2f47cc;   /* #e8ecff üstünde 6.18 ✓ · beyazda 7.26 ✓ · #eaeef6 üstünde 6.24 ✓ */

    /* ── Marka renginin ÜÇÜNCÜ rolü: üstünde BEYAZ metin taşıyan dolu yüzey ──
       Ölçüldü (15.08.2026, canlı sayfa): akış diyagramındaki "SİZ" rozeti
       --yz-ana dolgusu + beyaz metinle karanlık temada 2.90:1 veriyordu —
       açık temada 5.13 olduğu için gözden kaçmıştı. Sebep --yz-ana'nın
       karanlıkta AÇILMASI (#3d5afe → #7c8fff): koyu zeminde okunur bir DOLGU
       olsun diye açılıyor, ama üstünde beyaz metin taşıyamaz.

       Bu token iki temada da AYNI ve bilerek: beyaz metnin okunabilirliği
       çevredeki temaya değil, yalnızca altındaki dolguya bağlıdır. */
    --yz-ana-dolgu:     #2f47cc;   /* üstünde beyaz 7.26 ✓ AAA — her iki temada */
    --yz-uyari-koyu:    #92400e;   /* DOLU amber şerit; beyaz metin 7.09 ✓ (--yz-uyari üstünde beyaz 3.19 ✗) */

    /* ── Kontrol sınırı — WCAG 1.4.11, non-text 3:1 ──────────────────────────
       --yz-kenar beyaz üstünde 1.23, --yz-kenar-koyu 1.48: ikisi de form/buton
       sınırı olamaz. Kart kenarı olarak 1.23 kalmaya devam eder (dekoratif). */
    --yz-kenar-kontrol: #76849b;   /* beyazda 3.79 ✓ · #eaeef6 üstünde 3.26 ✓ */

    /* ── Odak halkası — WCAG 2.2 Focus Appearance (≥2px çevre, 3:1) ────────── */
    --yz-halka: #2f47cc;           /* beyaz 7.26 ✓ · zemin 6.24 ✓ · koyu bantta #a8b6ff'e döner */

    /* ── Izgara dokusu (açık yüzeyler) ─────────────────────────────────────── */
    --yz-izgara: rgba(22, 32, 46, .05);

    /* ── Yükseklik: 2 kademe yerine 4; kademe ROLE bağlıdır ──────────────────
       tablo satırı 0 · kart 1 · açılır/popover 2 · vitrin ve modal 3 · taşan 4 */
    --yz-parlak: inset 0 1px 0 rgba(255, 255, 255, .75);
    --yz-kat-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --yz-kat-2: 0 2px 4px rgba(16, 24, 40, .05), 0 8px 18px rgba(16, 24, 40, .08);
    --yz-kat-3: 0 2px 6px rgba(16, 24, 40, .06), 0 16px 32px rgba(16, 24, 40, .12);
    --yz-kat-4: 0 4px 10px rgba(16, 24, 40, .08), 0 28px 56px rgba(16, 24, 40, .18);
    /* Geriye uyum: .kart, .card, .rakam-kutu, .donem-secici a.etkin bu iki adı
       kullanıyor. Takma ad verilmezse uygulama eski gölge dilinde kalır ve
       tanıtım ile uygulama ayrışır. */
    --yz-golge: var(--yz-kat-1);
    --yz-golge-orta: var(--yz-kat-2);

    /* ── Biçim ──────────────────────────────────────────────────────────────
       En büyük yuvarlaklık 10px'ti; 640px genişliğindeki kahraman yüzeyinde
       10px "kart" değil "kutu" gibi okunuyor. */
    --yz-r-buyuk: 16px;
    --yz-ust-yuk: 64px;            /* sticky şeridin yüksekliği; scroll-padding buradan okunur */

    /* ── Marka gradyanı — MOR UÇ KALDIRILDI ─────────────────────────────────
       Eski uçtaki #7c4dff "AI purple gradient" kalıbıydı. Tek hue içinde kalınıyor. */
    --yz-marka-gradyan: linear-gradient(135deg, #3d5afe 0%, #2f47cc 100%);

    /* ── Tipografi ──────────────────────────────────────────────────────────
       Tanımlayıcı yığını 0/O ve 1/l ayırır: dosya no, TC, IBAN, SHA-256. */
    --yz-yazi-tanimlayici: ui-monospace, "Cascadia Mono", Consolas, "Segoe UI Mono", monospace;
    --yz-yazi-mikro: .6875rem;     /* 11px — yalnız etiket, ASLA cümle */
    --yz-yazi-kucuk: .8125rem;     /* 13px */
    --yz-yazi-veri: .875rem;       /* 14px — tablo/form tabanı */
    --yz-yazi-govde: .9375rem;     /* 15px — okunan metin */
    --yz-yazi-govde-buyuk: clamp(1rem, .95rem + .35vw, 1.125rem);

    /* ── Hareket ────────────────────────────────────────────────────────────── */
    --yz-sure-hizli: 120ms;
    --yz-sure-orta: 180ms;
    --yz-egri: cubic-bezier(.2, .6, .35, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --yz-zemin-tanitim: #0b1017;      /* karta (#161d28) göre ΔL* 6.1 — iki modda simetrik */

        /* Durum ÖN PLAN renkleri karanlıkta HİÇ tanımlanmıyordu; açık tema
           değerleri koyu tint üstünde 3.5-4.3'e düşüyor. Doğru değerler
           rapor.css'te zaten vardı, buraya taşınmamıştı. */
        --yz-basari:  #34d399;            /* kart 8.81 ✓ · tint 8.30 ✓ */
        --yz-uyari:   #fbbf24;            /* 10.14 ✓ / 9.67 ✓ */
        --yz-tehlike: #f87171;            /*  6.12 ✓ / 6.28 ✓ */
        --yz-bilgi:   #38bdf8;            /*  7.90 ✓ / 7.33 ✓ */

        --yz-basari-metin:  #34d399;
        --yz-uyari-metin:   #fbbf24;
        --yz-tehlike-metin: #f87171;
        --yz-bilgi-metin:   #38bdf8;
        --yz-ana-metin:     #94a3ff;      /* #1e2745 üstünde 6.25 ✓ · kart 5.83 ✓ */
        --yz-uyari-koyu:    #92400e;      /* dolu şerit iki temada aynı; beyaz metin 7.09 ✓ */

        /* %50 alfa (#33405280) "talep mi bildirim mi" ayrımını karanlıkta
           söndürüyordu (.satir-bildirim, .gerekce, .oncelik-dusuk). Opaklaştırıldı. */
        --yz-kenar-koyu: #334052;

        --yz-kenar-kontrol: #6b7b93;      /* kart 3.93 ✓ · zemin 4.43 ✓ */
        --yz-halka: #94a3ff;              /* kart 7.21 ✓ · zemin 8.12 ✓ */
        --yz-izgara: rgba(148, 163, 184, .09);

        --yz-parlak: inset 0 1px 0 rgba(255, 255, 255, .055);
        --yz-kat-1: 0 1px 2px rgba(0, 0, 0, .4);
        --yz-kat-2: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 18px rgba(0, 0, 0, .45);
        --yz-kat-3: 0 2px 6px rgba(0, 0, 0, .45), 0 16px 32px rgba(0, 0, 0, .5);
        --yz-kat-4: 0 4px 10px rgba(0, 0, 0, .5), 0 28px 56px rgba(0, 0, 0, .6);

        --yz-marka-gradyan: linear-gradient(135deg, #7c8fff 0%, #4f6bff 100%);
    }
}

/* ── Bootstrap köprüsü ────────────────────────────────────────────────────────
   Bootstrap 5.3'ün karanlık paleti yalnız data-bs-theme ile açılır; projede o
   öznitelik yok ve tanıtımda JS de yok. Öznitelik yazmak yerine --bs-* değerleri
   --yz-*'a bağlanıyor: tek yer, tek doğru, sıfır işaretleme değişikliği.
   (site.css bootstrap.min.css'ten SONRA yükleniyor — üç layout'ta da doğrulandı.) */
:root {
    --bs-body-bg: var(--yz-zemin);
    --bs-body-color: var(--yz-metin);
    --bs-emphasis-color: var(--yz-metin);
    --bs-border-color: var(--yz-kenar);
    --bs-secondary-color: var(--yz-metin-soluk);
    --bs-secondary-bg: var(--yz-vurgu-zemin);
    --bs-tertiary-bg: var(--yz-zemin);
    --bs-primary: var(--yz-ana);
    --bs-primary-bg-subtle: var(--yz-ana-soluk);
    --bs-warning: var(--yz-uyari);
}

/* ─── Temel ──────────────────────────────────────────────────────────────── */

body {
    background: var(--yz-zemin);
    color: var(--yz-metin);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--yz-ana); text-decoration: none; }
a:hover { color: var(--yz-ana-koyu); text-decoration: underline; }

/* Segoe UI variable bir yazı tipi DEĞİL: 650 tarayıcıda 700'e yuvarlanıyordu,
   yani h1/h2/h3 üçü de Bold basılıyor ve ağırlık hiyerarşisi hayalî kalıyordu.
   Ağırlıklar gerçek kesitlere yuvarlandı — 600 = Segoe UI Semibold. */
h1, h2, h3, h4, h5, h6 { color: var(--yz-metin); font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }

.metin-soluk, .text-muted { color: var(--yz-metin-soluk) !important; }

/* Sayısal sütunlar hizalı okunsun */
.sayi, td.sayi, .rakam {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ─── Kabuk: kenar çubuğu + içerik ───────────────────────────────────────── */

.kabuk { display: flex; min-height: 100vh; }

.kenar-cubugu {
    width: var(--yz-kenar-cubugu);
    flex: 0 0 var(--yz-kenar-cubugu);
    /* Kabuk tokenından okunuyor: "tanıtımdaki lacivert = uygulamadaki lacivert"
       iddiası ancak tek kaynaktan beslenirse kanıtlanabilir kalır. */
    background: linear-gradient(180deg, var(--yz-kabuk-ust) 0%, var(--yz-kabuk-alt) 100%);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.marka {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1.05rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.marka-im {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--yz-marka-gradyan);
    display: grid; place-items: center;
    font-weight: 700; font-size: .8rem; color: #fff;
    flex: 0 0 auto;
}

/* Renk KOŞULSUZ #fff idi; giriş ekranı gibi açık zeminli bağlamlarda marka adı
   beyaz üstüne beyaz düşüyordu. Taban renk bağlama uyar, koyu kabukta
   aşağıdaki bağlamsal kural beyaza çevirir. */
.marka-ad { font-weight: 600; color: var(--yz-metin); font-size: .95rem; letter-spacing: -.01em; line-height: 1.15; }
.marka-alt { font-size: .68rem; color: #7c8ba1; letter-spacing: .04em; text-transform: uppercase; }

.kenar-menu { padding: .7rem .6rem; flex: 1; overflow-y: auto; }

.kenar-baslik {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .09em;
    color: #64748b; padding: .8rem .6rem .35rem; font-weight: 600;
}

.kenar-link {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .65rem;
    border-radius: var(--yz-r-kucuk);
    color: #cbd5e1;
    font-weight: 500;
    margin-bottom: 1px;
    transition: background .12s ease, color .12s ease;
}

.kenar-link:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }

.kenar-link.etkin {
    background: var(--yz-ana);
    color: #fff;
    box-shadow: 0 2px 8px rgba(61, 90, 254, .35);
}

.kenar-link svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .9; }

.kenar-rozet {
    margin-left: auto;
    background: rgba(255, 255, 255, .14);
    border-radius: 20px;
    padding: 0 .42rem;
    font-size: .7rem;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

.kenar-link.etkin .kenar-rozet { background: rgba(255, 255, 255, .25); }

.kenar-alt {
    padding: .75rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: .7rem;
    color: #64748b;
}

/* ── Çıkış bağlantısı ─────────────────────────────────────────────────────────
   Menü bağlantılarından daha sönük ama tıklanabilirliği belli: çıkış günlük
   işin parçası değil, ama arandığında bulunamayacak kadar da saklı olmamalı.
   Ortak bir bilgisayarda oturumu kapatamamak bir güvenlik eksiğidir. */
.kenar-cikis {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #94a3b8;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    padding: .35rem 0;
}

.kenar-cikis:hover { color: #e2e8f0; }
.kenar-cikis svg { width: 15px; height: 15px; flex: none; }

/* Kurulum notu çıkıştan sonra ve daha sönük: bilgi, eylem değil. */
.kenar-alt-not { margin-top: .5rem; line-height: 1.5; }

.icerik { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ─── Üst şerit ──────────────────────────────────────────────────────────── */

.ust-serit {
    background: var(--yz-kart);
    border-bottom: 1px solid var(--yz-kenar);
    padding: .6rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
    position: sticky; top: 0; z-index: 20;
}

.olcu { display: flex; align-items: baseline; gap: .4rem; }
.olcu-etiket { font-size: .72rem; color: var(--yz-metin-soluk); text-transform: uppercase; letter-spacing: .05em; }
.olcu-deger { font-weight: 700; font-variant-numeric: tabular-nums; }
.olcu-ayrac { width: 1px; height: 26px; background: var(--yz-kenar); }

/* ─── Sayfa başlığı ──────────────────────────────────────────────────────── */

.sayfa { padding: 1.35rem 1.25rem 2.5rem; flex: 1; }

.sayfa-basi {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.15rem;
}

.sayfa-basi p { color: var(--yz-metin-soluk); margin: .2rem 0 0; max-width: 68ch; }

/* ─── Kart ───────────────────────────────────────────────────────────────── */

.kart {
    background: var(--yz-kart);
    border: 1px solid var(--yz-kenar);
    border-radius: var(--yz-r);
    box-shadow: var(--yz-golge);
    margin-bottom: 1.1rem;
    overflow: hidden;
}

.kart-basi {
    padding: .8rem 1.05rem;
    border-bottom: 1px solid var(--yz-kenar);
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    flex-wrap: wrap;
}

.kart-basi h2, .kart-basi h3 { margin: 0; font-size: .95rem; }
.kart-govde { padding: 1.05rem; }
.kart-govde-sifir { padding: 0; }

/* Bootstrap .card kullanan sayfalar da aynı görünsün */
.card {
    background: var(--yz-kart) !important;
    border: 1px solid var(--yz-kenar) !important;
    border-radius: var(--yz-r) !important;
    box-shadow: var(--yz-golge);
}
.card-header { background: transparent !important; border-bottom: 1px solid var(--yz-kenar) !important; font-weight: 600; }

/* ─── Tablo ──────────────────────────────────────────────────────────────── */

.table { color: var(--yz-metin); margin-bottom: 0; --bs-table-bg: transparent; }

.table > thead > tr > th {
    background: var(--yz-vurgu-zemin);
    color: var(--yz-metin-soluk);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    border-bottom: 1px solid var(--yz-kenar);
    padding: .6rem .85rem;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: .68rem .85rem;
    border-bottom: 1px solid var(--yz-kenar);
    vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr:hover > td { background: var(--yz-vurgu-zemin); }

.tablo-sar { overflow-x: auto; }

/* ─── Rozetler ───────────────────────────────────────────────────────────── */

.rozet {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .16rem .5rem;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}

.rozet-ana      { background: var(--yz-ana-soluk);     color: var(--yz-ana);     }
.rozet-basari   { background: var(--yz-basari-zemin);  color: var(--yz-basari);  }
.rozet-uyari    { background: var(--yz-uyari-zemin);   color: var(--yz-uyari);   }
.rozet-tehlike  { background: var(--yz-tehlike-zemin); color: var(--yz-tehlike); }
.rozet-bilgi    { background: var(--yz-bilgi-zemin);   color: var(--yz-bilgi);   }
.rozet-sessiz   { background: var(--yz-vurgu-zemin);   color: var(--yz-metin-soluk); border-color: var(--yz-kenar); }

/* Bootstrap rozetleri de uyumlansın */
.badge { border-radius: 20px; font-weight: 600; padding: .28rem .55rem; }

/* ─── Öncelik şeridi ─────────────────────────────────────────────────────── */

.oncelikli { border-left: 3px solid var(--yz-ana); }
.oncelik-yuksek { border-left: 3px solid var(--yz-tehlike); }
.oncelik-orta   { border-left: 3px solid var(--yz-uyari); }
.oncelik-dusuk  { border-left: 3px solid var(--yz-kenar-koyu); }

/* ─── Gerekçe kutusu ─────────────────────────────────────────────────────── */

/* Ürünün güveni bu metne bağlı: avukat gerekçeyi okumadan onaylamamalı,
   o yüzden küçük gri bir dipnot değil, okunaklı bir blok olarak duruyor. */
.gerekce {
    background: var(--yz-vurgu-zemin);
    border-left: 2px solid var(--yz-kenar-koyu);
    border-radius: 0 var(--yz-r-kucuk) var(--yz-r-kucuk) 0;
    padding: .5rem .75rem;
    color: var(--yz-metin-soluk);
    font-size: .84rem;
    margin-top: .35rem;
}

/* ─── Düğmeler ───────────────────────────────────────────────────────────── */

/* Ölçüler burada DOĞRUDAN yazılıyor; Bootstrap'in .btn-lg'si yalnız --bs-*
   atadığı için hiç okunmuyordu. Büyük düğme için dosya sonundaki .btn-lg kuralı
   bu bloğun ÜSTÜNE biner. .btn-sm bu bloktan sonra geldiği için bozulmuyor. */
.btn {
    border-radius: var(--yz-r-kucuk); font-weight: 500;
    font-size: var(--yz-yazi-veri); padding: .38rem .8rem;
    transition: background-color var(--yz-sure-hizli) var(--yz-egri),
                border-color var(--yz-sure-hizli) var(--yz-egri),
                box-shadow var(--yz-sure-hizli) var(--yz-egri),
                color var(--yz-sure-hizli) var(--yz-egri);
}
/* Zemin doğrudan yazıldığı için --bs-btn-bg üzerinden gitmek çalışmaz;
   mevcut mekanizma korunuyor. */
.btn-primary { background: var(--yz-ana); border-color: var(--yz-ana); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible {
    background: var(--yz-ana-koyu); border-color: var(--yz-ana-koyu); color: #fff;
}
.btn-sm { font-size: .78rem; padding: .25rem .6rem; }

.btn-outline-secondary {
    border-color: var(--yz-kenar-koyu);
    color: var(--yz-metin-soluk);
    background: var(--yz-kart);
}
.btn-outline-secondary:hover { background: var(--yz-vurgu-zemin); color: var(--yz-metin); border-color: var(--yz-kenar-koyu); }

.btn:disabled, .btn.disabled { opacity: .5; }

/* ─── Form ───────────────────────────────────────────────────────────────── */

.form-control, .form-select {
    background: var(--yz-kart);
    border-color: var(--yz-kenar-koyu);
    color: var(--yz-metin);
    border-radius: var(--yz-r-kucuk);
    font-size: .85rem;
    padding: .38rem .65rem;
}

.form-control:focus, .form-select:focus {
    background: var(--yz-kart);
    color: var(--yz-metin);
    border-color: var(--yz-ana);
    box-shadow: 0 0 0 3px var(--yz-ana-soluk);
}

.form-label { font-size: .8rem; font-weight: 600; color: var(--yz-metin-soluk); margin-bottom: .25rem; }
.form-check-input:checked { background-color: var(--yz-ana); border-color: var(--yz-ana); }

/* ─── Uyarı kutuları ─────────────────────────────────────────────────────── */

.alert { border-radius: var(--yz-r); border: 1px solid transparent; font-size: .86rem; padding: .65rem .9rem; }
.alert-success { background: var(--yz-basari-zemin); color: var(--yz-basari); border-color: currentColor; }
.alert-danger  { background: var(--yz-tehlike-zemin); color: var(--yz-tehlike); border-color: currentColor; }
.alert-info    { background: var(--yz-bilgi-zemin); color: var(--yz-bilgi); border-color: currentColor; }
.alert-warning { background: var(--yz-uyari-zemin); color: var(--yz-uyari); border-color: currentColor; }

/* Kill-switch kapalıyken kaçırılmaması gereken şerit */
.durdurma-seridi {
    background: var(--yz-tehlike);
    color: #fff;
    padding: .55rem 1.25rem;
    font-weight: 600;
    display: flex; align-items: center; gap: .6rem;
}

/* ─── Boş durum ──────────────────────────────────────────────────────────── */

.bos-durum { text-align: center; padding: 3rem 1rem; color: var(--yz-metin-soluk); }
.bos-durum-im { font-size: 2rem; opacity: .35; margin-bottom: .5rem; }

/* ─── Rapor: rakam kutuları ──────────────────────────────────────────────── */

.rakam-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: .85rem;
}

.rakam-kutu {
    background: var(--yz-kart);
    border: 1px solid var(--yz-kenar);
    border-radius: var(--yz-r);
    padding: .95rem 1.05rem;
    box-shadow: var(--yz-golge);
    transition: transform .12s ease, box-shadow .12s ease;
}

.rakam-kutu:hover { transform: translateY(-1px); box-shadow: var(--yz-golge-orta); }

/* ── Tıklanabilir rakam kutusu ────────────────────────────────────────────────
   Kutuların bir kısmı bağlantı, bir kısmı değil; ikisi birebir aynı görünüyordu.
   Kullanıcı ancak imleci üstüne getirip elin şeklinin değişmesini bekleyerek
   hangisinin gidilebilir olduğunu anlıyordu — dokunmatik ekranda o bile yok.
   Ok, farkı bakışta söyler. Yalnızca <a> için çıkar; işaretleme değişmez. */
a.rakam-kutu {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
}

a.rakam-kutu::after {
    content: "→";
    position: absolute;
    top: .8rem;
    right: .95rem;
    font-size: .95rem;
    line-height: 1;
    color: var(--yz-metin-cok-soluk);
    transition: transform .12s ease, color .12s ease;
}

a.rakam-kutu:hover::after { transform: translateX(2px); color: var(--yz-ana); }

/* Etiket oka çarpmasın: uzun başlıklar iki satıra taşıyor. */
a.rakam-kutu .rakam-etiket { padding-right: 1.5rem; }

.rakam-etiket {
    font-size: .76rem;
    color: var(--yz-metin-soluk);
    font-weight: 600;
    margin-bottom: .3rem;
    min-height: 2.2em;
}

.rakam-deger {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.rakam-birim { font-size: .95rem; font-weight: 600; color: var(--yz-metin-soluk); margin-left: .2rem; }

.rakam-degisim { font-size: .75rem; font-weight: 600; margin-top: .3rem; display: flex; align-items: center; gap: .25rem; }
.rakam-degisim.artis { color: var(--yz-basari); }
.rakam-degisim.azalis { color: var(--yz-tehlike); }
.rakam-degisim.duz { color: var(--yz-metin-cok-soluk); }

/* ─── Rapor: grafikler ───────────────────────────────────────────────────── */

.grafik-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.1rem; }
.grafik { width: 100%; height: auto; display: block; overflow: visible; }
.grafik text { font-size: 10px; fill: var(--yz-metin-soluk); font-family: inherit; }
.grafik .izgara { stroke: var(--yz-kenar); stroke-width: 1; }
.grafik .eksen { stroke: var(--yz-kenar-koyu); stroke-width: 1; }

.gosterge { display: flex; flex-wrap: wrap; gap: .7rem 1.1rem; margin-top: .7rem; }
.gosterge-oge { display: flex; align-items: center; gap: .35rem; font-size: .77rem; color: var(--yz-metin-soluk); }
.gosterge-kutu { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

/* ─── Dönem sekmeleri ────────────────────────────────────────────────────── */

.donem-secici {
    display: inline-flex;
    background: var(--yz-vurgu-zemin);
    border: 1px solid var(--yz-kenar);
    border-radius: var(--yz-r-kucuk);
    padding: 2px;
    gap: 2px;
}

.donem-secici a {
    padding: .3rem .85rem;
    border-radius: 4px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--yz-metin-soluk);
}

.donem-secici a:hover { color: var(--yz-metin); text-decoration: none; }
.donem-secici a.etkin { background: var(--yz-kart); color: var(--yz-metin); box-shadow: var(--yz-golge); }

/* ─── Dar ekran ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .kabuk { flex-direction: column; }
    .kenar-cubugu {
        width: 100%; flex: none; height: auto; position: static;
        flex-direction: row; align-items: center; overflow-x: auto;
    }
    .marka { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.07); }
    .marka-alt { display: none; }
    .kenar-menu { display: flex; gap: .25rem; padding: .5rem; }
    /* ★ .kenar-alt dar ekranda gizlenir ama ÇIKIŞ GİZLENMEZ: telefondan giren
       kullanıcının oturumu kapatacak bir yolu kalmazdı. Kurulum notu gider,
       çıkış kalır — ikisi ayrı sınıfta durmasının sebebi bu. */
    .kenar-baslik { display: none; }
    .kenar-alt { padding: .4rem .85rem; border-top: none; }
    .kenar-alt-not { display: none; }
    .kenar-link { white-space: nowrap; }
    .sayfa { padding: 1rem .85rem 2rem; }
    .ust-serit { gap: 1rem; padding: .55rem .85rem; }
    .olcu-ayrac { display: none; }
}

@media print {
    .kenar-cubugu, .ust-serit, .btn, .donem-secici { display: none !important; }
    .kart, .rakam-kutu { break-inside: avoid; box-shadow: none; }
    body { background: #fff; }
}

/* ─── Markup'ta kullanılıp tanımı unutulan sınıflar ──────────────────────────
   Denetim bunları yakaladı: beşi de sayfalarda kullanılıyordu ama burada karşılığı
   yoktu. İkisi kozmetik değil, ürün kararını taşıyor. */

/* Yoğun tablo: avukat günde yüzlerce satır tarıyor, satır yüksekliği kısalır. */
.tablo-yogun > tbody > tr > td { padding: .45rem .7rem; }
.tablo-yogun > thead > tr > th { padding: .45rem .7rem; }

/* Makine tarafından üretilmiş değerler (CommandId, kural kodu, banka tekil alanı).
   Eşit genişlikli yazı tipi olmadan bunlar okunmuyor, karşılaştırılamıyor. */
.kod {
    font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
    font-size: .78em;
    background: var(--yz-vurgu-zemin);
    border: 1px solid var(--yz-kenar);
    border-radius: 4px;
    padding: .05rem .3rem;
    white-space: nowrap;
}

/* Bildirim ile talebi AYIRAN görsel işaret. Tavsiyeler ekranının tasarım kuralı
   bunu şart koşuyor: ikisi karıştırılmaz. Rozet tek başına yeterli değil —
   satırı tararken göz rengi yakalar, metni değil. */
.satir-talep { border-left: 3px solid var(--yz-ana); }
.satir-bildirim { border-left: 3px solid var(--yz-kenar-koyu); background: var(--yz-vurgu-zemin); }
.satir-bildirim td:first-child { color: var(--yz-metin-soluk); }

/* Masraf ekranının tek büyük sayısı: avukat ne kadar yükleyeceğini aramamalı. */
.eksik-tutar {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

/* ── Rapor düğmesi ────────────────────────────────────────────────────────
   Aksiyon satırındaki tek gradyanlı düğme. Diğerleri outline; bu birincil,
   çünkü dosyayı bir bütün olarak değerlendiren tek çıktı budur. */
.rapor-dugmesi {
  background: linear-gradient(100deg, #0f172a 0%, #0284c7 100%);
  color: #f8fafc;
  border: none;
  font-weight: 600;
}
.rapor-dugmesi:hover,
.rapor-dugmesi:focus { color: #fff; filter: brightness(1.12); }

/* ── UYAP bağlantı ışığı ───────────────────────────────────────────────────────
   Markanın altında, her ekranda. Ekrandaki her sayının anlamı bu duruma bağlı:
   ajan bağlı değilken görülen dosyalar ve bakiye eski veridir. */
.baglanti-isigi {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem 1rem .7rem;
  flex-wrap: wrap;
}

.baglanti-isigi .isik {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  flex: none;
  /* Renk kadar PARLAKLIK da taşıyor: kırmızı-yeşil ayırt edemeyen biri için
     tek başına renk bir sinyal değildir. Sönük/parlak farkı ikinci kanal. */
  background: #7f1d1d;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35) inset;
  transition: background .2s ease, box-shadow .2s ease;
}

.baglanti-isigi.acik .isik {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, .85), 0 0 0 1px rgba(0, 0, 0, .25) inset;
}

.baglanti-isigi.kapali .isik {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, .8), 0 0 0 1px rgba(0, 0, 0, .25) inset;
}

/* Yanıp sönme YALNIZCA hata halinde ve yavaş: sürekli hareket eden bir gösterge
   birkaç dakika sonra görülmez olur. Sorun varken dikkat çekmesi gerekiyor. */
.baglanti-isigi.kapali .isik { animation: isik-nabiz 2.4s ease-in-out infinite; }
.baglanti-isigi.kapali .isik:nth-child(2) { animation-delay: .2s; }
.baglanti-isigi.kapali .isik:nth-child(3) { animation-delay: .4s; }

@keyframes isik-nabiz {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .baglanti-isigi .isik { animation: none !important; }
}

.baglanti-ibare {
  margin-left: .35rem;
  font-size: .72rem;
  font-style: italic;
  opacity: .75;
  white-space: nowrap;
}

/* ── DOSYA SEÇİCİ ─────────────────────────────────────────────────────────── */
.dosya-secici { position: relative; min-width: 22rem; }

.dosya-secici-liste {
    position: absolute; z-index: 1050; left: 0; right: 0; top: calc(100% + 2px);
    max-height: 22rem; overflow-y: auto;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.12);
}

.dosya-secici-satir {
    display: block; width: 100%; text-align: left;
    padding: .35rem .6rem; border: 0; background: transparent;
    font-size: .82rem; line-height: 1.25; cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.dosya-secici-satir:last-child { border-bottom: 0; }
.dosya-secici-satir.vurgulu { background: var(--bs-primary-bg-subtle, #cfe2ff); }
.dosya-secici-satir.soluk .ad { opacity: .55; }
.dosya-secici-satir.hepsi { font-weight: 600; }

.dosya-secici-satir .ad { font-weight: 500; }

.dosya-secici-satir .borclu {
    display: block; color: var(--bs-secondary-color, #6c757d);
    font-size: .74rem; margin-top: .1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Açık/kapalı ayrımı UYAP'taki gibi; renk tek başına taşımasın diye metin de yazılı. */
.dosya-secici-satir .rozet {
    display: inline-block; margin-left: .4rem; padding: 0 .35rem;
    border-radius: .7rem; font-size: .66rem; font-weight: 600; vertical-align: middle;
}
.rozet-acik   { background: #d1e7dd; color: #0a3622; }
.rozet-kapali { background: #e2e3e5; color: #41464b; }

.dosya-secici-satir .pasif-not {
    display: inline-block; margin-left: .35rem; font-size: .66rem;
    color: var(--bs-secondary-color, #6c757d); font-style: italic;
}

.dosya-secici-bos, .dosya-secici-alt {
    padding: .45rem .6rem; font-size: .76rem;
    color: var(--bs-secondary-color, #6c757d);
}
.dosya-secici-alt { border-top: 1px solid rgba(0,0,0,.06); font-style: italic; }

[x-cloak] { display: none !important; }

/* ── GENEL BAKIŞ (ön ekran) ───────────────────────────────────────────────── */
.rakam-serisi {
    display: flex; flex-wrap: wrap; gap: .75rem;
    margin: .5rem 0 .25rem;
}
.rakam-serisi > .rakam-kutu {
    flex: 1 1 9.5rem; min-width: 9.5rem; max-width: 16rem;
    text-decoration: none; color: inherit;
}
/* Tıklanabilir kutu, tıklanamayandan ayırt edilebilmeli. */
a.rakam-kutu { cursor: pointer; }
a.rakam-kutu:hover .rakam-deger { text-decoration: underline; }

/* Dikkat isteyen kutu. Renk TEK BAŞINA taşımıyor: kenar çizgisi de kalınlaşıyor,
   böylece renk ayrımı zayıf ekranlarda da fark ediliyor. */
.rakam-kutu.vurgulu {
    border-color: var(--bs-warning, #ffc107);
    border-width: 2px;
}
.rakam-not {
    font-size: .72rem; line-height: 1.2;
    color: var(--bs-secondary-color, #6c757d);
    margin-top: .15rem;
}

/* ── SEKMELER (Geçmiş işlemler) ───────────────────────────────────────────── */
.sekme-serisi {
    display: flex; flex-wrap: wrap; gap: 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    margin: 0 0 1rem;
}
.sekme {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem .9rem;
    font-size: .88rem; text-decoration: none;
    color: var(--bs-secondary-color, #6c757d);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.sekme:hover { color: var(--bs-body-color, #212529); background: rgba(0,0,0,.02); }

/* Seçili sekme rengi TAŞIMIYOR tek başına: alt çizgi kalınlaşıyor ve metin
   koyulaşıyor. Renk ayrımı zayıf ekranlarda da hangi sekmede olduğunuz belli. */
.sekme.secili {
    color: var(--bs-body-color, #212529);
    font-weight: 600;
    border-bottom-color: currentColor;
}
.sekme-success.secili { color: #0a3622; border-bottom-color: #198754; }
.sekme-warning.secili { color: #664d03; border-bottom-color: #ffc107; }
.sekme-danger.secili  { color: #58151c; border-bottom-color: #dc3545; }

.sekme-sayi {
    display: inline-block; min-width: 1.4rem; text-align: center;
    padding: 0 .35rem; border-radius: .7rem;
    font-size: .72rem; font-weight: 600;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6c757d);
}
.sekme.secili .sekme-sayi { background: currentColor; color: #fff; }

/* ── Çalışma anahtarı rozeti ───────────────────────────────────────────────────
   Üst şeritteki rozet artık bir <button>. Tarayıcının varsayılan düğme görünümü
   rozet biçimini bozduğu için sıfırlanıyor; TIKLANABİLİR OLDUĞU görünmeli, yoksa
   kullanıcı basılabileceğini anlamaz — bütün mesele buydu. */
.anahtar-rozet {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
    transition: filter .12s ease, box-shadow .12s ease;
}

.anahtar-rozet:hover:not(:disabled) {
    filter: brightness(.94);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}

.anahtar-rozet:focus-visible {
    outline: 2px solid var(--yz-ana);
    outline-offset: 2px;
}

/* Kâtipte düğme kapalı: solmuş ama OKUNAKLI kalır — durumu görmesi gerekiyor,
   yalnızca çeviremiyor. */
.anahtar-rozet:disabled {
    cursor: not-allowed;
    opacity: .72;
}

/* ════════════════════════════════════════════════════════════════════════════
   2026-08 GÖRSEL YENİLEME — düzeltme katmanı.
   Buradaki kuralların dosyanın SONUNDA durması zorunlu: hepsi yukarıdaki bir
   kuralın üstüne binmek için var ve aynı özgüllükte oldukları için kazanmalarını
   sağlayan tek şey sıra. Yukarıya taşınırlarsa sessizce etkisiz kalırlar.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Bağlantı rengi ───────────────────────────────────────────────────────────
   --yz-ana açık temada tanıtım zemininde 4.41 — metin olamaz. Renk
   DEĞİŞTİRİLMİYOR, ROLÜ KISITLANIYOR: --yz-ana yalnız DOLGU (buton zemini,
   etkin menü, marka imi), metin rolü --yz-ana-metin.
   Özgüllük 0-0-1 olduğu için sınıflı hiçbir bağlantıyı (.kenar-link, .sekme,
   a.rakam-kutu) etkilemez. */
a { color: var(--yz-ana-metin); }
a:hover { color: var(--yz-ana); text-decoration: underline; }

/* ── Başlık kademesi ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600; letter-spacing: -.015em;
    text-wrap: balance;      /* uzun Türkçe başlıklar dengeli kırılsın */
}
h1 { font-size: 1.5rem;    line-height: 1.25; }
h2 { font-size: 1.25rem;   line-height: 1.3;  letter-spacing: -.012em; }
h3 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.008em; }
p  { text-wrap: pretty; }
html { hyphens: none; }      /* Türkçe tireleme sözlüğü zayıf, yanlış kırar */

/* ── Marka ve kenar başlığı koyu kabukta ──────────────────────────────────────
   Taban renkler yukarıda bağlama uyar hâle geldi; koyu bantta okunabilirliği
   kabuk tokenları taşıyor. .yz-kabuk giriş/tanıtım ekranlarının koyu sütunu. */
.marka-alt { color: var(--yz-metin-soluk); }
.kenar-cubugu .marka-ad,   .yz-kabuk .marka-ad   { color: #fff; }
.kenar-cubugu .marka-alt,  .yz-kabuk .marka-alt  { color: var(--yz-kabuk-soluk); }
/* .kenar-baslik aşağıdaki etiket kuralına giriyor ve --yz-metin-soluk alıyor;
   o renk AÇIK temada koyu kabuk üstünde 2.4'e düşerdi. Kabuk tokenı zorunlu. */
.kenar-cubugu .kenar-baslik, .yz-kabuk .kenar-baslik { color: var(--yz-kabuk-soluk); }

/* ── Etiketler: text-transform kaldırılıyor ───────────────────────────────────
   Türkçede "iş" → "IS" oluyor, "İŞ" değil. Etiket hiyerarşisi punto + harf
   aralığı + renk ile kuruluyor.
   Tablo başlığı için özgüllüğü 0-1-3 olan mevcut kuralın seçicisi birebir
   tekrarlanıyor; ".table thead th" yazılsaydı (0-1-2) kaybederdi. */
.olcu-etiket, .kenar-baslik, .marka-alt, .table > thead > tr > th, .tanitim-etiket {
    text-transform: none;
    font-size: var(--yz-yazi-mikro); font-weight: 600; letter-spacing: .08em;
    color: var(--yz-metin-soluk);
}

/* ── Tanımlayıcılar — sayı değil, kimlik ───────────────────────────────────── */
.kod, .tanimlayici, .tanitim-ozet-deger, td.dosya-no {
    font-family: var(--yz-yazi-tanimlayici);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;     /* break-all DEĞİL: Türkçe metni okunmaz yapar */
    word-break: normal;
}

/* ── Okunan metin 15px'e çıkar; tablo/form 14px kalır ─────────────────────────
   14px hiçbir yerde paragraf taşımaz. */
.metin-govde, .tanitim-bolum p, .gerekce, .form-text {
    font-size: var(--yz-yazi-govde); line-height: 1.65; max-width: 68ch;
}
.kart, .tanitim-kart, .rakam-kutu, .tanitim-paket, td, th { min-width: 0; }

/* ── Büyük düğme ──────────────────────────────────────────────────────────────
   .btn-lg bu sitede ÖLÜ idi: .btn ölçüleri doğrudan yazıyor, Bootstrap'in
   .btn-lg'si yalnız --bs-* atıyor ve hiç okunmuyor. Kahraman düğmesi gerçekte
   13.4px basılıyordu. 44px asgari dokunma hedefi. */
.btn-lg { font-size: 1rem; padding: .78rem 1.5rem; font-weight: 600;
          border-radius: var(--yz-r); letter-spacing: -.005em; min-height: 44px; }
.btn-lg.btn-primary { box-shadow: var(--yz-kat-2), var(--yz-parlak); }

/* ── Kontrol sınırları — WCAG 1.4.11, non-text 3:1 ─────────────────────────── */
.form-control, .form-select, .btn-outline-secondary { border-color: var(--yz-kenar-kontrol); }

/* ── Odak: tek kural, her yerde ───────────────────────────────────────────────
   border-radius VERİLMİYOR — verilirse .btn-lg (10px) ve giriş kartı (16px)
   klavye odağında köşe değiştirir. :where() özgüllük eklemez, bu yüzden sınıflı
   kurallar ezilmez. */
:where(a, button, .btn, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--yz-halka);
    outline-offset: 2px;
}
.yz-kabuk :focus-visible { outline-color: var(--yz-kabuk-baglanti); }  /* koyu bantta 6.70 ✓ */
.btn:focus-visible { box-shadow: var(--yz-kat-1); }   /* Bootstrap'in kendi halkasını iptal */

/* ── Karanlık mod kalıntıları ─────────────────────────────────────────────────
   Aşağıdakiler tasarım tercihi değil, CANLI HATA idi: sabit açık hex'ler koyu
   kartın üstünde açık leke bırakıyor, koyu metinler koyu zeminde okunmuyordu. */
.rozet-acik   { background: var(--yz-basari-zemin); color: var(--yz-basari-metin); }
.rozet-kapali { background: var(--yz-vurgu-zemin);  color: var(--yz-metin-soluk); }

.sekme-success.secili { color: var(--yz-basari-metin);  border-bottom-color: var(--yz-basari); }
.sekme-warning.secili { color: var(--yz-uyari-metin);   border-bottom-color: var(--yz-uyari); }
.sekme-danger.secili  { color: var(--yz-tehlike-metin); border-bottom-color: var(--yz-tehlike); }
.sekme:hover { color: var(--yz-metin); background: var(--yz-vurgu-zemin); }

.rakam-kutu.vurgulu { border-color: var(--yz-uyari); border-width: 2px; }

.dosya-secici-liste { background: var(--yz-kart); border-color: var(--yz-kenar); box-shadow: var(--yz-kat-2); }
.dosya-secici-satir { border-bottom: 1px solid var(--yz-kenar); }
.dosya-secici-satir.vurgulu { background: var(--yz-ana-soluk); }
.dosya-secici-satir .borclu,
.dosya-secici-satir .pasif-not,
.dosya-secici-bos, .dosya-secici-alt,
.rakam-not, .sekme-sayi { color: var(--yz-metin-soluk); }
.sekme-sayi { background: var(--yz-vurgu-zemin); }

/* Bootstrap'in select oku gömülü #343a40 SVG; karanlıkta görünmüyor. */
@media (prefers-color-scheme: dark) {
    .form-select {
        background-image: 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");
    }
}

/* ── Rozetler: kontrast + ŞEKİL KODU ──────────────────────────────────────────
   WCAG 1.4.1: renk tek gösterge olamaz. Beş rozetin beşi de AA altındaydı
   (3.14 / 2.90 / 4.17 / 3.31 / 4.37); metin rolü artık -metin tokenlarından. */
.rozet-basari  { background: var(--yz-basari-zemin);  color: var(--yz-basari-metin); }
.rozet-uyari   { background: var(--yz-uyari-zemin);   color: var(--yz-uyari-metin); }
.rozet-tehlike { background: var(--yz-tehlike-zemin); color: var(--yz-tehlike-metin); }
.rozet-bilgi   { background: var(--yz-bilgi-zemin);   color: var(--yz-bilgi-metin); }
.rozet-ana     { background: var(--yz-ana-soluk);     color: var(--yz-ana-metin); }
.rozet { white-space: nowrap; min-width: 0; }

/* Şekil, ekran okuyucuya "siyah daire" diye okunmasın diye DEKORATİF.
   Anlam .gorsel-gizli metinde taşınır. */
.rozet::before { font-size: .8em; line-height: 1; margin-right: .3em; }
.rozet-basari::before  { content: "\25CF"; }  /* ● tamamlandı */
.rozet-uyari::before   { content: "\25B2"; }  /* ▲ bekliyor / süre */
.rozet-tehlike::before { content: "\25A0"; }  /* ■ hata / geri alınamaz */
.rozet-bilgi::before   { content: "\25C6"; }  /* ◆ bilgi */
.rozet-ana::before     { content: "\25CB"; }  /* ○ talep */

.gorsel-gizli {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Sabit üst şerit klavye odağını örtmesin — WCAG 2.2 AA */
html { scroll-padding-top: calc(var(--yz-ust-yuk) + 1rem); }

/* Hareket azaltma: yukarıdaki dar kural yalnız .baglanti-isigi'nı kapsıyordu;
   .rakam-kutu, a.rakam-kutu::after, .kenar-link, .anahtar-rozet geçişleri
   kapsam dışındaydı. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .rakam-kutu:hover { transform: none; }
    a.rakam-kutu:hover::after { transform: none; }
}

/* ─── Yurt dışı aktarım envanteri ────────────────────────────────────────────

   ★ Bu blok tek bir ayrımı görünür kılmak için var: "durdurduk" ile
     "durduramayız" aynı şey değildir ve aynı hücrede aynı biçimde
     görünmemelidir. .durdurma-seridi kırmızıdır ve "durduk" der;
     .suren-aktarim-seridi ise akan bir şeyi anlatır — çizgili, turuncu ve
     kırmızıdan bilerek farklı.

   ★ Boş değerlerin üç ayrı görünümü var ve üçü de kasıtlı:
       .veri-cevapsiz  → BELİRLENMEDİ / BAKILMADI / BİLİNMİYOR   (cevap yok)
       .veri-bos       → girilmedi / yok                          (alan boş)
       .veri-var       → olağan değer
     Hiçbiri "—", "-" ya da boş hücre değildir: "Hayır" bir CEVAPTIR, boşluk
     cevapsızlıktır.                                                          */

.veri-cevapsiz {
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--yz-tehlike-metin);
}

.veri-bos {
    font-style: italic;
    color: var(--yz-metin-cok-soluk);
}

.veri-var { color: inherit; }

/* Kapının durduramadığı akışın şeridi. Çizgiler "akıyor" duygusu için;
   düz dolgu, durdurma şeridiyle karışırdı. */
.suren-aktarim-seridi {
    background: repeating-linear-gradient(
        135deg,
        var(--yz-uyari-zemin),
        var(--yz-uyari-zemin) 10px,
        var(--yz-vurgu-zemin) 10px,
        var(--yz-vurgu-zemin) 20px);
    border: 1px solid var(--yz-uyari);
    border-left: 5px solid var(--yz-uyari);
    border-radius: var(--yz-r-kucuk);
    color: var(--yz-uyari-metin);
    padding: .6rem 1rem;
    font-weight: 600;
    display: flex; align-items: flex-start; gap: .6rem;
}

/* Tablo satırı: aynı ayrım, daha sessiz. Sol kenar çubuğu yeterli — satırın
   tamamını boyamak, "hata" gibi okunurdu; bu bir hata değil, bir olgudur. */
.suren-aktarim-satir > td { background: var(--yz-uyari-zemin); }
.suren-aktarim-satir > td:first-child { box-shadow: inset 4px 0 0 var(--yz-uyari); }

.aktarim-kapali-satir > td:first-child { box-shadow: inset 4px 0 0 var(--yz-kenar-koyu); }

.suren-etiket {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--yz-uyari-metin);
}

/* Satır altındaki gerekçe kutusu. */
.aktarim-ayrinti > summary {
    cursor: pointer;
    padding: .45rem .7rem;
    font-size: .85rem;
    color: var(--yz-metin-soluk);
}

.aktarim-ayrinti[open] > summary {
    border-bottom: 1px solid var(--yz-kenar);
    color: var(--yz-metin);
}

/* İki sütunlu künye listesi — dt/dd çiftleri hizalı dursun. */
.ayrinti-listesi {
    display: grid;
    grid-template-columns: minmax(9rem, 16rem) 1fr;
    gap: .25rem .9rem;
    margin: 0;
}

.ayrinti-listesi > dt { font-weight: 600; color: var(--yz-metin-soluk); }
.ayrinti-listesi > dd { margin: 0; }

@media (max-width: 575.98px) {
    .ayrinti-listesi { grid-template-columns: 1fr; }
    .ayrinti-listesi > dd { margin-bottom: .35rem; }
}

/* ── Operasyon dili rötuşları (16.08.2026) ────────────────────────────────────
   Bootstrap'in DOLU renk rozetleri (bg-primary/bg-warning...) bankacılık/enterprise
   dilinde bağırıyor ve karanlık temada metin kontrastı Bootstrap'a kalıyordu.
   Hepsi yumuşak zemin + koyu metin çipine çevrildi — .rozet ailesiyle aynı dil,
   tamamı token'lı olduğu için iki temada da güvenli. CSS-only: hiçbir sayfanın
   işaretlemesi ve işleyicisi değişmedi. */
.badge { font-size: .66rem; font-weight: 600; letter-spacing: .05em;
         border-radius: 5px; padding: .24rem .5rem; }
.badge.bg-primary   { background: var(--yz-ana-soluk) !important;    color: var(--yz-ana-metin) !important; }
.badge.bg-secondary { background: var(--yz-vurgu-zemin) !important;  color: var(--yz-metin-soluk) !important;
                      border: 1px solid var(--yz-kenar); }
.badge.bg-success   { background: var(--yz-basari-zemin) !important; color: var(--yz-basari-metin) !important; }
.badge.bg-warning   { background: var(--yz-uyari-zemin) !important;  color: var(--yz-uyari-metin) !important; }
.badge.bg-danger    { background: var(--yz-tehlike-zemin) !important; color: var(--yz-tehlike-metin) !important; }
.badge.bg-info      { background: var(--yz-bilgi-zemin) !important;  color: var(--yz-bilgi-metin) !important; }
.badge.bg-dark      { background: var(--yz-vurgu-zemin) !important;  color: var(--yz-metin) !important;
                      border: 1px solid var(--yz-kenar-koyu); }

/* Gerekçe bloğu: öneriyi taşıyan metin nötr gri değil marka aksanıyla işaretlenir —
   tanıtımdaki "NEDEN ÖNERİLİYOR?" paneliyle aynı dil. */
.gerekce { border-left-color: var(--yz-ana); }

/* ════════════════════════════════════════════════════════════════════════════
   LEGALTECH OPERASYON DİLİ — 16.08.2026
   Kullanıcı talimatı: "bankacılık kadar güvenli, enterprise SaaS kadar
   profesyonel, hukuk yazılımı kadar ciddi" — butonlar ve işlevler AYNEN kalır.

   Bu katman YALNIZCA CSS'tir: hiçbir sayfanın işaretlemesi, işleyicisi ve
   güvenlik mühendisliği (Enter-tuzağı, form kapsamı, varsayılan düğme) değişmedi.
   Önceki bloklardaki kurallar SİLİNMEDİ; bu katman sonda durduğu için kazanır —
   geri almak istersen bu bloğu kaldırman yeter.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Köşe sistemi: 8–12px bandına oturur ─────────────────────────────────────
   Token'da değiştiği için buton, form, kart, rozet, gerekçe hepsi birden ve
   tutarlı döner; tek tek eleman kovalamak sürüm sürüm ayrışma üretirdi. */
:root {
    --yz-r-kucuk: 8px;
    --yz-r: 10px;
    --yz-r-buyuk: 12px;
}

/* ── Kenar çubuğu: dolgu maviden İNCE AKSANA ────────────────────────────────
   Etkin bağlantı parlayan mavi blok + renkli gölgeydi — operasyon yazılımında
   menü bağırmaz. Yeni dil: yumuşak vurgu zemini + sol 2px mavi aksan çizgisi.
   Mavi hâlâ YALNIZCA aktif durumu işaretliyor, daha az mürekkeple. */
.kenar-link.etkin {
    background: var(--yz-kabuk-vurgu);
    color: #fff;
    box-shadow: inset 2px 0 0 var(--yz-ana);
}
.kenar-link { border-radius: var(--yz-r-kucuk); }
.kenar-baslik { letter-spacing: .11em; }

/* ── Üst şerit: yüzeyden hafifçe ayrılır ─────────────────────────────────── */
.ust-serit { box-shadow: var(--yz-kat-1); }

/* ── Sayfa başlığı: daha sıkı harf aralığı, net hiyerarşi ────────────────── */
.sayfa-basi h1 { letter-spacing: -.022em; }

/* ── Kart: kâğıt hissi — hairline + çok hafif kat + iç ışık ───────────────── */
.kart, .card { box-shadow: var(--yz-kat-1), var(--yz-parlak); }

/* ── Tablo: "operasyon merkezi" ızgarası ────────────────────────────────────
   Renkli başlık bandı kalkar; hiyerarşiyi renk değil TİPOGRAFİ ve tek koyu
   hairline taşır. Satır vurgusu maviye çalan dolgudan nötr, %96 saydam bir
   mürekkebe iner — renk yalnız ANLAM taşıdığında görünür (durum çipleri). */
.table > thead > tr > th {
    background: transparent;
    font-size: .68rem;
    letter-spacing: .07em;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--yz-kenar-koyu);
}
.table > tbody > tr:hover > td {
    background: var(--yz-vurgu-zemin);                            /* color-mix yoksa */
    background: color-mix(in srgb, var(--yz-metin) 4%, transparent);
}
/* Bootstrap table-bordered tam ızgara çizer; iç dikey çizgiler hairline'a iner */
.table-bordered > :not(caption) > * > * { border-color: var(--yz-kenar); }

/* ── Onay kutusu ve radyo: marka aksanı ──────────────────────────────────── */
.form-check-input:checked { background-color: var(--yz-ana); border-color: var(--yz-ana); }
.form-check-input:focus { border-color: var(--yz-halka); box-shadow: 0 0 0 3px var(--yz-ana-soluk); }

/* ── Tehlike ve nötr karar düğmeleri ─────────────────────────────────────────
   "Reddet" dolu kırmızı çerçeveyle bağırıyordu; kırmızı YALNIZCA niyet
   netleşince (hover/basış) görünür. "Yok say" (outline-dark) karanlık temada
   siyah-üstü-siyaha düşüyordu; nötr karar diline çekildi. */
.btn-outline-danger {
    color: var(--yz-tehlike-metin);
    border-color: var(--yz-kenar-kontrol);
    background: var(--yz-kart);
}
.btn-outline-danger:hover, .btn-outline-danger:focus-visible {
    color: var(--yz-tehlike-metin);
    background: var(--yz-tehlike-zemin);
    border-color: var(--yz-tehlike);
}
.btn-outline-dark {
    color: var(--yz-metin-soluk);
    border-color: var(--yz-kenar-kontrol);
    background: var(--yz-kart);
}
.btn-outline-dark:hover, .btn-outline-dark:focus-visible {
    color: var(--yz-metin);
    background: var(--yz-vurgu-zemin);
    border-color: var(--yz-kenar-koyu);
}

/* ── Uyarı kutuları: Bootstrap'ın doygun renkleri yerine çip dili ─────────── */
.alert { border-radius: var(--yz-r); border: 1px solid var(--yz-kenar); }
.alert-secondary { background: var(--yz-vurgu-zemin);  color: var(--yz-metin-soluk); }
.alert-success   { background: var(--yz-basari-zemin); color: var(--yz-basari-metin); border-color: var(--yz-basari-zemin); }
.alert-warning   { background: var(--yz-uyari-zemin);  color: var(--yz-uyari-metin);  border-color: var(--yz-uyari-zemin); }
.alert-danger    { background: var(--yz-tehlike-zemin); color: var(--yz-tehlike-metin); border-color: var(--yz-tehlike-zemin); }
.alert-info      { background: var(--yz-bilgi-zemin);  color: var(--yz-bilgi-metin);  border-color: var(--yz-bilgi-zemin); }

/* ── İstatistik kutuları: sayı sahneye çıkar ─────────────────────────────── */
.rakam-kutu { box-shadow: var(--yz-kat-1), var(--yz-parlak); }
.rakam-deger { letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ── Tavsiye satırı: gerekçe ve karar arasında nefes ─────────────────────── */
.satir-talep .gerekce, .satir-bildirim .gerekce { max-width: 62ch; }

/* ── Operasyon dili v2 (16.08.2026) — ekran görüntüsüne göre ─────────────────
   Kullanıcının Tavsiyeler ekranından teşhis: (1) üst şeritte uyarı çipi
   enflasyonu, (2) gerekçe dev bir renkli blok, (3) karar sütunu form yığını.
   İşaretlemede yalnız sınıf/etiket eklendi; işleyiciler aynen duruyor. */

/* Üst şerit: iki kata sıkışan yoğunluk tek nefese iner */
.ust-serit { row-gap: .3rem; column-gap: 1.1rem; padding: .55rem 1.25rem; }
.ust-serit .rozet { font-size: .66rem; letter-spacing: .04em; padding: .13rem .5rem; }
.ust-serit .olcu-deger { font-size: .92rem; }
.durdurma-seridi { font-size: .82rem; }

/* Öncelik: çıplak sayı değil, teknik kimlik dili */
.tablo-yogun td.oncelik-no {
    font-family: var(--yz-yazi-tanimlayici);
    font-size: .74rem;
    color: var(--yz-metin-soluk);
    text-align: center;
    vertical-align: top;
    padding-top: .95rem;
}

/* Gerekçe: RENKLİ KUTU DEĞİL BELGE. Koca mavi blok satırı yutuyordu; belge
   dili ince bir aksan çizgisi + dar ölçü + rahat satır arasıdır. Etiket
   metnin ne olduğunu söyler — okur "bu neden burada" diye sormaz. */
.gerekce-etiket {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--yz-metin-cok-soluk);
    margin-top: .4rem;
}
.tablo-yogun .gerekce {
    background: transparent;
    border-left: 2px solid var(--yz-ana);
    border-radius: 0;
    padding: .1rem 0 .1rem .7rem;
    margin-top: .3rem;
    font-size: .8rem;
    line-height: 1.6;
    max-width: 66ch;
}

/* Tavsiye satırı: yüksek satırda içerik tepeden hizalanır — başlık, dosya ve
   karar aynı görsel hatta başlar, "yüzen buton" hissi biter. */
.tablo-yogun > tbody > tr > td { vertical-align: top; padding-top: .8rem; }

/* Karar hücresi: form yığını değil karar bloğu */
.karar-hucre { min-width: 15rem; }
.karar-hucre .btn-primary.btn-sm { font-weight: 600; padding-inline: 1.05rem; }
.karar-hucre .form-select-sm { font-size: .72rem; color: var(--yz-metin-soluk); }
.karar-hucre .input-group .btn { font-size: .72rem; }
.karar-hucre .input-group { margin-top: .1rem; }

/* Sayfa içi mini istatistik kutuları (Bootstrap .border.rounded deseni):
   çizgili kutudan kart diline — tanıtımdaki kanıt şeridiyle aynı his. */
.sayfa .border.rounded {
    background: var(--yz-kart);
    border-color: var(--yz-kenar) !important;
    border-radius: var(--yz-r) !important;
    box-shadow: var(--yz-kat-1), var(--yz-parlak);
}
.sayfa .border.rounded > .text-muted.small {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .05em;
}
.sayfa .border.rounded .fs-5 {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

/* ── Operasyon dili v3 (16.08.2026) — "premium hissiyat" turu ────────────────
   Kullanıcının ikinci ekran görüntüsüyle: (1) çip süs işaretleri CSS'ten
   geliyormuş ve işaretlemeden silmek yetmemiş, (2) üst şeridin sağı yetim
   satırlara kopuyor, (3) tablo ve filtreler sayfada çıplak duruyor. */

/* Çip süs işaretleri (●▲■◆○) uygulamada KAPALI. Dekoratiftiler — anlam metin
   ve renkte; beş farklı işaretin yan yana birikmesi "geliştirici aracı"
   görüntüsünün ana kaynağıydı. Tanıtım sayfası kendi gömülü CSS'ini taşır,
   ondan etkilenmez. */
.rozet::before { content: none; }

/* Üst şerit: üç bölge. Metrikler kendi içinde kırılır; durum bloğu hep sağda
   ve BİR ARADA — yetim çip satırı yapısal olarak imkânsızlaşır. */
.ust-serit { align-items: center; }
.serit-kimlik { flex: 0 0 auto; }
.serit-metrikler {
    display: flex; align-items: center;
    gap: .3rem 1.1rem; flex-wrap: wrap;
    min-width: 0;
}
.serit-durum {
    margin-left: auto;
    display: flex; align-items: center; justify-content: flex-end;
    gap: .45rem; flex-wrap: wrap;
    flex: 0 0 auto;
}

/* Tablo bir KARTIN içinde oturur — çıplak ızgara sayfada yüzmez. Kart dilini
   liste kapsayıcısı taşır; tablonun kendisi değişmez. */
#tavsiye-listesi .table-responsive {
    background: var(--yz-kart);
    border: 1px solid var(--yz-kenar);
    border-radius: var(--yz-r);
    box-shadow: var(--yz-kat-1), var(--yz-parlak);
}
#tavsiye-listesi .table > thead > tr > th {
    background: var(--yz-vurgu-zemin);
    border-top: 0;
}
#tavsiye-listesi .table { border: 0; }
#tavsiye-listesi .table > tbody > tr:last-child > td { border-bottom: 0; }

/* Filtreler araç çubuğu kartında; "Süz" htmx'i, change tetikleyicisi aynen. */
.suzgec-cubugu {
    --bs-gutter-x: .75rem;
    background: var(--yz-kart);
    border: 1px solid var(--yz-kenar);
    border-radius: var(--yz-r);
    box-shadow: var(--yz-kat-1), var(--yz-parlak);
    padding: .55rem .9rem .8rem;
    margin-left: 0;
    margin-right: 0;
}
.suzgec-cubugu .form-label {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--yz-metin-soluk);
}

/* Toplu seçim satırı liste kartının başlığı gibi hizalanır */
#tavsiye-listesi > form > .d-flex { padding: 0 .15rem; }