/* ============================================================
   Apartman / Site Yonetim Sistemi — ana tema
   Kirilimlar:  >1024 masaustu TAM · 768-1024 tablet TAM · <768 telefon LIGHT
   ============================================================ */

/* ---- Sifirlama ---- */
*, *::before, *::after { box-sizing: border-box; }

/* HIDDEN GERCEKTEN GIZLESIN.
   Tarayicinin kendi kurali sadece `[hidden] { display: none }` —
   sinif secicisi (0,1,0) onu yendigi icin `display: grid` ya da
   `display: flex` tasiyan her kutu hidden'a ragmen EKRANDA KALIR.
   Bu tuzaga uc kez ayri ayri yakalanip uc ayri yama yazilmis
   (istisna-kutu, istisna-katman, istisna-secim); dorduncusu
   26.08.2026'da toplu borclandirmada cikti: sayac tipi secilince
   yonlendirme karti geliyor ama form gizlenmiyordu.
   !important burada dogru: "hidden" bir istek degil, bir emir. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;

    /* Kaydirma cubugu icin yer HER ZAMAN ayrilsin.
       Kisa bir sayfada cubuk kaybolunca gorus alani ~15px geniser ve
       butun icerik saga kayar; rapor ekraninda bir bolum acilip
       kapandiginda bu "ekran genisledi" diye gorunuyordu.

       Iki kural birlikte: "overflow-y: scroll" her tarayicida
       calisir ama cubugun izini bos sayfada da gosterir;
       "scrollbar-gutter" destekleyen tarayicida daha temizdir ve
       sonra geldigi icin o kazanir. macOS'ta "kaydirma cubuklarini
       her zaman goster" secili degilse ikisi de fark ettirmez —
       zaten orada sorun da cikmaz. */
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background: var(--kagit);
    color: var(--murekkep);
    font-family: var(--yazi);
    font-size: var(--olcek-normal);
    font-weight: var(--kalin-normal);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--cini-metin); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--cini);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Rakam gecen her yer tabular — para sutunlari hizali dursun */
.para, .rakam, td.para, th.para, .buyuk-rakam {
    font-family: var(--yazi-rakam);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ============================================================
   1. Iskelet
   ============================================================ */

.kabuk {
    display: grid;
    grid-template-columns: var(--serit-genislik) 1fr;
    min-height: 100vh;
}

/* ---- Sol serit ---- */
.serit {
    background: var(--serit);
    color: var(--serit-metin);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;

    /* KESILMEK YERINE KAYSIN.
       Once "overflow: hidden" yaziyordu. Uzun ekranda fark
       etmiyor, ama TELEFON YATAYDA 390px yuksek: menu oraya
       sigmiyor ve alttaki maddeler kesiliyordu — ulasilacak
       bir yol da yoktu. Olculdu 27.08.2026, iPhone yatay.
       overscroll-behavior: menuyu sonuna kadar kaydirinca
       arkadaki sayfa kaymasin. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;

    /* CENTIK/ADA ICIN PAY.
       viewport-fit=cover acik, yani icerik ekranin kenarina
       kadar uzaniyor. Yatayda iPhone'un adasi SOL KENARDA
       kaliyor ve menunun ustune biniyordu. Padding ile
       iceri aliniyor; arka plan kenara dayanmaya devam
       ediyor, yalnizca maddeler kayiyor. */
    padding-left: env(safe-area-inset-left);
}

.serit-marka {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    padding: var(--bosluk-4) var(--bosluk-4);
    border-bottom: 1px solid var(--serit-cizgi);
    min-height: var(--ust-yukseklik);
}

.serit-marka-simge {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    background: var(--cini);
    border-radius: var(--yuvarlak);
    color: #fff;
}

.serit-marka-ad {
    font-size: var(--olcek-kucuk);
    font-weight: var(--kalin-koyu);
    color: var(--murekkep);
    letter-spacing: 0.02em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.serit-marka-alt {
    display: block;
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-normal);
    color: var(--serit-soluk);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.serit-gezinti {
    flex: 1;
    overflow-y: auto;
    padding: var(--bosluk-4) 0 var(--bosluk-6);
    scrollbar-width: thin;
    scrollbar-color: var(--serit-cizgi) transparent;
}
.serit-gezinti::-webkit-scrollbar { width: 8px; }
.serit-gezinti::-webkit-scrollbar-thumb {
    background: var(--serit-cizgi);
    border-radius: 4px;
}

.serit-grup { border-bottom: 1px solid var(--serit-cizgi); }
.serit-grup:last-child { border-bottom: none; }

/* Menunun altina sabit, gezinti listesinin DISINDA duran bolum
   (bkz. "Hakkında" baglantisi) — .serit-gezinti'nin flex:1'i onu
   asagiya iter, ayri bir cizgiyle modul listesinden ayrilir. */
.serit-alt {
    flex: 0 0 auto;
    border-top: 1px solid var(--serit-cizgi);
    padding: var(--bosluk-2) 0;
}

/* ---- Akordiyon basligi ----
   <summary> oldugu icin JS olmadan da acilip kapanir. */
.serit-grup-baslik {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    padding: 11px var(--bosluk-4);
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--serit-baslik);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: color var(--gecis), background var(--gecis);
}
.serit-grup-baslik::-webkit-details-marker { display: none; }
.serit-grup-baslik:hover { color: var(--murekkep); background: var(--serit-2); }

.serit-ok {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--serit-pasif);
    transition: transform var(--gecis);
}
.serit-grup[open] > .serit-grup-baslik .serit-ok { transform: rotate(90deg); }

/* Kapali grubun icinde aktif sayfa varsa isaret ver */
.serit-grup:not([open]) > .serit-grup-baslik.icinde-aktif { color: var(--murekkep); }
.serit-grup:not([open]) > .serit-grup-baslik.icinde-aktif::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cini);
    flex: 0 0 auto;
}

.serit-govde { padding-bottom: var(--bosluk-3); }

.serit-bag {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    padding: 9px var(--bosluk-4);
    color: var(--serit-metin);
    font-size: var(--olcek-kucuk);
    border-left: 2px solid transparent;
    transition: background var(--gecis), color var(--gecis);
}
.serit-bag:hover {
    background: var(--serit-3);
    color: var(--murekkep);
    text-decoration: none;
}
.serit-bag[aria-current="page"] {
    background: var(--serit-3);
    color: var(--murekkep);
    border-left-color: var(--cini);
    font-weight: var(--kalin-koyu);
}
.serit-bag svg { flex: 0 0 auto; }
.serit-bag[aria-current="page"] svg { color: var(--cini); }

.serit-bag-ad {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kodu yazilmamis modul — okunur ama ikincil.
   Opaklik KULLANILMAZ; renk zaten olculmus (5.2:1). */
.serit-bag.yakinda {
    color: var(--serit-pasif);
    cursor: default;
}
.serit-bag.yakinda:hover { background: none; color: var(--serit-pasif); }
.serit-bag.yakinda svg { color: var(--serit-pasif); }

.rozet-yakinda {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 5px;
    border: 1px solid var(--serit-cizgi);
    border-radius: 3px;
    color: var(--serit-pasif);
}

/* ---- Ust bar ---- */
.tuval { display: flex; flex-direction: column; min-width: 0; }

.ust {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--bosluk-4);
    height: var(--ust-yukseklik);
    /* Sag kenar payi: telefon ters cevrilince ada sag tarafta
       kalir, cikis/avatar dugmeleri altina girerdi. */
    padding: 0 calc(var(--bosluk-5) + env(safe-area-inset-right)) 0 var(--bosluk-5);
    background: rgba(255, 253, 248, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--cizgi);
}

.ust-baslik {
    font-size: var(--olcek-normal);
    font-weight: var(--kalin-koyu);
    letter-spacing: -0.01em;
}

.ust-ara { flex: 1; max-width: 420px; position: relative; }
.ust-ara input {
    width: 100%;
    height: 34px;
    padding: 0 var(--bosluk-3) 0 34px;
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    font-size: var(--olcek-kucuk);
}
.ust-ara input::placeholder { color: var(--murekkep-3); }
.ust-ara input:focus {
    outline: none;
    border-color: var(--cini);
    background: var(--yuzey);
    box-shadow: 0 0 0 3px var(--cini-acik);
}
.ust-ara svg {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--murekkep-3);
    pointer-events: none;
}

.ust-sag { margin-left: auto; display: flex; align-items: center; gap: var(--bosluk-2); }

.ust-kullanici {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    padding: var(--bosluk-1) var(--bosluk-2);
    border-radius: var(--yuvarlak);
    border: 1px solid transparent;
}
.ust-kullanici:hover { background: var(--kagit); border-color: var(--cizgi); text-decoration: none; }

.avatar {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: var(--cini);
    color: #fff;
    border-radius: 50%;
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.02em;
}

.ust-kullanici-ad {
    font-size: var(--olcek-kucuk);
    color: var(--murekkep);
    line-height: 1.2;
}
.ust-kullanici-rol {
    display: block;
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
    text-transform: capitalize;
}

/* ---- Icerik ---- */
.icerik {
    flex: 1;
    /* Sayfa sonu, son kartin hemen altinda kesiliyordu (kullanici
       geri bildirimi) — alt bosluk ~4 satirlik nefes payi icin
       buyutuldu. */
    padding: var(--bosluk-5) calc(var(--bosluk-5) + env(safe-area-inset-right))
             calc(var(--bosluk-5) + 96px) var(--bosluk-5);
    max-width: 1400px;
    width: 100%;
}

.sayfa-basi {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--bosluk-4);
    margin-bottom: var(--bosluk-5);
    padding-bottom: var(--bosluk-4);
    border-bottom: 1px solid var(--cizgi);
}

/* Ust menuye ("Yonetim" gibi bir kapi sayfasina) donus linki (M1,
   bagimsiz inceleme 18.09.2026). Eskiden sag sarittaki gercek eylem
   dugmeleriyle (Yeni kayit ekle vb.) AYNI gri kutu kilifinda,
   karisik duruyordu — biri "cikis kapisi" biri "yeni kayit" anlamina
   geliyordu ama gorunusleri ayni. Simdi basligin SOLUNDA, kucuk ve
   soluk — mobildeki ".geri-serit" ile ayni ruhta ama sadece telefonda
   degil HER genislikte gorunuyor (o hala yalnizca telefonda, sekme
   olmayan sayfalarda; burasi ozellikle "Yonetim" gibi bir index'ten
   gelindigini belirten ekranlara elle eklendi). */
.sayfa-geri {
    display: block;
    margin-bottom: 2px;
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-3);
}
.sayfa-geri a { color: inherit; }
.sayfa-geri a:hover { color: var(--cini); }

/* Telefonda ustte zaten OTOMATIK bir geri seridi var (".geri-serit",
   "‹ Diger" — bkz. layout/ana.php, sekme olmayan her sayfaya kendisi
   ekleniyor). Bu yeni link onunla ust uste binip iki "geri" oku
   gosteriyordu — telefonda gizleyip sadece masaustunde birakiyoruz,
   asil M1 sorunu zaten masaustu sag seridindeydi. */
@media screen and (max-width: 767px) {
    .sayfa-geri { display: none; }
}

.sayfa-baslik {
    font-size: var(--olcek-buyuk);
    font-weight: var(--kalin-koyu);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.sayfa-alt {
    margin-top: var(--bosluk-1);
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-3);
}

/* ---- Hakkinda ----
   Once dar/boyuna tek sutundu — uzun aciklama metni karti gereksiz
   uzatiyordu. Iki sutuna bolundu: solda kimlik (logo, surum,
   iletisim), sagda anlatim — genis/enine bir govde oluyor.
   Yunanca ad ve alt basligi ANLATIM sutununda duruyor (16.09.2026'da
   tasindi): kimlik artik gorsel logoyu tasiyor, isim/aciklama ayni
   govdede birlikte okunuyor. */
.hakkinda-kart {
    display: flex;
    align-items: stretch;
    gap: var(--bosluk-6);
    max-width: 780px;
    margin: var(--bosluk-6) auto 0;
    padding: var(--bosluk-6) var(--bosluk-6);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
}
.hakkinda-kimlik {
    flex: 0 0 220px;
    text-align: center;
}
.hakkinda-logo {
    width: 140px;
    height: 140px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}
.hakkinda-yunanca {
    font-size: 2.6rem;
    font-weight: var(--kalin-koyu);
    color: var(--cini);
    letter-spacing: 0.01em;
    line-height: 1.1;
}
.hakkinda-ad {
    margin-top: var(--bosluk-2);
    font-size: var(--olcek-normal);
    font-weight: var(--kalin-koyu);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.hakkinda-dikey-cizgi {
    flex: 0 0 1px;
    align-self: stretch;
    background: var(--cizgi);
}
.hakkinda-anlatim {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.hakkinda-aciklama {
    margin-top: var(--bosluk-4);
    font-size: var(--olcek-normal);
    color: var(--murekkep-2);
    line-height: 1.55;
    text-align: left;
}
.hakkinda-cizgi {
    height: 1px;
    background: var(--cizgi);
    margin: var(--bosluk-4) 0;
}
.hakkinda-destek { margin-bottom: var(--bosluk-2); }
.hakkinda-surum {
    font-family: var(--yazi-rakam);
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-3);
}
.hakkinda-copyright {
    margin-top: 2px;
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
}
/* Dar ekranda iki sutun sigmiyor — alt alta doner, dikey cizgi
   anlamini kaybettigi icin yatay cizgiye donusur. */
@media screen and (max-width: 640px) {
    .hakkinda-kart { flex-direction: column; padding: var(--bosluk-5); }
    .hakkinda-kimlik { flex-basis: auto; }
    .hakkinda-dikey-cizgi { flex-basis: 1px; height: 1px; }
}

/* ---- Yardim: tek uzun sayfa + yan icindekiler (plan: KILAVUZ-PLANI.md) ---- */
.yardim-govde {
    display: flex;
    align-items: flex-start;
    gap: var(--bosluk-6);
}
.yardim-icindekiler {
    flex: 0 0 220px;
    position: sticky;
    top: var(--bosluk-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--bosluk-3);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
}
.yardim-icindekiler a {
    padding: 6px var(--bosluk-3);
    border-radius: var(--yuvarlak-1);
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-2);
}
.yardim-icindekiler a:hover { background: var(--kagit); text-decoration: none; }
.yardim-metin { flex: 1; min-width: 0; }
.yardim-metin section.kart { margin-bottom: var(--bosluk-4); scroll-margin-top: var(--bosluk-4); }
.yardim-metin .kart-govde > p { line-height: 1.6; }
.yardim-metin .kart-govde > p + p { margin-top: var(--bosluk-3); }
.yardim-metin .kart-govde ul,
.yardim-metin .kart-govde ol { margin: var(--bosluk-3) 0 0; padding-left: 1.3em; line-height: 1.6; }
.yardim-metin .kart-govde li + li { margin-top: 6px; }

@media screen and (max-width: 900px) {
    .yardim-govde { flex-direction: column; }
    .yardim-icindekiler { position: static; flex-basis: auto; width: 100%; }
}

/* ============================================================
   2. Bilesenler
   ============================================================ */

/* ---- Kart ---- */
.kart {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
    box-shadow: var(--golge-1);
}
.kart-basi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-3);
    padding: var(--bosluk-4) var(--bosluk-5);
    border-bottom: 1px solid var(--cizgi-ince);
}
.kart-baslik {
    font-size: var(--olcek-kucuk);
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--murekkep-2);
}
.kart-govde { padding: var(--bosluk-5); }

/* ---- Olcu kutusu (dashboard rakamlari) ---- */
.olcu-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--bosluk-4);
}

.olcu {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
    padding: var(--bosluk-4) var(--bosluk-5);
    position: relative;
    overflow: hidden;
}
.olcu::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--cizgi-koyu);
}
.olcu.borc::before     { background: var(--borc); }
.olcu.tahsilat::before { background: var(--tahsilat); }
.olcu.uyari::before    { background: var(--uyari); }
.olcu.vurgu::before    { background: var(--cini); }

.olcu-etiket {
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--murekkep-3);
}
.olcu-deger {
    margin-top: var(--bosluk-2);
    font-family: var(--yazi-rakam);
    font-variant-numeric: tabular-nums;
    font-size: var(--olcek-buyuk);
    font-weight: var(--kalin-koyu);
    letter-spacing: -0.02em;
    /* Para degeri satir bolmez. Dort kutu yan yana gelince kutu
       daraliyor ve "1.717,00 ₺" ikiye ayrilip ₺ alt satira
       dusuyordu — rakam kirilmis gibi gorunuyor. */
    white-space: nowrap;
}
.olcu-alt {
    margin-top: var(--bosluk-1);
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-3);
}
/* olcu-alt icindeki bir tutar (orn. "Bu ay odenen gider 21.016,74 ₺")
   etiketle ayni kucuk boyutta basiliyordu — asil bilgi olan rakam
   okunmasi zor kadar kuculuyordu. Etiket kucuk kalsin, rakam biraz
   buyusun ve rakam hizalamasi kazansin. */
.olcu-alt-rakam {
    display: inline-block;
    margin-top: 2px;
    font-size: 1.0625rem;
    font-weight: var(--kalin-koyu);
    font-variant-numeric: tabular-nums;
    color: var(--murekkep-2);
}

/* ---- Tablo ---- */
.tablo-sarma {
    overflow-x: auto;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
    background: var(--yuzey);
}

table.tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--olcek-kucuk);
}

.tablo thead th {
    position: sticky;
    top: 0;
    background: var(--yuzey-2);
    text-align: left;
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--murekkep-2);
    padding: var(--bosluk-3) var(--bosluk-4);
    border-bottom: 1px solid var(--cizgi-koyu);
    white-space: nowrap;
}

.tablo tbody td {
    padding: 11px var(--bosluk-4);
    border-bottom: 1px solid var(--cizgi-ince);
    vertical-align: middle;
}
.tablo tbody tr:last-child td { border-bottom: none; }
.tablo tbody tr:hover { background: var(--yuzey-vurgu); }

.tablo .para, .tablo th.para { text-align: right; }

.tablo tfoot td {
    padding: var(--bosluk-3) var(--bosluk-4);
    border-top: 2px solid var(--cizgi-koyu);
    font-weight: var(--kalin-koyu);
    background: var(--yuzey-2);
}

/* ---- Rozet ---- */
.rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.rozet::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.rozet.borc     { background: var(--borc-zemin);     color: var(--borc); }
.rozet.tahsilat { background: var(--tahsilat-zemin); color: var(--tahsilat); }
.rozet.uyari    { background: var(--uyari-zemin);    color: var(--uyari); }
.rozet.notr     { background: var(--yuzey-2);        color: var(--murekkep-2); }
/* Vurgu rozeti: yaninda notr rozet varken ayirt edilmesi gereken
   ikinci bilgi icin. Duyuru listesinde hedef notr, alici vurgulu —
   ikisi de gri olsa "A Blok 3" ile "Kat malikleri" tek bir sey
   gibi okunuyordu. */
.rozet.cini     { background: var(--cini-acik);      color: var(--cini-metin); }

/* ---- Dugme ---- */
.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bosluk-2);
    min-height: 36px;
    padding: 0 var(--bosluk-4);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak);
    background: var(--yuzey);
    color: var(--murekkep);
    font-size: var(--olcek-kucuk);
    font-weight: var(--kalin-koyu);
    cursor: pointer;
    transition: background var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.dugme:hover { background: var(--kagit); text-decoration: none; }
.dugme:active { transform: translateY(1px); }

.dugme.birincil {
    background: var(--cini);
    border-color: var(--cini);
    color: #fff;
}
.dugme.birincil:hover { background: var(--cini-koyu); border-color: var(--cini-koyu); }

.dugme.tehlike { color: var(--borc); border-color: #e3b5ae; }
.dugme.tehlike:hover { background: var(--borc-zemin); }

.dugme.sade { border-color: transparent; background: none; }
.dugme.sade:hover { background: var(--kagit); border-color: var(--cizgi); }

.dugme[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- Acilir menu ----
   Baslik seridindeki "X ekle" gibi coklu-secenekli eylemler icin.
   <details>/<summary> ile: JS kapaliyken de acilir, .can ile ayni
   yaklasim (bkz. yukarida durum cani). */
.acilir-menu { position: relative; display: inline-block; }

.acilir-menu > summary {
    list-style: none;
}
.acilir-menu > summary::-webkit-details-marker { display: none; }
.acilir-menu > summary::marker { content: ''; }

.acilir-menu-govde {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    width: 260px;
    max-width: calc(100vw - var(--bosluk-4) * 2);
    padding: var(--bosluk-2);
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: 0 10px 28px rgba(26, 24, 21, .14);
}

.acilir-menu-not {
    margin: 0 0 var(--bosluk-2);
    padding: 0 var(--bosluk-2);
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
    line-height: 1.4;
}

.acilir-menu-govde form { margin: 0; }

.acilir-menu-secenek {
    display: block;
    width: 100%;
    padding: 9px var(--bosluk-3);
    border: none;
    border-radius: var(--yuvarlak);
    background: none;
    color: var(--murekkep);
    font-size: var(--olcek-kucuk);
    text-align: left;
    cursor: pointer;
}
.acilir-menu-secenek:hover { background: var(--yuzey-2); }

@media (max-width: 767px) {
    .acilir-menu-govde { width: 240px; }
}

@media print { .acilir-menu { display: none !important; } }

/* ---- Form ---- */
.alan { margin-bottom: var(--bosluk-4); }

.alan-etiket {
    display: block;
    margin-bottom: 6px;
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--murekkep-2);
}

.girdi {
    width: 100%;
    min-height: 38px;
    padding: 8px var(--bosluk-3);
    background: var(--yuzey);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak);
    color: var(--murekkep);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.girdi:focus {
    outline: none;
    border-color: var(--cini);
    box-shadow: 0 0 0 3px var(--cini-acik);
}
.girdi::placeholder { color: var(--murekkep-3); }
.girdi[aria-invalid="true"] { border-color: var(--borc); }

/* <select>'in yerlesik gorunumu tarayiciya gore degisir ve ayni
   min-height'a ragmen <input>'tan uzun cikar — appearance:none
   olmadan select kendi ic bosluguyla cizilmeye devam eder. Ok
   simgesi kendi SVG'miz, satir kalinligi diger ikonlarla ayni. */
select.girdi {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234d4941' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--bosluk-2) center;
    background-size: 16px;
}
select.girdi::-ms-expand { display: none; }

/* Tutar girdisi sagdan hizali ve tabular */
.girdi.para {
    text-align: right;
    font-family: var(--yazi-rakam);
    font-variant-numeric: tabular-nums;
}

/* Tutar canli onizleme (H1/T1, 17.09.2026) — "1.500 -> 1.500,00 ₺
   olarak kaydedilecek" gibi, kaydetmeden once goruluyor. */
.tutar-onizleme {
    margin: 4px 0 0;
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-3);
    text-align: right;
}
/* Virgulsuz, tek nokta + tam 3 haneli kuyruk: eskiden sessizce 1000
   kat kucuk kaydedilen tam olarak bu kalip — vurgulanmazsa kullanici
   onizlemeyi okumadan gecebilir. */
.tutar-onizleme-vurgu {
    color: var(--uyari);
    font-weight: var(--kalin-koyu);
}

.alan-yardim {
    margin-top: 5px;
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
}
.alan-hata {
    margin-top: 5px;
    font-size: var(--olcek-mikro);
    color: var(--borc);
}

.onay {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    font-size: var(--olcek-kucuk);
    cursor: pointer;
    user-select: none;
}
.onay input { width: 16px; height: 16px; accent-color: var(--cini); cursor: pointer; }

/* ---- Ekran okuyucuya gorunur, goze gorunmez ---- */
.gizli-metin {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- Anahtar (ac/kapa) ----
   iOS tarzi yuvarlak hap degil: kose hatli, mekanik bir sivic.
   Muhasebe araci havasina yakisiyor, hazir bilesen gibi durmuyor. */
.anahtar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.anahtar input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}

.anahtar-yol {
    display: block;
    width: 42px;
    height: 22px;
    padding: 2px;
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi-koyu);
    border-radius: 3px;
    transition: background var(--gecis), border-color var(--gecis);
}

.anahtar-top {
    display: block;
    width: 16px;
    height: 16px;
    background: var(--murekkep-3);
    border-radius: 2px;
    transition: transform var(--gecis), background var(--gecis);
}

.anahtar input:checked + .anahtar-yol {
    background: var(--cini);
    border-color: var(--cini-koyu);
}
.anahtar input:checked + .anahtar-yol .anahtar-top {
    background: #fff;
    transform: translateX(20px);
}

/* Bilanconun kapanisi — genel kurulda yuksek sesle okunan rakam.
   Tablo satiri olarak kalsa oteki satirlarla ayni agirlikta durur;
   oysa toplantida herkesin aradigi tek sayi budur. */
