/* Skor Tabelası — skortabelasi.com
   Renk/radius/spacing token'ları uygulamanın app/src/theme.js dosyasıyla birebir.
   Tipografi: Space Grotesk (başlıklar) + Inter (metin), siteye gömülü woff2 —
   dış servis çağrısı yok. latin-ext Türkçe ş/ğ/İ için şart. */

/* ---------- Fontlar ---------- */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Token'lar ---------- */

:root {
  --bg: #0A1832;
  --surface: #152547;
  --surface-alt: #1D3059;
  --separator: rgba(255, 255, 255, 0.09);
  --fill: rgba(255, 255, 255, 0.07);
  --blue: #1E9BF0;
  --blue-light: #5CC8FF;
  --blue-dark: #0B6FD4;
  --ball: #C9E541;
  --us: #4FB4FF;
  --them: #C9E541;
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, 0.58);
  --text-3: rgba(255, 255, 255, 0.34);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s6: 48px;
  --s8: 64px;

  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

::selection { background: var(--ball); color: #0A1832; }

a { color: var(--blue-light); text-decoration: none; }
a:hover { text-decoration: underline; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ball);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

h1, h2, h3, h4 { font-family: var(--font-display); }

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--s3);
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--separator);
  background: rgba(8, 20, 42, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.3px;
  color: var(--text);
}
.brand:hover { text-decoration: none; }

.brand img {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), var(--shadow-sm);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 15px;
  font-weight: 600;
}

.site-nav > a {
  color: var(--text-2);
  padding: 2px 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color 0.25s var(--ease), background-size 0.25s var(--ease);
}
.site-nav > a:hover { color: var(--text); text-decoration: none; background-size: 100% 1.5px; }
.site-nav > a[aria-current="page"] { color: var(--text); background-size: 100% 1.5px; }

/* Dil değiştirici — segmented control. Her sayfada menünün sonunda; DÖRT dil de
   görünür durur ki ziyaretçi hangi dilde olduğunu ve karşılığın var olduğunu
   görsün. Aktif dil aria-current="true" ile işaretli (stil buradan bağlanır).

   Açılır menü (<details>) bilerek TERCİH EDİLMEDİ: alternatifleri bir tıkın
   arkasına saklıyor ve Chrome'un shadow-DOM'u yüzünden aynı markup'tan
   masaüstünde düz hap çizilemiyor — iki ayrı DOM gerekirdi, ekran okuyucu da
   iki ayrı dil listesi görürdü. */

/* Dar ekranda dil hapını kendi satırına iten görünmez ayraç (bkz. @media).
   Geniş ekranda hiç yok. */
.nav-break { display: none; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.lang-switch a {
  /* Dört dilde yatay dolgu daraltıldı: 4 × (2ch + 24px) menüyle birlikte
     360px'e sığmıyordu. 2ch etiketler için 9px yeterli dokunma alanı bırakır
     (yükseklik line-height'tan geliyor). */
  padding: 4px 9px;
  border-radius: var(--r-pill);
  color: var(--text-3);
  line-height: 1.5;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.lang-switch a:hover { color: var(--text); text-decoration: none; background: var(--fill); }
.lang-switch a[aria-current="true"] {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  color: #fff;
  box-shadow: 0 2px 8px rgba(30, 155, 240, 0.4);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: var(--s8) 0;
  background:
    /* projektör: üst-soldan güçlü mavi ışık */
    radial-gradient(ellipse 75% 60% at 22% 0%, rgba(30, 155, 240, 0.30), transparent),
    /* alt-sağda hafif lime yansıma */
    radial-gradient(ellipse 50% 40% at 90% 100%, rgba(201, 229, 65, 0.10), transparent),
    /* zemin: gövdeden ayrışan koyu degrade (.band diliyle akraba) */
    linear-gradient(160deg, #0B2447, #041226);
  overflow: hidden;
}

/* Kort çizgisi dokusu — mağaza öne çıkan görselindeki dil. Ayrı katman olarak
   duruyor ki opaklığı içeriği etkilemeden ayarlanabilsin; alt kenara doğru
   silinerek bir sonraki bölüme yumuşak geçiyor. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/court.svg") center bottom / cover no-repeat;
  opacity: 0.65;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  pointer-events: none;
}

/* Alt kenar: sonraki bölüme keskin geçiş — .band::after ile aynı lime çizgi dili. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--ball) 18%, var(--ball) 82%, transparent);
}

.hero .container {
  position: relative; /* kort dokusu katmanının üstünde kalsın */
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s6);
  align-items: center;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  font-weight: 700;
  margin: 0 0 var(--s2);
}

/* Vurgu: renkli metin yerine kalın lime alt çizgi — metin beyaz kalır. */
.hero h1 em {
  font-style: normal;
  color: var(--text);
  background-image: linear-gradient(90deg, var(--ball), #9ec32c);
  background-size: 100% 0.14em;
  background-position: 0 94%;
  background-repeat: no-repeat;
  padding-bottom: 0.06em;
}

.hero .lead {
  font-size: 20px;
  color: var(--text-2);
  margin: 0 0 var(--s4);
  max-width: 34ch;
}

/* Mağaza rozetleri — solda mağaza glifi (inline SVG), sağda iki satır metin */

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: flex-start;
}

/* Resmî store rozeti görünümü: siyah zemin, ince beyaz çerçeve. Markup tek
   yerden üretiliyor ({{store_badges}} — tools/build.mjs storeBadges), yani
   ana sayfa, turnuva ve büyük ekran sayfalarında BİREBİR aynı rozet çıkıyor.
   Elle kopyalandığı dönemde dört dilde dört ayrı metin sızıntısı olmuştu. */
.store-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: #000;
  line-height: 1.3;
  min-width: 176px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

a.store-badge:hover {
  text-decoration: none;
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.store-glyph {
  width: 26px;
  height: 26px;
  fill: var(--text);
  opacity: 0.92;
  flex-shrink: 0;
}

.store-text { display: flex; flex-direction: column; }

.store-badge .store-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}

.store-badge .store-note {
  font-size: 11.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

/* Dar ekranda iki rozet yan yana sığmıyor ve 176px'lik min-width yüzünden
   sol yarıya sıkışıp ikinci rozet altına düşüyordu (ragged görünüm). Tam
   genişlik + ortalanmış içerik: iki rozet aynı boyda, dokunma alanı büyük. */
@media (max-width: 480px) {
  .store-badges { width: 100%; }
  .store-badge {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Rozetlerin altındaki ikincil bağlantı. Rozetlerin YANINA konmuyor:
   .store-badges flex-start hizalı, araya giren .btn rozetlerden kısa kalıp
   düzeni bozuyordu. */
.hero-more { margin: var(--s3) 0 0; }

/* ---------- Telefon mockup ---------- */
/* Bilerek CSS ile kuruldu: metni çevrilebilir olduğu için TR ve EN hero'da aynı
   maket kullanılıyor. Gerçek ekran görüntüleri .shots bölümünde (yalnızca TR —
   uygulama arayüzü o görüntülerde Türkçe). */

.phone {
  width: min(300px, 78vw);
  margin: 0 auto;
  background: linear-gradient(160deg, #0a1526, #050e1f);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 40px;
  padding: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Hero'da hafif 3B eğim; üzerine gelince düzleşir. */
.hero .phone {
  transform: perspective(1200px) rotateY(-7deg) rotateX(1.5deg);
  transition: transform 0.5s var(--ease);
}
.hero .phone:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }

.phone-screen {
  position: relative;
  background: var(--bg);
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 9 / 17;
  display: flex;
  flex-direction: column;
}

/* Dynamic Island benzeri kapsül */
.phone-screen::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 17px;
  background: #050e1f;
  border-radius: var(--r-pill);
  z-index: 2;
}

/* Ekran camı parlaması */
.phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0%, transparent 38%);
  pointer-events: none;
  z-index: 3;
}

.phone-status {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 34px 0 6px;
}

.score-half {
  position: relative; /* servis topunu konumlandırır */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.score-half + .score-half { border-top: 1px solid var(--separator); }

/* Dikey telefon maketi (kulüpler) — panel büyük, top da orantılı büyür */
.phone-screen > .score-half .serve-ball { --sb: 20px; --sb-inset: 16px; }

.score-team {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-2);
}

/* Servis topu — uygulamadaki ScoreScreen ile birebir aynı fikir: servis
   tarafını "SAĞDAN/SOLDAN" yazısı değil, panelin o yanında duran tenis topu
   anlatır. Dikiş yayları, overflow:hidden ile kırpılan iki büyük beyaz
   halkadan doğar (RN'deki BallSeams ile aynı geometri: R = 0.85d, merkezler
   -0.59d ve 1.59d). */
.serve-ball {
  --sb: 15px; /* top çapı — bağlama göre ezilir */
  --sb-inset: 6px;
  position: absolute;
  top: 50%;
  /* Temel durum soldan: maketlerdeki 40-30 skorunda oyun içi toplam puan 5,
     yani tek → uygulamanın serveSideOf kuralına göre soldan servis. Hero'nun
     son karesi de bu. */
  left: var(--sb-inset);
  width: var(--sb);
  height: var(--sb);
  border-radius: 50%;
  overflow: hidden;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 30%, #e6f292, #C9E541 55%, #9ec32c);
  box-shadow: 0 0 10px rgba(201, 229, 65, 0.5);
}

.serve-ball::before,
.serve-ball::after {
  content: "";
  position: absolute;
  top: calc(0.5 * var(--sb) - 0.85 * var(--sb));
  width: calc(1.7 * var(--sb));
  height: calc(1.7 * var(--sb));
  border-radius: 50%;
  border: max(1px, calc(0.085 * var(--sb))) solid rgba(255, 255, 255, 0.92);
}

.serve-ball::before { left: calc(-0.59 * var(--sb) - 0.85 * var(--sb)); }
.serve-ball::after { left: calc(1.59 * var(--sb) - 0.85 * var(--sb)); }

.score-points {
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
}

.score-half.us .score-points { color: var(--us); text-shadow: 0 0 34px rgba(79, 180, 255, 0.35); }
.score-half.them .score-points { color: var(--them); text-shadow: 0 0 34px rgba(201, 229, 65, 0.3); }

.score-sets {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.set-chip {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: var(--fill);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text-2);
}

.set-chip.won { background: var(--surface-alt); color: var(--text); }

/* ---------- Bölümler ---------- */

.section { padding: var(--s8) 0; }
.section + .section { border-top: 1px solid var(--separator); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ball);
  margin: 0 0 var(--s1);
}

.section h2 {
  font-size: clamp(26px, 3.5vw, 36px);
  letter-spacing: -0.6px;
  font-weight: 700;
  margin: 0 0 var(--s2);
}

.section .sub {
  color: var(--text-2);
  max-width: 60ch;
  margin: 0 0 var(--s4);
}

/* Kartlar */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s2);
}

