/* ============================================================================
   VIBERO — landing sayfası stilleri

   NEDEN styles.css'TEN AYRI
   styles.css'i SEKİZ sayfa paylaşıyor: index, 404, privacy, terms, guidelines,
   cookies, /d/ (davet) ve /y/ (yoklama). Landing'in yeni dili orada tanımlı
   `.hero` `.lead` `.wrap` `.btn` `.panel` `.section` adlarının hepsini farklı
   anlamda kullanıyor. İkisini aynı dosyaya koymak ya da index.html'e ikisini
   birden yüklemek, hukuki sayfaları ve davet/yoklama kartlarını sessizce
   bozardı. Bu yüzden:

     · styles.css'e HİÇ dokunulmadı
     · index.html YALNIZ bu dosyayı yükler
     · dosya kendi kendine yeter; paylaşılan hiçbir sınıfa bağımlı değil

   Renk ve yarıçap tokenları styles.css ile aynı kaynaktan (DesignSystem.swift)
   geliyor, dolayısıyla iki sayfa arasında geçerken renk zıplaması olmuyor.

   CSP — `style-src 'self'`
   Bu dosya satır içi <style> ya da style="" niteliğinin YERİNİ tutuyor;
   prototipteki her ikisi de politika tarafından bloklanırdı. Giriş
   gecikmeleri en alttaki .d70 … .d420 sınıflarıyla veriliyor.

   Prototipten taşınırken iki temizlik yapıldı:
     · @media blokları içine birebir yapıştırılmış 128 atıl kural düşürüldü
       (aynı selektör + aynı gövde; etkisizdiler, yalnız dosyayı şişiriyorlardı)
     · lisanslı webfont'lar kaldırıldı, yığın styles.css ile eşitlendi
   ============================================================================ */

