/* ══════════════════════════════════════════════════════════════════════════
   Manay Cari — uygulama önizlemeleri

   Bu dosya SİTENİN tasarımını değiştirmez; yalnızca sayfaların içine konan
   uygulama örneklerini çizer. Renkler, yazı boyutları ve boşluklar uygulamanın
   kendi jetonlarından (src/ui/tema.ts) alınmıştır — mockup'ın gerçeğe benzemesi
   değil, birebir aynı olması amaçtır.

   ⛔ TELEFON ÇERÇEVESİ YOK, TÜM SAYFA YOK, SOLMA YOK (kullanıcı, 2026-09-03).
   Üç yol da denendi ve elendi:
     · çerçeveli telefon → sayfanın düz kart diline yabancı duruyordu,
     · çerçevesiz tam ekran + kenarlarda solma → ekran kesik ve soluk görünüyordu.
   Kalan yol: ekranın TAMAMI değil, o özelliği anlatan KÜÇÜK BİR PARÇASI, kendi
   sunum panelinin içinde. Panel `.onizleme`, içindekiler uygulamanın gerçek
   bileşenleri. Yeni bir bölüm eklerken bu kalıbı bozma.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --u-kart: #FFFFFF;
    --u-zemin: #F4F6F5;
    --u-zeminAlt: #F1F5F9;
    --u-cizgi: #DFE3E0;
    --u-metin: #0F172A;
    --u-ikincil: #64748B;
    --u-solgun: #94A3B8;
    --u-kenar: rgba(148, 163, 184, .30);
    --u-kenarTeal: rgba(0, 156, 166, .38);
    --u-alacak: #177245;
    --u-borc: #B3362E;
    --u-mavi: #378ADD;
    --u-premium: #8C7305;
    --u-premiumZemin: #FDF8E4;
    --u-teal: #009CA6;
    --u-tealKoyu: #007E86;
    --u-tealZemin: #E0F7F8;

    /* Uygulama içeriğinin GERÇEK genişliği (iPhone 17 mantıksal genişliği).
       Önizlemeler de telefon da bu ölçüyü kullanır; hiçbir yerde daraltılmaz. */
    --u-genislik: 393px;
}

/* ── Sunum paneli ─────────────────────────────────────────────────────────
   İçindekiler uygulamadan; panelin kendisi siteye ait. Aradaki ayrımın belli
   olması önemli: panel bir "vitrin", ekranın bir parçası değil. */
.onizleme {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: max-content;
    max-width: 100%;
    border: 1px solid rgba(0, 156, 166, .28);
    border-radius: 30px;
    background: linear-gradient(140deg, #DFF6F7 0%, #F3FBFB 55%, #FFFFFF 100%);
    padding: clamp(22px, 3vw, 34px);
    box-shadow: 0 40px 80px -50px rgba(15, 23, 42, .5);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--u-metin);
}

/* ⛔ GENİŞLİK DARALTILMAZ (kullanıcı, 2026-09-03: *"genişliği kesinlikle
   orjinal olacak"*). Kırpma DİKEYDİR: ekranın tamamı yerine birkaç satırı
   gösteririz, ama o satırlar telefondaki genişliğinde durur. Panelin kendisi
   içeriğe göre büyür (`width:max-content`); içerik panele göre küçülmez. */
.onizleme > *:not(.vurgu) { width: var(--u-genislik); max-width: 100%; }

/* ⚠️ Panel bir SÜTUN FLEX kutusu ve ızgara hücresinde geriliyor: içerik hücreden uzunsa
   çocuklar varsayılan `flex-shrink: 1` ile EZİLİYOR, `overflow:hidden` taşıyan liste de
   son satırını kırpıyordu (2026-09-12'de döviz bölümünde yakalandı). Panel kendi boyuna
   otursun, çocuklar küçülmesin. */
.onizleme { align-self: center; }
.onizleme > * { flex: none; }

/* Panelin üstündeki küçük künye — parçanın uygulamada nereden geldiğini söyler. */
.onizleme-etiket {
    margin: 0;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #0B5F66;
}

/* Kartlar panelin içinde tek başına durur: uygulamadaki yatay kenar boşluğu
   burada panelin dolgusuyla sağlanıyor, kartın kendi payı sıfırlanır. */
.onizleme .uKart { margin: 0; }

/* İkinci kart hafifçe kaydırılır — üst üste değil, arka arkaya duruyor hissi. */
.onizleme .kaydir { transform: translateX(20px); }

/* Beyaz liste kabı: uygulamada satırlar ekranın tamamına yayılır, panelde
   kendi köşesi olan bir yüzeye alınır. */
.uListe {
    border: 1px solid var(--u-cizgi);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 16px 32px -22px rgba(15, 23, 42, .4);
}

