/* ============================================================
   Sadakatim mobil uygulama (PWA).

   Sinif onegi "mob-" dir. ⚠️ panel.css BURAYA HIC YUKLENMEZ: mobil ekranin
   panelle ortak tek bir bileseni yok (tablo, modal, sol menu, sayfalama) ve
   3200 satirlik bir dosyayi telefona indirmenin karsiligi olmazdi. Paylasilan
   tek sey telefon maskesi betigi.

   Olculer mockup'a gore: 390 px genislikteki bir telefon ekrani referans.
   ============================================================ */

:root {
    --mob-lacivert: #0b3fa8;
    --mob-mavi: #1668e3;
    --mob-acik-mavi: #2f8bff;
    --mob-camgobegi: #35e0d8;
    --mob-yesil: #10b981;
    --mob-metin: #0f2544;
    --mob-soluk: #6b7f9e;
    --mob-cizgi: #e3eaf4;
    --mob-zemin: #f4f7fc;
}

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

/* ⚠️ BU KURAL SART ve KALDIRILMAMALIDIR (13 Eylul 2026'da eklendi).
   Tarayicinin kendi [hidden] kurali yalnizca "display: none" der ve sinifla
   tanimli bir "display: grid/flex" onu EZER: oge "gizli" sayildigi halde
   ekranda kalir. QR ekranindaki konum izni karti (.qr-izin, display: grid)
   tam olarak boyle cikti — JS hidden yapiyordu, kart yine de gorunuyordu
   ve izni vermis kullanici "Konum izni gerekiyor" okuyordu. panel.css'in
   basindaki kuralin aynisi; mobil-qr.css ve asagidaki yorumlar bu kurala
   dayanir ama o gune kadar kural gercekte YOKTU. */
[hidden] {
    display: none !important;
}

.mob-body {
    margin: 0;
    background: var(--mob-zemin);
    color: var(--mob-metin);
    /* ⚠️ login-fonts.css PLUS JAKARTA SANS yukluyor (400-800). Burada
       "Inter" yaziyordu ve Inter hicbir yerden gelmiyordu: tarayici sessizce
       sistem fontuna dusuyor, yani INDIRILEN YAZI TIPI HIC KULLANILMIYORDU.
       Mockup'in tipografisi Plus Jakarta Sans. */
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Giris ekrani mavi zeminle baslar: beyaz kart yukari tasarken altta
   kalan alan da mavi gorunmeli. */
.mob-body-giris {
    background: var(--mob-lacivert);
}

/* ============================================================
   UST MAVI ALAN
   ============================================================ */
.mob-hero {
    position: relative;
    overflow: hidden;
    /* Alt dolgu 46 -> 62: mockup'ta beyaz kart ekranin 251. pikselinde
       basliyor, olculdugunde bizde 226'da basliyordu. */
    padding: calc(env(safe-area-inset-top) + 68px) 28px 38px;
    background: linear-gradient(160deg, #1a5fd0 0%, var(--mob-lacivert) 55%, #072f86 100%);
    color: #fff;
}

/* ⚠️ Amblem ve kelime logosu BEYAZLATILIR. Dosyalar mavi; olduklari gibi
   konsalardi mavi zeminde okunmazlardi. brightness(0) once tamamen siyaha
   cevirir, invert(1) beyaza — seffaflik korunur. */
.mob-hero-mark,
.mob-hero-word {
    filter: brightness(0) invert(1);
}

/*
   Amblem sag tarafta, BUYUK ve OKUNUR.

   ⚠️ opacity .22 / 168 px idi ve mockup'a gore fazla SOLUK ve KUCUKTU;
   mockup'ta amblem hero'nun sag yarisini kapliyor ve icindeki figur net
   secilebiliyor.

   ⚠️ brightness(0) invert(1) kalp seklini BEYAZ yapar; icindeki figur
   PNG'de saydam oldugu icin oradan mavi zemin gorunur — yani beyaz kalp +
   mavi figur, tam olarak mockup'taki gorunum. Beyazlatma kaldirilsaydi
   mavi zemine mavi bir kalp konmus olurdu.

   drop-shadow parlamayi verir; box-shadow KULLANILAMAZ cunku o, goruntunun
   seffaf olmayan sekline degil dikdortgen kutusuna golge atardi.
*/
.mob-hero-mark {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 58px);
    right: 26px;
    width: 132px;
    height: auto;
    opacity: .58;
    filter: brightness(0) invert(1) drop-shadow(0 0 22px rgba(150, 215, 255, .8));
    pointer-events: none;
}

/*
   Amblemin arkasindaki YORUNGE HALKASI (mockup'ta amblemi capraz kesen ince
   elips).

   ⚠️ Ayri bir gorsel degil, dondurulmus bir elips cerceve: tek bir <span> ve
   iki satir CSS ile ayni sonuc; ek bir ag istegi yok (ikonlardaki "satir ici
   SVG" kararinin kardesi).
*/
.mob-hero-ring {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 80px);
    right: 6px;
    width: 168px;
    height: 98px;
    border: 2px solid rgba(160, 220, 255, .28);
    border-radius: 50%;
    transform: rotate(-24deg);
    pointer-events: none;
}

