/* ══════════════════════════════════════════════════════════════
   Portal — mobil kabuk
   ══════════════════════════════════════════════════════════════

   Telefonda üstteki yatay sekme şeridi işe yaramıyordu: altı sekme
   375 piksele sığmıyor, yana kayıyor ve sağdakiler hiç görünmüyordu.
   Dil düğmeleri de üst çubuğun yarısını yiyordu.

   Yeni düzen:
     • ÜSTTE yalnız kimlik — logo, apartman adı ve ☰ düğmesi.
     • ☰ PANELİ — dil seçimi, kullanıcı künyesi, şifre, çıkış ve alt
       banda sığmayan bölümler. Nadiren kullanılan şeylerin yeri.
     • ALTTA SABİT BANT — parmağın doğal olarak durduğu yer. En çok beş
       bölüm; ikon + kısa etiket.

   Masaüstünde hiçbiri görünmez; oradaki yatay sekmeler yerinde kalır.
   Kesme noktası 860px: tabletin dikey hâli de mobil kabuğu alır, çünkü
   sekme şeridi orada da sıkışıyor.
   ────────────────────────────────────────────────────────────── */

:root {
    --alt-bant-y: 60px;          /* bandın yüksekliği */

    /* ── PORTALIN DAHA AÇIK PALETİ ──
       Bu blok yalnız portal sayfalarında yüklenir; tanıtım sitesinin
       kurumsal paletine dokunmaz.

       MARKA MAVİSİ AÇILMADI, ÇÜNKÜ AÇILAMIYOR. Ölçüldü: #3B5BDB
       üzerinde beyaz metnin kontrastı 5,67; bir tık açığında (#4C6EF5)
       4,32'ye düşüyor ve WCAG AA eşiğinin (4,5) altına iniyor. Düğme
       yazısı ve bağlantılar güneşte okunmaz olurdu.

       Ferahlık renkten değil AĞIRLIKTAN geliyor: gölge daraltıldı,
       çizgiler açıldı, zemin bir tık aydınlatıldı, başlık lacivertinin
       sertliği alındı (kontrast 17,3 → 15,2; eşiğin çok üstünde). */
    --zemin-2:    #F8FAFD;
    --metin:      #1B2540;
    --cizgi:      #E8ECF4;
    --golge:      0 1px 2px rgba(16, 26, 51, .03),
                  0 6px 16px rgba(16, 26, 51, .05);
    --golge-2:    0 2px 4px rgba(16, 26, 51, .04),
                  0 16px 40px rgba(16, 26, 51, .09);

    /* ── DURUM RENKLERİ TOKEN OLDU ──
       Doğrudan yazılmış on dört sabit renk vardı. Açık temada sorun
       çıkarmıyorlardı ama koyu temanın açılmasıyla her biri ayrı ayrı
       bozulurdu: pastel rozet zeminleri koyu kartın üstünde göz alır,
       doygun kırmızı metin koyu zeminde okunmazdı.
       Renk artık tek yerden geliyor; temayı değiştirmek bu bloğu
       değiştirmek demek. */
    --olumsuz:     #C81E1E;   /* borç, gecikme, eksik belge */
    --olumsuz-sis: #FEE2E2;
    --olumlu:      #0E9F6E;   /* tahsilat, denklik, kurulum */
    --dikkat:      #B45309;   /* bekleyen, tahakkuk */
    --dikkat-sis:  #FEF3C7;
    --turuncu:     #D97706;
    --mor:         #7C3AED;
    --kirmizi:     #E02424;   /* kart şeridi ve uyarı noktası */
    --cizgi-vurgu: #C9D3E8;   /* dokunulan kartın kenarı */
    --ust-cam:     rgba(255, 255, 255, .94);
}

/* ══════════════════════════════════════════════
   KOYU TEMA — SEÇİLDİĞİNDE
   ══════════════════════════════════════════════
   Tarayıcının kendi kestirmesiyle değil, üyenin ☰ menüsünden yaptığı
   seçimle açılır. color-scheme burada da değişir; yoksa açılır liste,
   tarih seçici ve kaydırma çubuğu açık kalıp koyu sayfada parlardı. */
html.koyu-tema {
    color-scheme: dark;

    --zemin:      #131C30;
    --zemin-2:    #0D1422;
    --metin:      #EAEFF9;
    --metin-2:    #A6B3CE;
    --metin-3:    #7E8DAC;
    --cizgi:      #263148;
    --marka-sis:  #1E2B4D;
    --golge:      0 1px 2px rgba(0, 0, 0, .28),
                  0 6px 16px rgba(0, 0, 0, .32);
    --golge-2:    0 2px 4px rgba(0, 0, 0, .3),
                  0 16px 40px rgba(0, 0, 0, .45);

    /* Koyu zeminde doygun renk okunmuyor; tonlar açılıp doygunluk
       düşürüldü. Sis renkleri zemin oldukları için tersine koyulaştı. */
    --olumsuz:     #F87171;
    --olumsuz-sis: #3A1C1C;
    --olumlu:      #4ADE9B;
    --dikkat:      #FBBF24;
    --dikkat-sis:  #3A2E12;
    --turuncu:     #FBBF24;
    --mor:         #A78BFA;
    --kirmizi:     #F87171;
    --cizgi-vurgu: #3A4867;
    --ust-cam:     rgba(19, 28, 48, .94);
}

