/* ─────────────────────────────────────────────────────────────
   join.bestplay.ai · Bestplay Athlete

   Logo paketi 1.0 kimliği: Gece, Tebeşir, Çim, Köz; tek aile Instrument
   Sans (OFL). Font kendi sunucumuzdan, çünkü CSP yalnız 'self' izin verir.
   latin + latin-ext ayrı: ş / ğ / İ kelime ortasında sistem fontuna düşmez.
   Token değerleri bestplay-landing brand/tokens.json ile aynı.
   Köz metin rengi değildir: yalnız nokta, odak halkası ve Köz-koyu düğme.
   ───────────────────────────────────────────────────────────── */
@font-face{
  font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/instrument-sans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/instrument-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Ölçü eşlemeli yedek yüz: font gelene kadar satırlar kaymaz (bestplay-landing ile aynı değerler). */
@font-face{font-family:"Instrument Sans Fallback";font-weight:400 500;src:local(Arial),local(ArialMT),local("Liberation Sans");size-adjust:101.08%;ascent-override:95.96%;descent-override:24.73%;line-gap-override:0%;}
@font-face{font-family:"Instrument Sans Fallback";font-weight:600 700;src:local("Arial Bold"),local(Arial-BoldMT),local("Liberation Sans Bold");size-adjust:96.89%;ascent-override:100.11%;descent-override:25.8%;line-gap-override:0%;}

/* ── tokens: açık temada Tebeşir zemin, koyu temada Gece; cihazı izler ─── */
:root{
  --bg:#EDF0EA;          /* Tebeşir */
  --surface:#FFFFFF;
  --surface-2:#F6F8F4;
  --line:#CBD3C9;        /* Çizgi */
  --text:#0E2B20;        /* Gece */
  --muted:#5A665F;
  --store-bg:#0E2B20;
  --store-fg:#EDF0EA;
  --action:#D0450E;      /* Köz-koyu (G29): beyazla 4,63:1 */
  --action-hover:#C2400C;
  --on-action:#FFFFFF;
  --focus:#D9480F;       /* Köz */
  --shadow:0 1px 2px rgba(14,43,32,.06), 0 30px 60px -30px rgba(14,43,32,.35);
  --font:"Instrument Sans","Instrument Sans Fallback",system-ui,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E2B20;        /* Gece */
    --surface:#14382B;
    --surface-2:#123326;
    --line:#2C5240;
    --text:#EDF0EA;
    --muted:#9DB3A5;
    --store-bg:#EDF0EA;
    --store-fg:#0E2B20;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 30px 60px -30px rgba(0,0,0,.55);
  }
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:10px;}

/* A class-level `display` beats the UA stylesheet's [hidden] rule. */
[hidden]{display:none !important;}

/* ── shell: always exactly one screen tall, never scrolls ── */
.gate{
  height:100vh;height:100dvh;max-width:1180px;margin:0 auto;
  padding:clamp(14px,2.6vh,28px) 20px 0;
  display:flex;flex-direction:column;overflow:hidden;
}
.top{display:flex;align-items:center;flex:none;}
.logo{height:clamp(26px,3.6vh,32px);width:auto;display:block;}
.logo--dark{display:none;}
@media (prefers-color-scheme:dark){
  .logo--light{display:none;}
  .logo--dark{display:block;}
}

.stage{flex:1;min-height:0;display:flex;flex-direction:column;}
.copy{min-width:0;flex:none;}

h1{
  margin:0;font-size:clamp(28px,min(8.4vw,5vh),40px);line-height:1.06;
  font-weight:600;letter-spacing:-.03em;text-wrap:balance;
}
.lede{margin:clamp(8px,1.4vh,14px) 0 0;color:var(--muted);font-size:clamp(15px,1.9vh,16px);line-height:1.5;max-width:42ch;text-wrap:pretty;}
/* Çok kelimeli ad bölünmez (satır kuralı). */
.nb{white-space:nowrap;}
/* Başlık sonu Köz nokta (G30), metin rengi değil, ayrı işaret. */
.kz{color:var(--focus);}

