/* Tampilan konsol pengelola kurikulum — tema terang.
   Warna, jarak, dan sudut dikumpulkan sebagai peubah agar penyesuaian cukup
   dilakukan di satu tempat. */
@import url("huruf.css");
@import url("ikon.css");

:root {
  color-scheme: light;

  /* Huruf bawaan mengikuti huruf sistem; pemakai dapat menggantinya lewat
     panel penyesuaian tampilan. Nilainya satu peubah agar penggantian itu
     cukup mengubah satu tempat, bukan setiap aturan yang menyebut font. */
  --huruf: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Satu keluarga biru: nada pekat untuk tindakan, nada gelap untuk teks di
     atas nada mudanya. Ketiganya lulus AA — 7,9:1 biru pada kertas, 11,6:1
     biru tua pada kertas, 10,0:1 biru tua pada biru muda. */
  --biru: #16548A;
  --biru-tua: #0F3B61;
  --biru-muda: #E8EFF5;
  --hijau: #0A6B3D;
  --hijau-muda: #E6F4EC;
  --kuning: #9A6B08;
  --kuning-muda: #FDF3DC;
  --merah: #B03A3A;
  --merah-muda: #FBEBEB;
  --ungu: #6B5CA5;
  --ungu-muda: #F0EEF8;
  --ungu-garis: #DCD8EE;

  --latar: #F4F6F9;
  --kertas: #FFFFFF;
  --tinta: #1B242F;
  --redup: #5E6B7A;
  --samar: #8A97A6;
  --garis: #E2E7ED;
  --garis-tegas: #CFD7E0;

  /* Sisi kiri gelap agar isi halaman yang terang menjadi pusat perhatian.
     Warna di atasnya punya perangkat sendiri — memakai --tinta dan --redup
     yang disetel untuk latar terang akan tenggelam di sini. */
  --sisi: #102D72;
  --sisi-tinta: #F2F5FC;      /* teks utama */
  --sisi-redup: #B3C1E4;      /* teks menu dalam keadaan diam */
  --sisi-samar: #8095C8;      /* label, keterangan, dan ikon pasif */
  --sisi-garis: #24428A;      /* pembatas antarsesi */
  --sisi-lapis: #1B3B87;      /* latar kendali di dalam sisi kiri */
  --sisi-sorot: #5B8DEF;      /* aksen menu yang sedang dibuka */
  --sisi-sorot-latar: #1D3F8F;

  --lebar-sisi: 244px;
  --radius: 10px;
  --radius-kecil: 7px;
  --bayang: 0 1px 2px rgba(21, 40, 61, .05), 0 3px 10px rgba(21, 40, 61, .05);
  --bayang-tinggi: 0 16px 48px rgba(21, 40, 61, .16);
}

/* Administrasi sistem memakai aksen berbeda supaya sekali lihat sudah jelas
   bahwa yang sedang dibuka bukan konsol penyusunan kurikulum. */
body.ruang-sistem {
  --biru: #4B4A73;
  --biru-tua: #35345A;
  --biru-muda: #EDEDF6;
  /* Latarnya sama; yang membedakan aksennya, sehingga sekali lihat sudah
     terasa bahwa ruangnya berbeda tanpa memecah kesatuan tampilan. */
  --sisi-sorot: #9B8CF0;
  --sisi-sorot-latar: #2A2F6B;
  --sisi-garis: #303470;
  --sisi-lapis: #262B62;
  --sisi: #14184A;
  --sisi-redup: #C0BEE8;
  --sisi-samar: #9591CC;
}

* { box-sizing: border-box; }

/* Atribut hidden harus tetap menang atas display apa pun yang ditulis di bawah.
   Tanpa ini, aturan seperti `.tirai { display: grid }` membuat lapisan modal
   tetap terpasang di atas halaman dan menghalangi seluruh klik. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 14px/1.55 var(--huruf);
  background: var(--latar);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--biru); }

/* ================================================================ masuk */
/* Dua bidang bersisian: sisi kiri memperkenalkan aplikasinya di atas latar
   bermotif yang sama dengan sisi kiri konsol, sisi kanan mengurus masuknya.
   Pada layar sempit sisi kiri menciut jadi kop — di sana yang dicari orang
   adalah kotak isian, bukan perkenalan. */
.halaman-masuk {
  display: grid; place-items: center;
  min-height: 100vh; padding: 24px;
  background:
    radial-gradient(1100px 520px at 12% -8%, #DCE9F6 0%, transparent 62%),
    radial-gradient(900px 460px at 92% 108%, #E4F0E9 0%, transparent 58%),
    var(--latar);
}

.masuk-bingkai {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  width: min(940px, 100%); overflow: hidden;
  background: var(--kertas); border-radius: 18px; box-shadow: var(--bayang-tinggi);
}

/* ---- sisi perkenalan ---- */
.masuk-jati {
  display: flex; flex-direction: column; gap: 26px;
  padding: 38px 36px 32px; color: var(--sisi-tinta);
  background:
    var(--pola-sisi) 0 0 / 68px 68px repeat,
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .1) 0%, transparent 70%),
    var(--sisi);
}
.masuk-merek { display: flex; align-items: center; gap: 14px; }
.masuk-merek img { width: 52px; height: 52px; flex: 0 0 52px; }
.masuk-merek b { display: block; font-size: 18px; line-height: 1.2; }
.masuk-merek span {
  display: block; margin-top: 3px; font-size: 13px; color: var(--sisi-samar);
}

.masuk-butir { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; flex: 1; }
.masuk-butir li { display: flex; gap: 12px; align-items: flex-start; }
.masuk-butir .bi {
  flex: 0 0 auto; margin-top: 2px; font-size: 18px; color: var(--sisi-sorot);
}
.masuk-butir b { display: block; font-size: 13px; margin-bottom: 2px; }
.masuk-butir span { font-size: 13px; color: var(--sisi-redup); line-height: 1.5; }
.masuk-kaki {
  margin: 0; padding-top: 18px; font-size: 12px; color: var(--sisi-samar);
  border-top: 1px solid var(--sisi-garis);
}

/* ---- sisi borang ---- */
.masuk-borang { padding: 38px 36px 30px; }
.masuk-kop { display: none; align-items: center; gap: 10px; margin-bottom: 20px; }
.masuk-kop img { width: 34px; height: 34px; }
.masuk-kop b { font-size: 16px; }
.masuk-borang h1 { font-size: 21px; margin: 0 0 4px; }
.masuk-borang .ket { margin-bottom: 20px; }
.masuk-borang label {
  display: block; margin: 14px 0 5px;
  font-size: 12px; font-weight: 600; color: var(--redup);
}
.masuk-borang input {
  width: 100%; padding: 10px 12px; font: inherit;
  border: 1px solid var(--garis-tegas); border-radius: var(--radius-kecil);
  background: var(--kertas); color: var(--tinta);
}
.masuk-borang input:focus { outline: 2px solid var(--biru); outline-offset: -1px; }
.masuk-borang button { width: 100%; margin-top: 22px; padding: 11px; font-size: 16px; }
.masuk-borang footer { margin-top: 24px; font-size: 12px; }
.masuk-borang .galat {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; border-radius: var(--radius-kecil);
  background: var(--merah-muda); color: var(--merah); font-size: 13px;
  border-left: 3px solid var(--merah);
}
.masuk-borang .galat .bi { flex: 0 0 auto; margin-top: 1px; font-size: 18px; }

/* Halaman yang hanya berisi satu pesan tidak memerlukan sisi perkenalan. */
.masuk-bingkai.satu-bidang { grid-template-columns: 1fr; width: min(440px, 100%); }
.masuk-bingkai.satu-bidang .masuk-kop { display: flex; }

@media (max-width: 780px) {
  .masuk-bingkai { grid-template-columns: 1fr; width: min(430px, 100%); }
  .masuk-jati { display: none; }
  .masuk-kop { display: flex; }
  .masuk-borang { padding: 30px 26px 24px; }
}

.lambang {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--biru); color: #fff;
  font-weight: 700; letter-spacing: .5px; font-size: 16px;
}

/* ================================================================ rangka */
#bungkus { display: flex; min-height: 100vh; }

.lompat {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--biru); color: #fff; padding: 8px 14px; border-radius: var(--radius-kecil);
}
.lompat:focus { left: 8px; }

/* Disembunyikan dari mata, tetap ada bagi pembaca layar. Bukan display:none —
   yang itu menghilangkannya dari pohon aksesibilitas sekaligus. */
.tersembunyi {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- sisi kiri */
/* Latar sisi kiri bertumpuk tiga lapis: pola lingkaran bertaut yang sangat
   samar, semburat terang di tengah agar tidak terasa rata, lalu warna dasarnya.
   Polanya digambar sebagai SVG sebaris supaya tidak menambah satu pun unduhan. */
:root {
  --pola-sisi: url("data:image/svg+xml,<svg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='68'%20height='68'%20viewBox='0%200%2068%2068'><g%20fill='none'%20stroke='%23FFFFFF'%20stroke-opacity='.075'%20stroke-width='1'><circle%20cx='0'%20cy='0'%20r='48.1'/><circle%20cx='0'%20cy='68'%20r='48.1'/><circle%20cx='68'%20cy='0'%20r='48.1'/><circle%20cx='68'%20cy='68'%20r='48.1'/></g></svg>");
}

#sisi {
  width: var(--lebar-sisi);
  flex: 0 0 var(--lebar-sisi);
  background:
    var(--pola-sisi) 0 0 / 68px 68px repeat,
    radial-gradient(120% 55% at 50% 26%,
                    rgba(255, 255, 255, .08) 0%, transparent 70%),
    var(--sisi);
  color: var(--sisi-tinta);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  transition: width .16s ease, flex-basis .16s ease;
}

.sisi-kepala {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 12px; border-bottom: 1px solid var(--sisi-garis);
}
.merek { display: flex; gap: 10px; align-items: center; min-width: 0; flex: 1; }
.merek-teks { min-width: 0; }
.merek b { display: block; font-size: 14px; line-height: 1.25; white-space: nowrap;
  color: var(--sisi-tinta); }
.merek small { color: var(--sisi-samar); font-size: 11px; white-space: nowrap; }
/* Lambang di sisi kiri memakai logo sungguhan; latarnya dibuat terang tipis
   supaya bidang putih pada logo tidak lenyap ke dalam latar biru tua. */
#sisi .lambang {
  background: rgba(255, 255, 255, .1); padding: 3px;
  border: 1px solid var(--sisi-garis);
}
#sisi .lambang img { width: 100%; height: 100%; object-fit: contain; display: block; }

.ikon-tombol {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  background: transparent; color: var(--samar);
  border: 1px solid transparent; border-radius: var(--radius-kecil);
}
.ikon-tombol:hover { background: var(--latar); color: var(--tinta); filter: none; }
.ikon-tombol .bi { font-size: 18px; }
#sisi .ikon-tombol { color: var(--sisi-samar); }
#sisi .ikon-tombol:hover { background: rgba(255, 255, 255, .12); color: var(--sisi-tinta); }

.sisi-cari { padding: 10px 12px; border-bottom: 1px solid var(--sisi-garis); }
.sisi-cari input {
  width: 100%; min-width: 0; font-size: 13px; padding: 6px 9px;
  background: rgba(255, 255, 255, .08); border: 1px solid transparent;
  color: var(--sisi-tinta);
}
.sisi-cari input::placeholder { color: var(--sisi-samar); }
.sisi-cari input:focus { border-color: var(--sisi-sorot); background: var(--sisi-lapis); }

#menu { flex: 1; padding: 0 0 10px; overflow-y: auto; }

/* Tiap sesi berdiri sendiri: kepalanya menjadi tombol lipat, dan pembatas
   tipis di bawahnya memisahkannya dari sesi berikutnya. */
.sesi { border-bottom: 1px solid var(--sisi-garis); }
.sesi:last-child { border-bottom: 0; }
.sesi-isi { padding: 3px 8px 8px; }
.sesi-tanpa-judul .sesi-isi { padding-top: 8px; }

.grup {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 11px 12px 8px; margin: 0; border: 0; background: transparent;
  font: inherit; font-size: 11px; letter-spacing: .09em; text-align: left;
  text-transform: uppercase; color: var(--sisi-samar); font-weight: 600;
  cursor: pointer;
}
.grup:hover { color: var(--sisi-tinta); filter: none; }
.grup .judul-grup { flex: 1; }
.grup .anak-panah {
  width: 12px; height: 12px; flex: 0 0 12px;
  transition: transform .15s ease;
}
.sesi.terlipat .anak-panah { transform: rotate(-90deg); }
.sesi.terlipat .sesi-isi { display: none; }
/* Saat mencari, sesi yang punya hasil dibentangkan sementara agar hasilnya
   benar-benar terlihat tanpa mengubah lipatan yang dipilih pengguna. */
.sesi.terlipat.memuat-aktif .sesi-isi { display: block; }

.menu {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin-bottom: 1px; border-radius: var(--radius-kecil);
  color: var(--sisi-redup); text-decoration: none; font-size: 14px; cursor: pointer;
  position: relative;
}
.menu .bi { flex: 0 0 auto; font-size: 18px; opacity: .72; }
.menu .teks { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu:hover { background: rgba(255, 255, 255, .09); color: var(--sisi-tinta); }
.menu:hover .bi { opacity: 1; }
.menu.aktif {
  background: var(--sisi-sorot-latar); color: #fff; font-weight: 600;
}
.menu.aktif .bi { opacity: 1; color: var(--sisi-sorot); }
.menu.aktif::before {
  content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--sisi-sorot);
}
.menu .hitung {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--merah); color: #fff;
}
.menu.kosong-cari { display: none; }
.sesi.kosong-cari { display: none; }