.bilanco-kapanis {
    padding: var(--bosluk-5) var(--bosluk-4);
    text-align: center;
    border-top: 1px solid var(--cizgi);
}
.bilanco-kapanis-etiket {
    margin: 0;
    font-size: var(--olcek-kucuk);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--murekkep-3);
}
.bilanco-kapanis-tutar {
    margin: var(--bosluk-2) 0 0;
    font-size: var(--olcek-buyuk);
    font-weight: var(--kalin-koyu);
    font-variant-numeric: tabular-nums;
}

/* Gelir gider tablosundaki bos ayrac satiri */
.bilanco-ara td { height: var(--bosluk-4); border-bottom: none !important; }

.anahtar input:focus-visible + .anahtar-yol {
    outline: 2px solid var(--cini);
    outline-offset: 2px;
}

.anahtar.pasif,
.anahtar input:disabled + .anahtar-yol {
    cursor: not-allowed;
}
.anahtar input:disabled + .anahtar-yol {
    background: var(--kagit);
    border-style: dashed;
}
.anahtar input:disabled + .anahtar-yol .anahtar-top {
    background: var(--cizgi-koyu);
}

/* ---- Aciklama kutusu ---- */
.aciklama-kutu {
    display: flex;
    gap: var(--bosluk-3);
    padding: var(--bosluk-4);
    margin-bottom: var(--bosluk-5);
    background: var(--cini-acik);
    border: 1px solid #bcd9dd;
    border-radius: var(--yuvarlak-2);
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-2);
}

/* ---- Bildirimler — durum sayfasi ---- */
.bildirim-kanal-liste { display: flex; flex-direction: column; gap: var(--bosluk-4); }
.bildirim-kanal { display: flex; gap: var(--bosluk-4); align-items: flex-start; }
.bildirim-kanal-ikon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--yuvarlak);
    background: var(--yuzey-2);
    color: var(--murekkep-2);
}
.bildirim-kanal-baslik {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    font-weight: var(--kalin-koyu);
    margin-bottom: var(--bosluk-1);
}
/* Henuz olmayan kanal: metin ve ikon soluklasiyor, rozet kendi
   renginde kaliyor — "bu satir pasif" mesaji renkten degil
   soluklugundan gelsin, rozet zaten "Henuz yok" diyor. */
.bildirim-kanal-pasif .bildirim-kanal-ikon { background: var(--kagit); color: var(--murekkep-3); }
.bildirim-kanal-pasif .bildirim-kanal-metin { color: var(--murekkep-3); }
.bildirim-kanal-pasif .bildirim-kanal-baslik { color: var(--murekkep-2); }
/* Ayni kutunun hata hali — "kaydedilmedi" gibi durdurucu mesajlar
   bilgi kutusuyla ayni renkte olmamali. */
.aciklama-kutu.kutu-hata { background: var(--borc-zemin); border-color: #eec9c3; }
.aciklama-kutu.kutu-hata svg { color: var(--borc); }
/* IP-6: askida satir uyarisi — hata degil (durdurucu degil), bilgi de
   degil (gozden kacmamali) — uyari sarisi kendine ayri bir tonda */
.aciklama-kutu.kutu-uyari { background: var(--uyari-zemin); border-color: #f0d9ae; }
.aciklama-kutu.kutu-uyari svg { color: var(--uyari); }
.aciklama-kutu svg { flex: 0 0 auto; color: var(--cini); margin-top: 1px; }
.aciklama-kutu p + p { margin-top: var(--bosluk-2); }

/* ---- Modul listesi ---- */
.sayfa-basi-sag { display: flex; gap: var(--bosluk-2); flex-wrap: wrap; }

/* Hesap detayinin YAZDIRMA bakiyesi — ekranda gizli, kagitta
   basligin sagina cikar (bkz. print.css ve views/hesap/detay.php). */
.yazdirma-bakiye { display: none; }

/* Kasa detayinin YAZDIRMA ozeti (giren/cikan/bakiye + IBAN) — ayni
   desen, iki satir (bkz. print.css ve views/kasa/detay.php). */
.yazdirma-kasa-ozet { display: none; }

/* Kullanici raporundaki YAZDIRMA rol yazisi — ekranda gizli, kagitta
   oval rozetin yerine duz metin cikar (bkz. print.css ve
   views/rapor/kullanici.php). */
.yazdirma-rol { display: none; }

.modul-grup + .modul-grup { margin-top: var(--bosluk-4); }

.modul-grup-sayi {
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
    font-variant-numeric: tabular-nums;
}

.modul-satir {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    padding: 11px var(--bosluk-5);
    border-bottom: 1px solid var(--cizgi-ince);
}
.modul-liste li:last-child { border-bottom: none; }

.modul-ikon {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi-ince);
    border-radius: var(--yuvarlak);
    color: var(--murekkep-2);
}

.modul-metin { flex: 1; min-width: 0; }

.modul-ad {
    display: block;
    font-size: var(--olcek-kucuk);
    font-weight: var(--kalin-koyu);
}
.modul-durum {
    display: block;
    margin-top: 1px;
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
}

.modul-kilit {
    flex: 0 0 auto;
    width: 42px;
    display: grid;
    place-items: center;
    color: var(--murekkep-3);
}

/* Acik modulun ikonu vurgu rengini alir */
.modul-satir.acik .modul-ikon {
    background: var(--cini-acik);
    border-color: #bcd9dd;
    color: var(--cini);
}
.modul-satir.kilitli .modul-ikon {
    background: var(--kapak);
    border-color: var(--kapak);
    color: var(--kapak-metin);
}

/* Kodu yazilmamis modul — okunur ama ikincil.
   Opaklik kullanilmaz; renk kontrasti korunur. */
.modul-satir.yakinda .modul-ad     { color: var(--murekkep-2); font-weight: var(--kalin-normal); }
.modul-satir.yakinda .modul-ikon   { color: var(--murekkep-3); background: var(--kagit); }

/* ---- Kaydet seridi ---- */
.kaydet-serit {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-4);
    margin-top: var(--bosluk-5);
    padding: var(--bosluk-4) var(--bosluk-5);
    background: rgba(255, 253, 248, 0.94);
    backdrop-filter: blur(8px);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
    box-shadow: var(--golge-2);
}
.kaydet-not { font-size: var(--olcek-mikro); color: var(--murekkep-3); }

/* ---- Ayarlar bolum izgarasi ---- */
.bolum-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--bosluk-4);
}

.bolum-kart {
    display: block;
    padding: var(--bosluk-4) var(--bosluk-5);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
    color: var(--murekkep);
    transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
a.bolum-kart:hover {
    border-color: var(--cini);
    box-shadow: var(--golge-2);
    transform: translateY(-1px);
    text-decoration: none;
}

.bolum-ikon {
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    margin-bottom: var(--bosluk-3);
    background: var(--cini-acik);
    border-radius: var(--yuvarlak);
    color: var(--cini);
}
.bolum-kart.yakinda .bolum-ikon { background: var(--yuzey-2); color: var(--murekkep-3); }

.bolum-ad {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    font-size: var(--olcek-kucuk);
    font-weight: var(--kalin-koyu);
}
.bolum-aciklama {
    display: block;
    margin-top: 3px;
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
    line-height: 1.45;
}
.bolum-kart.yakinda { cursor: default; }
.bolum-kart.yakinda .bolum-ad { color: var(--murekkep-2); font-weight: var(--kalin-normal); }

/* ---- Tahsilat satiri (borc detayinda) ---- */
.tahsilat-satir {
    display: grid;
    grid-template-columns: 1fr 1fr 140px auto;
    gap: var(--bosluk-3);
    align-items: start;
}
/* Dugme, altindaki yardim metnine degil USTTEKI girdi satirina
   hizalanir. Onceden flex-end + height:100% ile satirin en altina
   dusuyordu; TUTAR sutununda "Kalan ... TL" yazdigi icin de girdilerin
   bir satir altinda kaliyordu. */
.tahsilat-dugme { display: flex; flex-direction: column; align-items: stretch; }
.tahsilat-dugme .dugme { min-height: 42px; white-space: nowrap; }

/* ---- Toplu borclandirma ---- */
.suz-tarih { max-width: 116px; text-align: center; border-color: var(--cizgi-koyu); background: var(--yuzey); }

/* istisna-* kurallari dosyanin sonunda, acilir bolum ile birlikte */

.onizleme-kart { border-color: var(--cini); box-shadow: 0 0 0 3px var(--cini-acik); }
.onizleme-kart .kart-basi { background: var(--cini-acik); }
.onizleme-kart .kart-baslik { color: var(--cini-metin); }

/* ---- Makbuz ---- */
.makbuz {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--bosluk-6);
    background: var(--yuzey);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-2);
    box-shadow: var(--golge-2);
}
.makbuz.iptal { opacity: 0.75; }

.makbuz-iptal-damga {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    font-size: 4.5rem;
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.15em;
    color: var(--borc);
    opacity: 0.16;
    pointer-events: none;
    user-select: none;
}

.makbuz-basi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bosluk-5);
    padding-bottom: var(--bosluk-4);
    border-bottom: 2px solid var(--murekkep);
}
.makbuz-site  { font-size: var(--olcek-normal); font-weight: var(--kalin-koyu); }
.makbuz-adres { margin-top: 3px; font-size: var(--olcek-mikro); color: var(--murekkep-3); max-width: 34ch; }
.makbuz-no    { text-align: right; }
.makbuz-no-etiket {
    font-size: var(--olcek-mikro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--murekkep-3);
}
.makbuz-no-deger { font-size: var(--olcek-normal); font-weight: var(--kalin-koyu); }

.makbuz-baslik {
    margin: var(--bosluk-5) 0 var(--bosluk-4);
    text-align: center;
    font-size: var(--olcek-kucuk);
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.22em;
}

.makbuz-tablo { width: 100%; border-collapse: collapse; font-size: var(--olcek-kucuk); }
.makbuz-tablo th {
    width: 130px;
    text-align: left;
    padding: 7px 0;
    font-size: var(--olcek-mikro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--murekkep-3);
    font-weight: var(--kalin-normal);
    vertical-align: top;
}
.makbuz-tablo td { padding: 7px 0; border-bottom: 1px solid var(--cizgi-ince); }

.makbuz-tutar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-5);
    margin-top: var(--bosluk-5);
    padding: var(--bosluk-4);
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak);
}
.makbuz-tutar-etiket {
    font-size: var(--olcek-mikro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--murekkep-3);
}
.makbuz-tutar-yazi  { margin-top: 3px; font-size: var(--olcek-kucuk); }
.makbuz-tutar-rakam { font-size: var(--olcek-buyuk); font-weight: var(--kalin-koyu); white-space: nowrap; }

.makbuz-imza {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bosluk-6);
    margin-top: var(--bosluk-7);
}
.makbuz-imza-cizgi { height: 1px; background: var(--cizgi-koyu); }
.makbuz-imza-etiket {
    margin-top: 6px;
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
    text-align: center;
}

/* ---- Kasa kartlari ---- */
.kasa-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--bosluk-4);
}

.kasa-kart {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--bosluk-4) var(--bosluk-5);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
    color: var(--murekkep);
    transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.kasa-kart:hover {
    border-color: var(--cini);
    box-shadow: var(--golge-2);
    transform: translateY(-1px);
    text-decoration: none;
}
.kasa-kart.pasif { background: var(--kagit); }
.kasa-kart.pasif .kasa-bakiye { color: var(--murekkep-3); }

.kasa-ust {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-2);
}
.kasa-ikon {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    background: var(--cini-acik);
    border-radius: var(--yuvarlak);
    color: var(--cini);
}
.kasa-tip {
    font-size: var(--olcek-mikro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--murekkep-3);
}

.kasa-ad { font-size: var(--olcek-normal); font-weight: var(--kalin-koyu); letter-spacing: -0.01em; }
.kasa-iban { font-size: var(--olcek-mikro); color: var(--murekkep-3); }

.kasa-bakiye {
    margin-top: var(--bosluk-3);
    font-size: var(--olcek-buyuk);
    font-weight: var(--kalin-koyu);
    letter-spacing: -0.02em;
}
.kasa-alt { font-size: var(--olcek-mikro); color: var(--murekkep-3); }

.kasa-toplam {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bosluk-4);
    margin-top: var(--bosluk-4);
    padding: var(--bosluk-4) var(--bosluk-5);
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-2);
    font-size: var(--olcek-kucuk);
    font-weight: var(--kalin-koyu);
}
.kasa-toplam .para { font-size: var(--olcek-buyuk); letter-spacing: -0.02em; }

/* ---- Renk secici (kategori tablosu) ---- */
.renk-secim {
    width: 34px;
    height: 26px;
    padding: 2px;
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak);
    background: var(--yuzey);
    cursor: pointer;
}
.renk-secim::-webkit-color-swatch-wrapper { padding: 0; }
.renk-secim::-webkit-color-swatch { border: none; border-radius: 2px; }

/* ---- Secim kutulari (radyo yerine kart) ---- */
.secim-kutulari {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--bosluk-2);
}

.secim-kutu {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--bosluk-3) var(--bosluk-4);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak);
    background: var(--yuzey);
    cursor: pointer;
    transition: border-color var(--gecis), background var(--gecis);
}
.secim-kutu:hover { border-color: var(--cini); }
/* Gorsel olarak gizli ama erisilebilir — 0x0 boyut bazi tarayicilarda
   ogeyi erisilebilirlik agacindan tamamen dusuruyordu, klavye/ekran
   okuyucu kullanicisi secenekleri hic goremiyordu. Etiketin tamami
   (.secim-kutu) zaten tiklanabilir oldugu icin boyutun kapladigi alan
   onemli degil — .gizli-metin ile ayni teknik. */
.secim-kutu input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.secim-kutu:has(input:checked),
.secim-kutu.secili {
    border-color: var(--cini);
    background: var(--cini-acik);
}
.secim-kutu:has(input:focus-visible) { outline: 2px solid var(--cini); outline-offset: 2px; }

.secim-baslik { font-size: var(--olcek-kucuk); font-weight: var(--kalin-koyu); }
.secim-aciklama { font-size: var(--olcek-mikro); color: var(--murekkep-3); line-height: 1.4; }

/* ---- Banka mutabakati: coklu borc secimi (IP-3) ----
   Canli sayac + hizli secim dugmeleri, JS ile guncellenir
   (bkz. app.js borcSecimiKur()). */
.borc-sec-ozet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bosluk-3);
    margin-bottom: var(--bosluk-4);
    padding: var(--bosluk-3) var(--bosluk-4);
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
}
.borc-sec-ozet-kalem { display: flex; flex-direction: column; gap: 2px; }
.borc-sec-ozet-etiket {
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--murekkep-3);
}
.borc-sec-ozet-deger {
    font-family: var(--yazi-rakam);
    font-variant-numeric: tabular-nums;
    font-size: var(--olcek-normal);
    font-weight: var(--kalin-koyu);
}
.borc-sec-ozet-deger.uyari { color: var(--uyari); }
.borc-sec-ozet-deger.tahsilat { color: var(--tahsilat); }

.borc-sec-hizli {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-3);
}

.borc-sec-sonuc { font-weight: var(--kalin-koyu); }
.borc-sec-sonuc.tam { color: var(--tahsilat); }
.borc-sec-sonuc.kismi { color: var(--uyari); }

@media screen and (max-width: 767px) {
    .borc-sec-ozet { grid-template-columns: 1fr; gap: var(--bosluk-2); }
}

/* ---- Sekmeler (hizli suzme) ---- */
.sekmeler {
    display: flex;
    gap: 2px;
    margin-bottom: var(--bosluk-4);
    border-bottom: 1px solid var(--cizgi);
    overflow-x: auto;
    scrollbar-width: none;
}
.sekmeler::-webkit-scrollbar { display: none; }

.sekme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px var(--bosluk-4);
    color: var(--murekkep-2);
    font-size: var(--olcek-kucuk);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.sekme:hover { color: var(--murekkep); text-decoration: none; background: var(--yuzey); }
.sekme.etkin {
    color: var(--cini-metin);
    border-bottom-color: var(--cini);
    font-weight: var(--kalin-koyu);
}

.sekme-sayi {
    font-size: var(--olcek-mikro);
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border-radius: 20px;
    background: var(--yuzey-2);
    color: var(--murekkep-3);
}
.sekme.etkin .sekme-sayi { background: var(--cini-acik); color: var(--cini-metin); }

/* ---- Tutar renkleri ---- */
.tutar-borc    { color: var(--borc); font-weight: var(--kalin-koyu); }
.tutar-alacak  { color: var(--tahsilat); font-weight: var(--kalin-koyu); }

.pasif-satir td { color: var(--murekkep-3); }
.pasif-satir a  { color: var(--murekkep-2); }

/* B6: tekil-kayit ekranlarindaki (avans/gecikme/donem listesi gibi,
   sayfalanmayan) iptal satirlari varsayilan gizli — "Iptalleri goster"
   ile aciliyor. Sayfalanan listelerde (Aidatlar/Giderler) bunun yerine
   ayri bir "Iptal" sekmesi var, bkz. ilgili controller.

   Baslik satiri icin YENI bir sinif ACILMADI — tablo icinde grup
   basligi zaten var olan `.blok-basligi` (bkz. daire/liste.php). Aktif
   satirlar ONCE, iptal satirlari AYRI bir <tbody> icinde SONRA
   render ediliyor (view'da) — tek tabloda ust uste render edilince
   aktif bir satirin "iptal edilmisler" basliginin ALTINDA gorunmesi
   (kullanici geri bildirimi) boylece yapisal olarak imkansiz. */
.iptal-satir { display: none; }
.iptaller-acik .iptal-satir { display: table-row; }

.tablo-not {
    margin-top: var(--bosluk-3);
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
}

/* Borç Durumu raporu: "bunun icinde tazminat" sutunu (R2, 18.09.2026).
   Toplam'in SAGINDA, kendi cizgisiyle ayrilmis "ek bilgi" gibi dursun —
   soldan saga toplayan biri Toplam'i geçtikten sonra bu sutuna
   girdiginde onun ayri bir kategoride oldugunu gorsun. */
.tazminat-sutun {
    border-left: 1px solid var(--cizgi);
    color: var(--murekkep-3);
    font-style: italic;
}

/* ---- Ekstre tarih suzgeci (kart basliginda) ---- */
.ekstre-suz {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    flex-wrap: wrap;

    /* HUCRENIN GERCEK GENISLIGINI GORSUN.
       Bunlar olmadan esnek kutu, tablo tarafindan daraltilan
       hucrenin genisligini gormuyordu: alt satira inmesi
       gerekirken yan yana kaliyor ve HUCREDEN TASIP yandaki
       sutunun uzerine biniyordu — "Kiracı, y" ile "Eyl 2026"
       91 piksel ust uste geliyordu. */
    width: 100%;
    min-width: 0;
}
.ekstre-suz .girdi-satir {
    max-width: 116px;
    border-color: var(--cizgi);
    background: var(--yuzey);
    text-align: center;
    font-family: var(--yazi-rakam);
}
.ekstre-suz .dugme { min-height: 32px; padding: 0 var(--bosluk-3); }

/* ---- Suzme seridi ---- */
.suz-serit {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    flex-wrap: wrap;
    margin-bottom: var(--bosluk-4);
}

.suz-ara { position: relative; flex: 1 1 240px; min-width: 200px; }
.suz-ara input {
    width: 100%;
    height: 36px;
    padding: 0 var(--bosluk-3) 0 34px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak);
    font-size: var(--olcek-kucuk);
}
.suz-ara input:focus {
    outline: none;
    border-color: var(--cini);
    box-shadow: 0 0 0 3px var(--cini-acik);
}
.suz-ara svg {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--murekkep-3);
    pointer-events: none;
}

.suz-secim { width: auto; min-height: 36px; font-size: var(--olcek-kucuk); }
.suz-csv { margin-left: auto; }

/* Suz/Temizle/CSV/Yazdir'i telefonda tek satirda gruplamak icin
   sarmalayici — masaustunde YOK sayilsin, dugmeler suz-serit'in
   dogrudan flex ogesi gibi kalsin (bkz. mobil override). */
.suz-eylemler { display: contents; }

/* ---- Siralanabilir sutun basligi ---- */
.tablo thead th a.sirala {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
}
.tablo thead th a.sirala:hover { color: var(--cini-metin); text-decoration: none; }
.tablo thead th a.sirala.etkin { color: var(--cini-metin); }

.sira-simge { font-size: 10px; opacity: .8; }

/* ---- Sayfalama ---- */
.sayfalama {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-4);
    flex-wrap: wrap;
    margin-top: var(--bosluk-4);
}
.sayfalama-bilgi { font-size: var(--olcek-mikro); color: var(--murekkep-3); }
.sayfalama-baglantilar { display: flex; gap: 4px; flex-wrap: wrap; }
.sayfalama .dugme { min-height: 30px; padding: 0 10px; }
.sayfalama .dugme.simdi {
    background: var(--cini);
    border-color: var(--cini);
    color: #fff;
}

/* ---- Blok ayrac satiri ----
   Daire listesinde A Blok ile B Blok birbirine karismasin diye
   her blok kendi basligi altinda toplanir. */
.tablo tbody tr.blok-basligi { background: var(--yuzey-2); }
.tablo tbody tr.blok-basligi:hover { background: var(--yuzey-2); }

.tablo tbody tr.blok-basligi td {
    padding: 7px var(--bosluk-4);
    border-top: 1px solid var(--cizgi-koyu);
    border-bottom: 1px solid var(--cizgi);
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--murekkep-2);
}
.tablo tbody tr.blok-basligi td::before { content: none; }
.tablo tbody tr.blok-basligi svg {
    display: inline-block;
    vertical-align: -3px;
    margin-right: 6px;
    color: var(--cini);
}

/* ---- Liste ici kucuk parcalar ---- */
.soluk { color: var(--murekkep-3); }

.daire-no {
    font-family: var(--yazi-rakam);
    font-variant-numeric: tabular-nums;
    font-weight: var(--kalin-koyu);
}

.sakin {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: var(--bosluk-3);
    white-space: nowrap;
}
.sakin:last-child { margin-right: 0; }

.satir-islem { text-align: right; white-space: nowrap; }

/* Daireden ayrilmis sakin (satti/tasindi) — listede duruyor cunku
   borcu duruyor, ama halen oturanla ayni agirlikta gorunmemeli */
.sakin.ayrilmis { opacity: 0.72; }

/* Hesap listesinde grup ayiraci: bir dairenin maliki ve kiracisi
   bittiginde, daireler bitip oteki tiplere geciildiginde.

   Once yalnizca kalin bir cizgiydi ama satir aralarindaki normal
   cizgiden ayirt edilemiyordu — 1px ile 2px farki o olcekte
   kayboluyor. Simdi ONCE BOSLUK, sonra koyu cizgi: goz gezdirirken
   gruplarin nerede bittigi tek bakista goruluyor.
   Yalnizca gruplu sirada ciziliyor. */
.tablo tr.tip-ayirac td {
    padding: 0;
    height: 10px;
    border-bottom: 2px solid var(--cizgi-koyu);
}
.tablo tr.tip-ayirac:hover { background: none; }

/* Yapildi isaretli bakim satiri: is bitmis, listede duruyor ama
   goze carpmasi gerekmiyor. Pasif hesap satiriyla ayni dil. */
.tablo tr.bakim-yapildi { opacity: 0.68; }

/* ---- Hesabi sifirlama ---- */

/* Silinecekler tablosunda grup basligi satiri */
.tablo tr.sifirla-grup td {
    background: var(--yuzey);
    border-top: 1px solid var(--cizgi);
    padding-top: var(--bosluk-3);
}
.tablo tr.sifirla-bos { opacity: 0.5; }

/* Uyari kutusu. Bilerek KIRMIZI ve bilerek buyuk: bu ekranda
   goze carpmamasi gereken tek sey silinecekler listesi degil,
   geri donusun olmadigi. */
.sifirla-uyari {
    display: flex;
    gap: var(--bosluk-4);
    margin-top: var(--bosluk-5);
    padding: var(--bosluk-5);
    background: var(--borc-zemin);
    border: 1px solid var(--borc);
    border-left-width: 4px;
    border-radius: var(--yuvarlak-2);
}
.sifirla-uyari-simge { color: var(--borc); flex-shrink: 0; line-height: 1; }
.sifirla-uyari h2 {
    margin: 0 0 var(--bosluk-3);
    font-size: var(--olcek-normal);
    color: var(--borc);
}
.sifirla-uyari p { margin: 0 0 var(--bosluk-3); line-height: 1.65; }
.sifirla-uyari p:last-child { margin-bottom: 0; }

/* Uyari kutusundaki adim listesi. Genel reset ul isaretini
   kaldiriyor; burada isaret SART, iki ayri ayardan bahsediliyor. */
.sifirla-liste {
    margin: 0 0 var(--bosluk-3);
    padding-left: 20px;
    list-style: disc;
}
.sifirla-liste li { margin-bottom: var(--bosluk-3); line-height: 1.6; }
.sifirla-liste li:last-child { margin-bottom: 0; }
.sifirla-liste-not {
    display: block;
    margin-top: 2px;
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-2);
}

