/* 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; iki 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). */

.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 {
  padding: 4px 12px;
  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);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--separator);
  background: var(--surface);
  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: rgba(255, 255, 255, 0.25);
  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;
}

.store-badge.is-soon { cursor: default; }
.store-badge.is-soon .store-glyph { opacity: 0.55; }
.store-badge.is-soon .store-note { color: var(--ball); }

/* ---------- Bekleme listesi ---------- */
/* Hero'da rozetlerin altında yalnızca küçük bir metin bağlantısı durur
   (.store-under); form kendi sayfasında (/waitlist/). Gönderim sonrası
   .waitlist-row ve etiket gizlenir, .waitlist-ok görünür (waitlist.js).
   JS kapalıyken servis /waitlist/?joined=1#waitlist-ok'a yönlendirir;
   :target kuralı mesajı JS'siz de gösterir. */

.store-under {
  margin: var(--s2) 0 0;
  font-size: 14.5px;
}

.store-under a {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.store-under a:hover { color: var(--text); }

.waitlist {
  margin-top: var(--s3);
  max-width: 460px;
}

.waitlist-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-2);
  margin: 0 0 var(--s1);
}

.waitlist-row {
  display: flex;
  gap: var(--s1);
  flex-wrap: wrap;
}

.waitlist input[type='email'] {
  flex: 1;
  min-width: 200px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--separator);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
}

.waitlist input[type='email']::placeholder { color: var(--text-3); }

.waitlist input[type='email']:focus {
  outline: 2px solid var(--ball);
  outline-offset: 1px;
  border-color: transparent;
}

/* Honeypot alanı ekran dışına: display:none değil, bazı botlar onu atlıyor */
.wl-hp { position: absolute; left: -9999px; }

.waitlist-msg { margin: var(--s1) 0 0; font-size: 15px; }
.waitlist-ok { color: var(--ball); font-weight: 600; }
.waitlist-err { color: #ff8f8f; }
.waitlist-err a { color: inherit; text-decoration: underline; }

/* JS'siz gönderim sonrası başarı mesajı (hidden'ı ezer) */
.waitlist-msg:target { display: block; }

.waitlist-note {
  margin: var(--s1) 0 0;
  font-size: 12.5px;
  color: var(--text-3);
}

.waitlist-note a { color: var(--text-3); text-decoration: underline; }

/* ---------- 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 {
  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); }

.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);
}

.serve-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ball);
  box-shadow: 0 0 8px rgba(201, 229, 65, 0.7);
}

.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);
}

/* 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; }
  .site-header .container { flex-wrap: wrap; row-gap: var(--s1); padding-block: 10px; }
  .site-nav { gap: var(--s2); font-size: 14px; white-space: nowrap; }
  /* 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; }
  .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; }
}

/* Servis topu sayı aralarında hafifçe nefes alır */
.hero .serve-dot { animation: serve-pulse 2.4s var(--ease) infinite; }

@keyframes serve-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(201, 229, 65, 0.7); transform: scale(1); }
  50%      { box-shadow: 0 0 16px rgba(201, 229, 65, 1); transform: scale(1.18); }
}

/* ---------- Ö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;
}

.phone--land .phone-screen {
  aspect-ratio: 2 / 1;
  border-radius: 24px;
}

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

/* 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: 14px;
  padding: 9px 12px 2px 32px; /* solda kamera noktasına yer */
}

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

.stat-block b {
  font-size: 8.5px;
  letter-spacing: 1.2px;
  color: var(--text-3);
}

.screen-icons { margin-left: auto; display: flex; gap: 7px; }

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

/* Servis satırı — yalnızca servisteki takımın panelinde */
.score-server {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-top: 2px;
}

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

.act {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.6px;
  line-height: 1;
  padding: 7px 0;
  border-radius: 8px;
  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: 8px;
  min-height: 0;
  padding: 5px 10px 10px;
}

.score-row .score-half {
  gap: 1px;
  border-radius: 14px;
  border: 1px solid transparent;
  padding: 6px 4px 8px;
}

/* Servisteki takımın paneli uygulamadaki gibi parlak çerçeveli */
.score-row .score-half.us {
  background: linear-gradient(160deg, rgba(79, 180, 255, 0.12), rgba(79, 180, 255, 0.03));
  border-color: rgba(79, 180, 255, 0.6);
  animation: panel-us 12s infinite;
}

.score-row .score-half.them {
  background: linear-gradient(160deg, rgba(201, 229, 65, 0.1), rgba(201, 229, 65, 0.03));
  border-color: rgba(201, 229, 65, 0.22);
  animation: panel-them 12s infinite;
}

/* Skor değiştiği anda o takımın paneli parlar — kumandadaki basışın
   ekrandaki karşılığı gözle izlenebilsin diye (basış ~%1.2 önce dibe vurur) */
@keyframes panel-us {
  0%, 16%   { box-shadow: none; }
  18%       { box-shadow: 0 0 26px rgba(79, 180, 255, 0.55); }
  22.5%     { box-shadow: none; }
  49.3%     { box-shadow: none; }
  51.3%     { box-shadow: 0 0 26px rgba(79, 180, 255, 0.55); }
  55.5%     { box-shadow: none; }
  66%       { box-shadow: none; }
  68%       { box-shadow: 0 0 26px rgba(79, 180, 255, 0.55); }
  72%, 100% { box-shadow: none; }
}

@keyframes panel-them {
  0%, 32.6%   { box-shadow: none; }
  34.6%       { box-shadow: 0 0 26px rgba(201, 229, 65, 0.5); }
  39%         { box-shadow: none; }
  82.6%       { box-shadow: none; }
  84.6%       { box-shadow: 0 0 26px rgba(201, 229, 65, 0.5); }
  89%, 100%   { box-shadow: none; }
}

/* 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 */
.phone--land .score-points { font-size: 44px; letter-spacing: -1px; }

.phone--land .score-half .score-points {
  color: #fff;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.25);
}

.phone--land .score-team { font-size: 11px; letter-spacing: 1px; }

.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); }
}

@media (max-width: 760px) {
  .hero-stage { padding: 18px 14px 118px; }
  .phone--land .score-points { font-size: 40px; }
  .screen-top { padding-left: 32px; }
  .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. */

.tv-hero-screen {
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 9;
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
}

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

.tv-hero-screen .score-points { font-size: 52px; letter-spacing: -1px; }

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

.tv-hero-screen .score-team { font-size: 11px; letter-spacing: 1px; }
.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);
}

@media (max-width: 760px) {
  /* Menüde beşinci bağlantıyla dar ekran taşıyor: yazı biraz küçülür ve
     gerekirse ikinci satıra sarar (white-space üstteki blokta nowrap idi). */
  .site-nav {
    gap: 6px 14px;
    font-size: 13.5px;
    white-space: normal;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .tv-hero-screen .score-points { font-size: 40px; }
}