/* MOBİL UYGULAMA · ana ekranlar (5 Kas 2026). Yalnız ≤940px: sayfalarda media="(max-width:940px)" ile yüklenir.
   Ana sayfa, Askıda, Markalar = kapak + kartlar; bölümler dokununca kendi ekranında açılır (mobil-app.js).
   Geri almak için index/kesfet/markalar'daki mobil-app.css ve mobil-app.js satırlarını silmek yeter. */

/* Hangi ekran açık değilse o ekranın bölümleri görünmez. */
main#top:not([data-mu="senet"]) > .gk-altin,
main#top:not([data-mu="fatura"]) > .fd,
main#top:not([data-mu="odeme"]) > .gfn-yollar,
main#top:not([data-mu="odeme"]) > .gk-firsat,
main#top:not([data-mu="kim"]) > .gfn-kim,
main#top:not([data-mu="kim"]) > .gfn-bant.duz,
main#top:not([data-mu="magaza"]) > .gk-koyu,
main#top:not([data-mu="magaza"]) > .gfn-avt,
main#top:not([data-mu="neden"]) > .gk-sayilar,
main#top:not([data-mu="neden"]) > .gk-acik,
main#top:not([data-mu="hesap"]) > .gk-hesap,
main#top:not([data-mu="destek"]) > .gk-destek,
main#top > .gfn-indir,
main#top > .gk-blog,
main.mo:not([data-mu="bul"]) > .sm-alan,
main.mo:not([data-mu="kazanc"]) > .mo-uc,
main.mo:not([data-mu="kazanc"]) > .ga-avantaj,
main.mo:not([data-mu="alan"]) > .ga-alan,
main.mo:not([data-mu="nasil"]) > .nc,
main.mo:not([data-mu="kural"]) > .mo-liste,
main.ka:not([data-mu="avantaj"]) > .ga-avantaj,
main.ka:not([data-mu="alan"]) > .ga-alan,
main.ka:not([data-mu="nasil"]) > .nc{display:none !important}
main[data-mu] > .ga-kapak,
main[data-mu] > .mo-kapak,
main[data-mu] > .mu-ana[hidden]{display:none !important}

/* main#top flex sütun: otomatik kenar boşluklu bölüm içeriği kadar daralıyordu (banner 245 px'e kırpılıyordu). */
main#top > section,main#top > div{width:100%; box-sizing:border-box}
/* Fırsat kartları diğer şeritlerle aynı ölçüde; geniş ekranda devleşmez. */
main#top .gk-firsat-kart,main#top .gk-firsat-kart.aktif{flex:0 0 min(76vw,300px); aspect-ratio:3/4}

/* Kapak: tek mesaj, arama, tek eylem. */
main > .ga-kapak,main > .mo-kapak{min-height:0 !important; height:auto !important; padding:0 !important}
main > .ga-kapak::before,main > .ga-kapak::after,main > .mo-kapak::before,main > .mo-kapak::after{display:none !important}
main > .ga-kapak .ga-kapak-ic,main > .mo-kapak .mo-kapak-ic{display:block !important; min-height:0 !important; padding:24px 16px !important; max-width:560px; margin:0 auto}
main > .ga-kapak .ga-tel,
main > .ga-kapak .ga-not,
main > .ga-kapak .ga-kapak-yasal,
main > .mo-kapak .mo-not,
main > .mo-kapak .mo-cerceve{display:none !important}
main > .ga-kapak .ga-bas,main > .mo-kapak .mo-bas{margin:0 0 18px !important; font-size:30px !important; line-height:1.15 !important; text-align:center}
main > .ga-kapak .kapak-ara,main > .mo-kapak .kapak-ara{margin:0 0 12px !important; width:100% !important; max-width:none !important}
main > .ga-kapak .ga-dugme,main > .mo-kapak .mo-dugme{display:flex !important; align-items:center; justify-content:center; width:100% !important; min-height:52px; margin:0 !important; box-sizing:border-box; border:0 !important}
main > .mo-kapak .mo-dugmeler{display:block !important; margin:0 !important; text-align:center}
main > .mo-kapak .mo-baglanti{display:inline-block; margin-top:14px}