.sifirla-onay { margin-top: var(--bosluk-4); border-color: var(--borc); }

/* Sol seritte grup icinde degil, TEK BASINA duran baglanti:
   Genel Bakis, Yonetim, Raporlar, Ayarlar. Grup govdesindeki
   girintiden kurtuluyor, sayac da saga yasliyor. */
.serit-tek {
    margin: 2px 0;
    padding-left: var(--bosluk-3);
}
/* ---- Duyurular ---- */

/* Sakin panosundaki duyuru satiri. Basligin altinda metnin ilk
   birkac satiri duruyor — tiklamadan ne oldugu anlasilsin. */
.duyuru-satir { padding: var(--bosluk-3) 0; border-bottom: 1px solid var(--cizgi-ince); }
.duyuru-satir:first-child { padding-top: 0; }
.duyuru-satir:last-child  { padding-bottom: 0; border-bottom: none; }
.duyuru-satir-basi {
    display: flex;
    align-items: baseline;
    gap: var(--bosluk-3);
    margin: 0 0 2px;
    flex-wrap: wrap;
}
.duyuru-satir-basi .rakam { margin-left: auto; font-size: var(--olcek-kucuk); }
.duyuru-satir-metin {
    margin: 0;
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-2);
    line-height: 1.6;
}

/* Sakin duyuru listesindeki kartin basligi baglanti tasiyor.
   Kart basliklari normalde bolum etiketi oldugu icin kucuk ve buyuk
   harf; duyuru basligi ise cumle ("Su kesintisi"). Versal yazilinca
   bagirir gibi duruyordu — burada normal yaziya donuyor. */
.duyuru-kart .kart-baslik {
    font-size: var(--olcek-normal);
    letter-spacing: 0;
    text-transform: none;
    color: var(--murekkep);
}
.duyuru-kart .kart-baslik a { color: inherit; }
.duyuru-kart .kart-baslik a:hover { color: var(--cini); }
.satir-islem .dugme { min-height: 28px; padding: 0 10px; font-size: var(--olcek-mikro); }

/* ---- Takvim ---- */

/* Duvar takvimi duzeni. Hafta PAZARTESI basliyor — Turkiye'de
   basili takvimler boyle, pazardan baslayan izgara yabanci
   geliyor. Kutu yuksekligi sabit degil: dolu gunler uzuyor,
   satirin tamami onlarla ayni boya cikiyor. */
.takvim-izgara {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--cizgi-ince);
    border: 1px solid var(--cizgi-ince);
    border-radius: var(--yuvarlak-2);
    overflow: hidden;
}

.takvim-basligi {
    /* --zemin diye bir degisken YOK, hic tanimlanmamis. Bes yerde
       kullaniliyordu ve hepsinde background bildirimi gecersiz sayilip
       dusuyordu — gun adlari bandi hucrelerle ayni renkte kaliyordu. */
    background: var(--yuzey-2);
    padding: 6px 8px;
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--murekkep-3);
    text-align: center;
}

.takvim-hucre {
    background: var(--yuzey);
    min-height: 92px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.takvim-hucre.bos { background: var(--kagit); }

/* Bugun gozle aranmasin */
.takvim-hucre.bugun { box-shadow: inset 0 0 0 2px var(--cini); }

.takvim-gun {
    font-size: var(--olcek-kucuk);
    font-variant-numeric: tabular-nums;
    color: var(--murekkep-3);
    align-self: flex-end;
    padding: 1px 4px;
    border-radius: var(--yuvarlak);
    text-decoration: none;
}
a.takvim-gun:hover { background: var(--cini-acik); color: var(--cini); }
.takvim-hucre.bugun .takvim-gun { color: var(--cini); font-weight: var(--kalin-koyu); }

/* Kutu icindeki kayit: renk KAYNAGI soyluyor, metin degil.
   Odeme gunu kirmizi, bakim turuncu, duyuru cini — listedeki
   rozetlerle ayni dil. */
.takvim-kayit {
    display: block;
    font-size: var(--olcek-mikro);
    line-height: 1.35;
    padding: 2px 5px;
    border-radius: var(--yuvarlak);
    border-left: 3px solid var(--murekkep-3);
    background: var(--kagit);
    color: var(--murekkep);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.takvim-kayit:hover { text-decoration: underline; }

.takvim-kayit.k-aidat  { border-left-color: var(--borc);   background: var(--borc-zemin); }
.takvim-kayit.k-bakim  { border-left-color: var(--uyari);  background: var(--uyari-zemin); }
.takvim-kayit.k-duyuru { border-left-color: var(--cini);   background: var(--cini-acik); }
.takvim-kayit.k-elle   { border-left-color: var(--tahsilat); background: var(--tahsilat-zemin); }
.takvim-kayit.k-karar  { border-left-color: var(--murekkep-3); }

.takvim-fazla {
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
    padding-left: 5px;
}

.takvim-gezinme { display: flex; gap: var(--bosluk-2); align-items: center; }

/* ---- Telefonda aylik izgara ----

   Once tumuyle GIZLENIYORDU: "yedi sutun okunmaz, kayit metni sigmaz,
   dokum listesi zaten var" diye. Gerekce yarim dogruydu — METIN
   sigmiyor, ama takvimin asil faydasi metin degil: hangi gunde bir sey
   VAR, bir bakista gorunmesi. Onu da gizleyince telefonda takvim diye
   bir sey kalmadi, kullanici da bunu bildirdi.

   Cozum: izgara duruyor, kayitlar metin yerine NOKTA oluyor. Renk
   kaynagi soyluyor (odeme kirmizi, bakim turuncu, duyuru cini) —
   masaustundeki dille ayni. Ayrinti alttaki ay dokumunde.

   375px'te hucre basina ~50px dusuyor: gun numarasi + uc nokta rahat
   siginiyor. */
@media (max-width: 640px) {
    /* Sabit uc sutunlu izgara DEGIL, saran satir: iki noktali bir gunde
       ucuncu sutun bos kalip noktalari sola yasliyordu. Sarma ile bir,
       iki ve uc nokta kendiliginden ortaliyor. */
    .takvim-hucre {
        min-height: 46px;
        padding: 3px 2px;
        display: flex;
        /* Taban kural flex-direction: column — sifirlanmazsa noktalar
           alt alta diziliyor. Burada satir istiyoruz. */
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;
        gap: 3px;
    }

    .takvim-gun {
        /* flex-basis: 100% BURADA CALISMIYOR: hucre bir grid ogesi,
           yuzde ana olcut cozulemeyince basis "content" gibi
           davraniyor ve gun numarasi 14px kaliyor, noktalar yanina
           diziliyordu. width ile veriliyor — o kabin icerik kutusuna
           gore cozuluyor. */
        flex: 0 0 auto;
        width: 100%;
        text-align: center;
        align-self: flex-start;
        margin-bottom: 2px;
        padding: 0;
    }

    /* Kayit artik metin degil isaret. font-size:0 metni goturuyor,
       renk border-left'ten background'a tasiniyor. */
    .takvim-kayit {
        width: 6px;
        height: 6px;
        padding: 0;
        border: none;
        border-radius: 50%;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        background: var(--murekkep-3);
    }
    .takvim-kayit.k-aidat  { background: var(--borc); }
    .takvim-kayit.k-bakim  { background: var(--uyari); }
    .takvim-kayit.k-duyuru { background: var(--cini); }
    .takvim-kayit.k-elle   { background: var(--tahsilat); }
    .takvim-kayit.k-karar  { background: var(--murekkep-3); }

    /* "+2 daha" alti pikselik satira sigmaz; uc nokta zaten
       "burada birkac sey var" diyor, ayrinti dokumde. */
    .takvim-fazla { display: none; }

    .takvim-basligi { padding: 5px 2px; font-size: 10px; letter-spacing: 0; }
}

/* ---- Telefon Rehberi ---- */

/* Aranan numara metin degil, dokunulacak hedef. Kalin ve tabular:
   rakamlar alt alta hizali dursun, gozle taranabilsin. */
.rehber-numara {
    font-variant-numeric: tabular-nums;
    font-weight: var(--kalin-koyu);
    white-space: nowrap;
}

/* ---- Telefon Rehberi: kategoriye gore kartlar ----
   Bu modulun gercek kullanim ani telefonda: gece yarisi tesisatci
   ariyorsun. Once bes sutunlu bir masaustu tablosuydu; aranan sey
   bir satir degil bir numara oldugu icin kart duzenine gecti. */
.rehber-grup { margin-bottom: var(--bosluk-5); }

.rehber-grup-baslik {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    margin: 0 0 var(--bosluk-3);
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--murekkep-3);
}
/* Acil grubu kirmizi: gaz kokusu alan biri once onu gormeli */
.rehber-grup-baslik.acil { color: var(--borc); }

.rehber-grup-sayi {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--yuzey-2);
    font-size: var(--olcek-mikro);
    letter-spacing: 0;
    color: var(--murekkep-3);
}

.rehber-kartlar { display: flex; flex-direction: column; gap: var(--bosluk-2); }

.rehber-kart {
    display: flex;
    align-items: center;
    gap: var(--bosluk-4);
    padding: var(--bosluk-3) var(--bosluk-4);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
}
.rehber-kart.gizli { background: var(--yuzey-2); }

.rehber-kimlik { flex: 1; min-width: 0; }
.rehber-ad {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    flex-wrap: wrap;
    margin: 0;
    font-weight: var(--kalin-koyu);
}
.rehber-gorev { margin: 2px 0 0; font-size: var(--olcek-kucuk); color: var(--murekkep-2); }
.rehber-not   { margin: 2px 0 0; font-size: var(--olcek-mikro); color: var(--murekkep-3); }

.rehber-eylem {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    flex: 0 0 auto;
}
.rehber-eylem .rehber-numara { color: var(--murekkep); text-decoration: none; }
.rehber-eylem .rehber-numara:hover { color: var(--cini); }

/* ARA DUGMESI — hap bicimli ve yumusak.
   Dolu koyu cini bir dikdortgen, sayfa boyunca dokuz kez tekrar
   edince agir duruyordu. Durgun halde acik cini zemin ve cini
   yazi; uzerine gelince doluyor. Yumusak ama ne oldugu belli.

   Dokunma hedefi en az 40px — telefonda parmakla basiliyor. */
/* 'birincil' sinifi KULLANILMIYOR: .dugme.birincil (0,2,0) bu
   kuraldan (0,1,0) guclu ve rengi geri aliyordu. Dugme kendi
   gorunumunu burada tasiyor. */
.rehber-ara {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 var(--bosluk-5);
    border-radius: 999px;
    background: var(--cini-acik);
    border-color: transparent;
    color: var(--cini-metin);
    box-shadow: inset 0 0 0 1px rgba(14, 107, 124, .14);
}
.rehber-ara:hover {
    background: var(--cini);
    border-color: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 1px var(--cini);
}
.rehber-ara svg { opacity: .85; }

.rehber-islem { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.rehber-ok {
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: 1px solid var(--cizgi);
    border-radius: 4px;
    color: var(--murekkep-2);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.rehber-ok:hover { border-color: var(--cini); color: var(--cini); }
/* Uctaki satirda ok yerine bosluk: yer kaymasin */
.rehber-ok.bos { border-color: transparent; color: var(--cizgi); cursor: default; }

@media screen and (max-width: 767px) {
    /* Telefonda kart alt alta acilir, Ara dugmesi tam genislik */
    .rehber-kart { flex-wrap: wrap; gap: var(--bosluk-3); }
    .rehber-eylem { width: 100%; justify-content: space-between; }
    .rehber-ara { flex: 1; justify-content: center; min-height: 44px; padding: 0 var(--bosluk-4); }
    .rehber-islem { width: 100%; justify-content: flex-end; }
}


/* ---- Form duzeni ---- */
.form-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--bosluk-4);
    align-items: start;
}

.alan-ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bosluk-3);
}

/* Izgaranin butun sutunlarini kaplar. Baslik ve serbest metin
   alani yaninda ikinci bir alan durmasin diye: 200 karakterlik
   bir basligi 320px'lik kutuya sikistirmak okumayi zorlastiriyor. */
.alan-genis { grid-column: 1 / -1; }

/* Banka mutabakati: aciklama sutunu banka metniyle cok uzuyor,
   esleme sutununu sikistirip secim kutusunu dar birakiyordu.
   Telefonda kart gorunumune (max-width:767px, bkz. ust) donen
   tablo genislik zorlamasinda cakismasin diye masaustune ozel. */
@media screen and (min-width: 768px) {
    .tablo-mutabakat th:nth-child(2),
    .tablo-mutabakat td:nth-child(2) { max-width: 320px; }
    .tablo-mutabakat th:nth-child(5),
    .tablo-mutabakat td:nth-child(5) { min-width: 260px; }
}

/* Eslesme sutunu: secim kutusu ustte tam genislik, onayla/bol
   aksiyonlari altinda yan yana kucuk butonlar olarak dursun. */
.banka-esleme-formu { display: flex; flex-direction: column; gap: var(--bosluk-2); }
.banka-esleme-aksiyonlar { display: flex; gap: var(--bosluk-2); }
.banka-esleme-aksiyonlar .dugme { min-height: 30px; padding: 0 var(--bosluk-3); font-size: var(--olcek-mikro); }

/* IP-4: "Hesap gerekmiyor" ile birlikte gorunen kategori alani */
.banka-masraf-kategori {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.banka-masraf-kategori .satir-alt { font-size: var(--olcek-mikro); }
/* bol.php'deki .bolme-satiri grid'i (hesap | tutar | sil) 3 sutun —
   kategori alani 4. eleman olarak eklenince tum genisligi kaplasin
   diye tek basina yeni bir grid satirina yayiliyor. */
.banka-masraf-kategori-bolme { grid-column: 1 / -1; }

/* Banka mutabakati: satir arkaplani durumu ta uzaktan soylesin — Durum
   sutunundaki rozet zaten var, bu SATIRIN TAMAMINI ayrica boyuyor. */
.tablo-mutabakat tbody tr.satir-onayli   { background: var(--tahsilat-zemin); }
.tablo-mutabakat tbody tr.satir-bekliyor { background: var(--uyari-zemin); }
.tablo-mutabakat tbody tr.satir-askida   { background: var(--yuzey-2); }
.tablo-mutabakat tbody tr.satir-onayli:hover   { background: var(--tahsilat-zemin); }
.tablo-mutabakat tbody tr.satir-bekliyor:hover { background: var(--uyari-zemin); }
.tablo-mutabakat tbody tr.satir-askida:hover   { background: var(--yuzey-2); }

/* IP-5: uc kademe sayaclari — toplam/yesil/sari/kirmizi, detay.php ustu */
.banka-kademe-sayaclari {
    display: flex;
    gap: var(--bosluk-5);
    flex-wrap: wrap;
    margin-bottom: var(--bosluk-4);
}
.banka-kademe-sayac { display: flex; flex-direction: column; gap: 2px; }
.banka-kademe-sayac-deger {
    font-size: var(--olcek-buyuk);
    font-weight: var(--kalin-koyu);
    font-variant-numeric: tabular-nums;
    color: var(--murekkep);
}
.banka-kademe-sayac-deger.tahsilat { color: var(--tahsilat); }
.banka-kademe-sayac-deger.uyari    { color: var(--uyari); }
.banka-kademe-sayac-deger.borc     { color: var(--borc); }
.banka-kademe-sayac-etiket { font-size: var(--olcek-mikro); color: var(--murekkep-2); }

/* Banka mutabakati: hareketi bolme formu — hesap + tutar + sil */
.bolme-satiri {
    display: grid;
    grid-template-columns: 1fr 140px 32px;
    gap: var(--bosluk-2);
    align-items: center;
    margin-bottom: var(--bosluk-2);
}
/* Telefonda (<768px) sabit 140px tutar sutunu hesap kutusunu "— hesap..."
   diye kesiyordu — hangi daireyi sectigini goremiyordun. Alt alta yigilinca
   ikisi de tam genislikte okunuyor. */
@media screen and (max-width: 767px) {
    .bolme-satiri {
        grid-template-columns: 1fr;
    }
    .bolme-sil { justify-self: end; }
}
.bolme-sil {
    width: 32px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--murekkep-3);
}
.bolme-sil:hover { color: var(--borc); }

/* Duyuruda hedefleme: nereye + kime + (blok/daire) yan yana dursun.
   Ana form izgarasina tek tek bırakılınca ikisi ayri satirlara
   dagiliyor, bagli iki soru gibi okunmuyordu. Gizlenen alan
   (hidden) izgaradan da cikiyor, kalanlar kayiyor. */
.hedef-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--bosluk-4);
    align-items: start;
}

.zorunlu { color: var(--borc); }

.kaydet-dugmeler { display: flex; gap: var(--bosluk-2); }

/* ---- Uyari seridi (form hatalari) ---- */
.uyari-serit {
    display: flex;
    gap: var(--bosluk-3);
    padding: var(--bosluk-3) var(--bosluk-4);
    margin-bottom: var(--bosluk-4);
    border: 1px solid var(--cizgi-koyu);
    border-left: 3px solid var(--murekkep-3);
    border-radius: var(--yuvarlak);
    font-size: var(--olcek-kucuk);
}
.uyari-serit.hata { border-left-color: var(--borc); background: var(--borc-zemin); }
.uyari-serit svg { flex: 0 0 auto; color: var(--borc); margin-top: 1px; }
.uyari-serit ul { margin-top: 4px; padding-left: 18px; list-style: disc; }

/* "Her sey yolunda" hali — serit hep kirmizi ikonla cikiyordu,
   iyi haber de kotu haber gibi gorunuyordu. */
.uyari-serit.basari { border-left-color: var(--tahsilat); background: var(--tahsilat-zemin); }
.uyari-serit.basari svg { color: var(--tahsilat); }

/* ---- Satir ici duzenlenebilir tablo ---- */
.girdi-satir {
    min-height: 32px;
    padding: 5px var(--bosluk-2);
    background: transparent;
    border-color: transparent;
    font-size: var(--olcek-kucuk);
}
.girdi-satir:hover { border-color: var(--cizgi); background: var(--yuzey); }
.girdi-satir:focus { background: var(--yuzey); }
.girdi-dar { max-width: 80px; }

.onay-sil { justify-content: flex-end; }
.onay-sil input { accent-color: var(--borc); }

.yeni-satir td { background: var(--yuzey-2); }
.yeni-satir .girdi-satir { border-color: var(--cizgi); background: var(--yuzey); }

/* ---- Tehlikeli islem karti ---- */
.tehlike-kart {
    margin-top: var(--bosluk-6);
    border-color: #e3b5ae;
}
.tehlike-kart .kart-basi { border-bottom-color: #f0d5d0; }
.tehlike-kart .kart-baslik { color: var(--borc); }

/* ---- Bildirim ---- */
.bildirimler {
    position: fixed;
    top: var(--bosluk-4);
    right: var(--bosluk-4);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: var(--bosluk-2);
    max-width: 360px;
}

.bildirim {
    display: flex;
    align-items: flex-start;
    gap: var(--bosluk-3);
    padding: var(--bosluk-3) var(--bosluk-4);
    background: var(--yuzey);
    border: 1px solid var(--cizgi-koyu);
    border-left: 3px solid var(--murekkep-3);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge-2);
    font-size: var(--olcek-kucuk);
    animation: bildirim-gir 220ms cubic-bezier(0.2, 0, 0.2, 1);
}
.bildirim.basari { border-left-color: var(--tahsilat); }
.bildirim.hata   { border-left-color: var(--borc); }
.bildirim.uyari  { border-left-color: var(--uyari); }
.bildirim.bilgi  { border-left-color: var(--cini); }

.bildirim-kapat {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--murekkep-3);
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}
.bildirim-kapat:hover { color: var(--murekkep); }

