/* EduManu English – site stilleri (sınıf / tema / oyun sayfaları) */
:root {
  --teal:#4ba4a4; --teal-d:#2c7f86; --orange:#f29a3a; --ink:#22314f; --muted:#5d6b85; --bg:#f3f9fb;
  --shadow:0 10px 30px rgba(34,49,79,.12);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink);
  font-family:'Andika','Segoe UI',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; }
main { flex:1; width:100%; }
.ci { width:1.25em; height:1.25em; vertical-align:-.28em; }

/* ---------- üst çubuk */
.topbar { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px; padding:10px clamp(14px,4vw,44px);
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid rgba(34,49,79,.07); }
.brand img { height:40px; display:block; }
.brand-sub { font-weight:700; font-size:15px; color:#fff; text-decoration:none; padding:4px 13px; border-radius:999px;
  background:linear-gradient(90deg, var(--teal), #6cc3b6); }
.crumbs { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:16px; color:var(--muted); }
.crumbs a { color:var(--teal-d); text-decoration:none; font-weight:700; }
.crumbs a:hover { text-decoration:underline; }
.crumbs span { opacity:.45; }
.crumbs b { color:var(--ink); }

.kicker { display:inline-block; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  padding:5px 14px; border-radius:999px; background:linear-gradient(90deg, var(--teal), var(--orange)); }

/* ---------- Pip (kaz) */
.pip { position:relative; flex:none; width:clamp(120px,13vw,200px); padding:0; border:0; background:none; cursor:pointer; }
.pip img { display:block; width:100%; filter:drop-shadow(0 12px 14px rgba(34,49,79,.18)); animation:bob 2.8s ease-in-out infinite; }
.pip .bubble { position:absolute; right:88%; top:6%; z-index:1; background:linear-gradient(135deg, var(--teal), #3a8e96); color:#fff; border-radius:22px; padding:11px 18px;
  font-size:clamp(14px,1.4vw,19px); font-weight:700; line-height:1.25; white-space:nowrap; text-align:left; box-shadow:var(--shadow); }
.pip .bubble::after { content:""; position:absolute; right:-12px; top:18px; border:12px solid transparent; border-left-color:#3f949a; border-right:0; }
.pip.talk img { animation:hop .6s ease-out 2; }
.pip.small { width:clamp(100px,12vw,160px); }
.pip.mini { position:absolute; right:-10px; bottom:-14px; width:clamp(92px,10vw,140px); }

/* ---------- ana sayfa: sınıf seçimi */
.is-home { background:#cfeefa url("img/bg.webp") center 65% / cover fixed; }
.home { max-width:1280px; margin:0 auto; padding:clamp(16px,3vw,40px); display:flex; flex-direction:column; gap:clamp(18px,3vw,34px); }
.hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(18px,3vw,36px) clamp(22px,4vw,52px);
  border-radius:34px; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:2px solid rgba(255,255,255,.9); box-shadow:var(--shadow); animation:rise .6s both; }
.hero h1 { margin:12px 0 8px; font-size:clamp(40px,6.2vw,82px); line-height:1; letter-spacing:-.015em; }
.hero h1 span { color:var(--orange); }
.hero p { margin:0; font-size:clamp(17px,1.8vw,24px); color:var(--muted); }
.grades { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:clamp(16px,2.4vw,30px); }
.grade { position:relative; overflow:hidden; display:flex; align-items:center; gap:20px; min-height:clamp(170px,19vw,250px);
  padding:24px 30% 24px 26px; border-radius:34px; color:#fff; text-decoration:none; background:linear-gradient(150deg, var(--g1), var(--g2));
  box-shadow:0 12px 0 rgba(0,0,0,.13), 0 22px 40px rgba(34,49,79,.22); transition:transform .18s ease; animation:rise .6s both; }
.grade:nth-child(2) { animation-delay:.08s; } .grade:nth-child(3) { animation-delay:.16s; }
.grade::before { content:""; position:absolute; width:70%; height:120%; right:-25%; top:-40%; border-radius:50%; background:rgba(255,255,255,.14); }
.grade:hover { transform:translateY(-6px) rotate(-.5deg); }
.grade:active { transform:translateY(3px); }
.gnum { position:relative; z-index:1; flex:none; width:clamp(86px,8.6vw,122px); height:clamp(86px,8.6vw,122px); border-radius:50%; background:#fff;
  color:var(--g2); display:flex; align-items:center; justify-content:center; font-size:clamp(54px,5.6vw,80px); font-weight:700;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08), 0 8px 18px rgba(0,0,0,.14); }
.glbl { position:relative; z-index:1; }
.glbl b { display:block; font-size:clamp(28px,2.7vw,38px); line-height:1.05; white-space:nowrap; }
.glbl small { font-size:clamp(17px,1.6vw,21px); opacity:.92; }
.badge { position:absolute; z-index:2; top:14px; left:18px; padding:5px 13px; border-radius:999px; font-size:14px; font-weight:700; background:rgba(255,255,255,.26); }
.badge.ok { background:#fff; color:var(--g2); }
.gkid { position:absolute; right:-3%; bottom:-6%; height:100%; filter:drop-shadow(0 10px 16px rgba(0,0,0,.2)); transition:transform .3s ease; }
.grade:hover .gkid { transform:translateY(-8px) rotate(3deg); }

/* ---------- sınıf sayfası: tema seçimi */
.grade-page { background:linear-gradient(180deg, color-mix(in srgb, var(--g1) 24%, #fff) 0, var(--bg) 480px); padding:clamp(16px,3vw,40px); }
.page-head, .themes { max-width:1200px; margin-inline:auto; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:clamp(14px,2.4vw,26px); }
.page-head h1 { margin:12px 0 4px; font-size:clamp(34px,5vw,62px); line-height:1.05; }
.page-head p { margin:0; font-size:clamp(16px,1.6vw,21px); color:var(--muted); }
.themes { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:clamp(16px,2vw,26px); }
.theme { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:6px; min-height:300px; padding:20px 18px 22px;
  border-radius:30px; text-align:center; color:#fff; text-decoration:none; background:linear-gradient(155deg, var(--c1), var(--c2));
  box-shadow:0 10px 0 rgba(0,0,0,.12), 0 18px 34px rgba(34,49,79,.18); transition:transform .18s ease; animation:rise .5s both; }
.theme::before { content:""; position:absolute; width:80%; height:70%; right:-30%; top:-25%; border-radius:50%; background:rgba(255,255,255,.15); }
.theme:nth-child(2) { animation-delay:.05s; } .theme:nth-child(3) { animation-delay:.1s; } .theme:nth-child(4) { animation-delay:.15s; }
.theme:nth-child(5) { animation-delay:.2s; } .theme:nth-child(6) { animation-delay:.25s; }
.tno { position:relative; align-self:flex-start; padding:4px 13px; border-radius:999px; background:rgba(255,255,255,.26); font-size:14px; font-weight:700; }
.ticon { position:relative; width:118px; height:118px; margin:6px 0 10px; padding:20px; border-radius:50%; background:#fff; box-shadow:0 8px 18px rgba(0,0,0,.14); }
.tart { position:relative; width:190px; height:152px; margin:0 0 6px; object-fit:contain; filter:drop-shadow(0 10px 16px rgba(0,0,0,.22)); }
.theme b { position:relative; font-size:clamp(23px,2.1vw,28px); line-height:1.1; }
.theme small { position:relative; font-size:16px; opacity:.92; }
.tchips { position:relative; margin-top:auto; padding-top:12px; }
.tchip { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:999px; background:#fff; color:var(--c2); font-size:16px; font-weight:700; }
.tchip.soon { background:rgba(255,255,255,.3); color:#fff; }
.theme.ready:hover { transform:translateY(-6px); }
.theme.ready:active { transform:translateY(3px); }
.theme.soon { cursor:default; filter:saturate(.55); opacity:.66; }

/* ---------- tema sayfası */
.theme-hero, .tabs, .games-sec { max-width:1200px; margin-inline:auto; }
.theme-hero { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:24px; margin-top:clamp(16px,3vw,34px);
  width:calc(100% - 2 * clamp(16px,3vw,40px)); padding:clamp(22px,3.4vw,46px); border-radius:36px;
  background:linear-gradient(150deg, #e3f5f5, #fff3e3); box-shadow:var(--shadow); animation:rise .5s both; }
.theme-hero h1 { margin:12px 0 0; font-size:clamp(42px,6vw,80px); line-height:1; letter-spacing:-.015em; }
.theme-hero .tr { margin:8px 0 18px; font-size:clamp(18px,2vw,26px); color:var(--muted); }
.subthemes { display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; }
.subthemes li { padding:7px 15px; border-radius:999px; background:#fff; border:2px solid #d4ecec; color:var(--teal-d); font-size:16px; font-weight:700; }
.th-art { position:relative; }
.th-img { display:block; width:100%; max-height:370px; object-fit:contain; filter:drop-shadow(0 18px 26px rgba(0,0,0,.2)); }
.tabs { display:flex; gap:10px; margin-top:26px; width:calc(100% - 2 * clamp(16px,3vw,40px)); }
.tab { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:18px 18px 0 0; background:#e4edf3; font-size:19px; font-weight:700; text-decoration:none; }
.tab.on { background:#fff; color:var(--teal-d); }
.games-sec { width:calc(100% - 2 * clamp(16px,3vw,40px)); margin-bottom:20px; padding:clamp(18px,3vw,38px); border-radius:0 30px 30px 30px; background:#fff; box-shadow:var(--shadow); }
.sec-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:22px; }
.sec-head h2 { margin:0; font-size:clamp(32px,3.4vw,46px); }
.sec-head p { margin:4px 0 0; color:var(--muted); font-size:17px; }
.cta { display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:999px; color:#fff; text-decoration:none;
  font-size:clamp(18px,1.8vw,23px); font-weight:700; background:linear-gradient(90deg, var(--orange), #ff7a59);
  box-shadow:0 6px 0 #c9661f, 0 14px 26px rgba(242,154,58,.35); transition:transform .15s ease; }
.cta:hover { transform:translateY(-3px); }
.cta:active { transform:translateY(3px); box-shadow:0 2px 0 #c9661f; }
.game-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(225px, 1fr)); gap:18px; }
.gcard { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:2px; min-height:260px; padding:36px 14px 16px;
  border-radius:26px; text-align:center; color:#fff; text-decoration:none; background:linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow:0 8px 0 rgba(0,0,0,.12), 0 14px 24px rgba(34,49,79,.15); transition:transform .15s ease; }
.gcard::before { content:""; position:absolute; width:70%; height:60%; right:-20%; top:-22%; border-radius:50%; background:rgba(255,255,255,.17); }
.gcard:hover { transform:translateY(-5px) scale(1.02); }
.gcard:active { transform:translateY(3px); }
.gtag { position:absolute; top:10px; left:10px; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.26); font-size:12px; font-weight:700; }
.gicon { position:relative; display:flex; align-items:center; justify-content:center; width:96px; height:96px; margin-bottom:10px; border-radius:50%;
  background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.15); transition:transform .25s ease; }
.gicon img { width:62%; height:62%; }
.gcard:hover .gicon { transform:rotate(-8deg) scale(1.06); }
.gcard b { position:relative; font-size:23px; line-height:1.1; }
.gcard small { position:relative; font-size:15px; opacity:.92; }
.gcard em { position:relative; margin-top:8px; font-size:14.5px; font-style:normal; line-height:1.3; opacity:.95; }
.glesson { position:relative; margin-top:auto; padding-top:8px; font-size:12.5px; font-weight:700; opacity:.85; }
.words-title { margin:34px 0 14px; font-size:clamp(24px,2.4vw,30px); }
.words { display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:12px; }
.word { margin:0; padding:10px 8px 8px; border-radius:20px; background:#f5fafc; border:2px solid #e3edf3; text-align:center; }
.word img { display:block; width:100%; height:104px; object-fit:contain; }
.word figcaption { margin-top:4px; font-size:15.5px; font-weight:700; }

/* ---------- alt bilgi */
.foot { padding:26px clamp(14px,4vw,44px); text-align:center; color:var(--muted); font-size:14px; }
.foot p { margin:4px 0; }
.foot .small { font-size:12px; opacity:.8; }
.foot a { color:var(--teal-d); }
.is-home .foot { color:#34425f; background:rgba(255,255,255,.72); }

@keyframes rise { from { opacity:0; transform:translateY(22px); } }
@keyframes pop { from { opacity:0; transform:scale(.6); } }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes hop { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-26px) scale(1.04,.96); } }

@media (max-width: 820px) {
  .crumbs { display:none; }
  .hero, .page-head { flex-direction:column-reverse; text-align:center; }
  .pip .bubble { right:auto; left:50%; top:auto; bottom:96%; transform:translateX(-50%); animation:none; }
  .pip .bubble::after { right:auto; left:50%; top:auto; bottom:-12px; transform:translateX(-50%); border:12px solid transparent; border-top-color:#3f949a; border-bottom:0; }
  .theme-hero { grid-template-columns:1fr; text-align:center; }
  .subthemes { justify-content:center; }
  .pip.mini { display:none; }
  .is-home { background-attachment:scroll; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}
.word img.wicon { padding:16px 0; }