/* tautan pindah antarruang kerja */
.silang { padding: 8px; border-top: 1px solid var(--sisi-garis); }
.pindah-ruang {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-kecil);
  color: var(--sisi-redup); text-decoration: none; font-size: 13px; font-weight: 500;
}
.pindah-ruang:hover { background: rgba(255, 255, 255, .09); color: var(--sisi-tinta); }
.pindah-ruang .bi { flex: 0 0 auto; font-size: 18px; opacity: .75; }
body.rel .pindah-ruang span { display: none; }
body.rel .pindah-ruang { justify-content: center; }

.jatidiri {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-top: 1px solid var(--sisi-garis);
  background: rgba(0, 0, 0, .16);
}
.jatidiri .rupa {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sisi-sorot-latar); color: var(--sisi-tinta);
  font-size: 12px; font-weight: 700;
}
.jatidiri .rincian { min-width: 0; flex: 1; font-size: 12px; }
.jatidiri .rincian b {
  display: block; color: var(--sisi-tinta); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.jatidiri .peran { color: var(--sisi-samar); font-size: 11px; }
.jatidiri .ikon-tombol { color: var(--sisi-samar); }
.jatidiri .ikon-tombol:hover { background: rgba(255, 255, 255, .12); color: var(--sisi-tinta); }

/* ---- sidebar terciut menjadi rel ikon ---- */
body.rel { --lebar-sisi: 62px; }
body.rel .merek-teks,
body.rel .sisi-cari,
body.rel .grup,
body.rel .menu .teks,
body.rel .jatidiri .rincian { display: none; }
/* Pada rel ikon, seluruh sesi dibentangkan — melipat menu yang sudah tinggal
   ikon justru menyembunyikannya tanpa cara membukanya kembali. */
body.rel .sesi.terlipat .sesi-isi { display: block; }
body.rel .sisi-kepala { flex-direction: column; gap: 6px; padding: 12px 8px; }
body.rel #menu { padding: 8px 0 14px; }
body.rel .sesi-isi { padding: 4px 8px; }
body.rel .menu { justify-content: center; padding: 9px 0; }
body.rel .menu .bi { font-size: 18px; }
body.rel .menu .hitung {
  position: absolute; top: 2px; right: 6px; padding: 0 5px; font-size: 11px;
}
body.rel .menu.aktif::before { left: -8px; }
body.rel .jatidiri { justify-content: center; padding: 11px 8px; }
body.rel .silang { padding: 8px; }

/* ================================================================ isi */
#utama { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Navbar memuat konteks kerja yang berlaku di seluruh halaman: kurikulum mana
   yang sedang dibuka, program studi pemiliknya, dan peraturan yang diacunya.
   Ia yang tinggal di puncak layar — bukan judul halaman, yang hanya berlaku
   bagi halaman itu sendiri dan boleh bergulir pergi bersama isinya. */
.navbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 7px 26px; background: var(--kertas);
  border-bottom: 1px solid var(--garis);
  position: sticky; top: 0; z-index: 30;
}
/* Pemilih kurikulum memuat nama program studi yang panjang, jadi kotaknya boleh
   melebar sampai batas yang wajar. Labelnya diwakili ikon di sebelah kiri —
   label tertulis di atas kotak menambah satu baris pada navbar yang seharusnya
   setipis mungkin. */
.navbar-pilih {
  display: flex; align-items: center; gap: 8px;
  flex: 0 1 auto; min-width: 0; max-width: 430px;
}
.rupa-pilih { display: inline-flex; flex: 0 0 auto; color: var(--samar); }
.rupa-pilih .bi { font-size: 18px; }
.navbar select {
  width: 100%; min-width: 0; padding: 5px 8px;
  border-radius: var(--radius-kecil);
  border: 1px solid var(--garis-tegas); background: var(--kertas);
  color: var(--tinta); font: inherit; font-size: 14px; font-weight: 600;
  text-overflow: ellipsis;
}
.navbar select:hover { border-color: var(--biru); }
.navbar select:focus { outline: 2px solid var(--biru); outline-offset: -1px; }
.navbar-pilih:focus-within .rupa-pilih { color: var(--biru); }

.navbar-info {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  min-width: 0; flex: 1;
}
/* Tiap keterangan dipisah garis tipis, bukan tanda baca: pemisahnya tetap
   terbaca ketika salah satu keterangan kebetulan kosong. Keterangannya sendiri
   dibuat inline-flex agar garis pemisah menjadi anak lentur yang tegak lurus
   di tengah, bukan potongan sebaris yang perlu digeser dengan vertical-align. */
.navbar-info > * { display: inline-flex; align-items: center; min-width: 0; }
.navbar-info > * + *::before {
  content: ""; flex: 0 0 auto; width: 1px; height: 14px;
  margin-right: 14px; background: var(--garis-tegas);
}

/* ---- paket pada navbar ---- */
/* Menepi ke ujung kanan: keterangan kurikulum di kiri menjawab "saya sedang
   menyusun apa", keping ini menjawab "dengan paket apa" — dua pertanyaan yang
   berlainan, jadi keduanya tidak dijejer bersambung. */
.navbar-paket { position: relative; margin-left: auto; flex: 0 0 auto; }
.paket-keping {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 9px 5px 11px; border-radius: 999px;
  border: 1px solid var(--garis-tegas); background: var(--kertas);
  color: var(--redup); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.paket-keping:hover { border-color: var(--biru); color: var(--biru-tua); }
.paket-keping[aria-expanded="true"] { border-color: var(--biru); background: var(--biru-muda); }
.paket-keping .bi { font-size: 13px; }
/* Ikon panah dikecilkan dan diredupkan: ia penanda "ada isinya", bukan bagian
   dari keterangan paketnya. */
.paket-keping .bi:last-child { font-size: 11px; color: var(--samar); }
.paket-keping.baik > .bi:first-child { color: var(--hijau); }
.paket-keping.awas > .bi:first-child { color: var(--kuning); }
.paket-nama { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paket-sisa {
  padding: 2px 8px; border-radius: 999px;
  background: var(--latar); color: var(--samar);
  font-size: 11px; font-variant-numeric: tabular-nums;
}

.paket-panel {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 60;
  width: 320px; padding: 16px; text-align: left;
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--radius); box-shadow: var(--bayang-tinggi);
}
.paket-kepala {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--garis);
}
.paket-kepala b { display: block; font-size: 14px; }
.paket-kepala span { font-size: 12px; color: var(--samar); }
.paket-sebab {
  margin: 0 0 13px; padding: 9px 11px; border-radius: var(--radius-kecil);
  background: var(--kuning-muda); color: #6E4B04; font-size: 12px; line-height: 1.55;
}

.paket-kuota { margin-bottom: 14px; }
.paket-kuota-kepala {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px; font-size: 12px; color: var(--redup);
}
.paket-kuota-kepala b { font-size: 13px; color: var(--tinta); font-variant-numeric: tabular-nums; }

.paket-fitur { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.paket-fitur li {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--redup);
}
.paket-fitur .bi { font-size: 14px; flex: 0 0 auto; }
.paket-fitur .buka .bi { color: var(--hijau); }
/* Yang tertutup diredupkan seluruhnya, bukan hanya ikonnya: sebaris teks pekat
   bertanda silang tetap terbaca sebagai fitur yang tersedia. */
.paket-fitur .tutup { color: var(--samar); }
.paket-fitur .tutup .bi { color: var(--garis-tegas); }

.paket-rawat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--garis);
  font-size: 12px; color: var(--redup);
}
.paket-rawat b { font-size: 13px; color: var(--tinta); text-align: right; }
.paket-beli { width: 100%; margin-top: 14px; padding: 9px; font-size: 14px; }

/* Pada layar sempit navbar sudah membungkus; keping ikut turun bersamanya dan
   panelnya dibuat menempel tepi kanan layar, bukan menjorok keluar. */
@media (max-width: 720px) {
  .navbar-paket { margin-left: 0; }
  .paket-panel { width: min(320px, calc(100vw - 36px)); }
}
.navbar-info .acuan { font-size: 13px; color: var(--redup); }
.navbar-info .tanda { gap: 6px; flex-wrap: wrap; }

.bilah {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 26px; background: var(--kertas);
  border-bottom: 1px solid var(--garis);
}
.bilah h2 { font-size: 18px; margin: 0; }
.bilah .ket { margin: 2px 0 0; font-size: 13px; }
.bilah .aksi { display: flex; gap: 8px; flex-wrap: wrap; }

#isi { padding: 20px 26px 64px; }
h3 { font-size: 14px; margin: 24px 0 9px; }
h3:first-child { margin-top: 4px; }
/* Keterangan dibatasi selebar baris yang nyaman dibaca; tanpa batas, pada layar
   lebar ia membentang sampai seluruh lebar papan dan mata kehilangan jejak awal
   baris berikutnya. Satu angka untuk seluruh tempat — dua batas yang berbeda
   hanya membuat keterangan berpindah lebar tanpa alasan yang terlihat. */
.ket { color: var(--redup); margin: 0 0 15px; text-wrap: pretty; }

/* kartu angka */
/* auto-fit, bukan auto-fill: lajur yang tidak terisi diciutkan sehingga
   kartu selalu memenuhi lebar dan tidak menyisakan ruang kosong di kanan. */
/* Jarak bawahnya menyamai .panel, supaya deret angka tidak menempel pada apa
   pun yang menyusul di bawahnya — tabel, panel hampa, maupun grafik. */
.kartu {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.kartu > div {
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--bayang);
}
.kartu b { display: block; font-size: 26px; line-height: 1.2; color: var(--biru-tua);
           font-variant-numeric: tabular-nums; }
.kartu span { color: var(--redup); font-size: 12px; }
.kartu > div.sorot b { color: var(--hijau); }
.kartu > div.awas b { color: var(--merah); }

.kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; margin-top: 16px; }
.grafik {
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 10px 12px 12px; box-shadow: var(--bayang);
  margin: 0;
}
.grafik svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Teks memakai token tinta, tidak pernah mewarisi warna serinya. */
.grafik .jd { font-size: 13px; font-weight: 600; fill: var(--tinta); }
.grafik .jd-html { font-size: 13px; font-weight: 600; color: var(--tinta); margin-bottom: 8px; }
.grafik .sb { font-size: 11px; fill: var(--samar); }
.grafik .nl { font-size: 11px; fill: var(--redup); font-variant-numeric: tabular-nums; }
.grafik .nl-balik { font-size: 11px; fill: #fff; font-weight: 600; }
.grafik .ks { stroke: var(--garis); stroke-width: 1; }
.grafik .ambang { stroke: var(--samar); stroke-width: 1.5; stroke-dasharray: 5 4; }
.grafik path[data-tip], .grafik rect[data-tip] { transition: opacity .12s; }
.grafik path[data-tip]:hover, .grafik rect[data-tip]:hover { opacity: .72; }
.grafik figcaption {
  margin-top: 8px; font-size: 12px; color: var(--samar); line-height: 1.45;
}

/* keterangan seri: selalu ada begitu serinya lebih dari satu */
.keterangan {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px;
  font-size: 12px; color: var(--redup);
}
.keterangan span { display: inline-flex; align-items: center; gap: 6px; }
.keterangan i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }

/* meteran: satu rasio terhadap targetnya */
.meteran-jalur {
  margin-top: 10px; height: 8px; border-radius: 999px;
  background: var(--garis); overflow: hidden;
}
.meteran-jalur span { display: block; height: 100%; border-radius: 999px; }

/* ---------------------------------------------------- angka ringkas dasbor */
/* Dua angka penentu dibaca lebih dahulu, sisanya keterangan yang menjelaskan
   keduanya. Dua belas kotak seukuran berjajar menyatakan semuanya sama
   pentingnya, padahal beban studi dan kesiapan yang menentukan boleh tidaknya
   kurikulum disahkan. */
.kisi-utama {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px;
}
.stat-utama {
  background: var(--kertas); border: 1px solid var(--garis);
  border-left: 4px solid var(--garis-tegas);
  border-radius: var(--radius); padding: 15px 18px 16px; box-shadow: var(--bayang);
}
.stat-utama.baik { border-left-color: var(--hijau); }
.stat-utama.waspada { border-left-color: var(--kuning); }
.stat-utama.gawat { border-left-color: var(--merah); }
.stat-utama h4 {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--redup);
}
/* Angka besar memakai angka berlebar wajar, bukan tabular: pada ukuran sebesar
   ini setiap digit selebar nol membuat bilangan tampak renggang. */
.angka-utama { display: flex; align-items: baseline; gap: 7px; margin: 6px 0 0; }
.angka-utama b { font-size: 32px; line-height: 1.05; color: var(--tinta); }
.angka-utama span { font-size: 14px; color: var(--redup); }
.angka-utama em { font-style: normal; font-size: 13px; color: var(--samar); }
.stat-utama .petunjuk { margin: 9px 0 0; }

