/* Ubibra — acuan desain "Desain Tampilan ubibra" (8 Nov 2026).
   Tenang, satu tugas per layar, kartu besar, tanpa gradasi, ikon garis SVG. HP lebih dulu. */

@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("../lib/font/nunito-5.3.0-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../lib/font/inter-5.3.0-latin.woff2") format("woff2");
}

:root {
  --teks: #22303C;
  --teks2: #55626E;
  --garis: #C9CED3;
  --garis-muda: #DADDE0;
  --abu: #E4E6E8;
  --putih: #FFFFFF;
  --latar: #F6F5F1;
  --aksen: #2F6FA8;
  --lembut: #E3EEF7;
  --ulang: #9A4A10;
  --galat: #A33A2B;
  --galat-muda: #F8E6E2;
  --baik: #2B7A68;
  --baik-muda: #E0F0EB;
  --huruf: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body[data-versi="ubayd"] { --aksen: #2F6FA8; --lembut: #E3EEF7; }
body[data-versi="ibad"]  { --aksen: #2B7A68; --lembut: #E0F0EB; }
body[data-versi="ibra"]  { --aksen: #A85A1E; --lembut: #F6E8DC; --latar: #F7F4EF; --garis: #CFCBC4; --abu: #EFEDE9; }
body.dewasa { --aksen: #2D4A63; --lembut: #E6EDF3; --latar: #F4F5F6; --huruf: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

* { box-sizing: border-box; }
*, *::before, *::after { animation: none !important; transition: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--latar); color: var(--teks);
  font-family: var(--huruf); font-size: 17px; line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--aksen); }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; }
svg.ikon { width: 1.2em; height: 1.2em; flex: none; vertical-align: middle; }
.tersembunyi { display: none !important; }
.redup { color: var(--teks2); }
.kecil { font-size: 14px; }
.tengah { text-align: center; }
.tebal { font-weight: 800; }
.layar { max-width: 560px; margin: 0 auto; padding: 20px 20px 28px; display: flex; flex-direction: column; gap: 18px; min-height: 100vh; }
.layar.lebar { max-width: 960px; }
.ruang { flex-grow: 1; }

/* ---------- Komponen dasar ---------- */
.kartu { background: var(--putih); border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.kartu.lembut { background: var(--lembut); }
.label-kecil { font-size: 15px; font-weight: 700; color: var(--teks2); }
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 20px; border: 0; border-radius: 16px;
  background: var(--aksen); color: #fff; font-size: 19px; font-weight: 800; text-decoration: none; text-align: center;
}
.tombol.garis { background: var(--putih); color: var(--aksen); border: 2px solid var(--aksen); }
.tombol.netral { background: var(--putih); color: var(--teks); border: 2px solid var(--garis); }
.tombol.mati, .tombol:disabled { background: var(--abu); color: var(--teks2); border: 0; }
.tombol.penuh { width: 100%; }
.tombol.kecil { min-height: 44px; font-size: 16px; padding: 0 14px; border-radius: 12px; }
.dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dua > .tombol { min-height: 60px; }
.baca {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: 48px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--aksen);
  background: var(--putih); color: var(--aksen); font-size: 17px; font-weight: 800;
}
.baca-bulat {
  width: 52px; height: 52px; border-radius: 50%; border: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lembut); color: var(--aksen);
}
.baca-bulat.besar { width: 68px; height: 68px; background: var(--aksen); color: #fff; }
.baca-bulat.besar svg.ikon { width: 30px; height: 30px; }
.baca-bulat svg.ikon { width: 26px; height: 26px; }
.pesan { border-radius: 14px; padding: 12px 14px; font-size: 16px; }
.pesan.galat { background: var(--galat-muda); color: var(--galat); }
.pesan.baik { background: var(--baik-muda); color: var(--baik); }
.pesan.info { background: var(--lembut); color: var(--teks); }
.pita {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 14px;
  background: var(--lembut); font-size: 16px; font-weight: 800;
}
.bilah { display: grid; gap: 6px; }
.bilah > span { height: 8px; border-radius: 4px; background: var(--garis-muda); }
.bilah > span.isi { background: var(--aksen); }
.titik-langkah { display: flex; gap: 10px; }
.titik-langkah > span { width: 16px; height: 16px; border-radius: 50%; background: var(--garis); }
.titik-langkah > span.isi { background: var(--aksen); }
.ubin-gambar {
  border-radius: 18px; background: var(--lembut); display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--teks2); text-align: center;
}
.ubin-gambar .emoji { font-size: 96px; line-height: 1; }
.ubin-gambar img, .ubin-gambar video { width: 100%; height: 100%; object-fit: contain; display: block; }
.pratinjau-pita { background: var(--ulang); color: #fff; text-align: center; font-size: 14px; font-weight: 700; padding: 6px 10px; }

/* ---------- Masuk anak ---------- */
.masuk { gap: 22px; padding-top: 40px; }
.merek { font-size: 26px; font-weight: 800; color: var(--aksen); }
.masuk h1 { font-size: 26px; font-weight: 800; text-align: center; }
.medan { display: flex; flex-direction: column; gap: 8px; }
.medan label, .medan .label { font-size: 17px; font-weight: 700; }
.masukan {
  height: 56px; border: 2px solid var(--garis); border-radius: 14px; padding: 0 16px;
  font-size: 20px; background: var(--putih); width: 100%;
}
.masukan:focus { border-color: var(--aksen); outline: none; }
.kotak-pin { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.kotak-pin > span {
  height: 54px; border-radius: 12px; background: var(--putih); border: 2px solid var(--garis);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.kotak-pin > span.isi { border-color: var(--aksen); }
.papan-angka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.papan-angka button {
  height: 58px; border: 0; border-radius: 14px; background: var(--putih);
  font-size: 24px; font-weight: 700;
}
.papan-angka button.hapus { font-size: 18px; }
.tombol.masuk-btn { min-height: 60px; font-size: 22px; }

/* ---------- Peta perjalanan ---------- */
.kepala-anak { background: var(--aksen); color: #fff; padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.kepala-anak .baris { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kepala-anak .halo { font-size: 24px; font-weight: 800; }
.kepala-anak .jejak { font-size: 15px; }
.tombol-putih {
  color: #fff; background: transparent; font-size: 16px; font-weight: 700; text-decoration: none;
  border: 2px solid #fff; border-radius: 12px; padding: 8px 14px; min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip { border: 0; border-radius: 999px; padding: 8px 16px; background: #fff; color: var(--aksen); font-size: 15px; font-weight: 800; min-height: 40px; }
.chip.garis { background: transparent; color: #fff; border: 2px solid #fff; }
.chip-baris { display: flex; gap: 8px; flex-wrap: wrap; }
.tata-peta main { min-width: 0; }
.isi-peta { overflow-x: hidden; padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.tema-judul { font-size: 18px; font-weight: 800; }
.jalur { display: flex; flex-direction: column; }
.simpul { display: flex; gap: 14px; align-items: center; background: none; border: 0; padding: 0; text-align: left; width: max-content; max-width: 100%; text-decoration: none; color: var(--teks); }
.simpul .bulat {
  width: 64px; height: 64px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--abu); color: var(--teks2);
}
.simpul .bulat svg.ikon { width: 28px; height: 28px; }
.simpul.lulus .bulat { background: var(--aksen); color: #fff; }
.simpul .nama { font-size: 17px; font-weight: 800; }
.simpul .ket { font-size: 14px; color: var(--teks2); }
.simpul.terkunci .nama { color: var(--teks2); }
.simpul.kini { background: var(--lembut); border-radius: 20px; padding: 12px; }
.simpul.kini .bulat { width: 72px; height: 72px; background: #fff; border: 4px solid var(--aksen); color: var(--aksen); font-size: 26px; font-weight: 800; }
.simpul .teks-simpul { display: flex; flex-direction: column; gap: 6px; }
.simpul .mulai { background: var(--aksen); color: #fff; border-radius: 12px; padding: 10px 18px; font-size: 17px; font-weight: 800; text-align: center; }
.sambung { width: 4px; height: 26px; background: var(--garis); }
.sambung.isi { background: var(--aksen); }
.jalur > :nth-child(4n+1) { margin-left: 0; }
.jalur > :nth-child(4n+3) { margin-left: 50px; max-width: calc(100% - 50px); }
.jalur > .sambung:nth-child(4n+2) { margin-left: 30px; }
.jalur > .sambung:nth-child(4n) { margin-left: 80px; }
.lembar {
  position: fixed; inset: 0; background: rgba(34, 48, 60, .45); z-index: 30;
  display: flex; align-items: flex-end; justify-content: center;
}
.lembar > .kartu { width: 100%; max-width: 560px; border-radius: 24px 24px 0 0; max-height: 85vh; overflow: auto; }
.pilih-mapel { display: flex; flex-direction: column; gap: 8px; }
.pilih-mapel button {
  min-height: 52px; border: 0; border-radius: 14px; background: var(--abu); text-align: left; padding: 0 16px;
  font-size: 18px; font-weight: 700;
}
.pilih-mapel button.aktif { background: var(--aksen); color: #fff; }
.samping { display: none; }
.kartu-uji { border: 2px dashed var(--garis); background: transparent; }
.kartu-uji select { height: 48px; border-radius: 12px; border: 2px solid var(--garis); padding: 0 10px; background: #fff; }

/* Laptop: bilah samping + jalur mendatar */
@media (min-width: 900px) {
  .tata-peta { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
  .samping {
    display: flex; flex-direction: column; gap: 10px; background: #fff; padding: 28px 22px;
    position: sticky; top: 0; height: 100vh; overflow: auto;
  }
  .samping .halo { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
  .samping .grup { font-size: 14px; font-weight: 800; color: var(--teks2); letter-spacing: .04em; margin-top: 10px; }
  .samping .mapel-btn { border: 0; border-radius: 14px; background: #F1F2F0; text-align: left; padding: 12px 16px; font-size: 18px; font-weight: 700; }
  .samping .mapel-btn.aktif { background: var(--aksen); color: #fff; }
  .samping .keluar { margin-top: auto; border: 2px solid var(--garis); border-radius: 14px; padding: 12px 16px; font-size: 17px; font-weight: 700; color: var(--teks); background: #fff; text-align: center; }
  .tata-peta .kepala-anak { display: none; }
  .isi-peta { max-width: none; padding: 36px 40px; gap: 22px; }
  .isi-peta .jejak-laptop { font-size: 16px; color: var(--teks2); }
  .isi-peta .tema-judul { font-size: 34px; }
  .jalur { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0; background: #fff; border-radius: 28px; padding: 28px; }
  .jalur > * { margin-left: 0 !important; }
  .simpul { flex-direction: column; text-align: center; width: 150px; gap: 10px; }
  .simpul.kini { background: none; padding: 0; }
  .simpul .bulat { width: 76px; height: 76px; }
  .simpul.kini .bulat { width: 86px; height: 86px; font-size: 30px; }
  .simpul .teks-simpul { align-items: center; }
  .sambung { width: 40px; height: 4px; margin-top: 38px !important; }
  .ringkas-laptop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
.ringkas-laptop { display: none; }
@media (min-width: 900px) { .ringkas-laptop { display: grid; } }

/* ---------- Materi ---------- */
.bar-atas { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kembali { font-size: 17px; font-weight: 800; color: var(--aksen); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; background: none; border: 0; padding: 0; }
.materi h1 { font-size: 32px; font-weight: 800; line-height: 1.15; }
.materi p { font-size: 20px; line-height: 1.5; }
.materi .gambar-materi { height: 200px; }
.materi .gambar-materi.foto { height: auto; background: #fff; border: 1px solid var(--garis); border-radius: 14px; margin: 6px 0 4px; }
.materi .gambar-materi.foto img { height: auto; }
.materi .tebal-p { font-weight: 800; }
.materi audio, .materi video, .materi iframe { width: 100%; border-radius: 14px; border: 0; }
.materi iframe { aspect-ratio: 16 / 9; height: auto; }
.latihan { border-top: 2px solid var(--abu); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.latihan .tanya { font-size: 19px; font-weight: 800; }

/* ---------- Soal ---------- */
.soal-kartu h1 { font-size: 24px; font-weight: 800; line-height: 1.3; }
.soal-kartu .gambar-soal { height: 150px; }
.pilihan { display: flex; flex-direction: column; gap: 12px; }
.pilihan button {
  min-height: 64px; border: 2px solid var(--garis); border-radius: 18px; background: #fff;
  font-size: 20px; font-weight: 700; text-align: left; padding: 12px 18px; line-height: 1.3;
}
.pilihan button.dipilih { border: 3px solid var(--aksen); background: var(--lembut); padding: 11px 17px; }
.pilihan button.benar { border: 3px solid var(--baik); background: var(--baik-muda); padding: 11px 17px; }
.pilihan button.salah { border: 3px solid var(--galat); background: var(--galat-muda); padding: 11px 17px; }
.catatan-bawah { font-size: 13px; color: var(--teks2); text-align: center; }
@media (min-width: 900px) {
  .layar.soal-laptop { max-width: 880px; padding-top: 40px; }
  .soal-laptop .pilihan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soal-laptop .pilihan button { min-height: 84px; font-size: 22px; }
  .soal-laptop .soal-kartu h1 { font-size: 30px; }
}

/* ---------- Hasil ---------- */
.hasil-kartu { align-items: center; text-align: center; }
.lingkar { width: 96px; height: 96px; border-radius: 50%; background: var(--lembut); color: var(--aksen); display: flex; align-items: center; justify-content: center; }
.lingkar svg.ikon { width: 48px; height: 48px; }
.skor { font-size: 44px; font-weight: 800; line-height: 1.1; }
.pesan-ortu p { font-size: 20px; line-height: 1.45; }
.bahas { border-top: 2px solid var(--abu); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }

/* ---------- Mode Ibra ---------- */
body[data-versi="ibra"] .tombol { min-height: 72px; font-size: 24px; border-radius: 20px; }
body[data-versi="ibra"] .dua > .tombol { min-height: 80px; border-radius: 22px; }
body[data-versi="ibra"] .tombol.netral { border-width: 3px; }
.ibra-kepala { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ibra-kepala .halo { font-size: 28px; font-weight: 800; }
.ibra-kepala .kiri { display: flex; align-items: center; gap: 12px; }
.keluar-ibra { font-size: 17px; font-weight: 800; color: var(--teks); border: 3px solid var(--garis); border-radius: 16px; padding: 0 16px; min-height: 52px; background: #fff; }
.ibra-kartu { background: #fff; border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ibra-kartu .baris { display: flex; align-items: center; gap: 14px; }
.ibra-kartu .ubin { width: 96px; height: 96px; border-radius: 22px; flex: none; }
.ibra-kartu .ubin .emoji { font-size: 56px; }
.ibra-kartu .ubin svg.ikon { width: 44px; height: 44px; color: var(--aksen); }
.ibra-kartu .judul { font-size: 24px; font-weight: 800; flex-grow: 1; }
.ibra-kartu.kini { border: 4px solid var(--aksen); padding: 14px; }
.ibra-kartu.terkunci { background: var(--abu); }
.ibra-kartu.terkunci .ubin { background: #E2DFDA; }
.ibra-kartu.terkunci .ubin svg.ikon { color: var(--teks2); }
.ibra-kartu.terkunci .judul { color: var(--teks2); }
.ibra-sambung { width: 6px; height: 24px; border-radius: 3px; background: var(--garis); margin-left: 60px; }
.ibra-sambung.isi { background: var(--aksen); }
.ibra-mapel { background: #fff; border-radius: 20px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ibra-mapel .nm { font-size: 20px; font-weight: 800; }
.ibra-mapel button { min-height: 52px; border: 3px solid var(--garis); border-radius: 16px; background: #fff; font-size: 18px; font-weight: 800; padding: 0 18px; }
.gambar-ibra { height: 330px; border-radius: 28px; }
.gambar-ibra .emoji { font-size: 160px; }
.ibra-teks { background: #fff; border-radius: 26px; padding: 22px; display: flex; align-items: center; gap: 16px; }
.ibra-teks p { font-size: 30px; font-weight: 800; line-height: 1.3; flex-grow: 1; }
.ibra-teks .baca-bulat.besar { width: 72px; height: 72px; }
.ibra-soal { background: #fff; border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ibra-soal .gambar-soal { height: 180px; border-radius: 20px; }
.ibra-soal .gambar-soal .emoji { font-size: 110px; }
.ibra-soal .tanya { display: flex; align-items: center; gap: 14px; }
.ibra-soal .tanya p { font-size: 28px; font-weight: 800; line-height: 1.25; flex-grow: 1; }
.pilihan-ibra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pilihan-ibra button {
  border: 3px solid var(--garis); background: #fff; border-radius: 26px; padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 88px;
}
.pilihan-ibra button:nth-child(3):last-child { grid-column: 1 / -1; }
.pilihan-ibra button .ubin-gambar { width: 100%; height: 100px; background: var(--abu); }
.pilihan-ibra button .ubin-gambar .emoji { font-size: 64px; }
.pilihan-ibra button .nm { font-size: 26px; font-weight: 800; }
.pilihan-ibra button.dipilih { border: 4px solid var(--aksen); padding: 11px; }
.pilihan-ibra button.dipilih .ubin-gambar { background: var(--lembut); }
.pilihan-ibra button.benar { border: 4px solid var(--baik); padding: 11px; }
.pilihan-ibra button.salah { border: 4px solid var(--garis); background: var(--abu); padding: 11px; }
.ibra-hasil .skor { font-size: 40px; }
.ibra-pesan { background: var(--lembut); border-radius: 26px; padding: 20px; display: flex; align-items: center; gap: 14px; }
.ibra-pesan p { font-size: 24px; font-weight: 700; line-height: 1.35; flex-grow: 1; }
body[data-versi="ibra"] .tombol.utama-ibra { min-height: 84px; font-size: 28px; border-radius: 24px; }
@media (min-width: 900px) {
  body[data-versi="ibra"] .layar { max-width: 880px; }
  .pilihan-ibra button .ubin-gambar { height: 160px; }
  .pilihan-ibra button .ubin-gambar .emoji { font-size: 96px; }
}

/* =========================================================================
   Editor dan pemantauan (Inter, warna #2D4A63)
   ========================================================================= */
body.dewasa { font-size: 15px; }
.bar-dewasa {
  display: flex; align-items: center; gap: 12px; background: #fff; border-bottom: 1px solid #DDE1E5;
  padding: 10px 18px; position: sticky; top: 0; z-index: 20; min-height: 60px;
}
.bar-dewasa .merek { font-size: 20px; }
.bar-dewasa .judul-bar { font-weight: 700; font-size: 16px; }
.bar-dewasa .kanan { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dewasa .tombol { min-height: 44px; font-size: 15px; font-weight: 700; border-radius: 10px; padding: 0 14px; }
.dewasa .tombol.garis { border-width: 1.5px; }
.dewasa .tombol.netral { border: 1.5px solid #C9CED3; }
.dewasa .kartu { border-radius: 14px; padding: 18px; gap: 12px; border: 1px solid #E1E4E8; }
.dewasa h1 { font-size: 24px; font-weight: 700; }
.dewasa h2 { font-size: 18px; font-weight: 700; }
.dewasa h3 { font-size: 15px; font-weight: 700; }
.dewasa .label-kecil { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--teks2); font-weight: 700; }
.dewasa label { font-size: 14px; font-weight: 600; display: block; margin-bottom: 4px; }
.dewasa input[type=text], .dewasa input[type=email], .dewasa input[type=password], .dewasa input[type=number], .dewasa input[type=url],
.dewasa select, .dewasa textarea {
  width: 100%; min-height: 44px; border: 1.5px solid #C9CED3; border-radius: 10px; padding: 8px 12px; background: #fff; font-size: 15px;
}
.dewasa textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
.dewasa input:focus, .dewasa select:focus, .dewasa textarea:focus { outline: none; border-color: var(--aksen); box-shadow: 0 0 0 3px var(--lembut); }
.segmen { display: inline-flex; border: 1.5px solid #C9CED3; border-radius: 10px; overflow: hidden; }
.segmen button { border: 0; background: #fff; min-height: 40px; padding: 0 14px; font-weight: 600; }
.segmen button + button { border-left: 1.5px solid #C9CED3; }
.segmen button.aktif { background: var(--aksen); color: #fff; }
.kolom-form { display: flex; flex-direction: column; gap: 12px; }
.baris-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.baris-form > * { flex: 1 1 140px; }
.tanda-ulang { display: inline-block; background: var(--ulang); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tanda { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tanda.lulus { background: var(--baik-muda); color: var(--baik); }
.tanda.terbuka { background: var(--lembut); color: var(--aksen); }
.tanda.terkunci { background: #ECEEF0; color: var(--teks2); }
.tanda.sembunyi { background: #FFF1E0; color: var(--ulang); }
.dewasa table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dewasa th { text-align: left; font-size: 12px; letter-spacing: .05em; color: var(--teks2); font-weight: 700; padding: 10px 8px; border-bottom: 1.5px solid #DDE1E5; }
.dewasa td { padding: 10px 8px; border-bottom: 1px solid #ECEEF0; vertical-align: top; }
.tabel-gulung { overflow-x: auto; }
.statistik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.statistik > div { background: var(--latar); border-radius: 10px; padding: 10px; }
.statistik .lbl { font-size: 12px; color: var(--teks2); }
.statistik .ang { font-size: 22px; font-weight: 700; }
.bs { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .1em; }
.bs .s { color: var(--galat); font-weight: 700; }
.lajur-tiga { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .lajur-tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.isi-dewasa { max-width: 1240px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* Editor 3 kolom */
.editor { display: grid; grid-template-columns: 300px 1fr 300px; min-height: calc(100vh - 60px); }
.panel { background: #fff; border-right: 1px solid #E1E4E8; padding: 16px; overflow: auto; max-height: calc(100vh - 60px); position: sticky; top: 60px; display: flex; flex-direction: column; gap: 12px; }
.panel.kanan { border-right: 0; border-left: 1px solid #E1E4E8; }
.tengah-editor { padding: 20px 24px 120px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pohon { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pohon .pohon { margin-left: 14px; margin-top: 4px; }
.simpul-pohon { display: flex; align-items: center; gap: 6px; border-radius: 10px; padding: 4px 6px; border: 1px solid transparent; }
.simpul-pohon.pilih { background: var(--lembut); border-color: var(--aksen); }
.simpul-pohon .jenis { font-size: 10px; letter-spacing: .06em; color: var(--teks2); font-weight: 700; display: block; }
.simpul-pohon .nm { font-weight: 600; font-size: 14px; }
.simpul-pohon .teks { flex-grow: 1; min-width: 0; background: none; border: 0; text-align: left; padding: 2px 0; }
.simpul-pohon .aksi { border: 0; background: none; width: 32px; height: 32px; border-radius: 8px; color: var(--teks2); display: inline-flex; align-items: center; justify-content: center; }
.simpul-pohon .aksi:hover { background: #ECEEF0; }
.pegangan { cursor: grab; touch-action: none; color: #9AA3AC; width: 28px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; flex: none; user-select: none; }
.diseret { opacity: .5; }
.palet { display: flex; flex-wrap: wrap; gap: 8px; }
.blok { background: #fff; border: 1px solid #E1E4E8; border-radius: 14px; padding: 12px 14px; display: flex; gap: 10px; }
.blok .badan { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.blok .kepala-blok { display: flex; align-items: center; gap: 8px; }
.blok .kepala-blok .label-kecil { flex-grow: 1; }
.blok .kepala-blok select { width: auto; min-height: 34px; padding: 4px 8px; font-size: 13px; }
.blok.soal { border-left: 4px solid var(--aksen); }
.blok.soal.nonaktif { opacity: .6; }
.blok .opsi { display: flex; gap: 8px; align-items: center; }
.blok .opsi input[type=radio] { width: 20px; height: 20px; flex: none; }
.ikon-btn { border: 0; background: none; width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--teks2); flex: none; }
.ikon-btn:hover { background: #ECEEF0; }
.pratinjau-media { max-height: 120px; border-radius: 10px; }
.taruh { border: 2px dashed #C9CED3; border-radius: 14px; padding: 14px; text-align: center; color: var(--teks2); font-size: 14px; }
.bawah-hp { display: none; }
.laci-tombol { display: none; }
.bingkai-pratinjau { display: flex; gap: 24px; padding: 20px; align-items: flex-start; flex-wrap: wrap; }
.bingkai-pratinjau .wadah { background: #fff; border: 1px solid #E1E4E8; border-radius: 24px; overflow: hidden; flex: none; }
.bingkai-pratinjau iframe { border: 0; display: block; transform-origin: 0 0; }
.notif { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--teks); color: #fff; border-radius: 12px; padding: 12px 18px; z-index: 50; font-weight: 600; max-width: 90vw; }
@media (max-width: 899px) {
  .editor { grid-template-columns: 1fr; }
  .panel { position: fixed; top: 0; bottom: 0; z-index: 40; width: min(340px, 88vw); max-height: none; box-shadow: 0 0 0 100vmax rgba(34,48,60,.45); }
  .panel.kiri { left: 0; }
  .panel.kanan { right: 0; }
  .panel:not(.buka) { display: none; }
  .laci-tombol { display: inline-flex; }
  .tengah-editor { padding: 16px 14px 150px; }
  .bawah-hp { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid #E1E4E8; padding: 10px 12px; gap: 8px; flex-direction: column; z-index: 25; }
  .bawah-hp .palet { flex-wrap: nowrap; overflow-x: auto; }
  .palet-laptop { display: none !important; }
  .bar-dewasa .sembunyi-hp { display: none; }
  .statistik { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) { .sembunyi-hp { display: none !important; } }
.panel > * { flex-shrink: 0; }
.palet .tombol { white-space: nowrap; }
@media (max-width: 899px) { .blok .kepala-blok .label-kecil { font-size: 11px; } }

/* =========================================================================
   Ronde 2 (9 Nov 2026): jurusan, menu ciut, pesan, video, materi berwarna
   ========================================================================= */
/* Ikon huruf jurusan */
.lencana-j {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 10px; background: var(--wj, var(--aksen)); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: .02em; line-height: 1;
}
.lencana-j.panjang { font-size: 11px; }
body[data-versi="ibra"] .lencana-j { background: var(--lembut); color: var(--aksen); }

/* Daftar jurusan (bisa dibuka/ditutup ke bawah) */
.daftar-jurusan { display: flex; flex-direction: column; gap: 6px; }
.jurusan { border-radius: 14px; }
.jurusan.buka { background: #F6F7F5; }
.kepala-j {
  width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left;
  min-height: 52px; padding: 8px 10px; border-radius: 14px; font-weight: 800; font-size: 16px; color: var(--teks);
}
.kepala-j:hover { background: #F1F2F0; }
.jurusan.aktif > .kepala-j .nm-j { color: var(--aksen); }
.kepala-j .no-j { width: 22px; text-align: right; color: var(--teks2); font-size: 14px; flex: none; }
.kepala-j .nm-j { flex-grow: 1; min-width: 0; }
.kepala-j .panah-j, .kepala-j .gembok-j { color: var(--teks2); display: inline-flex; }
.jurusan.terkunci .nm-j { color: var(--teks2); }
.isi-j { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 12px 42px; }
.kosong-j { color: var(--teks2); font-size: 15px; padding: 4px 0; }
.kunci-j { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--teks2); }
.kunci-j .tombol { align-self: flex-start; }
.lembar .isi-j .mapel-btn, .samping .isi-j .mapel-btn {
  border: 0; border-radius: 12px; background: #fff; text-align: left; padding: 10px 14px; font-size: 17px; font-weight: 700; min-height: 46px;
}
.lembar .isi-j .mapel-btn.aktif, .samping .isi-j .mapel-btn.aktif { background: var(--aksen); color: #fff; }
.lembar .jurusan.buka { background: var(--latar); }

/* Bilah samping laptop: burger + mode ikon */
.atas-samping { display: flex; align-items: center; gap: 10px; }
.burger, .rel-ikon {
  width: 46px; height: 46px; border-radius: 12px; border: 0; background: #F1F2F0; color: var(--teks);
  display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative;
}
.burger svg.ikon, .rel-ikon svg.ikon { width: 24px; height: 24px; }
.rel { display: flex; flex-direction: column; gap: 6px; align-items: center; overflow: auto; flex-grow: 1; padding: 4px 0; }
.rel-j { border: 0; background: none; padding: 4px; border-radius: 12px; display: inline-flex; }
.rel-j.aktif { background: var(--lembut); box-shadow: inset 0 0 0 2px var(--aksen); }
.rel-j.terkunci .lencana-j { opacity: .45; }
@media (min-width: 900px) {
  .tata-peta.ciut { grid-template-columns: 78px 1fr; }
  .samping.ciut { padding: 16px 10px; align-items: center; }
  .samping.ciut .rel-ikon { margin-top: 4px; }
  .samping .daftar-jurusan { margin: 0 -8px; }
}
.samping-pesan, .kanan-kepala { display: inline-flex; align-items: center; gap: 8px; }

/* Tombol dan panel pesan */
.tombol-pesan { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; }
.tombol-pesan.samping-pesan {
  border: 2px solid var(--garis); background: #fff; border-radius: 14px; min-height: 46px; padding: 0 14px; font-size: 16px; color: var(--teks); align-self: flex-start;
}
.tombol-pesan.tombol-putih { padding: 8px 10px; }
.tombol-pesan.keluar-ibra { min-width: 52px; }
.lencana-pesan {
  min-width: 22px; height: 22px; border-radius: 11px; background: #C2410C; color: #fff; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; line-height: 1;
}
.tombol-pesan .lencana-pesan { position: absolute; top: -8px; right: -8px; }
.tombol-pesan .lencana-pesan[hidden], .lencana-pesan[hidden] { display: none; }
body[data-versi="ibra"] .lencana-pesan { background: var(--aksen); }
.lembar-pesan { z-index: 45; }
@media (min-width: 900px) { .lembar-pesan { align-items: center; } .lembar-pesan > .kartu { border-radius: 24px; } }
.panel-pesan { max-width: 560px; width: 100%; max-height: 88vh; }
.panel-pesan h2 { font-size: 22px; font-weight: 800; }
.daftar-kontak { display: flex; flex-direction: column; gap: 8px; }
.kartu-kontak {
  display: flex; align-items: center; gap: 12px; border: 2px solid var(--abu); background: #fff; border-radius: 16px;
  padding: 10px 12px; text-align: left; min-height: 64px; color: var(--teks);
}
.kartu-kontak .avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--lembut); color: var(--aksen); font-weight: 800; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.kartu-kontak .tengah-kontak { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.kartu-kontak .nm { font-weight: 800; font-size: 17px; }
.obrolan { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow: auto; padding: 4px 2px; }
.gelembung { align-self: flex-start; max-width: 85%; background: var(--abu); border-radius: 16px 16px 16px 4px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.gelembung.saya { align-self: flex-end; background: var(--aksen); color: #fff; border-radius: 16px 16px 4px 16px; }
.gelembung .isi-gelembung { white-space: pre-wrap; word-break: break-word; font-size: 17px; }
.gelembung .waktu { font-size: 12px; opacity: .8; }
.gelembung .baca-bulat { width: 44px; height: 44px; align-self: flex-start; }
.pesan-cepat { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-cepat { border: 2px solid var(--aksen); background: #fff; color: var(--aksen); border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 15px; min-height: 40px; }
.tulis-pesan { display: flex; gap: 8px; align-items: flex-end; }
.tulis-pesan textarea { flex-grow: 1; min-height: 52px; border: 2px solid var(--garis); border-radius: 14px; padding: 10px 12px; resize: vertical; background: #fff; font-size: 17px; }
.tulis-pesan .tombol { min-height: 52px; }
.pesan-ibra .isi-gelembung { font-size: 24px; font-weight: 700; }
.pesan-ibra .chip-cepat { font-size: 20px; min-height: 56px; padding: 8px 18px; }
.dewasa .tombol-pesan.tombol { min-height: 44px; }
.dewasa .tombol-pesan .lencana-pesan { top: -6px; right: -6px; }

/* Video YouTube / Facebook */
.blok-video { display: flex; flex-direction: column; gap: 8px; }
.judul-video { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; color: var(--aksen); }
.bingkai-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #111; }
.bingkai-video iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; aspect-ratio: auto !important; }
.blok-video video { width: 100%; border-radius: 16px; background: #111; }

/* Materi lebih berwarna (Ubayd dan Ibad). Ibra tetap tenang. */
.pita-bintang, .pita-langkah { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 6px 12px; font-size: 15px; font-weight: 800; background: var(--lembut); }
.pita-bintang { color: #8A5A00; background: #FFF1C9; }
.pita-bintang svg.ikon { color: #E0A100; }
.dapat-bintang { display: inline-flex; align-items: center; gap: 4px; color: #8A5A00; }
.dapat-bintang svg.ikon { color: #E0A100; }
.kartu-warna { border-radius: 18px; display: flex; flex-direction: column; gap: 6px; }
.kartu-warna h2 { font-size: 22px; font-weight: 800; }
.kartu-ingat { display: flex; gap: 12px; align-items: flex-start; border-radius: 18px; }
.kartu-ingat .ikon-ingat { display: none; }
.judul-ingat { display: none; }
.huruf-pil { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--abu); font-weight: 800; }
.pilihan-huruf button { display: flex; align-items: center; gap: 12px; }
html.ub-berwarna body:not([data-versi="ibra"]) .kartu-warna { padding: 14px 16px; border-left: 6px solid var(--w); background: var(--wm); }
html.ub-berwarna body:not([data-versi="ibra"]) .kartu-warna h2 { color: var(--w); }
.kartu-warna.w1 { --w: #2F6FA8; --wm: #E6F0FA; }
.kartu-warna.w2 { --w: #2B7A68; --wm: #E2F3EE; }
.kartu-warna.w3 { --w: #7A4FA8; --wm: #F0E9F8; }
.kartu-warna.w4 { --w: #B5541C; --wm: #FCEDE2; }
.kartu-warna.w5 { --w: #B03A5B; --wm: #FBE8EE; }
html.ub-berwarna body:not([data-versi="ibra"]) .kartu-ingat { padding: 14px 16px; background: #FFF6D6; border: 2px solid #F2C94C; }
html.ub-berwarna body:not([data-versi="ibra"]) .kartu-ingat .ikon-ingat {
  display: inline-flex; width: 44px; height: 44px; border-radius: 50%; background: #F2C94C; color: #5C4300; align-items: center; justify-content: center; flex: none;
}
html.ub-berwarna body:not([data-versi="ibra"]) .kartu-ingat .ikon-ingat svg.ikon { width: 26px; height: 26px; }
html.ub-berwarna body:not([data-versi="ibra"]) .judul-ingat { display: block; font-weight: 800; color: #7A5A00; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
html.ub-berwarna body:not([data-versi="ibra"]) .huruf-pil { color: #fff; }
html.ub-berwarna .huruf-pil.h1 { background: #2F6FA8; }
html.ub-berwarna .huruf-pil.h2 { background: #2B7A68; }
html.ub-berwarna .huruf-pil.h3 { background: #B5541C; }
html.ub-berwarna .huruf-pil.h4 { background: #7A4FA8; }
html.ub-berwarna .huruf-pil.h5 { background: #B03A5B; }
html.ub-berwarna .huruf-pil.h6 { background: #2E7D8C; }
html.ub-berwarna body:not([data-versi="ibra"]) .latihan { border-top: 0; background: #F3F6FF; border: 2px dashed #9DB4E8; border-radius: 18px; padding: 14px; }
html.ub-berwarna body:not([data-versi="ibra"]) .latihan .tanya::before { content: "Latihan · "; color: #4A5FC1; }
html.ub-berwarna body:not([data-versi="ibra"]) .bilah > span.isi:nth-child(5n+2) { background: #2B7A68; }
html.ub-berwarna body:not([data-versi="ibra"]) .bilah > span.isi:nth-child(5n+3) { background: #7A4FA8; }
html.ub-berwarna body:not([data-versi="ibra"]) .bilah > span.isi:nth-child(5n+4) { background: #B5541C; }
html.ub-berwarna body:not([data-versi="ibra"]) .bilah > span.isi:nth-child(5n) { background: #B03A5B; }
html.ub-berwarna body:not([data-versi="ibra"]) .simpul.lulus:nth-of-type(odd) .bulat { background: #2B7A68; }
html.ub-berwarna body:not([data-versi="ibra"]) .materi .gambar-materi { background: #FFF6D6; }
.materi .kartu-warna p, .materi .kartu-ingat p { font-size: 20px; line-height: 1.5; }

/* Editor: pohon jurusan, panel kiri ciut */
.simpul-pohon .lencana-j { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; }
.simpul-pohon .lencana-j.panjang { font-size: 10px; }
.simpul-pohon .panah { border: 0; background: none; width: 28px; height: 32px; color: var(--teks2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kosong-pohon { font-size: 13px; color: var(--teks2); margin: 2px 0 6px 40px; }
@media (min-width: 900px) {
  .editor.ciut { grid-template-columns: 72px 1fr 300px; }
  .editor.ciut .panel.kiri { padding: 12px 8px; align-items: center; }
}
.rel-editor { display: flex; flex-direction: column; gap: 6px; align-items: center; }

/* Halaman pengaturan */
.tab-atur { display: flex; gap: 8px; flex-wrap: wrap; }
.tab-atur a { text-decoration: none; }
.grid-atur { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.warna-baris { display: flex; align-items: center; gap: 10px; }
.warna-baris input[type=color] { width: 56px; height: 44px; border: 1.5px solid #C9CED3; border-radius: 10px; padding: 2px; background: #fff; flex: none; }
.daftar-atur { display: flex; flex-direction: column; gap: 8px; }
.baris-jurusan { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #E1E4E8; border-radius: 12px; padding: 8px 10px; flex-wrap: wrap; }
.baris-jurusan .nm { flex: 1 1 160px; font-weight: 600; }
.baris-jurusan input[type=text] { width: 90px !important; flex: none; min-height: 38px !important; text-transform: uppercase; }
.centang-jurusan { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.centang-jurusan label { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; background: #F6F7F8; border-radius: 10px; padding: 6px 8px; margin: 0 !important; }
.centang-jurusan input { width: 18px; height: 18px; flex: none; }
.contoh-tampilan { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 899px) {
  .bar-dewasa { flex-wrap: wrap; row-gap: 8px; }
  .bar-dewasa .kanan { gap: 6px; }
  .bar-dewasa .kanan .tombol { min-height: 38px; font-size: 14px; padding: 0 10px; }
}
/* Pilihan masuk: Anak atau Pipit/Mama, dan beranda Pipit/Mama */
.pilih-masuk { display: inline-flex; border: 2px solid var(--garis); border-radius: 14px; overflow: hidden; background: #fff; margin: 6px 0; }
.pilih-masuk button { border: 0; background: #fff; min-height: 46px; padding: 0 18px; font-weight: 800; font-size: 16px; color: var(--teks); }
.pilih-masuk button + button { border-left: 2px solid var(--garis); }
.pilih-masuk button.aktif { background: var(--aksen); color: #fff; }
.dewasa .pilih-masuk { align-self: flex-start; }
.menu-ortu { display: flex; flex-direction: column; gap: 10px; }
.kartu-menu { flex-direction: row !important; align-items: center; gap: 14px !important; text-decoration: none; color: var(--teks); }
.kartu-menu b { font-size: 18px; }
.kartu-menu > span:nth-child(2) { flex-grow: 1; }
.ikon-menu { width: 48px; height: 48px; border-radius: 12px; background: var(--lembut); color: var(--aksen); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ikon-menu svg.ikon { width: 26px; height: 26px; }