/* ============================================================
   SCAFOLYA — PAGES
   Penataan khusus halaman: komposisi layar siswa (masuk, beranda,
   layar kerja, ringkasan), halaman depan, dan halaman lain.
   Paling akhir dalam cascade; hanya untuk yang tidak bisa
   diselesaikan komponen.
   ============================================================ */

/* ---------- 1. HALAMAN MASUK (LS-01) ------------------------ */

.masuk-kartu {
  width: min(100%, 30rem);
}

.masuk-kartu .card-body {
  gap: var(--space-6);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
}

.masuk-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* DEC-167: kode kelas dan nomor berdampingan supaya modal tetap muat satu layar ponsel. */
.masuk-dua { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-3); }
.masuk-form .input-kode { text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.masuk-form #nomor { text-transform: none; }

.masuk-kaki {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ---------- 2. BERANDA (LS-03) ------------------------------ */

.beranda-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

/* Kartu aktivitas tidak pernah lebih sempit dari 17rem: 3 kolom pada 1366,
   2 kolom pada tablet, 1 kolom pada ponsel. */
.beranda-daftar {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* ---------- 2a. PANEL SAPAAN BERANDA (DEC-086) --------------
   Satu panel navy menggantikan kepala lama: sapaan + pesan sesuai keadaan,
   pil "Tersimpan otomatis" yang memuat waktu simpan terakhir, tombol Cetak,
   dan tangga kemajuan (satu anak tangga per aktivitas, menggemakan simbol logo).
   Pesan sekali-tampil (selamat datang kembali, aktivitas selesai) tampil di sini. */

.page-beranda .utama { padding-top: var(--space-6); }

.beranda-sapa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "teks" "kemajuan" "alat";
  gap: var(--space-5);
  padding: clamp(var(--space-6), 1rem + 2.4vw, var(--space-10));
  border-radius: var(--radius-xl);
  background: var(--sapa-latar);
  box-shadow: var(--sapa-bayangan);
  color: var(--color-text-inverse);
}

.beranda-sapa-teks { grid-area: teks; }
.sapa-kemajuan { grid-area: kemajuan; }
.beranda-sapa-alat { grid-area: alat; }

/* Tablet ke atas: tangga di kolom kanan agar anak tangganya tetap ramping (bukan papan lebar). */
@media (min-width: 48rem) {
  .beranda-sapa {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    grid-template-areas: "teks kemajuan" "alat kemajuan";
    grid-template-rows: auto auto;
    column-gap: var(--space-8);
    row-gap: var(--space-5);
  }

  .beranda-sapa-teks { align-self: end; }
  .beranda-sapa-alat { align-self: start; }
  .sapa-kemajuan { align-self: center; }
}

@media (min-width: 62rem) {
  .beranda-sapa {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
    column-gap: var(--space-10);
  }
}

/* Ornamen: dua cahaya lembut yang hanyut pelan di balik isi. */
.beranda-sapa::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background-image:
    radial-gradient(26rem 20rem at 88% 8%, var(--ambient-orb-gold), transparent 64%),
    radial-gradient(24rem 18rem at 6% 96%, var(--ambient-orb-light), transparent 62%);
  pointer-events: none;
}

.beranda-sapa > .latar-hidup { z-index: 0; }
.beranda-sapa > .latar-hidup .partikel { opacity: 0.55; }
.beranda-sapa {
  --partikel-titik: var(--sapa-partikel-titik);
  --partikel-garis: var(--sapa-partikel-garis);
}

.beranda-sapa-teks,
.sapa-kemajuan,
.beranda-sapa-alat {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.beranda-sapa-teks {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}

.beranda-sapa .eyebrow { color: var(--amber-300); }

.beranda-sapa h1 {
  font-size: clamp(var(--fs-3xl), 1.45rem + 2.1vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-inverse);
  text-wrap: balance;
}

.beranda-sapa-pesan {
  max-width: 38rem;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--sapa-teks-redup);
  text-wrap: pretty;
}

.beranda-sapa-pesan strong {
  font-weight: var(--fw-bold);
  color: var(--color-text-inverse);
}

.beranda-sapa-alat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.beranda-sapa-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Pil simpan: ikon awan bercentang dalam lingkaran hijau lembut + teks + waktu */
.sapa-simpan {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-sm);
  max-width: 100%;
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1);
  border: var(--border-thin) solid var(--sapa-kaca-garis);
  border-radius: var(--radius-pill);
  background-color: var(--sapa-kaca);
  box-shadow: var(--glass-highlight-dark);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--sapa-teks-redup);
}

.sapa-simpan .sapa-simpan-ikon {
  box-sizing: content-box;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0.35rem;
  border-radius: var(--radius-circle);
  background-color: var(--sapa-simpan-ikon-bg);
  color: var(--sapa-simpan-ikon);
}

.sapa-simpan b {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text-inverse);
}

.sapa-simpan-waktu::before {
  content: "·";
  margin-inline: 0.4em;
  opacity: 0.7;
}

/* Panel kemajuan: kaca tipis di atas navy. Latar di sisi kanan panel sapaan lebih terang,
   jadi teks redupnya memakai biru-100 (kontras label kecil >= 4,5:1). */
.sapa-kemajuan {
  --sapa-teks-redup: var(--biru-100);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: var(--border-thin) solid var(--sapa-kaca-garis);
  border-radius: var(--radius-lg);
  background-color: var(--sapa-kaca);
  box-shadow: var(--glass-highlight-dark);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .sapa-simpan,
  .sapa-kemajuan {
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
  }
}

.sapa-kemajuan-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.sapa-kemajuan-label {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--amber-300);
}

.sapa-kemajuan-angka {
  font-size: var(--fs-xs);
  color: var(--sapa-teks-redup);
}

.sapa-kemajuan-angka b {
  margin-right: 0.15em;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--color-text-inverse);
}

/* Tangga: anak tangga makin tinggi ke kanan, naik rata dari --tangga-tinggi-min ke --tangga-tinggi-maks
   (--tinggi = (urutan - 1) / (jumlah - 1), disetel PHP). Ruang di atas untuk penanda bintang,
   sehingga tidak menabrak baris kepala. */
/* ol.tangga: mengalahkan reset ol[class] { padding: 0 } di base.css. */
ol.tangga {
  list-style: none;
  margin: 0;
  padding: var(--space-10) 0 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--space-1);
}

.tangga-anak {
  display: grid;
  justify-items: stretch;
  gap: var(--space-2);
  min-width: 0;
}

.tangga-balok {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  /* Naik rata: anak tangga pertama setinggi minimum, terakhir setinggi maksimum. */
  height: calc(var(--tangga-tinggi-min) + (var(--tangga-tinggi-maks) - var(--tangga-tinggi-min)) * var(--tinggi, 1));
  padding-top: var(--space-2);
  border: var(--border-thin) solid var(--sapa-kaca-garis);
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-xs) var(--radius-xs);
  background-color: var(--sapa-kaca);
  transform-origin: 50% 100%;
}

.tangga-isi {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-circle);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--sapa-teks-redup);
}

.tangga-isi .icon { width: 1rem; height: 1rem; stroke-width: 2.4; }

.tangga-label {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-align: center;
  color: var(--sapa-teks-redup);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tangga-anak[data-state="selesai"] .tangga-balok {
  border-color: transparent;
  background: var(--gradient-amber);
  box-shadow: var(--tangga-selesai-bayangan);
}

.tangga-anak[data-state="selesai"] .tangga-isi {
  background-color: var(--neutral-0);
  color: var(--amber-700);
}

.tangga-anak[data-state="giliran"] .tangga-balok {
  border: var(--border-thick) solid var(--tangga-giliran-garis);
  background-color: var(--sapa-kaca-kuat);
  box-shadow: var(--tangga-giliran-cahaya);
}

.tangga-anak[data-state="giliran"] .tangga-isi {
  background-color: var(--neutral-0);
  color: var(--biru-800);
}

.tangga-anak[data-state="giliran"] .tangga-label { font-weight: var(--fw-bold); color: var(--color-text-inverse); }
.tangga-anak[data-state="terkunci"] .tangga-isi { opacity: 0.7; }

.tangga-penanda {
  position: absolute;
  left: 50%;
  bottom: 100%;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: -0.875rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-circle);
  background: var(--gradient-amber);
  box-shadow: var(--shadow-md);
  color: var(--biru-950);
}

.tangga-penanda .icon { width: 0.95rem; height: 0.95rem; fill: currentColor; stroke-width: 1.4; }

/* Judul daftar kartu */
.beranda-daftar-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-6);
  margin: clamp(var(--space-8), 4vw, var(--space-12)) 0 var(--space-5);
}

.beranda-daftar-kepala h2 { font-size: var(--fs-2xl); }

.beranda-daftar-kepala p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Tujuan E-LKPD (KP-178): panel kaca terang tepat di bawah panel sapaan. Tiga butir berjajar mulai 48rem dan bertumpuk di
   layar lebih sempit. Nomornya bulat biru seperti langkah Untuk guru, bukan warna tahap Polya yang khusus untuk tahap
   (UX-010). Teksnya dari Teks layar siswa (beranda, tujuan_*). */
.beranda-tujuan {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: var(--border-thin) solid var(--glass-border);
  border-radius: var(--radius-lg);
  background-color: var(--glass-card);
  box-shadow: var(--glass-highlight), var(--shadow-glass);
}

.beranda-tujuan-judul {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lg);
}

/* ol.beranda-tujuan-daftar: mengalahkan reset ol[class] di base.css. */
ol.beranda-tujuan-daftar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  ol.beranda-tujuan-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}

.beranda-tujuan-daftar li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-secondary);
}

.beranda-tujuan-nomor {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-circle);
  background: var(--gradient-biru);
  box-shadow: var(--shadow-sm);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
}

/* Pengumuman dari guru (KP-152), di antara tujuan E-LKPD dan daftar aktivitas. Jarak antarkartu berupa margin atas
   butir kedua dan seterusnya, supaya butir yang dilipat saat ditutup membawa jaraknya sendiri; app.js ikut melipat
   jarak butir sesudahnya bila yang ditutup butir pertama, jadi kartu di bawahnya naik tanpa lompatan. */
.pengumuman { margin-top: var(--space-6); }

ul.pengumuman-daftar {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pengumuman-butir + .pengumuman-butir { margin-top: var(--space-3); }

.pengumuman-kartu {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  /* Ruang kanan untuk tombol tutup selalu disediakan, supaya teks tidak pernah tertimpa tombolnya. */
  padding: var(--space-4) calc(var(--space-5) + 2.75rem) var(--space-4) var(--space-5);
  border: var(--border-thin) solid var(--color-primary-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-softer);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}

.pengumuman-ikon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--icon-tile-md);
  height: var(--icon-tile-md);
  border-radius: var(--radius-circle);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
  font-size: var(--fs-lg);
}

.pengumuman-isi {
  display: grid;
  flex: 1 1 auto;
  gap: var(--space-1);
  min-width: 0;
  padding-top: 0.15rem;
}

.pengumuman-judul {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--color-primary-text);
}

.pengumuman-judul b { font-weight: var(--fw-bold); }

.pengumuman-oleh {
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

/* Teks biasa dari guru: baris barunya dipertahankan, alamat situs yang panjang dipatahkan agar tidak melebar. */
.pengumuman-teks {
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
}

.pengumuman-tutup {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-colors);
}

.pengumuman-tutup:hover { background-color: var(--color-primary-soft); color: var(--color-primary-text); }
.pengumuman-tutup[hidden] { display: none; }
.pengumuman-tutup .icon { width: 1.15rem; height: 1.15rem; }

@media (max-width: 35.99rem) {
  .beranda-sapa { border-radius: var(--radius-lg); gap: var(--space-4); padding: var(--space-5); }
  .beranda-sapa-pesan { font-size: var(--fs-base); }
  .beranda-sapa-alat { gap: var(--space-2); flex-wrap: nowrap; }
  .sapa-kemajuan { padding: var(--space-4) var(--space-4) var(--space-3); }
  ol.tangga { --tangga-tinggi-min: 2.5rem; --tangga-tinggi-maks: 5.5rem; }
  /* Pil simpan dua baris (teks lalu waktu) agar tombol Cetak muat di sebelahnya. */
  .sapa-simpan { flex: 1 1 auto; min-width: 0; border-radius: var(--radius-lg); padding-block: var(--space-1); }
  .sapa-simpan > span { display: grid; }
  .sapa-simpan-waktu::before { content: none; }
  .beranda-sapa-aksi { flex: 0 0 auto; }
  .beranda-daftar-kepala { margin: var(--space-8) 0 var(--space-4); }
  .beranda-daftar-kepala h2 { font-size: var(--fs-xl); }
  .beranda-tujuan { margin-top: var(--space-4); padding: var(--space-5); }
  .pengumuman { margin-top: var(--space-4); }
  /* Ponsel: ikon sebaris dengan judul, isi pengumuman memakai seluruh lebar kartu di bawahnya. */
  .pengumuman-kartu { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-4); }
  .pengumuman-isi { display: contents; }
  .pengumuman-judul { padding-right: 2.25rem; }
  .pengumuman-oleh { display: block; font-size: var(--fs-sm); }
  .pengumuman-teks { grid-column: 1 / -1; }
  .pengumuman-ikon { width: var(--icon-tile-sm); height: var(--icon-tile-sm); font-size: var(--fs-base); }
  .pengumuman-tutup { top: var(--space-2); right: var(--space-2); }
}

@media (max-width: 21.99rem) {
  .beranda-sapa-alat { flex-wrap: wrap; }
}

