/* ============================================================
   Taman Belajar v2 — tema "Buku & Kelas": kertas kotak-kotak, kartu buku,
   papan tulis kapur untuk cara hitung, guru Bu Gina si gajah.
   Urutan: 1 dasar · 2 tombol · 3 maskot · 4 rumah · 5 sheet · 6 siap
           7 soal/HUD · 8 papan cara · 9 visual · 10 hasil · 11 ulas · 12 animasi
   ============================================================ */

/* ---------- 1. DASAR ---------- */
:root {
  --biru: #4c7dff; --biru-tua: #2f5fe0; --kuning: #ffbe1b; --kuning-tua: #e09a00;
  --hijau: #28b99a; --hijau-tua: #1a8f76; --merah: #ff5c6c; --merah-tua: #d93c4c; --ungu: #8b5cf6; --pink: #ff5c8a;
  --teks: #1d2b4f; --teks-2: #56648a; --kertas: #fffdf6; --garis-kertas: #dbe8ff;
  --papan: #1f4f45; --papan-2: #24594e; --kayu: #b9783f; --kapur: #f7f5ea; --kapur-kuning: #ffe27a;
  --bayang: 0 6px 0 rgba(29, 43, 79, .12), 0 14px 26px rgba(29, 43, 79, .10);
  --r: 22px;
  --mapel: var(--biru);
  --font: "Nunito", "Baloo 2", "Quicksand", ui-rounded, "Segoe UI Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Nunito", ui-rounded, system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
html { overflow-x: hidden; }
body {
  font-family: var(--font); color: var(--teks); font-weight: 700; min-height: 100vh;
  background-color: #f6f1e3;
  background-image:
    linear-gradient(rgba(76, 125, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 125, 255, .08) 1px, transparent 1px);
  background-size: 26px 26px;
  overflow-x: hidden; -webkit-user-select: none; user-select: none;
}
input { -webkit-user-select: text; user-select: text; font-family: inherit; }
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button:disabled { cursor: default; }
a { color: inherit; }
b, strong { font-weight: 900; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--kuning); outline-offset: 3px; }