.kisi-stat {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-top: 14px;
}
.panel-stat {
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 13px 16px 14px; box-shadow: var(--bayang);
}
.panel-stat h4 {
  margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--samar);
}
.panel-stat dl { margin: 0; }
.panel-stat dl > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--garis);
}
.panel-stat dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.panel-stat dt { color: var(--redup); font-size: 13px; }
.panel-stat dd {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.panel-stat dl > div.sorot dd { color: var(--hijau); }
.panel-stat dl > div.awas dd { color: var(--merah); }

/* peta panas */
.gulir-datar { overflow-x: auto; }
table.panas { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
table.panas th {
  position: static; background: none; border: none; padding: 3px 7px;
  font-size: 11px; color: var(--samar); text-transform: none; letter-spacing: 0;
  white-space: nowrap;
}
table.panas tbody th { text-align: right; color: var(--redup); font-weight: 600; }
table.panas td {
  border: none; padding: 5px 8px; text-align: center; min-width: 34px;
  border-radius: 3px; font-variant-numeric: tabular-nums;
}
table.panas td.sel-panas { font-weight: 600; transition: outline-color .12s; }
table.panas td.sel-panas:hover { outline: 2px solid var(--tinta); outline-offset: -1px; }
table.panas td.angka { color: var(--redup); }
.skala-panas {
  display: flex; align-items: center; gap: 3px; margin-top: 9px;
  font-size: 11px; color: var(--samar);
}
.skala-panas i { width: 22px; height: 9px; display: block; }
.skala-panas i:first-of-type { border-radius: 3px 0 0 3px; }
.skala-panas i:last-of-type { border-radius: 0 3px 3px 0; }
.skala-panas span { margin: 0 4px; }

/* penunjuk bersama seluruh grafik */
.penunjuk {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--tinta); color: #fff; font-size: 12px; line-height: 1.45;
  padding: 7px 10px; border-radius: var(--radius-kecil);
  box-shadow: var(--bayang-tinggi); max-width: 260px;
}

.panel {
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 17px 19px; margin-bottom: 14px;
  box-shadow: var(--bayang);
}
.panel h3 { margin-top: 0; }

/* ---------------------------------------------------------------- alat */
/* Bilah alat menjauh dari apa pun yang berada di atasnya, tetapi tetap
   merapat pada daftar yang disaringnya — karena ia bagian dari daftar itu,
   bukan dari angka ringkas di atasnya. Saat menjadi unsur pertama halaman,
   jarak atasnya tidak diperlukan. */
.alat {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 18px 0 12px;
}
.alat:first-child { margin-top: 0; }
input, select, textarea {
  padding: 7px 10px; border: 1px solid var(--garis-tegas);
  border-radius: var(--radius-kecil); background: var(--kertas);
  color: var(--tinta); font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--biru); outline-offset: -1px; }
input[type=search], input[type=text] { min-width: 220px; }
.petunjuk { color: var(--samar); font-size: 12px; }

/* Warna tombol dititipkan pada peubah, dan keadaan sorot maupun tekan hanya
   menukar nilai peubahnya — bukan menulis ulang `background`. Bedanya penting:
   tombol ikon pada sisi kiri, pada tabel, dan pada tirai menetapkan latarnya
   sendiri; aturan sorot yang menulis `background` di sini akan menimpanya
   justru karena ia ditulis belakangan. Cara ini juga menggantikan
   `filter: brightness()` yang dahulu dipakai — penerang gambar memucatkan biru
   pekat alih-alih menegaskannya, dan hasilnya berlainan pada tiap warna. */
button, .tombol {
  --tb-diam: var(--biru);
  --tb-sorot: var(--biru-tua);
  --tb-tekan: #0C3054;
  --tb-garis: var(--biru);
  --tb-tinta: #fff;

  padding: 8px 15px; border: 1px solid var(--tb-garis);
  border-radius: var(--radius-kecil);
  background: var(--tb-latar, var(--tb-diam)); color: var(--tb-tinta);
  font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  transition: background .14s, border-color .14s, color .14s;
}
button:hover, .tombol:hover { --tb-latar: var(--tb-sorot); }
button:active, .tombol:active { --tb-latar: var(--tb-tekan); }
/* Penanda fokus dipasang untuk semua orang, bukan hanya yang menyalakan
   penyesuaian aksesibilitas: menjelajah dengan papan ketik itu lumrah. */
:is(button, .tombol):focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; }

button.samar, .tombol.samar {
  --tb-diam: var(--kertas); --tb-sorot: var(--biru-muda); --tb-tekan: #DBE6F1;
  --tb-garis: var(--garis-tegas); --tb-tinta: var(--biru);
}
button.samar:hover, .tombol.samar:hover { --tb-garis: var(--biru); --tb-tinta: var(--biru-tua); }
button.bahaya { --tb-diam: var(--merah); --tb-sorot: #8E2E2E; --tb-tekan: #762626;
  --tb-garis: var(--merah); }
button.kecil, .tombol.kecil { padding: 4px 10px; font-size: 12px; gap: 5px; }
/* Tombol mati tidak menanggapi sorot: nilai sorotnya dikembalikan ke nilai
   diamnya, sehingga tidak perlu satu pun aturan `:hover` tandingan. */
button[disabled] {
  opacity: .45; cursor: not-allowed;
  --tb-sorot: var(--tb-diam); --tb-tekan: var(--tb-diam);
}

/* -------------------------------------------------------------- tabel */
.gulir {
  overflow: auto; max-height: calc(100vh - 250px);
  border: 1px solid var(--garis); border-radius: var(--radius);
  background: var(--kertas); box-shadow: var(--bayang);
}
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
th, td {
  padding: 10px 14px; text-align: left; vertical-align: top; line-height: 1.5;
  border-bottom: 1px solid var(--garis);
}
/* Lajur terluar diberi bantalan lebih supaya isinya tidak menempel pada tepi
   bingkai penggulung. */
th:first-child, td:first-child { padding-left: 16px; }
th:last-child, td:last-child { padding-right: 16px; }
/* Kepala tabel dibuat sedikit lebih kelabu daripada isinya dan hurufnya lebih
   kecil serta lebih tebal: ia penanda lajur, bukan baris pertama data. */
thead th {
  position: sticky; top: 0; z-index: 2; background: var(--latar);
  padding-top: 9px; padding-bottom: 9px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--samar); white-space: nowrap; border-bottom: 1px solid var(--garis-tegas);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #F7F9FC; }
/* Sel yang dapat disunting tetap bernada kuning — keterangan pada bilah alat
   menyebut warna itu — tetapi diberi garis rambut di tepi kirinya. Tanpa garis
   itu dua lajur tersunting yang bersebelahan melebur jadi satu bidang kuning
   lebar, dan batas antarlajur yang justru ingin ditandai malah hilang. */
td.sunting {
  background: #FDFAF1; cursor: text;
  box-shadow: inset 1px 0 0 var(--garis);
}
td.sunting:hover { background: var(--kuning-muda); }
td.sunting:focus {
  outline: 2px solid var(--biru); outline-offset: -2px;
  background: var(--kertas); box-shadow: none;
}
td.tersimpan { background: var(--hijau-muda); transition: background .6s; }
td.angka, th.angka { text-align: right; font-variant-numeric: tabular-nums; }
td.tengah, th.tengah { text-align: center; }
/* Lajur tindakan. Tombolnya hanya ikon — pada tabel selebar ini kata "Ubah"
   dan "Hapus" berulang di setiap baris menjadi bising, sementara ikonnya sudah
   dikenali. Maknanya tetap tersedia lewat title dan aria-label, jadi tidak ada
   keterangan yang hilang bagi pembaca layar maupun bagi yang ragu. */
td.aksi, th.aksi { white-space: nowrap; text-align: right; }
td.aksi { padding: 5px 8px; }
td.aksi > * + * { margin-left: 2px; }

.ikon-aksi {
  width: 28px; height: 28px; padding: 0;
  display: inline-grid; place-items: center; vertical-align: middle;
  background: transparent; color: var(--samar);
  border: 1px solid transparent; border-radius: var(--radius-kecil);
}
.ikon-aksi .bi { font-size: 16px; }
.ikon-aksi:hover {
  background: var(--biru-muda); color: var(--biru-tua);
  border-color: var(--biru-muda); filter: none;
}
.ikon-aksi[data-hapus]:hover {
  background: var(--merah-muda); color: var(--merah); border-color: var(--merah-muda);
}
.ikon-aksi:focus-visible { outline: 2px solid var(--biru); outline-offset: 1px; }
/* Ikon baru tampak penuh saat barisnya disentuh; sebelum itu ia mundur agar
   tidak bersaing dengan isi tabelnya sendiri. */
.ikon-aksi { opacity: .65; transition: opacity .12s ease; }
tbody tr:hover .ikon-aksi, .ikon-aksi:focus-visible { opacity: 1; }
@media (hover: none) { .ikon-aksi { opacity: 1; } }
.pucat { color: var(--samar); }
.kosong { padding: 34px; text-align: center; color: var(--samar); }

/* ------------------------------------------------------- status & label */
.status-sesuai, .st-ada { color: var(--hijau); font-weight: 600; }
.status-periksa, .st-tidak { color: var(--merah); font-weight: 600; }
.st-sebagian { color: var(--kuning); font-weight: 600; }