/* Ekranın dışına taşan vurgu rozeti — tek bir rakamı öne çıkarır. */
.vurgu {
    position: absolute;
    z-index: 2;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0 22px 44px -22px rgba(15, 23, 42, .45);
    white-space: nowrap;
}
.vurgu .ust { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; color: var(--u-solgun); }
.vurgu .buyuk {
    margin-top: 3px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.vurgu-sol { left: -34px; bottom: -22px; }
.vurgu-sag { right: -34px; top: -22px; }

/* ── Arama ve süzgeç bandı ────────────────────────────────────────────── */
/* ⚠️ `CarilerEkrani.tsx` → `aramaKutusu` + `arama`: 48dp yükseklik, 14dp yarıçap, 14dp yan
   dolgu, yazı 15/600. Mockup 13px/varsayılan ağırlıktaydı (kullanıcı bildirdi, 2026-09-13). */
.uArama {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    border: 1px solid var(--u-kenarTeal);
    border-radius: 14px;
    background: #fff;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--u-solgun);
}
.uBuyutec {
    position: relative;
    flex: none;
    width: 13px;
    height: 13px;
    border: 1.8px solid var(--u-solgun);
    border-radius: 50%;
}
.uBuyutec::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: -3px;
    width: 6px;
    height: 1.8px;
    background: var(--u-solgun);
    transform: rotate(45deg);
}
.uHaplar { display: flex; flex-wrap: wrap; gap: 7px; }
.uHap {
    display: flex;
    align-items: center;
    height: 32px;
    border: 1px solid var(--u-cizgi);
    padding: 0 13px;
    border-radius: 16px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    color: #0B5F66;
}
.uHap.on { border-color: transparent; background: var(--u-teal); color: #fff; }

/* ── Bantlar ve satırlar ──────────────────────────────────────────────── */
.uBant {
    background: #EDF1F0;
    padding: 6px 15px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--u-ikincil);
}
/* ⚠️ Ölçüler `ui/bilesenler.tsx` → `BantBaslik` ile BİREBİR: kap 14/10 dolgu, yazı 12.5/700
   (ls 0.5px), rozet 6px yarıçap + 8/3 dolgu + 11/700 (ls 0.2px). Eskiden yazı 10px'ti ve
   bantlar uygulamadakinden belirgin küçük duruyordu (kullanıcı bildirdi, 2026-09-13). */
.uBantTeal {
    display: flex;
    align-items: center;
    background: var(--u-tealZemin);
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--u-tealKoyu);
}
.uBantTeal .sag {
    margin-left: auto;
    border-radius: 6px;
    background: #fff;
    padding: 3px 8px;
    font-size: 11px;
    letter-spacing: .018em;
}
.uSatir {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--u-cizgi);
    background: #fff;
    padding: 12px 15px;
}
.uSatir.ilk { border-top: 0; }
/* ⚠️ İKİ AYRI biçim var, karıştırma:
   · Ekip üyesi (`EkipYonetimiEkrani.tsx` → `uyeAvatar`): 36dp KARE-yuvarlak, r12, yazı 13/800.
   · Cari satırı (`CarilerEkrani.tsx` → `avatar`): 36dp TAM DAİRE, r18, yazı 13/700.
   Mockup ikisini de kare çiziyordu; cari listelerinde `.daire` sınıfı eklenir. */
.uAvatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--u-tealZemin);
    font-size: 13px;
    font-weight: 800;
    color: var(--u-tealKoyu);
}
.uAvatar.daire { border-radius: 18px; font-weight: 700; }
.uOrta { flex: 1; min-width: 0; }
.uAd {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--u-metin);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uSag { text-align: right; }
.uTutar {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
/* ⛳ Yön etiketi tutara YAPIŞIK: 2px boşluk, ikisi tek blok gibi okunur. */
.uEtiketSag {
    display: block;
    margin-top: 1px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .038em;
    line-height: 1.2;
}

/* ── Kartlar ──────────────────────────────────────────────────────────── */
.uKart {
    border: 1px solid var(--u-kenarTeal);
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 16px 32px -22px rgba(15, 23, 42, .4);
}
.uKart.gri { border-color: var(--u-kenar); }
.uKartUst { display: flex; align-items: center; gap: 7px; }
.uKartEtiket {
    flex: 1;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--u-ikincil);
}
.uPencere {
    border-radius: 5px;
    background: var(--u-tealZemin);
    padding: 2.5px 7px;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--u-tealKoyu);
}
.uBilgi {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 11px;
    background: var(--u-zeminAlt);
    font-size: 12px;
    font-weight: 800;
    color: var(--u-ikincil);
}
.uAyrac { height: 1px; margin: 10px -12px 0; background: var(--u-cizgi); }
.uGovde { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.uGovdeSol { flex: 1; min-width: 0; }
.uManset {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.uMansetAlt {
    margin-top: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--u-solgun);
}

/* ── Halkalar ─────────────────────────────────────────────────────────────
   ⛳ Ortadaki yazı GERÇEKTEN ortalı: flex sütun + line-height 1. Izgara ve
   varsayılan satır yüksekliğiyle yazı bir-iki piksel yukarı kaçıyordu. */
.uHalka {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.uHalka::after { content: ""; position: absolute; border-radius: 50%; background: #fff; }
.uHalka.b { width: 74px; height: 74px; }
.uHalka.b::after { inset: 10px; }
.uHalka.k { width: 58px; height: 58px; }
.uHalka.k::after { inset: 8px; }
.uHalka > * { position: relative; z-index: 1; line-height: 1; }
.uHalkaD { font-weight: 800; font-variant-numeric: tabular-nums; }
.uHalka.b .uHalkaD { font-size: 17px; }
.uHalka.k .uHalkaD { font-size: 14px; }
.uHalkaN { margin-top: 3px; font-weight: 800; letter-spacing: .07em; color: var(--u-solgun); }
.uHalka.b .uHalkaN { font-size: 8px; }
.uHalka.k .uHalkaN { font-size: 7px; }

/* ── Kâr hesabı bloğu ─────────────────────────────────────────────────────
   ⛳ 2026-09-09'da satırlar GRİ KUTUDAN ÇIKTI, kartın kendi yüzeyine indi
   (`ui/genelDurumPaneli.tsx` → `s.hesap`). Ayraç kenardan kenara (`.uAyrac`),
   sonucun üstünde ince bir çizgi var. ⛔ − / = işaret sütunu YOK: uygulamada
   satır yalnız başlık + tutar. */
.uHesap { margin-top: 2px; }
.uHesapSatir { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.uHesapBas { flex: 1; font-size: 14px; font-weight: 600; color: var(--u-metin); }
.uHesapBas.sonuc { font-weight: 700; }
.uHesapTut { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.uHesapTut.sonuc { font-weight: 800; }
.uCizgi { height: 1px; background: var(--u-cizgi); }

/* Kart başlığındaki "düzenle" düğmesi — üç nokta (kart sırasını değiştirir). */
.uDuzenle { display: flex; gap: 2.5px; }
.uDuzenle i { width: 3px; height: 3px; border-radius: 2px; background: var(--u-ikincil); }

/* Kaydırmalı sayfaların nokta şeridi (kart içi). */
.uNoktalar { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 0 2px; }
.uNokta { width: 5px; height: 5px; border-radius: 3px; background: var(--u-cizgi); }
.uNokta.on { width: 14px; background: var(--u-tealKoyu); }

/* Buluşma şeridi: bölgenin bittiği yeri taşıyan 3dp çizgi. */
.uSerit { height: 3px; background: var(--u-teal); }

/* ── Belge kuru kartı (`ui/islemFormu.tsx` → `KurKarti`) ──────────────────
   ⛔ Rozette "TCMB" ya da "güncel kur" YAZMAZ, rakamın kendisi yazar.
   ⛔ Kur alanının altı çizilmez; alan kendi kenarlıklı kutusunda durur. */
.kur-kart { display: flex; flex-direction: column; gap: 9px; background: #fff; padding: 12px 16px; }
.kur-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kur-etiket { flex: 1; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: var(--u-solgun); }
.kur-rozet {
    border-radius: 999px;
    background: var(--u-tealZemin);
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--u-tealKoyu);
}
.kur-alan {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    border: 1px solid var(--u-kenar);
    border-radius: 12px;
    padding: 0 14px;
}
.kur-on { font-size: 14px; font-weight: 700; color: var(--u-metin); }
.kur-esit { font-size: 13px; font-weight: 600; color: var(--u-solgun); }
.kur-girdi { flex: 1; text-align: right; font-size: 19px; font-weight: 800; color: var(--u-metin); font-variant-numeric: tabular-nums; }
.kur-birim { font-size: 14px; font-weight: 700; color: var(--u-ikincil); }
.kur-kesik { height: 1px; background: repeating-linear-gradient(to right, var(--u-cizgi) 0 5px, transparent 5px 10px); }
.kur-alt { display: flex; align-items: center; justify-content: space-between; }
.kur-altE { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: var(--u-solgun); }
.kur-altD { font-size: 12.5px; font-weight: 800; color: var(--u-tealKoyu); }

/* Bant altındaki liste satırı (`genelDurumPaneli` → `KartSatiri`). */
.kb-satir { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #fff; }
.kb-baslik { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--u-metin); }
.kb-tutar { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kb-ok { font-size: 17px; line-height: 1; color: var(--u-solgun); }

/* ── Alt şeritler ─────────────────────────────────────────────────────── */
.uGriSerit {
    display: flex;
    margin-top: 10px;
    border-radius: 10px;
    background: var(--u-zeminAlt);
    overflow: hidden;
}
.uGriBolme {
    flex: 1;
    padding: 10px 2px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--u-ikincil);
}
.uGriAyrac { width: 1px; background: var(--u-cizgi); }
.uEtekIki { display: flex; margin-top: 10px; border-top: 1px solid var(--u-cizgi); padding-top: 10px; }
.uEtekH { flex: 1; }
.uEtekE { font-size: 9px; font-weight: 800; letter-spacing: .07em; color: var(--u-solgun); }
.uEtekD {
    display: block;
    margin-top: 3px;
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.uEtekAyrac { width: 1px; margin: 2px 12px; background: var(--u-cizgi); }

/* ── Rozetler ─────────────────────────────────────────────────────────── */
.uRozet {
    flex: none;
    border-radius: 20px;
    padding: 4px 9px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
}
.uRozet.sahip { background: var(--u-tealZemin); color: var(--u-tealKoyu); }
.uRozet.yonetici { background: var(--u-premiumZemin); color: var(--u-premium); }
.uRozet.personel { background: var(--u-zeminAlt); color: var(--u-ikincil); }
.uRozet.yesil { background: #E7F4ED; color: var(--u-alacak); }

/* ── Etiket çipleri ───────────────────────────────────────────────────── */
.uCipler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.uCip {
    border: 1px solid var(--u-cizgi);
    border-radius: 20px;
    background: var(--u-zeminAlt);
    padding: 6px 11px;
    font-size: 11px;
    font-weight: 700;
    color: var(--u-ikincil);
}
.uCip.on { border-color: transparent; background: var(--u-teal); color: #fff; }

/* ── Davet kodu ───────────────────────────────────────────────────────── */
.uKod {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .22em;
    color: var(--u-tealKoyu);
}

/* ══════════════════════════════════════════════════════════════════════════
   iPHONE 17 — YALNIZCA ANA SAYFA KAHRAMAN GÖRSELİ

   ⛔ Bu çerçeve başka hiçbir yerde kullanılmaz (kullanıcı, 2026-09-03:
   *"sadece ana sayfadaki özet ekranı bir iphone 17'de görünsün"*). Ayrıntı
   sayfasındaki bölümler `.onizleme` panelini kullanır.

   Ölçüler gerçek cihazın mantıksal ölçüleridir (393 × 852 pt). Küçültme
   `--olcek` ile GÖRSEL olarak yapılır; içerik hâlâ 393pt genişliğinde
   yazılıdır, yani uygulama yerleşimi telefondakiyle birebir aynı kalır.
   ══════════════════════════════════════════════════════════════════════════ */
.iphone-kap {
    --olcek: .74;
    position: relative;
    flex: none;
    width: calc(415px * var(--olcek));
    height: calc(874px * var(--olcek));
}

.iphone {
    position: absolute;
    top: 0;
    left: 0;
    width: 415px;
    height: 874px;
    padding: 11px;
    border-radius: 62px;
    /* Titanyum kasanın kenar parlaması — düz siyah dikdörtgen oyuncak duruyor. */
    background: linear-gradient(145deg, #5B5F63 0%, #2A2D30 18%, #1B1D1F 50%, #2A2D30 82%, #6A6E72 100%);
    box-shadow:
        0 50px 90px -46px rgba(15, 23, 42, .6),
        0 10px 28px -14px rgba(15, 23, 42, .35);
    transform: scale(var(--olcek));
    transform-origin: top left;
}

.iphone-ic {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 393px;
    height: 852px;
    border-radius: 51px;
    background: var(--u-zemin);
    overflow: hidden;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--u-metin);
}

/* Dynamic Island — çentik değil, ekranın içinde yüzen ada. */
.ada {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 30;
    width: 125px;
    height: 36px;
    border-radius: 20px;
    background: #000;
    transform: translateX(-50%);
}

/* Yan tuşlar: solda eylem tuşu + ses, sağda güç. */
.iphone::before,
.iphone::after {
    content: "";
    position: absolute;
    width: 3px;
    background: #6A6E72;
    border-radius: 3px;
}
.iphone::before {
    left: -3px;
    top: 168px;
    height: 32px;
    box-shadow: 0 62px 0 #6A6E72, 0 128px 0 #6A6E72;
}
.iphone::after {
    right: -3px;
    top: 232px;
    height: 96px;
}

/* Durum çubuğu — saat ve göstergeler, uygulamanın turkuaz başlığının üstünde. */
.durum {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 54px;
    padding: 0 30px 8px 32px;
    background: var(--u-teal);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
.durum .gostergeler { display: flex; align-items: center; gap: 6px; }

/* Ana sayfa çubuğu — ekranın en altındaki ince çizgi. */
.anaCubuk {
    position: absolute;
    bottom: 9px;
    left: 50%;
    z-index: 30;
    width: 140px;
    height: 5px;
    border-radius: 3px;
    background: rgba(15, 23, 42, .32);
    transform: translateX(-50%);
}

/* ══════════════════════════════════════════════════════════════════════════
   ÖZET EKRANI — `src/ekranlar/OzetEkrani.tsx` birebir

   ⚠️ Buradaki her ölçü kaynaktan alınmıştır (`st` StyleSheet'i ve `olcu`/`bosluk`
   jetonları). Uydurma yok: başlık 58dp, panel bindirmesi 20dp, panel köşesi 28dp,
   kart kenarı 14dp, hareket satırı 58dp. Değiştirmen gerekirse önce kaynağı oku.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⛔ TURKUAZ ÇATI — bu üç blok da turkuaz zemin İSTER (kullanıcı bildirdi 2026-09-13:
   "en üstteki mockup'ta üst header alan yok"). Zemin verilmediğinde başlığın beyaz yazısı,
   yarı saydam beyaz daireleri ve mint senkron kapsülü açık gri sayfa zemininin üstüne düşüyor
   ve GÖRÜNMEZ oluyor; ekranın turkuaz çatısı yokmuş gibi duruyor. Uygulamada karşılığı
   `OzetEkrani.tsx` → `tealAlan` (`disKapsayici` kökü de turkuaz). */
.oz-baslikBar,
.oz-senkron,
.oz-tealEtek { background: var(--u-teal); }

.oz-baslikBar { display: flex; align-items: center; height: 58px; padding: 0 16px; }
.oz-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; }
.oz-marka { flex: 1; margin-left: 11px; }
.oz-markaAd { font-size: 16px; font-weight: 700; line-height: 18px; color: #fff; }
.oz-markaAlt { font-size: 11px; font-weight: 700; line-height: 13px; margin-top: 1px; color: rgba(255, 255, 255, .85); }
.oz-daire {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .16);
}
.oz-daire + .oz-daire { margin-left: 10px; }
.oz-rozet {
    position: absolute;
    top: -2px;
    right: -2px;
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border-radius: 8.5px;
    background: #E24B4A;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
}

/* Senkron rozeti — turkuaz başlığın üstünde durduğu için renkleri sabittir. */
.oz-senkron { display: flex; align-items: center; justify-content: center; height: 22px; }
.oz-senkronKapsul {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 18px;
    padding: 0 9px;
    border-radius: 9px;
    background: rgba(143, 227, 194, .28);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    color: #EAFBF3;
}
.oz-senkronNokta { width: 6px; height: 6px; border-radius: 3px; background: #8FE3C2; }

.oz-tealEtek { height: 20px; }
/* ⛳ Panel ekranın DİBİNE kadar iner ve son blok kalan boşluğu doldurur (kullanıcı, 2026-09-13:
   "son hareketlerdeki satırları sayfa alt sınırına kadar oldur"). Uygulamada karşılığı
   `OzetEkrani.tsx` → `panel: {flex:1}` + `blokListe: {flex:1}`: satırlar bitince altı beyaz kalır,
   gri sayfa zemini görünmez. */
.oz-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: -20px;
    border-radius: 28px 28px 0 0;
    background: var(--u-zemin);
    overflow: hidden;
}
.oz-panel > .oz-blok:last-child { flex: 1; }

.oz-bolge { background: var(--u-tealZemin); padding: 14px 0 12px; }
.oz-kart {
    margin: 0 14px;
    border: 1px solid var(--u-kenarTeal);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}
.oz-kart.gri { border-color: var(--u-kenar); }
.oz-kart.aralik { margin-top: 12px; }

.oz-kartBasligi { display: flex; align-items: center; padding: 12px 14px 10px; }
.oz-kartBaslikYazi { flex: 1; font-size: 11px; font-weight: 800; letter-spacing: .055em; color: var(--u-ikincil); }
.oz-eylemPili {
    border: .5px solid var(--u-kenarTeal);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--u-tealKoyu);
}
.oz-ayrac { height: 1px; background: var(--u-cizgi); }

/* Rakam kutusu: solda etiket + tutar + alt bilgi, sağda görsel. */
.oz-kutu { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.oz-kutuSol { flex: 1; min-width: 0; }
.oz-kutuEtiket { font-size: 9px; font-weight: 800; letter-spacing: .055em; color: var(--u-solgun); }
.oz-kutuDeger {
    margin-top: 4px;
    font-size: 20.5px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--u-metin);
    font-variant-numeric: tabular-nums;
}
/* ⛔ `.oz-kutuAlt` (alt yazı) ve `.oz-cubukKap` (7 günlük çubuk) 2026-09-12'de KALDIRILDI:
   uygulamada dört ölçümün de görseli HALKA ve kutuda üçüncü satır yok
   (`OzetEkrani.tsx` → `RakamKutusu` başlığı). Geri ekleme. */

/* 38dp halka, 5dp kalınlık. */
.oz-halka {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
}
.oz-halka::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.oz-halkaYazi { position: relative; z-index: 1; font-size: 9.5px; font-weight: 800; line-height: 1; }
/* Uyarı satırlarında ortadaki yazı bir RAKAM (ayın günü · kalan miktar), yüzde değil: bir punto iri. */
.oz-halkaYazi.iri { font-size: 12px; }

/* Kaydırmalı sayfaların nokta şeridi. */
.oz-noktaSeridi { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 0 9px; background: #fff; }
.oz-sNokta { width: 5px; height: 5px; border-radius: 3px; background: var(--u-cizgi); }
.oz-sNokta.on { background: var(--u-tealKoyu); }

.oz-serit { height: 3px; background: var(--u-teal); }

/* Turkuaz bant (`ui/bilesenler.tsx` → `BantBaslik`): Özet'te HATIRLATMA ve SON HAREKETLER
   başlıkları artık çerçeveli kart değil, kenardan kenara bant + düz beyaz blok.
   ⛔ Bant ile blok arasında boşluk YOK — yüzey satır → bant → satır diye kesintisiz akar. */
.oz-bant { display: flex; align-items: center; gap: 8px; background: var(--u-tealZemin); padding: 10px 14px; }
.oz-bantYazi { flex: 1; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--u-tealKoyu); }
.oz-bantRozet {
    border-radius: 6px;
    background: #fff;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .015em;
    color: var(--u-tealKoyu);
}
.oz-blok { background: #fff; }

/* Halkalı uyarı satırı: en yakın not ve dikkat isteyen ürün. İkisi de hareket satırıyla
   AYNI 58dp ritminde (takvim yaprağı ve amber şerit 2026-09-09'da kalktı). */
.oz-uyari { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 14px; background: #fff; }
.oz-uyariOrta { flex: 1; min-width: 0; }
.oz-uyariBaslik { font-size: 14px; font-weight: 600; color: var(--u-metin); }
.oz-uyariAlt { margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--u-solgun); }
.oz-uyariSayac { font-size: 11px; font-weight: 700; color: var(--u-solgun); }
.oz-uyariOk { font-size: 17px; color: var(--u-solgun); }

/* Son hareketler satırı — sabit 58dp. */
.oz-satir { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 16px; background: #fff; }
.oz-satirAyrac { height: 1px; background: var(--u-cizgi); }
.oz-satirSol { flex: 1; margin-right: 8px; min-width: 0; }
.oz-satirBaslik { font-size: 14px; font-weight: 600; color: var(--u-metin); }
.oz-satirAlt { margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--u-solgun); }
.oz-satirSag { display: flex; flex-direction: column; align-items: flex-end; }
.oz-satirTutar { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.oz-satirZaman { margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--u-solgun); }
.oz-satirEtiket { font-weight: 700; letter-spacing: .02em; }

@media (max-width: 1180px) { .iphone-kap { --olcek: .64; } }
@media (max-width: 520px) { .iphone-kap { --olcek: .56; } }

/* ── Dar ekran ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .vurgu-sol { left: -10px; bottom: -18px; }
    .vurgu-sag { right: -10px; top: -18px; }
    .vurgu { padding: 10px 13px; }
    .vurgu .buyuk { font-size: 18px; }
    .onizleme .kaydir { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HATIRLATMA SATIRI — `src/ekranlar/NotHatirlatmalariEkrani.tsx`

   ⚠️ Vade tonu KODDAN geliyor: gecikti = kırmızı, bugün = TURKUAZ, ileri =
   nötr gri (`ui/tema.ts` → `vadeTonu`). Kaynaktaki eski yorum "bugün amber"
   diyor ama kod turkuaz diyor; kod kazanır.
   ══════════════════════════════════════════════════════════════════════════ */
.ht-satir { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: #fff; }
.ht-sol { flex: 1; min-width: 0; }
.ht-cariDugme { display: flex; align-items: center; gap: 3px; }
.ht-cariAdi { font-size: 14.5px; font-weight: 600; color: var(--u-metin); }
.ht-cariOk { font-size: 15px; line-height: 18px; color: var(--u-solgun); }
.ht-not { margin-top: 3px; font-size: 12.5px; line-height: 17px; font-weight: 500; color: var(--u-ikincil); }
.ht-tarih { margin-top: 5px; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--u-solgun); }
.ht-rozet { flex: none; border-radius: 50px; padding: 4px 10px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; }
.ht-kalem {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--u-tealZemin);
}

/* Bölüm bandı (`ui/bilesenler.tsx` → BantBaslik): turkuaz ya da tehlike kırmızısı. */
.ht-bant {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: var(--u-tealZemin);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--u-tealKoyu);
}
.ht-bant.tehlike { background: #F9ECEA; color: var(--u-borc); }
.ht-bant .sag {
    margin-left: auto;
    border-radius: 6px;
    background: #fff;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════════════════
   KASA — `src/ekranlar/KasaEkrani.tsx`
   ══════════════════════════════════════════════════════════════════════════ */
.ks-kartUst { display: flex; align-items: center; gap: 8px; }
.ks-kartEtiket { flex: 1; font-size: 10.5px; font-weight: 800; letter-spacing: .057em; color: var(--u-ikincil); }
.ks-pencere {
    border-radius: 5px;
    background: var(--u-zeminAlt);
    padding: 2.5px 6px;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--u-ikincil);
}
.ks-govde { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.ks-toplam { flex: 1; min-width: 0; font-size: 26px; font-weight: 800; letter-spacing: -.023em; font-variant-numeric: tabular-nums; }

/* Karşıt yaylı 44dp halka: yeşil giren, kırmızı çıkan, ortada günün NET etkisi.
   ⛔ Karşıt yay yalnız birbirinin RAKİBİ olan iki büyüklükte kullanılır. */
.ks-halka {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.ks-halka::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.ks-halka > * { position: relative; z-index: 1; line-height: 1; }
.ks-halkaDeger { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ks-halkaAd { margin-top: 1px; font-size: 6.5px; font-weight: 800; letter-spacing: .04em; color: var(--u-solgun); }

/* İkili etek (`ui/bilesenler.tsx` → IkiliEtek) */
.ks-etekCizgi { height: 1px; margin-top: 10px; background: var(--u-cizgi); }
.ks-etek { display: flex; margin-top: 10px; }
.ks-etekH { flex: 1; min-width: 0; }
.ks-etekE { font-size: 9px; font-weight: 800; letter-spacing: .07em; color: var(--u-solgun); }
.ks-etekD { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ks-etekAyrac { width: 1px; margin: 2px 12px; background: var(--u-cizgi); }

.ks-satir { display: flex; align-items: center; gap: 11px; padding: 10px 14px; background: #fff; }
.ks-satirIkon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 18px; background: var(--u-tealZemin); }
.ks-satirSol { flex: 1; min-width: 0; }
.ks-satirAd { font-size: 14.5px; font-weight: 600; color: var(--u-metin); }
.ks-varsayilan { margin-top: 1px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--u-tealKoyu); }
.ks-satirBakiye { font-size: 15px; font-weight: 700; letter-spacing: -.013em; font-variant-numeric: tabular-nums; }
.ks-satirOk { margin-left: 8px; font-size: 18px; color: var(--u-solgun); }

/* ══════════════════════════════════════════════════════════════════════════
   MALİYET SEKMESİ VE KÂRLILIK — `src/ekranlar/UrunDetayEkrani.tsx`
   ══════════════════════════════════════════════════════════════════════════ */
.mv-bant { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--u-tealZemin); }
.mv-segment { flex: 1; display: flex; gap: 2px; border-radius: 10px; background: #fff; padding: 2.5px; }
.mv-segHap {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 9px 0;
    border-radius: 8px;
    font-size: 10px;
    line-height: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--u-solgun);
}
.mv-segHap.on { background: var(--u-teal); color: #fff; }

/* ⚠️ Hap SABİT 104dp: pasifken ikon kaybolduğu için KAYITLI↔MALİYET geçişinde
   bütün satır oynuyordu (kullanıcı, 2026-09-02). */
.mv-kdvHap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: none;
    width: 104px;
    padding: 11.5px 0;
    border-radius: 10px;
    background: #fff;
    font-size: 10.5px;
    line-height: 13px;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--u-tealKoyu);
}
/* ⚠️ MALİYET sekmesinde hap GİZLENMEZ, dokunulamaz gri etikete döner. */
.mv-kdvHap.pasif { opacity: .55; color: var(--u-solgun); }
/* Pasifken ikonun YERİ boş kutuyla korunur — kaybolursa hap yeniden oynar. */
.mv-kdvYuva { width: 12px; height: 12px; }

.mv-govde { padding: 10px 14px 12px; background: #fff; }
.mv-satir { display: flex; align-items: stretch; margin-top: 4px; }
.mv-kolon { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 0 4px; min-width: 0; }
.mv-ikonKutu { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; }
.mv-yazi { flex: 1; min-width: 0; }
.mv-ayrac { width: 1px; margin: 8px 10px; background: var(--u-cizgi); }
.mv-etiket { display: flex; align-items: center; gap: 6px; min-height: 19px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--u-solgun); }
.mv-bilgi { display: grid; place-items: center; flex: none; width: 19px; height: 19px; border-radius: 999px; background: var(--u-zeminAlt); font-size: 11px; font-weight: 800; color: var(--u-ikincil); }
.mv-deger { margin-top: 2px; font-size: 16px; font-weight: 700; letter-spacing: -.013em; font-variant-numeric: tabular-nums; }

/* 36dp kâr marjı halkası — kalınlık 5. */
.mv-halka { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; }
.mv-halka::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   BELGELER — fiş `src/core/fisHtml.ts` · ekstre `src/core/ekstreHtml.ts`

   ⚠️ Belgeler kâğıda basılıyor: renkleri tema çiftlerinden GELMEZ, her zaman
   açık tondadır. Buradaki değerler iki üreteçteki `RENK` sabitlerinin aynısı.
   ⚠️ Yazı tipi sistem yığını — PDF'i WebKit basıyor ve Inter orada yok.
   ⚠️ Ölçüler gerçek sayfa ölçüleri: fiş 320pt, hesap özeti 400pt.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⛳ İKİ BELGE YAN YANA (kullanıcı, 2026-09-13: "bir tablo içinde ikisini de yarım yarım ver").
   Eski hâl alt çapraz binen iki sayfaydı; bölüm boyunca uzayıp yer kaplıyordu.
   ⛔ Hücre genişliği belgeyi DARALTMAZ — sayfa kendi pt ölçüsünde kalır, sığmayan sahnenin
   tamamı `sigdir()` ile orantılı küçülür (gerekçe: dosya sonundaki önizleme kuralı). */
.belgeSahne { display: grid; grid-template-columns: auto auto; gap: 18px; align-items: start; }
.belgeHucre { border: 1px solid var(--u-cizgi); background: #fff; }
.belgeHucreBaslik {
    border-bottom: 1px solid var(--u-cizgi);
    background: var(--u-tealZemin);
    padding: 7px 12px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--u-tealKoyu);
}
/* Kırpma YALNIZ dikey: belgenin başı görünür, kuyruğu kesilir. */
.belgeKirp { max-height: 520px; overflow: hidden; }
/* Her belgenin KENDİ işini anlatan tek cümle (kullanıcı, 2026-09-13: *"fiş ekstre arasına
   ayrı ayrı özellik anlatan yazı koysan daha iyi olur"*). Kırpmanın hemen altında durur;
   sert kesim böylece "bitmedi" değil "burada anlatılan şu" diye okunur. */
.belgeHucreAlt {
    margin: 0;
    border-top: 1px solid var(--u-cizgi);
    padding: 10px 12px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--u-ikincil);
}
.belgeSahne .ekstre,
.belgeSahne .fis { margin: 0; box-shadow: none; }
/* ⛔ Telefonda İKİ SORUN birden vardı (kullanıcı bildirdi, 2026-09-13: *"hesap özeti ve fiş
   tasarımı alt alta binmiş"*):
     1. Tek sütunlu ızgarada sütun genişliği EN GENİŞ belgeye (400pt ekstre) göre oluşuyor,
        hücreler de varsayılan olarak geriliyordu: 320pt'lik fiş 400pt'lik kutunun içinde solda
        kalıp sağında ölü beyaz bırakıyordu.
     2. 520px kırpma telefonda ekranın tamamını yiyordu; iki belge arka arkaya bitmek bilmiyordu.
   Çözüm: hücre kendi belgesinin genişliğini alır (`width: max-content`, ızgara ortalar) ve
   kırpma kısalır. ⛔ Belge yine DARALTILMAZ; sahnenin tamamı `sigdir()` ile ölçeklenir. */
@media (max-width: 700px) {
    .belgeSahne { grid-template-columns: auto; justify-content: center; justify-items: center; }
    .belgeHucre { width: max-content; }
    .belgeKirp { max-height: 400px; }
}

/* ── Fiş kâğıdı: dişli kenarlar DIŞA bakar ── */
.fis {
    width: 320px;
    max-width: 100%;
    background: #E7EAEC;
    font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #21324E;
    filter: drop-shadow(0 26px 44px rgba(15, 23, 42, .34));
}
.fis-disUst,
.fis-disAlt { height: 7px; background-repeat: repeat-x; }
.fis-kagit { background: #fff; padding: 14px 0 16px; }
.fis-isletme { padding: 0 24px; font-size: 19px; font-weight: 800; text-align: center; }
.fis-belgeBaslik { margin-top: 3px; font-size: 13px; font-weight: 800; letter-spacing: 2px; color: #6B7688; text-align: center; }
.fis-tarih { margin-top: 3px; font-size: 15px; font-weight: 800; letter-spacing: .5px; text-align: center; }
.fis-kesikPad { padding: 8px 24px; }
.fis-kesik { height: 0; border-top: 1px dashed #B9C0CC; }
.fis-ince { height: 0; margin: 0 24px; border-top: 1px dashed #E2E6EC; }
.fis-cari { padding: 0 24px; font-size: 15px; font-weight: 800; letter-spacing: .4px; color: #6B7688; }
.fis-kalem { display: flex; justify-content: space-between; padding: 7px 24px; }
.fis-kalemSol { padding-right: 14px; }
.fis-kalemSag { text-align: right; white-space: nowrap; }
.fis-kalemAd { font-size: 17px; font-weight: 600; }
.fis-kalemDetay { margin-top: 2px; font-size: 14px; font-weight: 700; letter-spacing: .2px; color: #4C5A72; }
.fis-kalemTutar { font-size: 17px; font-weight: 800; }
.fis-kalemTur { margin-top: 2px; font-size: 14px; font-weight: 800; letter-spacing: .3px; }
.fis-serit { background: #F4F6F5; }
.fis-serit.bosluk { margin-top: 13px; }
.fis-seritSatir { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; }
/* ⛳ Tutar asla sarmaz, esneyen taraf etiket — gerekcesi core/fisHtml.ts. */
.fis-seritEtiket { flex: 1; min-width: 0; padding-right: 12px; font-size: 15px; font-weight: 800; letter-spacing: .4px; }
.fis-seritTutar { flex: none; white-space: nowrap; font-size: 19px; font-weight: 800; }
.fis-gunSonuEtiket { flex: 1; min-width: 0; padding-right: 12px; font-size: 13px; font-weight: 800; letter-spacing: .4px; color: #6B7688; }
.fis-gunSonuTutar { flex: none; white-space: nowrap; font-size: 17px; font-weight: 800; }

/* ── Hesap özeti kâğıdı ── */
/* ⛳ 2026-09-12: belge `HesapOzetiEkrani.tsx`ın bugünkü hâline eşitlendi.
   Değişenler: antet TURKUAZ zeminli oldu · kimlik satırı baş harf dairesiyle geldi ·
   özet hücreleri kutu değil ÜSTTEN RENKLİ ÇUBUK · sütunlar İKİYE indi (BAKİYE sütunu
   kalktı, bakiye artık GÜN SONU satırında) · gün bandı kenardan kenara · açılış devri
   kendi tarihli bandında · kapanış bloğu durumun rengini taşıyor.
   ⛔ "BAKİYE" sütununu geri ekleme: uygulamada tutar kesiliyordu, gün bazlı düzene geçildi. */
.ekstre {
    position: relative;
    z-index: 1;
    width: 400px;
    max-width: 100%;
    background: #fff;
    font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #0F172A;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .45);
}
.ek-antet { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; background: #009CA6; padding: 14px 16px; }
.ek-sirket { font-size: 14.5px; font-weight: 700; letter-spacing: .2px; color: #fff; }
.ek-antetAlt { margin-top: 3px; font-size: 10.5px; line-height: 15px; color: rgba(255, 255, 255, .82); }
.ek-belgeAd { font-size: 10px; font-weight: 700; letter-spacing: .8px; color: rgba(255, 255, 255, .85); text-align: right; }
.ek-belgeTarih { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #fff; text-align: right; }
.ek-kimlik { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #DFE3E0; }
.ek-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 19px; background: #E0F7F8; font-size: 12px; font-weight: 700; color: #007E86; }
.ek-kimlikOrta { flex: 1; min-width: 0; }
.ek-cariAd { font-size: 15px; font-weight: 700; }
.ek-cariAlt { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .5px; color: #94A3B8; }
.ek-rozet { flex: none; border-radius: 50px; border: 1px solid; padding: 5px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; }
/* Hücre bir KUTU değil: üstünde 2px'lik renkli çubuk var, renk rakamın yönünü söyler. */
.ek-ozet { display: flex; gap: 8px; padding: 12px 18px 2px; }
.ek-hucre { flex: 1; min-width: 0; border-top: 2px solid #DFE3E0; padding: 8px 0 2px; }
.ek-he { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; color: #94A3B8; }
.ek-hd { margin-top: 3px; font-size: 13px; font-weight: 800; }
/* ⚠️ Sütun genişliği satırdaki .ek-islem ile AYNI olmak zorunda. */
.ek-sutunlar { display: flex; gap: 10px; padding: 10px 18px 7px; border-bottom: 1px solid #DFE3E0; font-size: 9.5px; font-weight: 700; letter-spacing: .5px; color: #94A3B8; }
.ek-sutunlar .c1 { flex: 1; }
.ek-sutunlar .c2 { width: 118px; text-align: right; }
.ek-gun { background: #E0F7F8; padding: 8px 18px; color: #007E86; font-size: 11px; line-height: 15px; font-weight: 800; letter-spacing: .4px; }
.ek-gunEk { color: #4FA8AE; }
.ek-satir { display: flex; gap: 10px; align-items: center; padding: 11px 18px 7px; }
.ek-satir.cizgili { border-top: 1px solid #DFE3E0; }
.ek-sol { flex: 1; min-width: 0; }
.ek-sb { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ek-sd { margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: #94A3B8; }
.ek-islem { width: 118px; text-align: right; white-space: nowrap; }
.ek-st { font-size: 13.5px; font-weight: 700; }
.ek-su { margin-top: 4px; font-size: 10.5px; font-weight: 700; color: #94A3B8; }
/* Günün son bakiyesi: bandın sağında değil, günün ALTINDA kendi satırında (mockup B1). */
.ek-gunSonu { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 18px 9px; border-top: 1px solid #DFE3E0; }
.ek-gunSonuEt { font-size: 9px; font-weight: 800; letter-spacing: .6px; color: #94A3B8; }
.ek-gunSonuTutar { white-space: nowrap; font-size: 12.5px; font-weight: 800; color: #334155; }
.ek-kapanis { margin-top: 2px; border-top: 1px solid; padding: 15px 18px; }
.ek-kapanisSatir { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ek-kapanisEt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; }
.ek-kapanisTutar { flex: none; white-space: nowrap; font-size: 20px; font-weight: 800; }
/* ⛳ KALIN: belgenin sonucu bu cümle. */
.ek-kapanisCumle { margin-top: 8px; font-size: 11.5px; font-weight: 700; line-height: 17px; }
.ek-son { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 18px 0; font-size: 9.5px; font-weight: 700; letter-spacing: .5px; color: #94A3B8; }
.ek-sonCizgi { width: 34px; height: 1px; background: #DFE3E0; }

.fis-disUst { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><polygon points='0,7 5.5,0 11,7' fill='%23ffffff'/></svg>"); background-position: bottom; }
.fis-disAlt { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><polygon points='0,0 5.5,7 11,0' fill='%23ffffff'/></svg>"); background-position: top; }