.card {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s3);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow-md);
}

.card h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.card p {
  margin: 0;
  font-size: 15.5px;
  color: var(--text-2);
}

.card .icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  background: var(--surface-alt);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  margin-bottom: var(--s2);
}

/* Adımlar */

.steps { counter-reset: step; }

.steps .card { position: relative; padding-top: var(--s3); }

.steps .card::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: var(--s2);
  box-shadow: 0 4px 12px rgba(30, 155, 240, 0.35);
}

/* Adımların altındaki kort fotoğrafı — kurulum kolajı. Dikey (4:5) görsel;
   masaüstünde 640px'te ortalanır, mobilde kenar boşluklarına oturur. */
.court-setup {
  margin: var(--s6) auto 0;
  max-width: 640px;
}

.court-setup img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-md);
}

.court-setup figcaption {
  margin-top: var(--s2);
  text-align: center;
  font-size: 14.5px;
  color: var(--text-3);
}

/* Butonlar */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  color: #fff;
  border: none;
  box-shadow: 0 8px 22px rgba(30, 155, 240, 0.3);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
}
.btn:hover {
  text-decoration: none;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(30, 155, 240, 0.4);
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--separator);
  color: var(--text);
  box-shadow: none;
}
.btn.ghost:hover { border-color: rgba(255, 255, 255, 0.3); box-shadow: none; }

.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  border: 1px dashed rgba(201, 229, 65, 0.5);
  color: var(--ball);
  cursor: default;
  background: rgba(201, 229, 65, 0.05);
}

/* Ekipman kartı */

.product {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s4);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s4);
  box-shadow: var(--shadow-sm);
}

.product-visual {
  width: 96px;
  height: 96px;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--surface-alt), #16294e);
  border: 1px solid var(--separator);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.product h3 { margin: 0 0 6px; font-size: 20px; }
.product p { margin: 0; color: var(--text-2); font-size: 15.5px; }

/* Banner (kulüpler teaser + CTA'lar) */

.banner {
  background:
    radial-gradient(ellipse 60% 100% at 100% 0%, rgba(30, 155, 240, 0.18), transparent),
    var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  box-shadow: var(--shadow-sm);
}

.banner h3 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.3px; }
.banner p { margin: 0; color: var(--text-2); }

/* Geniş tanıtım bandı — mağaza öne çıkan görselinin sitedeki karşılığı.
   Sabit genişlikte bir görsel yerine CSS ile kuruldu: her ekran genişliğinde
   net kalır ve metni çevrilebilir. */

.band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
  background: linear-gradient(135deg, #0B2447, #041226);
  padding: var(--s8) 0;
  text-align: center;
}

.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/court.svg") center bottom / cover no-repeat;
  opacity: 0.55;
  pointer-events: none;
}

.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--ball) 18%, var(--ball) 82%, transparent);
}

.band .container { position: relative; }

.band img {
  width: 84px;
  height: 84px;
  border-radius: 18px;
  margin: 0 auto var(--s3);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04), var(--shadow-lg);
}

.band h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.6px;
  margin: 0;
}

.band h2 em { font-style: normal; color: var(--ball); display: block; }

.band p {
  color: var(--text-2);
  margin: var(--s2) auto 0;
  max-width: 52ch;
}

/* Ekran görüntüleri — her kare ince bir telefon kasasında; ortadaki öne çıkık.
   Üst bezel kalın bırakılır ve hoparlör kapsülü oraya çizilir; ekranın üstüne
   sahte çentik bindirilmez (görüntülerde içerik en tepeden başlıyor). */

.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  max-width: 780px;
  align-items: center;
}

.shots figure { margin: 0; }

.shot-frame {
  position: relative;
  background: linear-gradient(160deg, #0a1526, #050e1f);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  padding: 24px 9px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    var(--shadow-md);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.shot-frame::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
}

.shot-frame img {
  width: 100%;
  /* height: auto şart — HTML'deki height="1280" niteliği sunum ipucu olarak
     sabit yükseklik uygular; width %100'e daralınca görüntü dikeyde uzuyordu. */
  height: auto;
  border-radius: 16px;
  background: #050e1f;
}

.shots figure:hover .shot-frame {
  transform: translateY(-6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-lg);
}

/* Ortadaki kare vitrin gibi öne çıkar. scale değil, figure'ün tamamı yukarı
   kayar: scale yerleşimi etkilemediği için çerçeve kendi alt yazısının üstüne
   taşıyordu; translate'te alt yazı çerçeveyle birlikte hareket eder. */
.shots figure:nth-child(2) { transform: translateY(-14px); }
.shots figure:nth-child(2) .shot-frame {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-lg);
}

.shots figcaption {
  margin-top: var(--s2);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}

/* ---------- Düzyazı sayfaları (gizlilik) ---------- */

.prose { max-width: 72ch; }

.prose h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.7px; margin: 0 0 var(--s1); }
.prose h2 { font-size: 24px; letter-spacing: -0.4px; margin: var(--s6) 0 var(--s2); }
.prose h3 { font-size: 19px; margin: var(--s4) 0 var(--s1); }
.prose p, .prose li { color: var(--text-2); }
.prose strong { color: var(--text); }
.prose blockquote {
  margin: var(--s3) 0;
  padding: var(--s2) var(--s3);
  background: var(--surface);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: var(--shadow-sm);
}
.prose blockquote p { margin: 0; }
.prose .meta {
  color: var(--text-3);
  font-size: 14.5px;
  letter-spacing: 0.2px;
  padding: var(--s1) 0 var(--s2);
  border-bottom: 1px solid var(--separator);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s3) 0;
  font-size: 15.5px;
}

.prose th, .prose td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--separator);
  color: var(--text-2);
}

.prose tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }

.prose th {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 700;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* SSS */

.faq details {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-left: 3px solid transparent;
  border-radius: var(--r-md);
  padding: 0;
  margin-bottom: var(--s1);
  transition: border-color 0.25s var(--ease);
}

.faq details[open] { border-left-color: var(--ball); }

.faq summary {
  cursor: pointer;
  padding: var(--s2) var(--s3);
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}

.faq details[open] summary::after { transform: rotate(45deg); color: var(--ball); }

.faq details p {
  margin: 0;
  padding: 0 var(--s3) var(--s2);
  color: var(--text-2);
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  border-top: 1px solid var(--separator);
  padding: var(--s6) 0;
  font-size: 15px;
  color: var(--text-3);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 229, 65, 0.5), transparent);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3);
}