/* ⚠️ Yalnizca YUKSEKLIK sabit, genislik auto: gorsel 500x155 ve ikisi de
   sabitlenseydi ezilirdi (sidebar markasindaki kuralin aynisi). */
.mob-hero-word {
    position: relative;
    display: block;
    /* Mockup'ta kelime logosu ekran genisliginin ~%48'i; 500x155 oraniyla
       (3,23) bu ~56 px yukseklik demek. 44 px'te fazla kucuk kaliyordu. */
    height: 57px;
    width: auto;
}

.mob-hero-title {
    position: relative;
    margin: 38px 0 0;
    /*
       ⚠️ 20px/600 KULLANICININ KARARIDIR (9 Eylul 2026) ve mockup'tan
       BILEREK sapar; degistirmeden once sor.

       Mockup'taki basligin genisligi goruntuden olculdu: 393 px ekranda
       229 px ve cok kalin — karsiligi 23px/800 idi. Kullanici daha kucuk
       ve ince duran 20px/600'u tercih etti; ekranin geri kalani mockup'la
       birebir hizali kaldi.
    */
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
}

    .mob-hero-title span {
        color: var(--mob-camgobegi);
    }

.mob-hero-sub {
    position: relative;
    margin: 8px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .78);
}

/* Suslemeler: kureler ve parillar. Salt gorsel, tiklanamaz. */
.mob-hero-orb,
.mob-hero-spark {
    position: absolute;
    pointer-events: none;
}

/*
   ⚠️ Kureler mockup'ta SOLUK BIR SIS DEGIL, parlak kucuk KURELERDIR: ust
   solda bir isik noktasi olan dolu daireler. Onceki radyal gradyan %70'te
   tamamen saydama gidiyordu ve kureler mavi zeminde kayboluyordu.
*/
.mob-hero-orb {
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85) 0 8%,
                        rgba(125, 205, 255, .85) 30%, rgba(37, 120, 225, .9) 78%,
                        rgba(30, 100, 205, .85) 100%);
    box-shadow: 0 0 14px rgba(120, 200, 255, .45);
}

    /* Konumlar mockup goruntusunden olculdu (393 px genislikte). */
    .mob-hero-orb.is-1 {
        top: 47px;
        right: 121px;
        width: 30px;
        height: 30px;
    }

    .mob-hero-orb.is-2 {
        top: 166px;
        right: 16px;
        width: 26px;
        height: 26px;
    }

    .mob-hero-orb.is-3 {
        top: 104px;
        right: 86px;
        width: 13px;
        height: 13px;
    }

/*
   Parilti: DORT UCLU YILDIZ.

   ⚠️ Onceki uygulama konik gradyan + radyal maske ile kuruluydu ve ekranda
   YILDIZ DEGIL ✕ (carpi) olarak ciziliyordu — tarayicidan gorulup
   duzeltildi (9 Eylul 2026). Konik gradyanin dilim sinirlari keskin oldugu
   icin uclar sivrilmiyor, dort kalin kol cikiyordu.

   clip-path ile govde dogrudan tanimlanir: dort uc ve aralarinda ice cokuk
   dort omuz. Tek oge, ek ag istegi yok (satir ici SVG kuralinin kardesi).
*/
.mob-hero-spark {
    background: #fff;
    clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
    filter: drop-shadow(0 0 4px rgba(190, 230, 255, .9));
}

    .mob-hero-spark.is-1 {
        top: 62px;
        right: 33px;
        width: 22px;
        height: 22px;
    }

    .mob-hero-spark.is-2 {
        top: 46px;
        right: 82px;
        width: 14px;
        height: 14px;
        opacity: .85;
    }

    .mob-hero-spark.is-3 {
        top: 104px;
        right: 26px;
        width: 11px;
        height: 11px;
        opacity: .7;
    }