:root {
  /* ══ DesignSystem.swift'ten BİREBİR ══
     Önceki sürümde bu değerler "yaklaşık" idi ve bileşenler app'e benzemiyordu.
     Artık her biri kaynaktan kopya. */

  /* ══ YÜZEY MERDİVENİ — web için yeniden ölçeklendi ══
     Uygulamanın tokenları (#0E1216 / #1C2329 / #262C35) telefonda yakından
     bakıldığında doğru; büyük bir monitörde düz siyah gibi okunuyor ve
     kartlar zeminden ayrışmıyordu. ÖLÇÜLDÜ:
       eski taban L* 5.3 · kart L* 13.3 · kart↔zemin 1.18:1
       referans (Material/Atlassian) taban L* ~11.8, kademe başına +4–5%
     O kadar düşük parlaklıkta göz zaten ayırt edemiyor. Düzeltme yönü
     "ön planı söndürmek" değil "zemini açmak".
     Kort tonunun hue'su %45 oranında korundu; kademeler +4.2 L* eşit aralıklı.
     Bileşen grameri (yarıçap, hairline, yapı) DEĞİŞMEDİ — sadece yüzey. */
     Renk: courtTint'in hue'su (202°) ve doygunluğu (%34) TAM GÜÇTE korunuyor.
     Önceki turda chroma'yı %15'e indirmiştim — sayfa gri okunuyordu.
     %15 gözün "gri" dediği eşik; uygulamanın kendi kort tonu %34. */
  --bg-base:      #131F27;   /* L* 11.0 · S %34 */
  --bg-elevated:  #192832;   /* L* 15.2 · kart */
  --bg-elevated2: #1E313D;   /* L* 19.3 · iç kart */
  --bg-overlay:   #233B49;   /* L* 23.6 · dördüncü kademe */

  --line:      #2B4758;
  --line-soft: #34576B;

  /* Metin — saf beyaz YASAK */
  --text-primary: #EDEFE8;
  --text-muted:   #9AA3AD;
  --text-faint:   #909AA7;

  /* Marka aksanı — ekran alanının ~%10'unu geçmez, gövde metni OLMAZ */
  --lime:         #C9E44E;
  --lime-pressed: #B3CD3F;
  --on-lime:      #14160A;

  /* Semantik */
  --win:   #43C6A5;
  --loss:  #E5605E;
  --coral: #FF7059;
  --warn:  #E8A33A;
  --gold:  #E2C275;
  --ice:   #8FBEE8;

  /* Kort tonu — imza zemin */
  --court-tint:  #17262F;
  --court-tint2: #1B2C37;
  --court-line:  rgba(237,239,232,.32);
  --on-poster:   #EDEFE8;

  /* Köşe yarıçapları — "Saha Raporu" dili: editoryal/KESKİN.
     Önceki web sürümü 10–18px yuvarlaktı; app 4–6px. Asıl uyumsuzluk buydu. */
  --r-chip: 4px; --r-small: 4px; --r-medium: 5px;
  --r-card-tight: 5px; --r-card: 6px; --r-sheet: 14px;
  --r-button: 5px; --r-pill: 100px;

  /* 4pt taban ızgara */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px;
  --sp-xl: 20px; --sp-xxl: 24px; --sp-xxxl: 32px;
  --screen-inset: 20px; --section-gap: 28px; --card-inset: 16px;
  --btn-height: 52px;

  --gutter: clamp(20px, 4.5vw, 64px);
  --maxw:   1240px;

  /* mono = VERİ · sans = OKUNAN METİN · condensed = BAŞLIK */
  /* TİPOGRAFİ — lisanslı webfont YOK.
     Prototipte Archivo / Archivo Narrow / Martian Mono vardı. Sitede
     webfont hiç bulunmadığı için onları eklemek hem ~90 KB hem de SIL OFL
     telif metnini dağıtma yükümlülüğü getiriyordu. Yığın styles.css ile
     BİREBİR aynı tutuluyor: landing ile hukuki sayfalar aynı harfi çizsin.

     --display ayrı bir aile DEĞİL: uygulama başlıklarda SF Pro Condensed
     kullanıyor, webde güvenilir bir condensed karşılığı yok. Başlığın
     editoryal karakteri aileden değil AĞIRLIK (800) + NEGATİF HARF
     ARALIĞI'ndan geliyor; o değerler kuralların içinde zaten duruyor. */
  --sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, system-ui, sans-serif;
  --mono:    ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --e-out:   cubic-bezier(.16, 1, .3, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg-base); color: var(--text-primary);
  font-family: var(--sans); line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1,h2,h3,p,ul,ol,figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 4px; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip {
  position: fixed; top: -100px; left: var(--gutter); z-index: 300;
  background: var(--lime); color: var(--on-lime); padding: 10px 16px;
  border-radius: var(--r-button); font: 600 .9rem/1 var(--display); transition: top .15s var(--e-out);
}
.skip:focus { top: 12px; }

.ic { width:1em; height:1em; display:block; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#sprite { position:absolute; width:0; height:0; overflow:hidden; }

#court { position: fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
/* Vinyet: kortun kenarları karanlığa gömülür, orta açık kalır. Ufuk çizgisi
   veya gökyüzü YOK — B varyantındaki çirkin yatay dikişi onlar üretiyordu. */
.court-veil {
  position: fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(140% 100% at 50% 62%, rgba(19,31,39,0) 34%, rgba(19,31,39,.72) 100%),
    linear-gradient(to bottom, rgba(19,31,39,.90) 0%, rgba(19,31,39,.30) 24%, rgba(19,31,39,0) 46%, rgba(19,31,39,.14) 100%);
}
main, .foot, .topbar { position: relative; z-index: 10; }

.rail { position: fixed; top:0; left:0; right:0; height:2px; z-index:90; background: rgba(255,255,255,.07); }
.rail i { display:block; height:100%; background: var(--lime); transform-origin:0 50%; transform: scaleX(0); }

/* ============================================================================
   ÜST ÇUBUK
   ============================================================================ */

.topbar {
  position: fixed; top:0; left:0; right:0; z-index:80; padding: 14px 0;
  border-bottom: 1px solid transparent;
  background: linear-gradient(to bottom, rgba(19,31,39,.82), rgba(19,31,39,0));
  transition: background .3s var(--e-out), border-color .3s var(--e-out);
}
/* backdrop-filter KALDIRILDI. Başlık sabit ve tam genişlikte; altında her
   karede yeniden boyanan bir tuval var, dolayısıyla bulanıklık top zıplarken
   bile kare kare yeniden hesaplanıyordu — kaydırmadaki takılmanın ikinci
   kaynağı buydu. %90 örtücülükte bulanıklığın görsel katkısı zaten yok
   denecek kadar azdı; örtücülüğü .94'e çekip bulanıklığı attık. */
.topbar[data-stuck] {
  background: rgba(19,31,39,.94); border-bottom-color: var(--line);
}
.topbar .wrap { display:flex; align-items:center; gap:12px; }
.wrap { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }

.wordmark { font-family: var(--sans); font-weight:800; letter-spacing:-.05em; font-size:1.16rem; display:inline-flex; align-items:baseline; margin-right:auto; }
.wordmark .dot { color: var(--lime); }

.navlinks { display:flex; gap:2px; margin-right:6px; }
.navlinks a { padding:8px 12px; border-radius: var(--r-small); font-size:.87rem; color: var(--text-muted); transition: color .18s var(--e-out), background .18s var(--e-out); }
.navlinks a:hover { color: var(--text-primary); background: rgba(255,255,255,.06); }
@media (max-width: 880px) { .navlinks { display:none; }}


.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height: var(--btn-height); padding:14px 24px; border-radius: var(--r-button);
  font-family: var(--sans); font-weight:600; font-size:1rem; line-height:1;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition: background .18s var(--e-out), border-color .18s var(--e-out), transform .12s var(--e-out);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--lime); color: var(--on-lime); }