/* Bölüm başlıkları biraz daha hafif: 800 punto telefonda bağırıyordu. */
.blok-bas h2 { font-weight: 700; }
.ayrinti-bas { font-weight: 700; letter-spacing: -.3px; }

/* ══════════════════════════════════════════════
   Dikey ritim — TEK PAY, HEP ALTTA
   ══════════════════════════════════════════════
   Bileşenler paylarını kendi kafalarına göre veriyordu: .blok altına
   18, .ozet-serit üstüne 14 ve altına hiç. Sonuç, özet şeridi ile
   altındaki bölüm arasında SIFIR boşluk (ölçüldü) ve sayfanın geri
   kalanından farklı bir aralık.

   Kural: sayfa düzeyindeki her bileşen payını yalnız ALTINA verir ve
   hep aynı değeri verir. Üste pay verilmediği için iki pay toplanmaz
   ve çökmeye (margin collapse) bel bağlanmaz — ölçüm neyse o. */
.sayfa-bas { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.sayfa-bas,
.kpi-izgara,
.ozet-serit,
.adim-liste,
.adim-yan,
.bildirim-serit { margin: 0 0 18px; }
/* Sayfa düzeyindeki açıklama satırı da ritme uyar; kutu içindekiler
   kendi akışlarında kalır. */
main > .ipucu { margin: 0 0 18px; }

/* Bölüm kutusunun İÇİNDEKİ şerit sayfa ritmine değil, kutunun iç
   akışına uyar: üstündeki içerikten ayrılır, altta pay bırakmaz. */
.blok-ic .ozet-serit { margin: 14px 0 0; }
.blok-ic .ozet-serit:first-child { margin-top: 0; }

/* ── Üst çubuktaki ☰ düğmesi ──
   SAĞ UCA YASLI. Üst çubuğu sağa iten şey `.kim` bloğundaki
   margin-left:auto idi; telefonda o blok gizlenince itici de kayboluyor
   ve ☰ logonun hemen yanına yapışıyordu. İtme düğmenin kendisine
   veriliyor ki kim gizlenirse gizlensin sağda kalsın.                  */
.menu-dugme {
    display: none;
    margin-inline-start: auto;
    width: 42px; height: 42px; flex: none;
    align-items: center; justify-content: center;
    border: 1px solid var(--cizgi); border-radius: 12px;
    background: var(--zemin); color: var(--metin);
    cursor: pointer; transition: var(--gecis);
}
.menu-dugme:hover { border-color: var(--cizgi-vurgu); }
.menu-dugme svg { width: 20px; height: 20px; }

/* ── Açılır panel ── */
.yan-panel {
    position: fixed; inset: 0; z-index: 200;
    visibility: hidden; opacity: 0; transition: opacity .18s ease, visibility .18s;
}
.yan-panel[data-acik="1"] { visibility: visible; opacity: 1; }
.yan-panel-perde {
    position: absolute; inset: 0;
    background: rgba(16, 26, 51, .38);
    backdrop-filter: blur(2px);
}
.yan-panel-ic {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(320px, 86vw);
    background: var(--zemin);
    box-shadow: var(--golge-2);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
}
.yan-panel[data-acik="1"] .yan-panel-ic { transform: translateX(0); }

.yan-panel-bas {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--cizgi);
    display: flex; align-items: flex-start; gap: 12px;
}
.yan-panel-bas .kim-ad { font-weight: 700; font-size: 15px; color: var(--metin); }
.yan-panel-bas .kim-site { font-size: 12.5px; color: var(--metin-3); margin-top: 2px; }
.yan-panel-kapat {
    margin-left: auto; width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    border: 0; background: transparent; color: var(--metin-3);
    cursor: pointer; border-radius: 9px;
}
.yan-panel-kapat:hover { background: var(--zemin-2); color: var(--metin); }

.yan-panel-bolum { padding: 12px 10px; }
.yan-panel-bolum + .yan-panel-bolum { border-top: 1px solid var(--cizgi); }
.yan-panel-etiket {
    font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
    color: var(--metin-3); padding: 0 10px 8px;
}
.yan-panel a.yan-bag, .yan-panel button.yan-bag {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 11px 12px; border-radius: 11px;
    font-size: 14.5px; font-weight: 600; color: var(--metin-2);
    border: 0; background: transparent; cursor: pointer; text-align: start;
    transition: var(--gecis);
}
.yan-panel a.yan-bag:hover, .yan-panel button.yan-bag:hover {
    background: var(--zemin-2); color: var(--metin);
}
.yan-panel a.yan-bag.etkin { background: var(--marka-sis); color: var(--marka); }
.yan-panel .yan-bag svg { width: 19px; height: 19px; flex: none; }
.yan-panel .yan-bag .rozet-say { margin-left: auto; }

/* Panel içindeki dil düğmeleri satıra yayılır */
.yan-panel .dil-secici { flex-wrap: wrap; padding: 0 12px; gap: 7px; }

