/* ==========================================================================
   MAVİ KUŞ İLE KELİME KANATLARI
   Tasarım: gökyüzü mavisi / lacivert / beyaz / sarı vurgu / az turuncu
   Kural: hiçbir yazı taşmaz, her buton büyük, her ekran responsive.
   ========================================================================== */

:root{
  --lacivert:      #0B2E5B;
  --lacivert-2:    #123F79;
  --gok:           #1E88E5;
  --gok-acik:      #64B5F6;
  --gok-cok-acik:  #E3F2FD;
  --beyaz:         #FFFFFF;
  --sari:          #FFD54F;
  --sari-koyu:     #F9A825;
  --turuncu:       #FB8C00;
  --yesil:         #2E9E5B;
  --yesil-acik:    #A5D6A7;
  --kirmizi-yumusak:#E57373;
  --gri:           #5A6B80;
  --gri-acik:      #DDE6F0;

  --r-s: 12px;
  --r-m: 18px;
  --r-l: 28px;
  --r-xl: 36px;

  --golge-s: 0 2px 6px rgba(11,46,91,.14);
  --golge-m: 0 6px 18px rgba(11,46,91,.18);
  --golge-l: 0 14px 38px rgba(11,46,91,.26);

  --yazi: clamp(17px, 2.1vw, 22px);
  --yazi-buyuk: clamp(21px, 3vw, 30px);
  --yazi-baslik: clamp(24px, 4vw, 40px);
  --yazi-dev: clamp(38px, 8vw, 82px);

  --dokunma: 56px;
  --pad: clamp(12px, 2.2vw, 26px);

  /* ÖNEMLİ: 1. sınıf için küçük "a" ve "g" TEK KATLI olmalıdır
     (daire + çizgi). Aşağıdaki yazı tiplerinin hepsi tek katlı "a" kullanır. */
  --ff: "Andika", "Poppins", "Century Gothic", "CenturyGothic", "Questrial",
        "Futura", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
  /* Okunacak harf/hece/kelime metinleri için (biraz daha geniş harf aralığı) */
  --ff-okuma: "Andika", "Century Gothic", "CenturyGothic", "Poppins",
        "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%;
  overflow:hidden;
  font-family:var(--ff);
  font-size:var(--yazi);
  color:var(--lacivert);
  background:var(--lacivert);
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}

body{
  display:flex; flex-direction:column;
  overscroll-behavior:none;
  touch-action:manipulation;
}

button{ font-family:inherit; font-size:inherit; color:inherit; cursor:pointer; }
button:focus-visible, [tabindex]:focus-visible{ outline:4px solid var(--sari); outline-offset:3px; }

/* ---------- Gökyüzü arka plan ---------- */
#skyBackdrop{ position:fixed; inset:0; z-index:0; background:linear-gradient(180deg,#061C3A 0%, #0B2E5B 40%, #1E5FA8 100%); transition:background 1.2s ease; }
body.gunduz #skyBackdrop{ background:linear-gradient(180deg,#5EB3F2 0%, #9BD3F7 55%, #DFF1FD 100%); }
.sky-layer{ position:absolute; inset:0; }
.sky-stars{
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.9), transparent),
    radial-gradient(2px 2px at 38% 8%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.6px 1.6px at 62% 22%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 82% 12%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.6px 1.6px at 24% 40%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 72% 46%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 50% 32%, rgba(255,255,255,.7), transparent);
  opacity:1; transition:opacity 1s ease;
}
body.gunduz .sky-stars{ opacity:0; }
.sky-glow{ background:radial-gradient(60% 45% at 50% 100%, rgba(255,213,79,.20), transparent 70%); }

/* ---------- Üst bar ---------- */
.topbar{
  position:relative; z-index:5;
  display:flex; align-items:center; gap:10px;
  padding:8px clamp(8px,1.6vw,18px);
  background:rgba(11,46,91,.92);
  color:var(--beyaz);
  box-shadow:var(--golge-m);
  flex:0 0 auto;
  min-height:60px;
}
.topbar[hidden]{ display:none; }
.tb-btn{
  display:inline-flex; align-items:center; gap:8px;
  min-height:46px; padding:6px 14px;
  border:none; border-radius:var(--r-m);
  background:rgba(255,255,255,.16); color:var(--beyaz);
  font-weight:700; font-size:clamp(15px,1.8vw,19px);
  transition:transform .12s ease, background .15s ease;
}
.tb-btn:active{ transform:scale(.94); }
.tb-btn:hover{ background:rgba(255,255,255,.28); }
.tb-icon{ min-width:46px; justify-content:center; padding:6px 10px; font-size:20px; }
.tb-icon.kapali{ opacity:.45; }
.tb-title{
  flex:1 1 auto; min-width:0;
  font-weight:800; font-size:clamp(16px,2.2vw,24px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:center;
}
.tb-right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.tb-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--sari); color:var(--lacivert);
  font-weight:800; border-radius:999px;
  padding:8px 14px; min-height:44px;
  font-size:clamp(15px,1.8vw,19px);
}
.tb-chip.pop{ animation:chipPop .5s ease; }
@keyframes chipPop{ 0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)} }
@media (max-width:760px){
  .tb-txt{ display:none; }
  /* Başlık kesilmesin: dar ekranda iki satıra sarsın */
  .tb-title{
    white-space:normal; overflow-wrap:break-word;
    font-size:13px; line-height:1.2; max-height:2.5em; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:clip;
  }
}

