/* Yabu Games — ANA SAYFA stili (yalnız index.html): tek renk dolu SAHNE (marka + oyun + mağazalar).
   Renkler, yazı ve alt bölüm theme.css'ten gelir. Bağımlılık yok, GitHub Pages doğrudan yayınlar. */

/* ── SAHNE ───────────────────────────────────────────────────────────── */
.stage {
  min-height: min(76vh, 780px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.2vh, 30px);
  padding: clamp(56px, 10vh, 112px) var(--gutter) clamp(64px, 11vh, 124px);
  text-align: center;
  color: #fff;
  background:
    radial-gradient(ellipse 72% 62% at 50% 36%, var(--field-hi) 0%, var(--field) 56%, var(--field-lo) 100%);
}

.brand { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.brand img { display: block; width: min(64vw, 520px); height: auto; }
.brand span {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(15px, 2.2vw, 22px);
  letter-spacing: .62em;
  padding-left: .62em;          /* harf aralığı sağa taşar; optik ortalama için aynı pay solda */
  text-transform: uppercase;
  opacity: .94;
}

.lead {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(18px, 2.3vw, 22px);
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
}

.game {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px 10px 10px;
  border-radius: 22px;
  background: rgba(9, 20, 38, .22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17);
  text-align: left;
}
.game img { display: block; width: 60px; height: 60px; border-radius: 14px; }
.game p { margin: 0; }
.game b { display: block; font-family: var(--display); font-size: 21px; line-height: 1.15; }
.game span { display: block; font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, .88); }

.stores { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.store {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 204px;
  min-height: 62px;
  padding: 9px 24px 10px 18px;
  border-radius: 14px;
  background: var(--badge);
  color: #fff;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .24), 0 12px 26px rgba(8, 20, 40, .30);
}
.store svg { flex: none; width: 30px; height: 30px; }
.store span { display: flex; flex-direction: column; }
.store small { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.store b { font-family: var(--display); font-size: 23px; line-height: 1.12; }
.store.soon { cursor: default; }
.store.soon small { color: var(--gold); }
a.store { transition: transform .16s ease, box-shadow .16s ease; }
a.store:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .34), 0 16px 30px rgba(8, 20, 40, .36); }

@media (max-width: 720px) {
  .stores { width: 100%; }
  .stores li { flex: 1 1 204px; max-width: 320px; }
  .store { min-width: 0; }
}

/* Açılışta tek, sakin bir hareket: öğeler sırayla yerine oturur. Hareket istemeyende hiç oynamaz. */
@media (prefers-reduced-motion: no-preference) {
  .stage > * { animation: rise .62s cubic-bezier(.2, .7, .2, 1) both; }
  .stage > *:nth-child(2) { animation-delay: .07s; }
  .stage > *:nth-child(3) { animation-delay: .14s; }
  .stage > *:nth-child(4) { animation-delay: .21s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}