/*
 * stil.css — Ebeveyn ekranı.
 *
 * Renkler ve yuvarlaklık prototipten (prototype/masal-kutusu-v5.jsx ·
 * TASARIM TOKENLARI) birebir alındı: ürünün görsel dili orada karara
 * bağlanmıştı, burada yeniden icat edilmiyor.
 *
 * ─── YAZI TİPİ NEDEN CDN'DEN GELMİYOR ─────────────────────────────
 * Prototip Fredoka'yı Google Fonts'tan çekiyor. Üretimde bu, ebeveynin
 * IP'sini her sayfa açılışında üçüncü tarafa vermek demek — bu depo
 * ham IP'yi KENDİ veritabanına bile yazmıyor (docs/05 §2). Sistem
 * yuvarlak yığını kullanılıyor; prototipteki yedek zincirin aynısı.
 */
:root {
  --gok: #8ED6D2; --gok-ust: #B9E8E4;
  --fistik: #7FB069; --kayisi: #F2A25C; --nar: #D95F53; --hardal: #E3B23C;
  --patlican: #43284A; --mor: #8B6BB1; --nazar: #4C8FC0;
  --sut: #FFF9F0; --krem: #FFECD4; --sis: #9A8C93;
  --golge: rgba(67, 40, 74, .14);
  --yz: ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", "Nunito",
        system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--sut); color: var(--patlican);
  font-family: var(--yz); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

/* ── Başlık ── */
.tepe {
  background: linear-gradient(180deg, var(--gok) 0%, var(--gok-ust) 100%);
  padding: 28px 16px 52px; text-align: center;
}
.tepe h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.tepe p  { margin: 6px 0 0; font-size: 14px; font-weight: 500; opacity: .8; }
.kabuk { max-width: 640px; margin: -34px auto 0; padding: 0 16px 56px; }

/* ── Kart ── */
.kart {
  background: #fff; border-radius: 28px; padding: 22px;
  box-shadow: 0 8px 24px var(--golge); margin-bottom: 16px;
}
.etiket {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--sis); margin: 0 0 8px;
}
.etiket + .etiket, .ara { margin-top: 18px; }

/* ── Alanlar ── */
label { display: block; }
input[type=text], input[type=email], input[type=password], input[type=month] {
  width: 100%; padding: 15px 18px; font: inherit; font-size: 17px;
  font-weight: 600; color: var(--patlican); background: var(--krem);
  border: 3px solid transparent; border-radius: 20px; outline: none;
}
input:focus { border-color: var(--kayisi); }
input::placeholder { color: var(--sis); font-weight: 500; }

