/* FAZ-A GÖÇÜ (Ai4, 14 Tem): palet artık tokens.css'ten geliyor (--oyun-*).
   Token ADLARI (--gold/--bg/...) BİLEREK KORUNDU: 21 sayfadaki var(--gold) kullanımları
   kırılmasın diye. Yalnız TANIMLAR kanonik sisteme bağlandı → tek doğruluk-kaynağı.
   Font: Plus Jakarta Sans EMEKLİ → Inter (gövde) + Fraunces (başlık). */
/* ÇOCUK-ÇEKİRDEĞİ CSS — KANONİK TEK KAYNAK (_shared/cocuk-cekirdek/). 14 Tem, Ai4.
   Önceden _motor/ ve _core/ altında BAYT-BAYT AYNI iki kopyaydı (md5 227d5bfd…). */
/* ============================================================================
   BEKLEME SALONU · paylaşılan çekirdek STİL  (Ai4 · KOL2)
   Prof. Dr. Mustafa Melikoğlu — çocuk muayenehanesi bekleme salonu mini-oyunları
   · METİNSİZ (çocuk okuma bilmez) · mobil-first + masaüstü-HD
   · file://-güvenli: salt CSS, vendor yok.  Marka: lacivert/mercan/krem + kawaii pastel.
   ========================================================================== */
:root{
  /* kawaii oyun paleti (üretim 3d-muze ile tutarlı) */
  --gold:var(--oyun-altin); --mint:var(--oyun-nane); --cyan:var(--oyun-camgobegi); --pink:var(--oyun-pembe); --lila:var(--oyun-leylak);
  --safe:var(--oyun-guvenli); --danger:var(--oyun-uyari);
  /* marka aksanları (BRAND-BOOK) */
  --navy:var(--oyun-lacivert); --blue:var(--oyun-mavi); --coral:var(--oyun-mercan); --cream:var(--oyun-keten); --ink:var(--oyun-murekkep);
  /* sahne */
  --bg:var(--oyun-zemin); --bg2:var(--oyun-zemin2); --glass:var(--oyun-cam); --line:var(--oyun-cizgi);
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --shadow:0 10px 30px #0008; --shadow-sm:0 6px 20px #0006;
  --safe-top:max(10px,env(safe-area-inset-top));
  --safe-bot:max(14px,env(safe-area-inset-bottom));
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;height:100%;overflow:hidden;background:var(--bg);color:#fff;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  user-select:none;-webkit-user-select:none;touch-action:none;
  -webkit-font-smoothing:antialiased;
}
canvas{display:block;}
button{font-family:inherit;}
/* Başlıklar marka-serifi (Ai3 kararı: Fraunces+Inter göç eder, PlusJakarta EMEKLİ). */
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:400;}

/* warm dusk sahne zemini — her oyun gövdesi bunun üstüne kurulur */
.sahne{
  position:fixed;inset:0;overflow:hidden;
  background:
    radial-gradient(130% 100% at 50% -8%, #25305a 0%, #1a2138 38%, #121726 78%),
    radial-gradient(80% 60% at 84% 108%, #2b2340 0%, #12172600 60%);
}
/* hafif gökyüzü-parıltı (ambient, reduce-motion'da durur) */
.sahne::before{
  content:"";position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(40% 30% at 22% 18%, #ffd27a22, transparent 60%),
             radial-gradient(45% 32% at 80% 26%, #7ad9b522, transparent 62%);
  animation:driftGlow 18s ease-in-out infinite alternate;
}
@keyframes driftGlow{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2%, -2%,0) scale(1.06)}}

/* ── üst HUD ── */
#top{position:fixed;top:var(--safe-top);left:0;right:0;z-index:30;
  display:flex;align-items:center;gap:10px;padding:0 12px;pointer-events:none;}
#top .orta{flex:1;display:flex;justify-content:center;align-items:center;gap:8px;pointer-events:none;}
.iconbtn{pointer-events:auto;cursor:pointer;width:48px;height:48px;min-width:48px;border-radius:50%;
  background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-size:21px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);border:1px solid var(--line);text-decoration:none;transition:transform .12s;}
.iconbtn:active{transform:scale(.9);}
.iconbtn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}
/* ≥88px DOKUNMA HEDEFİ (Ai3 B3 — 0-6 yaş; WCAG'ın 44px'i YETİŞKİN tabanıdır).
   Görsel boyut BİLEREK değişmiyor (48/54px daire kalır) → 21 sayfalık görsel-regresyon bozulmaz.
   Hit-alanı görünmez ::before ile büyütülür: çocuk ıskalayınca da basmış sayılır. */
.iconbtn{position:relative;}
.iconbtn::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:88px;height:88px;border-radius:50%;}