/* Görünüm seçimi — dil düğmeleriyle aynı dil, üç eşit parça. */
.tema-secici {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 7px; padding: 0 12px;
}
.tema-secici button {
    font: inherit; font-size: 13px; padding: 9px 4px;
    border-radius: 999px; cursor: pointer;
    border: 1px solid var(--cizgi); color: var(--metin-2);
    background: var(--zemin); transition: var(--gecis);
}
.tema-secici button:hover { border-color: var(--cizgi-vurgu); }
.tema-secici button.etkin {
    border-color: var(--marka); color: var(--marka); background: var(--marka-sis);
}
html.koyu-tema .tema-secici button.etkin { color: #A9BEFF; }

/* Panel içindeki künye — etiket üstte, değer altta */
.yan-kunye { padding: 0 12px 6px; }
.yan-kunye > div { padding: 7px 0; border-bottom: 1px solid var(--cizgi); }
.yan-kunye > div:last-child { border-bottom: 0; }
.yan-kunye span {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--metin-3);
}
.yan-kunye b { font-size: 14.5px; font-weight: 600; color: var(--metin); }
.yan-kunye a { color: var(--marka); }

/* ── Alt bant ── */
.alt-bant {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: var(--ust-cam);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--cizgi);
    padding-bottom: env(safe-area-inset-bottom);   /* iPhone çubuğu */
}
.alt-bant-ic {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    height: var(--alt-bant-y);
}
.alt-bant a {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    font-size: 10.5px; font-weight: 600; letter-spacing: -.1px;
    color: var(--metin-3); position: relative;
    /* Parmak hedefi: etiket küçük olsa da dokunma alanı tam yükseklik. */
    -webkit-tap-highlight-color: transparent;
}
.alt-bant a svg { width: 22px; height: 22px; }
/* Etiket TEK SATIR. Rusçada "Мои обращения" iki satıra düşüp bandın
   altından taşıyor, ikon yukarı kayıyordu. Sığmayan ad kısaltılır —
   hangisi olduğu ikondan ve renkten zaten okunuyor. */
