/* ─────────────────────────────────────────────────────────────
   Sporsmaç tanıtım sitesi
   Uygulamanın "Parke Gecesi" dilinden: sıcak siyah zemin, turuncu vurgu,
   Big Shoulders gösterim harfi, Figtree gövde, JetBrains Mono etiketler.
   Premium ve son çağrı, uygulama ikonunun gece mavisi dünyasında.
   Parallax: [data-parallax] öğelere JS `translate` verir; `transform`
   ile çakışmaz (yelpaze açıları transform'da kalır).
   ───────────────────────────────────────────────────────────── */

@font-face { font-family: 'Big Shoulders Display'; src: url('../fonts/BigShouldersDisplay-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Big Shoulders Display'; src: url('../fonts/BigShouldersDisplay-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --zemin: #0B0907;
  --zemin-2: #100D0A;
  --yuzey: #17130F;
  --yuzey-2: #1D1814;
  --cizgi: #2A231C;
  --cizgi-2: #3A3129;
  --krem: #F6EFE6;
  --krem-2: #B9AC9C;
  --krem-3: #938675;
  --turuncu: #FF6A1F;
  --turuncu-acik: #FF8A4C;
  --gece: #041230;
  --gece-isik: #0E3070;
  --gece-cizgi: #1B3466;
  --gece-metin: #F4F7FC;
  --gece-metin-2: #AFC0DD;
  --milli: #C8102E;
  --milli-koyu: #8E0B21;
  --milli-derin: #3A0710;
  --altin: #E3B341;

  --f-gosterim: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-govde: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --kenar: clamp(16px, 4vw, 40px);
  --genislik: 1240px;
  --ust-yukseklik: 64px;
  --yumusak: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-yukseklik) + 12px); }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--krem);
  font-family: var(--f-govde);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* İnce film greni — parkenin gece fotoğrafı hissi */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 900; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--turuncu); outline-offset: 3px; border-radius: 6px; }

.atla { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--turuncu); color: var(--zemin); font-weight: 700; text-decoration: none; }
.atla:focus { top: 12px; }

.kap { position: relative; width: 100%; max-width: calc(var(--genislik) + 2 * var(--kenar)); margin-inline: auto; padding-inline: var(--kenar); }

/* ── Yazı ────────────────────────────────────────────────── */
.ust-etiket {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-weight: 700; font-size: 12px; line-height: 1.3;
  letter-spacing: .16em; text-transform: uppercase; color: var(--krem-3);
}
.ust-etiket img { width: 26px; height: 26px; }
.ust-etiket .maskot-kucuk { width: 42px; height: auto; }
.turuncu { color: var(--turuncu); }

.dev-baslik {
  font-family: var(--f-gosterim); font-weight: 900; text-transform: uppercase;
  font-size: clamp(66px, 10.4vw, 168px); line-height: .96; letter-spacing: .005em;
  margin-top: 18px;
}
.dev-baslik .satir { display: block; overflow: hidden; white-space: nowrap; padding-block: .05em; margin-block: -.05em; }
.dev-baslik .satir > span { display: inline-block; }
.dev-baslik .vurgu { color: var(--turuncu); }
:lang(en) .dev-baslik { font-size: clamp(46px, 7.6vw, 116px); }

.bolum-baslik {
  font-family: var(--f-gosterim); font-weight: 900; text-transform: uppercase;
  font-size: clamp(50px, 7vw, 108px); line-height: .96; letter-spacing: .005em;
}
.bolum-baslik.kucuk { font-size: clamp(44px, 5.4vw, 80px); }
.bolum-baslik em, .ara-baslik em, .adim-baslik em { font-style: normal; color: var(--turuncu); }
.ara-baslik {
  font-family: var(--f-gosterim); font-weight: 900; text-transform: uppercase;
  font-size: clamp(36px, 4.4vw, 64px); line-height: .98; letter-spacing: .005em;
}
.giris-metni, .bolum-giris { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--krem-2); max-width: 34em; }
.kucuk-not { font-size: 13px; line-height: 1.5; color: var(--krem-3); }
.ortali { text-align: center; margin-inline: auto; }

.ceyrek {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--krem-3);
  margin-bottom: 22px;
}
.ceyrek span {
  padding: 5px 10px; border-radius: 6px;
  background: var(--turuncu); color: var(--zemin);
  box-shadow: 0 0 22px rgba(255,106,31,.35);
}
.ceyrek.gece { color: var(--gece-metin-2); }

/* ── Düğmeler ve rozetler ───────────────────────────────── */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px;
  background: var(--turuncu); color: var(--zemin);
  font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px -8px rgba(255,106,31,.6);
  transition: background .2s, transform .2s;
}
.dugme:hover { background: var(--turuncu-acik); transform: translateY(-1px); }
.dugme-kucuk { min-height: 40px; padding: 8px 16px; font-size: 14px; }

