:root {
    --ink: #0f1f2e;
    --ink-2: #2b3a48;
    --muted: #64748b;
    --line: #e4eaee;
    --bg: #f6f9fa;
    --card: #ffffff;
    /* YEŞİL KALKTI. Marka vurgusu artık ana düğmenin turkuazı; eski
       --green* isimleri (yüzlerce yerde geçiyor) aynı kalıp turkuazı
       gösteriyor, böylece tek noktadan döndü. */
    --green: #3b8192;
    --green-2: #2f6b7a;
    --green-3: #255563;
    --green-soft: #e7f2f4;
    --green-ink: #2a6270;
    --teal: #0aa39c;
    /* ANA DÜĞME RENGİ — ana sayfadaki "Videomu Oluştur" düğmesi neyse
       sitedeki bütün birincil düğmeler o. Yeşil hap artık kullanılmıyor. */
    --ana: #3b8192;
    --ana-koyu: #2f6b7a;
    --ana-soft: #e7f2f4;
    --ana-ink: #2f6b7a;
    --warn: #b45309;
    --warn-soft: #fef3e2;
    --danger: #b42318;
    --radius: 18px;
    --shadow: 0 14px 40px rgba(15, 31, 46, .10);
    --shadow-sm: 0 6px 18px rgba(15, 31, 46, .07);
    /* Tipografi ölçeği: sayfa boyunca yalnız bu adımlar kullanılır. */
    --fs-display: 1.9rem;
    --fs-h2: 1.32rem;
    --fs-title: 1rem;
    --fs-body: .875rem;
    --fs-label: .78rem;
    --fs-micro: .66rem;
    --tr-micro: .16em;
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* SAGA TASMA KALKANI. Kahraman kadraji bilerek sayfanin sag kenarina
   kadar uzaniyor; olcusu vw ile veriliyor ve vw KAYAN CUBUGU DA sayar.
   Klasik (her zaman gorunen) cubukta kadraj birkac piksel disari
   tasip sayfayi yatay kaydiriyordu. clip, hidden gibi kaydirma kabi
   yaratmadigi icin sticky basligi bozmadan o payi kesiyor. */
html { overflow-x: clip; }
html, body { min-height: 100%; }
body {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
svg { display: block; }
[hidden] { display: none !important; }

/* ---------- Marka (adaparselx logosu) ---------- */
.brand-x { position: relative; display: inline-block; line-height: 0; }
.brand-img { display: block; width: 100%; height: auto; }
/* Fotoğraf üstündeki açık türev; normalde saydam. */
.brand-img-ac { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .2s ease; }

/* İşaretin ortasındaki simge: oynat ↔ duraklat. Logo PNG'sinde o boşluk
   silindi, simge oraya SVG olarak oturuyor (ölçüldü: merkez %12,14 / %45,8). */
.bx-ic {
    position: absolute; left: 12.14%; top: 45.8%; width: 9.8%; height: auto;
    transform: translate(-50%, -50%); overflow: visible; color: #2a647a;
}
.bx-ic .ic-play, .bx-ic .ic-pause { fill: currentColor; transform-origin: 15px 15px; }
.bx-ic .ic-play  { animation: icOynat 5s ease-in-out infinite; }
.bx-ic .ic-pause { animation: icDurdur 5s ease-in-out infinite; }
@keyframes icOynat {
    0%, 42% { opacity: 1; transform: scale(1); }
    48%, 92% { opacity: 0; transform: scale(.55); }
    98%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes icDurdur {
    0%, 42% { opacity: 0; transform: scale(.55); }
    48%, 92% { opacity: 1; transform: scale(1); }
    98%, 100% { opacity: 0; transform: scale(.55); }
}

/* IŞIK ŞERİDİ — yalnız logonun çizgilerinde gezer: katman logonun kendi
   biçimiyle maskeleniyor, içindeki ince parlaklık soldan sağa süzülüyor. */
.bx-shine {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    -webkit-mask-image: url(/logo-apx-light-ns.png); mask-image: url(/logo-apx-light-ns.png);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.bx-shine:before {
    content: ""; position: absolute; top: -30%; left: 0; width: 16%; height: 160%;
    /* Koyu logoda ışık AÇAR (screen): lacivert harfler şerit geçerken parlar. */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .92), transparent);
    mix-blend-mode: screen;
    transform: skewX(-16deg) translateX(-200%);
    animation: bxShine 5.5s cubic-bezier(.4, 0, .25, 1) infinite;
}
@keyframes bxShine {
    0%, 56% { transform: skewX(-16deg) translateX(-200%); }
    100% { transform: skewX(-16deg) translateX(760%); }
}
@media (prefers-reduced-motion: reduce) {
    .bx-shine:before, .bx-ic .ic-play, .bx-ic .ic-pause { animation: none; }
    .bx-ic .ic-pause { opacity: 0; }
}
.brand-x-sm { width: 148px; }
.brand-x-auth { width: 216px; }

/* ---------- Başlık ---------- */
.hdr { position: sticky; top: 0; z-index: 30; background: rgba(246, 249, 247, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-top: var(--sat); }
.hdr-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; }
.brand { display: inline-flex; align-items: center; }
.hdr-nav { display: none; gap: 22px; }
.hdr-link { font-weight: 700; font-size: .92rem; color: var(--ink-2); }
.hdr-link:hover { color: var(--green-2); }
.hdr-actions { display: flex; align-items: center; gap: 8px; }
.hdr-icon {
    width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.hdr-icon svg { width: 20px; height: 20px; }
/* KOTA ROZETI (baslik sagi). Mobilde de gorunur.
   Kucuk ve sakin: kamera simgesi + sayi. Yaninda 42 px yuvarlak dugmeler
   var, rozet onlardan alcak kalsin ki baslik kalabalik gorunmesin. */
.hdr-kota { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px;
    border-radius: 999px; background: var(--ana-soft); border: 0; color: var(--ana-ink);
    font-weight: 700; align-self: center; }
.hdr-kota svg { width: 15px; height: 15px; opacity: .7; }
.hdr-kota b { font-size: .84rem; letter-spacing: -.01em; }
.hdr-kota-tx { display: inline-flex; align-items: center; gap: 5px; }
.hdr-kota-tx small { display: none; }
.hdr-kota.is-bos { background: #eef1ef; color: var(--muted); }
/* YARIM KALAN TASLAK rozeti: kota rozetiyle ayni sakin dil, kesik
   cerceve "henuz bitmedi" demek icin. Dar ekranda yalniz "Taslak". */
.hdr-taslak { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
    border-radius: 999px; border: 1px dashed rgba(59,129,146,.5); color: var(--ana-ink, #2f6b7a);
    background: rgba(255,255,255,.7); align-self: center; font-weight: 700; }
.hdr-taslak svg { width: 15px; height: 15px; opacity: .8; }
.hdr-taslak-tx { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.hdr-taslak-tx b { font-size: .8rem; letter-spacing: -.01em; }
.hdr-taslak-tx small { font-size: .7rem; font-weight: 600; opacity: .7; white-space: nowrap; }
/* TELEFONDA ROZET YALNIZ SIMGE + SAYI.
   Yazili hali baslikta yer birakmiyordu: kota rozeti ve menu dugmesi
   disari tasiyor, rozete basmak zorlasiyordu. */
@media (max-width: 720px) {
    /* Yalniz simge; sayi kosede kucuk bir rozet (genislik yemiyor). */
    .hdr-taslak { position: relative; padding: 0 10px; gap: 0; }
    .hdr-taslak-tx b, .hdr-taslak-tx small { display: none; }
    .hdr-taslak-say { position: absolute; top: -5px; right: -5px;
        min-width: 15px; height: 15px; padding: 0 3px; font-size: .58rem;
        box-shadow: 0 0 0 2px var(--bg, #f6f9f7); }
    .hdr-actions { gap: 6px; }
}
/* Dar telefonda logo bir tik kucuk: 360 pikselde baslik tasiyordu. */
@media (max-width: 400px) { .brand-x-sm { width: 128px; } }
/* Birden fazla taslak varsa rozetin uzerinde sayi. Liste artik acilir
   menu degil, /taslaklar sayfasi (telefonda acilir menu calismadi). */
.hdr-taslak-say { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--ana, #3b8192); color: #fff;
    font-size: .68rem; font-style: normal; font-weight: 800; }
/* /taslaklar sayfasinin kendi stilleri pano blogunun altinda (.tk-*). */
.hdr-kota.is-yeni { animation: kotaPuls 1.4s ease-out 2; }
@keyframes kotaPuls {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59,129,146,.4); }
    60% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(59,129,146,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59,129,146,0); }
}

/* ---------- KREDI EKLENDI PENCERESI ----------
   Yonetici kota tanimlayinca uye bunu bir kez, kutlamayla goruyor. */
.kk { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
    padding: 22px; }
.kk[hidden] { display: none; }
.kk-bg { position: absolute; inset: 0; background: rgba(8, 20, 14, .55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: kkFade .25s ease both; }
.kk-kart { position: relative; z-index: 1; width: min(100%, 380px); background: #fff; border-radius: 26px;
    padding: 54px 22px 22px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35);
    animation: kkGir .42s cubic-bezier(.2,1.3,.5,1) both; }
.kk-tik { position: absolute; left: 50%; top: -46px; width: 92px; height: 92px; margin-left: -46px;
    border-radius: 50%; background: #fff; border: 7px solid var(--green-soft); color: var(--green);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 10px rgba(23,165,69,.10), 0 18px 40px rgba(23,165,69,.25);
    animation: kkTik .5s .12s cubic-bezier(.2,1.5,.5,1) both; }
.kk-tik svg { width: 44px; height: 44px; }
.kk-kapat { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kk-kapat svg { width: 20px; height: 20px; }
.kk-kart h3 { font-size: 1.5rem; letter-spacing: -.03em; margin: 0 0 6px; }
.kk-kart p { margin: 0 0 16px; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.kk-bakiye { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--green-soft);
    border-radius: 16px; padding: 13px 15px; margin-bottom: 14px; color: var(--green-ink); }
.kk-bakiye svg { width: 30px; height: 30px; flex: none; }
.kk-bakiye small { display: block; font-size: .78rem; font-weight: 600; opacity: .85; }
.kk-bakiye strong { font-size: 1.5rem; letter-spacing: -.03em; }
.kk-bakiye strong span { font-size: .95rem; font-weight: 700; }
.kk-kart .btn { width: 100%; }
/* Konfeti: kagit parcalari yukaridan duser. */
.kk-konfeti { position: absolute; inset: -40px 0 0; overflow: hidden; pointer-events: none; z-index: 2; }
.kk-konfeti i { position: absolute; top: -24px; width: 9px; height: 15px; border-radius: 2px; opacity: 0;
    animation: kkDus 2.6s linear forwards; }
@keyframes kkDus {
    0% { transform: translateY(-40px) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}
@keyframes kkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kkGir { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes kkTik { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .kk-konfeti { display: none; }
    .kk-kart, .kk-tik, .kk-bg { animation: none; }
}
.menu { max-width: 1120px; margin: 0 auto; padding: 6px 18px 14px; display: grid; gap: 4px; }
.menu a, .menu-user { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-weight: 700; }
.menu-user { color: var(--muted); font-weight: 600; }
@media (max-width: 859px) {
    /* Mockup'taki sade başlık: logo, slogan, menü. */
    .hdr-actions .hdr-icon:not([data-menu-toggle]) { display: none; }
    .hdr-in { gap: 10px; padding: 8px 16px; }
}
@media (min-width: 860px) {
    .hdr-nav { display: flex; }
    .hdr-icon[data-menu-toggle] { display: none; }
    .menu { display: none !important; }
}

/* ---------- Ana sayfa ---------- */
.home { max-width: 1120px; margin: 0 auto; padding: 4px 18px 40px; }
.home-fold { display: contents; }
.kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--muted);
}
.kicker span { width: 26px; height: 3px; border-radius: 3px; background: var(--green); }
.hero { position: relative; display: grid; gap: 10px; }
.hero-copy { position: relative; z-index: 2; padding-top: 6px; }
/* Başlık kalın değil: 600 ağırlık, biraz daha açık harf aralığı. */
.hero h1 { font-size: clamp(2.05rem, 7.2vw, 2.45rem); line-height: 1.08; letter-spacing: -.028em; font-weight: 600; margin: 8px 0 8px; }
.hero h1 em { font-style: normal; color: inherit; }
.hero h1 i { font-style: normal; color: var(--green); }
/* BAŞLIKTA MEKSİKA DALGASI.
   Harfler tek tek, soldan sağa sırayla yukarı kalkıp iner; kalktığı anda
   rengini de alır. Gecikmeyi her harfin --i sırası veriyor (PHP basıyor),
   hareket transform olduğu için kare kare yeniden çizim yok. */
/* will-change YOK: 29 harfin her biri ayrı katman oluşturuyordu; iOS'ta
   bellek baskısı yaratıp titremeye yol açıyor. Dalga transform olduğu için
   zaten ucuz. */
.hd span { display: inline-block; }
.hd .hd-bos { white-space: pre; }
/* Üç sahne aynı hücrede: yükseklik en uzun olana göre sabit kalır. */
.hd { display: grid; }
.hd-sahne {
    grid-area: 1 / 1; display: block;
    opacity: 0; transform: translateY(6px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .3, 1);
}
.hd-sahne.is-on { opacity: 1; transform: none; }
/* Görünmeyen sahnenin harfleri boşuna oynamasın. */
.hd-sahne:not(.is-on) span { animation-play-state: paused; }
.hd-sahne > span, .hd-sahne > em > span {
    animation: harfDalga 5.6s cubic-bezier(.32, .72, .38, 1) infinite;
    animation-delay: calc(var(--i, 0) * 38ms);
}
/* MİNİMAL DALGA: harf yalnız birkaç piksel kalkıyor, renk hafifçe değişiyor.
   Öncesi fazla oynak duruyordu. */
@keyframes harfDalga {
    0%, 4% { transform: translateY(0); color: inherit; }
    9% { transform: translateY(-.055em); color: var(--h1-wave, var(--green-2)); }
    17%, 100% { transform: translateY(0); color: inherit; }
}
/* Kadraj ekran dışına çıkınca dalga da duruyor: sayfanın alt bölümlerinde
   kaydırırken boşuna stil hesabı yapılmasın. */
body.sahne-dis .hd-sahne span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .hd-sahne span { animation: none; }
    .hd-sahne { transition: none; }
}
.hero-script {
    position: absolute; right: 0; top: 54px; font-family: Caveat, cursive; font-size: clamp(1.4rem, 4.6vw, 2rem);
    color: var(--green-3); line-height: 1; text-align: right; transform: rotate(-7deg);
}
.hero-script:after { content: ""; display: block; width: 80%; height: 3px; margin: 4px 0 0 auto; background: var(--green); border-radius: 3px; }
.hero-lead { color: var(--ink-2); font-size: 1.08rem; line-height: 1.45; max-width: 520px; margin-bottom: 12px; }
.hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.hero-chips li {
    display: inline-flex; align-items: center; gap: 5px;
    font-weight: 600; font-size: var(--fs-label); color: var(--green-2);
    background: var(--green-soft); border: 1px solid rgba(23, 165, 69, .18);
    border-radius: 999px; padding: 4px 10px 4px 7px; white-space: nowrap;
}
.hero-chips li:before {
    content: ""; flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E");
    background-size: 10px; background-position: center; background-repeat: no-repeat;
}
.hero-visual {
    position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9;
    isolation: isolate;
    box-shadow: var(--shadow-sm);
    background: #1a262a;
    margin-top: 2px;
}
/* ---------- Hero sahnesi ---------- */
/* Zemin katmanı: uydu karesi + parsel. Kamera hareketi (yaklaşma + hafif dönüş)
   JS'te kare kare veriliyor; etiketler ayrı katmanda, her karede zemindeki
   noktalarının ekran konumuna göre yeniden yerleşiyorlar. */
.hv-ground {
    position: absolute; left: 50%; top: 50%; z-index: 0;
    transform: translate(-50%, -50%);
    transform-origin: 50% 58%;
    will-change: transform;
}
.hv-sat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
/* Mobil ve masaüstü farklı parsel gösteriyor: biri dikey kare, diğeri geniş. */
.only-wide { display: none !important; }
@media (min-width: 860px) {
    .only-narrow { display: none !important; }
    .only-wide { display: revert !important; }
    span.only-wide, div.only-wide { display: inline-flex !important; }
    svg.only-wide, img.only-wide { display: block !important; }
    .hv-dot.only-wide { display: block !important; }
}
.hv-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Parsel seçimi: sınır çizilir, üstünden ışık geçer, köşe tutamakları açılır,
   içi tepeden aşağı taranarak dolar. */
.hv-fill { fill: rgba(255, 58, 46, .30); stroke: none; }
.hv-scan {
    fill: url(#hvSweep); opacity: .0; mix-blend-mode: screen;
}
.hv-line-base {
    fill: none; stroke: rgba(6, 18, 10, .42); stroke-width: 3.6; vector-effect: non-scaling-stroke;
    stroke-linejoin: round; stroke-linecap: round;
    /* Poligonlarda pathLength="1000": çizim animasyonu ölçekten bağımsız
       çalışsın (geniş karede kesikli desen hattı tamamen gizliyordu). */
    stroke-dasharray: 1000;
}
.hv-line {
    fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 1.6; vector-effect: non-scaling-stroke;
    stroke-linejoin: round; stroke-linecap: round;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .45));
    stroke-dasharray: 1000;
}
.hv-comet {
    fill: none; stroke: url(#hvSweep); stroke-width: 2.6; vector-effect: non-scaling-stroke;
    stroke-linecap: round; opacity: 0;
    filter: drop-shadow(0 0 5px rgba(255, 190, 150, .8));
    stroke-dasharray: 70 930;
}
/* Trafik: uydu karesindeki gerçek asfaltın üzerine hiçbir şey çizilmez.
   laneA1/A2 ve laneB1/B2, yol ekseninin sağına ve soluna kaydırılmış görünmez
   kopyalardır; araçlar animateMotion ile o şeritleri izler. */
.hv-lanes path { pointer-events: none; }
/* Asfalt zaten koyu: araclar acik tonda okunuyor, koyular leke gibi
   duruyordu. Palet beyaz/gumus agirlikli, iki tane de renkli arac. */
/* Araçlar videolardaki tepeden çekim görselleri (public/assets/img/cars).
   Renk ve gölge görselin kendisinde; burada yalnızca yumuşatma kapatılıyor,
   bu ölçekte tarayıcının bulanıklaştırması aracı lekeye çeviriyor. */
.hv-cars image { image-rendering: auto; }
.hv-play .hv-cars { animation: hvFade .8s ease-out 1.6s both; }
@media (prefers-reduced-motion: reduce) { .hv-cars { display: none; } }

/* KENAR ÖLÇÜLERİ. Görselin kendi ölçeğinde duruyorlar: kamera yaklaşınca
   parselle birlikte büyüyüp dönüyorlar. Geniş kadrajda kalabalık yapmasınlar
   diye ancak kamera parsele yaklaşınca (.hv-zoom) beliriyorlar. */
/* Yazı biçimi oynatıcıdaki .pset-edge ile aynı: beyaz, 600, koyu yumuşak hale
   (oradaki text-shadow'un SVG karşılığı drop-shadow). */
.hv-edge { filter: drop-shadow(0 0 2px rgba(0,0,0,.95)) drop-shadow(0 1px 3px rgba(0,0,0,.85)); }
.hv-edge text {
    fill: #fff; font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: -.01em;
    text-anchor: middle; dominant-baseline: middle;
    opacity: 0; transition: opacity .45s ease;
}
.hv-zoom .hv-edge text { opacity: 1; }
.hv-zoom .hv-edge text:nth-child(2) { transition-delay: .06s; }
.hv-zoom .hv-edge text:nth-child(3) { transition-delay: .12s; }
.hv-zoom .hv-edge text:nth-child(4) { transition-delay: .18s; }
.hv-zoom .hv-edge text:nth-child(5) { transition-delay: .24s; }
.hv-zoom .hv-edge text:nth-child(6) { transition-delay: .3s; }

/* Parsel küçük kaldığında kaybolmasın: kontur ve köşe tutamakları bir tık
   güçlü (iki kadrajda da). */
.hv-shape .hv-line { stroke-width: 2.2; }
.hv-shape .hv-line-base { stroke-width: 4.4; }

.hv-vtx circle {
    r: 4.5; fill: rgba(255, 255, 255, .95); stroke: rgba(6, 18, 10, .45); stroke-width: 1.4; vector-effect: non-scaling-stroke;
    opacity: 0; transform-box: fill-box; transform-origin: 50% 50%;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

@keyframes hvDraw  { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes hvComet { 0% { opacity: 0; stroke-dashoffset: 1000; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes hvScan  { 0% { opacity: 0; transform: translateY(-420px); } 18% { opacity: .55; } 82% { opacity: .5; } 100% { opacity: 0; transform: translateY(560px); } }
@keyframes hvFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes hvVtx   { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.35); } 100% { opacity: .95; transform: scale(1); } }
@keyframes hvGlow  { 0%, 100% { filter: drop-shadow(0 0 4px rgba(182,255,110,.75)) drop-shadow(0 1px 3px rgba(0,0,0,.65)); } 50% { filter: drop-shadow(0 0 9px rgba(182,255,110,1)) drop-shadow(0 1px 3px rgba(0,0,0,.65)); } }
@keyframes hvUp    { from { opacity: 0; transform: translate(-50%, -50%) translateY(10px); } to { opacity: 1; transform: translate(-50%, -50%) translateY(0); } }
@keyframes hvPop   { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes hvArea  { from { opacity: 0; transform: translate(-50%, -50%) scale(.85); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Etiketleri noktalarına bağlayan ince beyaz ipler (ekran koordinatı). */
.hv-wires { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.hv-wires line { stroke: rgba(255,255,255,.95); stroke-width: 1.6; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }

.hv-vig {
    position: absolute; inset: 0; z-index: 6; pointer-events: none;
    background: linear-gradient(180deg, rgba(4,12,18,.30) 0%, rgba(4,12,18,0) 20%, rgba(4,12,18,0) 60%, rgba(4,12,18,.30) 78%, rgba(4,12,18,.70) 100%);
}

.hv-dot {
    position: absolute; z-index: 3; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%;
    background: #fff; transform: translate(-50%, -50%) scale(.4); opacity: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
    transition: opacity .35s ease, transform .45s cubic-bezier(.2,.9,.3,1.6);
}
.hv-dot.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Zemindeki halka: işaret oturduğunda bir kez açılır. */
.hv-dot:before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 17px;
    margin: -8.5px 0 0 -23px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.75); opacity: 0; pointer-events: none;
}
.hv-dot.is-on:before { animation: hvRing 1.1s cubic-bezier(.2,.7,.3,1) .12s both; }
/* Damla nabzı: sürekli hafifçe büyüyüp küçülür. */
.hv-dot:after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px;
    margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: rgba(255,255,255,.55);
    opacity: 0; pointer-events: none;
}
.hv-dot.is-on:after { animation: hvDrop 2.2s ease-in-out .6s infinite; }
.hv-dot.d0 { background: #ff4b3e; }
.hv-dot.d0:before { border-color: rgba(255,120,104,.8); }
.hv-dot.d0:after { background: rgba(255,90,74,.5); }
@keyframes hvRing {
    0% { opacity: 0; transform: scale(.25); }
    35% { opacity: .95; }
    100% { opacity: 0; transform: scale(1.15); }
}
@keyframes hvDrop {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: 0; transform: scale(2.6); }
}

.hv-loc {
    position: absolute; z-index: 4; left: 4.4%; top: 3.2%; opacity: 0;
    display: inline-flex; align-items: center; gap: 8px; color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.hv-loc > svg { width: 18px; height: 18px; color: #7fe6d4; flex: none; }
.hv-loc span { display: grid; gap: 0; padding-left: 8px; border-left: 1.5px solid rgba(255,255,255,.4); }
.hv-loc b { font-size: var(--fs-label); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.hv-loc small { font-size: var(--fs-micro); font-weight: 500; opacity: .9; line-height: 1.3; }

/* Etiketler: koyu cam, solda fıstık yeşili şerit. Konumları JS verir. */
.hv-card, .hv-chip, .hv-area {
    position: absolute; z-index: 4; left: 0; top: 0; opacity: 0;
    transform: translate(-50%, calc(-50% + 8px)) scale(.96);
    transition: opacity .3s ease .5s, transform .36s cubic-bezier(.2,.9,.3,1.3) .5s;
    background: rgba(10, 18, 16, .82); color: #fff;
    border: 1px solid rgba(255,255,255,.10); border-left: 2.5px solid #7fe6d4;
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 6px 18px rgba(4,12,18,.45);
}
.hv-card.is-on, .hv-chip.is-on, .hv-area.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Kapanırken beklemesin. */
.hv-card:not(.is-on), .hv-chip:not(.is-on), .hv-area:not(.is-on) { transition-delay: 0s, 0s; }
.hv-card { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 5px 9px 5px 7px; border-radius: 9px; }
.hv-card .ic { width: 13px; height: 13px; color: #7fe6d4; flex: none; }
.hv-card .tx { display: grid; gap: 1px; }
.hv-card b { font-size: var(--fs-label); font-weight: 700; line-height: 1.2; letter-spacing: .01em; }
.hv-card small { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-micro); font-weight: 500; opacity: .9; line-height: 1.2; }
.hv-card small svg { width: 10px; height: 10px; color: #fff; opacity: .9; flex: none; }
.hv-card small i { font-style: normal; opacity: .45; }

.hv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; border-radius: 8px; font-size: var(--fs-micro); font-weight: 500; line-height: 1.25; }
.hv-chip svg { width: 12px; height: 12px; color: #7fe6d4; flex: none; }

/* PARSEL KARTI — boyutu sabit, İÇERİĞİ dönüyor:
   1. sahne ada/parsel + alan, 2. sahne fiyat. İki sahne üst üste duruyor,
   kutunun genişliğini ikisinden GENİŞ olanı belirliyor (grid ile aynı hücre),
   böylece geçişte kart zıplamıyor. */
.hv-area {
    display: inline-flex; flex-direction: row; align-items: center; gap: 9px;
    padding: 7px 13px 7px 7px; border-radius: 13px; white-space: nowrap;
    background: rgba(255, 255, 255, .97); color: var(--ink);
    border: 0; box-shadow: 0 12px 30px rgba(4, 12, 18, .32);
}
.hv-area .pin {
    width: 26px; height: 26px; flex: none; padding: 5px; border-radius: 9px;
    background: var(--ana-soft); color: var(--ana); box-sizing: border-box;
}
.hv-area-sahne { display: grid; }
.hv-s {
    grid-area: 1 / 1; display: grid; gap: 1px; text-align: left;
    animation: hvSahne 7s ease-in-out infinite;
}
.hv-s b { font-size: .82rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hv-s i { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--muted); line-height: 1.15; font-variant-numeric: tabular-nums; }
.hv-s2 b { color: var(--ana); }
/* ₺ işareti gövde yazı tipinde yok; sistem yazı tipine bırakılıyor. */
.hv-s .tl { font-style: normal; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; font-weight: 700; }
.hv-s2 { animation-name: hvSahne2; }
@keyframes hvSahne {
    0%, 42% { opacity: 1; transform: translateY(0); }
    50%, 92% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes hvSahne2 {
    0%, 42% { opacity: 0; transform: translateY(4px); }
    50%, 92% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .hv-s { animation: none; }
    .hv-s2 { opacity: 0; }
}

/* Giriş dizisi: parselin çizilmesi ve boyanması. Etiketleri JS sırayla açar. */
.hv-play .hv-line-base { animation: hvDraw 1.6s cubic-bezier(.45,0,.2,1) .45s both; }
.hv-play .hv-line   { animation: hvDraw 1.6s cubic-bezier(.45,0,.2,1) .45s both; }
.hv-play .hv-comet  { animation: hvComet 1.9s cubic-bezier(.45,0,.2,1) .4s both; }
.hv-play .hv-vtx circle { animation: hvVtx .5s cubic-bezier(.2,.9,.3,1.4) both; }
.hv-play .hv-vtx circle:nth-child(1) { animation-delay: 1.75s } .hv-play .hv-vtx circle:nth-child(2) { animation-delay: 1.8s }
.hv-play .hv-vtx circle:nth-child(3) { animation-delay: 1.85s } .hv-play .hv-vtx circle:nth-child(4) { animation-delay: 1.9s }
.hv-play .hv-vtx circle:nth-child(5) { animation-delay: 1.95s } .hv-play .hv-vtx circle:nth-child(6) { animation-delay: 2s }
.hv-play .hv-vtx circle:nth-child(7) { animation-delay: 2.05s } .hv-play .hv-vtx circle:nth-child(8) { animation-delay: 2.1s }
.hv-play .hv-vtx circle:nth-child(9) { animation-delay: 2.15s } .hv-play .hv-vtx circle:nth-child(10) { animation-delay: 2.2s }
.hv-play .hv-fill   { animation: hvFade .9s ease-out 1.85s both; }
.hv-play .hv-scan   { animation: hvScan 1.5s cubic-bezier(.4,0,.3,1) 1.75s both; }
.hv-play .hv-loc    { animation: hvFade .6s ease-out .2s both; }
.hv-wires line.is-on { opacity: 1; }
.hv-dot.d0 { width: 11px; height: 11px; }

/* MASAÜSTÜ: parsel doğrudan görünür.
   Geniş karedeki SVG'de çizim/soluklaşma animasyonları Chrome'da başlangıç
   (görünmez) durumunda takılı kalıyor — hesaplanan stil "bitti" dese de
   boyama yapılmıyor. Ölçtüm: animasyon kapatıldığı an hat ve dolgu
   görünüyor. Mobilde aynı animasyonlar sorunsuz, orada dokunulmadı. */
@media (min-width: 860px) {
    /* Hat, dolgu ve köşeler HER ZAMAN görünür (çizim animasyonu burada
       başlangıç durumunda takılıyordu). */
    /* SOL KENAR CIZILMIYORDU. Cokgende `stroke-dasharray: 1000` +
       `pathLength="1000"` cizim animasyonu icin duruyor; ama Chrome
       <polygon>'un pathLength'ini hesaplarken KAPANIS KENARINI saymiyor.
       1000 birim bes acik kenara boluununce (362 kullanici birimi) desen
       tam orada bitiyor, kapanis kenari (68 birim) bosluga dusuyordu --
       yani hattin %16'si. Animasyon zaten burada kapali, deseni de
       kaldiriyoruz. */
    .hv-play .hv-line-base { animation: none; stroke-dashoffset: 0; stroke-dasharray: none; }
    .hv-play .hv-line { stroke-dasharray: none; }
    .hv-play .hv-fill { animation: none; opacity: 1; }
    .hv-play .hv-vtx circle { animation: none; opacity: .95; transform: none; }

    /* Masaüstü efekti: hat yavaşça nefes alıyor, parselin içinden aralıklarla
       bir ışık taraması geçiyor. İkisinin de TABANI görünür/zararsız durum,
       yani animasyon takılsa bile işaretleme bozulmuyor. */
    .hv-play .hv-line { animation: none; stroke-dashoffset: 0; }
    /* Yukaridan asagi suzulen beyaz bant kalkti, yerini RADAR aldi.
       Bant duz beyazdi (url(#hvSweep) bu svg'de tanimli degil, bkz.
       landing.php) ve parseli olcen bir sey anlatmiyordu. */
    .hv-shape.only-wide .hv-scan { display: none; }
    .hv-play .hv-comet { display: none; }

    /* ---------- PARSEL RADARI (yalniz genis kadraj) ----------
       Donme ve halka yariciplari app.js'te kare kare veriliyor: bu svg'de
       CSS animasyonlari Chrome'da baslangic durumunda takiliyor. Tabani
       hareketsizken de duzgun: koni durur, halkalar sonuk kalir. */
    .hv-shape.only-wide .hv-fill { fill: url(#hvFillW); }
    .hv-cone { fill: url(#hvRadarW); }
    /* Konun on kenari: taramanin nereye baktigini soyleyen keskin isin. */
    .hv-ray {
        stroke: #ff7b63; stroke-width: 1.5; vector-effect: non-scaling-stroke;
        opacity: .9; filter: drop-shadow(0 0 3px rgba(255, 90, 60, .9));
    }
    /* Halkalar KESIK cizgi: radar cemberi gibi okunuyor, hem de dolu
       cember parselin dokusunu bogmuyor. Desen bilerek seyrek (6 cizik /
       14 bosluk); sik desen bu olcekte duz cizgiye donuyordu. */
    .hv-ring {
        /* Renk KOYU KIRMIZI DEGIL: halkalar parselin kendi koyu kirmizi
           dolgusunun uzerinde duruyor, kirmiziyi kirmizinin ustune koyunca
           hicbir sey okunmuyordu. Acik mercan tonu dolgudan ayriliyor. */
        fill: none; stroke: rgba(255, 196, 178, .92); stroke-width: 1.3;
        stroke-dasharray: 5 10; stroke-linecap: round;
        vector-effect: non-scaling-stroke; opacity: 0;
        filter: drop-shadow(0 0 2px rgba(120, 8, 4, .7));
    }
    /* Kose tutamaklari kucultuldu: 4,5 piksellik beyaz boncuklar hattin
       ustune oturup kenarlari kesiyordu. */
    .hv-shape.only-wide .hv-vtx circle { r: 3; stroke-width: 1.1; }
    /* Kenar ortasi noktalari: koselerden bir tik ufak, sinir olculmus
       gibi dursun diye. */
    .hv-mid circle {
        r: 1.9; fill: rgba(255, 255, 255, .9); stroke: rgba(6, 18, 10, .5); stroke-width: .9;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
    }
    .hv-core {
        fill: #ff4326; stroke: rgba(255, 255, 255, .85); stroke-width: 1.2;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 0 4px rgba(255, 60, 35, .95));
    }
}

@media (prefers-reduced-motion: reduce) {
    .hv-play .hv-line { animation: none; stroke-dashoffset: 0; }
    .hv-play .hv-comet, .hv-play .hv-scan { display: none; }
    /* Radar durur: koni ve halkalar gizlenir, cekirdek isaret kalir. */
    .hv-sweep, .hv-ring { display: none; }
    .hv-mid circle { opacity: 1; }
    .hv-play .hv-fill, .hv-play .hv-loc, .hv-play .hv-vtx circle { animation: none; opacity: 1; }
    .hv-dot, .hv-card, .hv-chip, .hv-area, .hv-wires line { opacity: 1; transition: none; }
    .hv-dot { transform: translate(-50%, -50%); }
    .hv-card, .hv-chip, .hv-area { transform: translate(-50%, -50%); }
}

.hero-vid, .hero-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
    display: block;
}
.hero-visual:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,31,46,.08) 0%, transparent 40%, rgba(15,31,46,.22) 100%); pointer-events: none; }
.search-card {
    position: relative; z-index: 3; margin: -28px 4px 0; background: #fff; border-radius: 22px; padding: 12px;
    box-shadow: var(--shadow); display: grid; gap: 10px;
}
.search-bar {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #f4f7f9;
    border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 8px 8px 8px; cursor: pointer;
}
.search-bar:hover, .search-bar:focus-visible { border-color: var(--green); outline: none; }
.search-ico, .search-tool {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--green-soft); color: var(--green-2);
}
/* Konumum + fotoğraftan oku: aramanın sağındaki iki yuvarlak araç. */
.search-tools { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.search-tool { background: #fff; border: 1px solid var(--line); color: var(--teal); cursor: pointer; }
.search-tool:hover, .search-tool:focus-visible { border-color: var(--teal); outline: none; }
.search-ico svg, .search-tool svg { width: 22px; height: 22px; }
.search-body { flex: 1; min-width: 0; display: grid; gap: 1px; text-align: left; }
.search-body strong { font-size: var(--fs-title); font-weight: 700; color: var(--ink); line-height: 1.25; }
.search-body small { font-size: var(--fs-label); color: var(--muted); font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-go {
    position: relative;
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: 18px;
    background: var(--ana);
    color: #fff;
    font: inherit;
    font-size: var(--fs-title);
    font-weight: 700;
    letter-spacing: -.005em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 8px 0 18px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(59, 129, 146, .30);
    transition: transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .16s ease, filter .16s ease;
}
/* Üstten geçen ince parlaklık: düz yeşil blok gibi durmasın. */
.home-go:before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 48%);
}
.home-go span { position: relative; }
.home-go .go-arr {
    position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center;
    transition: transform .2s cubic-bezier(.2, .8, .3, 1), background .2s ease;
}
.home-go .go-arr svg { width: 19px; height: 19px; }
/* Büyüteç yalnız mobil kartta; masaüstünde metin + ok yeterli. */
.home-go .go-find { display: none; }
.home-go b { font-weight: 800; }
.home-go:hover { filter: brightness(1.05); box-shadow: 0 12px 28px rgba(59, 129, 146, .38); }
.home-go:hover .go-arr { transform: translateX(3px); background: rgba(255, 255, 255, .26); }
.home-go:active { transform: translateY(1px) scale(.995); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px;
    padding: 14px 22px; font-weight: 800; font-size: 1rem; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    text-align: center;
}
.btn svg { width: 20px; height: 20px; }
.btn b { font-weight: 800; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-primary { color: #fff; background: var(--ana); box-shadow: 0 8px 20px rgba(59, 129, 146, .28); }
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 10px 24px rgba(59, 129, 146, .34); }
.btn-ghost { background: #fff; border: 1.5px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ana); color: var(--ana-ink); }
.btn-xl { width: 100%; padding: 17px 22px; font-size: 1.06rem; letter-spacing: .01em; }
.btn-sm { padding: 9px 14px; font-size: .86rem; }

.trust-line { display: none; }
.trust-line svg { width: 20px; height: 20px; color: var(--green-2); }

/* ---------- Kıvrımın altı: örnek video, adımlar, öne çıkanlar ---------- */
.home-rest { padding: 0 16px; }

/* ---------- ÖRNEK VİDEO (alt bölüm) ---------- */
.ornek { margin-top: 26px; }
.ornek .eyebrow, .how .eyebrow {
    font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: #7a8692; margin: 0 0 8px;
}
.ornek h2, .how h2 {
    font-size: clamp(1.45rem, 6.4vw, 1.8rem); font-weight: 700; letter-spacing: -.03em;
    line-height: 1.15; color: var(--ink); margin: 0 0 8px;
}
.how h2 em, .ornek h2 em { font-style: normal; color: var(--ana); }
.ornek-lead { margin: 0 0 14px; color: var(--muted); font-size: .95rem; line-height: 1.4; }
/* ÖRNEK VİDEOLAR — telefonda yana kayan galeri, masaüstünde ızgara.
   Kartlar tam genişliğin biraz altında: kenarda bir sonraki kartın ucu
   görünüyor, "kaydırılabilir" olduğu kendiliğinden anlaşılıyor. */
.ornek-liste {
    display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
    gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    margin: 0 -16px; padding: 2px 16px 12px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ornek-liste::-webkit-scrollbar { display: none; }
.ornek-liste > .ornek-kare { scroll-snap-align: center; }
/* Kaydırma noktaları: kaç kart olduğunu ve nerede olunduğunu söyler. */
.ornek-nokta { display: flex; justify-content: center; gap: 6px; margin: 2px 0 0; }
.ornek-nokta i {
    width: 6px; height: 6px; border-radius: 50%; background: #cfd8dd;
    transition: width .2s ease, background .2s ease;
}
.ornek-nokta i.is-on { width: 18px; border-radius: 999px; background: var(--ana); }
.ornek-kare {
    position: relative; display: block; border-radius: 18px; overflow: hidden;
    aspect-ratio: 16 / 10; background: #dde4e8; box-shadow: var(--shadow-sm);
}
.ornek-kare img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ok-canli { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.ok-canli.is-oynuyor { opacity: 1; }
.ok-canli.is-oynuyor ~ .ok-play { width: 46px; height: 46px; background: rgba(12, 22, 30, .4); }
.ok-canli.is-oynuyor ~ .ok-play svg { width: 20px; height: 20px; }
.ornek-h-genis { display: none; }
@media (min-width: 860px) {
    .ornek-h-tel, .ok-canli { display: none; }
    .ornek-h-genis { display: inline; }
}
.ok-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 62px; height: 62px; border-radius: 50%; background: rgba(12, 22, 30, .58);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .18s cubic-bezier(.2,.8,.3,1), background .18s ease;
}
.ornek-kare:hover .ok-play { transform: translate(-50%, -50%) scale(1.07); background: rgba(12, 22, 30, .72); }
.ok-play svg { width: 26px; height: 26px; margin-left: 3px; }
.ok-sure {
    position: absolute; right: 12px; bottom: 12px; padding: 4px 9px; border-radius: 8px;
    background: rgba(8, 16, 24, .75); color: #fff; font-size: .72rem; font-weight: 700;
}
.ok-alt {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 9px;
    padding: 30px 14px 12px; color: #fff;
    background: linear-gradient(180deg, rgba(8,16,24,0) 0%, rgba(8,16,24,.72) 60%);
}
.ok-alt > svg { width: 17px; height: 17px; flex: none; }
.ok-alt span { display: grid; gap: 1px; min-width: 0; }
.ok-alt b { font-size: .84rem; font-weight: 700; letter-spacing: -.01em; }
.ok-alt i { font-style: normal; font-size: .76rem; opacity: .85; }
.ornek-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 14px auto 0; width: max-content; padding: 13px 26px; border-radius: 999px;
    background: var(--ana-soft); color: var(--ana-ink); font-size: .95rem; font-weight: 700;
}
.ornek-btn svg { width: 19px; height: 19px; }
.ornek-btn:hover { background: #dceaee; }

/* ---------- KİM NE İÇİN KULLANIYOR? (üç kitle kartı) ---------- */
/* Örnek galerisiyle aynı şerit (.ornek-liste) kullanılıyor; burada yalnız
   kartın içi tarif ediliyor. İki galeri üst üste tek uzun şerit gibi
   okunmasın diye bölüm ince bir çizgiyle ayrıldı.

   RENK: markanın turkuazı ikinci kartta duruyor; diğer ikisi sıcak kum ve
   lacivert. Üç ayrı doygun renk (mockup'taki turuncu/mavi/yeşil) turkuaz
   kimlikle çarpışıyordu, zemin yerine yalnız başlık şeridi ve işaretler
   renk taşıyor. */
.ornek.kimicin { padding-top: 26px; border-top: 1px solid var(--line); }
/* AIRBNB İLAN KARTI (3 Ekim 2026): büyük yuvarlak kapak, sol üstte beyaz
   rozet, sağ üstte oynat düğmesi; altında kalın başlık + süre, gri
   satırlar, en altta kalın "Filmi izle". Çerçeve ve gölge yok — Airbnb'de
   kartı görselin kendisi taşır. Telefonda yana kayan şerit (bir sonraki
   kartın ucu görünür), kapak kare: üç kartın yüksekliği eski üç satırla
   aynı kalıyor. Masaüstünde üç kolon. Kapaklar dikey (9:16); kırpma
   parselin durduğu üst-orta bölgeye ayarlı. */
.kf-liste {
    display: grid; grid-auto-flow: column; grid-auto-columns: 56%; gap: 14px;
    margin: 16px -16px 0; padding: 0 16px 4px; text-align: left;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.kf-liste::-webkit-scrollbar { display: none; }
.kf-kart { display: grid; gap: 10px; align-content: start; color: inherit; text-decoration: none; scroll-snap-align: start; min-width: 0; }
.kf-kapak { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: #dfe7ea; isolation: isolate; }
.kf-kapak img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.kf-rozet {
    position: absolute; left: 10px; top: 10px; max-width: calc(100% - 58px);
    padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .95);
    color: #222; font-size: .7rem; font-weight: 700; letter-spacing: -.005em; line-height: 1.2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kf-oynat {
    position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(0, 0, 0, .32);
    border: 2px solid #fff; color: #fff;
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background .2s ease;
}
.kf-oynat svg { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; }
.kf-kart:hover .kf-kapak img { transform: scale(1.05); }
.kf-kart:hover .kf-oynat { transform: scale(1.12); background: var(--ana); }
.kf-yazi { display: grid; gap: 2px; min-width: 0; padding: 0 2px; }
.kf-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kf-ust b { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; min-width: 0; }
.kf-sure {
    flex: none; display: inline-flex; align-items: center; gap: 4px;
    font-size: .8rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums;
}
.kf-sure svg { width: 13px; height: 13px; }
.kf-yazi i { font-style: normal; font-size: .82rem; line-height: 1.35; color: var(--muted); }
.kf-yazi .kf-alt { display: none; }
.kf-izle { margin-top: 4px; font-size: .84rem; color: var(--ink); }
.kf-izle b { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (min-width: 860px) {
    .kf-liste {
        grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto;
        gap: 26px; margin: 22px 0 0; padding: 0; overflow: visible;
    }
    /* 4:5 kırpmada alttaki yanık altyazı yarım görünüyordu; üstten hizalı. */
    .kf-kapak { aspect-ratio: 4 / 5; }
    .kf-kapak img { object-position: 50% 0; }
    .kf-rozet { left: 14px; top: 14px; font-size: .76rem; padding: 6px 12px; }
    .kf-oynat { right: 14px; top: 14px; width: 38px; height: 38px; }
    .kf-ust b { font-size: 1rem; }
    .kf-yazi .kf-alt { display: block; }
}
@media (min-width: 860px) {
    /* Dört kart (7 Ekim 2026, WhatsApp filmi eklendi) 860 px'lik bölüme
       sığmıyor, rozetler kesiliyordu: liste üst menünün 1120/18 px kabı
       kadar genişler, ortalı kalır. */
    .kf-liste.kf-n4 {
        grid-template-columns: repeat(4, 1fr); gap: 20px;
        width: min(1084px, calc(100vw - 48px)); margin-left: calc(50% - min(542px, calc(50vw - 24px)));
    }
}

/* Alt CTA: kadrajdaki düğmenin aynısı. */
.alt-cta {
    width: 100%; height: 56px; margin: 22px 0 0; padding: 0 22px; border: 0; border-radius: 16px;
    background: var(--ana); color: #fff; font: inherit; font-size: 1rem; font-weight: 700;
    letter-spacing: .01em; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    box-shadow: 0 10px 24px rgba(59, 129, 146, .30);
    transition: filter .16s ease, box-shadow .16s ease, transform .16s ease;
}
.alt-cta:hover { filter: brightness(1.05); }
.alt-cta:active { transform: translateY(1px); }
.alt-cta i { display: inline-flex; flex: none; }
.alt-cta i svg { width: 25px; height: 25px; }
.alt-cta i circle { fill: #fff; }
.alt-cta i .ok { fill: var(--ana); }
.alt-cta span { position: relative; padding-left: 13px; }
.alt-cta span:before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 20px; background: rgba(255, 255, 255, .35);
}
/* Ok, yazının hemen yanında: kenara yaslanınca düğme dağınık duruyordu. */
.alt-cta b { display: inline-flex; margin-left: 2px; opacity: .92; }
.alt-cta b svg { width: 20px; height: 20px; }

/* Güven satırı: iki madde, ince ayraç. */
.guven {
    list-style: none; display: flex; align-items: center; justify-content: center; gap: 0;
    margin: 16px 0 0; padding: 0;
}
.guven li {
    display: flex; align-items: center; gap: 8px; padding: 0 16px;
    font-size: .78rem; font-weight: 600; color: var(--ink-2);
}
.guven li + li { border-left: 1px solid var(--line); }
.guven svg { width: 17px; height: 17px; color: var(--ana); flex: none; }

/* Adımlar: kutu yok, ince ayraçlı üç satır. */
.how { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
/* AIRBNB "BAŞLAMAK ÇOK KOLAY" DÜZENİ (3 Ekim 2026): numara | başlık +
   açıklama | çizim. Masaüstünde başlık solda, adımlar sağda (bkz. aşağı). */
.hw-steps { list-style: none; margin: 10px 0 0; padding: 0; }
.hw-steps li {
    display: grid; grid-template-columns: 22px 1fr 76px; gap: 14px; align-items: center;
    padding: 18px 0; border-top: 1px solid var(--line);
}
.hw-steps li:first-child { border-top: 0; }
.hw-no { align-self: center; margin-top: -.08em; font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.hw-metin { display: grid; gap: 4px; min-width: 0; }
.hw-steps b { font-size: 1.04rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); line-height: 1.25; }
.hw-steps small { font-size: .9rem; color: var(--muted); line-height: 1.4; }
.hw-resim {
    width: 76px; height: 76px; border-radius: 18px; display: grid; place-items: center;
    transition: transform .4s cubic-bezier(.3, 1.5, .5, 1);
}
.hw-resim svg { width: 66px; height: 66px; overflow: visible; filter: drop-shadow(0 4px 8px rgba(15, 31, 46, .10)); }
.hw-r1 { background: linear-gradient(145deg, #eef7f8, #d9eef1); }
.hw-r2 { background: linear-gradient(145deg, #edf8f3, #d5efe6); }
.hw-r3 { background: linear-gradient(145deg, #eef3f8, #dce6f1); }
.hw-steps li:hover .hw-resim { transform: scale(1.07) rotate(-3deg); }
/* Satır görününce çizim kendi küçük hareketini yapıyor: iğne düşer,
   parsel çizilir, onay işareti atılır, oynat düğmesi nabız atar. */
.hw-steps li.fx-gor .hw-pin { animation: hwDus .7s cubic-bezier(.3, 1.4, .5, 1) .35s backwards; }
.hw-steps li.fx-gor .hw-parsel { stroke-dasharray: 100; animation: hwCiz 1.1s ease .3s backwards; }
.hw-steps li.fx-gor .hw-tik { stroke-dasharray: 100; animation: hwCiz .5s ease 1.2s backwards; }
.hw-steps li.fx-gor .hw-oynat { transform-origin: 49px 40px; animation: hwNabiz 2.4s ease-in-out .6s infinite; }
@keyframes hwDus { from { transform: translateY(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hwCiz { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes hwNabiz { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
    .hw-steps li.fx-gor .hw-pin, .hw-steps li.fx-gor .hw-parsel,
    .hw-steps li.fx-gor .hw-tik, .hw-steps li.fx-gor .hw-oynat { animation: none; }
}

/* Üç özellik tek satır. */
.why {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
    font-size: var(--fs-label); font-weight: 600; color: var(--muted);
}
.why i { width: 3px; height: 3px; border-radius: 50%; background: #c3ccd2; display: inline-block; }

@media (min-width: 760px) {
    .home-rest { padding: 0; max-width: 860px; margin: 0 auto; }
    .ornek { max-width: 900px; margin: 40px auto 0; text-align: center; }
    .ornek-lead { max-width: 520px; margin: 0 auto 16px; }
    .ornek-liste {
        grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto;
        gap: 16px; overflow: visible; margin: 0; padding: 0;
    }
    .ornek-nokta { display: none; }
    .ornek-kare { aspect-ratio: 16 / 10; }
    .alt-cta { max-width: 420px; margin-left: auto; margin-right: auto; }
    .how { margin-top: 40px; }
    /* Airbnb ev sahibi sayfası gibi: büyük başlık solda, adımlar sağda. */
    .how {
        display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        column-gap: 64px; align-items: start; padding-top: 40px;
    }
    .how > .eyebrow, .how > h2, .how > .alt-cta, .how > .guven { grid-column: 1; }
    .how > .hw-steps { grid-column: 2; grid-row: 1 / span 5; margin: 0; }
    .how > h2 { font-size: 2.7rem; line-height: 1.06; margin-bottom: 0; }
    .how > .alt-cta { margin: 26px 0 0; max-width: 340px; }
    .how > .guven { justify-content: flex-start; }
    .how > .guven li:first-child { padding-left: 0; }
    .hw-steps li { grid-template-columns: 30px 1fr 104px; gap: 20px; padding: 24px 0; }
    .hw-no { font-size: 1.7rem; }
    .hw-steps b { font-size: 1.2rem; }
    .hw-steps small { font-size: .98rem; }
    .hw-resim { width: 104px; height: 104px; border-radius: 22px; }
    .hw-resim svg { width: 88px; height: 88px; }
    .guven { gap: 6px; }
}

@media (max-width: 859px) {
    .hero-script { display: none; }
    /* Tek parça ilk görünüm: başlık, tam genişlikte kadraj, kadraja taşan beyaz
       kart, güven satırı ve kaydırma ipucu. Kadraj sayfaya karışsın diye
       kenarları yumuşatılıyor. */
    .home { padding: 0 0 20px; }
    /* KATIN ALTINDAKİ TAMPON.
       iOS 26'da Safari'nin YÜZEN çubuğu sayfanın üstünde duruyor: tarayıcı
       sayfaya 695 px yükseklik bildiriyor ama ekranda 796 px görünüyor
       (ölçüldü, iPhone 15). Tarayıcının hiç söylemediği bu ~100 px'lik
       alanda alttaki kart yarım yarım ortaya çıkıyordu. Kat ile bir sonraki
       bölüm arasına boş bir tampon konuyor: hangi telefonda ne kadar taşarsa
       taşsın görünen şey boşluk oluyor, kesilmiş kart değil. */
    /* Tampon BOŞ DEĞİL: kadraj fotoğrafı bu alanın arkasında devam ediyor
       (aşağıda .hero-visual bottom: -150px). Telefon hangi yüksekliği
       bildirirse bildirsin, kartın altında görünen şey fotoğrafın sönümlenen
       devamı oluyor; ne kesilmiş kart ne de boş bir şerit. */
    .home-rest { position: relative; z-index: 1; }
    /* 29 Eylül 2026: 118 px'ti. Fiyat kartlarıyla kat doldu; altında
       boş bir ekran kalıyordu. Örnek video hemen başlasın diye kısaldı. */
    .home-rest:before { content: ""; display: block; height: 36px; }
    .ornek:not(.kimicin) { margin-top: 0; }
    .ornek:not(.kimicin) .ornek-lead { display: none; }
    .ornek:not(.kimicin) h2 { margin-bottom: 12px; }
    .home-fold {
        position: relative;
        display: flex;
        flex-direction: column;
        /* ALTTAKİ KARTIN GÖRÜNEN ŞERİDİ HER TELEFONDA AYNI OLSUN.
           Eski hesap sabit bir pay (5,85rem) düşüp bir de --sat'ı ÇIKARIYORDU;
           oysa üst bar zaten --sat kadar yastık taşıyor. Çentikli telefonlarda
           (iPhone 15'te ~59 px, iPhone 11'de ~44 px) bu ikinci çıkarma katlanıp
           kadrajı yukarı çekiyor, alttaki kartın yarısı görünüyordu. Artık
           yalnızca ÖLÇÜLEN üst bar yüksekliği (app.js --hdr-h yazar) ve 14 px
           düşülüyor. 29 Eylül 2026: 38 px'ti; fiyat şeridi eklenince altta
           boş bir bant gibi duruyordu, sahibi "altta boşluk kalıyor" dedi. */
        min-height: calc(100svh - var(--hdr-h, 56px) - 14px);
        min-height: calc(100dvh - var(--hdr-h, 56px) - 14px);
        /* Kesin değer JS'ten gelir (app.js --fold-h): iOS'ta dvh araç çubuğuna
           göre oynadığı için gerçek görünen yükseklik ölçülüp yazılıyor. */
        min-height: var(--fold-h, calc(100dvh - var(--hdr-h, 56px) - 14px));
    }
    /* Kadraj yukarıda kesilmiyor: başlığın arkasından geçip sayfa başlığına
       karışıyor. Metin kadrajın üstünde duruyor, üstteki açık perde okunurluğu
       sağlıyor. */
    .hero { position: relative; flex: 1 1 auto; min-height: 0; display: block; }
    /* Metin artık kadrajın İÇİNDE: kare gökyüzüyle başlıyor, başlık gökyüzünün
       üstünde duruyor. Okunurluğu üstteki koyu geçiş sağlıyor (.hero-visual:before). */
    .hero-copy { position: relative; z-index: 3; padding: 0 18px 4px; color: #fff; }
    .hero-copy .kicker, .hero-chips, .hero-sub, .hv-loc { display: none; }
    .hero h1 {
        font-size: clamp(1.78rem, 7.8vw, 2.36rem); line-height: 1.05; margin: 0 0 7px;
        color: #fff;
        text-shadow: 0 2px 18px rgba(5, 24, 45, .5);
        /* Taban beyaz, dalga canlı turkuaz: renk yazının içinden geçerken
           kelimeleri tamamen boyasın (referanstaki gibi belirgin). */
        --h1-wave: #7fe6d4;
    }
    .hero h1 em { color: inherit; }
    .hero h1 i { font-style: normal; color: #3fc8b2; }
    .hero-lead {
        display: block; max-width: 19em; margin: 0;
        color: rgba(255, 255, 255, .93); font-size: .86rem; line-height: 1.3; font-weight: 500;
        text-shadow: 0 1px 14px rgba(5, 24, 45, .55);
    }

    .hero-visual {
        position: absolute;
        left: 0; right: 0;
        top: calc(-1 * var(--hdr-h, 84px));
        bottom: 0;
        aspect-ratio: unset;
        min-height: 230px;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        /* Kadraj arama kartının ALTINDA da sürüyor: telefonun söylemediği
           alanı (iOS'taki yüzen çubuk bölgesi) fotoğraf dolduruyor. */
        bottom: -150px;
        -webkit-mask-image: linear-gradient(180deg, #000 0, #000 74%, transparent 96%);
        mask-image: linear-gradient(180deg, #000 0, #000 74%, transparent 96%);
    }
    /* BASLIGIN ARKASI ARTIK FOTOGRAF. Eskiden ustte duz beyaz bir perde
       vardi (kare yarim gorunuyordu); simdi kadraj gokyuzuyle basliyor,
       yazinin arkasina yalnizca koyu mavi bir gecis konuyor. Yukseklik
       --scrim-h: metin blogunun bittigi yer (app.js olcuyor). */
    .hero-visual:before {
        content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 7;
        height: calc(var(--scrim-h, 46%) + 80px); pointer-events: none;
        background: linear-gradient(180deg,
            rgba(6, 28, 54, .62) 0%,
            rgba(6, 28, 54, .48) 42%,
            rgba(6, 28, 54, .18) 78%,
            rgba(6, 28, 54, 0) 100%);
    }
    .hero-visual:after { display: none; }
    /* Alt kenarda hafif koyulasma: isaret etiketleri ve arama karti otursun. */
    .hv-vig { background: linear-gradient(180deg, rgba(4,12,18,0) 52%, rgba(4,12,18,.22) 86%, rgba(4,12,18,.30) 100%); }
    /* El yazısı not GÖKYÜZÜNDE, başlığın sağında durur: aşağısı işaret
       etiketlerinin alanı, oraya inince üst üste biniyordu. */
    /* El yazısı not gökyüzünde duruyor: beyaz ince yazı açık zeminde siliniyordu.
       Ağırlık 700, altında koyu bir hale var; artık net okunuyor. */
    .hero-visual .hv-script {
        top: calc(var(--scrim-h, 180px) - 116px); bottom: auto; right: 20px; left: auto;
        font-size: 1.22rem; font-weight: 700; color: #fff; text-align: right;
        text-shadow: 0 2px 10px rgba(5, 24, 45, .8), 0 0 2px rgba(5, 24, 45, .55);
        /* Üstteki koyu geçiş (hero-visual:before, z-index 7) yazının ÜZERİNE
           biniyordu: beyaz yazı %48 koyu perdenin altında gri görünüyordu. */
        z-index: 9;
    }
    .hero-visual .hv-script:after {
        background: #6fe0cd; width: 86%; height: 3px;
        box-shadow: 0 1px 6px rgba(5, 24, 45, .5);
    }

    .trust-row { flex: 0 0 auto; margin: 10px 14px 0; }
    .trust-row li { padding: 2px 4px; gap: 7px; font-size: .7rem; }
    .trust-row svg { width: 20px; height: 20px; }
    .scroll-hint { flex: 0 0 auto; margin: 6px auto 0; gap: 3px; }
    .scroll-hint .mouse { width: 15px; height: 23px; }
    .scroll-hint svg { width: 15px; height: 15px; }
    /* ARAMA KARTI (mobil) — referans tasarımın birebir karşılığı:
       beyaz kart, tek satır arama (yuvarlak konum rozeti + soluk ipucu +
       iki araç düğmesi) ve altında turkuaz tek düğme. Yükseklik eski
       tasarımın ~%25 altında: kart ilk görünümde kadrajı yemiyor. */
    .search-card {
        position: relative;
        flex: 0 0 auto;
        z-index: 4;
        margin: -34px 14px 0;
        padding: 10px;
        background: #fff;
        border-radius: 22px;
        box-shadow: 0 14px 34px rgba(15, 31, 46, .14);
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    /* KAYDIRMA TİTREMESİ: iOS'ta kayan fotoğrafın üstündeki backdrop-filter
       her karede yeniden bulanıklık hesaplatıyor; telefonda ekran titriyordu.
       Mobilde bulanıklık yerine biraz daha opak zemin kullanılıyor. */
    .hdr { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(246, 249, 247, .97); }
    .hv-card, .hv-chip, .hv-area {
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .hv-card, .hv-chip { background: rgba(10, 18, 16, .9); }

    /* PALET (referans karttan birebir): petrol mavi düğme #3b8192, açık gri
       yuvarlaklar #e8edef, koyu lacivert ikonlar, çerçeveli açık arama kutusu. */
    .search-card { --sc-ana: #3b8192; --sc-daire: #e8edef; --sc-ikon: #16283c; }
    .search-bar { background: transparent; border-color: transparent; box-shadow: none; padding: 2px 0; gap: 8px; }
    .search-ico { flex: 0 0 38px; width: 38px; height: 38px; background: var(--sc-daire); color: var(--sc-ikon); }
    .search-ico svg { width: 20px; height: 20px; }
    /* Tek satır ipucu: "Ada / parsel ara" başlığı mobilde yok. */
    .search-body strong { display: none; }
    /* İpucu KUTU içinde: referanstaki gibi açık zeminli, ince çerçeveli alan. */
    .search-body {
        display: flex; align-items: center; height: 40px; padding: 0 9px;
        background: #f7f8f9; border: 1px solid #e6eaee; border-radius: 11px;
    }
    .search-body small {
        font-size: .75rem; font-weight: 500; color: #8d97a7; letter-spacing: -.012em; line-height: 1.2;
    }
    /* İki araç: yan yana ama ayrık iki yuvarlak (konumum + fotoğraf). */
    .search-tools { gap: 7px; }
    .search-tool {
        flex: 0 0 38px; width: 38px; height: 38px;
        background: var(--sc-daire); border: 0; color: var(--sc-ikon);
    }
    .search-tool svg { width: 19px; height: 19px; }
    .search-tool.busy { opacity: .6; }
    .search-card .home-go {
        width: 100%; height: 50px; margin: 0; border-radius: 14px; gap: 11px; padding: 0 16px;
        font-size: .92rem; font-weight: 500; letter-spacing: .015em; text-transform: uppercase;
        background: var(--sc-ana);
        box-shadow: none;
    }
    .search-card .home-go:hover { filter: brightness(1.05); box-shadow: none; }
    /* Düğme DÜZ renk: üstteki parlaklık tabakası referansta yok. */
    .search-card .home-go:before { display: none; }
    /* Oynat rozeti: beyaz daire + düğme renginde üçgen. */
    .search-card .home-go .go-find svg { width: 23px; height: 23px; }
    .search-card .home-go .go-find circle { fill: #fff; }
    .search-card .home-go .go-find .ok { fill: var(--sc-ana); }
    .search-card .home-go span { word-spacing: .12em; }
    .search-card .home-go b { font-weight: 800; word-spacing: normal; }
    .search-card .home-go .go-find { display: inline-flex; align-items: center; flex: none; }
    .search-card .home-go .go-find svg { width: 20px; height: 20px; }
    /* Ok kenarda durur; ortadaki yazıyı kaydırmasın diye akışın dışında. */
    .search-card .home-go .go-arr {
        position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
        width: auto; height: auto; background: none; border-radius: 0;
    }
    .search-card .home-go .go-arr svg { width: 21px; height: 21px; stroke-width: 2; }
    .search-card .home-go:hover .go-arr { transform: translateY(-50%) translateX(3px); background: none; }
    .search-extra { margin-top: 2px; }
    /* Kart turkuaz: içindeki bağlantı da aynı dili konuşsun.
       (Seçiciler .search-card ile başlıyor: temel kurallar bu blokdan SONRA
       geldiği için aynı ağırlıkta yazılanlar eziliyordu.) */
    .search-card .search-alt { font-size: .8rem; }
    .search-card .search-alt a { gap: 7px; }
    .search-card .search-alt { color: #2f3d4f; }
    .search-card .search-alt a { color: #2f3d4f; }
    .search-card .search-alt a svg { width: 16px; height: 16px; color: #16283c; opacity: 1; }
    .search-card .search-alt a b { color: #3b7f8d; }

    /* --- ANA SAYFA BAŞLIĞI FOTOĞRAFIN ÜSTÜNDE ---
       Sayfa tepedeyken üst bar saydam: kadraj gökyüzüyle başlıyor, logo açık
       türevine geçiyor. Aşağı kaydırınca (body.hdr-solid) eski buzlu beyaz
       bar geri geliyor; yoksa açık renkli içeriğin üstünde okunmuyordu. */
    body.page-home-landing:not(.hdr-solid):not(.menu-acik) .hdr {
        background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    /* Fotoğrafın üstünde marka beyaz; aşağı kaydırınca (ya da menü açıkken)
       üst bar buzlu beyaza döndüğü için koyu rengine geri döner. */
    body.page-home-landing:not(.hdr-solid):not(.menu-acik) .brand-img-ac { opacity: 1; }
    body.page-home-landing:not(.hdr-solid):not(.menu-acik) .bx-ic { color: #78dcc6; }
    /* Fotoğraf üstünde yazı zaten beyaz: beyaz ışık görünmez. Şerit burada
       marka su yeşiline BOYAR (multiply), dalga harflerin üzerinden geçiyor. */
    body.page-home-landing:not(.hdr-solid):not(.menu-acik) .bx-shine:before {
        background: linear-gradient(90deg, transparent, rgba(104, 214, 190, .95), transparent);
        mix-blend-mode: multiply;
    }
    body.page-home-landing:not(.hdr-solid):not(.menu-acik) .brand-img:not(.brand-img-ac) { opacity: 0; }
    body.page-home-landing .brand-x-sm { width: 156px; }
    body.page-home-landing .hdr-in { align-items: flex-start; padding: 8px 18px 6px; }
    body.page-home-landing .hdr-actions { align-items: center; }


    /* Telefonda kart bir tık küçük. */
    .hv-area { padding: 6px 11px 6px 6px; gap: 8px; }
    .hv-area .pin { width: 24px; height: 24px; }
    .hv-s b { font-size: .78rem; }
    .hv-s i { font-size: .7rem; }
}
/* Dar telefon (iPhone SE / 360 px): ipucu satırı kırpılmasın — yazı küçülür,
   sondaki "yaz..." düşer, yuvarlaklar bir tık daralır. */
/* FİYAT ŞERİDİ (29 Eylül 2026): arama kartının hemen altında, ilk
   ekranda. Tek video fiyatı + çoklu paketin video başı fiyatı; tamamı
   paket sayfasına bağlı. */
.hero-fiyat {
    position: relative; z-index: 3; flex: 0 0 auto;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 14px 0;
}
.hf-kart {
    --hf: #2f6fe0; --hf-zemin: #f3f7ff; --hf-kenar: #dde8fb; --hf-daire: #e3edfe; --hf-dugme: #dde9fd; --hf-dugme-yazi: #2f6fe0;
    position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
    padding: 10px 8px 8px; background: var(--hf-zemin); border: 1px solid var(--hf-kenar); border-radius: 16px;
    box-shadow: 0 8px 20px rgba(15, 31, 46, .07); color: var(--ink); text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.hf-turkuaz { --hf: #178a93; --hf-zemin: #effafa; --hf-kenar: #cdeeee; --hf-daire: #d5f3f1; --hf-dugme: #1d8791; --hf-dugme-yazi: #fff; }
.hf-turuncu { --hf: #e0701b; --hf-zemin: #fff8f0; --hf-kenar: #f8e3cc; --hf-daire: #fde2c6; --hf-dugme: #fde4c8; --hf-dugme-yazi: #b4580f; }
.hf-kart:hover, .hf-kart:focus-visible { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(15, 31, 46, .12); outline: none; }
.hf-kart:active { transform: translateY(0); }
.hf-rozet {
    position: absolute; top: 7px; right: 6px; display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 7px 3px 6px; border-radius: 999px; background: #1d8791; color: #fff; font-size: .56rem; font-weight: 800;
}
.hf-rozet svg { width: 10px; height: 10px; }
.hf-ikon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--hf-daire); color: var(--hf); }
.hf-ikon svg { width: 18px; height: 18px; }
.hf-kart strong { margin-top: 7px; font-size: .84rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.hf-kart em { margin-top: 2px; font-style: normal; font-size: .6rem; font-weight: 500; line-height: 1.3; color: var(--muted); min-height: 2.6em; }
.hf-kart b { margin: 5px 0 8px; font-size: 1.12rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.hf-kart b i { font-style: normal; font-size: .68rem; font-weight: 700; color: var(--ink-2); letter-spacing: 0; }
.hf-sec {
    margin-top: auto; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 4px;
    height: 30px; border-radius: 999px; background: var(--hf-dugme); color: var(--hf-dugme-yazi); font-size: .74rem; font-weight: 800;
}
.hf-sec svg { width: 13px; height: 13px; }
/* Fiyat kartları yalnızca telefonda (sahibi 29 Eylül 2026: "masaüstünde
   yapma"). Masaüstünde ilk ekran eski hâlinde. */
@media (min-width: 860px) { .hero-fiyat { display: none; } }

@media (max-width: 379px) {
    .search-body small { font-size: .75rem; }
    .search-body small .st-ek { display: none; }
    .search-bar { gap: 7px; }
    .search-tools { gap: 6px; }
    .search-ico, .search-tool { flex-basis: 36px; width: 36px; height: 36px; }
    .search-card .home-go { font-size: .88rem; }
}
/* KISA EKRAN (740-780 px yükseklik): metin bloğu kısalır. Alan daralınca
   işaret etiketleri yazının altında yer bulamıyor, noktalarının ALTINA
   sarkıyorlardı; tanıtım cümlesi burada gereksiz, başlık işi görüyor. */
@media (max-width: 859px) and (max-height: 780px) {
    .hero h1 { font-size: clamp(1.62rem, 7vw, 2rem); margin-bottom: 4px; }
    .hero-lead { display: none; }
    /* Etiketler de bir tık küçülüyor: dar alanda hem sığsınlar hem manzarayı
       kapatmasınlar. */
    .hv-card { padding: 4px 8px 4px 6px; }
    .hv-card b { font-size: .72rem; }
    .hv-card small { font-size: .58rem; }
    .hv-card small svg { width: 9px; height: 9px; }
    .hv-chip { font-size: .6rem; padding: 3px 7px 3px 5px; }
}
@media (max-width: 859px) and (max-height: 700px) {
    .hero h1 { font-size: 1.62rem; }
    .hero-sub { font-size: .62rem; }
    .search-card { margin-top: -38px; }
}
@media (min-width: 860px) {
    .home { padding-top: 18px; }
    .hero { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 34px; }
    .hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); margin: 12px 0 8px; }
    .hero-script { position: static; transform: rotate(-4deg); text-align: left; display: inline-block; margin: 6px 0 10px; }
    .hero-script:after { margin-left: 0; }
    .hero-visual {
        aspect-ratio: 9 / 13;
        width: 100%;
        max-width: 400px;
        justify-self: end;
        border-radius: 28px;
        box-shadow: 0 26px 60px rgba(15, 31, 46, .18);
    }
    .search-card { margin: 22px auto 34px; max-width: 760px; grid-template-columns: 1fr auto; align-items: center; padding: 12px; border-radius: 999px; }
    /* Kart hap bicimli: ek satirlar hapin ICINE degil ALTINA. */
    .search-extra { position: absolute; left: 0; right: 0; top: calc(100% + 6px); }
    .search-card .home-go { width: auto; height: 50px; padding: 0 8px 0 22px; border-radius: 16px; }
    .trust-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 20px; color: var(--muted); font-weight: 600; font-size: .9rem; }
    .sample-card { max-width: 760px; margin: 0 auto; grid-template-columns: 150px 1fr auto; }
}

/* Başlık altı küçük satır, el yazısı not, güven satırı ve kaydırma ipucu. */
.hero-sub {
    font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tr-micro);
    text-transform: uppercase; color: var(--muted); margin: 0 0 8px;
}
.hv-script {
    position: absolute; z-index: 5; right: 16px; top: 8%;
    font-family: Caveat, cursive; font-size: 1.45rem; line-height: 1.02; color: #fff;
    text-align: right; transform: rotate(-6deg); text-shadow: 0 2px 10px rgba(0,0,0,.55);
    pointer-events: none;
}
.hv-script:after { content: ""; display: block; width: 72%; height: 2.5px; margin: 5px 0 0 auto; border-radius: 3px; background: #47cdb6; }

.trust-row {
    list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
    margin: 16px 14px 0; padding: 0;
}
.trust-row li {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 4px 6px; color: var(--ink-2); font-size: .74rem; font-weight: 600; line-height: 1.2;
}
.trust-row li + li { border-left: 1px solid var(--line); }
.trust-row svg { width: 24px; height: 24px; color: var(--ink); flex: none; opacity: .75; }

.scroll-hint {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    margin: 18px auto 0; color: var(--muted);
}
.scroll-hint .mouse {
    width: 17px; height: 26px; border-radius: 9px; border: 1.5px solid currentColor; opacity: .55;
    display: inline-flex; justify-content: center; padding-top: 4px;
}
.scroll-hint .mouse i { width: 2px; height: 6px; border-radius: 2px; background: currentColor; animation: scrollDot 1.8s ease-in-out infinite; }
.scroll-hint small { font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.scroll-hint svg { width: 18px; height: 18px; opacity: .6; }
@keyframes scrollDot { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(5px); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .scroll-hint .mouse i { animation: none; } }


/* ---------- Masaüstü kahraman alanı parçaları ---------- */
.hero-eyebrow, .hero-feats, .hero-sample, .stats-bar { display: none; }

@media (min-width: 860px) {
    /* Kadraj sayfanin IKI kenarina da dayanir; metin onun UZERINDE,
       solda durur. Okunurlugu .hv-vig'in soldaki beyaz perdesi saglar.

       25 Eylul 2026: kadraj once sol kenari %38'den baslayan bir SAG
       PANELDI. Genis ekranda fotograf o dar panele sikisiyor, solda
       genis bir bos beyaz kaliyordu; koy + parsel kompozisyonu panele
       sigmadigi icin parsel kose bucak kaliyordu ("orantisizlik"). */
    .home { padding: 0 0 44px; }
    /* Kadrajin yuksekligi ICERIGE gore: 760 pikselde metin ortada kaliyor,
       altinda ~120 piksel bos fotograf uzuyordu ("gereksiz bosluk" denildi).
       Artik ornek video satirindan hemen sonra bitiyor. */
    .home-fold {
        display: flex; flex-direction: column; justify-content: center;
        position: relative; min-height: min(660px, 78vh); padding: 14px 18px 0;
    }
    .hero { position: static; display: block; grid-template-columns: none; gap: 0; }
    .hero-visual {
        position: absolute;
        top: calc(-1 * var(--hdr-h, 84px));
        bottom: 18px;
        /* KABI SAYFA DEGIL, ORTALANMIS ICERIK KOLONU (1280'de ~68 piksel
           icerden basliyor). Kadrajin kenara dayanmasi icin kolondan
           tasmasi gerek: kutu 100vw genisletilip kolonun ORTASINA
           hizalaniyor. `left/right: 0` ise kolonun kenarlarina yapisir,
           yanlarda beyaz seritler birakirdi.

           vw kayan cubugu da sayar; --sbw (app.js) o farki soyluyor,
           yoksa kadraj cubugun altina girip yatay kaydirma acardi. */
        left: calc(50% - 50vw + var(--sbw, 0px) / 2);
        right: auto;
        width: calc(100vw - var(--sbw, 0px));
        max-width: none; height: auto;
        aspect-ratio: auto; border-radius: 0; box-shadow: none; margin: 0;
        /* Maske kalkti: fotograf sol kenarda da gorunuyor. Sayfaya karisma
           isini .hv-vig ustleniyor -- maske fotografi SILIYOR, perde
           uzerine seriyor; yazinin arkasi bos beyaz degil, acilmis manzara. */
        -webkit-mask-image: none;
        mask-image: none;
    }
    .hero-visual:before { display: none; }
    /* Soldaki beyaz perde -- yazinin okunurlugu buna bagli. Basligin
       arkasina denk gelen serit yalnizca gokyuzu degil: deniz ve alt
       solda koyu yesil yamac da var, koyu lacivert yazi oraya dogrudan
       binince okunmuyordu. Perde %60'ta tamamen bitiyor, parselin
       durdugu sag taraf hic etkilenmiyor. */
    .hv-vig {
        background:
            /* 1) Yatay perde: basligin ve alt satirlarin durdugu sol serit. */
            linear-gradient(90deg,
                rgba(246,249,247,.97) 0%,
                rgba(246,249,247,.93) 18%,
                rgba(246,249,247,.74) 34%,
                rgba(246,249,247,.34) 50%,
                rgba(246,249,247,0) 64%),
            /* 2) Sol ALT kose ayrica aciliyor: orasi koyu yesil yamac ve
                  "haritadan secebilirim" / "ornek videoyu izle" satirlari
                  tam oraya denk geliyor. Yatay perde tek basina yetmiyordu. */
            radial-gradient(135% 105% at 0% 100%,
                rgba(246,249,247,.90) 0%,
                rgba(246,249,247,.45) 34%,
                rgba(246,249,247,0) 62%);
    }
    .hero { flex: 0 0 auto; }
    .hero-copy {
        position: relative; z-index: 3;
        max-width: 620px; padding: 0; margin: 0;
    }
    .hero-eyebrow {
        display: block; margin: 0 0 14px;
        font-size: var(--fs-label); font-weight: 700; letter-spacing: .26em;
        text-transform: uppercase; color: var(--muted);
    }
    .hero h1 { font-size: clamp(2.6rem, 4.2vw, 3.5rem); line-height: 1.04; margin: 0 0 14px; }
    .hero-sub, .hero-chips { display: none; }
    .hero-lead { display: block; font-size: 1.14rem; line-height: 1.5; color: var(--ink-2); max-width: 480px; margin: 0 0 26px; }
    .hero-script { display: none; }
    .hero-visual .hv-script { display: block; top: auto; bottom: 34px; right: 40px; font-size: 1.5rem; }

    /* Üç güven satırı: ikon + iki satır, aralarında ince ayraç. */
    .hero-feats { display: flex; align-items: center; gap: 0; list-style: none; margin: 0 0 26px; padding: 0; }
    .hero-feats li { display: flex; align-items: center; gap: 12px; padding: 0 26px; }
    .hero-feats li:first-child { padding-left: 0; }
    .hero-feats li + li { border-left: 1px solid var(--line); }
    .hero-feats span {
        width: 44px; height: 44px; flex: none; border-radius: 50%;
        background: var(--green-soft); color: var(--green-2);
        display: inline-flex; align-items: center; justify-content: center;
    }
    .hero-feats svg { width: 21px; height: 21px; }
    .hero-feats b { font-size: var(--fs-label); font-weight: 700; line-height: 1.32; color: var(--ink-2); }

    /* Arama kartı: tek satır, düğme kartın içinde. */
    .search-card {
        position: relative; z-index: 3; margin: 0 0 34px; max-width: 700px;
        padding: 9px; border-radius: 999px; background: #fff;
        box-shadow: 0 18px 44px rgba(15, 31, 46, .14);
        display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
    }
    .search-bar { background: transparent; border-color: transparent; box-shadow: none; padding: 4px 6px; }
    .search-card .home-go { width: auto; height: 54px; padding: 0 10px 0 26px; border-radius: 999px; }


    /* El yazısı not + örnek video bağlantısı. */
    /* z-index: kadraj MUTLAK konumlu, bu satir degil -- konumlu oge her
       durumda ustte boyanir. Kadraj sagda dar bir panelken bu satirla
       hic kesismiyordu; kenardan kenara uzayinca satirin uzerine bindi
       ve yazinin yarisi fotografin altinda kaldi. */
    .hero-sample {
        display: flex; align-items: center; gap: 14px; margin: 22px 0 0; padding-left: 26px;
        position: relative; z-index: 3;
    }
    .hero-sample i {
        font-family: Caveat, cursive; font-style: normal; font-size: 1.28rem;
        color: var(--muted); line-height: 1.1;
    }
    .hero-sample a {
        display: inline-flex; align-items: center; gap: 9px;
        font-size: var(--fs-label); font-weight: 700; color: var(--green-2);
    }
    .hero-sample svg { width: 20px; height: 20px; }

    /* İstatistik şeridi. */
    .stats-bar {
        display: flex; align-items: center; gap: 30px;
        background: #fff; border: 1.5px solid var(--line); border-radius: 26px;
        padding: 20px 28px; margin: 34px 0 0; box-shadow: var(--shadow-sm);
    }
    .stats-bar ul { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; flex: 1; }
    .stats-bar li { display: flex; align-items: center; gap: 13px; padding: 0 26px; }
    .stats-bar li:first-child { padding-left: 0; }
    .stats-bar li + li { border-left: 1px solid var(--line); }
    .stats-bar svg { width: 30px; height: 30px; color: var(--ink); flex: none; opacity: .8; }
    .stats-bar span { display: grid; gap: 1px; font-size: var(--fs-label); color: var(--muted); line-height: 1.3; }
    .stats-bar b { font-size: 1.06rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
    .stats-note {
        display: flex; align-items: center; gap: 9px; margin: 0;
        font-size: var(--fs-label); color: var(--muted); line-height: 1.3; white-space: nowrap;
    }
    .stats-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
    .stats-script {
        display: block; font-family: Caveat, cursive; font-size: 1.5rem; line-height: 1.05;
        color: var(--ink-2); text-align: center; white-space: nowrap;
    }
    .stats-script:after { content: ""; display: block; height: 3px; border-radius: 3px; background: var(--green); margin-top: 5px; }
}

/* ---------- Tam ekran video katmanı ---------- */
.vbox { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; }
.vbox-bg { position: absolute; inset: 0; background: rgba(6, 14, 20, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vbox-in {
    position: relative; z-index: 1; width: min(100%, 520px); max-height: 100%;
    padding: calc(14px + var(--sat)) 14px calc(14px + var(--sab));
    display: flex; align-items: center; justify-content: center;
}
.vbox video {
    width: 100%; max-height: calc(100dvh - 28px - var(--sat) - var(--sab));
    border-radius: 18px; background: #000; display: block;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.vbox-x {
    position: absolute; z-index: 2; top: calc(18px + var(--sat)); right: 18px;
    width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .16); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background .15s ease, transform .15s ease;
}
.vbox-x:hover { background: rgba(255, 255, 255, .26); }
.vbox-x:active { transform: scale(.94); }
.vbox-x svg { width: 20px; height: 20px; }
/* Paylas: X'in hemen solunda, ayni boy ve stil. */
.vbox-x.vbox-pay { right: 66px; }
.vbox-not { position: absolute; z-index: 2; top: calc(66px + var(--sat)); right: 18px; background: rgba(255,255,255,.95); color: #0f1f2e; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
body.vbox-open { overflow: hidden; }
@media (min-width: 860px) {
    .vbox-in { width: min(100%, 430px); }
    .vbox-x { top: 22px; right: 22px; }
    .vbox-x.vbox-pay { right: 70px; }
    .vbox-not { top: 70px; right: 22px; }
}
/* WhatsApp filmi açıkken: filmin sonundaki "WhatsApp'tan gönder"in tıklanır hâli. */
.vbox-wa {
    position: absolute; z-index: 2; top: calc(18px + var(--sat)); left: 18px;
    height: 40px; padding: 0 16px 0 12px; border-radius: 999px;
    background: #25D366; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.vbox-wa[hidden] { display: none; }
.vbox-wa svg { width: 20px; height: 20px; }
@media (min-width: 860px) { .vbox-wa { top: 22px; left: 22px; } }

/* ---------- Tam ekran oynatici (video sayfalari) ----------
   Video kart icinde 9/16 kutuya kirpiliyordu, ustunde header, altinda sayfa
   vardi. Oynat denince video bu siyah katmana tasinir: tum ekran, kirpma yok,
   yalnizca paylas ve kapat dugmesi. */
.vt { position: fixed; inset: 0; z-index: 90; background: #05080b; }
.vt[hidden] { display: none; }
.vt-sahne { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vt-sahne video { width: auto; height: auto; max-width: 100%; max-height: 100%;
    object-fit: contain; background: #05080b; display: block; }
.vt-bar { position: absolute; z-index: 2; top: calc(14px + var(--sat)); right: 14px; display: flex; gap: 8px; }
.vt-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .16); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background .15s ease, transform .15s ease; }
.vt-btn[hidden] { display: none; }
.vt-btn:hover { background: rgba(255, 255, 255, .28); }
.vt-btn:active { transform: scale(.94); }
.vt-btn svg { width: 20px; height: 20px; }
.vt-not { position: absolute; left: 50%; bottom: calc(86px + var(--sab)); transform: translateX(-50%);
    background: rgba(10, 14, 20, .82); color: #fff; padding: 8px 14px; border-radius: 999px;
    font-size: var(--fs-label); }
.vt-not[hidden] { display: none; }
body.vt-acik { overflow: hidden; }

/* ---------- Alt bilgi ---------- */
.ftr { max-width: 1120px; margin: 0 auto; padding: 16px 18px calc(24px + var(--sab)); text-align: center; color: var(--muted); }
.ftr-line { display: flex; align-items: center; gap: 12px; justify-content: center; }
.ftr-line span { flex: 0 0 40px; height: 1px; background: #cfd8d2; }
.ftr-line small { font-size: var(--fs-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; font-weight: 700; }
.ftr-copy { font-size: var(--fs-label); margin-top: 8px; }
.ftr-legal { font-size: var(--fs-label); margin-top: 8px; font-weight: 600; }
.ftr-legal a { color: var(--ink-2); }
.ftr-legal a:hover { color: var(--green-2); }

/* Odeme rozetleri: iyzico sanal POS kriteri (iyzico ile Ode + kart logolari).
   Tek parca resmi bant; genislik sinirli, telefonda kenara yapismasin diye
   yuzde ile kuculuyor. */
.ftr-pay { margin-top: 14px; }
.ftr-pay img { display: block; width: min(440px, 92%); height: auto; margin: 0 auto; }
.ftr-pay-note { font-size: var(--fs-micro); color: var(--muted); margin-top: 8px; }
/* Satıcı künyesi: vergi levhasıyla birebir (Meta doğrulaması, 6563). */
.ftr-kunye { font-style: normal; font-size: var(--fs-micro); line-height: 1.6; color: var(--muted); margin-top: 10px; }
.ftr-kunye strong { color: var(--ink-2); font-weight: 600; }
.ftr-kunye a { color: inherit; }
/* MOBİLDE SADE FOOTER (3 Ekim 2026), Airbnb'nin telefon alt bilgisi gibi:
   açık gri zemin, ince üst çizgi, sola hizalı; süs çizgisi, slogan ve
   ödeme notu yok. Sıra: bağlantılar, ödeme logoları, en altta telif.
   Ödeme logoları KALIYOR: iyzico sanal POS kriteri. */
@media (max-width: 859px) {
    .ftr {
        display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
        max-width: none; margin-top: 28px; padding: 22px 20px calc(22px + var(--sab));
        background: #f7f7f7; border-top: 1px solid #ebebeb; text-align: left;
    }
    .ftr-line, .ftr-slogan, .ftr-pay-note { display: none; }
    .ftr-legal { order: 1; margin: 0; font-size: .86rem; font-weight: 500; line-height: 1.7; color: #b0b0b0; }
    .ftr-legal a { color: #222; }
    .ftr-pay { order: 2; margin: 0; }
    .ftr-pay img { width: 230px; max-width: 100%; margin: 0; }
    .ftr-kunye { order: 3; margin: 0; font-size: .78rem; color: #6a6a6a; }
    .ftr-copy { order: 4; margin: 0; padding-top: 14px; border-top: 1px solid #ebebeb; align-self: stretch; font-size: .82rem; color: #6a6a6a; }
}
.legal-page { max-width: 760px; margin: 0 auto; padding: 8px 18px 48px; }
.legal-page h1 { font-size: 1.8rem; letter-spacing: -.03em; margin: 6px 0 8px; }
.legal-updated { color: var(--muted); font-size: .88rem; margin-bottom: 18px; }
.legal-body { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 8px; box-shadow: var(--shadow-sm); }
.legal-body h2 { font-size: 1.05rem; margin: 18px 0 8px; }
.legal-body p, .legal-body li { color: var(--ink-2); font-size: .95rem; line-height: 1.55; margin-bottom: 10px; }
.legal-body ul { padding-left: 18px; margin-bottom: 10px; }
.legal-body a { color: var(--green-2); font-weight: 700; text-decoration: underline; }

/* ---------- KONUM SECICI (edermi.com duzeni) ----------
   Tam ekran beyaz panel, sagdan kayarak gelir. Ustte geri + baglam + baslik,
   altinda arama, sonra tam genislikte satirlar. Ada/parsel adiminda liste
   gizlenir; ortada buyuk sayi alani ve altta sabit "Devam Et" cubugu kalir. */
.pk { position: fixed; inset: 0; z-index: 100; }
.pk-backdrop { position: absolute; inset: 0; background: rgba(15, 31, 46, .45); backdrop-filter: blur(2px); animation: fadeIn .18s ease; }
.pk-sheet {
    position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column;
    /* Klavye acikken panel GORUNUR alana oturur (app.js --pk-vh / --pk-alt yazar). */
    bottom: var(--pk-alt, 0px); height: var(--pk-vh, 100%);
    animation: pkKay .28s cubic-bezier(.4, 0, .2, 1);
}
@keyframes pkKay { from { transform: translateX(100%); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.pk-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
    min-height: 56px; padding: calc(10px + var(--sat)) 10px 10px; background: #fff;
    border-bottom: 1px solid #eef2f3; box-shadow: 0 4px 18px rgba(7, 54, 59, .04); }
.pk-back, .pk-close { width: 40px; height: 40px; flex: none; border: 0; border-radius: 12px;
    background: transparent; color: var(--ink); display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; }
.pk-back:active, .pk-close:active { background: #f3f6f8; }
.pk-back svg, .pk-close svg { width: 22px; height: 22px; }
.pk-back[disabled] { opacity: .3; cursor: default; }
.pk-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pk-crumb { font-size: 12px; font-weight: 600; color: var(--green-2); line-height: 1.2;
    text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-titles h2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-align: center; }
/* Adim cizgisi: edermi'de yok, baglam satiri isi goruyor. */
.pk-steps { display: none; }

.pk-search { position: relative; display: flex; align-items: center; padding: 12px 16px 8px; background: #fff; }
.pk-search input { width: 100%; height: 44px; padding: 0 44px 0 16px; border: 1px solid #e2e7ea;
    border-radius: 12px; background: #fbfdfe; font: inherit; font-size: 16px; color: var(--ink);
    outline: none; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.pk-search input::placeholder { color: #9aa4ab; }
.pk-search input:focus { border-color: var(--ana); background: #fff; box-shadow: 0 0 0 4px rgba(59, 129, 146, .12); }
.pk-search-ico { position: absolute; right: 30px; top: 50%; width: 18px; height: 18px;
    margin-top: 2px; transform: translateY(-50%); color: #9aa4ab; pointer-events: none; }
.pk-clear { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;
    border-radius: 50%; border: 0; background: #eef2f0; color: var(--ink-2); cursor: pointer; font-size: 1.05rem; line-height: 1; }

.pk-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 4px 0 32px; }
.pk-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    text-align: left; background: #fff; border: 0; border-bottom: 1px solid #f1f4f3;
    padding: 16px 20px; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
    cursor: pointer; transition: background .12s ease; }
.pk-item:active, .pk-item:hover, .pk-item:focus-visible { background: #f2faf5; outline: none; }
.pk-item.sel { color: var(--green-ink); background: #eef9f2; }
.pk-item .pk-item-arr { color: #c2cdc6; font-size: 1.15rem; }
.pk-item.sel .pk-item-arr { color: var(--green-2); }
.pk-item mark { background: #fff3a3; border-radius: 3px; padding: 0 1px; }
.pk-group { padding: 14px 20px 6px; font-size: .68rem; font-weight: 800; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted); }
.pk-empty, .pk-loading { padding: 40px 20px; text-align: center; color: #9aa4ab; font-size: 14px; }

/* ADA / PARSEL ADIMI: buyuk ortali giris + altta sabit cubuk. */
.pk-num { flex: 1; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.pk-num-card { padding: 22px 16px 10px; display: grid; gap: 10px; justify-items: center; }
.pk-num-card label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pk-num-card input { width: 100%; height: 56px; border: 1px solid #e2e7ea; border-radius: 14px;
    background: #fbfdfe; font: inherit; font-size: 26px; font-weight: 800; letter-spacing: .06em;
    text-align: center; color: var(--ink); outline: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.pk-num-card input:focus { border-color: var(--ana); background: #fff; box-shadow: 0 0 0 4px rgba(59, 129, 146, .12); }
.pk-num-alt { margin-top: auto; display: flex; flex-direction: column; gap: 10px;
    padding: 16px; padding-bottom: calc(16px + var(--sab)); border-top: 1px solid #eef2f3; background: #fff; }
.pk-num-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; }
.pk-next { width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: var(--ana);
    color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 122, 52, .22); transition: transform .12s ease, filter .15s ease; }
.pk-next:hover { filter: brightness(1.05); }
.pk-next:active { transform: scale(.985); }
.pk-alt { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.pk-alt a { color: var(--ink-2); }
.pk-alt a b { color: var(--green-2); }
.pk-error, .form-error { color: var(--danger); font-size: .9rem; font-weight: 600; text-align: center; }
.form-error a { color: inherit; text-decoration: underline; }
body.pk-open { overflow: hidden; }

/* ---------- Fotoğraftan ada / parsel (OCR alt sayfası) ----------
   Mobilde alttan gelen sayfa, masaüstünde ortada pencere. Akış: görsel seç →
   metin okunur → ada/parsel ayrıştırılır → parsel sorgusu → harita. */
.ocr { position: fixed; inset: 0; z-index: 110; }
.ocr-backdrop { position: absolute; inset: 0; background: rgba(15, 31, 46, .5); backdrop-filter: blur(2px); animation: fadeIn .18s ease; }
.ocr-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; background: #fff;
    border-radius: 22px 22px 0 0; padding: 16px 16px calc(16px + var(--sab));
    max-height: 92vh; overflow-y: auto;
    box-shadow: 0 -18px 50px rgba(15, 31, 46, .22);
    animation: ocrKay .26s cubic-bezier(.2, .8, .3, 1);
}
@keyframes ocrKay { from { transform: translateY(100%); } to { transform: none; } }
.ocr-head { display: flex; align-items: flex-start; gap: 12px; }
.ocr-head h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.ocr-head p { margin: 3px 0 0; font-size: var(--fs-label); color: var(--muted); line-height: 1.35; }
.ocr-close {
    flex: none; width: 36px; height: 36px; margin-left: auto; border: 0; border-radius: 12px;
    background: #f3f6f8; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ocr-close svg { width: 18px; height: 18px; }
/* Örnek görsel kutusu: yazıyla anlatmak yerine beklenen ekranı gösteriyor. */
.ocr-drop {
    position: relative; width: 100%; margin-top: 12px; padding: 8px;
    border: 1.5px dashed #cfe0e4; border-radius: 16px; background: #f6fafb;
    cursor: pointer; font: inherit; display: block;
    transition: border-color .16s ease, background .16s ease;
}
.ocr-drop.is-over, .ocr-drop:hover { border-color: var(--ana, #3b8192); background: #eef6f8; }
.ocr-ornek {
    display: block; width: 100%; height: auto; border-radius: 10px;
    /* Uzun ekran görüntüsünün üst kısmı yeter: ada/parsel satırları görünür. */
    max-height: 320px; object-fit: cover; object-position: top center;
}
.ocr-ornek-et {
    position: absolute; right: 16px; top: 16px; padding: 3px 9px; border-radius: 999px;
    background: rgba(8, 20, 30, .72); color: #fff; font-size: .62rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.ocr-prev {
    margin: 12px 0 0; display: flex; align-items: center; gap: 12px;
    padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdfe;
}
.ocr-prev img { width: 62px; height: 62px; flex: none; object-fit: cover; border-radius: 10px; background: #eef2f4; }
/* GÖRSEL SEÇİLDİKTEN SONRA: örnek kart kalkar, yüklenen görsel büyür.
   İkisi birden dururken ekranda iki farklı TKGM ekranı yan yana kalıyordu
   (biri örnek İzmir/Urla, biri kullanıcının kendi görseli) ve hangisinin
   okunduğu anlaşılmıyordu. */
.ocr.dolu .ocr-drop { display: none; }
.ocr.dolu .ocr-prev { flex-direction: column; align-items: stretch; gap: 10px; }
.ocr.dolu .ocr-prev img {
    width: 100%; height: auto; max-height: 300px;
    object-fit: cover; object-position: top center;
}
.ocr-prev figcaption { font-size: var(--fs-label); font-weight: 600; color: var(--ink-2); line-height: 1.35; }
/* Okuma sürerken dönen halka: "takıldı mı" sorusunu ortadan kaldırıyor. */
.ocr.is-busy .ocr-prev figcaption:before {
    content: ""; display: inline-block; vertical-align: -2px; margin-right: 7px;
    width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid #cfe4da; border-top-color: var(--teal); animation: spin .8s linear infinite;
}
.ocr-msg { margin: 10px 0 0; font-size: var(--fs-label); color: var(--ink-2); line-height: 1.4; }
.ocr-msg.err { color: var(--danger); font-weight: 600; }
/* Bulunan parselin özeti. Zemin eskiden nane yeşiliydi; marka rengi
   turkuaza döndüğünde ([[adaparselx-renk-paleti]]) burası atlanmıştı ve
   reklam kaydında tek yeşil leke olarak göze çarpıyordu. */
.ocr-found { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--green-soft); border: 1px solid #cfe2e6; }
.ocr-found-loc { margin: 0; font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.ocr-found-ap { margin: 3px 0 0; font-size: var(--fs-label); color: var(--ink-2); }
.ocr-acts { display: flex; gap: 8px; margin-top: 14px; }
.ocr-acts .btn { flex: 1 1 0; padding: 12px 12px; font-size: .92rem; }
.ocr-acts .btn svg { width: 18px; height: 18px; }
.ocr-acts .btn[disabled] { opacity: .55; cursor: default; }
.ocr-alt { margin: 10px 0 0; text-align: center; font-size: var(--fs-label); color: var(--muted); }
.ocr-alt a { color: var(--green-2); font-weight: 700; }
@media (min-width: 700px) {
    .ocr-sheet {
        left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
        width: min(460px, 92vw); border-radius: 22px; padding: 18px;
        animation: fadeIn .18s ease; box-shadow: 0 30px 70px rgba(15, 31, 46, .3);
    }
}

@media (min-width: 700px) {
    /* Masaustunde ortada panel; icerik duzeni ayni. */
    .pk-sheet { inset: auto; left: 50%; top: 50%; bottom: auto; width: 460px; height: min(700px, 88vh);
        transform: translate(-50%, -50%); border-radius: 22px; overflow: hidden;
        box-shadow: 0 30px 80px rgba(15, 31, 46, .28); animation: fadeIn .18s ease; }
    .pk-head { padding-top: 12px; }
}

/* ---------- Harita sayfası ---------- */
.page-parcel-map { overflow: hidden; }
.mapp { position: fixed; inset: 0; background: #0e262c; }
.mapp-map { position: absolute; inset: 0; z-index: 1; background: #0e262c; }
.leaflet-container { font-family: inherit; }
.leaflet-control-attribution { font-size: 9px; opacity: .7; }
.mapp-top { position: absolute; z-index: 5; top: calc(12px + var(--sat)); left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.mapp-back, .mapp-ctrl button {
    width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 0; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.25); color: var(--ink); cursor: pointer; pointer-events: auto;
}
.mapp-back svg, .mapp-ctrl svg { width: 22px; height: 22px; }
.mapp-layers { display: inline-flex; background: #fff; border-radius: 999px; padding: 4px; box-shadow: 0 8px 20px rgba(0,0,0,.25); pointer-events: auto; }
.mapp-layers button { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; font-weight: 800; font-size: .92rem; cursor: pointer; color: var(--ink-2); }
.mapp-layers button.on { background: var(--ana); color: #fff; }
.pk-alt { margin: 12px 0 0; text-align: center; font-size: .9rem; color: var(--muted); }
.pk-alt a { color: var(--ink-2); text-decoration: none; }
.pk-alt a b { color: var(--green-2, #2f6b7a); }

/* Ana sayfadaki "haritadan secelim" ikincil baglantisi. */
/* "Ada parseli bilmiyorum" satırı: kalkan rozetli tek satır, ortada.
   Düz bağlantı olarak duruyordu, kartın altında kopuk görünüyordu. */
.search-alt { margin: 8px 0 0; text-align: center; font-size: .9rem; color: var(--muted); }
.search-alt a {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--ink-2); text-decoration: none; font-weight: 500;
}
.search-alt a svg { width: 17px; height: 17px; flex: none; color: var(--ink); opacity: .72; }
.search-alt a b { color: var(--green-2, #2f6b7a); font-weight: 800; }
.search-alt a:hover b { text-decoration: underline; }

/* ---------- Sahneleri duzenle (uretimden once) ----------
   Mobil once: poster + kartlar + kare listesi + sabit uretim cubugu.
   Renk ve kose dili sitenin geri kalaniyla ayni. */
.sd { max-width: 620px; margin: 0 auto; padding: 14px 14px calc(104px + var(--sab)); }
.sd-ust { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sd-geri { width: 42px; height: 42px; flex: none; border-radius: 50%; background: #fff;
    border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink); box-shadow: var(--shadow-sm); }
.sd-geri svg { width: 20px; height: 20px; }
.sd-kicker { font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--tr-micro);
    text-transform: uppercase; color: var(--muted); }
.sd-ust-yazi h1 { margin: 1px 0 0; font-size: 1.28rem; letter-spacing: -.025em; }
.sd-kredi { margin-left: auto; flex: none; background: var(--green-soft); color: var(--green-ink);
    border-radius: 999px; padding: 8px 14px; font-size: var(--fs-label); font-weight: 700; white-space: nowrap; }

/* POSTER */
.sd-poster { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 14px;
    background: #162124; box-shadow: var(--shadow); aspect-ratio: 16 / 10; }
.sd-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-poster:after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,18,13,.55) 0%, rgba(8,18,13,0) 38%, rgba(8,18,13,.82) 100%); }
/* Sinir gradyanin USTUNDE kalmali; altinda kalinca sonuyordu. */
.sd-sinir { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
/* Isaretleme dili (ana sayfa ve oynatici ile ayni): koyu taban hat,
   ince beyaz hat, koyu kirmizi boya. Boyanin ICI su dolu gibi dalgalanir
   (asagidaki .sd-dalga kurallari; hepsi sinira kirpili). */
.sd-sinir polygon { vector-effect: non-scaling-stroke; }
.sd-sinir-taban { fill: rgba(176,18,24,.52); stroke: rgba(6,18,10,.55); stroke-width: 4; }
.sd-sinir-hat { fill: none; stroke: rgba(255,255,255,.92); stroke-width: 1.6; }
/* SU DOLU PARSEL. Kirmizi boyanin uzerinde uc saydam dalga yatay
   kayiyor: farkli hiz ve yonlerde ilerledikleri icin yuzey surekli
   degisiyor, parsel su doluymus gibi duruyor. Dalga yolu iki periyot
   genisliginde; -100 birim kayinca dikissiz basa doner. */
.sd-dalga { stroke: none; }
.sd-dalga-a { fill: rgba(255,255,255,.2); animation: sdSuSol 2.6s linear infinite; }
.sd-dalga-b { fill: rgba(255,255,255,.15); animation: sdSuSag 3.6s linear infinite; }
.sd-dalga-c { fill: rgba(10,24,30,.2); animation: sdSuSol 4.8s linear infinite; }
.sd-dalga-cizgi { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 1.3;
    vector-effect: non-scaling-stroke; }
/* Dalganin periyodu 12 birim: bir periyot kayinca desen dikissiz basa
   doner. Kirpma kutusu her zaman parselin ~3 katı oldugu icin parsel
   viewBox'ta hep ~33 birim; bu periyotla ustunden ucer dalga geciyor. */
@keyframes sdSuSol {
    from { transform: translateX(0); }
    to { transform: translateX(-12px); }
}
@keyframes sdSuSag {
    from { transform: translateX(-12px); }
    to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .sd-dalga { animation: none; }
}
.sd-ap { position: absolute; z-index: 2; transform: translate(-50%, -50%); background: rgba(12,20,16,.82);
    color: #fff; border-radius: 999px; padding: 5px 11px; font-size: var(--fs-micro); font-weight: 800;
    white-space: nowrap; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sd-yer { position: absolute; z-index: 2; top: 12px; left: 12px; max-width: 62%; background: rgba(12,20,16,.72);
    color: #fff; border-radius: 999px; padding: 7px 12px; font-size: var(--fs-micro); font-weight: 700;
    letter-spacing: .02em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-harita { position: absolute; z-index: 2; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px;
    background: rgba(12,20,16,.72); color: #fff; border-radius: 999px; padding: 7px 12px;
    font-size: var(--fs-micro); font-weight: 700; text-decoration: none;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sd-harita svg { width: 13px; height: 13px; }
.sd-poster-alt { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; color: #fff; }
.sd-alan { display: block; font-size: 2.1rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.sd-ada { display: block; margin-top: 3px; font-size: var(--fs-micro); font-weight: 700;
    letter-spacing: .1em; opacity: .85; }
.sd-ozellik { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; }
.sd-ozellik li { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16);
    border-radius: 12px; padding: 7px 11px; font-size: .76rem; font-weight: 600;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sd-ozellik svg { width: 15px; height: 15px; }

/* KARTLAR */
.sd-kart { background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    padding: 15px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.sd-kart-bas { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.sd-kart-bas h2 { font-size: var(--fs-title); letter-spacing: -.015em; margin: 1px 0 3px; }
.sd-kart-bas p { color: var(--muted); font-size: var(--fs-label); line-height: 1.45; margin: 0; }
/* KART SIMGESI. Duz koyu kutu + kalin cizgili simge "cirkin" bulundu
   (sahibi, 26 Eylul 2026). Artik tek ikon dili (Lucide cizimi, 1.75
   ince cizgi) ve yumusak zeminli, ince kenarli kutu. */
.sd-ikon { width: 38px; height: 38px; flex: none; border-radius: 12px;
    background: linear-gradient(180deg, #f1f8fa 0%, var(--ana-soft, #e7f2f4) 100%);
    box-shadow: inset 0 0 0 1px rgba(47,107,122,.14); color: var(--ana-ink, #2f6b7a);
    display: inline-flex; align-items: center; justify-content: center; }
.sd-ikon svg { width: 20px; height: 20px; }
.sd-say { margin-left: auto; flex: none; background: var(--green-soft); color: var(--green-ink);
    border-radius: 999px; padding: 4px 10px; font-size: var(--fs-micro); font-weight: 800; }
/* BEKLEME: kucuk drone animasyonu + ilerleme cizgisi.
   "Sahneleri gor" hazirligi birkac saniye surebiliyor; bos ekran yerine
   ne oldugunu anlatan bir bekleme kartina bakiyor. */
/* Bekleme POSTERIN ICINDE: hazir olunca ayni yerde uydu karesi cikiyor. */
.sd-poster-yuk { position: absolute; inset: 0; z-index: 3; display: grid; align-content: center;
    justify-items: center; gap: 5px; padding: 18px; text-align: center; color: #36414f; overflow: hidden;
    background: linear-gradient(168deg, #f7f8fa 0%, #edf0f4 55%, #e5e9ef 100%); }
/* Ince olcu izgarasi: "parselin cevresi taraniyor" hissini veren zemin. */
.sd-poster-yuk:before { content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(118,133,153,.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(118,133,153,.11) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 46%, #000 38%, transparent 100%);
    mask-image: radial-gradient(120% 90% at 50% 46%, #000 38%, transparent 100%); }
/* Yumusak tarama seridi: yukaridan asagi suzulur. */
.sd-poster-yuk:after { content: ""; position: absolute; left: 0; right: 0; top: -44%; height: 44%;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.72) 62%, rgba(255,255,255,0));
    animation: sdTara 3.6s cubic-bezier(.45,0,.35,1) infinite; }
.sd-poster-yuk strong, .sd-poster-yuk small { position: relative; z-index: 1; }
.sd-poster-yuk strong { font-size: 1rem; letter-spacing: -.015em; color: #26303d; }
.sd-poster-yuk small { color: #6f7c8c; font-size: var(--fs-label); }
.sd-yuk-sahne { position: relative; z-index: 1; display: grid; justify-items: center; margin-bottom: 12px; }
/* BEKLEME EKRANINDA MARKA. Once minik bir drone cizimi vardi; kullanici
   "buraya logomuz gelsin, buyuk ve guzel otursun" dedi. Logo kendi isik
   seridi ve oynat/duraklat simgesiyle geliyor; arkasinda nabiz atan halka. */
.sd-yuk-marka { position: relative; z-index: 1; display: grid; place-items: center;
    margin-bottom: 18px; min-height: 96px; }
.brand-x-yuk { width: min(230px, 62%); }
.sd-yuk-halka { position: absolute; width: 132px; height: 132px; border-radius: 50%;
    background: radial-gradient(circle, rgba(59,129,146,.16) 0%, rgba(59,129,146,0) 62%);
    animation: sdYukHalka 2.6s ease-in-out infinite; }
@keyframes sdYukHalka {
    0%, 100% { transform: scale(.82); opacity: .55; }
    50% { transform: scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .sd-yuk-halka { animation: none; } }
.sd-golge { position: relative; display: block; width: 44px; height: 8px; margin-top: 4px; border-radius: 50%;
    background: rgba(92,107,127,.20); filter: blur(2.5px); animation: sdGolge 2.6s ease-in-out infinite; }
/* Golgenin uzerinden acilan iki yumusak halka: "tarama" hissi. */
.sd-golge:before, .sd-golge:after { content: ""; position: absolute; left: 50%; top: 50%;
    width: 86px; height: 34px; margin: -17px 0 0 -43px; border-radius: 50%;
    border: 1px solid rgba(110,125,145,.35); animation: sdDalga 3s ease-out infinite; }
.sd-golge:after { animation-delay: 1.5s; }
.sd-poster-yuk .sd-drone { margin-bottom: 0; }
.sd-poster-yuk .sd-govde { background: #97a4b5; }
.sd-poster-yuk .sd-govde:after { background: #fff; }
.sd-poster-yuk .sd-pervane, .sd-poster-yuk .sd-pervane:before { background: rgba(151,164,181,.55); }
.sd-poster-yuk .sd-isin { border-top-color: rgba(151,164,181,.22); }
.sd-poster-yuk .sd-cizgi { position: relative; z-index: 1; background: rgba(118,133,153,.18); }
.sd-poster-yuk .sd-cizgi i { background: linear-gradient(90deg, rgba(151,164,181,.25), #8d9cb0); }
@keyframes sdTara { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; }
    82% { opacity: 1; } 100% { transform: translateY(340%); opacity: 0; } }
@keyframes sdGolge { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(.78); opacity: .3; } }
@keyframes sdDalga { 0% { transform: scale(.3); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }
.sd-drone { position: relative; width: 74px; height: 46px; margin-bottom: 10px;
    animation: sdSuzul 2.6s ease-in-out infinite; }
.sd-govde { position: absolute; left: 50%; top: 16px; width: 26px; height: 13px; margin-left: -13px;
    border-radius: 5px; background: var(--green-2); }
.sd-govde:after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
    margin: -3px 0 0 -3px; border-radius: 50%; background: #dff4f8; }
.sd-pervane { position: absolute; top: 10px; width: 24px; height: 5px; border-radius: 3px;
    background: rgba(15,122,52,.55); animation: sdPerv .18s linear infinite; }
.sd-pervane.sol { left: 0; }
.sd-pervane.sag { right: 0; }
.sd-pervane:before { content: ""; position: absolute; left: 50%; top: 5px; width: 2px; height: 8px;
    margin-left: -1px; background: rgba(15,122,52,.55); }
.sd-isin { position: absolute; left: 50%; top: 29px; width: 0; height: 0; margin-left: -16px;
    border-left: 16px solid transparent; border-right: 16px solid transparent;
    border-top: 17px solid rgba(23,165,69,.18); animation: sdIsin 2.6s ease-in-out infinite; }
@keyframes sdPerv { 0% { transform: scaleX(1); } 50% { transform: scaleX(.25); } 100% { transform: scaleX(1); } }
@keyframes sdSuzul { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sdIsin { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.sd-cizgi { width: 160px; height: 4px; margin-top: 14px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sd-cizgi i { display: block; width: 40%; height: 100%; border-radius: 3px; background: var(--green);
    animation: sdKay 1.3s ease-in-out infinite; }
@keyframes sdKay { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.sd-hata { margin: 12px 0 0; color: var(--danger); font-size: var(--fs-label); }

/* KARE LISTESI */
.sd-blok { margin-bottom: 12px; }
.sd-blok-bas { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 10px; }
.sd-blok-bas h2 { font-size: var(--fs-title); letter-spacing: -.015em; }
.sd-blok-bas h2 b { color: var(--muted); font-weight: 700; }
.sd-blok-not { margin-left: auto; color: var(--muted); font-size: var(--fs-micro); }
.sd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sk { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    padding: 11px; box-shadow: var(--shadow-sm); transition: opacity .15s ease, border-color .15s ease; }
.sk.is-off { opacity: .5; border-style: dashed; }
.sk-gorsel { position: relative; width: 104px; flex: none; border-radius: 13px; overflow: hidden;
    background: #1a262a; aspect-ratio: 16 / 12; }
.sk-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-no { position: absolute; top: 6px; left: 6px; background: rgba(12,20,16,.78); color: #fff;
    border-radius: 8px; padding: 3px 7px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; }
.sk-sure { position: absolute; right: 6px; bottom: 6px; background: rgba(12,20,16,.78); color: #fff;
    border-radius: 999px; padding: 3px 8px; font-size: .66rem; font-weight: 700; }
.sk-ic { min-width: 0; flex: 1; }
.sk-bas { display: flex; align-items: center; gap: 8px; }
.sk-bas strong { font-size: .94rem; letter-spacing: -.015em; line-height: 1.25; }
.sk-anahtar { margin-left: auto; flex: none; position: relative; width: 42px; height: 25px; }
.sk-anahtar input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sk-anahtar span { position: absolute; inset: 0; border-radius: 999px; background: #d7dfda; transition: background .15s ease; }
.sk-anahtar span:after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease; }
.sk-anahtar input:checked + span { background: var(--green); }
.sk-anahtar input:checked + span:after { transform: translateX(17px); }
/* DUZENLENEBILIR CUMLE. Kalem simgesi yalnizca fare ustune gelince
   gorunuyordu; telefonda hover olmadigi icin kimse metnin
   duzenlenebildigini anlamiyordu (sahibi bildirdi, 26 Eylul 2026).
   Artik metin hafif zeminli, kesik cerceveli bir alan gibi duruyor ve
   sonunda her zaman gorunen "Duzenle" etiketi var. Etiketin yazisi CSS
   ile geliyor: metnin textContent'ine karismasin (app.js onu okuyor). */
.sk-ses { position: relative; margin: 8px 0 0; color: var(--ink-2); font-size: .84rem; line-height: 1.45;
    cursor: text; border-radius: 10px; padding: 7px 9px; background: #f6f9f7;
    border: 1px dashed #cfdad3; transition: background .12s ease, border-color .12s ease; }
.sk-ses:hover, .sk-ses:focus { background: #eef5f1; border-color: var(--green-2); outline: none; }
.sk-ses i { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px 1px 6px;
    vertical-align: 1px; border-radius: 999px; background: #fff; border: 1px solid #d5e0da;
    color: var(--green-2); font-style: normal; font-size: .68rem; font-weight: 700; line-height: 1.5;
    white-space: nowrap; }
.sk-ses i:after { content: "Düzenle"; }
.sk-ses i svg { width: 11px; height: 11px; flex: none; }
.sn-ta { width: 100%; margin: 6px 0 0; border: 1.5px solid var(--green-2); border-radius: 12px;
    padding: 9px 10px; font: inherit; font-size: 16px; line-height: 1.45; color: var(--ink);
    background: #fff; resize: vertical; }
.sn-ta:focus { outline: none; box-shadow: 0 0 0 3px rgba(15,122,52,.12); }
.sk.is-edit { border-color: var(--green-2); }
.sk-etiket { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; padding: 0; }
.sk-etiket li { background: var(--green-soft); color: var(--green-ink); border-radius: 8px;
    padding: 4px 8px; font-size: var(--fs-micro); font-weight: 600; }
.sk-etiket .daha { background: #eef2ef; color: var(--muted); }

/* YER CIPLERI */
.yer-list { display: flex; flex-wrap: wrap; gap: 7px; }
.yer-cip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line);
    border-radius: 999px; padding: 8px 11px; font: inherit; font-size: var(--fs-label); cursor: pointer;
    color: var(--ink); transition: opacity .15s ease, border-color .15s ease; }
.yer-cip b { font-weight: 600; }
.yer-cip small { color: var(--muted); }
.yer-cip em { font-style: normal; color: var(--muted); font-size: 1rem; line-height: 1; }
.yer-cip:hover { border-color: var(--green-2); }
.yer-cip.is-off { opacity: .4; text-decoration: line-through; }

/* ULASIM TURU (sahne sayfasi): her yer tek satir; foto secimi acilir */
.tur-bekle { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-label); margin: 2px 0 10px; }
.tur-donen { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--green-soft); border-top-color: var(--green); animation: tur-don .8s linear infinite; }
@keyframes tur-don { to { transform: rotate(360deg); } }
.tur-ust { color: var(--ink-2); font-size: var(--fs-label); line-height: 1.5; margin: 0 0 10px; }
.tur-list { display: flex; flex-direction: column; gap: 8px; }
.tur-durak { border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: opacity .15s ease, border-color .15s ease; }
.tur-durak.is-off .tur-kucuk, .tur-durak.is-off .tur-bilgi b { opacity: .5; }
.tur-durak:not(.is-off) { border-color: var(--green-2); }
.tur-satir { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.tur-kucuk { flex: none; width: 76px; height: 58px; border-radius: 8px; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.tur-kucuk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tur-foto-yok { font-size: 11px; color: var(--muted); }
.tur-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tur-bilgi b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tur-bilgi small { color: var(--muted); font-size: 12px; }
.tur-degis { align-self: flex-start; background: none; border: 0; padding: 2px 0 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--green-2); cursor: pointer; }
.tur-secenek { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.tur-aday { flex: none; width: 96px; height: 72px; border-radius: 8px; overflow: hidden; border: 3px solid transparent; padding: 0; background: var(--bg); cursor: pointer; }
.tur-aday img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tur-aday.is-sec { border-color: var(--green); }
.tur-ekle { flex: none; width: 96px; height: 72px; border-radius: 8px; border: 1.5px dashed var(--green-2); background: #fff; color: var(--green-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; line-height: 1.2; }
.tur-ekle span { font-size: 20px; line-height: 1; }
.tur-ekle input { display: none; }
.tur-hata { color: #b42318; font-size: 12px; padding: 0 12px 10px; }
.tur-not { color: var(--muted); font-size: 12px; margin: 10px 0 0; line-height: 1.5; }

/* ALT BANT OZETI (sahne sayfasinin alti) */
.sd-bant .sd-kart-bas { align-items: center; }
.sd-degis { margin-left: auto; flex: none; color: var(--green-2); font-size: var(--fs-label);
    font-weight: 700; text-decoration: none; white-space: nowrap; }
.sd-degis:hover { text-decoration: underline; }
/* Altyazi durumu satiri (sahne sayfasi, alt bant kartinin altinda). */
.sd-altyazi { display: flex; align-items: center; gap: 9px; margin: 10px 0 0;
    padding: 9px 11px; border-radius: 12px; background: #f3f6f7;
    color: var(--muted); font-size: .8rem; line-height: 1.35; }
.sd-altyazi svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.sd-altyazi b { color: var(--ink-2); font-weight: 700; }
.sd-altyazi.is-acik { background: var(--ana-soft, #e7f2f4); color: var(--ana-ink, #2f6b7a); }
.sd-altyazi.is-acik b { color: var(--ana-ink, #2f6b7a); }
.sd-altyazi.is-acik svg { opacity: 1; }
.sd-bant-kapali { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 14px;
    background: #fafbfa; color: var(--muted); font-size: var(--fs-label); text-align: center; }
/* MISAFIR BANDI: giris yapmamis kullanici bandini sahne sayfasinda kurar
   (ayarlar sayfasina gidemiyor). Alanlar ayarlar sayfasindakilerle ayni. */
.sd-bant-form { margin-top: 14px; }
.sd-altyazi.sd-bant-sw { margin: 0 0 12px; }
.sd-bant-govde { animation: sdKatAc .18s ease; }
.sd-ups { display: flex; gap: 12px; align-items: center; }
.sd-bant-form .up-box { width: 86px; height: 86px; min-height: 0; flex: none; border-radius: 12px; }
.sd-bant-form .up-box.round { width: 86px; height: 86px; border-radius: 50%; }
.sd-bant-form .up-box.round img { object-fit: cover; }
.sd-bant-form .up-sil { top: 3px; right: 3px; width: 26px; height: 26px; font-size: 17px; }
.sd-bant-form .up-txt { font-size: .75rem; font-weight: 600; color: var(--muted); text-align: center; }
.sd-bant-not { margin: 10px 0 0; color: var(--muted); font-size: .76rem; }
.sd-bant-not.is-hata { color: #a2402a; }
/* Altyazi satiri misafirde ac/kapa anahtari. */
.sd-altyazi-sw { cursor: pointer; }
.sd-altyazi-sw > span:not(.lab-sw-d) { flex: 1; min-width: 0; }
.sd-altyazi-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sd-altyazi-sw .lab-sw-d { display: block; position: relative; flex: none; width: 38px; height: 22px;
    border-radius: 999px; background: #d7dfda; transition: background .15s ease; }
.sd-altyazi-sw .lab-sw-d:after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease; }
.sd-altyazi-sw input:checked ~ .lab-sw-d { background: var(--ana, #3b8192); }
.sd-altyazi-sw input:checked ~ .lab-sw-d:after { transform: translateX(16px); }
.sd-altyazi-sw input:focus-visible ~ .lab-sw-d { outline: 2px solid var(--ana, #3b8192); outline-offset: 2px; }
/* Serit onizlemesi: kucuk kadraj, gercek bant olculeriyle. */
.sd-serit .lt-live-stage { border-radius: 14px; }
.sd-serit .lt-live-band { position: absolute; left: 8px; right: 8px; bottom: 8px; }
/* BANT VIDEODAKI GIBI ORANTILI KUCULUR. Olculer sabit pikseldi; 360 px
   telefonda "Ayberk Guler + 0532 252 25 01 + Remax" sigmiyor, soyad telefon
   simgesinin altina giriyordu (sahibi bildirdi, 26 Eylul 2026). Videoda
   bant 1080 px'e gore cizildigi icin sigiyor; onizleme de kart genisligine
   gore (cqw) kuculuyor, genis ekranda eski boyutunda kaliyor. */
.sd-serit { container-type: inline-size; }
.sd-serit .lt-live-band { gap: clamp(4px, 2.2cqw, 8px); padding: 6px clamp(7px, 3cqw, 10px) 6px 6px; }
.sd-serit .lt-live-face { width: clamp(30px, 11.5cqw, 42px); height: clamp(30px, 11.5cqw, 42px); }
.sd-serit .lt-live-who, .sd-serit .lt-live-nm, .sd-serit .lt-live-rl { display: block; min-width: 0; }
.sd-serit .lt-live-nm { font-size: clamp(10.5px, 4.1cqw, 14.7px); }
.sd-serit .lt-live-rl { font-size: clamp(8.5px, 3cqw, 11.2px); }
.sd-serit .lt-live-ph { gap: clamp(3px, 1.3cqw, 5px); font-size: clamp(9.5px, 3.45cqw, 12.5px); }
.sd-serit .lt-live-ico { width: clamp(16px, 6cqw, 22px); height: clamp(16px, 6cqw, 22px); }
.sd-serit .lt-live-ico svg { width: 55%; height: 55%; }
.sd-serit .lt-live-end { gap: clamp(3px, 1.5cqw, 6px); }
.sd-serit .lt-live-rt { font-size: clamp(8.5px, 3.2cqw, 11.5px); }
.sd-serit .lt-live-logo { max-width: clamp(34px, 13.5cqw, 72px); }
.sd-serit .lt-live-logo img { max-height: clamp(16px, 7cqw, 28px); max-width: clamp(34px, 13.5cqw, 72px); }

/* URETIM CUBUGU
   Ekranin dibine yapisik gri serit yerine, kenarlardan bosluklu yuzen bir
   cubuk: solda kucuk film simgesi + sahne/sure, sagda tek eylem dugmesi.
   Sahneler gelene kadar ustte ince bir ilerleme cizgisi akiyor ve dugme
   "yukleniyor" halinde duruyor (donen halka); boylece kapali dugme bozuk
   degil, bekliyor gibi gorunuyor. */
.sd-bar {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--sab)); z-index: 20;
    display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(15, 31, 46, .07); border-radius: 22px;
    box-shadow: 0 16px 44px rgba(15, 31, 46, .18), 0 2px 6px rgba(15, 31, 46, .06);
    backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
    overflow: hidden;
}
/* Sahneler yuklenirken ustte akan ince cizgi. */
.sd-bar-ilerle { position: absolute; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; }
.sd-bar-ilerle:before {
    content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 38%;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
    animation: sdAkis 1.25s ease-in-out infinite;
}
.sd-bar.is-hazir .sd-bar-ilerle { display: none; }
@keyframes sdAkis { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

.sd-bar-ikon {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center;
    border-radius: 13px; background: var(--green-soft); color: var(--green-2);
}
.sd-bar-ikon svg { width: 20px; height: 20px; }
.sd-bar-yazi { flex: 1 1 auto; min-width: 0; }
.sd-bar-yazi strong { display: block; font-size: .95rem; letter-spacing: -.015em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-bar-yazi small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Bekleme / hazir metinleri: ayni satirda yer degistirir. */
.sd-bar-ozet { display: none; }
.sd-bar.is-hazir .sd-bar-bekle { display: none; }
.sd-bar.is-hazir .sd-bar-ozet { display: inline; }
/* Beklerken baslik hafifce parlasin: donmus degil, calisiyor hissi. */
.sd-bar-yazi strong .sd-bar-bekle {
    background: linear-gradient(90deg, var(--ink) 20%, #9fb3ab 45%, var(--ink) 70%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: sdParla 1.9s ease-in-out infinite;
}
@keyframes sdParla { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) {
    .sd-bar-yazi strong .sd-bar-bekle { animation: none; -webkit-text-fill-color: var(--ink); color: var(--ink); }
    .sd-bar-ilerle:before { animation: none; width: 100%; opacity: .35; }
}

/* VIDEOYU URET — sayfanin tek asil dugmesi.
   Solunda logomuzun isareti var (beyaz logonun sol %23,8'i kirpilarak);
   ortasindaki simge basliktaki gibi oynat <-> duraklat diye degisiyor,
   uzerinden ince bir isik surulur. */
.sd-uret {
    position: relative; overflow: hidden; margin-left: auto;
    display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 16px;
    padding: 11px 20px 11px 13px;
    background: linear-gradient(135deg, #47919f 0%, var(--ana) 46%, var(--ana-koyu) 100%);
    color: #fff; font: inherit; font-size: .95rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap;
    cursor: pointer; box-shadow: 0 10px 24px rgba(59, 129, 146, .32), inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.sd-uret:hover { box-shadow: 0 14px 30px rgba(59, 129, 146, .42), inset 0 1px 0 rgba(255,255,255,.28); filter: saturate(1.06); }
.sd-uret:active { transform: translateY(1px); }
/* Logonun isareti: tam logonun sol parcasi, beyaz turevden. */
.sd-uret-mark {
    position: relative; flex: none; width: 27px; height: 29px;
    background: url(/logo-apx-light-ns.png) 0 center / 421% auto no-repeat;
    /* Acik turev su yesiline calar; koyu dugmede bembeyaz dursun. */
    filter: brightness(1.55) saturate(.25) drop-shadow(0 1px 2px rgba(0,0,0,.22));
}
.sd-uret-ic {
    position: absolute; left: 51.1%; top: 45.8%; width: 41.3%; height: auto;
    transform: translate(-50%, -50%); overflow: visible; color: #fff;
}
.sd-uret-ic .ic-play, .sd-uret-ic .ic-pause { fill: currentColor; transform-origin: 15px 15px; }
.sd-uret-ic .ic-play { animation: icOynat 5s ease-in-out infinite; }
.sd-uret-ic .ic-pause { animation: icDurdur 5s ease-in-out infinite; }
/* Dugmenin uzerinden gecen isik seridi (logodaki ile ayni dil). */
.sd-uret-isik { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.sd-uret-isik:before {
    content: ""; position: absolute; top: -40%; left: 0; width: 22%; height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-16deg) translateX(-260%);
    animation: sdUretIsik 5.5s cubic-bezier(.4, 0, .25, 1) infinite;
}
@keyframes sdUretIsik {
    0%, 62% { transform: skewX(-16deg) translateX(-260%); }
    100% { transform: skewX(-16deg) translateX(760%); }
}
/* Bekleme hali: sahneler gelene kadar yalnizca donen halka. */
.sd-uret[disabled] {
    background: #eef2f0; color: var(--muted); box-shadow: none; cursor: default;
    width: 46px; height: 46px; padding: 0; justify-content: center;
}
.sd-uret[disabled] .sd-uret-mark,
.sd-uret[disabled] .sd-uret-isik,
.sd-uret[disabled] #sahne-uret-yazi { display: none; }
.sd-uret-donen { display: none; }
.sd-uret[disabled] .sd-uret-donen {
    display: block; width: 15px; height: 15px; flex: none; border-radius: 50%;
    border: 2px solid #cfdad4; border-top-color: var(--ana); animation: sdDon .7s linear infinite;
}
@keyframes sdDon { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .sd-uret-isik:before, .sd-uret-ic .ic-play, .sd-uret-ic .ic-pause { animation: none; }
    .sd-uret-ic .ic-pause { opacity: 0; }
}

@media (min-width: 620px) {
    .sd-bar { max-width: 640px; margin: 0 auto; }
}

/* MASAÜSTÜNDE İKİ SÜTUN (29 Eylül 2026). Tek 620 px'lik sütun geniş
   ekranda aşağı doğru uzuyordu. DOM sırası değişmiyor (telefonda sıra
   aynı); yalnız ızgara: solda parsel + öne çıkacaklar + yerler + alt bant,
   sağda sahneler. Sahneler bloğu sondaki esnek satıra kadar uzanıyor ki
   sol sütundaki kartların arası açılmasın. */
@media (min-width: 1080px) {
    .sd {
        max-width: 1180px; display: grid; align-items: start;
        grid-template-columns: 440px minmax(0, 1fr); column-gap: 26px;
        grid-template-rows: auto auto auto auto auto 1fr;
    }
    .sd > * { grid-column: 1 / -1; }
    .sd > .sd-poster, .sd > #vurgu-kart, .sd > #yer-blok, .sd > .sd-bant { grid-column: 1; }
    .sd > #sd-blok-sahne { grid-column: 2; grid-row: 2 / 7; }
    .sd > #sd-yuk-hata, .sd > #sahne-hata { grid-column: 2; }
    .sd > .sd-ust { grid-row: 1; }
    /* Üret çubuğu sahneler sütununun altında: sol kartların üstüne binmesin. */
    .sd-bar { max-width: none; margin: 0; left: calc(max(0px, 50% - 590px) + 480px); right: calc(max(0px, 50% - 590px) + 14px); }
}

/* ---------- Haritadan parsel sec ---------- */
.page-parcel-pick { overflow: hidden; }
/* Nisangah haritanin tam ortasinda sabit durur; kullanici haritayi kaydirir. */
.pick-cross {
    position: absolute; z-index: 4; left: 50%; top: 50%; width: 48px; height: 48px;
    margin: -24px 0 0 -24px; pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.65));
}
/* Alt panel acikken nisangah panelin ustunde kalsin. */
@media (max-width: 860px) {
    .mapp-pick .pick-cross { top: calc(50% - 90px); }
}
.mapp-hint {
    flex: 1; text-align: center; pointer-events: none;
    background: rgba(12,20,16,.72); color: #fff; border-radius: 999px;
    padding: 9px 14px; font-size: .86rem; font-weight: 600;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mapp-ico {
    width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.25); color: var(--ink); cursor: pointer; pointer-events: auto;
}
.mapp-ico svg { width: 22px; height: 22px; }
.pick-sheet .sheet-badge {
    background: var(--green-soft, #eaf7ee); color: var(--green-2, #2f6b7a);
    border-radius: 999px; padding: 6px 12px; font-size: .82rem; font-weight: 700; white-space: nowrap;
}
.pick-sheet.is-busy #pick-ap { opacity: .5; }

.mapp-chip {
    position: absolute; z-index: 5; top: calc(70px + var(--sat)); left: 12px; max-width: min(78vw, 360px); display: flex; align-items: center; gap: 10px;
    background: #fff; border: 0; border-radius: 18px; padding: 10px 12px; text-align: left; box-shadow: 0 10px 24px rgba(0,0,0,.25); cursor: pointer;
}
.mapp-chip-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: var(--green-soft); color: var(--green-2); display: inline-flex; align-items: center; justify-content: center; }
.mapp-chip-ico svg { width: 20px; height: 20px; }
.mapp-chip-text { display: grid; min-width: 0; }
.mapp-chip-text small { color: var(--muted); font-weight: 600; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapp-chip-text strong { font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; }
.mapp-chip-arr { font-size: 1.4rem; color: #9aa9a1; }
.mapp-ctrl { position: absolute; z-index: 5; right: 12px; top: calc(70px + var(--sat)); display: grid; gap: 10px; }
.mapp-zoom { display: grid; background: #fff; border-radius: 23px; box-shadow: 0 8px 20px rgba(0,0,0,.25); overflow: hidden; }
.mapp-zoom button { box-shadow: none; border-radius: 0; font-size: 1.5rem; font-weight: 600; }
.mapp-zoom button:first-child { border-bottom: 1px solid var(--line); }
.parcel-label { background: transparent; border: 0; }
.parcel-label span { display: inline-flex; transform: translate(-50%, -100%); }
.parcel-label svg { width: 30px; height: 30px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
@media (max-width: 859px) {
    .sheet-lead, .sheet-brand, .notice-sub { display: none !important; }
    .sheet .btn-xl { padding: 14px 20px; font-size: 1rem; }
    .mapp-chip { display: none; }
    .mapp-top { top: calc(8px + var(--sat)); left: 8px; right: 8px; gap: 6px; }
    .mapp-back, .mapp-ctrl button {
        width: 32px; height: 32px;
        box-shadow: 0 4px 12px rgba(0,0,0,.2);
    }
    .mapp-back svg, .mapp-ctrl svg { width: 15px; height: 15px; }
    .mapp-layers { padding: 2px; }
    .mapp-layers button { padding: 4px 10px; font-size: .7rem; font-weight: 700; }
    .mapp-ctrl { top: calc(8px + var(--sat)); right: 8px; gap: 6px; }
    .mapp-zoom { border-radius: 16px; }
    .mapp-zoom button { font-size: 1.1rem; width: 32px; height: 32px; }
    .mapp-ctrl [data-map-layer] { display: none; }
}

.sheet {
    position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 16px 16px 0 0; padding: 2px 16px calc(14px + var(--sab));
    box-shadow: 0 -6px 28px rgba(15, 31, 46, .12); max-height: 58vh; max-height: 58dvh; overflow: auto;
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.sheet.is-min { transform: translateY(calc(100% - 88px)); }
.sheet-grip { width: 32px; height: 4px; border-radius: 4px; background: #d5dde1; margin: 8px auto 10px; cursor: grab; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet-ident { min-width: 0; }
.sheet-kicker { color: var(--muted); font-size: .78rem; font-weight: 500; margin: 0 0 2px; }
.sheet-head h1, .sheet-head h2 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.sheet-status {
    flex: 0 0 auto; margin-top: 4px; font-size: .75rem; font-weight: 500; color: var(--muted); white-space: nowrap;
}
.sheet-status.is-ready { color: var(--green-2); }
.sheet-status.is-warn { color: var(--warn); }
.facts {
    display: grid; grid-template-columns: 1fr 1fr; margin: 12px 0 14px;
    border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff;
}
.facts > div { padding: 10px 12px; min-width: 0; }
.facts > div:nth-child(odd) { border-right: 1px solid var(--line); }
.facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.facts span { display: block; color: var(--muted); font-size: .7rem; font-weight: 500; margin-bottom: 3px; }
.facts strong { display: block; font-size: .92rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; word-break: break-word; }
.sheet .btn-primary.sheet-cta,
.vready .btn-primary.sheet-cta {
    width: 100%; justify-content: center; padding: 13px 16px; font-size: .95rem; font-weight: 650; letter-spacing: 0;
    border-radius: 8px; background: var(--ana); box-shadow: none;
}
.sheet .btn-primary.sheet-cta:hover,
.vready .btn-primary.sheet-cta:hover { background: var(--ana-koyu); box-shadow: none; filter: none; }
.sheet-hint { color: var(--muted); font-size: .8rem; line-height: 1.45; margin: 8px 0 0; }
.sheet .form-error { margin: 0 0 10px; }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 10px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.pill svg { width: 13px; height: 13px; }
.pill.ok { background: var(--green-soft); color: var(--green-ink); }
.notice { display: flex; align-items: center; gap: 10px; background: var(--green-soft); border-radius: 14px; padding: 9px 12px; margin: 10px 0; }
.notice.warn { background: var(--warn-soft); }
.notice-ico { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.notice.warn .notice-ico { background: var(--warn); }
.notice-ico svg { width: 15px; height: 15px; }
.notice strong { display: block; font-size: .88rem; line-height: 1.25; }
.notice small { color: var(--ink-2); font-size: .78rem; }
@media (min-width: 860px) {
    .sheet { left: auto; right: 24px; bottom: 24px; width: 400px; border-radius: 12px; max-height: calc(100vh - 48px); padding: 18px 18px 16px; }
    .sheet.is-min { transform: none; }
    .sheet-grip { display: none; }
    .mapp-chip { top: calc(80px + var(--sat)); }
    /* Masaüstünde alt panel sağda durduğu için kontroller panelin soluna alınır. */
    .mapp-ctrl { right: 448px; }
}

/* ---------- Video sayfası ---------- */
.vpage { max-width: 620px; margin: 0 auto; padding: 4px 18px 40px; }
.vpage-top { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; margin-bottom: 10px; }
.vpage-top .back { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); }
.vpage-top .back:empty { background: transparent; border: 0; }
.vpage-top .back svg { width: 20px; height: 20px; }
.vpage-title { text-align: center; font-size: 1.1rem; }
.vprog { text-align: center; padding: 8px 0; }
.ring { position: relative; width: 150px; height: 150px; margin: 8px auto 12px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: #e6ede9; stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--green); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: calc(326.7 - 326.7 * var(--p) / 100); transition: stroke-dashoffset .6s ease; }
.ring-txt { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; gap: 2px; font-weight: 800; }
.ring-txt b { font-size: 2.4rem; letter-spacing: -.04em; }
.ring-txt small { font-size: 1rem; color: var(--muted); }
.vprog h2 { font-size: 1.35rem; letter-spacing: -.02em; }
.vprog-msg { color: var(--muted); margin-top: 4px; min-height: 1.4em; }
.vprog-eta { margin-top: 6px; font-size: .9rem; color: var(--ink-2); }
.steps { list-style: none; text-align: left; margin: 18px 0 8px; display: grid; gap: 8px; }
.steps li { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-weight: 600; color: var(--muted); }
.steps li:before { content: ""; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d5dde1; }
.steps li.done { color: var(--ink); }
.steps li.done:before {
    background: var(--green); border-color: var(--green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E");
    background-size: 13px; background-position: center; background-repeat: no-repeat;
}
.steps li.current { color: var(--ink); border-color: var(--green); background: var(--green-soft); }
.steps li.current:before { border-color: var(--green); border-top-color: transparent; animation: spin 1s linear infinite; }
.steps li.failed { color: var(--danger); }
.steps li.failed:before { border-color: var(--danger); }
@keyframes spin { to { transform: rotate(360deg); } }
.vprog-note { color: var(--muted); font-size: .84rem; margin-top: 12px; }
.vprog-note a { color: var(--green-2); font-weight: 700; }
.rec { margin-top: 14px; display: flex; gap: 14px; align-items: stretch; text-align: left; background: #fff; border: 1.5px solid var(--green); border-radius: 18px; padding: 12px; box-shadow: 0 0 0 4px var(--green-soft), var(--shadow-sm); }
.rec-frame { position: relative; flex: 0 0 96px; width: 96px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #0b1a12; }
.rec-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.rec-badge { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,.55); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; backdrop-filter: blur(4px); }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 0 0 rgba(255,77,79,.6); animation: pulse 1.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(255,77,79,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,79,0); } }
.rec-info { flex: 1; min-width: 0; display: grid; align-content: center; gap: 5px; }
.rec-info strong { font-size: .95rem; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; }
.rec-info p { margin: 0; color: var(--green-ink); font-weight: 700; font-size: .84rem; }
.rec-bar { height: 6px; border-radius: 999px; background: var(--green-soft); overflow: hidden; }
.rec-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #8fd8e4, #3b8192); transition: width .6s ease; }
.rec-info small { display: block; color: var(--muted); font-size: .76rem; line-height: 1.35; }
@media (min-width: 640px) { .rec-frame { flex-basis: 118px; width: 118px; } .rec { gap: 18px; padding: 14px; } }
.vfail { text-align: center; padding: 20px 0; display: grid; gap: 12px; justify-items: center; }
.vfail-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--warn-soft); color: var(--warn); font-weight: 800; font-size: 2rem; display: inline-flex; align-items: center; justify-content: center; }
.vfail p { color: var(--muted); max-width: 400px; }
.vfail-hint { font-size: .9rem; background: var(--green-soft); color: var(--green-ink) !important; border-radius: 14px; padding: 10px 14px; }
.vready-hero { text-align: left; padding: 0 0 12px; }
.vready-hero h2 { font-size: 1.2rem; letter-spacing: -.02em; }
.vready-hero p { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.player { position: relative; border-radius: 12px; overflow: hidden; background: #0b1a12; aspect-ratio: 9 / 16; max-height: 78vh; margin: 0 auto; box-shadow: var(--shadow-sm); }
.player video { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-cover { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%); color: #fff; }
.player.is-playing .player-cover { display: none; }
.player-brand { position: absolute; left: 14px; top: 12px; font-size: 1rem; letter-spacing: -.02em; }
.player-brand i { font-style: normal; color: #8fd8e4; }
.player-script { position: absolute; right: 14px; top: 10px; font-family: Caveat, cursive; font-size: 1.3rem; line-height: 1; text-align: right; transform: rotate(-6deg); }
.player-meta { position: absolute; left: 14px; bottom: 14px; display: grid; }
.player-meta small { font-size: .78rem; opacity: .9; }
.player-meta strong { font-size: 1.9rem; letter-spacing: -.03em; line-height: 1.05; }
.player-meta em { font-style: normal; font-size: .76rem; opacity: .85; }
.player-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(15,31,46,.55); border: 3px solid rgba(255,255,255,.9); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.player-play svg { width: 34px; height: 34px; margin-left: 4px; }
.player-dur { position: absolute; right: 12px; bottom: 14px; background: rgba(0,0,0,.6); padding: 4px 8px; border-radius: 6px; font-size: .78rem; font-weight: 700; }
.info-card { margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.info-card .facts { margin: 12px 0 0; }
.info-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.vready-actions { display: grid; gap: 10px; margin-top: 14px; }
.vready-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vready-row .btn { border-radius: 8px; font-weight: 650; }
.vready-note { color: var(--muted); font-size: .8rem; text-align: left; margin-top: 10px; }
.lead { margin-top: 22px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: grid; gap: 10px; }
.lead h3 { font-size: 1.1rem; letter-spacing: -.02em; }
.lead p { color: var(--muted); font-size: .9rem; }
.lead label, .panel label { display: grid; gap: 6px; }
.lead label span, .panel label span { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lead input, .panel input { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; font: inherit; font-size: 1rem; background: #f6f9f7; }
.lead input:focus, .panel input:focus { outline: none; border-color: var(--green); background: #fff; }
.lead small, .panel .hint { color: var(--muted); font-size: .8rem; }
.lead-ok { margin-top: 18px; display: flex; align-items: center; gap: 10px; background: var(--green-soft); color: var(--green-ink); border-radius: 14px; padding: 12px 14px; font-weight: 700; }
.lead-ok svg { width: 20px; height: 20px; flex: 0 0 20px; }

/* ---------- Videolarım ---------- */
.dash { max-width: 860px; margin: 0 auto; padding: 8px 18px 40px; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dash-head h1 { font-size: 1.8rem; letter-spacing: -.03em; }
.empty { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px 20px; display: grid; justify-items: center; gap: 10px; }
.empty img { border-radius: 14px; }
.empty p { color: var(--muted); max-width: 360px; }
.vlist { list-style: none; display: grid; gap: 12px; }
.vitem { display: grid; grid-template-columns: 110px 1fr; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 10px; }
.vitem-thumb { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; background: #cfe1e7; }
.vitem-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vitem-state { position: absolute; left: 6px; right: 6px; bottom: 6px; background: rgba(15,31,46,.8); color: #fff; font-size: .68rem; font-weight: 700; padding: 4px 6px; border-radius: 6px; text-align: center; }
.vitem-state.fail { background: rgba(180,35,24,.85); }
.vitem-body { display: grid; align-content: start; gap: 2px; }
.vitem-body strong { font-size: 1.02rem; }
.vitem-body small { color: var(--muted); }
.vitem-body em { font-style: normal; color: var(--muted); font-size: .76rem; }
.vitem-actions { display: flex; gap: 8px; margin-top: 8px; }
@media (min-width: 700px) { .vlist { grid-template-columns: 1fr 1fr; } }

/* ---------- Paketler / hesap ---------- */
.packages-page, .auth-page { max-width: 860px; margin: 0 auto; padding: 8px 18px 40px; }
.packages-page h1, .auth-page h1 { font-size: 1.8rem; letter-spacing: -.03em; margin: 6px 0 4px; }
.lead { }
.packages-page .lead, .auth-page .lead { color: var(--muted); margin-bottom: 18px; background: none; border: 0; padding: 0; display: block; }
.pkx { max-width: 1180px; margin: 0 auto; padding: 8px 18px 44px; }

/* Basligin ustundeki genis yesil zemin: kartlar bunun uzerine oturuyor. */
.pkx-hero { position: relative; padding: 18px 0 26px; }
.pkx-hero:before {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    top: -80px; width: 100vw; height: calc(100% + 80px); z-index: -1;
    background: radial-gradient(120% 130% at 78% 0%, #dff3e7 0%, #eef8f2 42%, var(--bg) 78%);
}
.pkx-hero h1 { font-size: clamp(1.9rem, 5.4vw, 3rem); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; margin: 10px 0 10px; }
.pkx-hero h1 em { font-style: normal; color: var(--green-2); }
.pkx-lead { color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 560px; }
.pkx-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
.pkx-chips li { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.pkx-chips svg { width: 30px; height: 30px; padding: 6px; flex: none; border-radius: 50%; background: #fff; color: var(--green-2); box-shadow: var(--shadow-sm); }
.pkx-script {
    display: none; font-family: "Caveat", cursive; font-size: 1.5rem; font-weight: 700;
    color: var(--green-3); line-height: 1.12; transform: rotate(-5deg);
}
.pkx-kota { margin: 0 0 18px; }

/* MOBILDE KAYDIRMALI SIRA.
   Dort kart alt alta uzayinca "en cok tercih edilen" paket ekranin cok
   altinda kaliyordu. Mobilde kartlar yatay kayiyor ve sayfa acilirken
   populer kartta duruyor (bkz. app.js > pkx-kaydir). */
.pkx-grid {
    display: flex; gap: 12px; margin-top: 8px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 18px 18px 6px;
    margin-left: -18px; margin-right: -18px;   /* kenarlara tasi: kartlar ucta kirpilmasin */
}
.pkx-grid::-webkit-scrollbar { display: none; }
.pkx-grid > .pkx-kart { flex: 0 0 84%; scroll-snap-align: center; }

/* Kaydirma noktalari */
.pkx-nokta { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.pkx-nokta i { width: 6px; height: 6px; border-radius: 50%; background: #cfdad4; transition: width .18s ease, background .18s ease; }
.pkx-nokta i.on { width: 18px; background: var(--green-2); }
.pkx-kart {
    position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 22px;
    padding: 22px 20px 20px; display: flex; flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pkx-kart:hover { border-color: #cfe0e6; box-shadow: var(--shadow-sm); }
.pkx-ikon {
    width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px;
    background: var(--green-soft); color: var(--green-2); margin-bottom: 12px;
}
.pkx-ikon svg { width: 22px; height: 22px; }
.pkx-kart h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.015em; }
.pkx-fiyat { display: flex; align-items: baseline; gap: 5px; line-height: 1; margin-top: 10px; }
.pkx-fiyat b { font-size: 2.3rem; font-weight: 800; letter-spacing: -.045em; }
.pkx-fiyat i { font-style: normal; font-size: .95rem; font-weight: 800; color: var(--muted); }
.pkx-alt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 26px; margin-top: 8px; }
.pkx-adet { color: var(--muted); font-size: .88rem; }
.pkx-alt em {
    font-style: normal; font-size: .68rem; font-weight: 800; letter-spacing: .03em;
    color: #9a3412; background: #fff1e6; border: 1px solid #ffd9bd; border-radius: 999px; padding: 3px 8px;
}
.pkx-video-basi { color: var(--ink-2); font-size: .85rem; margin-top: 4px; }
.pkx-video-basi b { font-weight: 800; }
.pkx-kart .btn { width: 100%; margin-top: 16px; }
.pkx-free .btn { background: #f1f4f5; border-color: transparent; color: var(--ink-2); }
.pkx-free .btn:hover { background: #e8eef0; }

.pkx-rozet {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--ana); color: #fff;
    font-size: .64rem; font-weight: 800; letter-spacing: .12em; padding: 6px 14px;
    border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 16px rgba(59, 129, 146, .32);
}
.pkx-hot { background: #f4fafb; border-color: #bfdde6; box-shadow: 0 18px 44px rgba(15, 31, 46, .1); }
.pkx-hot .pkx-ikon { background: #fff; }

.pkx-list { list-style: none; display: grid; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pkx-list li { display: flex; align-items: flex-start; gap: 9px; font-size: .82rem; line-height: 1.35; color: var(--ink-2); }
.pkx-list svg { width: 17px; height: 17px; flex: none; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--green-soft); color: var(--green-2); }
.pkx-list b { font-weight: 800; color: var(--ink); }
.pkx-list .yok { color: var(--muted); }
.pkx-list .yok svg { background: #f1f4f2; color: #9aa7a0; }

.pkx-band {
    display: grid; gap: 12px; align-items: center; margin-top: 22px; padding: 20px;
    background: linear-gradient(120deg, #eef8f2 0%, #f6fbf8 100%);
    border: 1.5px solid #dcece3; border-radius: 22px;
}
.pkx-band-ikon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--green-2); }
.pkx-band-ikon svg { width: 24px; height: 24px; }
.pkx-band strong { display: block; font-size: 1rem; font-weight: 800; }
.pkx-band small { color: var(--muted); font-size: .85rem; }
.pkx-band .btn { background: #fff; justify-self: start; }

.pkx-sss { margin-top: 34px; text-align: center; }
.pkx-sss h2 { font-size: 1.5rem; letter-spacing: -.03em; }
.pkx-sss-alt { color: var(--muted); font-size: .88rem; margin: 4px 0 16px; }
.pkx-sss details {
    text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
    padding: 14px 16px; margin-bottom: 10px;
}
.pkx-sss summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; font-size: .92rem; font-weight: 700;
}
.pkx-sss summary::-webkit-details-marker { display: none; }
.pkx-sss summary:after {
    content: ""; width: 9px; height: 9px; flex: none; border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
.pkx-sss details[open] summary:after { transform: rotate(-135deg) translate(-2px, -2px); }
.pkx-sss details p { color: var(--ink-2); font-size: .86rem; line-height: 1.5; margin-top: 10px; }
.pkx .billing { max-width: 860px; margin: 32px auto 0; }
.pkx .hint { text-align: center; margin-top: 26px; }

/* TELEFONDA: UC PAKET TEK EKRANDA.
   Once yatay kaydirmali kartlar vardi; kart basina sekiz maddelik liste
   ve uzun giris metni yuzunden paketlerin yarisi gorunuyordu. Sahibi
   "paketleri bir kerede gormek lazim" dedi: giris kisaldi, kartlar
   ince satirlara dondu, ortak ozellikler tek listede asagida. */
@media (max-width: 759px) {
    .pkx-hero { padding: 10px 0 14px; }
    .pkx-hero h1 { font-size: 1.62rem; margin: 6px 0 0; }
    .pkx-lead, .pkx-chips { display: none; }
    .pkx-kota { margin: 12px 0 4px; }
    .pkx-grid {
        display: grid; grid-template-columns: 1fr; gap: 10px; overflow: visible;
        padding: 10px 0 0; margin-left: 0; margin-right: 0;
    }
    .pkx-nokta { display: none; }
    .pkx-kart {
        display: grid; grid-template-columns: auto 1fr auto; align-items: center;
        gap: 2px 12px; padding: 12px 14px; border-radius: 16px;
    }
    .pkx-ikon { grid-row: 1 / 3; width: 38px; height: 38px; margin: 0; border-radius: 12px; }
    .pkx-kart h2 { grid-column: 2; font-size: 1rem; }
    /* Ad satiri tek satirda kalsin: "%35 indirim" rozeti alt satira
       dusunce o kart digerlerinden uzun goruniyordu. */
    .pkx-alt { grid-column: 2; margin: 0; min-height: 0; flex-wrap: nowrap; gap: 6px; }
    .pkx-adet { font-size: .78rem; white-space: nowrap; }
    .pkx-alt em { font-size: .6rem; padding: 2px 6px; white-space: nowrap; }
    .pkx-fiyat { grid-column: 3; grid-row: 1 / 3; justify-self: end; align-self: center; margin: 0; }
    .pkx-fiyat b { font-size: 1.35rem; }
    .pkx-fiyat i { font-size: .78rem; }
    /* Video basi fiyat ve sekiz maddelik liste satiri sisiriyordu. */
    .pkx-video-basi, .pkx-kart .pkx-list { display: none; }
    .pkx-kart .btn { grid-column: 1 / -1; margin-top: 10px; padding: 10px 14px; font-size: .92rem; }
    .pkx-al { grid-column: 1 / -1; }
    .pkx-rozet { top: -9px; left: auto; right: 12px; transform: none; font-size: .58rem; padding: 4px 10px; }
    .pkx-hot { box-shadow: 0 10px 26px rgba(15, 31, 46, .08); }
    .pkx-ortak { margin-top: 18px; padding: 14px 16px; background: #fff;
        border: 1px solid var(--line); border-radius: 16px; }
    .pkx-ortak h2 { font-size: .74rem; font-weight: 800; letter-spacing: .08em;
        text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
    .pkx-ortak .pkx-list { display: grid; gap: 7px; }
    .pkx-band { margin-top: 18px; }
}
/* PAKET SAYFASI: KENDİ PARSELİ + TEK VİDEO ÖNDE (29 Eylül 2026).
   Üç eşit kart yerine: en üstte ziyaretçinin parseli, altında tek videoluk
   büyük teklif ve güvence, çoklu paketler satır olarak en altta. Genişlik
   her ekranda tek sütun; masaüstünde ortada duruyor. */
.pkx-parsel, .pkx-sec, .pkx-ortak { max-width: 560px; margin-left: auto; margin-right: auto; }
.pkx-parsel { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px; background: #fff;
    border: 1px solid var(--line); border-radius: 16px; color: inherit; text-decoration: none; }
.pkx-parsel-kapak { position: relative; flex: none; width: 68px; height: 68px; border-radius: 12px; overflow: hidden;
    display: grid; place-items: center; background: var(--green-soft); color: var(--green-2); }
.pkx-parsel-kapak svg { width: 26px; height: 26px; }
.pkx-parsel-kapak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pkx-parsel-yazi { display: grid; gap: 2px; min-width: 0; }
.pkx-parsel-yazi b { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
.pkx-parsel-yazi span { font-size: .84rem; color: var(--ink-2); }
.pkx-parsel-yazi small { display: flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; color: #1f7a4d; }
.pkx-parsel-yazi small svg { width: 13px; height: 13px; }
.pkx-sec { display: grid; gap: 14px; margin-top: 14px; }
.pkx-tek { background: #fff; border: 2px solid var(--green); border-radius: 18px; padding: 16px 16px 14px; }
.pkx-tek-ust { font-size: .85rem; color: var(--muted); font-weight: 600; }
.pkx-tek-ind { font-style: normal; font-size: .7rem; font-weight: 800; color: var(--warn); background: var(--warn-soft); padding: 2px 7px; border-radius: 999px; margin-left: 4px; }
.pkx-tek-fiyat { display: flex; align-items: baseline; gap: 4px; line-height: 1; margin-top: 6px; }
.pkx-tek-fiyat b { font-size: 2.4rem; font-weight: 800; letter-spacing: -.045em; }
.pkx-tek-fiyat i { font-style: normal; font-size: 1.2rem; font-weight: 800; color: var(--muted); }
.pkx-tek-alt { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.pkx-tek .btn { width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pkx-tek .btn svg { width: 18px; height: 18px; }
.pkx-guven { list-style: none; display: flex; justify-content: space-between; gap: 6px; margin-top: 12px; }
.pkx-guven li, .pkx-guven a { display: flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.pkx-guven svg { width: 15px; height: 15px; flex: none; color: var(--green-2); }
.pkx-cok { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px 4px; }
.pkx-cok h2 { font-size: .92rem; font-weight: 800; margin-bottom: 2px; }
.pkx-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
    padding: 10px 0; border-top: 1px solid var(--line); }
.pkx-cok h2 + .pkx-satir { border-top: 0; }
.pkx-satir-yazi { display: grid; gap: 1px; min-width: 0; }
.pkx-satir-yazi b { font-size: .86rem; font-weight: 700; }
.pkx-satir-yazi em { font-style: normal; font-size: .64rem; font-weight: 800; color: var(--warn); background: var(--warn-soft);
    padding: 2px 6px; border-radius: 999px; margin-left: 2px; white-space: nowrap; }
.pkx-satir-yazi small { font-size: .76rem; color: var(--muted); }
.pkx-satir-fiyat { font-size: .95rem; font-weight: 800; white-space: nowrap; }
.pkx-satir .btn { padding: 8px 14px; font-size: .84rem; }
.pkx-satir .pkx-al { margin: 0; }
.pkx-ortak { margin-top: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.pkx-ortak h2 { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pkx-ortak .pkx-list { display: grid; gap: 7px; margin-top: 0; padding-top: 0; border-top: 0; }
/* Geniş ekranda iki sütun: solda karar, sağda neler dahil (kaydırırken
   yerinde). Hero, sütunlar ve SSS aynı 1000 px'lik hizada. */
@media (min-width: 960px) {
    .pkx-hero, .pkx-ana, .pkx-sss, .pkx .billing { max-width: 1000px; margin-left: auto; margin-right: auto; }
    .pkx-ana { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; margin-top: 8px; }
    .pkx-sol .pkx-parsel, .pkx-sol .pkx-sec { max-width: none; }
    .pkx-sol .pkx-parsel { margin-top: 0; }
    .pkx-sag { position: sticky; top: 88px; display: grid; gap: 14px; }
    .pkx-sag .pkx-ortak { max-width: none; margin-top: 0; }
    .pkx-sag .pkx-band { grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-top: 0; padding: 16px 18px; }
    .pkx-sag .pkx-band .btn { grid-column: 1 / -1; justify-self: start; }
    .pkx-tek { padding: 22px 24px 18px; }
    .pkx-tek-fiyat b { font-size: 2.8rem; }
    .pkx-sss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; margin-top: 40px; }
    .pkx-sss h2, .pkx-sss-alt { grid-column: 1 / -1; }
    .pkx-hero .pkx-neden { display: table; }
}

@media (min-width: 760px) {
    .pkx-grid {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch;
        overflow: visible; padding: 18px 0 0; margin-left: 0; margin-right: 0;
    }
    .pkx-grid > .pkx-kart { flex: none; }
    .pkx-nokta { display: none; }
    .pkx-band { grid-template-columns: auto 1fr auto; gap: 16px; padding: 22px 26px; }
    .pkx-band .btn { justify-self: end; }
}
@media (min-width: 1040px) {
    .pkx-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: 26px 0 34px; }
    .pkx-script { display: block; font-size: 1.85rem; align-self: start; margin-top: 40px; }
    /* Kart sayisi degisebiliyor (ucretsiz kart fragman kapaliyken yok):
       sabit dort sutun bir bosluk birakiyordu. */
    .pkx-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
    .pkx-kart { padding: 26px 22px 24px; }
    .pkx-hot { transform: translateY(-10px); }
    .pkx-hot:hover { transform: translateY(-13px); }
}

.panel { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: grid; gap: 12px; max-width: 460px; }

/* ---------- Giriş / OTP ---------- */
.auth-card { max-width: 460px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 22px 20px 20px; box-shadow: var(--shadow-sm); display: grid; gap: 12px; }
.auth-brand { display: flex; justify-content: center; margin-bottom: 4px; }
.auth-card h1 { font-size: 1.5rem; letter-spacing: -.03em; margin: 0; }
.auth-card .lead { margin: 0; }
.btn-google { background: #fff; border: 1.5px solid var(--line); color: var(--ink); width: 100%; padding: 14px 18px; }
.btn-google:hover { border-color: #c5d0ca; box-shadow: var(--shadow-sm); }
.btn-google svg { width: 22px; height: 22px; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.auth-or span { flex: 1; height: 1px; background: var(--line); }
.auth-or small { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.otp-step { display: grid; gap: 12px; }
.otp-step label { display: grid; gap: 6px; }
.otp-step label span { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.otp-step label span em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: #9aa9a1; }
.otp-step input { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; font: inherit; font-size: 1.05rem; background: #f6f9f7; }
.otp-step input:focus { outline: none; border-color: var(--green); background: #fff; }
#otp-code-input { font-size: 1.9rem; font-weight: 800; letter-spacing: .42em; text-align: center; padding: 10px 14px 10px calc(14px + .42em); }
.otp-sent { color: var(--ink-2); font-size: .92rem; margin: 0; }
.otp-sent b { white-space: nowrap; }
.otp-resend { color: var(--muted); font-size: .88rem; text-align: center; margin: 0; }
.linkish { background: none; border: 0; padding: 0; color: var(--green-2); font-weight: 700; cursor: pointer; text-decoration: underline; font-size: inherit; }
.hdr-user { color: var(--muted); font-weight: 600; }
.hdr-login { color: var(--green-2); }
.hdr-signup { color: var(--ink); }
.auth-switch { margin: 4px 0 0; text-align: center; color: var(--muted); font-size: .92rem; }
.auth-switch a { color: var(--green-2); font-weight: 800; }
.lead .btn-google { margin-top: 4px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Mobil giriş ekranı ---------- */
.page-account-login,
.page-account-register {
    background: #f7fbf8;
    height: 100vh;
    height: 100dvh;
}
.auth-screen {
    min-height: 100%;
    min-height: 100dvh;
    min-height: 100svh;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    padding-top: max(12px, var(--sat));
    background:
        radial-gradient(120% 50% at 50% -10%, #fff 0%, transparent 70%),
        #f7fbf8;
}
.auth-screen:before {
    content: "";
    position: absolute;
    left: -20%;
    right: -20%;
    top: -8%;
    height: 42%;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(115deg, transparent 48%, rgba(15, 122, 52, .18) 49%, rgba(15, 122, 52, .18) 50.5%, transparent 51.5%),
        linear-gradient(65deg, transparent 48%, rgba(15, 122, 52, .12) 49%, rgba(15, 122, 52, .12) 50.5%, transparent 51.5%);
    background-size: 72px 52px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}
.auth-screen-in {
    position: relative;
    z-index: 2;
    width: min(420px, 100%);
    margin: 0 auto;
    padding: 8px 28px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-items: stretch;
    text-align: center;
    flex: 1 1 auto;
    min-height: 0;
}
.auth-lockup {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin: 4px 0 6px;
}
.auth-lockup small {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #93a39a;
}
.auth-screen h1 {
    font-size: 2rem;
    letter-spacing: -.045em;
    margin: 10px 0 8px;
    color: var(--ink);
}
.auth-screen .otp-step { gap: 12px; margin-top: 10px; }
.auth-field {
    position: relative;
    display: block !important;
}
.auth-field-ico {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    color: #8aa196;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.auth-field-ico svg { width: 20px; height: 20px; }
.auth-screen .otp-step input,
.auth-field input {
    width: 100%;
    border: 1.5px solid #d7e4dc;
    border-radius: 999px;
    padding: 16px 18px 16px 50px;
    font: inherit;
    font-size: 1.02rem;
    font-weight: 600;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 31, 46, .04);
    color: var(--ink);
}
.auth-field-code input,
.auth-screen #otp-code-input {
    padding: 12px 18px 12px calc(18px + .42em) !important;
    letter-spacing: .42em;
    text-align: center;
    font-size: 1.7rem;
}
.auth-screen .otp-step input:focus {
    outline: none;
    border-color: var(--ana);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 129, 146, .14);
}
.auth-screen .otp-step input::placeholder { color: #b0bec2; font-weight: 600; }
.auth-send {
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 16px;
    background: var(--ana);
    color: #fff;
    font: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.015em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 16px rgba(59, 129, 146, .28);
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.auth-send:hover { background: var(--ana-koyu); }
.auth-send:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(59, 129, 146, .22); }
.auth-send:disabled { opacity: .65; cursor: progress; }
.auth-send-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auth-send-ico svg { width: 16px; height: 16px; display: block; }
.auth-screen .hint {
    color: #8b9a93;
    font-size: .82rem;
    font-weight: 600;
}
.auth-screen .auth-or {
    margin: 2px 0;
    color: #8b9a93;
}
.auth-screen .auth-or small {
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.auth-screen .btn-google {
    background: #fff;
    border: 1.5px solid #d7e4dc;
    color: var(--ink);
    font-weight: 800;
    padding: 14px 18px;
    box-shadow: 0 8px 24px rgba(15, 31, 46, .04);
}
.auth-screen .auth-switch {
    margin: 8px 0 0;
    color: #6b7c76;
    font-size: 1rem;
    font-weight: 600;
}
.auth-screen .auth-switch a { color: var(--green-2); font-weight: 800; }
.auth-screen .auth-switch b { font-weight: 800; }
.auth-scene {
    position: relative;
    z-index: 1;
    flex: 1 0 210px;
    min-height: 210px;
    margin-top: auto;
    overflow: hidden;
}
.auth-scene:before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 48px;
    z-index: 1;
    background: linear-gradient(#f7fbf8, rgba(247,251,248,0));
    pointer-events: none;
}
.auth-land {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}
.auth-screen .otp-sent { text-align: center; }
.auth-screen .form-error { text-align: center; }
.auth-screen.is-register .brand-x-auth { width: 118px; }
.auth-screen.is-register h1 { font-size: 1.7rem; }
.auth-screen.is-register .auth-lockup { margin: 0; }
.auth-screen.is-register .auth-switch { margin-bottom: 6px; }
@media (min-width: 720px) {
    .auth-screen-in { padding-top: 36px; }
    .auth-scene { min-height: 260px; }
    .brand-x-auth { width: 168px; }
}

/* ---------- Tam video kişiselleştirme ---------- */
.full { margin-top: 26px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 18px; display: grid; gap: 14px; }
.full-head h2 { font-size: 1.2rem; letter-spacing: -.02em; }
.full-head p { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.full-login h2 { font-size: 1.15rem; }
.full-form { display: grid; gap: 12px; }
.full-form label { display: grid; gap: 6px; }
.full-form label > span, .up-label { font-size: .75rem; font-weight: 600; color: var(--muted); }
.full-form label > span em, .up-label em { font-style: normal; font-weight: 500; color: #9aa9a1; }
.full-form input[type="text"], .full-form input[type="tel"], .full-form input:not([type]), .full-form textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 13px 14px; font: inherit; font-size: 1.05rem; background: #f6f9f7; }
.full-form input:focus, .full-form textarea:focus { outline: none; border-color: var(--green); background: #fff; }
.fw-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; }
.fw-back, .fw-spacer { width: 40px; height: 40px; }
.fw-back {
    border-radius: 50%; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.fw-back svg { width: 18px; height: 18px; }
.fw-titles { text-align: center; min-width: 0; }
.fw-titles h2 { font-size: 1.08rem; letter-spacing: -.015em; font-weight: 700; }
.fw-crumb { font-size: .75rem; color: var(--muted); font-weight: 500; margin-top: 1px; }
.fw-bars { list-style: none; display: flex; gap: 4px; }
/* Tek adim kaldiysa ilerleme cubugu gizlenir; display:flex, [hidden]'i
   ozgullukte yendigi icin acikca kapatiliyor. */
.fw-bars[hidden] { display: none !important; }
.fw-bars li { flex: 1; height: 3px; border-radius: 3px; background: #e6ede9; }
.fw-bars li.done { background: var(--green); }
.fw-bars li.on { background: var(--green-2); }
.fw-pane { display: grid; gap: 12px; }
.fw-pane[hidden] { display: none !important; }
.fw-lead { color: var(--muted); font-size: .88rem; margin: 0; }
/* Ayarlardan gelen bilgilerin ozeti: adim sorulmadi, bilgi gorunuyor. */
.fw-mine {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    font-size: .82rem; color: var(--muted); margin: 0;
}
.fw-mine .fw-mine-txt { flex: 1 1 100%; color: var(--ink); font-weight: 600; }
.fw-mine .linkish { font-size: .82rem; }
.fw-mine[hidden] { display: none !important; }
.fw-skip { width: 100%; border-radius: 8px; font-weight: 600; }
.fw-ups { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; }
.fw-list { grid-template-columns: 1fr !important; }
.full .btn-primary.sheet-cta {
    width: 100%; justify-content: center; padding: 13px 16px; font-size: .95rem; font-weight: 650; letter-spacing: 0;
    border-radius: 8px; background: var(--ana); box-shadow: none;
}
.full .btn-primary.sheet-cta:hover { background: var(--ana-koyu); box-shadow: none; }
.full .btn-ghost { border-radius: 8px; font-weight: 650; }
.lt-live { margin: 2px 0 2px; }
.lt-live-stage {
    position: relative; height: 142px; border-radius: 10px; overflow: hidden;
    background: #0b1a12 center / cover no-repeat;
}
.lt-live-stage:before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
}
.lt-live-stage > small {
    position: absolute; left: 10px; top: 8px; z-index: 1;
    color: rgba(255,255,255,.78); font-size: .68rem; font-weight: 600; letter-spacing: .02em;
}
.lt-live-band {
    position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px;
    display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 8px;
    padding: 7px 10px 7px 7px; border-radius: 999px; min-width: 0;
    background: rgba(8,12,14,.82); color: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lt-live-face {
    width: 42px; height: 42px; border-radius: 50%;
    background: #2a3330 center / cover no-repeat;
    box-shadow: 0 0 0 2px #dfff00;
}
.lt-live-who { min-width: 0; }
.lt-live-nm {
    font-size: .92rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lt-live-nm b { font-weight: 800; }
.lt-live-rl {
    font-size: .7rem; color: rgba(255,255,255,.78); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lt-live-ph {
    display: flex; align-items: center; gap: 5px;
    font-size: .78rem; font-weight: 800; letter-spacing: -.03em; white-space: nowrap;
}
.lt-live-ico {
    width: 22px; height: 22px; border-radius: 50%; background: #dfff00; color: #123;
    display: inline-flex; align-items: center; justify-content: center;
}
.lt-live-ico svg { width: 12px; height: 12px; fill: currentColor; }
.lt-live-logo { display: none; max-width: 72px; }
.lt-live-logo.has { display: block; }
.lt-live-logo img { display: block; max-height: 28px; max-width: 72px; object-fit: contain; }
.lt-live .is-ph { opacity: .45; }
.lt-live[data-focus="name"] .lt-live-nm { color: #dfff00; }
.lt-live[data-focus="title"] .lt-live-rl { color: #dfff00; }
.lt-live[data-focus="phone"] .lt-live-ph { color: #dfff00; }
.lt-live[data-focus="media"] .lt-live-face { box-shadow: 0 0 0 3px #dfff00, 0 0 14px rgba(223,255,0,.55); }

.lt-live[data-style="2"] .lt-live-band,
.lt-live[data-style="7"] .lt-live-band,
.lt-live[data-style="17"] .lt-live-band {
    background: rgba(255,255,255,.9); color: #111;
}
.lt-live[data-style="2"] .lt-live-rl,
.lt-live[data-style="7"] .lt-live-rl,
.lt-live[data-style="17"] .lt-live-rl { color: #555; }
.lt-live[data-style="2"] .lt-live-face { box-shadow: 0 0 0 2px #fff; }
.lt-live[data-style="2"] .lt-live-band { grid-template-columns: auto minmax(0,1fr) auto; min-height: 56px; }
.lt-live[data-style="2"] .lt-live-who,
.lt-live[data-style="2"] .lt-live-ph { grid-column: 2; grid-row: 1; }
.lt-live[data-style="2"] .lt-live-logo { grid-column: 3; grid-row: 1; }
.lt-live[data-style="2"] .lt-live-who { animation: ltLiveWho 6.4s cubic-bezier(.2,.75,.2,1) infinite; }
.lt-live[data-style="2"] .lt-live-ph { animation: ltLivePh 6.4s cubic-bezier(.2,.75,.2,1) infinite; }
@keyframes ltLiveWho {
    0%, 6% { opacity: 0; transform: translateY(6px); }
    10%, 38% { opacity: 1; transform: none; }
    46%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes ltLivePh {
    0%, 42% { opacity: 0; transform: translateY(8px); }
    50%, 82% { opacity: 1; transform: none; }
    90%, 100% { opacity: 0; transform: translateY(-6px); }
}
.lt-live[data-style="3"] .lt-live-who { background: #dfff00; color: #123; border-radius: 4px; padding: 4px 8px; transform: skewX(-8deg); }
.lt-live[data-style="3"] .lt-live-nm, .lt-live[data-style="3"] .lt-live-rl { color: #123; transform: skewX(8deg); }
.lt-live[data-style="3"][data-focus="name"] .lt-live-nm,
.lt-live[data-style="3"][data-focus="title"] .lt-live-rl { color: #255563; }
.lt-live[data-style="4"] .lt-live-band { border-radius: 12px; background: rgba(12,16,18,.62); }
.lt-live[data-style="4"] .lt-live-ph { border: 1.5px solid rgba(255,255,255,.8); border-radius: 999px; padding: 4px 8px; }
.lt-live[data-style="5"] .lt-live-band { border-radius: 6px; background: #111; box-shadow: inset 0 -3px 0 #dfff00; }
.lt-live[data-style="6"] .lt-live-band { background: rgba(255,255,255,.2); }
.lt-live[data-style="6"] .lt-live-ico { background: #111; color: #fff; }
.lt-live[data-style="7"] .lt-live-face { border-radius: 4px; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); box-shadow: none; }
.lt-live[data-style="8"] .lt-live-face { clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%); box-shadow: 0 0 0 3px #dfff00; }
.lt-live[data-style="8"] .lt-live-ico { background: #2a2a2a; color: #fff; }
.lt-live[data-style="9"] .lt-live-band { border-radius: 12px; }
.lt-live[data-style="9"] .lt-live-ph { background: rgba(0,0,0,.35); border-radius: 999px; padding: 4px 8px; }
.lt-live[data-style="10"] .lt-live-band { padding: 5px 8px 5px 5px; }
.lt-live[data-style="10"] .lt-live-face { width: 36px; height: 36px; }
/* ALT BANT PARCALARI ("lego").
   Kalip (data-style) bandin sekli; simgenin RENGI data-acc'ten, sagdaki
   blok data-right'tan geliyor. Eskiden 11-20 arasi ayri "tasarim"di;
   aralarindaki tek fark bu parcalardi. Kalip kurallarindan sonra
   yazildiklari icin ayni agirlikta olmalari yetiyor. */
.lt-live[data-acc="sari"] .lt-live-ico { background: #dfff00; color: #123; box-shadow: none; }
.lt-live[data-acc="kirmizi"] .lt-live-ico { background: #e31c23; color: #fff; box-shadow: none; }
.lt-live[data-acc="yesil"] .lt-live-ico { background: #25d366; color: #fff; box-shadow: none; }
.lt-live[data-acc="mavi"] .lt-live-ico { background: #2b9bff; color: #fff; box-shadow: none; }
.lt-live[data-acc="altin"] .lt-live-ico { background: #c9a227; color: #fff; box-shadow: none; }
.lt-live[data-acc="siyah"] .lt-live-ico { background: #161616; color: #fff; box-shadow: none; }
.lt-live[data-acc="beyaz"] .lt-live-ico { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px currentColor; }
.lt-live[data-acc="yok"] .lt-live-ico { background: none; color: #e31c23; box-shadow: none; }
.lt-live[data-style="2"][data-acc="beyaz"] .lt-live-ico,
.lt-live[data-style="7"][data-acc="beyaz"] .lt-live-ico,
.lt-live[data-style="17"][data-acc="beyaz"] .lt-live-ico { color: #161616; }
.lt-live[data-icon="yok"] .lt-live-ico { display: none; }
/* Bandin sag ucu: serit + logo + sag blok tek gride oturur. */
.lt-live-end { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Sag blok: logo yuklendiyse logo kazanir (videodaki kural da bu). */
.lt-live-rt { display: flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700;
    letter-spacing: .02em; white-space: nowrap; }
.lt-live-rt .rt-wm { display: flex; flex-direction: column; line-height: 1.08; }
.lt-live-rt small { display: block; font-size: .56rem; font-weight: 600; opacity: .7; }
.lt-live-rt svg { width: 18px; height: 18px; }
.lt-live-logo.has ~ .lt-live-rt, .lt-live[data-right="logo"] .lt-live-rt { display: none; }
/* Kenar seridi: sag blogun solunda egik renkli cizgi. */
.lt-live-stripe { width: 3px; height: 34px; flex: none; margin: 0 1px;
    transform: rotate(18deg); border-radius: 2px; background: #dfff00; }
.lt-live[data-acc="kirmizi"] .lt-live-stripe { background: #d0122d; }
.lt-live[data-acc="yesil"] .lt-live-stripe { background: #25d366; }
.lt-live[data-acc="mavi"] .lt-live-stripe { background: #2b9bff; }
.lt-live[data-acc="altin"] .lt-live-stripe { background: linear-gradient(#b8860b, #e8c85a); }
.lt-live[data-acc="siyah"] .lt-live-stripe { background: #161616; }
.lt-live[data-acc="beyaz"] .lt-live-stripe, .lt-live[data-acc="yok"] .lt-live-stripe { background: rgba(255,255,255,.9); }
.lt-live[data-stripe="0"] .lt-live-stripe { display: none; }
.lt-live[data-style="2"][data-focus="name"] .lt-live-nm,
.lt-live[data-style="7"][data-focus="name"] .lt-live-nm,
.lt-live[data-style="17"][data-focus="name"] .lt-live-nm { color: #2f6b7a; }
.lt-live[data-style="2"][data-focus="title"] .lt-live-rl,
.lt-live[data-style="7"][data-focus="title"] .lt-live-rl,
.lt-live[data-style="17"][data-focus="title"] .lt-live-rl { color: #2f6b7a; }
@media (max-width: 420px) {
    .lt-live-ph span { max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; }
}
.up { display: grid; gap: 6px; justify-items: start; }
.up-box { position: relative; width: 100%; min-height: 120px; border: 2px dashed #cfdad3; border-radius: 16px; background: #f6f9f7; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.up-box.round { width: 120px; height: 120px; min-height: 0; border-radius: 50%; }
/* Yukleneni kaldirma dugmesi. Yalnizca dosya varken gorunur.
   Dokunma hedefi 40 px: mobilde 24 px'lik bir capraz isabet etmiyordu. */
.up-sil { position: absolute; top: 6px; right: 6px; z-index: 3; width: 40px; height: 40px;
  display: none; align-items: center; justify-content: center; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 26px; line-height: 1;
  color: #fff; background: rgba(17,24,22,.62); -webkit-tap-highlight-color: transparent; }
.up-box.has .up-sil { display: flex; }
.up-sil:hover, .up-sil:focus-visible { background: rgba(178,32,32,.88); outline: none; }
.up-box.round .up-sil { top: 2px; right: 2px; width: 36px; height: 36px; font-size: 22px; }
.up-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; background: #fff; }
.up-box.round img { object-fit: cover; }
.up-box.has img { display: block; }
.up-box.has .up-txt { display: none; }
.up-txt { color: var(--muted); font-weight: 700; font-size: .9rem; }
.up-box:hover { border-color: var(--green); }
.opt { display: grid; gap: 8px; }
.opt-head { display: flex; align-items: center; justify-content: space-between; }
.opt-val { font-size: .9rem; color: var(--ink-2); }
.opt-val b { color: var(--green-2); }
.chips-wrap { display: grid; gap: 8px; }
@media (min-width: 640px) { .chips-wrap { grid-template-columns: 1fr 1fr; } }
.chip { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; background: #fff; }
.chip input { accent-color: var(--green-2); width: 18px; height: 18px; flex: 0 0 18px; }
.chip > span { display: grid; flex: 1; font-weight: 700; font-size: .95rem; }
.chip > span small { font-weight: 500; color: var(--muted); font-size: .78rem; }
.chip:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.chip-play { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: .8rem; color: var(--green-2); flex: 0 0 34px; }
.sw { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 26px; }
.lt-modal { position: fixed; inset: 0; z-index: 110; background: rgba(15,31,46,.6); display: flex; align-items: center; justify-content: center; padding: 12px; }
.lt-modal-in { background: #fff; border-radius: 20px; width: min(1100px, 100%); height: min(92vh, 900px); display: flex; flex-direction: column; overflow: hidden; }
.lt-modal-in header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.lt-modal-in iframe { flex: 1; width: 100%; border: 0; background: #111; }
.lt-modal-in small { padding: 8px 16px; color: var(--muted); }
@media (max-width: 720px) {
    .lt-modal { padding: 0; }
    .lt-modal-in { width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
    .lt-modal-in small { display: none; }
}
.full-actions { display: grid; gap: 10px; }
@media (min-width: 640px) { .full-actions { grid-template-columns: 1fr 1.4fr; } }
.full-done { display: grid; gap: 10px; }
.full-done.is-hidden { display: none; }
.btn-wa { background: #25d366; color: #fff; }
.tag-full, .tag-prev { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 4px; }
.tag-full { background: var(--green-2); color: #fff; }
.tag-prev { background: #e6ede9; color: var(--muted); }

/* ---------- Yönetim ---------- */
.adm { max-width: 1100px; margin: 0 auto; padding: 8px 18px 40px; }
.adm-list { display: grid; gap: 12px; }
/* Yonetim ayarlarindaki acik/kapali anahtari. */
.adm-sw { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: .9rem; }
.adm-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.adm-sw > span { position: relative; width: 40px; height: 23px; border-radius: 999px; background: #d7dfda;
    flex: none; transition: background .15s ease; }
.adm-sw > span:after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease; }
.adm-sw input:checked ~ span { background: var(--ana, #3b8192); }
.adm-sw input:checked ~ span:after { transform: translateX(17px); }
/* Uretimden pakete yonlendirilen kullaniciya kisa aciklama. */
.pkx-neden { display: inline-block; margin: 0 0 10px; padding: 7px 12px; border-radius: 999px;
    background: var(--ana-soft, #e7f2f4); color: var(--ana-ink, #2f6b7a); font-size: .85rem; font-weight: 650; }
.adm-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: grid; gap: 10px; }
.adm-card header { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .82rem; }
.adm-badge { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: #e6ede9; color: var(--ink-2); }
.st-requested .adm-badge { background: #fef3c7; color: #92400e; }
.st-contacted .adm-badge { background: #dbeafe; color: #1e40af; }
.st-approved .adm-badge, .st-done .adm-badge { background: var(--green-soft); color: var(--green-ink); }
.st-cancelled .adm-badge { background: #fee2e2; color: #991b1b; }
.adm-body { display: grid; gap: 12px; }
@media (min-width: 800px) { .adm-body { grid-template-columns: 1fr 1fr 1.2fr; } }
.adm-col { display: grid; gap: 3px; font-size: .92rem; color: var(--ink-2); align-content: start; }
.adm-col strong { color: var(--ink); font-size: 1rem; }
.adm-col a { color: var(--green-2); font-weight: 700; }
.adm-col small { color: var(--muted); font-size: .8rem; }
.adm-files { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.adm-files img { height: 40px; max-width: 120px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.adm-files img.round { width: 40px; border-radius: 50%; object-fit: cover; }
.adm-files i { color: var(--muted); font-size: .8rem; }
.adm-note { font-style: italic; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
.adm-ok { color: var(--green-ink); font-weight: 700; font-size: .9rem; }
.btn.danger { color: var(--danger); }

/* ---------- Yönetim: panel / üyeler ---------- */
.adm-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-nav a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: .86rem; }
.adm-nav a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(5, 1fr); } }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 2px; }
.stat b { font-size: 1.7rem; letter-spacing: -.03em; line-height: 1; }
.stat span { font-weight: 700; font-size: .9rem; }
.stat small { color: var(--muted); font-size: .76rem; }
.stat.hot { border-color: var(--green); background: var(--green-soft); }
.stat.warn { border-color: #f59e0b; background: #fef3c7; }
.adm-sec { margin-top: 22px; }
.adm-sec h2 { font-size: 1.15rem; letter-spacing: -.02em; margin-bottom: 10px; }
.cnt { font-size: .8rem; color: var(--muted); font-weight: 700; margin-left: 6px; }
.tbl-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th, .tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef2ef; vertical-align: middle; white-space: nowrap; }
.tbl th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl a { color: var(--green-2); font-weight: 700; }
.tbl small { color: var(--muted); }
.tbl.small { font-size: .82rem; }
.muted { color: var(--muted); }
.st { display: inline-block; font-size: .74rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #e6ede9; color: var(--ink-2); }
.st-ready { background: var(--green-soft); color: var(--green-ink); }
.st-failed { background: #fee2e2; color: #991b1b; }
.st-preparing, .st-queued { background: #dbeafe; color: #1e40af; }
.adm-search { display: flex; gap: 8px; margin-bottom: 14px; }
.adm-search input { flex: 1; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; font: inherit; background: #fff; }
.adm-grid { display: grid; gap: 12px; }
@media (min-width: 860px) { .adm-grid { grid-template-columns: 1fr 1fr; } }
.dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: .92rem; }
.dl dt { color: var(--muted); font-weight: 700; }
.dl dd small { color: var(--muted); }
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.kicker a { color: inherit; }

/* ---------- Kota / fatura ---------- */
.credit-chip { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); font-size: .74rem; font-weight: 800; }
.credit-form { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; }
.credit-form input { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; }
.full-actions.has-credit { grid-template-columns: 1fr; }
@media (min-width: 640px) { .full-actions.has-credit { grid-template-columns: 1fr 1.5fr 1fr; } }
#full-produce small { font-weight: 600; opacity: .9; }
.billing { margin-top: 26px; }
.billing h2 { font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: 4px; }
.billing .panel { max-width: none; margin-top: 12px; }
.billing .panel label span { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- Video hazırlanıyor (yeni) ---------- */
/* Bekleme uyarisi: sayfanin en ustunde, ilk bakista gorunur. */
.prep-uyari { display: flex; align-items: center; gap: 9px; margin: 0 0 10px;
    padding: 9px 12px; border-radius: 12px; background: var(--green-soft);
    border: 1px solid rgba(15,122,52,.14); color: var(--green-ink); }
.prep-uyari strong { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: -.005em; }
.prep-uyari small { display: block; color: #4a7682; font-size: var(--fs-micro); line-height: 1.35; }
.prep-uyari-ico { position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%;
    background: var(--green-2); display: inline-flex; align-items: center; justify-content: center; }
.prep-uyari-ico i { width: 7px; height: 7px; border-radius: 50%; background: #dff4f8;
    animation: pulse 1.6s infinite; }

.prep { display: grid; gap: 12px; }
.prep-card {
    position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 9 / 13; max-height: 62vh; background: #0b1a12; color: #fff;
    box-shadow: var(--shadow); isolation: isolate;
}
.prep-bg { position: absolute; inset: -6%; background: var(--poster) center / cover no-repeat, linear-gradient(160deg, #123038, #0b1a12); filter: saturate(1.05); animation: kenburns 18s ease-in-out infinite alternate; }
.prep-card:not(.has-poster) .prep-bg { filter: blur(6px) saturate(.9) brightness(.8); }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2%, 2%); } }
.prep-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.05) 55%, rgba(4,20,12,.85) 100%); }
/* Drone kartin MERKEZINDE dolasir. Eskiden sol ust kosede baslayip yuzdeli
   otelemelerle ucuyordu; genis ekranda sola yapisik kaliyor, sag taraf bos
   duruyordu. Artik merkeze sabitlenip cevresinde geziniyor. */
.prep-drone { position: absolute; width: 54px; height: 54px; left: 50%; top: 50%; margin: -27px 0 0 -27px;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); animation: droneFly 14s ease-in-out infinite; z-index: 2; }
.prep-drone .prop { animation: propSpin .35s linear infinite; transform-origin: center; stroke-dasharray: 12 8; }
@keyframes propSpin { to { stroke-dashoffset: -20; } }
@keyframes droneFly {
    0%   { transform: translate(-90%, -60%) rotate(-6deg) scale(.95); }
    25%  { transform: translate(70%, -95%) rotate(5deg) scale(1.08); }
    50%  { transform: translate(105%, 45%) rotate(8deg) scale(1.15); }
    75%  { transform: translate(-60%, 80%) rotate(-4deg) scale(1); }
    100% { transform: translate(-90%, -60%) rotate(-6deg) scale(.95); }
}
.prep-top { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.prep-brand b { font-size: 1rem; letter-spacing: -.02em; }
.prep-brand i { font-style: normal; color: #8fd8e4; }
/* Hazirlaniyor hapi: kirmizi "kayit" noktasi endise veriyordu, yesil. */
.prep-dot { width: 8px; height: 8px; border-radius: 50%; background: #8fd8e4;
    box-shadow: 0 0 0 0 rgba(124,243,154,.7); animation: pulse 1.6s infinite; }
.prep-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 5px 10px; font-size: .74rem; font-weight: 700; backdrop-filter: blur(6px); }
.prep-body { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; display: grid; gap: 4px; }
.prep-body small { font-size: .8rem; opacity: .9; }
.prep-body strong { font-size: 1.7rem; letter-spacing: -.03em; line-height: 1.05; }
.prep-pct { display: flex; align-items: baseline; gap: 2px; margin-top: 8px; }
.prep-pct b { font-size: 2.6rem; letter-spacing: -.05em; line-height: 1; }
.prep-pct span { font-size: 1.1rem; opacity: .85; }
.prep-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; }
.prep-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8fd8e4, #4795a6); transition: width .8s ease; position: relative; }
.prep-bar i:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: shimmer 1.8s linear infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.prep-body em { font-style: normal; font-size: .84rem; font-weight: 700; color: #d4f2f8; }
.prep-msg { text-align: center; color: var(--ink-2); font-weight: 600; min-height: 1.4em; }
.prep-eta { text-align: center; color: var(--muted); font-size: .88rem; margin-top: -6px; }
.timeline { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; }
.timeline li { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: .7rem; font-weight: 700; color: var(--muted); line-height: 1.2; position: relative; }
.timeline li i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #d5dde1; background: #fff; display: block; position: relative; }
.timeline li:not(:last-child):after { content: ""; position: absolute; top: 12px; left: calc(50% + 15px); width: calc(100% - 30px); height: 2px; background: #e6ede9; }
.timeline li.done { color: var(--ink); }
.timeline li.done i { background: var(--green); border-color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; }
.timeline li.done:after { background: var(--green); }
.timeline li.current { color: var(--green-ink); }
.timeline li.current i { border-color: var(--green); border-top-color: transparent; animation: spin 1s linear infinite; }
.timeline li.failed { color: var(--danger); }
.timeline li.failed i { border-color: var(--danger); }
/* ---------- VIDEO HAZIRLANIYOR (yeni tasarim) ----------
   Tek kart: uydu karesi + parsel isareti ustte, yuzde ve asama altta.
   Altinda dort adim ve tek satir bilgi karti. Drone animasyonu yok:
   kullanici kendi parselini goruyor, bekleme somut. */
.vpage-hz { max-width: 560px; padding-top: calc(18px + var(--sat)); }
.hz-bas { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.hz-geri { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--card);
    border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; }
.hz-geri svg { width: 20px; height: 20px; }
.hz-bas-yazi h1 { font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.15; }
.hz-bas-yazi p { margin: 3px 0 0; color: var(--muted); font-size: var(--fs-body); line-height: 1.35; }

.hz-kart { position: relative; border-radius: 24px; overflow: hidden; background: #0d1a14; color: #fff;
    box-shadow: var(--shadow); isolation: isolate; }
.hz-gorsel { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.hz-kart .prep-bg { position: absolute; inset: 0; animation: none; filter: saturate(1.05); }
.hz-kart:not(.has-poster) .prep-bg { filter: blur(6px) saturate(.9) brightness(.8); }
.hz-shade { position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(5,16,11,.62) 0%, rgba(5,16,11,.12) 30%, rgba(5,16,11,.05) 55%, rgba(5,16,11,.55) 100%); }
.hz-sinir { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.hz-sinir polygon { fill: rgba(124,243,154,.28); stroke: #8fd8e4; stroke-width: 6; stroke-linejoin: round; }
.hz-pin-g { fill: #fff; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.hz-pin-i { fill: var(--green); }
.hz-ust { position: absolute; left: 16px; right: 14px; top: 14px; z-index: 3;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hz-yer small { display: block; font-size: .8rem; font-weight: 600; opacity: .92; letter-spacing: -.01em;
    text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.hz-yer strong { display: block; margin-top: 2px; font-size: 2.2rem; letter-spacing: -.04em; line-height: 1.05;
    text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.hz-pill { flex: none; display: inline-flex; align-items: center; gap: 7px; background: rgba(8,16,12,.68);
    border-radius: 999px; padding: 7px 13px; font-size: .78rem; font-weight: 700;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hz-ozet { position: absolute; left: 12px; bottom: 12px; z-index: 3; list-style: none; margin: 0; padding: 0;
    display: grid; gap: 7px; }
.hz-ozet li { display: flex; align-items: center; gap: 8px; background: rgba(8,16,12,.62); border-radius: 13px;
    padding: 5px 11px 5px 5px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hz-ozet-ico { width: 26px; height: 26px; flex: none; border-radius: 9px; background: rgba(255,255,255,.14);
    display: inline-flex; align-items: center; justify-content: center; }
.hz-ozet-ico svg { width: 15px; height: 15px; }
.hz-ozet strong { display: block; font-size: .74rem; letter-spacing: -.01em; }
.hz-ozet small { display: block; font-size: .63rem; opacity: .72; }

.hz-alt { display: flex; align-items: center; gap: 14px; padding: 14px 16px 16px; background: #0a1710; }
.hz-pct { flex: none; display: flex; align-items: baseline; gap: 1px; }
.hz-pct i { font-style: normal; font-size: .95rem; font-weight: 800; color: #8fd8e4; }
.hz-pct b { font-size: 2.3rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.hz-alt-orta { flex: 1; min-width: 0; display: grid; gap: 7px; }
.hz-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.hz-bar i { display: block; height: 100%; border-radius: 999px; position: relative;
    background: linear-gradient(90deg, #8fd8e4, #4795a6); transition: width .8s ease; }
.hz-bar i:after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: translateX(-100%); animation: shimmer 1.8s linear infinite; }
.hz-alt-orta em { font-style: normal; font-size: .74rem; line-height: 1.3; color: rgba(255,255,255,.78); }
.hz-kalan { flex: none; text-align: right; font-size: .76rem; line-height: 1.35; color: rgba(255,255,255,.82); }
.hz-kalan b { display: block; font-weight: 400; }

.hz-adim { list-style: none; display: flex; margin: 16px 0 0; padding: 0 2px; }
.hz-adim li { flex: 1; position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.hz-adim li + li:before { content: ""; position: absolute; z-index: 0; top: 17px; right: 50%; width: 100%;
    height: 2px; background: var(--line); }
.hz-adim li.done + li:before, .hz-adim li.done + li.done:before { background: var(--green); }
.hz-adim i { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--card); border: 2px solid var(--line); color: var(--muted); }
.hz-adim i svg { width: 17px; height: 17px; }
.hz-adim li.done i { background: var(--green); border-color: var(--green); color: #fff; }
.hz-adim li.current i { border-color: var(--green); box-shadow: 0 0 0 4px rgba(23,165,69,.14); }
.hz-adim li.current i:after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--green); }
.hz-adim li.failed i { border-color: var(--danger); color: var(--danger); }
.hz-adim b { margin-top: 3px; font-size: .84rem; color: var(--ink); }
.hz-adim li.current b { color: var(--green-ink); }
.hz-adim span { max-width: 88px; font-size: .7rem; line-height: 1.25; color: var(--muted); }
.hz-adim li.current span { color: var(--ink); font-weight: 700; }

.hz-not { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 11px;
    margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: #eef7f1; }
.hz-not-ico { flex: none; color: var(--green); }
.hz-not-ico svg { width: 22px; height: 22px; display: block; }
.hz-not strong { display: block; font-size: .92rem; letter-spacing: -.015em; color: var(--green-ink); }
.hz-not p { margin: 3px 0 0; max-width: 78%; font-size: .8rem; line-height: 1.4; color: #5c7480; }
.hz-not-gorsel { position: absolute; right: 10px; bottom: 6px; width: 62px; height: 62px;
    color: #3b8192; opacity: .16; }

.prep-note { display: flex; align-items: center; gap: 10px; background: var(--green-soft); color: var(--green-ink); border-radius: 14px; padding: 10px 12px; font-size: .86rem; font-weight: 600; }
.prep-note svg { width: 20px; height: 20px; flex: 0 0 20px; }
/* DOGRULAMA KARTI.
   Burasi kullanicinin telefonunu verdigi yer: kisa, sakin ve guven veren
   olmali. Alanlarda simge var (ne istendigi bir bakista belli), dugme tek
   ve net, altinda numaranin ne icin kullanildigini soyleyen bir satir. */
/* DOGRULAMA PENCERESI ALT SAYFA OLARAK KALIR.
   Secici tam ekran panele cevrildiginde (edermi duzeni) bu pencere de onun
   stillerini aldi ve ekranin TEPESINE yapisti. Burada eski alt sayfa
   yerlesimi geri veriliyor: asagida, yuvarlak ust koseli, yukari kayarak. */
.otp-modal .pk-sheet {
    inset: auto; left: 0; right: 0; top: auto;
    bottom: var(--pk-alt, 0px);
    height: auto; max-height: min(92vh, 92dvh);
    border-radius: 26px 26px 0 0;
    padding-bottom: var(--sab);
    box-shadow: 0 -20px 60px rgba(15, 31, 46, .25);
    animation: otpYukari .26s cubic-bezier(.2, .8, .2, 1);
}
@keyframes otpYukari { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.otp-modal .pk-head { border-bottom: 0; box-shadow: none; }
.otp-modal .pk-head { padding: 4px 12px 0; }
.otp-modal .pk-titles h2 { font-size: 1.24rem; letter-spacing: -.025em; }
.otp-body { padding: 4px 18px 20px; overflow-y: auto; }
.otp-modal .otp-step { gap: 10px; }
.otp-field { position: relative; display: block; }
.otp-ico { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
    color: #8a9aa0; pointer-events: none; transition: color .15s ease; }
.otp-ico svg { width: 20px; height: 20px; display: block; }
.otp-field:focus-within .otp-ico { color: var(--green-2); }
.otp-modal .otp-step input {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 14px 18px 14px 46px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    background: #f7faf8;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.otp-modal .otp-step input::placeholder { color: #9aa8a0; font-weight: 500; }
.otp-modal .otp-step input:focus {
    outline: none;
    border-color: var(--ana);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 129, 146, .14);
}
/* Numaranin nicin istendigi: kucuk, yesil kalkanli tek satir. */
.otp-guven { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 2px 2px 0;
    color: var(--muted); font-size: .78rem; line-height: 1.4; }
.otp-guven svg { width: 16px; height: 16px; flex: none; color: var(--green-2); }
.otp-modal #otp-code-input {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: .42em;
    text-align: center;
    padding: 12px 18px 12px calc(18px + .42em);
}
.otp-go {
    position: relative;
    width: 100%;
    height: 54px;
    gap: 10px;
    margin-top: 2px;
    border: 0;
    border-radius: 999px;
    background: var(--ana);
    color: #fff;
    font: inherit;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(59, 129, 146, .30);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.otp-go-ico { display: inline-flex; }
.otp-go-ico svg { width: 19px; height: 19px; }
.otp-go-ok { position: absolute; right: 7px; top: 50%; width: 40px; height: 40px; margin-top: -20px;
    border-radius: 50%; background: rgba(255, 255, 255, .18); display: inline-flex;
    align-items: center; justify-content: center; }
.otp-go-ok svg { width: 18px; height: 18px; }
.otp-go:hover { filter: brightness(1.05); box-shadow: 0 12px 28px rgba(59, 129, 146, .38); }
.otp-go:active { transform: translateY(1px); }
.otp-go:disabled { opacity: .65; cursor: progress; }
.otp-modal .otp-sent { text-align: center; font-size: .92rem; color: var(--muted); }
.otp-modal .otp-sent b { color: var(--ink); }
.otp-intro { display: none; }
/* Turnstile kutusu: yalniz supheli durumda cizilir (app.js tsSor). */
.ts-kutu { display: flex; justify-content: center; min-height: 65px; }
/* PAKET OZETI: pencere hangi paketin odemesine gidildigini soyler. */
.otp-aciklama { margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--green-soft);
    color: var(--green-ink); font-size: .96rem; text-align: center; line-height: 1.4; }
.otp-aciklama b { font-weight: 800; }
.otp-aciklama span { font-weight: 800; white-space: nowrap; }
.otp-aciklama small { display: block; margin-top: 4px; font-size: .8rem; font-weight: 500; color: var(--muted); }
.otp-modal .btn-google { border-radius: 999px; padding: 13px 18px; }
.otp-modal .auth-or { margin: 2px 0; }
/* Girisle donuldu, secilen paketin odemesine gidiliyor. */
.pkx-yonlen { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; gap: 14px;
    align-items: center; justify-content: center; padding: 24px; text-align: center;
    background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 1.05rem; }
.pkx-yonlen-dot { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--line);
    border-top-color: var(--ana); animation: pkxDon .8s linear infinite; }
@keyframes pkxDon { to { transform: rotate(360deg); } }
@media (min-width: 700px) {
    .otp-modal .pk-sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: 440px; height: auto;
        transform: translate(-50%, -50%); border-radius: 24px; animation: fadeIn .18s ease; }
}

/* Çerez onayı çubuğu */
.cc { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--sab)); z-index: 60; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 14px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; transition: opacity .3s, transform .3s; }
.cc p { margin: 0; flex: 1 1 320px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.cc p a { color: var(--green-2); font-weight: 600; }
.cc-btns { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.cc-btns .btn { padding: 9px 14px; font-size: 14px; }
.cc.is-gone { opacity: 0; transform: translateY(12px); pointer-events: none; }
@media (max-width: 859px) {
    /* Onay çubuğu ilk görünümü yutmasın: daha derli toplu, düğmeler tam genişlikte. */
    .cc { left: 10px; right: 10px; bottom: calc(10px + var(--sab)); padding: 11px 13px; gap: 9px; border-radius: 18px; }
    .cc p { flex: 1 1 100%; font-size: 12.5px; line-height: 1.38; }
    .cc-btns { width: 100%; margin-left: 0; gap: 7px; }
    .cc-btns .btn { flex: 1 1 0; padding: 9px 10px; font-size: 13.5px; }
    /* Fold'daki arama kartı çubuğun üstünde kalsın. */
    body.cc-on .search-card { bottom: calc(var(--cc-h, 132px) + 20px + var(--sab)); }
}
@media (min-width: 720px) { .cc { left: auto; right: 20px; max-width: 560px; } }

/* ---------- Yönetim: kuyruk, sekmeler, yetki ---------- */
.q-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.q-tabs a { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: .84rem; color: var(--ink-2); }
.q-tabs a b { font-weight: 800; color: var(--muted); margin-left: 2px; }
.q-tabs a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.q-tabs a.on b { color: #cfdfe6; }
.q-tabs a.hot:not(.on) { border-color: #f59e0b; background: #fef3c7; color: #92400e; }
.q-tabs a.hot:not(.on) b { color: #92400e; }
.q-tbl td small { display: block; color: var(--muted); font-size: .76rem; white-space: normal; max-width: 260px; }
.qst { display: inline-block; font-size: .74rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #e6ede9; color: var(--ink-2); }
.qst-uretiliyor, .qst-sirada { background: #dbeafe; color: #1e40af; }
.qst-tarayici { background: #ede9fe; color: #5b21b6; }
.qst-takildi { background: #fef3c7; color: #92400e; }
.qst-basarisiz { background: #fee2e2; color: #991b1b; }
.qst-hazir { background: var(--green-soft); color: var(--green-ink); }
tr.q-takildi td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
tr.q-basarisiz td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.q-why { color: #92400e !important; }
.q-guest { font-weight: 700; color: var(--warn); }
.q-acts { text-align: right; }
.q-acts .btn { margin-left: 4px; }
.adm-nav a.lock { color: var(--muted); }
.credit-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.credit-quick .btn small { font-weight: 600; opacity: .85; margin-left: 4px; }
.adm-pay { color: var(--green-ink) !important; font-style: normal !important; }

/* ---------------------------------------------------------------------------
   Laboratuvar: danismanin calisma masasi. Ayarlar bir kez yapilir, hepsi ayni
   anda gorunur (sihirbaz degil) -- kullanici "herseyi orada gorebilmeli" dedi.
   -------------------------------------------------------------------------- */
/* Sayfa yan boslugu TEK yerden: alt cubuk kenarlara tasarken ayni degeri
   kullaniyor. Eskiden cubuk sabit -18px ile tasiyordu ama dar ekranda
   sayfa boslugu 14px'e iniyordu: cubuk her iki yandan 4px tasip yatay
   kaydirma cubugu aciyordu (20 Eylul 2026). */
.lab { --lab-pad: 18px; max-width: 760px; margin: 0 auto; padding: 22px var(--lab-pad) 64px; }
.lab-credit { flex: none; background: var(--green-soft, #eaf7ee); color: var(--green-2, #2f6b7a);
    border-radius: 999px; padding: 6px 12px; font-size: var(--fs-label); font-weight: 600; white-space: nowrap; }
.lab-credit b { font-weight: 700; }

.lab-card { background: #fff; border: 1px solid rgba(15,31,46,.10); border-radius: 16px;
    padding: 18px 18px 20px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(15,31,46,.05); }
/* Baslik ile kota yan yana; arada ayri bir sayfa basligi yok. */
.lab-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.lab-card-head h2 { margin: 0; margin-right: auto; font-size: var(--fs-h2); letter-spacing: -.01em; }
.lab-card-head p { flex: 1 0 100%; margin: 0; color: var(--muted); font-size: var(--fs-label); line-height: 1.45; }

/* 1. adim: parsel arama. Ana sayfadaki arama kartiyla ayni dil. */
.lab-search { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: #fff; border: 1.5px solid rgba(15,31,46,.14); border-radius: 14px;
    padding: 12px 14px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.lab-search:hover { border-color: var(--green-2, #2f6b7a); box-shadow: 0 4px 14px rgba(15,122,52,.12); }
.lab-search-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center;
    background: var(--green-soft, #eaf7ee); color: var(--green-2, #2f6b7a); border-radius: 12px; }
.lab-search-ic svg { width: 20px; height: 20px; }
.lab-search-tx { flex: 1; min-width: 0; }
.lab-search-tx strong { display: block; font-size: var(--fs-title); font-weight: 600; }
.lab-search-tx small { display: block; color: var(--muted); font-size: var(--fs-label); }
.lab-search-go { width: 36px; height: 36px; flex: none; display: grid; place-items: center;
    background: var(--green-2, #2f6b7a); color: #fff; border-radius: 50%; }
.lab-search-go svg { width: 18px; height: 18px; }

.lab-sec { border: 0; border-top: 1px solid rgba(15,31,46,.08); margin: 0; padding: 16px 0 4px; }
.lab-sec:first-of-type { border-top: 0; padding-top: 0; }
.lab-sec legend { padding: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tr-micro);
    text-transform: uppercase; color: var(--muted); }
.lab-hint { margin: 6px 0 12px; color: var(--muted); font-size: var(--fs-label); line-height: 1.45; }
.lab-form label { display: block; margin-bottom: 12px; }
.lab-form label > span { display: block; margin-bottom: 5px; font-size: var(--fs-label); font-weight: 600; }
/* font-size 16px SART: altina dusunce iOS Safari alana dokununca sayfayi
   yakinlastiriyor ve kullanici "ekran buyuyor" diyor. */
.lab-form input[type=text], .lab-form input[type=tel], .lab-form input:not([type]),
.lab-form select, .lab-form textarea,
.sd-bant-form input[type=tel], .sd-bant-form input:not([type]) {
    width: 100%; padding: 11px 12px; font: inherit; font-size: 16px;
    border: 1.5px solid rgba(15,31,46,.16); border-radius: 10px; background: #fff; color: inherit; }
.lab-form input:focus, .lab-form select:focus, .lab-form textarea:focus, .sd-bant-form input:focus {
    outline: none; border-color: var(--green-2, #2f6b7a); box-shadow: 0 0 0 3px rgba(15,122,52,.12); }
.lab-form textarea { resize: vertical; min-height: 72px; }
/* Laboratuvarda yukleme kutulari kucuk: sayfa asagi dogru uzamasin,
   asil onizleme zaten ustteki canli bantta. */
.lab-ups { display: flex; gap: 12px; align-items: center; }
.lab-ups .up-box { width: 86px; height: 86px; min-height: 0; flex: none; border-radius: 12px; }
.lab-ups .up-box.round { width: 86px; height: 86px; border-radius: 50%; }
/* Kutu yazisi TAM ORTADA dursun; eskiden yukari kaymis gibi duruyordu. */
.lab-ups .up-box { display: grid; place-items: center; text-align: center; }
.lab-ups .up-txt { font-size: .72rem; font-weight: 600; line-height: 1.2;
    padding: 0 6px; margin: 0; align-self: center; }

/* Muzik ve ses: yanindaki dugmeyle ornegi dinlenir.
   ONEMLI: ".lab-form label > span" kurali block yapiyor, onu ezmek icin
   secici daha ozel olmali; yoksa dugme secimin ALTINA duser. */
.lab-form .lab-f > span.lab-f-din,
.lab-f-din { display: flex; gap: 8px; align-items: stretch; margin: 0; }
.lab-f-din select { flex: 1 1 auto; width: auto; min-width: 0; }
.lab-din {
    flex: 0 0 46px; width: 46px; align-self: stretch;
    border: 1.5px solid rgba(15,31,46,.16); border-radius: 10px;
    background: #fff; color: var(--green-2, #2f6b7a); cursor: pointer;
    display: grid; place-items: center; transition: border-color .12s ease, background .12s ease;
}
.lab-din:hover { border-color: var(--green-2, #2f6b7a); background: var(--green-soft, #eaf7ee); }
.lab-din svg { width: 17px; height: 17px; }
.lab-din .ikon-dur { display: none; }
.lab-din.calisiyor .ikon-cal { display: none; }
.lab-din.calisiyor .ikon-dur { display: block; }
.lab-din[disabled] { opacity: .45; cursor: default; }

/* Canli alt bant: onizlemenin parcalari tiklanabilir. */
.lab-live { margin: 0 0 14px; }
.lab-live .lt-live-stage { height: 168px; }
/* ONIZLEME KESMEZ, KUCULUR.
   Eskiden dar ekranda ad "Ayberk Gu..." diye kirpiliyordu ve kullanici
   "yazdigim videoya sigmiyor mu?" diye dusunuyordu. Oysa gercek video 1080
   piksel genis, ad rahat siginiyor. Artik serit kendi dogal genisliginde
   kurulur, sonra kadraja sigacak kadar KUCULTULUR: ne kirpilir ne yalan
   soyler; uzun ad yalnizca daha kucuk gorunur. */
.lab-live .lt-live-band {
    right: auto; width: max-content; max-width: none;
    transform-origin: left bottom;
    transform: scale(var(--lab-k, 1));
}
.lab-live .lt-live-nm,
.lab-live .lt-live-rl,
.lab-live .lt-live-ph span {
    overflow: visible; text-overflow: clip; max-width: none;
}
/* Dugme gorunumunu sifirla. DIKKAT: `background: none` kisayolu kullanma —
   yuzun `center / cover` ayarini da siliyordu ve secilen fotograf 42 pikselik
   dairede sol ust kosesinden, dev gibi gorunup "fotograf gelmiyor" sanilmisti.
   Yalnizca zemin RENGI sifirlanir. */
.lab-live .lt-live-band button { background-color: transparent; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lab-live .lt-live-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lab-live .lt-live-band button:hover { outline: 2px dashed rgba(255,255,255,.5); outline-offset: 3px; border-radius: 6px; }
.lab-live .lt-live-face { position: relative;
    background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Fotograf yokken buyuk bir arti: "tiklayinca ekle". */
.lab-live .lt-live-face .lt-add { position: absolute; inset: 0; display: grid; place-items: center;
    color: rgba(255,255,255,.9); font-size: 1.4rem; font-weight: 600; line-height: 1; }
.lab-live .lt-live-face.has .lt-add { display: none; }

/* Serit tasarimi cipleri. */
.lab-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* IKI ANAHTAR (bant kapali / altyazi) — tek kutu, ince satirlar.
   Once iki kocaman kart halindeydiler ve mobilde ekranin yarisini yiyip
   tasarim kartlarini katlamanin altina itiyorlardi. */
.lab-anahtarlar { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
/* DIKKAT: ".lab-form label" block, ".lab-form label > span" de block diyor;
   ikisi de iki secicilik. Asagidaki kurallar da .lab-form ile yazilmazsa
   anahtar satiri dagiliyor (yazi tek satira yapisip dugme alta duser). */
.lab-form .lab-sw { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; cursor: pointer; }
.lab-form .lab-sw + .lab-sw { border-top: 1px solid var(--line); }
.lab-form .lab-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.lab-form .lab-sw > .lab-sw-tx { display: grid; gap: 1px; flex: 1; min-width: 0; margin: 0; }
.lab-form .lab-sw-tx b { font-size: .88rem; font-weight: 700; letter-spacing: -.01em; }
.lab-form .lab-sw-tx small { color: var(--muted); font-size: .72rem; font-weight: 500; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-form .lab-sw > .lab-sw-d { display: block; position: relative; flex: none; width: 38px; height: 22px;
    margin: 0; border-radius: 999px; background: #d7dfda; transition: background .15s ease; }
.lab-form .lab-sw-d:after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease; }
.lab-form .lab-sw input:checked ~ .lab-sw-d { background: var(--ana, #3b8192); }
.lab-form .lab-sw input:checked ~ .lab-sw-d:after { transform: translateX(16px); }
.lab-form .lab-sw input:focus-visible ~ .lab-sw-d { outline: 2px solid var(--ana, #3b8192); outline-offset: 2px; }
/* ORNEK ALTYAZI — videodaki bicim: beyaz yazi, koyu saydam kutu, bandin
   ustunde ortada. Yeri JS bandin boyuna gore ayarliyor (--sub-alt). */
.lt-live-sub { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: var(--sub-alt, 84px);
    display: flex; justify-content: center; pointer-events: none; }
.lt-live-sub[hidden] { display: none; }
.lt-live-sub > span { max-width: 100%; padding: 3px 8px; border-radius: 4px;
    background: rgba(16,16,16,.78); color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.3;
    text-align: center; opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; }
.lt-live-sub.gorunur > span { opacity: 1; transform: none; }
/* Bant kapaliyken onizleme ve tasarim kartlari sonuk. */
.lt-live.bant-kapali .lt-live-band { opacity: .25; filter: grayscale(1); }

/* ALT BANT: BES HAZIR TASARIM.
   Eskiden kalip / simge / renk / sag blok icin otuza yakin minik dugme
   vardi; kullanici "insanlar anlamiyor, karmancorman" dedi. Artik her kart
   kendi minik bandini gosteriyor: ayni ad, telefon, firma — yalnizca
   yarim olcekte. Kart ne yazdigini degil nasil gorundugunu anlatiyor. */
.lab-kit { margin: 0 0 16px; }
.lab-kit.kapali { opacity: .45; pointer-events: none; }
.lt-sec { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
/* Genis ekranda besi tek sirada: dorde bolunup besincisi alt satirda yalniz
   kalinca "eksik bir sey var" gibi duruyordu. */
@media (min-width: 720px) { .lt-sec { grid-template-columns: repeat(5, 1fr); } }
.lt-sec-b {
    display: grid; gap: 6px; padding: 6px 6px 7px; border-radius: 14px;
    border: 1.5px solid var(--line); background: #fff; cursor: pointer; text-align: left;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.lt-sec-b:hover { border-color: var(--ana, #3b8192); }
.lt-sec-b.is-on { border-color: var(--ana, #3b8192); box-shadow: 0 0 0 3px var(--ana-soft, #e7f2f4); }
.lt-sec-b > b { display: flex; align-items: center; gap: 5px; padding-left: 2px;
    font-size: .8rem; font-weight: 700; color: var(--ink-2); }
/* Secili kartin adinin onunde tik. */
.lt-sec-b.is-on > b:before { content: "✓"; color: var(--ana, #3b8192); font-size: .78rem; }
.lt-sec-b.is-on > b { color: var(--ana-ink, #2f6b7a); }
/* MINIK BANT: icerideki sahne iki kat genis kurulur ve yarim olcekle
   kuculur; boylece kartin genisligi ne olursa olsun tam oturur ve bant
   videodaki oranini korur. */
.lt-mini { position: relative; height: 62px; border-radius: 9px; overflow: hidden; }
/* Bandin parcalari burada <span>: dugmenin icinde dugme olmaz. Satir ici
   ogede yukseklik/genislik islemedigi icin blok'a cevriliyorlar. */
.lt-mini .lt-live, .lt-mini .lt-live-stage, .lt-mini .lt-live-face,
.lt-mini .lt-live-nm, .lt-mini .lt-live-rl { display: block; }
.lt-mini .lt-live { position: absolute; top: 0; left: 0; width: 200%; margin: 0;
    transform: scale(.5); transform-origin: top left; }
.lt-mini .lt-live-stage { height: 124px; border-radius: 0; }
.lt-mini .lt-live-face { flex: none; }
/* Buyuk onizlemedeki kural burada da gecerli: bant kendi dogal
   genisliginde kurulur, sonra kadraja sigacak kadar kuculur (JS --lab-k'yi
   olcer). Sabit genislikte ad "Ayb..." diye kirpiliyordu. */
.lt-mini .lt-live-band { left: 10px; right: auto; bottom: 10px; width: max-content;
    transform-origin: left bottom; transform: scale(var(--lab-k, 1)); }
.lt-mini .lt-live-nm, .lt-mini .lt-live-rl, .lt-mini .lt-live-ph span {
    overflow: visible; text-overflow: clip; max-width: none; }
.lt-mini .lt-live-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lt-mini .lt-live-face { background-size: cover; background-position: center; background-repeat: no-repeat; }
.lt-sec.flash .lt-sec-b { border-color: var(--ana, #3b8192); }
/* Telefonda iki sutun; besinci kart tek basina kalmasin diye iki sutunu
   birden kaplar (bosluk "eksik kalmis" gibi duruyordu). */
@media (max-width: 719px) {
    .lt-sec-b:last-child { grid-column: 1 / -1; }
    .lt-sec-b:last-child .lt-mini { height: 76px; }
    .lt-sec-b:last-child .lt-mini .lt-live { width: 150%; transform: scale(.6667); }
    .lt-sec-b:last-child .lt-mini .lt-live-stage { height: 114px; }
}
@media (max-width: 420px) {
    .lt-sec { grid-template-columns: 1fr 1fr; gap: 8px; }
    .lt-mini { height: 56px; }
    .lt-mini .lt-live-stage { height: 112px; }
}
/* Parselden "once ayarlarini yap" diye gelindiyse geri donus dugmesi. */
.lab-devam { margin-right: auto; }
/* Ayarlarda bekleyen parsel cubugu: donus yolu her an gorunur. */
/* BEKLEYEN PARSEL CUBUGU. Once duz bir serit + kocaman dugmeydi;
   kullanici "cok cirkin, hic modern degil, iptal de olmali" dedi. Artik
   telefonda iki satir (simge + metin + Vazgec, altta tam genislikte
   dugme), genis ekranda tek satir. */
.lab-donus { position: sticky; bottom: 0; z-index: 12;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 10px;
    margin: 18px calc(-1 * var(--lab-pad)) -20px; padding: 10px var(--lab-pad) calc(10px + var(--sab));
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); box-shadow: 0 -12px 34px rgba(15, 31, 46, .1); }
.lab-donus .ld-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
    background: var(--ana-soft, #e7f2f4); color: var(--ana, #3b8192); }
.lab-donus .ld-ic svg { width: 19px; height: 19px; }
.lab-donus .ld-tx { display: grid; gap: 1px; min-width: 0; }
.lab-donus .ld-tx b { font-size: .88rem; font-weight: 700; letter-spacing: -.015em; }
.lab-donus .ld-tx small { color: var(--muted); font-size: .72rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-donus .ld-vaz { justify-self: end; padding: 7px 10px; border-radius: 9px;
    font-size: .8rem; font-weight: 650; color: var(--muted); }
.lab-donus .ld-vaz:hover { color: var(--ink); background: #eef1ef; }
.lab-donus .ld-git { grid-column: 1 / -1; justify-content: center; gap: 7px; width: 100%; }
.lab-donus .ld-git svg { width: 17px; height: 17px; }
@media (min-width: 560px) {
    .lab-donus { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .lab-donus .ld-git { grid-column: auto; width: auto; }
}
/* Parsel sayfasinda ikincil baglanti (fragmani ac). */
.sheet-sub { display: inline-block; margin-top: 8px; font-size: .85rem; }

/* Alanlar: iki sutun, sayfa asagi dogru uzamasin. */
.lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.lab-f { display: block; margin: 0; }
.lab-f > span { display: block; margin-bottom: 5px; font-size: var(--fs-label); font-weight: 600; }
.lab-f > span em { font-style: normal; font-weight: 500; color: var(--muted); }
.lab-f-wide, .lab-f-ups { grid-column: 1 / -1; }
.lab-f.is-hi > span { color: var(--green-2, #2f6b7a); }
.lab-f.is-hi input { border-color: var(--green-2, #2f6b7a); box-shadow: 0 0 0 3px rgba(15,122,52,.12); }
@media (max-width: 560px) {
    .lab-grid { grid-template-columns: 1fr; }
}

.lab-save { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    border-top: 1px solid rgba(15,31,46,.08); margin-top: 14px; padding-top: 14px; }
.lab-auto { display: inline-flex; align-items: center; gap: 7px;
    color: var(--muted); font-size: var(--fs-label); }
.lab-auto svg { width: 15px; height: 15px; color: var(--green-2, #2f6b7a); flex: none; }
.lab-msg { font-size: var(--fs-label); color: var(--green-2, #2f6b7a); }
.lab-msg.is-err { color: #c0392b; }
/* Eksik zorunlu alan: dugme gitmeyi reddedince kullanici NEREYE bakacagini
   bilsin. bkz. app.js ".ld-git" denetimi. */
.lab-f.is-err input { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.14); }
.lab-f.is-err > span { color: #c0392b; }
.lab-uyari {
  margin: 0 0 14px; padding: 11px 14px; border-radius: 12px;
  background: rgba(59,129,146,.09); border: 1px solid rgba(59,129,146,.28);
  color: #235c69; font-size: 14px; line-height: 1.45;
}
.lab-uyari a { color: #235c69; font-weight: 700; }

.lab-list { list-style: none; margin: 0; padding: 0; }
.lab-list li + li { border-top: 1px solid rgba(15,31,46,.08); }
.lab-list a { display: flex; flex-direction: column; gap: 2px; padding: 11px 2px; text-decoration: none; color: inherit; }
.lab-list strong { font-size: var(--fs-title); font-weight: 600; }
.lab-list small { color: var(--muted); font-size: var(--fs-label); }

@media (max-width: 560px) {
    .lab { --lab-pad: 14px; padding: 16px var(--lab-pad) 56px; }
}

/* One cikan bilgiler: her madde bir kart, altinda uc kucuk anahtar.
   Onceki hali form satiri gibi duruyordu (kutu + uc onay kutusu); site
   dilinde degildi. Artik hap dugmeler ve yesil vurgu. */
.lab-vurgu > span { display: block; margin-bottom: 5px; font-size: var(--fs-label); font-weight: 600; }
/* FIYAT + HAZIR ETIKETLER (sahne sayfasi).
   Ilan metni yapistirma kaldirildi; fiyat tek satir, ozellikler cip. */
.vf { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.vf-et { color: var(--muted); font-size: var(--fs-label); font-weight: 700; }
.vf input { flex: 1; min-width: 0; border: 0; padding: 0; background: none; font: inherit;
    font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.vf input:focus { outline: none; }
.vf input::placeholder { font-weight: 500; color: #b6c0cc; }
.vf-tl { color: var(--muted); font-size: var(--fs-label); font-weight: 700; }
.vf.is-dolu { border-color: var(--green-2); }
/* ACILIR KART (details/summary).
   Etiket listesi uzun; sayfanin ilk ekranini kaplamasin diye kart kapali
   geliyor, baslik satirina dokununca aciliyor. */
.sd-kat > summary { list-style: none; cursor: pointer; margin-bottom: 0; align-items: center; }
.sd-kat > summary::-webkit-details-marker { display: none; }
.sd-kat[open] > summary { margin-bottom: 14px; }
.sd-kat-ok { width: 18px; height: 18px; flex: none; color: var(--muted); margin-left: 4px;
    transition: transform .18s ease; }
.sd-kat[open] .sd-kat-ok { transform: rotate(180deg); }
.sd-kat-govde { animation: sdKatAc .18s ease; }
@keyframes sdKatAc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Etiket kumeleri: her basligin altinda kendi satirlari. */
.vh-grup + .vh-grup { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.vh-grup h3 { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 8px; }
.vh { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.vh-gruplar { margin-bottom: 12px; }
.vh-cip { display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px 7px 11px; background: #fff;
    color: var(--ink-2); font: inherit; font-size: .82rem; line-height: 1.1; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease; }
.vh-cip:hover { border-color: var(--green-2); }
.vh-cip.on { background: var(--green-soft); border-color: var(--green-soft); color: var(--green-ink); font-weight: 700; }
/* Ikon cok kucuk ve soluk: etiketi okumayi zorlastirmasin, secilince canlansin. */
.vh-cip > svg { width: 13px; height: 13px; flex: none; color: #9aa4ab; }
.vh-cip.on > svg { color: var(--green-2); }

.vurgu-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
/* Sahne sayfasinda maddeler cip gibi yan yana dizilir. */
/* Sahne sayfasinda maddeler kapaliyken CIP, dokununca acilir. */
.sd-kart .vurgu-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-kart .vurgu-sat { flex: 0 1 auto; max-width: 100%; border-radius: 999px; padding: 7px 8px 7px 13px;
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sd-kart .vurgu-sat .vurgu-tx { width: auto; max-width: 62vw; border: 0; padding: 0; font-size: .84rem;
    pointer-events: none; text-overflow: ellipsis; }
.sd-kart .vurgu-sat .vurgu-alt { display: none; }
.sd-kart .vurgu-sat .vurgu-sil { margin: 0; font-size: 1.05rem; line-height: 1; }
.sd-kart .vurgu-sat.acik { flex: 1 1 100%; border-radius: 14px; padding: 11px 13px; display: block; cursor: default; }
.sd-kart .vurgu-sat.acik .vurgu-tx { width: 100%; max-width: none; pointer-events: auto;
    border-bottom: 1.5px solid var(--line); padding: 6px 0; font-size: 16px; }
.sd-kart .vurgu-sat.acik .vurgu-alt { display: flex; }
.sd-kart .vurgu-sat.acik .vurgu-sil { position: absolute; right: 10px; top: 9px; }
.vurgu-sat { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: #fff; }
.vurgu-tx { width: 100%; padding: 8px 0; font: inherit; font-size: 16px; border: 0;
    border-bottom: 1.5px solid var(--line); background: transparent; color: var(--ink); }
.vurgu-tx:focus { outline: none; border-bottom-color: var(--green-2); }
.vurgu-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
/* Onay kutusu degil, acik/kapali hap. */
.vurgu-sec { display: inline-flex; align-items: center; gap: 5px; margin: 0; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px;
    font-size: var(--fs-micro); font-weight: 700; color: var(--muted); user-select: none;
    transition: background .12s ease, color .12s ease, border-color .12s ease; }
.vurgu-sec input { position: absolute; opacity: 0; width: 0; height: 0; }
.vurgu-sec:has(input:checked) { background: var(--green-soft); border-color: var(--green-soft); color: var(--green-ink); }
.vurgu-sat { position: relative; }
.vurgu-sil { margin-left: auto; border: 0; background: none; padding: 4px 2px;
    color: var(--muted); font: inherit; font-size: var(--fs-micro); font-weight: 700; cursor: pointer; }
.vurgu-sil:hover { color: var(--danger); }
.vurgu-ekle { display: inline-flex; align-items: center; gap: 7px; border: 1.5px dashed var(--line);
    background: #fff; border-radius: 12px; padding: 10px 14px; font: inherit; font-size: var(--fs-label);
    font-weight: 700; color: var(--green-ink); cursor: pointer; }
.vurgu-ekle:hover { border-color: var(--green-2); background: var(--green-soft); }
.vurgu-ekle span { font-size: 1.05rem; line-height: 1; }
.vurgu-ekle[disabled] { opacity: .5; cursor: default; }
/* Video formunda `.full-form label { display:grid }` daha guclu kaliyor;
   onay kutusu satiri yan yana dursun. */
.full-form .vurgu-sec { display: inline-flex; }
.full-form .vurgu-list { margin-bottom: 10px; }

/* ---------- VIDEOLARIM PANOSU ----------
   Masaustunde sol menu + kart izgarasi, telefonda tek sutun. Filtre, arama
   ve siralama tarayicida calisir (liste zaten yuklu). */
/* Kap olculeri PAKETLER sayfasiyla (.pkx) BIREBIR ayni: site genelinde
   tek bir icerik genisligi olsun, sayfadan sayfaya kenar kaymasin. */
.pano { display: grid; gap: 18px; max-width: 1180px; margin: 0 auto; padding: 8px 18px 44px; }
.pano-bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; }
.pano-bas > div { flex: 1 1 220px; min-width: 0; }
.pano-bas h1 { font-size: 1.75rem; letter-spacing: -.035em; }
.pano-bas p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-body); }
.pano-yeni { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    flex: 1 1 100%; }
@media (min-width: 560px) { .pano-yeni { flex: 0 0 auto; } }
.pano-yeni svg { width: 17px; height: 17px; }
.pano-uyari { margin-bottom: 14px; }

.pano-sayac { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; }
.pano-sayac li { min-width: 0; }
.pano-sayac small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-sayac li { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 0 11px;
    align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.ps-ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; }
.ps-ico svg { width: 20px; height: 20px; }
.ps-mavi { background: #e8f0ff; color: #2563eb; }
.ps-yesil { background: var(--green-soft); color: var(--green-2); }
.ps-sari { background: #fff3e0; color: #c77700; }
.ps-gri { background: #eef1f4; color: #64748b; }
.pano-sayac b { font-size: 1.35rem; letter-spacing: -.03em; line-height: 1.1; }
.pano-sayac small { color: var(--muted); font-size: var(--fs-label); }

.pano-arac { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
.pano-cip { display: flex; gap: 7px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pano-cip::-webkit-scrollbar { display: none; }
.pano-cip button { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
    border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.pano-cip button.is-on { background: var(--ana); border-color: var(--ana); color: #fff; }
.pano-arac-sag { display: flex; gap: 8px; min-width: 0; }
.pano-ara { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--card);
    border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; min-width: 0; }
.pano-ara svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.pano-ara input { flex: 1; min-width: 0; border: 0; background: none; padding: 11px 0; font: inherit; font-size: .9rem; }
.pano-ara input:focus { outline: none; }
#pano-sira { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 999px;
    padding: 10px 12px; font: inherit; font-size: .84rem; font-weight: 700; color: var(--ink-2); }

.pano-liste { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; }
.pk-kart { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
    box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease; }
.pk-kart:hover { box-shadow: var(--shadow); }
.pk-kart[hidden] { display: none; }
.pk-kapak { position: relative; display: block; aspect-ratio: 16 / 10; background: #dbe7e0; overflow: hidden; }
.pk-kapak img { width: 100%; height: 100%; object-fit: cover; }
.pk-rozet { position: absolute; right: 10px; top: 10px; border-radius: 999px; padding: 5px 11px;
    font-size: .64rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--green-2); }
.pk-rozet.surec { background: #c77700; }
.pk-rozet.hata { background: var(--danger); }
.pk-play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
    border-radius: 50%; background: rgba(12,20,16,.55); border: 2px solid rgba(255,255,255,.9);
    display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.pk-play svg { width: 22px; height: 22px; margin-left: 3px; }
.pk-sure { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.62); color: #fff;
    border-radius: 7px; padding: 3px 7px; font-size: .7rem; font-weight: 700; }
.pk-yuzde { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(12,20,16,.72); color: #fff;
    border-radius: 8px; padding: 5px 8px; font-size: .7rem; font-weight: 700; text-align: center; }
.pk-govde { display: grid; gap: 5px; padding: 13px 14px 14px; }
.pk-govde strong { font-size: 1.02rem; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-yer, .pk-tarih { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted);
    font-size: var(--fs-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-yer svg, .pk-tarih svg { width: 15px; height: 15px; flex: none; }
/* Kart islem satiri: tek birincil dugme, kisa Reels dugmesi, kalanlar
   simge. Once hepsi cerceveli "btn" idi; kart kalabalik gorunuyordu. */
.pk-islem { position: relative; display: flex; align-items: center; gap: 7px; margin-top: 11px; }
/* Reels durumu dugmelerin ALTINDA, tam genislikte: satira sikistirilinca
   "Reels hazir · izle · indir" karttan tasiyordu. */
.pano-durum { grid-column: 1 / -1; width: 100%; margin: 9px 0 0; font-size: var(--fs-label);
    line-height: 1.4; color: var(--muted); word-break: break-word; }
/* Izle: yumusak acik yesil (kullanici secimi). Kart zaten renkli, birincil
   dugmenin bagirmasina gerek yok; Reels tek renk vurgusu olarak kaliyor. */
.pk-izle { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 38px; padding: 0 16px; border-radius: 999px; font-size: .88rem; font-weight: 700;
    color: var(--green-ink); background: #e9f7ef; border: 1px solid #cfe4ea;
    transition: background .15s ease, border-color .15s ease, transform .12s ease; }
.pk-izle:hover { background: #ddf2e6; border-color: #b6d9e4; }
.pk-izle:active { transform: translateY(1px); }
.pk-izle svg { width: 14px; height: 14px; }
.pk-reels { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
    border: 0; border-radius: 999px; font: inherit; font-size: .85rem; font-weight: 700; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, #7b3fe4 0%, #d6249f 55%, #fd5949 100%);
    box-shadow: 0 6px 16px rgba(158, 45, 160, .25); transition: filter .15s ease, transform .12s ease; }
.pk-reels:hover { filter: brightness(1.06); }
.pk-reels:active { transform: translateY(1px); }
.pk-reels[disabled] { opacity: .7; cursor: progress; }
.pk-reels svg { width: 15px; height: 15px; }
.pk-ik { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
    background: #fff; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.pk-ik:hover { border-color: var(--green-2); color: var(--green-ink); background: var(--green-soft); }
.pk-ik svg { width: 17px; height: 17px; }
.pk-daha { position: relative; flex: none; }
.pk-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; min-width: 180px;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
    padding: 6px; display: grid; gap: 2px; }
.pk-menu[hidden] { display: none; }
.pk-menu button, .pk-menu a { text-align: left; border: 0; background: none; border-radius: 10px;
    padding: 10px 12px; font: inherit; font-size: .86rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.pk-menu button:hover, .pk-menu a:hover { background: var(--green-soft); color: var(--green-ink); }
/* Sil (yalnizca yonetici): geri alinamaz, menude kirmizi durur. */
.pk-menu-sil { color: var(--danger) !important; }
.pk-menu-sil:hover { background: #fdeceb !important; color: var(--danger) !important; }
.pk-menu-sil[disabled] { opacity: .6; cursor: progress; }
.pano-bilgi { margin: 0 0 10px; font-weight: 600; }
.pano-durum.ok { color: var(--green-ink); }
.pano-bos { text-align: center; color: var(--muted); padding: 30px 0; }
.pano-durum { grid-column: 1 / -1; margin: 4px 0 0; font-size: var(--fs-label); color: var(--muted); }
.pano-durum a { color: var(--green-2); font-weight: 700; }
.pano-durum.err { color: var(--danger); }

@media (min-width: 720px) {
    .pano-sayac { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pano-arac { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .pano-arac-sag { min-width: 380px; }
    .pano-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    /* SOL MENU KALKTI: ayni baglantilar zaten ust baslikta.
       Pano tek sutun; kap genisligi .pkx ile ayni kaliyor. */
    .pano-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
 * TAMAMLANMAMIS VIDEOLAR (/taslaklar)
 *
 * Pano kabugunu (.pano, .pano-arac, #pano-liste) /videolarim ile paylasiyor;
 * yalnizca KART farkli: taslagin kapak karesi, suresi, alani ve imar durumu
 * yok, o yuzden genis tek sutunlu bir satir karti.
 *
 * Telefonda tek sutun: yer tutucu ustte tam genislik, olcu rozetleri alt
 * alta, dugmeler tam genislik. 720 pikselden itibaren yatay uc bolme
 * (yer tutucu | bilgi | dugmeler).
 * ------------------------------------------------------------------------ */
.pano-ust { display: block; margin-bottom: 4px; color: var(--green-2); font-size: var(--fs-micro);
    font-weight: 800; letter-spacing: var(--tr-micro); text-transform: uppercase; }
.tk-say { flex: none; background: var(--green-soft); color: var(--green-ink); border-radius: 999px;
    padding: 8px 14px; font-size: .84rem; font-weight: 700; white-space: nowrap; }
.tk-say b { font-weight: 800; }

/* Taslak karti her zaman tek sutun: pano-liste'nin 2/3 sutunlu izgarasi
   burada gecerli degil (kart genis, icinde ucuncu bir sutun var). */
.pano-liste.tk-liste { grid-template-columns: minmax(0, 1fr); }
.tk-kart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

/* KAPAK YOK: parsel henuz uretilmedi. Uydu goruntusu uydurulmuyor;
   marka renginde bir yer tutucu duruyor. */
.tk-kapak { position: relative; display: block; height: 112px; overflow: hidden;
    background: linear-gradient(140deg, #dcedf1 0%, #eef6f7 55%, #e4f0ea 100%); }
.tk-kapak::after { content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(59,129,146,.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,129,146,.16) 1px, transparent 1px);
    background-size: 34px 34px; }
.tk-kapak-ic { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%);
    width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.82);
    color: var(--green-2); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.tk-kapak-ic svg { width: 26px; height: 26px; }
.tk-rozet { position: absolute; left: 10px; top: 10px; z-index: 1; background: #fff; color: var(--ink);
    border-radius: 999px; padding: 5px 12px; font-size: .72rem; font-weight: 800;
    box-shadow: var(--shadow-sm); }

.tk-govde { display: grid; gap: 6px; align-content: start; padding: 14px 15px 0; min-width: 0; }
.tk-govde strong { font-size: 1.1rem; letter-spacing: -.02em; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.tk-yer { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted);
    font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-yer svg { width: 15px; height: 15px; flex: none; }

/* Olcu rozetleri: yalnizca elimizde VERI OLAN alan cizilir. Bugun tek
   madde var (son duzenleme); alan/imar gelirse liste kendiliginden
   ikili duzene geciyor. */
.tk-olcu { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
    margin: 4px 0 0; padding: 0; }
.tk-olcu li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tk-olcu-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--green-soft);
    color: var(--green-2); display: grid; place-items: center; }
.tk-olcu-ic svg { width: 17px; height: 17px; }
.tk-olcu-tx { display: grid; gap: 1px; min-width: 0; }
.tk-olcu-tx b { font-size: .9rem; font-weight: 700; letter-spacing: -.015em; }
.tk-olcu-tx small { color: var(--muted); font-size: var(--fs-label); }

.tk-islem { display: grid; gap: 8px; align-content: start; padding: 14px 15px 15px; }
.tk-devam, .tk-harita, .tk-sil { display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; height: 42px; border-radius: 12px; font-size: .92rem; font-weight: 700;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; }
.tk-devam:active, .tk-harita:active, .tk-sil:active { transform: translateY(1px); }
.tk-devam { background: var(--ink); color: #fff; }
.tk-devam:hover { background: var(--ink-2); }
.tk-devam svg { width: 16px; height: 16px; }
.tk-harita { border: 1px solid var(--line); background: #fff; color: var(--ink-2); }
.tk-harita:hover { border-color: var(--green-2); color: var(--green-ink); background: var(--green-soft); }
.tk-harita svg { width: 16px; height: 16px; }
.tk-sil { height: 38px; color: var(--danger); font-size: .86rem; }
.tk-sil:hover { background: #fdf2f0; }
.tk-sil svg { width: 15px; height: 15px; }

/* Alt seritteki paket cagrisi: telefonda alt alta, genis ekranda tek satir. */
.pano-cta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px;
    margin-top: 16px; padding: 16px; border-radius: 18px; background: #eef5f7; border: 1px solid #dbe8ec; }
.pano-cta-ic { width: 46px; height: 46px; border-radius: 14px; background: #fff; color: var(--green-2);
    display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.pano-cta-ic svg { width: 23px; height: 23px; }
.pano-cta-tx { display: grid; gap: 3px; min-width: 0; }
.pano-cta-tx strong { font-size: 1rem; letter-spacing: -.015em; }
.pano-cta-tx small { color: var(--muted); font-size: var(--fs-label); line-height: 1.45; }
.pano-cta-btn { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
    color: var(--ink); font-size: .9rem; font-weight: 700; }
.pano-cta-btn:hover { border-color: var(--green-2); color: var(--green-ink); }

@media (min-width: 720px) {
    .tk-kart { grid-template-columns: 210px minmax(0, 1fr) 230px; align-items: stretch; }
    .tk-kapak { height: 100%; min-height: 150px; }
    .tk-govde { align-content: center; padding: 16px 4px 16px 18px; }
    .tk-olcu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tk-islem { align-content: center; padding: 16px 18px; }
    .pano-cta { grid-template-columns: auto minmax(0, 1fr) auto; }
    .pano-cta-btn { grid-column: auto; padding: 0 18px; }
}

/* Videolarim: Reels dugmesi ve durumu. */
.btn-reels { display: inline-flex; align-items: center; gap: 7px; border: 0;
    background: linear-gradient(135deg, #7b3fe4 0%, #d6249f 55%, #fd5949 100%); color: #fff; }
.btn-reels svg { width: 15px; height: 15px; }
.btn-reels:hover { filter: brightness(1.05); }
.btn-reels[disabled] { opacity: .7; cursor: progress; }
.vitem-reels { flex: 1 1 100%; margin-top: 6px; font-size: var(--fs-label); color: var(--muted); }
.vitem-reels a { color: var(--green-2); font-weight: 700; }
.vitem-reels.err { color: var(--danger); }

/* ---------- KENDI SESIYLE SESLENDIRME (laboratuvar) ---------- */
.lab-ses { margin: 14px 0 4px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 18px;
    background: #f8fbf9; }
.lab-ses-bas { display: flex; align-items: flex-start; gap: 11px; }
.lab-ses-ico { width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--green-soft);
    color: var(--green-2); display: inline-flex; align-items: center; justify-content: center; }
.lab-ses-ico svg { width: 19px; height: 19px; }
.lab-ses-bas h3 { font-size: 1rem; letter-spacing: -.015em; margin: 0; }
.lab-ses-bas p { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-label); line-height: 1.4; }
.lab-ses-rozet { margin-left: auto; flex: none; background: var(--green-soft); color: var(--green-ink);
    border-radius: 999px; padding: 4px 10px; font-size: var(--fs-micro); font-weight: 800; }
.lab-ses-rozet[hidden] { display: none; }
.lab-ses-metin { margin: 12px 0 0; padding: 12px 14px; background: #fff; border: 1px solid var(--line);
    border-radius: 14px; font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
.lab-ses-alt { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.lab-ses-kayit { display: inline-flex; align-items: center; gap: 9px; border: 1.5px solid var(--line);
    background: #fff; border-radius: 999px; padding: 10px 16px; font: inherit; font-size: .9rem;
    font-weight: 700; color: var(--ink); cursor: pointer; }
.lab-ses-kayit .nokta { width: 11px; height: 11px; border-radius: 50%; background: #d64545; }
.lab-ses-kayit.is-kayit { border-color: #d64545; color: #b42318; }
.lab-ses-kayit.is-kayit .nokta { animation: sesNabiz 1.1s ease-in-out infinite; }
@keyframes sesNabiz { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
.lab-ses-sure { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ink); }
.lab-ses-sure[hidden] { display: none; }
.lab-ses-dinle { height: 38px; max-width: 100%; }
.lab-ses-dinle[hidden] { display: none; }
.lab-ses-onay { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px;
    font-size: var(--fs-label); color: var(--ink-2); line-height: 1.4; cursor: pointer; }
.lab-ses-onay[hidden] { display: none; }
.lab-ses-onay input { width: 18px; height: 18px; flex: none; accent-color: var(--green-2); }
.lab-ses-dugme { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.lab-ses-dugme .btn[hidden], .lab-ses-dugme .linkish[hidden] { display: none; }
.lab-ses-durum { margin: 8px 0 0; font-size: var(--fs-label); color: var(--muted); }
.lab-ses-durum.err { color: var(--danger); }
.lab-ses-durum.ok { color: var(--green-ink); font-weight: 700; }

/* ---------- DOKUNMA GERI BILDIRIMI ----------
   Basilan oge hafifce ezilip toparlanir; app.js ayrica 10 ms titretir. */
@keyframes press-bounce {
    0% { transform: scale(1); }
    38% { transform: scale(var(--press-min, .96)); }
    68% { transform: scale(var(--press-peak, 1.015)); }
    100% { transform: scale(1); }
}
.is-press-bounce { transform-origin: center center;
    animation: press-bounce .34s cubic-bezier(.34, 1.45, .64, 1) both; }
/* Ikon dugmeleri daha belirgin ezilir. */
svg.is-press-bounce, .hdr-icon.is-press-bounce, .vt-btn.is-press-bounce, .hz-geri.is-press-bounce,
.sd-geri.is-press-bounce, .pk-close.is-press-bounce, .pk-back.is-press-bounce, .pk-clear.is-press-bounce,
.mapp-ico.is-press-bounce, .mapp-back.is-press-bounce, .back.is-press-bounce, .vurgu-sil.is-press-bounce {
    --press-min: .86; --press-peak: 1.05;
}
/* Titresim desteklenmiyorsa (iOS 18+) basma animasyonu biraz daha belirgin:
   dokunus en azindan GOZLE onaylansin. */
.haptik-yok .is-press-bounce { --press-min: .93; --press-peak: 1.025; animation-duration: .28s; }
.haptik-yok svg.is-press-bounce, .haptik-yok .hdr-icon.is-press-bounce, .haptik-yok .pk-item.is-press-bounce {
    --press-min: .82; --press-peak: 1.06;
}
@media (prefers-reduced-motion: reduce) { .is-press-bounce { animation: none; } }

/* ---------- Dokunsal test sayfasi (/haptik) ---------- */
.hpt { max-width: 560px; margin: 0 auto; padding: 14px 18px 40px; }
.hpt h1 { font-size: 1.5rem; letter-spacing: -.03em; }
.hpt-not { color: var(--muted); font-size: var(--fs-body); margin: 6px 0 16px; }
.hpt-kart { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-bottom: 14px; }
.hpt-kart h2 { font-size: 1rem; margin-bottom: 10px; }
.hpt-liste { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; font-size: .84rem; }
.hpt-liste dt { color: var(--muted); font-weight: 700; }
.hpt-liste dd { margin: 0; word-break: break-word; }
.hpt-btn { width: 100%; margin-bottom: 8px; }
.hpt-switch { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .9rem; font-weight: 600; }
.hpt-sonuc { margin-top: 12px; padding: 11px 13px; border-radius: 12px; background: var(--green-soft);
    color: var(--green-ink); font-size: .86rem; font-weight: 600; }
.hpt-adim { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: .88rem; line-height: 1.6; }

/* ---------- DEMO: 3D bina hacimleri (/demo/3d) ---------- */
.d3 { position: fixed; inset: 0; }
.d3-host { position: absolute; inset: 0; background: #0b1a12; }
.d3-host .cesium-widget-credits { display: none !important; }
.d3-panel { position: absolute; z-index: 5; left: 12px; top: calc(12px + var(--sat)); width: min(320px, calc(100vw - 24px));
    background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.35); overflow: hidden; }
.d3-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--line); }
.d3-bas strong { font-size: .98rem; letter-spacing: -.015em; }
.d3-bas button { width: 30px; height: 30px; border: 1px solid var(--line); background: #fff; border-radius: 9px;
    font-size: 1rem; line-height: 1; cursor: pointer; }
.d3-govde { padding: 12px 14px 14px; display: grid; gap: 10px; max-height: min(74vh, 620px); overflow-y: auto; }
.d3-sat { display: grid; gap: 5px; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.d3-sat b { color: var(--green-ink); }
.d3-sat select, .d3-sat input[type="text"] { width: 100%; border: 1px solid var(--line); border-radius: 10px;
    padding: 9px 10px; font: inherit; font-size: .88rem; background: #fbfdfe; }
.d3-sat input[type="range"] { width: 100%; accent-color: var(--green-2); }
.d3-secim { display: grid; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.d3-secim label { display: flex; align-items: center; gap: 8px; }
.d3-secim input { accent-color: var(--green-2); width: 16px; height: 16px; }
.d3-dugmeler { display: flex; gap: 8px; }
.d3-dugmeler .btn { flex: 1; padding: 10px 12px; font-size: .86rem; }
.d3-durum { margin: 0; font-size: .78rem; line-height: 1.4; color: var(--green-ink);
    background: var(--green-soft); border-radius: 10px; padding: 8px 10px; }
.d3-ipucu { margin: 0; font-size: .72rem; color: var(--muted); }

/* TASLAK KAPAK KARESI.
   .tk-kapak zaten position:relative + overflow:hidden (yukarida).
   Gorsel yuklenirse yer tutucu ikon GIZLENIR; yuklenmezse (onbellekte
   mozaik yok -> 404) img kendini DOM'dan kaldirir, bitisik kardes
   secicisi bozulur ve eski yer tutucu oldugu gibi geri gelir. */
.tk-kapak-im {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; display: block;
}
.tk-kapak-im + .tk-kapak-ic { display: none; }
.tk-kapak .tk-rozet { z-index: 3; }

/* ---------------------------------------------------------------------------
   ÜYE HİKÂYELERİ (/admin/hikayeler ve üye profili)

   Kutu tek bir soruya yanıt veriyor: "bu adam ne yaptı." Sonuç rengi kenar
   çizgisinde: yeşil üretti, sarı kotası var kullanmadı, kırmızı paketi
   gördü çıktı. Liste taranırken kırmızı yığını hemen göze batsın.
--------------------------------------------------------------------------- */
.hik-not { color: var(--muted); font-size: .86rem; max-width: 72ch; margin: 0 0 12px; }
.hik-suz { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.hik-suz a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .86rem; color: var(--muted); text-decoration: none; background: #fff; }
.hik-suz a small { font-variant-numeric: tabular-nums; opacity: .7; }
.hik-suz a.on { background: var(--ana, #3b8192); border-color: var(--ana, #3b8192); color: #fff; }
.hik-suz a.on small { opacity: .85; }

.hik-liste { display: grid; gap: 12px; }
.hik { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; }
.hik[data-sonuc="iyi"] { border-left-color: #2f8a5b; }
.hik[data-sonuc="bekler"] { border-left-color: #c98a1e; }
.hik[data-sonuc="kotu"] { border-left-color: #b34a34; }

.hik-bas { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; justify-content: space-between; }
.hik-bas h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hik-bas h3 a { color: inherit; text-decoration: none; }
.hik-bas h3 a:hover { text-decoration: underline; }
.hik-cip { display: flex; flex-wrap: wrap; gap: 5px; }
.hik .cip { font-size: .74rem; padding: 2px 8px; border-radius: 999px; background: #f1f3f4; color: #4a5558; white-space: nowrap; }
.hik .cip-reklam { background: #e6f0f3; color: #1f5b68; font-weight: 600; }
.hik .cip-kendi { background: #f4ecdc; color: #7a5a1c; }
.hik a.cip { text-decoration: none; }
.hik .cip-reklam { white-space: normal; }
.hik a.cip:hover { text-decoration: underline; }
.hik .cip-wa { background: #e3f4ea; color: #1d6b43; font-weight: 600; }
.hik-not-k { margin: -2px 0 0; font-size: .8rem; color: var(--muted); }
.hik-ayrinti .hik-kanal { display: inline-block; font-style: normal; font-size: .7rem; font-weight: 600; line-height: 1.5; color: #1d6b43; background: #e3f4ea; border-radius: 6px; padding: 0 6px; margin-right: 2px; }

/* Hikâyenin kendisi: virgülle akan tek paragraf, biraz büyük punto. */
.hik-oyku { margin: 0; font-size: .95rem; line-height: 1.55; }

.hik-alt { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .82rem; color: var(--muted); }
.hik-bilgi b { color: #2c3538; font-weight: 600; }
.hik-sonuc { font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #f1f3f4; color: #4a5558; }
.hik-sonuc.s-iyi { background: #e4f1ea; color: #1f6e48; }
.hik-sonuc.s-bekler { background: #f8efdc; color: #8a5f12; }
.hik-sonuc.s-kotu { background: #f7e6e2; color: #8e3623; }

.hik-el { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hik-ayrinti { margin-left: auto; font-size: .82rem; }
.hik-ayrinti summary { cursor: pointer; color: var(--muted); padding: 4px 2px; }
.hik-ayrinti ol { margin: 8px 0 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 2px; max-height: 320px; overflow: auto; }
.hik-ayrinti li { display: flex; gap: 10px; font-size: .8rem; padding: 2px 0; border-bottom: 1px dashed var(--line); }
.hik-ayrinti li.sonuk { color: var(--muted); }
.hik-ayrinti time { font-variant-numeric: tabular-nums; color: var(--muted); flex: none; }

@media (max-width: 640px) {
    .hik-ayrinti { margin-left: 0; width: 100%; }
    .hik-bas { gap: 4px; }
}

/* ---------- Aranan yerler özeti (/admin/hikayeler) ---------- */
.ara-ozet h4 { margin: 0 0 8px; font-size: .84rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ara-sut { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 1.3fr); gap: 18px 26px; }
.ara-il { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ara-il li { display: grid; grid-template-columns: 8.5em 1fr auto; align-items: center; gap: 8px; font-size: .86rem; }
.ara-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Çubuk: il sıralaması rakam okumadan görünsün. */
.ara-cubuk { background: #eef1f2; border-radius: 999px; height: 8px; overflow: hidden; }
.ara-cubuk i { display: block; height: 100%; background: var(--ana, #3b8192); border-radius: 999px; }
.ara-say { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.ara-say em { font-style: normal; color: #1f5b68; }
.ara-yer { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; max-height: 340px; overflow: auto; }
.ara-yer li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .84rem; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.ara-yer small, .ara-yok small { color: var(--muted); font-size: .76rem; }
.ara-kez { margin-left: auto; font-size: .74rem; background: #e6f0f3; color: #1f5b68; padding: 1px 7px; border-radius: 999px; }
.ara-yok { border-top: 1px solid var(--line); padding-top: 10px; }
.ara-yok ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ara-yok li { font-size: .82rem; color: #8e3623; }
@media (max-width: 760px) { .ara-sut { grid-template-columns: 1fr; } .ara-il li { grid-template-columns: 7em 1fr auto; } }

/* ---------- KARTLA ODEME (iyzico, /odeme/*) ---------- */
.pkx-al { margin: 0; }
.odx { max-width: 640px; }
.odx-ozet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0 4px; }
.odx-ozet h1 { flex: 1; min-width: 0; margin: 0; font-size: 1.08rem; letter-spacing: -.01em; line-height: 1.25; }
.odx-ozet h1 small { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.odx-tutar { font-size: 1.08rem; font-weight: 800; white-space: nowrap; }
.odx-ozet .notice { flex-basis: 100%; margin: 4px 0 0; }
.odx-geri { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.odx-geri svg { width: 18px; height: 18px; }
/* TELEFONDA ODAKLI ODEME: site basligi gizli (geri oku ozet satirinda),
   kenarlar dar; iyzico formu tum genisligi alsin, "Ode" dugmesi kaydirmadan
   gorunsun. */
@media (max-width: 699px) {
    .page-payment-checkout .hdr { display: none; }
    .odx { padding: 0 8px 24px; }
    .odx-ozet { padding: calc(8px + var(--sat)) 4px 0; }
    .odx #iyzipay-checkout-form { margin: 6px 0; }
    /* iOS 16px altindaki kutuya dokununca sayfayi buyutuyor. */
    #iyzipay-checkout-form input, #iyzipay-checkout-form select, #iyzipay-checkout-form textarea { font-size: 16px !important; }
}
#iyzipay-checkout-form { margin: 14px 0; min-height: 320px; }
.odx-sonuc { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px 22px; margin-top: 18px; text-align: center; }
.odx-sonuc h1 { font-size: 1.45rem; margin-bottom: 8px; }
.odx-sonuc p { color: var(--ink-2); margin: 0 0 16px; }
.odx-sonuc form { margin: 0 0 10px; }
.odx-sonuc .btn { width: 100%; max-width: 360px; }
.odx-sonuc.ok { border-color: var(--green); }
.odx-sonuc.hata { border-color: var(--warn); }
/* Odeme sonrasi fatura bilgisi (/odeme/sonuc) */
.odx-fatura { margin-top: 16px; }
.odx-fatura details { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px 20px; }
.odx-fatura summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.odx-fatura summary::-webkit-details-marker { display: none; }
.odx-fatura summary b { font-size: 1.02rem; }
.odx-fatura summary small { color: var(--muted); font-size: .84rem; }
.odx-fx { display: grid; gap: 12px; margin-top: 14px; }
.odx-fx label { display: grid; gap: 5px; font-size: .86rem; color: var(--ink-2); }
.odx-fx input:not([type=radio]) { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 1rem; background: #f6f9f7; color: var(--ink); }
.odx-fx input:not([type=radio]):focus { outline: none; border-color: var(--green); background: #fff; }
.odx-fx label small { color: var(--muted); }
.odx-fx .full-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .odx-fx .full-grid { grid-template-columns: 1fr; } }
.odx-tip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.odx-tip label { display: block; }
.odx-tip input { position: absolute; opacity: 0; pointer-events: none; }
.odx-tip span { display: block; text-align: center; padding: 10px; border: 1.5px solid var(--line); border-radius: 12px; font-weight: 700; cursor: pointer; }
.odx-tip input:checked + span { border-color: var(--green); background: var(--green-soft); color: var(--ink); }
.odx-tip input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.odx-kurumsal, .odx-k { display: none; }
.odx-fx:has(input[value=kurumsal]:checked) .odx-kurumsal { display: grid; gap: 12px; }
.odx-fx:has(input[value=kurumsal]:checked) .odx-k { display: inline; }
.odx-fx:has(input[value=kurumsal]:checked) .odx-b { display: none; }
.pano-siparis { margin-top: 28px; }
.pano-siparis h2 { font-size: 1.1rem; margin: 0 0 10px; }
.pano-siparis ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pano-siparis li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pano-siparis li small { color: var(--muted); }
.pano-siparis a { font-weight: 700; color: var(--green); }
.odx-fatura .notice { margin: 0 0 12px; }

/* Video sayfası: "Bir bölümü değiştir" girişi (parça düzenleme) */
.vready-parca { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px;
    background: var(--card); border: 1px solid var(--line); border-radius: 16px; color: var(--ink);
    box-shadow: var(--shadow-sm); transition: border-color .15s ease; }
.vready-parca:hover { border-color: var(--ana); }
.vready-parca-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--ana-soft); color: var(--ana-ink);
    display: inline-flex; align-items: center; justify-content: center; }
.vready-parca-ico svg { width: 18px; height: 18px; }
.vready-parca > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 1px; }
.vready-parca strong { font-size: .95rem; }
.vready-parca small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.vready-parca > b { flex: none; font-size: 1.4rem; color: var(--muted); }

/* =====================================================================
   ANA SAYFA — AIRBNB TARZI YAZI VE HAREKET (3 Ekim 2026)
   Yalnız body.page-home-landing. Yazı tipi Figtree (Cereal'e en yakın açık
   font), mürekkep Airbnb'nin nötr #222'si, vurgu logo turkuazından
   yeşiline geçiş (pembe denendi, fotoğrafla uyuşmadı). Hareketlerin tamamı opacity/transform/filter; JS yoksa
   (html.fx-js eklenmezse) her şey olduğu gibi görünür. Hareket azaltma
   tercihinde hepsi kapanır.
   ===================================================================== */
body.page-home-landing, body.page-packages-index {
    --ink: #222222;
    --ink-2: #3f3f3f;
    --muted: #6a6a6a;
    --rausch: #0aa39c;
    --fx-grad: linear-gradient(90deg, #255563 0%, #3b8192 25%, #0aa39c 50%, #2bb8a3 70%, #255563 100%);
    font-family: Figtree, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.page-home-landing .hero h1 { font-weight: 700; letter-spacing: -.038em; }
body.page-home-landing .hero h1 i { color: var(--rausch); }

/* BAŞLIKTAKİ VURGU SATIRI: harfler hâlâ dalga gibi kalkıyor, ama rengi
   artık harften harfe akan bir geçiş. Her harfin arka planı aynı geçişin
   kendi --i gecikmesiyle kaymış dilimi; yan yana gelince renk kelime
   boyunca akıyormuş gibi okunuyor. text-shadow kapalı: şeffaf dolgunun
   üstüne çizilip rengi örtüyordu. */
body.page-home-landing .hd-sahne > em > span {
    background-image: var(--fx-grad);
    background-size: 700% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    text-shadow: none;
    animation: harfZipla 5.6s cubic-bezier(.32, .72, .38, 1) infinite, fxRenkAkis 7s linear infinite;
    animation-delay: calc(var(--i, 0) * 38ms), calc(var(--i, 0) * -110ms);
}
body.page-home-landing .hd-sahne > em > .hd-bos { background: none; }
@keyframes harfZipla {
    0%, 4% { transform: translateY(0); }
    9% { transform: translateY(-.07em); }
    17%, 100% { transform: translateY(0); }
}
@keyframes fxRenkAkis { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
/* Sahne değişirken Airbnb'nin yumuşak "bulanıktan nete" geçişi. */
body.page-home-landing .hd-sahne { filter: blur(10px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1), filter .7s ease; }
body.page-home-landing .hd-sahne.is-on { filter: none; }
@media (max-width: 859px) {
    /* Fotoğrafın üstünde: daha açık, parlak bir geçiş. */
    body.page-home-landing { --fx-grad: linear-gradient(90deg, #78dcc6 0%, #c4f5ea 25%, #47cdb6 50%, #9be9d8 72%, #78dcc6 100%); }
    body.page-home-landing .hero h1 i { color: #47cdb6; }
}

/* ÜST ETİKETLER: harf aralıklı küçük başlıkların üstünden ışık geçiyor. */
body.page-home-landing .hero-eyebrow,
body.page-home-landing .ornek .eyebrow,
body.page-home-landing .how .eyebrow {
    background: linear-gradient(100deg, var(--muted) 0%, var(--muted) 40%, var(--rausch) 50%, var(--muted) 60%, var(--muted) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: fxParilti 4.2s ease-in-out infinite;
    width: fit-content; max-width: 100%;
}
@media (min-width: 860px) {
    body.page-home-landing .ornek .eyebrow { margin-left: auto; margin-right: auto; }
}
@keyframes fxParilti { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }

/* BÖLÜM BAŞLIKLARI: Airbnb ölçüsünde kalın ve sıkı; vurgu kelimeleri geçişli. */
body.page-home-landing .ornek h2, body.page-home-landing .how h2 { font-weight: 800; letter-spacing: -.04em; }
body.page-home-landing .ornek h2 em, body.page-home-landing .how h2 em,
body.page-home-landing .ornek h2 em .fx-k, body.page-home-landing .how h2 em .fx-k {
    background-image: linear-gradient(90deg, #2f6b7a, #3b8192 40%, #0aa39c);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
body.page-home-landing .ornek h2 em:has(.fx-k), body.page-home-landing .how h2 em:has(.fx-k) { background: none; }
/* Sıkı harf aralığında son harf (videO) kutudan taşıyor, taşan kısım boyanmıyordu;
   boya alanı sağa açılır, yerleşim aynı kalır (7 Ekim 2026). */
body.page-home-landing .ornek h2 em .fx-k, body.page-home-landing .how h2 em .fx-k { padding-right: .08em; margin-right: -.08em; }

/* KELİME KELİME BELİRME (app.js kelimeleri .fx-k ile sarıyor). */
html.fx-js .fx-satir .fx-k {
    display: inline-block; opacity: 0;
    transform: translateY(.5em) rotate(2.5deg); filter: blur(8px);
    transition: opacity .7s ease, transform .9s cubic-bezier(.2, .85, .2, 1), filter .7s ease;
    transition-delay: calc(var(--w, 0) * 65ms + var(--fx-gec, 0ms));
}
html.fx-js .fx-satir.fx-gor .fx-k { opacity: 1; transform: none; filter: none; }

/* KARTLAR AŞAĞIDAN SÜZÜLÜYOR — gruplar halinde, sırayla. animation
   "backwards" ile: bitince hiçbir şey tutmuyor, kartın kendi hover
   dönüşümleri bozulmuyor. */
html.fx-js .fx-yukari:not(.fx-gor) { opacity: 0; }
html.fx-js .fx-yukari.fx-gor {
    animation: fxYukari .85s cubic-bezier(.2, .85, .2, 1) backwards;
    animation-delay: calc(var(--s, 0) * 90ms);
}
@keyframes fxYukari { from { opacity: 0; transform: translateY(28px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* EL YAZISI NOTLAR kalemle yazılıyor gibi soldan açılıyor, altı çiziliyor. */
html.fx-js body.page-home-landing .hv-script,
html.fx-js body.page-home-landing .stats-script { clip-path: inset(-20% 100% -20% 0); }
html.fx-js body.page-home-landing .hv-script.fx-gor,
html.fx-js body.page-home-landing .stats-script.fx-gor { animation: fxYaz 1.6s cubic-bezier(.45, .1, .3, 1) .4s forwards; }
@keyframes fxYaz { to { clip-path: inset(-20% -10% -40% -10%); } }

/* ANA DÜĞMELER: Airbnb'nin arama düğmesindeki gibi imleci izleyen ışık. */
body.page-home-landing .home-go,
body.page-home-landing .alt-cta {
    background-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #5fb4c6 0%, #3b8192 42%, #2a6170 100%);
}
body.page-home-landing .home-go b, body.page-home-landing .alt-cta span { letter-spacing: -.01em; }

/* KART ÜZERİNE GELİNCE: Airbnb ilan kartı gibi görsel hafifçe yakınlaşır. */
body.page-home-landing .ornek-kare img { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
body.page-home-landing .ornek-kare:hover img { transform: scale(1.06); }
body.page-home-landing .stats-bar b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    body.page-home-landing .hd-sahne > em > span,
    body.page-home-landing .hero-eyebrow,
    body.page-home-landing .ornek .eyebrow,
    body.page-home-landing .how .eyebrow { animation: none; }
    body.page-home-landing .hd-sahne { filter: none; }
    html.fx-js .fx-satir .fx-k { opacity: 1; transform: none; filter: none; transition: none; }
    html.fx-js .fx-yukari:not(.fx-gor) { opacity: 1; }
    html.fx-js .fx-yukari.fx-gor { animation: none; }
    html.fx-js body.page-home-landing .hv-script,
    html.fx-js body.page-home-landing .stats-script { clip-path: none; animation: none; }
}

/* =====================================================================
   PAKETLER — AIRBNB REZERVASYON DÜZENİ (3 Ekim 2026)
   Solda seçenekler, sağda yapışkan rezervasyon kartı; telefonda altta
   sabit fiyat çubuğu. Yazı tipi ve renkler ana sayfanın Airbnb katmanından
   (body.page-packages-index yukarıda ona eklendi).
   ===================================================================== */
.pa { max-width: 1120px; margin: 0 auto; padding: 18px 20px 48px; }
.pa-neden { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: var(--ana-soft); color: var(--ana-ink); font-weight: 600; font-size: .92rem; }
.pa-bas { padding: 6px 0 22px; }
.pa-bas h1 { margin: 0 0 10px; font-size: clamp(1.9rem, 7.4vw, 3rem); line-height: 1.06; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.pa-bas p { margin: 0; max-width: 560px; font-size: 1rem; line-height: 1.5; color: var(--muted); }

.pa-ana { display: grid; gap: 0; }
.pa-sol { min-width: 0; }
.pa-blok { padding: 26px 0; border-top: 1px solid #ebebeb; }
.pa-blok h2 { margin: 0 0 16px; font-size: 1.32rem; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }

/* KENDİ PARSELİ — Airbnb "Onayla ve öde" ilan özeti (3 Ekim 2026). */
.pa-ozet { margin: 0 0 22px; border: 1px solid #dddddd; border-radius: 16px; background: #fff; overflow: hidden; }
.pa-ozet-kart { display: flex; align-items: center; gap: 16px; padding: 16px; color: inherit; text-decoration: none; }
.pa-ozet-foto {
    position: relative; flex: none; width: 112px; height: 104px; border-radius: 10px; overflow: hidden;
    background: var(--ana-soft); color: var(--ana); display: grid; place-items: center;
}
.pa-ozet-foto svg { width: 30px; height: 30px; }
.pa-ozet-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.pa-ozet-kart:hover .pa-ozet-foto img { transform: scale(1.05); }
.pa-ozet-yazi { display: grid; gap: 3px; min-width: 0; }
.pa-ozet-yazi small { font-size: .78rem; color: var(--muted); }
.pa-ozet-yazi b { font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pa-ozet-yazi > span { font-size: .86rem; color: var(--muted); }
.pa-ozet-yazi em { display: flex; align-items: flex-start; line-height: 1.35; gap: 5px; margin-top: 4px; font-style: normal; font-size: .78rem; font-weight: 600; color: var(--ana-ink); }
.pa-ozet-yazi em svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.pa-ozet-satir {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 16px; padding: 16px 0; border-top: 1px solid #ebebeb;
}
.pa-ozet-satir > span { display: grid; gap: 2px; min-width: 0; }
.pa-ozet-satir b { font-size: .95rem; font-weight: 700; color: var(--ink); }
.pa-ozet-satir small { font-size: .9rem; color: var(--muted); }
.pa-degistir {
    flex: none; border: 0; background: none; padding: 4px 0; cursor: pointer;
    font: inherit; font-size: .92rem; font-weight: 700; color: var(--ink);
    text-decoration: underline; text-underline-offset: 3px;
}

.pa-kota { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; font-size: .9rem; color: var(--muted); line-height: 1.45; }
.pa-kota svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ana); }
.pa-kota b { color: var(--ink); }

/* SEÇENEK KARTLARI — Airbnb'nin "ödeme seçeneği" kutuları: seçilince
   kalın siyah çerçeve, radyo dolu. */
.pa-secenekler { display: grid; gap: 12px; }
.pa-kart {
    position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: center;
    padding: 18px 18px; border: 1px solid #dddddd; border-radius: 14px; background: #fff; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pa-kart:hover { border-color: #b0b0b0; }
.pa-kart input { position: absolute; opacity: 0; pointer-events: none; }
.pa-kart.is-on, .pa-kart:has(input:checked) { border-color: #222; box-shadow: 0 0 0 1px #222; }
.pa-kart:has(input:focus-visible) { outline: 2px solid var(--ana); outline-offset: 3px; }
.pa-radyo { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #b0b0b0; background: #fff; transition: border .15s ease; }
.pa-kart.is-on .pa-radyo, .pa-kart:has(input:checked) .pa-radyo { border: 7px solid #222; }
.pa-kart-yazi { display: grid; gap: 3px; min-width: 0; }
.pa-kart-yazi b { font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.pa-kart-yazi small { font-size: .86rem; color: var(--muted); line-height: 1.35; }
.pa-rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.pa-rozetler em { font-style: normal; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pa-populer { background: #222; color: #fff; }
.pa-tasarruf { background: #e3f4ee; color: #1d7a5c; }
.pa-kart-fiyat { display: grid; justify-items: end; gap: 2px; text-align: right; }
.pa-kart-fiyat b { font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.pa-kart-fiyat small { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.pa-dene { margin: 16px 2px 0; font-size: .9rem; color: var(--muted); }
.pa-dene a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* "Neler var" — simgeli iki sütun. */
.pa-ozellik ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pa-ozellik li { display: flex; align-items: flex-start; gap: 14px; font-size: .95rem; line-height: 1.4; color: var(--ink); }
.pa-ozellik li svg { flex: none; width: 24px; height: 24px; color: var(--ink); }
.pa-ozellik li b { font-weight: 700; }

.pa-ozel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.pa-ozel h2 { margin-bottom: 4px; font-size: 1.1rem; }
.pa-ozel p { margin: 0; font-size: .9rem; color: var(--muted); max-width: 420px; }
.pa-cizgi-btn {
    display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 10px;
    border: 1px solid #222; color: #222; font-weight: 700; font-size: .95rem; text-decoration: none;
    transition: background .15s ease;
}
.pa-cizgi-btn:hover { background: #f7f7f7; }

/* REZERVASYON KARTI */
.pa-sag { min-width: 0; }
.pa-rez {
    margin: 4px 0 8px; padding: 24px; border: 1px solid #dddddd; border-radius: 16px; background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.pa-rez[hidden] { display: none; }
.pa-rez-fiyat { margin: 0 0 18px; color: var(--ink); }
.pa-rez-fiyat b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; }
.pa-rez-fiyat span { font-size: 1rem; color: var(--muted); }
.pa-rez-kutu { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #b0b0b0; border-radius: 10px; margin-bottom: 16px; }
.pa-rez-kutu span { display: grid; gap: 2px; padding: 10px 12px; }
.pa-rez-kutu span + span { border-left: 1px solid #b0b0b0; }
.pa-rez-kutu small { font-size: .62rem; font-weight: 800; letter-spacing: .04em; color: var(--ink); }
.pa-rez-kutu b { font-size: .92rem; font-weight: 500; color: var(--ink); }
.pa .pkx-al { margin: 0; }
.pa .pa-al.btn-xl {
    width: 100%; border-radius: 10px; padding: 16px 22px; font-size: 1.04rem; font-weight: 700; letter-spacing: 0;
    background-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #5fb4c6 0%, #3b8192 42%, #2a6170 100%);
}
.pa-rez-not { margin: 12px 0 0; text-align: center; font-size: .82rem; color: var(--muted); }
.pa-dokum { margin: 18px 0 0; padding: 0; display: grid; gap: 12px; font-size: .95rem; color: var(--ink); }
.pa-dokum div { display: flex; justify-content: space-between; gap: 12px; }
.pa-dokum dt { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #b0b0b0; }
.pa-dokum dd { margin: 0; white-space: nowrap; }
.pa-ind dd { color: #1d7a5c; font-weight: 600; }
.pa-toplam { padding-top: 16px; border-top: 1px solid #dddddd; font-weight: 800; }
.pa-toplam dt { text-decoration: none; }
.pa-toplam small { font-weight: 500; color: var(--muted); }
.pa-rez-iade { margin: 14px 0 0; text-align: center; font-size: .82rem; }
.pa-rez-iade a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* TELEFON: altta sabit çubuk. */
.pa-cubuk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 20px calc(12px + var(--sab)); background: #fff; border-top: 1px solid #ebebeb;
    transform: translateY(0); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.pa-cubuk.is-gizli { transform: translateY(110%); }
.pa-cubuk-i { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pa-cubuk-i[hidden] { display: none; }
.pa-cubuk-i > span { display: grid; gap: 1px; min-width: 0; }
.pa-cubuk-i b { font-size: 1.08rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.pa-cubuk-i small { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-cubuk .pa-al { flex: none; border-radius: 10px; padding: 13px 24px; font-size: .98rem; box-shadow: none; }
.pa-cubuk .pkx-al { flex: none; }
body.page-packages-index { padding-bottom: 76px; }

/* SSS — Airbnb: çerçevesiz, ince çizgili liste. */
.pa-sss { max-width: 760px; margin: 18px 0 0; padding-top: 26px; border-top: 1px solid #ebebeb; }
.pa-sss h2 { margin: 0 0 8px; font-size: 1.32rem; font-weight: 700; letter-spacing: -.025em; }
.pa-sss details { border-bottom: 1px solid #ebebeb; }
.pa-sss summary {
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: var(--ink);
}
.pa-sss summary::-webkit-details-marker { display: none; }
.pa-sss summary:after {
    content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
    border-right: 2px solid #222; border-bottom: 2px solid #222; transform: rotate(45deg) translateY(-3px);
    transition: transform .2s ease;
}
.pa-sss details[open] summary:after { transform: rotate(-135deg) translateY(-3px); }
.pa-sss details p { margin: 0 0 18px; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.pa .hint { margin-top: 26px; color: var(--muted); }
.pa .billing { margin-top: 30px; }

@media (min-width: 860px) {
    .pa { padding-top: 34px; }
    .pa-bas { padding-bottom: 30px; }
    .pa-ana { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 72px; align-items: start; }
    .pa-sol { grid-column: 1; grid-row: 1; }
    .pa-sag { grid-column: 2; grid-row: 1; position: sticky; top: 96px; }
    .pa-blok:first-of-type { border-top: 1px solid #ebebeb; }
    .pa-ozellik ul { grid-template-columns: 1fr 1fr; gap: 18px 28px; }
    .pa-cubuk { display: none; }
    body.page-packages-index { padding-bottom: 0; }
}
@media (max-width: 859px) {
    /* Telefonda rezervasyon kartı seçeneklerin hemen altında. */
    .pa-ana { display: flex; flex-direction: column; }
    .pa-sol { display: contents; }
    .pa-ozet, .pa-kota { order: 0; }
    .pa-sol > .pa-blok:first-of-type { order: 1; }
    .pa-sag { order: 2; margin-bottom: 8px; }
    .pa-ozellik { order: 3; }
    .pa-ozel { order: 4; }
    .pa-kart { padding: 16px 14px; gap: 12px; }
    .pa-rez { padding: 20px; box-shadow: 0 4px 14px rgba(0, 0, 0, .10); }
}

/* PAKETLER — SMS PENCERESİ AIRBNB'NİN "GİRİŞ YAP VEYA KAYDOL" PENCERESİ
   GİBİ (3 Ekim 2026). Yalnız paketler sayfasında; harita sayfasındaki
   aynı pencere (views/parcel/map.php) eski hâlinde. Biçim: X solda, başlık
   ortada, altında ince çizgi; kutular 8px köşeli, etiketi içinde; düğme
   tam genişlik; Google düğmesi siyah çerçeveli, simgesi solda. */
body.page-packages-index .otp-modal .pk-sheet { border-radius: 16px 16px 0 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, .18); }
body.page-packages-index .otp-modal .pk-grip { display: none; }
body.page-packages-index .otp-modal .pk-head {
    min-height: 64px; padding: 0 12px; border-bottom: 1px solid #ebebeb;
}
body.page-packages-index .otp-modal .pk-head > span { order: 3; width: 40px; flex: none; }
body.page-packages-index .otp-modal .pk-close { order: -1; border-radius: 50%; }
body.page-packages-index .otp-modal .pk-close:hover { background: #f7f7f7; }
body.page-packages-index .otp-modal .pk-close svg { width: 16px; height: 16px; stroke-width: 2.6; }
body.page-packages-index .otp-modal .pk-titles h2 { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
body.page-packages-index .otp-body { padding: 22px 24px 24px; }
body.page-packages-index .otp-modal .otp-step { gap: 14px; }

/* Paket özeti: Airbnb'deki ilan özeti kutusu gibi, sola hizalı. */
body.page-packages-index .otp-aciklama {
    /* flex: b ile span arasındaki " · " metni ızgarada hücre kaplayıp
       fiyatı alt satıra itiyordu; font-size 0 ile görünmez, genişliksiz. */
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px;
    margin: 0 0 20px; padding: 16px; border: 1px solid #dddddd; border-radius: 12px;
    background: #fff; color: var(--ink); text-align: left; font-size: 0; line-height: 1.35;
}
body.page-packages-index .otp-aciklama b { font-size: 1rem; font-weight: 700; }
body.page-packages-index .otp-aciklama span { font-size: 1rem; font-weight: 800; }
body.page-packages-index .otp-aciklama small { flex-basis: 100%; margin-top: 4px; font-size: .84rem; color: var(--muted); }
body.page-packages-index #otp-phone::before {
    content: "Telefon numaranızla devam edin";
    font-size: 1.3rem; font-weight: 700; letter-spacing: -.025em; color: var(--ink); margin-bottom: 2px;
}

/* Kutular: 8px köşe, ince gri çerçeve; odakta kalın siyah. */
body.page-packages-index .otp-modal .otp-ico { display: none; }
body.page-packages-index .otp-modal .otp-step input {
    height: 58px; padding: 0 14px; border: 1px solid #b0b0b0; border-radius: 8px;
    background: #fff; font-size: 1rem; font-weight: 500; color: var(--ink);
}
body.page-packages-index .otp-modal .otp-step input:focus { border-color: #222; box-shadow: 0 0 0 1px #222; }
body.page-packages-index .otp-modal .otp-step input::placeholder { color: #8a8a8a; }
/* Telefon kutusunun etiketi kutunun içinde, üstte (Airbnb'deki gibi). */
body.page-packages-index .otp-field:has(input[name="phone"])::before {
    content: "Telefon numarası"; position: absolute; left: 15px; top: 9px; z-index: 1;
    font-size: .74rem; font-weight: 500; color: var(--muted); pointer-events: none;
}
body.page-packages-index .otp-modal .otp-step input[name="phone"] { padding-top: 20px; }
body.page-packages-index .otp-modal #otp-code-input { height: 64px; font-size: 1.7rem; }

body.page-packages-index .otp-guven { justify-content: flex-start; margin: -4px 0 0; text-align: left; font-size: .8rem; color: var(--muted); }
body.page-packages-index .otp-guven svg { display: none; }

/* Devam düğmesi: tam genişlik, 8px köşe, imleci izleyen ışık. */
body.page-packages-index .otp-go {
    height: 50px; border-radius: 8px; font-size: 1rem; font-weight: 700; letter-spacing: 0; box-shadow: none;
    background-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #5fb4c6 0%, #3b8192 42%, #2a6170 100%);
}
body.page-packages-index .otp-go-ico, body.page-packages-index .otp-go-ok { display: none; }
body.page-packages-index .otp-go:hover { box-shadow: none; }

body.page-packages-index .otp-modal .auth-or { margin: 4px 0; }
body.page-packages-index .otp-modal .auth-or span { background: #dddddd; }
body.page-packages-index .otp-modal .auth-or small { font-size: .8rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
body.page-packages-index .otp-modal .btn-google {
    position: relative; height: 50px; padding: 0 20px; border-radius: 8px; border: 1px solid #222;
    font-size: .95rem; font-weight: 600; color: var(--ink); box-shadow: none;
}
body.page-packages-index .otp-modal .btn-google:hover { background: #f7f7f7; box-shadow: none; }
body.page-packages-index .otp-modal .btn-google svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; }
body.page-packages-index .otp-modal .otp-sent { text-align: left; }
body.page-packages-index .otp-modal .otp-resend { text-align: left; }
@media (min-width: 700px) {
    body.page-packages-index .otp-modal .pk-sheet { width: 520px; border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .28); }
    body.page-packages-index .otp-body { padding: 24px; }
}