.lencana {
  display: inline-block; padding: 1.5px 9px; border-radius: 999px;
  background: var(--biru-muda); color: var(--biru-tua);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.lencana.baik { background: var(--hijau-muda); color: var(--hijau); }
.lencana.salah { background: var(--merah-muda); color: var(--merah); }
.lencana.saran { background: var(--kuning-muda); color: var(--kuning); }
.lencana.diam { background: #EFF2F5; color: var(--redup); }
.lencana.pucat { background: #F5F7F9; color: var(--samar); }

/* ------------------------------------------------------------- validasi */
/* Putusan besar lebih dahulu, lalu kelompok butir, lalu temuan yang dapat
   dibentangkan. Warna tepi kiri menandai keadaan, tetapi sebutannya selalu
   ikut tertulis sehingga keadaan terbaca tanpa mengandalkan warna. */
.putusan {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 14px; padding: 13px 16px;
  border: 1px solid var(--garis); border-left: 4px solid var(--garis-tegas);
  border-radius: var(--radius); background: var(--kertas); box-shadow: var(--bayang);
}
.putusan b { font-size: 14px; }
.putusan span { color: var(--redup); font-size: 13px; }
.putusan.siap { border-left-color: var(--hijau); background: var(--hijau-muda); }
.putusan.siap b { color: var(--hijau); }
.putusan.belum { border-left-color: var(--merah); background: var(--merah-muda); }
.putusan.belum b { color: var(--merah); }

.kelompok-validasi { margin-top: 20px; }
#isiValidasi > .kelompok-validasi:first-child { margin-top: 0; }
.kelompok-validasi > header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 7px; margin-bottom: 10px; border-bottom: 1px solid var(--garis);
}
.kelompok-validasi > header h3 { margin: 0; font-size: 14px; }
.kelompok-validasi > header .bilah-siap { width: 74px; height: 6px; }
.kelompok-validasi > header .petunjuk { margin-left: auto; }
.kelompok-validasi > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

.butir-validasi {
  background: var(--kertas); border: 1px solid var(--garis); border-left-width: 4px;
  border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--bayang);
}
.butir-validasi.sesuai { border-left-color: var(--hijau); }
.butir-validasi.saran { border-left-color: var(--kuning); }
.butir-validasi.wajib { border-left-color: var(--merah); }

.butir-validasi .kepala {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.butir-validasi .kepala .nama { font-weight: 600; flex: 1; min-width: 220px; }
.butir-validasi .tanda {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--hijau);
}
.butir-validasi.saran .tanda { background: var(--kuning); }
.butir-validasi.wajib .tanda { background: var(--merah); }

.butir-validasi .lipat { width: 24px; height: 24px; }
.butir-validasi .lipat .bi { font-size: 16px; }
.butir-validasi .lipat .bi::before { display: block; transition: transform .15s; }
.butir-validasi .lipat[aria-expanded="true"] .bi::before { transform: rotate(90deg); }

.butir-validasi .acuan { margin: 4px 0 0 16px; }
.butir-validasi .temuan { margin: 9px 0 2px 16px; }
.butir-validasi .temuan ol {
  margin: 0; padding-left: 20px; max-height: 260px; overflow-y: auto;
  color: var(--redup); font-size: 13px;
}
.butir-validasi .temuan li { padding: 1.5px 0; }
.butir-validasi .temuan .ket { margin: 6px 0 0; }
.butir-validasi .temuan button { margin-top: 9px; }

.rinci { color: var(--redup); font-size: 13px; margin-top: 5px; }
.acuan { color: var(--samar); font-size: 12px; font-style: italic; margin-top: 3px; }

/* --------------------------------------------------------- matriks & peta */
.matriks td.tanda { text-align: center; font-weight: 700; color: var(--biru); }
.matriks th.miring {
  writing-mode: vertical-rl; transform: rotate(180deg);
  height: 108px; padding: 7px 3px; text-transform: none; font-size: 12px;
}
/* I-R-M adalah tingkatan berurut, jadi diwarnai satu rona yang makin gelap,
   bukan tiga rona berbeda yang menyiratkan kategori sederajat. */
.tk-I { background: #86b6ef; color: #0b0b0b; }
.tk-R { background: #2a78d6; color: #fff; }
.tk-M { background: #104281; color: #fff; }
.tk-I, .tk-R, .tk-M { text-align: center; font-weight: 700; }

/* ------------------------------------------------------------- tirai */
.tirai {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(21, 40, 61, .42); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 22px;
  animation: pudar .14s ease-out;
}
@keyframes pudar { from { opacity: 0 } to { opacity: 1 } }
@keyframes naik { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

.jendela {
  width: min(760px, 100%); max-height: 90vh; overflow: auto;
  background: var(--kertas); border-radius: 14px; box-shadow: var(--bayang-tinggi);
  animation: naik .18s ease-out;
}
.jendela header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid var(--garis);
  position: sticky; top: 0; background: var(--kertas); border-radius: 14px 14px 0 0;
}
.jendela header h3 { margin: 0; font-size: 16px; }
.jendela .isi { padding: 18px 22px; }
.jendela footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 22px; border-top: 1px solid var(--garis);
  position: sticky; bottom: 0; background: var(--kertas);
}
.tutup {
  background: none; border: none; color: var(--samar); font-size: 21px;
  line-height: 1; padding: 0 4px; cursor: pointer;
}
.tutup:hover { color: var(--tinta); filter: none; }

.borang { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 16px; }
.borang .medan { display: flex; flex-direction: column; gap: 4px; }
.borang .medan.lebar { grid-column: 1 / -1; }
.borang label { font-size: 12px; font-weight: 600; color: var(--redup); }
.borang label .wajib { color: var(--merah); }
.borang textarea { min-height: 74px; resize: vertical; }
.borang select[multiple] { min-height: 128px; }
.borang .bantuan { font-size: 12px; color: var(--samar); }
.borang .salah-medan { color: var(--merah); font-size: 12px; }
.borang input.salah, .borang select.salah, .borang textarea.salah { border-color: var(--merah); }

/* -------------------------------------------------------- saran agen LLM */
/* Tombol saran menempel pada isian yang dibantunya. Kehadirannya sepenuhnya
   ditentukan skrip: tanpa agen yang berlaku, tombol ini tidak pernah digambar. */
.saran-medan {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 2px; padding: 3px 9px;
  background: var(--ungu-muda); border: 1px solid var(--ungu-garis);
  color: var(--ungu); font-size: 12px; font-weight: 600;
  border-radius: 999px; cursor: pointer;
}
.saran-medan:hover { background: var(--ungu-garis); filter: none; }
.saran-medan:disabled { opacity: .6; cursor: progress; }
.saran-medan .bi { font-size: 13px; }

/* Tabel pratinjau usulan: teks panjang tetap terbaca, tidak dipangkas. */
#hasilSaran table td { white-space: normal; vertical-align: top; }
#hasilSaran .gulir { max-height: 46vh; }
#hasilSaran .alat { margin-top: 14px; }
#hasilSaran .alat label { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------- beranda lintas prodi */
/* Beranda adalah direktori, bukan dasbor: yang dikejar keterbacaan sekilas dan
   kesejajaran angka antarbaris, bukan kepadatan hiasan. Tiap kurikulum tampil
   sebagai satu baris berkisi tetap, sehingga MK, CPL, CPMK, dan sks selalu
   berada pada kolom yang sama meski kartunya berbeda. */
.bagian-fakultas { margin-top: 24px; }
#isiBeranda > .bagian-fakultas:first-child { margin-top: 0; }
.bagian-fakultas > header {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--garis);
}
.bagian-fakultas > header h3 { margin: 0; font-size: 14px; }
.bagian-fakultas > header .petunjuk { margin-left: auto; }

/* Daftar kurikulum per fakultas disajikan sebagai tabel: nama program studi dan
   nama kurikulum sama-sama panjang, dan angkanya perlu dibandingkan menurun.
   Sebagai kartu bersisian keduanya terpotong di tengah dan angkanya berpindah
   baris seenaknya. */
.tabel-beranda th[scope="row"] { font-weight: 400; }
.tabel-beranda td, .tabel-beranda th[scope="row"] { vertical-align: middle; }
.tabel-beranda tbody tr.aktif { background: var(--biru-muda); }
.tabel-beranda tbody tr.aktif:hover { background: var(--biru-muda); }

.sel-prodi { min-width: 0; }
.sel-prodi .nama-prodi {
  display: block; font-weight: 600; color: var(--tinta); font-size: 13px;
  line-height: 1.3;
}
.sel-prodi .petunjuk { display: block; }
/* Baris kedua sebuah program studi tidak mengulang namanya; sebagai gantinya
   satu garis tegak menandai bahwa ia masih milik baris di atasnya. */
tr.ulang .sel-prodi > * { visibility: hidden; }
tr.ulang .sel-prodi {
  position: relative;
}
tr.ulang .sel-prodi::before {
  content: ""; position: absolute; left: 11px; top: 0; bottom: 0;
  border-left: 1px solid var(--garis-tegas);
}

.buka-kur {
  display: flex; align-items: baseline; gap: 8px; min-width: 0; width: 100%;
  padding: 0; border: none; background: none; box-shadow: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.buka-kur:hover { filter: none; background: none; }
.buka-kur:focus-visible { outline: 2px solid var(--biru); outline-offset: 3px; }
.buka-kur .tahun {
  flex: 0 0 auto; font-weight: 700; color: var(--biru); font-variant-numeric: tabular-nums;
}
.buka-kur .nama {
  min-width: 0; font-size: 13px; color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buka-kur:hover .nama { text-decoration: underline; }

.sel-sks small { color: var(--samar); font-weight: 400; }
.sel-sks.cukup { color: var(--hijau); font-weight: 600; }
.sel-sks.kurang { color: var(--redup); }
.sel-siap { white-space: nowrap; }
.sel-siap .kesiapan { justify-content: flex-start; }

/* Bilah kesiapan: panjangnya menyatakan bagian butir yang sudah sesuai, warnanya
   menyatakan jenis sisa temuannya.

   Namanya sengaja berakhiran -siap, bukan .bilah saja. Halaman ini punya
   .bilah lain — bilah judul di puncak halaman — dan nama yang sama membuat
   padding beserta latar bilah judul ikut menempel di sini, sehingga meterannya
   tampil sebagai kotak kosong. Aturannya juga berdiri sendiri, tidak
   bersarang di bawah .kesiapan, karena halaman validasi memakainya pula di
   luar pembungkus itu. */
.bilah-siap {
  flex: 0 0 auto; width: 58px; height: 5px; border-radius: 999px;
  background: var(--garis); overflow: hidden;
}
.bilah-siap i { display: block; height: 100%; border-radius: 999px; }
.bilah-siap.baik i { background: var(--hijau); }
.bilah-siap.saran i { background: var(--kuning); }
.bilah-siap.salah i { background: var(--merah); }

.kesiapan { grid-area: kesiapan; justify-self: end; display: flex; align-items: center; gap: 8px; }
.kesiapan span { font-size: 12px; color: var(--redup); white-space: nowrap; }

.panel.hampa { text-align: center; padding: 36px 24px; }
.panel.hampa .ket { margin: 8px auto 0; }

@media (max-width: 660px) {
  /* Tabelnya sendiri sudah dapat digulir mendatar; yang perlu diciutkan hanya
     keterangan teks di samping meteran kesiapan. */
  .sel-siap .kesiapan span { display: none; }
}

/* -------------------------------------------------------- masuk sebagai */
.penyamaran {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 9px 26px; font-size: 13px;
  background: var(--kuning-muda); color: var(--kuning);
  border-bottom: 1px solid #EBD9A8;
}
.penyamaran b { color: #6E4B04; }
.penyamaran button { background: var(--kuning); border-color: var(--kuning); }

/* ------------------------------------------------------ pratinjau naskah */
.pratinjau {
  border: 1px solid var(--garis); border-radius: var(--radius);
  background: var(--kertas); box-shadow: var(--bayang); overflow: hidden;
}
.pratinjau iframe {
  display: block; width: 100%; height: calc(100vh - 240px); min-height: 480px;
  border: none; background: var(--latar);
}

/* ------------------------------------------------------- laman naskah */
/* Dua lajur: pengaturan yang menempel di kiri, hasilnya di kanan. Pengaturan
   rupa naskah adalah pekerjaan mencoba — digeser, dilihat, digeser lagi — dan
   itu menuntut keduanya tampak bersamaan, bukan bergantian. */
.naskah-ruang {
  display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 18px;
  align-items: start;
}
.naskah-atur {
  position: sticky; top: 16px;
  display: grid; gap: 18px; padding: 18px;
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--radius); box-shadow: var(--bayang);
}
.naskah-atur section { display: grid; gap: 11px; }
.naskah-atur section + section { padding-top: 16px; border-top: 1px solid var(--garis); }
.naskah-atur h3 {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--samar);
}
.atur-medan { display: grid; gap: 5px; font-size: 13px; color: var(--redup); }
.atur-medan select { width: 100%; }
/* Geser dan angkanya sebaris: angka yang berpindah baris membuat panel
   tersentak tiap kali ukurannya diubah. */
.atur-geser { display: flex; align-items: center; gap: 10px; }
.atur-geser input[type="range"] { flex: 1; min-width: 0; accent-color: var(--biru); }
.atur-geser output {
  flex: 0 0 46px; text-align: right;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--tinta);
}

.atur-warna { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.atur-warna input[type="color"] {
  flex: 0 0 30px; width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid var(--garis-tegas); border-radius: 7px; background: none;
}
.atur-warna input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.atur-warna input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.atur-warna b { display: block; font-size: 13px; font-weight: 600; color: var(--tinta); }
.atur-warna small { display: block; font-size: 11px; color: var(--samar); }

.atur-sakelar { display: flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; }
.atur-sakelar input { width: 15px; height: 15px; accent-color: var(--biru); }

.naskah-atur > button { width: 100%; }
.naskah-atur .petunjuk { margin: 0; line-height: 1.5; }

.naskah-hasil { display: grid; gap: 10px; min-width: 0; }
/* Bilah hasil: keterangan di kiri, unduhan menepi ke kanan. */
.naskah-bilah {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 12px; background: var(--kertas);
  border: 1px solid var(--garis); border-radius: var(--radius);
}
.naskah-bilah .petunjuk { margin: 0; flex: 1; min-width: 140px; }
.naskah-hasil .pratinjau iframe { height: calc(100vh - 268px); }

/* Di bawah lebar ini dua lajur membuat keduanya sama-sama sempit; pengaturan
   naik ke atas dan berhenti menempel. */
@media (max-width: 1080px) {
  .naskah-ruang { grid-template-columns: 1fr; }
  .naskah-atur { position: static; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .naskah-atur section + section { padding-top: 0; border-top: 0; }
}

/* --------------------------------------------------------------- pesan */
/* Wadah notifikasi selalu terpasang, jadi ia sendiri harus tembus klik.
   Hanya notifikasi yang sedang tampil yang menangkap tetikus. */
/* Pemberitahuan muncul di kanan atas — dekat arah pandang sesudah menekan
   tombol, dan tidak menutupi tombol tindakan yang lazimnya di kanan bawah.
   Warnanya tidak lagi memenuhi seluruh kartu: kartu tetap berlatar kertas,
   status disandang pita di tepi kiri dan ikonnya, sehingga teks tetap terbaca
   pada kontras tinggi dan pemberitahuan panjang tidak menjadi bidang pekat. */
.pesan {
  position: fixed; right: 18px; top: 18px; z-index: 130;
  display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.pesan > div {
  pointer-events: auto; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 20px 1fr 22px; gap: 10px;
  align-items: start;
  padding: 12px 12px 12px 16px;
  background: var(--kertas); color: var(--tinta);
  border: 1px solid var(--garis); border-left: 4px solid var(--samar);
  border-radius: var(--radius); box-shadow: var(--bayang-tinggi);
  font-size: 13px; line-height: 1.5;
  animation: geser-masuk .22s cubic-bezier(.22, 1, .36, 1);
}
.pesan > div.pergi { animation: geser-keluar .18s ease-in forwards; }

.pesan .rupa { width: 20px; height: 20px; margin-top: 1px; color: var(--samar); }
.pesan .rupa .bi { font-size: 21px; }
.pesan .isi { min-width: 0; }
.pesan .isi b { display: block; font-size: 13px; margin-bottom: 2px; }
.pesan .isi span { color: var(--redup); overflow-wrap: anywhere; }
.pesan .tutup {
  width: 22px; height: 22px; padding: 0; display: grid; place-items: center;
  background: transparent; border: 0; color: var(--samar); border-radius: 5px;
}
.pesan .tutup:hover { background: var(--latar); color: var(--tinta); filter: none; }
.pesan .tutup .bi { font-size: 13px; }

/* Bilah waktu yang menyusut menjelaskan mengapa kartunya akan hilang sendiri. */
.pesan .waktu {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; opacity: .3; transform-origin: left;
  animation: susut linear forwards;
}

.pesan > div.baik { border-left-color: var(--hijau); color: var(--hijau); }
.pesan > div.salah { border-left-color: var(--merah); color: var(--merah); }
.pesan > div.baik .rupa, .pesan > div.salah .rupa { color: currentColor; }
.pesan > div.baik .isi b, .pesan > div.salah .isi b { color: currentColor; }
.pesan > div .isi span { color: var(--redup); }

@keyframes geser-masuk {
  from { opacity: 0; transform: translateX(28px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes geser-keluar {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(28px); }
}
@keyframes susut { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 900px) {
  .pesan { right: 12px; left: 12px; top: 12px; width: auto; }
}

/* ------------------------------------------------------------- penanda muat */
.memuat { color: var(--samar); padding: 30px 0; }

/* Penanda kerja yang berjalan: tiga titik yang berdenyut bergantian. Dipakai
   di mana pun proses berlangsung tanpa kemajuan yang dapat diangkakan. */
.denyut { display: inline-flex; gap: 5px; align-items: center; vertical-align: middle; }
.denyut i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: denyut 1.05s ease-in-out infinite;
}
.denyut i:nth-child(2) { animation-delay: .16s; }
.denyut i:nth-child(3) { animation-delay: .32s; }
@keyframes denyut {
  0%, 70%, 100% { opacity: .25; transform: scale(.75); }
  35% { opacity: 1; transform: scale(1); }
}

/* Cincin berputar untuk tempat yang hanya menyediakan satu petak kecil. */
.cincin {
  width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: berputar .7s linear infinite; opacity: .8;
}
@keyframes berputar { to { transform: rotate(360deg); } }

/* Penanda kerja yang memakan waktu: satu panel utuh berisi denyut, keterangan
   apa yang sedang dikerjakan, dan bilah tak tentu. Dipakai pemandu, karena
   permintaan kepada agen dapat berlangsung puluhan detik dan layar yang diam
   selama itu tidak dapat dibedakan dari layar yang macet. */
.kerja {
  display: grid; gap: 12px; justify-items: center; text-align: center;
  padding: 30px 20px; border: 1px dashed var(--garis-tegas);
  border-radius: var(--radius); background: var(--latar);
}
.kerja .denyut { color: var(--biru); }
.kerja b { font-size: 14px; }
.kerja span { font-size: 12px; color: var(--redup); }
.kerja .bilah-tentu {
  width: min(260px, 100%); height: 4px; border-radius: 999px;
  background: var(--garis); overflow: hidden;
}
.kerja .bilah-tentu i {
  display: block; height: 100%; width: 40%; border-radius: 999px;
  background: var(--biru); animation: meluncur 1.25s ease-in-out infinite;
}
@keyframes meluncur {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(255%); }
}

/* Tombol yang sedang bekerja: cincin menggantikan kursor tunggu, dan tombolnya
   tidak berubah lebar supaya tata letak tidak melompat. */
button.bekerja { position: relative; color: transparent; pointer-events: none; }
button.bekerja::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid #fff; border-top-color: transparent;
  animation: berputar .7s linear infinite;
}
button.samar.bekerja::after { border-color: var(--biru); border-top-color: transparent; }

/* Bilah muat tipis di puncak layar selama kerja singkat yang belum memunculkan
   jendelanya (mis. menyiapkan borang). Memberi tanda bahwa klik tertangkap,
   sehingga pemakai tidak menekan ulang. Kursor ikut berubah jadi "progress". */
html.sibuk { cursor: progress; }
html.sibuk::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, transparent, var(--biru) 45%, var(--biru) 55%, transparent);
  background-size: 42% 100%; background-repeat: no-repeat;
  animation: bilah-sibuk 1.05s linear infinite;
  pointer-events: none;
}
@keyframes bilah-sibuk {
  0%   { background-position: -42% 0; }
  100% { background-position: 142% 0; }
}

/* Baris tiruan selagi isi papan belum tiba. */
.rangka { display: grid; gap: 8px; }
.rangka i {
  display: block; height: 12px; border-radius: 5px;
  background: linear-gradient(90deg, var(--garis) 25%, var(--latar) 50%, var(--garis) 75%);
  background-size: 240% 100%; animation: berkilau 1.3s ease-in-out infinite;
}
.rangka i:nth-child(2) { width: 78%; }
.rangka i:nth-child(3) { width: 88%; }
@keyframes berkilau {
  from { background-position: 140% 0; } to { background-position: -40% 0; }
}

/* selubung untuk laci menu di layar kecil */
.selubung {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(21, 40, 61, .38);
  animation: pudar .14s ease-out;
}

/* tombol laci hanya muncul di layar kecil */
#laci { display: none; }

/* ------------------------------------------------------------- layar kecil */
@media (max-width: 900px) {
  /* Menu menjadi laci yang menggeser masuk, bukan tumpukan tombol yang
     mendorong isi halaman ke bawah. */
  #sisi {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100dvh;
    width: 272px; flex-basis: 272px; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--bayang-tinggi);
  }
  body.laci-buka #sisi { transform: none; }
  body.rel { --lebar-sisi: 244px; }
  body.rel .merek-teks, body.rel .sisi-cari,
  body.rel .menu .teks, body.rel .jatidiri .rincian { display: revert; }
  /* Kepala sesi kembali sebagai baris tombol, bukan display bawaan <button>. */
  body.rel .grup { display: flex; }
  body.rel .sesi.terlipat .sesi-isi { display: none; }
  body.rel .sesi-isi { padding: 3px 8px 8px; }
  body.rel .sisi-kepala { flex-direction: row; }
  body.rel .menu { justify-content: flex-start; padding: 7px 10px; }

  #lipatSisi { display: none; }
  #laci { display: grid; }
  #utama { width: 100%; }
  #isi, .bilah, .navbar { padding-left: 16px; padding-right: 16px; }
  .navbar { gap: 10px; }
  .navbar-pilih { flex: 1 1 100%; }
  .navbar-pilih select { flex: 1; min-width: 0; }
  /* Pemisah antarketerangan ditiadakan saat keduanya berpindah baris. */
  .navbar-info { gap: 8px 12px; }
  .navbar-info > * + *::before { display: none; }
  .bilah { gap: 10px; }
  .gulir { max-height: none; }
  .borang { grid-template-columns: 1fr; }
  .kisi { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- perancang templat RPS */
textarea.kode {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 13px; line-height: 1.55; tab-size: 2; white-space: pre;
  overflow-wrap: normal; overflow-x: auto;
}

/* Tiga lajur: penanda yang tersedia, penyunting, lalu hasilnya. Pada layar
   sempit ketiganya menumpuk agar penyunting tetap selebar mungkin. */
.perancang {
  display: grid; gap: 16px; margin-top: 12px;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 1180px) { .perancang { grid-template-columns: 1fr; } }

.perancang label { display: block; font-size: 12px; font-weight: 600;
  color: var(--redup); margin: 10px 0 4px; }
.perancang label:first-child { margin-top: 0; }
.perancang .aksi { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.perancang .pratinjau { height: 640px; }
.perancang .pratinjau iframe { width: 100%; height: 100%; border: 0; }

.sisi-medan h4 { margin: 0 0 8px; font-size: 13px; }
.kelompok-medan { border: 1px solid var(--garis); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px; background: #fff; }
.kelompok-medan summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.kelompok-medan .petunjuk { margin: 6px 0; }
.kelompok-medan .sisip { display: block; width: 100%; text-align: left;
  margin-top: 4px; font-size: 12px; padding: 4px 7px; }

ul.keluhan { margin: 10px 0 0; padding-left: 18px; font-size: 13px;
  color: var(--merah); }
ul.keluhan li { margin-bottom: 3px; }

/* ------------------------------------------- pemandu penyusunan kurikulum */
/* Dua lajur: daftar tahapan yang selalu terlihat, dan tahapan yang sedang
   dikerjakan. Daftar tahapan sengaja tetap di tempat saat isinya bergulir,
   supaya pemakai tidak kehilangan gambaran seluruh alurnya. */
.pemandu {
  display: grid; gap: 16px; margin-top: 14px;
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 1000px) { .pemandu { grid-template-columns: 1fr; } }

.tahapan {
  list-style: none; margin: 0; padding: 8px;
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--radius); box-shadow: var(--bayang);
  position: sticky; top: 14px;
}
.tahap {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: var(--radius-kecil);
  font-size: 13px; color: var(--redup); cursor: pointer;
}
.tahap:hover { background: var(--latar); color: var(--tinta); }
.tahap .urut {
  flex: 0 0 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; font-size: 11px; font-weight: 700;
  background: var(--latar); color: var(--samar);
  border: 1px solid var(--garis-tegas);
}
.tahap .nama { flex: 1; min-width: 0; }
.tahap .maju { font-size: 11px; color: var(--samar); font-variant-numeric: tabular-nums; }
.tahap.tuntas .urut {
  background: var(--hijau-muda); color: var(--hijau); border-color: var(--hijau-muda);
}
.tahap.kini { background: var(--biru-muda); color: var(--biru-tua); font-weight: 600; }
.tahap.kini .urut { background: var(--biru); color: #fff; border-color: var(--biru); }
.tahap.kini .maju { color: var(--biru-tua); }

.tahap-isi {
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 16px 18px 18px; box-shadow: var(--bayang);
}
.tahap-isi > header { border-bottom: 1px solid var(--garis); padding-bottom: 12px;
  margin-bottom: 14px; }
.tahap-isi h3 { margin: 4px 0 6px; font-size: 16px; }
.tahap-isi .ket:last-child { margin-bottom: 0; }
.tahap-isi .panel { box-shadow: none; padding: 0; border: 0; margin-top: 4px; }

/* =========================================================== aksesibilitas */
/* Panel penyesuaian tampilan: tetap di sudut layar, dapat dibentangkan, dan
   pilihannya diingat antarkunjungan. Ditaruh di lapisan paling atas supaya
   tetap terjangkau meski laci menu atau jendela modal sedang terbuka. */
.a11y {
  position: fixed; right: 16px; bottom: 16px; z-index: 120;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

.a11y-tombol {
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--biru); color: #fff; border: 0;
  box-shadow: var(--bayang-tinggi);
}
.a11y-tombol:hover { filter: brightness(1.08); }
.a11y-tombol .bi { font-size: 21px; }

.a11y-panel {
  width: min(310px, calc(100vw - 32px));
  background: var(--kertas); color: var(--tinta);
  border: 1px solid var(--garis); border-radius: var(--radius);
  box-shadow: var(--bayang-tinggi);
  padding: 14px 15px 15px;
  order: -1;                       /* panel muncul di atas tombolnya */
}
.a11y-panel h4 { margin: 0 0 2px; font-size: 14px; }
.a11y-panel > p { margin: 0 0 12px; font-size: 12px; color: var(--redup); }
.a11y-baris { margin-bottom: 12px; }
.a11y-baris > span {
  display: block; font-size: 11px; font-weight: 600; color: var(--redup);
  margin-bottom: 5px;
}
.a11y-pilih { display: flex; gap: 6px; }
.a11y-pilih button {
  flex: 1; padding: 7px 4px; font-size: 12px; font-weight: 600;
  background: var(--latar); color: var(--redup);
  border: 1px solid var(--garis-tegas); border-radius: var(--radius-kecil);
}
.a11y-pilih button[aria-pressed="true"] {
  background: var(--biru-muda); color: var(--biru-tua); border-color: var(--biru);
}
.a11y-sakelar {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 2px; font-size: 13px; cursor: pointer;
}
.a11y-sakelar input { width: 15px; height: 15px; flex: 0 0 15px; margin: 0; }
.a11y-panel footer { margin-top: 10px; display: flex; justify-content: flex-end; }
.a11y-panel footer button { font-size: 12px; padding: 6px 11px; }

/* ---- pilihan yang dapat dinyalakan pemakai ---- */

/* Kontras bertingkat. Tingkat satu adalah tampilan bawaan, jadi tidak ada
   kelasnya sama sekali. Tingkat dua menarik warna redup mendekati tinta dan
   mempertegas garis; tingkat tiga menghitamkan tinta sepenuhnya, memutihkan
   latar, dan meniadakan bayangan — kedalaman digantikan garis, karena bayangan
   halus justru hilang bagi mata yang membutuhkan kontras tinggi. */
body.a11y-kontras-2 {
  --tinta: #101820;
  --redup: #37434F;
  --samar: #4C5967;
  --garis: #AEB9C6;
  --garis-tegas: #7C8898;
  --biru: #1B4A85;
  --biru-tua: #0F2E56;
  --hijau: #075532;
  --merah: #942424;
  --kuning: #6F4D02;
  --sisi-redup: #E8EEFC;
  --sisi-samar: #C4D2F2;
  --sisi-garis: #4E6FBE;
}

body.a11y-kontras-3 {
  --tinta: #000000;
  --redup: #16202B;
  --samar: #26313D;
  --latar: #FFFFFF;
  --kertas: #FFFFFF;
  --garis: #6B7787;
  --garis-tegas: #333F4C;
  --biru: #0B336B;
  --biru-tua: #061C3E;
  --biru-muda: #DDE8F6;
  --hijau: #044426;
  --hijau-muda: #DCF0E4;
  --merah: #7A1616;
  --merah-muda: #F8E0E0;
  --kuning: #5A3D00;
  --kuning-muda: #FBEED2;
  --ungu: #3F3474;
  --ungu-muda: #E8E5F6;
  --sisi: #06184A;
  --sisi-tinta: #FFFFFF;
  --sisi-redup: #FFFFFF;
  --sisi-samar: #DCE5FA;
  --sisi-garis: #7E9AE0;
  --sisi-sorot: #9CBEFF;
  --sisi-sorot-latar: #0F2C74;
  --bayang: none;
  --bayang-tinggi: 0 0 0 1px #333F4C;
}

/* Berlaku bagi kedua tingkat: keterangan tidak lagi diredupkan, batas bidang
   dipertegas, dan lencana diberi garis sendiri agar tidak bergantung warna. */
:is(body.a11y-kontras-2, body.a11y-kontras-3) :is(.ket, .petunjuk, .bantuan) {
  color: var(--redup);
}
:is(body.a11y-kontras-2, body.a11y-kontras-3) :is(.panel, table, .kartu > div) {
  border-color: var(--garis-tegas);
}
:is(body.a11y-kontras-2, body.a11y-kontras-3) th { color: var(--tinta); }
:is(body.a11y-kontras-2, body.a11y-kontras-3) .lencana { border: 1px solid currentColor; }
:is(body.a11y-kontras-2, body.a11y-kontras-3) .menu { color: var(--sisi-redup); }

/* Pada tingkat tiga polanya dipadamkan: latar bermotif menurunkan kontras teks
   di atasnya, dan itu justru berlawanan dengan yang diminta pemakai. */
body.a11y-kontras-3 #sisi { background: var(--sisi); }
body.a11y-kontras-3 .menu.aktif { outline: 2px solid var(--sisi-sorot); outline-offset: -2px; }
body.a11y-kontras-3 :is(.panel, .tahap-isi, .tahapan, .kartu > div) {
  border: 1px solid var(--garis-tegas);
}
body.a11y-kontras-3 button:not(.samar):not(.ikon-tombol) { border: 1px solid var(--biru-tua); }

/* Pilihan huruf. Hanya satu peubah yang diganti; seluruh halaman mengikutinya. */
body.a11y-huruf-1 { --huruf: "Poppins", system-ui, sans-serif; }
body.a11y-huruf-2 { --huruf: "Inter", system-ui, sans-serif; }
/* Naskah kode tetap bermuka tetap apa pun pilihan hurufnya — di sana lebar
   karakter yang seragam lebih berguna daripada keselarasan rupa. */
body.a11y-huruf-1 textarea.kode, body.a11y-huruf-2 textarea.kode,
body.a11y-huruf-1 code, body.a11y-huruf-2 code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Ukuran teks: hanya ukuran huruf yang berubah, tata letaknya dibiarkan utuh
   supaya tabel lebar dan papan bersisian tidak ikut berantakan. */
body.a11y-teks-1 { font-size: 15.5px; }
body.a11y-teks-2 { font-size: 17px; }
body.a11y-teks-1 .menu, body.a11y-teks-1 td, body.a11y-teks-1 th,
body.a11y-teks-1 button, body.a11y-teks-1 input, body.a11y-teks-1 select,
body.a11y-teks-1 textarea, body.a11y-teks-1 .tombol { font-size: 14px; }
body.a11y-teks-2 .menu, body.a11y-teks-2 td, body.a11y-teks-2 th,
body.a11y-teks-2 button, body.a11y-teks-2 input, body.a11y-teks-2 select,
body.a11y-teks-2 textarea, body.a11y-teks-2 .tombol { font-size: 15.5px; }
body.a11y-teks-1 .ket, body.a11y-teks-1 .petunjuk, body.a11y-teks-1 .bantuan,
body.a11y-teks-1 .kartu span, body.a11y-teks-1 .lencana { font-size: 13px; }
body.a11y-teks-2 .ket, body.a11y-teks-2 .petunjuk, body.a11y-teks-2 .bantuan,
body.a11y-teks-2 .kartu span, body.a11y-teks-2 .lencana { font-size: 14px; }
body.a11y-teks-1 h2 { font-size: 21px; }
body.a11y-teks-2 h2 { font-size: 23px; }
body.a11y-teks-1 h3 { font-size: 17px; }
body.a11y-teks-2 h3 { font-size: 18.5px; }
body.a11y-teks-1 .kartu b { font-size: 27px; }
body.a11y-teks-2 .kartu b { font-size: 29px; }
body.a11y-teks-1 .grup { font-size: 11px; }
body.a11y-teks-2 .grup { font-size: 12px; }

/* Jarak baris renggang; angka mengikuti anjuran WCAG 1.4.12. */
body.a11y-renggang { line-height: 1.85; letter-spacing: .012em; }
body.a11y-renggang p, body.a11y-renggang li { margin-bottom: 1.1em; }
body.a11y-renggang td, body.a11y-renggang th { padding-top: 10px; padding-bottom: 10px; }

/* Tautan bergaris bawah: warna saja tidak cukup menandai tautan. */
body.a11y-tautan :is(a, .tombol-tautan):not(.tombol):not(.menu):not(.pindah-ruang) {
  text-decoration: underline; text-underline-offset: 2px;
}

/* Kurangi gerak, sejalan dengan prefers-reduced-motion. */
body.a11y-diam *, body.a11y-diam *::before, body.a11y-diam *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* Penanda fokus tebal, berguna bagi yang menjelajah dengan papan ketik. */
body.a11y-fokus :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--kuning); outline-offset: 2px; border-radius: 3px;
}

@media (max-width: 900px) { .a11y { right: 12px; bottom: 12px; } }
@media print { .a11y { display: none; } }

/* ======================================================== halaman publik */
/* Halaman muka, harga, dan pendaftaran memakai lembar gaya yang sama dengan
   konsol supaya warna, huruf, dan tombolnya satu keluarga — pengunjung yang
   kelak menjadi pemakai tidak menemui dua aplikasi yang berlainan rupa. */
.halaman-publik { background: var(--kertas); }
.pub-lebar { width: min(1320px, 100%); margin: 0 auto; padding: 0 28px; }
.pub-sempit { max-width: 760px; margin-inline: auto; }
.pub-tengah { text-align: center; margin-top: 22px; }

.tautan-lanjut { font-weight: 600; text-decoration: none; }
.tautan-lanjut:hover { text-decoration: underline; }

/* ---- kepala ---- */
.pub-kepala {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--garis);
}
.pub-kepala .pub-lebar {
  display: flex; align-items: center; gap: 26px; height: 62px;
}
/* Merek di kiri, sisanya menepi ke kanan sebagai satu kelompok. */
.pub-kanan { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.pub-merek {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--tinta); font-weight: 700; font-size: 16px;
}
.pub-merek img { width: 30px; height: 30px; }
.pub-nav { display: flex; gap: 22px; }
.pub-nav a { color: var(--redup); text-decoration: none; font-size: 14px; font-weight: 700; }
.pub-nav a:hover { color: var(--biru-tua); }

@media (max-width: 760px) { .pub-nav { display: none; } }

/* Pada telepon merek dan tombol kepala berjumlah lebih lebar daripada layarnya,
   dan kelebihannya membuat seluruh halaman dapat digeser mendatar — tajuk
   pembuka pun ikut terpotong. Yang dikecilkan jarak dan bantalannya, bukan
   tombolnya: “Masuk” tetap perlu berada di tempat yang dicari. */
@media (max-width: 560px) {
  .pub-lebar { padding: 0 18px; }
  .pub-kepala .pub-lebar { gap: 12px; height: 58px; }
  .pub-kepala .pub-merek { font-size: 14px; white-space: nowrap; }
  .pub-kepala .pub-merek img { width: 26px; height: 26px; }
  .pub-kanan { gap: 12px; }
  .pub-kanan .tombol { padding: 7px 14px; font-size: 13px; white-space: nowrap; }
}

/* Di bawah lebar ini nama merek tidak lagi muat berdampingan dengan tombolnya;
   lambangnya sendiri sudah cukup menandai halaman siapa yang sedang dibuka. */
@media (max-width: 420px) {
  .pub-kepala .pub-merek span { display: none; }
}

/* ---- pembuka ---- */
/* Latarnya tiga lapis: kisi tipis yang memudar ke bawah, dua noda warna merek,
   lalu kertas. Kisinya bukan hiasan — ia memberi kesan bidang kerja yang
   terukur, nada yang sama dengan yang dijanjikan isi halamannya. */
:root {
  --pola-kisi: url("data:image/svg+xml,<svg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='46'%20height='46'><path%20d='M46%200H0v46'%20fill='none'%20stroke='%23103A66'%20stroke-opacity='.07'%20stroke-width='1'/></svg>");
}

/* Tanpa garis penutup: di bawah pembuka duduk blok ajakan yang gelap, dan
   sehelai garis terang di antaranya hanya akan terbaca sebagai celah. */
.pub-hero {
  position: relative; overflow: hidden;
  padding: 76px 0 86px;
  background:
    radial-gradient(860px 440px at 10% -8%, rgba(22, 84, 138, .11) 0%, transparent 62%),
    radial-gradient(700px 400px at 94% 2%, rgba(10, 107, 61, .085) 0%, transparent 58%),
    var(--kertas);
}
/* Kisi dipasang pada lapisan sendiri supaya dapat ditumpulkan dengan topeng;
   menaruhnya pada latar utama akan ikut menopengkan gradasi warnanya. */
.pub-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--pola-kisi) 0 0 / 46px 46px repeat;
  -webkit-mask-image: radial-gradient(112% 88% at 50% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(112% 88% at 50% 0%, #000 0%, transparent 70%);
}
/* Dua lajur, dan lajur rekaman diberi bagian yang lebih besar. Bagi rekaman
   antarmuka, lebar bukan soal keseimbangan gambar melainkan soal keterbacaan:
   yang ditayangkan tabel dan temuan berhuruf kecil. Salinan pembuka justru
   lebih baik pada lajur yang tidak terlalu lebar. */
.pub-hero .pub-lebar {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr);
  gap: 48px; align-items: center;
}
/* Pembuka satu lajur, dipakai halaman yang tidak menyertakan rekaman di
   sebelahnya. Bentuknya sama — kisi, gradasi, tipografi — sehingga tiap halaman
   dibuka dengan cara yang sama, hanya isinya yang berbeda. */
