/* ============================================================
   OYUN VİTRİNİ — Ortak Yumuşak Tasarım Sistemi
   Tüm oyunlar ve ana sayfa bu dosyayı kullanır.
   Felsefe: sıcak, yumuşak, çocuk dostu, profesyonel, sakin.
   ============================================================ */
/* Fontlar YEREL (self-host) — internet gerekmez, hiçbir dış istek yapılmaz.
   "Kapalı bahçe" sözünü teknik olarak doğru kılar. Değişken (variable) woff2. */
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/fredoka-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;
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/fredoka-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/nunito-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;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/nunito-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Yüzeyler --- */
  --bg-sky:   #eaf3ff;
  --bg-peach: #fff1e8;
  --bg-mint:  #e9faf1;
  --surface:  #ffffff;
  --surface-2:#f6faff;

  /* --- Metin (yumuşak slate, sert siyah değil) --- */
  --ink:      #3a4d63;
  --ink-soft: #7a8aa0;
  --line:     #e6eef7;

  /* --- Pastel-pop marka renkleri --- */
  --blue:   #5aa9e6;
  --mint:   #45c8a6;
  --peach:  #ff9d76;
  --yellow: #ffce5c;
  --lav:    #a99ce0;
  --pink:   #ff8fab;
  --green:  #7ed957;
  --red:    #ff7b7b;

  --primary:     #5aa9e6;
  --primary-dk:  #4493d6;
  --on-primary:  #ffffff;

  /* --- Yarıçaplar --- */
  --r-sm: 12px;
  --r:    18px;
  --r-md: 24px;
  --r-lg: 32px;
  --r-pill: 999px;

  /* --- Yumuşak gölgeler (neon yok, diffüz) --- */
  --sh-sm: 0 4px 14px rgba(75,110,150,0.10);
  --sh:    0 12px 30px rgba(75,110,150,0.14);
  --sh-lg: 0 22px 50px rgba(75,110,150,0.18);

  /* --- Fontlar --- */
  --font-display: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 12% -8%,  var(--bg-peach) 0%, transparent 60%),
    radial-gradient(900px 500px at 88% -4%,  var(--bg-mint)  0%, transparent 60%),
    var(--bg-sky);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; line-height: 1.15; }

/* ---------- Butonlar ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--on-primary);
  background: var(--primary);
  border: none;
  border-radius: var(--r-pill);
  padding: 12px 28px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(90,169,230,0.35);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s;
}
.btn:hover { background: var(--primary-dk); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(90,169,230,0.4); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--lg { font-size: 1.15rem; padding: 15px 38px; }
.btn--ghost {
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  border: 1px solid var(--line);
}
.btn--ghost:hover { background: var(--surface-2); }

/* ---------- Kart / panel ---------- */
.card, .panel {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh);
}

/* ---------- Etiket ---------- */
.tag {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: #eef5fc;
  color: #5b7d9e;
}

/* ---------- Ana sayfaya dön bağlantısı (oyunlarda ortak) ---------- */
.home-link {
  position: fixed;
  top: 16px; left: 16px;
  z-index: 100;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  padding: 9px 16px;
  border-radius: var(--r-pill);
  transition: transform 0.12s, box-shadow 0.2s;
}
.home-link:hover { transform: translateY(-2px); box-shadow: var(--sh); }

/* ---------- 3B derinlik kiti (platform standardı — her oyun kullanabilir) ---------- */
/* Emoji'yi parlak "app-store" diskine oturtur:  <span class="badge3d">🐹</span>
   Boyut font-size ile ölçeklenir. */