/* ============================================================
   BEYAZ KART
   ⚠️ Mavi alanin uzerine BINER (negatif margin): mockup'ta kart hero'nun
   icine giriyor. Sadece alt alta konsaydi arada duz bir kesik olurdu.
   ============================================================ */
.mob-sheet {
    position: relative;
    /*margin-top: -26px;*/
    padding: 15px 28px calc(env(safe-area-inset-bottom) + 10px);
    border-radius: 26px 26px 0 0;
    background: #fff;
    min-height: 60vh;
}

.mob-sheet-title {
    /* Mockup: kart ustunden ilk etikete 79 px; 26+34+20 ile 105 px oluyordu. */
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.mob-note {
    margin: -8px 0 18px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 13.5px;
    line-height: 1.5;
}

.mob-alert:empty {
    display: none;
}

.mob-alert {
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 13.5px;
    line-height: 1.5;
}

    .mob-alert ul {
        margin: 0;
        padding-left: 18px;
    }

/* ============================================================
   ALANLAR
   ============================================================ */
.mob-field {
    margin-bottom: 12px;
}

.mob-label {
    display: block;
    margin-bottom: 5px;
    font-size: 13.5px;
    font-weight: 600;
}

.mob-input {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Mockup'tan olculdu: alan kutulari 49 px. 56 px ile ekran
       844 px'e sigmiyordu (toplam 928 px cikiyordu). */
    height: 49px;
    padding: 0 14px;
    border: 1px solid var(--mob-cizgi);
    border-radius: 14px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

    /* :focus-within — odak halkasi kutunun KENDISINDE degil, icindeki inputta
   olusuyor. Input'a verilseydi cerceve ile halka arasinda bosluk kalirdi. */
    .mob-input:focus-within {
        border-color: var(--mob-acik-mavi);
        box-shadow: 0 0 0 3px rgba(47, 139, 255, .16);
    }

.mob-input-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--mob-soluk);
}

    .mob-input-icon svg {
        width: 21px;
        height: 21px;
    }

/* +90 oneki ve ondan sonraki dikey cizgi. Cizgi ayri bir oge degil,
   border-right — fazladan bir <span> eklemenin karsiligi yok. */
.mob-input-prefix {
    flex: 0 0 auto;
    padding-right: 12px;
    border-right: 1px solid var(--mob-cizgi);
    font-size: 18px;
    font-weight: 600;
}

.mob-input-field {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 17px;
    color: inherit;
    letter-spacing: .02em;
}

    .mob-input-field::placeholder {
        color: #a9b8cd;
    }

    /* readonly alan (ilk giriste telefon) tiklanabilir gorunmemeli. */
    .mob-input-field[readonly] {
        color: var(--mob-soluk);
    }

.mob-eye {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mob-soluk);
    cursor: pointer;
}

    .mob-eye svg {
        width: 22px;
        height: 22px;
    }

.mob-hint {
    display: block;
    margin-top: 6px;
    color: var(--mob-soluk);
    font-size: 12.5px;
}

.mob-error {
    display: block;
    margin-top: 6px;
    color: #b91c1c;
    font-size: 13px;
}

.mob-forgot {
    margin: -2px 0 3px;
    text-align: right;
}

    .mob-forgot a {
        color: var(--mob-mavi);
        font-size: 14.5px;
        font-weight: 600;
        text-decoration: underline;
    }

/*
   "Sifremi Unuttum" — mockup'ta MAVI ve ALTI CIZILI bir baglanti.

   ⚠️ <a> ama href YOK: ekrani yazilmadi ve /app altinda bir 404
   MapFallback yuzunden kullaniciyi TANITIM SITESINE atardi. Tiklaninca
   sebebini yazan bir not acilir (data-soon, mobil.js).

   href olmadigi icin tarayici bunu odaklanabilir saymaz; tabindex ve role
   isaretlemede acikca verilir, yoksa klavyeyle ulasilamazdi.
*/
.mob-link {
    color: var(--mob-mavi);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/*
   Tiklandiginda acilan "yakinda" notu.

   ⚠️ alert() ya da bir modal KULLANILMAZ: ikisi de akisi keser ve mockup'ta
   olmayan bir katman ekler. Not, tetikleyen ogenin hemen altinda belirir ve
   ekranin geri kalanini oldugu gibi birakir.
*/
.mob-soon-note {
    margin: 8px 0 0;
    padding: 10px 13px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

/* ============================================================
   DUGMELER
   ⚠️ Hepsi en az 56 px yuksek: mockup'in olcusu ve dokunma hedefi olarak da
   dogru olan bu. 44 px altina inilseydi parmakla isabet zorlasirdi.
   ============================================================ */
.mob-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--mob-camgobegi) 0%, var(--mob-acik-mavi) 55%, var(--mob-mavi) 100%);
    color: #fff;
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(22, 104, 227, .28);
}

    .mob-cta svg {
        width: 22px;
        height: 22px;
    }