.pub-hero.tunggal { padding: 62px 0 60px; }
.pub-hero.tunggal .pub-lebar { display: block; }
.pub-hero.tunggal .hero-teks { max-width: 800px; margin: 0 auto; text-align: center; }
.pub-hero.tunggal .hero-teks > p { margin-inline: auto; }
.pub-hero.tunggal .hero-aksi,
.pub-hero.tunggal .hero-bukti { justify-content: center; }
.pub-hero.tunggal .hero-bukti { gap: 10px 30px; }

.hero-teks h1 {
  margin: 0 0 14px; font-size: clamp(30px, 3.5vw, 44px); line-height: 1.08;
  letter-spacing: -.026em; text-wrap: balance;
}
.hero-teks h1 em { font-style: normal; color: var(--biru); }
.hero-teks > p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--redup); }
.hero-aksi { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.hero-aksi .tombol { padding: 11px 22px; font-size: 14px; font-weight: 600; }
.hero-aksi .tombol:not(.samar) { box-shadow: 0 10px 22px -8px rgba(22, 84, 138, .55); }
.hero-aksi .tombol .bi { font-size: 14px; }

/* Deret bukti singkat: yang dicari pengunjung lembaga adalah acuan hukumnya dan
   bentuk keluarannya, bukan kata sifat. */
.hero-bukti {
  list-style: none; display: flex; flex-wrap: wrap; gap: 9px 24px;
  margin: 28px 0 0; padding: 19px 0 0; border-top: 1px solid var(--garis);
}
.hero-bukti li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--redup); }
.hero-bukti .bi { flex: 0 0 auto; font-size: 16px; color: var(--hijau); }