/* Resmî mağaza rozetleri — Apple ve Google yönergeleri: değiştirilmeden, eşit yükseklikte, çevresinde boşluk */
.magaza-satiri { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.rozet-link { display: inline-flex; border-radius: 10px; transition: transform .25s var(--yumusak), filter .25s; }
.rozet-link:hover { transform: translateY(-2px); filter: brightness(1.15); }
.rozet-link img { display: block; height: 54px; width: auto; }

/* ── Üst çubuk ──────────────────────────────────────────── */
.ust-cubuk {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(11,9,7,.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.ust-cubuk.kaydi { border-bottom-color: rgba(255,240,225,.07); background: rgba(11,9,7,.82); }
.ust-ic { display: flex; align-items: center; gap: 20px; height: var(--ust-yukseklik); max-width: calc(var(--genislik) + 2 * var(--kenar)); margin-inline: auto; padding-inline: var(--kenar); }
.marka { display: inline-flex; flex: none; }
.marka img { width: auto; height: 28px; display: block; }
.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { font-size: 15px; font-weight: 600; color: var(--krem-2); text-decoration: none; transition: color .2s; }
.menu a:hover { color: var(--krem); }
.dil { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--cizgi); background: #120E0B; }
.dil a { min-width: 38px; padding: 5px 9px; border-radius: 999px; text-align: center; font-family: var(--f-mono); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; color: var(--krem-3); text-decoration: none; transition: color .2s, background .2s; }
.dil a:hover { color: var(--krem); }
.dil a[aria-current="page"] { background: rgba(255,240,225,.1); color: var(--turuncu); }

.skorbord {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: #120E0B; border: 1px solid var(--cizgi);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--krem-3);
  white-space: nowrap;
}
.skorbord b { color: var(--turuncu); font-weight: 700; min-width: 2.2em; }
.skorbord .led { width: 7px; height: 7px; border-radius: 50%; background: var(--turuncu); box-shadow: 0 0 10px var(--turuncu); animation: nabiz 1.6s ease-in-out infinite; }
@keyframes nabiz { 50% { opacity: .35; box-shadow: 0 0 2px var(--turuncu); } }

/* ── Telefon çerçevesi (CSS, ekran görüntüsü içinde) ────── */
.cihaz { width: var(--g, 300px); max-width: 100%; container-type: inline-size; flex: none; }
.cihaz-kasa {
  position: relative;
  padding: 3.1cqw;
  border-radius: 16.2cqw;
  background: linear-gradient(150deg, #5a544d 0%, #25221f 18%, #0d0c0b 48%, #1c1a18 78%, #4b4640 100%);
  box-shadow:
    inset 0 0 0 .45cqw #070707,
    inset 0 .6cqw 1cqw rgba(255,255,255,.14),
    0 2cqw 6cqw -1cqw rgba(0,0,0,.65),
    0 10cqw 18cqw -6cqw rgba(0,0,0,.8);
}
.cihaz-kasa::before {
  content: ''; position: absolute; left: -.55cqw; top: 23cqw; width: .8cqw; height: 7cqw; border-radius: .6cqw 0 0 .6cqw;
  background: #3a3632; box-shadow: 0 11cqw 0 #3a3632, 0 21cqw 0 #3a3632;
}
.cihaz-kasa::after {
  content: ''; position: absolute; right: -.55cqw; top: 34cqw; width: .8cqw; height: 14cqw; border-radius: 0 .6cqw .6cqw 0;
  background: #3a3632;
}
.cihaz-ekran {
  display: block; width: 100%; height: auto; aspect-ratio: 390 / 844;
  border-radius: 13cqw; object-fit: cover; background: #0E0C0A;
}
.cihaz-ada {
  position: absolute; top: 5.4cqw; left: 50%; transform: translateX(-50%);
  width: 29cqw; height: 8.4cqw; border-radius: 999px; background: #000;
  box-shadow: inset 0 0 0 .3cqw #0a0a0a;
}
.cihaz-parlama {
  position: absolute; inset: 3.1cqw; border-radius: 13cqw; pointer-events: none;
  background: radial-gradient(70% 45% at var(--parlama-x, 28%) var(--parlama-y, 0%), rgba(255,255,255,.16), rgba(255,255,255,0) 62%);
  mix-blend-mode: screen; transition: background-position .3s;
}

/* ── Kahraman ───────────────────────────────────────────── */
.kahraman {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(28px, 5vw, 72px) clamp(72px, 9vw, 130px);
  background: var(--zemin);
}
/* Potalı arena görseli — uygulamanın hikâye kartı zemininden */
.kahraman-arena {
  position: absolute; z-index: -1; top: -6%; right: 0; width: min(76vw, 1180px); height: 118%;
  background: url('../img/zemin/pota.webp') center 16% / cover no-repeat;
  opacity: .62;
  -webkit-mask-image: linear-gradient(to left, #000 26%, rgba(0,0,0,.5) 58%, transparent 90%), linear-gradient(to bottom, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, #000 26%, rgba(0,0,0,.5) 58%, transparent 90%), linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-composite: intersect;
  will-change: translate;
}
.kahraman-isik { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.isik-turuncu { right: 8%; top: 12%; width: min(58vw, 760px); aspect-ratio: 1; background: radial-gradient(closest-side, rgba(255,106,31,.3), rgba(255,106,31,0)); }
.isik-lacivert { left: -18%; top: -34%; width: min(80vw, 1000px); aspect-ratio: 1.3; background: radial-gradient(closest-side, rgba(14,48,112,.5), rgba(14,48,112,0)); }
.kahraman-izgara { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.kahraman-metin .giris-metni { margin-top: 26px; }
.kanit-satiri { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--krem-3); }
.kanit-satiri b { color: var(--krem); font-weight: 700; margin-right: 4px; }
.kanit-satiri li { display: inline-flex; align-items: baseline; }
.kanit-satiri li + li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--turuncu); margin-right: 22px; transform: translateY(-2px); align-self: center; }

.demo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.demo-cihaz { --g: min(360px, 78vw); position: relative; perspective: 1400px; }
.demo-cihaz .cihaz-kasa { transform: rotateX(var(--egim-x, 0deg)) rotateY(var(--egim-y, 0deg)); transition: transform .6s var(--yumusak); transform-style: preserve-3d; }
.demo-ekranlar { position: relative; }
.demo-ekranlar .cihaz-ekran { transition: opacity .55s ease, transform .55s ease; }
.demo-ekranlar .cihaz-ekran:not(:first-child) { position: absolute; inset: 0; }
.demo-ekranlar .cihaz-ekran:not(.etkin) { opacity: 0; transform: scale(.985); }
.demo-sekmeler {
  position: relative; display: flex; gap: 2px; padding: 5px; border-radius: 999px;
  background: rgba(34,28,23,.72); border: 1px solid rgba(255,240,225,.13);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 30px -10px rgba(0,0,0,.6);
}
.demo-sekmeler button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 62px; min-height: 52px; padding: 7px 8px 6px; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer; color: var(--krem-2);
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  transition: background .25s, color .25s;
}
.demo-sekmeler button:hover { color: var(--krem); }
.demo-sekmeler button[aria-selected="true"] { background: rgba(255,240,225,.11); color: var(--turuncu); }
.sekme-ikon { width: 26px; height: 26px; background: currentColor; -webkit-mask: var(--ikon) center / contain no-repeat; mask: var(--ikon) center / contain no-repeat; }
[aria-selected="true"] .sekme-ikon { -webkit-mask-image: var(--ikon-dolu); mask-image: var(--ikon-dolu); }
.ikon-ligler { --ikon: url('../img/marka/menu/ligler.png'); --ikon-dolu: url('../img/marka/menu/ligler-dolu.png'); }
.ikon-bugun { --ikon: url('../img/marka/menu/bugun.png'); --ikon-dolu: url('../img/marka/menu/bugun-dolu.png'); }
.ikon-takip { --ikon: url('../img/marka/menu/takip.png'); --ikon-dolu: url('../img/marka/menu/takip-dolu.png'); }
.ikon-sosyal { --ikon: url('../img/marka/menu/sosyal.png'); --ikon-dolu: url('../img/marka/menu/sosyal-dolu.png'); }
.ikon-analiz { --ikon: url('../img/marka/menu/analiz.png'); --ikon-dolu: url('../img/marka/menu/analiz-dolu.png'); }
.demo-aciklama { min-height: 1.6em; font-size: 15px; color: var(--krem-2); text-align: center; }

.asagi-ok { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border-radius: 999px; border: 1.5px solid rgba(246,239,230,.3); }
.asagi-ok span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--turuncu); animation: kaydir 1.8s ease-in-out infinite; }
@keyframes kaydir { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ── Lig şeridi (skorbord bandı) ────────────────────────── */
.lig-seridi { overflow: hidden; border-block: 1px solid var(--cizgi); background: linear-gradient(to bottom, #0F0C09, #0B0907); padding-block: 14px; }
.lig-seridi-ic { display: flex; align-items: center; gap: 24px; width: max-content; animation: serit 70s linear infinite; font-family: var(--f-gosterim); font-weight: 800; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: .03em; text-transform: uppercase; color: var(--krem-3); white-space: nowrap; }
.lig-seridi-ic span:nth-of-type(3n+1) { color: var(--krem); }
.lig-seridi-ic i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--turuncu); box-shadow: 0 0 10px var(--turuncu); }
@keyframes serit { to { transform: translateX(-50%); } }

/* ── Skorbord şeridi ────────────────────────────────────── */
.skor-seridi {
  position: relative;
  padding-block: clamp(44px, 6vw, 72px);
  background:
    radial-gradient(rgba(255,106,31,.13) 1px, transparent 1.5px) 0 0 / 9px 9px,
    linear-gradient(to bottom, #0F0C09, #0B0907);
  border-bottom: 1px solid var(--cizgi);
}
.skor-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.skor-izgara li { display: flex; flex-direction: column; gap: 4px; }
.skor-etiket { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--turuncu); }
.skor-sayi {
  font-family: var(--f-gosterim); font-weight: 900; font-size: clamp(58px, 7vw, 108px); line-height: 1; font-variant-numeric: tabular-nums;
  color: #FFE9D8; text-shadow: 0 0 18px rgba(255,106,31,.45), 0 0 48px rgba(255,106,31,.2);
}
.skor-aciklama { font-size: 14px; color: var(--krem-3); max-width: 16em; }
.skor-notu { margin-top: 30px; font-size: 13px; color: var(--krem-3); }

/* ── Bölümler ───────────────────────────────────────────── */
.bolum { position: relative; overflow-x: clip; padding-block: clamp(80px, 11vw, 168px) 0; }
.bolum-isik { position: absolute; left: -12%; top: 6%; width: min(70vw, 900px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255,106,31,.11), rgba(255,106,31,0)); }
.bolum-isik.sag { left: auto; right: -14%; }
.bolum-izgara { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.bolum-metin .bolum-giris { margin-top: 24px; }
.bolum-metin.genis { max-width: 900px; }
.bolum-metin.ortali .bolum-giris { margin-inline: auto; }
.bolum-metin > p:not(.ceyrek):not(.ust-etiket):not(.bolum-giris):not(.kucuk-not):not(.sahiplen-soru) { color: var(--krem-2); margin-top: 18px; max-width: 34em; }
.bolum-metin .kucuk-not { margin-top: 12px; }

.ozellik-listesi { display: grid; gap: 18px; margin-top: 34px; }
.ozellik-listesi li { display: grid; grid-template-columns: 14px 1fr; column-gap: 14px; }
.ozellik-listesi li::before { content: ''; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%; background: var(--turuncu); grid-row: span 2; }
.ozellik-listesi b { font-size: 17px; color: var(--krem); }
.ozellik-listesi span { font-size: 15px; color: var(--krem-2); }

/* Yelpaze: üç telefon */
.yelpaze, .sahne, .son-yelpaze { position: relative; display: grid; place-items: center; padding-block: 20px 56px; }
.yelpaze > .cihaz, .sahne > .cihaz, .son-yelpaze > .cihaz { grid-area: 1 / 1; }
.yelpaze .orta, .son-yelpaze .orta { --g: clamp(210px, 23vw, 318px); z-index: 2; }
.yelpaze .yan, .son-yelpaze .yan { --g: clamp(170px, 19vw, 262px); z-index: 1; filter: brightness(.62) saturate(.9); transition: transform .8s var(--yumusak), filter .5s; }
.yelpaze .sol, .son-yelpaze .sol { transform: translateX(-64%) translateY(5%) rotate(-7deg); }
.yelpaze .sag, .son-yelpaze .sag { transform: translateX(64%) translateY(5%) rotate(7deg); }
.yelpaze:hover .yan, .son-yelpaze:hover .yan { filter: brightness(.85); }
.yelpaze:hover .sol, .son-yelpaze:hover .sol { transform: translateX(-71%) translateY(3%) rotate(-9deg); }
.yelpaze:hover .sag, .son-yelpaze:hover .sag { transform: translateX(71%) translateY(3%) rotate(9deg); }
.yelpaze .orta, .sahne .orta, .son-yelpaze .orta, .cihaz.tekli { transition: transform .6s var(--yumusak); }
.yelpaze:hover .orta, .son-yelpaze:hover .orta { transform: translateY(-8px); }

.alt-blok { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); padding-top: clamp(72px, 9vw, 140px); }

/* Takip + bildirim */
.takip-gorsel { position: relative; display: flex; justify-content: center; padding-block: 10px 30px; }
.cihaz.tekli { --g: clamp(230px, 24vw, 320px); }
.bildirim {
  position: absolute; top: 17%; left: 50%; transform: translateX(-72%);
  display: flex; gap: 12px; align-items: flex-start;
  width: min(372px, 92%); padding: 12px 14px 13px; border-radius: 22px;
  background: rgba(46,39,33,.74); border: 1px solid rgba(255,240,225,.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
}
.bildirim img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.bildirim > div { min-width: 0; }
.bildirim-ust { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--krem-3); letter-spacing: .02em; }
.bildirim-ust b { font-weight: 600; color: var(--krem-2); letter-spacing: .06em; }
.bildirim-baslik { margin-top: 2px; font-size: 14.5px; line-height: 1.3; font-weight: 700; color: var(--krem); }
.bildirim-govde { margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: var(--krem-2); }

/* 2. çeyrek — yapışkan telefonla anlatım */
.akis { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); margin-top: clamp(24px, 4vw, 56px); }
.akis-telefon {
  position: sticky; top: calc(var(--ust-yukseklik) + 3vh);
  height: calc(100vh - var(--ust-yukseklik) - 6vh);
  display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 40px);
}
.akis-isik { position: absolute; left: 50%; top: 50%; width: 110%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,106,31,.22), rgba(255,106,31,0)); pointer-events: none; }
.akis-cihaz { --g: min(330px, 27vw, calc((100vh - var(--ust-yukseklik) - 12vh) / 2.24)); position: relative; }
.akis-cizgi { position: relative; flex: none; width: 3px; height: 46%; border-radius: 3px; background: var(--cizgi); overflow: hidden; }
.akis-cizgi i { position: absolute; left: 0; top: 0; width: 100%; height: var(--ilerleme, 0%); border-radius: 3px; background: var(--turuncu); box-shadow: 0 0 12px var(--turuncu); transition: height .15s linear; }
.akis-adimlar { display: flex; flex-direction: column; }
.adim { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .5s var(--yumusak); }
.adim.etkin { opacity: 1; }
.adim-etiket { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--turuncu); }
.adim-baslik { margin-top: 14px; font-family: var(--f-gosterim); font-weight: 900; text-transform: uppercase; font-size: clamp(38px, 4.2vw, 62px); line-height: .98; }
.adim > p:not(.adim-etiket):not(.kucuk-not) { margin-top: 18px; max-width: 30em; color: var(--krem-2); font-size: clamp(16px, 1.2vw, 18px); }
.adim .kucuk-not { margin-top: 12px; }
.adim-gorsel { display: none; }
.halka-seridi { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.halka { position: relative; width: 112px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.halka svg { width: 100%; transform: rotate(-90deg); }
.halka circle { fill: none; stroke: var(--cizgi); stroke-width: 11; }
.halka circle.dolgu { stroke: var(--turuncu); stroke-linecap: round; stroke-dasharray: calc(var(--oran) * 3.1416px) 400px; transition: stroke-dasharray 1.2s var(--yumusak); }
.halka b { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-family: var(--f-gosterim); font-weight: 900; font-size: 27px; font-variant-numeric: tabular-nums; }
.halka span { font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--krem-3); }
.belir-hazir .halka-seridi:not(.dolu) circle.dolgu { stroke-dasharray: 0 400px; }

/* Milli takımlar */
.milli-blok {
  position: relative; overflow: hidden; margin-top: clamp(64px, 8vw, 120px);
  padding-block: clamp(64px, 8vw, 120px);
  background: linear-gradient(128deg, var(--milli) 0%, var(--milli-koyu) 52%, var(--milli-derin) 100%);
  color: #fff;
}
.milli-filigran { position: absolute; right: -8%; top: 50%; width: min(60vw, 780px); height: auto; margin-top: calc(min(60vw, 780px) / -2); fill: #fff; opacity: .08; pointer-events: none; }
.milli-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.milli-gorsel { display: flex; justify-content: center; gap: clamp(14px, 2vw, 28px); }
.milli-gorsel .cihaz { --g: clamp(180px, 19vw, 270px); }
.milli-blok .ust-etiket { color: rgba(255,255,255,.8); }
.milli-blok .ara-baslik em { color: var(--altin); }
.milli-blok .bolum-metin > p:not(.ust-etiket) { color: rgba(255,255,255,.86); }
.milli-blok .cihaz-kasa { box-shadow: inset 0 0 0 .45cqw #070707, inset 0 .6cqw 1cqw rgba(255,255,255,.14), 0 10cqw 20cqw -6cqw rgba(40,0,6,.85); }
.cihaz.asagi { margin-top: 14%; }

/* 3. çeyrek — izle sahnesi */
.izle-bolumu { overflow: hidden; padding-bottom: clamp(40px, 6vw, 80px); }
.izle-arena {
  position: absolute; left: 0; right: 0; top: -4%; height: min(860px, 96vw);
  background: url('../img/zemin/pota.webp') center top / cover no-repeat;
  opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
}
.sahne { margin-top: clamp(24px, 4vw, 56px); }
.sahne .orta { --g: clamp(230px, 26vw, 350px); z-index: 2; }
.sahne .orta .cihaz-kasa { box-shadow: inset 0 0 0 .45cqw #070707, inset 0 .6cqw 1cqw rgba(255,255,255,.14), 0 0 22cqw -2cqw rgba(255,106,31,.38), 0 10cqw 18cqw -6cqw rgba(0,0,0,.8); }
.sahne .yan { --g: clamp(180px, 20vw, 272px); z-index: 1; filter: brightness(.7); transition: transform .8s var(--yumusak), filter .5s; }
.sahne .sol { transform: translateX(-78%) translateY(6%) rotate(-4deg); }
.sahne .sag { transform: translateX(78%) translateY(6%) rotate(4deg); }
.sahne:hover .yan { filter: brightness(.9); }
.sahne:hover .sol { transform: translateX(-84%) translateY(4%) rotate(-6deg); }
.sahne:hover .sag { transform: translateX(84%) translateY(4%) rotate(6deg); }
.rozet-satiri { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.rozet-satiri li { padding: 10px 16px; border-radius: 999px; background: var(--yuzey); border: 1px solid var(--cizgi); font-size: 14px; color: var(--krem-2); }
.rozet-satiri b { color: var(--krem); font-weight: 700; }
.izle-bolumu .kucuk-not { margin-top: 16px; }

/* 4. çeyrek */
.rozetler { display: grid; gap: 14px; margin-top: 32px; }
.rozetler li { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: center; padding: 12px 16px; border-radius: 18px; background: var(--yuzey); border: 1px solid var(--cizgi); transition: border-color .3s, transform .3s var(--yumusak); }
.rozetler li:hover { border-color: var(--cizgi-2); transform: translateX(4px); }
.rozetler img { width: 32px; height: 32px; grid-row: span 2; }
.rozetler b { font-size: 16px; line-height: 1.3; }
.rozetler span { font-size: 14px; line-height: 1.4; color: var(--krem-2); }
.tekli-sahne { display: flex; justify-content: center; padding-block: 12px 36px; position: relative; }
.tekli-sahne::before { content: ''; position: absolute; top: 12%; left: 50%; width: 88%; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255,106,31,.2), rgba(255,106,31,0)); pointer-events: none; }
.tekli-sahne .cihaz { position: relative; }

.kredi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 28px; max-width: 460px; }
.kredi div { padding: 14px 14px 12px; border-radius: 18px; background: var(--yuzey); border: 1px solid var(--cizgi); }
.kredi div.vurgulu { border-color: rgba(255,106,31,.5); background: rgba(255,106,31,.1); }
.kredi b { display: block; font-family: var(--f-gosterim); font-weight: 900; font-size: 44px; line-height: 1; }
.kredi .vurgulu b { color: var(--turuncu); }
.kredi span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--krem-2); }
.ai-blok .kucuk-not { margin-top: 14px; }