@keyframes bildirim-gir {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Migration bildirimi ----
   Cekirdek guncellenip veritabani migration'i uygulanmadan biri
   sisteme girerse gorunen uyari. .istisna-katman ile ayni gorsel
   dili tasiyor ama kendi sinifiyla — o baska bir ozelligin
   (isletme projesi istisnalari) kendi adi, buraya baglamak
   ilerde birini degistirince otekini bozardı. */
.migrasyon-katman {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: var(--bosluk-4);
    background: rgba(28, 25, 23, 0.45);
}
.migrasyon-pencere {
    width: 100%;
    max-width: 420px;
    background: var(--yuzey);
    border-radius: var(--yuvarlak);
    box-shadow: 0 18px 48px rgba(28, 25, 23, 0.28);
    animation: migrasyon-gir 240ms ease-out;
}
.migrasyon-dugmeler {
    display: flex;
    gap: var(--bosluk-2);
    margin-top: var(--bosluk-4);
}
@keyframes migrasyon-gir {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* Gecikme rozetinin yanindaki kampana — "X gun gecikti" goze
   carpsin diye. Sadece bu rozetin icinde kullanildigi icin genel
   ikon davranisina karismiyor; ustten sallaniyormus gibi donuyor
   (transform-origin ustte). Duraklamalar arasinda bekliyor —
   surekli sallanmak dikkat dagitirdi, "arada bir hatirlat" yeterli. */
.geciken-can {
    display: inline-block;
    vertical-align: -3px;
    margin-right: 2px;
    color: var(--borc);
    transform-origin: 50% 15%;
    animation: kampana-salin 2.6s ease-in-out infinite;
}
@keyframes kampana-salin {
    0%, 55%, 100% { transform: rotate(0deg); }
    60%  { transform: rotate(14deg); }
    66%  { transform: rotate(-11deg); }
    72%  { transform: rotate(7deg); }
    78%  { transform: rotate(-4deg); }
    84%  { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .geciken-can { animation: none; }
}

/* ---- Bos durum ---- */
.bos-durum {
    padding: var(--bosluk-7) var(--bosluk-5);
    text-align: center;
    color: var(--murekkep-3);
}
.bos-durum svg { margin: 0 auto var(--bosluk-4); color: var(--cizgi-koyu); }
.bos-durum-baslik {
    font-size: var(--olcek-normal);
    font-weight: var(--kalin-koyu);
    color: var(--murekkep-2);
    margin-bottom: var(--bosluk-2);
}

/* ============================================================
   3. Giris ekrani  (kendi duzeni, serit yok)
   ============================================================ */

.giris-sayfa {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 460px;
    background: var(--kagit);
}

/* Sol: koyu tanitim alani — kagit dokusu ve cizgi izgarasi */
.giris-yan {
    position: relative;
    background: var(--kapak);
    color: var(--kapak-metin);
    padding: var(--bosluk-7);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* KISA EKRAN — dizustu bilgisayarda tarayici sekmesi, adres cubugu ve
   yer imleri seridi dustukten sonra goruntu alani kolayca 700px'in
   altina iniyor. Panel dolgusu tek basina 48+48 = 96px yer kapliyordu
   ve sayfa asagi yukari kaymaya basliyordu. Giris ekrani kaydirilacak
   bir sayfa degil; tek ekranda bitmesi lazim.

   Cizim zaten 46vh ile kendiliginden kuculuyor, kalan farki dolgu ve
   paragraf bosluğu kapatiyor. */
@media (max-height: 760px) {
    .giris-yan   { padding: var(--bosluk-5) var(--bosluk-6); }
    .giris-panel { padding-block: var(--bosluk-5); }
    .giris-slogan p { margin-top: var(--bosluk-3); }
    .giris-orta  { gap: var(--bosluk-5); }
}

/* GENIS EKRANDA ICERIK ORTALANIR.
   1900px'lik bir ekranda sol panel 1425px oluyor ama icerik en
   fazla 620px yer kapliyor; sola yaslanik durunca saginda 850px
   bos siyah kaliyor ve ekran yarim kalmis gibi gorunuyor.

   Esik 1500px: bunun altinda hicbir sey degismiyor, dizustu ve
   normal masaustu goruntusu bugunku haliyle ayni kaliyor. */
/* ICERIK SUTUNU PANELDE ORTALANIR.
   Once bu kural "min-width: 1500px" icindeydi ve pratikte hic
   calismiyordu: 1440px'lik bir ekranda sol panel 965px oluyor,
   icerik 468px'te kaliyor ve saginda 449px kapkara bosluk
   duruyordu — esik ise 1500'du.

   ESIK KALDIRILDI, gerek de yok: max-width 640px, panelin ic
   genisligi bundan darsa oge zaten kutuyu dolduruyor ve otomatik
   kenar bosluklari sifir cikiyor. Yani dar ekranda davranis
   birebir eskisi gibi, genis ekranda kendiliginden ortaliyor.

   Secici .giris-yan ile baglandi (0,2,0): .giris-surum'un kendi
   'margin: 0' kurali dosyada DAHA SONRA geliyor ve esit
   ozgullukte sonraki kazandigi icin surum satiri ortalanmiyordu. */
.giris-yan > .giris-marka,
.giris-yan > .giris-orta,
.giris-yan > .giris-surum {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

/* Defter cizgisi dokusu */
.giris-yan::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--kapak-cizgi) 1px, transparent 1px);
    background-size: 100% 28px;
    opacity: 0.5;
    pointer-events: none;
}
/* Kenar bosluk cizgisi — defter kenari */
.giris-yan::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: calc(var(--bosluk-7) + 24px);
    width: 1px;
    background: rgba(163, 43, 31, 0.35);
    pointer-events: none;
}

.giris-yan > * { position: relative; z-index: 1; }

.giris-marka {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
}
.giris-marka-simge {
    /* Marka adiyla birlikte olceklensin, yoksa yazi buyudukce
       kare kucuk kalip rozet gibi duruyor */
    width: clamp(44px, 1.2vw + 1.6rem, 60px);
    height: clamp(44px, 1.2vw + 1.6rem, 60px);
    display: grid; place-items: center;
    background: var(--cini);
    border-radius: 6px;
    color: #fff;
    flex: none;
}
.giris-marka-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* URUN ADI — ekranin markasi burasi.
   Onceden --olcek-normal idi: altindaki uzun ingilizce aciklamayla
   neredeyse ayni agirliktaydi ve goz once aciklamaya kayiyordu.
   Marka adi ile aciklama arasinda net bir boy farki olmali ki
   hangisinin AD hangisinin aciklama oldugu bir bakista anlasilsin. */
.giris-marka-ad {
    /* 1440 -> 22.3px (onceki 21.6 ile ayni yerde), 1900 -> 24.9px */
    font-size: clamp(1.2rem, 0.55vw + 0.9rem, 1.7rem);
    font-weight: var(--kalin-koyu);
    color: #fff;
    letter-spacing: -0.015em;   /* buyudukce harfler sikilassin */
    line-height: 1.1;
}
/* Urun adinin "/" sonrasi. Uzun bir aciklama oldugu icin baslikla
   ayni boyutta olamaz — kucuk ve soluk, marka adini bogmasin. */
.giris-marka-alt {
    font-size: clamp(0.6875rem, 0.2vw + 0.56rem, 0.85rem);
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.35;
    max-width: 28ch;            /* uzun aciklama iki satira insin */
}

/* ---- Telefonda marka ----
   Sol panel <=900px'te display:none. Form tek basina kalinca ekranda
   hangi yazilim oldugunu soyleyen hicbir sey yoktu. Masaustundeki
   bina isaretinin aynisi, ortalanmis. */
.giris-mobil-marka { display: none; }

.giris-mobil-surum { display: none; }

/* SLOGAN BLOGU EKRANLA BUYUR.
   Sabit 30ch iken 1900px'lik bir ekranda 250px'e sikisip kaliyordu:
   panel 1425px, icerik 400px — sagda 977px kapkara bosluk. Olcu
   karakter sayisiyla verilince yazi buyumedigi surece blok da
   buyumuyor, o yuzden ikisi birlikte olcekleniyor. */
/* SLOGAN BLOGU EKRANLA BUYUR.
   Once 30ch yaziyordu ve 1900px'lik ekranda 250px'e sikisip
   kaliyordu: panel 1425px, icerik 400px, sagda kapkara bosluk.

   'ch' BURADA YANILTICI: kapsayicinin kendi font boyuna gore
   cozuluyor, h2'nin boyuna gore degil. h2 36px'e cikarken blok
   15px'lik bir 'ch' ile olculdugu icin buyumuyordu — 34ch
   yazildiginda bile 284px cikti. O yuzden olcu uzunluk birimiyle. */
.giris-slogan {
    max-width: clamp(260px, 26vw, 620px);
}
/* SLOGAN. Onceden ust sinir 2.6rem (41.6px) idi — 1440px'lik bir
   ekranda uc satira yayilip panelin yarisini yiyordu, altindaki
   cizime yer kalmiyor, arada siyah bosluk kaliyordu. Ust sinir
   1.9rem'e cekildi: hala ekranin en buyuk yazisi ama cizimle
   yarismiyor. */
/* Olcek egrisi iki ucu da tutuyor:
     1440px -> 29.8px   (onceden begenilen boy, degismedi)
     1900px -> 36.2px   (once burada da 30.4px kaliyor, kucuk duruyordu)
     2560px -> 40px     (ust sinir; daha buyugu afis olurdu)
   Duz 2.2vw yazmak 1440'ta dogru olani veriyor ama genis ekranda
   ust sinira carpip donuyordu; egim + sabit toplami boyle olmuyor. */
.giris-slogan h2 {
    font-size: clamp(1.35rem, 1.4vw + 0.6rem, 2.5rem);
    font-weight: var(--kalin-koyu);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #fff;
}
.giris-slogan p {
    margin-top: var(--bosluk-4);
    font-size: clamp(0.9375rem, 0.35vw + 0.7rem, 1.15rem);
    color: var(--kapak-metin);
    line-height: 1.6;
}

/* Slogan ve cizim birlikte, panelin ortasinda */
.giris-orta {
    display: flex;
    flex-direction: column;
    gap: var(--bosluk-6);
    min-width: 0;
}

/* Apartman cephesi — kendi cizimimiz.
   Cizgi rengi kapak metniyle ayni ailede ama daha soluk: cizim
   sloganin onune gecmemeli, arkasinda durmali. */
/* CIZIM YUKSEKLIGE GORE OLCEKLENIR.
   Sabit 330px iken iki yonde de bozuluyordu: uzun ekranda slogan
   ile surum satiri arasinda kocaman siyah bosluk kaliyor, 680px'in
   altindaki ekranda ise panel tasip sayfa asagi yukari kayiyordu.

   Cizim 300x250, yani en/boy orani 1.2. Yuksekligi 38vh ile
   sinirlamak icin genisligi 46vh ile sinirliyoruz (1.2 x 38).
   Boylece kisa ekranda kuculup sigiyor, genis ekranda 400px'e
   kadar buyuyup bosluğu dolduruyor. */
.giris-cizim {
    width: 100%;
    /* Iki sinir birden: GENISLIK panelle, YUKSEKLIK ekranla.
       Sadece 46vh yazmak genis ama alcak olmayan ekranlarda cizimi
       400px'te birakiyordu — altta 189px olu bosluk kaliyordu.
       Sadece vw yazmak da kisa ekranda tasmaya geri donerdi. */
    max-width: min(clamp(300px, 40vw, 560px), 58vh);
    height: auto;
    color: var(--kapak-soluk);
    opacity: 0.85;
}
.giris-cizim .cizim-arka  { opacity: 0.55; }
.giris-cizim .cizim-kat   { opacity: 0.45; }
.giris-cizim .cizim-zemin { opacity: 0.35; }

/* Insanlar cizimin EN NET unsuru. Cephe soluk, kat cizgileri daha
   soluk; figurler tam opaklikta duruyor, boylece goz once onlara
   gidiyor. Cizgi kalinligi degistirilmedi — cizimin tek kalinlik
   kurali (CLAUDE.md) bozulmasin diye ayrim yalnizca opaklikla. */
.giris-cizim .cizim-insan { opacity: 1; }

/* Isikli pencere: gece bir kac dairede isik yaniyor.
   Vurgu rengi burada bilerek kullaniliyor — cizimin tek renkli
   kalmasi onu teknik bir semaya dondururdu. */
.giris-cizim .cizim-isik {
    fill: var(--cini);
    fill-opacity: 0.5;
    stroke: var(--cini);
    opacity: 0.9;
}

/* Panelin dibindeki tek satir. Eskiden burada "Surum 0.1" ve
   "Kayit: Yerel sunucu" diye iki kutu vardi; ikincisi sabit
   yaziliydi ve gercek sunucuda da "Yerel sunucu" gorunuyordu. */
.giris-surum {
    margin: 0;
    font-size: var(--olcek-mikro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kapak-soluk);
}

.giris-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--bosluk-7) var(--bosluk-6);
    background: var(--yuzey);
    border-left: 1px solid var(--cizgi);
}

.giris-kutu { width: 100%; max-width: 340px; margin: 0 auto; }

.giris-baslik {
    font-size: var(--olcek-buyuk);
    font-weight: var(--kalin-koyu);
    letter-spacing: -0.02em;
}
.giris-alt {
    margin-top: 6px;
    margin-bottom: var(--bosluk-6);
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-3);
}

.giris-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-3);
    margin-bottom: var(--bosluk-5);
}

.giris-dugme { width: 100%; min-height: var(--dokunma); }

.giris-dipnot {
    margin-top: var(--bosluk-6);
    padding-top: var(--bosluk-4);
    border-top: 1px solid var(--cizgi-ince);
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
    text-align: center;
}

/* ============================================================
   4. Hata sayfasi
   ============================================================ */

.hata-sayfa {
    min-height: 60vh;
    display: grid;
    place-items: center;
    padding: var(--bosluk-7) var(--bosluk-5);
    text-align: center;
}
.hata-kod {
    font-family: var(--yazi-rakam);
    font-size: 4rem;
    font-weight: var(--kalin-koyu);
    line-height: 1;
    color: var(--cizgi-koyu);
    letter-spacing: -0.04em;
}
.hata-baslik {
    margin-top: var(--bosluk-4);
    font-size: var(--olcek-buyuk);
    font-weight: var(--kalin-koyu);
    letter-spacing: -0.02em;
}
.hata-metin {
    margin-top: var(--bosluk-2);
    margin-bottom: var(--bosluk-5);
    color: var(--murekkep-3);
    font-size: var(--olcek-kucuk);
    max-width: 44ch;
}
.hata-ayrinti {
    margin-top: var(--bosluk-6);
    text-align: left;
    max-width: 800px;
    width: 100%;
    font-family: var(--yazi-rakam);
    font-size: var(--olcek-mikro);
    background: var(--kapak);
    color: var(--kapak-metin);
    padding: var(--bosluk-4);
    border-radius: var(--yuvarlak);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ============================================================
   5. Alt sekme cubugu — sadece telefon
   ============================================================ */

.alt-sekmeler { display: none; }

/* ============================================================
   6. Kirilimlar
   ============================================================ */

/* ---- Tablet 768–1024: TAM surum, menu ikon seridine daralir ---- */
/* DIKKAT — butun kirilimlarda "screen and" var, gereksiz degil.
   Kagitta sayfa alani A4 dikeyde ~703 CSS pikseli; kenar bosluklari
   dusunce 767px kiriliminin ALTINA iniyor. "screen" olmadan tarayici
   kagidi telefon saniyor ve tablolar kart gorunumune duşuyor —
   yazdirilan rapor satir satir kartlara bolunup sayfalarca uzuyordu. */
@media screen and (max-width: 1024px) {
    .kabuk { grid-template-columns: var(--serit-dar) 1fr; }

    .serit-marka { justify-content: center; padding: var(--bosluk-4) 0; }
    .serit-marka-metin { display: none; }

    /* Ikon seridinde akordiyon kapanmaz — ikonlar hep gorunur.
       <summary> gizlendigi icin grubu acip kapatmanin yolu kalmaz;
       kapali kalmis bir grubun ikonlari da kaybolmasin diye icerigi
       burada zorla gosteriyoruz. JS de ayrica open=true yapar
       (bkz. app.js seritAkordiyon) — ikisi birbirinin yedegi. */
    .serit-grup-baslik { display: none; }
    .serit-grup:not([open]) > .serit-govde {
        display: block;
        content-visibility: visible;
    }
    .serit-grup { border-bottom: none; }
    .serit-grup + .serit-grup {
        margin-top: var(--bosluk-3);
        padding-top: var(--bosluk-3);
        border-top: 1px solid var(--serit-cizgi);
    }
    .serit-govde { padding-bottom: 0; }

    .serit-bag {
        justify-content: center;
        padding: 11px 0;
        border-left: none;
        border-right: 2px solid transparent;
    }
    .serit-bag[aria-current="page"] { border-right-color: var(--cini); }
    /* IKON SERIDINDE SAYAC DA GIZLENIYOR.
       "12/14" gibi bir sayac ancak yanindaki etiketle anlam
       tasiyor ("Yönetim 12/14 modül açık"). Etiket gizlenince
       geriye ekranin kenarinda asili duran iki sayi kaliyor —
       olculdu 27.08.2026, telefon yatayda tam da boyle
       gorunuyordu. */
    .serit-bag-ad, .rozet-yakinda { display: none; }

    /* Kenar paylari burada yeniden yaziliyor; ustteki guvenli
       alan payi kaybolmasin diye onlara da ekleniyor.
       (Centik/ada yatayda tam bu kirilimda devreye giriyor.) */
    .icerik { padding: var(--bosluk-4) calc(var(--bosluk-4) + env(safe-area-inset-right))
                       calc(var(--bosluk-4) + 96px) var(--bosluk-4); }
    .ust    { padding: 0 calc(var(--bosluk-4) + env(safe-area-inset-right)) 0 var(--bosluk-4); }
}

/* ---- Giris ekrani dar ekranda tek sutun ---- */
@media screen and (max-width: 900px) {
    .giris-sayfa { grid-template-columns: 1fr; }
    .giris-yan { display: none; }
    .giris-panel { border-left: none; padding: var(--bosluk-6) var(--bosluk-5); }

    /* Sol panelle birlikte marka ve surum de gizleniyor — ikisini de
       formun icinde geri veriyoruz. Koyu zemin yok, bu yuzden isaret
       cini uzerine beyaz degil, kagit uzerine cini. */
    .giris-mobil-marka {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--bosluk-2);
        margin-bottom: var(--bosluk-6);
        text-align: center;
    }
    .giris-mobil-simge {
        width: 52px; height: 52px;
        display: grid; place-items: center;
        background: var(--cini);
        border-radius: 10px;
        color: #fff;
    }
    .giris-mobil-ad {
        font-size: var(--olcek-buyuk);
        font-weight: var(--kalin-koyu);
        color: var(--murekkep);
        letter-spacing: 0.01em;
    }
    .giris-mobil-alt {
        font-size: var(--olcek-mikro);
        color: var(--murekkep-3);
        line-height: 1.35;
        max-width: 30ch;
    }

    .giris-mobil-surum {
        display: block;
        margin-top: var(--bosluk-4);
        text-align: center;
        font-size: var(--olcek-mikro);
        color: var(--murekkep-3);
    }
}

/* ---- Telefon <768: LIGHT surum ---- */
@media screen and (max-width: 767px) {
    .kabuk { grid-template-columns: 1fr; }

    .serit { display: none; }

    .ust { padding: 0 var(--bosluk-4); gap: var(--bosluk-3); }
    .ust-ara { display: none; }
    .ust-kullanici-ad { display: none; }

    .icerik {
        padding: var(--bosluk-4) var(--bosluk-3);
        /* alt sekme cubugu icerigin ustune binmesin */
        padding-bottom: calc(var(--dokunma) + var(--bosluk-6) + env(safe-area-inset-bottom));
    }

    .sayfa-basi { flex-direction: column; align-items: flex-start; }

    .olcu-izgara { grid-template-columns: 1fr 1fr; gap: var(--bosluk-3); }

    /* Tablolar kart gorunumune doner (plan 8.A) */
    .tablo-sarma { border: none; background: none; }
    .tablo, .tablo tbody, .tablo tr, .tablo td { display: block; width: 100%; }
    .tablo thead, .tablo tfoot { display: none; }

    .tablo tbody tr {
        background: var(--yuzey);
        border: 1px solid var(--cizgi);
        border-radius: var(--yuvarlak-2);
        margin-bottom: var(--bosluk-3);
        padding: var(--bosluk-3) var(--bosluk-4);
        box-shadow: var(--golge-1);
    }
    .tablo tbody tr:hover { background: var(--yuzey); }

    /* Masaustunde ince bir grup ayraci olan icI BOS satir, mobil kart
       donusumunde her tr'a uygulanan cerceve/golge/dolgu yuzunden
       "bos, yuklenememis kayit" gibi goruen bir karta donusuyordu. */
    .tablo tbody tr.tip-ayirac { display: none; }

    .tablo tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--bosluk-4);
        padding: 5px 0;
        border: none;
        text-align: right;
    }
    /* Sutun basligi etiket olarak solda durur */
    .tablo tbody td::before {
        content: attr(data-etiket);
        flex: 0 0 auto;
        font-size: var(--olcek-mikro);
        font-weight: var(--kalin-koyu);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--murekkep-3);
        text-align: left;
    }
    .tablo tbody td:empty { display: none; }

    /* Blok basligi telefonda kart olmasin — ince bir ayrac serit kalsin */
    .tablo tbody tr.blok-basligi {
        display: block;
        background: none;
        border: none;
        box-shadow: none;
        margin: var(--bosluk-4) 0 var(--bosluk-2);
        padding: 0;
    }
    .tablo tbody tr.blok-basligi td {
        display: block;
        padding: 0 var(--bosluk-2) 5px;
        border-top: none;
        border-bottom: 1px solid var(--cizgi-koyu);
        text-align: left;
    }

    /* Alt sekme cubugu */
    .alt-sekmeler {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0; right: 0; bottom: 0;
        /* Yapiskan seritler bu yuksekligi hesaba katiyor — ikisi
           ayrisirsa kaydet dugmesi cubugun altinda kalir */
        min-height: var(--alt-sekme);
        z-index: 50;
        background: var(--yuzey);
        border-top: 1px solid var(--cizgi);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 12px rgba(26, 24, 21, 0.08);
    }

    .alt-sekme {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: var(--dokunma);
        padding: 7px 2px;
        color: var(--murekkep-3);
        font-size: 10px;
        font-weight: var(--kalin-koyu);
        letter-spacing: 0.01em;
    }
    .alt-sekme:hover { text-decoration: none; }
    .alt-sekme[aria-current="page"] { color: var(--cini); }
    .alt-sekme svg { width: 20px; height: 20px; }

    .bildirimler {
        top: auto;
        bottom: calc(var(--dokunma) + var(--bosluk-4) + env(safe-area-inset-bottom));
        left: var(--bosluk-3);
        right: var(--bosluk-3);
        max-width: none;
    }

    /* ---- Ayarlar ekranlari ---- */
    .modul-satir { padding: 11px var(--bosluk-4); gap: var(--bosluk-2); }
    .modul-ikon { width: 28px; height: 28px; }
    .modul-satir .rozet { display: none; }   /* durum yazisi zaten soyluyor */

    .kaydet-serit {
        /* alt sekme cubugunun ustunde dursun */
        bottom: calc(var(--dokunma) + env(safe-area-inset-bottom));
        flex-direction: column;
        align-items: stretch;
        gap: var(--bosluk-3);
        text-align: center;
    }
    .kaydet-serit .dugme { min-height: var(--dokunma); }
    .kaydet-dugmeler { flex-direction: column-reverse; }

    .bolum-izgara { grid-template-columns: 1fr; }

    /* ---- Aidat / makbuz ---- */
    .tahsilat-satir { grid-template-columns: 1fr; }
    .tahsilat-dugme .alan-etiket { display: none; }
    .tahsilat-dugme .dugme { width: 100%; min-height: var(--dokunma); }
    .suz-tarih { max-width: none; flex: 1 1 calc(50% - var(--bosluk-2)); }

    /* SADECE TELEFONDA: .alan bir grid/flex ogesi olarak varsayilan
       min-width:auto ile ICERIGININ dogal genisligini dayatiyordu.
       Tarih girdisinin tarayici-ici minimum genisligi (takvim simgesi
       + tam gg.aa.yyyy) dar bir sutunda .alan'i buyutuyor, o da
       satiri (.tahsilat-satir, .alan-ikili) tasiriyordu — Tahsil et,
       Öde, tarih araligi ciftleri dahil (bildirildi 06.09.2026).
       Masaustunde BIR ONCEKI denemede genel kural olarak yazilmisti
       ve orada Kasa gibi uzun metinli secim kutularini sikistirdi —
       bu yuzden yalnizca bu blokta, telefonda gecerli. */
    .alan { min-width: 0; }
    input[type="date"].girdi { max-width: 100%; }
    .makbuz { padding: var(--bosluk-4); }
    .makbuz-basi { flex-direction: column; gap: var(--bosluk-3); }
    .makbuz-no { text-align: left; }
    .makbuz-tutar { flex-direction: column; align-items: flex-start; gap: var(--bosluk-3); }
    .makbuz-imza { grid-template-columns: 1fr; gap: var(--bosluk-5); }
    .makbuz-tablo th { width: 96px; }

    /* ---- Liste ve form ---- */
    .suz-serit { gap: var(--bosluk-2); }
    .suz-ara { flex: 1 1 100%; }
    .suz-secim { flex: 1 1 calc(50% - var(--bosluk-2)); }
    .suz-csv { margin-left: 0; }

    .form-izgara { grid-template-columns: 1fr; }
    .alan-ikili { grid-template-columns: 1fr 1fr; gap: var(--bosluk-2); }

    .sayfalama { justify-content: center; text-align: center; }
    .sayfalama-baglantilar { justify-content: center; }

    .satir-islem { text-align: left; }
    .satir-islem .dugme { min-height: var(--dokunma); width: 100%; }

    /* Satir ici duzenlenebilir tablo telefonda kart olur — cerceve sart,
       yoksa hangi girdinin hangi satira ait oldugu anlasilmaz */
    .girdi-satir { border-color: var(--cizgi); background: var(--yuzey); }
    .girdi-dar { max-width: none; }
    .onay-sil { justify-content: flex-start; }
}

/* ---- Hareket azaltma tercihi ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- Ornek hesap kutusu (gecikme ayari) ---- */
.ornek-hesap {
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    overflow: hidden;
}
.ornek-satir {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bosluk-4);
    padding: 9px var(--bosluk-4);
    font-size: var(--olcek-kucuk);
    border-bottom: 1px solid var(--cizgi-ince);
}
.ornek-satir:last-child { border-bottom: none; }
.ornek-satir.ornek-sonuc {
    background: var(--uyari-zemin);
    border-top: 1px solid var(--cizgi-koyu);
    font-weight: var(--kalin-koyu);
}
.ornek-satir.ornek-sonuc .para { font-size: var(--olcek-normal); color: var(--uyari); }

/* ============================================================
   Genel Bakis panosu
   ============================================================ */

.pano-ikili {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--bosluk-4);
    margin-top: var(--bosluk-4);
    align-items: start;
}

/* Olcu kutusu tiklanabilir olunca */
a.olcu-bag { display: block; color: inherit; transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis); }
a.olcu-bag:hover {
    border-color: var(--cini);
    box-shadow: var(--golge-2);
    transform: translateY(-1px);
    text-decoration: none;
}

/* ---- Halka grafik ---- */
.grafik-govde { display: flex; align-items: center; gap: var(--bosluk-5); flex-wrap: wrap; }
.halka { flex: 0 0 auto; }
.halka-orta-ust {
    font-family: var(--yazi-rakam);
    font-size: 17px;
    font-weight: 600;
    fill: var(--murekkep);
}
.halka-orta-alt { font-size: 10px; fill: var(--murekkep-3); letter-spacing: .06em; }

.grafik-kunye { flex: 1; min-width: 168px; display: flex; flex-direction: column; gap: 9px; }
.grafik-kunye li {
    display: flex;
    align-items: baseline;
    gap: var(--bosluk-2);
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-2);
}
.grafik-kunye .para { margin-left: auto; color: var(--murekkep); font-weight: var(--kalin-koyu); }

.kunye-nokta {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-radius: 2px;
}

/* ---- Cubuk grafik ---- */
.nakit-kunye { display: flex; gap: var(--bosluk-4); font-size: var(--olcek-mikro); color: var(--murekkep-3); flex-wrap: wrap; }
.nakit-kunye .para { color: var(--murekkep); font-weight: var(--kalin-koyu); }

.cubuk-sarma { width: 100%; position: relative; }
.cubuk { width: 100%; height: 150px; display: block; }

/* ---- Toplu makbuz basimi ---- */
.makbuz-toplu-tumu {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-normal);
    color: var(--murekkep-2);
    cursor: pointer;
}
/* Sayfalar arasi ekranda gorulebilir bir ayrim — kagitta zaten
   page-break var, ekranda da hangisinin bittigi belli olsun */
.makbuz-toplu-sayfa {
    margin-top: var(--bosluk-4);
    padding-top: var(--bosluk-4);
    border-top: 1px dashed var(--cizgi);
}
.makbuz-toplu-sayfa:first-of-type { border-top: none; }

.cubuk-gun-cizgi { stroke: var(--cizgi-ince); stroke-width: 1; }
.cubuk-vurus { cursor: crosshair; }

/* Fareyle gunler arasinda gezinirken beliren dikey imlec —
   pikselini JS hesapliyor (assets/js/app.js: cubukGrafikKur),
   viewBox olceklemesinden bagimsiz gercek konum icin. */
.cubuk-imlec {
    position: absolute;
    top: 0;
    width: 1px;
    height: 150px;
    background: var(--cini);
    opacity: 0.5;
    pointer-events: none;
    display: none;
}

