:root {
  --bg1: #12235a;
  --bg2: #2f63c7;
  --card: rgba(255,255,255,.94);
  --text: #17305f;
  --muted: #5c6d91;
  --primary: #ffb703;
  --primary-dark: #f28b00;
  --secondary: #6ee7f9;
  --green: #70e000;
  --pink: #ff70a6;
  --shadow: 0 24px 70px rgba(5, 14, 46, .28);
  --radius: 28px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 25% 20%, #4cc9f0 0 9%, transparent 24%),
              radial-gradient(circle at 70% 12%, #ffe66d 0 6%, transparent 20%),
              linear-gradient(135deg, var(--bg1), var(--bg2));
  overflow-x: hidden;
}
.stars, .stars:before, .stars:after {
  position: fixed;
  inset: 0;
  content: '';
  pointer-events: none;
  background-image: radial-gradient(#fff 1.3px, transparent 1.3px);
  background-size: 42px 42px;
  opacity: .35;
  animation: twinkle 6s infinite alternate ease-in-out;
}
.stars:before { transform: translate(20px, 14px); opacity: .25; }
.stars:after { transform: translate(-8px, 24px); opacity: .18; background-size: 68px 68px; }
@keyframes twinkle { from { opacity: .18; } to { opacity: .45; } }
.app-shell { width: min(1180px, 94vw); margin: 0 auto; min-height: 100vh; position: relative; z-index: 2; }
.page { display: none; min-height: 100vh; padding: 28px 0; }
.page.active { display: block; }
.welcome-page, .goodbye-page { display: none; place-items: center; }
.welcome-page.active, .goodbye-page.active { display: grid; }
.hero-card {
  width: min(820px, 94vw);
  text-align: center;
  background: var(--card);
  border-radius: 36px;
  padding: 42px 34px;
  box-shadow: var(--shadow);
  border: 4px solid rgba(255,255,255,.8);
}
.school-badge, .eyebrow {
  display: inline-block;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .86rem;
  font-weight: 900;
  color: #0a7a91;
  background: #d8fbff;
  border-radius: 999px;
  padding: 8px 14px;
}
h1, h2, h3 { font-family: 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(2.6rem, 7vw, 5.5rem); color: #12306f; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); color: #12306f; }
h3 { font-size: clamp(1.7rem, 3vw, 2.7rem); }
p { font-size: 1.15rem; line-height: 1.65; }
.mascot-orbit { position: relative; height: 150px; margin: 16px auto 24px; width: 280px; }
.sun { font-size: 4rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); animation: pulse 2s infinite; }
.earth { font-size: 2.6rem; position: absolute; left: 12px; top: 38px; animation: orbit 4s infinite linear; transform-origin: 128px 38px; }
.rocket { font-size: 2.6rem; position: absolute; right: 18px; top: 24px; animation: float 2.3s infinite ease-in-out; }
.floating-planet { position: fixed; z-index: 1; filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); animation: float 4s infinite ease-in-out; }
.planet-a { left: 5vw; top: 10vh; font-size: 3rem; } .planet-b { right: 4vw; top: 15vh; font-size: 3.5rem; animation-delay: .8s; } .planet-c { right: 9vw; bottom: 8vh; font-size: 2.8rem; animation-delay: 1.4s; }
button { border: 0; border-radius: 999px; padding: 14px 24px; font-weight: 900; font-size: 1.04rem; cursor: pointer; transition: transform .2s, filter .2s, box-shadow .2s; font-family: 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif; }
button:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.03); }
button:active { transform: translateY(0) scale(.98); }
.primary-btn { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #472500; box-shadow: 0 12px 24px rgba(242,139,0,.28); }
.secondary-btn { background: linear-gradient(135deg, var(--secondary), #3aa9ff); color: #082958; box-shadow: 0 12px 24px rgba(58,169,255,.22); }
.ghost-btn { background: rgba(255,255,255,.86); color: #18346b; border: 2px solid rgba(255,255,255,.9); }
.big-btn { font-size: 1.25rem; padding: 18px 34px; }
.topbar, .lesson-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.compact { margin-bottom: 14px; }
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 18px; }
.chapter-card {
  background: var(--card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); min-height: 225px;
  border: 3px solid rgba(255,255,255,.78); position: relative; overflow: hidden;
}
.chapter-card:after { content: ''; position: absolute; width: 130px; height: 130px; right: -40px; bottom: -50px; background: rgba(255,183,3,.24); border-radius: 50%; }
.chapter-icon { font-size: 3rem; }
.chapter-card p { color: var(--muted); margin-bottom: 20px; }
.progress-wrap { flex: 1; height: 14px; background: rgba(255,255,255,.45); border-radius: 999px; overflow: hidden; border: 2px solid rgba(255,255,255,.6); }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, #70e000, #ffb703, #ff70a6); border-radius: 999px; transition: width .35s; }
.slide-card {
  background: var(--card); border-radius: 36px; box-shadow: var(--shadow); min-height: 560px; padding: clamp(24px, 4vw, 54px);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; border: 4px solid rgba(255,255,255,.78);
}
.slide-visual { min-height: 330px; border-radius: 32px; display: grid; place-items: center; background: linear-gradient(135deg, #d8fbff, #fff4c2); position: relative; overflow: hidden; }
.slide-visual .big-emoji { font-size: clamp(6rem, 13vw, 10rem); animation: float 2.8s infinite ease-in-out; }
.slide-visual .mini { position: absolute; font-size: 2.2rem; animation: drift 6s infinite linear; opacity: .88; }
.mini.a { left: 12%; top: 12%; } .mini.b { right: 15%; top: 24%; animation-delay: .8s; } .mini.c { left: 25%; bottom: 14%; animation-delay: 1.5s; }
.slide-content ul { margin: 18px 0 0; padding-left: 24px; }
.slide-content li { font-size: 1.25rem; margin: 10px 0; line-height: 1.45; }
.lesson-controls { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.slide-counter { color: white; font-weight: 900; background: rgba(0,0,0,.18); border-radius: 999px; padding: 10px 18px; }
.hidden { display: none !important; }
.discussion-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 20px; align-items: stretch; }
.question-card, .answer-form, .result-stage { background: var(--card); border-radius: 32px; padding: 28px; box-shadow: var(--shadow); border: 4px solid rgba(255,255,255,.76); }
.question-icon { font-size: 4rem; }
.question-label, .small-note { color: var(--muted); font-weight: 800; }
.answer-form { display: flex; flex-direction: column; gap: 16px; }
label { display: flex; flex-direction: column; gap: 8px; font-weight: 900; font-size: 1.06rem; }
input, textarea { border: 3px solid #d8e2ff; border-radius: 20px; padding: 15px 16px; font-size: 1.05rem; font-family: 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif; outline: none; background: #fbfdff; }
input:focus, textarea:focus { border-color: #3aa9ff; box-shadow: 0 0 0 5px rgba(58,169,255,.14); }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; }
.button-row.center { justify-content: center; }
.save-info { min-height: 28px; color: #108a28; font-weight: 900; margin: 0; }
.result-stage { min-height: 78vh; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.result-question { color: #465d8d; font-weight: 900; max-width: 850px; }
.answer-display { width: min(900px, 100%); margin: 16px auto 22px; }
.answer-bubble { background: linear-gradient(135deg, #ffffff, #d8fbff); border: 4px dashed #3aa9ff; border-radius: 30px; padding: 36px; min-height: 180px; display: grid; place-items: center; font-size: clamp(1.5rem, 3.5vw, 2.7rem); font-family: 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif; font-weight: 800; }
.anonymous-label { margin-top: 10px; font-weight: 900; color: #0a7a91; }
.confetti { font-size: 2.5rem; animation: float 1.8s infinite ease-in-out; }
.goodbye-card { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(216,251,255,.96)); }
.pop-in { animation: popIn .55s ease both; } .bounce-in { animation: bounceIn .55s ease both; } .wiggle-soft { animation: softWiggle 5s infinite ease-in-out; }
@keyframes popIn { from { opacity: 0; transform: scale(.92) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(.8); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes orbit { from { transform: rotate(0deg) translateX(62px) rotate(0deg); } to { transform: rotate(360deg) translateX(62px) rotate(-360deg); } }
@keyframes pulse { 50% { transform: translate(-50%,-50%) scale(1.12); } }
@keyframes drift { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(18px) rotate(12deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes softWiggle { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(.8deg); } }
@media (max-width: 820px) { .slide-card, .discussion-layout { grid-template-columns: 1fr; } .slide-card { min-height: auto; } .topbar, .lesson-header { align-items: flex-start; flex-direction: column; } .progress-wrap { width: 100%; } .button-row button { flex: 1 1 220px; } }

/* === Revisi Final: Optimasi Browser Mobile === */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  min-height: 100dvh;
  touch-action: manipulation;
}
button, input, textarea {
  max-width: 100%;
}
button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.slide-content, .question-card, .answer-form, .result-stage, .hero-card, .chapter-card {
  overflow-wrap: anywhere;
}
textarea {
  resize: vertical;
}
@media (hover: none) {
  button:hover { transform: none; filter: none; }
}
@media (max-width: 720px) {
  :root { --radius: 22px; }
  .app-shell { width: min(100% - 24px, 680px); }
  .page { min-height: 100dvh; padding: 18px 0 24px; }
  .hero-card { width: 100%; padding: 28px 18px; border-radius: 28px; }
  .school-badge, .eyebrow { font-size: .72rem; padding: 7px 11px; letter-spacing: .05em; }
  h1 { font-size: clamp(2.05rem, 12vw, 3.3rem); }
  h2 { font-size: clamp(1.65rem, 8vw, 2.45rem); }
  h3 { font-size: clamp(1.35rem, 6.5vw, 1.95rem); }
  p { font-size: 1rem; line-height: 1.55; }
  .mascot-orbit { height: 118px; width: 220px; margin: 10px auto 18px; }
  .sun { font-size: 3.3rem; }
  .earth, .rocket { font-size: 2.1rem; }
  .earth { left: 5px; top: 32px; transform-origin: 105px 30px; }
  .rocket { right: 8px; top: 18px; }
  @keyframes orbit { from { transform: rotate(0deg) translateX(48px) rotate(0deg); } to { transform: rotate(360deg) translateX(48px) rotate(-360deg); } }
  .floating-planet { opacity: .28; font-size: 2rem !important; }
  .planet-a { left: 2vw; top: 4vh; }
  .planet-b { right: 2vw; top: 8vh; }
  .planet-c { right: 3vw; bottom: 3vh; }
  button { width: auto; min-height: 48px; padding: 13px 18px; font-size: .98rem; white-space: normal; }
  .big-btn { width: 100%; font-size: 1.08rem; padding: 16px 20px; }
  .topbar, .lesson-header { gap: 12px; margin-bottom: 16px; }
  .topbar .ghost-btn, .lesson-header .ghost-btn { width: 100%; }
  .chapter-grid { grid-template-columns: 1fr; gap: 14px; }
  .chapter-card { min-height: unset; padding: 20px; border-radius: 24px; }
  .chapter-icon { font-size: 2.4rem; }
  .chapter-card button { width: 100%; }
  .slide-card { grid-template-columns: 1fr; gap: 18px; padding: 20px 16px; border-radius: 28px; min-height: unset; }
  .slide-content ul { padding-left: 20px; margin-top: 14px; }
  .slide-content li { font-size: 1rem; line-height: 1.5; margin: 8px 0; }
  .slide-visual { min-height: 190px; border-radius: 24px; order: -1; }
  .slide-visual .big-emoji { font-size: clamp(4.7rem, 24vw, 7rem); }
  .slide-visual .mini { font-size: 1.55rem; }
  .lesson-controls { position: sticky; bottom: 8px; z-index: 5; background: rgba(18,35,90,.72); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); border-radius: 24px; padding: 10px; gap: 8px; }
  .lesson-controls button { flex: 1 1 42%; padding: 12px 12px; }
  .lesson-controls #discussionBtn { flex-basis: 100%; }
  .slide-counter { order: -1; flex: 1 0 100%; text-align: center; padding: 8px 12px; }
  .discussion-layout { grid-template-columns: 1fr; gap: 14px; }
  .question-card, .answer-form, .result-stage { padding: 20px 16px; border-radius: 26px; }
  .question-icon { font-size: 3rem; }
  label { font-size: .98rem; }
  input, textarea { width: 100%; font-size: 16px; border-radius: 18px; padding: 13px 14px; }
  .button-row { flex-direction: column; gap: 10px; }
  .button-row button { width: 100%; flex: none; }
  .result-stage { min-height: calc(100dvh - 36px); }
  .answer-display { margin: 12px auto 18px; }
  .answer-bubble { min-height: 150px; padding: 22px 16px; border-radius: 24px; font-size: clamp(1.25rem, 7vw, 1.85rem); }
  .confetti { font-size: 1.8rem; }
}
@media (max-width: 390px) {
  .app-shell { width: min(100% - 16px, 374px); }
  .hero-card, .slide-card, .question-card, .answer-form, .result-stage { padding-left: 14px; padding-right: 14px; }
  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.55rem; }
  .lesson-controls { border-radius: 20px; }
  .lesson-controls button { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}