.kartlar { position: relative; display: grid; place-items: center; padding-block: 24px 56px; }
.hikaye-karti {
  grid-area: 1 / 1; width: clamp(160px, 17vw, 236px); aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 20px; border: 1px solid rgba(255,240,225,.12);
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.85);
  transition: transform .8s var(--yumusak);
}
.hikaye-karti:nth-child(1) { transform: translateX(-78%) rotate(-8deg) translateY(6%); }
.hikaye-karti:nth-child(2) { z-index: 2; transform: translateY(-2%); }
.hikaye-karti:nth-child(3) { transform: translateX(78%) rotate(8deg) translateY(6%); }
.kartlar:hover .hikaye-karti:nth-child(1) { transform: translateX(-88%) rotate(-11deg) translateY(4%); }
.kartlar:hover .hikaye-karti:nth-child(2) { transform: translateY(-5%) scale(1.03); }
.kartlar:hover .hikaye-karti:nth-child(3) { transform: translateX(88%) rotate(11deg) translateY(4%); }

.sahiplen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding-block: clamp(80px, 10vw, 150px); }
.sahiplen-soru {
  font-family: var(--f-gosterim); font-weight: 900; text-transform: uppercase;
  font-size: clamp(64px, 9.6vw, 150px); line-height: .92;
  color: transparent; -webkit-text-stroke: 2px var(--turuncu);
  margin-bottom: 26px;
}
.sahiplen-metin > p:not(.sahiplen-soru) { margin-top: 18px; color: var(--krem-2); max-width: 34em; }

