/* Ana sayfa — iki görünümde ortak: banner (geçişli giriş alanı), yolculuk, telefon ekranları */

/* Banner: bütün kareler aynı ızgara hücresinde üst üste; yükseklik en uzun kareye göre (kayma yok) */
.banner { position: relative; background: var(--patlican); color: #e9def1; border-radius: 32px; overflow: hidden; }
.banner-pencere { display: grid; }
.banner-kare { grid-area: 1 / 1; display: grid; align-items: center; min-width: 0; }
.banner-kare[hidden] { display: none; }
.banner-canli .banner-kare { opacity: 0; visibility: hidden; transform: translateX(32px); transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
.banner-canli[data-yon="geri"] .banner-kare { transform: translateX(-32px); }
.banner-canli .banner-kare.etkin { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s ease, visibility 0s; }
.banner-canli .banner-kare.cikan { visibility: visible; transform: translateX(-32px); }
.banner-canli[data-yon="geri"] .banner-kare.cikan { transform: translateX(32px); }
.banner h1, .banner .banner-baslik { color: #fff; font-family: var(--serif); font-weight: 800; letter-spacing: -.03em; }
.banner .spot { color: #d9cbe3; }
.hero-rozet { display: inline-flex; margin: 0; font: 600 .8rem/1 var(--sans); color: var(--patlican); background: var(--sari); border-radius: 999px; padding: .5rem .8rem; }
.hero-eylem { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-ikincil { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.hero-ikincil:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.hero-maddeler { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; list-style: none; padding: 0; margin: 1.4rem 0 0; font-size: .9rem; color: #cbb9d8; }
.hero-maddeler li::before { content: '✓'; color: var(--sari); margin-right: .4rem; font-weight: 700; }
.banner-gorsel { display: flex; justify-content: center; }
.banner-resim { width: 100%; max-width: 520px; height: auto; border-radius: 24px; object-fit: cover; }

/* Denetimler: oklar, noktalar (aktif nokta dolan çizgi), durdur */
.banner-denetim { position: absolute; left: 0; right: 0; bottom: 1.1rem; display: flex; align-items: center; justify-content: center; gap: .4rem; }
.banner-ok, .banner-durdur { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #fff; font: 400 1.5rem/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.banner-durdur { margin-left: .3rem; }
.durdur-ikon { position: relative; width: 12px; height: 14px; display: block; }
.durdur-ikon::before, .durdur-ikon::after { content: ''; position: absolute; top: 0; bottom: 0; width: 4px; background: #fff; border-radius: 1px; }
.durdur-ikon::before { left: 1px; } .durdur-ikon::after { right: 1px; }
.banner-durdur[aria-pressed="true"] .durdur-ikon::before { left: 2px; width: 0; height: 0; background: none; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; border-radius: 0; }
.banner-durdur[aria-pressed="true"] .durdur-ikon::after { display: none; }
.banner-ok:hover, .banner-durdur:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.banner-noktalar { display: flex; gap: .2rem; }
.banner-nokta { width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.banner-nokta i { position: relative; display: block; width: 28px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.banner-nokta[aria-selected="true"] i { background: rgba(255, 255, 255, .35); }
.banner-nokta[aria-selected="true"] i::after { content: ''; position: absolute; inset: 0; background: var(--sari); border-radius: 999px; }
.banner-nokta.dolan i::after { transform-origin: left; animation: banner-dol var(--banner-sure, 6s) linear forwards; }
.banner-duruk .banner-nokta[aria-selected="true"] i::after { animation: none; transform: none; }
.banner-ok:focus-visible, .banner-durdur:focus-visible, .banner-nokta:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }
@keyframes banner-dol { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .banner-canli .banner-kare { transform: none !important; transition: none !important; } }

/* Telefon içi örnek ekranlar */
.tcv-ust { display: flex; align-items: center; gap: .7rem; }
.tcv-foto { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--mor-orta); }
.tcv-ad { font: 600 1.12rem/1.1 var(--serif); margin: 0; color: var(--murekkep); }
.tcv-alt { margin: .2rem 0 0; font-size: .74rem; color: var(--gri); }
.tcv-rakamlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 1rem 0 .6rem; }
.tcv-rakamlar div { background: var(--zemin-gri); border-radius: 12px; padding: .55rem .4rem; text-align: center; }
.tcv-rakamlar b { display: block; font: 600 .98rem/1.1 var(--sans); color: var(--murekkep); }
.tcv-rakamlar span { font-size: .66rem; color: var(--gri); }
.tcv-fiyat dt, .tcv-fiyat dd { font-size: .78rem; }
.tcv-dugme { display: flex; align-items: center; justify-content: center; margin-top: .85rem; min-height: 40px; border-radius: 12px; background: var(--mor); color: #fff; font: 600 .86rem/1 var(--sans); }
.telefon .damga { font-size: .64rem; padding: .3rem .5rem; }
.tdf-bildirim { display: flex; flex-direction: column; gap: .1rem; background: #fdf0ee; border-radius: 12px; padding: .6rem .75rem; margin-bottom: .8rem; font-size: .76rem; color: var(--murekkep-2); }
.tdf-bildirim b { color: var(--hata-koyu); font-size: .8rem; }
.tdf-liste { list-style: none; margin: 0 0 .9rem; padding: 0; }
.tdf-liste li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--cizgi); }
.tdf-ad { font: 600 .84rem/1.2 var(--sans); color: var(--murekkep); }
.tdf-ad small { display: block; font-weight: 400; font-size: .68rem; color: var(--gri); margin-top: .15rem; }
.tdf-gec { color: var(--hata-koyu); background: #fdf0ee; }
.tdf-esik-ad { display: flex; justify-content: space-between; font-size: .7rem; color: var(--gri); margin: 0 0 .35rem; }
.tdf-esik { width: 4%; }
.tis-ad { font: 600 1.25rem/1.1 var(--serif); margin: 0; color: var(--murekkep); }
.tis-alt { font-size: .74rem; color: var(--gri); margin: .2rem 0 .8rem; }
.tis-kutu { background: var(--zemin-gri); border-radius: 12px; padding: .55rem .7rem; margin-bottom: .45rem; }
.tis-kutu span { display: block; font-size: .66rem; color: var(--gri); }
.tis-kutu b { font: 600 .84rem/1.3 var(--sans); color: var(--murekkep); }
.tis-basvuru-ad { font: 600 .72rem/1 var(--sans); color: var(--mor); margin: .8rem 0 .3rem; }
.tis-basvuru { list-style: none; margin: 0; padding: 0; }
.tis-basvuru li { display: flex; align-items: center; gap: .55rem; padding: .4rem 0; }
.tis-basvuru img { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; flex: none; }
.tis-basvuru i { width: 30px; height: 30px; border-radius: 999px; background: var(--mor-acik); color: var(--mor-koyu); font: 700 .66rem/30px var(--sans); text-align: center; font-style: normal; flex: none; }
.tis-basvuru span { font: 600 .78rem/1.2 var(--sans); color: var(--murekkep); }
.tis-basvuru small { display: block; font-weight: 400; font-size: .66rem; color: var(--gri); }

/* Yolculuk: beş durak çizgiyle bağlı */
.yol { list-style: none; margin: 0; padding: 0; }
.yol-durak { position: relative; }
.yol-no { position: relative; z-index: 1; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 999px; background: var(--mor); color: #fff; font: 700 1rem/1 var(--sans); box-shadow: 0 0 0 6px var(--kagit-koyu); }
.yol-durak h3 { font-size: 1.1rem; margin: .9rem 0 .35rem; }
.yol-durak p { font-size: .92rem; color: var(--murekkep-2); margin: 0 0 .8rem; }
.yol-ek { background: #fff; border: 1px solid var(--kenar); border-radius: 14px; padding: .7rem .8rem; box-shadow: var(--golge); font-size: .8rem; color: var(--murekkep-2); }
.yol-ek-ad { display: block; font-size: .72rem; color: var(--gri); }
.yol-ek .rakam { font-size: 1.25rem; color: var(--mor-koyu); font-weight: 500; }
.yol-adres { font-family: var(--mono); font-size: .76rem; color: var(--mor-koyu); word-break: break-all; }
.yol-teklif { display: flex; align-items: center; gap: .5rem; }
.yol-adimlar { display: flex; flex-wrap: wrap; gap: .3rem; }
.yol-adimlar i { font-style: normal; font-size: .7rem; padding: .25rem .5rem; border-radius: 999px; background: var(--zemin-gri); color: var(--gri); }
.yol-adimlar i.tamam { background: var(--yesil-acik); color: var(--yesil); }
.yol-adimlar i.simdi { background: var(--mor); color: #fff; }
.yol-vade { display: flex; flex-direction: column; background: #fdf0ee; border-color: #f3c4bf; }
.yol-vade b { color: var(--hata-koyu); }
.yol-bag { display: inline-flex; align-items: center; min-height: 44px; font-size: .88rem; font-weight: 600; }

/* Banner: canlı örnek bağlantısı (koyu zeminde) */
.banner-canli-ornek { margin: .9rem 0 0; }
.banner-canli-ornek a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45); }
.banner-canli-ornek a:hover { color: var(--sari); text-decoration-color: var(--sari); }
/* Geçişte başlık zıplamasın: bütün karelerin metin bloğu aynı yükseklikte (anasayfa.js en uzununu ölçer), içerik üstten hizalı */
.banner-canli .banner-metin { min-height: var(--banner-metin-yuk, auto); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.banner-canli .banner-metin .hero-eylem { align-self: stretch; }


/* Neyin yerine geçer */
.yerine-bas h2 { margin: .3rem 0 1.4rem; }
.yerine-eski { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.yerine-eski li { background: var(--zemin-gri); border-radius: 14px; padding: .8rem 1rem; }
.yerine-eski b { display: block; font-weight: 600; color: var(--murekkep); text-decoration: line-through; text-decoration-color: var(--gri); }
.yerine-eski span { font-size: .9rem; color: var(--murekkep-2); }
.yerine-yeni { display: flex; align-items: center; gap: 1rem; }
.yerine-ok { font: 400 2rem/1 var(--sans); color: var(--mor); flex: none; }
.yerine-kart { background: #fff; border: 1px solid var(--mor-orta); border-radius: var(--kose-buyuk); box-shadow: var(--golge); padding: 1.3rem 1.4rem; }
.yerine-adres { font: 600 .95rem/1.3 var(--mono); color: var(--mor-koyu); margin: 0 0 .5rem; word-break: break-all; }
.yerine-kart p:not(.yerine-adres) { color: var(--murekkep-2); margin: 0 0 .4rem; }
.yerine-kart a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-weight: 600; }

/* Güven şeridi */
.guven { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.guven li { background: var(--kagit-koyu); border-radius: var(--kose-buyuk); padding: 1.1rem 1.2rem; }
.guven b { display: block; font-weight: 700; color: var(--murekkep); line-height: 1.3; }
.guven b::before { content: '✓'; color: var(--mor); margin-right: .4rem; }
.guven span { display: block; margin-top: .25rem; font-size: .88rem; color: var(--murekkep-2); }

/* Neden ücretsiz: ücretsiz olanların listesi */
.kose-giris { margin: 0 0 1.1rem; }
.kose-maddeler { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.kose-maddeler li { position: relative; padding-left: 1.6rem; color: var(--murekkep-2); line-height: 1.55; }
.kose-maddeler li::before { content: ''; position: absolute; left: .2rem; top: .62em; width: .5rem; height: .5rem; border-radius: 999px; background: var(--mor); }
.kose-maddeler b { color: var(--murekkep); }
.kose-liste { list-style: none; margin: .5rem 0 0; padding: 0; }
.kose-liste li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid var(--cizgi); }
.kose-liste li:last-child { border-bottom: 0; }
.kose-liste a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.kose-liste span { font-size: .85rem; color: var(--gri); text-align: right; }

/* SSS özeti (akordeon) */
.sss-madde { border-bottom: 1px solid var(--cizgi); }
.sss-madde summary { cursor: pointer; padding: 1rem 2.2rem 1rem 0; font: 600 1.05rem/1.35 var(--sans); list-style: none; position: relative; min-height: 44px; color: var(--murekkep); }
.sss-madde summary::-webkit-details-marker { display: none; }
.sss-madde summary::after { content: '+'; position: absolute; right: .2rem; top: .85rem; font: 400 1.4rem/1 var(--sans); color: var(--mor); }
.sss-madde[open] summary::after { content: '−'; }
.sss-madde p { color: var(--murekkep-2); margin: 0 0 1.1rem; }
.sss-tumu a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-weight: 600; margin-top: .4rem; }

/* Nasıl çalışır: solda tanım + eylem, sağda çizgiyle bağlı üç adım (numara dairesi yolculuktakiyle aynı) */
/* Sol sütun yapışkan: sağdaki adımlar kayarken ekranda kalır (masaustu.css) */
.nasil { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4rem; align-items: start; }
.nasil-sol h2 { margin: .2rem 0 .7rem; }
.nasil-tanim { font-size: 1.05rem; color: var(--murekkep-2); margin: 0; }
.nasil-son { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin: 1.5rem 0 0; }
.nasil-ornek { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.nasil-adimlar { list-style: none; margin: 0; padding: 0; }
.nasil-adim { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 1.2rem; padding-bottom: 3.2rem; }
.nasil-adim:last-child { padding-bottom: 0; }
.nasil-adim:not(:last-child)::before { content: ''; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--mor-orta); }
.nasil-no { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 999px; background: var(--mor); color: #fff; font: 700 1rem/1 var(--sans); box-shadow: 0 0 0 6px #fff; position: relative; z-index: 1; }
.nasil-govde h3 { margin: .45rem 0 .35rem; }
.nasil-govde p { margin: 0 0 .9rem; font-size: .95rem; color: var(--murekkep-2); max-width: 40rem; }
.nasil-ek { background: #fff; border: 1px solid var(--kenar); border-radius: 14px; box-shadow: var(--golge); padding: .8rem .9rem; font-size: .85rem; color: var(--murekkep-2); max-width: 30rem; }
.nasil-form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.nasil-alan { display: flex; flex-direction: column; gap: .15rem; border: 1px solid var(--kenar-koyu); border-radius: var(--kose-kucuk); padding: .45rem .6rem; }
.nasil-alan:first-child { grid-column: 1 / -1; }
.nasil-alan small { font-size: .7rem; color: var(--gri); }
.nasil-alan b { font-family: var(--mono); font-weight: 500; color: var(--murekkep); }
.nasil-adres { display: flex; align-items: center; gap: .55rem; }
.nasil-adres .mono { flex: 1; min-width: 0; color: var(--mor-koyu); font-size: .8rem; }
.nasil-nokta { width: 8px; height: 8px; border-radius: 999px; background: var(--yesil); flex: none; }
.nasil-yayinda { flex: none; font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; background: var(--yesil-acik); color: var(--yesil); }
.nasil-teklif { display: flex; align-items: center; gap: .7rem; }
.nasil-teklif b { display: block; color: var(--murekkep); }
.nasil-teklif small { display: block; font-size: .75rem; color: var(--gri); }