.mob-bio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    /* Mockup'tan olculdu: kutu 48 px. 12 px dolgu + 34 px ikon ile 60 px
       oluyordu ve ekranin alti sigmiyordu. */
    margin-top: 14px;
    padding: 7px 12px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #eff6ff;
    color: var(--mob-mavi);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

    /* ⚠️ Biyometrik kutu da SOLUKLASTIRILMAZ: mockup'ta tam renkli duruyor ve
   alt yazisi "Sadece kayitli cihazlarda". Calismadigi tiklaninca soylenir. */

    .mob-bio svg {
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
    }

.mob-bio-text {
    display: flex;
    flex-direction: column;
}

    .mob-bio-text b {
        font-size: 15px;
        font-weight: 600;
    }

    .mob-bio-text small {
        color: var(--mob-soluk);
        font-size: 11px;
    }

/* "veya" ayraci: iki yanindaki cizgi flex ile uzar, sabit genislik
   verilseydi dar ekranda tasardi. */
.mob-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 21px 0 4px;
    color: var(--mob-soluk);
    font-size: 14px;
}

    .mob-or::before,
    .mob-or::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--mob-cizgi);
    }

.mob-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    border: 1.5px solid #93c5fd;
    border-radius: 14px;
    background: #fff;
    color: var(--mob-mavi);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    /* ⚠️ Bu oge <a> iken <button>'a dondu (9 Eylul 2026): kendi kendine
       kayit diye bir kavram yok ve /app/kayit 404 veriyordu. <button>
       varsayilan yazi tipini KENDI verir, miras almaz. */
    font-family: inherit;
}

/* ⚠️ "Yeni Hesap Olustur" DEVRE DISI CIZILMEZ (kullanicinin karari,
   9 Eylul 2026): gorsel sartname mockup'tur ve orada dugme etkin gorunuyor.
   Calismadigi tiklaninca soylenir (data-soon), soluklastirilarak degil. */
.mob-secondary {
    cursor: pointer;
}

    .mob-secondary svg {
        width: 22px;
        height: 22px;
    }

/* ============================================================
   ONAY, GUVENCE, TELIF
   ============================================================ */
.mob-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--mob-soluk);
}

    .mob-consent input {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        margin: 1px 0 0;
        accent-color: var(--mob-mavi);
    }

    .mob-consent a {
        color: var(--mob-lacivert);
        text-decoration: underline;
    }

.mob-safe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 22px 0 0;
    color: var(--mob-yesil);
    font-size: 14px;
    font-weight: 600;
}

    .mob-safe svg {
        width: 20px;
        height: 20px;
    }

.mob-copy {
    margin: 12px 0 0;
    text-align: center;
    color: #9aa9bf;
    font-size: 12.5px;
}

/* ============================================================
   OTURUMLU EKRANLARIN KABUGU (alt menu)
   Ana Sayfa ve digerleri bu yerlesimi kullanir.
   ============================================================ */
.mob-main {
    /* Alt menunun yuksekligi + cihazin alt guvenli alani kadar bosluk:
       birakilmasaydi son satir menunun altinda kalirdi. */
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.mob-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--mob-cizgi);
    background: #fff;
}

    /* ⚠️ Secici ">" ILE COCUK SECER, "a" ile ETIKET secmez: ekrani olmayan
   sekmeler <span> olarak ciziliyor (bkz. _MobilAltMenu.cshtml) ve "a"
   yazsaydi o uc sekme hicbir stil almaz, menu tek bir a ve uc ciplak
   metin gibi gorunurdu. */
    .mob-nav > * {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 9px 4px 7px;
        color: var(--mob-soluk);
        font-size: 12px;
        text-decoration: none;
    }

    .mob-nav > .is-active {
        color: var(--mob-mavi);
        font-weight: 700;
    }

    .mob-nav svg {
        width: 24px;
        height: 24px;
    }

    /* Etkin sekmenin altindaki kisa cizgi (mockup). Ogenin kendisine border
   verilseydi menunun ust cizgisiyle karisirdi. */
    .mob-nav > .is-active::after {
        content: "";
        width: 26px;
        height: 3px;
        border-radius: 3px;
        background: var(--mob-mavi);
    }