/* Panggung rekaman mengisi lajur kanannya; min-width nol supaya bingkai yang
   isinya tak dapat menyusut tidak mendorong lajur kiri menyempit. */
.hero-panggung { position: relative; min-width: 0; }
/* Cahaya di belakang bingkai. Ia tidak menandai apa pun, tugasnya hanya
   mengangkat bingkai dari kertas supaya rekamannya terbaca sebagai layar
   tersendiri, bukan sebagai gambar yang ditempel. */
.hero-panggung::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: 8% 3% -6%;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(22, 84, 138, .22) 0%, transparent 72%);
  filter: blur(56px);
}

/* Bingkainya sendiri — .tayang-bingkai — tinggal di bagian tayangan, karena
   halaman fitur memakai bingkai yang sama persis. */
.hero-tayang { position: relative; z-index: 1; margin: 0; }
/* Bingkai pembuka mengapung lebih tinggi daripada bingkai di halaman fitur:
   ia satu-satunya di layar, dan bayang yang lebih dalam itu yang mengangkatnya
   dari kertas. */
.hero-tayang .tayang-bingkai {
  box-shadow:
    0 2px 4px rgba(21, 40, 61, .07),
    0 22px 44px -20px rgba(21, 40, 61, .34),
    0 54px 108px -40px rgba(21, 40, 61, .44);
}
/* Keterangan keluar dari bingkai: di dalam bingkai gelap ia menuntut warna
   sendiri, dan tepi bawah rekaman menjadi bertingkat dua. */
.hero-tayang figcaption {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px 16px; flex-wrap: wrap;
  margin-top: 13px; font-size: 13px; color: var(--samar);
}
.hero-tayang .tayang-judul { color: var(--redup); }
.hero-tayang figcaption a {
  color: var(--biru); text-decoration: none; font-weight: 600; white-space: nowrap;
}
.hero-tayang figcaption a:hover { text-decoration: underline; }

/* Di bawah lebar ini dua lajur berdampingan membuat keduanya sama-sama sempit;
   salinan naik ke atas, rekaman turun ke bawahnya dengan lebar penuh. */
@media (max-width: 900px) {
  .pub-hero { padding: 48px 0 56px; }
  .pub-hero .pub-lebar { grid-template-columns: 1fr; gap: 34px; }
  .hero-panggung::before { display: none; }
}
@media (max-width: 560px) {
  .hero-tayang figcaption { justify-content: flex-start; }
}

/* ---- bagian isi ---- */
.pub-bagian { padding: 74px 0; }
.pub-berlatar { background: var(--latar); border-block: 1px solid var(--garis); }
/* Lebarnya diukur dari keterangan, bukan dari judulnya. Pada 60ch keterangan
   yang panjang — seperti penjelasan pemeliharaan tahunan — pecah jadi lima
   baris pendek yang terbaca seperti sajak, padahal ia satu paragraf biasa.
   Judulnya sendiri tetap pendek karena `text-wrap: balance` yang membaginya. */
/* Kepala bagian: label bertanda, judul, keterangan, lalu satu garis pendek
   sebagai penutup. Susunannya rata tengah dan berjarak tetap, sehingga tiap
   bagian halaman dibuka dengan irama yang sama persis — keteraturan itulah
   yang membuat halaman terbaca sebagai satu terbitan, bukan kumpulan blok. */
.pub-judul { margin: 0 auto 44px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.pub-judul h1, .pub-judul h2 {
  margin: 0; font-size: clamp(25px, 3vw, 36px); line-height: 1.16;
  letter-spacing: -.026em; text-wrap: balance;
}
/* Keterangan diukur sendiri, lebih sempit daripada judulnya: judul yang
   melebar tetap terbaca sekali lihat, paragraf yang melebar tidak. */
.pub-judul p { margin: 13px 0 0;
  color: var(--redup); font-size: 16px; line-height: 1.65;
}
/* Garis pendek di bawah kepala bagian. Ia tidak menyampaikan apa-apa, tugasnya
   memisahkan kepala dari isinya tanpa memakai garis melintang yang memotong
   halaman. */
.pub-judul::after {
  content: ""; width: 46px; height: 3px; margin-top: 22px; border-radius: 999px;
  background: linear-gradient(90deg, var(--biru), var(--hijau));
}

/* Label kecil di atas judul menamai bagiannya tanpa memakan tinggi sebuah
   tajuk kedua — pembaca yang memindai tahu ia sedang di bagian mana. Diberi
   bingkai supaya terbaca sebagai penanda yang memang dipasang, bukan sebaris
   teks yang kebetulan ditulis dengan huruf besar. */
.pub-label {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 16px; padding: 5px 12px 5px 10px; border-radius: 999px;
  background: var(--biru-muda); border: 1px solid var(--garis-tegas);
  color: var(--biru-tua);
  font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}
.pub-label::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--biru);
}
/* Di atas latar kelabu, kepingan berlatar sama akan lenyap; yang dibalik hanya
   latarnya, warnanya tetap. */
.pub-berlatar .pub-label { background: var(--kertas); }

/* Tiga lajur tetap, bukan auto-fit: enam kartu jadi dua baris penuh pada layar
   lebar, dan tak pernah menyisakan satu kartu yatim di baris terakhir. */
.pub-kisi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1000px) { .pub-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .pub-kisi { grid-template-columns: 1fr; } }

.pub-kartu {
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: 14px; padding: 24px 22px 25px; box-shadow: var(--bayang);
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.pub-kartu:hover {
  transform: translateY(-2px); border-color: var(--garis-tegas);
  box-shadow: 0 14px 32px -16px rgba(16, 45, 114, .34);
}
.kartu-ikon {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px;
  border-radius: 11px; background: var(--biru-muda); color: var(--biru);
  box-shadow: inset 0 0 0 1px rgba(22, 84, 138, .11);
}
.kartu-ikon .bi { font-size: 21px; }
.pub-kartu h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: -.012em; }
.pub-kartu p { margin: 0; font-size: 14px; color: var(--redup); line-height: 1.65; }