.alt-bant a { min-width: 0; overflow: hidden; }
.alt-bant a span:not(.rozet-say) {
    max-width: 100%; padding: 0 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alt-bant a.etkin { color: var(--marka); }
/* Etkin bölümün üstünde ince bir çizgi — hangisindeyiz, ikonun rengine
   ek olarak biçimden de okunsun (renk körlüğü). */
.alt-bant a.etkin::before {
    content: ""; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 2.5px; border-radius: 0 0 3px 3px;
    background: var(--marka);
}
.alt-bant a .rozet-say {
    position: absolute; top: 6px; left: 50%; margin-left: 4px;
    min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px;
}

/* ══════════════════════════════════════════════
   Form denetimleri — hepsi aynı görünür
   ══════════════════════════════════════════════
   `.alan input` ve `.alan textarea` biçimlendirilmiş ama SELECT
   atlanmıştı: yeni talep sayfasındaki "Türü" açılır listesi tarayıcı
   varsayılanıyla, çevresindeki alanlardan bambaşka duruyordu. Duyuru
   oylamasındaki not kutusu ise `.alan` sarmalının dışında yazılmış, o
   da çıplak kalmıştı.

   Kural sınıfa değil DENETİMİN KENDİSİNE bağlanıyor: bundan sonra
   sarmalı unutulan bir alan da doğru görünür.                          */
.blok-ic input[type="text"],
.blok-ic input[type="email"],
.blok-ic input[type="password"],
.blok-ic input[type="tel"],
.blok-ic input[type="number"],
.blok-ic input[type="date"],
.blok-ic select,
.blok-ic textarea,
.alan select {
    width: 100%; padding: 13px 15px; font: inherit; font-size: 15.5px;
    color: var(--metin); background: var(--zemin);
    border: 1px solid var(--cizgi); border-radius: 11px;
    transition: var(--gecis);
}
.blok-ic input:focus, .blok-ic select:focus, .blok-ic textarea:focus,
.alan select:focus {
    outline: none; border-color: var(--marka);
    box-shadow: 0 0 0 3px var(--marka-sis);
}
/* Açılır listenin kendi oku sistemden sisteme değişiyor; tek bir ok
   çizilip sağda sabit tutuluyor. */
.blok-ic select, .alan select {
    appearance: none; -webkit-appearance: none;
    padding-inline-end: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355617D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 18px 18px;
}
/* Onay kutusu ve radyo düğmesi bu kuralın dışında: onlar kutu değil. */
.blok-ic input[type="checkbox"], .blok-ic input[type="radio"] {
    width: auto; padding: 0;
}

/* ══════════════════════════════════════════════
   Tıklanabilir KPI kartı ve özet şeridi
   ══════════════════════════════════════════════
   Rakamın altına küçük harflerle yazılan açıklama telefonda kartı iki
   katına çıkarıyor, yine de yetmiyordu ("vadesi geçmiş 3 kalem" — hangi
   kalemler?). Artık kart rakamı söylüyor, dokunulunca ayrıntıyı açıyor.  */
/* Kart rengi DURUMU söyler, süs değildir: gecikmiş alacak kırmızı,
   kasa yeşil, ödeyeceklerimiz turuncu. portal.css'te yalnız
   borc/odeme/uyari adları vardı; yönetim kartları renk adıyla
   çağrılıyor ve hepsi marka mavisi çıkıyordu. */
.kpi.yesil::before   { background: var(--yesil); }
.kpi.kirmizi::before { background: var(--kirmizi); }
.kpi.turuncu::before { background: var(--turuncu); }
.kpi.mavi::before    { background: var(--marka); }
.kpi.mor::before     { background: var(--mor); }

.kpi-bag { display: block; position: relative; color: inherit; }
.kpi-bag:hover { border-color: var(--cizgi-vurgu); }
.kpi-bag:active { transform: scale(.985); }
/* Ok, etiketin değil AÇIKLAMANIN hizasında: üstte dururken uzun
   etiket ("Ödenmesi gereken") okun altına giriyordu. */
.kpi-bag .kpi-ok {
    position: absolute; bottom: 11px; inset-inline-end: 13px;
    font-size: 20px; line-height: 1; color: var(--metin-3);
}
.kpi-bag .not { padding-inline-end: 20px; }
[dir="rtl"] .kpi-bag .kpi-ok { transform: scaleX(-1); }

/* Altı kart: telefonda iki sütun, masaüstünde üç. Dört sütunda son satırda
   iki kart yalnız kalıyor ve şerit dengesiz görünüyordu. */
.kpi-alti { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .kpi-alti { grid-template-columns: repeat(3, 1fr); } }

/* Tek cümlelik özet şeridi — liste değil DURUM. */
.ozet-serit {
    display: flex; align-items: center; gap: 14px;
    margin-top: 14px; padding: 14px 16px;
    background: var(--zemin); border: 1px solid var(--cizgi);
    border-inline-start: 3px solid var(--marka);
    border-radius: var(--yuvarlak); box-shadow: var(--golge);
    color: inherit;
}
.ozet-serit.kirmizi { border-inline-start-color: var(--olumsuz); }
.ozet-serit b { font-size: 14.5px; }
.ozet-serit .satir-alt { font-size: 12.5px; color: var(--metin-3); margin-top: 3px; }

/* İpucu satırındaki bağlantı düz gri metinden ayrılsın — "Hareketleri gör"
   tıklanabilir olduğu anlaşılmıyordu. */
.ipucu a { color: var(--marka); font-weight: 600; }

/* ══════════════════════════════════════════════
   Kurulum ve bildirim şeridi
   ══════════════════════════════════════════════
   Şeridin biçimi style.css'te duruyordu; panel o dosyayı yüklemiyor
   (v2 + portal + mobil). Yani uygulamayı yükleme ve bildirim önerisi
   çıplak metin olarak çıkıyor, düğme sayfanın geri kalanına hiç
   benzemiyordu. Biçim artık şeridin göründüğü yerde tanımlı.        */
.bildirim-serit {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 13px 15px;
    border: 1px solid var(--cizgi);
    border-inline-start: 3px solid var(--marka);
    border-radius: var(--yuvarlak);
    background: var(--zemin); box-shadow: var(--golge);
    font-size: 14px; line-height: 1.45; color: var(--metin);
}
.bildirim-serit span { flex: 1 1 200px; }
.bildirim-serit .btn { padding: 10px 16px; font-size: 14px; flex: none; }
/* Kurulum şeridi öne çıkar: uygulamayı kurmak bildirimin önkoşulu. */
.bildirim-serit.kurulum { border-inline-start-color: var(--olumlu); }
/* "Sonra" bir metin düğmesidir: çarpı işareti kalıcı ret gibi okunuyor,
   üye bir daha hiç görmeyeceğini sanıyordu. */
.serit-kapat {
    background: none; border: 0; color: var(--metin-3);
    font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer;
    padding: 10px 4px; flex: none;
}
.serit-kapat:hover { color: var(--metin); }

/* Eksik kurulum / kapalı bildirim için sessiz işaret. Şerit ertelense de
   kalır; kimseyi durdurmaz ama her açılışta görünür. */
.uyari-nokta {
    position: absolute; top: 7px; inset-inline-end: 7px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--kirmizi); box-shadow: 0 0 0 2px var(--zemin);
}
.menu-dugme { position: relative; }
.yan-bag { position: relative; }
.yan-bag .uyari-nokta { top: 50%; margin-top: -4px; inset-inline-end: 12px; }

/* ══════════════════════════════════════════════
   Denetimin üç aşaması
   ══════════════════════════════════════════════
   Numaralar burada süs değil SIRA: hesapların özeti okunmadan sistemin
   işaretledikleri, onlar görülmeden rapor yazılmaz. KMK m.41 denetimi
   bu sırayla işler, ekran da öyle.

   Aşama kartı KPI kartı değildir ve ona benzemez: rakam değil DURUM
   taşır — "kasa denkliği tutuyor", "görüşünüz bekleniyor".            */