/* ilerleme noktaları (metinsiz: ★ dolan yuvalar) */
.adim{display:flex;gap:7px;align-items:center;}
.adim .nokta{width:34px;height:34px;border-radius:11px;background:#ffffff14;border:1px dashed #ffffff33;
  display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .3s, background .3s;}
.adim .nokta.ok{background:linear-gradient(135deg,#ffe39a,#f6b73c);border:1px solid #fff6;color:#4a2c00;
  box-shadow:0 4px 14px #f6b73c55;}
.adim .nokta.pop{transform:scale(1.34) rotate(8deg);}

/* ── başlat perdesi (metinsiz: nabız mascot + ▶) ── */
.perde{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:22px;
  background:radial-gradient(120% 120% at 50% 35%,#1f2842,#0d1018);pointer-events:auto;}
.perde .mascot{font-size:clamp(76px,22vw,150px);filter:drop-shadow(0 12px 30px #0009);
  animation:beat 1.4s ease-in-out infinite;}
.perde .go{cursor:pointer;border:none;border-radius:50%;width:96px;height:96px;font-size:42px;color:#06251c;
  background:linear-gradient(135deg,#8fe7c4,#41b58c);box-shadow:0 14px 36px #41b58c66;
  display:flex;align-items:center;justify-content:center;animation:beat 1.7s ease-in-out infinite;}
.perde .go:active{transform:scale(.92);}
.perde .hand{font-size:34px;animation:bob 1.2s ease-in-out infinite;}
.perde.kapali{opacity:0;pointer-events:none;transition:opacity .4s;}

/* ── mutlu / tamam katmanı (metinsiz: pikto + ↻) ── */
.mutlu{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:20px;
  background:radial-gradient(120% 120% at 50% 40%,#1a2440d9,#0a0c14ea);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);pointer-events:auto;}
.mutlu.acik{display:flex;}
.mutlu .big{font-size:clamp(80px,22vw,160px);filter:drop-shadow(0 10px 26px #0008);
  animation:pikpop .5s cubic-bezier(.2,1.4,.4,1);}
.mutlu .yeniden{cursor:pointer;border:none;border-radius:40px;padding:16px 32px;font-size:36px;
  background:linear-gradient(135deg,#ffd97a,#f6b73c);box-shadow:0 12px 30px #f6b73c55;}
.mutlu .yeniden:active{transform:scale(.93);}

/* ── ebeveyn şeridi (METİN SERBEST — çocuk sahnesinin DIŞINDA, hekim-etiği) ── */
#veli{position:fixed;left:0;right:0;bottom:0;z-index:40;pointer-events:none;}
#veli .tab{pointer-events:auto;cursor:pointer;position:absolute;right:12px;bottom:var(--safe-bot);
  font-size:11.5px;letter-spacing:.2px;background:#0d0f18cc;border:1px solid var(--line);border-radius:22px;
  padding:0 15px;min-height:44px;box-sizing:border-box;display:flex;align-items:center;
  color:#cdd2e0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
#veli .sheet{pointer-events:auto;position:absolute;left:0;right:0;bottom:0;transform:translateY(101%);
  transition:transform .32s ease;background:#13151fF5;border-top:1px solid var(--line);
  padding:18px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -14px 40px #000a;
  max-height:74dvh;overflow:auto;}
#veli.open .sheet{transform:translateY(0);}
#veli h3{margin:0 0 8px;font-size:15px;color:var(--mint);font-weight:800;}
#veli p{margin:7px 0;font-size:13.5px;line-height:1.62;color:#dfe2ee;}
#veli b{color:#fff;}
#veli .x{position:absolute;top:12px;right:14px;cursor:pointer;font-size:20px;color:#aab;}
#veli small{color:#8a93a8;}

/* renk-kodu tint (durum sinyali) */
#tint{position:fixed;inset:0;z-index:20;pointer-events:none;background:var(--danger);opacity:0;
  mix-blend-mode:soft-light;transition:opacity .4s;}

/* konfeti/parçacık canvas (çekirdek yönetir) */
#fx{position:fixed;inset:0;pointer-events:none;z-index:55;display:none;}

/* paylaşılan animasyonlar */
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pikpop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes float-soft{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}

/* erişilebilirlik: hareket azalt */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;}
  .sahne::before{animation:none;}
}

/* ════════ MASAÜSTÜ-HD: daha zengin gölge/efekt/ölçek ════════ */
@media (min-width:900px) and (pointer:fine){
  :root{--shadow:0 18px 50px #000a;--shadow-sm:0 10px 30px #0007;}
  .iconbtn{width:54px;height:54px;min-width:54px;font-size:24px;}
  .sahne::before{filter:saturate(1.1) blur(2px);}
  .hd-only{display:revert;}
}
.hd-only{display:none;} /* yalnız HD'de görünen süs katmanları */
