/* ============================================================
   4 Kas 2026 · KAPAK ZEMİNİ (kullanıcı: "tüyleri kaldır, yerlerine askı ve hediye filigranı; önceki lila renk güzel, mor çok kapattı").
   Lila zemin aynı; tüy görseli yerine assets/ana/filigran.svg. Yazı ve düğme renkleri sayfaların kendi kurallarında.
   Bu dosya sayfaların EN SONUNDA yüklenir. Blog bantlarının karşılığı blog.css sonunda.
   ============================================================ */
/* 4 Kas 2026 (kullanıcı: "çok koyu, yazıları kapatıyor"): filigran ayrı katmanda, yazı alanı maskeyle boş; yazının arkasına çizgi girmez */
.ga-kapak,section.gk-kapak.ga-kapak,.hk-kapak,.mo-kapak{position:relative; background:#C9BAF3}
.ga-kapak::before,.hk-kapak::before,.mo-kapak::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:url(ana/filigran.svg) center top/1600px 640px repeat; -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 56%,#000 66%); mask-image:linear-gradient(90deg,transparent 0,transparent 56%,#000 66%)}
.ga-kapak-ic,.hk-kapak-ic,.mo-kapak-ic{position:relative; z-index:1}
/* telefon (kullanıcı: "filigranlarda hata var mobilde"): büyük desen ekran kenarında ve telefonun arkasında yarım kalıyordu.
   Ana sayfa + Keşfet: telefon görselinin iki yanında tam görünen küçük ikon sütunları (space: yarım ikon çizilmez).
   Markalar + Hakkımızda: fotoğraf kartı kapağı kaplıyor, filigrana yer yok. */
@media (max-width:940px){
  .ga-kapak::before{top:auto; bottom:0; height:330px; background:url(ana/filigran-sol.svg) left 8px top/56px 190px,url(ana/filigran-sag.svg) right 8px top/56px 190px; background-repeat:no-repeat space,no-repeat space; -webkit-mask-image:none; mask-image:none}
  .hk-kapak::before,.mo-kapak::before{display:none}
}

/* fatura sahnesi aynı lila zeminde */
.fd-el{background-color:#C9BAF3}

/* ------------------------------------------------------------
   PLATFORM KURALLARI
   Apple HIG: dokunma alanı ≥44 pt, çentik güvenli alanı.
   Android Material: dokunma alanı ≥48 dp, basma geri bildirimi, 12 sp altı yazı yok.
   Masaüstü: klavye odağı görünür, hover yalnız fare olan cihazda.
   Ortak ölçü olarak büyük olan (48) alındı.
   ------------------------------------------------------------ */
.hk-baglanti,.mo-baglanti,.bk-baglanti,.sv-baglanti{min-height:48px; display:inline-flex; align-items:center}
.ga-dugme,.hk-dugme,.mo-dugme,.nh-dugme,.acilis-ana,.hk-baglanti,.mo-baglanti,.sv-baglanti,.acilis-x{touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.ga-dugme:active,.hk-dugme:active,.mo-dugme:active,.nh-dugme:active,.acilis-ana:active{transform:scale(.98)}
@media (prefers-reduced-motion: reduce){.ga-dugme:active,.hk-dugme:active,.mo-dugme:active,.nh-dugme:active,.acilis-ana:active{transform:none}}
@media (hover:none){
  .ga-dugme:hover,.hk-dugme:hover,.mo-dugme:hover,.nh-dugme:hover{background:var(--mor); color:#fff}
}
.ga-ekran small{font-size:12px}

/* karşılama: kapat düğmesi görünümü aynı, dokunma alanı 48; giriş bağlantısı parmakla rahat */
.acilis-x::after{content:""; position:absolute; inset:-7px}
.acilis-giris a{display:inline-block; padding-block:14px; margin-block:-14px}

/* yatay telefonda çentik: içerik güvenli alanda */
@media (max-width:940px) and (orientation:landscape){
  .ga-kapak-ic,.hk-kapak-ic,.mo-kapak-ic,.nh .nh-ic,.fd,.gk-altin{padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right))}
}

/* ölçümde çıkan küçükler (4 Kas 2026): telefonda dokunma alanı 48, yazı en az 12 */
.sv-bildirim small{font-size:12px}
@media (max-width:940px),(pointer:coarse){
  .hk-menu a{min-height:48px; display:inline-flex; align-items:center}
}


/* telefonda "Birlikte ödemenin yolları" bölümü daralıyordu (266 px): tam genişlik, kartlar okunur boyda */
@media (max-width:940px){
  main#top > .gfn-yollar{width:100%; max-width:none; align-self:stretch; padding-inline:0}
  main#top .gfn-yollar .gfn-yol-izgara{gap:12px; width:100%; margin-inline:0; padding:4px 16px 12px; scroll-padding-inline:16px; box-sizing:border-box}
  main#top .gfn-yollar .yk-kart{flex:0 0 min(76vw,300px)}
  main#top .gk-firsat-sahne{width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw); padding-inline:16px; scroll-padding-inline:16px; box-sizing:border-box}
  main .hk-menu a{min-height:48px !important}
}

/* 4 Kas 2026 · kapakta mağaza araması (ana sayfa + Markalar): ürün yazılır, sonuçlar Markalar'da sıralanır */
.kapak-ara{position:relative; display:flex; align-items:center; width:100%; max-width:520px; min-height:58px; margin-top:22px; padding:5px 5px 5px 48px; border:1px solid #fff; border-radius:999px; background:#fff; box-shadow:0 14px 34px rgba(58,42,122,.18); box-sizing:border-box}
.kapak-ara:focus-within{border-color:var(--mor); box-shadow:0 14px 34px rgba(58,42,122,.26)}
.kapak-ara .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.kapak-ara svg{position:absolute; left:17px; top:50%; width:21px; height:21px; margin-top:-10.5px; fill:none; stroke:#5E5472; stroke-width:2; stroke-linecap:round; pointer-events:none}
.kapak-ara input{flex:1; min-width:0; min-height:48px; padding:0 10px 0 0; border:0; outline:0; background:transparent; font:inherit; font-size:16px; color:var(--ink)}
.kapak-ara input:invalid{box-shadow:none}
.kapak-ara button{flex:none; min-width:80px; min-height:48px; padding:0 22px; border:0; border-radius:999px; background:var(--mor); color:#fff; font:inherit; font-size:16px; font-weight:700; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.kapak-ara button:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
.kapak-ara button:active{transform:scale(.98)}
@media (hover:hover){.kapak-ara button:hover{background:#5A22A6}}
.ga-kapak .kapak-ara + .ga-dugme{margin-top:18px}
.mo-kapak .kapak-ara + .mo-dugmeler{margin-top:18px}
@media (max-width:940px){
  .kapak-ara{min-height:56px; max-width:none; margin-top:18px; padding:4px 4px 4px 44px; text-align:left}
  .kapak-ara svg{left:14px}
  .kapak-ara button{min-width:72px; padding:0 18px}
  .ga-kapak .kapak-ara + .ga-dugme{margin-top:14px}
}
@media (prefers-reduced-motion: reduce){.kapak-ara button:active{transform:none}}

/* vaat sahnesi bildirimi sağdan kesiliyordu: kartın içinde, yüzün altında */
.sv-bildirim{left:auto; right:16px; top:auto; bottom:48px; min-width:0; width:auto; max-width:calc(100% - 32px)}

/* 4 Kas 2026 · Google tipi açılır arama paneli (assets/marka-arama.js). Kutuyla birleşir; firmalar yalnız burada görünür. */
.ma-panel{position:fixed; z-index:380; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; padding:6px 0 0; border:1px solid #E3DCEC; border-top:1px solid #EEE9F6; border-radius:0 0 24px 24px; background:#fff; box-shadow:0 20px 44px rgba(36,19,56,.22); color:var(--ink); text-align:left; -webkit-overflow-scrolling:touch}
.ma-panel[hidden]{display:none}
.kapak-ara.ma-acik,.sm-giris.ma-acik,.gk-ara.ma-acik{border-radius:28px 28px 0 0 !important; border-color:#E3DCEC !important; box-shadow:0 20px 44px rgba(36,19,56,.22) !important}
.ma-sat{display:flex; align-items:center; gap:14px; width:100%; min-height:48px; padding:7px 18px; border:0; background:none; font:inherit; color:inherit; text-align:left; text-decoration:none; cursor:pointer; box-sizing:border-box; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.ma-sat.on,.ma-sat:focus-visible{background:#F5F1FC; outline:0}
@media (hover:hover){.ma-sat:hover{background:#F5F1FC}}
.ma-sat:active{background:#EFE8FC}
.ma-ik{display:grid; place-items:center; flex:none; width:40px; height:24px}
.ma-ik svg{width:19px; height:19px; fill:none; stroke:#6B5E80; stroke-width:2; stroke-linecap:round}
.ma-harf{display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:10px; background:#EFE8FC; font-size:14px; font-weight:700; color:var(--mor)}
.ma-yazi{display:grid; gap:1px; min-width:0}
.ma-ana{display:flex; align-items:center; gap:6px; font-size:16px; line-height:1.3; color:#241338}
.ma-ana b{font-weight:700}
.ma-alt{font-size:13px; line-height:1.35; color:#6B5E80; overflow-wrap:anywhere}
.ma-dis{flex:none; width:13px; height:13px; fill:none; stroke:#6B5E80; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.ma-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ma-bos{margin:0; padding:16px 18px; font-size:15px; line-height:1.45; color:#5E5472}
.ma-not{position:sticky; bottom:0; margin:6px 0 0; padding:9px 18px 11px; border-top:1px solid #EEE9F6; background:#fff; font-size:12px; line-height:1.4; color:#6B7280}

/* 4 Kas 2026 · Nasıl Çalışır kapağı: kadının telefonunda oynayan video + eşzamanlı adım anlatımı + büyük oynatıcı */
.nh-tel{position:absolute; z-index:2; padding:0; border:0; background:#fff; border-radius:var(--r,10px); cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.nh-tel[hidden]{display:none}
.nh-tel::after{content:""; position:absolute; inset:-10px -16px}
.nh-tel-ic{display:block; width:100%; height:100%; overflow:hidden; border-radius:inherit; background:#fff}
.nh-tel video{display:block; width:100%; height:100%; object-fit:cover; pointer-events:none}
.nh-tel:focus-visible{outline:3px solid var(--mor); outline-offset:3px}
.nh-film{width:fit-content; max-width:calc(100vw - 24px); max-height:none; padding:0; border:0; overflow:visible; background:transparent; text-align:center}
.nh-film::backdrop{background:rgba(21,11,38,.72)}
.nh-film-cerceve{height:min(84dvh,820px); aspect-ratio:540/1202; margin:0 auto; max-width:calc(100vw - 24px); padding:9px; border-radius:44px; background:#151018; box-shadow:0 30px 70px rgba(0,0,0,.45); box-sizing:content-box}
.nh-film video{display:block; width:100%; height:100%; border-radius:36px; background:#fff; object-fit:cover}
.nh-film-x{position:absolute; z-index:3; top:-6px; right:-58px; width:48px; height:48px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:#fff; color:#241338; cursor:pointer}
.nh-film-x svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.nh-film-x:focus-visible{outline:3px solid var(--lamba); outline-offset:2px}
.nh-film-not{max-width:380px; margin:10px auto 0; font-size:13px; line-height:1.4; color:#fff}
@media (max-width:640px){
  .nh-film-cerceve{height:min(76dvh,calc((100vw - 42px) * 2.226))}
  .nh-film-x{top:-8px; right:-4px}
}
@media (max-width:640px){
  .nh.foto .nh-arka{aspect-ratio:4/3; object-position:88% 45%}
}

/* 4 Kas 2026 · alışveriş alanları: ev ihtiyaçları ve daha fazlası; araç ve konut "yakında" */
.ma-alan-blok{margin:28px 0 0; text-align:center}
.ma-alan-blok > p{margin:0 0 12px; font-size:15px; font-weight:700; color:#2E2254}
.ma-alanlar{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:14px}
.ma-alan-blok .ma-alanlar{margin-top:0}
.ma-alan{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid #E3DCEC; border-radius:999px; background:#fff; font:inherit; font-size:15px; font-weight:600; color:#241338; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
button.ma-alan:focus-visible{outline:3px solid var(--mor); outline-offset:2px}
@media (hover:hover){button.ma-alan:hover{border-color:var(--mor); color:var(--mor)}}
.ma-alan.yakin{background:#F7F5FD; border-style:dashed; color:#5E5472; cursor:default}
.ma-alan small{padding:2px 8px; border-radius:999px; background:#EFE8FC; font-size:12px; font-weight:700; color:var(--mor)}
@media (max-width:940px){
  .ma-alanlar{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; margin-inline:-16px; padding:2px 16px 6px; scrollbar-width:none; overscroll-behavior-x:contain}
  .ma-alanlar::-webkit-scrollbar{display:none}
  .ma-alan{flex:none; min-height:48px}
}

/* 4 Kas 2026 · üç aşama (assets/nasil-akis.js): rozet ve kart yok; yazı + ince ilerleme çizgisi */
.na-liste{list-style:none; margin:0; padding:0; display:grid; text-align:left}
.na-liste li{position:relative; padding:18px 0 18px 24px}
.na-liste li::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#E7E0F2}
.na-liste li:first-child::before{border-radius:3px 3px 0 0}
.na-liste li:last-child::before{border-radius:0 0 3px 3px}
.na-liste em{position:absolute; z-index:1; left:0; top:0; width:3px; height:0; background:var(--mor); transition:height .3s linear}
.na-liste b{display:block; font-family:var(--font-baslik); font-size:clamp(20px,1.9vw,24px); font-weight:600; line-height:1.25; color:#6B5E80; transition:color .25s ease}
.na-liste span{display:block; margin-top:4px; font-size:16px; line-height:1.45; color:#6B5E80}
.na-liste li.on b,.na-liste li.bitti b,.na-liste.durgun b{color:#2A1466}
@media (prefers-reduced-motion: reduce){.na-liste em,.na-liste b{transition:none}}

/* ana sayfa fatura kartı: ekranda video */
.fd-ekran video{display:block; width:100%; height:100%; object-fit:cover; background:#fff}
@media (max-width:1100px){
  .fd-duzen > .na-liste{width:100%; max-width:560px}
}

/* Nasıl Çalışır bölümü: telefonda video, yanında üç aşama */
#isleyis[data-video] .nc-ekran{position:relative; overflow:hidden; padding:0}
#isleyis[data-video] .nc-tel::before{display:none}
.nc-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; background:#fff}
/* ilk tasarımın üç sütunu aynen; etkin satır yumuşak geçer, tek adı olan satırlarda simge yalnız etkinde */
#isleyis[data-video] .nc-satir{transition:box-shadow .3s ease, margin .3s ease, padding .3s ease; min-height:44px; box-sizing:border-box}
#isleyis[data-video] .nc-satir i{display:none}
#isleyis[data-video] .nc-satir.one i{display:grid}
#isleyis[data-video] .nc-satir i svg{fill:none; stroke:var(--mor); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
#isleyis[data-video] #ncAdim .nc-satir:last-child{border-bottom:0}
@media (prefers-reduced-motion: reduce){#isleyis[data-video] .nc-satir{transition:none}}

/* Adım adım (akis #seyir-defteri): sitenin görsel kartları; gerçek kişi + tek bildirim + tek cümle */
#seyir-defteri .sd-adim{padding:0; background:none; border:0; border-radius:0; box-shadow:none}
#seyir-defteri .sd-ekran{gap:0; padding:0; background:none; border-radius:0}
.sd-gorsel{position:relative; margin:0; aspect-ratio:4/3.6; border-radius:22px; overflow:hidden; background:#D9CCF8; box-shadow:0 12px 32px rgba(36,19,56,.10)}
.sd-gorsel img{display:block; width:100%; height:100%; object-fit:cover}
.sd-not{position:absolute; left:12px; right:12px; bottom:12px; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:#fff; box-shadow:0 8px 22px rgba(36,19,56,.16)}
.sd-not i{display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:#EFE9FB}
.sd-not svg{width:15px; height:15px; fill:none; stroke:#5A2CA0; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.sd-not span{min-width:0}
.sd-not b{display:block; font-size:14.5px; font-weight:700; line-height:1.3; color:#2A1466}
.sd-not small{display:block; margin-top:1px; font-size:13px; line-height:1.35; color:#5E5470}
main #seyir-defteri .sd-ekran h3{display:flex; align-items:center; gap:10px; margin:16px 0 4px; font-family:var(--font-baslik); font-size:21px !important; font-weight:600; line-height:1.25; color:#2A1466}
#seyir-defteri .sd-ekran h3 i{display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:#EFE9FB; color:#5A2CA0; font-style:normal; font-size:14px; font-weight:700}
#seyir-defteri .sd-ekran > p{margin:0; font-size:16px; line-height:1.5; color:#4F4763}

/* telefon: düğme şeridi bölümü genişletmesin; ekranda yalnız video kalsın */
.ma-alan-blok{width:100%; max-width:100%; min-width:0}
@media (max-width:940px){
  .ma-alan-blok .ma-alanlar{width:100%; max-width:100%; margin-inline:0; padding-inline:0}
  #smOrnek.ma-alanlar{max-width:calc(100vw - 16px)}
}

/* 4 Kas 2026 · senet tamamlanınca sevinç: heyecanlı poza kısa, tek seferlik sıçrama (kullanıcı: "senet tamamlanınca sevindir") */
@keyframes svSevinc{0%{transform:scale(.97) translateY(10px)} 55%{transform:scale(1.04) translateY(-8px)} 100%{transform:scale(1) translateY(0)}}
.sv-foto[data-adim="2"] .sv-kare.on{transform-origin:50% 100%; animation:svSevinc .75s cubic-bezier(.2,.9,.3,1) both, svNefes 9s ease-in-out .75s infinite}
@media (prefers-reduced-motion: reduce){.sv-foto[data-adim="2"] .sv-kare.on{animation:none}}

/* fatura kartı baskısı kart kenarında yarım kalmasın */
.fd-el{background-repeat:round}

/* 4 Kas 2026 · min-content taşması: telefonda arama çipi şeridi .gk-altin bölümünü 1106 px'e itiyordu; bölüm ekrana sığar, şerit kendi içinde kayar */
@media (max-width:940px){
  main#top .gk-altin{width:100%; max-width:100%; min-width:0; box-sizing:border-box}
  main#top .gk-altin > *{min-width:0; max-width:100%}
  .ma-alan-blok{min-width:0; max-width:100%; overflow:hidden}
}