.grafik-ipucu {
    position: absolute;
    top: 4px;
    min-width: 148px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak);
    box-shadow: 0 6px 18px rgba(28, 25, 23, 0.16);
    padding: 8px 10px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 100ms ease-out;
}
.grafik-ipucu.gorunur { opacity: 1; }
.grafik-ipucu-tarih {
    display: block;
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    color: var(--murekkep);
    margin-bottom: 4px;
}
.grafik-ipucu-satir {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--olcek-mikro);
    color: var(--murekkep-2);
    font-variant-numeric: tabular-nums;
}
.grafik-ipucu-satir strong { color: var(--murekkep); font-weight: var(--kalin-koyu); margin-left: auto; }
.grafik-ipucu-nokta { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.cubuk-eksen {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
    font-variant-numeric: tabular-nums;
}

/* ---- Pano listeleri ---- */
.pano-liste li { border-bottom: 1px solid var(--cizgi-ince); }
.pano-liste li:last-child { border-bottom: none; }

.pano-liste a,
.pano-liste .pano-toplam {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    padding: 10px var(--bosluk-5);
    color: var(--murekkep);
    font-size: var(--olcek-kucuk);
}
.pano-liste a:hover { background: var(--yuzey-vurgu); text-decoration: none; }

.pano-ikon {
    flex: 0 0 auto;
    min-width: 26px;
    display: inline-grid;
    place-items: center;
    color: var(--murekkep-3);
}
.pano-ad   { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--bosluk-2); }
.pano-deger { margin-left: auto; font-weight: var(--kalin-koyu); white-space: nowrap; }

.pano-toplam {
    background: var(--yuzey-2);
    border-top: 2px solid var(--cizgi-koyu);
    font-weight: var(--kalin-koyu);
}

/* ---- Hizli kutular ---- */
.kutu-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--bosluk-3);
}

.hizli-kutu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--bosluk-3) var(--bosluk-4);
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    color: var(--murekkep);
}
a.hizli-kutu:hover { border-color: var(--cini); text-decoration: none; }
.hizli-kutu.dolu { background: var(--cini-acik); border-color: #bcd9dd; }
.hizli-kutu.dolu .hizli-sayi { color: var(--cini-metin); }
.hizli-kutu.yakinda { opacity: 1; background: var(--yuzey); }
.hizli-kutu.yakinda .hizli-sayi { color: var(--murekkep-3); }

/* Sakin panosundaki bolum kisayolu. Yeni bir bilesen degil:
   hizli-kutu'nun sayi yerine ikon tasiyan hali. */
.hizli-kutu.kisayol { flex-direction: row; align-items: center; gap: var(--bosluk-3); }
.hizli-kutu.kisayol .hizli-etiket { font-size: var(--olcek-kucuk); color: var(--murekkep); }

.hizli-sayi {
    font-family: var(--yazi-rakam);
    font-variant-numeric: tabular-nums;
    font-size: var(--olcek-buyuk);
    font-weight: var(--kalin-koyu);
    line-height: 1.1;
}
.hizli-etiket { font-size: var(--olcek-mikro); color: var(--murekkep-3); line-height: 1.35; }
.hizli-etiket em {
    font-style: normal;
    display: inline-block;
    margin-left: 3px;
    padding: 0 4px;
    border: 1px solid var(--cizgi-koyu);
    border-radius: 3px;
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---- Zaman tuneli ---- */
.zaman-tuneli li {
    display: flex;
    align-items: flex-start;
    gap: var(--bosluk-3);
    padding: 10px var(--bosluk-5);
    border-bottom: 1px solid var(--cizgi-ince);
    border-left: 2px solid transparent;
    font-size: var(--olcek-kucuk);
}
.zaman-tuneli li:last-child { border-bottom: none; }
.zaman-tuneli li.giren { border-left-color: var(--tahsilat); }
.zaman-tuneli li.cikan { border-left-color: var(--uyari); }

.tunel-tarih { flex: 0 0 auto; font-size: var(--olcek-mikro); color: var(--murekkep-3); padding-top: 2px; }
.tunel-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tunel-baslik { font-weight: var(--kalin-koyu); }
.tunel-alt { font-size: var(--olcek-mikro); color: var(--murekkep-3); }
.tunel-tutar { margin-left: auto; white-space: nowrap; padding-top: 1px; }

@media screen and (max-width: 767px) {
    .pano-ikili { grid-template-columns: 1fr; }
    .grafik-govde { flex-direction: column; align-items: stretch; }
    .halka { align-self: center; }
    .kutu-izgara { grid-template-columns: 1fr 1fr; }
    .pano-liste a, .pano-liste .pano-toplam { padding: 10px var(--bosluk-4); }
    .zaman-tuneli li { flex-wrap: wrap; padding: 10px var(--bosluk-4); }
    .tunel-tutar { margin-left: 0; }
}

/* ---- Gider: kategori etiketi ve evrak ---- */
.kategori-etiket { display: inline-flex; align-items: center; gap: 6px; }

.evrak-rozet {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--yuzey-2);
    color: var(--murekkep-3);
    font-size: var(--olcek-mikro);
    font-variant-numeric: tabular-nums;
}

.evrak-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: var(--bosluk-3);
    margin-bottom: var(--bosluk-4);
}

.evrak-kart {
    position: relative;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    background: var(--yuzey);
    overflow: hidden;
}

.evrak-onizleme {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--kagit);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.evrak-onizleme img { width: 100%; height: 100%; object-fit: cover; }
.evrak-simge { color: var(--murekkep-3); }

.evrak-alt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px var(--bosluk-3) 8px;
    border-top: 1px solid var(--cizgi-ince);
}
.evrak-ad    { font-size: var(--olcek-mikro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evrak-boyut { font-size: 10px; color: var(--murekkep-3); font-variant-numeric: tabular-nums; }

.evrak-sil {
    position: absolute;
    top: 4px; right: 4px;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border: none;
    border-radius: 50%;
    background: rgba(26, 24, 21, 0.55);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.evrak-sil:hover { background: var(--borc); }

.evrak-yukle { padding-top: var(--bosluk-3); border-top: 1px solid var(--cizgi-ince); }
.evrak-satir { display: flex; gap: var(--bosluk-2); align-items: center; flex-wrap: wrap; }
.evrak-satir .girdi { flex: 1; min-width: 190px; }
.evrak-satir input[type="file"] { padding: 6px var(--bosluk-2); font-size: var(--olcek-kucuk); }

@media screen and (max-width: 767px) {
    .evrak-izgara { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .evrak-satir .girdi { min-width: 0; flex: 1 1 100%; }
    .evrak-satir .dugme { width: 100%; min-height: var(--dokunma); }
}

/* ============================================================
   Toplu tahsilat

   Satir yogun bir giris ekrani: 40-60 satir alt alta, klavyeyle
   gezilir. Satir yuksekligi dar tutuldu ama dokunma hedefleri
   telefonda 44px'e cikiyor (en altta).
   ============================================================ */

.donem-secim { margin-bottom: var(--bosluk-4); }

.donem-satir {
    display: flex;
    gap: var(--bosluk-2);
    align-items: center;
}
.donem-satir .girdi { flex: 1 1 auto; }

.toplu-ust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bosluk-5);
}
.toplu-ust .alan { margin-bottom: 0; }

/* ---- Satirlar ---- */

.toplu-tahsilat { margin-bottom: 0; }

.toplu-tahsilat td { padding-top: var(--bosluk-2); padding-bottom: var(--bosluk-2); }

.toplu-tahsilat .onay-sutun { width: 40px; text-align: center; }
.toplu-tahsilat .onay-sutun input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--cini);
    cursor: pointer;
}

/* Isaretli satir belli olsun — 55 satirda goz kaybolur */
.toplu-tahsilat tbody tr:has(.satir-sec:checked) { background: var(--tahsilat-zemin); }

/* Hucrenin ikinci satiri: adin altindaki telefon, basligin
   altindaki metin ozeti. Bir zamanlar yalnizca .toplu-tahsilat
   icinde tanimliydi; arac listesi, alacak ve borc raporlari da
   ayni sinifi kullaniyordu ama bicimsiz kaliyordu. */
.satir-alt {
    display: block;
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
    margin-top: 2px;
}
/* IP-9/B1: olasi mukerrer hareket / rezerve borc uyarisi — soluk gri
   tondan bilerek ayrilir, gozden kacmasin. Birden fazla baglamda
   kullaniliyor (.satir-alt, .secim-aciklama), o yuzden genel tanimli */
.uyari-metin { color: var(--uyari); font-weight: var(--kalin-koyu); }

/* Tablo icindeki girdiler cerceve gurultusu yapmasin */
.toplu-tahsilat .girdi {
    padding: var(--bosluk-2) var(--bosluk-3);
    background: var(--yuzey);
}
.toplu-tahsilat .satir-tutar { max-width: 128px; text-align: right; }
.toplu-tahsilat .satir-gun   { max-width: 78px;  text-align: center; }

.toplu-tahsilat .girdi.tutar-asim {
    border-color: var(--borc);
    background: var(--borc-zemin);
    color: var(--borc);
}

/* ---- Gun -> tarih cozumu ----
   Yazilan gunun ne tarihe denk geldigi ANINDA gorunur. Yanlis
   anlasilma ekranda kalsin, veritabaninda degil.               */

.gun-alan {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
}
.gun-cozum {
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
    white-space: nowrap;
    min-width: 84px;
}
.gun-cozum.gecersiz { color: var(--borc); font-weight: var(--kalin-koyu); }

/* ---- Kaydet seridi ---- */

.toplu-kaydet { position: sticky; bottom: 0; z-index: 3; }
.kaydet-ayrac { color: var(--cizgi-koyu); margin: 0 var(--bosluk-2); }

.toplu-not {
    margin-top: var(--bosluk-3);
    text-align: center;
}

/* ---- Tablet ---- */

@media screen and (max-width: 1024px) {
    .toplu-ust { grid-template-columns: 1fr; gap: var(--bosluk-4); }
}

/* ---- Telefon: satir karta doner ----
   Tablo kart gorunumune gecerken girdiler tam genislik alir,
   dokunma hedefi 44px olur.                                    */

@media screen and (max-width: 767px) {
    /* Kaydet seridi alt sekme cubugunun USTUNE otursun */
    .toplu-kaydet { bottom: calc(var(--alt-sekme) + env(safe-area-inset-bottom)); }

    .toplu-tahsilat .satir-tutar,
    .toplu-tahsilat .satir-gun {
        max-width: none;
        width: 100%;
        min-height: var(--dokunma);
        text-align: left;
    }
    .toplu-tahsilat .onay-sutun { width: auto; text-align: left; }
    .toplu-tahsilat .onay-sutun input[type="checkbox"] { width: 22px; height: 22px; }
    .gun-alan { flex-direction: column; align-items: stretch; gap: 4px; }
    .gun-cozum { min-width: 0; }
}

/* ---- Toplu borclandirma: istisna daireler ----
   Cogu borclandirmada istisna yok. Bolum kapali duruyor, acilinca da
   kendi icinde kayiyor — 200 daireli bir sitede sayfa metrelerce
   uzamasin. Secili istisna varsa acik geliyor ki gozden kacmasin. */

.istisna-kart { padding: 0; }

.istisna-baslik {
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-3);
    min-height: var(--dokunma);
}
.istisna-baslik::-webkit-details-marker { display: none; }

/* Acilir ok — kendi ciziyoruz, ikon dosyasi gerekmesin */
.istisna-baslik::after {
    content: "";
    flex: none;
    width: 8px; height: 8px;
    margin-left: auto;
    border-right: 1.5px solid var(--murekkep-3);
    border-bottom: 1.5px solid var(--murekkep-3);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 140ms;
}
.istisna-kart[open] .istisna-baslik::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.istisna-baslik:hover .kart-baslik { color: var(--cini); }
.istisna-baslik:focus-visible { outline: 2px solid var(--cini); outline-offset: -2px; }

.istisna-ara { margin-bottom: var(--bosluk-3); }

.istisna-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: var(--bosluk-2);
    /* Uzun listede sayfa degil KUTU kaysin */
    max-height: 264px;
    overflow-y: auto;
    padding-right: var(--bosluk-2);
}

.istisna-kutu {
    padding: var(--bosluk-2) var(--bosluk-3);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
    min-height: var(--dokunma);
    cursor: pointer;
}
.istisna-kutu:hover { border-color: var(--cizgi-koyu); }
.istisna-kutu:has(input:checked) {
    border-color: var(--uyari);
    background: var(--uyari-zemin);
    color: var(--uyari);
}
.istisna-kutu[hidden] { display: none; }

@media screen and (max-width: 767px) {
    .istisna-izgara { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); max-height: 220px; }
}

/* ---- Takvim girdileri ----
   Butun tarih alanlari <input type="date">. Sebep: kullanici
   "31.06.2026" yazabiliyordu — bicim dogru, tarih yok. MySQL kati
   kipte degilse bunu sessizce 0000-00-00 yapiyor ve kayit
   kayboluyor. Takvimde olmayan gun tiklanamaz.

   Kutuphane yok, tarayicinin kendi takvimi. Bicimi de tarayici
   secer (Turkce'de gg.aa.yyyy gorunur); deger her zaman yyyy-aa-gg
   gider, sunucu da onu bekler. */

input[type="date"].girdi {
    /* Safari kendi ic yuksekligini dayatiyor, digerleriyle esitle */
    min-height: 42px;
    line-height: normal;
    font-family: var(--yazi-rakam);
    font-variant-numeric: tabular-nums;
}

/* Takvim simgesi soluk dursun, tiklaninca vurgu rengine gelsin */
input[type="date"].girdi::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 120ms;
}
input[type="date"].girdi:hover::-webkit-calendar-picker-indicator,
input[type="date"].girdi:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* Bos tarih alani "yyyy-aa-gg" diye griyle durur — vurgulama */
input[type="date"].girdi:invalid { color: var(--murekkep-3); }

/* Suzgec seridindeki dar tarih kutulari takvim simgesine yer acsin */
.suz-tarih { min-width: 148px; }

/* Masaustunde tarayici bos tarih kutusuna kendi "gg.aa.yyyy" ipucunu
   basiyor (yukaridaki :invalid kurali). Telefonda (ozellikle iOS
   Safari) bu ipucu hic cikmiyor — iki kutu duz bos gorunuyor,
   aria-label goze gorunmez. Bu baslik o bosluga dusuyor; masaustunde
   gereksiz, gizli kaliyor. */
.suz-tarih-baslik { display: none; }
.suz-tarih-alan { display: inline-flex; align-items: center; }

/* KENDI YER TUTUCUMUZ — sadece TELEFONDA gosterilir (asagida, mobil
   media query icinde .bos ile acilir). Masaustunde tarayici zaten
   kendi "gg.aa.yyyy" ipucunu basiyor (yukaridaki :invalid kurali);
   ikisini ayni anda actigimda ustuste binip bulanik cikiyordu
   (denendi 16.09.2026) — o yuzden burada sadece YAPI var, GORUNURLUK
   yok; native ipucu olmayan tek yer (iOS Safari) telefon genisliginde
   zaten mobil kirilimda. Doluyken de tarayici SECILEN tarihi KENDI
   yerel bicimiyle basiyor ("16 Eyl 2026"), buna CSS'ten mudahale
   edilemez — bu yuzden metni DEGISTIRMEYE calismak yerine, kutu
   BOSKEN kendi yazimizi input'un USTUNE koyuyoruz. */
.suz-tarih-kutu { position: relative; display: block; }
.suz-tarih-yer-tutucu {
    position: absolute;
    left: var(--bosluk-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--murekkep-3);
    font-family: var(--yazi-rakam);
    font-size: var(--olcek-kucuk);
    pointer-events: none;
    display: none;
}

/* Suzgec seridindeki kutucuk — girdilerle ayni hizada dursun */
.suz-onay { white-space: nowrap; font-size: var(--olcek-kucuk); }

@media screen and (max-width: 767px) {
    input[type="date"].girdi { min-height: var(--dokunma); }
}

/* ---- Gecikme islemesi: isle / geri al ---- */
.gecikme-dugmeler { display: flex; gap: var(--bosluk-2); flex-wrap: wrap; align-items: flex-start; }

/* Geri al "sade" dugme ama bilgi kutusunun icinde duz metne benziyordu.
   Cercevesi olsun — geri alma yikici bir islem, yanlislikla degil
   BILEREK tiklanmali, once tiklanabilir gorunmesi lazim. */
.gecikme-dugmeler .dugme.sade {
    border: 1px solid var(--cizgi-koyu);
    background: var(--yuzey);
    text-align: left;
}
.gecikme-dugmeler .dugme.sade:hover {
    border-color: var(--borc);
    color: var(--borc);
}

/* Geri al dugmesi partinin tarihini ve tutarini da tasiyor —
   neyin geri alinacagi butonun uzerinde yazsin */
.dugme-alt {
    display: block;
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-normal);
    color: var(--murekkep-3);
    margin-top: 2px;
}
.dugme:hover .dugme-alt { color: inherit; }

@media screen and (max-width: 767px) {
    .gecikme-dugmeler { width: 100%; }
    .gecikme-dugmeler form { flex: 1 1 100%; }
    .gecikme-dugmeler .dugme { width: 100%; min-height: var(--dokunma); }
}

/* ---- Aranabilir secim listesi (assets/js/secim-ara.js) ----
   Yuzlerce daireli sitede <select> icinde isim aramak iskence.
   Gercek select duruyor, uzerine yazarak suzulen bir kutu
   koyuluyor; JS kapaliysa sade select gorunur. */

.secim-ara { position: relative; }

/* Gercek select gizli ama FORMDA — degeri o gonderiyor */
.secim-gizli {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    height: 0;
    width: 0;
}

.secim-liste {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0; right: 0;
    max-height: 264px;
    overflow-y: auto;
    margin: 0;
    padding: var(--bosluk-2);
    list-style: none;
    background: var(--yuzey);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-2);
    box-shadow: var(--golge-2, 0 8px 24px rgba(26, 24, 21, 0.12));
}

.secim-satir {
    padding: var(--bosluk-2) var(--bosluk-3);
    border-radius: var(--yuvarlak);
    cursor: pointer;
    min-height: var(--dokunma);
    display: flex;
    align-items: center;
}
.secim-satir:hover,
.secim-satir.vurgu { background: var(--yuzey-2); }

/* Secili olan her zaman belli olsun — uzun listede kaybolmasin */
.secim-satir.secili {
    font-weight: var(--kalin-koyu);
    color: var(--cini);
}
.secim-satir.secili::after {
    content: "✓";
    margin-left: auto;
    padding-left: var(--bosluk-3);
}

.secim-bos {
    padding: var(--bosluk-3);
    color: var(--murekkep-3);
    font-size: var(--olcek-kucuk);
}

@media screen and (max-width: 767px) {
    .secim-liste { max-height: 50vh; }
}

/* ---- Site ayarlari: logo ---- */
/* Ayar ekranlarinda SUTUN duzeni.
   form-izgara auto-fit ile calisiyor: genis ekranda dort karti uc
   sutuna dagitip birini alta dusuruyor, boylar da dagiliyordu.
   Burada sutunlar acikca ikiye bolundu — her sutun kendi kartlarini
   alt alta diziyor, kart boylari birbirini bozmuyor. */
.ayar-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bosluk-4);
    align-items: start;
}
.ayar-sutun {
    display: flex;
    flex-direction: column;
    gap: var(--bosluk-4);
    min-width: 0;
}

@media screen and (max-width: 1024px) {
    .ayar-izgara { grid-template-columns: 1fr; }
}

/* Logo onizlemesi SABIT yukseklikte bir cerceve. Yuzde ile
   sinirlamak yetmiyordu: 521x546'lik bir logo karti boyuna
   uzatiyordu. Cerceve sabit, gorsel icine sigiyor. */
.logo-onizleme {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 132px;
    padding: var(--bosluk-3);
    margin-bottom: var(--bosluk-3);
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
}
.logo-onizleme img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Makbuz basliginda logo — kagida basilacagi icin kucuk ve net */
.makbuz-kimlik { display: flex; align-items: center; gap: var(--bosluk-3); }
/* Kutu hem yatay hem KARE amblemi agirlayacak olcude: yatay bir
   logo 96 genisligi, kare bir amblem 64 yuksekligi kullanir.
   Onceki 88x52'de kare logolar genisligin yarisini bos birakiyordu. */
.makbuz-logo { width: auto; max-width: 96px; max-height: 64px; object-fit: contain; }

.makbuz-imza-ad {
    display: block;
    margin-top: 2px;
    font-weight: var(--kalin-koyu);
    color: var(--murekkep);
}

/* ---- Makbuz altbilgisi ----
   "Odedim, hala borcum var mi?" sorusunun cevabi kagitta yazsin.
   Altinda ayarlardan gelen serbest not (IBAN, odeme gunu...). */
.makbuz-altbilgi {
    margin-top: var(--bosluk-5);
    padding-top: var(--bosluk-4);
    border-top: 1px solid var(--cizgi);
    text-align: center;
}
.makbuz-bakiye { font-size: var(--olcek-kucuk); color: var(--murekkep-2); }
.makbuz-not {
    margin-top: var(--bosluk-2);
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
    line-height: 1.5;
}

/* Bilgisi eksik kalmis eski iptal makbuzu — bos hucrelerin sebebi */
.makbuz-uyari {
    margin: 0 0 var(--bosluk-4);
    padding: var(--bosluk-3);
    border: 1px solid var(--uyari);
    border-radius: var(--yuvarlak-2);
    background: var(--uyari-zemin);
    font-size: var(--olcek-kucuk);
    color: var(--uyari);
    text-align: center;
}

/* Makbuzda odeme yapilacak hesaplar — IBAN kasa kaydindan gelir */
.makbuz-iban { margin-top: var(--bosluk-3); }
.makbuz-iban-baslik {
    font-size: var(--olcek-mikro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--murekkep-3);
    margin-bottom: var(--bosluk-2);
}
.makbuz-iban-satir {
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-2);
}
.makbuz-iban-banka { font-weight: var(--kalin-koyu); margin-right: var(--bosluk-2); }

/* ---- Raporlar ---- */
.rapor-grup { margin-bottom: var(--bosluk-6); }
.rapor-grup-baslik {
    display: flex;
    align-items: baseline;
    gap: var(--bosluk-3);
    font-size: var(--olcek-normal);
    font-weight: var(--kalin-koyu);
    margin-bottom: var(--bosluk-4);
}

/* Sutun secici — cok sayida onay kutusu, izgaraya diziliyor
   ki alt alta uzayip formu metrelerce buyutmesin */
.sutun-secici { margin-bottom: var(--bosluk-4); }

.sutun-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-3);
}
.sutun-kutu {
    padding: var(--bosluk-2) var(--bosluk-3);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
    min-height: var(--dokunma);
    cursor: pointer;
}
.sutun-kutu:hover { border-color: var(--cizgi-koyu); }
.sutun-kutu:has(input:checked) {
    border-color: var(--cini);
    background: var(--cini-acik);
    color: var(--cini);
    font-weight: var(--kalin-koyu);
}

.kart-alt {
    padding: var(--bosluk-3) var(--bosluk-5);
    border-top: 1px solid var(--cizgi);
    background: var(--yuzey-2);
    border-radius: 0 0 var(--yuvarlak-2) var(--yuvarlak-2);
}

/* Kagitta gorunen baslik — ekranda gizli */
.yazdirma-basligi { display: none; }

@media screen and (max-width: 767px) {
    .sutun-izgara { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

/* ---- Rapor sutun secici: kapali acilan ozet ----
   Rapor asil icerik; secici acikken raporu ekranin altina itiyordu.
   Ozet satirinda hangi sutunlarin secili oldugu yaziyor, acmadan
   gorulsun. */
.sutun-secici { padding: 0; }

.sutun-ozet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-3);
    padding: var(--bosluk-3) var(--bosluk-5);
    min-height: var(--dokunma);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.sutun-ozet::-webkit-details-marker { display: none; }
.sutun-ozet:hover { background: var(--yuzey-2); }
.sutun-ozet:focus-visible { outline: 2px solid var(--cini); outline-offset: -2px; }

.sutun-ozet-liste {
    display: block;
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
    margin-top: 2px;
}

.sutun-ozet-dugme {
    flex: none;
    font-size: var(--olcek-kucuk);
    font-weight: var(--kalin-koyu);
    color: var(--cini);
    white-space: nowrap;
}
.sutun-secici[open] .sutun-ozet-dugme::after { content: " ▲"; font-size: 9px; }
.sutun-secici:not([open]) .sutun-ozet-dugme::after { content: " ▼"; font-size: 9px; }

.sutun-secici[open] .sutun-ozet { border-bottom: 1px solid var(--cizgi); }

/* ---- Rapor ust seridi (mod secimi) ----
   Katlanacak kadar buyuk degil; tek satir, tabloyu asagi itmiyor */
.rapor-serit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-3);
}
.rapor-serit-etiket {
    font-size: var(--olcek-mikro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--murekkep-3);
    margin-right: var(--bosluk-2);
}
.rapor-sekme {
    padding: 6px var(--bosluk-3);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
    background: var(--yuzey);
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-2);
}
.rapor-sekme:hover { border-color: var(--cizgi-koyu); }
.rapor-sekme.etkin {
    border-color: var(--cini);
    background: var(--cini);
    color: #fff;
    font-weight: var(--kalin-koyu);
}
.rapor-serit-not {
    font-size: var(--olcek-mikro);
    color: var(--murekkep-3);
    margin-left: var(--bosluk-2);
    flex: 1 1 240px;
}