/* ---------- Uygulama alanı ---------- */
.app{
  position:relative; z-index:2;
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:var(--pad);
  display:flex; flex-direction:column;
}
.ekran{
  width:100%; max-width:1180px; margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(10px,1.8vw,20px);
  flex:1 1 auto;
  animation:ekranGir .35s ease both;
}
@keyframes ekranGir{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.ekran.orta{ justify-content:center; align-items:center; text-align:center; }

/* ---------- Tipografi ---------- */
h1,h2,h3{ margin:0; line-height:1.25; overflow-wrap:break-word; }
h1{ font-size:var(--yazi-baslik); font-weight:900; }
h2{ font-size:clamp(20px,3vw,30px); font-weight:800; }
h3{ font-size:clamp(18px,2.4vw,24px); font-weight:800; }
p{ margin:0; line-height:1.6; overflow-wrap:break-word; }
.beyaz{ color:var(--beyaz); }
.ortala{ text-align:center; }
.kucuk{ font-size:clamp(14px,1.7vw,17px); }
.solgun{ color:var(--gri); }

/* ---------- Kart ---------- */
.kart{
  background:var(--beyaz);
  border-radius:var(--r-l);
  padding:clamp(14px,2.4vw,26px);
  box-shadow:var(--golge-m);
  width:100%;
}
.kart.sicak{ background:linear-gradient(180deg,#FFFFFF 0%, #F3F8FF 100%); }

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--dokunma); padding:12px clamp(16px,2.4vw,28px);
  border:none; border-radius:var(--r-l);
  background:var(--gok); color:var(--beyaz);
  font-weight:800; font-size:clamp(16px,2vw,21px);
  box-shadow:0 5px 0 rgba(0,0,0,.16), var(--golge-s);
  transition:transform .12s ease, filter .15s ease;
  text-align:center; line-height:1.25;
  max-width:100%;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.16); }
