/* Taman Belajar — gaya hijau MorningLabs + aksen biru belajar */
:root{
  --hijau:#28b99a; --hijau-tua:#0f7f68; --hijau-muda:#e8f8f4;
  --biru:#5b8cff; --biru-tua:#3a63c9; --biru-muda:#eaf0ff;
  --tinta:#0d2b26; --redup:#5b7a73; --kertas:#f6fbf9; --putih:#fff;
  --garis:#e0efeb; --r:18px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--kertas);color:var(--tinta);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
/* ---- bar atas ---- */
.bar{position:sticky;top:0;z-index:20;background:rgba(246,251,249,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--garis)}
.bar-isi{width:min(1000px,94vw);margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 0}
.kembali{text-decoration:none;font-weight:700;font-size:14.5px;color:var(--hijau-tua);
  background:var(--hijau-muda);padding:7px 13px;border-radius:999px}
.bar-judul{font-weight:800;font-size:15px}
.bar-link{margin-left:auto;font-size:13.5px;color:var(--redup);text-decoration:none}
main{width:min(1000px,94vw);margin:0 auto;padding-bottom:40px}
/* ---- hero ---- */
.hero{padding:34px 0 6px}
.hero h1{margin:0 0 8px;font-size:clamp(26px,5vw,38px);letter-spacing:-1px}
.hero-sub{color:var(--redup);max-width:62ch;margin:0 0 18px}
.pita{display:flex;gap:8px;flex-wrap:wrap}
.pita-item{background:#fff;border:1px solid var(--garis);border-radius:999px;padding:6px 12px;
  font-size:13px;font-weight:600}
/* ---- seksi ---- */
.bagian{padding:26px 0}
.judul{font-size:19px;margin:0 0 4px;letter-spacing:-.3px}
.bagian-sub{color:var(--redup);font-size:14px;margin:0 0 16px}
/* ---- jenjang ---- */
.baris-jenjang{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.kartu-jenjang{position:relative;text-align:left;background:#fff;border:1.5px solid var(--garis);
  border-radius:var(--r);padding:16px 18px;cursor:pointer;font:inherit;transition:.15s}
.kartu-jenjang b{display:block;font-size:16.5px}
.kartu-jenjang small{color:var(--redup);font-size:13px}
.kartu-jenjang.aktif{border-color:var(--biru);background:var(--biru-muda);box-shadow:0 6px 18px rgba(91,140,255,.14)}
.kartu-jenjang:not(.aktif){opacity:.82}
/* ---- kelas ---- */
.grid-kelas{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.kartu-kelas{background:#fff;border:1.5px solid var(--garis);border-radius:14px;padding:14px 12px;
  cursor:pointer;font:inherit;transition:.15s}
.kartu-kelas b{display:block;font-size:15.5px}
.kartu-kelas small{color:var(--redup);font-size:12px}
.kartu-kelas.aktif{border-color:var(--hijau);background:var(--hijau-muda);box-shadow:0 6px 16px rgba(40,185,154,.16)}
/* ---- mapel ---- */
.grid-mapel{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px}
.kartu-mapel{display:block;text-decoration:none;background:#fff;border:1.5px solid var(--garis);
  border-left:5px solid var(--w,#28b99a);border-radius:var(--r);padding:16px 18px;transition:.15s}
.kartu-mapel:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(13,43,38,.08)}
.kartu-mapel.kosong{opacity:.6}
.kartu-mapel h3{margin:6px 0 3px;font-size:16.5px}
.kartu-mapel p{margin:0;color:var(--redup);font-size:13.5px}
.km-ikon{font-size:24px}
.km-kaki{margin-top:10px}
.lencana{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.4px;
  padding:4px 10px;border-radius:999px}
.lencana-aktif{background:var(--hijau-muda);color:var(--hijau-tua);border:1px solid #bde9df}
.lencana-segera{background:#f1f4f4;color:#7d8f8b;border:1px solid #dfe7e5}
/* ---- kartu info ---- */
.kartu-info{background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:20px 22px}
.kartu-info h3{margin:0 0 10px;font-size:17px}
.kartu-info ul{margin:0;padding-left:20px;color:var(--redup);font-size:14.5px}
.kartu-info li{margin-bottom:6px}
.kaki{text-align:center;color:var(--redup);font-size:13.5px;padding:22px 0 34px}
.kaki a{color:var(--hijau-tua);font-weight:700;text-decoration:none}

/* ================= LATIHAN ================= */
.halaman-latihan main,.layar{width:auto}
.layar{display:none;padding-bottom:40px}
.layar.aktif{display:block}
.kotak-siap{width:min(560px,92vw);margin:34px auto 0;background:#fff;border:1px solid var(--garis);
  border-radius:22px;padding:28px 26px;text-align:center}
.ikon-besar{font-size:44px;line-height:1}
.kotak-siap h1{font-size:23px;margin:8px 0 6px;letter-spacing:-.5px}
.siap-sub{color:var(--redup);font-size:14.5px;margin:0 0 20px}
.label-nama{display:block;text-align:left;font-weight:700;font-size:14px;margin-bottom:6px}
.input-nama{width:100%;padding:13px 15px;border:1.5px solid var(--garis);border-radius:12px;
  font:inherit;font-size:16px;background:var(--kertas)}
.input-nama:focus{outline:none;border-color:var(--biru);background:#fff}
.input-nama.salah{border-color:#e5484d;background:#fff5f5}
.pesan-nama{min-height:20px;font-size:13px;color:#c93a3f;margin:6px 0 0;text-align:left}
.btn-utama{display:block;width:100%;margin-top:14px;padding:14px 20px;border:0;border-radius:14px;
  background:var(--biru);color:#fff;font:800 16px/1 inherit;letter-spacing:.2px;cursor:pointer;
  transition:.15s;text-align:center;text-decoration:none}
.btn-utama:hover{background:var(--biru-tua)}
.btn-utama.lebar{width:min(560px,92vw);margin:16px auto 0}
.btn-hantu{display:block;margin-top:10px;color:var(--redup);font-size:14px;text-decoration:none}
.kotak-info-kecil{width:min(560px,92vw);margin:18px auto 0;background:#fff;border:1px solid var(--garis);
  border-radius:var(--r);padding:16px 18px}
.kotak-info-kecil.dalam{margin-top:22px;text-align:left}
.kotak-info-kecil h3{margin:0 0 10px;font-size:15px}
/* stat bar */
.stat-bar{width:min(560px,92vw);margin:20px auto 10px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:8px}
.stat-bar .kotak{background:#fff;border:1px solid var(--garis);border-radius:12px;padding:10px 8px;text-align:center}
.stat-bar .kotak b{display:block;font-size:18px;letter-spacing:-.4px}
.stat-bar .kotak small{font-size:11.5px;color:var(--redup)}
.progres{width:min(560px,92vw);margin:0 auto;height:8px;background:#e6f0ed;border-radius:999px;overflow:hidden}
.progres-isi{height:100%;width:0;background:linear-gradient(90deg,var(--hijau),var(--biru));
  border-radius:999px;transition:width .3s}
/* soal */
.soal-kotak{width:min(560px,92vw);margin:18px auto 0;background:#fff;border:1px solid var(--garis);
  border-radius:22px;padding:24px 22px}
.soal-teks{font-size:20px;font-weight:700;line-height:1.45;margin:0 0 18px;letter-spacing:-.3px}
.pilihan{display:grid;gap:10px}
.opsi{padding:14px 16px;border:1.5px solid var(--garis);border-radius:14px;background:var(--kertas);
  font:inherit;font-size:16.5px;text-align:left;cursor:pointer;transition:.12s}
.opsi:hover:not(:disabled){border-color:var(--biru);background:var(--biru-muda)}
.opsi:disabled{cursor:default;opacity:.85}
.opsi.benar{border-color:var(--hijau);background:var(--hijau-muda);font-weight:800;opacity:1}
.opsi.salah{border-color:#e5484d;background:#fff5f5;font-weight:700}
.umpan{margin:14px 0 0;font-size:15px;min-height:22px}
.umpan .hijau{color:var(--hijau-tua)}
.umpan .merah{color:#c93a3f}
/* hasil */
.kotak-hasil{width:min(560px,92vw);margin:26px auto 0;text-align:center}
.bintang{font-size:34px;letter-spacing:4px}
.kotak-hasil h1{font-size:24px;margin:8px 0 4px;letter-spacing:-.5px}
.hasil-sub{color:var(--redup);margin:0 0 6px}
.tombol-hasil{margin-top:18px}
.tombol-hasil .btn-hantu{font-weight:600}
/* papan */
.papan,.papankecil{display:grid;gap:6px}
.papan-baris{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--garis);
  border-radius:12px;padding:9px 12px;font-size:14.5px}
.papan-baris.aku{border-color:var(--biru);background:var(--biru-muda)}
.papan-medali{width:22px;text-align:center}
.papan-nama{font-weight:700}
.papan-nama .kamu{color:var(--biru-tua);font-weight:700}
.papan-skor{margin-left:auto;text-align:right;font-size:13px;line-height:1.25}
.papan-skor b{font-size:15px}
.nomor{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;
  background:var(--kertas);font-size:12px;font-weight:700}
.memuat{color:var(--redup);font-size:14px;margin:6px 0}
@media(max-width:520px){
  .stat-bar{grid-template-columns:repeat(4,1fr)}
  .stat-bar .kotak b{font-size:16px}
  .soal-teks{font-size:18.5px}
}