.adim-liste { display: grid; gap: 10px; margin-top: 14px; }
.adim {
    display: flex; align-items: center; gap: 13px;
    padding: 15px 15px 15px 13px;
    background: var(--zemin); border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak); box-shadow: var(--golge);
    color: inherit; transition: var(--gecis);
}
.adim:hover { border-color: var(--cizgi-vurgu); }
.adim:active { transform: scale(.99); }
.adim-no {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--marka-sis); color: var(--marka);
    font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums;
}
.adim-ic { flex: 1 1 auto; min-width: 0; }
.adim-ad { font-weight: 700; font-size: 15px; color: var(--metin); }
.adim-ok { flex: none; font-size: 20px; line-height: 1; color: var(--metin-3); }
[dir="rtl"] .adim-ok { transform: scaleX(-1); }
/* İşaretli kayıt varsa ya da rapor yazılmamışsa aşama kendini belli eder */
.adim.dikkat .adim-no   { background: var(--olumsuz-sis); color: var(--olumsuz); }
.adim.bekliyor .adim-no { background: var(--dikkat-sis); color: var(--dikkat); }
.adim-yan { margin-top: 14px; }
.adim-yan .adim-ad { font-weight: 600; }

/* Bulgu kartının sol şeridi satır içi renkle geliyor; başlık sarmasın. */
.blok.bulgu .blok-bas { flex-wrap: wrap; gap: 8px; }
.blok.bulgu .blok-bas h2 { font-size: 15.5px; }

/* ══════════════════════════════════════════════
   Açılır satırlar — kasa hesapları, gider/gelir kategorileri
   ══════════════════════════════════════════════
   Satıra dokununca ayrıntısı ALTINDA açılır; ayrı bir sayfaya gitmek
   telefonda geri gel-git demek. Tarayıcının kendi <details> öğesi
   kullanılıyor: betik yok, klavyeyle açılıyor, JavaScript kapalıyken de
   çalışıyor.                                                          */