.site-footer strong { font-family: var(--font-display); color: var(--text-2); }

.site-footer a { color: var(--text-2); }

.footer-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
  .hero { padding: var(--s6) 0; }
  .hero .container { grid-template-columns: 1fr; }
  .phone { margin-top: var(--s2); }
  .hero .phone { transform: none; }
  .hero .phone:hover { transform: none; }
  .score-points { font-size: 72px; }
  .section { padding: var(--s6) 0; }
  .band { padding: var(--s6) 0; }
  .product { grid-template-columns: 1fr; text-align: center; }
  .product-visual { margin: 0 auto; }
  /* --- Dar ekran başlık düzeni — TEK yer ---
     (Beşinci menü bağlantısı gelince ikinci bir @media bloğu eklenmişti ve
     iki blok birbirini eziyordu; dört dilli değiştirici için üçüncü bir blok
     eklemek yerine hepsi burada birleştirildi.) */
  .site-header .container { flex-wrap: wrap; row-gap: var(--s1); padding-block: 10px; }
  .site-nav {
    gap: 6px 14px;
    font-size: 13.5px;
    white-space: normal;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* Ana sayfa bağlantısı dar ekranda gizli — marka logosu zaten oraya gidiyor.
     Dil değiştirici .lang-switch içinde olduğu için doğrudan çocuk seçicisi
     onu etkilemez. */
  .site-nav > a:first-child { display: none; }
  /* Dört dil + menü bağlantıları 360px'e tek satırda sığmıyor. Sarmayı şansa
     bırakmak yerine değiştirici KENDİ satırına alınır: menü bir satır, diller
     bir satır — dördü de her zaman görünür, düzen ekran genişliğine göre
     değişmez.

     Satırı .nav-break (sıfır yükseklikli, tam genişlik flex öğesi) açıyor.
     Önceden bunu .lang-switch'in kendisine verilen flex-basis:100% yapıyordu
     — ama hap'ın zemini/çerçevesi de satır boyunca uzuyor ve başlığın altında
     boş bir arama çubuğu gibi duruyordu. */
  .nav-break {
    display: block;
    flex: 0 0 100%;
    height: 0;
  }
  .brand span { display: none; } /* dar ekranda sadece logo */
  /* Üç ekran görüntüsü dar ekranda okunmuyor; yatay kaydırmaya alınıyor.
     Ortadaki büyütme kaydırmalı düzende bozuk durur — sıfırlanır. */
  .shots {
    display: flex;
    overflow-x: auto;
    gap: var(--s2);
    padding-bottom: var(--s1);
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .shots figure { flex: 0 0 62%; scroll-snap-align: center; }
  /* Kaydırmalı düzende kademeli yükseklik bozuk durur */
  .shots figure:nth-child(2) { transform: none; }
}

/* ---------- Hareketi azalt ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero .phone { transform: none; }
}

/* ====================================================================
   v6 — Canlı vitrin animasyonları
   Hero'daki telefon maketinde skor kendi kendine akar; özellik
   kartlarının emoji ikonları yerine CSS ile çizilmiş mini canlı
   mockup'lar (.card-viz) gelir. Tümü saf CSS, JS yok.
   Kural: animasyonlu her öğenin temel (animasyonsuz) durumu anlamlı ve
   görünür bir son karedir — yukarıdaki prefers-reduced-motion guard'ı
   animasyonları kapattığında içerik eksiksiz kalır. Bu yüzden yalnızca
   dekoratif katmanlar (+1 rozeti, sonar halkası) temelde gizli olabilir.
   ==================================================================== */

/* ---------- Hero: akan skor döngüsü ---------- */
/* Altı skor karesi üst üste bindirilir; her kare 12 sn'lik döngünün
   2 sn'lik diliminde görünür (negatif delay ile faz kaydırma). Sayı
   değiştiği karede küçük bir "pop" olur; değişmeyen sayı .hold ile
   pop'suz kalır. Son kare (40-30) temel durumda görünür — role="img"
   etiketindeki skorla aynı. */

.score-cycle { display: grid; place-items: center; }

.score-cycle span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: score-frame 12s infinite;
}

.score-cycle span:last-child { opacity: 1; }

.score-cycle span:nth-child(1) { animation-delay: -12s; }
.score-cycle span:nth-child(2) { animation-delay: -10s; }
.score-cycle span:nth-child(3) { animation-delay: -8s; }
.score-cycle span:nth-child(4) { animation-delay: -6s; }
.score-cycle span:nth-child(5) { animation-delay: -4s; }
.score-cycle span:nth-child(6) { animation-delay: -2s; }

.score-cycle span.hold { animation-name: score-frame-hold; }

@keyframes score-frame {
  0%     { opacity: 1; transform: scale(1.16); }
  2.5%   { opacity: 1; transform: scale(1); }
  16.6%  { opacity: 1; transform: scale(1); }
  16.67%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes score-frame-hold {
  0%, 16.6%    { opacity: 1; }
  16.67%, 100% { opacity: 0; }
}

/* ---------- Hero: servis topu sayı başına taraf değiştirir ---------- */
/* Uygulamadaki kural: oyun içi toplam puan çiftse sağdan, tekse soldan.
   Yukarıdaki altı kare için sırasıyla 0/1/2/3/4/5 puan → sağ, sol, sağ, sol,
   sağ, sol. Kayış 260 ms (= %2.17) sürer, tıpkı RN tarafındaki ballSlide.
   Kare sınırları: %16.67 / 33.33 / 50 / 66.67 / 83.33.
   Ölçüler keyframe içinde bilerek açık yazıldı — Safari'nin animasyonlu
   calc() içindeki var() çözümlemesine güvenilmiyor. */
/* Top da maketle birlikte ölçeklenir (telefon ve TV maketleri ortak) */
.score-row .serve-ball {
  --sb: 4.06cqw;
  --sb-inset: 1.88cqw;
}

/* Kayma yalnızca skoru gerçekten akan hero maketinde */
.phone--land .serve-ball { animation: serve-slide 12s var(--ease) infinite; }

@keyframes serve-slide {
  0%, 16.67% { left: calc(100% - 5.94cqw); }
  18.84%, 33.33% { left: 1.88cqw; }
  35.5%, 50% { left: calc(100% - 5.94cqw); }
  52.17%, 66.67% { left: 1.88cqw; }
  68.84%, 83.33% { left: calc(100% - 5.94cqw); }
  85.5%, 100% { left: 1.88cqw; }
}

/* ---------- Özellik kartı vitrinleri ---------- */

.card-viz {
  position: relative;
  overflow: hidden;
  height: 104px;
  margin-bottom: var(--s2);
  border-radius: var(--r-md);
  border: 1px solid var(--separator);
  background: linear-gradient(150deg, var(--surface-alt), #16294e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Kumanda: düğme periyodik basılır, yanında +1 uçar */

.viz-remote .remote-body {
  width: 54px;
  height: 78px;
  border-radius: 16px;
  background: linear-gradient(160deg, #24395f, #10203f);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  box-shadow: var(--shadow-sm);
}

.viz-remote .remote-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-light), var(--blue-dark));
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  animation: remote-press 3s infinite;
}

@keyframes remote-press {
  0%, 8%, 100% { transform: scale(1); filter: none; }
  4%           { transform: scale(0.85); filter: brightness(1.25); }
}

.viz-plus {
  position: absolute;
  left: calc(50% + 36px);
  bottom: 36px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ball);
  opacity: 0; /* dekoratif — temelde gizli kalabilir */
  animation: plus-float 3s infinite;
}

@keyframes plus-float {
  0%, 5%     { opacity: 0; transform: translateY(0); }
  12%        { opacity: 1; }
  40%, 100%  { opacity: 0; transform: translateY(-26px); }
}

/* Sesli anons: söylenen skor + ekolayzer çubukları */

.viz-voice { flex-direction: column; gap: 10px; }

.viz-phrase {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-2);
}

.eq { display: flex; align-items: flex-end; gap: 5px; height: 30px; }

.eq i {
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(to top, var(--blue-dark), var(--blue-light));
  transform-origin: bottom;
  animation: eq-bounce 1.1s ease-in-out infinite;
}

.eq i:nth-child(1) { height: 40%;  animation-delay: -0.9s; }
.eq i:nth-child(2) { height: 75%;  animation-delay: -0.7s; }
.eq i:nth-child(3) { height: 100%; animation-delay: -0.5s; }
.eq i:nth-child(4) { height: 65%;  animation-delay: -0.3s; }
.eq i:nth-child(5) { height: 45%;  animation-delay: -0.1s; }