/* ── desktop block: QR + stores on one row ────────────────── */
.get{display:flex;align-items:center;gap:22px;margin-top:clamp(18px,3.2vh,32px);}
.get__side{min-width:0;}
.scan{display:none;flex:none;}
/* White plate in both themes: scanners want dark modules on light. */
.scan canvas{
  display:block;width:clamp(104px,15vh,136px);height:auto;aspect-ratio:1;
  border-radius:12px;background:#fff;padding:6px;image-rendering:pixelated;
  border:1px solid var(--line);
}
.scan-note{display:none;margin:0 0 12px;font-size:15px;line-height:1.45;color:var(--muted);max-width:36ch;text-wrap:pretty;}

/* Resmi Türkçe mağaza rozetleri (bestplay-landing public/badges ile aynı). */
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.store{display:inline-block;line-height:0;border-radius:9px;transition:transform .16s ease,opacity .16s ease;}
.store:hover{transform:translateY(-1px);opacity:.92;}
.store img{display:block;}
/* Görünen yükseklik ikisinde de 44 px. Google PNG'sinin üstünde ve altında saydam boşluk var (250 px'in 29'ar px'i):
   resim o oranda büyür, boşluk negatif kenar boşluğuyla kutunun dışına taşar; dosya kırpılmaz (landing StoreBadges ile aynı). */
.store .b-apple{width:166.42px;height:44px;}
.store .b-play{width:148.04px;height:57.29px;margin:-6.65px 0;}

/* ── what happens after the store ─────────────────────────── */
.after{
  list-style:none;counter-reset:s;margin:clamp(16px,3vh,30px) 0 0;padding:0;
  display:grid;gap:clamp(8px,1.4vh,14px);max-width:460px;
}
.after li{
  counter-increment:s;position:relative;padding-left:38px;
  font-size:14.5px;line-height:1.4;color:var(--muted);text-wrap:pretty;
}
.after li::before{
  content:counter(s);position:absolute;left:0;top:-1px;
  width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--action);color:var(--on-action);
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
}
.after b{color:var(--text);font-weight:600;display:block;}

/* ── gerçek uygulama ekranı, telefon çerçevesinde ─────────────
   Ölçüler bestplay-landing MockPhone (G37) ile aynı oranda: gövde 332, kenar 10,
   dış köşe 50, ekran köşesi 41, kamera adası 98 x 29. Birim çerçeve genişliği
   (100cqw = 332 birim), böylece çerçeve her boyda aynı görünür. */
.shot{margin:0;min-height:0;container-type:inline-size;}
.phone{
  position:relative;
  padding:3.012cqw;border-radius:15.06cqw;
  background:#0B1F17;                      /* phone-body token */
  border:1px solid #2C5240;                /* Gece-3: koyu zeminde gövdeyi ayırır */
  box-shadow:
    inset 0 0 0 1.5px rgba(237,240,234,.07),
    var(--shadow);
}
.phone img{display:block;width:100%;height:auto;border-radius:12.35cqw;}
.island{
  position:absolute;left:50%;top:5.72cqw;
  width:29.52cqw;height:8.73cqw;margin-left:-14.76cqw;
  border-radius:4.5cqw;background:#000;
}

/* ── phone dock: one door in the thumb zone ───────────────── */
.dock{display:none;}
.door{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 20px;border-radius:14px;text-decoration:none;
  background:var(--action);color:var(--on-action);
  font-size:17px;font-weight:600;letter-spacing:-.01em;
  transition:transform .16s ease,background-color .16s ease;
}
.door:hover{background:var(--action-hover);}
.door:active{transform:scale(.99);}
.door svg{width:19px;height:19px;flex:none;}

