/* The Happy Smash Iron — site stilleri.
   Yazı tipleri sitede barındırılıyor: üçüncü taraf istek yok, çerez yok. */

@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --bg: #060611;
  --surface: #0e0e1f;
  --stroke: rgba(255, 255, 255, 0.10);
  --text: #f4f4fb;
  --text-2: rgba(244, 244, 251, 0.72);
  --text-3: rgba(244, 244, 251, 0.48);
  --cyan: #00e5ff;
  --magenta: #ff2d87;
  --light: #b8ff5c;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(60rem 30rem at 15% -10%, rgba(0, 229, 255, 0.10), transparent 60%),
    radial-gradient(50rem 30rem at 95% 10%, rgba(255, 45, 135, 0.10), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--sans);
}

a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: #7ff2ff; }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }

/* ---- Üst bar ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.brand { font: 600 15px/1 var(--sans); letter-spacing: 0.02em; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand span { color: var(--text-3); font-weight: 400; }
.top nav a { color: var(--text-2); text-decoration: none; font-size: 14px; margin-left: 20px; white-space: nowrap; }
.top nav a:hover { color: var(--text); }

/* ---- Başlıklar ---- */
.eyebrow {
  font: 500 11px/1.2 var(--mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
}
h1 {
  font: 400 clamp(48px, 9vw, 92px)/0.95 var(--serif);
  margin: 18px 0 18px;
  letter-spacing: -0.01em;
}
h1 em, .grad {
  font-style: italic;
  background: linear-gradient(100deg, var(--cyan), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead { font-size: 18px; color: var(--text-2); max-width: 34em; margin: 0; }

.hero { padding-block: 72px 56px; }

/* ---- Raflar (Oyunlar / Uygulamalar) ---- */
.shelf { padding-block: 8px 48px; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.shelf-head h2 { margin: 0; }
.shelf-head a { font-size: 14px; color: var(--text-2); text-decoration: none; }
.shelf-head a:hover { color: var(--text); }
.empty { margin: 0; padding: 22px; border: 1px dashed var(--stroke); border-radius: 22px; color: var(--text-3); }
.top nav a[aria-current="page"] { color: var(--text); }

/* ---- Oyun kartı ---- */
.card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--stroke);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s;
}
.card:hover { border-color: rgba(0, 229, 255, 0.45); transform: translateY(-2px); }
.card img { width: 96px; height: 96px; border-radius: 22px; display: block; }
.card h3 { font: 400 34px/1 var(--serif); margin: 0 0 6px; }
.card p { margin: 0; color: var(--text-2); }
.tag {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font: 500 10px/1.4 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--light);
  border: 1px solid rgba(184, 255, 92, 0.4);
  background: rgba(184, 255, 92, 0.08);
}

/* ---- Oyun sayfası ---- */
.feature { width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--stroke); display: block; margin: 8px 0 36px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0 0 48px; padding: 0; list-style: none; }
.facts li { padding: 18px; border: 1px solid var(--stroke); border-radius: 16px; background: var(--surface); color: var(--text-2); }
.facts b { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px; }

/* ---- Belge (gizlilik politikası) ---- */
.doc { padding-block: 40px 72px; max-width: 720px; }
.doc h1 { font-size: clamp(40px, 7vw, 64px); }
.doc h2 { font: 600 19px/1.3 var(--sans); margin: 40px 0 10px; }
.doc p, .doc li { color: var(--text-2); }
.doc strong { color: var(--text); font-weight: 600; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 4px 0; }
.updated { font: 500 12px/1.4 var(--mono); color: var(--text-3); letter-spacing: 0.06em; }
.summary {
  margin: 28px 0 8px;
  padding: 18px 20px;
  border-left: 3px solid var(--cyan);
  background: rgba(0, 229, 255, 0.06);
  border-radius: 0 14px 14px 0;
}
.summary p { margin: 0; color: var(--text); }

/* ---- Alt bilgi ---- */
footer { border-top: 1px solid var(--stroke); padding: 26px 0 40px; color: var(--text-3); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
footer a { color: var(--text-2); text-decoration: none; }
footer a:hover { color: var(--text); }

@media (max-width: 520px) {
  .hero { padding-block: 48px 40px; }
  .card { grid-template-columns: 72px 1fr; gap: 16px; padding: 18px; }
  .card img { width: 72px; height: 72px; border-radius: 18px; }
  .card h3 { font-size: 28px; }
  .top nav a { margin-left: 14px; }
  /* Dar ekranda e-posta menüden çıkıyor; alt bilgide zaten var. */
  .top nav a[href^="mailto:"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* ---- Ana sayfa tanıtım bölümü ---- */
.spotlight { padding-block: 0 64px; }
.spot-media { display: block; margin: 14px 0 26px; border-radius: 24px; overflow: hidden; border: 1px solid var(--stroke); box-shadow: 0 30px 80px -40px rgba(0, 229, 255, 0.35); }
.spot-media img { display: block; width: 100%; height: auto; transition: transform .4s; }
.spot-media:hover img { transform: scale(1.02); }
.spot-title { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.spot-title img { width: 64px; height: 64px; border-radius: 16px; }
.spot-title h2 { font: 400 clamp(40px, 7vw, 56px)/0.95 var(--serif); margin: 0; }
.spot-title h2 em { font-style: italic; background: linear-gradient(100deg, var(--cyan), var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spot-tagline { margin: 6px 0 0; font: 500 12px/1.3 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.spot-points { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 8px; }
.spot-points li { color: var(--text-2); padding-left: 22px; position: relative; }
.spot-points li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--light); box-shadow: 0 0 10px rgba(184, 255, 92, 0.7); }
.spot-points b { color: var(--text); font-weight: 600; }
.spot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.spot-actions .tag { margin-top: 0; }
.btn {
  display: inline-block; padding: 13px 22px; border-radius: 14px;
  font: 600 15px/1 var(--sans); color: #000; text-decoration: none;
  background: linear-gradient(100deg, var(--cyan), var(--magenta));
  box-shadow: 0 10px 30px -10px rgba(0, 229, 255, 0.5);
}
.btn:hover { color: #000; filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .spot-media img { transition: none; } .spot-media:hover img { transform: none; } }