@media (prefers-reduced-motion: reduce) { .pub-kartu:hover { transform: none; } }

/* ---- langkah ---- */
.pub-langkah {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
}
.pub-langkah li { display: flex; gap: 13px; align-items: flex-start; }
.pub-langkah .nomor {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--biru); color: #fff; font-weight: 700; font-size: 13px;
}
.pub-langkah b { display: block; font-size: 14px; margin-bottom: 3px; }
.pub-langkah span { font-size: 13px; color: var(--redup); line-height: 1.55; }

/* ---- paket ---- */
/* Empat paket berjajar sebaris; auto-fit dengan lebar minimum yang besar
   membuat paket keempat jatuh sendirian ke baris berikutnya, dan satu kartu
   yatim di bawah tiga kartu terbaca sebagai kekeliruan tata letak. */
.pub-paket {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  align-items: start;
}
@media (max-width: 1160px) { .pub-paket { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pub-paket { grid-template-columns: 1fr; } }
.kartu-paket {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: 14px; padding: 24px 20px 20px; box-shadow: var(--bayang);
}
.kartu-paket.disorot { border-color: var(--biru); box-shadow: var(--bayang-tinggi); }
.kartu-paket .pita {
  position: absolute; top: -11px; left: 22px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--biru); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
}
.kartu-paket h3 { margin: 0 0 4px; font-size: 18px; }
.paket-ringkas { margin: 0 0 16px; font-size: 13px; color: var(--redup); min-height: 2.6em; }
.paket-harga { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin: 0 0 18px; }
.paket-harga b { font-size: 26px; letter-spacing: -.02em; }
.paket-harga span { font-size: 13px; color: var(--samar); }
.paket-harga em {
  flex-basis: 100%; font-style: normal; font-size: 12px; color: var(--hijau);
  font-weight: 600;
}

.paket-batas, .paket-fitur { list-style: none; margin: 0; padding: 0; }
.paket-batas { border-block: 1px solid var(--garis); padding: 12px 0; margin-bottom: 12px; }
.paket-batas li { font-size: 13px; color: var(--redup); padding: 3px 0; }
.paket-batas b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.paket-fitur li {
  position: relative; padding: 4px 0 4px 23px; font-size: 13px; color: var(--redup);
}
.paket-fitur li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 14px; height: 14px; border-radius: 50%;
}
.paket-fitur li.ada::before {
  background: var(--hijau-muda);
  box-shadow: inset 0 0 0 4px var(--hijau-muda), inset 0 0 0 5px var(--hijau);
}
.paket-fitur li.tiada::before { background: var(--garis); }
.paket-fitur li.tiada { color: var(--samar); text-decoration: line-through; }
/* Tombol dirapatkan ke dasar kartu supaya seluruh kartu berakhir sejajar
   meski keterangan paketnya berbeda panjang. */
.kartu-paket .tombol { margin-top: auto; padding-top: 9px; justify-content: center; }
.paket-fitur { margin-bottom: 18px; }

/* ---- paket berbaring ---- */
/* Dua paket pemeliharaan tidak cukup mengisi kisi empat lajur, dan dua petak
   kosong di sebelahnya terbaca seperti ada yang gagal dimuat. Keduanya
   dibentangkan mendatar: satu paket satu baris, dengan cakupan, isi, dan harga
   jatuh pada lajur yang sama sehingga langsung dapat disandingkan — justru
   lebih mudah dibandingkan daripada saat berdiri bersebelahan. */
.pub-paket.tegak { grid-template-columns: 1fr; gap: 14px; }
.pub-paket.tegak .kartu-paket {
  display: grid;
  /* Lajur harga berlebar tetap, bukan `auto`: dibiarkan mengikuti isinya,
     "Rp14.900.000" akan menggeser seluruh lajur kartu kedua dan kedua paket
     tidak lagi sebaris — padahal disandingkan itulah gunanya susunan ini. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr) minmax(0, 1fr) 220px;
  grid-template-rows: auto 1fr;
  align-items: start; gap: 6px 34px; padding: 24px 26px;
}
.pub-paket.tegak .paket-kepala { grid-column: 1; grid-row: 1 / -1; }
.pub-paket.tegak h3 { font-size: 16px; }
.pub-paket.tegak .paket-ringkas { margin: 8px 0 0; min-height: 0; }
.pub-paket.tegak .paket-batas,
.pub-paket.tegak .paket-fitur {
  grid-row: 1 / -1; margin: 0; padding: 0 0 0 24px;
  border: 0; border-left: 1px solid var(--garis);
}
.pub-paket.tegak .paket-batas { grid-column: 2; }
.pub-paket.tegak .paket-fitur { grid-column: 3; }
.pub-paket.tegak .paket-harga {
  grid-column: 4; grid-row: 1; margin: 0;
  justify-content: flex-end; text-align: right;
}
.pub-paket.tegak .paket-harga b { font-size: 21px; }
.pub-paket.tegak .kartu-paket .tombol {
  grid-column: 4; grid-row: 2; align-self: end; margin-top: 14px;
}

/* Pada layar sempit susunan mendatar itu tidak lagi muat. Kartunya dikembalikan
   ke bentuk bertumpuk lewat `display: flex` — penempatan lajur dan barisnya
   ikut padam dengan sendirinya, tanpa satu pun aturan yang perlu dibatalkan. */
@media (max-width: 1000px) {
  .pub-paket.tegak .kartu-paket {
    display: flex; flex-direction: column; padding: 24px 20px 20px;
  }
  .pub-paket.tegak .paket-kepala { margin-bottom: 16px; }
  .pub-paket.tegak .paket-harga {
    justify-content: flex-start; text-align: left; margin-bottom: 18px;
  }
  .pub-paket.tegak .paket-batas {
    padding: 12px 0; margin-bottom: 12px;
    border-left: 0; border-block: 1px solid var(--garis);
  }
  .pub-paket.tegak .paket-fitur { padding-left: 0; border-left: 0; margin-bottom: 18px; }
  .pub-paket.tegak .kartu-paket .tombol { margin-top: auto; }
}

/* ---- tanya jawab ---- */
.pub-tanya { margin-top: 54px; max-width: 780px; margin-inline: auto; }
.pub-tanya h2 { font-size: 18px; margin: 0 0 16px; text-align: center; }
.pub-tanya dl { margin: 0; display: grid; gap: 2px; }
.pub-tanya dl > div {
  padding: 15px 0; border-bottom: 1px solid var(--garis);
}
.pub-tanya dt { font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.pub-tanya dd { margin: 0; font-size: 14px; color: var(--redup); line-height: 1.6; }

/* ---- ajakan ---- */
/* Sebuah bilah mendatar, bukan pembuka kedua. Duduk tepat di bawah pembuka,
   susunan bertumpuk-di-tengah akan mengulang bentuk yang baru saja dilihat dan
   membuat halaman terasa memulai dua kali; keterangan di kiri dengan tindakan
   di kanan terbaca sebagai satu keterangan tambahan yang selesai dalam sebaris. */
.pub-ajakan {
  padding: 30px 0; color: var(--sisi-tinta);
  background:
    var(--pola-sisi) 0 0 / 68px 68px repeat,
    radial-gradient(130% 150% at 8% 0%, rgba(255, 255, 255, .1) 0%, transparent 60%),
    var(--sisi);
}
.pub-ajakan .pub-lebar {
  display: flex; align-items: center; gap: 16px 30px; flex-wrap: wrap;
}
.ajakan-ikon {
  display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px;
  border-radius: 13px; color: var(--sisi-sorot);
  background: var(--sisi-lapis); border: 1px solid var(--sisi-garis);
}
.ajakan-ikon .bi { font-size: 21px; }
/* Lebar dasar yang lapang membuat tombolnya turun ke baris sendiri begitu
   keterangannya mulai berdesakan, alih-alih memerasnya jadi tiga baris. */
.ajakan-teks { flex: 1 1 420px; min-width: 0; }
.pub-ajakan h2 {
  margin: 0 0 5px; font-size: clamp(17px, 1.9vw, 21px); letter-spacing: -.015em;
}
.pub-ajakan p {
  margin: 0; color: var(--sisi-redup); font-size: 14px; line-height: 1.6;
}
.pub-ajakan .hero-aksi { flex: 0 0 auto; margin-top: 0; }
.pub-ajakan .hero-aksi .tombol { padding: 9px 18px; font-size: 14px; }

/* Begitu tombolnya turun ke baris sendiri, ia dirapatkan ke tepi kiri
   keterangan — bukan ke tepi bilah — supaya keduanya tetap satu blok. */
@media (max-width: 900px) { .pub-ajakan .hero-aksi { margin-left: 76px; } }
@media (max-width: 560px) {
  .pub-ajakan { padding: 26px 0; }
  .ajakan-ikon { display: none; }
  .pub-ajakan .hero-aksi { margin-left: 0; }
}
/* Di atas latar gelap, biru tindakan yang dipakai di seluruh aplikasi justru
   tenggelam. Tombol utamanya dibalik jadi kertas di atas biru — bobot yang sama
   dengan aslinya, tetapi terbaca. */
.pub-ajakan .tombol:not(.samar) {
  background: var(--kertas); border-color: var(--kertas); color: var(--biru-tua);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .55);
}
.pub-ajakan .tombol:not(.samar):hover { filter: none; background: #E9F0F9; }
.pub-ajakan .tombol.samar {
  background: transparent; color: var(--sisi-tinta); border-color: var(--sisi-garis);
}
.pub-ajakan .tombol.samar:hover { background: rgba(255, 255, 255, .1); }

/* ---- borang pendaftaran ---- */
.borang-daftar h2 {
  font-size: 14px; margin: 26px 0 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--garis);
}
.borang-daftar h2:first-of-type { margin-top: 0; }
.borang-daftar input, .borang-daftar select, .borang-daftar textarea {
  width: 100%; padding: 9px 11px; font: inherit;
  border: 1px solid var(--garis-tegas); border-radius: var(--radius-kecil);
  background: var(--kertas); color: var(--tinta);
}
.borang-daftar input:focus, .borang-daftar select:focus, .borang-daftar textarea:focus {
  outline: 2px solid var(--biru); outline-offset: -1px;
}

/* Halaman yang pembukanya sudah menyampaikan judul tidak perlu jarak penuh
   sekali lagi di bawahnya. */
.pub-bagian.rapat { padding-top: 34px; }

/* Panel setelah borang terkirim. */
.panel-terkirim {
  max-width: 640px; margin: 0 auto; padding: 34px 34px 32px; text-align: center;
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--radius); box-shadow: var(--bayang);
}
.terkirim-rupa {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--hijau-muda); color: var(--hijau);
}
.terkirim-rupa .bi { font-size: 26px; }
.panel-terkirim h2 { margin: 0 0 22px; font-size: 18px; letter-spacing: -.015em; }

/* Langkahnya rata kiri walau panelnya rata tengah: deretan berurut yang
   dipusatkan menyulitkan mata menemukan awal tiap baris. */
.terkirim-langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; text-align: left; }
.terkirim-langkah li { display: flex; gap: 13px; align-items: flex-start; }
.terkirim-langkah > li > b {
  display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--biru-muda); color: var(--biru-tua);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.terkirim-langkah div b { display: block; font-size: 14px; margin-bottom: 2px; }
.terkirim-langkah div span { font-size: 13px; color: var(--redup); line-height: 1.6; }
.terkirim-kaki {
  margin: 24px 0 18px; padding-top: 18px; border-top: 1px solid var(--garis);
  font-size: 13px; color: var(--samar);
}
.panel-terkirim .tombol { padding: 10px 22px; font-weight: 600; }

/* Dua lajur: keterangan pendaftar di kiri, keputusan paket di kanan. Lajur
   kanan menempel selama lajur kiri digulung, sehingga paket yang dipilih dan
   tombol kirim tidak pernah hilang dari layar. */
.daftar-kisi {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 34px; align-items: start;
}
.daftar-sisi { position: sticky; top: 82px; }
.daftar-kartu {
  padding: 20px 20px 22px; border-radius: var(--radius);
  background: var(--latar); border: 1px solid var(--garis);
}
.daftar-kartu h2 { margin-top: 0; }
.daftar-kartu .medan { margin-top: 16px; }
.daftar-kartu button { width: 100%; margin-top: 18px; padding: 11px; font-size: 16px; }
.daftar-kartu .ket { margin: 12px 0 0; font-size: 12px; }

@media (max-width: 900px) {
  .daftar-kisi { grid-template-columns: 1fr; gap: 8px; }
  .daftar-sisi { position: static; }
}

.pilih-paket { display: grid; gap: 10px; }
.pilihan-paket {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--garis-tegas); border-radius: var(--radius);
  padding: 12px 13px; background: var(--kertas);
}
.pilihan-paket:hover { border-color: var(--biru); }
.pilihan-paket input { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 16px; }
.pilihan-paket:has(input:checked) { border-color: var(--biru); background: var(--biru-muda); }
.pilihan-paket b { display: block; font-size: 14px; }
.pilihan-paket em { display: block; font-style: normal; font-size: 12px; color: var(--biru-tua); }
.pilihan-paket small { display: block; margin-top: 3px; font-size: 12px; color: var(--redup); }

/* ---- tanya jawab ---- */
/* Dibuka dan ditutup peramban sendiri lewat <details>: tetap dapat dijelajahi
   papan ketik, terbaca pembaca layar, dan ikut tertangkap pencarian bawaan
   peramban — tiga hal yang hilang begitu ia digambar dengan JavaScript. */
.faq-kelompok + .faq-kelompok { margin-top: 44px; }
.faq-kepala {
  display: flex; align-items: center; gap: 13px; margin-bottom: 16px;
}
.faq-kepala h2 { margin: 0; font-size: 21px; letter-spacing: -.018em; }
.faq-daftar { display: grid; gap: 10px; }

