/* ============================================================
   KotgemFlow — TASARIM KATMANI
   ------------------------------------------------------------
   app.css YAPIYI kurar (iskelet, bileşenler, mobil kırılımlar).
   Bu dosya GÖRÜNÜMÜ verir: renk belirteçleri, tipografi/boşluk
   ritmi, kabuğun ince ayarı ve KOYU TEMA. app.css'ten SONRA
   yüklenir, bu yüzden aynı özgüllükte olan kurallarda bu dosya
   kazanır.

   Neden ayrı dosya: app.css'in bileşen kuralları (mobil kart
   tablosu, giriş ekranı, taşma güvenliği) doğru çalışıyor ve
   tekrar yazılmasına gerek yok. Değişmesi gereken renk sistemi
   ve kabuk — onlar burada.

   ÖNEMLİ: app.css'te sabit yazılmış açık renkler var
   (#fafcff, #f7faff, #eef2f8 …). Koyu temada beyaz lekeler
   bırakmamaları için hepsi aşağıda tek tek karşılanıyor.

   Tema: <html data-tema="koyu"> ile koyuya geçer; seçim
   tarayıcıda saklanır (tema.js).
   ============================================================ */

/* ---------- Açık tema (varsayılan) ---------- */
:root {
    --y-arka: #f6f8fc;
    --y-kart: #ffffff;
    --y-kart-ust: #fbfcfe;
    --y-kenar: #e6ebf3;
    --y-kenar-soft: #eef2f8;

    --y-metin: #101b2d;
    --y-metin-soluk: #5a6a80;
    --y-metin-silik: #8b98a9;

    --y-vurgu: #2563eb;
    --y-vurgu-koyu: #1d4ed8;
    --y-vurgu-soft: #eaf1ff;

    --y-basari: #0f9d63;  --y-basari-bg: #e7f7f0;
    --y-uyari:  #c2760f;  --y-uyari-bg:  #fdf3e4;
    --y-hata:   #d33d3d;  --y-hata-bg:   #fdeceb;

    /* Kenar çubuğu açık temada da KOYU kalır: gezinme ile içerik arasında
       net bir ayrım, uzun süre ekrana bakan kullanıcı için dinlendirici. */
    --y-yan: #101a2b;
    --y-yan-2: #16233a;
    --y-yan-metin: #aab8cc;
    --y-yan-kenar: rgba(255, 255, 255, .08);

    --y-r: 10px;
    --y-r-sm: 7px;
    --y-golge-1: 0 1px 2px rgba(16, 27, 45, .05);
    --y-golge-2: 0 2px 8px rgba(16, 27, 45, .07);
    --y-golge-3: 0 10px 28px rgba(16, 27, 45, .12);

    /* ---- Eski belirteçleri yenilere bağla ----
       Sayfalar ve grafikler `--metin`, `--kart`, `--kenar` gibi app.css
       adlarını kullanıyor. Bunlar yönlendirilmezse koyu temada koyu zeminde
       koyu metin kalır ve GRAFİK YAZILARI GÖRÜNMEZ (ilk denemede tam bu oldu).
       Tek blok sayesinde 40 sayfa ve altı grafik bileşeni iki temada da doğru
       çalışıyor, hiçbirinin işaretlemesine dokunmadan. */
    --yuzey: var(--y-arka);
    --kart: var(--y-kart);
    --kenar: var(--y-kenar);
    --metin: var(--y-metin);
    --metin-soluk: var(--y-metin-soluk);
    --metin-cok-soluk: var(--y-metin-silik);

    --marka-mavi-600: var(--y-vurgu);
    --marka-mavi-500: var(--y-vurgu);
    --marka-mavi-400: #6ea8ff;
    /* Gradyan yerine düz vurgu: yan yana çok sayıda öğede gradyan gürültü
       yapıyor ve koyu temada parlıyordu. */
    --marka-gradyan: var(--y-vurgu);

    --basari: var(--y-basari); --basari-bg: var(--y-basari-bg);
    --uyari: var(--y-uyari);   --uyari-bg: var(--y-uyari-bg);
    --hata: var(--y-hata);     --hata-bg: var(--y-hata-bg);

    --yaricap: var(--y-r);
    --yaricap-sm: var(--y-r-sm);
    --golge-sm: var(--y-golge-1);
    --golge: var(--y-golge-2);
    --golge-lg: var(--y-golge-3);
    --kenar-cubugu-genislik: 250px;
}

