/* ===== Bilgi Macerası — çocuk dostu, mobil öncelikli ===== */
:root{
  --mor:#6c4cf1; --mor-koyu:#4f34c9;
  --pembe:#ff5d8f; --turuncu:#ff9f43; --sari:#ffd23f;
  --yesil:#2ecc71; --yesil-koyu:#27ae60; --kirmizi:#ff5252;
  --mavi:#3aa0ff; --gok:#eef3ff;
  --metin:#2a2352; --gri:#8a86a8; --beyaz:#fff;
  --golge:0 8px 24px rgba(60,40,150,.18);
  --radius:22px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  color:var(--metin);
  background:linear-gradient(160deg,#a18cf0 0%,#8f7bf0 30%,#7a9dff 100%);
  min-height:100dvh; overscroll-behavior:none;
}
#oyun{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;position:relative}

/* ÜST BAR */
#ustbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;
  padding:12px 14px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  box-shadow:0 2px 12px rgba(60,40,150,.12);
}
.ustbar-orta{flex:1;text-align:center;font-weight:800;color:var(--mor-koyu)}
#ustbarBaslik{font-size:1.05rem}
.rozet{background:var(--sari);color:#7a5b00;font-weight:800;padding:6px 12px;border-radius:999px;font-size:.95rem;white-space:nowrap}
.ikon-btn{border:none;background:var(--gok);color:var(--mor-koyu);width:40px;height:40px;border-radius:14px;font-size:1.1rem;cursor:pointer;font-weight:800}
.ikon-btn:active{transform:scale(.92)}

/* EKRANLAR */
.ekran{display:none;flex-direction:column;flex:1;padding:20px 18px 32px;animation:gir .35s ease}
.ekran.aktif{display:flex}
@keyframes gir{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ekran-baslik{color:#fff;text-align:center;font-size:1.5rem;margin:10px 0 20px;text-shadow:0 2px 8px rgba(0,0,0,.15)}
.gizli{display:none !important}

/* ANA EKRAN */
#ekran-ana{justify-content:center;align-items:center;text-align:center;gap:8px}
.logo-alani{margin-bottom:10px}
.logo-emoji{font-size:5rem;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2));animation:sallan 3s ease-in-out infinite}
@keyframes sallan{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.logo-baslik{color:#fff;font-size:2.4rem;margin:6px 0;text-shadow:0 3px 10px rgba(0,0,0,.2)}
.logo-alt{color:#fff;opacity:.95;margin:0 0 6px;font-size:1.05rem;max-width:320px}
.alt-not{color:#fff;opacity:.8;font-size:.85rem;margin-top:14px}
.ana-istatistik{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.mini-kart{background:rgba(255,255,255,.9);border-radius:16px;padding:10px 16px;font-weight:700;color:var(--mor-koyu);box-shadow:var(--golge)}
.mini-kart b{display:block;font-size:1.4rem;color:var(--pembe)}
.mini-kart span{font-size:.75rem;color:var(--gri)}

/* BUTONLAR */
.buyuk-btn{
  border:none;border-radius:var(--radius);padding:18px 26px;font-size:1.2rem;font-weight:800;
  background:linear-gradient(180deg,var(--sari),var(--turuncu));color:#5a3d00;cursor:pointer;
  box-shadow:0 6px 0 #d98324,var(--golge);transition:transform .08s,box-shadow .08s;
}
.buyuk-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #d98324}
.basla-btn{margin-top:8px;padding:20px 40px}
.orta-btn{border:none;border-radius:16px;padding:14px 20px;font-weight:800;font-size:1rem;cursor:pointer;background:#fff;color:var(--mor-koyu);box-shadow:var(--golge)}
.orta-btn:active{transform:scale(.95)}

/* KART GRID (sınıf/ders) */
.kart-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.secim-kart{
  background:#fff;border-radius:var(--radius);padding:20px 12px;text-align:center;cursor:pointer;
  box-shadow:var(--golge);border:3px solid transparent;transition:transform .1s,border-color .1s;position:relative;
}
.secim-kart:active{transform:scale(.95)}
.secim-kart .kart-emoji{font-size:2.6rem;display:block;margin-bottom:6px}
.secim-kart .kart-ad{font-weight:800;color:var(--metin);font-size:1rem;line-height:1.2}
.secim-kart .kart-alt{font-size:.75rem;color:var(--gri);margin-top:4px}
.secim-kart .kart-ilerleme{margin-top:8px;height:7px;background:var(--gok);border-radius:99px;overflow:hidden}
.secim-kart .kart-ilerleme i{display:block;height:100%;background:linear-gradient(90deg,var(--yesil),var(--yesil-koyu));border-radius:99px}
.sinif-kart .kart-emoji{background:linear-gradient(135deg,var(--mor),var(--pembe));-webkit-background-clip:text;background-clip:text}

/* HARİTA */
.harita-baslik{color:#fff;text-align:center;margin-bottom:16px}
.harita-baslik h2{margin:4px 0;font-size:1.4rem;text-shadow:0 2px 8px rgba(0,0,0,.15)}
.harita-baslik p{margin:0;opacity:.9;font-size:.9rem}
.harita-yol{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 30px}
.durak{
  position:relative;width:88px;height:88px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-weight:800;cursor:pointer;color:#fff;
  box-shadow:0 6px 0 rgba(0,0,0,.15),var(--golge);transition:transform .1s;border:4px solid #fff;
}
.durak:active{transform:scale(.93)}
.durak .durak-no{font-size:1.5rem}
.durak .durak-yildiz{font-size:.8rem;margin-top:-2px;letter-spacing:-1px}
.durak.acik{background:linear-gradient(160deg,var(--turuncu),var(--pembe))}
.durak.bitti{background:linear-gradient(160deg,var(--yesil),var(--yesil-koyu))}
.durak.kilit{background:linear-gradient(160deg,#b9b6cf,#9c98bd);cursor:not-allowed;opacity:.85}
.durak.kilit .durak-no{font-size:1.6rem}
.durak:nth-child(odd){align-self:flex-start;margin-left:12%}
.durak:nth-child(even){align-self:flex-end;margin-right:12%}
.yol-cizgi{width:6px;height:26px;background:repeating-linear-gradient(#fff,#fff 6px,transparent 6px,transparent 12px);opacity:.7;border-radius:6px}
.durak-etiket{position:absolute;bottom:-20px;font-size:.68rem;color:#fff;white-space:nowrap;background:rgba(0,0,0,.22);padding:2px 8px;border-radius:99px}

/* QUIZ */
.quiz-ust{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.canlar{font-size:1.2rem;min-width:74px}
.ilerleme-cubuk{flex:1;height:12px;background:rgba(255,255,255,.4);border-radius:99px;overflow:hidden}
#ilerlemeDolu{height:100%;width:0;background:linear-gradient(90deg,var(--sari),var(--turuncu));border-radius:99px;transition:width .3s}
.seri{background:rgba(255,255,255,.9);color:var(--turuncu);font-weight:800;padding:5px 10px;border-radius:99px;font-size:.85rem;white-space:nowrap}
.soru-meta{color:#fff;font-size:.8rem;opacity:.9;margin-bottom:6px;text-align:center}
.soru-kutu{
  background:#fff;border-radius:var(--radius);padding:22px 20px;font-size:1.15rem;font-weight:700;
  line-height:1.4;box-shadow:var(--golge);margin-bottom:16px;min-height:80px;display:flex;align-items:center;
}
.secenekler{display:flex;flex-direction:column;gap:12px}
.secenek{
  background:#fff;border:3px solid transparent;border-radius:16px;padding:16px 18px;font-size:1.05rem;font-weight:600;
  text-align:left;cursor:pointer;box-shadow:var(--golge);transition:transform .08s,border-color .12s,background .12s;
  display:flex;align-items:center;gap:12px;color:var(--metin);
}
.secenek:active{transform:scale(.98)}
.secenek .harf{width:34px;height:34px;flex:none;border-radius:10px;background:var(--gok);color:var(--mor-koyu);
  display:flex;align-items:center;justify-content:center;font-weight:800}
.secenek.dogru{background:#e7fbef;border-color:var(--yesil);animation:dogru-vur .4s}
.secenek.dogru .harf{background:var(--yesil);color:#fff}
.secenek.yanlis{background:#ffecec;border-color:var(--kirmizi)}
.secenek.yanlis .harf{background:var(--kirmizi);color:#fff}
.secenek.pasif{pointer-events:none;opacity:.65}
@keyframes dogru-vur{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
.geribildirim{margin-top:14px;padding:14px 16px;border-radius:16px;font-weight:600;display:none;line-height:1.4}
.geribildirim.goster{display:block;animation:gir .25s}
.geribildirim.iyi{background:#e7fbef;color:var(--yesil-koyu)}
.geribildirim.kotu{background:#fff2e0;color:#b3641b}
.geribildirim b{display:block;margin-bottom:2px}
#devamBtn{margin-top:16px}

/* SONUÇ */
#ekran-sonuc{justify-content:center;align-items:center}
.sonuc-kutu{background:#fff;border-radius:28px;padding:30px 24px;text-align:center;box-shadow:var(--golge);width:100%;max-width:400px}
.sonuc-yildizlar{font-size:3rem;letter-spacing:6px;margin-bottom:6px}
.sonuc-yildizlar .bos{opacity:.25}
#sonucBaslik{margin:6px 0 14px;color:var(--mor-koyu)}
.sonuc-detay{display:flex;justify-content:center;gap:18px;margin-bottom:20px}
.sonuc-detay div{font-weight:800;color:var(--pembe);font-size:1.5rem}
.sonuc-detay span{display:block;font-size:.72rem;color:var(--gri);font-weight:600}
.sonuc-butonlar{display:flex;gap:12px;justify-content:center;margin-bottom:12px}
#sonrakiBtn{width:100%}

/* konfeti */
.konfeti{position:fixed;top:-20px;width:12px;height:12px;z-index:50;pointer-events:none;border-radius:2px}
@keyframes dus{to{transform:translateY(105vh) rotate(720deg);opacity:.9}}

/* ===== Cila / animasyonlar ===== */
/* kalp kaybı sarsıntısı */
.sarsil{animation:sarsil .45s}
@keyframes sarsil{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
/* puan rozeti zıplama */
.zipla{animation:zipla .4s}
@keyframes zipla{0%,100%{transform:scale(1)}40%{transform:scale(1.25)}}
/* uçan +10 */
.puan-ucan{position:fixed;z-index:60;font-weight:900;color:var(--sari);text-shadow:0 2px 6px rgba(0,0,0,.35);pointer-events:none;font-size:1.3rem;animation:ucus .9s ease-out forwards}
@keyframes ucus{0%{opacity:0;transform:translateY(6px) scale(.6)}25%{opacity:1;transform:translateY(-4px) scale(1.1)}100%{opacity:0;transform:translateY(-40px) scale(1)}}
/* seri göstergesi parla */
.parla{animation:parla .5s}
@keyframes parla{0%,100%{transform:scale(1);box-shadow:none}50%{transform:scale(1.25);box-shadow:0 0 16px var(--turuncu)}}
/* sonuç yıldız patlaması */
.sonuc-yildizlar span{display:inline-block;transform:scale(.3);opacity:.25;transition:none}
.sonuc-yildizlar span.patla{animation:yildiz-patla .5s cubic-bezier(.3,1.6,.5,1) forwards;color:var(--sari);opacity:1}
.sonuc-yildizlar span.bos{opacity:.22;transform:scale(1)}
@keyframes yildiz-patla{0%{transform:scale(.3) rotate(-30deg);opacity:.3}60%{transform:scale(1.4) rotate(10deg)}100%{transform:scale(1) rotate(0);opacity:1}}
/* her yeni soruda kutu ve seçenekler yumuşak gelsin */
#ekran-quiz.aktif .soru-kutu{animation:gir .3s}
.secenek{animation:secenek-gir .3s backwards}
.secenek:nth-child(1){animation-delay:.03s}
.secenek:nth-child(2){animation-delay:.08s}
.secenek:nth-child(3){animation-delay:.13s}
.secenek:nth-child(4){animation-delay:.18s}
@keyframes secenek-gir{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
/* haritada duraklar sırayla belirsin */
.durak{animation:durak-gir .35s backwards}
@keyframes durak-gir{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
/* butona basınca hafif his */
.secim-kart:active,.buyuk-btn:active,.orta-btn:active{filter:brightness(.97)}

/* ===== Ders menüsü ===== */
.dersmenu-butonlar{display:flex;flex-direction:column;gap:16px;margin-top:10px}
.menu-btn{border:none;border-radius:var(--radius);padding:22px 20px;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;box-shadow:var(--golge);color:#fff;position:relative;overflow:hidden}
.menu-btn:active{transform:scale(.98)}
.menu-ogren{background:linear-gradient(135deg,#6c4cf1,#9b59b6)}
.menu-quiz{background:linear-gradient(135deg,var(--turuncu),var(--pembe))}
.menu-btn .menu-emoji{font-size:2.4rem}
.menu-btn .menu-ad{font-size:1.3rem;font-weight:800}
.menu-btn .menu-alt{font-size:.85rem;opacity:.9}
.menu-btn.pasif-btn{background:#b9b6cf;cursor:default}
.menu-btn.pasif-btn:active{transform:none}

/* ===== Konu listesi ===== */
.konu-liste{display:flex;flex-direction:column;gap:10px}
.konu-sat{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:14px 16px;cursor:pointer;box-shadow:var(--golge)}
.konu-sat:active{transform:scale(.98)}
.konu-emoji{font-size:1.9rem;flex:none}
.konu-bilgi{flex:1;min-width:0}
.konu-bilgi b{display:block;color:var(--metin);font-size:1.02rem;line-height:1.2}
.konu-bilgi span{font-size:.78rem;color:var(--gri)}
.konu-durum{font-size:1.2rem;color:var(--mor)}

/* ===== Ders anlatımı ===== */
.anlatim-ust{margin-bottom:12px}
.anlatim-baslik{color:#fff;text-align:center;font-size:1.2rem;margin-bottom:8px}
.anlatim-emoji{font-size:1.6rem}
.anlatim-ilerleme{height:8px;background:rgba(255,255,255,.4);border-radius:99px;overflow:hidden}
#anlatimDolu{height:100%;width:0;background:linear-gradient(90deg,var(--sari),var(--turuncu));border-radius:99px;transition:width .3s}
.anlatim-govde{flex:1}
.anlatim-bolum{background:#fff;border-radius:var(--radius);padding:22px 20px;box-shadow:var(--golge);animation:gir .3s}
.anlatim-h3{margin:0 0 14px;color:var(--mor-koyu);font-size:1.3rem}
.anlatim-metin{font-size:1.05rem;line-height:1.55;color:var(--metin);margin:14px 0 0}
.anlatim-madde{margin:12px 0 0;padding-left:20px;line-height:1.6}
.anlatim-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
#anlatimSayac{color:#fff;font-weight:800;font-size:.9rem}
.anlatim-nav .orta-btn{flex:1;max-width:150px}
/* özet sayfası */
.ozet-sayfa{text-align:center}
.ozet-rozet{font-size:3rem}
.ozet-liste{list-style:none;padding:0;margin:14px 0;text-align:left}
.ozet-liste li{background:var(--gok);border-radius:12px;padding:12px 14px;margin-bottom:8px;font-weight:600;line-height:1.4}
.anahtar-kelimeler{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.anahtar-kelimeler span{background:linear-gradient(135deg,var(--mor),var(--pembe));color:#fff;padding:5px 12px;border-radius:99px;font-size:.82rem;font-weight:700}

/* ===== Örnekler sayfası ===== */
.ornek-liste{display:flex;flex-direction:column;gap:12px}
.ornek-kart{background:var(--gok);border-radius:14px;padding:14px;border-left:5px solid var(--mor)}
.ornek-soru{font-weight:700;color:var(--metin);display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.ornek-no{flex:none;width:26px;height:26px;border-radius:50%;background:var(--mor);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800}
.ornek-coz{margin-top:8px;padding-left:36px;color:var(--yesil-koyu);font-weight:600;line-height:1.45}

/* ===== Görsel bileşenler ===== */
.g-resim{margin:0;text-align:center;background:var(--gok);border-radius:18px;padding:22px}
.g-resim-emoji{font-size:3.4rem;line-height:1.2}
.g-resim figcaption{margin-top:8px;font-weight:700;color:var(--gri);font-size:.9rem}
.g-kav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.g-kav{background:var(--gok);border-radius:16px;padding:14px 10px;text-align:center;border-bottom:4px solid var(--r)}
.g-kav-emoji{font-size:2rem;display:block}
.g-kav b{display:block;color:var(--metin);margin-top:4px;font-size:.95rem}
.g-kav span{font-size:.8rem;color:var(--gri)}
.g-adimlar{display:flex;flex-direction:column;gap:10px}
.g-adim{display:flex;gap:12px;align-items:flex-start;background:var(--gok);border-radius:14px;padding:12px}
.g-adim-no{flex:none;width:30px;height:30px;border-radius:50%;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.g-adim b{color:var(--metin)}
.g-adim p{margin:2px 0 0;font-size:.9rem;color:var(--gri);line-height:1.4}
.g-kars{display:flex;align-items:stretch;gap:8px}
.g-kars-sut{flex:1;background:var(--gok);border-radius:14px;padding:12px}
.g-kars-bas{font-weight:800;text-align:center;margin-bottom:8px;color:var(--mor-koyu)}
.g-kars-sut ul{margin:0;padding-left:18px;font-size:.9rem;line-height:1.5}
.g-kars-vs{align-self:center;font-weight:900;color:var(--pembe);font-size:.85rem}
.g-tablo-sar{overflow-x:auto}
.g-tablo{width:100%;border-collapse:collapse;font-size:.92rem}
.g-tablo th{background:var(--mor);color:#fff;padding:9px 10px;text-align:left}
.g-tablo td{padding:9px 10px;border-bottom:1px solid #eee}
.g-tablo tr:nth-child(even) td{background:var(--gok)}
.g-bilgi{display:flex;gap:12px;align-items:flex-start;background:#fff7e6;border:2px solid var(--sari);border-radius:14px;padding:14px}
.g-bilgi-ikon{font-size:1.6rem;flex:none}
.g-bilgi b{display:block;color:#b3641b}
.g-formul{background:#111a3a;color:#7ef;font-family:'Courier New',monospace;font-weight:700;padding:16px;border-radius:14px;text-align:center;font-size:1.05rem;overflow-x:auto}
.g-formul-alt{text-align:center;color:var(--gri);font-size:.85rem;margin-top:6px}
.g-svg-sar{text-align:center;background:var(--gok);border-radius:18px;padding:14px;margin:2px 0}
.g-svg{width:100%;max-width:300px;height:auto}
/* görsel öğeleri anlatım metniyle arası */
.anlatim-bolum > .g-resim,.anlatim-bolum > .g-kav-grid,.anlatim-bolum > .g-adimlar,
.anlatim-bolum > .g-kars,.anlatim-bolum > .g-tablo-sar,.anlatim-bolum > .g-bilgi,
.anlatim-bolum > .g-formul,.anlatim-bolum > .g-svg-sar{margin-bottom:4px}

/* ===== Avatar ===== */
.avatar-btn{position:relative;border:none;background:rgba(255,255,255,.9);width:96px;height:96px;border-radius:50%;
  font-size:3.2rem;cursor:pointer;box-shadow:var(--golge);margin-bottom:6px;line-height:1;display:flex;align-items:center;justify-content:center}
.avatar-btn:active{transform:scale(.94)}
.avatar-kalem{position:absolute;right:2px;bottom:2px;font-size:.9rem;background:var(--mor);width:26px;height:26px;
  border-radius:50%;display:flex;align-items:center;justify-content:center}
/* modal */
.modal{position:fixed;inset:0;background:rgba(40,30,90,.55);z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;animation:gir .2s}
.modal-kutu{background:#fff;border-radius:24px;padding:22px;max-width:420px;width:100%;text-align:center;box-shadow:var(--golge)}
.modal-kutu h3{margin:0 0 14px;color:var(--mor-koyu)}
.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.avatar-secenek{border:3px solid transparent;background:var(--gok);border-radius:16px;font-size:2rem;padding:8px 0;cursor:pointer}
.avatar-secenek:active{transform:scale(.9)}
.avatar-secenek.secili{border-color:var(--mor);background:#efe9ff}

/* ===== Günlük görev paneli ===== */
.gunluk-panel{width:100%;max-width:420px;background:rgba(255,255,255,.94);border-radius:20px;padding:14px 16px;box-shadow:var(--golge);margin-top:16px}
.gunluk-baslik{font-weight:800;color:var(--mor-koyu);margin-bottom:10px;text-align:left}
.gorev{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.gorev:last-child{margin-bottom:0}
.gorev-emoji{font-size:1.4rem;flex:none;width:28px;text-align:center}
.gorev-orta{flex:1;min-width:0;text-align:left}
.gorev-ad{font-size:.85rem;font-weight:600;color:var(--metin)}
.gorev-ad small{color:var(--gri);font-weight:700}
.gorev-bar{height:8px;background:var(--gok);border-radius:99px;overflow:hidden;margin-top:3px}
.gorev-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--yesil),var(--yesil-koyu));border-radius:99px;transition:width .4s}
.gorev-odul{flex:none;font-size:.78rem;font-weight:800;color:var(--turuncu)}
.gorev.tamam .gorev-ad{color:var(--yesil-koyu);text-decoration:line-through;opacity:.7}
.rozet-ac-btn{margin-top:14px}

/* ===== Rozet ekranı ===== */
.rozet-ozet{text-align:center;color:#fff;margin-bottom:16px;font-size:1.05rem}
.rozet-ozet b{font-size:1.6rem;color:var(--sari)}
.rozet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.rozet-kart{background:#fff;border-radius:18px;padding:16px 10px;text-align:center;box-shadow:var(--golge)}
.rozet-kart .rozet-emoji{font-size:2.6rem;display:block}
.rozet-kart b{display:block;margin-top:4px;font-size:.95rem;color:var(--metin)}
.rozet-acik{font-size:.72rem;color:var(--gri);display:block;margin-top:2px}
.rozet-kart.kilitli{opacity:.6;filter:grayscale(.6)}
.rozet-kart.kazanildi{border:3px solid var(--sari);animation:rozet-parla .5s}
@keyframes rozet-parla{0%{transform:scale(.8)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ===== Sesli anlatım "Dinle" butonu ===== */
.dinle-btn{border:none;border-radius:14px;padding:10px 18px;font-weight:800;font-size:1rem;cursor:pointer;
  background:linear-gradient(135deg,#3aa0ff,#6c4cf1);color:#fff;box-shadow:var(--golge);
  display:inline-flex;align-items:center;gap:6px;margin:0 auto 10px;animation:dinle-nabiz 2s ease-in-out infinite}
.dinle-btn:active{transform:scale(.94)}
#anlatimDinle{display:block}
#soruDinle{display:block;width:100%;margin-top:2px;margin-bottom:14px}
@keyframes dinle-nabiz{0%,100%{box-shadow:0 0 0 0 rgba(58,160,255,.4)}50%{box-shadow:0 0 0 8px rgba(58,160,255,0)}}

/* ===== Toast ===== */
.toast{position:fixed;top:-100px;left:50%;transform:translateX(-50%);z-index:90;
  background:#fff;border-radius:16px;padding:12px 18px;box-shadow:0 10px 30px rgba(60,40,150,.3);
  display:flex;align-items:center;gap:12px;min-width:240px;max-width:90vw;transition:top .4s cubic-bezier(.2,1.4,.5,1);
  border-left:6px solid var(--sari)}
.toast.goster{top:18px}
.toast-emoji{font-size:2rem}
.toast b{display:block;color:var(--mor-koyu);font-size:.95rem}
.toast span{font-size:.82rem;color:var(--gri)}

@media(min-width:600px){
  .logo-baslik{font-size:2.8rem}
  .kart-grid{grid-template-columns:repeat(3,1fr)}
}