@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.55); }
  50%      { transform: scaleY(1); }
}

/* Kurallar: rozetler sırayla lime ile aydınlanır */

.viz-rules { flex-wrap: wrap; gap: 8px; padding: 0 16px; }

.rule-chip {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--separator);
  background: var(--fill);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-2);
  animation: chip-glow 6s infinite;
}

.rule-chip:nth-child(1) { animation-delay: -6s; }
.rule-chip:nth-child(2) { animation-delay: -4.5s; }
.rule-chip:nth-child(3) { animation-delay: -3s; }
.rule-chip:nth-child(4) { animation-delay: -1.5s; }

@keyframes chip-glow {
  0%, 22%    { border-color: rgba(201, 229, 65, 0.8); color: var(--text); background: rgba(201, 229, 65, 0.12); }
  28%, 100%  { border-color: var(--separator); color: var(--text-2); background: var(--fill); }
}

/* Maç geçmişi: satırlar sırayla belirir, birlikte tazelenir */

.viz-history { flex-direction: column; gap: 6px; }

.hist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: var(--r-sm);
  background: var(--fill);
  font-variant-numeric: tabular-nums;
}

.hist-row b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

.hist-row i {
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-left: 4px;
}

.hist-row:nth-child(1) { animation: hist-in-1 9s infinite; }
.hist-row:nth-child(2) { animation: hist-in-2 9s infinite; }
.hist-row:nth-child(3) { animation: hist-in-3 9s infinite; }

@keyframes hist-in-1 {
  0%, 3%       { opacity: 0; transform: translateX(-10px); }
  9%, 86%      { opacity: 1; transform: none; }
  92%, 100%    { opacity: 0; transform: translateX(-10px); }
}

@keyframes hist-in-2 {
  0%, 9%       { opacity: 0; transform: translateX(-10px); }
  15%, 86%     { opacity: 1; transform: none; }
  92%, 100%    { opacity: 0; transform: translateX(-10px); }
}

@keyframes hist-in-3 {
  0%, 15%      { opacity: 0; transform: translateX(-10px); }
  21%, 86%     { opacity: 1; transform: none; }
  92%, 100%    { opacity: 0; transform: translateX(-10px); }
}

/* Gizlilik: kilit çevresinde sonar halkaları */

.viz-lock .lock-core {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--surface);
  border: 1px solid var(--separator);
  position: relative;
  z-index: 1;
}

.lock-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 229, 65, 0.55);
  opacity: 0; /* dekoratif — temelde gizli kalabilir */
  animation: lock-ping 3.5s ease-out infinite;
}

.lock-ring:nth-child(2) { animation-delay: 1.75s; }

@keyframes lock-ping {
  0%        { opacity: 0.9; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.1); }
}

/* Dil: TR/EN anahtarı gidip gelir, söylenen skor dille birlikte değişir.
   İlk sözcük temel durumda görünür — sayfanın kendi diliyle başlar. */

.viz-lang { flex-direction: column; gap: 10px; }

.lang-pill {
  position: relative;
  display: inline-flex;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
}

.lang-pill b {
  position: relative;
  width: 44px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: 0.6px;
  color: var(--text-2);
  z-index: 1;
}

.lang-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 44px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  animation: lang-slide 6s var(--ease) infinite;
}

@keyframes lang-slide {
  0%, 42%   { transform: none; }
  50%, 92%  { transform: translateX(44px); }
  100%      { transform: none; }
}

.lang-words { display: grid; place-items: center; height: 18px; }

.lang-words span {
  grid-area: 1 / 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  opacity: 0;
  animation: lang-word 6s infinite;
}

.lang-words span:first-child { opacity: 1; }
.lang-words span:nth-child(2) { animation-delay: -3s; }

@keyframes lang-word {
  0%, 46%   { opacity: 1; }
  54%, 96%  { opacity: 0; }
  100%      { opacity: 1; }
}

/* ---------- Kaydırmayla beliren kartlar ---------- */
/* Saf CSS scroll-driven animation; destekleyen tarayıcıda kartlar
   görünüme girerken hafifçe yukarı süzülür (satır içi sıraya göre
   kademeli). @supports dışında kalan tarayıcılar kartları normal
   görür — JS'siz güvenli fallback. animation-timeline, animation
   kısaltmasından SONRA yazılmalı (kısaltma onu sıfırlar). */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .grid > .card {
      animation: card-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
    .grid > .card:nth-child(3n + 2) { animation-range: entry 6% entry 45%; }
    .grid > .card:nth-child(3n)     { animation-range: entry 12% entry 55%; }
  }
}

@keyframes card-reveal {
  from { opacity: 0; transform: translateY(26px) scale(0.98); }
}

/* ---------- Hero: vitrin sahnesi + yatay telefon + kumanda ---------- */
/* Kompozisyon ürün çekimi gibi çerçeveli bir "sahne" kartında durur
   (.hero-stage). Telefon kortta durduğu gibi yatay; ekranda üst bilgi
   çubuğu ve takım renginde skor panelleri, önünde AB Shutter tipi
   kumanda. Kumandanın büyük (mavi) tuşu Biz'in, küçük (lime) tuşu
   Onlar'ın sayısından hemen önce basılır ve tuştan bir sinyal halkası
   yayılır — tuş renkleri skor panelleriyle eşleşik. Tüm basışlar skor
   döngüsüyle aynı 12 sn'lik çizelgede: geçişler 2/4/6/8/10 sn'de,
   basış geçişten ~0.1 sn önce dibe vurur. .phone temel sınıfı kulüpler
   sayfasında dikey kullanılıyor — yataya özgü her şey .phone--land'de. */

.hero-stage {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  /* Alt boşluk bilerek geniş: telefonun altında oyuncunun şort köşesi ve
     asılı kumandanın yaşadığı sahne bandı */
  padding: clamp(24px, 4vw, 40px) clamp(18px, 3vw, 32px) clamp(128px, 19vw, 158px);
  /* Parlak blueprint zemin: beyaz kılavuz çizgili canlı mavi — koyu sayfada
     kart bir ürün çekimi gibi öne çıkar */
  background:
    repeating-linear-gradient(0deg, rgba(190, 226, 255, 0.09) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(190, 226, 255, 0.09) 0 1px, transparent 1px 46px),
    radial-gradient(ellipse 90% 70% at 75% 0%, rgba(120, 210, 255, 0.28), transparent),
    linear-gradient(150deg, #2b6cba, #174a92 55%, #0d3068);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-lg);
}

/* Cam parlaması */
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.07), transparent 45%);
  pointer-events: none;
}

/* Sahneli hero'da iki sütun eşit — görsel daha geniş nefes alır.
   :has desteklemeyen eski tarayıcı 1.15/0.85 oranında kalır; sorun değil.
   min-width şart: özgüllüğü yüksek olduğu için sınırsız bırakılırsa dar
   ekrandaki tek sütun kuralını da ezer. */
@media (min-width: 761px) {
  .hero .container:has(.hero-stage) { grid-template-columns: 0.9fr 1.1fr; }
}

/* Telefon sağa yaslı ki solda oyuncu şeridi açık kalsın */
.phone--land {
  position: relative;
  width: min(340px, 84%);
  margin: 22px 0 0 auto;
  border-radius: 30px;
  padding: 10px;
}

/* Telefon oyuncunun önünde */
.hero-stage .phone {
  position: relative;
  z-index: 2;
}

/* Maket içi her ölçü cqw (ekran genişliğinin yüzdesi) — böylece maket dar
   ekranda küçülürken yazılar da onunla küçülür. Piksel sabitleriyle metin
   sabit kalıp panelden taşıyordu; 100cqw = tasarım genişliği 320px. */
.phone--land .phone-screen {
  container-type: inline-size;
  aspect-ratio: 2 / 1;
  border-radius: 24px;
}

/* Yatay tutuşta çentik yerine küçük delikli kamera noktası */
.phone--land .phone-screen::before {
  left: 4.38cqw;
  top: 50%;
  transform: translateY(-50%);
  width: 4.38cqw;
  height: 4.38cqw;
}

/* Ekran üst çubuğu — gerçek uygulamanın skor ekranındaki gibi:
   solda SET / OYUN sayaçları, sağda yardım ve ayar simgeleri */
.screen-top {
  display: flex;
  align-items: center;
  gap: 4.38cqw;
  padding: 2.81cqw 3.75cqw 0.63cqw 10cqw; /* solda kamera noktasına yer */
}