/* Ana ekran gövdesi */
main > .mu-ana[hidden]{display:block !important}
main#top > .mu-ana{order:2}
main > .mu-ana{padding:16px 16px 12px; box-sizing:border-box}
.mu-ana > div{max-width:720px; margin:0 auto}
.mu-kisa{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 20px}
.mu-kisa button,.mu-kisa a{
  display:flex; flex-direction:column; align-items:center; gap:6px; min-height:76px; padding:0;
  border:0; background:none; color:#2A1466; font:600 12px/1.2 var(--font-arayuz,inherit); text-align:center; text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mu-kisa i{display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:#F1ECFB; color:#6D2FBF}
.mu-kisa svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.mu-kartlar{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.mu-kartlar button{
  display:block; width:100%; padding:0; border:1px solid #ECE6F7; border-radius:16px; overflow:hidden; background:#fff; text-align:left; cursor:pointer;
  color:#2A1466; font:700 15px/1.25 var(--font-arayuz,inherit); -webkit-tap-highlight-color:transparent;
}
.mu-kartlar img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#F1ECFB}
.mu-kartlar .genis{grid-column:span 2}
.mu-kartlar .genis img{aspect-ratio:2/1}
.mu-kartlar span{display:block; padding:10px 12px 12px}
.mu-kisa button:active,.mu-kisa a:active,.mu-kartlar button:active{opacity:.7}
.mu-yasal{margin:16px 0 0; color:#6B6280; font-size:12px; line-height:1.4; text-align:center}
@media (min-width:561px){
  .mu-kartlar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mu-kartlar .genis{grid-column:auto}
  .mu-kartlar .genis img{aspect-ratio:4/3}
}

/* Ekran açılışı */
main[data-mu],main.mu-geri{outline:0}
main.mu-ileri{animation:mu-ileri .22s cubic-bezier(.2,.7,.2,1)}
main.mu-geri{animation:mu-geri .2s cubic-bezier(.2,.7,.2,1)}
@keyframes mu-ileri{from{opacity:.4; translate:36px 0}to{opacity:1; translate:0 0}}
@keyframes mu-geri{from{opacity:.4; translate:-28px 0}to{opacity:1; translate:0 0}}
@media (prefers-reduced-motion:reduce){main.mu-ileri,main.mu-geri{animation:none}}

/* Ekranlarda az yazı: başlık, görsel, eylem. */
main .sv-not,main .sv-kanca,main .gk-alt,main .gfn-sec-alt,main .gk-kanca,main .gfn-kanca,
main .gk-altin li > b + span,main .fd-not,main .gfn-kim-alt,main .gfn-bant-alt,main .gk-iki-yazi > p,main .gk-koyu p:not([class]),
main .nc-not,main .sm-alan .mk-guven-alt{display:none !important}

/* KOLAY KULLANIM · 5 Kas 2026: iki büyük yol (kısa fiil + simge) ve okunaklı kısayollar. */
.mu-yol{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 20px}
.mu-yol a{display:flex; align-items:center; gap:10px; min-height:72px; padding:12px; box-sizing:border-box; border:1px solid #DDD2F2; border-radius:16px; background:#fff; color:#2A1466; font:700 16px/1.2 var(--font-arayuz,inherit); text-decoration:none; -webkit-tap-highlight-color:transparent}
.mu-yol i{display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; background:#F1ECFB; color:#6D2FBF}
.mu-yol svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.mu-yol a:active{opacity:.7}
.mu-kisa button,.mu-kisa a{min-height:84px; font-size:14px; color:#2A1466}
.mu-kartlar button{font-size:16px}
.mu-kartlar span{padding:12px}
.mu-yasal{font-size:13px}

/* ☰ menünün yerine: ana ekranın altında tek liste (5 Kas 2026). */
.mu-liste{display:grid; margin:20px 0 0; border:1px solid #ECE6F7; border-radius:16px; overflow:hidden; background:#fff}
.mu-liste a,.mu-liste button{display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; padding:0 16px; box-sizing:border-box; border:0; border-top:1px solid #ECE6F7; background:none; color:#2A1466; font:600 16px/1.2 var(--font-arayuz,inherit); text-align:left; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
.mu-liste > :first-child{border-top:0}
.mu-liste a::after,.mu-liste button::after{content:""; flex:none; width:9px; height:9px; margin-left:12px; border:solid #6D2FBF; border-width:2px 2px 0 0; transform:rotate(45deg)}
.mu-liste a:active,.mu-liste button:active{background:#F1ECFB}
.mu-alt{display:flex; flex-wrap:wrap; justify-content:center; gap:0 16px; margin:12px 0 0}
.mu-alt a,.mu-alt button{display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; background:none; color:#5E5472; font:500 14px/1.2 var(--font-arayuz,inherit); text-decoration:underline; text-underline-offset:2px; cursor:pointer}

/* ORANTI · 7 Kas 2026: yüz kesilmez, kartlar aynı hizada başlar, bölümler kenar boşluğuna oturur. */
html,body{overflow-x:clip}
.mu-kartlar button{display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; height:100%}
.mu-kartlar img{flex:none; aspect-ratio:1/1}
.mu-kartlar [data-mu-ac="senet"] img{object-position:50% 6%}
.mu-kartlar [data-mu-ac="fatura"] img{object-position:50% 30%}
.mu-kartlar [data-mu-ac="odeme"] img{object-position:55% 42%}
.mu-kartlar [data-mu-ac="kim"] img{object-position:50% 62%}
.mu-kartlar [data-mu-ac="magaza"] img{object-position:50% 50%}
.mu-kartlar [data-mu-ac="neden"] img{object-position:50% 8%}

main#top .gfn-kim .gfn-kim-serit{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-inline:0; padding:0 16px; overflow:visible; scroll-snap-type:none}
main#top .gfn-kim .gfn-kim-serit figure{width:auto; min-width:0; flex:none; margin:0; overflow:hidden; background:#fff}
main#top .gfn-kim .gfn-kim-serit img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:50% 45%}
main#top .gfn-kim .gfn-kim-serit figcaption{padding:10px 12px 12px}

main#top .gfn-kim{padding-bottom:20px}
main#top .gfn-bant.duz .gk-bant-foto{aspect-ratio:16/9; object-position:50% 58%}

main#top .gfn-avt .gfn-avt-gorsel{width:calc(100% - 32px); max-width:420px; height:auto; aspect-ratio:1/1; margin-inline:auto}
main#top .gfn-avt .gfn-avt-gorsel img{object-position:50% 34%}

main#top .gk-acik .gk-iki-gorsel{aspect-ratio:1/1; object-position:50% 10%}
main#top .gk-koyu .gk-iki-gorsel.kare{aspect-ratio:4/3; object-position:50% 50%}

main#top .gfn-yollar .gfn-yol:nth-child(2) img{object-position:74% 50%}

/* 8 Kas 2026 (kullanıcı: "ikonları kurumsal yap"): banka uygulaması dili — tek çizgi kalınlığı, keskin hiza.
   Ana iki eylem: dolu marka moru kare + beyaz simge; kısayollar: beyaz kutu, ince çerçeve, koyu mor simge. */
.mu-yol a{gap:12px; border-color:#E4DCF3; border-radius:14px; box-shadow:0 1px 2px rgba(36,19,56,.06); font-weight:600; color:#1D1433}
.mu-yol i{width:40px; height:40px; border-radius:12px; background:#4A1D8C; color:#fff}
.mu-yol svg{width:22px; height:22px; stroke-width:1.6}
.mu-kisa i{width:52px; height:52px; border-radius:14px; background:#fff; border:1px solid #E4DCF3; box-shadow:0 1px 2px rgba(36,19,56,.06); color:#2A1466; box-sizing:border-box}
.mu-kisa svg{width:22px; height:22px; stroke-width:1.6}
.mu-kisa button,.mu-kisa a{font-weight:600; color:#1D1433}