.acilir-liste { display: grid; gap: 2px; }
.acilir-satir > summary {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 2px; cursor: pointer; list-style: none;
    border-bottom: 1px solid var(--cizgi);
}
.acilir-satir > summary::-webkit-details-marker { display: none; }
.acilir-satir > summary::after {
    content: "›"; margin-inline-start: auto; order: 9;
    font-size: 19px; line-height: 1; color: var(--metin-3);
    transition: transform var(--gecis);
}
.acilir-satir[open] > summary::after { transform: rotate(90deg); }
.acilir-satir > summary > div:first-child { flex: 1 1 auto; min-width: 0; }
.acilir-satir > summary .ad { font-weight: 600; font-size: 14.5px; }
.acilir-satir > summary .tutar {
    font-weight: 700; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.acilir-satir[open] > summary { border-bottom-color: transparent; }
.acilir-ic {
    padding: 4px 0 12px 2px; margin: 0;
    border-bottom: 1px solid var(--cizgi);
}

/* Kasanın yıllık dökümü: yıl solda, rakamlar sarmalı satırda */
.yil-dokumu { display: grid; gap: 8px; }
.yil-satir { display: flex; gap: 10px; align-items: baseline; }
.yil-satir .yil {
    flex: none; width: 46px; font-weight: 700; font-size: 13.5px;
    font-variant-numeric: tabular-nums; color: var(--metin);
}
.yil-rakam {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    font-size: 12.5px; color: var(--metin-3);
}
.yil-rakam b { color: var(--metin); font-variant-numeric: tabular-nums; }
.yil-rakam b.olumlu { color: var(--olumlu); }
.yil-rakam b.olumsuz { color: var(--olumsuz); }

/* Dönem seçimi — etiket ve açılır liste tek satırda */
.donem-secim {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 18px;
}
.donem-secim label { font-size: 13px; color: var(--metin-3); font-weight: 600; }
.donem-secim select {
    flex: 1 1 180px; max-width: 280px;
    /* Kutu dışında durduğu için .blok-ic kuralları buraya ulaşmıyor */
    padding: 10px 40px 10px 14px; font: inherit; font-size: 15px;
    color: var(--metin); background: var(--zemin);
    border: 1px solid var(--cizgi); border-radius: 11px; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355617D' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
    background-size: 18px;
}
.donem-secim select:focus {
    outline: none; border-color: var(--marka);
    box-shadow: 0 0 0 3px var(--marka-sis);
}

/* Bildirimler sayfasındaki durum satırı: cümle ve eylem yan yana. */
.bil-durum {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    font-size: 14.5px; line-height: 1.5;
}
.bil-durum span { flex: 1 1 200px; }
.bil-durum .btn { flex: none; padding: 11px 18px; }

/* Masaüstünde hücrenin masaüstü okunuşu görünür (bkz. .mst/.tel). */
table.dokum .tel { display: none; }
table.dokum .mst { display: inline; }

/* ══════════════════════════════════════════════
   Hesap dökümü telefonda İKİ SATIR
   ══════════════════════════════════════════════
   Tablo satırı telefonda alan alan alt alta açılıyordu: her hareket
   Tarih / Açıklama / Belge No / Borç / Bakiye olmak üzere BEŞ satır,
   bir ekranda ancak üç hareket. Oysa ana sayfadaki "Son hareketler"
   aynı bilgiyi iki satıra sığdırıyor ve okunuyor.

   Aynı düzen buraya da geliyor: üstte açıklama ile tutar, altta tarih,
   belge no ve bakiye — küçük puntoyla. Etiketler ("Tarih:", "Borç:")
   kalkıyor; hangi rakamın ne olduğu yerinden ve renginden okunuyor.
   Bakiye tek istisna, o etiketiyle duruyor — tutarla karışmasın.       */
@media (max-width: 700px) {
    table.dokum.dokum-cift tr {
        display: grid; grid-template-columns: auto auto 1fr;
        column-gap: 10px; row-gap: 1px;
        align-items: baseline; padding: 11px 13px;
    }
    table.dokum.dokum-cift td {
        display: block; padding: 0; text-align: start;
    }
    table.dokum.dokum-cift td::before { content: none; }
    /* Boş hücre ("Belge No —", dolmayan borç/alacak sütunu) çizilmez.
       portal.css'teki .yok kuralı buradaki td seçicisinden daha düşük
       özgüllükte kaldığı için eziliyordu: gizli hücreler ızgarada yer
       kapıyor, dolu olanla aynı gözde üst üste biniyordu. */
    table.dokum.dokum-cift td.yok { display: none; }

    /* 1. satır: açıklama — tutar */
    table.dokum.dokum-cift td.aciklama {
        grid-row: 1; grid-column: 1 / 3;
        font-weight: 600; font-size: 14.5px;
    }
    table.dokum.dokum-cift td.sag-hiza:not(.bakiye) {
        grid-row: 1; grid-column: 3;
        text-align: end; font-weight: 700; font-size: 14.5px;
        white-space: nowrap;
    }
    /* 2. satır: tarih · belge — bakiye */
    table.dokum.dokum-cift td.h-tarih,
    table.dokum.dokum-cift td.h-belge {
        grid-row: 2; font-size: 12.5px; color: var(--metin-3);
    }
    table.dokum.dokum-cift td.h-tarih { grid-column: 1; }
    table.dokum.dokum-cift td.h-belge { grid-column: 2; }
    table.dokum.dokum-cift td.h-belge::before {
        content: "·"; margin-inline-end: 6px;      /* tarihten ayırır */
    }
    table.dokum.dokum-cift td.bakiye {
        grid-row: 2; grid-column: 3;
        text-align: end; font-size: 12.5px; color: var(--metin-3);
        font-weight: 600; white-space: nowrap;
    }
    table.dokum.dokum-cift td.bakiye::before {
        content: attr(data-etiket) " ";
        font-weight: 400; text-transform: lowercase;
    }

    /* ── İşletme defteri: sekiz sütun, yine iki satır ──
       Denetçinin tarih aralığı verip çektiği defterde her kayıt sekiz
       alan olarak açılıyordu — bir ekranda iki kayıt. Denetim yüzlerce
       satırı gözden geçirmektir; o hızda okunamıyordu.

       Üstte ne olduğu ve tutarı, altta ne zaman, kiminle, hangi
       kategoride. Belge numarası ile kasa durumu telefonda ancak
       DİKKAT İSTEDİĞİNDE yazılır: denetçinin aradığı şey belge
       numarasının kendisi değil yokluğu, kasanın yansıması değil
       yansımamasıdır. Olağan hâller yer kaplamaz.                     */
    table.dokum.dokum-defter tr { grid-template-columns: auto auto 1fr auto; }
    table.dokum.dokum-defter td.aciklama { grid-column: 1 / 4; }
    table.dokum.dokum-defter td.sag-hiza:not(.bakiye) { grid-column: 4; }
    table.dokum.dokum-defter td.h-tarih    { grid-row: 2; grid-column: 1; }
    table.dokum.dokum-defter td.h-taraf    { grid-row: 2; grid-column: 2; }
    table.dokum.dokum-defter td.h-kategori { grid-row: 2; grid-column: 3; }
    table.dokum.dokum-defter td.h-taraf,
    table.dokum.dokum-defter td.h-kategori {
        font-size: 12.5px; color: var(--metin-3);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    table.dokum.dokum-defter td.h-taraf::before,
    table.dokum.dokum-defter td.h-kategori::before {
        content: "·"; margin-inline-end: 6px;
    }
    /* Belge numarası doluysa ve kasaya yansımışsa satırda yer almaz. */
    table.dokum.dokum-defter td.h-belge:not(.belgesiz),
    table.dokum.dokum-defter td.h-kasa:not(.bekleyen) { display: none; }
    /* Uyarılar kendi satırında. İkisini de ikinci satırın sağ ucuna
       koymak, iki uyarı birden çıkan kayıtta üst üste bindiriyordu —
       CSS o hücrede kardeşinin olup olmadığını güvenilir biçimde
       soramaz. Olağan kayıt iki satır kalır; üçüncü satır yalnızca
       söyleyecek bir şey olduğunda doğar. */
    table.dokum.dokum-defter td.h-belge.belgesiz,
    table.dokum.dokum-defter td.h-kasa.bekleyen {
        grid-row: 3; margin-top: 3px;
        font-size: 12px; font-weight: 600; white-space: nowrap;
    }
    table.dokum.dokum-defter td.h-belge.belgesiz {
        grid-column: 1 / 3; color: var(--olumsuz);
    }
    table.dokum.dokum-defter td.h-kasa.bekleyen {
        grid-column: 3 / 5; text-align: end; color: var(--dikkat);
    }

    /* Aynı hücrenin iki okunuşu: masaüstünde "—", telefonda "belgesiz".
       Bu ikili varsayılanı media query'nin ÖNÜNDE tanımlı (aşağıda
       değil): eşit özgüllükte sonra gelen kural kazanır, masaüstü
       kuralı bloğun arkasına yazıldığında telefonda da o geçiyordu. */
    table.dokum .mst { display: none; }
    table.dokum .tel { display: inline; }
    /* Açıklaması boş kayıtta taraf adı başlığa çıkar; ikinci satırda
       aynı adı bir daha yazmanın anlamı yok. */
    table.dokum.dokum-defter td.h-taraf.yinelenen { display: none; }
}
.ozet-serit .tutar {
    margin-inline-start: auto; font-weight: 800; font-size: 16px;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ozet-serit.kirmizi .tutar { color: var(--olumsuz); }

/* Ayrıntı sayfası başlığı ve geri bağlantısı */
/* Geri bağlantısı ve başlık BİR GRUPTUR: aralarında dar bir pay
   bırakılır, gruptan sonra sayfa ritmine dönülür. Başlık içeriğe
   6 px ile yapışıyordu. */
.geri-bag {
    display: inline-block; margin: 0 0 6px;
    font-size: 14px; font-weight: 600; color: var(--marka);
}
.ayrinti-bas { font-size: 19px; margin: 0 0 14px; }
.blok-bas .tutar-bas {
    margin-inline-start: auto; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.blok-bas { display: flex; align-items: center; gap: 12px; }
.blok-bas .kucuk-bag { margin-inline-start: auto; }

/* ══════════════════════════════════════════════
   Tutar listesi — ad solda, para sağda
   ══════════════════════════════════════════════
   Kasa bakiyeleri ve kategori dağılımı önce `.bilgi-izgara` ile
   çiziliyordu: etiket büyük harf, değer altında. "VAKIFBANK ANA HESAP ·
   BANKA" gibi uzun bir etiket telefonda iki satıra yayılıyor ve rakam
   gözden kaçıyordu. Bu düzende okunan şey RAKAM; adı sola, tutarı sağa
   alıp aynı hizada tutmak listeyi bir bakışta taranır yapıyor.          */
.tutar-liste { display: flex; flex-direction: column; }
.tutar-liste > div {
    display: flex; align-items: baseline; gap: 14px;
    padding: 11px 0; border-bottom: 1px solid var(--cizgi);
}
.tutar-liste > div:last-child { border-bottom: 0; }
.tutar-liste .ad { font-weight: 600; font-size: 14.5px; color: var(--metin); }
.tutar-liste .satir-alt { font-size: 12.5px; color: var(--metin-3); margin-top: 1px; }
.tutar-liste .tutar {
    margin-inline-start: auto; font-weight: 800; font-size: 15.5px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--metin);
}
.tutar-liste .tutar.olumlu  { color: var(--olumlu); }
.tutar-liste .tutar.olumsuz { color: var(--olumsuz); }
@media (min-width: 620px) {
    /* Geniş ekranda iki sütun; liste dikeyde gereksiz uzamasın. */
    .tutar-liste { display: grid; grid-template-columns: repeat(2, 1fr);
                   column-gap: 32px; }
}

/* ── Telefonda daralan içerik ──
   375 pikselde iki sütunlu KPI kartı ~150 piksel kalıyor; oraya
   "20.000,00 ₺" sığmıyordu ve tutar alt satıra kayıp kartı iki kat
   uzatıyordu. Etiket rozeti (.etiket) de satır kaplıyordu: masaüstünde
   hoş duran hap biçimi telefonda yerin yarısını yiyor.                */
@media (max-width: 560px) {
    .kpi { padding: 14px 14px 15px; }
    .kpi .etiket {
        background: transparent; padding: 0; color: var(--metin-3);
        font-size: 11px; letter-spacing: .05em;
    }
    .kpi .deger {
        font-size: 19px; margin: 5px 0 1px;
        white-space: nowrap;                 /* tutar bölünmesin */
    }
    .kpi .not, .kpi .meta { font-size: 12px; }
    .kpi-izgara { gap: 10px; }

    /* Bölüm başlıkları ve gövde payları */
    .blok-bas h2 { font-size: 16px; }
    .blok-ic { padding: 14px 16px; }
}

/* ══════════════════════════════════════════════
   Giriş sayfası — telefonda
   ══════════════════════════════════════════════
   Form sayfanın ortasında duruyordu ve üstünde logo, başlık, iki satır
   açıklama vardı. Klavye açılınca görünür alan yarıya iniyor; şifre
   kutusu ve "Giriş yap" düğmesi klavyenin altında kalıyordu. İş sayfayı
   okumak değil GİRMEK: form yukarı çekiliyor, açıklama altına iniyor.  */
@media (max-width: 700px) {
    /* Sayfa ortalanmak yerine ÜSTTEN başlar: klavye açılınca içerik
       yukarı sıkışmaz, form olduğu yerde kalır. */
    .giris-sayfa { align-content: start; padding: 14px 0 24px; }
    .giris-kutu { padding: 20px 18px 22px; }
    .giris-kutu h1 { font-size: 23px; margin: 0 0 5px; }
    .giris-kutu .alt-yazi { font-size: 13px; line-height: 1.45; margin: 0 0 14px; }
    .giris-kutu .alan { margin-bottom: 13px; }
    /* Kutunun içindeki logo, hemen altındaki "Üye Girişi" başlığıyla aynı
       şeyi söylüyor ve 46 piksel yiyor. Telefonda kimliği başlık taşır. */
    .giris-kutu > .logo { display: none; }
    /* DİL SEÇİCİ EN ALTA. Formun üstünde 50 piksel yer kaplıyordu; dil
       giriş yapmadan önce nadiren değiştirilir, düğme her zaman lazım. */
    .giris-sag { display: flex; flex-direction: column; }
    .giris-sag > .dil-secici { order: 9; margin-top: 16px; }
    .giris-alt { font-size: 12.5px; margin-top: 14px; }
}

/* ── Mobil kip ── */
@media (max-width: 860px) {
    .menu-dugme { display: inline-flex; }
    .alt-bant { display: block; }
    /* Üstteki yatay sekmeler ve üst çubuktaki dil düğmeleri artık
       panelde; ikisi de burada gizlenir. */
    nav.sekmeler { display: none; }
    .panel-ust .dil-secici, .panel-ust .btn-yan { display: none; }
    .panel-ust-ic { height: 58px; gap: 10px; }
    .panel-ust .logo { font-size: 15.5px; }
    /* İÇERİK İKİ BANT ARASINDA AKAR.
       Üst çubuk `position: sticky` idi; kâğıt üzerinde yapışık kalır ama
       adres çubuğunu gizleyip geri getiren mobil tarayıcılarda sıçrıyor
       ve kaydırma sırasında bir an kayboluyordu. `fixed` ile iki bant da
       yerinde duruyor, arasındaki alan kayıyor. Gövdeye üstten bandın
       yüksekliği kadar pay veriliyor — yoksa ilk başlık çubuğun altında
       kalır. */
    .panel-ust {
        position: fixed; top: 0; left: 0; right: 0;
        padding-top: env(safe-area-inset-top);
    }
    body { padding-top: calc(58px + env(safe-area-inset-top)); }
    /* Sabit bandın altında içerik kalmasın */
    main.kap { padding-bottom: calc(var(--alt-bant-y) + 26px) !important; }
    /* Sayfa içi bağlantılar sabit çubuğun altına gizlenmesin */
    :target { scroll-margin-top: calc(70px + env(safe-area-inset-top)); }
}

@media (min-width: 861px) {
    .yan-panel { display: none; }
}

/* Koyu tema kuralları portal.css'te `html.koyu-tema` sınıfına bağlandı;
   telefon karanlık modda olsa da portal açık kalıyor. Burada ayrıca bir
   şey yapmaya gerek yok. */

/* ══════════════════════════════════════════════
   Ödeme Yap
   ══════════════════════════════════════════════ */
/* Ana sayfadaki düğme: borç şeridinin hemen altında, tam genişlik.
   Şerit borcun AYRINTISINA gider, bu düğme ödemeye — ikisi ayrı iş. */
.odeme-dugme {
    display: block; text-align: center; margin: 0 0 18px;
    padding: 14px 18px; font-size: 15.5px;
}

.odeme-yontem {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.odeme-yontem a {
    flex: 1 1 140px; text-align: center;
    padding: 11px 14px; border-radius: 10px;
    border: 1px solid var(--cizgi); background: var(--zemin);
    color: var(--metin-2); font-weight: 600; font-size: 14.5px;
}
.odeme-yontem a[aria-selected="true"] {
    background: var(--marka); border-color: var(--marka); color: #fff;
}

/* Satır: etiket üstte, değer altta, kopyala sağda. Telefonda IBAN
   sığmadığı için değer kendi satırında ve kırılabilir. */
.odeme-satir {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--cizgi);
}
.odeme-satir:last-of-type { border-bottom: 0; }
.odeme-etiket {
    grid-column: 1 / -1; font-size: 12px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--metin-3);
}
.odeme-deger {
    font-size: 16px; font-weight: 600; color: var(--metin);
    word-break: break-word; font-variant-numeric: tabular-nums;
}
.kopya-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--cizgi); background: var(--zemin);
    color: var(--metin-2); font: 600 13px/1 inherit; font-family: inherit;
}
.kopya-btn svg { width: 16px; height: 16px; }
.kopya-btn:hover { border-color: var(--marka); color: var(--marka); }
.kopya-btn.tamam {
    border-color: var(--yesil, #0E9F6E); color: var(--yesil, #0E9F6E);
}

.odeme-yapim {
    margin-top: 16px; padding: 22px 18px; text-align: center;
    border: 1px dashed var(--cizgi); border-radius: 12px;
    background: var(--zemin-2);
}
.odeme-yapim-ikon { font-size: 26px; margin-bottom: 6px; }