/* Seritteki tarih kutulari esnemesin — flex icinde varsayilan olarak
   butun satiri kapliyor ve tek satirlik serit uc satira cikiyordu */
.rapor-serit .girdi {
    flex: 0 0 auto;
    width: auto;
    max-width: 168px;
}

/* T4: donem filtresine hazir dugmeler (Bu ay/Gecen ay/Bu yil) —
   .rapor-serit'in kendisi flex, bu ic grup siki bir kume olarak dursun */
.rapor-serit-hazir { display: flex; gap: 4px; }
.rapor-serit-hazir .dugme { min-height: 32px; padding: 0 var(--bosluk-2); font-size: var(--olcek-mikro); }

/* 90 gunu gecen borc icra esigi — gozden kacmasin */
.tablo td.agir, .tablo th.agir { background: var(--borc-zemin); }
.tablo td.agir { font-weight: var(--kalin-koyu); }

/* Rapor toplam satiri */
.rapor-tablo tfoot td {
    border-top: 2px solid var(--cizgi-koyu);
    font-weight: var(--kalin-koyu);
    background: var(--yuzey-2);
}

/* ---- Tahsilat orani cubugu ----
   Sayi tek basina karsilastirilmasi zor; cubuk bir bakista siralatiyor.
   Rakam yaninda duruyor — cubuk tek basina birakilmiyor, kesin deger
   her zaman okunabilmeli. */
.oran { display: flex; align-items: center; gap: var(--bosluk-2); }

.oran-cubuk {
    flex: 1 1 auto;
    min-width: 56px;
    max-width: 120px;
    height: 6px;
    background: var(--yuzey-2);
    border-radius: 3px;
    overflow: hidden;
}
.oran-dolu { display: block; height: 100%; border-radius: 3px; }
.oran-dolu.iyi  { background: var(--tahsilat); }
.oran-dolu.orta { background: var(--uyari); }
.oran-dolu.kotu { background: var(--borc); }

.oran-sayi {
    flex: none;
    font-family: var(--yazi-rakam);
    font-size: var(--olcek-kucuk);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   RESMI BELGE — Yonetim Faaliyet Raporu (plan 5.1)

   Oteki raporlar ekrana bakmak icin, bu kagida basilip imzalanmak
   icin. O yuzden tablo degil METIN belgesi gibi duruyor: dar olcu,
   numarali maddeler, altta imza satirlari. Ekranda da ayni gorunur
   ki yonetici basmadan once ne cikacagini bilsin.
   ============================================================ */
.belge {
    max-width: 190mm;          /* A4 yazi alani — ekranda da ayni genislik */
    margin: var(--bosluk-5) 0 0;
    padding: var(--bosluk-6) var(--bosluk-6) var(--bosluk-7);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
}

.belge-baslik {
    margin: 0 0 var(--bosluk-4);
    font-size: var(--olcek-buyuk);
    font-weight: var(--kalin-koyu);
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.belge-giris {
    margin: 0 0 var(--bosluk-6);
    text-align: center;
    line-height: 1.7;
    color: var(--murekkep-2);
}

.belge-bolum {
    margin: var(--bosluk-6) 0 var(--bosluk-4);
    padding-bottom: var(--bosluk-2);
    border-bottom: 1px solid var(--cizgi);
    font-size: var(--olcek-normal);
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.04em;
}

.belge-madde { margin: var(--bosluk-5) 0 var(--bosluk-3); line-height: 1.6; }

.belge-vurgu {
    margin: 0 0 var(--bosluk-3);
    padding-left: var(--bosluk-4);
}

/* Belge tablolari dar: metin belgesinde tam genislik tablo agir durur */
.belge-tablo        { max-width: 120mm; margin-bottom: var(--bosluk-5); }
.belge-tablo.genis  { max-width: 100%; }
.belge-tablo-basi   { text-align: center !important; letter-spacing: 0.08em; }

.belge-dipnot {
    margin: calc(-1 * var(--bosluk-3)) 0 var(--bosluk-5);
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-3);
    line-height: 1.6;
}

/* Genel reset ul/ol'un isaretini kaldiriyor; BELGEDE isaret sart —
   maddeler toplantida "uc numarali madde" diye anilir */
.belge-liste {
    margin: 0 0 var(--bosluk-4);
    padding-left: 28px;
    line-height: 1.9;
}
ol.belge-liste { list-style: decimal; }
ul.belge-liste { list-style: disc; }

.belge-bos { color: var(--murekkep-3); font-style: italic; }

/* Karar metni yonetimin yazdigi ham metindir: maddeleri alt alta
   yazar. white-space korunmazsa hepsi tek paragrafa dokuluyor ve
   "ikinci madde" diye bir sey kalmiyor. */
.karar-metin {
    white-space: pre-wrap;
    line-height: 1.8;
    margin: var(--bosluk-4) 0 0;
}

/* Belgenin altinda duran kartlar da ayni genislikte kalsin.
   .belge 190mm (A4 yazi alani), kartlar tam genislik olunca
   sayfanin sag kenari tirtikli goruniyordu. */
.belge-sutun { max-width: 190mm; }

.belge-imza-basi {
    margin: var(--bosluk-7) 0 var(--bosluk-6);
    text-align: center;
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.04em;
}

.belge-imzalar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bosluk-4);
}

.belge-imza { text-align: center; }

/* Imza cizgisi USTTE: isim altina degil, cizginin altina atilir */
.belge-imza-cizgi {
    display: block;
    height: 1px;
    margin-bottom: var(--bosluk-2);
    background: var(--cizgi-koyu);
}

.belge-imza-unvan { display: block; font-size: var(--olcek-kucuk); color: var(--murekkep-2); }
.belge-imza-ad    { display: block; margin-top: 2px; font-weight: var(--kalin-koyu); }

@media screen and (max-width: 767px) {
    .belge          { padding: var(--bosluk-4); }
    .belge-imzalar  { grid-template-columns: 1fr 1fr; gap: var(--bosluk-5); }
}

/* Faaliyet raporunun alt basligi — ayni doneme birden fazla belge
   varsa hangisi oldugu kagitta da yazsin */
.belge-altbaslik {
    margin: calc(-1 * var(--bosluk-3)) 0 var(--bosluk-4);
    text-align: center;
    font-size: var(--olcek-kucuk);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--murekkep-3);
}

/* ============================================================
   HAZIRUN CETVELI — imza listesi

   Ekranda okunmak icin degil, kagida basilip IMZALATILMAK icin.
   Imza sutunlari bos: doldurulacak bir alan degil, elle imza
   atilacak bir yer. O yuzden satirlar ferah ve hucre cizgileri
   belirgin — kalem tutan kisi nereye yazacagini gormeli.
   ============================================================ */
.hazirun-giris {
    margin: var(--bosluk-5) 0 var(--bosluk-3);
    line-height: 1.7;
}

.hazirun table.tablo td { padding-top: 14px; padding-bottom: 14px; }
.hazirun table.tablo td,
.hazirun table.tablo th { border-right: 1px solid var(--cizgi); }
.hazirun table.tablo td:last-child,
.hazirun table.tablo th:last-child { border-right: none; }

/* Imza hucresi bos ama dar olmamali — isim ve imza sigmali */
.hazirun .imza-sutun { min-width: 110px; }

.hazirun-yetersayi {
    margin-top: var(--bosluk-5);
    padding: var(--bosluk-4);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-2);
    background: var(--yuzey);
    max-width: 460px;
}
.hazirun-yetersayi p { margin: 0 0 var(--bosluk-2); }
.hazirun-yetersayi-baslik {
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-3);
}
.hazirun-satir { display: flex; align-items: baseline; gap: var(--bosluk-3); }

/* Divan toplantida elle dolduracak — cizgi birakiliyor */
.hazirun-bosluk {
    flex: 1;
    border-bottom: 1px solid var(--cizgi-koyu);
    min-width: 90px;
}

.hazirun-divan {
    display: flex;
    gap: var(--bosluk-7);
    margin-top: var(--bosluk-7);
}
.hazirun-imza { flex: 0 0 200px; text-align: center; }
.hazirun-imza-cizgi {
    display: block;
    height: 1px;
    margin-bottom: var(--bosluk-2);
    background: var(--cizgi-koyu);
}
.hazirun-imza-unvan { font-size: var(--olcek-kucuk); color: var(--murekkep-2); }

/* Yetki listesi — anahtar solda, aciklama saginda.
   Anahtari metnin yanina degil BASINA koyuyoruz: goz yukaridan
   asagi tarayarak "hangileri acik" sorusunu tek bakista cevaplasin,
   satir satir metin okumak zorunda kalmasin. */
.yetki-satir {
    display: flex;
    align-items: flex-start;
    gap: var(--bosluk-4);
    padding: var(--bosluk-3) 0;
    border-top: 1px solid var(--cizgi);
}
.yetki-satir:first-of-type { border-top: none; }
.yetki-satir .anahtar { margin-top: 2px; }
.yetki-metin { flex: 1; min-width: 0; }
.yetki-etiket { margin: 0; line-height: 1.5; }
.yetki-metin .alan-yardim { margin-top: 4px; }

/* Uretilen sifrenin TEK SEFERLIK gosterimi.
   Vurgulu duruyor cunku sayfa yenilenince kayboluyor — yonetici
   fark etmeden gecerse sifreyi bir daha goremez, yenisini uretmesi
   gerekir. */
.sifre-kutu {
    margin-top: var(--bosluk-5);
    border-color: var(--cini);
    border-width: 2px;
}
.sifre-baslik {
    margin: 0 0 var(--bosluk-4);
    font-weight: var(--kalin-koyu);
    color: var(--cini-koyu);
}
.sifre-satir {
    display: flex;
    gap: var(--bosluk-4);
    padding: 6px 0;
    align-items: baseline;
}
.sifre-etiket {
    flex: 0 0 110px;
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-3);
}
.sifre-deger {
    font-family: var(--yazi-rakam, monospace);
    font-size: var(--olcek-buyuk);
    letter-spacing: 0.08em;
    user-select: all;
}

/* ---- Destek Talepleri ---- */

/* Konusma akisi. Yonetimin mesaji SOL KENARDAN cini cizgiyle
   ayriliyor: kimin yazdigi rozet okumadan, goz taramasiyla
   anlasilsin. Balon/sohbet gorunumu yapmadim -- burasi bir defter,
   mesajlasma uygulamasi degil; kagida basildiginda da ayni
   sirayla okunuyor. */
.talep-mesaj {
    padding: var(--bosluk-4) 0;
    border-bottom: 1px solid var(--cizgi-ince);
}
.talep-mesaj:last-child { border-bottom: none; padding-bottom: 0; }
.talep-mesaj.ilk { padding-top: 0; }

.talep-mesaj.yonetim {
    border-left: 3px solid var(--cini);
    padding-left: var(--bosluk-4);
    background: var(--cini-acik);
    border-radius: 0 var(--yuvarlak) var(--yuvarlak) 0;
    margin: var(--bosluk-2) 0;
}

.talep-mesaj-basi {
    display: flex;
    align-items: baseline;
    gap: var(--bosluk-3);
    margin: 0 0 var(--bosluk-2);
    flex-wrap: wrap;
}
.talep-mesaj-basi .rakam { margin-left: auto; font-size: var(--olcek-mikro); }

/* ---- Giris fisleri ---- */

/* Bu sayfanin tek isi kagida basilmak: kesilip her daireye
   verilecek kartlar. Ekranda da ayni duzen goruluyor ki yonetici
   basmadan once neyin cikacagini bilsin. */
.fis-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--bosluk-4);
}

.giris-fisi {
    border: 1px dashed var(--cizgi-koyu);
    border-radius: var(--yuvarlak-2);
    padding: var(--bosluk-4);
    background: var(--yuzey);
    break-inside: avoid;
}

.fis-site {
    margin: 0 0 var(--bosluk-3);
    font-size: var(--olcek-mikro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--murekkep-3);
}

.fis-kisi { margin: 0 0 var(--bosluk-3); }
.fis-daire { display: block; font-size: var(--olcek-kucuk); color: var(--murekkep-2); }

.fis-bilgi { margin: 0 0 var(--bosluk-3); }
.fis-bilgi dt {
    font-size: var(--olcek-mikro);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--murekkep-3);
    margin-top: var(--bosluk-2);
}

/* Sifre elle yazilacak: rakam ve harf birbirine karismasin diye
   tek genislikli yazi, harfler arasi bosluk acik. */
.fis-kod {
    margin: 2px 0 0;
    font-family: var(--yazi-rakam, monospace);
    font-size: 1.1rem;
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.08em;
    user-select: all;
}

.fis-not {
    margin: 0;
    padding-top: var(--bosluk-3);
    border-top: 1px solid var(--cizgi-ince);
    font-size: var(--olcek-mikro);
    line-height: 1.5;
    color: var(--murekkep-3);
}

@media print {
    .fis-izgara { grid-template-columns: repeat(2, 1fr); gap: 10mm; }
    .giris-fisi { border-color: #999; }
}

/* Ust seritteki kullanici alani artik profile giden baglanti */
a.ust-kullanici { text-decoration: none; color: inherit; border-radius: var(--yuvarlak); }
a.ust-kullanici:hover { background: var(--kagit); }

/* Degistirilemeyen ama gosterilmesi gereken deger — girdi kutusu
   gibi durup tiklaninca hicbir sey olmasin diye duz metin. */
.okunur-deger {
    margin: 0;
    padding: 8px 0;
    font-size: var(--olcek-normal);
    font-variant-numeric: tabular-nums;
}

/* Fisin altindaki WhatsApp metni — yalnizca ekranda */
.fis-kopya { margin-top: var(--bosluk-3); }
.fis-metin {
    width: 100%;
    font-family: var(--yazi-rakam, monospace);
    font-size: var(--olcek-mikro);
    line-height: 1.5;
    padding: var(--bosluk-2);
    border: 1px solid var(--cizgi-ince);
    border-radius: var(--yuvarlak);
    background: var(--kagit);
    color: var(--murekkep-2);
    resize: vertical;
}
.fis-kopya-dugme { margin-top: var(--bosluk-2); }

/* ============================================================
   ISLETME PROJESI
   ============================================================ */

/* Satir tablosu: yedi sutun ve her hucrede bir form alani var.
   Normal .tablo satir araligi burada cok ferah kaliyor, yirmi
   satirlik bir butce ekrana sigmiyordu. */
/* HUCRE BOSLUGU DAR.
   Her yanda 16px'ti; bes hucrede 160px yalnizca bosluk demek.
   Satir tek satira indirilince o bosluk fazlaligi tabloyu
   sarmalayicidan tasirip metinleri kirptiriyordu. Dikeyde
   ferahlik korunuyor, yatayda kisiliyor. */
/* TABLO SARMALAYICIYA SIGSIN.
   Genislik kisiti olmayinca tablo EN GENIS icerigine gore
   yayiliyor, .tablo-sarma da overflow-x tasidigi icin sessizce
   yatay kaydirmaya birakiyordu: sagdaki "Sil" ekran disinda
   kaliyordu. width:100% ile tarayici sutunlari tabanlarina
   dogru sikistiriyor. */
/* Icerige gore genislesin, sarmalayiciyi doldurmasin:
   doldurunca artan yer sutunlara dagiliyor ve 20px'lik
   esit aralar bozuluyordu (73 · 78 · 99 px oluyordu).
   `table.tablo{width:100%}` daha ozgul oldugu icin
   secici de element adiyla yaziliyor. */
table.proje-tablo { width: auto; }

/* ESIT BOSLUK.
   Hucre boslugu her yanda 5px -> komsu kutular arasi 10px.
   Hucre icindeki izgara boslugu da 10px; boylece butun kutu
   aralari gozle ayni. */
/* OZGULLUK NOTU: genel `.tablo tbody td` (0,1,2) kurali
   `.proje-tablo td`yi (0,1,1) yeniyordu; hucre boslugu 16px
   kaliyor ve sutunlar arasi 32px oluyordu. Ayni seviyede
   yazilinca 10px geciyor -> aralar 20px. */
.proje-tablo thead th,
.proje-tablo tbody td { padding: 8px 5px; }

/* HEPSI USTTEN HIZALI.
   Ustteki kural yillardir "vertical-align: top" diyordu ama
   ISLEMIYORDU: genel `.tablo tbody td` kurali (0,1,2) bunu
   (0,1,1) yeniyor ve hucreler ORTAYA hizalaniyordu. Her
   hucrenin icerigi farkli yukseklikte oldugu icin —Gider'de
   iki kutu, Kim borclanacak'ta kutu + baglanti, Tutar'da kutu
   + "12 ay"— alti kontrol alti ayri yukseklikte basliyordu:
   12 · 33 · 22 · 33 · 23 · 35 piksel. Satir dagilmis
   goruunuyordu.

   Ustten hizalayinca birinci sira kutular tek cizgide,
   ikincil bilgiler (kategori, istisna, ay sayisi) altlarinda
   ikinci bir bantta duruyor. */
.proje-tablo tbody td { vertical-align: top; }
/* SUTUNLAR KIRPILMASIN.
   width:100% + min-width:0 idi; tarayici dar ekranda sikistirmak
   icin once acilir kutulari eziyordu ve 1280px'de "Kim borçlanacak"
   ile "Bitiş" okunamaz hale geliyordu (olculdu: kutu 171px, gereken
   189px). Artik her sutunun tabani var; yer yetmezse tablo yatay
   kayiyor — kirpmak yerine kaydirmak, cunku okunamayan bir secim
   kutusu kullaniciya yanlis kaydettirir.

   .tablo-sarma zaten overflow-x tasiyor, kaydirma orada oluyor. */
.proje-tablo .girdi { min-width: 0; width: 100%; }
/* Tabanlar OLCULEN ihtiyaca gore, comert degil: fazla verince
   tablo sarmalayicidan tasiyor ve en sagdaki "Sil" ekran disinda
   kaliyordu — kullanici satiri silemiyordu. Degerler 1280px'de
   secili metinlerin gercek genisligi + acilir ok payi. */
/* TABANLAR "em" — REM DEGIL.
   Tablonun puntosu bir kademe kucultuldu ama rem kok yazi
   boyutuna bagli oldugu icin kutular oldugu gibi kaldi:
   icerik kuculdu, kutu kucuulmedi, tablo 150px tasip "Sil"i
   disarida birakti. em tablonun kendi puntosuna bagli, punto
   degisirse tabanlar da onunla degisiyor. */
/* SABIT GENISLIKLER — kullanicinin verdigi olcek.
   Taban/tavan degil, KESIN genislik: kutu ne buyuyor ne
   kuculuyor, aralarin hepsi 20px. Toplam:
     140 + 140 + 155 + 155 + 140 + 140 + 115 = 985
     + 6 ara x 10 = 60   ->  1045px

   NOT: degerler local'de olculenden 20px genis. Sunucuda
   metinler daha genis cizilebiliyor (yazi tipi dosyasi
   yuklenmemisse tarayici yedek yazi tipine dusuyor, onun
   olculeri farkli). Sabit genislikte bu fark dogrudan
   kirpilma demek; pay birakildi.

   flex-basis ile veriliyor (0 0 <genislik>) ki esnek kutu
   icinde de buyuyup kuculmesin. */
.proje-tablo input[name="kalem_aciklama[]"]  { flex: 0 0 140px; width: 140px; }
.proje-tablo select[name="kalem_kategori[]"] { flex: 0 0 140px; width: 140px; }
.proje-tablo select[name="kalem_paylasim[]"] { flex: 0 0 155px; width: 155px; }
/* Hedef kutusu .hedef-grup icinde ve o DIKEY bir flex;
   orada flex-basis YUKSEKLIK demek — kutu 140px boyunda
   oluyordu. Yalnizca genislik veriliyor. */
.proje-tablo select[name="kalem_hedef[]"]    { width: 155px; flex: none; }
/* Donem araligi: iki ay kutusu tek hucrede, aralari 20px.
   (Kapsayici kural bir toplu degisiklikte silinmisti; kutular
   satir ici oldugu icin aralarinda yalnizca 4px'lik bosluk
   karakteri kaliyordu.) */
.donem-araligi {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.donem-araligi .girdi { flex: 0 0 140px; width: 140px; }
.proje-tablo input[name="kalem_tutar[]"]     { flex: 0 0 115px; width: 115px; margin-left: auto; }

/* BASLIK SATIRI YAPISKAN.
   On bes gider satiri girerken basliklar yukari kayip gidiyordu;
   "bu acilir kutu neydi" sorusunun cevabi ekranda kalmiyordu. */
.proje-tablo thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--yuzey-2);
}
/* IKILI KUTULAR YAN YANA — tek satirlik gider satiri icin.
   Alt alta dizildiginde her kalem iki bant yuksekliginde
   oluyordu; yirmi kalemlik butcede ekrana yarisi siginiyordu. */
/* IKILI KUTULAR YAN YANA — kalem satiri TEK SATIR.
   Bir sure yan yana denedik ve metinler kirpildi; sebebi
   dar olmasi degil, tablonun 95px'ini HAYALET SUTUNLARIN
   yemesiydi (tfoot yedi sutun ilan ediyordu, bkz. form.php).
   O bosluk geri kazanilinca sekiz kontrol satira siginiyor.
   Tabanlar asagida metin + acilir ok + yatay bosluk olcusune
   gore verildi. */
.satir-ikili {
    /* IZGARA, FLEX DEGIL.
       Flex bir tablo hucresinde hucrenin DARALTILMIS genisligini
       gormuyordu: iki kutu yan yana kaliyor, hucreden tasip
       yandaki sutunun uzerine biniyordu ("Kiracı, y" ile
       "Eyl 2026" 91 piksel ust uste). Izgara auto-fit ile
       hucrenin gercek genisligini olcuyor: yer varsa iki sutun,
       yoksa tek sutun — tasma olmadan. */
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: start;
}

/* Hedef secimi ve istisnasi tek dikey blok: istisna "kim
   borclanacak"in altinda duruyor, cunku muaf daireler o
   secimden dusuluyor. Yan yanayken hangisine ait oldugu
   belirsizdi. */
.hedef-grup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;   /* dikeyde gerilmesin */
    gap: 2px;
    min-width: 0;
    flex: 0 0 auto;
}
.hedef-grup .istisna-ac-dugme { margin-top: 0; white-space: nowrap; }

/* IKI PUNTO KUCUK — 15px govdeden 12px'e.
   Olcekteki --olcek-mikro (11px) etiket boyu, girdi metni icin
   fazla kucuk kalirdi; aradaki degeri veriyoruz. Amac sutunlari
   daraltip ucuncu kutuyu (kim borclanacak) ust satira cikarmak. */
.proje-tablo { font-size: 0.75rem; }
.proje-tablo .girdi { font-size: 0.75rem; }
.proje-satir td { border-bottom: 1px solid var(--cizgi); }

/* Aylik karsilik — tutarin hemen altinda, sagda */
.satir-aylik {
    display: block;
    margin-top: 3px;
    font-size: var(--olcek-mikro);
    font-variant-numeric: tabular-nums;
}

/* "Istisna ekle" — dugme degil bag gibi dursun, satiri sismesin */
.istisna-ac-dugme {
    margin-top: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--cini);
    font-size: var(--olcek-mikro);
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.istisna-ac-dugme:hover { color: var(--murekkep); }

/* Istisna secici katmani — satir basina bir kopya basmak yerine
   TEK pencere, hangi satir actiysa onun gizli alanini yaziyor */
.istisna-katman {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: var(--bosluk-4);
    background: rgba(28, 25, 23, 0.45);
}
.istisna-katman[hidden] { display: none; }

.istisna-pencere {
    width: 100%;
    max-width: 560px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--yuzey);
    border-radius: var(--yuvarlak);
    box-shadow: 0 18px 48px rgba(28, 25, 23, 0.28);
}
.istisna-pencere .kart-govde { overflow-y: auto; }

.istisna-secim { display: flex; align-items: center; gap: var(--bosluk-2); }
.istisna-secim[hidden] { display: none; }