.stat-block {
  display: flex;
  align-items: baseline;
  gap: 1.56cqw;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.75cqw;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-block b {
  font-size: 2.66cqw;
  letter-spacing: 0.38cqw;
  color: var(--text-3);
}

.screen-icons { margin-left: auto; display: flex; gap: 2.19cqw; }

.screen-icons span {
  width: 5cqw;
  height: 5cqw;
  border-radius: 50%;
  background: var(--fill);
  color: var(--text-3);
  font-size: 2.81cqw;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Servis satırı — yalnızca servisteki takımın panelinde.
   line-height: 1 şart: 1.6 satır yüksekliği panelin dikey bütçesini aşıyordu */
.score-server {
  font-size: 2.66cqw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.25cqw;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-top: 0.63cqw;
}

/* Alt eylem çubuğu — uygulamadaki Geri Al / Bitir düğmeleri */
.screen-actions {
  display: flex;
  gap: 2.5cqw;
  padding: 0 3.13cqw 3.13cqw;
}

.act {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.97cqw;
  letter-spacing: 0.19cqw;
  line-height: 1;
  padding: 2.19cqw 0;
  border-radius: 2.5cqw;
  background: var(--fill);
  color: var(--text-3);
}

.act.primary { background: rgba(255, 255, 255, 0.92); color: #0A1832; }

/* Skor yarıları: takım renginde birer panel — uygulamadaki gibi */
.score-row {
  flex: 1;
  display: flex;
  gap: 2.5cqw;
  min-height: 0;
  padding: 1.56cqw 3.13cqw 3.13cqw;
}

.score-row .score-half {
  gap: 0.31cqw;
  border-radius: 4.38cqw;
  border: 1px solid transparent;
  padding: 1.88cqw 1.25cqw;
}

/* Panelin dikey bütçesi dar: başlık ve servis satırı tek satırlık kutulara
   sıkışır (line-height 1), aksi halde dev rakamla birlikte panelden taşarlar. */
.score-row .score-team {
  font-size: 3.44cqw;
  line-height: 1;
  letter-spacing: 0.31cqw;
}

/* 13cqw, 2/1 telefon maketinin dikey bütçesine ~5px pay bırakan en büyük
   değer — daha büyüğü başlığı ve servis satırını panelden taşırıyor. */
.score-row .score-points {
  font-size: 13cqw;
  letter-spacing: -0.31cqw;
}

/* Servisteki takımın paneli uygulamadaki gibi parlak çerçeveli.
   background KISAYOLU DEĞİL background-image kullanılıyor: yeşil parlama
   background-color'ı canlandırıyor, gradyan onun üstünde kalsın diye. */
.score-row .score-half.us {
  background-color: transparent;
  background-image: linear-gradient(160deg, rgba(79, 180, 255, 0.12), rgba(79, 180, 255, 0.03));
  border-color: rgba(79, 180, 255, 0.6);
}

.score-row .score-half.them {
  background-color: transparent;
  background-image: linear-gradient(160deg, rgba(201, 229, 65, 0.1), rgba(201, 229, 65, 0.03));
  border-color: rgba(201, 229, 65, 0.22);
}

/* Sayıyı alan takımın paneli ~1.5 sn yeşil yanar — uygulamadaki flash ile
   aynı zamanlama (90 ms gir / 850 ms bekle / 520 ms çık = %12.17) ve aynı
   renk (#30D158 @ %72). Yalnızca skoru gerçekten akan hero maketinde: TV ve
   kulüp maketleri sabit skor gösteriyor, orada parlama yalan olurdu.
   Sayı alan: kare 2/4/5 → Mavi, kare 3/6 → Yeşil. */
.phone--land .score-half.us { animation: flash-us 12s infinite; }
.phone--land .score-half.them { animation: flash-them 12s infinite; }

@keyframes flash-us {
  0%, 16.67% { background-color: transparent; }
  17.42%, 24.5% { background-color: rgba(48, 209, 88, 0.72); }
  28.83%, 50% { background-color: transparent; }
  50.75%, 57.83% { background-color: rgba(48, 209, 88, 0.72); }
  62.17%, 66.67% { background-color: transparent; }
  67.42%, 74.5% { background-color: rgba(48, 209, 88, 0.72); }
  78.83%, 100% { background-color: transparent; }
}

@keyframes flash-them {
  0%, 33.33% { background-color: transparent; }
  34.08%, 41.17% { background-color: rgba(48, 209, 88, 0.72); }
  45.5%, 83.33% { background-color: transparent; }
  84.08%, 91.17% { background-color: rgba(48, 209, 88, 0.72); }
  95.5%, 100% { background-color: transparent; }
}

/* Paneller varken dikey ayraca gerek yok */
.score-row .score-half + .score-half { border-top-width: 1px; }

/* Rakamlar gerçek uygulamadaki gibi beyaz; takım rengi başlıkta.
   Ölçüler .score-row bloğunda, cqw cinsinden — burada yalnızca renk var. */
.phone--land .score-half .score-points {
  color: #fff;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.25);
}

.phone--land .score-half.us .score-team { color: var(--us); }
.phone--land .score-half.them .score-team { color: var(--them); }

/* Low-poly oyuncu illüstrasyonu (assets/player.svg) sahnenin sol altında,
   telefonun arkasında durur. Kumanda SVG'de yok: CSS'teki .shorts-clip
   oyuncunun bel hizasına yüzde konumla oturur, böylece basış animasyonları
   ve sinyal halkaları illüstrasyonda da yaşar. */

.stage-player {
  position: absolute;
  left: 10px;
  bottom: 16px;
  height: 335px;
  aspect-ratio: 360 / 900;
  pointer-events: none;
  z-index: 1;
}

.stage-player img { width: 100%; height: 100%; }

/* Ayakların altında yumuşak zemin gölgesi */
.stage-player::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 130%;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.4), transparent 68%);
}

/* Sağ üstte padel topu */
.stage-ball {
  position: absolute;
  top: 24px;
  right: 26px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e6f292, #C9E541 55%, #9ec32c);
  box-shadow: 0 0 18px rgba(201, 229, 65, 0.45);
}

/* Kumanda referanstaki Flic gibi ön planda, telefonun altında; zeminde
   yumuşak gölgesi var */
.stage-remote {
  position: absolute;
  left: 56%;
  bottom: 14px;
  z-index: 2;
  transform: translateX(-50%) rotate(6deg);
}

.stage-remote::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 96px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45), transparent 68%);
}

.hero-remote {
  width: 74px;
  height: 118px;
  border-radius: 22px;
  background: linear-gradient(160deg, #24395f, #10203f);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
}

.hr-btn { position: relative; border-radius: 50%; }

.hr-btn--big {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, var(--blue-light), var(--blue-dark));
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: remote-big 12s infinite;
}

.hr-btn--small {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #d9ef67, #9ec32c);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: remote-small 12s infinite;
}

/* Basış anında tuştan yayılan sinyal halkası (dekoratif — temelde gizli) */
.hr-ping {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(92, 200, 255, 0.8);
  opacity: 0;
  transform: scale(0.5);
}

.hr-btn--big .hr-ping { animation: ping-big 12s infinite; }

.hr-btn--small .hr-ping {
  border-color: rgba(201, 229, 65, 0.8);
  animation: ping-small 12s infinite;
}

/* Büyük tuş: 15-0 (2 sn), 30-15 (6 sn) ve 40-15 (8 sn) geçişlerinden önce */
@keyframes remote-big {
  0%, 14.58%   { transform: none; filter: none; }
  15.83%       { transform: scale(0.82); filter: brightness(1.35); }
  17.5%        { transform: none; filter: none; }
  47.92%       { transform: none; }
  49.17%       { transform: scale(0.82); filter: brightness(1.35); }
  50.83%       { transform: none; filter: none; }
  64.58%       { transform: none; }
  65.83%       { transform: scale(0.82); filter: brightness(1.35); }
  67.5%, 100%  { transform: none; filter: none; }
}

@keyframes ping-big {
  0%, 15.83%      { opacity: 0; transform: scale(0.5); }
  16.5%           { opacity: 0.85; }
  19.5%           { opacity: 0; transform: scale(1.9); }
  19.51%, 49.17%  { opacity: 0; transform: scale(0.5); }
  49.8%           { opacity: 0.85; }
  52.8%           { opacity: 0; transform: scale(1.9); }
  52.81%, 65.83%  { opacity: 0; transform: scale(0.5); }
  66.5%           { opacity: 0.85; }
  69.5%, 100%     { opacity: 0; transform: scale(1.9); }
}