.faq-butir {
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--radius); box-shadow: var(--bayang);
  transition: border-color .16s, box-shadow .16s;
}
.faq-butir[open] {
  border-color: var(--garis-tegas);
  box-shadow: 0 10px 26px -16px rgba(16, 45, 114, .3);
}
.faq-butir summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 15px 18px; font-size: 14px; font-weight: 600; color: var(--tinta);
  list-style: none;
}
/* Penanda bawaan diganti tanda tambah yang berputar menjadi tanda kurang;
   penanda segitiga bawaan peramban berbeda-beda rupanya. */
.faq-butir summary::-webkit-details-marker { display: none; }
.faq-butir summary::after {
  content: ""; flex: 0 0 16px; width: 16px; height: 16px; margin-left: auto;
  background: currentColor; color: var(--samar);
  transition: transform .18s;
  -webkit-mask: var(--pola-tambah) center / 16px 16px no-repeat;
  mask: var(--pola-tambah) center / 16px 16px no-repeat;
}
.faq-butir[open] summary::after { transform: rotate(135deg); color: var(--biru); }
.faq-butir summary:hover { color: var(--biru-tua); }
.faq-butir summary:focus-visible { outline: 2px solid var(--biru); outline-offset: -2px; }
.faq-butir > div { padding: 0 18px 16px; }
.faq-butir p {
  margin: 0;
  font-size: 14px; line-height: 1.68; color: var(--redup);
}

:root {
  --pola-tambah: url("data:image/svg+xml,<svg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'><path%20d='M11%205h2v14h-2z'/><path%20d='M5%2011h14v2H5z'/></svg>");
}

/* ---- landasan pada halaman tentang ---- */
.panel-landasan {
  display: flex; align-items: center; gap: 15px;
  padding: 18px 20px; border-radius: var(--radius);
  background: var(--kertas); border: 1px solid var(--garis); box-shadow: var(--bayang);
}
.landasan-rupa {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: 12px; background: var(--biru-muda); color: var(--biru);
}
.landasan-rupa .bi { font-size: 21px; }
.panel-landasan b { display: block; font-size: 16px; }
.panel-landasan span { font-size: 13px; color: var(--redup); }
/* Nomor langkah pada halaman tentang berisi ikon, bukan angka. */
.pub-langkah .nomor .bi { font-size: 16px; }

/* ---- kaki ---- */
/* Gelap, senada dengan sisi kiri konsol dan blok ajakan di atasnya, sehingga
   halaman berakhir pada satu dasar yang tegas alih-alih memudar jadi abu-abu.
   Nadanya dituakan sedikit dengan lapisan hitam tembus supaya batas dengan
   blok ajakan tetap terbaca sebagai dua bidang, bukan satu bidang yang retak. */
.pub-kaki {
  padding: 58px 0 0; color: var(--sisi-tinta);
  border-top: 1px solid rgba(255, 255, 255, .07);
  background:
    var(--pola-sisi) 0 0 / 68px 68px repeat,
    linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
    var(--sisi);
}
.pub-kaki a { color: var(--sisi-redup); text-decoration: none; }
.pub-kaki a:hover { color: var(--sisi-tinta); }

.pub-kaki-atas {
  display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, .88fr));
  gap: 20px 36px; padding-bottom: 42px;
}
.pub-kaki-merek .pub-merek { color: var(--sisi-tinta); font-size: 16px; }
.pub-kaki-merek .pub-merek img { width: 32px; height: 32px; }
.pub-kaki-merek p {
  margin: 15px 0 0;
  line-height: 1.65; color: var(--sisi-redup);
}
.pub-kaki-tanda {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 17px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--sisi-lapis); border: 1px solid var(--sisi-garis);
  color: var(--sisi-redup);
}
.pub-kaki-tanda .bi { flex: 0 0 auto; font-size: 14px; color: var(--sisi-sorot); }

.pub-kaki-kolom b {
  display: block; margin-bottom: 13px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sisi-samar);
}
.pub-kaki-kolom a { display: block; padding: 4px 0; }
.pub-kaki-kolom p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--sisi-redup); }

.pub-kaki-bawah {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 24px; flex-wrap: wrap;
  padding: 17px 0 24px; border-top: 1px solid var(--sisi-garis);
}
.pub-kaki-bawah p { margin: 0; font-size: 12px; color: var(--sisi-samar); }

@media (max-width: 900px) {
  .pub-kaki { padding-top: 44px; }
  .pub-kaki-atas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .pub-kaki-merek { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .pub-kaki-atas { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- kuota paket */
.daftar-kuota {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
  margin-top: 12px;
}
.kuota-kepala {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--redup);
}
.kuota-kepala b { font-size: 16px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.kuota-kepala small { font-weight: 400; color: var(--samar); }
.kuota .meteran-jalur { margin-top: 7px; }
.kuota .petunjuk { display: block; margin-top: 5px; }
.kuota.penuh .kuota-kepala b { color: var(--merah); }

/* ------------------------------------------------------- ajakan melisensikan */
/* Menerangkan apa yang belum terbuka sekaligus menyediakan jalannya. Diberi
   nada peringatan, bukan bahaya: ini bukan kekeliruan pemakai. */
.ajakan-lisensi {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 14px 0;
  padding: 13px 16px; border-radius: var(--radius);
  background: var(--kuning-muda); border-left: 4px solid var(--kuning);
}
.ajakan-lisensi b { display: block; font-size: 14px; color: #6E4B04; }
.ajakan-lisensi span { font-size: 13px; color: var(--redup); }
.ajakan-lisensi button { flex: 0 0 auto; }

/* ---------------------------------------------------- peninjauan naskah */
.tinjau-daftar { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.tinjau-daftar li {
  padding: 13px 15px; border-radius: var(--radius);
  background: var(--kertas); border: 1px solid var(--garis);
  border-left: 3px solid var(--kuning);
}
.tinjau-kepala { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.tinjau-kepala b { font-size: 14px; }
.tinjau-temuan { margin: 0; font-size: 13px; color: var(--redup); line-height: 1.6; }
/* Kutipan naskah dibedakan agar tidak terbaca sebagai kalimat agen sendiri. */
.tinjau-daftar blockquote {
  margin: 8px 0; padding: 8px 12px; border-radius: var(--radius-kecil);
  background: var(--latar); border-left: 2px solid var(--garis-tegas);
  font-size: 13px; font-style: italic; color: var(--samar);
}
.tinjau-usul { margin: 8px 0 0; font-size: 13px; color: var(--tinta); line-height: 1.6; }
.tinjau-usul b { color: var(--biru-tua); }

/* ------------------------------------------------------------- tayangan */
/* Bingkai jendela, meniru jendela aplikasi macOS: tiga lampu di kiri, judul di
   tengah, sudut membulat, bayang yang dalam. Bilahnya bukan hiasan — ia yang
   membedakan "rekaman aplikasi yang berjalan" dari "gambar rancangan", dan
   pembedaan itu yang justru hendak dijanjikan halaman muka.

   Ditulis satu kali di sini lalu dipakai halaman muka maupun halaman fitur;
   yang berbeda antara keduanya hanya kedalaman bayangnya. */
.tayang-bingkai {
  border-radius: 12px; overflow: hidden;
  background: #ECEEF0; border: 1px solid rgba(21, 40, 61, .16);
  box-shadow:
    0 1px 2px rgba(21, 40, 61, .06),
    0 26px 52px -22px rgba(21, 40, 61, .36);
}
.tayang-bilah {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 13px;
  background: linear-gradient(180deg, #F4F5F6 0%, #E2E5E8 100%);
  border-bottom: 1px solid #CBD0D6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.tayang-lampu { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
/* Warna lampu mengikuti macOS; garis tipis di dalamnya menjaga tepi lampu
   kuning tetap terlihat di atas bilah yang sama-sama terang. */
.tayang-lampu i {
  width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18);
}
.tayang-lampu i:nth-child(1) { background: #FF5F57; }
.tayang-lampu i:nth-child(2) { background: #FEBC2E; }
.tayang-lampu i:nth-child(3) { background: #28C840; }
/* Judul dipusatkan terhadap jendelanya, bukan terhadap sisa ruang setelah
   lampu dan lencana — itu yang membedakannya dari bilah yang sekadar rata
   tengah. Karena ia melayang, lebarnya dibatasi menyisakan ruang bagi kedua
   sisinya; tanpa batas itu judul panjang pada bingkai sempit halaman fitur
   menimpa lampunya. */
.tayang-jalur {
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 190px);
  font-size: 13px; font-weight: 600; color: #454B54;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tayang-nyala {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #7C848E;
}

/* Tombol layar penuh, duduk di bilah jendela seperti kendali jendela yang lain.
   Rekaman ini berjalan tanpa kendali supaya tidak menuntut apa pun dari yang
   lewat; tombol ini disediakan bagi yang ingin membacanya sungguh-sungguh,
   karena pada lebar sekian teks di dalam konsol memang menuntut layar penuh. */
.tayang-penuh {
  flex: 0 0 auto; margin-left: 12px;
  width: 26px; height: 26px; padding: 0; display: grid; place-items: center;
  border: 1px solid #C7CDD4; border-radius: 7px;
  background: rgba(255, 255, 255, .72); color: #566070;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.tayang-penuh .bi { font-size: 11px; }
.tayang-penuh:hover { background: #fff; color: var(--biru); border-color: var(--biru); }
.tayang-penuh:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; }
/* Yang menjadi layar penuh adalah videonya sendiri, jadi bilah jendela beserta
   tombol ini memang tidak ikut tampil — tidak ada yang perlu disembunyikan. */
/* Nisbah dinyatakan agar tinggi jendela sudah benar sebelum sampulnya
   terunduh; tanpa itu isi halaman di bawahnya tersentak turun saat rekaman
   termuat. */
.tayang-bingkai video {
  display: block; width: 100%; height: auto; aspect-ratio: 1024 / 640;
  background: var(--latar);
}

/* Pada telepon bilah jendela tinggal lampu dan judulnya; lencana yang ikut
   berdesakan hanya memaksa judul itu terpotong. */
@media (max-width: 560px) {
  .tayang-bilah { height: 34px; padding: 0 11px; }
  .tayang-bilah .tayang-nyala { display: none; }
  .tayang-jalur {
    position: static; transform: none; max-width: 100%;
    min-width: 0; font-size: 12px;
  }
}

/* Titik merah berdenyut: penanda yang sudah dikenali sebagai "ini rekaman". */
.tanda-rekam {
  width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%;
  background: #E8574A; animation: berdenyut 2s ease-in-out infinite;
}
@keyframes berdenyut { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- daftar tayangan pada halaman fitur ---- */

/* Pintasan antarrekaman, melekat tepat di bawah kepala halaman. Lima rekaman
   setinggi layar berarti yang dicari lazimnya berada jauh di bawah; tanpa
   pintasan, satu-satunya jalan adalah menggulung melewati yang lain. */
.tayang-jelajah {
  position: sticky; top: 62px; z-index: 30;
  background: rgba(255, 255, 255, .93); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--garis);
}
.tayang-jelajah .pub-lebar {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding-block: 11px;
}
.tayang-jelajah .pub-lebar::-webkit-scrollbar { display: none; }
.tayang-jelajah a {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  max-width: 260px; padding: 7px 14px 7px 8px; border-radius: 999px;
  border: 1px solid var(--garis); background: var(--kertas);
  color: var(--redup); text-decoration: none;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: border-color .15s, color .15s, background .15s;
}
.tayang-jelajah a b {
  display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--biru-muda); color: var(--biru-tua);
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.tayang-jelajah a:hover { border-color: var(--biru); color: var(--biru-tua); }
/* Yang sedang dituju ditandai, sehingga pintasan juga berlaku sebagai penunjuk
   posisi — bukan sekadar deretan tautan. */
.tayang-jelajah a:target, .pub-tayang .tayang:target { scroll-margin-top: 122px; }

@media (max-width: 760px) { .tayang-jelajah { top: 58px; } }

.pub-tayang { display: grid; gap: 34px; }
.tayang {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 26px; align-items: center;
}
/* Tayangan pertama dibentangkan penuh: ia yang paling menjelaskan produknya,
   dan lebar penuh membuat teks pada rekamannya terbaca. */
.tayang.lebar { grid-template-columns: 1fr; gap: 20px; }
.tayang.lebar .tayang-teks { }
/* Selang-seling supaya deretnya tidak terbaca sebagai satu daftar yang panjang. */
.tayang:nth-child(even):not(.lebar) .tayang-video { order: 2; }

@media (max-width: 900px) {
  .tayang, .tayang:nth-child(even):not(.lebar) .tayang-video {
    grid-template-columns: 1fr; order: 0;
  }
}

/* Tinggal pembawa urutan pada kisinya; bingkai, sudut, dan bayangnya datang
   dari .tayang-bingkai yang dipakai bersama halaman muka. */
.tayang-video { min-width: 0; }

/* Nomor urut sebagai keping bulat, bukan sebaris teks berhuruf besar: dengan
   pintasan di atas memakai lambang yang sama, keduanya terbaca sebagai satu
   penomoran, bukan dua penomoran yang kebetulan sama angkanya. */
.tayang-nomor { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.tayang-nomor b {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--biru); color: #fff;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.tayang-lama {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--samar);
}
.tayang-lama .bi { font-size: 12px; }
.tayang-teks h2 {
  margin: 0 0 8px; font-size: clamp(19px, 1.8vw, 23px);
  letter-spacing: -.018em; text-wrap: balance;
}
.tayang-teks > p { margin: 0; font-size: 14px; color: var(--redup); line-height: 1.65; }

.tayang-butir { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.tayang-butir li {
  position: relative; padding-left: 20px; font-size: 13px; color: var(--redup);
}
.tayang-butir li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--biru-muda); box-shadow: inset 0 0 0 2px var(--biru);
}

@media (prefers-reduced-motion: reduce) { .tanda-rekam { animation: none; } }