/* ============================================================
   ANA SAYFA
   ============================================================ */

/* Ust mavi alan. Giris ekranindaki .mob-hero'dan AYRI bir siniftir ve
   kopyasi degildir: orasi tam ekran bir karsilama, burasi alt menuyle
   birlikte yasayan kisa bir baslik. Ortak sinif kullanilsaydi birinin
   yuksekligini degistirmek otekini de bozardi. */
.mob-top {
    position: relative;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top) + 22px) 20px 62px;
    background: linear-gradient(160deg, #1a5fd0 0%, var(--mob-lacivert) 55%, #072f86 100%);
    color: #fff;
}

.mob-top-orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    pointer-events: none;
}

    .mob-top-orb.is-1 {
        top: -26px;
        right: -18px;
        width: 120px;
        height: 120px;
    }

    .mob-top-orb.is-2 {
        top: 54px;
        right: 78px;
        width: 44px;
        height: 44px;
    }

.mob-top-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mob-top-hello {
    margin: 0;
    font-size: 13.5px;
    opacity: .82;
}

.mob-top-name {
    margin: 2px 0 0;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.3px;
}

.mob-top-firm {
    margin: 4px 0 0;
    font-size: 12.5px;
    opacity: .72;
}

.mob-top-out {
    margin: 0;
}

    .mob-top-out button {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 12px;
        background: rgba(255, 255, 255, .12);
        color: #fff;
        cursor: pointer;
    }

    .mob-top-out svg {
        width: 20px;
        height: 20px;
    }

/* ---- bakiye karti ----
   ⚠️ Mavi alanin uzerine TASAR (negatif margin). Alt alta dizilselerdi
   mockup'taki "kart mavinin icinden cikiyor" gorunumu kaybolurdu. */
.mob-balance {
    position: relative;
    z-index: 1;
    margin: -46px 16px 0;
    padding: 18px 18px 16px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(11, 63, 168, .16);
}

.mob-balance-warn {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff6e5;
    color: #8a5a00;
    font-size: 12.5px;
    line-height: 1.45;
}

    .mob-balance-warn svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        margin-top: 1px;
    }

/* Iki hucre; ortadaki cizgi border-left ile cizilir. Ayri bir <span>
   olsaydi izgara uc sutuna cikar ve genislikler kaymaya baslardi. */
.mob-balance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.mob-balance-cell.is-money {
    padding-left: 16px;
    border-left: 1px solid var(--mob-cizgi);
}

.mob-balance-label {
    margin: 0;
    color: var(--mob-soluk);
    font-size: 12.5px;
}

.mob-balance-value {
    margin: 5px 0 0;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.6px;
    /* Ayrac tasiyan sayilar hizali dursun: degisken genislikte rakamlarla
       iki hucrenin taban cizgisi birbirinden kayar. */
    font-variant-numeric: tabular-nums;
}

    .mob-balance-value small {
        font-size: 16px;
        font-weight: 700;
    }

.mob-balance-cell.is-money .mob-balance-value {
    color: var(--mob-yesil);
}

.mob-balance-pending {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--mob-cizgi);
    color: var(--mob-soluk);
    font-size: 12.5px;
}

    .mob-balance-pending b {
        color: var(--mob-metin);
    }

/* ---- iki islem dugmesi ---- */
.mob-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 16px 0;
}

.mob-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 15px 8px;
    border: 1px solid var(--mob-cizgi);
    border-radius: 16px;
    background: #fff;
    color: var(--mob-metin);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    /* ⚠️ Bu ogeler <button> iken <a>'ya dondu (9 Eylul 2026); alti cizili
       gorunmemeleri ve metnin ortalanmasi icin ikisi de acikca yazilir —
       <button> bunlari varsayilan olarak veriyordu. */
    text-align: center;
    text-decoration: none;
}

    .mob-act.is-primary {
        border-color: transparent;
        background: linear-gradient(135deg, var(--mob-acik-mavi), var(--mob-mavi));
        color: #fff;
    }

    .mob-act svg {
        width: 24px;
        height: 24px;
    }

    /* Ekrani yazilmamis dugmeler devre disi cizilir; gizlenselerdi izgara
   bosalir ve mockup'taki yerlesim bozulurdu. */
    .mob-act[disabled],
    .mob-scan[disabled] {
        opacity: .55;
        cursor: default;
    }