/* Küçük tuş: 15-15 (4 sn) ve 40-30 (10 sn) geçişlerinden önce */
@keyframes remote-small {
  0%, 31.25%   { transform: none; filter: none; }
  32.5%        { transform: scale(0.78); filter: brightness(1.35); }
  34.17%       { transform: none; filter: none; }
  81.25%       { transform: none; }
  82.5%        { transform: scale(0.78); filter: brightness(1.35); }
  84.17%, 100% { transform: none; filter: none; }
}

@keyframes ping-small {
  0%, 32.5%       { opacity: 0; transform: scale(0.5); }
  33.2%           { opacity: 0.85; }
  36.2%           { opacity: 0; transform: scale(2.1); }
  36.21%, 82.5%   { opacity: 0; transform: scale(0.5); }
  83.2%           { opacity: 0.85; }
  86.2%, 100%     { opacity: 0; transform: scale(2.1); }
}

/* Maket içi ölçüler cqw olduğu için burada punto ayarı YOK — ekran küçülünce
   yazılar kendiliğinden küçülür. Sabit punto kalsaydı panelden taşarlardı. */
@media (max-width: 760px) {
  .hero-stage { padding: 18px 14px 118px; }
  .stage-player { height: 240px; }
  .stage-remote { left: 58%; bottom: 10px; }
  .phone--land { margin-top: 10px; }
}

/* ====================================================================
   v6 — Kulüpler ekipman vitrini + Büyük Ekran sayfası
   Ekipman kartlarındaki cihaz görselleri bilerek CSS: gerçek ürün
   fotoğrafı yok, CSS çizim her dilde ve retina'da aynı netlikte durur;
   renk dili mevcut mockup'larla (.viz-remote, .phone) akraba.
   ==================================================================== */

/* Ekipman vitrini — 4 kart tek sırada (1040px kapsayıcıda 4×220 sığar) */

.grid.equip { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* TV: koyu kasa + iki takım rengiyle mini skor + ayak.
   .tv-set/.tv-screen kulüpler promo'sundaki .promo-tv içinde de kullanılır. */

.viz-tv { flex-direction: column; }

.tv-set {
  width: 128px;
  border-radius: 8px;
  background: linear-gradient(160deg, #0a1526, #050e1f);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 5px;
  box-shadow: var(--shadow-sm);
}

.tv-screen {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border-radius: 5px;
  padding: 6px;
}

.tv-screen b {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.7;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.tv-screen b:first-child { color: var(--us); background: rgba(79, 180, 255, 0.1); }
.tv-screen b:last-child { color: var(--them); background: rgba(201, 229, 65, 0.08); }

.tv-stand { width: 10px; height: 7px; background: #0a1526; }

.tv-base {
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: #0a1526;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tablet: yatay kasa, kamera noktası, TV'ye giden mavi uçlu HDMI kablosu */

.viz-tablet .tab-body {
  position: relative;
  width: 118px;
  height: 72px;
  border-radius: 10px;
  background: linear-gradient(160deg, #0a1526, #050e1f);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-sm);
}

/* Ekran parlaması — tablet açık ve çalışıyor hissi */
.tab-body::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 6px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.07), transparent 45%),
    linear-gradient(160deg, #0d1f3d, #081226);
}

.tab-cam {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  z-index: 1;
}

.tab-cable {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
}

.tab-cable::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--blue-light), var(--blue-dark));
}

/* Hoparlör: delikli ızgaralı gövde + mevcut ekolayzer çubukları */

.viz-speaker { gap: 14px; }

.spk-body {
  position: relative;
  width: 54px;
  height: 66px;
  border-radius: 12px;
  background: linear-gradient(160deg, #24395f, #10203f);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-sm);
}

.spk-body::before {
  content: "";
  position: absolute;
  inset: 10px 11px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1.5px);
  background-size: 7px 7px;
  background-position: center;
}

/* Kulüpler sayfası büyük ekran promo'su — .product-visual içinde mini TV */

.promo-tv {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.promo-tv .tv-set { width: 66px; padding: 3px; }
.promo-tv .tv-screen { padding: 3px 4px; gap: 3px; }
.promo-tv .tv-screen b { font-size: 12px; line-height: 1.6; }
.promo-tv .tv-stand { height: 5px; width: 7px; }
.promo-tv .tv-base { width: 32px; height: 3px; }

/* ---------- Büyük Ekran sayfası ---------- */

/* Hero görseli: gerçek kort + TV fotoğrafı için çerçeve */

.hero-photo { margin: 0; }

.hero-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-lg);
}

/* Fotoğraf gelene kadarki hero maketi: bezellii TV'de iki takım renginde
   canlı skor. Temel skor bileşenleri (.score-half/.score-points) yeniden
   kullanılır; yalnızca yan yana düzen ve ölçü burada. */

.tv-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tv-hero-frame {
  width: 100%;
  max-width: 440px;
  border-radius: 14px;
  background: linear-gradient(160deg, #0a1526, #050e1f);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-lg);
}

/* TV ekranı ana sayfadaki yatay telefonla aynı gerçek uygulama düzenini
   gösterir: üstte SET/OYUN çubuğu, takım renginde paneller, alt eylemler.
   .screen-top/.score-row/.screen-actions kuralları oradan geliyor; burada
   yalnızca TV'ye özgü ölçüler var. */

/* Telefonla aynı cqw ölçeği: TV 16/9 olduğu için dikeyde daha da bol yer var */
.tv-hero-screen {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 9;
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
}

.tv-hero-screen .screen-top { padding-left: 3.44cqw; } /* kamera deliği yok */
.tv-hero-screen .score-row { flex: 1; }

.tv-hero-screen .score-half .score-points {
  color: #fff;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.25);
}
.tv-hero-screen .score-half.us .score-team { color: var(--us); }
.tv-hero-screen .score-half.them .score-team { color: var(--them); }

.tv-hero-stand { width: 12px; height: 14px; background: #0a1526; }

.tv-hero-base {
  width: 120px;
  height: 6px;
  border-radius: 3px;
  background: #0a1526;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Yöntem kartları — 2×2 ızgara, rozetli başlık, Gerekenler + Adımlar */

.grid.methods {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start;
}

.method-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: var(--s1);
}

.method-badge--rec { background: rgba(201, 229, 65, 0.12); color: var(--ball); border: 1px solid rgba(201, 229, 65, 0.5); }
.method-badge--wire { background: rgba(30, 155, 240, 0.14); color: var(--blue-light); border: 1px solid rgba(30, 155, 240, 0.5); }
.method-badge--club { background: rgba(92, 200, 255, 0.1); color: var(--blue-light); border: 1px solid rgba(92, 200, 255, 0.45); }
.method-badge--budget { background: var(--fill); color: var(--text-2); border: 1px solid var(--separator); }

.method-label {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-3);
  margin: var(--s2) 0 var(--s1);
}

.method-needs,
.method-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.5px;
  color: var(--text-2);
}

.method-needs li,
.method-steps li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5;
}

.method-needs li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  top: 0;
  font-weight: 700;
  color: var(--ball);
}

.method-steps { counter-reset: mstep; }

.method-steps li { counter-increment: mstep; }

/* .steps .card::before'un küçüğü — aynı mavi degrade daire dili */
.method-steps li::before {
  content: counter(mstep);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.method-card .note {
  margin: var(--s2) 0 0;
  padding-top: var(--s2);
  border-top: 1px solid var(--separator);
  font-size: 14px;
  color: var(--text-3);
}

/* TV maketi de cqw ile ölçekleniyor — dar ekran için punto ayarı gerekmiyor. */

/* ---------- Turnuva sayfası ----------
   /tournament/ için eklendi. Yeni token yok, yeni renk yok — mevcut
   değişkenlerle çalışıyor. Bu blok site-v9'da YOKTU; dosya adı bu yüzden
   v10 oldu (bkz. site.config.mjs, Cloudflare 7 günlük /css/ önbelleği). */

/* Sayfa içi bölüm menüsü. Sticky DEĞİL: .site-header zaten sticky ve dar
   ekranda iki satıra sarıyor, ikinci bir yapışkan şerit yüksekliği
   öngörülemez hale getiriyordu. */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  padding: var(--s3) 0 0;
}

.page-nav a {
  display: inline-block;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--fill);
  border: 1px solid var(--separator);
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-nav a:hover {
  color: var(--text);
  border-color: rgba(201, 229, 65, 0.45);
  background: rgba(201, 229, 65, 0.08);
  text-decoration: none;
}

/* Çapa hedefi yapışkan başlığın altında kalmasın (başlık min-height 64px). */
.section[id] { scroll-margin-top: 80px; }

/* Hero'nun sağ sütunundaki tek ekran görüntüsü — .shots ızgarasına girmeden. */
.hero-shot { margin: 0; max-width: 300px; justify-self: center; }
.hero-shot .shot-frame { margin: 0; }