.btn[disabled]{ opacity:.5; pointer-events:none; }
.btn--dev{ font-size:var(--yazi-buyuk); padding:18px 42px; min-height:72px; border-radius:var(--r-xl); }
.btn--sari{ background:var(--sari); color:var(--lacivert); }
.btn--yesil{ background:var(--yesil); }
.btn--turuncu{ background:var(--turuncu); }
.btn--acik{ background:var(--gok-cok-acik); color:var(--lacivert); box-shadow:0 4px 0 #B9D4EF; }
.btn--hayalet{ background:rgba(255,255,255,.18); color:var(--beyaz); box-shadow:none; border:2px solid rgba(255,255,255,.5); }
.btn--tam{ width:100%; }

/* ---------- Menü ızgarası ---------- */
.menu-grid{
  display:grid; gap:clamp(10px,1.8vw,18px);
  grid-template-columns:repeat(auto-fit, minmax(clamp(150px,22vw,230px),1fr));
  width:100%;
}
.menu-kart{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:clamp(110px,15vw,150px); padding:16px 12px;
  border:none; border-radius:var(--r-l);
  background:var(--beyaz); color:var(--lacivert);
  box-shadow:var(--golge-m);
  font-weight:800; font-size:clamp(15px,1.9vw,20px);
  transition:transform .15s ease, box-shadow .15s ease;
  text-align:center;
}
.menu-kart:hover{ transform:translateY(-5px); box-shadow:var(--golge-l); }
.menu-kart:active{ transform:translateY(0) scale(.97); }
.menu-kart .ikon{ font-size:clamp(30px,5vw,46px); line-height:1; }
.menu-kart.kilitli{ opacity:.55; }
.menu-kart .alt{ font-size:clamp(12px,1.5vw,15px); font-weight:600; color:var(--gri); }

/* ---------- Mavi Kuş karakteri ---------- */
.kus{ display:inline-block; width:clamp(84px,12vw,150px); aspect-ratio:1/1; position:relative; }
.kus svg{ width:100%; height:100%; overflow:visible; display:block; }
.kus .kanat{ transform-origin:52px 80px; }
.kus .gaga{ transform-origin:116px 56px; }
.kus.durum-ucuyor .kanat{ animation:kanatCirp .34s ease-in-out infinite alternate; }
.kus.durum-ucuyor{ animation:suzul 2.4s ease-in-out infinite alternate; }
.kus.durum-konusuyor .gaga{ animation:gagaOynat .28s ease-in-out infinite alternate; }
.kus.durum-konusuyor .kanat{ animation:kanatCirp 1.1s ease-in-out infinite alternate; }
.kus.durum-seviniyor{ animation:zipla .5s ease-in-out 3; }
.kus.durum-seviniyor .kanat{ animation:kanatCirp .18s linear infinite alternate; }
.kus.durum-alkis .kanat{ animation:kanatCirp .14s linear infinite alternate; }
.kus.durum-dusunuyor{ animation:egil 2s ease-in-out infinite alternate; }
.kus.durum-sasirdi{ animation:sasir .6s ease-in-out; }
.kus.durum-ipucu .kanat{ animation:kanatCirp .6s ease-in-out infinite alternate; }
.kus .balon-dusunce{ opacity:0; transition:opacity .3s; }
.kus.durum-dusunuyor .balon-dusunce{ opacity:1; }
@keyframes kanatCirp{ from{ transform:rotate(-16deg) } to{ transform:rotate(36deg) } }
@keyframes gagaOynat{ from{ transform:rotate(0) } to{ transform:rotate(11deg) } }
@keyframes suzul{ from{ transform:translateY(-7px) } to{ transform:translateY(7px) } }
@keyframes zipla{ 0%,100%{ transform:translateY(0) } 45%{ transform:translateY(-24px) } }
@keyframes egil{ from{ transform:rotate(-7deg) } to{ transform:rotate(7deg) } }
@keyframes sasir{ 0%,100%{ transform:scale(1) } 35%{ transform:scale(1.16) rotate(-6deg) } }

/* ---------- Rehber balonu ---------- */
.guide{
  position:relative; z-index:3;
  display:flex; align-items:flex-end; gap:clamp(6px,1.4vw,16px);
  width:100%; max-width:1180px; margin:0 auto clamp(6px,1.4vw,14px);
  padding:0 var(--pad);
  flex:0 0 auto;
}
.guide[hidden]{ display:none; }
.guide-bird{ flex:0 0 auto; width:clamp(70px,9vw,116px); }
.guide-bubble{
  position:relative; flex:1 1 auto; min-width:0;
  background:var(--beyaz); border-radius:var(--r-l);
  padding:clamp(10px,1.8vw,18px) clamp(14px,2vw,22px);
  box-shadow:var(--golge-m);
  display:flex; align-items:center; gap:12px;
}
.guide-bubble::before{
  content:""; position:absolute; left:-12px; bottom:22px;
  border:12px solid transparent; border-right-color:var(--beyaz); border-left:0;
}
.guide-bubble p{ flex:1 1 auto; min-width:0; font-size:clamp(16px,2vw,21px); font-weight:600; }
.guide-listen{
  flex:0 0 auto; min-height:46px; padding:8px 14px;
  border:none; border-radius:var(--r-m);
  background:var(--gok-cok-acik); color:var(--lacivert); font-weight:800;
  font-size:clamp(14px,1.7vw,17px); white-space:nowrap;
}
.guide-listen:active{ transform:scale(.94); }

/* ---------- Yönerge şeridi ---------- */
.yonerge{
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.94); border-radius:var(--r-l);
  padding:clamp(10px,1.6vw,16px) clamp(14px,2vw,20px);
  box-shadow:var(--golge-s); width:100%;
}
.yonerge p{ flex:1 1 auto; min-width:0; font-weight:700; font-size:clamp(16px,2vw,21px); }
.yonerge .ses-btn{
  flex:0 0 auto; min-width:52px; min-height:52px; border:none; border-radius:50%;
  background:var(--sari); font-size:24px; box-shadow:var(--golge-s);
}
.yonerge .ses-btn:active{ transform:scale(.92); }

/* ---------- İlerleme çubuğu ---------- */
.ilerleme{ width:100%; height:16px; background:rgba(255,255,255,.35); border-radius:999px; overflow:hidden; }
.ilerleme > i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--sari),var(--turuncu)); border-radius:999px; transition:width .5s ease; }
.adim-noktalari{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.adim-noktalari span{ width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,.4); }
.adim-noktalari span.tamam{ background:var(--sari); }
.adim-noktalari span.aktif{ background:var(--beyaz); transform:scale(1.25); }