/* ── Premium (gece mavisi) ──────────────────────────────── */
.premium {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(84px, 11vw, 160px);
  background:
    radial-gradient(60% 70% at 88% 18%, rgba(14,48,112,.95), rgba(14,48,112,0) 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(255,106,31,.14), rgba(255,106,31,0) 70%),
    var(--gece);
  color: var(--gece-metin);
}
.premium-top { position: absolute; z-index: -1; right: -14%; top: -18%; width: min(92vw, 1100px); height: auto; opacity: .55; pointer-events: none; }
.premium-isik {
  position: absolute; z-index: -1; left: -10%; right: -10%; top: 58%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,106,31,0), rgba(255,106,31,.9) 40%, rgba(255,170,110,1) 60%, rgba(255,106,31,0));
  transform: rotate(-9deg); box-shadow: 0 0 18px 2px rgba(255,106,31,.55);
}
.premium-izgara { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.premium .ceyrek span { box-shadow: 0 0 26px rgba(255,106,31,.5); }
.faydalar { margin-top: 36px; border-radius: 22px; overflow: hidden; background: rgba(11,31,69,.72); border: 1px solid var(--gece-cizgi); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.faydalar li { display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; align-items: center; padding: 16px 20px; }
.faydalar li + li { border-top: 1px solid var(--gece-cizgi); }
.faydalar b { font-size: 18px; line-height: 1.3; }
.faydalar span:not(.tik) { font-size: 15px; line-height: 1.4; color: var(--gece-metin-2); grid-column: 2; }
.tik, .tik-rozet { grid-row: span 2; width: 32px; height: 32px; }
.tik { border-radius: 50%; border: 1.5px solid var(--gece-cizgi); position: relative; }
.tik::after { content: ''; position: absolute; left: 11px; top: 7px; width: 7px; height: 12px; border: solid var(--turuncu); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.planlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.plan { position: relative; padding: 18px 16px 16px; border-radius: 20px; background: rgba(11,31,69,.55); border: 1px solid var(--gece-cizgi); transition: transform .3s var(--yumusak), border-color .3s; }
.plan:hover { transform: translateY(-3px); border-color: #28457D; }
.plan.onerilen { border: 2px solid var(--turuncu); background: rgba(11,31,69,.85); }
.plan.onerilen::before { content: attr(data-etiket); position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: var(--turuncu); color: var(--zemin); font-family: var(--f-mono); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.plan-ad { font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.plan p:not(.plan-ad) { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--gece-metin-2); }
.premium .kucuk-not { margin-top: 18px; color: var(--gece-metin-2); }
.premium-maskot { position: relative; align-self: center; }
.premium-maskot img { display: block; width: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); animation: zipla 5.5s ease-in-out infinite; }
/* uygulamadaki ParlayanMaskot'un ışık süpürmesi */
.premium-maskot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 62%) 0 0 / 260% 100% no-repeat;
  -webkit-mask: url('../img/marka/maskot.webp') center / contain no-repeat; mask: url('../img/marka/maskot.webp') center / contain no-repeat;
  animation: supur 4s ease-in-out infinite, zipla 5.5s ease-in-out infinite;
}
@keyframes supur { 0%, 55% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
@keyframes zipla { 50% { transform: translateY(-14px); } }

/* ── SSS ────────────────────────────────────────────────── */
.sss { padding-block: clamp(80px, 10vw, 150px); }
.sss-izgara { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.sss-izgara > div:first-child { position: sticky; top: calc(var(--ust-yukseklik) + 32px); }
.sorular details { border-bottom: 1px solid var(--cizgi); }
.sorular details:first-child { border-top: 1px solid var(--cizgi); }
.sorular summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; line-height: 1.35;
  transition: color .2s;
}
.sorular summary:hover { color: #fff; }
.sorular summary::-webkit-details-marker { display: none; }
.sorular summary::after { content: ''; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--cizgi-2); background: linear-gradient(var(--turuncu), var(--turuncu)) center / 12px 2px no-repeat, linear-gradient(var(--turuncu), var(--turuncu)) center / 2px 12px no-repeat; transition: transform .3s var(--yumusak); }
.sorular details[open] summary::after { transform: rotate(45deg); }
.sorular details p { padding: 0 44px 24px 0; color: var(--krem-2); max-width: 44em; }

/* ── Son çağrı ──────────────────────────────────────────── */
.son-cagri {
  position: relative; overflow: hidden; padding-block: clamp(72px, 9vw, 130px) clamp(40px, 5vw, 70px);
  background:
    radial-gradient(50% 70% at 70% 40%, rgba(14,48,112,.9), rgba(14,48,112,0) 72%),
    radial-gradient(30% 40% at 15% 90%, rgba(255,106,31,.18), rgba(255,106,31,0) 70%),
    var(--gece);
  color: var(--gece-metin);
}
.son-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.son-ikon { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 18px 40px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1); margin-bottom: 26px; }
.son-cagri .bolum-giris { margin-top: 22px; color: var(--gece-metin-2); }
.son-yelpaze .yan { filter: brightness(.72); }

/* ── Alt bilgi ──────────────────────────────────────────── */
.alt-bilgi { padding-block: 56px 40px; background: #080605; border-top: 1px solid var(--cizgi); font-size: 15px; }
.alt-izgara { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.alt-marka img { height: 30px; width: auto; }
.alt-marka p { margin-top: 12px; color: var(--krem-3); }
.alt-baslik { font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--krem-3); margin-bottom: 12px; }
.alt-bilgi ul { display: grid; gap: 8px; color: var(--krem-2); }
.alt-bilgi a { text-decoration: none; color: var(--krem-2); }
.alt-bilgi a:hover { color: var(--krem); }
.alt-yasal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cizgi); display: grid; gap: 8px; font-size: 12.5px; line-height: 1.55; color: var(--krem-3); }

/* ── Alt sayfalar: yasal metinler, iletişim, 404 ────────── */
.dugme.ikincil { background: transparent; color: var(--krem); border: 1px solid var(--cizgi-2); box-shadow: none; }
.dugme.ikincil:hover { background: rgba(255,240,225,.06); }
.alt-sayfa { padding-block: clamp(40px, 6vw, 88px) clamp(72px, 9vw, 130px); }
.alt-sayfa .kap { max-width: calc(840px + 2 * var(--kenar)); }
.alt-sayfa-baslik { margin-top: 16px; font-family: var(--f-gosterim); font-weight: 900; text-transform: uppercase; font-size: clamp(48px, 7.4vw, 100px); line-height: .96; }
.alt-sayfa-baslik em { font-style: normal; color: var(--turuncu); }
.alt-sayfa-giris { margin-top: 22px; font-size: clamp(17px, 1.3vw, 19px); color: var(--krem-2); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.alt-sayfa-giris b { color: var(--krem); }
.alt-sayfa .kucuk-not { margin-top: 26px; }
.alt-sayfa a:not(.dugme) { color: var(--turuncu-acik); text-underline-offset: 3px; }
.belge-secici { display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px; border-radius: 14px; background: var(--yuzey); border: 1px solid var(--cizgi); }
.belge-secici a { padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--krem-2) !important; }
.belge-secici a[aria-current="page"] { background: var(--turuncu); color: var(--zemin) !important; font-weight: 700; }
.yasal-tarih { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: var(--yuzey); border: 1px solid var(--cizgi); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--krem-3); }
.yasal-tarih b { margin-left: 6px; color: var(--krem); font-weight: 700; }
.yasal-metin { margin-top: 12px; }
.yasal-bolum { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--cizgi); }
.yasal-bolum h2 { font-family: var(--f-gosterim); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; }
.yasal-bolum h2 span { color: var(--turuncu); }
.yasal-bolum h3 { margin: 24px 0 0; font-size: 17px; font-weight: 700; line-height: 1.4; }
.yasal-bolum p { margin-top: 12px; color: var(--krem-2); line-height: 1.7; overflow-wrap: anywhere; }
.yasal-bolum strong { color: var(--krem); font-weight: 700; }
.yasal-not { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 3px solid var(--turuncu); }
.yasal-not p { margin-top: 0; }
.isaretli { margin-top: 12px; display: grid; gap: 8px; }
.isaretli li, .isaretli-satir { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--krem-2); line-height: 1.6; }
.isaretli li::before, .isaretli-satir::before { content: '✓'; font-weight: 700; color: #3FD68C; }
.isaretli li.hayir::before, .isaretli-satir.hayir::before { content: '✕'; color: #FF8A7A; }
.yasal-altbilgi { margin-top: 44px !important; text-align: center; font-size: 13px; color: var(--krem-3) !important; }
.iletisim-kartlari { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; }
.iletisim-kartlari div { padding: 18px 20px; border-radius: 18px; background: var(--yuzey); border: 1px solid var(--cizgi); }
.iletisim-kartlari dt { font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--krem-3); }
.iletisim-kartlari dd { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--krem); overflow-wrap: anywhere; }
@media (max-width: 720px) { .iletisim-kartlari { grid-template-columns: minmax(0, 1fr); } }