.latar { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pensil { position: absolute; font-size: 44px; opacity: .16; animation: melayang 9s ease-in-out infinite; }
.pensil.p1 { top: 12%; left: 4%; transform: rotate(-20deg); }
.pensil.p2 { top: 58%; right: 3%; animation-delay: -3s; }
.pensil.p3 { bottom: 6%; left: 8%; animation-delay: -6s; font-size: 34px; }
@keyframes melayang { 50% { translate: 0 -14px; } }

.layar { display: none; position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 12px 14px 32px; min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
.layar.aktif { display: block; animation: masukLayar .3s ease-out; }
@keyframes masukLayar { from { opacity: 0; transform: translateY(10px); } }
body.sedang-main > div[title="Klik untuk ganti anak"] { display: none !important; }

/* ---------- 2. TOMBOL ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 52px; padding: 10px 18px; border-radius: 18px; font-size: 17px; font-weight: 900;
  background: #fff; color: var(--teks); text-decoration: none;
  box-shadow: 0 5px 0 #cfd8ea; transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #cfd8ea; }
.btn.utama { background: var(--biru); color: #fff; box-shadow: 0 5px 0 var(--biru-tua); }
.btn.utama:active:not(:disabled) { box-shadow: 0 1px 0 var(--biru-tua); }
.btn.kuning { background: var(--kuning); color: #5a3a00; box-shadow: 0 5px 0 var(--kuning-tua); }
.btn.kuning:active:not(:disabled) { box-shadow: 0 1px 0 var(--kuning-tua); }
.btn.besar { min-height: 60px; font-size: 20px; padding: 12px 24px; }
.btn.lebar { width: 100%; }
.btn:disabled { opacity: .6; }
.btn.denyut { animation: denyut 1.2s ease-in-out infinite; }
@keyframes denyut { 50% { transform: scale(1.04); } }
.btn-teks { display: inline-block; padding: 10px 12px; font-size: 15px; font-weight: 800; color: var(--teks-2); text-decoration: underline; text-underline-offset: 3px; }
.btn-bulat {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #fff; font-size: 22px; text-decoration: none; color: var(--teks); box-shadow: 0 4px 0 #cfd8ea;
}
.btn-bulat:active { transform: translateY(3px); box-shadow: 0 1px 0 #cfd8ea; }
.btn-bulat.kecil { width: 44px; height: 44px; font-size: 18px; }
.btn-bulat.hantu { visibility: hidden; }
.btn-ikon { width: 46px; height: 46px; border-radius: 14px; background: #eef3ff; font-size: 22px; display: grid; place-items: center; box-shadow: 0 3px 0 #d3def8; }
.btn-ikon:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.btn-ikon:disabled { opacity: .4; }

/* bar atas */
.bar-atas { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: 980px; margin: 0 auto; padding: 12px 14px 4px; }
.layar .bar-atas { padding: 0 0 8px; }
.bar-judul { flex: 1; text-align: center; font-size: 19px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 3. MASKOT BU GINA ---------- */
.gina { width: 100%; height: 100%; overflow: visible; display: block; }
.gina-tubuh { transform-origin: 60px 118px; }
.gina-kelopak { transform-box: fill-box; transform-origin: center; transform: scaleY(0); animation: kedip 4.4s infinite; }
@keyframes kedip { 0%, 92%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1); } }
.gina-telinga { transform-box: fill-box; transform-origin: 90% 50%; animation: kipas 3.2s ease-in-out infinite; }
.gina-telinga.kanan { transform-origin: 10% 50%; animation-delay: -1.6s; }
@keyframes kipas { 50% { transform: rotate(-6deg) scaleX(.94); } }
.gina-belalai { transform-box: fill-box; transform-origin: 0% 0%; animation: ayun 3.6s ease-in-out infinite; }
@keyframes ayun { 50% { transform: rotate(4deg); } }
.gina .mulut, .gina .alis { display: none; }
.gina[data-mood="biasa"] .m-senyum, .gina[data-mood="senang"] .m-lebar, .gina[data-mood="sedih"] .m-sedih, .gina[data-mood="o"] .m-o { display: block; }
.gina .a-biasa { display: block; }
.gina[data-mood="sedih"] .a-biasa { display: none; }
.gina[data-mood="sedih"] .a-sedih { display: block; }
.gina.lonjak .gina-tubuh { animation: lonjak .6s ease-out; }
.gina.goyang .gina-tubuh { animation: goyang .5s ease-in-out; }
@keyframes lonjak { 30% { transform: translateY(-14px) scale(1.04, .96); } 60% { transform: translateY(0) scale(.97, 1.03); } }
@keyframes goyang { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

.gelembung-kata {
  position: relative; background: #fff; border-radius: 18px; padding: 10px 14px; font-size: 15px; line-height: 1.35;
  box-shadow: var(--bayang); opacity: 0; transform: scale(.9); transition: opacity .2s, transform .2s; pointer-events: none;
}
.gelembung-kata.tampil { opacity: 1; transform: none; }
.gelembung-kata::before { content: ""; position: absolute; left: 22px; top: -9px; border: 10px solid transparent; border-top: 0; border-bottom-color: #fff; }

/* ---------- 4. RUMAH ---------- */
.rumah { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 0 14px 20px; }
.hero { display: grid; grid-template-columns: 112px 1fr; gap: 6px 14px; align-items: center; margin: 4px 0 12px; }
.hero-maskot { width: 112px; height: 116px; cursor: pointer; grid-row: span 2; }
.hero-teks h1 { font-size: clamp(32px, 7vw, 50px); font-weight: 900; letter-spacing: -.5px; color: var(--teks); }
.hero-teks h1 span { color: var(--biru); background: linear-gradient(transparent 62%, rgba(255, 190, 27, .55) 62%); padding: 0 4px; }
.hero-teks p { margin: 4px 0 0; color: var(--teks-2); font-size: 16px; }
.hero .gelembung-kata { grid-column: 2; opacity: 1; transform: none; }
.hero .gelembung-kata::before { left: -9px; top: 14px; border: 10px solid transparent; border-left: 0; border-right-color: #fff; }

.pita { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.pita::-webkit-scrollbar { display: none; }
.pita-item { flex: none; background: #fff; border-radius: 999px; padding: 7px 12px; font-size: 13px; box-shadow: 0 3px 0 #e2e8f5; white-space: nowrap; }

.bagian { margin: 14px 0 20px; }
.judul-bagian { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 900; margin-bottom: 12px; flex-wrap: wrap; }
.judul-bagian .nomor { width: 34px; height: 34px; border-radius: 50%; background: var(--kuning); color: #5a3a00; display: grid; place-items: center; font-size: 18px; box-shadow: 0 3px 0 var(--kuning-tua); }
.judul-bagian small { font-size: 14px; color: var(--biru); background: #e8efff; padding: 3px 10px; border-radius: 999px; }
.catatan { color: var(--teks-2); font-size: 14px; margin: 10px 2px 0; font-weight: 700; }

.jenjang { display: flex; gap: 8px; background: #fff; padding: 6px; border-radius: 20px; box-shadow: var(--bayang); }
.tab-jenjang { flex: 1; min-height: 56px; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.tab-jenjang b { font-size: 16px; }
.tab-jenjang small { font-size: 12px; color: var(--teks-2); font-weight: 800; margin-top: 2px; }
.tab-jenjang.aktif { background: var(--biru); color: #fff; box-shadow: 0 4px 0 var(--biru-tua); }
.tab-jenjang.aktif small { color: #dbe6ff; }
.tab-jenjang.segera { opacity: .75; }
.tab-jenjang.segera small { background: #fff1c7; color: #8a5a00; padding: 1px 8px; border-radius: 999px; }

/* kartu kelas = buku */
.grid-kelas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kartu-kelas {
  position: relative; min-height: 118px; border-radius: 10px 20px 20px 10px; padding: 12px 10px 10px 22px; text-align: left;
  background: var(--w); color: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .18), 0 10px 20px rgba(29, 43, 79, .12);
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: transform .12s;
}
.kartu-kelas::after { content: ""; position: absolute; right: 8px; top: 8px; bottom: 8px; width: 8px; border-radius: 4px; background: repeating-linear-gradient(#fff 0 3px, transparent 3px 6px); opacity: .35; }
.kk-punggung { position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: rgba(0, 0, 0, .18); }
.kk-angka { font-size: 46px; font-weight: 900; line-height: 1; text-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.kk-isi b { display: block; font-size: 16px; }
.kk-isi small { font-size: 12px; opacity: .9; font-weight: 800; }
.kk-bintang { position: absolute; right: 22px; top: 12px; font-size: 13px; background: rgba(255, 255, 255, .28); border-radius: 999px; padding: 2px 8px; }
.kartu-kelas.aktif { transform: translateY(-4px) rotate(-1.5deg); outline: 4px solid #fff; box-shadow: 0 0 0 7px var(--w), 0 12px 24px rgba(29, 43, 79, .2); }
.kartu-kelas:active { transform: translateY(2px); }
.kartu-kelas.segera { opacity: .55; filter: grayscale(.7); }
.kartu-kelas.segera small { background: #fff1c7; color: #8a5a00; padding: 0 6px; border-radius: 999px; }

.grid-mapel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kartu-mapel {
  position: relative; display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto; gap: 4px 12px; align-items: center;
  background: #fff; border-radius: var(--r); padding: 14px; text-decoration: none; color: var(--teks);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--w) 45%, #cfd8ea), 0 14px 24px rgba(29, 43, 79, .08); border: 3px solid color-mix(in srgb, var(--w) 25%, #fff);
  transition: transform .1s;
}
.kartu-mapel:active { transform: translateY(4px); }
.km-ikon { grid-row: span 2; width: 58px; height: 58px; border-radius: 18px; background: color-mix(in srgb, var(--w) 16%, #fff); display: grid; place-items: center; font-size: 32px; }
.km-isi b { display: block; font-size: 18px; line-height: 1.15; }
.km-isi small { color: var(--teks-2); font-size: 13px; font-weight: 800; }
.km-kaki { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lencana { background: var(--w); color: #fff; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 900; white-space: nowrap; }
.lencana.segera { background: #eef0f5; color: var(--teks-2); }
.bintang-kecil i { font-style: normal; color: #d9deea; font-size: 16px; }
.bintang-kecil i.isi { color: var(--kuning); }
.kartu-mapel.kosong { opacity: .62; filter: grayscale(.4); box-shadow: 0 4px 0 #dfe3ec; }

.kartu-info { background: #fff; border-radius: var(--r); padding: 16px 18px; box-shadow: var(--bayang); border-left: 8px solid var(--kuning); }
.kartu-info h3 { font-size: 17px; margin-bottom: 6px; }
.kartu-info ul { margin: 0; padding-left: 20px; color: var(--teks-2); font-size: 14px; line-height: 1.55; font-weight: 700; }
.kaki { position: relative; z-index: 1; text-align: center; font-size: 13px; color: var(--teks-2); padding: 10px 14px 30px; }

/* ---------- 5. SHEET TOPIK ---------- */
.sheet { position: fixed; inset: 0; z-index: 30; pointer-events: none; visibility: hidden; transition: visibility 0s .3s; }
.sheet.buka { visibility: visible; transition: none; }
.sheet-latar { position: absolute; inset: 0; background: rgba(20, 30, 60, .45); opacity: 0; transition: opacity .25s; }
.sheet-isi {
  position: absolute; left: 50%; bottom: 0; width: min(640px, 100%); max-height: 88vh; overflow-y: auto; transform: translate(-50%, 105%);
  background: var(--kertas); border-radius: 28px 28px 0 0; padding: 10px 16px 26px; transition: transform .3s cubic-bezier(.2, .9, .3, 1.1);
}
.sheet.buka { pointer-events: auto; }
.sheet.buka .sheet-latar { opacity: 1; }
.sheet.buka .sheet-isi { transform: translate(-50%, 0); }
.sheet-pegangan { width: 50px; height: 6px; border-radius: 3px; background: #d5dbe8; margin: 0 auto 12px; }
.sheet-kepala { display: flex; align-items: center; gap: 12px; }
.sheet-kepala > div { flex: 1; }
.sheet-kepala h2 { font-size: 22px; }
.sheet-kepala p { margin: 2px 0 0; color: var(--teks-2); font-size: 14px; }
.sheet-ikon { font-size: 40px; }
.sheet-tanya { font-size: 17px; margin: 14px 0 10px; }
.grid-topik { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kartu-topik {
  display: flex; flex-direction: column; gap: 4px; padding: 12px; min-height: 76px; border-radius: 18px; background: #fff; text-decoration: none;
  box-shadow: 0 4px 0 #dbe3f2; color: var(--teks);
}
.kartu-topik span { font-size: 24px; }
.kartu-topik b { font-size: 15px; line-height: 1.2; }
.kartu-topik small { font-size: 12px; color: #fff; opacity: .9; }
.kartu-topik.campur { grid-column: 1 / -1; background: var(--biru); color: #fff; box-shadow: 0 5px 0 var(--biru-tua); flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.kartu-topik.campur small { flex-basis: 100%; padding-left: 36px; }
.kartu-topik:active { transform: translateY(3px); box-shadow: none; }

/* ---------- 6. SIAP ---------- */
.kartu-siap { position: relative; background: var(--kertas); border-radius: 26px; padding: 18px 18px 14px; text-align: center; box-shadow: var(--bayang); margin-top: 4px; border-top: 10px solid var(--mapel); }
.siap-maskot { width: 120px; height: 124px; margin: 0 auto -4px; }
.kartu-siap .gelembung-kata { margin: 4px auto 10px; max-width: 420px; }
.kartu-siap .gelembung-kata::before { left: 50%; margin-left: -10px; }
.ikon-besar { font-size: 34px; display: block; }
.kartu-siap h1 { font-size: clamp(24px, 6vw, 32px); margin: 2px 0 6px; }
.siap-sub { color: var(--teks-2); margin: 0 0 10px; font-size: 16px; }
.chip-topik { display: inline-block; background: #e8efff; color: var(--biru-tua); border-radius: 999px; padding: 6px 14px; margin: 0 0 10px; font-size: 15px; }
.pilih-input { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 14px; font-size: 14px; color: var(--teks-2); }
.saklar { display: flex; background: #edf1fa; border-radius: 16px; padding: 4px; gap: 4px; }
.saklar button { min-height: 46px; padding: 6px 14px; border-radius: 12px; font-size: 15px; font-weight: 900; color: var(--teks-2); }
.saklar button.aktif { background: #fff; color: var(--teks); box-shadow: 0 3px 0 #cfd8ea; }
#btn-mulai { width: min(100%, 360px); }
.kartu-papan-kecil { background: #fff; border-radius: 20px; padding: 14px 16px; margin-top: 16px; box-shadow: var(--bayang); }
.kartu-papan-kecil h3 { font-size: 16px; margin-bottom: 8px; }
.papan-baris { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px dashed #e3e8f2; }
.papan-baris:last-child { border: 0; }
.papan-medali { font-size: 22px; }
.papan-nama { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.papan-skor small { color: var(--teks-2); }
.memuat { color: var(--teks-2); font-size: 14px; margin: 6px 0; text-align: center; }

/* ---------- 7. SOAL / HUD ---------- */
.hud { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hud-tengah { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.titik-progres { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.titik-progres i { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #d5dcec; transition: transform .2s; }
.titik-progres i.kini { box-shadow: inset 0 0 0 4px var(--biru); transform: scale(1.18); }
.titik-progres i.benar { background: var(--hijau); box-shadow: none; }
.titik-progres i.salah { background: var(--merah); box-shadow: none; }
.hud-info { font-size: 13px; color: var(--teks-2); font-weight: 800; }
.hud-poin { min-width: 64px; height: 44px; background: #fff; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 10px; box-shadow: 0 4px 0 #cfd8ea; font-size: 18px; }
.hud-poin b::before { content: "⭐ "; font-size: 14px; }
.hud-poin b.naik { animation: naik .4s ease-out; }
@keyframes naik { 40% { transform: scale(1.35); color: var(--hijau); } }
.combo { font-size: 13px; color: #e2540f; }
body.mode-ulang .hud-poin { visibility: hidden; }

.kartu-soal {
  position: relative; background: var(--kertas); border-radius: 22px; padding: 14px 16px 12px 40px; box-shadow: var(--bayang);
  background-image: repeating-linear-gradient(transparent 0 31px, var(--garis-kertas) 31px 33px);
  background-position: 0 44px;
}
.kartu-soal::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 2px; background: #ffb3b3; }
.kartu-soal::after { content: ""; position: absolute; left: 8px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: #f6f1e3; box-shadow: 0 34px 0 #f6f1e3, 0 68px 0 #f6f1e3, inset 0 1px 2px rgba(0, 0, 0, .2); }
.kartu-soal.masuk { animation: kertas .35s ease-out; }
@keyframes kertas { from { opacity: 0; transform: translateX(26px) rotate(1.5deg); } }
.ks-atas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ks-label { font-size: 13px; font-weight: 900; color: #fff; background: var(--mapel); padding: 4px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ks-tombol { display: flex; gap: 8px; flex: none; }
.soal-teks { font-size: clamp(22px, 5.6vw, 30px); font-weight: 900; line-height: 1.3; margin: 14px 0 10px; overflow-wrap: anywhere; }
.soal-teks.panjang { font-size: clamp(19px, 4.6vw, 24px); }
.ks-maskot { display: flex; align-items: flex-end; gap: 8px; min-height: 64px; margin-left: -24px; }
.soal-maskot { width: 64px; height: 66px; flex: none; }
.gelembung-kata.kecil { font-size: 15px; padding: 8px 12px; margin-bottom: 8px; }
.gelembung-kata.kecil::before { left: -9px; top: auto; bottom: 12px; border: 9px solid transparent; border-left: 0; border-right-color: #fff; }

.jawab { margin-top: 14px; }
.jawab.pilihan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }   /* minmax(0): kata panjang meluap di tombol (terukur), kolom tidak melebar */
.jawab.pilihan.satu-kolom { grid-template-columns: 1fr; }
.jawab.pilihan:not(.satu-kolom) .opsi, .mini-opsi:not(.satu-kolom) .opsi { overflow-wrap: normal; }   /* kata panjang meluber → latihan.js pindah ke satu kolom */
.ket-input { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--teks-2); text-align: center; }
.opsi {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 10px 14px; border-radius: 18px; text-align: left;
  background: #fff; font-size: 20px; font-weight: 900; box-shadow: 0 5px 0 #cfd8ea; border: 3px solid transparent; transition: transform .08s, box-shadow .08s, opacity .2s;
  overflow-wrap: anywhere;
}
.opsi:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #cfd8ea; }
.opsi-huruf { flex: none; width: 30px; height: 30px; border-radius: 10px; background: #eef3ff; color: var(--biru-tua); display: grid; place-items: center; font-size: 15px; }
.opsi-teks { flex: 1; }
.opsi.benar { background: #dff8ef; border-color: var(--hijau); box-shadow: 0 5px 0 var(--hijau-tua); animation: pop .35s; }
.opsi.benar .opsi-huruf { background: var(--hijau); color: #fff; }
.opsi.salah { background: #ffe5e8; border-color: var(--merah); box-shadow: 0 5px 0 var(--merah-tua); animation: geleng .4s; }
.opsi.salah .opsi-huruf { background: var(--merah); color: #fff; }
.opsi:disabled:not(.benar):not(.salah) { opacity: .5; }
.opsi.pudar { opacity: .25 !important; text-decoration: line-through; }
.opsi.kecil { min-height: 54px; font-size: 17px; justify-content: center; text-align: center; }
@keyframes pop { 40% { transform: scale(1.06); } }
@keyframes geleng { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* numpad */
.jawab.numpad { max-width: 380px; margin-left: auto; margin-right: auto; }
.np-layar { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 18px; padding: 8px 10px 8px 18px; box-shadow: inset 0 0 0 3px #d5dcec; margin-bottom: 10px; min-height: 66px; }
.np-isi { flex: 1; font-size: 34px; font-weight: 900; letter-spacing: 1px; text-align: center; }
.np-isi.benar { color: var(--hijau-tua); }
.np-isi.salah { color: var(--merah); text-decoration: line-through; }
.np-minus { width: 52px; height: 48px; border-radius: 14px; background: #eef3ff; font-size: 22px; font-weight: 900; }
.np-tombol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.np { min-height: 58px; border-radius: 16px; background: #fff; font-size: 26px; font-weight: 900; box-shadow: 0 5px 0 #cfd8ea; }
.np:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #cfd8ea; }
.np.ok { background: var(--hijau); color: #fff; box-shadow: 0 5px 0 var(--hijau-tua); }
.np.hapus { background: #fff1d6; }
.np:disabled { opacity: .55; }
.goyang-salah { animation: geleng .4s; }

.umpan { margin: 14px 0 0; padding: 0; font-size: 18px; text-align: center; min-height: 0; }
.umpan.benar, .umpan.salah { padding: 12px 14px; border-radius: 16px; animation: masukLayar .25s; }
.umpan.benar { background: #dff8ef; color: #0f6b55; }
.umpan.salah { background: #fff0dc; color: #8a4500; }
.umpan s { color: var(--merah); }
.aksi-soal { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.aksi-soal .btn { flex: 1 1 160px; }

/* ---------- 8. PAPAN CARA ---------- */
.wadah-papan:empty { display: none; }
.wadah-papan { margin-top: 14px; scroll-margin-top: 10px; }
.papan {
  position: relative; background: var(--papan); color: var(--kapur); border-radius: 18px; padding: 14px 14px 12px;
  border: 8px solid var(--kayu); box-shadow: inset 0 0 40px rgba(0, 0, 0, .25), 0 6px 0 #8a5528, 0 14px 24px rgba(29, 43, 79, .15);
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 6px 6px;
  animation: papanMasuk .35s ease-out;
}
.papan.statis { animation: none; }
@keyframes papanMasuk { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.papan-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.papan-judul { font-size: 18px; font-weight: 900; color: var(--kapur-kuning); }
.papan-baca { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .12); font-size: 20px; flex: none; }
.papan-jawab { display: inline-block; margin: 6px 0 4px; font-size: 15px; background: rgba(255, 226, 122, .15); border: 2px dashed rgba(255, 226, 122, .6); border-radius: 10px; padding: 4px 10px; }
.papan-jawab b { color: var(--kapur-kuning); font-size: 18px; }
.papan-dd { margin: 8px 0 4px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); font-size: 15px; line-height: 1.5; }
.papan-dd ul { margin: 0; padding-left: 20px; }
.papan-dd b { color: #9fe3cf; }
.papan-vis { display: flex; justify-content: center; }
.papan-vis:empty { display: none; }
.papan-langkah { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.papan-langkah li { padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .06); border-left: 4px solid rgba(255, 255, 255, .25); }
.papan-langkah li.muncul { animation: kapurMuncul .45s ease-out; }
.papan-langkah li.akhir { border-left-color: var(--kapur-kuning); background: rgba(255, 226, 122, .12); }
@keyframes kapurMuncul { from { opacity: 0; transform: translateX(-12px); clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.papan-langkah .no { font-size: 12px; font-weight: 900; color: #9fe3cf; text-transform: uppercase; letter-spacing: .5px; }
.papan-langkah p { margin: 2px 0 0; font-size: 16px; line-height: 1.45; font-weight: 700; overflow-wrap: anywhere; }
.rumus { margin-top: 6px; font-family: var(--mono); font-size: 19px; font-weight: 900; color: var(--kapur-kuning); letter-spacing: .5px; overflow-wrap: anywhere; line-height: 1.4; }
.papan-catatan, .papan-netral { margin: 10px 0 0; font-size: 14px; color: #cfe9df; line-height: 1.45; }
.papan-aksi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.btn.kapur { background: var(--kapur-kuning); color: #3c2c00; box-shadow: 0 5px 0 #c7a530; flex: 1 1 200px; }
.btn.kapur:active { box-shadow: 0 1px 0 #c7a530; }
.papan .btn-teks { color: #cfe9df; }

/* ---------- 9. VISUAL ---------- */
.vis { margin: 10px auto 4px; max-width: 100%; overflow-x: auto; }
.v-ket { margin: 4px 0 0; text-align: center; font-size: 13px; color: #cfe9df; }
/* grid bersusun */
.v-grid { display: inline-flex; flex-direction: column; padding: 6px 10px; font-family: var(--mono); }
.g-baris { display: grid; grid-template-columns: repeat(var(--kol), 34px); }
.g-sel { height: 40px; display: grid; place-items: center; font-size: 28px; font-weight: 900; color: var(--kapur); position: relative; border-radius: 6px; }
.g-baris.kecil .g-sel { height: 24px; font-size: 16px; }
.g-sel.simpan, .g-sel.pinjam { color: var(--kapur-kuning); }
.g-sel.simpan::before { content: ""; position: absolute; inset: 2px 7px; border: 2px solid var(--kapur-kuning); border-radius: 50%; }
.g-sel.op { color: #9fe3cf; }
.g-sel.hasil { color: var(--kapur-kuning); }
.g-sel.sisa { color: #ffb3c0; }
.g-sel.kurang { color: #cfe9df; }
.g-sel.garis { border-top: 3px solid var(--kapur); border-radius: 0; }
.g-sel.coret::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 3px; background: #ff8fa0; transform: rotate(-35deg); }
.g-sel.sorot { background: rgba(255, 226, 122, .14); }
.g-sel.baru { animation: tulisKapur .5s ease-out; }
@keyframes tulisKapur { from { opacity: 0; transform: scale(1.6); } }
.v-grid.poro .g-sel.atasgaris, .v-grid.poro .g-sel.angka.atasgaris { border-top: 3px solid var(--kapur); border-radius: 0; }
.v-grid.poro .g-sel.kurung { font-size: 34px; color: var(--kapur); transform: scaleY(1.25); }
/* garis bilangan */
.v-garis { width: min(100%, 520px); height: auto; display: block; }
.gb-sumbu { stroke: var(--kapur); stroke-width: 2.5; stroke-linecap: round; }
.gb-tik { stroke: var(--kapur); stroke-width: 2; }
.gb-label { fill: var(--kapur); font-size: 13px; font-weight: 800; text-anchor: middle; font-family: var(--font); }
.gb-label.nol { fill: #9fe3cf; }
.gb-label.akhir { fill: var(--kapur-kuning); font-size: 13px; font-weight: 900; }
.gb-lompat { fill: none; stroke: var(--kapur-kuning); stroke-width: 2.2; stroke-dasharray: 300; stroke-dashoffset: 300; animation: gambarGaris .5s ease-out forwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes gambarGaris { to { stroke-dashoffset: 0; } }
.gb-lompat-l { fill: var(--kapur-kuning); font-size: 14px; font-weight: 900; text-anchor: middle; font-family: var(--font); }
.gb-titik { fill: #ff8fb1; stroke: #fff; stroke-width: 2; }
.gb-titik-l { fill: #ffd1df; font-size: 14px; font-weight: 900; text-anchor: middle; font-family: var(--font); }
.gb-mulai { fill: #9fe3cf; }
.gb-akhir { fill: var(--kapur-kuning); stroke: #fff; stroke-width: 2; }
/* titik / balok / kelompok */
.v-titik { display: grid; grid-template-columns: repeat(10, 22px); gap: 6px; justify-content: center; }
.v-titik i { width: 22px; height: 22px; border-radius: 50%; background: #6aa8ff; }
.v-titik i.b { background: var(--kuning); }
.v-titik i.coret { background: rgba(255, 255, 255, .25); position: relative; }
.v-titik i.coret::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: #ff8fa0; font-size: 16px; font-style: normal; }
.v-balok { display: flex; gap: 6px; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.v-balok .batang { display: grid; grid-template-rows: repeat(10, 9px); gap: 1px; width: 14px; }
.v-balok .batang i { background: #6aa8ff; border-radius: 2px; }
.satuan-wadah { display: grid; grid-template-columns: repeat(3, 14px); gap: 3px; margin-left: 8px; }
.v-balok .kotak { width: 14px; height: 14px; background: var(--kuning); border-radius: 3px; }
.v-kelompok { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.v-kelompok .kel { display: grid; grid-template-columns: repeat(5, 12px); gap: 4px; padding: 7px; border: 2px dashed rgba(255, 255, 255, .45); border-radius: 12px; min-width: 40px; min-height: 30px; place-content: center; }
.v-kelompok .kel i { width: 12px; height: 12px; border-radius: 50%; background: var(--kuning); }
.v-kelompok .kel b { font-size: 20px; color: var(--kapur-kuning); grid-column: 1 / -1; text-align: center; }
.v-kelompok .kel.sorot { border-color: var(--kapur-kuning); border-style: solid; background: rgba(255, 226, 122, .14); }
/* tabel */
.v-tempat, .v-tabel { border-collapse: separate; border-spacing: 4px; margin: 0 auto; }
.v-tempat th, .v-tabel th { font-size: 12px; color: #9fe3cf; font-weight: 900; padding: 4px 8px; background: rgba(255, 255, 255, .08); border-radius: 8px; }
.v-tempat td { font-size: 30px; font-weight: 900; text-align: center; padding: 4px 10px; background: rgba(255, 255, 255, .06); border-radius: 8px; }
.v-tabel td { font-size: 18px; font-weight: 900; text-align: center; padding: 4px 10px; background: rgba(255, 255, 255, .06); border-radius: 8px; letter-spacing: 1px; }
.v-tempat .sorot, .v-tabel .sorot, .v-tabel tr.sorot td { background: rgba(255, 226, 122, .2); color: var(--kapur-kuning); }
/* urut / daftar */
.v-urut { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 24px; }
.v-urut span { background: rgba(255, 255, 255, .1); padding: 4px 12px; border-radius: 10px; }
.v-urut b { color: var(--kapur-kuning); }
.v-daftar { display: flex; flex-direction: column; gap: 8px; }
.d-baris small { font-size: 12px; color: #9fe3cf; }
.d-baris > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.d-baris span { min-width: 34px; text-align: center; padding: 3px 7px; border-radius: 8px; background: rgba(255, 255, 255, .08); font-size: 16px; }
.d-baris span.sorot { background: var(--kapur-kuning); color: #3c2c00; }
/* tangga satuan */
.v-tangga { display: grid; grid-template-columns: repeat(7, 1fr); align-items: start; gap: 3px; min-width: 300px; }
.v-tangga .anak { margin-top: calc(var(--k) * 10px); background: rgba(255, 255, 255, .08); border-radius: 8px 8px 0 0; padding: 6px 2px 8px; text-align: center; border-bottom: 3px solid rgba(255, 255, 255, .3); }
.v-tangga .anak b { font-size: 15px; }
.v-tangga .anak small { display: block; font-size: 10px; color: var(--kapur-kuning); margin-top: 2px; white-space: nowrap; }
.v-tangga .anak.aktif { background: rgba(255, 226, 122, .15); border-bottom-color: var(--kapur-kuning); }
.v-tangga .anak.dari, .v-tangga .anak.ke { background: var(--kapur-kuning); color: #3c2c00; }
.v-tangga .anak.dari small { color: #6b4d00; }
/* pecahan */
.v-pecahan { display: flex; flex-direction: column; gap: 8px; width: min(100%, 360px); margin: 0 auto; }
.pc-baris { display: flex; align-items: center; gap: 10px; }
.pc-label { width: 46px; font-size: 18px; color: var(--kapur-kuning); text-align: right; }
.pc-bar { flex: 1; display: flex; height: 26px; border: 2px solid var(--kapur); border-radius: 6px; overflow: hidden; }
.pc-bar i { flex: 1; border-right: 1.5px solid rgba(255, 255, 255, .5); }
.pc-bar i:last-child { border: 0; }
.pc-bar i.isi { background: #6aa8ff; }
/* jam & bangun */
.v-jam { width: 150px; height: 150px; display: block; margin: 0 auto; }
.jm-muka { fill: #fffdf6; stroke: var(--kayu); stroke-width: 5; }
.jm-angka { font-size: 13px; font-weight: 900; text-anchor: middle; fill: #1d2b4f; font-family: var(--font); }
.jm-angka.sorot { fill: #e2540f; font-size: 16px; }
.jm-panjang { stroke: #4c7dff; stroke-width: 4; stroke-linecap: round; }
.jm-pendek { stroke: #e2540f; stroke-width: 6; stroke-linecap: round; }
.v-ket .kp { color: #ffb08a; } .v-ket .kl { color: #9fc0ff; }
.v-bangun { width: min(100%, 260px); height: auto; display: block; margin: 0 auto; }
.bg-isi { fill: rgba(106, 168, 255, .35); stroke: var(--kapur); stroke-width: 3; stroke-linejoin: round; }
.bg-isi.atas { fill: rgba(106, 168, 255, .55); }
.bg-isi.sisi { fill: rgba(106, 168, 255, .2); }
.bg-kotak { stroke: rgba(255, 255, 255, .45); stroke-width: 1; }
.bg-garis { stroke: var(--kapur-kuning); stroke-width: 2.5; stroke-dasharray: 5 4; }
.bg-l { fill: var(--kapur-kuning); font-size: 12px; font-weight: 900; text-anchor: middle; font-family: var(--font); }
.bg-l.kanan { text-anchor: end; } .bg-l.kiri { text-anchor: start; }
/* SMP: sudut & diagram Venn */
.bg-sinar { stroke: var(--kapur); stroke-width: 3; stroke-linecap: round; }
.bg-busur { fill: none; stroke: var(--kapur-kuning); stroke-width: 2.5; }
.bg-busur.b { stroke: #9fc0ff; }
.bg-semesta { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .45); stroke-width: 2; }
.v-venn { width: min(100%, 300px); }
.v-venn .bg-isi { fill: rgba(106, 168, 255, .22); }
.bg-l.vn { font-size: 11px; }

/* ---------- 10. HASIL ---------- */
.kartu-hasil { background: var(--kertas); border-radius: 26px; padding: 16px 16px 18px; text-align: center; box-shadow: var(--bayang); border-top: 10px solid var(--mapel); }
.hasil-maskot { width: 120px; height: 124px; margin: 0 auto; }
.kartu-hasil h1 { font-size: clamp(26px, 7vw, 36px); margin-top: 2px; }
.hasil-sub { color: var(--teks-2); margin: 6px 0 4px; }
.bintang-besar-baris { display: flex; justify-content: center; gap: 8px; margin: 6px 0 10px; }
.bintang-besar { font-size: 56px; line-height: 1; color: #dfe4ef; transition: color .2s; }
.bintang-besar.isi { color: var(--kuning); animation: bintangPop .5s cubic-bezier(.2, 1.6, .4, 1); text-shadow: 0 4px 0 var(--kuning-tua); }
@keyframes bintangPop { from { transform: scale(.2) rotate(-40deg); } }
.hasil-stat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 14px; }
.stat { background: #fff; border-radius: 16px; padding: 8px 4px; box-shadow: 0 4px 0 #e2e8f5; display: flex; flex-direction: column; align-items: center; }
.stat span { font-size: 18px; }
.stat b { font-size: 21px; }
.stat small { font-size: 11px; color: var(--teks-2); font-weight: 800; }
.kirim-kartu { background: #fff; border-radius: 18px; padding: 12px; margin: 14px 0; box-shadow: 0 4px 0 #e2e8f5; text-align: left; }
.kirim-kartu label { font-size: 14px; color: var(--teks-2); }
.kirim-baris { display: flex; gap: 8px; margin-top: 6px; }
.kirim-baris input { flex: 1; min-width: 0; min-height: 52px; border-radius: 14px; border: 3px solid #d5dcec; padding: 0 12px; font-size: 18px; font-weight: 800; color: var(--teks); }
.kirim-baris input:focus { border-color: var(--biru); outline: none; }
.kirim-status { margin: 8px 0 0; font-size: 14px; color: var(--teks-2); }
.judul-kecil { font-size: 17px; margin: 10px 0 8px; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.pod-medali { font-size: 24px; }
.pod-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--biru); color: #fff; display: grid; place-items: center; font-size: 20px; }
.pod.emas .pod-avatar { background: var(--kuning); color: #5a3a00; width: 52px; height: 52px; }
.pod-nama { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod small { font-size: 11px; color: var(--teks-2); }
.pod-tiang { width: 100%; border-radius: 12px 12px 4px 4px; display: grid; place-items: center; font-size: 22px; font-weight: 900; color: #fff; }
.pod.emas .pod-tiang { height: 74px; background: linear-gradient(#ffcf4d, #f2a900); }
.pod.perak .pod-tiang { height: 54px; background: linear-gradient(#c7d2e6, #98a7c2); }
.pod.perunggu .pod-tiang { height: 40px; background: linear-gradient(#f0b07a, #c97b3f); }
.pod.aku .pod-nama { color: var(--biru-tua); }
.top-sisa { list-style: none; margin: 10px 0 0; padding: 0; text-align: left; }
.top-sisa li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #fff; margin-bottom: 6px; }
.top-sisa li.aku { background: #e8efff; }
.top-sisa li span { color: var(--teks-2); }
.top-sisa li small { color: var(--teks-2); font-size: 12px; }
.aksi-hasil { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.aksi-hasil .btn { flex: 1 1 180px; }

/* ---------- 11. ULAS ---------- */
.ulas-kepala { display: flex; align-items: center; gap: 12px; background: var(--kertas); border-radius: 22px; padding: 10px 14px; box-shadow: var(--bayang); margin-bottom: 12px; }
.ulas-maskot { width: 72px; height: 76px; flex: none; }
.ulas-kepala h2 { font-size: 20px; }
.ulas-kepala p { margin: 4px 0 0; color: var(--teks-2); font-size: 14px; }
.ulas-hasil-ulang { background: #dff8ef; color: #0f6b55; border-radius: 14px; padding: 10px 14px; text-align: center; }
.daftar-ulas { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.kartu-ulas { background: var(--kertas); border-radius: 22px; padding: 14px; box-shadow: var(--bayang); border-left: 8px solid var(--merah); }
.kartu-ulas.sudah-benar { border-left-color: var(--hijau); }
.ku-kepala { display: flex; flex-wrap: wrap; gap: 6px; }
.ku-no { background: var(--teks); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.ku-topik { background: #eef3ff; color: var(--biru-tua); border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.ku-soal { font-size: 20px; font-weight: 900; margin: 10px 0 6px; overflow-wrap: anywhere; }
.ku-jawab { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.j-salah { background: #ffe5e8; color: #a3202f; padding: 4px 10px; border-radius: 10px; }
.j-benar { background: #dff8ef; color: #0f6b55; padding: 4px 10px; border-radius: 10px; }
.ku-aksi { margin-top: 10px; }
.ku-aksi .btn { width: 100%; }
.mini-soal { margin-top: 12px; background: #fff; border-radius: 18px; padding: 12px; box-shadow: inset 0 0 0 3px #e3e9f6; }
.mini-label { margin: 0; font-size: 12px; color: var(--biru-tua); text-transform: uppercase; letter-spacing: .5px; }
.mini-teks { font-size: 19px; font-weight: 900; margin: 4px 0 10px; overflow-wrap: anywhere; }
.mini-opsi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mini-opsi.satu-kolom { grid-template-columns: 1fr; }
.mini-umpan { margin: 10px 0 0; font-size: 16px; }
.mini-umpan.benar { color: #0f6b55; } .mini-umpan.salah { color: #8a4500; }
.mini-papan:not(:empty) { margin-top: 10px; }

/* overlay */
.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(20, 30, 60, .5); display: grid; place-items: center; padding: 20px; }
.overlay-kartu { background: var(--kertas); border-radius: 24px; padding: 22px; text-align: center; max-width: 360px; width: 100%; box-shadow: var(--bayang); }
.overlay-kartu p { color: var(--teks-2); }
.overlay-aksi { display: flex; flex-direction: column; gap: 10px; }
#konfeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* ---------- 13. MATERI BELAJAR (pilihan 📖 Materi | ✏️ Latihan) ---------- */
.chip-materi { display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 900; color: #7a4b00; background: #fff1c7; border-radius: 999px; padding: 2px 9px; }
.kartu-topik.punya-materi { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ikon nama" "m m" "l l"; align-items: center; column-gap: 10px; row-gap: 8px; }
.kartu-topik.punya-materi > span { grid-area: ikon; }
.kartu-topik.punya-materi > b { grid-area: nama; }
.kartu-topik.punya-materi .tp-materi, .kartu-topik.punya-materi .tp-latihan {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 8px 12px; border-radius: 14px;
  font-weight: 900; font-size: 16px; text-decoration: none; text-align: center; }
.kartu-topik.punya-materi .tp-materi { background: var(--kuning); color: #5a3a00; box-shadow: 0 4px 0 var(--kuning-tua); }
.kartu-topik.punya-materi .tp-latihan { background: #eef3ff; color: var(--biru-tua); box-shadow: 0 4px 0 #d3def8; }
.kartu-topik.punya-materi a:active { transform: translateY(3px); box-shadow: none; }
.kartu-topik .tm-selesai { font-style: normal; font-size: 13px; color: var(--hijau-tua); background: #fff; border-radius: 999px; padding: 1px 7px; }
.kartu-topik.materi-saja { border: 3px solid var(--kuning); }
.kartu-topik.materi-saja small, .kartu-topik .tm-ket { color: var(--teks-2); opacity: 1; font-size: 13px; }
@media (min-width: 760px) { .kartu-topik.punya-materi { grid-column: span 2; grid-template-columns: auto 1fr 1fr; grid-template-areas: "ikon nama nama" "m m l"; }
  .kartu-topik.punya-materi .tp-materi { grid-column: 1 / 3; } .kartu-topik.punya-materi .tp-latihan { grid-column: 3; } }
.tautan-materi { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px auto 4px; padding: 10px 12px; max-width: 420px; border-radius: 16px; background: #fffbe8; border: 2px dashed var(--kuning); font-size: 14px; color: var(--teks-2); }
.tautan-materi a { font-size: 16px; font-weight: 900; color: var(--biru-tua); min-height: 40px; display: inline-flex; align-items: center; }

/* ---------- 12. LAYAR LEBAR & KECIL ---------- */
@media (min-width: 760px) {
  .grid-kelas { grid-template-columns: repeat(6, 1fr); }
  .grid-mapel { grid-template-columns: repeat(4, 1fr); }
  .kartu-mapel { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .km-ikon { grid-row: auto; }
  .km-kaki { flex-direction: column; }
  .hero { grid-template-columns: 150px 1fr; }
  .hero-maskot { width: 150px; height: 156px; }
  .grid-topik { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .grid-mapel { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 92px 1fr; }
  .hero-maskot { width: 92px; height: 96px; }
  .hero .gelembung-kata { grid-column: 1 / -1; }
  .hero .gelembung-kata::before { left: 36px; top: -9px; border: 10px solid transparent; border-top: 0; border-bottom-color: #fff; }
  .opsi { font-size: 18px; min-height: 60px; padding: 8px 10px; gap: 8px; }
  .opsi-huruf { width: 26px; height: 26px; font-size: 13px; }
  .hasil-stat { grid-template-columns: repeat(2, 1fr); }
  .titik-progres i { width: 15px; height: 15px; }
  .g-baris { grid-template-columns: repeat(var(--kol), 30px); }
  .g-sel { font-size: 25px; }
  .kartu-soal { padding-left: 34px; }
  .kartu-soal::before { left: 22px; }
  .kartu-soal::after { left: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .gb-lompat { stroke-dashoffset: 0; }
}