/* ── Düğmeler ── */
button { font: inherit; cursor: pointer; border: none; }
.dugme {
  display: flex; width: 100%; align-items: center; justify-content: center;
  gap: 8px; padding: 17px; font-size: 18px; font-weight: 700; color: #fff;
  background: var(--kayisi); border-radius: 24px; box-shadow: 0 5px 0 #D4874A;
  transition: transform .08s;
}
.dugme:active { transform: translateY(3px); box-shadow: 0 2px 0 #D4874A; }
.dugme:disabled { opacity: .45; cursor: not-allowed; box-shadow: 0 5px 0 #D4874A; }
.dugme.ikincil { background: var(--krem); color: var(--patlican); box-shadow: 0 5px 0 #E8D3B4; }
.dugme.ikincil:active { box-shadow: 0 2px 0 #E8D3B4; }
.dugme.duz { background: none; box-shadow: none; color: var(--sis);
             font-size: 15px; font-weight: 600; padding: 10px; }
.dugme.duz:active { transform: none; }

/* ── Sekme ── */
.sekmeler { display: flex; gap: 6px; background: var(--krem);
            border-radius: 20px; padding: 5px; margin-bottom: 18px; }
.sekmeler button { flex: 1; padding: 11px; border-radius: 16px;
                   background: none; color: var(--sis); font-weight: 700; }
.sekmeler button[aria-selected="true"] { background: #fff; color: var(--patlican);
                                         box-shadow: 0 2px 6px var(--golge); }

/* ── Seçim ızgarası ── */
.izgara { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
.izgara.dort { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) { .izgara.dort { grid-template-columns: repeat(2, 1fr); } }
.secim {
  padding: 14px 10px; text-align: center; background: var(--krem);
  border-radius: 20px; color: var(--patlican); font-weight: 600;
  border: 3px solid transparent;
}
.secim .simge { font-size: 28px; display: block; }
.secim .alt { font-size: 12px; font-weight: 500; color: var(--sis); }
.secim[aria-pressed="true"] { background: var(--fistik); color: #fff; }
.secim[aria-pressed="true"] .alt { color: #EAF6E2; }

/* ── Liste satırı ── */
.satir {
  display: flex; width: 100%; align-items: center; gap: 12px; padding: 16px;
  text-align: left; background: var(--krem); border-radius: 22px;
  margin-bottom: 8px; color: var(--patlican);
}
.satir .simge { font-size: 30px; }
.satir .ad { font-size: 17px; font-weight: 700; }
.satir .alt { font-size: 12px; font-weight: 500; color: var(--sis); }
.satir .ok { margin-left: auto; color: var(--sis); font-size: 20px; }

/* ── Tarama maddesi ── */
.madde { padding: 16px 0; border-bottom: 2px solid var(--krem); }
.madde:last-child { border-bottom: none; }
.madde .alan { font-size: 11px; font-weight: 700; text-transform: uppercase;
               letter-spacing: .12em; color: var(--sis); }
.madde .soru { font-size: 16px; font-weight: 600; margin: 4px 0 10px; }
.madde .izgara { grid-template-columns: repeat(3, 1fr); }
.madde .secim { padding: 10px; font-size: 15px; }

/* ── Bilgi ve uyarı ── */
.bilgi { background: var(--krem); border-radius: 18px; padding: 15px 17px;
         font-size: 14px; font-weight: 500; }
.bilgi ul { margin: 8px 0 0; padding-left: 18px; }
.bilgi li { margin: 4px 0; }
.uyari { border-left: 6px solid var(--hardal); background: #FFF6E0;
         border-radius: 14px; padding: 14px 16px; font-size: 14px;
         font-weight: 600; }
.hata { border-left: 6px solid var(--nar); background: #FDECEA;
        border-radius: 14px; padding: 13px 16px; font-size: 14px;
        font-weight: 600; color: #8E2F27; margin-bottom: 14px; }
.dipnot { font-size: 12px; font-weight: 500; color: var(--sis);
          text-align: center; line-height: 1.6; margin: 18px 8px 0; }
.kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
       font-size: 12px; background: var(--krem); border-radius: 12px;
       padding: 11px 13px; word-break: break-all; color: var(--patlican); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Yardımcı sınıflar ──
   Satır içi `style=` YOK ve olamaz: CSP `style-src 'self'` onu da
   engelliyor (script gibi). Gerçek tarayıcıda sürülene kadar
   görülmedi — sayfa açılıyor, düğmeler bağlanıyor ama BÜTÜN satır içi
   stiller sessizce düşüyordu. Aynı kural JS tarafında da geçerli:
   `el.style.x = y` de engellenir, o yüzden sınıf takılıp çıkarılıyor. */
.u-ust    { margin-top: 18px; }
.u-ust-s  { margin-top: 10px; }
.u-ust-l  { margin-top: 20px; }
.u-alt    { margin-bottom: 14px; }
.u-sol    { text-align: left; }
.u-sol-ic { text-align: left; margin: 8px 2px 0; }
.u-sol-ust{ text-align: left; margin-top: 12px; }
.u-esnek  { flex: 1; }
.u-normal { text-transform: none; letter-spacing: 0; }
.u-blok   { display: block; margin-top: 12px; }
.u-aciklama { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--sis); }
/* Seçili liste satırı — `.secim`in satır hâli. */
/* Ad ve açıklaması ALT ALTA: `.satir` yatay bir kutu ve iki metni
   doğrudan içine koymak onları yan yana dizer — profil satırında ad
   sıkışıp açıklama yanına kayıyordu. */
.satir.dikey { flex-direction: column; align-items: flex-start; gap: 3px; }
.satir.secili { background: var(--fistik); color: #fff; }
.satir.secili .alt { color: #EAF6E2; }

/* ── Karşılama katmanı ──
   Tokenlar aynı (prototipin görsel dili); yalnız yeni bileşenler. */
.tepe-amblem { display: inline-block; transform: translateY(2px); }
.karsilama-kahraman { text-align: center; padding: 30px 22px 24px;
  background: linear-gradient(180deg, #fff 0%, var(--krem) 140%); }
.kahraman-sahne { font-size: 44px; letter-spacing: 6px; margin-bottom: 6px; }
.kahraman-baslik { margin: 0; font-size: 26px; line-height: 1.25;
  letter-spacing: -.02em; }
.kahraman-baslik em { font-style: normal; color: var(--kayisi); }
.kahraman-alt { margin: 10px auto 0; max-width: 40ch; font-size: 15px;
  font-weight: 500; color: var(--sis); }

.adim { display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-bottom: 2px solid var(--krem); }
.adim:last-child { border-bottom: none; }
.adim-no { flex: none; width: 34px; height: 34px; display: grid;
  place-items: center; background: var(--gok); color: #fff;
  font-weight: 800; border-radius: 12px; font-size: 16px; }
.adim b { font-size: 16px; }
.adim-alt { display: block; margin-top: 2px; font-size: 13.5px;
  font-weight: 500; color: var(--sis); line-height: 1.5; }

.ilkeler { list-style: none; margin: 0; padding: 0; }
.ilkeler li { padding: 9px 0; border-bottom: 2px solid var(--krem);
  font-size: 14.5px; font-weight: 500; line-height: 1.55; }
.ilkeler li:last-child { border-bottom: none; }

/* ── Tepe süsleri: CSS-yalnız süzülme; hareket azaltma isteğine saygı
   global kuralda (animation: none). Konum yüzdeyle — dar ekranda da
   taşmaz. ── */
.tepe { position: relative; overflow: hidden; }
.tepe-sus { position: absolute; font-size: 22px; opacity: .7;
  animation: suzul 6s ease-in-out infinite; pointer-events: none; }
.tepe-sus.s1 { left: 12%; top: 18px; animation-delay: 0s; }
.tepe-sus.s2 { right: 14%; top: 12px; font-size: 26px; animation-delay: 1.6s; }
.tepe-sus.s3 { left: 22%; bottom: 10px; animation-delay: 3.1s; }
.tepe-sus.s4 { right: 24%; bottom: 16px; animation-delay: 4.4s; }
@keyframes suzul {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ── Örnek diyalog balonları ── */
.sohbet { display: grid; gap: 10px; }
.balon { max-width: 85%; padding: 12px 15px; border-radius: 20px;
  font-size: 14.5px; font-weight: 500; line-height: 1.5; }
.balon-kim { display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; opacity: .65;
  margin-bottom: 3px; }
.balon.karakter { background: var(--gok-ust); border-bottom-left-radius: 6px;
  justify-self: start; }
.balon.cocuk { background: var(--krem); border-bottom-right-radius: 6px;
  justify-self: end; font-weight: 700; }

/* ── SSS: yerleşik <details> — JS'siz açılır kapanır ── */
.sss { border-bottom: 2px solid var(--krem); }
.sss:last-of-type { border-bottom: none; }
.sss summary { list-style: none; cursor: pointer; padding: 13px 0;
  font-size: 15.5px; font-weight: 700; display: flex; align-items: center;
  gap: 10px; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::before { content: "＋"; color: var(--kayisi); font-weight: 800;
  font-size: 18px; line-height: 1; transition: transform .15s; }
.sss[open] summary::before { content: "－"; }
.sss p { margin: 0 0 14px 28px; font-size: 14px; font-weight: 500;
  color: var(--sis); line-height: 1.6; }

/* ── Mini sahne: kendi kendine oynayan döngü (~9 sn) ──
   Zaman çizelgesi TEK süreye bağlı: balonlar aynı 9 sn'lik döngünün
   yüzdelerinde belirip kaybolur — senkron, JS'siz. Hareket azaltmada
   global kural animasyonları söndürür; balonların durağan hâlde de
   görünmesi için aşağıda opaklık ayrıca sabitlenir. */
.sahne-mini { position: relative; height: 175px; margin: -6px -6px 14px;
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, var(--gok-ust) 0%, #FFF6E8 78%, #F4E9C9 100%); }
.oyuncu { position: absolute; pointer-events: none; }
.gunes { top: 10px; right: 16px; font-size: 34px;
  animation: gunes-nefes 5s ease-in-out infinite; }
@keyframes gunes-nefes { 0%,100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(8deg); } }
.bulut { font-size: 30px; opacity: .85; animation: bulut-gec linear infinite; }
.bulut.b1 { top: 14px; animation-duration: 26s; }
.bulut.b2 { top: 44px; font-size: 22px; animation-duration: 37s;
  animation-delay: -14s; }
@keyframes bulut-gec { from { left: -12%; } to { left: 104%; } }
.tavsan { left: 12%; bottom: 12px; font-size: 46px;
  animation: hop 2.6s ease-in-out infinite; }
@keyframes hop { 0%,100% { transform: translateY(0); }
  30% { transform: translateY(-13px) rotate(-4deg); }
  45% { transform: translateY(0); } }
.cocukfig { right: 12%; bottom: 12px; font-size: 42px;
  animation: salla-hafif 3.4s ease-in-out infinite; }
@keyframes salla-hafif { 0%,100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); } }
.bitki { bottom: 6px; font-size: 20px; }
.bitki.b-sol { left: 2%; } .bitki.b-sag { right: 2%; }
.parilti { font-size: 18px; opacity: 0; animation: parla 9s linear infinite; }
.parilti.p1 { left: 40%; top: 34px; }
.parilti.p2 { left: 56%; top: 58px; animation-delay: .4s; }
@keyframes parla { 0%,84% { opacity: 0; transform: scale(.6); }
  90% { opacity: 1; transform: scale(1.15); }
  97%,100% { opacity: 0; transform: scale(.7); } }

.mini-balon { position: absolute; background: #fff; border-radius: 16px;
  padding: 8px 12px; font-size: 13.5px; font-weight: 700;
  box-shadow: 0 4px 12px var(--golge); opacity: 0; white-space: nowrap; }
.mini-balon::after { content: ""; position: absolute; bottom: -7px;
  border: 8px solid transparent; border-bottom: none; border-top-color: #fff; }
.mini-balon.k { left: 10%; bottom: 78px; animation: balon-k 9s ease infinite; }
.mini-balon.k::after { left: 18px; }
.mini-balon.c { right: 10%; bottom: 74px; background: var(--krem);
  animation: balon-c 9s ease infinite; }
.mini-balon.c::after { right: 18px; border-top-color: var(--krem); }
@keyframes balon-k { 0%,6% { opacity: 0; transform: translateY(6px); }
  12%,46% { opacity: 1; transform: translateY(0); }
  52%,100% { opacity: 0; transform: translateY(-4px); } }
@keyframes balon-c { 0%,52% { opacity: 0; transform: translateY(6px); }
  58%,82% { opacity: 1; transform: translateY(0); }
  88%,100% { opacity: 0; transform: translateY(-4px); } }

/* Hareket azaltmada sahne DURAĞAN ama EKSİKSİZ: animasyon sönerken
   balonlar-parıltılar opaklık 0'da kalmasın. */
@media (prefers-reduced-motion: reduce) {
  .mini-balon, .parilti { opacity: 1 !important; }
  .bulut.b1 { left: 20%; } .bulut.b2 { left: 62%; }
}

/* ── Kart girişleri: yumuşak yukarı süzülme; başlangıç durumu
   KEYFRAME'de (from) — animasyon sönerse kart olduğu gibi görünür. ── */
#e-karsilama .kart { animation: kart-gir .5s ease-out backwards; }
#e-karsilama .kart:nth-child(2) { animation-delay: .08s; }
#e-karsilama .kart:nth-child(3) { animation-delay: .16s; }
#e-karsilama .kart:nth-child(4) { animation-delay: .24s; }
#e-karsilama .kart:nth-child(5) { animation-delay: .32s; }
#e-karsilama .kart:nth-child(6) { animation-delay: .40s; }
@keyframes kart-gir { from { opacity: 0; transform: translateY(10px); } }

/* ── Katman onarımı ──
   `.tepe`ye süsler için verilen position:relative onu boyama sırasında
   öne aldı ve başlık, üstüne bindirilmiş kartın tepesini (sekmeleri)
   örtmeye başladı — konumlanmış öğe, konumsuzun ÜSTÜNE çizilir.
   İçerik kabuğu da konumlanıp bir katman yukarı alınıyor. */
.kabuk { position: relative; z-index: 1; }

/* Karşılamadaki karakter kartları: açıklama adın ALTINDA — yan yana
   sarınca "Pamuk meraklı / tavşan" gibi dağılıyordu (görsel turda
   yakalandı). */
#e-karsilama .secim .alt { display: block; margin-top: 2px; }