.btn-primary:hover { background: var(--lime-pressed); }
.btn-ghost { border:1px solid rgba(237,239,232,.28); color: var(--text-primary); background: rgba(19,31,39,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: var(--line-soft); background: var(--bg-elevated); }
.btn-sm { min-height:36px; padding:9px 15px; font-size:.86rem; border-radius: var(--r-button); }

/* ============================================================================
   BÖLÜMLER — dönüşümlü ton, ritim
   ============================================================================ */

main { position: relative; z-index: 10; }
.sec { padding-block: clamp(76px, 10vw, 140px) clamp(150px, 22vh, 280px); position: relative; }
/* Tek düz siyah yerine basamaklı ton: bölümler birbirinden ayrışıyor. */
.sec-alt { background: var(--bg-elevated); border-block: 1px solid var(--line); }

.eyebrow {
  font-family: var(--mono); font-weight:500; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color: var(--text-faint);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before { content:''; width:16px; height:1px; background: var(--lime); }

.h-sec {
  font-family: var(--display);
  font-weight:800; font-size: clamp(1.8rem, 3.2vw, 3.3rem);
  line-height:1.03; letter-spacing:-.042em; text-wrap: balance;
  margin-top:16px; overflow-wrap: break-word;
}
.h-sec .dim { color: var(--text-muted); }
.h-sec .mark { color: var(--lime); }
.lead { margin-top:14px; font-size: clamp(.96rem, 1.08vw, 1.1rem); line-height:1.65; color: var(--text-muted); max-width:46ch; text-wrap: pretty; }

.duo { display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(30px,5vw,80px); align-items:center; }
.duo[data-flip] { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
.duo[data-flip] .duo-copy { order:2; }
.duo[data-flip] .duo-art { order:1; }
@media (max-width: 920px) {
  .duo, .duo[data-flip] { grid-template-columns: minmax(0,1fr); gap:34px; }
  .duo[data-flip] .duo-copy, .duo[data-flip] .duo-art { order:unset; }
  .lead { max-width:none; }}


/* Klip + Watch yan yana — tek kartta iki alakasız özellik vardı */
.split { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.split .panel { align-content:space-between; }
@media (max-width: 700px) { .split { grid-template-columns:1fr; }}


.clip-frame {
  position:relative; aspect-ratio:16/9; border-radius:var(--r-card-tight);
  border:1px solid var(--line); overflow:hidden;
  background: #0E1A22; display:grid; place-items:center;
}
.clip-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.clip-frame::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(19,31,39,.72), rgba(19,31,39,.12) 55%);
}
.clip-frame .play, .clip-frame .stamp { position:relative; z-index:2; }
.clip-frame .stamp { position:absolute; left:10px; bottom:10px; }
.clip-frame .play {
  width:46px; height:46px; border-radius:var(--r-pill); background:var(--text-primary);
  color:var(--on-lime); display:grid; place-items:center; font-size:19px;
}
.clip-frame .play .ic { fill:currentColor; stroke:none; }
.clip-frame .stamp {
  position:absolute; left:10px; bottom:10px; font-family:var(--mono); font-size:.6rem;
  background:rgba(19,31,39,.82); padding:4px 7px; border-radius:var(--r-small);
}

.watch-dev { display:grid; place-items:center; padding:6px 0 2px; }
/* Apple Watch — kasa, dijital taç, yan tuş ve kordon uçları.
   Önceki hali yuvarlatılmış bir dikdörtgendi; saat gibi durmuyordu. */
.awatch { display:grid; justify-items:center; }
.awatch .band {
  width:66px; height:26px; background:linear-gradient(#232A31,#1A2027);
  border:1px solid rgba(255,255,255,.07);
}
.awatch .band.top    { border-radius:6px 6px 3px 3px; border-bottom:0; margin-bottom:-5px; }
.awatch .band.bottom { border-radius:3px 3px 6px 6px; border-top:0; margin-top:-5px; }

.wcase {
  position:relative; width:116px; height:140px;
  border-radius:36px / 40px;                 /* squircle'a yakın: dikeyde daha yuvarlak */
  padding:7px;
  background:linear-gradient(152deg,#4A525B 0%, #2A313A 38%, #171C22 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 18px 34px -14px rgba(0,0,0,.9);
}
/* Dijital taç */
.wcase .crown {
  position:absolute; right:-4px; top:32px; width:5px; height:20px; border-radius:2px;
  background:linear-gradient(90deg,#5A626B,#2E353D);
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
/* Yan tuş */
.wcase .sidebtn {
  position:absolute; right:-3px; top:62px; width:3px; height:22px; border-radius:2px;
  background:linear-gradient(90deg,#454D56,#262C33);
}
.wface {
  width:100%; height:100%; border-radius:30px / 34px; background:#000;
  display:grid; align-content:center; justify-items:center; gap:4px; text-align:center;
}
.wface .ws { font-family:var(--sans); font-weight:700; font-size:1.5rem; letter-spacing:-.03em; font-variant-numeric: tabular-nums; }
.wface .wl { font-family:var(--mono); font-size:.48rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }

.tier-now { justify-items:center; text-align:center; gap:12px; padding:20px 16px; }
.tier-name {
  font-family: var(--display); font-weight:800; letter-spacing:-.035em;
  font-size: clamp(2rem, 3.4vw, 2.7rem); line-height:1;
  background: linear-gradient(180deg,#DCE8EC,#93AAB4);   /* Platinum gem'i */
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* İlerleme ringi — RatingRingView'in karşılığı: kademe içindeki konum */
.tier-ring {
  width:78px; height:78px; border-radius:var(--r-pill);
  background: conic-gradient(#DCE8EC var(--p,64%), var(--line) 0);
  display:grid; place-items:center;
}
.tier-ring i {
  width:64px; height:64px; border-radius:var(--r-pill);
  background: var(--bg-elevated2); display:block;
}

/* Kademe merdiveni — renkler RatingTier.swift `emblemColors`'tan BİREBİR.
   Önceki halinde yedi kademe de griydi; oysa veri zaten renkliydi. */
.ladder { display:grid; gap:6px; }
.ladder li { display:grid; grid-template-columns:5.4rem 1fr; gap:12px; align-items:center; }
.ladder li span { font-family:var(--sans); font-weight:600; font-size:.8rem; text-align:right; color:var(--text-faint); }
.ladder li i {
  height:8px; border-radius:var(--r-small);
  background: linear-gradient(90deg, var(--t1), var(--t2));
  opacity:.55;
}
.ladder li[data-now] i { opacity:1; box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.ladder li[data-now] span { color: var(--text-primary); }

.ladder li:nth-child(1) { --t1:#E7C978; --t2:#C9E44E; }  /* Legend  — gold→lime prizma */
.ladder li:nth-child(2) { --t1:#D4EC5A; --t2:#7E9C22; }  /* Master  — imza lime */
.ladder li:nth-child(3) { --t1:#9CEBE6; --t2:#39A39D; }  /* Diamond — camgöbeği */
.ladder li:nth-child(4) { --t1:#DCE8EC; --t2:#93AAB4; }  /* Platinum */
.ladder li:nth-child(5) { --t1:#E7C978; --t2:#B08A33; }  /* Gold */
.ladder li:nth-child(6) { --t1:#CED4DC; --t2:#828A95; }  /* Silver */
.ladder li:nth-child(7) { --t1:#C08552; --t2:#6E4A2B; }  /* Bronze  — bakır */

.ladder li:nth-child(1) i { width:100%; } .ladder li:nth-child(2) i { width:86%; }
.ladder li:nth-child(3) i { width:73%; }  .ladder li:nth-child(4) i { width:60%; }
.ladder li:nth-child(5) i { width:47%; }  .ladder li:nth-child(6) i { width:34%; }
.ladder li:nth-child(7) i { width:22%; }

/* Rotasyon diyagramı — markanın kendi illüstrasyonu */
.rotation { display:grid; grid-template-columns:88px 1fr; gap:14px; align-items:center; }
.rotation img { width:88px; height:88px; border-radius:var(--r-card-tight); border:1px solid var(--line); }
.rotation p { font-size:.88rem; line-height:1.55; color:var(--text-muted); }
.rotation b { color:var(--text-primary); font-weight:600; }
@media (max-width: 520px) { .rotation { grid-template-columns:64px 1fr; } .rotation img { width:64px; height:64px; }}


.plans {
  margin-top: clamp(32px,4.4vw,54px);
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
}
.plan { background:var(--bg-elevated); padding:clamp(20px,2.4vw,30px); display:grid; gap:16px; align-content:start; }
.plan-premium { background:var(--bg-elevated2); box-shadow: inset 3px 0 0 var(--gold); }
.plan-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.plan-head h3 { font-family:var(--display); font-weight:800; font-size:1.45rem; letter-spacing:-.03em; }
.plan-premium .plan-head h3 { color:var(--gold); }
.plan-premium .ic { color:var(--gold); }
.plan .ic { color: var(--ice); }
.plan-head h3 { color: var(--ice); }
.plan ul { display:grid; gap:11px; }
.plan li { display:flex; gap:10px; align-items:flex-start; font-size:.92rem; line-height:1.55; color:var(--text-muted); }
.plan .ic { color:var(--lime); font-size:1rem; margin-top:3px; flex:none; }
@media (max-width: 700px) { .plans { grid-template-columns:1fr; }}


.feature-grid {
  margin-top: clamp(34px, 4.6vw, 60px);
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
}
.feature-grid li {
  background: var(--bg-elevated); padding: clamp(20px,2.4vw,28px);
  display: grid; gap: 10px; align-content: start;
}
/* İkon rengi anlamı taşısın — hepsi lime olunca vurgu vurgu olmaktan çıkıyor */
.feature-grid .ic { font-size: 1.4rem; }
.feature-grid li:nth-child(1) .ic { color: var(--lime); }
.feature-grid li:nth-child(2) .ic { color: var(--ice); }
.feature-grid li:nth-child(3) .ic { color: var(--gold); }
.feature-grid li:nth-child(4) .ic { color: var(--win); }
.feature-grid li:nth-child(5) .ic { color: var(--coral); }
.feature-grid li:nth-child(6) .ic { color: var(--ice); }
.feature-grid h3 { font-family: var(--display); font-weight:700; font-size:1.12rem; letter-spacing:-.02em; }
.feature-grid p { color: var(--text-muted); font-size:.92rem; line-height:1.6; }
@media (max-width: 900px) {

.feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }}

@media (max-width: 600px) {

.feature-grid { grid-template-columns: minmax(0,1fr); }}


.bullets { margin-top:22px; display:grid; gap:12px; }
.bullets li { display:flex; gap:11px; align-items:flex-start; font-size:.93rem; color: var(--text-muted); }
.bullets .ic { color: var(--lime); font-size:1.05rem; margin-top:2px; flex:none; }
.bullets b { color: var(--text-primary); font-weight:600; }

.cta-row { margin-top:20px; display:flex; flex-wrap:wrap; gap:10px; }
.meta {
  margin-top:20px; display:flex; flex-wrap:wrap; gap:6px 15px;
  font-family: var(--mono); font-size:.56rem; letter-spacing:.16em;
  text-transform:uppercase; color: var(--text-faint);
}
.meta span { display:inline-flex; align-items:center; gap:8px; }
.meta span + span::before { content:''; width:3px; height:3px; border-radius:50%; background: currentColor; }

/* ============================================================================
   KAHRAMAN — gerçek kort fotoğrafı
   ============================================================================ */

.hero { position: relative; min-height: clamp(700px, 104svh, 1100px); display:grid; align-content:start; overflow:hidden; padding-top: clamp(54px, 7svh, 84px); }
.hero-bg { position:absolute; inset:0; z-index:0; }
/* Alan derinliği: arka plan yumuşak, ön plan keskin. Ölçek 1.06 —
   bulanıklığın kenarda saydam bant bırakmaması için. */
.hero-bg img {
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter: saturate(1.06) contrast(1.04); transform: scale(1.02);
}
/* Fotoğraf üstünde metin okunmalı: ölçülü karartma + alta doğru zemine bağlanma */
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background:
    /* okunurluk için ölçülü karartma — toplam %8–18 arası */
    linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.04) 34%, rgba(0,0,0,.14) 72%, rgba(0,0,0,.18) 88%),
    /* alt-merkezde biraz daha güçlü: cihazların oturduğu yer */
    radial-gradient(60% 42% at 50% 88%, rgba(0,0,0,.16), rgba(0,0,0,0) 70%),
    /* zemine bağlanma — dikiş olmasın */
    linear-gradient(to bottom, rgba(19,31,39,0) 86%, var(--bg-base) 100%);
}
/* Cihazın arkasındaki perde — fotoğraf tam orada söner, cihaz ayrışır */
.hero-veil {
  position:absolute; left:50%; bottom:-6%; transform:translateX(-50%);
  width:min(560px, 74vw); height:58%; z-index:1; pointer-events:none;
  background: radial-gradient(48% 56% at 50% 68%, rgba(0,0,0,.42), rgba(0,0,0,0) 72%);
}
.hero .wrap { position:relative; z-index:2; text-align:center; display:grid; justify-items:center; padding-top: 54px; }

.h-hero {
  font-family: var(--display);
  font-weight:800; font-size: clamp(2.1rem, 4.6vw, 4.2rem);
  line-height:1.0; letter-spacing:-.048em; text-wrap: balance;
  margin-top:18px; max-width:20ch;
  text-shadow: 0 2px 22px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
}
.h-hero .mark { color: var(--lime); }
.hero .lead { margin-top:12px; margin-inline:auto; text-align:center; max-width:50ch; color:#D2DAE2; text-shadow:0 1px 12px rgba(0,0,0,.65); }
.hero .cta-row { justify-content:center; }
.hero .meta {
  color:#C2CBD5; padding:7px 14px; border-radius:var(--r-pill);
  background: rgba(19,31,39,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@media (max-width: 620px) {
  .hero .cta-row { flex-direction:column; align-items:stretch; width:100%; max-width:320px; margin-inline:auto; }
  .hero .cta-row .btn { width:100%; }
  .hero .meta { justify-content:center; }}


.hero-device { margin-top: clamp(14px, 1.8vw, 26px); display:grid; justify-items:center; }
.scroll-cue {
  margin-top:22px; font-family: var(--mono); font-size:.54rem;
  letter-spacing:.2em; text-transform:uppercase; color: var(--text-faint);
  display:inline-flex; align-items:center; gap:8px;
}
.scroll-cue::after { content:''; width:1px; height:22px; background:linear-gradient(var(--lime), transparent); }

/* ============================================================================
   TELEFON — içinde GERÇEK uygulama ekranı
   ============================================================================ */

/* Üç telefon: ortadaki önde ve büyük, yandakiler geride ve hafif dönük.
   Derinlik ölçek + Y kayması + perspektif dönüşle kuruluyor. */
.phone-trio {
  display:grid; grid-template-columns:auto auto auto;
  align-items:end; justify-items:center;
  gap: clamp(-56px, -4vw, -18px);
  perspective: 1600px;
}
.phone-trio .side { --ph: clamp(300px, 46svh, 500px); z-index:1; opacity:.92; }
.phone-trio .side.left  { transform: translateX(14%) translateY(-4%) rotateY(16deg) scale(.96); transform-origin:right center; }
.phone-trio .side.right { transform: translateX(-14%) translateY(-4%) rotateY(-16deg) scale(.96); transform-origin:left center; }
.phone-trio .lead { z-index:2; }

@media (max-width: 900px) {
  .phone-trio { grid-template-columns:auto; }
  .phone-trio .side { display:none; }}


.phone {
  --ph: clamp(380px, 58svh, 640px);
  width: calc(var(--ph) * .462); height: var(--ph);
  border-radius: calc(var(--ph) * .072);
  background: linear-gradient(158deg, #3A4450, #141A21 46%, #0A0E12);
  padding: calc(var(--ph) * .0125);
  position: relative;
  box-shadow:
    0 2px 0 rgba(255,255,255,.18) inset,          /* üst kenar ışığı */
    0 0 0 1px rgba(255,255,255,.22),              /* gövde konturu */
    0 6px 16px rgba(8,14,20,.55),                 /* yakın ve sert */
    0 44px 96px -26px rgba(8,14,20,.85);          /* uzak ve yumuşak */
}
.phone img { width:100%; height:100%; object-fit:cover; border-radius: calc(var(--ph) * .06); }
.phone::before {
  content:''; position:absolute; top: calc(var(--ph)*.0125); left:50%; transform:translateX(-50%);
  width:30%; height: calc(var(--ph)*.026); background:#000; border-radius:999px; z-index:3;
}
.phone-tag {
  display:block; margin-top:16px; text-align:center;
  font-family: var(--mono); font-size:.5rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--text-faint); white-space:nowrap;
}

/* ============================================================================
   FOTOĞRAFLI GÖRSEL BLOKLARI
   ============================================================================ */

.shot {
  position:relative; border-radius: var(--r-card); overflow:hidden;
  border:1px solid var(--line);
  background: var(--bg-elevated);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset;
}
/* Cam bölme profilleri — kortun duvar ritmi */
.shot::before {
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(237,239,232,.13) 0 1px, transparent 1px) 0 0 / 25% 100% repeat-x,
    linear-gradient(180deg, rgba(237,239,232,.14), rgba(237,239,232,0) 42%);
}
.shot img { width:100%; height:100%; object-fit:cover; aspect-ratio: 9/16; }
.shot.wide img { aspect-ratio: 16/10; }
.shot::after { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(19,31,39,.72), rgba(19,31,39,0) 52%); }
.shot-cap {
  position:absolute; left:16px; right:16px; bottom:14px; z-index:2;
  font-family: var(--mono); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; color:#CBD4DD;
}

/* Fotoğraf + panel yan yana */
.art-pair { display:grid; grid-template-columns: minmax(0,.62fr) minmax(0,1fr); gap:16px; align-items:stretch; }
@media (max-width: 620px) { .art-pair { grid-template-columns: minmax(0,1fr); }}


/* ============================================================================
   PANELLER — uygulamanın gerçek bileşen dili
   ============================================================================ */

.panel {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-inset);
  display: grid; gap: var(--sp-md); align-content: start;
}
/* applyCardHairline() — kartın ÜST kenarında textPrimary @ %10, uçlarda söner.
   Koyu temada yükseltiyi taşıyan şey bu; gölge DEĞİL (Elevation.card ölü token). */
.panel::before {
  content:''; position:absolute; inset:0 0 auto 0; height:1px; pointer-events:none;
  background: linear-gradient(90deg,
    rgba(237,239,232,0) 0%, rgba(237,239,232,.10) 18%,
    rgba(237,239,232,.10) 82%, rgba(237,239,232,0) 100%);
}
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.panel-title { font-family: var(--display); font-weight:700; letter-spacing:-.02em; font-size:1rem; display:flex; align-items:center; gap:9px; }
.panel-title .ic { color: var(--lime); font-size:1.05rem; }
/* Font.label = semibold 11 + UPPERCASE + kern 0.6 (≈.055em), textMuted.
   Önceki sürümde mono + .16em idi; app'te bu preset SANS. */
.lbl { font-family: var(--sans); font-weight:600; font-size:11px; letter-spacing:.055em; text-transform:uppercase; color: var(--text-muted); }
/* Font.dataLabel = mono 11 medium — SÜRE · KAYNAK gibi teknik etiket */
.data-lbl { font-family: var(--mono); font-weight:500; font-size:11px; letter-spacing:.02em; text-transform:uppercase; color: var(--text-faint); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.card { background: var(--bg-elevated2); border:1px solid var(--line); border-radius: var(--r-card-tight); padding: var(--sp-md) var(--sp-lg); display:grid; gap:var(--sp-sm); }
.card.court { background: linear-gradient(150deg, #1D3646, #16262F); border-color: rgba(160,205,225,.16); }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; }

.score-row { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:.96rem; }
.score-row .who { font-weight:600; letter-spacing:-.01em; }
.score-row.off .who { color: var(--text-muted); font-weight:400; }
.sets { display:flex; gap:10px; }
.sets b { font-family: var(--mono); font-weight:500; font-variant-numeric:tabular-nums; min-width:1.2ch; text-align:right; font-size:1.02rem; }
.sets .l { color: var(--text-faint); }

.gamebox { display:flex; justify-content:center; padding:8px 0 2px; }
.gamebox .n { font-family: var(--sans); font-weight:600; font-variant-numeric: tabular-nums; letter-spacing:-.06em; font-size: clamp(2rem,3.8vw,2.9rem); line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; }

.keys { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.key { border-radius:var(--r-button); padding:14px 0; text-align:center; font-family:var(--sans); font-weight:600; font-size:1rem; background: var(--bg-elevated2); border:1px solid var(--line); transition: background .2s var(--e-out), color .2s var(--e-out), border-color .2s var(--e-out); }
.key.hit { background: var(--lime); color: var(--on-lime); border-color:transparent; }

.run { display:inline-flex; gap:4px; }
.run i { width:9px; height:9px; border-radius:var(--r-pill); background: var(--line-soft); }
.run i[data-r="w"] { background: var(--win); }
.run i[data-r="l"] { background: var(--loss); }

.tier-top { display:flex; align-items:baseline; gap:14px; }
.tier-top .big { font-family: var(--mono); font-weight:300; letter-spacing:-.06em; font-size: clamp(2.4rem,4.6vw,3.4rem); line-height:1; color: var(--lime); }
.bar { height:8px; border-radius:var(--r-small); background: rgba(201,228,78,.2); overflow:hidden; }
.bar i { display:block; height:100%; width:0; background: var(--lime); border-radius:var(--r-small); transition: width 1.3s var(--e-out); }
.in .bar i { width: var(--w,60%); }
.spark { display:flex; align-items:flex-end; gap:6px; height:78px; }
.spark i { flex:1; border-radius:var(--r-small) var(--r-small) 0 0; background: var(--line-soft); height:12%; transition:height 1s var(--e-out); }
.in .spark i { height: var(--h,40%); }
.spark i.on { background: var(--lime); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.rounds { display:grid; gap:7px; }
.round { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--sp-md); align-items:center; padding:var(--sp-md) var(--sp-md); border-radius:var(--r-card-tight); background: var(--bg-elevated2); border:1px solid var(--line); }
.round[data-now] { border-color: rgba(201,228,78,.4); background: linear-gradient(90deg, rgba(201,228,78,.1), transparent 62%); }
.round .rd { font-family: var(--mono); font-size:.62rem; letter-spacing:.12em; color: var(--text-faint); }
.round .pair { font-size:.9rem; display:flex; gap:8px; align-items:center; min-width:0; }
.round .pair span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.round .vs { color: var(--text-faint); font-family: var(--mono); font-size:.62rem; }
.round .res { font-family: var(--mono); font-size:.84rem; font-variant-numeric:tabular-nums; }
.round[data-now] .res { color: var(--lime); font-size:.6rem; letter-spacing:.12em; }

.roster { display:grid; gap:7px; }
.person { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--sp-md); align-items:center; padding:10px var(--sp-md); border-radius:var(--r-card-tight); background: var(--bg-elevated2); border:1px solid var(--line); }
.av { width:32px; height:32px; border-radius: var(--r-pill); display:grid; place-items:center; font-family: var(--mono); font-size:.62rem; background:#2A3541; color: var(--text-muted); border:1px solid var(--line); }
.person[data-s="in"] .av { background: rgba(67,198,165,.16); color: var(--win); border-color: rgba(67,198,165,.34); }
.person[data-s="reserve"] .av { background: rgba(226,194,117,.15); color: var(--gold); border-color: rgba(226,194,117,.3); }
.person .nm { font-size:.92rem; }
.person .st { font-family: var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color: var(--text-faint); }
.person[data-s="in"] .st { color: var(--win); }
.person[data-s="reserve"] .st { color: var(--gold); }

.scrub { display:flex; align-items:center; gap:10px; }
.scrub .bar { flex:1; }

/* ============================================================================
   RAKAMLAR
   ============================================================================ */

.statement { text-align:center; display:grid; justify-items:center; }
.statement .h-sec {
  font-family: var(--display); font-size: clamp(1.9rem,3.9vw,3.5rem); max-width:19ch; }
.statement .lead { margin-inline:auto; text-align:center; }
.figures {
  margin-top: clamp(36px,5vw,60px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background: var(--line); border:1px solid var(--line); border-radius: var(--r-card); overflow:hidden; width:100%;
}
.figures div { background: var(--bg-elevated); padding: clamp(22px,3vw,36px) 18px; display:grid; gap:9px; justify-items:center; }
.figures b { font-family: var(--mono); font-weight:300; letter-spacing:-.05em; font-size: clamp(2rem,4.4vw,3.2rem); line-height:1; font-variant-numeric:tabular-nums; }
.figures span { font-family: var(--mono); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color: var(--text-faint); text-align:center; }
@media (max-width: 640px) { .figures { grid-template-columns:1fr; }}


/* ============================================================================
   KAPANIŞ
   ============================================================================ */

.closer { position:relative; border-radius: var(--r-card); overflow:hidden; border:1px solid var(--line); }
.closer img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.closer::after { content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(to right, rgba(19,31,39,.94), rgba(19,31,39,.72) 62%, rgba(19,31,39,.5)); }
.closer .inner { position:relative; z-index:2; padding: clamp(40px,6vw,80px) clamp(24px,4vw,64px); display:grid; justify-items:start; max-width:44ch; }

/* ============================================================================
   ALT BİLGİ
   ============================================================================ */

.foot { border-top:1px solid var(--line); padding:44px 0 64px; background: var(--bg-elevated); }
.foot .wrap { display:grid; gap:26px; }
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px; }
.foot-brand { display:grid; gap:10px; align-content:start; }
.foot-col { display:grid; gap:9px; align-content:start; }
.foot-col h2 { font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.055em; text-transform:uppercase; color:var(--text-muted); }
.foot-col a { font-size:.88rem; color:var(--text-faint); }
.foot-col a:hover { color:var(--text-primary); }
@media (max-width: 760px) { .foot-grid { grid-template-columns:1fr 1fr; gap:24px; } .foot-brand { grid-column:1 / -1; }}

.foot p { color: var(--text-faint); font-size:.86rem; }

/* Giriş animasyonlarını tamamlanmış say. Üretimde bu niteliği HİÇBİR ŞEY
   kurmuyor — yalnız ekran görüntüsü düzeneği kuruyor, çünkü kare yarım
   opaklıkta yakalanınca tasarım yanlış değerlendiriliyor. Kaydırmayı
   enjekte etmek ise headless'ta rAF zincirini kilitliyor ve kare simsiyah
   çıkıyor; o yüzden görüntü alırken kaydırma değil bu kullanılıyor. */
:root[data-preview] [data-in] { opacity:1 !important; transform:none !important; transition:none !important; }

[data-in] { opacity:0; transform: translateY(20px); transition: opacity .85s var(--e-out), transform .85s var(--e-out); transition-delay: var(--d,0ms); }
[data-in].in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-in] { opacity:1; transform:none; }
}

/* ==========================================================================
   SATIR İÇİ STİLLERDEN DÖNÜŞTÜRÜLEN YARDIMCI SINIFLAR

   CSP `style-src 'self'` satır içi style niteliğini BLOKLAR, bu yüzden
   prototipteki her `style="..."` buraya taşındı. Değerler birebir aynı.

   NOT: sınıf adları HTML'e yazılmış ama bu tanımlar bir süre EKSİK kaldı;
   sonuç sessizdi — stil yok sayılıyor, sayfa "çalışıyor" ama ilerleme
   çubukları boş, kazanma rengi kayıp görünüyordu. Sınıf adı üretirken
   tanımını da yazmak tek adım olmalı.
   ========================================================================== */
.jc      { justify-items: center; }
.m0      { margin: 0; }
.c-win   { color: var(--win); }
.c-faint { color: var(--text-faint); }
.fs76    { font-size: .76rem; }
.fs84    { font-size: .84rem; }
.fs86    { font-size: .86rem; }
.w100    { --w: 100%; }
.w75     { --w:  75%; }
.w64     { --w:  64%; }
.p64     { --p:  64%; }

/* --- Alt bilgi kuşağı ve dil seçici --------------------------------------
   Prototipte yoktu: orada bu şeridin yerinde tek satırlık kredi metni vardı.
   Ölçüler styles.css'teki .footer-bottom / .lang ile eşitlendi, çünkü
   ziyaretçi landing ile hukuki sayfalar arasında gidip geliyor ve seçicinin
   iki yerde farklı görünmesi için bir sebep yok. */
.foot-bottom {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--text-faint);
}
.lang { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lang select {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--text-primary);
  background: var(--bg-elevated2);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: 6px 9px;
  cursor: pointer;
  max-width: 200px;
}

/* GİRİŞ GECİKMELERİ — satır içi style="--d:70ms" yerine sınıf.
   CSP `style-src 'self'` satır içi style niteliğini BLOKLAR; projede bu
   disiplin zaten kurulmuştu (bkz. _headers). Değerler prototiptekiyle aynı. */
.d70 { --d: 70ms; }
.d120 { --d: 120ms; }
.d140 { --d: 140ms; }
.d210 { --d: 210ms; }
.d280 { --d: 280ms; }
.d350 { --d: 350ms; }
.d420 { --d: 420ms; }