/* Semua selesai: dua tombol (Lihat ringkasan, Cetak) di baris sendiri di bawah pil simpan. */
@media (max-width: 35.99rem) {
  .beranda-sapa-alat.is-dua-aksi { flex-wrap: wrap; }
  .beranda-sapa-alat.is-dua-aksi .sapa-simpan,
  .beranda-sapa-alat.is-dua-aksi .beranda-sapa-aksi { flex: 1 1 100%; }
}

/* Tombol kembali di awal bilah posisi (DEC-086) */
.bilah-kembali {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  min-width: 0;
}

.tombol-kembali .icon { transition: transform var(--dur-fast) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .tombol-kembali:hover .icon { transform: translateX(-3px); }
}

/* ---------- 3. LAYAR KERJA (LS-05–LS-09) -------------------- */

.kerja-kepala {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Kabar di antara bilah tahap dan kartu (soal dibuka kembali KP-156, isian belum lengkap) berjarak sama seperti bilahnya. */
.kerja-kepala ~ .feedback { margin-bottom: var(--space-6); }

.kerja-bilah {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.kerja-jawaban {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.kerja-jawaban .card-body { gap: var(--space-5); }

/* ---------- 4. ORIENTASI & RINGKASAN (LS-02, LS-10) --------- */

.ringkasan-kepala {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-8);
}

/* ---------- 5. PERAGA F1 (halaman internal /peraga, mati di produksi) ----- */

/* KP-177 (TS-2): gaya katalog UI kit pindah ke public/ui-kit/kit.css. Halaman peraga memakai kisi kartunya sendiri. */
.peraga-daftar {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

/* ---------- LEMBAR JAWABAN (pratinjau cetak / PDF) ---------- */

.lembar-alat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.lembar {
  background: #fff;
  color: #1a1a1a;
  max-width: 210mm;
  margin: 0 auto;
  padding: 14mm 16mm;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  font-size: 11pt;
  line-height: 1.55;
}

.lembar-kepala {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  border-bottom: 2px solid #012A6A;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.lembar-kepala .brand { --h: 2.25rem; }
.lembar-kepala-teks { text-align: right; }
.lembar-judul { font-family: var(--font-display); font-size: 17pt; font-weight: 800; margin: 0; color: #012A6A; line-height: 1.2; }
.lembar-sub { margin: 2px 0 0; font-size: 9.5pt; color: #555; }

.lembar-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 16px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #F3F6FB;
  border-radius: 8px;
}

.lembar-meta dt { font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.05em; color: #556; }
.lembar-meta dd { margin: 0; font-weight: 700; font-size: 10.5pt; }
.lembar-catatan { font-size: 9pt; color: #555; margin: 0 0 8px; }

.lembar-aktivitas + .lembar-aktivitas { margin-top: 24px; border-top: 1px dashed #B5BCC6; padding-top: 12px; }
.lembar h2 { font-family: var(--font-display); font-size: 14pt; margin: 8px 0 4px; color: #012A6A; }
.lembar h3 { font-family: var(--font-display); font-size: 11.5pt; margin: 14px 0 6px; }
.lembar-ringkas { font-size: 9.5pt; color: #444; margin: 0 0 8px; }
.lembar-kosong { font-size: 10pt; color: #666; font-style: italic; margin: 4px 0 8px; }

.lembar-soal { border: 1px solid #D8DCE3; border-radius: 8px; padding: 8px 12px; margin: 6px 0 10px; background: #FBFBF9; }
.lembar-soal p { margin: 3px 0; white-space: pre-line; }
.lembar-tabel { margin: 6px 0; }
.lembar-tabel-judul { margin: 0 0 3px; font-weight: 700; color: #0F4597; }
/* D-3: gambar Papan Ide di lembar jawaban, utuh di satu halaman. */
.lembar-papan { margin: 6px 0; break-inside: avoid; }
.lembar-papan .papan-svg { width: 100%; max-width: 14cm; height: auto; border: 1px solid #C8CFDA; border-radius: 4px; }
.lembar-tabel table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.lembar-tabel th, .lembar-tabel td { border: 1px solid #C9CFD8; padding: 3px 6px; text-align: center; }
.lembar-tabel th { background: #F1F3F7; font-weight: 700; }
.lembar-tabel td:first-child { text-align: left; }
.lembar-tabel-kosong { color: #8A8F98; }
.lembar-tanya { font-weight: 700; color: #0F4597; }

.lembar-tahap { margin: 8px 0 10px; }
.lembar-tahap-judul { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 9.5pt; padding: 2px 10px; border-radius: 999px; background: #EEF4FD; color: #0F4597; margin-bottom: 4px; }

.lembar-butir { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 8px; margin: 6px 0; break-inside: avoid; page-break-inside: avoid; }
.lembar-butir-nomor { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #8A8A81; font-size: 9pt; font-weight: 700; display: grid; place-items: center; margin-top: 2px; }
.lembar-butir-isi p { margin: 0 0 4px; }
.lembar-pengantar { color: #555; font-size: 10pt; }
.lembar-kalimat { line-height: 2; }
.lembar-isian { display: inline-block; min-width: 3.5em; padding: 0 8px; border-bottom: 1.5px solid #333; font-weight: 700; text-align: center; line-height: 1.4; }
.lembar-isian-kosong { border-bottom-style: dotted; }
.lembar-jawab { font-size: 10.5pt; }
.lembar-uraian { white-space: pre-wrap; overflow-wrap: anywhere; border: 1px dashed #B5BCC6; border-radius: 6px; padding: 8px 10px; margin: 2px 0 4px; background: #fff; min-height: 2.4em; font-size: 10.5pt; }
.lembar-uraian-kosong { color: #777; }
.lembar-status { display: inline-block; font-family: var(--font-display); font-size: 8.5pt; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid #999; color: #555; background: #F3F3F1; }
.lembar-status[data-status="tepat"] { color: #0F6634; border-color: #0F6634; background: #E9F7EE; }
.lembar-status[data-status="belum-tepat"] { color: #9B1C1C; border-color: #9B1C1C; background: #FDECEC; }
/* Revisi validasi 3.3: lembar siswa hanya mencetak sudah atau belum diperiksa, berwarna netral. */
.lembar-status[data-status="diperiksa"] { color: #1D4E89; border-color: #1D4E89; background: #EAF2FB; }

.lembar-penilaian { margin-top: 12px; break-inside: avoid; page-break-inside: avoid; }
.lembar-penilaian table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.lembar-penilaian th, .lembar-penilaian td { border: 1px solid #B5BCC6; padding: 7px 8px; text-align: left; vertical-align: top; height: 2.2em; }
.lembar-penilaian th { background: #F3F6FB; font-family: var(--font-display); font-size: 9pt; }

.lembar-ttd { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; font-size: 10pt; break-inside: avoid; page-break-inside: avoid; }
.lembar-ttd div { border-top: 1px solid #333; padding-top: 6px; margin-top: 52px; text-align: center; }
.lembar-kaki { margin-top: 16px; font-size: 8.5pt; color: #666; border-top: 1px solid #D8DCE3; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; }

@media (max-width: 47.99rem) {
  .lembar { padding: 20px 16px; font-size: 10.5pt; }
  .lembar-kepala-teks { text-align: left; }
}

/* Tabel rasio empat kolom (Operasi dan Bilangan) muat di layar 360 piksel; bila tetap lebih lebar, tabelnya digulir.
   Hanya layar: hasil cetak A4 tetap memakai ukuran di atas. */
@media screen and (max-width: 47.99rem) {
  .lembar-tabel { overflow-x: auto; }
  .lembar-tabel table { font-size: 9pt; }
  .lembar-tabel th, .lembar-tabel td { padding: 3px 4px; }
}

@media print {
  @page { size: A4; margin: 14mm 15mm; }
  html, body { background: #fff !important; }
  body::before { display: none !important; }
  .navbar, .footer, .lembar-alat, .skip-link, .live, .toast-wadah, dialog { display: none !important; }
  .halaman { min-height: 0; }
  .utama { padding: 0 !important; }
  .utama > .container { max-width: none !important; padding: 0 !important; }
  .lembar { max-width: none; margin: 0; padding: 0; box-shadow: none; border-radius: 0; font-size: 10.5pt; color: #000; }
  .lembar-aktivitas + .lembar-aktivitas { break-before: page; page-break-before: always; border-top: 0; padding-top: 0; margin-top: 0; }
  .lembar-status, .lembar-tahap-judul, .lembar-meta, .lembar-soal, .lembar-penilaian th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* AUD-39: judul tahap tidak tertinggal sendirian di dasar halaman. */
  .lembar-tahap-judul { display: block; width: fit-content; break-after: avoid; page-break-after: avoid; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- SERTIFIKAT PENYELESAIAN (KP-158) ----------
   Satu lembar A4 melintang. Ukuran di dalam lembar memakai satuan wadah (cqi), jadi pratinjau di layar dan cetakan
   selebar 297 mm berbanding sama. Warnanya tetap terang di tema gelap, dan hiasannya garis serta vektor, bukan warna
   latar, supaya tetap tercetak walau pilihan grafik latar di dialog cetak mati. */

.sertifikat-alat-judul { margin: 0; font-size: var(--fs-xl); }
.sertifikat-tumpuk { display: grid; justify-items: center; gap: var(--space-6); padding-bottom: var(--space-10); }

.sertifikat {
  position: relative;
  width: 100%;
  max-width: 297mm;
  aspect-ratio: 297 / 210;
  container-type: inline-size;
  overflow: hidden;
  background: #fff;
  color: #1B2436;
  color-scheme: light;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  line-height: 1.4;
}
.sertifikat-bingkai { position: absolute; inset: 0; width: 100%; height: 100%; }
/* KP-164: tanda air logo pucat di tengah lembar, di belakang nama dan kalimat penghargaan. */
.sertifikat-tanda-air {
  position: absolute;
  top: 56%;
  left: 50%;
  width: 72%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}
.sertifikat-isi {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6.2cqi 10.5cqi 5.4cqi;
  text-align: center;
}
.sertifikat-merek { line-height: 0; }
.sertifikat-merek .brand { --h: 4.4cqi; }
.sertifikat-judul {
  margin: 2.6cqi 0 0;
  padding-left: 0.32em;
  font-family: var(--font-display);
  font-size: 3cqi;
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #012A6A;
}
.sertifikat-judul::after { content: ""; display: block; width: 9cqi; margin: 1.4cqi auto 0; border-top: 0.3cqi solid #F8AE1A; }
/* Nama dan kalimat berada di tengah ruang antara judul dan baris tanda tangan. */
.sertifikat-badan { display: flex; flex-direction: column; align-items: center; max-width: 100%; margin-block: auto; padding-block: 1.6cqi; }
.sertifikat-pengantar { margin: 0; font-size: 1.4cqi; letter-spacing: 0.06em; color: #4B5870; }
.sertifikat-nama {
  margin: 0.8cqi 0 0;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: 4.6cqi;
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  color: #0A1F47;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.sertifikat-nama-sedang { font-size: 3.7cqi; }
.sertifikat-nama-kecil { font-size: 3cqi; }
.sertifikat-identitas { margin: 1cqi 0 0; font-size: 1.5cqi; font-weight: var(--fw-semibold); color: #1556B8; }
.sertifikat-kalimat { margin: 2cqi 0 0; max-width: 62cqi; font-size: 1.5cqi; line-height: 1.65; color: #2E3A50; text-wrap: pretty; }
.sertifikat-kaki { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; column-gap: 3cqi; width: 100%; }
.sertifikat-kolom { display: grid; justify-items: center; }
.sertifikat-nilai {
  min-width: 24cqi;
  margin: 0;
  padding: 0 1.2cqi 0.7cqi;
  border-bottom: 0.12cqi solid #5B6780;
  font-family: var(--font-display);
  font-size: 1.55cqi;
  font-weight: var(--fw-bold);
  color: #0A1F47;
}
.sertifikat-ttd .sertifikat-nilai { padding-top: 6cqi; }
.sertifikat-label { margin: 0.7cqi 0 0; font-size: 1.2cqi; letter-spacing: 0.04em; color: #5B6780; }
.sertifikat-segel { width: 10.5cqi; height: auto; }
/* Revisi validasi (D-9, KS-32): nilai Uji Pemahaman terbaik di bawah kalimat penghargaan, dalam pita bergaris navy
   dengan pemisah amber; garisnya yang membuat pita tetap tercetak walau grafik latar mati. Sertifikat bernilai merapatkan
   jarak di atas kalimat dan di dalam badan, supaya kalimat penghargaan yang disunting panjang tetap muat di lembar. */
.sertifikat-capaian {
  display: flex;
  align-items: center;
  max-width: 100%;
  margin: 1.6cqi 0 0;
  padding: 0.5cqi 0.4cqi;
  border: 0.14cqi solid #012A6A;
  border-radius: 99cqi;
  /* Isi putih menutup tanda air di belakang pita supaya labelnya bersih; bila grafik latar tidak dicetak, pita tetap
     terbaca karena garisnya. */
  background-color: #fff;
  line-height: 1.15;
  color: #0A1F47;
}
.sertifikat-capaian > span { padding: 0 1.3cqi; }
.sertifikat-capaian > span + span { border-left: 0.12cqi solid #F8AE1A; }
.sertifikat-capaian-label { font-size: 1.15cqi; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: #4B5870; }
.sertifikat-capaian-angka { font-family: var(--font-display); font-size: 2.4cqi; font-weight: var(--fw-extrabold); color: #012A6A; }
.sertifikat-capaian-kategori { font-family: var(--font-display); font-size: 1.45cqi; font-weight: var(--fw-bold); color: #1556B8; }
.sertifikat-badan:has(.sertifikat-capaian) { padding-block: 0.8cqi; }
.sertifikat-badan:has(.sertifikat-capaian) .sertifikat-kalimat { margin-top: 1.5cqi; }

@media print {
  @page sertifikat { size: A4 landscape; margin: 0; }
  .page-sertifikat { page: sertifikat; background: #fff !important; }
  .page-sertifikat .sertifikat-alat { display: none !important; }
  .sertifikat-tumpuk { display: block; max-width: none !important; padding: 0 !important; }
  .sertifikat {
    width: 297mm;
    max-width: none;
    height: 209.5mm;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .sertifikat:last-child { break-after: auto; page-break-after: auto; }
}

/* ---------- HALAMAN DEPAN (LS-00) dan modal Masuk ---------- */

.page-landing .utama { padding-block: 0; }
.page-landing .navbar-link { color: var(--color-text-secondary); }
.page-landing .navbar-link:hover, .page-landing .navbar-link.is-active { color: var(--color-text); }
@media (min-width: 62rem) { .navbar-publik .navbar-nav { margin-left: auto; } }
/* KP-166: enam menu (sejak menu Panduan) baru muat sebaris dengan jarak dalam penuh mulai 80rem. Di laptop 62rem sampai
   80rem jarak dalamnya dirapatkan, dan di bawah 68,75rem hurufnya juga sedikit diperkecil, supaya menu tetap satu baris
   tanpa pindah ke tombol menu. */
@media (min-width: 62rem) and (max-width: 79.99rem) { .navbar-publik .navbar-link { padding-inline: var(--space-2); } }
@media (min-width: 62rem) and (max-width: 68.74rem) {
  .navbar-publik .navbar-menu { gap: 0.125rem; }
  .navbar-publik .navbar-link { padding-inline: 0.4rem; font-size: var(--fs-xs); }
}
@media (max-width: 61.99rem) {
  .navbar-publik .navbar-inner { gap: var(--space-3); }
  .navbar-publik .navbar-actions { gap: var(--space-2); }
  .navbar-publik .navbar-actions .btn-sm { min-height: var(--control-height-md); }
}
/* Ponsel (< 36rem): merek memakai lockup ringkas (.brand-ringkas, components.css) dan tombol Masuk tanpa ikon.
   Anggaran lebar pada 360px: merek ±157px + Masuk ±75px + menu 44px + celah 20px = ±296px dari 328px tersedia
   (sisa ±32px) sehingga tidak ada pembungkusan pada Samsung S25/A-series (KP-43). */
@media (max-width: 35.99rem) { .navbar-publik .navbar-actions .btn .icon { display: none; } }

/* Tombol Masuk kaca (DEC-069): biru utama tembus pandang dengan sorot atas dan blur latar */
.btn-kaca-utama { background-color: rgba(21, 86, 184, 0.84); border-color: rgba(255, 255, 255, 0.34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), var(--shadow-glass); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .btn-kaca-utama { -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate)); }
}
@media (hover: hover) { .btn-kaca-utama:hover { background-color: rgba(21, 86, 184, 0.96); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--shadow-glass-md); } }

#dialog-masuk.modal-lebar { width: min(100% - var(--space-8), 28rem); }
/* DEC-088: modal Masuk yang dirender terbuka (cadangan tanpa JavaScript) disembunyikan sampai skrip
   membukanya sebagai modal yang tumbuh dari tombol Masuk; tanpa ini ia sempat tampak tanpa latar. */
@supports selector(:modal) {
  .js-aktif #dialog-masuk[open]:not(:modal) { visibility: hidden; }
}
#dialog-masuk .modal-kotak { text-align: center; justify-items: center; }
#dialog-masuk .modal-text { width: 100%; }
#dialog-masuk .masuk-form { text-align: left; width: 100%; margin-top: var(--space-2); }
#dialog-masuk .feedback { text-align: left; }

/* DEC-083 — modal Masuk muat satu layar ponsel tanpa gulir.
   Diukur dengan ukuran sentuh (kolom dan tombol 48px): sebelum perbaikan isi kotak melebihi
   ruang 65px pada 360x640, 45px pada 393x641, 105px pada 360x600, dan 183px pada 320x568.
   Tingkat 1 (layar sempit atau pendek): padding, jarak, dan ukuran judul dirapatkan.
   Tingkat 2 (layar pendek): ikon avatar disembunyikan — judul "Masuk" sudah cukup jelas. */
/* KP-172: ambang tingkat 1 dan 2 dinaikkan dari 46rem ke 52,5rem, karena kotak tanpa perapatan 804 px ditambah jarak tepi
   2 × 16 px tidak muat di layar laptop 1440 × 900 (tinggi isi jendela 744 px). Pil demo merapat sepola halaman masuk
   guru. Diukur di Chrome tanpa layar pada tinggi isi jendela 612, 644, 744, dan 924 px. */
@media (max-width: 35.99rem), (max-height: 52.5rem) {
  #dialog-masuk .modal-kotak { gap: var(--space-3); padding: var(--space-6) var(--space-5) var(--space-5); }
  #dialog-masuk .demo-pil-blok { margin-top: 0; padding-top: var(--space-3); }
  #dialog-masuk .demo-pil-judul { margin-bottom: var(--space-2); }
  /* Kolom kata sandi setinggi kolom kode kelas dan nomor: angka enam digit tetap besar dan berjarak, satu tingkat lebih kecil. */
  #dialog-masuk .input-pin { font-size: var(--fs-lg); letter-spacing: 0.3em; }
  #dialog-masuk .modal-title { font-size: var(--fs-xl); }
  #dialog-masuk .modal-text { gap: var(--space-2); }
  #dialog-masuk .modal-text > p { font-size: var(--fs-sm); line-height: var(--lh-snug); }
  #dialog-masuk .masuk-form { gap: var(--space-3); margin-top: var(--space-1); }
  #dialog-masuk .field { gap: var(--space-1); }
  #dialog-masuk .field-help { line-height: var(--lh-snug); }
  #dialog-masuk .masuk-kaki { margin: 0; line-height: var(--lh-snug); }
  #dialog-masuk .feedback { padding-block: var(--space-2); }
}

@media (max-height: 52.5rem) {
  #dialog-masuk .modal-kotak > .icon-tile { display: none; }
  #dialog-masuk .modal-kotak { padding-top: var(--space-5); }
}

/* KP-172: tingkat 3 untuk layar laptop pendek (jendela 1366 × 768 dan 1280 × 800): kolom isian dan tombol setinggi
   kontrol sedang, dan bantuan kolom satu ukuran lebih kecil. Isinya tidak berubah. */
@media (max-height: 41rem) {
  #dialog-masuk .masuk-form .input { padding-block: var(--space-2); }
  #dialog-masuk .masuk-form .btn-lg { min-height: var(--control-height-md); padding-block: var(--space-2); }
  #dialog-masuk .field-help, #dialog-masuk .masuk-kaki { font-size: var(--fs-xs); }
  /* K-46: kalimat pemberitahuan pencatatan menambah dua baris di kaki kotak, jadi jarak antarbagian dirapatkan satu tingkat
     supaya kotak tetap muat tanpa gulir di 1366 × 580 dan 360 × 640 seperti sebelumnya. */
  #dialog-masuk .modal-kotak { gap: var(--space-2); padding-block: var(--space-4); }
  #dialog-masuk .masuk-form { gap: var(--space-2); }
}
/* K-46: layar setinggi 600 piksel ke bawah (laptop 1366 × 580, ponsel 360 × 600) merapatkan tepi kotak dan blok demo. */
@media (max-height: 37.5rem) {
  #dialog-masuk .modal-kotak { padding-block: var(--space-3); }
  #dialog-masuk .demo-pil-blok { padding-top: var(--space-2); }
  #dialog-masuk .demo-pil-judul { margin-bottom: var(--space-1); }
}

/* KP-172: ponsel selebar 360 piksel ke atas menjajarkan kedua pil demo, sepola halaman masuk guru, supaya kotak Masuk
   tidak bergulir di layar 360 × 640. */
@media (min-width: 22.5rem) and (max-width: 35.99rem) {
  #dialog-masuk .demo-pil-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  #dialog-masuk .demo-pil { padding-inline: var(--space-2); }
}
.modal-aksi:empty { display: none; }
.masuk-kartu { margin-inline: auto; }

/* Hero: judul terkendali, satu kolom, latar video opsional dengan lapisan gelap agar teks terbaca */
.page-landing .hero-content { max-width: 46rem; }
.page-landing .hero-title { font-size: clamp(var(--fs-3xl), 3.6vw, var(--fs-5xl)); }
.page-landing .hero-text { max-width: 32rem; }
/* KP-140: hero memenuhi layar pertama di bawah bilah navigasi yang menempel, jadi tidak ada ruang putih section
   berikutnya yang mengintip di bawahnya; isinya tetap di tengah. Tinggi bilah navigasi 64 px di ponsel dan 80 px mulai
   48rem, ditambah garis bawahnya 1 px. svh menjaga tinggi tetap saat bilah alamat ponsel muncul atau hilang; vh untuk
   peramban lama. Bila isinya lebih tinggi dari layar, hero ikut memanjang seperti sebelumnya. */
.page-landing .hero {
  min-height: calc(100vh - var(--navbar-height-sm) - var(--border-thin));
  min-height: calc(100svh - var(--navbar-height-sm) - var(--border-thin));
  display: flex;
  align-items: center;
}
@media (min-width: 48rem) {
  .page-landing .hero {
    min-height: calc(100vh - var(--navbar-height) - var(--border-thin));
    min-height: calc(100svh - var(--navbar-height) - var(--border-thin));
  }
}
/* DEC-180: jarak atas dan bawah hero mengikuti lebar DAN tinggi layar. Penanda pengembang menambah tinggi
   hero sekitar 86 piksel; tanpa ini keempat angka ringkas terpotong di tepi bawah layar 1440 x 760. */
.page-landing .hero { padding-block: clamp(var(--space-12), min(8vw, 10vh), var(--space-24)); }
.page-landing .hero > .container { width: 100%; }
/* DEC-181: kolom kiri berisi teks dan tombol, lalu empat angka ringkas; kolom kanan kartu pengembang yang
   berdiri sejajar dengan keduanya. Di bawah 62rem semuanya bertumpuk: teks, kartu, angka. Ukuran judul dua kolom
   diturunkan sedikit supaya "Belajar memecahkan masalah," tetap satu baris di samping kartu. */
.page-landing .hero-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "konten" "kartu" "angka"; row-gap: var(--space-7); }
.page-landing .hero-content { grid-area: konten; }
.page-landing .hero-stat { grid-area: angka; margin-top: 0; }
@media (min-width: 62rem) {
  .page-landing .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem);
    grid-template-areas: "konten kartu" "angka kartu";
    column-gap: clamp(var(--space-8), 4vw, var(--space-16));
    align-items: center;
  }
  .page-landing .hero-title { font-size: clamp(var(--fs-3xl), 3.2vw, 3rem); }
  .page-landing .hero-pengembang { max-width: none; align-self: center; }
}
.page-landing .hero::before, .page-landing .hero::after { z-index: 1; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-lapis { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(1, 42, 106, 0.82) 0%, rgba(1, 42, 106, 0.62) 55%, rgba(1, 42, 106, 0.45) 100%); }
.hero-bervideo::before { opacity: 0.1; }
.hero-bervideo::after { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* Empat angka sebagai tile kaca gelap (DEC-069) */
.hero-stat { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 40rem; }
@media (min-width: 48rem) { .hero-stat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* AUD-40 (KP-134): ubin berlatar kaca biru pekat seperti kartu pengembang dan labelnya putih, supaya tetap terbaca di atas
   bingkai video hero yang terang; kaca putih tipis sebelumnya membuat label hanya berkontras 1,8 sampai 4,4:1. */
.hero-stat li { display: grid; gap: 0.1rem; align-content: start; padding: var(--space-4); border-radius: var(--radius-lg); background-color: var(--glass-dark); }
.hero-stat-ikon { color: var(--amber-300); margin-bottom: var(--space-2); }
.hero-stat strong { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); line-height: 1; color: #fff; }
.hero-stat span:last-child { font-size: var(--fs-xs); color: #fff; }

/* Kartu pengembang di hero (DEC-181): kartu kaca gelap mengambang di sisi kanan hero, sejajar dengan judul,
   memakai komponen .hero-panel dari UI kit. Bagian identitas di tengah: judul kecil, foto, nama, jabatan;
   lalu lokasi dan studi seperti di section Pengembang; lalu tautan ke profil lengkap. Di bawah 62rem kartu turun
   ke bawah tombol, sebelum empat angka ringkas.
   DEC-182: foto dalam bingkai persegi bersudut lembut dan tampil utuh dari kepala sampai bahu seperti pasfoto,
   dengan potongan yang sama seperti section Pengembang; tidak lagi lingkaran yang diperbesar ke wajah. Foto
   berlatar transparan, jadi bingkainya diberi latar terang supaya kerudung dan jas gelap tetap terbaca. Setiap
   garis pembatas berjarak sama di atas dan di bawahnya. */
.hero-pengembang { grid-area: kartu; gap: var(--space-5); width: 100%; max-width: 28rem; border-radius: var(--radius-xl); }
.hero-pengembang-identitas { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.hero-pengembang-identitas .eyebrow { margin-bottom: var(--space-2); }
.hero-pengembang-identitas .eyebrow::after { content: ""; width: var(--space-6); height: var(--border-thick); border-radius: var(--radius-pill); background-color: var(--color-secondary); }
.hero-pengembang-foto {
  display: grid;
  place-items: center;
  width: 9rem;
  height: 9rem;
  margin-bottom: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #ffffff 0%, #e4ecfa 100%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75), 0 14px 30px -12px rgba(0, 0, 0, 0.5);
}
.hero-pengembang-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hero-pengembang-foto .profil-foto-kosong { font-size: 2.75rem; color: var(--color-primary-text); }
.hero-pengembang-nama { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: #fff; text-wrap: balance; }
.hero-pengembang-jabatan { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--color-text-inverse-muted); }
/* ul.hero-pengembang-meta: mengalahkan reset ul[class] { padding: 0 } di base.css; tanpa itu label Lokasi
   menempel ke garis pembatas (DEC-182). */
ul.hero-pengembang-meta { list-style: none; margin: 0; padding: var(--space-5) 0 0; display: grid; gap: var(--space-4); border-top: var(--border-thin) solid var(--glass-border-dark); }
.hero-pengembang-meta li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.hero-pengembang-ikon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-circle); background-color: rgba(255, 255, 255, 0.1); color: var(--amber-300); }
.hero-pengembang-meta div { display: grid; gap: 0.1rem; min-width: 0; }
.hero-pengembang-meta small { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-inverse-muted); }
/* div > span: hanya teks isian; ikon di sampingnya tetap emas. */
.hero-pengembang-meta div > span { font-size: var(--fs-sm); line-height: var(--lh-snug); color: #fff; overflow-wrap: anywhere; text-wrap: pretty; }
.hero-pengembang-tautan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: var(--border-thin) solid var(--glass-border-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--amber-300);
  text-decoration: none;
  transition: var(--transition-colors);
}
.hero-pengembang-tautan .icon { transition: transform var(--dur-fast) var(--ease-out); }
/* KP-176 (TS-6): efek tunjuk hanya untuk perangkat ber-hover, seperti tautan kartu mengambang; di layar sentuh keadaan
   tunjuk tidak tertinggal sesudah diketuk. */
@media (hover: hover) {
  .hero-pengembang-tautan:hover { color: #fff; }
  .hero-pengembang-tautan:hover .icon { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .hero-pengembang-tautan .icon { transition: none; } }
/* DEC-182: desktop yang pendek, misalnya laptop 1366 x 768 dengan bilah peramban, memakai kartu yang sedikit lebih
   rapat dan foto 7rem. Tanpa ini tautan kartu terpotong dan empat angka ringkas jatuh di bawah layar pertama. Jarak
   di sekitar tiap garis pembatas tetap sama di atas dan di bawahnya. */
@media (min-width: 62rem) and (max-height: 44.99rem) {
  .page-landing .hero-pengembang { gap: var(--space-4); padding: var(--space-5); }
  .page-landing .hero-pengembang-identitas .eyebrow { margin-bottom: var(--space-1); }
  .page-landing .hero-pengembang-foto { width: 7rem; height: 7rem; margin-bottom: var(--space-1); }
  .page-landing ul.hero-pengembang-meta, .page-landing .hero-pengembang-tautan { padding-top: var(--space-4); }
}

/* KP-139: tanpa kartu hero, hero kembali tersusun seperti sebelum ada kartu pengembang (v0.19.5): satu kolom, judul
   berukuran semula, dan empat angka ringkas sebaris di bawah kedua tombol. Susunan dua kali dua di kolom kanan dari
   KP-136 tidak dipakai lagi. Ukuran judul yang diperkecil DEC-181 hanya untuk judul di samping kartu. */
.page-landing .hero-tanpa-kartu .hero-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "konten" "angka"; }
@media (min-width: 62rem) {
  .page-landing .hero-tanpa-kartu .hero-title { font-size: clamp(var(--fs-3xl), 3.6vw, var(--fs-5xl)); }
}

/* KP-159: hiasan musiman. Untaian bendera setinggi 34 px menempel di tepi atas hero dan pil salam tergantung padanya,
   keduanya mutlak di dalam ruang atas hero yang paling sedikit 48 px, jadi isi hero tidak bergeser. Sekali sesudah
   halaman dibuka, untaian turun dari tepi atas dan pil berayun pelan sampai diam; tanpa gerak bila pengunjung meminta
   gerak dikurangi. */
.hiasan { position: absolute; top: 0; left: 0; right: 0; z-index: calc(var(--z-raised) + 1); pointer-events: none; }
.hiasan-untaian { display: block; width: 100%; height: 34px; }
.hiasan-wadah { position: absolute; top: 9px; left: 0; right: 0; }
.hiasan-salam {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  margin: 0;
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--amber-400);
  box-shadow: 0 6px 18px rgba(1, 16, 42, 0.32);
  color: #1A1204;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  white-space: nowrap;
}
.hiasan-salam .icon { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; }
.hiasan-salam span { overflow: hidden; text-overflow: ellipsis; }
/* Gerak baru dimulai ui.js sesudah halaman termuat, supaya turunnya terlihat utuh dan tidak termakan beban memuat;
   sebelum itu untaian dan pil menunggu di balik tepi atas hero. Tanpa JavaScript, hiasan langsung tampil diam. */
@media (prefers-reduced-motion: no-preference) {
  .js-aktif .hiasan:not(.is-mulai) .hiasan-untaian { transform: translateY(-100%); }
  .js-aktif .hiasan:not(.is-mulai) .hiasan-salam { transform: translateY(-43px) rotate(-5deg); }
  .hiasan.is-mulai .hiasan-untaian { animation: sf-hiasan-turun 1000ms var(--ease-out) both; }
  .hiasan.is-mulai .hiasan-salam { transform-origin: 50% -9px; animation: sf-hiasan-ayun 1500ms var(--ease-out) 80ms both; }
}
@keyframes sf-hiasan-turun {
  from { transform: translateY(-100%); }
  to { transform: none; }
}
@keyframes sf-hiasan-ayun {
  0% { transform: translateY(-43px) rotate(-5deg); }
  45% { transform: translateY(0) rotate(3deg); }
  70% { transform: rotate(-1.4deg); }
  88% { transform: rotate(0.5deg); }
  100% { transform: none; }
}

/* ---------- Penanda pengembang mengambang dan Entry Modal (KP-136, KP-144) ----------
   Kartu mengambang: kaca gelap sekeluarga dengan kartu hero, di pojok kanan bawah layar, di atas isi halaman tetapi di
   bawah panel menu, kabar, dan kotak dialog. pengembang.js memunculkannya dengan meluncur naik dari tepi bawah dan
   mengingat bila sudah ditutup. Foto kecil menggantikannya bila super admin memilih mengecil sesudah ditutup.
   Entry Modal: kotak dialog situs di tengah layar, pengganti pita sejak KP-144; gayanya di bawah kartu mengambang. */
.pengembang-mengambang {
  position: fixed;
  right: max(var(--space-5), env(safe-area-inset-right));
  bottom: max(var(--space-5), env(safe-area-inset-bottom));
  z-index: calc(var(--z-sticky) + 50);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: min(24.5rem, calc(100vw - 2 * var(--space-5)));
  padding: var(--space-4);
  border: var(--border-thin) solid var(--glass-border-dark);
  border-radius: var(--radius-xl);
  /* Hampir pekat, bukan kaca gelap hero (--glass-dark 55 persen): kartu ini juga mengambang di atas section terang,
     dan di sana kaca tipis memudar keabuan sehingga teks putihnya kurang terbaca. Karena hampir pekat, kartu tidak
     memakai blur latar, yang hanya memperberat bingkai pertama saat kartu mulai meluncur. */
  background: linear-gradient(160deg, rgba(1, 42, 106, 0.95) 0%, rgba(11, 63, 143, 0.93) 100%);
  box-shadow: var(--glass-highlight-dark), var(--shadow-glass-lg);
  color: var(--color-text-inverse);
}

.pengembang-mengambang-tautan {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}

.pengembang-mengambang-tautan:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Foto persegi bersudut lembut dari kepala sampai bahu, seperti kartu hero (DEC-182). */
.pengembang-mengambang-foto, .pengembang-mini {
  display: block;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #ffffff 0%, #e4ecfa 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
}

.pengembang-mengambang-foto { width: 4.25rem; height: 4.25rem; }
.pengembang-mengambang-foto img, .pengembang-mini img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.pengembang-mengambang-foto .profil-foto-kosong, .pengembang-mini .profil-foto-kosong { display: grid; place-items: center; height: 100%; color: var(--color-primary-text); }

.pengembang-mengambang-isi { display: grid; gap: 0.15rem; min-width: 0; }
.pengembang-mengambang-label { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--amber-300); }
.pengembang-mengambang-nama { font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: #fff; text-wrap: balance; }
.pengembang-mengambang-jabatan { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--color-text-inverse-muted); text-wrap: pretty; }
.pengembang-mengambang-lanjut { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--amber-300); }
.pengembang-mengambang-lanjut .icon { width: 0.95rem; height: 0.95rem; transition: transform var(--dur-fast) var(--ease-out); }

@media (hover: hover) {
  .pengembang-mengambang-tautan:hover .pengembang-mengambang-lanjut { color: #fff; }
  .pengembang-mengambang-tautan:hover .icon { transform: translateX(3px); }
}

.pengembang-tutup {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-1)) 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: var(--transition-colors);
  touch-action: manipulation;
}

.pengembang-tutup .icon { width: 1.1rem; height: 1.1rem; }
.pengembang-tutup:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@media (hover: hover) { .pengembang-tutup:hover { background-color: rgba(255, 255, 255, 0.22); } }
@media (pointer: coarse) { .pengembang-tutup { width: 2.75rem; height: 2.75rem; } }

/* Foto kecil pengganti kartu yang ditutup: tombol persegi di pojok yang sama, membuka kartu lagi bila diketuk. */
.pengembang-mini {
  position: fixed;
  right: max(var(--space-5), env(safe-area-inset-right));
  bottom: max(var(--space-5), env(safe-area-inset-bottom));
  z-index: calc(var(--z-sticky) + 50);
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), var(--shadow-glass-lg);
  touch-action: manipulation;
}

.pengembang-mini:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), var(--shadow-focus); }

/* Ponsel: kartu menjadi pita ringkas selebar layar di tepi bawah. Jabatan satu baris, tulisan tautan diganti panah. */
@media (max-width: 47.99rem) {
  .pengembang-mengambang {
    right: max(var(--space-3), env(safe-area-inset-right));
    bottom: max(var(--space-3), env(safe-area-inset-bottom));
    width: calc(100vw - 2 * max(var(--space-3), env(safe-area-inset-right)));
    align-items: center;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }
  .pengembang-mengambang-tautan { gap: var(--space-3); }
  .pengembang-mengambang-foto { width: 3.25rem; height: 3.25rem; border-radius: var(--radius-sm); }
  .pengembang-mengambang-nama { font-size: var(--fs-sm); }
  .pengembang-mengambang-jabatan { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pengembang-mengambang-lanjut { display: none; }
  .pengembang-mengambang .pengembang-tutup { margin: 0; }
  .pengembang-mini { right: max(var(--space-3), env(safe-area-inset-right)); bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
}

/* Entry Modal (KP-144): foto persegi kepala sampai bahu di kiri seperti kartu lain (DEC-182), label kecil, nama, jabatan,
   dan ringkasan di kanan, lalu Lihat profil lengkap dan Tutup. Lebar dan warnanya mengikuti kotak dialog situs, jadi
   ikut tema terang dan gelap. Tombol silang tidak menimpa teks. */
.pengembang-modal { width: min(100% - var(--space-8), 42rem); }

.pengembang-modal .modal-kotak {
  grid-template-columns: 12rem minmax(0, 1fr);
  grid-template-areas: "foto isi" "foto aksi";
  align-items: center;
  justify-items: start;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-6);
  text-align: start;
}

.pengembang-modal-foto {
  grid-area: foto;
  align-self: stretch;
  width: 100%;
  min-height: 12rem;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #ffffff 0%, #e4ecfa 100%);
}

.pengembang-modal-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.pengembang-modal-foto .profil-foto-kosong { display: grid; place-items: center; height: 100%; color: var(--color-primary-text); }

.pengembang-modal-isi { grid-area: isi; display: grid; gap: var(--space-2); min-width: 0; padding-right: var(--space-6); }
.pengembang-modal-isi .modal-title { text-wrap: balance; }
.pengembang-modal-jabatan { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--color-text-secondary); }
.pengembang-modal-ringkas { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--color-text-muted); text-wrap: pretty; }
.pengembang-modal .modal-aksi { grid-area: aksi; justify-content: flex-start; margin-top: 0; }

/* Ponsel: foto di atas, teks dan tombol rata tengah, tombol selebar kotak. */
@media (max-width: 47.99rem) {
  .pengembang-modal .modal-kotak {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "foto" "isi" "aksi";
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5) var(--space-5);
    text-align: center;
  }
  .pengembang-modal-foto { align-self: auto; width: 8.5rem; height: 8.5rem; min-height: 0; }
  .pengembang-modal-isi { justify-items: center; padding-right: 0; }
  .pengembang-modal .modal-aksi { justify-content: center; width: 100%; }
  .pengembang-modal .modal-aksi .btn { flex: 1 1 100%; }
}

@media print { .pengembang-mengambang, .pengembang-mini, .pengembang-modal { display: none !important; } }

/* ---------- Pengumuman situs (KP-179) ----------
   Kotak dialog situs (lebar, rata kiri seperti kotak Masuk) berisi satu sampai tiga pengumuman, yang terbaru di atas,
   dipisah garis tipis. Pengumuman yang sudah tampil disembunyikan saat kotak muncul sendiri, jadi garis pemisah hanya
   di antara butir yang terlihat. Lonceng di bilah atas sepola tombol tema (components.css). Di bawah 36rem bilah atas
   tidak cukup lebar untuk lonceng (sisa ruangnya ±30 px pada 360 px), jadi yang tampil baris Pengumuman di awal panel
   menu dan titik di tombol menu; kotaknya tumbuh dari tombol menu (pengumuman-situs.js). */
.pengumuman-situs-modal { width: min(100% - var(--space-8), 40rem); }
.pengumuman-situs-daftar { display: grid; }
.pengumuman-situs-butir { display: grid; gap: var(--space-2); justify-items: start; }
.pengumuman-situs-butir:not([hidden]) ~ .pengumuman-situs-butir:not([hidden]) {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-thin) solid var(--color-border);
}
.pengumuman-situs-jenis {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.pengumuman-situs-judul {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
  text-wrap: balance;
}
.pengumuman-situs-jadwal {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-warning-soft);
  color: var(--color-warning-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.pengumuman-situs-jadwal .icon { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: 0.15em; }
.pengumuman-situs-jadwal > span { display: grid; gap: 0.15rem; min-width: 0; }
.pengumuman-situs-jadwal-utama { font-weight: var(--fw-semibold); }
.pengumuman-situs-teks {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  white-space: pre-line;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.pengumuman-situs-aksi { margin-top: var(--space-1); }

/* Lonceng: ikon di atas cahaya lembut kaca. Di layar lebar lonceng berjarak 20 px dari Masuk seperti irama DEC-078, dan
   lonceng serta tombol tema menjadi satu kelompok ikon berjarak 12 px. */
.tombol-lonceng .icon { position: relative; width: 1.25rem; height: 1.25rem; }
@media (min-width: 62rem) {
  .navbar-publik .navbar-actions > .tombol-lonceng { margin-left: var(--space-2); }
  .navbar-berlonceng .navbar-actions > .tombol-tema { margin-left: 0; }
}
/* Menu di bilah berlonceng tetap satu baris (KP-166): lonceng dan celahnya memakan ±64 px, jadi jarak dalam dan celah menu
   dirapatkan satu tahap lagi di setiap rentang. Di 62 sampai 68,75rem panah tombol Masuk juga disembunyikan seperti di
   ponsel, dan lonceng mendekat ke Masuk. Diukur di Chrome: tanpa tautan terlipat dari 992 sampai 1920 piksel dengan huruf
   16, 20, dan 24 piksel, dengan sisa ruang paling sedikit 11 piksel. */
@media (min-width: 80rem) {
  .navbar-berlonceng .navbar-menu { gap: 0.125rem; }
  .navbar-berlonceng .navbar-link { padding-inline: 0.75rem; }
}
@media (min-width: 68.75rem) and (max-width: 79.99rem) {
  .navbar-berlonceng .navbar-menu { gap: 0.125rem; }
  .navbar-berlonceng .navbar-link { padding-inline: 0.3rem; }
}
@media (min-width: 62rem) and (max-width: 68.74rem) {
  .navbar-berlonceng .navbar-actions > .tombol-lonceng { margin-left: 0; }
  .navbar-berlonceng .navbar-actions .btn .icon { display: none; }
  .navbar-berlonceng .navbar-menu { gap: 0; }
  .navbar-berlonceng .navbar-link { padding-inline: 0.3rem; }
}

/* Baris di panel menu dan titik di tombol menu: hanya di bawah 36rem, saat lonceng tidak ada di bilah atas. Barisnya
   memakai aturan baris Mode gelap di panel yang sama (components.css, 21. TOMBOL TEMA). KP-181: titik hanya menyala
   selama ada pengumuman yang belum dibuka di perangkat ini; pengumuman-situs.js memasang is-pengumuman-baru pada tombol
   menu, dan titiknya tumbuh dari tengahnya sendiri. */
.navbar-pengumuman-baris { display: none; }
.navbar-publik .navbar-toggle { position: relative; }
.navbar-toggle-titik { display: none; }
@media (max-width: 35.99rem) {
  .navbar-publik .tombol-lonceng { display: none; }
  .navbar-pengumuman-baris { display: block; }
  .navbar-toggle-titik {
    display: block;
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: var(--radius-circle);
    background-color: var(--color-secondary);
    box-shadow: 0 0 0 2px var(--color-surface);
    transform: scale(0);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .navbar-toggle.is-pengumuman-baru .navbar-toggle-titik { transform: scale(1); }
  .navbar-toggle[aria-expanded="true"] .navbar-toggle-titik { display: none; }
}

/* KP-184: mulai 36rem titik yang sama ada di lonceng dan menyala bersama titik tombol menu. Letaknya di dalam lingkaran
   lonceng, karena lonceng memotong yang keluar dari lingkarannya demi cahaya kacanya; titik dan cincinnya tetap 2 px di
   dalam tepi. Di panel menu ponsel, baris Pengumuman membawa tanda Baru selama titiknya menyala. Tanda itu mengikuti
   kata Pengumuman dan turun ke bawahnya bila barisnya tidak cukup lebar, misalnya di ponsel 320 piksel berhuruf besar;
   katanya sendiri berpemenggal lunak (Pengu-muman), karena baris memotong yang meluap. */
.tombol-lonceng-titik {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-secondary);
  box-shadow: 0 0 0 2px var(--color-surface);
  transform: scale(0);
  transition: transform var(--dur-base) var(--ease-out);
}
.tombol-lonceng.is-pengumuman-baru .tombol-lonceng-titik { transform: scale(1); }
.tombol-pengumuman-teks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; text-align: start; }
/* Ikon baris di atas cahaya kacanya, seperti ikon lonceng dan ikon baris Mode gelap. */
.tombol-pengumuman-baris .icon { position: relative; }
.tombol-pengumuman-baru { display: none; }
.tombol-pengumuman-baris.is-pengumuman-baru .tombol-pengumuman-baru { display: inline-flex; }

@media print { .pengumuman-situs-modal, .tombol-lonceng, .navbar-pengumuman-baris, .navbar-toggle-titik { display: none !important; } }

/* ---------- Section satu lembar (DEC-068/069): padat, proporsional, latar ambien hidup ---------- */

.section-landing { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); scroll-margin-top: var(--sticky-offset); }
.section-landing > .container { position: relative; z-index: 1; }
/* Jaringan partikel (DEC-071): kanvas per section, digambar partikel.js; tanpa tekstur lain agar fokus */
.latar-hidup { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.latar-hidup .partikel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0.45; filter: blur(1.6px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0.35)); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0.35)); }
/* Latar section selang-seling tembus pandang agar cahaya ambien tetap terlihat di balik kaca */
.page-landing .section-alt { background-color: color-mix(in srgb, var(--color-bg-subtle) 55%, transparent); }
.section-head-ringkas { margin-bottom: var(--space-6); }
.section-head-ringkas p { font-size: var(--fs-base); }
.section-head-eyebrow { margin-bottom: var(--space-4); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Cara kerja: empat kartu tahap sebaris */
.proses-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .proses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .proses-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } }
.proses-kartu { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border-radius: var(--radius-lg); border-top: 3px solid var(--tahap-warna, var(--color-primary)); }
.proses-kartu[data-tahap="1"] { --tahap-warna: var(--tahap-1); } .proses-kartu[data-tahap="2"] { --tahap-warna: var(--tahap-2); }
.proses-kartu[data-tahap="3"] { --tahap-warna: var(--tahap-3); } .proses-kartu[data-tahap="4"] { --tahap-warna: var(--tahap-4); }
.proses-nomor { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-circle); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-base); color: #fff; background: var(--tahap-warna, var(--color-primary)); margin-bottom: var(--space-1); }
.proses-kartu h3 { font-size: var(--fs-lg); margin: 0; line-height: var(--lh-snug); }
.proses-kartu p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.proses-bentuk { justify-self: start; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-muted); padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); background: var(--color-bg-muted); margin-top: var(--space-1); }

/* Bantuan yang berkurang: tiga kartu kaca sebaris dengan meter */
.fading-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .fading-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.fading-kartu { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border-radius: var(--radius-lg); }
.fading-kartu h3 { font-size: var(--fs-xl); margin: 0; }
.fading-meter { display: flex; gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); }
.fading-bar { width: 2.25rem; height: 0.45rem; border-radius: var(--radius-pill); background: var(--color-bg-muted); }
.fading-bar.is-isi { background: var(--gradient-biru); }
.fading-kartu p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }

/* Tentang: isi paket + yang dijaga (kartu kaca), dua kolom seimbang */
.tentang-dua { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 62rem) { .tentang-dua { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-12); } }
.tentang-dua h2 { font-size: var(--fs-2xl); margin: 0; }
.tentang-dua .text-lead { margin: 0; }
.tentang-dua .stack > p { margin: 0; color: var(--color-text-secondary); line-height: var(--lh-relaxed); }
.jaga { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.jaga li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); }
.jaga h3 { font-size: var(--fs-base); margin: 0 0 0.15rem; }
.jaga p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }

/* Pengembang (DEC-073): panel kiri berisi foto penuh (tanpa bingkai dalam, tanpa pita), isi di kanan */
.profil-kartu { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 68rem; margin-inline: auto; border-radius: var(--radius-2xl); overflow: hidden; padding: 0; }
@media (min-width: 48rem) { .profil-kartu { grid-template-columns: 19rem minmax(0, 1fr); } }
@media (min-width: 62rem) { .profil-kartu { grid-template-columns: 22rem minmax(0, 1fr); } }
.profil-kartu-panel { position: relative; margin: 0; display: grid; place-items: center; background: var(--gradient-biru); overflow: hidden; aspect-ratio: 1 / 1; }
@media (min-width: 48rem) { .profil-kartu-panel { aspect-ratio: auto; height: 100%; min-height: 24rem; } }
.profil-kartu-panel img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.profil-foto-kosong { display: grid; place-items: center; width: 100%; height: 100%; font-size: 3.5rem; color: var(--color-text-inverse); }
.profil-kartu-isi { display: grid; gap: var(--space-5); align-content: center; min-width: 0; padding: clamp(var(--space-6), 4vw, var(--space-10)); }
.profil-kartu-isi h2 { font-size: clamp(var(--fs-2xl), 3vw, var(--fs-4xl)); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; }
.profil-ringkas { margin: 0; max-width: 40rem; font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--color-text-secondary); }
.profil-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .profil-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.profil-meta li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--glass-card); border: var(--border-thin) solid var(--color-border); }
.profil-meta li div { display: grid; gap: 0.1rem; min-width: 0; }
.profil-meta small { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-muted); }
.profil-meta span { font-size: var(--fs-sm); color: var(--color-text); overflow-wrap: anywhere; }
.profil-chip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 47.99rem) { .profil-kartu-isi { text-align: center; justify-items: center; } .profil-chip { justify-content: center; } .profil-meta li { text-align: left; } }

/* Modal Cara pakai (DEC-068) */
.cara-tahap { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 36rem) { .cara-tahap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cara-tahap li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-alt); }
.cara-nomor { width: 2rem; height: 2rem; border-radius: var(--radius-circle); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-sm); }
.cara-tahap b { display: block; font-family: var(--font-display); font-weight: var(--fw-bold); }
.cara-tahap p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.cara-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cara-tips li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.cara-tips .icon { flex: 0 0 auto; color: var(--color-petunjuk); margin-top: 0.2em; }

/* Footer tiga kolom + baris versi */
.footer-grid { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-8); border-bottom: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: var(--space-5); }
@media (min-width: 48rem) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); }
  .footer-grid-dua { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr); }
}
/* KP-175 (TS-9): di 48–63.99rem kolom tengah susunan tiga kolom terlalu sempit untuk tiga lajur tautan Jelajahi
   (DEC-175), sehingga tautan seperti Pengembang melewati lajurnya. Merek naik ke baris sendiri, lalu Jelajahi dan
   Paket konten berbagi baris di bawahnya. Mulai 64rem susunan tiga kolom tetap seperti sebelumnya. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .footer-grid:not(.footer-grid-dua) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .footer-grid:not(.footer-grid-dua) > .footer-brand { grid-column: 1 / -1; }
}
.footer-brand .brand { --h: 2rem; }
.footer-brand p { margin: var(--space-4) 0 0; max-width: 28rem; line-height: var(--lh-relaxed); }
.footer-kolom h2 { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-inverse); margin: 0 0 var(--space-3); }
/* DEC-174: jarak tautan dirapatkan supaya tinggi kolom navigasi tidak jauh melebihi dua kolom lainnya. */
.footer-kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.footer-kolom li { line-height: var(--lh-normal); }
.footer-kolom a { display: inline-block; min-height: 1.75rem; line-height: 1.75rem; }
/* DEC-175, diperluas ke ponsel pada KP-113: tautan navigasi mengalir ke bawah dahulu lalu ke kanan, paling
   banyak tiga baris, di semua lebar layar. Tinggi kolomnya jadi setara kolom lain dan sisi kanan tidak kosong.
   Daftar berisi tiga tautan atau kurang tetap satu lajur dengan sendirinya. */
.footer-kolom-nav ul { grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--space-4); }
.footer .versi { color: var(--color-text-inverse-muted); }
/* KP-138: pemberitahuan pencatatan kunjungan di antara hak cipta dan versi; di layar sempit turun ke baris sendiri. */
.footer-privasi { flex: 1 1 18rem; max-width: 34rem; margin-inline: auto; text-align: center; line-height: var(--lh-normal); text-wrap: balance; }
@media (max-width: 47.99rem) {
  .footer-privasi { order: 3; flex-basis: 100%; max-width: none; margin: 0; text-align: left; }
}

/* Layar sentuh (Chromebook touchscreen, tablet): target lebih besar, tanpa efek hover yang menjebak */
@media (pointer: coarse) {
  .btn, .toolbar-tombol, .petunjuk-trigger, .navbar-link, .modal-tutup, .input-group-aksi { min-height: 3rem; }
  .btn-sm { min-height: 2.75rem; }
  .kotak-input { min-height: 2.75rem; font-size: var(--fs-lg); }
  .input, .textarea { min-height: 3rem; font-size: var(--fs-base); }
  .stepper-tautan { min-height: 3rem; }
  .control-card { padding-block: var(--space-4); }
  .kartu-aktivitas-bagian li { padding-block: var(--space-3); }
}
.btn, .toolbar-tombol, .stepper-tautan, .chip, .control, .navbar-link, .card-interactive, .modal-tutup { touch-action: manipulation; }

/* Lembar jawaban: pita warna dan tata letak lebih tegas */
.lembar-pita { height: 6px; border-radius: var(--radius-pill); background: linear-gradient(90deg, #012A6A, #1556B8 45%, #E2930C); margin: 0 0 14px; }
.lembar-kepala { border-bottom: 0; padding-bottom: 6px; margin-bottom: 4px; }
.lembar-meta { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-left: 4px solid #012A6A; }
.lembar h2 { padding-top: 6px; border-top: 2px solid #012A6A; margin-top: 12px; }
.lembar-tahap { padding-left: 12px; border-left: 3px solid #D9E7FA; }
.lembar-butir-isi { line-height: 1.55; }
@media print { .lembar-pita, .lembar-meta, .lembar-tahap { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- Kabar status modal Masuk (DEC-081) ----------------
   Pil kaca di bagian atas layar, anak dari <dialog> sehingga berada di lapisan
   teratas bersama modal (tidak diredupkan latar dan tetap bisa dibaca). Tidak
   memengaruhi ukuran kotak modal. Muncul, bertahan 5 detik, lalu memudar.
   Hanya menyertai pembukaan pertama kotak: ui.js membuangnya sesudah memudar
   atau saat kotak ditutup, jadi kotak yang dibuka lagi tidak memutarnya ulang.
   Nama animasi sf-kabar-hilang ditunggu ui.js. */
.modal-kabar {
  position: fixed;
  top: max(var(--space-3), env(safe-area-inset-top));
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  max-width: calc(100vw - var(--space-8));
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--border-thin) solid var(--color-border);
  background-color: var(--glass-card-hover);
  box-shadow: var(--glass-highlight), var(--shadow-glass-md);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  transform: translateX(-50%);
  pointer-events: none;
  animation: sf-kabar-muncul var(--dur-slow) var(--ease-decelerate) both,
             sf-kabar-hilang var(--dur-slower) var(--ease-in) 5s forwards;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .modal-kabar {
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    border-color: var(--glass-border);
  }
}

.modal-kabar strong { color: var(--color-text); font-weight: var(--fw-bold); }

.modal-kabar-ikon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-circle);
}

.modal-kabar-success .modal-kabar-ikon { background: var(--color-success-soft); color: var(--color-success-text); }
.modal-kabar-info .modal-kabar-ikon { background: var(--color-info-soft); color: var(--color-info-text); }

@keyframes sf-kabar-muncul {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes sf-kabar-hilang {
  to { opacity: 0; transform: translate(-50%, -8px); visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-kabar { animation: sf-kabar-hilang 1ms linear 6s forwards; }
}

/* ---------- Mode demo (DEC-170) -----------------------------------
   Bilah tetap di puncak halaman demo (sisi siswa maupun dashboard guru) dan dua pil di bawah kotak Masuk.
   Bilah ikut menggeser isi halaman, bukan menutupinya, supaya bilah atas dashboard tetap terbaca. */

.demo-bilah {
  position: relative;
  z-index: calc(var(--z-sticky, 20) + 2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--container-gutter);
  border-bottom: var(--border-thin) solid var(--color-warning-border, var(--color-border));
  background-color: var(--color-warning-soft, var(--color-surface-alt));
  color: var(--color-warning-text, var(--color-text));
  font-size: var(--fs-sm);
}

.demo-bilah-tanda { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); white-space: nowrap; }
.demo-bilah-tanda .icon { width: 1.05rem; height: 1.05rem; }
.demo-bilah-teks { flex: 1 1 18rem; min-width: 0; }
.demo-bilah-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.demo-bilah-aksi form { display: contents; }

.demo-bilah-tombol {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-sm);
  padding: 0 0.75rem;
  border: var(--border-thin) solid var(--color-warning-border, var(--color-border));
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: var(--transition-colors);
  touch-action: manipulation;
}

.demo-bilah-tombol .icon { width: 0.9rem; height: 0.9rem; }
.demo-bilah-tombol-utama { background-color: var(--color-surface); }
.demo-bilah-tombol:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

@media (hover: hover) {
  .demo-bilah-tombol:hover { background-color: var(--color-surface); border-color: currentColor; }
}

@media (max-width: 47.99rem) {
  .demo-bilah { font-size: var(--fs-xs); }
  .demo-bilah-aksi { margin-inline-start: 0; }
}

@media print {
  .demo-bilah { display: none !important; }
}

/* Dua pil demo di bawah formulir masuk. */
.demo-pil-blok { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-border-subtle); text-align: center; }
.demo-pil-judul { margin: 0 0 var(--space-3); font-size: var(--fs-xs); color: var(--color-text-muted); }
.demo-pil-baris { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

.demo-pil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height-md);
  padding: 0 var(--space-3);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--glass-chrome-strong, var(--color-surface-alt));
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-out);
}

.demo-pil .icon { width: 1rem; height: 1rem; color: var(--color-primary); }
.demo-pil:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

@media (hover: hover) {
  .demo-pil:hover { border-color: var(--color-primary-border); background-color: var(--color-primary-softer); color: var(--color-primary-text); transform: translateY(-1px); }
}

@media (max-width: 29.99rem) {
  .demo-pil-baris { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- LAYAR HASIL SETIAP SOAL (revisi pasca-bimbingan; K-01 sampai K-07) ---------- */

.hasil-kepala .card-body { display: grid; gap: var(--space-4); }

.hasil-angka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

.hasil-total {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-display);
}

.hasil-total b {
  font-size: clamp(2.5rem, 9vw, 3.5rem);
  line-height: 1;
  color: var(--color-primary-text);
}

.hasil-total span { font-size: var(--fs-lg); color: var(--color-text-muted); }

.hasil-nilai {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-primary-border);
  background-color: var(--color-primary-softer);
}

.hasil-nilai-label { font-size: var(--fs-xs); color: var(--color-text-muted); }

.hasil-nilai b {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  color: var(--color-primary-text);
}

.hasil-kategori {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  background-color: var(--color-surface-alt);
  color: var(--color-text-secondary);
}

[data-kategori="sangat-baik"] .hasil-kategori,
[data-kategori="baik"] .hasil-kategori { background-color: var(--color-success-soft); color: var(--color-success-text); }
[data-kategori="cukup"] .hasil-kategori { background-color: var(--color-info-soft); color: var(--color-info-text); }
[data-kategori="kurang"] .hasil-kategori,
[data-kategori="sangat-kurang"] .hasil-kategori { background-color: var(--color-warning-soft); color: var(--color-warning-text); }

.hasil-pesan { margin: 0; line-height: var(--lh-relaxed); color: var(--color-text-secondary); }

ol.hasil-tahap-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.hasil-tahap {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.hasil-tahap-bilah {
  height: 10px;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-sunken);
  overflow: hidden;
}

.hasil-tahap-bilah > span {
  display: block;
  width: calc(var(--isi, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background-color: var(--color-primary);
}

.hasil-tahap[data-skor="0"] .hasil-tahap-bilah > span,
.hasil-tahap[data-skor="1"] .hasil-tahap-bilah > span,
.hasil-tahap[data-skor="2"] .hasil-tahap-bilah > span { background-color: var(--color-warning); }

.hasil-tahap-skor { font-family: var(--font-display); font-size: var(--fs-lg); white-space: nowrap; }

@media (max-width: 36rem) {
  .hasil-tahap { grid-template-columns: minmax(0, 1fr) auto; }
  .hasil-tahap-bilah { grid-column: 1 / -1; grid-row: 2; }
}

/* Aksi pelengkap layar skor dan hasil Uji Pemahaman di layar sempit diatur .aksi-akhir-lain (scafolya.css bagian 12,
   AUD-40): dua tombol berdampingan di bawah bilah aksi utama yang menempel. */

.hasil-lemah {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-warning-border);
  background-color: var(--color-warning-soft);
}

.hasil-lemah h3 { margin: 0 0 var(--space-2); font-size: var(--fs-base); color: var(--color-warning-text); }
.hasil-lemah ul { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-2); color: var(--color-text-secondary); }

ul.hasil-butir-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.hasil-butir-daftar li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.hasil-butir-daftar p { margin: 0; line-height: var(--lh-relaxed); color: var(--color-text-secondary); }
.hasil-butir-daftar .hasil-butir-tanya { margin-bottom: var(--space-1); font-weight: var(--fw-semibold); color: var(--color-text); }

.hasil-butir-nomor {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-primary-softer);
  color: var(--color-primary-text);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}

.hasil-pengarah .hasil-butir-nomor { background-color: var(--color-petunjuk-soft); color: var(--color-petunjuk-text); }

/* Ringkasan skor sementara di pengantar dan ringkasan (K-03). */
.skor-ringkas {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-thin) solid var(--color-primary-border);
  background-color: var(--color-primary-softer);
  color: var(--color-primary-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* Formulir pemulai soal di dalam deretan tombol: tombolnya ikut tertata seperti tombol lain. */
.form-sebaris { display: contents; }

/* Menu Uji Pemahaman di beranda: abu-abu sampai ketiga aktivitas selesai (dokumen Uji Pemahaman bagian B).
   DEC-193: bersampul seperti kartu aktivitas. Kolomnya memakai rumus .beranda-daftar, sehingga sampul selebar satu
   kartu aktivitas dan tepi kanannya segaris dengan tepi kanan kartu Aktivitas 1 di atasnya. Teks dan tombol mengisi
   kolom sisanya. Lencana sasaran menumpang tepi kanan sampul seperti nomor kartu aktivitas menumpang tepi bawahnya.
   Di layar sempit sampul menjadi pita di atas dan lencananya pindah ke tepi bawah, persis kartu aktivitas. */
.menu-uji {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  column-gap: var(--gap-grid);
  margin-top: var(--space-8);
  overflow: visible;
}

.menu-uji h2 { margin: var(--space-1) 0; font-size: var(--fs-xl); text-wrap: balance; }
.menu-uji[data-state="terkunci"] h2 { color: var(--color-text-muted); }
.menu-uji p { margin: 0; line-height: var(--lh-relaxed); }
.menu-uji[data-state="terkunci"] p { color: var(--color-text-muted); }
.menu-uji-alasan { font-weight: var(--fw-semibold); }

.menu-uji-sampul {
  position: relative;
  grid-column: 1;
  min-width: 0;
}

/* Tinggi terkecil sampul = rasio sampul kartu aktivitas. Bila teks di sebelahnya lebih tinggi, sampul ikut memanjang
   dan gambarnya tetap memenuhi bingkai (object-fit: cover dari .kartu-sampul-gambar). */
.menu-uji-sampul::before {
  content: "";
  display: block;
  aspect-ratio: var(--kartu-sampul-rasio);
}

.menu-uji .kartu-sampul-gambar {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: calc(var(--radius-lg) - var(--border-thin)) 0 0 calc(var(--radius-lg) - var(--border-thin));
}

/* Gembok di tengah bagian sampul yang tidak tertutup lencana. */
.menu-uji .kartu-sampul-kunci { padding: var(--space-3) calc(var(--kartu-nomor) / 2 + var(--space-2)) var(--space-3) var(--space-3); }

.menu-uji-lencana {
  position: absolute;
  top: 50%;
  right: calc(var(--kartu-nomor) / -2);
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--kartu-nomor);
  height: var(--kartu-nomor);
  margin-top: calc(var(--kartu-nomor) / -2);
  border-radius: var(--radius-md);
  background: var(--gradient-biru);
  box-shadow: 0 0 0 var(--space-1) var(--color-surface), var(--shadow-md);
  color: var(--color-on-primary);
  font-size: var(--fs-2xl);
}

.menu-uji[data-dikirim="true"] .menu-uji-lencana { background: var(--gradient-selesai); }

.menu-uji[data-state="terkunci"] .menu-uji-lencana {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.menu-uji[data-state="terkunci"] .kartu-sampul-gambar img {
  filter: grayscale(0.7) blur(1.5px);
  transform: scale(1.06);
}

.menu-uji[data-state="terkunci"] .kartu-sampul-gambar::after { background: var(--sampul-terkunci); }

/* Teks dan tombol berdampingan; bila kolomnya sempit, tombol turun ke bawah teks. Sisi kiri memberi ruang separuh
   lencana yang melewati tepi sampul. */
.menu-uji-badan {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: var(--space-4) var(--space-6);
  min-width: 0;
  padding: var(--space-5) var(--space-6) var(--space-5) calc(max(0px, var(--kartu-nomor) / 2 - var(--gap-grid)) + var(--space-4));
}

.menu-uji-teks { flex: 1 1 18rem; min-width: 0; }
.menu-uji-aksi { flex: 0 0 auto; max-width: 100%; }

@media (max-width: 39.99rem) {
  .menu-uji-sampul,
  .menu-uji-badan { grid-column: 1 / -1; }
  .menu-uji .kartu-sampul-gambar { border-radius: calc(var(--radius-lg) - var(--border-thin)) calc(var(--radius-lg) - var(--border-thin)) 0 0; }
  .menu-uji .kartu-sampul-kunci { padding: var(--space-3) var(--space-4) calc(var(--kartu-nomor) / 2 + var(--space-2)); }
  .menu-uji-lencana {
    top: auto;
    right: auto;
    bottom: calc(var(--kartu-nomor) / -2);
    left: var(--gap-card);
    margin-top: 0;
  }
  .menu-uji-badan { gap: var(--space-4); padding: var(--space-4) var(--gap-card) var(--gap-card); }
  /* Label kecil sejajar lencana, seperti eyebrow kartu aktivitas. */
  .menu-uji-teks .eyebrow {
    display: flex;
    min-height: calc(var(--kartu-nomor) / 2 - var(--space-1));
    margin-left: calc(var(--kartu-nomor) + var(--space-3));
  }
  .menu-uji-aksi { flex: 1 1 100%; }
  .menu-uji-aksi .btn { width: 100%; }
}

/* Skor otomatis pada lembar cetak (K-35). */
.lembar-skor { margin: 8px 0 12px; break-inside: avoid; page-break-inside: avoid; }
.lembar-skor table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 9.5pt; }
.lembar-skor td { border: 1px solid #B5BCC6; padding: 5px 8px; vertical-align: top; overflow-wrap: anywhere; }

/* ---------- UJI PEMAHAMAN (dokumen Uji Pemahaman 3.1; K-18 sampai K-23) ---------- */

/* Naskah soal dalam kotak berlatar kuning (dokumen Uji Pemahaman bagian C). */
.uji-naskah .kartu-soal-teks {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-petunjuk-border);
  background-color: var(--color-petunjuk-soft);
  color: var(--color-text);
}

.uji-soal + .uji-soal { padding-top: var(--space-6); border-top: var(--border-thin) solid var(--color-border-subtle); }

/* Revisi validasi (D-8, KS-30): layar pertama menjadi halaman judul "Uji Pemahaman" sebelum identitas, dan layar soal
   memperlihatkan judulnya di bawah bilah. Judul ketiga soal tersusun tiga kolom mulai 40rem, satu kolom di ponsel. */
.section-head.uji-judul-kepala { margin: var(--space-4) 0 var(--space-8); }
.uji-judul-sub { margin: 0 0 var(--space-3); font-size: var(--fs-lg); }
ol.uji-judul-daftar { display: grid; gap: var(--space-3); margin: 0; }
@media (min-width: 40rem) {
  ol.uji-judul-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.uji-judul-soal > .card-body { padding: var(--space-4); }
.uji-judul-soal .card-title { font-size: var(--fs-base); text-wrap: balance; }
.uji-identitas-kartu .card-text { margin: 0; color: var(--color-text-muted); }
.uji-kepala { display: grid; gap: var(--space-2); }
.uji-kepala h1 { margin: 0; font-size: var(--fs-3xl); }
.uji-kepala p { margin: 0; max-width: var(--measure); color: var(--color-text-muted); }
/* V-10: soal terakhir menerima fokus saat halaman dibuka lagi (titik mulai Tab), tanpa cincin fokus di seluruh soal. */
.uji-soal[tabindex="-1"]:focus { outline: none; }

dl.uji-identitas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.uji-identitas div { display: grid; gap: var(--space-1); }
.uji-identitas dt { font-size: var(--fs-xs); color: var(--color-text-muted); }
.uji-identitas dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); }

ol.uji-petunjuk {
  margin: 0;
  padding-left: 1.5rem;
  /* AUD-38: reset ol[class] di base.css membuang nomor; petunjuk ini bernomor 1 sampai 5 (00 bagian 10.4). */
  list-style: decimal;
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.uji-tabel-skor { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.uji-tabel-skor th, .uji-tabel-skor td { padding: var(--space-2) var(--space-3); border-bottom: var(--border-thin) solid var(--color-border-subtle); text-align: center; white-space: nowrap; }
.uji-tabel-skor thead th { font-family: var(--font-display); color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.uji-tabel-skor tbody th { text-align: left; font-weight: var(--fw-semibold); color: var(--color-text); }
.uji-tabel-skor td[data-skor="0"], .uji-tabel-skor td[data-skor="1"], .uji-tabel-skor td[data-skor="2"] { color: var(--color-warning-text); font-weight: var(--fw-bold); }

.uji-ajakan { margin: 0; color: var(--color-text-secondary); }
.uji-contoh-tahap { display: grid; gap: var(--space-2); }
.uji-contoh-tahap + .uji-contoh-tahap { padding-top: var(--space-3); border-top: var(--border-thin) solid var(--color-border-subtle); }
.uji-contoh-isi p { margin: 0 0 var(--space-1); line-height: var(--lh-relaxed); color: var(--color-text-secondary); }
.uji-jawaban-cetak { display: grid; gap: var(--space-2); }
.uji-jawaban-cetak h3 { margin: 0; font-size: var(--fs-base); }

ul.uji-riwayat-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.uji-riwayat-daftar li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-border-subtle);
}

.uji-riwayat-daftar li[aria-current="true"] { border-color: var(--color-primary-border); background-color: var(--color-primary-softer); }
.uji-riwayat-daftar a { font-weight: var(--fw-semibold); }

/* Layar hasil Uji Pemahaman dicetak per percobaan (K-35). */
@media print {
  .page-uji-hasil .bilah-kembali, .page-uji-hasil .aksi-akhir, .page-uji-hasil .aksi-akhir-grup, .page-uji-hasil .aksi-akhir-lain, .page-uji-hasil .uji-riwayat, .page-uji-hasil .navbar, .page-uji-hasil .footer { display: none !important; }
  .page-uji-hasil .card { box-shadow: none; break-inside: avoid; }
  /* AUD-39: kartu contoh penyelesaian boleh terpotong antarhalaman di batas tahap, supaya tidak menyisakan halaman kosong. */
  .page-uji-hasil .card.uji-contoh { break-inside: auto; }
  .page-uji-hasil .uji-contoh-tahap { break-inside: avoid; }
  .page-uji-hasil h2, .page-uji-hasil .uji-contoh .card-title { break-after: avoid; page-break-after: avoid; }
  .page-uji-hasil .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- MODE PERAWATAN (KP-146) ------------------------------ */

/* Halaman untuk siswa dan pengunjung: satu kartu tepat di tengah layar, tombol tema di pojok. */
.page-perawatan .halaman { position: relative; min-height: 100vh; min-height: 100dvh; }
.perawatan-bilah {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: var(--space-4) var(--container-gutter);
  pointer-events: none;
}
.perawatan-bilah > * { pointer-events: auto; }
/* Seperti halaman masuk guru (KP-127): kartu diapit dua pengganjal lentur yang sama tinggi, jadi tepat di tengah bila
   ruangnya cukup. Pengganjal atas tidak lebih pendek dari bilah tombol tema, dan di layar laptop setinggi 580 px kartu
   tetap utuh tanpa digulir. */
.perawatan-utama {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 var(--container-gutter);
}
.perawatan-utama::before,
.perawatan-utama::after { content: ""; flex: 1 1 0; }
.perawatan-utama::before { min-height: calc(var(--space-4) * 2 + var(--control-height-md)); }
.perawatan-utama::after { min-height: var(--space-6); }
.perawatan-panel { display: grid; justify-items: center; width: 100%; }
.perawatan-kartu { width: min(100%, 32rem); text-align: center; }
.perawatan-kartu .card-body { gap: var(--space-5); padding: clamp(var(--space-6), 5vw, var(--space-10)); justify-items: center; }
.perawatan-merek .brand { --h: 2.5rem; }
.perawatan-ikon { margin-inline: auto; }
.perawatan-judul { font-size: var(--fs-2xl); line-height: 1.2; text-wrap: balance; }
.perawatan-pesan { margin: 0; color: var(--color-text-secondary); text-wrap: pretty; }
.perawatan-aksi { justify-content: center; }
.perawatan-kaki { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Pita kecil untuk perangkat staf yang melihat situs siswa selama mode perawatan. */
.perawatan-pita {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* KP-162: selebar paling banyak 30rem supaya tidak menyentuh kartu pengembang mengambang di kanan bawah. */
  max-width: min(30rem, calc(100vw - var(--space-8)));
  padding: var(--space-2) var(--space-4);
  border: var(--border-thin) solid var(--color-warning-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-warning-soft);
  color: var(--color-warning-text);
  font-size: var(--fs-xs);
  box-shadow: var(--shadow-md);
}
.perawatan-pita .icon { flex: none; width: 1.1rem; height: 1.1rem; }
/* KP-162: Akhiri tampilan staf langsung dari pita. */
.perawatan-pita form { display: contents; }
.perawatan-pita-tombol {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.perawatan-pita-tombol:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.perawatan-pita-ringkas { display: none; }
/* Layar yang tidak cukup lebar untuk pita dan kartu pengembang mengambang berdampingan: pita pindah ke bawah bilah
   navigasi, selebar layar, dengan kalimat ringkas. */
@media (max-width: 57.99rem) {
  .perawatan-pita {
    top: calc(var(--navbar-height-sm) + var(--space-2));
    right: var(--space-3);
    bottom: auto;
    left: var(--space-3);
    max-width: none;
  }
  .perawatan-pita > span { flex: 1 1 auto; min-width: 0; }
  .perawatan-pita-rinci { display: none; }
  .perawatan-pita-ringkas { display: inline; }
}
@media (min-width: 48rem) and (max-width: 57.99rem) {
  .perawatan-pita { top: calc(var(--navbar-height) + var(--space-2)); }
}

@media print {
  .perawatan-pita { display: none !important; }
}

/* ---------- PENDAFTARAN GURU (KP-160): section Untuk guru, formulir, nomor tiket, dan Cek pendaftaran ---------- */

/* Section Untuk guru di halaman depan: ajakan di kiri, tiga langkah berkartu kaca di kanan (sepola daftar Tentang). */
.untuk-guru-dua { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 62rem) { .untuk-guru-dua { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-12); } }
.untuk-guru-isi h2 { font-size: var(--fs-2xl); margin: 0; text-wrap: balance; }
.untuk-guru-isi .text-lead { margin: 0; }
.untuk-guru-aksi { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.untuk-guru-tutup { margin-top: var(--space-2); }
.untuk-guru-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.untuk-guru-langkah { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); }
.untuk-guru-nomor { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-circle); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-sm); color: #fff; background: var(--gradient-biru); box-shadow: var(--shadow-sm); }
.untuk-guru-langkah h3 { font-size: var(--fs-base); margin: 0 0 0.15rem; }
.untuk-guru-langkah p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }
@media (max-width: 35.99rem) { .untuk-guru-aksi .btn { flex: 1 1 100%; } }

/* Halaman pendaftaran memakai kerangka halaman masuk guru. Formulir dan langkah periksa yang panjang memakai satu kartu
   lebar tanpa panel samping, sehingga halaman digulir biasa; halaman pendek tetap dua kolom seperti halaman masuk. */
/* Pemilihnya dua kelas supaya mengalahkan .guru-masuk-panel di guru.css yang dimuat sesudah berkas ini. */
.guru-masuk-panel.daftar-panel-tunggal { width: min(100%, 44rem); }
@media (min-width: 75rem) {
  .guru-masuk-panel.daftar-panel-tunggal { grid-template-columns: minmax(0, 1fr); width: min(100%, 46rem); }
}
.daftar-kartu .card-body > .icon-tile { justify-self: start; }
/* Pemadatan halaman masuk guru di layar pendek menyembunyikan kalimat di bawah judul. Di halaman pendaftaran kalimat itu
   berisi petunjuk yang wajib dibaca (misalnya simpan nomor tiket), jadi selalu tampil. */
.page-daftar .guru-masuk-kartu .stack-xs > p { display: block; }
/* Judul langkah di panel biru: warna terang, karena b dan strong bawaan berwarna teks gelap. */
.daftar-samping .guru-masuk-poin b { color: var(--color-text-inverse); }

/* Formulir: empat bagian bergaris pemisah, kolom berdampingan mulai 48rem. */
.daftar-form { gap: var(--space-6); }
.daftar-bagian { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--space-4); }
.daftar-bagian + .daftar-bagian { padding-top: var(--space-6); border-top: var(--border-thin) solid var(--color-border); }
/* Legend mengambang supaya menjadi baris biasa di bawah garis pemisah, bukan menumpang di garis tepi fieldset. */
.daftar-bagian > .daftar-bagian-judul { float: left; width: 100%; }
.daftar-bagian-judul { margin: 0; padding: 0; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-primary-text); }
/* Pilihan berbentuk kartu melentur: tiga pilihan sebaris bila muat, di ponsel dua sebaris dan sisanya selebar penuh. */
.daftar-pilihan { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.daftar-pilihan > .control-card { flex: 1 1 7.5rem; }
.daftar-pilihan .control-card { padding: var(--space-3) var(--space-4); border-color: var(--color-border); }
.daftar-pilihan .control-card:has(.control-input:checked) { border-color: var(--color-primary); }
.daftar-pilihan .control-label { color: var(--color-text); font-weight: var(--fw-semibold); }
.daftar-pilihan[aria-invalid="true"] .control-card { border-color: var(--color-danger); }
.daftar-kisi-sekolah { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .daftar-kisi-sekolah { grid-template-columns: minmax(0, 1fr) 11rem; } }
/* Kolom kelas lain hanya perlu bila pilihan Kelas lain dipilih; tanpa skrip tetap tampil. */
.js-aktif .daftar-kelas-lain[data-sembunyi] { display: none; }
.daftar-setuju { padding: var(--space-4); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface-alt); }
.daftar-setuju .control { padding-block: 0; }
.daftar-setuju .control-label { color: var(--color-text); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.daftar-setuju:has(.control-input[aria-invalid="true"]) { border-color: var(--color-danger); }
/* Kolom jebakan: di luar layar, tidak dibacakan, tidak terjangkau Tab. */
.daftar-jebakan { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Pesan galat yang terlipat dua baris: ikon sejajar baris pertama. */
.daftar-form .field-error { align-items: flex-start; }
.daftar-form .field-error .icon { margin-top: 0.15em; }
.daftar-kaki { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-5); margin: 0; }

/* Langkah periksa: ringkasan per bagian, email disorot karena menjadi nama pengguna. */
.daftar-ringkas-wadah { display: grid; gap: var(--space-3); }
.daftar-ringkas-bagian { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-surface-alt); }
.daftar-ringkas, .daftar-tiket-data, .daftar-akun-data { display: grid; gap: var(--space-3) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 0; }
.daftar-tiket-data { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-2) var(--space-4); }
.daftar-ringkas > div, .daftar-tiket-data > div, .daftar-akun-data > div { display: grid; gap: 0.1rem; min-width: 0; }
.daftar-ringkas dt, .daftar-tiket-data dt, .daftar-akun-data dt { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-muted); }
.daftar-ringkas dd, .daftar-tiket-data dd, .daftar-akun-data dd { margin: 0; font-size: var(--fs-sm); color: var(--color-text); overflow-wrap: anywhere; }
.daftar-ringkas-penting { grid-column: 1 / -1; padding: var(--space-3) var(--space-4); border: var(--border-thin) solid var(--color-primary-border); border-radius: var(--radius-md); background-color: var(--color-primary-softer); }
.daftar-ringkas-penting dd { font-size: var(--fs-base); font-weight: var(--fw-bold); }
.daftar-aksi { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.daftar-aksi > .btn { flex: 1 1 12rem; }

/* Nomor tiket dan bukti: kotak bergaris putus-putus seperti potongan tiket. */
.daftar-tiket { display: grid; gap: var(--space-3); padding: var(--space-5); border: var(--border-base) dashed var(--color-primary-border); border-radius: var(--radius-lg); background-color: var(--color-primary-softer); }
.daftar-tiket-cetak-judul { display: none; margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); }
.daftar-tiket-label { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-primary-text); }
.daftar-tiket-baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.daftar-tiket-kode { padding: 0; background: none; font-size: clamp(1.35rem, 1rem + 1.6vw, 1.85rem); font-weight: var(--fw-extrabold); letter-spacing: 0.08em; color: var(--color-text); white-space: nowrap; }
.daftar-tiket-kaki { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
.daftar-ingat { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; }
.daftar-ingat .icon { flex: none; margin-top: 0.15em; }
.daftar-cek-tiket { text-transform: uppercase; letter-spacing: 0.08em; }
/* Layar laptop di bawah 580 piksel: tombol Halaman depan tinggal ikon (namanya tetap dibacakan), karena lebih lebar dari
   ruang pojok 8,75rem yang disisakan panel, jadi tidak bersinggungan dengan panel. */
@media (max-height: 36.24rem) and (min-width: 56rem) {
  .page-daftar .guru-masuk-bilah > .btn { width: var(--control-height-sm); padding-inline: 0; justify-content: center; }
  .page-daftar .guru-masuk-bilah > .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
/* Kartu lebar tanpa panel samping di layar 56rem sampai 69rem: tombol Halaman depan juga tinggal ikon, karena tombol
   berteks lebih lebar dari ruang di samping kartu. Kartu tetap selebar penuh dan tepat di tengah tanpa bersinggungan
   dengan tombol pojok (KP-127); kartu yang dipersempit terlalu tinggi untuk layar laptop yang pendek. */
@media (min-width: 56rem) and (max-width: 68.99rem) {
  .page-daftar-tunggal .guru-masuk-bilah > .btn { width: var(--control-height-sm); padding-inline: 0; justify-content: center; }
  .page-daftar-tunggal .guru-masuk-bilah > .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
/* Layar yang sangat pendek: catatan pengingat perangkat di halaman nomor tiket disembunyikan supaya panel tetap utuh. */
@media (max-height: 40rem) { .daftar-ingat { display: none; } }
/* Ikon keberhasilan di samping judul halaman nomor tiket. */
.daftar-kepala-ikon { display: flex; align-items: flex-start; gap: var(--space-4); }
.daftar-kepala-ikon > .icon-tile { flex: none; }
@media (max-width: 35.99rem) { .daftar-kepala-ikon > .icon-tile { display: none; } }

/* Status: tiga langkah bergaris penghubung; titik hijau untuk selesai, biru berjalan, kuning menunggu, merah berhenti. */
.daftar-linimasa { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.daftar-linimasa-butir { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--space-2); text-align: center; }
.daftar-linimasa-butir:not(:last-child)::after { content: ""; position: absolute; top: calc(1rem - 1px); left: calc(50% + 1.35rem); right: calc(-50% + 1.35rem); height: 2px; border-radius: 2px; background-color: var(--color-border); }
.daftar-linimasa-butir.is-selesai:not(:last-child)::after { background-color: var(--color-success); }
.daftar-linimasa-titik { position: relative; z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid var(--color-border); border-radius: var(--radius-circle); background-color: var(--color-surface); color: var(--color-text-muted); }
.daftar-linimasa-titik .icon { width: 1rem; height: 1rem; }
.is-selesai > .daftar-linimasa-titik { border-color: var(--color-success); background-color: var(--color-success); color: #fff; }
.is-aktif > .daftar-linimasa-titik { border-color: var(--color-primary); background-color: var(--color-primary-softer); color: var(--color-primary-text); }
.is-menunggu > .daftar-linimasa-titik { border-color: var(--color-warning-border); background-color: var(--color-warning-soft); color: var(--color-warning-text); }
.is-berhenti > .daftar-linimasa-titik { border-color: var(--color-danger-border); background-color: var(--color-danger-soft); color: var(--color-danger-text); }
.daftar-linimasa-teks { display: grid; gap: 0.1rem; }
.daftar-linimasa-teks b { font-family: var(--font-display); font-size: var(--fs-xs); color: var(--color-text); }
.is-belum .daftar-linimasa-teks b { color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.daftar-linimasa-teks small { font-size: var(--fs-2xs); color: var(--color-text-muted); }
.daftar-tutup { display: flex; justify-content: center; margin: 0; }

/* Akun siap (KP-161): kotak akun sepola kotak ringkasan; email dan kata sandi berhuruf tetap dan tebal, karena itulah
   yang diketik saat masuk. Kata sandi tertutup titik sampai Tampilkan ditekan. */
.daftar-akun { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-5); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-surface-alt); scroll-margin-top: var(--space-6); }
.daftar-akun .daftar-akun-data { gap: var(--space-2) var(--space-5); }
.daftar-akun-data > .daftar-akun-penting { grid-column: 1 / -1; }
/* Layar laptop yang pendek: linimasa yang semuanya sudah selesai disembunyikan supaya kotak akun dan tombolnya tetap utuh
   di dalam panel (KP-127); judul Akun Anda siap sudah menyatakan hal yang sama. */
@media (max-height: 45rem) { .guru-masuk-utama[data-layar="daftar-guru-siap"] .daftar-linimasa { display: none; } }
/* Tingkat rapat terakhir halaman masuk (tinggi 40,75rem ke bawah): kabar status ikut merapat seperti kabar ringkas, supaya
   alasan penolakan yang tiga atau empat baris tetap muat di panel. */
@media (max-height: 40.75rem) {
  .page-daftar .guru-masuk-kartu .feedback { padding: var(--space-3) var(--space-4); gap: var(--space-3); border-radius: var(--radius-md); }
  .page-daftar .guru-masuk-kartu .feedback-icon { width: var(--icon-tile-sm); height: var(--icon-tile-sm); font-size: var(--fs-base); }
  .page-daftar .guru-masuk-kartu .feedback-title { font-size: var(--fs-base); }
}
.daftar-akun-nilai { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); margin: 0; }
.daftar-akun-nilai code { padding: 0; background: none; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--color-text); overflow-wrap: anywhere; }
.daftar-akun-sandi { letter-spacing: 0.06em; }
.daftar-akun-nilai .daftar-akun-titik { color: var(--color-text-muted); letter-spacing: 0.1em; }

/* Simpan bukti: hanya kotak tiket yang tercetak, dengan judul bukti di atasnya; selalu bertema terang. */
@media print {
  .page-daftar .guru-masuk-bilah,
  .page-daftar .guru-masuk-samping,
  .page-daftar .daftar-kartu .card-body > :not(.daftar-tiket),
  .page-daftar .daftar-tiket-salin,
  .page-daftar .toast-wadah { display: none !important; }
  .page-daftar .guru-masuk-utama::before, .page-daftar .guru-masuk-utama::after { display: none; }
  .page-daftar .guru-masuk-utama { min-height: 0; padding: 0; display: block; }
  .page-daftar .guru-masuk-panel { width: auto; box-shadow: none; display: block; overflow: visible; border-radius: 0; }
  .page-daftar .daftar-kartu { border: 0; border-radius: 0; box-shadow: none; background: #fff; overflow: visible; }
  .page-daftar .daftar-kartu .card-body { padding: 0; }
  .page-daftar .daftar-tiket { max-width: 150mm; border-color: #0F4597; background: #fff; color: #111; }
  .page-daftar .daftar-tiket-cetak-judul { display: block; font-size: 13pt; color: #012A6A; }
  .page-daftar .daftar-tiket-kode { color: #111; }
}

/* ---------- PANDUAN PENGGUNAAN (KP-166): section halaman depan dan tautan singkat ke PDF ---------- */

/* Kartu kaca berisi sampul PDF di kiri dan keterangan di kanan. Dua kartu sebaris mulai 75rem, yaitu sejak kedua tombol
   muat sebaris di samping sampul; di bawahnya satu kartu per baris. Di ponsel sampulnya mengecil supaya kartu tidak
   terlalu tinggi, dan tombol turun selebar kartu di bawah sampul. KP-173: tombol kini anak langsung kartu; sebelumnya
   tombol berada di dalam kolom keterangan, sehingga di ponsel sempit tetap di kolom kanan dan keluar dari kartu. */
.panduan-depan-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 75rem) { .panduan-depan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
.panduan-depan-kartu { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-4); row-gap: var(--space-4); align-items: start; padding: var(--space-5); border-radius: var(--radius-lg); }
@media (min-width: 36rem) {
  .panduan-depan-kartu { grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--space-5); }
  .panduan-depan-kartu > .panduan-depan-sampul { grid-row: 1 / span 2; }
}
@media (min-width: 75rem) { .panduan-depan-kartu { grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--space-4); } }
.panduan-depan-sampul { display: grid; place-items: center; aspect-ratio: 210 / 297; overflow: hidden; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-surface); box-shadow: var(--shadow-md); color: var(--color-primary); font-size: 2rem; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.panduan-depan-sampul img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* KP-176 (TS-6): sampul terangkat hanya saat ditunjuk dengan perangkat ber-hover. */
@media (hover: hover) { .panduan-depan-sampul:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } }
@media (prefers-reduced-motion: reduce) { .panduan-depan-sampul, .panduan-depan-sampul:hover { transition: none; transform: none; } }
.panduan-depan-isi { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.panduan-depan-isi h3 { font-size: var(--fs-xl); margin: 0; }
.panduan-depan-isi > p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.panduan-depan-isi > .panduan-depan-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.panduan-depan-meta .icon { flex: 0 0 auto; }
/* Di ponsel tombol selebar kartu di bawah sampul; mulai 36rem di kolom keterangan di bawah teks. Tulisan tombol boleh
   pindah baris bila huruf ponsel diperbesar, supaya tombol tidak pernah lebih lebar dari kartu. */
.panduan-depan-aksi { display: flex; flex-wrap: wrap; gap: var(--space-2); grid-column: 1 / -1; min-width: 0; }
.panduan-depan-aksi .btn { flex: 1 1 100%; max-width: 100%; padding-inline: var(--space-5); white-space: normal; line-height: var(--lh-tight); }
@media (min-width: 36rem) {
  .panduan-depan-aksi { grid-column: 2; }
  .panduan-depan-aksi .btn { flex: 0 1 auto; }
}
/* Layar yang sangat sempit dibanding ukuran hurufnya, misalnya ponsel dengan huruf diperbesar: sampul di atas
   keterangan, supaya kolom keterangan tidak lebih sempit dari judulnya, dan tombol sedikit lebih rapat. */
@media (max-width: 19.99rem) {
  .panduan-depan-kartu { grid-template-columns: minmax(0, 1fr); }
  .panduan-depan-sampul { width: 6rem; }
  .panduan-depan-aksi .btn { padding-inline: var(--space-3); }
}

/* Tautan singkat ke PDF panduan di section Untuk guru dan kotak Masuk siswa. */
.panduan-tautan { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-primary-text); text-decoration: none; }
.panduan-tautan .icon { flex: 0 0 auto; width: 1.1em; height: 1.1em; }
.panduan-tautan:hover span, .panduan-tautan:focus-visible span { text-decoration: underline; text-underline-offset: 0.2em; }
.untuk-guru-panduan { margin: 0; }
/* Di kotak Masuk tautannya menyambung kalimat kaki dan pindah baris sebagai satu kesatuan. */
.masuk-kaki .panduan-tautan { font-size: inherit; white-space: nowrap; vertical-align: bottom; }

/* KP-189: dulu di guru.css, yang dulu dimuat di semua halaman. Kartu pilihan berinput nonaktif bisa muncul di luar dashboard
   (ui_pilihan() dengan opsi disabled), jadi aturan ini tetap berlaku di semua halaman dan tetap sesudah scafolya.css, supaya
   tampilannya sama seperti sebelum guru.css dibatasi ke dashboard. Ia menimpa .pilihan-opsi:has(.control-input:disabled) di
   scafolya.css (0,85 dan kursor biasa); saat ini tidak ada halaman siswa yang merender pilihan nonaktif, jadi bentrok itu
   hanya dilaporkan sebagai temuan samping, tidak diubah di sini. */
.control-card:has(.control-input:disabled) { opacity: 0.6; cursor: not-allowed; }