@media (max-width: 900px) {
    /* Yedi sutunlu form tablosu telefonda okunmuyor — her satir
       kendi karti oluyor, hucre etiketleri data-etiket'ten geliyor */
    .proje-tablo thead { display: none; }
    .proje-tablo tbody tr {
        display: block;
        margin-bottom: var(--bosluk-3);
        padding: var(--bosluk-3);
        border: 1px solid var(--cizgi-koyu);
        border-radius: var(--yuvarlak);
    }
    .proje-tablo tbody td {
        display: block;
        border: none;
        padding: var(--bosluk-2) 0;
    }
    .proje-tablo tbody td::before {
        content: attr(data-etiket);
        display: block;
        margin-bottom: 3px;
        font-size: var(--olcek-mikro);
        font-weight: var(--kalin-koyu);
        color: var(--murekkep-3);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .proje-tablo td.para { text-align: left; }
}

/* ---- Isletme projesi belgesi (ekranda) ----
   Kagida basilan tebligat metni. Ekranda da kagit gibi dursun ki
   yonetici yazdirmadan once ne cikacagini gorsun. */
.proje-belge {
    margin-top: var(--bosluk-5);
    padding: var(--bosluk-6);
    background: var(--yuzey);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak);
}

.proje-belge-basi { text-align: center; margin-bottom: var(--bosluk-5); }
.proje-belge-baslik {
    font-size: var(--olcek-buyuk);
    font-weight: var(--kalin-koyu);
    letter-spacing: 0.02em;
}
.proje-belge-hitap {
    margin-top: var(--bosluk-3);
    text-align: left;
    font-weight: var(--kalin-koyu);
}
.proje-belge-giris { margin-top: var(--bosluk-2); line-height: 1.6; }

/* Maddeler numarali kalmali — tebligat metni "5. madde uyarinca"
   diye atif aliyor, numarasiz liste o atfi anlamsiz birakir */
.proje-maddeler {
    margin: var(--bosluk-5) 0;
    padding-left: 1.6em;
    list-style: decimal;
}
.proje-maddeler li {
    margin-bottom: var(--bosluk-2);
    line-height: 1.55;
}

.proje-bolum {
    margin: var(--bosluk-6) 0 var(--bosluk-3);
    padding-bottom: var(--bosluk-2);
    border-bottom: 1px solid var(--cizgi-koyu);
    font-size: var(--olcek-normal);
    font-weight: var(--kalin-koyu);
}

.proje-belge-sarma { border: none; border-radius: 0; }
.proje-belge-tablo { font-size: var(--olcek-kucuk); }
.proje-belge-tablo tfoot td { font-weight: var(--kalin-koyu); }

/* Odeme plani 14 sutun — hucreler daralmali yoksa yatay kayiyor */
.proje-odeme-plani th,
.proje-odeme-plani td { padding: var(--bosluk-2) var(--bosluk-2); white-space: nowrap; }
.proje-odeme-plani .daire-no { margin-right: 4px; }

.proje-belge-alti {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--bosluk-5);
    margin-top: var(--bosluk-6);
    padding-top: var(--bosluk-4);
    border-top: 1px solid var(--cizgi);
}
.proje-imza { display: flex; flex-direction: column; gap: var(--bosluk-2); text-align: center; }
.proje-imza-cizgi {
    display: block;
    width: 160px;
    height: 1px;
    margin-top: var(--bosluk-6);
    background: var(--cizgi-koyu);
}
.proje-belge-tarih { font-size: var(--olcek-kucuk); color: var(--murekkep-3); }

.proje-onay-serit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-4);
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .proje-belge { padding: var(--bosluk-4); }
    .proje-belge-alti { flex-direction: column; align-items: flex-start; }
}

/* Isletme projesi satir silme dugmesi.
   .evrak-sil kullanilamiyor: o position:absolute ile belge kucuk
   resminin kosesine oturuyor, tablo hucresinde kayboluyordu. */
/* Kare carpi dugmesi — metin yok, sutun dar kalsin.
   Kirmizi duruyor cunku yaptigi is yikici; gri olsaydi oteki
   ikincil baglantilardan (İstisna ekle) ayrilmazdi. */
/* CERCEVESIZ CARPI. Kutulu haliyle bir "dugme" gibi duruyordu
   ve satirdaki gercek girdilerle ayni agirlikta gorunuyordu;
   oysa ikincil bir islem. Cerceve kalkti, kirmizi kaldi. */
.satir-sil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--yuvarlak);
    background: none;
    color: var(--borc);
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}
.satir-sil span[aria-hidden] { font-size: 18px; }
.satir-sil:hover { background: var(--borc-zemin); }

/* YAZI HER ZAMAN GORUNUR.
   Once yalnizca "x" vardi ve dugme 20px genisligindeydi. Kullanici
   satiri nasil silecegini bulamadi, ben bile fareyle ilk denemede
   isabet ettiremedim. Dokunma hedefi en az 44px (CLAUDE.md) ve
   isaretin ne yaptigi yazili olmali. */
.satir-sil { min-width: 62px; min-height: 34px; justify-content: center; }

@media (max-width: 900px) {
    .satir-sil { width: 100%; min-height: 44px; padding: 9px; }
}

/* Borclandirma: ay secim izgarasi */
.donem-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-2);
}
.donem-secim {
    display: flex;
    align-items: flex-start;
    gap: var(--bosluk-2);
    padding: var(--bosluk-2) var(--bosluk-3);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak);
    cursor: pointer;
}
.donem-secim span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.donem-secim .soluk { font-size: var(--olcek-mikro); }
.donem-secim:has(input:checked) { border-color: var(--cini); background: var(--cini-acik); }

/* Yazilmis ay — kilitli. Soluk ama okunur kalmali: yonetici hangi
   ayin ne kadar borclandirildigini buradan gorüyor. */
.donem-secim.yazildi {
    background: var(--yuzey-2);
    border-style: dashed;
    cursor: default;
}

.borclanan-liste { list-style: none; margin: var(--bosluk-2) 0 0; padding: 0; }
.borclanan-liste li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-3);
    padding: var(--bosluk-2) 0;
    border-bottom: 1px solid var(--cizgi-ince);
}
.borclanan-liste li:last-child { border-bottom: none; }

/* Geri almayi engelleyen makbuzlar — ayin altinda, girintili */
.borclanan-liste li.engelleyen-satir {
    display: block;
    padding: var(--bosluk-2) 0 var(--bosluk-3) var(--bosluk-4);
    border-bottom: 1px solid var(--cizgi-ince);
}
.makbuz-listesi { list-style: none; margin: 0; padding: 0; }
.makbuz-listesi li {
    display: flex;
    align-items: baseline;
    gap: var(--bosluk-2);
    padding: 3px 0;
    font-size: var(--olcek-kucuk);
}
.makbuz-listesi a { font-variant-numeric: tabular-nums; }

/* ---- Rapor tablosunda kategori gruplari (Demirbaslar) ----
   Baslik tablo ICINDE, ayri bir h3 olarak degil: yazdirirken sayfa
   kirilsa bile hangi grupta olundugu belli kalsin. */
.grup-basligi th {
    padding-top: var(--bosluk-3);
    background: var(--yuzey-2);
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--murekkep-2);
    text-align: left;
}

.grup-toplami td {
    border-top: 1px solid var(--cizgi-koyu);
    background: var(--kagit);
    font-weight: var(--kalin-koyu);
}

@media screen and (max-width: 767px) {
    /* Rapor tablosu telefonda karta donuyor. Grup basligi de kart
       oluyordu: tek satirlik, cerceveli, gri kutulu tuhaf bir sey.
       Bolum basligi gibi dursun. */
    .tablo tbody tr.grup-basligi {
        background: none;
        border: none;
        box-shadow: none;
        margin: var(--bosluk-4) 0 var(--bosluk-2);
        padding: 0;
    }
    .grup-basligi th {
        display: block;
        background: none;
        padding: 0;
        font-size: var(--olcek-kucuk);
    }

    /* Ara toplam kart kalsin ama golgesiz ve zeminli — satirlardan
       ayrilsin, onlarla karisip "bir demirbas daha" sanilmasin. */
    .tablo tbody tr.grup-toplami {
        background: var(--kagit);
        box-shadow: none;
        border-color: var(--cizgi-koyu);
    }
    .grup-toplami td { border: none; }
}

/* ============================================================
   ICRA TAKIBI
   ============================================================ */

/* Taraf bilgileri: etiket ustte, deger altta, iki sutun */
.bilgi-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--bosluk-4);
    margin: 0;
}
.bilgi-izgara dt {
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--murekkep-3);
    margin-bottom: 2px;
}
.bilgi-izgara dd { margin: 0; }
.bilgi-izgara dd .soluk { margin-left: 6px; }

/* Not alani: satir sonlari korunsun — yonetici maddeleri alt alta
   yaziyor, tek paragrafa donusurse okunmuyor */
.satir-korunur { white-space: pre-line; margin: 0; }

/* Durum degistirme dugmeleri tek satirda */
.durum-serit { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }

/* Borc secim tablosu: onay kutulu, tahsil edilmis satir soluk */
.borc-secim-tablosu .onay-sutun { width: 34px; }
.borc-odenmis td { opacity: 0.62; }
.borc-odenmis .rozet { opacity: 1; }

/* ---- Toplu borclandirma: tip secici ----

   Ekranin ilk sorusu ve ALTINDAKI her seyi belirleyen soru.
   Otekilerle ayni siradan gorunmemesi icin kendi karti var ve
   secici bir tik buyuk. Baska hicbir yerde buyutulmus girdi yok;
   burada var, cunku hiyerarsi gercek. */
.tip-kart { margin-bottom: var(--bosluk-4); }

.tip-secici {
    font-size: var(--yazi-3);
    font-weight: 500;
    padding-block: 10px;
}

/* Kendi ekranina giden tipler (sayac, isletme projesi) */
.yonlendirme-kart { margin-bottom: var(--bosluk-4); }

.yonlendirme-govde {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-4);
    flex-wrap: wrap;
}

/* ---- Toplu borclandirma: hesaplama satiri ----

   IKI KUTU, YERI HIC DEGISMEZ. Once uc buyuk radyo karti vardi ve
   secime gore ALTINDAKI alan yer degistiriyordu: olcut secici
   kaybolup yerine onay kutusu geliyordu, sayfa zipliyordu. Simdi
   sagdaki hucre her zaman dolu — yalnizca icerigi degisir. */
.hesap-satiri {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bosluk-3);
    align-items: start;
}

/* Dar ekranda alt alta; hucre yine bos kalmaz */
@media (max-width: 560px) {
    .hesap-satiri { grid-template-columns: 1fr; }
}

.istisna-satir { margin-top: var(--bosluk-2); }

/* ============================================================
   Sayac okuma ekrani
   Tablonun icinde girdi var — satirlar sikisik olmali ki bir
   ekranda cok sayac gorunsun, ama dokunma hedefi 44px altina
   dusmesin (telefonda kart gorunumune donuyor zaten).
   ============================================================ */
.okuma-tablosu td { padding-top: 6px; padding-bottom: 6px; }

.endeks-girdi {
    width: 100%;
    max-width: 130px;
    margin-left: auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.endeks-girdi[readonly] {
    background: var(--yuzey-2);
    color: var(--murekkep-2);
    cursor: not-allowed;
}

/* Birim sutunu — dar, ortada, sadece "kWh" yaziyor */
.okuma-ok-sutunu {
    width: 1%;
    text-align: center;
    white-space: nowrap;
    font-size: var(--olcek-mikro);
}

.ok-dugmesi {
    min-height: 26px;
    padding: 0 8px;
    font-size: var(--olcek-mikro);
    line-height: 1;
}

/* Borclandirilmis satir: degistirilemez, ama okunabilir kalsin */
.satir-kilitli { background: var(--yuzey-2); }

.tuketim-hucre { font-variant-numeric: tabular-nums; }

.yapistirma-notu {
    display: inline-block;
    margin-left: var(--bosluk-2);
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--tahsilat-zemin);
    color: var(--tahsilat);
    font-weight: 600;
}

.okuma-yardim {
    padding: var(--bosluk-3) var(--bosluk-4);
    margin: 0;
    border-bottom: 1px solid var(--cizgi);
}

/* Kart basliginda okuma tarihi — kaydet seridinden buraya tasindi */
.okuma-kart-basi { flex-wrap: wrap; gap: var(--bosluk-3); }

.okuma-tarih-alani {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    margin-left: auto;
}
.okuma-tarih-alani .alan-etiket { margin: 0; white-space: nowrap; }
.okuma-tarih-alani .girdi { width: auto; }

.okuma-vazgec { margin-top: var(--bosluk-4); text-align: center; }

/* Donem acilir kutusu — "Eylül 2026 · 11/16 okundu — eksik" gibi
   uzun metinler var, dar kalirsa kirpilir */
.okuma-donem { min-width: 15rem; }

@media (max-width: 767px) {
    /* ========================================================
       TELEFONDA SAYAC KARTI — iki satir, bes degil.

       Genel tablo->kart donusumu her hucreyi kendi etiketli
       satirina koyuyor: DAIRE, OTURAN, ILK ENDEKS, SON ENDEKS,
       TUKETIM. Sayac basina bes satir, ~230px. Ekranda iki
       sayac goruluyordu, biri kesik.

       Endeks degerleri dar: yerelde iki hane, semada
       DECIMAL(12,3) — gercek elektrik sayaci alti haneye
       cikar, ondalikla ~8 karakter. Uc rakam yan yana rahat
       siger. Yan yana alinca kart ~110px'e iniyor, ekranda
       bes alti sayac gorunuyor.

       Uc sutun ESIT DEGIL: son endeks yazilan tek alan,
       digerleri referans ve geri bildirim.
       ======================================================== */
    .okuma-tablosu tbody tr {
        display: grid;
        grid-template-columns: 1fr 1.3fr 1fr;
        gap: 4px var(--bosluk-2);
        align-items: end;
    }

    /* Daire ve oturan AYNI SATIRDA, etiketsiz. Izgara cocuklari
       satir ici olamaz (blok'a cevrilirler), o yuzden ikisi ilk
       satira acikca yerlestiriliyor: daire solda, oturan sagda.
       Kartin baslik satiri gibi okunuyor.

       "DAİRE" etiketi, degeri zaten daire numarasi olan bir
       alanda bilgi tasimiyordu — kaldirildi. */
    .okuma-tablosu tbody td[data-etiket="Daire"],
    .okuma-tablosu tbody td[data-etiket="Oturan"] {
        grid-row: 1;
        display: block;
        padding: 0 0 2px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .okuma-tablosu tbody td[data-etiket="Daire"]::before,
    .okuma-tablosu tbody td[data-etiket="Oturan"]::before { content: none; }

    .okuma-tablosu tbody td[data-etiket="Daire"] {
        grid-column: 1 / 2;
        text-align: left;
        font-weight: var(--kalin-koyu);
    }

    /* Oturan iki sutun genisliginde: isim uzun olabiliyor
       ("Mustafa Kefala"), dar sutunda kirpilirdi */
    .okuma-tablosu tbody td[data-etiket="Oturan"] {
        grid-column: 2 / -1;
        text-align: right;
        color: var(--murekkep-2);
        font-size: var(--olcek-kucuk);
    }

    /* Uc rakam sutunu: etiket USTTE, deger altta */
    .okuma-tablosu tbody td[data-etiket="İlk endeks"],
    .okuma-tablosu tbody td[data-etiket="Son endeks"],
    .okuma-tablosu tbody td[data-etiket="Tüketim"] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 0;
        text-align: right;
    }
    .okuma-tablosu tbody td[data-etiket="İlk endeks"]::before,
    .okuma-tablosu tbody td[data-etiket="Son endeks"]::before,
    .okuma-tablosu tbody td[data-etiket="Tüketim"]::before {
        text-align: right;
        font-size: 10px;
    }

    /* Tuketim GIRDI DEGIL, yazi. Ucu de flex sutun: once etiket,
       sonra deger. Otekilerde deger 44px'lik bir girdi; burada
       tek satir yazi. Hizalanmasi icin yaziya da 44px satir
       yuksekligi veriliyor — boylece etiketler ustte ayni
       hizada, degerler ortada ayni hizada.

       (flex-end denendi: butun sutunu asagi itip ETIKETI
       otekilerden alcaga dusuruyordu.) */
    .okuma-tablosu tbody td[data-etiket="Tüketim"] {
        justify-content: flex-start;
        padding: 0;
        line-height: var(--dokunma);
        font-weight: var(--kalin-koyu);
    }
    /* Etiket satir yuksekligini miras almasin, 44px olurdu */
    .okuma-tablosu tbody td[data-etiket="Tüketim"]::before { line-height: 1.4; }

    .endeks-girdi { max-width: none; min-height: var(--dokunma); }

    /* Birim sutunu telefonda gizli — basliktaki "16 sayaç · kWh"
       zaten soyluyor, her satirda tekrar etmesi yer yiyor.
       OZGULLUK NOTU: yalin .okuma-ok-sutunu (0,1,0) yetmiyor,
       .tablo tbody td (0,1,2) onu yeniyor ve hucre gorunur
       kaliyordu — izgarada dorduncu sutun olup Tuketim'i alt
       satira itiyordu. */
    .okuma-tablosu tbody td.okuma-ok-sutunu { display: none; }

    /* Serit tek satir: sadece Kaydet. Onceden tarih + iki dugme
       alt alta diziliyor, ~250px yer kapliyordu.
       Sinifla sinirli — kaydet-serit'i baska ekranlar da
       kullaniyor, onlarin duzenine karisilmiyor. */
    .kaydet-serit.tek-dugme .dugme { width: 100%; }

    .okuma-kart-basi { flex-direction: column; align-items: stretch; }
    .okuma-tarih-alani { margin-left: 0; }
    .okuma-tarih-alani .girdi { flex: 1; }

    .okuma-donem { min-width: 0; width: 100%; }
}


/* ============================================================
   Gider paylastirma — fatura ozeti kutusu
   ============================================================ */
.borc-sonuc {
    margin-top: var(--bosluk-4);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    overflow: hidden;
}

.borc-sonuc-satir {
    display: flex;
    justify-content: space-between;
    gap: var(--bosluk-3);
    padding: var(--bosluk-2) var(--bosluk-3);
    font-size: var(--olcek-kucuk);
}

.borc-sonuc-satir + .borc-sonuc-satir { border-top: 1px solid var(--cizgi-ince); }
.borc-sonuc-satir .para { font-family: var(--yazi-rakam); }
.borc-sonuc-satir.toplam { background: var(--yuzey-2); font-size: var(--olcek-normal); }

/* Yalnizca kagitta gorunur — print.css acar */
.yalniz-kagit { display: none; }

/* Eksik sayac uyarisi: metin solda, dugme sagda, dar ekranda alt alta */
.eksik-serit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-3);
    width: 100%;
}

.eksik-serit > div { flex: 1 1 320px; }
.eksik-serit form { flex: 0 0 auto; }

/* "Binada baska sayac var mi?" — tanimli olmayan tipleri acan satir.
   Sekme seridi yalnizca var olan tipleri gosterdigi icin, yeni tip
   eklemenin gorunur tek yolu bu. */
.tip-ekle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-4);
}

.tip-ekle-etiket {
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-3);
    margin-right: var(--bosluk-1);
}

.tip-ekle .dugme { min-height: 30px; padding: 0 12px; font-size: var(--olcek-kucuk); }

/* Okuma girerken olagandisi tuketim isareti. Renk tek basina bilgi
   tasimasin diye yaninda gorunur bir "!" de var — kirmizi/gri ayrimi
   renk korlerinde kaybolur. */
.tuketim-uyari {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--borc-zemin);
    color: var(--borc);
    font-size: var(--olcek-mikro);
    font-weight: var(--kalin-koyu);
    cursor: help;
    vertical-align: middle;
}

.tuketim-hucre.soluk .tuketim-uyari { background: var(--yuzey-2); color: var(--murekkep-2); }

/* Gider paylasimi kunyesi — belgenin altindaki dort rakam */
.paylasim-kunye {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--bosluk-3);
    margin-top: var(--bosluk-4);
    padding: var(--bosluk-4);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    background: var(--yuzey-2);
}

.paylasim-kunye > div { display: flex; flex-direction: column; gap: 2px; }
.paylasim-kunye span {
    font-size: var(--olcek-mikro);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--murekkep-3);
}
.paylasim-kunye strong { font-size: var(--olcek-normal); font-family: var(--yazi-rakam); }

/* Sifir tuketen daire: listede durur ama one cikmaz */
.tablo tr.soluk-satir td { color: var(--murekkep-3); }

/* Tabloda vurgulu sayi — YALNIZCA kalin, zemin YOK.
   .agir bunun icin degil: o "90 gunu gecen borc" uyarisi ve borc
   kirmizisi zemin veriyor. Tuketim bedeli bir uyari degil. */
.tablo td.vurgulu { font-weight: var(--kalin-koyu); }

/* ============================================================
   Durum cani — ust cubuktaki bildirim listesi

   <details>/<summary> ile: JS kapaliyken de aciliyor. Sol menu
   akordiyonuyla ayni yaklasim.
   ============================================================ */
.can { position: relative; }

.can-dugme {
    display: inline-grid;
    place-items: center;
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--yuvarlak);
    color: var(--murekkep-2);
    cursor: pointer;
    list-style: none;
}

/* Safari ve Chrome varsayilan ucgeni ayri yollarla koyuyor */
.can-dugme::-webkit-details-marker { display: none; }
.can-dugme::marker { content: ''; }

.can-dugme:hover { background: var(--yuzey-2); color: var(--murekkep); }
.can[open] .can-dugme { background: var(--yuzey-2); color: var(--murekkep); }

.can-rozet {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--borc);
    color: #fff;
    font-size: 10px;
    font-weight: var(--kalin-koyu);
    line-height: 1;
}

.can-kutu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    width: 300px;
    max-width: calc(100vw - var(--bosluk-4) * 2);
    padding: var(--bosluk-2);
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: 0 10px 28px rgba(26, 24, 21, .14);
}

.can-bos {
    margin: 0;
    padding: var(--bosluk-3);
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-3);
}

.can-liste { list-style: none; margin: 0; padding: 0; }

.can-liste a {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    padding: 9px var(--bosluk-3);
    border-radius: var(--yuvarlak);
    font-size: var(--olcek-kucuk);
    color: var(--murekkep);
    line-height: 1.35;
}

.can-liste a:hover { background: var(--yuzey-2); text-decoration: none; }

/* Renk tek basina bilgi tasimiyor: metin zaten ne oldugunu yaziyor,
   nokta yalnizca aciliyet siralamasini gozle taratmaya yariyor. */
.can-nokta {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--murekkep-3);
}

.can-nokta.borc  { background: var(--borc); }
.can-nokta.uyari { background: var(--uyari); }
.can-nokta.notr  { background: var(--murekkep-3); }

@media (max-width: 767px) {
    .can-kutu { width: 280px; }
}

/* Kagitta cani basmanin anlami yok */
@media print { .can { display: none !important; } }

/* ============================================================
   Parola kurtarma — "bos" duzende, giris ekrani gibi tek basina
   ============================================================ */
.kurtarma-sayfa {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--bosluk-5) var(--bosluk-4);
    background: var(--yuzey-2);
}

.kurtarma-kart { width: 100%; max-width: 520px; }


.kurtarma-alt {
    display: flex;
    justify-content: flex-end;
    gap: var(--bosluk-2);
    margin: var(--bosluk-4) 0 0;
}

/* Girdi + dugme yan yana: deneme e-postasi gonderme satiri.
   Bu sinif once sayac ekraninda vardi, sadelestirmede oradan
   kaldirilinca kurali da silinmisti — ama posta ekrani kullaniyor. */
.birim-satir { display: flex; align-items: center; gap: var(--bosluk-2); }
.birim-satir .girdi { flex: 1; min-width: 0; }
.birim-satir .dugme { flex: 0 0 auto; }

/* SMTP konusma dokumu — hata ayiklama, uzun satirlar kaydirilsin */
.posta-konusma {
    margin: 0;
    padding: var(--bosluk-3);
    max-height: 320px;
    overflow: auto;
    background: var(--yuzey-2);
    border-radius: var(--yuvarlak);
    font: var(--olcek-mikro)/1.6 var(--yazi-rakam);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Kullanici listesinde rol degistirme — secim ve dugme yan yana,
   satiri sisirmeyecek kadar dar. */
.rol-secim { display: flex; align-items: center; gap: var(--bosluk-2); }
.rol-secim .girdi { width: auto; min-width: 118px; padding: 4px 8px; font-size: var(--olcek-kucuk); }
.rol-secim .dugme { flex: 0 0 auto; }

/* ---- Borç listesi panosu ----
   Apartman girişine asılır: ayakta, bir metre uzaktan okunacak.
   Masa başı raporunun 13px'i burada işe yaramaz — punto büyük,
   satır araları açık, sütun üç tane.

   PUNTOLAR KÜÇÜLTÜLDÜ (26.08.2026). İlk ölçüler fazla kabaydı:
   başlık 1.75rem, tablo 1.25rem ile liste afişe dönüyordu ve
   ekranda birkaç daire ancak görünüyordu. Bir metreden okunurluk
   korunuyor, iri duruş gidiyor. Kâğıt tarafı ayrı ayarlı —
   bkz. print.css "body.pano-yazdir". */
.pano {
    max-width: 620px;
    margin: 0 auto;
    padding: var(--bosluk-5) var(--bosluk-5) var(--bosluk-4);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
}

.pano-basi { text-align: center; margin-bottom: var(--bosluk-5); }
.pano-baslik { margin: 0; font-size: 1.4rem; letter-spacing: -.01em; }
.pano-alt {
    margin: 5px 0 0;
    font-size: 0.875rem;
    color: var(--murekkep-2);
}

.pano-tablo { width: 100%; border-collapse: collapse; font-size: 1rem; }

.pano-tablo th {
    padding: 8px var(--bosluk-3);
    border-bottom: 2px solid var(--murekkep);
    font-size: 0.75rem;
    font-weight: var(--kalin-koyu);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--murekkep-2);
}
.pano-tablo th.para, .pano-tablo td.para { text-align: right; }