/* ---------- Harita ---------- */
.harita{ display:flex; flex-direction:column; gap:clamp(12px,2vw,22px); width:100%; }
.ada{
  position:relative; display:flex; align-items:center; gap:clamp(12px,2vw,22px);
  background:var(--beyaz); border-radius:var(--r-xl);
  padding:clamp(14px,2.2vw,24px);
  box-shadow:var(--golge-m); border-left:12px solid var(--gok);
  text-align:left; border-top:none; border-right:none; border-bottom:none;
  width:100%; transition:transform .15s ease, box-shadow .15s ease;
}
.ada:hover{ transform:translateY(-4px); box-shadow:var(--golge-l); }
.ada:active{ transform:scale(.99); }
.ada.kilitli{ opacity:.6; }
.ada .ada-ikon{ font-size:clamp(34px,5.5vw,58px); flex:0 0 auto; line-height:1; }
.ada .ada-bilgi{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.ada .ada-ad{ font-size:clamp(18px,2.6vw,26px); font-weight:900; }
.ada .ada-tema{ font-size:clamp(13px,1.7vw,17px); color:var(--gri); font-weight:600; }
.ada .ada-harfler{ display:flex; flex-wrap:wrap; gap:5px; }
.ada .mini-harf{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 6px; border-radius:9px;
  background:var(--gok-cok-acik); color:var(--lacivert);
  font-weight:900; font-size:16px;
}
.ada .mini-harf.ogrenildi{ background:var(--yesil); color:#fff; }
.ada .ada-durum{ flex:0 0 auto; text-align:center; font-size:clamp(12px,1.5vw,15px); font-weight:800; color:var(--gri); }
.ada .ada-durum .yuzde{ font-size:clamp(20px,2.6vw,28px); color:var(--gok); display:block; }

/* ---------- Seviye listesi ---------- */
.seviye-grid{
  display:grid; gap:clamp(10px,1.6vw,16px);
  grid-template-columns:repeat(auto-fill, minmax(clamp(128px,17vw,180px),1fr));
}
.seviye{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:clamp(104px,13vw,140px); padding:12px 8px;
  border:none; border-radius:var(--r-l);
  background:var(--beyaz); box-shadow:var(--golge-m);
  color:var(--lacivert); font-weight:800;
  transition:transform .15s ease;
  position:relative; overflow:hidden;
}
.seviye:hover{ transform:translateY(-4px); }
.seviye .sv-harf{ font-size:clamp(26px,4vw,42px); font-weight:900; line-height:1; }
.seviye .sv-ad{ font-size:clamp(12px,1.5vw,15px); font-weight:700; text-align:center; line-height:1.25; }
.seviye .sv-yildiz{ font-size:14px; letter-spacing:1px; color:var(--sari-koyu); }
.seviye.kilitli{ background:#EDF2F8; color:#94A5B8; }
.seviye.tam-surum{ background:linear-gradient(160deg,#FFF8E1,#FFFFFF); color:#8D6E00; opacity:1; }
.seviye.tam-surum .sv-yildiz{ color:#F9A825; font-weight:900; letter-spacing:0; }
.seviye.tamam{ background:linear-gradient(160deg,#E8F7EE,#FFFFFF); }
.seviye.tamam::after{ content:"✓"; position:absolute; top:6px; right:10px; color:var(--yesil); font-size:20px; font-weight:900; }
.seviye .rozet-tur{ position:absolute; top:6px; left:8px; font-size:15px; }

/* ---------- Oyun alanı ---------- */
.oyun{
  display:flex; flex-direction:column; gap:clamp(10px,1.8vw,18px);
  width:100%; flex:1 1 auto;
}
.oyun-govde{
  background:rgba(255,255,255,.96); border-radius:var(--r-xl);
  padding:clamp(14px,2.4vw,26px); box-shadow:var(--golge-m);
  display:flex; flex-direction:column; gap:clamp(10px,1.8vw,18px);
  flex:1 1 auto; min-height:0;
}

/* Seçenek ızgarası (resimli) */
.secenek-grid{
  display:grid; gap:clamp(8px,1.6vw,16px);
  grid-template-columns:repeat(auto-fit, minmax(clamp(112px,15vw,180px),1fr));
  width:100%;
}
.secenek-grid.iki{ grid-template-columns:repeat(2,1fr); }
.secenek-grid.uc{ grid-template-columns:repeat(auto-fit,minmax(clamp(120px,20vw,220px),1fr)); }
.sec-kart{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:clamp(104px,15vw,168px); padding:12px 8px;
  border:4px solid var(--gri-acik); border-radius:var(--r-l);
  background:var(--beyaz); color:var(--lacivert); font-weight:800;
  transition:transform .14s ease, border-color .2s ease, background .2s ease;
  position:relative; overflow:hidden;
}
.sec-kart .resim{ font-size:clamp(34px,6.5vw,64px); line-height:1; }
.sec-kart .etiket{ font-size:clamp(14px,1.9vw,20px); text-align:center; line-height:1.2; word-break:break-word; }
.sec-kart:hover{ transform:translateY(-4px); border-color:var(--gok-acik); }
.sec-kart:active{ transform:scale(.96); }
.sec-kart.dogru{ border-color:var(--yesil); background:#E9F8EF; }
.sec-kart.dogru::after{ content:"✓ Doğru"; position:absolute; top:4px; right:6px; font-size:12px; font-weight:900; color:var(--yesil); }
.sec-kart.yanlis{ border-color:var(--turuncu); background:#FFF4E5; animation:titre .4s ease; }
.sec-kart.yanlis::after{ content:"↻ Tekrar"; position:absolute; top:4px; right:6px; font-size:12px; font-weight:900; color:var(--turuncu); }
.sec-kart.secili{ border-color:var(--gok); background:var(--gok-cok-acik); }
.sec-kart.pasif{ pointer-events:none; opacity:.55; }
@keyframes titre{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

/* Okunacak her metin tek katlı "a"/"g" olan yazı tipiyle gösterilir. */
.dev-yazi, .kitap-sayfa, .suruk, .hedef, .av-harf, .vagon,
.sec-kart .etiket, .harf-kutu .glif, .balon, .sahne-kart .yazi,
.mk-yazi, .hece-yazi, .okuma-metni{
  font-family:var(--ff-okuma);
}

/* Tek harfler yazı tipiyle değil, kendi çizim yollarımızla çizilir:
   böylece "a" her zaman dik temel harflerdeki gibi tek katlı görünür. */
.glif-svg{ display:block; width:1em; height:1.2em; overflow:visible; }
.glif-svg path{ fill:none; stroke:currentColor; stroke-width:15; stroke-linecap:round; stroke-linejoin:round; }
.glif-svg.ince path{ stroke-width:12; }
.glif-kutu{ display:inline-flex; align-items:center; justify-content:center; line-height:1; }

/* Büyük harf/hece/kelime gösterimi */
.dev-yazi{
  font-size:var(--yazi-dev); font-weight:900; line-height:1.1;
  color:var(--lacivert); text-align:center; letter-spacing:.02em;
  word-break:break-word;
}
.dev-yazi .vurgu{ color:var(--turuncu); }
.harf-vitrin{
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,4vw,52px);
  flex-wrap:wrap;
}
.harf-kutu{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--gok-cok-acik); border-radius:var(--r-l);
  padding:clamp(12px,2.4vw,26px) clamp(20px,4vw,46px);
  box-shadow:var(--golge-s);
  animation:harfGel .6s cubic-bezier(.2,1.4,.4,1) both;
}
.harf-kutu:nth-child(2){ animation-delay:.35s; }
.harf-kutu .glif{ font-size:clamp(56px,12vw,124px); font-weight:900; line-height:1; color:var(--lacivert); }
.harf-kutu .tip{ font-size:clamp(12px,1.6vw,16px); font-weight:800; color:var(--gri); }
@keyframes harfGel{ from{ opacity:0; transform:scale(.4) rotate(-12deg) } to{ opacity:1; transform:none } }

/* Harf avı ızgarası */
.harf-avi{
  display:grid; gap:clamp(6px,1.2vw,12px);
  grid-template-columns:repeat(auto-fit,minmax(clamp(56px,8vw,88px),1fr));
}
.av-harf{
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(56px,8vw,88px);
  border:3px solid var(--gri-acik); border-radius:var(--r-m);
  background:var(--beyaz); color:var(--lacivert);
  font-size:clamp(24px,4.2vw,42px); font-weight:900;
  transition:transform .12s ease, background .2s;
}
.av-harf:active{ transform:scale(.92); }
.av-harf.dogru{ background:var(--yesil); color:#fff; border-color:var(--yesil); }
.av-harf.yanlis{ background:#FFF4E5; border-color:var(--turuncu); animation:titre .35s ease; }

/* Yazma alanı */
.yazma-sahne{
  position:relative; width:100%;
  max-width:min(460px, 78vh);
  margin:0 auto; aspect-ratio:5/6;
  background:linear-gradient(180deg,#FFFDF6,#F4F8FF);
  border-radius:var(--r-l); box-shadow:inset 0 0 0 3px var(--gri-acik);
  touch-action:none; overflow:hidden;
}
.yazma-sahne svg{ position:absolute; inset:0; width:100%; height:100%; }
.yz-satir{ stroke:#C9D8EA; stroke-width:2; }
.yz-satir.orta{ stroke-dasharray:8 8; }
.yz-kilavuz{ fill:none; stroke:#D3E1F2; stroke-width:16; stroke-linecap:round; stroke-linejoin:round; }
.yz-kilavuz.silik{ stroke:#E7EEF7; }
.yz-kilavuz.gizli{ stroke:transparent; }
.yz-nokta{ fill:#B9CFE6; }
.yz-nokta.gecildi{ fill:var(--yesil-acik); }
.yz-cizim{ fill:none; stroke:var(--gok); stroke-width:14; stroke-linecap:round; stroke-linejoin:round; }
.yz-bitmis{ fill:none; stroke:var(--yesil); stroke-width:14; stroke-linecap:round; stroke-linejoin:round; }
.yz-baslangic{ fill:var(--turuncu); }
.yz-ok{ fill:var(--turuncu); }
.yz-kus{ position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; pointer-events:none; transition:transform .05s linear; }
.yazma-arac{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.tur-etiket{ display:inline-flex; align-items:center; gap:8px; background:var(--gok-cok-acik); border-radius:999px; padding:8px 18px; font-weight:800; font-size:clamp(14px,1.8vw,18px); }

/* Sürükle-bırak kartları */
.kart-havuzu{ display:flex; flex-wrap:wrap; gap:clamp(8px,1.4vw,14px); justify-content:center; min-height:76px; }
.suruk{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:clamp(58px,8vw,92px); min-height:clamp(58px,8vw,92px);
  padding:6px 14px;
  border-radius:var(--r-m); background:var(--sari); color:var(--lacivert);
  font-size:clamp(22px,3.6vw,38px); font-weight:900;
  box-shadow:0 5px 0 var(--sari-koyu); touch-action:none; user-select:none;
  transition:transform .12s ease;
}
.suruk.kelime{ font-size:clamp(17px,2.4vw,26px); min-width:auto; padding:10px 20px; }
.suruk.tutuluyor{ transform:scale(1.14) rotate(-3deg); box-shadow:var(--golge-l); z-index:60; position:fixed; pointer-events:none; }
.suruk.yerlesti{ background:var(--yesil); color:#fff; box-shadow:0 5px 0 #1E7A44; }
.suruk.bos{ visibility:hidden; }
.hedef-sira{ display:flex; flex-wrap:wrap; gap:clamp(8px,1.4vw,14px); justify-content:center; min-height:clamp(70px,10vw,104px); align-items:center; }
.hedef{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:clamp(58px,8vw,92px); min-height:clamp(58px,8vw,92px);
  border:4px dashed var(--gok-acik); border-radius:var(--r-m);
  background:rgba(227,242,253,.55); color:var(--lacivert);
  font-size:clamp(22px,3.6vw,38px); font-weight:900;
}
.hedef.genis{ min-width:clamp(90px,16vw,170px); font-size:clamp(17px,2.4vw,26px); }
.hedef.uzerinde{ border-color:var(--turuncu); background:#FFF3E0; transform:scale(1.05); }
.hedef.dolu{ border-style:solid; border-color:var(--yesil); background:#E9F8EF; }

/* Yumurta / kelime yuvası */
.yuva-sahne{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.yumurta{ font-size:clamp(46px,9vw,92px); transition:transform .3s ease; }
.yumurta.catladi{ animation:catla .8s ease both; }
@keyframes catla{ 0%{transform:scale(1)} 30%{transform:scale(1.2) rotate(-8deg)} 60%{transform:scale(1.2) rotate(8deg)} 100%{transform:scale(1)} }

/* Cümle treni */
.tren{ display:flex; align-items:flex-end; gap:4px; flex-wrap:wrap; justify-content:center; }
.tren .lokomotif{ font-size:clamp(34px,6vw,58px); }
.tren.hareket{ animation:trenGit 1.6s ease-in forwards; }
@keyframes trenGit{ to{ transform:translateX(40vw); opacity:0 } }
.vagon{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:clamp(58px,8vw,84px); padding:10px 18px;
  border-radius:var(--r-m) var(--r-m) 6px 6px;
  background:var(--turuncu); color:#fff; font-weight:800;
  font-size:clamp(16px,2.2vw,24px); box-shadow:0 5px 0 #C25E00;
  position:relative;
}
.vagon::after{ content:"● ●"; position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); font-size:12px; color:#2A2A2A; letter-spacing:8px; }

/* Balonlar */
.balon-alan{ position:relative; width:100%; height:clamp(300px,52vh,520px); overflow:hidden; border-radius:var(--r-l); background:linear-gradient(180deg,#E3F2FD,#FFFFFF); }
.balon{
  position:absolute; display:flex; align-items:center; justify-content:center;
  width:clamp(64px,10vw,104px); height:clamp(78px,12vw,124px);
  border-radius:50% 50% 46% 46%;
  color:#fff; font-weight:900; font-size:clamp(19px,3vw,30px);
  box-shadow:inset -8px -8px 0 rgba(0,0,0,.08);
  will-change:transform;
}
.balon::after{ content:""; position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:inherit; }
.balon{ animation:balonYuksel linear forwards; }
@keyframes balonYuksel{ from{ transform:translateY(0) } to{ transform:translateY(var(--ucus,-700px)) } }
.balon.patladi{ animation:patla .32s ease forwards; }
@keyframes patla{ to{ transform:scale(1.7); opacity:0 } }

/* Okuma kitabı */
.kitap-sayfa{
  background:#FFFDF5; border-radius:var(--r-l);
  padding:clamp(16px,3vw,32px); box-shadow:var(--golge-m);
  font-size:clamp(20px,2.9vw,32px); line-height:1.9; font-weight:700;
  color:#22303F; text-align:left;
}
.kitap-sayfa .cumle{ display:inline; padding:3px 4px; border-radius:8px; transition:background .25s; }
.kitap-sayfa .cumle.aktif{ background:var(--sari); }
.okuma-modlari{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* Hikâye sıralama */
.sirala-alan{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.sahne-kart{
  width:clamp(96px,15vw,160px); min-height:clamp(110px,16vw,180px);
  border-radius:var(--r-m); background:var(--beyaz); box-shadow:var(--golge-s);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:10px; touch-action:none; border:4px solid var(--gri-acik);
}
.sahne-kart .resim{ font-size:clamp(30px,5.4vw,52px); }
.sahne-kart .yazi{ font-size:clamp(12px,1.5vw,15px); font-weight:700; text-align:center; line-height:1.3; }
.sahne-kart .sira-no{ font-size:13px; font-weight:900; color:var(--gok); }

/* Yuva ekranı */
.yuva-gorsel{
  position:relative; width:100%; min-height:clamp(200px,34vh,320px);
  border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(180deg,#BBDEFB,#E8F5E9);
  display:flex; align-items:center; justify-content:center;
}
.yuva-katman{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:clamp(30px,6vw,62px); }
.yuva-esya{ position:absolute; font-size:clamp(24px,4.4vw,44px); animation:hafifSalin 3s ease-in-out infinite alternate; }
@keyframes hafifSalin{ from{ transform:translateY(-4px) } to{ transform:translateY(4px) } }

/* Rozet */
.rozet-grid{ display:grid; gap:clamp(10px,1.6vw,16px); grid-template-columns:repeat(auto-fill,minmax(clamp(130px,18vw,190px),1fr)); }
.rozet{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  background:var(--beyaz); border-radius:var(--r-l); padding:14px 10px; box-shadow:var(--golge-s);
}
.rozet .ikon{ font-size:clamp(30px,5vw,46px); }
.rozet .ad{ font-weight:800; font-size:clamp(13px,1.7vw,17px); line-height:1.25; }
.rozet .aciklama{ font-size:clamp(11px,1.4vw,14px); color:var(--gri); line-height:1.35; }
.rozet.kapali{ opacity:.42; filter:grayscale(1); }

/* Yetişkin alanı tablosu */
.istatistik-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(clamp(140px,20vw,220px),1fr)); }
.istat{
  background:var(--beyaz); border-radius:var(--r-m); padding:14px; box-shadow:var(--golge-s);
  display:flex; flex-direction:column; gap:4px;
}
.istat .deger{ font-size:clamp(22px,3.4vw,34px); font-weight:900; color:var(--gok); }
.istat .ad{ font-size:clamp(12px,1.6vw,15px); color:var(--gri); font-weight:700; }
.beceri-satir{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--gri-acik); flex-wrap:wrap; }
.beceri-satir .bs-ad{ flex:1 1 140px; min-width:0; font-weight:700; font-size:clamp(14px,1.7vw,17px); }
.beceri-cubuk{ flex:2 1 160px; height:14px; background:var(--gri-acik); border-radius:999px; overflow:hidden; }
.beceri-cubuk > i{ display:block; height:100%; background:var(--gok); border-radius:999px; }
.beceri-cubuk > i.dusuk{ background:var(--turuncu); }
.beceri-cubuk > i.iyi{ background:var(--yesil); }
.beceri-satir .bs-deger{ flex:0 0 62px; text-align:right; font-weight:800; font-size:clamp(13px,1.6vw,16px); }
.harf-rozet-satir{ display:flex; flex-wrap:wrap; gap:6px; }
.hr{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 8px; border-radius:10px;
  font-weight:900; font-size:17px; background:var(--gri-acik); color:var(--gri);
}
.hr.ogrenildi{ background:var(--yesil); color:#fff; }
.hr.zorlaniyor{ background:var(--turuncu); color:#fff; }

/* Mini kitap */
.mk-sayfa{
  background:#FFFDF5; border-radius:var(--r-l); padding:clamp(14px,2.4vw,24px);
  box-shadow:var(--golge-m); display:flex; flex-direction:column; gap:12px;
}
.mk-gorsel{ font-size:clamp(50px,11vw,110px); text-align:center; line-height:1; }
.mk-yazi{
  width:100%; min-height:92px; resize:none;
  border:3px solid var(--gri-acik); border-radius:var(--r-m);
  padding:12px; font-family:inherit; font-size:clamp(17px,2.2vw,23px);
  font-weight:700; color:var(--lacivert); line-height:1.6;
}
.mk-yazi:focus{ outline:none; border-color:var(--gok); }
.emoji-secici{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.emoji-secici button{
  min-width:52px; min-height:52px; border:3px solid var(--gri-acik); border-radius:var(--r-s);
  background:#fff; font-size:26px;
}
.emoji-secici button.secili{ border-color:var(--gok); background:var(--gok-cok-acik); }

/* Sertifika */
.sertifika{
  background:#FFFEF7; border:14px double var(--sari-koyu); border-radius:var(--r-m);
  padding:clamp(18px,4vw,44px); text-align:center;
  display:flex; flex-direction:column; gap:clamp(8px,1.6vw,16px);
  box-shadow:var(--golge-l);
}
.sertifika .st-ust{ font-size:clamp(13px,1.8vw,17px); letter-spacing:.22em; font-weight:800; color:var(--gri); }
.sertifika .st-baslik{ font-size:clamp(26px,5vw,52px); font-weight:900; color:var(--lacivert); }
.sertifika .st-isim{ font-size:clamp(24px,4.4vw,44px); font-weight:900; color:var(--turuncu); border-bottom:3px dashed var(--gri-acik); padding-bottom:8px; word-break:break-word; }
.sertifika .st-metin{ font-size:clamp(15px,2vw,21px); line-height:1.7; }
.sertifika .st-imza{ display:flex; justify-content:space-around; gap:14px; flex-wrap:wrap; margin-top:10px; font-weight:800; font-size:clamp(13px,1.7vw,16px); }

/* Isınma oyunları */
.iz-alan{ position:relative; width:100%; height:clamp(230px,42vh,400px); background:#fff; border-radius:var(--r-l); box-shadow:var(--golge-s); touch-action:none; overflow:hidden; }
.iz-alan svg{ position:absolute; inset:0; width:100%; height:100%; }
.iz-yol{ fill:none; stroke:#D6E6F7; stroke-width:26; stroke-linecap:round; stroke-linejoin:round; }
.iz-gecti{ fill:none; stroke:var(--sari); stroke-width:26; stroke-linecap:round; stroke-linejoin:round; }
.iz-kus{ position:absolute; font-size:34px; margin:-20px 0 0 -18px; pointer-events:none; }

/* Ayarlar */
.ayar-satir{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 0; border-bottom:1px solid var(--gri-acik);
}
.ayar-satir .ay-ad{ flex:1 1 190px; min-width:0; font-weight:800; font-size:clamp(15px,1.9vw,19px); }
.ayar-satir .ay-alt{ font-size:clamp(12px,1.5vw,15px); color:var(--gri); font-weight:600; display:block; }
.anahtar{
  position:relative; width:86px; height:46px; border-radius:999px;
  background:var(--gri-acik); border:none; flex:0 0 auto; transition:background .2s;
}
.anahtar::after{ content:""; position:absolute; top:4px; left:4px; width:38px; height:38px; border-radius:50%; background:#fff; box-shadow:var(--golge-s); transition:transform .2s; }
.anahtar.acik{ background:var(--yesil); }
.anahtar.acik::after{ transform:translateX(40px); }
input[type=range]{ flex:1 1 160px; min-width:120px; height:44px; accent-color:var(--gok); }
select, input[type=text]{
  flex:1 1 180px; min-width:0; min-height:52px; padding:10px 14px;
  border:3px solid var(--gri-acik); border-radius:var(--r-m);
  font-family:inherit; font-size:clamp(15px,1.9vw,19px); font-weight:700; color:var(--lacivert); background:#fff;
}

/* Toast */
.toast-layer{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; width:min(94vw,560px); pointer-events:none; }
.toast{
  background:var(--lacivert); color:#fff; border-radius:var(--r-l);
  padding:12px 22px; font-weight:800; font-size:clamp(15px,1.9vw,19px);
  box-shadow:var(--golge-l); animation:toastGel .35s ease both, toastGit .35s ease 2.4s both;
  max-width:100%; text-align:center;
}
.toast.basari{ background:var(--yesil); }
.toast.tuy{ background:var(--sari); color:var(--lacivert); }
@keyframes toastGel{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
@keyframes toastGit{ to{ opacity:0; transform:translateY(-14px) } }

/* Modal */
.modal-layer{ position:fixed; inset:0; z-index:95; background:rgba(6,22,44,.72); display:flex; align-items:center; justify-content:center; padding:var(--pad); overflow-y:auto; }
.modal-layer[hidden]{ display:none; }
.modal{
  background:#fff; border-radius:var(--r-xl); padding:clamp(18px,3.4vw,34px);
  width:min(96vw,620px); box-shadow:var(--golge-l);
  display:flex; flex-direction:column; gap:clamp(10px,2vw,18px); align-items:center; text-align:center;
  animation:modalGel .35s cubic-bezier(.2,1.3,.4,1) both; max-height:92vh; overflow-y:auto;
}
@keyframes modalGel{ from{ opacity:0; transform:scale(.86) translateY(20px) } to{ opacity:1; transform:none } }
.modal h2{ color:var(--lacivert); }
.modal .modal-btnlar{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%; }

/* Konfeti */
.confetti-layer{ position:fixed; inset:0; z-index:88; pointer-events:none; overflow:hidden; }
.konfeti{ position:absolute; width:12px; height:16px; border-radius:3px; animation:dus 2.6s linear forwards; }
@keyframes dus{ to{ transform:translateY(110vh) rotate(760deg); opacity:.2 } }

/* Açılış */
.acilis{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,3vw,28px); flex:1 1 auto; text-align:center; }
.acilis .isik{ width:22px; height:22px; border-radius:50%; background:var(--gok-acik); box-shadow:0 0 40px 18px rgba(100,181,246,.75); animation:isikBuyu 1.6s ease forwards; }
@keyframes isikBuyu{ from{ transform:scale(.2); opacity:.2 } to{ transform:scale(1); opacity:1 } }
.acilis .oyun-adi{ font-size:clamp(28px,6.4vw,68px); font-weight:900; color:#fff; text-shadow:0 6px 22px rgba(0,0,0,.4); line-height:1.15; }
.acilis .alt-baslik{ color:var(--sari); font-weight:800; font-size:clamp(15px,2.2vw,22px); letter-spacing:.1em; }

/* Yardımcılar */
.satir{ display:flex; gap:clamp(8px,1.6vw,16px); flex-wrap:wrap; align-items:center; }
.satir.ortala{ justify-content:center; }
.satir.aralik{ justify-content:space-between; }
.sutun{ display:flex; flex-direction:column; gap:clamp(8px,1.6vw,16px); }
.buyu{ flex:1 1 auto; min-width:0; }
.gizli{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* Yazdırma (sertifika + mini kitap) */
@media print{
  #skyBackdrop,#topBar,#guide,.toast-layer,.confetti-layer,.yazdirma-gizle{ display:none !important; }
  html,body{ height:auto; overflow:visible; background:#fff; }
  .app{ overflow:visible; padding:0; }
  .sertifika{ box-shadow:none; }
}

/* Kısa ekranlar */
@media (max-height:560px){
  :root{ --dokunma:48px; --yazi-dev:clamp(30px,7vw,54px); }
  .guide-bird{ width:64px; }
  .yazma-sahne{ max-width:min(320px,64vh); }
}
@media (max-width:420px){
  :root{ --pad:10px; }
  .ada{ flex-wrap:wrap; }
  .ada .ada-durum{ width:100%; text-align:left; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}