/* ---------- Koyu tema ---------- */
[data-tema="koyu"] {
    --y-arka: #0b1220;
    --y-kart: #131c2e;
    --y-kart-ust: #172033;
    --y-kenar: #243146;
    --y-kenar-soft: #1d2739;

    --y-metin: #e8eef8;
    --y-metin-soluk: #9aa9bf;
    --y-metin-silik: #6d7d94;

    --y-vurgu: #4d8dff;
    --y-vurgu-koyu: #3b7ce8;
    --y-vurgu-soft: #172a4a;

    --y-basari: #34c58a;  --y-basari-bg: #122e24;
    --y-uyari:  #e0a13c;  --y-uyari-bg:  #2e2415;
    --y-hata:   #f06a6a;  --y-hata-bg:   #331a1c;

    --y-yan: #0d1524;
    --y-yan-2: #131e31;
    --y-yan-metin: #93a3ba;
    --y-yan-kenar: rgba(255, 255, 255, .06);

    --y-golge-1: 0 1px 2px rgba(0, 0, 0, .35);
    --y-golge-2: 0 2px 10px rgba(0, 0, 0, .4);
    --y-golge-3: 0 12px 32px rgba(0, 0, 0, .55);
}

html, body { background: var(--y-arka); color: var(--y-metin); }

/* ============================================================
   Kabuk
   ============================================================ */
body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    line-height: 1.5;
}

/* BAŞLIK ÖLÇEĞİ — her seviye bir öncekinden belirgin küçük.
   Önceki hâlde sayfa başlığı (1.02rem) kart başlığından (1.08rem) KÜÇÜKTÜ;
   göz nereye bakacağını bilemiyordu. Artık tek bir azalan dizi var. */
h1, h2, h3, h4 { color: var(--y-metin); letter-spacing: -.015em; font-weight: 640; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1rem; }
h4 { font-size: .9rem; }
a { color: var(--y-vurgu); }

/* Sayılar hizalansın: değişken genişlikli rakamlar sağa yaslı sütunlarda
   birbirini tutmuyor ve tablo titrek görünüyordu. */
.sagli, .istatistik .deger, table.veri td.sagli, .asecim-oge .alt {
    font-variant-numeric: tabular-nums;
}