.pano-tablo td {
    padding: 9px var(--bosluk-3);
    border-bottom: 1px solid var(--cizgi-ince);
}

.pano-daire { font-weight: var(--kalin-koyu); white-space: nowrap; }

.pano-tutar {
    font-family: var(--yazi-rakam);
    font-weight: var(--kalin-koyu);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--borc);
}

.pano-tablo tfoot td {
    padding-top: 14px;
    border-bottom: none;
    border-top: 2px solid var(--murekkep);
    font-weight: var(--kalin-koyu);
}

.pano-not {
    margin: var(--bosluk-5) 0 0;
    padding-top: var(--bosluk-3);
    border-top: 1px solid var(--cizgi-ince);
    font-size: 0.9375rem;
    color: var(--murekkep-2);
    text-align: center;
}

/* ---- Avans: hesap detayındaki alma formu ----
   Dört alan ve düğme tek satırda; dar ekranda alt alta düşüyor. */
.avans-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--bosluk-3);
    margin-top: var(--bosluk-3);
}
.avans-form .alan { flex: 1 1 140px; margin-bottom: 0; }
.avans-form .dugme { flex: 0 0 auto; }

/* İade: kasa seçimi ve düğme yan yana, satırı şişirmesin */
.avans-iade { display: flex; align-items: center; gap: var(--bosluk-2); }
.avans-iade .girdi { width: auto; min-width: 110px; padding: 4px 8px; font-size: var(--olcek-kucuk); }

/* Kart başlığının sağındaki düğme kümesi — birden çok düğme
   yan yana dursun, başlıkla arası açılsın. */
.kart-basi-sag { display: flex; align-items: center; gap: var(--bosluk-2); margin-left: auto; }

/* ============================================================
   Telefondaki "Daha" sekmesi

   Alt cubuga sigmayan isler burada. Duz bir baglanti listesi
   DEGIL: telefonda on bes satirlik menu duvar olur. Satirlar
   kartlara boluniyor, her satir en az 44px dokunma hedefi
   (proje kurali), solda ikon, altta bir satir aciklama.
   ============================================================ */
.daha-kart { margin-bottom: var(--bosluk-4); padding: 0; overflow: hidden; }

.daha-liste { list-style: none; margin: 0; padding: 0; }
.daha-liste li + li { border-top: 1px solid var(--cizgi-ince); }

.daha-satir {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    min-height: var(--dokunma);
    padding: 12px var(--bosluk-4);
    color: var(--murekkep);
    text-decoration: none;
}

/* Dokunma geri bildirimi: telefonda :hover yok, :active var */
.daha-satir:active { background: var(--yuzey-vurgu); }
@media (hover: hover) {
    .daha-satir:hover { background: var(--yuzey-vurgu); text-decoration: none; }
}

.daha-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--yuvarlak);
    background: var(--yuzey-vurgu);
    color: var(--murekkep-2);
}

.daha-metin { flex: 1; min-width: 0; }
.daha-ad    { display: block; font-weight: var(--kalin-koyu); }

/* Aciklama satiri: ne oldugu belli olmayan basliklara bir
   cumle. Sigmiyorsa kirpiliyor — iki satira tasip dokunma
   hedefini bozmasin. */
.daha-not {
    display: block;
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.daha-ok { color: var(--murekkep-3); flex: 0 0 auto; }

/* Cikis ayri kart, kirmizi degil ama solgun degil: yanlislikla
   basilmasin diye ayrilmis, korkutucu gorunmesin diye sade. */
.daha-oturum .daha-ad { color: var(--murekkep-2); }

/* Telefonda ust cubuktaki cikis dugmesi gizleniyor.

   Sebebi: 375px'de zarf, avatar ve cikis yan yana UC KUCUK
   HEDEF oluyordu. Aidat tutari yazarken parmak kayip cikisa
   basinca oturum kapaniyor, forma yazilanlar gidiyordu.
   Cikis kaybolmadi — "Daha" sekmesinin en altinda, kendi
   kartinda duruyor: iki dokunus uzakta ama kazara basilmiyor.
   Masaustunde yerinde kaliyor, orada yer bol. */
@media screen and (max-width: 767px) {
    .ust-cikis { display: none; }
}

/* ---- "Nasıl öderim?" — ödenmemiş borçların altında ----

   Kapali duruyor: uc bankasi olan apartmanda acik liste ozet
   sayfasini IBAN duvarina cevirirdi. Kapaliyken tek satir.
   IBAN'in yeri makbuz DEGIL borc: makbuz odemenin sonrasi,
   elinde makbuz varken parayi coktan yollamis oluyorsun. */
.odeme-yolu {
    border-top: 1px solid var(--cizgi-ince);
    padding: 12px var(--bosluk-4);
}

.odeme-yolu > summary {
    cursor: pointer;
    min-height: var(--dokunma);
    display: flex;
    align-items: center;
    font-weight: var(--kalin-koyu);
    color: var(--cini);
    list-style: none;
}
.odeme-yolu > summary::-webkit-details-marker { display: none; }
.odeme-yolu > summary::before { content: "›"; margin-right: var(--bosluk-2); }
.odeme-yolu[open] > summary::before { content: "⌄"; }

.odeme-yolu-govde { padding-bottom: var(--bosluk-2); }

/* Banka adi ustte, IBAN altinda: telefonda yan yana sigmiyor
   ve IBAN kirilirsa okunmaz oluyor. */
.odeme-hesap { margin: 0 0 var(--bosluk-3); }
.odeme-banka { display: block; font-weight: var(--kalin-koyu); }
.odeme-iban  {
    display: block;
    font-size: var(--olcek-kucuk);
    color: var(--murekkep-2);
    /* Dokunup secebilsin — bankacilik uygulamasina yapistiracak */
    user-select: all;
}

/* ============================================================
   Sakin özetinde borç ve ödeme kartları — TELEFONDA SIKI

   Genel tablo→kart dönüşümü her sütunu ayrı bir etiketli satır
   yapıyor: AÇIKLAMA / SON ÖDEME / TUTAR / ÖDENEN / KALAN. Beş
   borçta yirmi beş satır etiket okunuyor ve liste uzadıkça
   uzuyor (olculdu 27.08.2026).

   Sakinin sorduğu üç şey var: ne için, ne kadar, ne zamana
   kadar. Kart iki satıra iniyor:

       Sıcak Su — Eylül 2026            3.069,60 ₺
       son ödeme 01.09.2026

   Markup DEĞİŞMİYOR — masaüstünde tablo aynen kalsın diye
   dönüşüm data-etiket üzerinden CSS ile yapılıyor.
   ============================================================ */
@media screen and (max-width: 767px) {

    /* "ÖDENEN —" satırı ödenmemiş borçta hiçbir şey söylemiyor;
       zaten TUTAR ile KALAN aynıysa ödeme yok demektir. */
    /* !important sart: asagidaki genel "td { display: block !important }"
       kurali bunu yoksa eziyordu (olculdu — satir ekranda "—" olarak
       gorunmeye devam ediyordu). */
    .sakin-liste td[data-etiket="Ödenen"] { display: none !important; }

    /* Tutar sütunu açıklamanın hizasına çıkıyor: bir satırda
       "ne için" ve "ne kadar" birlikte okunuyor. */
    .sakin-liste tbody tr {
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: 2px var(--bosluk-3);
        padding: 12px var(--bosluk-4) !important;
        align-items: baseline;
    }

    .sakin-liste tbody td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
    }

    /* Etiketler gizli — satırın kendisi ne olduğunu söylüyor */
    .sakin-liste tbody td::before { content: none !important; }

    .sakin-liste td[data-etiket="Açıklama"],
    .sakin-liste td[data-etiket="Makbuz"] {
        grid-column: 1;
        font-weight: var(--kalin-koyu);
    }

    .sakin-liste td[data-etiket="Kalan"],
    .sakin-liste td[data-etiket="Tutar"] {
        grid-column: 2;
        grid-row: 1;
        text-align: right !important;
        font-variant-numeric: tabular-nums;
    }

    /* İkinci satır: tarih, küçük ve soluk. "son ödeme" öneki
       etiketin yerini tutuyor — sütun başlığı olmadan tarihin
       neyin tarihi olduğu belli olmalı. */
    .sakin-liste td[data-etiket="Son ödeme"],
    .sakin-liste td[data-etiket="Tarih"] {
        grid-column: 1 / -1;
        font-size: var(--olcek-kucuk);
        color: var(--murekkep-3);
    }
    /* Yine !important: ustteki "td::before { content: none !important }"
       kurali bu oneki de siliyordu. */
    .sakin-liste td[data-etiket="Son ödeme"]::before { content: "son ödeme " !important; }

    /* Borcu olan satırda tutar kırmızı kalsın — tek renk anlam
       taşıyor, kaybolmasın. */
    .sakin-liste td[data-etiket="Kalan"] { color: var(--borc); }
}

/* Ekstre tür seçici — tarih kutularıyla aynı hizada dursun */
.ekstre-tur { min-width: 160px; }

/* ============================================================
   Cari ekstre — telefonda
   ============================================================ */
@media screen and (max-width: 767px) {

    /* SUZGEC DUZENI.
       Sarmalayan flex, 116px sabit tarih kutulari, aralarinda
       "–", uzerine tur secici... 375px'de hepsi sarilip dagilir
       hale gelmisti (olculdu 27.08.2026). Izgaraya aliniyor:
       iki tarih yan yana, tur secici ve dugmeler tam genislik. */
    /* Baslik ve suzgec YAN YANA duruyordu: "CARİ EKSTRE" solda
       iki satira kiriliyor, form sag yariya sikisiyordu. Telefonda
       alt alta — baslik ustte, suzgec tam genislik. */
    .kart-basi:has(.ekstre-suz) {
        flex-direction: column;
        align-items: stretch;
        gap: var(--bosluk-3);
    }

    .ekstre-suz {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: var(--bosluk-2);
        width: 100%;
    }
    .ekstre-suz .girdi-satir { max-width: none !important; }
    .ekstre-suz .ekstre-tur  { grid-column: 1 / -1; min-width: 0; }
    .ekstre-suz .dugme       { grid-column: 1 / -1; min-height: var(--dokunma); }

    /* Tarihler arasindaki "–" telefonda yer kapliyor, ustelik
       iki kutu zaten yan yana — ayirac gereksiz. */
    .ekstre-suz .soluk { display: none; }

    /* BOS HUCRE (borc/alacak, silinemeyen hareketin "sil" hucresi vb.)
       CIKMASIN. Kart gorunumunde her sutun ayri bir etiketli satir
       oluyor; icinde yalnizca "—" olan bir satir, etiketi ne olursa
       olsun bilgi tasimiyor (bkz. .ekstre-liste'deki borc/alacak
       ornegi, kasa dokumundeki "Sil" ornegi — F7). Genellenmis: her
       .tablo bu isareti tasiyan hucreyi mobilde gizler. */
    .tablo td.bos-hucre { display: none !important; }
}

/* ---- Telefonda geri şeridi ----

   Sekme olmayan bir sayfada telefonda geri donecek yol yoktu:
   sol serit gizli, elde yalnizca tarayicinin geri tusu vardi.
   "Diğer"den Karar Defteri'ne giren kullanici orada kalıyordu.

   Masaustunde gizli — orada sol serit zaten duruyor. */
.geri-satir { display: none; }
.geri-serit { display: none; }

@media screen and (max-width: 767px) {
    /* Saran satir: baglantiyi saga yaslamak icin. Dogrudan
       margin-left:auto ise yaramiyor — .icerik blok kapsayici,
       inline-flex bir cocugu itmiyor. */
    .geri-satir { display: flex; justify-content: flex-end; }

    .geri-serit {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: var(--dokunma);
        margin-bottom: var(--bosluk-2);
        color: var(--cini);
        font-weight: var(--kalin-koyu);
        text-decoration: none;
    }
    .geri-serit span { font-size: 1.2em; line-height: 1; }
}

/* ---- Telefonda üstteki bağlantıların hizası ----

   Masaustunde baslik solda, dugmeler sagda (space-between).
   Telefonda .sayfa-basi alt alta duserken dugmeler SOLA
   yaslaniyordu — ayni sayfa iki ekranda farkli duruyordu ve
   baslikla dugmeler ust uste binmis gibi gorunuyordu.

   Artik telefonda da SAGA yasli: geri baglantisi ve "Yazdır"
   ayni tarafta, basparmagin dogal yerinde. */
@media screen and (max-width: 767px) {
    .sayfa-basi-sag {
        width: 100%;
        justify-content: flex-end;
    }

    /* Geri baglantisi kabuk tarafindan basiliyor, yani gorunumun
       .sayfa-basi'sindan AYRI bir satir — ikisi de ayni kenarda
       dursun diye ikisi de saga yasli. */
}

/* Ekstredeki makbuz numarası — bağlantı olduğu belli olsun ama
   açıklamanın önüne geçmesin: aynı satırda asıl bilgi işlemin
   kendisi, makbuz numarası yanında duran bir referans. */
.makbuz-bag { white-space: nowrap; }

/* ============================================================
   Telefonda üst bağlantılar ve süzgeç şeridi
   ============================================================ */
@media screen and (max-width: 767px) {

    /* SADE DUGME TELEFONDA DUGME GIBI GORUNSUN.
       ".dugme.sade" kenarligi ve zemini saydam; masaustunde
       uzerine gelince beliriyor. Telefonda hover YOK — "Yazdır",
       "CSV", "‹ Özet" duz kalin yazi gibi duruyordu, tiklanabilir
       oldugu anlasilmiyordu (olculdu 27.08.2026). Ince bir
       kenarlik yetiyor; vurgu rengi vermiyoruz, asil eylem
       dugmesiyle yarismasin. */
    .dugme.sade {
        border-color: var(--cizgi);
        background: var(--yuzey);
    }

    /* SUZGEC SERIDI DUZENI.
       Sarmalayan flex uc satira dagiliyordu: kategori + tarih,
       tarih + Süz + CSV, altta tek basina Yazdır. Izgaraya
       aliniyor — arama tam genislik, ikili alanlar yan yana,
       dugmeler alt satirda esit. */
    .suz-serit {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: var(--bosluk-2);
        align-items: stretch;
    }
    .suz-ara    { grid-column: 1 / -1; flex: none !important; min-width: 0 !important; }
    .suz-secim  { flex: none !important; min-width: 0; }
    .suz-serit .dugme { min-height: var(--dokunma); }

    /* Masaustunde takvim simgesine yer acmak icin verilen 148px'lik
       min-width burada tasma yapiyordu: izgara 1fr'yi bu genisligin
       altina indiremiyor, iki kutu + bosluk dar ekrani asip ikinci
       kutuyu disari itiyordu (bildirildi 06.09.2026). Izgara zaten
       esit paylastiriyor, sabit minimuma gerek yok. */
    .suz-tarih { min-width: 0; }

    /* IKINCI TASMA (bildirildi, sonra geri alindi 16.09.2026): bugun
       input'u bir <label class="suz-tarih-alan"> ile sardik ama grid
       hucresine min-width sifirlama SADECE eski dogrudan hedefe
       (.suz-tarih) verilmisti — YENI grid ogesi artik o label, ve
       grid/flex ogeleri varsayilan olarak min-width:auto tasir, yani
       icerigin dogal genisligine kadar KUCULMEZ. Etiketi degil
       DOGRU HEDEFI (.suz-tarih-alan) sifirlayinca iki kutu yan yana
       rahat sigdi — "iOS'un asilamaz native minimumu" degil, siradan
       bir grid tuzagiymis. */
    .suz-tarih-alan { min-width: 0; }
    .suz-tarih-kutu.bos .suz-tarih-yer-tutucu { display: block; }

    /* Suz / Temizle / CSV / Yazdir tek satirda esit pay alsin.
       Masaustunde .suz-eylemler "display:contents" ile gorunmez —
       dugmeler suz-serit'in dogrudan ogesi gibi davranir, orada bu
       degisiklik hicbir seyi bozmaz. Burada gercek bir kutu olup
       tam genislik bir satir kaplıyor. */
    .suz-eylemler {
        display: flex;
        grid-column: 1 / -1;
        flex-wrap: wrap;
        gap: var(--bosluk-2);
    }
    .suz-eylemler .dugme { flex: 1 1 auto; }

    /* Tarih araligindaki "–" telefonda yer kapliyor; kutular
       zaten yan yana, ayirac gereksiz. */
    .suz-tarih-ayirac { display: none; }

    /* Iki bos tarih kutusu neye yaradigini soylemeden durmasin
       (bkz. yukaridaki .suz-tarih-baslik tanimi). Tam genislik,
       kendi satirinda — hemen altindaki iki kutuyu etiketliyor. */
    .suz-tarih-baslik {
        display: block;
        grid-column: 1 / -1;
        font-size: var(--olcek-kucuk);
        color: var(--murekkep-3);
    }
}

/* ============================================================
   HIZLI TAHSILAT  (/tahsilat)
   Alt cubugun ikinci sekmesi. Telefonda, kapida, tek elle
   kullaniliyor — bu yuzden her dokunma hedefi genis ve
   kaydet dugmesi tam genislikte.
   ============================================================ */
.tahsil-ara-satir {
    display: flex;
    gap: var(--bosluk-2);
    align-items: stretch;
}

.tahsil-ara-satir .girdi { flex: 1; min-width: 0; }
.tahsil-ara-satir .dugme { flex: 0 0 auto; }

/* Aday satiri "Diğer" listesinin satiriyla ayni iskelet
   (.daha-satir) — ogrenilmis bir sey ikinci kez ogrenilmesin.
   Farki: sagda borc rakami var, ikon yok. Ikon koymadik cunku
   hepsi ayni ikon olurdu, bilgi tasimazdi. */
.tahsil-aday-borc {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

/* Secilen hesabin kimlik kutusu: kim, hangi daire, ne kadar
   borc. Yanlis hesap secildiginde tutar yazmadan once
   anlasilsin diye tahsilat formunun USTUNDE duruyor. */
.tahsil-kim .kart-govde {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-4);
    flex-wrap: wrap;
}

.tahsil-kim-ad {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    font-size: var(--olcek-buyuk);
    font-weight: var(--kalin-koyu);
    min-width: 0;
}

.tahsil-kim-borc { text-align: right; }

.tahsil-etiket {
    display: block;
    font-size: var(--olcek-mikro);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--murekkep-3);
}

.tahsil-kim-borc strong { font-size: var(--olcek-buyuk); }

/* Tahsilat formu iki ekranda da ayni parcadan geliyor
   (_tahsilat-formu.php); kartin ustundeki bosluk da oyle.
   Borc detayinda satir ici stille veriliyordu, parcaya
   tasininca buraya alindi. */
.tahsilat-kart { margin-top: var(--bosluk-5); }

@media screen and (max-width: 767px) {
    /* Kimlik kutusu dar ekranda alt alta; borc rakami sola
       kayip etiketinden kopmasin diye kutu solda hizali. */
    .tahsil-kim .kart-govde { gap: var(--bosluk-2); }
    .tahsil-kim-borc { text-align: left; }
}

/* Hizli tahsilatta "ayrildi" isareti: tasinmis ama borcu duran
   kisi. Kirmizi degil — borclu olmasi ayri, ayrilmis olmasi ayri
   bilgi; ikisini ayni renkte gostermek uyariyi bulaniklastirir. */
.tahsil-ayrildi { color: var(--murekkep-2); font-weight: var(--kalin-koyu); }

/* Hizli tahsilatta borc secme kutulari.
   Satirin tamami tiklanabilir olsun diye aciklama <label> —
   kapida, tek elle, kucuk bir kutuya nisan almak zor. */
.borc-secim .onay-sutun { width: 38px; text-align: center; }

.borc-secim .onay-sutun input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--cini);
    cursor: pointer;
}

.borc-secim label { cursor: pointer; display: block; }

/* Isareti kaldirilan satir soluyor: hangi borclarin disarida
   kaldigi tabloya bakinca bir bakista gorulsun. :has yoksa satir
   normal gorunur — bilgi kaybi yok, yalnizca vurgu kaybi. */
.borc-secim tbody tr:has(.borc-kutu:not(:checked)) { opacity: 0.45; }
.borc-secim tbody tr:has(.borc-kutu:not(:checked)) .tutar-borc { text-decoration: line-through; }

@media (max-width: 767px) {
    /* Dokunma hedefi 44 px kuralina uysun */
    .borc-secim .onay-sutun { width: auto; text-align: left; }
    .borc-secim .onay-sutun input[type="checkbox"] { width: 22px; height: 22px; }
}

/* ============================================================
   OKUMA TASLAGI SERIDI
   "Kaydedilmemiş 11 okuma var" — tablodan once.
   Kendi kutusunu cizmiyor: projede bu isi yapan .uyari-serit
   zaten var, ondan tureniyor. Buradaki tek fark sagda iki
   dugme olmasi.
   ============================================================ */
.taslak-serit {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-left-color: var(--uyari);
    background: var(--uyari-zemin);
}

.taslak-metin { flex: 1; min-width: 0; }

.taslak-dugmeler {
    display: flex;
    gap: var(--bosluk-2);
    flex: 0 0 auto;
}

@media screen and (max-width: 767px) {
    /* Telefonda dugmeler alta ve tam genislik — dokunma hedefi */
    .taslak-serit { flex-direction: column; align-items: stretch; }
    .taslak-dugmeler .dugme { flex: 1; min-height: var(--dokunma); }
}

/* ============================================================
   ANKET
   Sonuc cubuklari kendi SVG'miz bile degil, tek bir div —
   dis kutuphane yok, yuzde genislige yaziliyor.
   ============================================================ */
.anket-sonuc-satir + .anket-sonuc-satir { margin-top: var(--bosluk-4); }

.anket-sonuc-ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bosluk-3);
    margin-bottom: 6px;
}

.anket-cubuk {
    height: 10px;
    border-radius: 999px;
    background: var(--yuzey-2);
    overflow: hidden;
}

.anket-cubuk span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--cini);
    /* Sifir oylu secenek de gorunsun: cizgi kadar da olsa
       "burada bir secenek var" demeli */
    min-width: 2px;
}

/* Oy verilecek her birim (daire ya da kisi) kendi blogu */
.anket-birim + .anket-birim {
    margin-top: var(--bosluk-5);
    padding-top: var(--bosluk-4);
    border-top: 1px solid var(--cizgi-ince);
}

.anket-birim-baslik {
    margin: 0 0 var(--bosluk-2);
    font-weight: var(--kalin-koyu);
}

/* Oyu kullanilmis birim: kutu degil, tek satir. Secenekleri
   tekrar gostermek "degistirebilirsin" izlenimi verirdi. */
.anket-verilmis {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
    margin: 0;
    padding: var(--bosluk-3) var(--bosluk-4);
    border-radius: var(--yuvarlak);
    background: var(--tahsilat-zemin);
    color: var(--tahsilat);
}

.anket-sil { margin-top: var(--bosluk-5); text-align: center; }

/* Anket sonucu gizliyken cikan aciklama satiri */
.anket-gizli {
    margin: 0 0 var(--bosluk-2);
    padding: var(--bosluk-3) var(--bosluk-4);
    border-radius: var(--yuvarlak);
    background: var(--yuzey-2);
}

/* SIL SUTUNU EN DARI, CARPI EN SAGDA.
   Basliktaki "SİL" yazisi sutunu carpinin uc katina cikariyor,
   sagda kocaman bir bosluk biraktiriyordu; o bosluk yuzunden
   oteki sutunlar sikisip metinleri kirpiliyordu. Baslik artik
   ekran okuyucuda (bkz. .gizli-metin), sutun carpi kadar. */
.proje-tablo th:last-child,
.proje-tablo td.satir-islem {
    white-space: nowrap;
    text-align: right;
    padding-left: 0;
    padding-right: 4px;
}

/* NOT — DENENDI, VAZGECILDI: Gider sutununa width:100%
   verilince artan yer tek sutuna gidiyor ve kutu aralari
   esitleniyordu; ama ayni kural Paylasim sutununu daraltip
   "kim borclanacak" kutusunu alt satira dusuruyordu. Tek
   satir, birkac pikselik ara farkindan onemli. */