/* ---- QR okut ---- */
.mob-scan-wrap {
    margin: 12px 16px 0;
}

.mob-scan {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 16px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #14b8a6, #0e9f8f);
    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    /* ⚠️ Bu oge <button> iken <a>'ya dondu (9 Eylul 2026): QR Okut ekrani
       yazildi. <a> alti cizili gelir, <button> gelmezdi. */
    text-decoration: none;
}

/* Devre disi hali artik KULLANILMIYOR ama kural birakildi: ekran gecici
   olarak kapatilmak istenirse tek nitelikle geri donulebilsin. */
.mob-scan[disabled] { opacity: .55; cursor: default; }

.mob-scan-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
}

    .mob-scan-icon svg {
        width: 26px;
        height: 26px;
    }

.mob-scan-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .mob-scan-text b {
        font-size: 15.5px;
        font-weight: 700;
    }

    .mob-scan-text small {
        font-size: 12px;
        opacity: .85;
        line-height: 1.35;
    }

/* ---- listeler ---- */
.mob-block {
    margin: 22px 16px 0;
}

.mob-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .mob-block-head h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
    }

.mob-block-more {
    color: var(--mob-soluk);
    font-size: 12px;
}

.mob-empty {
    margin: 0;
    padding: 22px 16px;
    border: 1px dashed var(--mob-cizgi);
    border-radius: 16px;
    background: #fff;
    color: var(--mob-soluk);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.mob-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.mob-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--mob-cizgi);
}

    .mob-list-row:last-child {
        border-bottom: 0;
    }

.mob-list-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #eaf2ff;
    color: var(--mob-mavi);
}

    .mob-list-icon svg {
        width: 20px;
        height: 20px;
    }

/* min-width: 0 SART: esnek bir cocugun varsayilan en kucuk boyutu icerigi
   kadardir; olmazsa uzun urun adi satiri tasirir ve sagdaki puan ekrandan
   cikardi. */