.badge3d {
  position: relative; display: inline-grid; place-items: center;
  width: 1.85em; height: 1.85em; border-radius: 0.5em; line-height: 1;
  background: radial-gradient(125% 125% at 32% 22%, rgba(255,255,255,0.95), rgba(255,255,255,0.42) 40%, rgba(20,40,70,0.12) 100%);
  box-shadow: 0 0.16em 0.28em rgba(30,50,80,0.22), inset 0 0.04em 0.04em rgba(255,255,255,0.95), inset 0 -0.13em 0.2em rgba(20,40,70,0.11);
  border: 1px solid rgba(255,255,255,0.55);
  text-shadow: 0 0.05em 0.06em rgba(20,40,70,0.28);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.badge3d:hover { transform: translateY(-2px) scale(1.05) rotate(-2deg); box-shadow: 0 0.26em 0.4em rgba(30,50,80,0.26), inset 0 0.04em 0.04em rgba(255,255,255,0.95), inset 0 -0.13em 0.2em rgba(20,40,70,0.11); }
.badge3d--round { border-radius: 50%; }
/* Düz emoji'ye tek satırda hacim/gölge kat */
.emoji3d { filter: drop-shadow(0 4px 5px rgba(20,40,70,0.25)); }
/* Yumuşak yükselti gölgesi (kart/eleman derinliği) */
.depth { box-shadow: 0 10px 22px rgba(30,50,80,0.16), inset 0 1px 0 rgba(255,255,255,0.7); }

/* ============================================================
   EBEVEYN BÖLÜMÜ — güven & eğitim anlatısı (ana sayfa + rehber ortak)
   ============================================================ */
/* Misyon / manifesto paneli */
.manifesto {
  position: relative; margin: 0 auto; max-width: 1000px;
  background: linear-gradient(120deg, #fff3e0, #ffe9f2 48%, #e8f2ff);
  border: 3px solid #fff; border-radius: 28px;
  box-shadow: 0 10px 0 rgba(120,140,170,0.08), var(--sh-lg);
  padding: 30px 40px; text-align: center;
}
.manifesto .mf-kicker {
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.6px;
  text-transform: uppercase; color: #ff6f91; display: inline-flex; align-items: center; gap: 7px;
}
.manifesto p {
  margin: 12px auto 0; max-width: 74ch; color: var(--ink); font-weight: 600; line-height: 1.72;
  font-size: clamp(1rem, 1.7vw, 1.15rem);
}
.manifesto .mf-motto { display: block; margin-top: 14px; font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); }

/* Bilgi kartı ızgarası (güven kartları + beceri kartları) */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 18px; }

/* Ortak bilgi kartı */
.info-card {
  --acc: var(--primary);
  position: relative; overflow: hidden; background: var(--surface); border: 3px solid #fff; border-radius: 22px;
  box-shadow: 0 8px 0 rgba(120,140,170,0.09), 0 12px 26px rgba(90,120,160,0.08);
  padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 9px;
  transition: transform 0.2s ease, box-shadow 0.26s ease;
}
.info-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--acc); opacity: 0.92; }
.info-card:hover { transform: translateY(-6px); box-shadow: 0 14px 0 rgba(120,140,170,0.09), 0 22px 40px rgba(90,120,160,0.14); }
/* 3B app-store diski (badge3d ile aynı ışık düzeni) */
.info-card .ic-disc {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 2rem; line-height: 1;
  background: radial-gradient(125% 125% at 32% 22%, rgba(255,255,255,0.95), rgba(255,255,255,0.42) 40%, rgba(20,40,70,0.12) 100%);
  box-shadow: 0 10px 18px rgba(30,50,80,0.2), inset 0 2px 2px rgba(255,255,255,0.95), inset 0 -8px 13px rgba(20,40,70,0.1);
  border: 1px solid rgba(255,255,255,0.55); text-shadow: 0 0.05em 0.06em rgba(20,40,70,0.28); margin-bottom: 4px;
  transition: transform 0.3s ease;
}
.info-card:hover .ic-disc { transform: translateY(-2px) scale(1.05) rotate(-2deg); }
.info-card h3 { font-family: var(--font-display); font-size: 1.16rem; color: var(--ink); }
.info-card p { color: var(--ink-soft); font-weight: 600; font-size: 0.92rem; line-height: 1.55; flex: 1; }
.info-card .ic-ex {
  margin-top: 2px; font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; color: #5680a3; line-height: 1.5;
  background: color-mix(in srgb, var(--acc) 12%, #fff); border: 1px solid color-mix(in srgb, var(--acc) 20%, #fff);
  border-radius: 14px; padding: 8px 12px;
}
.info-card .ic-ex b { color: var(--ink); font-weight: 800; }

/* erişilebilirlik: hareketi azalt tercihine saygı */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}