/* Dört adımlı akış. Çıplak .grid 280px alt sınırıyla 1040px kapta ÜÇ sütuna
   düşüyor ve dördüncü kart tek başına alt satırda kalıyordu. */
.grid.steps--4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

/* Dörtlü/beşli kare şeridi: ortadaki yükseltme kalabalıkta bozuk duruyor. */
/* .shots max-width 780px + 24px boşlukla dört kareye 177px kalıyor; alt sınır
   bunun üstünde olursa ızgara üç sütuna düşüp dördüncüyü alta atıyor. */
.shots.flat { max-width: 900px; }
.shots.flat { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.shots.flat figure:nth-child(2) { transform: none; }
.shots.flat figure:nth-child(2) .shot-frame { box-shadow: var(--shadow-md); }

/* Canlı pano karesi — geniş (16:10), telefon çerçevesi olmadan. */
.board-shot { margin: 0; }

.board-shot img {
  width: 100%;
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.board-shot figcaption {
  margin-top: var(--s2);
  color: var(--text-3);
  font-size: 14.5px;
  text-align: center;
}

/* Format kartlarındaki Bireysel/Eşli etiketi. */
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s1); }

.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(30, 155, 240, 0.12);
  border: 1px solid rgba(30, 155, 240, 0.35);
  color: var(--blue-light);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.tag.tag--pair { background: rgba(201, 229, 65, 0.1); border-color: rgba(201, 229, 65, 0.35); color: var(--ball); }

/* Sayfa sonu nötr notu (abonelik + gizlilik). */
.fineprint {
  margin: var(--s4) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--separator);
  color: var(--text-3);
  font-size: 14.5px;
  max-width: 72ch;
}

.fineprint a { color: var(--text-2); text-decoration: underline; }
.fineprint a:hover { color: var(--text); }

/* Kart içi örnek tablo (kura/puanlama/madalya) — .prose table'ın dar sürümü. */
.mini-table { overflow-x: auto; }

.mini-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

.mini-table th,
.mini-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--separator);
  text-align: left;
  white-space: nowrap;
}

.mini-table th {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
}

.mini-table td { color: var(--text-2); }
.mini-table td strong { color: var(--text); }
.mini-table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 760px) {
  /* Çip satırı sarmak yerine kaysın: on çapa dar ekranda dört satır oluyordu. */
  .page-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: var(--s1);
  }
  .page-nav a { flex: 0 0 auto; }
  /* .shots dar ekranda zaten yatay kaydırmaya geçiyor; flat sürümü de öyle. */
  .shots.flat figure { flex: 0 0 52%; }
  .hero-shot { max-width: 260px; }
}

/* ---------- Adım adım anlatım (/tournament/ #how) ----------
   Gerçek ekran görüntüsü + üzerine numaralı işaretçiler. İşaretçiler saf CSS:
   görsele hiç dokunulmuyor, konumlar yüzde olduğu için dört dilin karesinde de
   aynı yere düşüyor (yerleşim diller arasında değişmiyor, yalnız metin uzuyor). */

.walk {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s8);
}

.walk-step {
  display: grid;
  grid-template-columns: 1fr minmax(230px, 290px);
  gap: var(--s6);
  align-items: center;
}

/* Çift adımlarda görsel sola geçer. DOM sırası DEĞİŞMİYOR (önce metin, sonra
   görsel) — ekran okuyucu ve klavye sırası bozulmasın diye yalnız ızgara
   yerleşimi ters çevriliyor. Şablon da çevriliyor: yalnız grid-column takas
   edilince metin DAR sütuna düşüyor ve taşıyordu. */
.walk-step:nth-child(even) { grid-template-columns: minmax(230px, 290px) 1fr; }
.walk-step:nth-child(even) > .walk-text { grid-column: 2; grid-row: 1; }
.walk-step:nth-child(even) > .walk-figure { grid-column: 1; grid-row: 1; }

/* Canlı pano yatay: tek sütun, tam genişlik. */
.walk-step--wide { grid-template-columns: 1fr; gap: var(--s3); }
.walk-step--wide > .walk-figure { max-width: none; }

.walk-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 0 var(--s2);
  border-radius: var(--r-pill);
  background: var(--ball);
  color: #0a1832;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}

.walk-text h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.walk-text > p {
  margin: 0;
  color: var(--text-2);
  font-size: 16px;
}

.walk-points {
  list-style: none;
  margin: var(--s2) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.walk-points li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.5;
}

/* Görselin üstündeki işaretçi ile açıklamanın yanındaki rozet AYNI nesne;
   okuyucu ikisini renk ve numaradan eşleştiriyor. */
.walk-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--ball);
  color: #0a1832;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

/* width: 100% ŞART. justify-self: center kutuyu içerik genişliğine indiriyor;
   tembel görsel yüklenene kadar figür 20 px kalıyor (yalnız çerçeve dolgusu),
   yüklenince 290 px'e sıçrayıp sayfayı uzatıyor ve çapaları kaydırıyordu.
   Şimdi kutu sütunu dolduruyor, max-width sınırlıyor, otomatik kenar ortalıyor. */
.walk-figure { width: 100%; max-width: 290px; margin: 0 auto; }
.walk-figure .shot-frame { margin: 0; }

.walk-canvas { position: relative; }

/* Oran AÇIKÇA veriliyor. width/height nitelikleri tek başına yeterli olmadı:
   tembel yüklenen son adımın karesi yüklenene kadar 0 yükseklik kaplıyordu,
   yüklenince sayfa 298 px uzuyor ve sayfa içi çapalar o kadar aşağı kayıyordu. */
.walk-canvas img { aspect-ratio: 720 / 1280; }

.walk-step--wide .walk-canvas img { aspect-ratio: 1440 / 900; }

.walk-canvas .walk-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  /* Koyu halka: işaretçi hem açık hem koyu arayüz parçasının üstünde okunsun. */
  box-shadow: 0 0 0 3px rgba(10, 24, 50, 0.9), 0 4px 12px rgba(0, 0, 0, 0.55);
}

/* Yatay pano karesinde telefon çerçevesi yok, dolayısıyla .shot-frame img
   kuralı da uygulanmıyor. width/height BURADA verilmeli: yoksa görsel
   height="900" niteliğiyle 992×900 çiziliyor (dikeyde geriliyor) ve tembel
   yüklenen kutu son kutusuyla uyuşmadığı için sayfa içi çapalar kayıyor. */
.walk-step--wide .walk-canvas img {
  width: 100%;
  height: auto;
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 760px) {
  .walk { gap: var(--s6); }
  .walk-step,
  .walk-step:nth-child(even) { grid-template-columns: 1fr; gap: var(--s3); }
  .walk-step:nth-child(even) > .walk-text { grid-column: 1; grid-row: auto; }
  .walk-step:nth-child(even) > .walk-figure { grid-column: 1; grid-row: auto; }
  .walk-figure { max-width: 280px; margin-inline: 0; }
  /* Dar ekranda işaretçi küçülünce numara okunmuyor; boyut korunuyor. */
}

/* ---------- Turnuva sayfasının kort görseli ----------
   Uygulamanın Turnuvalar ekranındaki kare ile AYNI dosya (kaynak
   skortabelasi-mobile/assets/tournament/court.jpg, türevi generate-icons.mjs
   üretiyor). Site ile ürün aynı şeye benzesin diye çizgi dokusu court.svg
   yerine bu geçiyor. */

.hero--court::before,
.band--court::before {
  background-image: url("/assets/tournament/court-1600.webp");
  background-position: center bottom;
  background-size: cover;
}

/* Maske ters çevriliyor: .hero::before yukarıdan aşağı soluyor, ama bu karenin
   anlamlı yarısı (zemin, raket, top) ALTTA. Aşağıdan yukarı solunca başlığın
   oturduğu üst bölge temiz kalıyor, kort altta duruyor. */