/* ---------- Kenar çubuğu ---------- */
.kenar-cubugu {
    background: var(--y-yan);
    border-right: 1px solid var(--y-yan-kenar);
    color: var(--y-yan-metin);

    /* UZUN MENÜ İÇERİDE KAYAR.
       Kenar çubuğu `height:100vh` ile sabit, ama menü ondan uzun olabiliyor
       (raporlar grupları açıkken içerik 1100 px'i geçiyor). `overflow` verilmeyince
       taşan öğeler panelin DIŞINA çıkıyor ve arkalarında koyu zemin kalmıyordu:
       "Sistem" başlığı ve altındaki Satınalma/Depolar/Senkron/Ayarlar açık zeminde,
       okunmaz hâlde asılı duruyordu. */
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Koyu panelde tarayıcının açık renk kaydırma çubuğu sırıtıyordu. */
.kenar-cubugu { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.kenar-cubugu::-webkit-scrollbar { width: 8px; }
.kenar-cubugu::-webkit-scrollbar-track { background: transparent; }
.kenar-cubugu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
.kenar-cubugu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }
.kenar-cubugu .marka {
    padding: 1.05rem 1.1rem; border-bottom: 1px solid var(--y-yan-kenar);
    /* Marka bloğu kaymaz: menü uzun olduğunda kaydırılınca logo da gidiyordu. */
    position: sticky; top: 0; z-index: 2; background: var(--y-yan);
}
.kenar-cubugu .marka .ad { color: #fff; letter-spacing: -.02em; font-size: 1.05rem; }
.kenar-cubugu .marka .ad b { color: #6ea8ff; }

.kenar-cubugu nav { padding: .7rem .55rem 1.2rem; gap: 1px; }
.kenar-cubugu nav .grup-baslik {
    font-size: .68rem; letter-spacing: .09em; color: #6b7c94;
    padding: 1.1rem .85rem .4rem; font-weight: 700;
}

.nav-oge {
    color: var(--y-yan-metin);
    border-radius: var(--y-r-sm);
    font-weight: 500;
    /* Sol işaret yeri hep ayrılır ki seçim değişince yazılar KAYMASIN. */
    border-left: 2px solid transparent;
}
.nav-oge:hover { background: var(--y-yan-2); color: #fff; }
/* SEÇİLİ SATIR — dolu mavi yerine yumuşak zemin + sol işaret.
   Dolu mavi, koyu kenar çubuğunda tek başına çok bağırıyordu: göz sürekli
   oraya kaçıyor, asıl içerik ikinci plana düşüyordu. Sol şerit seçimi aynı
   netlikte söylüyor, gürültü yapmadan. */
.nav-oge.active {
    background: rgba(77, 141, 255, .16); color: #fff; box-shadow: none;
    border-left-color: var(--y-vurgu); font-weight: 600;
}
.nav-oge .ikon { opacity: .85; font-size: .95rem; }
.nav-oge.active .ikon { opacity: 1; }

.nav-alt { margin: 1px 0 .3rem .9rem; padding-left: .6rem; border-left: 1px solid var(--y-yan-kenar); }
.nav-oge.alt { color: #93a3ba; }
.nav-oge.alt:hover { color: #fff; }
/* ⚠⚠ GÖRÜNMEZ SATIR HATASI — düzeltildi.
   Eski kural: `background: var(--y-vurgu-soft); color: #fff`.
   Ama kenar çubuğu AÇIK TEMADA DA KOYU kalıyor; `--y-vurgu-soft` ise açık
   temanın açık mavisi (#eaf1ff). Sonuç: neredeyse beyaz zemin üzerine beyaz
   yazı — seçili alt menü öğesi OKUNMUYORDU, satır boş görünüyordu.
   Ölçüldü: "Cari Kartlar" satırı color #fff, background #eaf1ff.

   Kenar çubuğu her iki temada koyu olduğu için burada tema belirteci değil,
   saydam mavi kullanılır: koyu zeminde her zaman doğru. */
.nav-oge.alt.active {
    background: rgba(77, 141, 255, .18); color: #fff; border-left-color: transparent;
}

.kenar-cubugu .cubuk-dip {
    border-top: 1px solid var(--y-yan-kenar);
    color: #6b7c94; font-size: .74rem; padding: .85rem 1.15rem;
}

/* ---------- Üst çubuk ---------- */
.ust-cubuk { height: 60px; background: var(--y-kart); border-bottom: 1px solid var(--y-kenar); }

/* Sayfa başlığı üst çubuğun ASIL içeriği — sağdaki yardımcı öğelerden açıkça
   büyük ve koyu olmalı. Önceki hâlde kart başlıklarıyla aynı ağırlıktaydı. */
.ust-cubuk .sayfa-baslik {
    font-size: 1.12rem; font-weight: 680; letter-spacing: -.02em; color: var(--y-metin);
}

/* Sağ taraf ikincil: firma/yıl/kullanıcı bilgi verir, dikkat çekmez. */
.ust-cubuk .sag { gap: .55rem; }

.firma-secici {
    background: transparent; border: 1px solid var(--y-kenar); border-radius: 999px;
    font-size: .8rem; color: var(--y-metin-soluk); padding: .32rem .7rem;
    white-space: nowrap;
}
.firma-secici:hover { border-color: var(--y-vurgu); color: var(--y-metin); }

.kullanici-rozet { background: var(--y-vurgu); box-shadow: 0 0 0 3px var(--y-vurgu-soft); }

/* Tema değiştirme düğmesi */
.tema-dugme {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 999px;
    border: 1px solid var(--y-kenar); background: transparent;
    color: var(--y-metin-soluk); cursor: pointer; font-size: .95rem; line-height: 1;
    font-family: inherit; flex: 0 0 auto;
}
.tema-dugme:hover { border-color: var(--y-vurgu); color: var(--y-vurgu); background: var(--y-vurgu-soft); }

.menu-dugme { border-color: var(--y-kenar); color: var(--y-metin); background: transparent; }
.menu-dugme:hover { background: var(--y-vurgu-soft); }


/* ============================================================
   Bileşenler
   ============================================================ */
/* KART — gölge kaldırıldı.
   Sınır + gölge + yuvarlatma birlikte, her kutuyu ayrı ayrı "kabartıyordu";
   on kart alt alta gelince sayfa kabarcıklı görünüyordu. Zemin (--y-arka) ile
   kart (beyaz) arasındaki fark zaten yeterli ayrımı veriyor. Gölge yalnız
   gerçekten yüzen şeylerde kaldı: açılır panel ve mobil menü. */
.kart {
    background: var(--y-kart); border: 1px solid var(--y-kenar);
    border-radius: var(--y-r); box-shadow: none;
}
.kart:hover { box-shadow: none; border-color: var(--y-kenar); }

/* Kart içi boşluk biraz sıkıldı: 1.35rem çok cömertti, ekranda daha az veri
   kalıyordu. Başlık ile gövde arasındaki ilişki boşlukla kuruluyor. */
.kart-govde { padding: 1.15rem 1.25rem; }
.kart-govde > h3:first-child { margin-bottom: .15rem; }


/* ---------- Gösterge kutuları ---------- */
.istatistik {
    background: var(--y-kart); border: 1px solid var(--y-kenar);
    border-radius: var(--y-r); box-shadow: none;
    padding: .95rem 1.05rem;
}
/* Kalın sol renk şeridi kaldırıldı: dört kutu yan yana dizilince dört renkli
   çubuk ilk bakılan yer oluyordu, oysa okunması gereken RAKAM. */
.istatistik::before { display: none; }

.istatistik .etiket {
    font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--y-metin-silik); font-weight: 700;
}
/* Rakam kutunun ASIL işi: büyük, sıkı ve koyu. Ekranda ilk okunan şey bu olmalı. */
.istatistik .deger {
    font-weight: 700; margin-top: .35rem; color: var(--y-metin);
    font-size: 1.75rem; line-height: 1.1; letter-spacing: -.025em;
}
.istatistik .alt { font-size: .77rem; color: var(--y-metin-soluk); margin-top: .2rem; }

/* ---------- Tablo ---------- */
table.veri { font-size: .875rem; }
/* Başlık satırı DOLGUSUZ: dolgulu şerit tabloyu ayrı bir kutu gibi gösteriyor
   ve kartın içinde ikinci bir çerçeve etkisi yaratıyordu. Alt çizgi yeterli.
   ⚠ Yapışkan başlıkta zemin ŞART (altındaki satırlar görünürdü), o yüzden
   kart rengi veriliyor — dolgu değil, kartın kendi rengi. */
table.veri thead th {
    background: var(--y-kart); color: var(--y-metin-silik);
    border-bottom: 1.5px solid var(--y-kenar);
    font-size: .68rem; letter-spacing: .08em; padding: .6rem .85rem;
    font-weight: 700;
}
table.veri tbody td { padding: .62rem .85rem; border-bottom: 1px solid var(--y-kenar-soft); color: var(--y-metin); }
table.veri tbody tr:last-child td { border-bottom: none; }
table.veri tbody tr:hover { background: var(--y-vurgu-soft); }
[data-tema="koyu"] table.veri tbody tr:hover { background: #1a2439; }

/* Mobil kart tablosu (app.css) sabit açık renkler kullanıyordu. */
table.veri.kartlasan tr { border-color: var(--y-kenar); background: var(--y-kart); }
table.veri.kartlasan tbody tr:hover { background: var(--y-kart); }
table.veri.kartlasan td { border-bottom-color: var(--y-kenar-soft); }
table.veri.kartlasan td::before { color: var(--y-metin-silik); }

/* ---------- Rozet ---------- */
.rozet { padding: .2rem .58rem; font-size: .74rem; font-weight: 650; border-radius: 6px; border: 1px solid transparent; }
.rozet.notr   { background: var(--y-kenar-soft); color: var(--y-metin-soluk); }
.rozet.basari { background: var(--y-basari-bg); color: var(--y-basari); }
.rozet.uyari  { background: var(--y-uyari-bg);  color: var(--y-uyari); }
.rozet.hata   { background: var(--y-hata-bg);   color: var(--y-hata); }

/* ---------- Düğme ---------- */
/* Tüm düğmeler aynı yükseklikte: farklı yazı uzunlukları yüzünden yan yana
   duran düğmeler birkaç piksel kayıyordu ve satır tırtıklı görünüyordu. */
.dugme {
    border-radius: var(--y-r-sm); padding: 0 .9rem; font-size: .875rem; font-weight: 600;
    min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
    gap: .4rem; line-height: 1; transition: background .12s, border-color .12s, color .12s;
    /* ⚠ Satır atlamasın: dar başlık çubuğunda "+ Yeni cari" iki satıra bölünüyor
       ve düğme 37 px yerine iki kat yüksekliğe çıkıp satırı bozuyordu. */
    white-space: nowrap;
}
.dugme.birincil { background: var(--y-vurgu); border-color: var(--y-vurgu); color: #fff; box-shadow: none; }
.dugme.birincil:hover { background: var(--y-vurgu-koyu); border-color: var(--y-vurgu-koyu); filter: none; }
.dugme.ikincil { background: var(--y-kart); border: 1px solid var(--y-kenar); color: var(--y-metin); }
.dugme.ikincil:hover { background: var(--y-vurgu-soft); border-color: var(--y-vurgu); color: var(--y-vurgu); }

/* Klavyeyle gezinenler için görünür odak halkası. */
.dugme:focus-visible, .form-girdi:focus-visible, .nav-oge:focus-visible {
    outline: 2px solid var(--y-vurgu); outline-offset: 2px;
}

/* ---------- Form ---------- */
/* Girdiler de 36 px: düğmelerle aynı satırda duran filtre kutuları aksi hâlde
   birbirine göre kayıyordu (filtre çubuğunda en çok göze batan şeydi). */
.form-girdi {
    background: var(--y-kart); border: 1px solid var(--y-kenar);
    border-radius: var(--y-r-sm); color: var(--y-metin);
    padding: .45rem .7rem; font-size: .875rem; min-height: 36px;
    font-family: inherit;
}
.form-girdi:focus { border-color: var(--y-vurgu); box-shadow: 0 0 0 3px var(--y-vurgu-soft); outline: none; }
.form-girdi::placeholder { color: var(--y-metin-silik); }
.form-grup label { color: var(--y-metin); }

/* Tarih/sayı alanlarının tarayıcı simgeleri koyu zeminde görünmez kalıyordu. */
[data-tema="koyu"] .form-girdi::-webkit-calendar-picker-indicator { filter: invert(.75); }

.otp-kutular input { background: var(--y-kart); border-color: var(--y-kenar); color: var(--y-metin); }

/* ---------- Filtreler ---------- */
.filtre-cubugu { border-top-color: var(--y-kenar); }
.rapor-kaynak { color: var(--y-metin-soluk); }
.rapor-kaynak code { background: var(--y-kenar-soft); }
.filtre-hazir button { background: var(--y-kart); border-color: var(--y-kenar); color: var(--y-metin-soluk); }
.filtre-hazir button:hover { background: var(--y-vurgu-soft); color: var(--y-vurgu); }
.filtre-hazir button.secili { background: var(--y-vurgu); color: #fff; border-color: var(--y-vurgu); }

/* ---------- Rapor merkezi kartları ---------- */
.rapor-oge { background: var(--y-kart); border-color: var(--y-kenar); color: var(--y-metin); }
.rapor-oge .sim { background: var(--y-kenar-soft); }
.rapor-oge .not { color: var(--y-metin-soluk); }

/* ---------- Giriş ekranı ---------- */
.giris-gorsel { background-color: var(--y-yan); }
.giris-kart .alt-yazi { color: var(--y-metin-soluk); }

/* Blazor hata şeridi — koyu temada sarı zemin üzerinde koyu yazı okunmuyordu. */
[data-tema="koyu"] #blazor-error-ui { background: #3a2f10; color: #f3e3b8; }

/* ============================================================
   Mobil
   ============================================================ */
@media (max-width: 900px) {
    .sayfa { padding: 1.1rem .9rem 2rem; }
    .ust-cubuk { padding: 0 .9rem; }
    .istatistik .deger { font-size: 1.45rem; }
}

/* ------------------------------------------------------------
   Dar ekranda kart başlığı satırları ALT ALTA iner.

   Sayfaların çoğu kart başlığını satır içi stille kuruyor:
   `<div style="display:flex; justify-content:space-between; ...">`
   solda başlık, sağda filtreler. Satır içi stil medya sorgusuyla
   EZİLEMEZ (özgüllük her zaman kazanır), bu yüzden telefonda başlık
   ile filtreler aynı satırda sıkışıp başlık tek kelimeye düşüyor,
   filtreler ekranın dışına taşıyordu — 15 sayfada birden.

   `!important` burada bilinçli: satır içi stili ancak o yener.
   Sayfaların işaretlemesine dokunmadan hepsi düzeliyor.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
    .kart-govde > div[style*="flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .7rem !important;
    }
    /* Sabit genişlikli girdiler (width:200px, width:240px …) ekranı taşırıyordu. */
    .kart-govde .form-girdi,
    .kart-govde select.form-girdi,
    .kart-govde input.form-girdi { width: 100% !important; max-width: 100%; }

    /* Başlık ile açıklaması artık tam genişlikte, kelime kelime sarmıyor. */
    .kart-govde h3 { margin-bottom: .2rem; }
}

@media (max-width: 560px) {
    .istatistik-satir { grid-template-columns: 1fr 1fr; gap: .7rem; }
    .istatistik { padding: .85rem .9rem; }
    .istatistik .deger { font-size: 1.4rem; }
    .kart-govde { padding: 1rem 1rem; }
    /* Tema düğmesi dar ekranda da kalır — firma seçiciler gizlenirken o gitmesin. */
    .tema-dugme { display: inline-flex; }
}

/* ---- Ekran yetki matrisi: rol hücresindeki işlem kutuları ----
   Rol başına dört ayrı sütun açmak tabloyu taşırıyordu (3 rol × 4 işlem = 12 sütun);
   bunun yerine her rol tek hücrede kendi kutularını taşır. */
.yetki-matris .islem-kutulari {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .5rem;
    justify-content: center;
}

.yetki-matris .islem-kutu {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .72rem;
    color: var(--metin-soluk);
    cursor: pointer;
    white-space: nowrap;
}

.yetki-matris .islem-kutu input { margin: 0; }

/* Görüntüleme kapalıyken alt yetkiler geçersiz — kutu duruyor ama etkisiz olduğu görünsün. */
.yetki-matris .islem-kutu.pasif { opacity: .4; }

/* ============================================================
   Masaüstü geometrisi
   ============================================================

   NEDEN MEDYA SORGUSU İÇİNDE:
   bu dosya app.css'ten SONRA yükleniyor (renk sisteminin kazanması için, bilerek).
   Aşağıdaki bildirimler yalnız renk değil GEOMETRİ veriyor — `.uygulama` sütunları,
   `.sayfa`/`.kart-govde` iç boşluğu, menü satırı yüksekliği, `.dugme` yüksekliği.
   Koşulsuz yazıldıklarında app.css'in `@media (max-width: 900px)` bloğunu EŞİT
   ÖZGÜLLÜKTE ama DAHA SONRA ezip geçiyorlardı.

   Görülen sonuç (375 px'te ölçülmüştü): `.uygulama` sütunları `250px 125px` kalıyordu —
   kenar çubuğu ekran dışına çıkmasına rağmen ızgarada yerini koruyor, içeriğe 125 px
   kalıyordu. Sayfa okunmuyordu.

   ⚠ ÖNCEKİ ÇÖZÜM BAŞKAYDI: dosyanın sonunda, app.css'in mobil değerlerini bir kez daha
   yazan bir "telafi bloğu" vardı. İki dosya aynı sayıları iki yerde tutuyordu; biri
   değişip diğeri unutulduğunda mobil yeniden bozulacaktı. Artık telafi yok: geometri
   masaüstü kırılımına kapatıldı, mobilde app.css tek başına konuşuyor.

   ⚠ Buraya YALNIZ app.css'in mobilde farklı istediği bildirimler taşındı. Mobilde de
   aynı kalması gereken şeyler (kenar çubuğu markası, grup başlığı) koşulsuz bırakıldı —
   onları da taşımak görünümü değiştirirdi. */

@media (min-width: 901px) {
    .uygulama { grid-template-columns: var(--kenar-cubugu-genislik) 1fr; }

    .ust-cubuk { padding: 0 1.35rem; }
    .ust-cubuk .sag { gap: .6rem; }
    .firma-secici { padding: .34rem .75rem; }

    .sayfa { padding: 1.6rem 1.4rem 2.5rem; }
    .kart-govde { padding: 1.25rem 1.35rem; }

    .istatistik { padding: 1.05rem 1.15rem; }
    .istatistik-satir { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: .9rem; margin-bottom: 1.3rem; }
    .istatistik .deger { font-size: 1.72rem; }

    .nav-oge { padding: .58rem .8rem; font-size: .93rem; }
    .nav-oge.alt { font-size: .875rem; padding: .44rem .6rem; }
}

/* ⚠ Ayrı kırılım: `.dugme` yüksekliğini app.css yalnız 560 px altında büyütüyor
   (parmakla basılan hedef 44 px). 901 px'e kapatmak 560-900 arasında düğmeleri
   gereksiz yere büyütürdü. */
@media (min-width: 561px) {
    .dugme { min-height: 37px; }
}

/* ============================================================
   37. oturum — görünüm revizyonunun ince ayarları
   Buradakiler yukarıdaki bileşen bloklarına EK: ya yeni bir öğe,
   ya da app.css'te olmayan bir davranış.
   ============================================================ */

/* Sayfa başlığı çubuğu (RaporBaslik) — her ekranın ilk okunan satırı.
   Kart başlıklarıyla aynı ağırlıktaydı, ayrışmıyordu. */
.rapor-baslik h2, .rapor-baslik h3 { font-size: 1.22rem; letter-spacing: -.02em; }
.rapor-baslik { align-items: flex-start; gap: 1rem; margin-bottom: .2rem; }

/* Kart içindeki ikincil açıklama: uzun cümleler satır boyu 90 karakteri
   geçince okunmuyor. */
.rapor-kaynak { max-width: 78ch; line-height: 1.55; font-size: .84rem; }

/* Filtre çubuğu: alanlar aynı taban çizgisinde dursun ve dar ekranda
   düzgün sarsın. Önceden etiket yüksekliği farklı olan alanlar kayıyordu. */
.filtre-cubugu { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }
.filtre-alan { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.filtre-alan > label {
    font-size: .72rem; font-weight: 650; letter-spacing: .04em;
    text-transform: uppercase; color: var(--y-metin-silik);
}

/* Bölüm başlıkları arasındaki ritim: art arda gelen kartlar birbirine
   yapışık duruyordu. */
.kart + .kart { margin-top: .85rem; }

/* Bağlantılar tabloda: alt çizgi yalnız üzerine gelince — 9 sütunlu bir
   tabloda her satırda çizili metin gürültü yapıyor. */
table.veri a { text-decoration: none; }
table.veri a:hover { text-decoration: underline; }

/* Rozetler satır içinde dik hizalansın (metinle aynı taban çizgisi). */
.rozet { display: inline-flex; align-items: center; gap: .25rem; line-height: 1.4; }

/* Boş durum: "kayıt yok" metinleri sayfanın ortasında asılı kalıyordu. */
.bos-durum { text-align: center; padding: 2.5rem 1rem; color: var(--y-metin-soluk); }

/* Kaydırma çubuğu — içerik alanında da ince ve sessiz olsun. */
.sayfa, .tablo-sar, .asecim-liste { scrollbar-width: thin; }

/* Dar ekranda kart başlığındaki araç çubuğu.
   Arama kutusu ve açılır listeler sayfalarda satır içi genişlikle yazılı
   (style="width:260px"); 375 px'te bunlar yan yana sığmayıp kırpılıyordu
   ("🔍 Kod," diye yarım görünen arama kutusu).

   ⚠ Seçici bilerek DAR: yalnız `.kart-govde`nin doğrudan altındaki bir div'in
   doğrudan çocuğu olan kutular. Tablo içindeki miktar/fiyat kutuları
   (td > input) bu kalıba uymaz ve dokunulmaz — onların dar olması gerekiyor. */
@media (max-width: 560px) {
    /* ⚠ Zincir `.kart-govde > div > …` YETMEDİ: araç çubuğu çoğu sayfada iki
       kat div içinde (başlık bloğu + düğme bloğu). Ölçüldü, kural hiç tutmadı.
       `div > .form-girdi` (herhangi bir div'in DOĞRUDAN çocuğu) doğru ölçü:
       tablodaki miktar/fiyat kutuları `td`nin doğrudan çocuğu olduğu için
       kapsam dışında kalır ve dar kalmaya devam eder. */
    /* ⚠ Yalnız `width:100%` YETMEDİ — ölçüldü, kutular 82 px kaldı.
       Sebep: araç çubuğu `display:flex` ve SARMIYOR; dört öğe aynı satırda
       kalınca hepsi orantılı büzülüyor, genişlik vermek işe yaramıyor.
       Önce satırın sarması gerekiyor. */
    .kart-govde div { flex-wrap: wrap; }

    .kart-govde div > .form-girdi,
    .kart-govde div > .asecim {
        width: 100% !important; max-width: 100%; flex: 1 1 100%;
    }
    /* Düğmeler tam satır kaplamasın: yan yana sığdıkları sürece birlikte dursunlar. */
    .kart-govde div > .dugme { flex: 1 1 auto; }
}