/* DOPAMIN — oyun sayfası. Oyunun kimliği: koyu mor zemin, neon pembe/camgöbeği/altın, Silkscreen başlık + Chakra Petch gövde.
   tasteskill ev kuralları: gradyan, gölge, ince çizgi, kart sırası yok; yüzeyler ton adımıyla ayrılır.
   Yazı tipleri kendi klasöründe (SIL OFL) — dış CDN yok. */

@font-face { font-family: "Silkscreen"; font-weight: 400; font-display: swap;
  src: url("assets/fonts/silkscreen-latin-400-normal.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Silkscreen"; font-weight: 400; font-display: swap;
  src: url("assets/fonts/silkscreen-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chakra Petch"; font-weight: 400; font-display: swap;
  src: url("assets/fonts/chakra-petch-latin-400-normal.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-weight: 400; font-display: swap;
  src: url("assets/fonts/chakra-petch-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap;
  src: url("assets/fonts/chakra-petch-latin-600-normal.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap;
  src: url("assets/fonts/chakra-petch-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #070312;
  --field: #120a26;
  --field-2: #1b1036;
  --ink: #eef8ff;
  --ink-2: #b9c6dc;
  --pink: #ff3399;
  --cyan: #00e5ff;
  --gold: #ffcc33;
  --lime: #b6ff3b;
  --violet: #b58cff;
  --orange: #ff8a2a;
  --red: #ff4058;
  --pixel: "Silkscreen", system-ui, sans-serif;
  --body: "Chakra Petch", system-ui, sans-serif;
  --margin: clamp(16px, 4vw, 48px);
  --content: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gap: clamp(112px, 13vw, 200px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--cyan); }
img, video { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.skip-link { position: absolute; left: 16px; top: -48px; z-index: 10; padding: 10px 16px; background: var(--cyan); color: #000; text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 12px; }
.skip-link:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- üst çubuk ---------- */
.bar {
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  max-width: var(--content); margin: 0 auto; padding: 8px var(--margin);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bar a { color: var(--ink-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; transition: color 0.2s var(--ease); }
.bar a:hover { color: var(--ink); }
.bar-back { gap: 8px; font-size: 15px; }
.bar-links { display: flex; gap: 20px; font-size: 15px; }

main { max-width: var(--content); margin: 0 auto; padding: 0 var(--margin); }

/* ---------- giriş ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 48px;
  padding: clamp(24px, 4vw, 56px) 0 0; min-height: calc(100svh - 60px);
}
.hero-icon { width: 88px; height: 88px; border-radius: 20px; }
.logo {
  margin: 24px 0 0;
  font: 400 clamp(56px, 7.4vw, 112px)/0.9 var(--pixel); letter-spacing: 0.02em;
  color: #fff;
}
.tagline { margin: 18px 0 0; font: 400 clamp(18px, 1.6vw, 22px)/1.2 var(--pixel); color: var(--cyan); letter-spacing: 0.02em; }
.lede { margin: 20px 0 0; max-width: 34em; color: var(--ink); font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; }
.fever { color: var(--pink); font-weight: 600; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.button {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px;
  background: #d1006a; color: #fff; text-decoration: none;
  font: 400 15px/1 var(--pixel); letter-spacing: 0.04em;
  transition: transform 0.15s var(--ease), background 0.2s var(--ease);
}
.button:hover { background: #e0007a; }
.button:active { transform: scale(0.97); }
.soon { color: var(--ink-2); font-size: 15px; }

.phone {
  margin: 0; justify-self: center; width: min(100%, 360px);
  padding: 10px; border-radius: 44px; background: var(--field-2);
}
.phone video, .phone img { width: 100%; border-radius: 34px; aspect-ratio: 444 / 960; object-fit: cover; background: #000; }
.hero .phone, .modes-phone { justify-self: end; }
.still-only { display: none; }

/* ---------- bölüm başlıkları ---------- */
.h-pixel {
  margin: 0 0 20px; font: 400 clamp(28px, 3.6vw, 48px)/1.05 var(--pixel); letter-spacing: 0.01em; color: #fff;
}

/* ---------- modlar: metin solda, NİNJA oynanışı sağda ---------- */
.modes {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: center;
  margin-top: var(--gap);
}
.modes-new h3 { margin: 0; font: 400 clamp(22px, 2.4vw, 32px)/1.1 var(--pixel); letter-spacing: 0.02em; }
.modes-new p { margin: 12px 0 0; max-width: 34em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.modes-new b { color: var(--gold); font-weight: 600; }
.mode-list {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px;
}
.mode-list li { color: var(--ink); }
.mode-list b { display: block; margin-bottom: 4px; font: 400 17px/1.2 var(--pixel); letter-spacing: 0.03em; }
.m-cyan { color: var(--cyan); } .m-orange { color: var(--orange); } .m-red { color: var(--red); }
.modes-phone img { aspect-ratio: 430 / 932; }

/* ---------- içerik ---------- */
.inside {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start;
  margin-top: var(--gap);
}
.inside-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; position: sticky; top: 88px; }
.inside-shot { margin: 0; background: var(--field); }
.inside-shot img { width: 100%; aspect-ratio: 430 / 932; object-fit: cover; }
.inside dl { margin: 0; display: grid; gap: 34px; }
.inside dt { font: 400 clamp(18px, 1.8vw, 24px)/1.2 var(--pixel); letter-spacing: 0.02em; }
.inside dd { margin: 8px 0 0; max-width: 34em; color: var(--ink); }
.c-pink { color: var(--pink); } .c-cyan { color: var(--cyan); } .c-gold { color: var(--gold); }
.c-lime { color: var(--lime); } .c-violet { color: var(--violet); }

/* ---------- adil oyun ---------- */
.fair {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 64px; align-items: center;
  margin-top: var(--gap); padding: clamp(32px, 5vw, 64px); background: var(--field);
}
.statement { margin: 0; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; max-width: 22em; }
.fair-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; max-width: 36em; }
.fair-list b { color: var(--gold); font-weight: 600; }
.fair-shot { margin: 0; background: var(--bg); }
.fair-shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }

/* ---------- yardım ---------- */
.help { margin-top: var(--gap); }
.help-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
.help-mail { grid-column: 1 / -1; }
.help details { background: var(--field); }
.help details[open] { background: var(--field-2); }
.help summary {
  cursor: pointer; list-style: none; position: relative; min-height: 56px; padding: 16px 52px 16px 20px; font-weight: 600;
  transition: background 0.2s var(--ease);
}
.help summary:hover { background: var(--field-2); }
.help summary::-webkit-details-marker { display: none; }
.help summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 400 17px/1 var(--pixel); color: var(--cyan); }
.help details[open] summary::after { content: "–"; }
.help details p { margin: 0; padding: 0 20px 18px; max-width: 40em; }
.help i { font-style: normal; color: var(--gold); }
.help-mail { margin: 18px 0 0; }

/* ---------- alt bilgi: ad tam genişlikte ---------- */
.foot { max-width: var(--content); margin: var(--gap) auto 0; padding: 0 var(--margin) 40px; }
.foot-name { margin: 0; font: 400 clamp(56px, 15vw, 220px)/0.9 var(--pixel); letter-spacing: 0.01em; color: var(--pink); }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 20px; }
.foot nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-2); text-decoration: none; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }
.foot-small { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.foot-small a { color: inherit; }

/* ---------- giriş hareketi (site.js) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .motion-only { display: none; }
  .still-only { display: block; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- dar ekran ---------- */
@media (max-width: 900px) {
  .hero, .inside, .modes { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .help-list { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: 0; }
  .phone { width: min(100%, 300px); }
  .inside-shots { position: static; }
}
@media (max-width: 560px) {
  .bar-links { display: none; }
  .hero .phone, .modes-phone { justify-self: center; }
}
@media (max-width: 640px) {
  .mode-list { grid-template-columns: minmax(0, 1fr); }
  .fair { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fair-shot { max-width: 300px; }
}
@media (max-width: 480px) {
  .logo { font-size: clamp(48px, 15vw, 64px); }
}