.hero--court::before {
  opacity: 0.5;
  mask-image: linear-gradient(to top, #000 35%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%);
}

.band--court::before { opacity: 0.4; }

@media (max-width: 760px) {
  .hero--court::before,
  .band--court::before { background-image: url("/assets/tournament/court-960.webp"); }
}

/* ====================================================================
   v11 — Apple Watch
   1.3.0'la sayı girişi bileğe taşındı. Üç ekleme: hero sahnesindeki
   saat maketi, özellik kartı vitrini (.viz-watch) ve saat ekran
   görüntüsü çerçevesi (.shots--watch). Kumandaya ait hiçbir kural
   değişmedi — saat onun yerini almıyor, yanına geliyor.
   ==================================================================== */

/* ---------- Hero: bilekteki skor ---------- */
/* Sahnenin alt bandında, kumandanın solunda duran saat. Ekranındaki skor
   telefonunkiyle AYNI .score-cycle'ı kullanır: aynı 12 sn'lik çizelge, aynı
   altı kare. İki maket ayrı ayrı akarsa sahne kendi içinde çelişir.

   Saat BASILMIYOR: sahnede girişi kumanda yapıyor, saat skorun bileğe
   düştüğünü gösteriyor. Uygulamada ikisi aynı anda açık olamıyor
   (src/settings.js selectRemoteDevice) — ikisini birden basıyor çizmek
   ürünün yapmadığı bir şeyi vaat ederdi. */

/* bottom en az 26px: kordonun alt ucu gövdenin 22px altına iniyor
   (.hero-watch::after), daha aşağıda sahnenin overflow:hidden'ı kesiyor.
   left %34: oyuncu illüstrasyonu solda ~%28'e kadar geliyor, saat onun
   bacağının üstüne binmesin. */
.stage-watch {
  position: absolute;
  left: 34%;
  bottom: 26px;
  z-index: 2;
  transform: translateX(-50%) rotate(-7deg);
}

/* Zeminde yumuşak gölge — .stage-remote ile aynı dil */
.stage-watch::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 78px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45), transparent 68%);
}

.hero-watch {
  position: relative;
  width: 76px;
  height: 92px;
  border-radius: 26px;
  background: linear-gradient(155deg, #3a4459, #171d2b);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-md);
  padding: 7px;
}

/* Kordon: gövdenin altından ve üstünden çıkan iki şerit */
.hero-watch::before,
.hero-watch::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 46px;
  height: 30px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #223047, #16202f);
  z-index: -1;
}

.hero-watch::before { top: -22px; border-radius: 12px 12px 4px 4px; }
.hero-watch::after { bottom: -22px; border-radius: 4px 4px 12px 12px; }

/* Digital Crown */
.hw-crown {
  position: absolute;
  right: -4px;
  top: 26px;
  width: 5px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(90deg, #4a566d, #2a3346);
}

.hw-screen {
  width: 100%;
  height: 100%;
  border-radius: 19px;
  background: #0A1832;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
}

.hw-status {
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 0.4px;
  color: var(--text-3);
}

.hw-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
}

.hw-pts.us { color: var(--us); }
.hw-pts.them { color: var(--them); }

/* Skor bileğe düştüğü an ekran kısa süre parlar. Geçişler 2/4/6/8/10 sn'de,
   yani 12 sn'lik döngünün %16.67'nin katlarında; parlama her birinin hemen
   ARDINDAN geliyor — puanı kumanda giriyor, saat alıyor. */
.hw-screen { animation: hw-glow 12s infinite; }

@keyframes hw-glow {
  0%, 1.5%      { box-shadow: inset 0 0 12px rgba(92, 200, 255, 0.35); }
  5%            { box-shadow: inset 0 0 0 rgba(92, 200, 255, 0); }
  16.67%, 18.2% { box-shadow: inset 0 0 12px rgba(92, 200, 255, 0.35); }
  21.7%         { box-shadow: inset 0 0 0 rgba(92, 200, 255, 0); }
  33.33%, 34.9% { box-shadow: inset 0 0 12px rgba(92, 200, 255, 0.35); }
  38.3%         { box-shadow: inset 0 0 0 rgba(92, 200, 255, 0); }
  50%, 51.5%    { box-shadow: inset 0 0 12px rgba(92, 200, 255, 0.35); }
  55%           { box-shadow: inset 0 0 0 rgba(92, 200, 255, 0); }
  66.67%, 68.2% { box-shadow: inset 0 0 12px rgba(92, 200, 255, 0.35); }
  71.7%         { box-shadow: inset 0 0 0 rgba(92, 200, 255, 0); }
  83.33%, 84.9% { box-shadow: inset 0 0 12px rgba(92, 200, 255, 0.35); }
  88.3%, 100%   { box-shadow: inset 0 0 0 rgba(92, 200, 255, 0); }
}

/* Dar ekran: sahnenin alt bandı daralıyor, saat ile kumanda çakışmasın.
   Saat sola, kumanda sağa açılır; ikisi de küçülür. */
@media (max-width: 760px) {
  .stage-watch { left: 24%; bottom: 12px; transform: translateX(-50%) rotate(-7deg) scale(0.84); }
  .stage-remote { left: 62%; }
}

/* Çok dar ekranda oyuncu illüstrasyonu saatin altına giriyor: saat gizlenir,
   sahne kalabalıklaşmasın. Saat hikâyesini aşağıdaki .shots--watch taşıyor.
   Eşik bilerek düşük (400px): saat artık manşet özellik, trafiğin çoğu
   telefondan geliyor — 400-760 arası onu göstermeye değer. */
@media (max-width: 400px) {
  .stage-watch { display: none; }
  .stage-remote { left: 56%; }
}

/* ---------- Özellik kartı: saat ---------- */
/* Mini saat gövdesi, ekranında iki takım renginde puan; sağdan küçük bir
   dokunuş halkası yayılır. .viz-remote'un kardeşi. */

.viz-watch .watch-body {
  position: relative;
  width: 52px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(155deg, #3a4459, #171d2b);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-sm);
  padding: 5px;
}

.viz-watch .watch-body::before,
.viz-watch .watch-body::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 32px;
  height: 20px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #223047, #16202f);
  z-index: -1;
}

.viz-watch .watch-body::before { top: -15px; border-radius: 9px 9px 3px 3px; }
.viz-watch .watch-body::after { bottom: -15px; border-radius: 3px 3px 9px 9px; }

.viz-watch .watch-screen {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  background: #0A1832;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

.viz-watch .ws-us { color: var(--us); }
.viz-watch .ws-them { color: var(--them); }

/* Dokunuş halkası — dekoratif, temelde gizli */
.viz-watch .watch-tap {
  position: absolute;
  left: calc(50% - 12px);
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  border: 2px solid rgba(92, 200, 255, 0.75);
  opacity: 0;
  animation: watch-tap 3s infinite;
}

@keyframes watch-tap {
  0%, 8%    { opacity: 0; transform: scale(0.4); }
  14%       { opacity: 0.9; }
  42%, 100% { opacity: 0; transform: scale(1.8); }
}

/* ---------- Saat ekran görüntüsü çerçevesi ---------- */
/* .shot-frame telefon için yapılmıştı: 9:16 kare, üstte hoparlör çentiği.
   Saat karesi 368:448 ve köşeleri zaten görüntünün içinde yuvarlatılmış
   (generate-apple-watch-shots.mjs şeffaf köşe yazıyor), o yüzden çerçeve
   ince bir kasa gibi duruyor ve çentik yok. */

.shots--watch {
  grid-template-columns: repeat(4, 1fr);
  max-width: 860px;
  gap: var(--s2);
}

/* Gereklilik notu karelerden ayrılsın — alt yazıların hemen dibinde
   gövde metni gibi duruyordu. */
.shots--watch + .sub { margin-top: var(--s4); }

/* Telefon vitrinindeki "ortadaki kare öne çıkar" kuralı dörtlü dizide
   ortayı bulamıyor — düz sıra daha okunaklı. */
.shots--watch figure:nth-child(2) { transform: none; }
.shots--watch figure:nth-child(2) .shot-frame--watch {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-md);
}

.shot-frame--watch {
  padding: 10px;
  border-radius: 30px;
  background: linear-gradient(155deg, #3a4459, #171d2b);
}

.shot-frame--watch::before { display: none; }

.shot-frame--watch img { border-radius: 22px; background: transparent; }

@media (max-width: 760px) {
  .shots--watch { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
}

/* ---------- Uygulama vitrini: dörtlü dizi ---------- */
/* .shots temeli üçlü kurulmuştu (3 sütun, ortadaki kare öne çıkar). Ana ekran
   karesi eklenince dört oldu; ortası olmayan bir dizide "ikinciyi yukarı al"
   kuralı dengesiz duruyor, o yüzden düz sıraya iniyor. */

.shots--four {
  grid-template-columns: repeat(4, 1fr);
  max-width: 940px;
  gap: var(--s2);
}

.shots--four figure:nth-child(2) { transform: none; }
.shots--four figure:nth-child(2) .shot-frame {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-md);
}

/* Dört telefon karesi dar ekranda 2×2'ye iner — dörtlü sıra 760 px altında
   her kareyi okunmaz kılıyor. */
@media (max-width: 860px) {
  .shots--four { grid-template-columns: repeat(2, 1fr); max-width: 480px; }
}