.mob-list-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

    .mob-list-main b {
        font-size: 14px;
        font-weight: 600;
        /* Tek satira kirpilir; tam ad zaten listede degil gecmis ekraninda. */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mob-list-main small {
        color: var(--mob-soluk);
        font-size: 11.5px;
    }

.mob-list-val {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

    .mob-list-val b {
        color: var(--mob-yesil);
        font-size: 14.5px;
        font-weight: 700;
    }

    .mob-list-val small {
        color: var(--mob-soluk);
        font-size: 11.5px;
    }

/* ============================================================
   IC SAYFA BASLIGI  (Tutar Cek, Gecmis Taleplerim)

   ⚠️ Ana sayfanin buyuk mavi alani (.mob-top) BURADA KULLANILMAZ: orasi
   "hos geldin" satiri ve bakiye karti icin var; ic sayfada ayni yuksekligi
   harcamak, asil isi (form) ekranin altina iterdi.
   ============================================================ */
.mob-page {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: calc(env(safe-area-inset-top) + 14px) 18px 14px;
    background: linear-gradient(160deg, #1a5fd0 0%, var(--mob-lacivert) 100%);
    color: #fff;
}

.mob-page-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

    .mob-page-back svg {
        width: 22px;
        height: 22px;
    }

.mob-page-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    /* Uzun baslik alt satira tasip basligi iki satir yapmasin. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mob-page-link {
    color: #cfe3ff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

/* Ic sayfalarda beyaz kart, mavi baslığın hemen altindan baslar ve YUKARI
   TASMAZ: ana sayfadaki bakiye kartinin tasmasi oraya ozgu bir vurgu. */
.mob-sheet-page {
    margin: 0;
    border-radius: 20px 20px 0 0;
    padding: 20px 18px 26px;
}

/* ============================================================
   BAKIYE OZETI  (cekilebilir tutar + kirilim)
   ============================================================ */
.mob-money {
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid var(--mob-cizgi);
    border-radius: 16px;
    background: linear-gradient(140deg, #f8fbff 0%, #eef5ff 100%);
}

.mob-money-label {
    margin: 0 0 4px;
    color: var(--mob-soluk);
    font-size: 13px;
    font-weight: 600;
}

.mob-money-value {
    margin: 0;
    color: var(--mob-lacivert);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    /* Ayracli sayilar uc haneden uzun; esit genislikte rakam olmasa
       satir satir kayardi (QR Stok kartlarindaki kuralin aynisi). */
    font-variant-numeric: tabular-nums;
}

    .mob-money-value small {
        font-size: 18px;
        font-weight: 700;
    }

.mob-money.is-slim {
    margin-bottom: 16px;
    padding: 12px 16px;
}

    .mob-money.is-slim .mob-money-value {
        font-size: 24px;
    }

.mob-money-break {
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px dashed var(--mob-cizgi);
    list-style: none;
}

    .mob-money-break li {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 3px 0;
        color: var(--mob-soluk);
        font-size: 13.5px;
    }

    .mob-money-break b {
        color: var(--mob-metin);
        font-variant-numeric: tabular-nums;
    }

/* ============================================================
   HIZLI TUTAR SECIMI
   ============================================================ */
.mob-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.mob-chip {
    padding: 7px 13px;
    border: 1px solid #cfe0f8;
    border-radius: 999px;
    background: #f2f7ff;
    color: var(--mob-lacivert);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .mob-chip:active {
        background: #e2edff;
    }

/* ============================================================
   BASARI BILDIRIMI
   ============================================================ */
.mob-ok {
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    background: #ecfdf5;
    color: #047857;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ============================================================
   TALEP LISTESI
   ============================================================ */
.mob-req-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mob-req {
    padding: 14px 0;
    border-bottom: 1px solid var(--mob-cizgi);
}

    .mob-req:last-child {
        border-bottom: 0;
    }

.mob-req-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mob-req-amount {
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mob-req-meta {
    margin: 5px 0 0;
    color: var(--mob-soluk);
    font-size: 12.5px;
}

.mob-req-no {
    font-variant-numeric: tabular-nums;
}

.mob-req-iban {
    margin: 5px 0 0;
    color: var(--mob-metin);
    font-size: 13px;
    letter-spacing: .04em;
}

/* Ret nedeni SOLUK degil VURGULU yazilir: kullanicinin "neden
   sonuclanmadi?" sorusunun cevabi tam olarak bu satirdir. */
.mob-req-reason {
    margin: 8px 0 0;
    padding: 9px 12px;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    line-height: 1.45;
}

.mob-badge {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

    .mob-badge.is-wait {
        background: #fff7ed;
        color: #c2410c;
    }

    .mob-badge.is-ok {
        background: #ecfdf5;
        color: #047857;
    }

    .mob-badge.is-no {
        background: #fef2f2;
        color: #b91c1c;
    }

/* ============================================================
   ALT MENUDE HENUZ YAZILMAMIS SEKMELER

   ⚠️ Ekrani olmayan sekme BAGLANTI DEGILDIR (<span>). Baglanti olsaydi
   uygulamadan cikilip 404'e — daha kotusu, MapFallback yuzunden tanitim
   sitesine — gidilirdi. Sol menudeki "YAKINDA" satirlarinin aynisi.
   ============================================================ */
.mob-nav .is-soon {
    opacity: .38;
    cursor: not-allowed;
}

/* ============================================================
   BELGE GORUNUMU  (KVKK aydinlatma metni)
   ============================================================ */
.mob-doc-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
}

.mob-doc-meta {
    margin: 0 0 16px;
    color: var(--mob-soluk);
    font-size: 12.5px;
}

/* ⚠️ Metin HTML olarak degil DUZ METIN olarak basiliyor (Razor kacisi);
   paragraf ayrimi bu yuzden yalnizca satir sonlarindan geliyor ve
   pre-wrap olmadan butun belge tek bir paragrafa donerdi. */
.mob-doc {
    white-space: pre-wrap;
    color: var(--mob-metin);
    font-size: 14.5px;
    line-height: 1.65;
    /* Uzun bir kelime (ornegin bir adres) satiri tasirmasin. */
    overflow-wrap: anywhere;
}

/* ============================================================
   KVKK ONAY ADIMI  (/app/kvkk-onay)
   ============================================================ */

/* ⚠️ Metin KENDI ICINDE kayar, sayfa degil. Sayfa kaydirmasina
   birakilsaydi onay kutusu ve dugme uzun bir metnin sonunda kalir,
   kullanici once yuzlerce satir kaydirmadan onaylayamazdi — ki bu
   "okumadan onaylamayi" degil, VAZGECMEYI tesvik eder. Kutu ve dugme
   ekranda kalir, metin kendi kutusunda gezilir. */
.mob-doc-scroll {
    max-height: 46vh;
    overflow-y: auto;
    margin: 0 0 4px;
    padding: 12px 14px;
    border: 1px solid var(--mob-cizgi);
    border-radius: 12px;
    background: #f8fafc;
    /* iOS'ta kutu ici kaydirmanin akici olmasi icin. */
    -webkit-overflow-scrolling: touch;
}

/* Metin ile ikincil eylem arasindaki "vazgec" baglantisi.
   ⚠️ <button>'dur, <a> DEGIL: bir POST formunu gonderiyor (cikis) ve
   baglanti olsaydi tarayici on yuklemesi kullaniciyi istemeden
   cikarabilirdi (Profilim'deki "Cikis Yap" kuralinin aynisi). */
.mob-link-btn {
    display: block;
    width: 100%;
    margin: 14px 0 0;
    padding: 10px 0;
    border: 0;
    background: none;
    color: var(--mob-soluk);
    font: inherit;
    font-size: 13.5px;
    text-decoration: underline;
    cursor: pointer;
}

.mob-link-btn:hover {
    color: var(--mob-metin);
}

/* ============================================================
   SIFREMI UNUTTUM  (/app/sifremi-unuttum)
   ============================================================ */

/* ⚠️ Giris ekraninin hero'su BU EKRANDA KISALIR. Oradaki yukseklik
   kelime logosu + iki satir slogan icin olculmustu; burada ikisi de yok
   ve ayni dolgu birakilsaydi beyaz kart ekranin yarisindan sonra baslar,
   ucuncu adimda iki sifre alani ekrana sigmazdi. */
.mob-hero.is-kisa {
    padding: calc(env(safe-area-inset-top) + 44px) 28px 26px;
}

/* Adim gostergesi: kullanici uc adimlik akista nerede oldugunu gormeli,
   yoksa ikinci adimda "daha ne kadar var?" sorusu cevapsiz kalir. */
.mob-steps {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    /* Sayac CSS'te uretilir; isaretlemede 1-2-3 yazilsaydi adim eklendiginde
       numaralar elle kaydirilmak zorunda kalirdi. */
    counter-reset: mob-adim;
}

.mob-steps li {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 3px solid var(--mob-cizgi);
    color: var(--mob-soluk);
    font-size: 12px;
    font-weight: 600;
    counter-increment: mob-adim;
    /* Dar ekranda "Sifre" kirpilmasin diye etiketler kisa tutuldu; yine de
       tasma ihtimaline karsi. */
    white-space: nowrap;
}

.mob-steps li::before {
    content: counter(mob-adim);
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--mob-cizgi);
    color: #fff;
    font-size: 10.5px;
    line-height: 1;
}

/* ⚠️ Gecilmis adimlar da ISARETLI kalir (>=), yalnizca icinde bulunulan
   degil: ilerleme cubugu geri gidiyormus gibi gorunmemeli. */
.mob-steps li.is-on {
    border-top-color: var(--mob-mavi);
    color: var(--mob-metin);
}

.mob-steps li.is-on::before {
    background: var(--mob-mavi);
}

/* "Kod gelmedi, tekrar gonder" AYRI bir form: HTML ic ice forma izin
   vermez. Gorunusu baglanti ama <button> (bkz. .mob-link-btn). */
.mob-again {
    margin: 0;
}

.mob-back-login {
    margin: 10px 0 0;
    text-align: center;
    font-size: 13.5px;
}

/* ============================================================
   BIYOMETRIK GIRIS NOTU  (/app/giris)
   ============================================================ */

/* Dugmenin sonucunu / sebebini yazan satir. Basta hidden; mobil.css'in
   basindaki [hidden] kurali onu gercekten gizler (sinifla tanimli bir
   display degerini de ezer). */
.mob-bio-not {
    margin: 8px 2px 0;
    color: var(--mob-soluk);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

/* ============================================================
   YARDIM EKRANINDAKI FIRMA KUTUSU  (/app/yardim)
   ============================================================ */
.mob-doc-firma {
    margin: 18px 0 0;
    padding: 14px;
    border: 1px solid var(--mob-cizgi);
    border-radius: 12px;
    background: #f8fafc;
}

.mob-doc-firma-etiket {
    margin: 0 0 2px;
    color: var(--mob-soluk);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.mob-doc-firma-ad {
    margin: 0 0 6px;
    color: var(--mob-metin);
    font-size: 16px;
    font-weight: 700;
    /* Uzun firma adi satiri tasirmasin. */
    overflow-wrap: anywhere;
}

.mob-doc-firma-not {
    margin: 0;
    color: var(--mob-soluk);
    font-size: 13px;
    line-height: 1.55;
}