.timer{
  margin:10px 0 0;display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;
}
.timer b{color:var(--text);font-weight:600;}
.timer button{
  font:inherit;font-weight:600;color:var(--text);
  background:none;border:0;padding:2px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);
}
.timer[data-state="off"] .timer__txt{opacity:.75;}

.alt{margin:6px 0 0;text-align:center;font-size:14px;color:var(--muted);line-height:1.7;}
.alt a{color:var(--text);font-weight:600;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;}
.alt a:hover{text-decoration-color:var(--focus);}
.alt__sep{margin:0 10px;opacity:.5;}

/* ── phone: app peek fills whatever height is left ──────────
   The screenshot box flexes and crops from the bottom, so the page is one
   screen on a small Android and on a Pro Max alike. */
[data-platform="ios"] .get,
[data-platform="android"] .get{display:none;}
/* Telefonda çerçevenin üst kısmı görünür; alt kenar yumuşakça zemine karışır. */
[data-platform="ios"] .shot,
[data-platform="android"] .shot{
  order:-1;flex:1 1 0;overflow:hidden;
  width:min(80%,320px);margin:clamp(12px,2.4vh,24px) auto clamp(14px,2.6vh,26px);
  -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent);
}
[data-platform="ios"] .phone,
[data-platform="android"] .phone{box-shadow:inset 0 0 0 1.5px rgba(237,240,234,.07);}
[data-platform="ios"] .after,
[data-platform="android"] .after{margin-top:clamp(12px,2vh,20px);}
[data-platform="ios"] .dock,
[data-platform="android"] .dock{
  display:block;flex:none;
  margin:clamp(12px,2vh,20px) -20px 0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
/* shorter phones: the steps go first, then the lede; the button never does */
@media (max-height:760px){
  [data-platform="ios"] .after,
  [data-platform="android"] .after{display:none;}
}
@media (max-height:600px){
  [data-platform="ios"] .lede,
  [data-platform="android"] .lede{display:none;}
}

/* ── desktop: copy + QR left, the app standing right ───────── */
[data-platform="desktop"] .scan,
[data-platform="desktop"] .scan-note{display:block;}
[data-platform="desktop"] .stage,
[data-platform="unknown"] .stage{justify-content:center;}
[data-platform="desktop"] .shot,
[data-platform="unknown"] .shot{display:none;}

@media (min-width:880px){
  .gate{padding-left:48px;padding-right:48px;}
  [data-platform="desktop"] .stage,
  [data-platform="unknown"] .stage{
    flex-direction:row;align-items:center;justify-content:space-between;gap:64px;
  }
  [data-platform="desktop"] .copy,
  [data-platform="unknown"] .copy{flex:0 1 560px;padding-bottom:clamp(20px,4vh,48px);}
  /* Masaüstü: ekran yüksekliği pencereye göre (en çok 760), çerçeve genişliği ondan türer. */
  [data-platform="desktop"] .shot,
  [data-platform="unknown"] .shot{
    --sh:min(760px, calc(100dvh - clamp(26px,3.6vh,32px) - clamp(14px,2.6vh,28px) - 2 * clamp(16px,3vh,32px) - 24px));
    display:block;flex:none;align-self:center;
    width:calc(var(--sh) * 390 / 844 * 332 / 312);
    margin:clamp(16px,3vh,32px) 0;
  }
  [data-platform="desktop"] h1,
  [data-platform="unknown"] h1{font-size:clamp(36px,min(4.6vw,7vh),56px);letter-spacing:-.035em;}
  [data-platform="desktop"] .lede,
  [data-platform="unknown"] .lede{font-size:clamp(15px,2.1vh,18px);}
}
/* short laptop windows: steps go first, then the lede */
@media (max-height:720px){
  [data-platform="desktop"] .after,
  [data-platform="unknown"] .after{display:none;}
}
@media (max-height:520px){
  [data-platform="desktop"] .lede,
  [data-platform="unknown"] .lede{display:none;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}