/* ── Belirme (JS hazırsa; JS yoksa her şey görünür) ─────── */
.belir-hazir [data-belir] { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--yumusak), transform .9s var(--yumusak); }
.belir-hazir [data-belir].gorundu { opacity: 1; transform: none; }
.belir-hazir .bildirim:not(.gorundu) { opacity: 0; }
.bildirim { transition: opacity .8s var(--yumusak); }

/* ── Hareket ────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .dev-baslik .satir > span { animation: yuksel .9s var(--yumusak) both; }
  .dev-baslik .satir:nth-child(2) > span { animation-delay: .08s; }
  .dev-baslik .satir:nth-child(3) > span { animation-delay: .16s; }
  @keyframes yuksel { from { transform: translateY(105%); } }
  .demo-cihaz { animation: suz 7s ease-in-out infinite; }
  @keyframes suz { 50% { transform: translateY(-10px); } }
  .kahraman-arena { animation: arena-gir 1.6s var(--yumusak) both; }
  @keyframes arena-gir { from { opacity: 0; transform: scale(1.06); } }
  .magaza-satiri, .kanit-satiri, .giris-metni { animation: sol-gir .9s var(--yumusak) both; animation-delay: .28s; }
  @keyframes sol-gir { from { opacity: 0; transform: translateY(16px); } }

  @supports (animation-timeline: view()) {
    .yelpaze .sol, .son-yelpaze .sol { animation: ac-sol linear both; animation-timeline: view(); animation-range: entry 10% cover 42%; }
    .yelpaze .sag, .son-yelpaze .sag { animation: ac-sag linear both; animation-timeline: view(); animation-range: entry 10% cover 42%; }
    @keyframes ac-sol { from { transform: translateX(-18%) translateY(8%) rotate(-1deg); } to { transform: translateX(-64%) translateY(5%) rotate(-7deg); } }
    @keyframes ac-sag { from { transform: translateX(18%) translateY(8%) rotate(1deg); } to { transform: translateX(64%) translateY(5%) rotate(7deg); } }
    .sahne .sol { animation: sahne-sol linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .sahne .sag { animation: sahne-sag linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    @keyframes sahne-sol { from { transform: translateX(-20%) translateY(10%) rotate(0deg); } to { transform: translateX(-78%) translateY(6%) rotate(-4deg); } }
    @keyframes sahne-sag { from { transform: translateX(20%) translateY(10%) rotate(0deg); } to { transform: translateX(78%) translateY(6%) rotate(4deg); } }
    .hikaye-karti:nth-child(1) { animation: kart-sol linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    .hikaye-karti:nth-child(3) { animation: kart-sag linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    @keyframes kart-sol { from { transform: translateX(-10%) rotate(-2deg) translateY(8%); } to { transform: translateX(-78%) rotate(-8deg) translateY(6%); } }
    @keyframes kart-sag { from { transform: translateX(10%) rotate(2deg) translateY(8%); } to { transform: translateX(78%) rotate(8deg) translateY(6%); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skorbord .led, .premium-maskot img, .premium-maskot::after, .lig-seridi-ic, .asagi-ok span { animation: none; }
  .demo-ekranlar .cihaz-ekran { transition: none; }
  .belir-hazir [data-belir], .belir-hazir .bildirim:not(.gorundu) { opacity: 1; transform: none; }
}

/* ── Duyarlı düzen ──────────────────────────────────────── */
@media (max-width: 1120px) {
  .menu { display: none; }
  .dil { margin-left: auto; }
}
@media (max-width: 960px) {
  .kahraman-izgara, .bolum-izgara, .alt-blok, .milli-izgara, .premium-izgara, .son-izgara, .sahiplen, .sss-izgara { grid-template-columns: minmax(0, 1fr); }
  .takip-blok .takip-gorsel, .ai-blok .tekli-sahne, .sahiplen .tekli-sahne { order: 2; }
  .sss-izgara > div:first-child { position: static; }
  .premium-maskot { max-width: 360px; justify-self: center; order: -1; }
  .skor-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .alt-izgara { grid-template-columns: 1fr 1fr; }
  .alt-marka { grid-column: 1 / -1; }
  .demo { margin-top: 12px; }
  .kahraman-arena { width: 100%; top: 0; height: 100%; opacity: .42;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, #000 40%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, #000 40%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add; background-position: 70% 20%; }
  .akis { grid-template-columns: minmax(0, 1fr); }
  .akis-telefon { display: none; }
  .adim { min-height: 0; opacity: 1; padding-block: 36px; border-top: 1px solid var(--cizgi); }
  .adim:first-child { border-top: 0; }
  .adim-gorsel { display: block; --g: min(270px, 72vw); margin: 30px auto 0; }
  .belir-hazir .halka-seridi:not(.dolu) circle.dolgu { stroke-dasharray: calc(var(--oran) * 3.1416px) 400px; }
}
@media (max-width: 720px) {
  .skorbord { display: none; }
  .ust-ic { gap: 12px; }
  .dugme-kucuk { padding-inline: 12px; }
  .yelpaze .orta, .son-yelpaze .orta { --g: min(210px, 56vw); }
  .yelpaze .yan, .son-yelpaze .yan { --g: min(160px, 42vw); }
  .yelpaze .sol, .son-yelpaze .sol { transform: translateX(-54%) translateY(6%) rotate(-6deg); }
  .yelpaze .sag, .son-yelpaze .sag { transform: translateX(54%) translateY(6%) rotate(6deg); }
  .sahne .orta { --g: min(230px, 60vw); }
  .sahne .yan { --g: min(160px, 42vw); }
  .sahne .sol { transform: translateX(-56%) translateY(8%) rotate(-4deg); }
  .sahne .sag { transform: translateX(56%) translateY(8%) rotate(4deg); }
  .hikaye-karti { width: min(150px, 38vw); }
  .hikaye-karti:nth-child(1) { transform: translateX(-62%) rotate(-7deg) translateY(6%); }
  .hikaye-karti:nth-child(3) { transform: translateX(62%) rotate(7deg) translateY(6%); }
  .ikili .cihaz, .milli-gorsel .cihaz { --g: min(170px, 44vw); }
  .bildirim { top: 12%; transform: translateX(-50%); width: min(340px, 94%); }
  .planlar { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .kredi b { font-size: 38px; }
  .demo-sekmeler button { min-width: 0; flex: 1; padding-inline: 6px; }
  .demo-sekmeler { width: 100%; max-width: 380px; }
  .sorular details p { padding-right: 0; }
  :lang(en) .dev-baslik { font-size: min(62px, 16.5vw); }
  .rozet-link img { height: 44px; }
  .magaza-satiri { gap: 12px; }
  .asagi-ok { display: none; }
  @supports (animation-timeline: view()) {
    @keyframes ac-sol { from { transform: translateX(-14%) translateY(8%) rotate(-1deg); } to { transform: translateX(-54%) translateY(6%) rotate(-6deg); } }
    @keyframes ac-sag { from { transform: translateX(14%) translateY(8%) rotate(1deg); } to { transform: translateX(54%) translateY(6%) rotate(6deg); } }
    @keyframes sahne-sol { from { transform: translateX(-14%) translateY(10%) rotate(0deg); } to { transform: translateX(-56%) translateY(8%) rotate(-4deg); } }
    @keyframes sahne-sag { from { transform: translateX(14%) translateY(10%) rotate(0deg); } to { transform: translateX(56%) translateY(8%) rotate(4deg); } }
    @keyframes kart-sol { from { transform: translateX(-10%) rotate(-2deg) translateY(8%); } to { transform: translateX(-62%) rotate(-7deg) translateY(6%); } }
    @keyframes kart-sag { from { transform: translateX(10%) rotate(2deg) translateY(8%); } to { transform: translateX(62%) rotate(7deg) translateY(6%); } }
  }
}
@media (max-width: 420px) {
  .kanit-satiri li + li::before { margin-right: 14px; }
  .kanit-satiri { gap: 8px 14px; }
  .marka img { height: 24px; }
  .dil a { min-width: 32px; padding-inline: 6px; }
}