/* ════════════════════════════════════════════════════════════════════════
   LAPA KAMPUS — Lembar gaya bersama
   Mengikuti Brand Style Guide tema terang:
   putih dominan, navy untuk teks & blok penekanan, emas hanya aksen.
════════════════════════════════════════════════════════════════════════ */

/* ── Huruf — disimpan di situs sendiri, tidak bergantung pada Google ─── */
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/huruf/lora-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/huruf/lora-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/huruf/lora-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/huruf/lora-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/huruf/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/huruf/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/huruf/poppins-latin-600-normal.woff2') format('woff2'); }
/* Reem Kufi — dirancang mengikuti Kufi Fatimiyah di masjid-masjid lama Kairo.
   Dipangkas hanya berisi huruf Arab dasar (tanpa Latin), cukup untuk semua
   label Arab termasuk nama kelompok/jurusan di halaman jadwal. */
@font-face { font-family: 'Reem Kufi'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/huruf/reem-kufi-arab-500.woff2') format('woff2'); }
@font-face { font-family: 'Reem Kufi'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/huruf/reem-kufi-arab-600.woff2') format('woff2'); }

:root {
  /* Warna resmi */
  --putih: #FFFFFF;
  --navy: #12263F;          /* Bunting */
  --emas: #B79562;          /* Muddy Waters — aksen, garis, teks di atas navy */
  --tanah: #8E643C;         /* Potters Clay — teks emas di atas latar terang (5,2:1) */
  --krem: #F7F4EF;
  --teks: #333333;
  --teks-2: #717163;        /* Bandicoot digelapkan agar lolos 4,5:1 */

  /* Turunan netral dari palet yang sama */
  --garis: #E6E1D7;
  --garis-kuat: #D6CFC1;
  --navy-lapis: rgba(255, 255, 255, .06);
  --teks-navy: #D9D6CF;

  /* Huruf */
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kufi: 'Reem Kufi', 'Traditional Arabic', 'Geeza Pro', serif;
  /* Untuk nama Arab yang diketik & dibaca: huruf Naskh bawaan perangkat */
  --naskh: 'Noto Naskh Arabic', 'Geeza Pro', 'Arabic Typesetting', 'Traditional Arabic', 'Segoe UI', serif;

  /* Lengkung lunas Fatimiyah (bentuk lengkung di pelataran Masjid Al-Azhar)
     dan syurfah bertangga (puncak dinding masjid-masjid Kairo). */
  --lunas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0,130 L0,58 C0,38 20,22 40,9 L50,2 L60,9 C80,22 100,38 100,58 L100,130 Z'/%3E%3C/svg%3E");
  --syurfah: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18' viewBox='0 0 32 18'%3E%3Cpath fill='%2312263F' d='M2 18V12H7V6H12V0H20V6H25V12H30V18Z'/%3E%3C/svg%3E");

  /* Ukuran huruf — kelipatan ±1,3 */
  --t-kecil: 13px;
  --t-sedang: 15px;
  --t-isi: 17px;
  --t-besar: 20px;
  --t-h3: 26px;
  --t-h2: clamp(30px, 3.4vw, 42px);
  --t-h1: clamp(40px, 5.2vw, 68px);

  /* Tata letak */
  --lebar: 1200px;
  --tepi: clamp(20px, 5vw, 56px);
  --band: clamp(72px, 9vw, 128px);

  /* Gerak */
  --cepat: 180ms;
  --lembut: cubic-bezier(.2, .7, .2, 1);
  --pantul: cubic-bezier(.34, 1.4, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Atribut hidden SELALU menang atas aturan display mana pun */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  background: var(--putih);
  color: var(--teks);
  font-family: var(--sans);
  font-size: var(--t-isi);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

.wrap {
  width: 100%;
  max-width: calc(var(--lebar) + var(--tepi) * 2);
  margin-inline: auto;
  padding-inline: var(--tepi);
}

.band { padding-block: var(--band); }
.band--krem { background: var(--krem); }
.band--navy { background: var(--navy); color: var(--teks-navy); }
.band--navy h2, .band--navy h3 { color: var(--putih); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Fokus & aksesibilitas ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--tanah);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--navy :focus-visible, .nav--gelap :focus-visible { outline-color: var(--emas); }
/* Elemen yang difokuskan lewat skrip untuk pembaca layar (judul artikel,
   panel hasil) tidak perlu bingkai — pengguna tidak sedang menavigasi ke sana. */
[tabindex="-1"]:focus { outline: none; }

.lompat {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 12px 18px; background: var(--navy); color: var(--putih);
  font-size: var(--t-sedang); font-weight: 500; text-decoration: none;
  border-radius: 8px; transition: top var(--cepat);
}
.lompat:focus { top: 12px; }

/* ── Tombol & tautan ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px;
  border: 1.5px solid transparent; border-radius: 999px;
  font-family: var(--sans); font-size: var(--t-sedang); font-weight: 500;
  line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--cepat), color var(--cepat), border-color var(--cepat), transform var(--cepat);
}
.btn:active { transform: scale(.98); }
.btn--navy { background: var(--navy); color: var(--putih); }
.btn--navy:hover { background: #0B1A2D; }
.btn--garis { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--garis:hover { background: var(--navy); color: var(--putih); }
.btn--emas { background: var(--emas); color: var(--navy); }
.btn--emas:hover { background: #C7A775; }
.btn--kecil { min-height: 44px; padding: 0 20px; font-size: 14px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.tautan {
  color: var(--navy); font-weight: 500; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: var(--garis-kuat);
  transition: text-decoration-color var(--cepat), color var(--cepat);
}
.tautan:hover { text-decoration-color: var(--tanah); color: var(--tanah); }
.band--navy .tautan { color: var(--putih); text-decoration-color: rgba(255,255,255,.3); }
.band--navy .tautan:hover { color: var(--emas); text-decoration-color: var(--emas); }

/* ── Navigasi ──────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: transform 320ms var(--lembut), border-color var(--cepat);
}
.nav--gulir { border-bottom-color: var(--garis); }
.nav--sembunyi { transform: translateY(-100%); }
.nav__isi {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 76px;
}
.logo {
  display: inline-flex; align-items: baseline; gap: 9px;
  text-decoration: none; color: var(--navy);
}
.logo b { font-family: var(--serif); font-size: 23px; font-weight: 700; letter-spacing: .04em; }
.logo span { font-size: 11px; font-weight: 500; letter-spacing: .32em; color: var(--tanah); }

.nav__tautan { display: flex; align-items: center; gap: 30px; }
.nav__tautan a:not(.btn) {
  position: relative; font-size: var(--t-sedang); font-weight: 500;
  color: var(--teks); text-decoration: none; padding-block: 8px;
  transition: color var(--cepat);
}
.nav__tautan a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px;
  background: var(--emas); transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--lembut);
}
.nav__tautan a:not(.btn):hover { color: var(--navy); }
.nav__tautan a:not(.btn):hover::after, .nav__tautan a[aria-current="page"]::after { transform: scaleX(1); }
.nav__tautan a[aria-current="page"] { color: var(--navy); }

.nav__menu {
  display: none; width: 46px; height: 46px; border: 0; background: transparent;
  align-items: center; justify-content: center; cursor: pointer; border-radius: 10px;
}
.nav__menu svg { width: 24px; height: 24px; stroke: var(--navy); }

.menu-hp {
  position: fixed; inset: 0; z-index: 120; background: var(--putih);
  display: flex; flex-direction: column; padding: 20px var(--tepi) 32px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 240ms var(--lembut), transform 240ms var(--lembut), visibility 0s linear 240ms;
}
.menu-hp--buka { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu-hp__atas { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.menu-hp__daftar { display: flex; flex-direction: column; margin-top: 28px; }
.menu-hp__daftar a {
  font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--navy);
  text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--garis);
}
.menu-hp .btn { margin-top: auto; }

/* ── Tempat foto (R2) ──────────────────────────────────────────────────── */
.slot {
  position: relative; overflow: hidden; background-color: var(--krem);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(142, 100, 60, .05) 14px 15px);
}
.slot img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 600ms var(--lembut);
}
.slot--terisi img { opacity: 1; }
.slot__label {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 16px;
  text-align: center; font-size: var(--t-kecil); color: var(--teks-2);
}
.slot__label svg { width: 26px; height: 26px; stroke: var(--teks-2); opacity: .7; }
.slot__label code {
  font-family: var(--sans); font-weight: 600; color: var(--tanah);
  background: var(--putih); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--garis);
}
.mode-susun .slot--gagal .slot__label { display: flex; }
.slot__judul { font-weight: 500; }
.butir .slot__label, .pilih-asisten .slot__label { padding: 6px; gap: 4px; }
.butir .slot__label svg, .butir .slot__judul { display: none; }
.butir .slot__label code { font-size: 11px; padding: 2px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ── Pembuka (hero) ────────────────────────────────────────────────────── */
.hero { padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 80px); overflow: hidden; }
.hero__isi {
  display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
/* Bola geodesik emas di ujung kanan judul — terlihat utuh, tidak tertutup lengkung */
.hero__teks { position: relative; isolation: isolate; }
.bola {
  position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 1;
  width: 280px; right: -50px; top: -30px;
}
.hero__judul {
  font-size: var(--t-h1); font-weight: 600; line-height: 1.06; letter-spacing: -.022em;
  max-width: 11.5em;
}
.kata { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.kata > span { display: inline-block; }
.nb { white-space: nowrap; }
.hero__lead {
  margin-top: 28px; max-width: 34em; font-size: 18px; line-height: 1.75; color: var(--teks);
}
.hero__aksi { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero__lacak { margin-top: 30px; font-size: var(--t-sedang); color: var(--teks-2); }

/* Urutan pembuka: satu-satunya animasi yang berjalan sendiri.
   Hanya aktif kalau JavaScript berjalan — tanpa JS semua langsung tampil. */
.js .siap .kata > span { transform: translateY(110%); }
.js .siap .hero__untuk, .js .siap .hero__lead, .js .siap .hero__aksi, .js .siap .hero__janji, .js .siap .lengkung { opacity: 0; }
.js .jalan .kata > span { transform: none; transition: transform 900ms var(--lembut); transition-delay: calc(var(--k, 0) * 42ms); }
/* Spesifisitas sengaja disamakan dengan aturan .js .siap di atas, supaya
   aturan "tampilkan" ini yang menang. */
.js .jalan .hero__lead { opacity: 1; transition: opacity 700ms 420ms var(--lembut); }
.js .jalan .hero__aksi { opacity: 1; transition: opacity 700ms 560ms var(--lembut); }
.js .jalan .hero__untuk { opacity: 1; transition: opacity 700ms 120ms var(--lembut); }
.js .jalan .hero__janji { opacity: 1; transition: opacity 700ms 680ms var(--lembut); }
.js .jalan .lengkung { opacity: 1; transition: opacity 800ms 250ms var(--lembut); }

/* ── Lengkung lunas di pembuka ─────────────────────────────────────────
   Berisi foto (kalau sudah diisi di tab Pengaturan) atau agenda kampus
   terdekat (kalau belum). Keduanya dipotong mengikuti bentuk lengkung. */
.lengkung { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lengkung__bingkai { position: relative; width: 100%; max-width: 440px; aspect-ratio: 100 / 130; }
.lengkung__isi {
  position: absolute; inset: 0; background: #EFE8DB; overflow: hidden;
  -webkit-mask: var(--lunas) center / 100% 100% no-repeat;
  mask: var(--lunas) center / 100% 100% no-repeat;
}
.lengkung__foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 900ms var(--lembut), transform 1600ms var(--lembut);
}
.lengkung--foto .lengkung__foto { opacity: 1; transform: none; }
.lengkung__garis { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lengkung__garis path { fill: none; stroke: var(--emas); stroke-width: .34; stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .jalan .lengkung__garis path { stroke-dashoffset: 0; transition: stroke-dashoffset 1800ms 500ms var(--lembut); }
.lengkung--foto .lengkung__garis path { stroke: rgba(255, 255, 255, .7); }
.lengkung__ket { max-width: 400px; text-align: center; font-size: var(--t-kecil); color: var(--teks-2); }
.lengkung__ket:empty { display: none; }

.lengkung__label {
  position: absolute; left: 0; right: 0; top: 42%; display: none; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 14%; text-align: center; font-size: var(--t-kecil); color: var(--tanah);
}
.lengkung__label svg { width: 28px; height: 28px; stroke: var(--tanah); }
.lengkung__label code { font-family: var(--sans); font-weight: 600; background: var(--putih); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--garis); }
.mode-susun .lengkung--kosong .lengkung__label { display: flex; }

/* Agenda di dalam lengkung */
.agenda {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.6vw, 18px);
  padding: 29% 11% 9%; background: var(--navy); color: var(--teks-navy);
  opacity: 0; visibility: hidden; transition: opacity 700ms var(--lembut), visibility 0s linear 700ms;
}
.lengkung--agenda .agenda { opacity: 1; visibility: visible; transition-delay: 0s; }
.lengkung--agenda .lengkung__garis path { stroke: rgba(183, 149, 98, .75); }
.agenda :focus-visible { outline-color: var(--emas); }
.agenda__kepala { text-align: center; }
.agenda__kepala .arab { display: block; color: var(--emas); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); }
.agenda__kepala small { display: block; margin-top: 2px; font-size: var(--t-kecil); color: var(--teks-navy); }
.agenda__daftar { margin: 0; padding: 0; list-style: none; }
.agenda__daftar a {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: clamp(9px, 1.2vw, 14px) 0; border-top: 1px solid rgba(255, 255, 255, .14);
  text-decoration: none; color: inherit;
}
.agenda__daftar li:last-child a { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.agenda__tgl {
  width: 48px; height: 48px; border-radius: 12px; border: 1px solid rgba(183, 149, 98, .55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.agenda__tgl b { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--putih); }
.agenda__tgl small { margin-top: 4px; font-size: 9.5px; font-weight: 500; letter-spacing: .06em; color: var(--emas); }
.agenda__judul {
  font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--putih);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.agenda__sisa { display: block; margin-top: 3px; font-size: 12px; color: var(--emas); }
.agenda__daftar a:hover .agenda__judul { text-decoration: underline; text-decoration-color: var(--emas); text-underline-offset: 4px; }
.agenda__semua { align-self: center; margin-top: auto; font-size: 14px; font-weight: 500; color: var(--emas); text-underline-offset: 5px; }
.agenda__kosong { margin: auto 0; text-align: center; font-size: var(--t-sedang); color: var(--teks-navy); }

/* ── Tenggat terdekat ──────────────────────────────────────────────────── */
.tenggat {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: 18px 22px 18px 18px; background: var(--krem); border-radius: 18px;
  text-decoration: none; color: inherit;
  transition: background var(--cepat);
}
.tenggat[hidden] { display: none; }
.tenggat:hover { background: #F1ECE3; }
.tenggat__tgl {
  width: 64px; height: 64px; border-radius: 14px; background: var(--navy); color: var(--putih);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.tenggat__tgl b { font-family: var(--serif); font-size: 25px; font-weight: 700; }
.tenggat__tgl small { font-size: 11px; font-weight: 500; color: var(--emas); margin-top: 5px; letter-spacing: .08em; }
.tenggat__jenis { font-size: var(--t-kecil); color: var(--tanah); font-weight: 500; }
.tenggat__judul { font-family: var(--serif); font-size: var(--t-besar); font-weight: 600; color: var(--navy); line-height: 1.35; }
.tenggat__sisa { text-align: right; }
.tenggat__angka { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1; font-variant-numeric: lining-nums proportional-nums; }
.tenggat__satuan { font-size: var(--t-kecil); color: var(--teks-2); }

/* ── Foto lebar ────────────────────────────────────────────────────────── */
.foto-lebar { position: relative; height: clamp(300px, 58vh, 620px); }
.foto-lebar img { transform: scale(var(--skala, 1.1)); transform-origin: center 60%; will-change: transform; }
.foto-lebar__ket {
  position: absolute; left: var(--tepi); bottom: 22px; padding: 8px 14px;
  background: rgba(18, 38, 63, .72); color: var(--putih); font-size: var(--t-kecil);
  border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.foto-lebar__ket:empty, .foto-lebar:not(.slot--terisi) .foto-lebar__ket { display: none; }
.foto-lebar--tiada { display: none; }

/* ── Kepala bagian ─────────────────────────────────────────────────────── */
.kepala { margin-bottom: clamp(36px, 5vw, 56px); }
.kepala__bawah { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-top: 18px; }
.kepala__bawah p { max-width: 36em; color: var(--teks); }

/* Judul Latin di kiri, padanan Arabnya di kanan — seperti papan dwibahasa
   di kantor-kantor Kairo, tempat tulisan Arab dibaca dari kanan. */
.judul-bagian {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px;
  padding-bottom: 18px; border-bottom: 1px solid var(--garis);
}
.judul-bagian h2 { font-size: var(--t-h2); }
.arab { font-family: var(--kufi); font-weight: 500; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.25; color: var(--tanah); }
/* Saat judul terlalu panjang dan labelnya turun baris, tulisan Arab tetap
   rata kanan — arah bacanya. */
.judul-bagian .arab { margin-left: auto; }
.band--krem .judul-bagian { border-bottom-color: var(--garis-kuat); }
.band--navy .judul-bagian { border-bottom-color: rgba(255, 255, 255, .14); }
.band--navy .arab { color: var(--emas); }

/* Syurfah bertangga: puncak dinding di atas setiap blok navy */
.band--navy, .kaki { position: relative; }
.band--navy::before, .kaki::before {
  content: ''; position: absolute; left: 0; right: 0; top: -17px; height: 18px; pointer-events: none;
  background: var(--syurfah) left bottom / 32px 18px repeat-x;
}

/* ── Kategori informasi ────────────────────────────────────────────────── */
.kat {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-kecil); font-weight: 500; color: var(--teks-2);
}
.kat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--teks-2); }
.kat--pengumuman { color: var(--navy); }
.kat--pengumuman::before { background: var(--navy); }
.kat--panduan { color: var(--tanah); }
.kat--panduan::before { background: var(--tanah); }
.kat--kabar { color: var(--teks-2); }
.kat--kabar::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--emas); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: var(--t-kecil); color: var(--teks-2); }

/* ── Pratinjau informasi (beranda) ─────────────────────────────────────── */
.info-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.sorot { display: flex; flex-direction: column; gap: 22px; text-decoration: none; color: inherit; }
.sorot .slot { aspect-ratio: 16 / 10; border-radius: 18px; }
.sorot h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; }
.sorot p { color: var(--teks); max-width: 38em; }
.sorot__tenggat {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px; background: var(--navy); color: var(--putih);
  font-size: var(--t-kecil); font-weight: 500;
}
.sorot__tenggat b { color: var(--emas); font-weight: 600; }

.daftar-ringkas { display: flex; flex-direction: column; }
.butir {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid var(--garis); text-decoration: none; color: inherit;
}
.butir:first-child { padding-top: 0; }
.butir .slot { aspect-ratio: 1; border-radius: 12px; }
.butir h3 { font-size: 18px; line-height: 1.38; margin-top: 7px; }

.sorot .slot img, .butir .slot img, .indeks__item .slot img { transition: opacity 600ms var(--lembut), transform 700ms var(--lembut); }
.sorot:hover .slot img, .butir:hover .slot img, .indeks__item:hover .slot img { transform: scale(1.035); }
.sorot:hover h3, .butir:hover h3, .indeks__item:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--emas); }

.kosong {
  padding: 40px; border: 1px dashed var(--garis-kuat); border-radius: 18px;
  text-align: center; color: var(--teks-2); font-size: var(--t-sedang);
}

/* Kerangka pemuatan */
.muat { background: linear-gradient(90deg, #F2EEE7 25%, #F8F6F1 50%, #F2EEE7 75%); background-size: 200% 100%; animation: muat 1.4s linear infinite; border-radius: 10px; }
@keyframes muat { to { background-position: -200% 0; } }

.ajak-grup {
  margin-top: 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 26px; border: 1px solid var(--garis); border-radius: 18px;
}
.ajak-grup p { flex: 1 1 280px; color: var(--teks); }
.ajak-grup b { color: var(--navy); font-weight: 600; }
.ajak-grup[hidden] { display: none; }

/* ── Layanan & harga ───────────────────────────────────────────────────── */
.segmen {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 5px; background: var(--putih); border: 1px solid var(--garis); border-radius: 999px;
}
.segmen__geser {
  position: absolute; top: 5px; bottom: 5px; left: 5px; border-radius: 999px; background: var(--navy);
  transition: transform 380ms var(--lembut), width 380ms var(--lembut);
}
.segmen button {
  position: relative; z-index: 1; min-height: 44px; padding: 0 28px; border: 0; background: transparent;
  border-radius: 999px; font-size: var(--t-sedang); font-weight: 500; color: var(--navy); cursor: pointer;
  transition: color 260ms var(--lembut);
}
.segmen button[aria-selected="true"] { color: var(--putih); }

.harga-catatan { margin-top: 16px; font-size: var(--t-kecil); color: var(--teks-2); }

.harga-panel { margin-top: 44px; }
.harga-panel[hidden] { display: none; }
.harga-panel--masuk { animation: panel-masuk 460ms var(--lembut); }
@keyframes panel-masuk { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.kelompok + .kelompok { margin-top: 48px; }
.kelompok__judul {
  font-family: var(--serif); font-size: var(--t-besar); font-weight: 600; color: var(--navy);
  padding-bottom: 14px; border-bottom: 1.5px solid var(--navy);
}
.paket {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) 150px 96px;
  gap: 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--garis-kuat);
}
.paket__nama h3 { font-size: 21px; }
.paket__nama p { margin-top: 6px; font-size: var(--t-sedang); color: var(--teks-2); line-height: 1.55; }
.paket__sorot {
  display: inline-block; margin-bottom: 8px; padding: 4px 11px; border-radius: 999px;
  background: var(--navy); color: var(--putih); font-size: 12px; font-weight: 500;
}
.isi-paket { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.isi-paket li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--teks); }
.isi-paket li svg { width: 14px; height: 14px; flex-shrink: 0; stroke-width: 2.4; fill: none; }
.isi-paket li.ya svg { stroke: var(--tanah); }
.isi-paket li.tidak { color: var(--teks-2); text-decoration: line-through; text-decoration-color: var(--garis-kuat); }
.isi-paket li.tidak svg { stroke: var(--garis-kuat); }
.paket__harga {
  font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--navy);
  white-space: nowrap; text-align: right; font-variant-numeric: lining-nums proportional-nums;
}

.ketentuan { margin-top: 36px; display: flex; flex-direction: column; gap: 10px; }
.ketentuan p { display: flex; gap: 12px; font-size: var(--t-sedang); color: var(--teks); }
.ketentuan p::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; margin-top: .72em; border-radius: 50%; background: var(--emas); }

.lain { margin-top: clamp(64px, 8vw, 96px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 72px); }
.lain h3 { font-size: var(--t-h3); }
.lain__intro p { margin-top: 12px; font-size: var(--t-sedang); color: var(--teks-2); }
.lain__daftar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.lain__item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 16px 0; border: 0; border-bottom: 1px solid var(--garis-kuat);
  background: transparent; text-align: left; cursor: pointer;
}
.lain__item strong { display: block; font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--navy); }
.lain__item small { display: block; margin-top: 2px; font-size: var(--t-kecil); color: var(--teks-2); }
.lain__item em { flex-shrink: 0; font-style: normal; font-size: var(--t-kecil); font-weight: 500; color: var(--tanah); transition: color var(--cepat); }
.lain__item:hover em { color: var(--navy); }

/* ── Cek nama qoimah (tab Banat) ───────────────────────────────────────── */
.cek { margin-top: 28px; padding: clamp(22px, 3vw, 34px); background: var(--putih); border-radius: 22px; }
.cek h3 { font-size: clamp(21px, 2vw, 25px); }
.cek > p { margin-top: 8px; max-width: 46em; font-size: var(--t-sedang); color: var(--teks); }
.cek__form { margin-top: 18px; display: flex; gap: 12px; }
.cek__form input {
  flex: 1 1 auto; min-width: 0; height: 58px; padding: 0 22px; border: 1.5px solid var(--navy); border-radius: 999px;
  background: var(--putih); font-family: var(--naskh); font-size: 21px; font-weight: 500; color: var(--navy);
}
.cek__form input::placeholder { font-size: 17px; font-weight: 400; color: var(--teks-2); }
.cek__form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(183, 149, 98, .35); }
.cek__form .btn { min-height: 58px; }
.cek__hasil { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.cek__hasil:empty { display: none; }
.cek__ringkas { font-size: var(--t-kecil); color: var(--teks-2); }
.cek__daftar { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cek__butir {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px 22px; align-items: center;
  padding: 18px 22px; border: 1px solid var(--garis-kuat); border-radius: 18px;
  animation: panel-masuk 420ms var(--lembut) both; animation-delay: calc(var(--i, 0) * 60ms);
}
.cek__butir--cocok { border: 1.5px solid var(--navy); }
.cek__tingkat { justify-self: start; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--krem); color: var(--tanah); white-space: nowrap; }
.cek__butir--cocok .cek__tingkat { background: var(--navy); color: var(--putih); }
.cek__nama { display: inline-block; font-family: var(--naskh); font-size: 23px; font-weight: 600; line-height: 1.5; color: var(--navy); }
.cek__meta { display: block; margin-top: 2px; font-size: 14px; color: var(--teks); }
.cek__meta b { font-weight: 600; color: var(--navy); }
.cek__aksi { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.cek__catatan { font-size: 14px; color: var(--teks-2); }
.cek__catatan button { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.cek__pesan { padding: 18px 22px; background: var(--krem); border-left: 3px solid var(--emas); border-radius: 0 14px 14px 0; }
.cek__pesan strong { display: block; font-size: 16px; font-weight: 600; color: var(--navy); }
.cek__pesan p { margin-top: 4px; font-size: var(--t-sedang); line-height: 1.7; color: var(--teks); }
.cek__pesan .btn { margin-top: 12px; }
.cek__tanya { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border: 1px solid var(--garis-kuat); border-radius: 16px; }
.cek__tanya span { font-size: var(--t-sedang); font-weight: 500; color: var(--navy); }

.galeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.galeri__item { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; }
.galeri__foto { aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 1px solid var(--garis); background: var(--krem); }
.galeri__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 600ms var(--lembut); }
.galeri__item:hover .galeri__foto img { transform: scale(1.04); }
.galeri__item strong { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--navy); }
.galeri__item small { font-size: var(--t-kecil); color: var(--teks-2); }

.kelompok--sorot .kelompok__judul { animation: sorot 1.8s var(--lembut); }
@keyframes sorot { 0%, 100% { background: transparent; } 25% { background: #F3E9D6; } }

/* ── Penampil foto qoimah (layar penuh) ─────────────────────────────────── */
.penampil {
  position: fixed; inset: 0; z-index: 170; display: flex; flex-direction: column;
  background: #0B1A2D; color: var(--putih);
  opacity: 0; visibility: hidden; transition: opacity 220ms var(--lembut), visibility 0s linear 220ms;
}
.penampil--buka { opacity: 1; visibility: visible; transition-delay: 0s; }
.penampil :focus-visible { outline-color: var(--emas); }
.penampil__atas {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(14px, 3vw, 40px); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.penampil__atas strong { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; }
.penampil__atas small { display: block; font-size: var(--t-kecil); color: var(--teks-navy); }
.penampil__alat { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.penampil__alat button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22);
  background: transparent; color: var(--putih); font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.penampil__alat button:hover { background: rgba(255, 255, 255, .08); }
.penampil__alat .penampil__tutup { margin-left: 8px; background: rgba(255, 255, 255, .1); border-color: transparent; }
.penampil__alat svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
.penampil__skala { min-width: 52px; text-align: center; font-size: 14px; color: var(--teks-navy); }
.penampil__kanvas { position: relative; flex: 1; min-height: 0; overflow: auto; display: flex; padding: 16px; -webkit-overflow-scrolling: touch; }
.penampil__foto { display: block; flex: none; margin: auto; max-width: none; background: var(--putih); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); cursor: zoom-in; }
.penampil--besar .penampil__foto { cursor: zoom-out; }
.penampil__geser {
  position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: var(--putih); font-size: 26px; line-height: 1; cursor: pointer;
}
.penampil__geser:hover { background: rgba(255, 255, 255, .24); }
.penampil__geser--kiri { left: 16px; }
.penampil__geser--kanan { right: 16px; }
.penampil__geser[hidden] { display: none; }
.penampil__bawah {
  flex-shrink: 0; margin: 0 clamp(14px, 3vw, 40px) clamp(14px, 3vw, 24px); padding: 14px 18px;
  background: var(--putih); color: var(--teks); border-radius: 18px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.penampil__bawah span { font-size: 16px; font-weight: 600; color: var(--navy); }
.penampil__bawah :focus-visible { outline-color: var(--tanah); }

/* ── Cara kerja ────────────────────────────────────────────────────────── */
.cara { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.cara .slot { aspect-ratio: 4 / 5; border-radius: 22px; }
.cara--tanpa-foto { grid-template-columns: minmax(0, 1fr); }
.cara--tanpa-foto > .slot { display: none; }
.langkah { margin: 36px 0 0; padding: 0; list-style: none; counter-reset: langkah; }
.langkah li {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px;
  padding-bottom: 34px; counter-increment: langkah;
}
.langkah li:last-child { padding-bottom: 0; }
.langkah li::before {
  content: counter(langkah); width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--emas); font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--navy);
  background: var(--putih); position: relative; z-index: 1;
}
.langkah li::after {
  content: ''; position: absolute; left: 25.5px; top: 52px; bottom: 0; width: 1px; background: var(--garis-kuat);
}
.langkah li:last-child::after { display: none; }
.langkah h3 { font-size: 20px; padding-top: 12px; }
.langkah p { margin-top: 6px; color: var(--teks); font-size: var(--t-sedang); }

/* ── Lacak berkas ──────────────────────────────────────────────────────── */
.lacak { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.lacak h2 { font-size: var(--t-h2); }
.lacak__lead { margin-top: 18px; max-width: 30em; color: var(--teks-navy); }
.lacak-form { padding: 32px; border-radius: 22px; background: var(--navy-lapis); border: 1px solid rgba(255, 255, 255, .08); }
.lacak-form label { display: block; font-size: var(--t-kecil); font-weight: 500; color: var(--emas); margin-bottom: 10px; }
.lacak-form__baris { display: flex; gap: 10px; }
.kode {
  flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 20px; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .14);
  color: var(--putih); font-size: 17px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: border-color var(--cepat), background var(--cepat);
}
.kode::placeholder { color: rgba(255, 255, 255, .42); letter-spacing: .02em; font-weight: 400; text-transform: none; }
.kode:focus { outline: none; border-color: var(--emas); background: rgba(0, 0, 0, .2); }
.lacak-form .btn { min-height: 56px; }
.lacak-form__bantu { margin-top: 14px; font-size: var(--t-kecil); color: rgba(217, 214, 207, .78); }
.pesan-galat {
  display: none; margin-top: 16px; padding: 12px 16px; border-radius: 12px;
  background: rgba(214, 120, 96, .14); color: #F4C9BD; font-size: var(--t-sedang);
}
.pesan-galat--tampil { display: block; }
.kunci { display: none; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: rgba(183, 149, 98, .14); color: var(--emas); font-size: var(--t-sedang); }
.kunci--tampil { display: block; }
.memuat svg { animation: putar 900ms linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }

.hasil {
  display: none; margin-top: 48px; padding: clamp(24px, 4vw, 44px);
  background: var(--putih); color: var(--teks); border-radius: 24px;
}
.hasil--tampil { display: block; animation: panel-masuk 520ms var(--lembut); }
.hasil__kepala { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px 32px; }
.hasil__kode { font-size: var(--t-kecil); font-weight: 600; letter-spacing: .1em; color: var(--tanah); }
.hasil__layanan { margin-top: 6px; font-size: clamp(24px, 2.6vw, 32px); }
.hasil__nama { margin-top: 4px; color: var(--teks-2); }
.status {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px;
  font-size: var(--t-kecil); font-weight: 600;
}
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status--proses { background: #FBF4E8; color: var(--tanah); }
.status--selesai { background: #EAF3EE; color: #2F6B4C; }
.status--menunggu { background: var(--krem); color: var(--teks-2); }

.hasil__data { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hasil__data div { padding: 16px 18px; background: var(--krem); border-radius: 14px; }
.hasil__data dt { font-size: 12px; color: var(--teks-2); }
.hasil__data dd { margin: 4px 0 0; font-weight: 600; color: var(--navy); font-size: var(--t-sedang); }

.tl { margin: 36px 0 0; padding: 0; list-style: none; }
.tl li {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px;
  padding-bottom: 22px; opacity: 0; transform: translateY(6px);
}
.tl--jalan li { animation: tl-masuk 420ms var(--lembut) forwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes tl-masuk { to { opacity: 1; transform: none; } }
.tl li::after { content: ''; position: absolute; left: 21.5px; top: 44px; bottom: 0; width: 1px; background: var(--garis-kuat); }
.tl li:last-child::after { display: none; }
.tl li.tl--beres::after { background: var(--emas); }
.tl__tanda {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--garis-kuat); background: var(--putih); position: relative; z-index: 1;
}
.tl__tanda svg { width: 18px; height: 18px; fill: none; stroke-width: 2.4; }
.tl--beres .tl__tanda { border: 0; background: var(--emas); }
.tl--beres .tl__tanda svg { stroke: var(--navy); }
.tl--kini .tl__tanda { border: 1.5px solid var(--navy); }
.tl--kini .tl__tanda::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--emas);
  animation: denyut 2.2s var(--lembut) infinite;
}
.tl--kini .tl__tanda svg { stroke: var(--navy); }
@keyframes denyut { 0% { transform: scale(.82); opacity: 1; } 100% { transform: scale(1.28); opacity: 0; } }
.tl__isi { padding-top: 9px; }
.tl__isi strong { display: block; font-weight: 500; font-size: var(--t-sedang); color: var(--navy); line-height: 1.5; }
.tl--tunggu .tl__isi strong { color: var(--teks-2); font-weight: 400; }
.tl__isi small { display: block; margin-top: 2px; font-size: var(--t-kecil); color: var(--teks-2); }
.tl--kini .tl__isi small { color: var(--tanah); font-weight: 500; }

.catatan-asisten { margin-top: 28px; padding: 18px 22px; border-radius: 14px; background: var(--krem); }
.catatan-asisten[hidden] { display: none; }
.catatan-asisten small { display: block; font-size: 12px; color: var(--tanah); font-weight: 500; }
.catatan-asisten p { margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--navy); }
.hasil__aksi { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Asisten ───────────────────────────────────────────────────────────── */
.tim { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 300px)); gap: clamp(20px, 3vw, 36px); }
.orang { display: flex; flex-direction: column; }
.orang .slot { aspect-ratio: 1; border-radius: 22px; background-color: var(--krem); background-image: none; }
.orang .slot img { object-fit: cover; object-position: center top; }
.orang h3 { margin-top: 20px; font-size: 21px; }
.orang p { margin-top: 2px; font-size: var(--t-sedang); color: var(--teks-2); }
.orang .btn { margin-top: 18px; align-self: flex-start; }

/* ── Pertanyaan umum ───────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(36px, 6vw, 96px); }
.faq h2 { font-size: var(--t-h2); }
.faq__intro p { margin-top: 16px; color: var(--teks); }
.tanya { border-bottom: 1px solid var(--garis-kuat); }
.tanya:first-child { border-top: 1px solid var(--garis-kuat); }
.tanya h3 { font-family: var(--sans); font-size: var(--t-isi); letter-spacing: 0; }
.tanya button {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%;
  padding: 22px 0; border: 0; background: transparent; text-align: left; cursor: pointer;
  font-weight: 500; color: var(--navy); line-height: 1.5;
}
.tanya button svg { width: 20px; height: 20px; flex-shrink: 0; stroke: var(--tanah); stroke-width: 2; fill: none; transition: transform 320ms var(--lembut); }
.tanya button[aria-expanded="true"] svg { transform: rotate(45deg); }
.tanya__jawab { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--lembut); }
.tanya__jawab > div { overflow: hidden; }
.tanya__jawab p { padding: 0 44px 24px 0; color: var(--teks); font-size: var(--t-sedang); line-height: 1.8; }
.tanya--buka .tanya__jawab { grid-template-rows: 1fr; }

/* ── Kaki halaman ──────────────────────────────────────────────────────── */
.kaki { background: var(--navy); color: var(--teks-navy); padding-block: 64px 36px; }
.kaki__atas { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.kaki .logo { color: var(--putih); }
.kaki .logo span { color: var(--emas); }
.kaki__atas > div > p { margin-top: 14px; max-width: 26em; font-size: var(--t-sedang); }
.kaki h4 { font-family: var(--sans); font-size: var(--t-kecil); font-weight: 500; color: var(--emas); letter-spacing: 0; }
.kaki ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.kaki ul a { font-size: var(--t-sedang); color: var(--teks-navy); text-decoration: none; transition: color var(--cepat); }
.kaki ul a:hover { color: var(--putih); }
.kaki__bawah { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--t-kecil); color: rgba(217, 214, 207, .7); }

/* ── Lembar pemesanan ──────────────────────────────────────────────────── */
.lembar-pesan { position: fixed; inset: 0; z-index: 150; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; }
.lembar-pesan--buka { visibility: visible; }
.lembar-pesan__latar { position: absolute; inset: 0; background: rgba(18, 38, 63, .44); opacity: 0; transition: opacity 280ms var(--lembut); }
.lembar-pesan--buka .lembar-pesan__latar { opacity: 1; }
.lembar-pesan__panel {
  position: relative; width: min(560px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--putih); border-radius: 28px 28px 0 0; padding: 28px clamp(22px, 4vw, 36px) 32px;
  transform: translateY(100%); transition: transform 420ms var(--lembut);
}
.lembar-pesan--buka .lembar-pesan__panel { transform: none; }
@media (min-width: 761px) {
  .lembar-pesan { align-items: center; }
  .lembar-pesan__panel { border-radius: 28px; transform: translateY(24px) scale(.98); opacity: 0; transition: transform 380ms var(--lembut), opacity 280ms var(--lembut); }
  .lembar-pesan--buka .lembar-pesan__panel { transform: none; opacity: 1; }
}
.lembar-pesan__tutup {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--krem); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lembar-pesan__tutup svg { width: 18px; height: 18px; stroke: var(--navy); stroke-width: 2; fill: none; }
.lembar-pesan h2 { font-size: 26px; padding-right: 48px; }
.pilihan { margin-top: 20px; padding: 18px 20px; border-radius: 16px; background: var(--krem); }
.pilihan small { display: block; font-size: 12px; color: var(--teks-2); }
.pilihan strong { display: block; font-family: var(--serif); font-size: 19px; color: var(--navy); font-weight: 600; margin-top: 2px; }
.pilihan span { display: block; margin-top: 2px; font-size: var(--t-sedang); color: var(--tanah); font-weight: 600; }
.bidang { margin-top: 22px; }
.bidang > label, .bidang > legend { display: block; margin-bottom: 10px; padding: 0; font-size: var(--t-sedang); font-weight: 500; color: var(--navy); }
.bidang fieldset, fieldset.bidang { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
.bidang input[type="text"] {
  width: 100%; height: 52px; padding: 0 18px; border: 1.5px solid var(--garis-kuat); border-radius: 14px; background: var(--putih);
  transition: border-color var(--cepat);
}
.bidang input[type="text"]:focus { outline: none; border-color: var(--navy); }
.segmen--penuh { display: grid; width: 100%; }
.pilih-asisten { display: grid; gap: 10px; }
.pilih-asisten label {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px solid var(--garis); border-radius: 16px;
  cursor: pointer; transition: border-color var(--cepat), background var(--cepat);
}
.pilih-asisten label:has(input:checked) { border-color: var(--navy); background: #FBFAF7; }
.pilih-asisten input { width: 18px; height: 18px; accent-color: var(--navy); flex-shrink: 0; }
.pilih-asisten img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--krem); }
.pilih-asisten b { display: block; font-weight: 600; color: var(--navy); font-size: var(--t-sedang); }
.pilih-asisten small { display: block; font-size: 12px; color: var(--teks-2); }
.lembar-pesan .btn--wa { width: 100%; margin-top: 26px; min-height: 54px; }
.lembar-pesan__kecil { margin-top: 12px; text-align: center; font-size: 12px; color: var(--teks-2); }

/* ── Halaman informasi ─────────────────────────────────────────────────── */
.judul-hal { padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 48px); }
.judul-hal h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.08; letter-spacing: -.02em; }
.judul-hal p { margin-top: 18px; max-width: 38em; font-size: 18px; }
.judul-hal .judul-bagian { border-bottom: 0; padding-bottom: 0; }
.judul-hal .arab { font-size: clamp(30px, 3.6vw, 50px); }

.saring { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 28px; border-bottom: 1px solid var(--garis); }
.chip-grup { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--garis-kuat); border-radius: 999px; background: var(--putih);
  font-size: var(--t-sedang); font-weight: 500; color: var(--navy); cursor: pointer;
  transition: background var(--cepat), color var(--cepat), border-color var(--cepat);
}
.chip small { font-size: 12px; color: var(--teks-2); transition: color var(--cepat); }
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--putih); }
.chip[aria-pressed="true"] small { color: var(--emas); }
.cari { position: relative; flex: 0 1 300px; }
.cari svg { position: absolute; left: 18px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); stroke: var(--teks-2); fill: none; stroke-width: 2; pointer-events: none; }
.cari input {
  width: 100%; height: 48px; padding: 0 18px 0 46px; border: 1.5px solid var(--garis-kuat); border-radius: 999px; background: var(--putih);
  font-size: var(--t-sedang); transition: border-color var(--cepat);
}
.cari input:focus { outline: none; border-color: var(--navy); }

.penting-list { margin-top: 36px; display: grid; gap: 16px; }
.penting {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  padding: 24px 28px; border-radius: 20px; background: var(--navy); color: var(--teks-navy); text-decoration: none;
  transition: background var(--cepat);
}
.penting:hover { background: #0B1A2D; }
.penting small { font-size: var(--t-kecil); color: var(--emas); font-weight: 500; }
.penting h3 { margin-top: 6px; color: var(--putih); font-size: 22px; }
.penting .tenggat__angka { color: var(--putih); }
.penting .tenggat__satuan { color: var(--teks-navy); }

.indeks { margin-top: 12px; }
.indeks__item {
  display: grid; grid-template-columns: 260px minmax(0, 1fr) auto; gap: 32px; align-items: center;
  padding: 30px 0; border-bottom: 1px solid var(--garis); text-decoration: none; color: inherit;
}
.indeks__item .slot { aspect-ratio: 16 / 10; border-radius: 14px; }
.indeks__item h3 { margin-top: 8px; font-size: 24px; line-height: 1.3; }
.indeks__item p { margin-top: 10px; color: var(--teks); font-size: var(--t-sedang); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.indeks__tgl { text-align: right; font-size: var(--t-kecil); color: var(--teks-2); white-space: nowrap; }
.indeks__kosong { padding: 64px 0; text-align: center; }
.indeks__kosong p { color: var(--teks-2); }
.indeks__kosong .btn { margin-top: 18px; }

/* Pembaca artikel */
.baca { padding-block: clamp(32px, 5vw, 56px) var(--band); }
.baca[hidden], .daftar-hal[hidden] { display: none; }
.baca__kembali { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sedang); color: var(--teks-2); text-decoration: none; }
.baca__kembali svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform var(--cepat); }
.baca__kembali:hover { color: var(--navy); }
.baca__kembali:hover svg { transform: translateX(-3px); }
.baca__tata { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(40px, 6vw, 88px); margin-top: 32px; }
.baca h1 { margin-top: 16px; font-size: clamp(32px, 4vw, 48px); line-height: 1.14; letter-spacing: -.018em; }
.baca__ringkas { margin-top: 20px; font-size: 19px; line-height: 1.7; color: var(--teks); }
.baca__foto { margin-top: 36px; aspect-ratio: 16 / 9; border-radius: 20px; }
.baca__foto--tiada { display: none; }
.kotak-tenggat {
  margin-top: 32px; display: flex; align-items: center; gap: 18px; padding: 20px 24px;
  border-radius: 16px; background: var(--navy); color: var(--teks-navy);
}
.kotak-tenggat[hidden] { display: none; }
.kotak-tenggat small { display: block; font-size: var(--t-kecil); color: var(--emas); }
.kotak-tenggat strong { display: block; margin-top: 2px; font-family: var(--serif); font-size: 21px; color: var(--putih); font-weight: 600; }
.kotak-tenggat .tenggat__angka { margin-left: auto; color: var(--putih); }
.kotak-tenggat .tenggat__satuan { color: var(--teks-navy); }

.isi { margin-top: 36px; max-width: 40em; }
.isi > * { margin: 0; }
.isi > * + * { margin-top: 1.1em; }
.isi > h2 { margin-top: 1.9em; font-size: 26px; }
.isi > h2:first-child { margin-top: 0; }
.isi p { font-size: 18px; line-height: 1.85; color: var(--teks); }
.isi ul, .isi ol { padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55em; }
.isi li { position: relative; font-size: 18px; line-height: 1.75; }
.isi ul li { padding-left: 26px; }
.isi ul li::before { content: ''; position: absolute; left: 4px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--emas); }
/* Daftar bernomor: angka dalam lingkaran emas, seperti langkah di "Cara kerjanya" */
.isi ol { counter-reset: butir; }
.isi ol li { padding-left: 42px; counter-increment: butir; }
.isi ol li::before {
  content: counter(butir); position: absolute; left: 0; top: .2em; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--emas); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 14px; font-weight: 700; line-height: 1; color: var(--navy);
}
/* Kotak catatan: latar krem dengan garis emas di kiri — "Blok Kutipan"
   persis seperti di Brand Style Guide. */
.isi .catatan {
  margin-top: 1.5em; padding: 18px 22px; background: var(--krem);
  border-left: 3px solid var(--emas); border-radius: 0 14px 14px 0;
  font-size: 16.5px; line-height: 1.75; color: var(--teks);
}
.isi .catatan b { color: var(--navy); font-weight: 600; }

.bagikan { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 28px; border-top: 1px solid var(--garis); }
.bagikan span { font-size: var(--t-sedang); color: var(--teks-2); margin-right: 6px; }

.samping { display: flex; flex-direction: column; gap: 24px; }
.samping__kotak { padding: 26px; border-radius: 20px; background: var(--krem); }
.samping__kotak h2 { font-size: 20px; }
.samping__kotak p { margin-top: 10px; font-size: var(--t-sedang); }
.samping__kotak .btn { margin-top: 18px; width: 100%; }
.terkait { display: flex; flex-direction: column; }
.terkait a { padding: 16px 0; border-bottom: 1px solid var(--garis-kuat); text-decoration: none; }
.terkait a:last-child { border-bottom: 0; padding-bottom: 0; }
.terkait strong { display: block; margin-top: 4px; font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--navy); font-weight: 600; }
.terkait a:hover strong { text-decoration: underline; text-decoration-color: var(--emas); text-underline-offset: 4px; }

.pemberitahuan {
  position: fixed; left: 50%; bottom: 24px; z-index: 160; transform: translate(-50%, 20px);
  padding: 12px 20px; border-radius: 999px; background: var(--navy); color: var(--putih);
  font-size: var(--t-sedang); opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--lembut), transform 240ms var(--lembut);
}
.pemberitahuan--tampil { opacity: 1; transform: translate(-50%, 0); }

/* ── Layar sedang ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav__tautan { gap: 22px; }
  .paket { grid-template-columns: minmax(0, 1fr) auto; row-gap: 16px; }
  .paket .isi-paket { grid-column: 1 / -1; grid-row: 2; }
  .paket__harga { grid-column: 2; grid-row: 1; }
  .paket > .btn { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .indeks__item { grid-template-columns: 200px minmax(0, 1fr); }
  .indeks__tgl { display: none; }
  .baca__tata { grid-template-columns: minmax(0, 1fr); }
}

/* ── Layar kecil ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav__tautan { display: none; }
  .nav__menu { display: inline-flex; }
  .nav__isi { height: 64px; }
  [id] { scroll-margin-top: 76px; }

  .hero__isi { grid-template-columns: minmax(0, 1fr); }
  .lengkung__bingkai { max-width: 340px; aspect-ratio: 100 / 138; }
  .bola { width: 220px; right: -30px; top: -14px; }
  .band--navy::before, .kaki::before { top: -13px; height: 14px; background-size: 24px 13.5px; }
  .info-grid, .lain, .cara, .lacak, .faq { grid-template-columns: minmax(0, 1fr); }
  .cara .slot { aspect-ratio: 16 / 11; }
  .kaki__atas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kaki__atas > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero__lead { font-size: 17px; }
  .kepala { flex-direction: column; align-items: flex-start; gap: 18px; }
  .tenggat { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .tenggat .tenggat__sisa { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 8px; padding-top: 12px; border-top: 1px solid var(--garis-kuat); }
  .tenggat__angka { font-size: 24px; }
  .butir { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .lain__daftar { grid-template-columns: minmax(0, 1fr); }
  .lacak-form { padding: 22px; }
  .lacak-form__baris { flex-direction: column; }
  .cek__form { flex-direction: column; }
  .cek__form input { flex: 0 0 auto; }
  .cek__butir { grid-template-columns: minmax(0, 1fr); }
  .cek__butir .cek__tingkat { justify-self: start; }
  .cek__aksi { justify-content: flex-start; }
  .cek__aksi .btn { flex: 1 1 auto; }
  .galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .penampil__atas strong { font-size: 17px; }
  .penampil__alat { gap: 4px; }
  .penampil__skala { display: none; }
  /* Di HP panah tidak boleh menutupi pinggir foto: pindah ke bawah, di atas bilah putih */
  .penampil__geser { top: auto; bottom: 150px; width: 44px; height: 44px; margin-top: 0; font-size: 22px; }
  .penampil__geser--kiri { left: 8px; }
  .penampil__geser--kanan { right: 8px; }
  .kode { flex: 0 0 auto; }
  .tim { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .orang { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; align-items: center;
    padding: 16px 0; border-bottom: 1px solid var(--garis); }
  .orang .slot { grid-row: 1 / span 3; aspect-ratio: 1; border-radius: 18px; }
  .orang h3 { margin-top: 0; font-size: 18px; }
  .orang .btn { margin-top: 10px; }
  .hasil__data { grid-template-columns: minmax(0, 1fr); }
  .segmen button { padding: 0 20px; }
  .indeks__item { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .penting { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .penting .tenggat__sisa { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .isi p, .isi li { font-size: 17px; }
  .isi .catatan { font-size: 15.5px; }
  .tanya__jawab p { padding-right: 0; }
}

/* ── Gerak dikurangi ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
  .js .siap .kata > span { transform: none; }
  .js .siap .hero__untuk, .js .siap .hero__lead, .js .siap .hero__aksi, .js .siap .hero__janji, .js .siap .lengkung { opacity: 1; }
  .lengkung__garis path { stroke-dashoffset: 0; }
  .lengkung__foto { transform: none; }
  .foto-lebar img { transform: none; }
  .tl li { opacity: 1; transform: none; }
  .tl--kini .tl__tanda::before { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   VERSI STORYBRAND — bagian-bagian baru (Oktober 2026)
════════════════════════════════════════════════════════════════════════ */

/* ── Pembuka ───────────────────────────────────────────────────────────── */
.hero__untuk { margin-bottom: 14px; font-size: 14px; font-weight: 500; color: var(--tanah); }
.hero__janji { margin: 30px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--teks-2); }
.hero__janji li { display: inline-flex; align-items: center; gap: 8px; }
.hero__janji svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--tanah); stroke-width: 2.4; }

/* ── Apa yang sedang Anda urus? ────────────────────────────────────────── */
.pintu-band { padding-bottom: var(--band); }
.pintu { background: var(--krem); border-radius: 28px; padding: clamp(22px, 4vw, 48px); }
.pintu h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.2; }
.pintu__lead { margin-top: 8px; font-size: var(--t-sedang); color: var(--teks-2); }
.pintu__tahap { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.pintu__pilih {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  min-height: 58px; padding: 9px 18px; border: 1.5px solid var(--garis-kuat); border-radius: 16px;
  background: var(--putih); color: var(--navy); text-align: left; cursor: pointer;
  transition: background var(--cepat), color var(--cepat), border-color var(--cepat);
}
.pintu__pilih b { font-size: var(--t-sedang); font-weight: 600; line-height: 1.3; }
.pintu__pilih small { font-size: 12px; line-height: 1.4; color: var(--teks-2); transition: color var(--cepat); }
.pintu__pilih:hover { border-color: var(--navy); }
.pintu__pilih[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--putih); }
.pintu__pilih[aria-pressed="true"] small { color: var(--teks-navy); }
.pintu__daftar { margin-top: 24px; padding: 6px clamp(18px, 3vw, 30px); background: var(--putih); border-radius: 20px; }
.pintu__daftar--masuk { animation: panel-masuk 380ms var(--lembut); }
.pintu__list { margin: 0; padding: 0; list-style: none; }
.pintu__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 28px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--garis);
}
.pintu__item:last-child { border-bottom: 0; }
.pintu__nama { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pintu__nama h3 { font-size: 20px; }
.pintu__nama h3 a { text-decoration: none; }
.pintu__nama h3 a:hover { text-decoration: underline; text-decoration-color: var(--emas); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pintu__info p { margin-top: 4px; font-size: var(--t-sedang); line-height: 1.55; color: var(--teks-2); }
.pintu__aksi { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; }
.pintu__tombol { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pintu__tombol .tautan { font-size: 14px; }
.pintu__kaki { margin-top: 16px; font-size: 14px; color: var(--teks-2); }
.pintu__cadangan { margin: 0; padding: 18px 0; list-style: none; columns: 2 240px; column-gap: 32px; }
.pintu__cadangan li { padding: 6px 0; }
.pintu__cadangan a { font-weight: 500; color: var(--navy); }

.lencana { padding: 2px 10px; border-radius: 999px; background: var(--krem); font-size: 12px; font-weight: 500; line-height: 1.6; color: var(--tanah); white-space: nowrap; }
.lencana--navy { background: var(--navy); color: var(--putih); }

.harga-ringkas { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.harga-ringkas b { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--navy); white-space: nowrap; font-variant-numeric: lining-nums proportional-nums; }
.harga-ringkas small { margin-top: 2px; font-size: 12px; color: var(--teks-2); text-align: right; max-width: 22em; }

/* ── Masalah ───────────────────────────────────────────────────────────── */
.masalah__judul { max-width: 16em; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.15; letter-spacing: -.015em; }
.masalah__judul span { color: var(--emas); }
.masalah__lead { margin-top: 18px; max-width: 36em; font-size: var(--t-isi); line-height: 1.75; }
.masalah__daftar { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.masalah__daftar > div { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .18); }
.masalah__daftar h3 { font-size: 21px; }
.masalah__daftar p { margin-top: 8px; font-size: var(--t-sedang); line-height: 1.75; }

/* ── Pemandu ───────────────────────────────────────────────────────────── */
.pemandu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); align-items: start; margin-bottom: 44px; }
.pemandu__teks { font-size: 18px; line-height: 1.8; }
.bukti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bukti > div { padding: 18px; border-radius: 16px; background: var(--krem); }
.bukti b { display: block; font-family: var(--serif); font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--navy); font-variant-numeric: lining-nums; }
.bukti span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--teks-2); }
.testi { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.testi__item { margin: 0; padding: 24px; border: 1px solid var(--garis-kuat); border-radius: 20px; display: flex; flex-direction: column; gap: 14px; }
.testi__item blockquote { margin: 0; }
.testi__item blockquote p { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.6; color: var(--navy); }
.testi__item figcaption b { display: block; font-size: var(--t-sedang); font-weight: 600; color: var(--navy); }
.testi__item figcaption span { font-size: 13px; color: var(--teks-2); }

/* ── Paling sering dipesan ─────────────────────────────────────────────── */
.laris { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); }
.laris__kartu { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--garis-kuat); border-radius: 22px; text-decoration: none; color: inherit; }
.laris__tahap { font-size: 13px; font-weight: 500; color: var(--tanah); }
.laris__kartu h3 { font-size: 24px; line-height: 1.25; }
.laris__kartu h3 a { text-decoration: none; }
.laris__kartu h3 a:hover { text-decoration: underline; text-decoration-color: var(--emas); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.laris__kartu p { font-size: var(--t-sedang); line-height: 1.6; }
.laris__harga { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--garis); display: flex; flex-direction: column; }
.laris__harga b { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--navy); font-variant-numeric: lining-nums proportional-nums; }
.laris__harga small { font-size: 13px; color: var(--teks-2); }
.laris__aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.laris__aksi .tautan { font-size: 14px; }
.laris__kaki { margin-top: 26px; font-size: var(--t-sedang); }

/* ── Urus sendiri atau lewat LAPA ──────────────────────────────────────── */
.banding__judul { font-size: var(--t-h2); }
.banding__lead { margin-top: 12px; max-width: 38em; }
.banding { margin-top: 36px; padding: 8px clamp(18px, 3vw, 32px); border: 1px solid var(--garis-kuat); border-radius: 22px; }
.banding__baris {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 4px 28px;
  padding: 16px 0; border-bottom: 1px solid var(--garis); font-size: var(--t-sedang); line-height: 1.55;
}
.banding__baris:last-child { border-bottom: 0; }
.banding__baris > b { font-weight: 600; color: var(--navy); }
.banding__baris > span:nth-child(2) { color: var(--teks-2); }
.banding__baris > span:nth-child(3) { position: relative; padding-left: 24px; color: var(--teks); }
.banding__baris:not(.banding__baris--kepala) > span:nth-child(3)::before {
  content: ''; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px;
  border-left: 2.2px solid var(--tanah); border-bottom: 2.2px solid var(--tanah); transform: rotate(-45deg);
}
.banding__baris--kepala { border-bottom: 1.5px solid var(--navy); font-size: 13px; font-weight: 600; }
.banding__baris--kepala > span:nth-child(3) { color: var(--navy); }

/* ── Pengingat tenggat ─────────────────────────────────────────────────── */
.band--rapat-atas { padding-top: 0; }
.ingat {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 72px); align-items: center;
  padding: clamp(26px, 4vw, 56px); border: 1.5px solid var(--emas); border-radius: 28px;
}
.ingat .arab { display: block; font-size: clamp(24px, 2.4vw, 30px); }
.ingat h2 { margin-top: 8px; font-size: clamp(28px, 3vw, 38px); line-height: 1.2; }
.ingat p { margin-top: 14px; font-size: 16px; line-height: 1.75; }
.ingat__tombol { display: flex; flex-direction: column; gap: 12px; }
.grup-tombol {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 24px;
  border-radius: 18px; background: var(--navy); color: var(--putih); text-decoration: none; transition: background var(--cepat);
}
.grup-tombol:hover { background: #0B1A2D; }
.grup-tombol b { display: block; font-size: 16px; font-weight: 600; }
.grup-tombol small { display: block; font-size: 12px; color: var(--teks-navy); }
.grup-tombol svg { width: 20px; height: 20px; flex-shrink: 0; }
.grup-tombol--nanti { background: transparent; border: 1.5px dashed var(--garis-kuat); color: var(--teks-2); }
.grup-tombol--nanti b { color: var(--navy); }
.grup-tombol--nanti small { color: var(--teks-2); }

/* ── Lacak, penutup ────────────────────────────────────────────────────── */
.lacak__ortu { margin-top: 12px; max-width: 30em; font-size: var(--t-sedang); color: var(--emas); }
.penutup { text-align: center; }
.penutup .wrap { display: flex; flex-direction: column; align-items: center; }
.penutup h2 { max-width: 18em; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.15; }
.penutup p { margin-top: 16px; max-width: 32em; }
.penutup .btn { margin-top: 30px; }

/* ── Lembar pemesanan: pilihan Banin/Banat ─────────────────────────────── */
.pilihan__catatan { margin-top: 4px; }
.bidang__opsional { font-weight: 400; color: var(--teks-2); }
.pilih-status { display: flex; flex-wrap: wrap; gap: 10px; }
.pilih-status label {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px;
  border: 1.5px solid var(--garis); border-radius: 999px; cursor: pointer; font-weight: 500; color: var(--navy);
  transition: border-color var(--cepat), background var(--cepat);
}
.pilih-status label:has(input:checked) { border-color: var(--navy); background: #FBFAF7; }
.pilih-status input { width: 18px; height: 18px; accent-color: var(--navy); }
.lembar-pesan .btn--wa svg { width: 19px; height: 19px; }

/* ── Halaman layanan ───────────────────────────────────────────────────── */
.remah { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--teks-2); }
.remah li + li::before { content: '/'; margin-right: 6px; color: var(--garis-kuat); }
.remah a { color: var(--teks-2); text-decoration: none; }
.remah a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.lyn { padding-block: clamp(32px, 5vw, 56px) var(--band); }
.lyn__tata { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(40px, 6vw, 88px); align-items: start; }
.lyn__kepala .lencana { margin-right: 6px; }
.lyn__kepala h1 { margin-top: 14px; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -.02em; }
.lyn__lead { margin-top: 18px; max-width: 34em; font-size: 19px; line-height: 1.7; }
.lyn__aksi { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lyn .isi { margin-top: 44px; }
.lyn .isi h2 { font-size: 26px; }
.lyn__samping { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
.kotak-harga { padding: 26px; border-radius: 22px; background: var(--krem); }
.kotak-harga h2 { font-size: 20px; }
.kotak-harga__daftar { margin: 14px 0 0; padding: 0; list-style: none; }
.kotak-harga__daftar li { padding: 14px 0; border-top: 1px solid var(--garis-kuat); }
.kotak-harga__daftar small { display: block; font-size: 13px; font-weight: 500; color: var(--tanah); }
.kotak-harga__daftar b { display: block; font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1.25; color: var(--navy); font-variant-numeric: lining-nums proportional-nums; }
.kotak-harga__daftar span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--teks-2); }
.kotak-harga .btn { margin-top: 10px; width: 100%; }
.kotak-harga__kecil { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--teks-2); }
.kotak-lacak { padding: 22px 24px; border-radius: 20px; border: 1px solid var(--garis-kuat); font-size: 14px; line-height: 1.6; }
.kotak-lacak b { color: var(--navy); }
.lyn-terkait { padding-block: 0 var(--band); }
.lyn-terkait h2 { font-size: var(--t-h3); }
.lyn-terkait .laris { margin-top: 24px; }

/* ── Layar sedang & kecil untuk bagian baru ───────────────────────────── */
@media (max-width: 1024px) {
  .lyn__tata { grid-template-columns: minmax(0, 1fr); }
  .lyn__samping { position: static; }
}
@media (max-width: 860px) {
  .masalah__daftar, .pemandu, .laris, .ingat { grid-template-columns: minmax(0, 1fr); }
  .kaki__atas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .banding__baris { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .banding__baris > b, .banding__baris--kepala > span:first-child { grid-column: 1 / -1; }
  .banding__baris--kepala > span:first-child { display: none; }
}
@media (max-width: 600px) {
  .pintu__item { grid-template-columns: minmax(0, 1fr); }
  .pintu__aksi { justify-content: space-between; }
  .harga-ringkas { align-items: flex-start; }
  .harga-ringkas small { text-align: left; }
  .pintu__pilih { flex: 1 1 calc(50% - 5px); }
  .bukti { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bukti > div { padding: 14px 12px; }
  .bukti b { font-size: 26px; }
  .banding { padding-inline: 16px; }
  .banding__baris { gap: 4px 16px; font-size: 14px; }
}

/* ── Halaman info kuliah: kotak samping & ajakan grup ─────────────────── */
.samping__harga { margin-top: 10px; font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--navy); }
.samping__detail { display: inline-block; margin-top: 12px; font-size: 14px; }
.ajak-grup__tombol { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 280px; }
.ajak-grup__tombol .grup-tombol { flex: 1 1 200px; min-height: 56px; }
.ajak-grup--samping { flex-direction: column; align-items: stretch; }
.ajak-grup--samping .ajak-grup__tombol { flex-direction: column; flex-basis: auto; }
.ajak-grup--samping .grup-tombol { flex-basis: auto; }

/* Penyesuaian setelah pengujian tampilan */
.tim { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pintu__tahap { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 1024px) { .tim { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .tim { grid-template-columns: minmax(0, 1fr); }
  .pintu__tahap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cek + .kelompok { margin-top: 44px; }
.ingat .arab { text-align: left; }
@media (max-width: 600px) {
  .pintu { padding: 22px 16px; border-radius: 22px; }
  .pintu__daftar { padding: 2px 16px; }
  .pintu__pilih { padding: 9px 14px; }
}
.kaki ul span { font-size: var(--t-sedang); }
.hasil h3, .hasil .hasil__layanan { color: var(--navy); }
.ajak-grup .grup-tombol b { color: inherit; }
.ajak-grup .grup-tombol--nanti b { color: var(--navy); }
.ajak-grup--samping p { flex: none; }

/* Foto asisten: potongan transparan di atas latar krem; inisial bila belum ada foto */
.orang .slot img { object-fit: contain; object-position: center bottom; }
.inisial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: clamp(36px, 5vw, 56px); font-weight: 700; letter-spacing: .04em; color: var(--tanah); }
@media (max-width: 600px) { .inisial { font-size: 28px; } }

/* ═════════ Halaman jadwal kuliah (/jadwal) ═════════ */
.jd { padding-bottom: clamp(56px, 7vw, 96px); }
.jd-pilih { display: grid; gap: 14px; padding: 24px 26px; background: var(--krem); border-radius: 22px; }
.jd-pilih__baris { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 12px; }
.jd-pilih__label { font-size: var(--t-kecil); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tanah); }
.jd-kosong { margin-top: 28px; padding: 28px; border: 1.5px dashed var(--garis-kuat); border-radius: 18px; text-align: center; color: var(--teks-2); }

.jd-hasil { margin-top: 28px; }
.jd-atas { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; }
.jd-kini, .jd-ruang { border-radius: 22px; padding: 26px 28px; }
.jd-kini { background: var(--navy); color: var(--teks-navy); position: relative; overflow: hidden; }
.jd-kini::after {
  content: ""; position: absolute; right: -40px; bottom: -70px; width: 190px; height: 250px;
  -webkit-mask: var(--lunas) center / 100% 100% no-repeat; mask: var(--lunas) center / 100% 100% no-repeat;
  background: rgba(183, 149, 98, .10); pointer-events: none;
}
.jd-kini__tgl { display: block; font-size: var(--t-kecil); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--emas); }
.jd-kini__judul { margin-top: 12px; color: var(--putih); font-family: var(--serif); font-size: var(--t-besar); }
.jd-kini__baris { position: relative; z-index: 1; margin-top: 14px; display: grid; gap: 2px; }
.jd-kini__label { font-size: var(--t-kecil); color: rgba(217, 214, 207, .75); }
.jd-kini__baris strong { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 30px); font-weight: 600; line-height: 1.2; color: var(--putih); }
.jd-kini__jam { font-size: var(--t-sedang); color: var(--emas); font-weight: 500; font-variant-numeric: tabular-nums; }
.jd-kini__lagi { position: relative; z-index: 1; margin-top: 14px; font-size: var(--t-sedang); }

.jd-ruang { border: 1px solid var(--garis); background: var(--putih); }
.jd-ruang__label { display: block; font-size: var(--t-kecil); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tanah); }
.jd-ruang__nama { margin-top: 12px; display: flex; gap: 12px; align-items: flex-start; }
.jd-ruang__ikon { flex: none; width: 26px; height: 26px; margin-top: 3px; color: var(--tanah); }
.jd-ruang__nama strong { display: block; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.jd-ruang__ar { display: block; margin-top: 2px; font-family: var(--naskh); font-size: 19px; color: var(--tanah); text-align: left; }
.jd-ruang__ket { margin-top: 10px; padding-left: 38px; font-size: var(--t-sedang); color: var(--teks); }
.jd-ruang__termin { margin-top: 4px; padding-left: 38px; font-size: var(--t-kecil); color: var(--teks-2); }

.jd-minggu { margin-top: 40px; }
.jd-minggu__kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1.5px solid var(--navy); }
.jd-minggu__kepala h2 { font-size: var(--t-h3); }
.jd-aksi { display: flex; flex-wrap: wrap; gap: 8px; }

.jd-tab { display: none; }
.jd-tab__btn {
  flex: 1 1 0; min-width: 0; min-height: 56px; padding: 6px 4px; border: 0; border-radius: 14px; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  font-size: var(--t-sedang); font-weight: 600; color: var(--teks-2); cursor: pointer; transition: background var(--cepat), color var(--cepat);
}
.jd-tab__btn small { font-size: 11px; font-weight: 500; color: var(--tanah); }
.jd-tab__btn[aria-selected="true"] { background: var(--navy); color: var(--putih); }
.jd-tab__btn[aria-selected="true"] small { color: var(--emas); }
#jd-hari { display: none; }

.jd-daftar { list-style: none; margin: 0; padding: 0; }
.jd-butir { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--garis); }
.jd-butir__jam { font-variant-numeric: tabular-nums; line-height: 1.3; }
.jd-butir__jam b { display: block; font-size: 17px; font-weight: 600; color: var(--navy); }
.jd-butir__jam span { font-size: var(--t-kecil); color: var(--teks-2); }
.jd-butir__isi strong { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.jd-butir__lencana { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; background: var(--emas); color: var(--navy); font-size: 12px; font-weight: 600; }
.jd-butir--kini { margin-inline: -14px; padding-inline: 14px; background: var(--krem); border-radius: 14px; border-bottom-color: transparent; }
.jd-butir__mk + .jd-butir__mk { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--garis-kuat); }
.jd-dosen { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--t-sedang); line-height: 1.5; color: var(--teks-2); }
.jd-daftar__akhir { margin-top: 14px; font-size: var(--t-kecil); color: var(--teks-2); }

.jd-pekan { margin-top: 22px; }
.jd-tabel { width: 100%; border-collapse: separate; border-spacing: 8px; margin: -8px; width: calc(100% + 16px); table-layout: fixed; }
.jd-tabel thead th { font-size: var(--t-sedang); font-weight: 600; color: var(--navy); padding: 6px 4px 2px; text-align: left; }
.jd-tabel thead th:first-child { width: 72px; }
.jd-tabel thead th small { display: block; font-size: 11px; font-weight: 500; color: var(--tanah); line-height: 1; }
.jd-tabel tbody th { vertical-align: top; text-align: left; padding-top: 14px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.3; }
.jd-tabel tbody th b { display: block; font-size: 16px; font-weight: 600; color: var(--navy); }
.jd-tabel tbody th span { font-size: var(--t-kecil); color: var(--teks-2); }
.jd-tabel td { vertical-align: top; padding: 14px 14px 16px; background: var(--krem); border-radius: 14px; }
.jd-tabel td.jd-tabel--kosong { background: transparent; border: 1.5px dashed var(--garis); }
.jd-tabel td.jd-tabel--hariini:not(.jd-tabel--kosong) { background: #F1E7D8; }
.jd-tabel thead th.jd-tabel--hariini { color: var(--tanah); }
.jd-sel + .jd-sel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--garis-kuat); }
.jd-sel strong { display: block; font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.jd-sel span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--teks-2); }

.jd-catatan { margin-top: 32px; padding: 20px 24px; border-left: 4px solid var(--emas); background: var(--krem); border-radius: 0 16px 16px 0; display: grid; gap: 8px; font-size: var(--t-sedang); }
.jd-catatan b { color: var(--navy); }

.jd-ajak h2 { font-size: var(--t-h2); max-width: 22em; }
.jd-ajak h2 em { font-style: normal; color: var(--tanah); }
.jd-ajak__kartu { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.jd-kartu {
  display: grid; gap: 6px; align-content: start; padding: 24px 26px; border-radius: 20px; background: var(--putih);
  border: 1px solid var(--garis); text-decoration: none; transition: border-color var(--cepat), transform var(--cepat);
}
.jd-kartu:hover { border-color: var(--navy); transform: translateY(-2px); }
.jd-kartu small { font-size: var(--t-kecil); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tanah); }
.jd-kartu strong { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--navy); }
.jd-kartu span { font-size: var(--t-sedang); color: var(--teks); }
.jd-ajak .ajak-grup { background: var(--putih); }

@media (max-width: 860px) {
  .jd-atas { grid-template-columns: 1fr; }
  .jd-pekan { display: none; }
  .jd-tab { display: flex; gap: 4px; margin-top: 16px; padding: 5px; background: var(--krem); border-radius: 18px; }
  #jd-hari { display: block; margin-top: 8px; }
  .jd-ajak__kartu { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .jd-pilih { padding: 18px; border-radius: 18px; }
  .jd-pilih__baris { grid-template-columns: 1fr; gap: 8px; }
  .jd-pilih .chip { padding: 0 15px; }
  .jd-kini, .jd-ruang { padding: 22px; }
  .jd-ruang__ket, .jd-ruang__termin { padding-left: 0; }
  .jd-minggu__kepala h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .jd-kartu:hover { transform: none; } }

/* Pernyataan independen di kaki halaman */
.kaki__bawah p + p { margin-top: 10px; }
.kaki__pernyataan { max-width: 62em; line-height: 1.6; }
.kaki__pernyataan[lang="ar"] { font-family: var(--naskh); font-size: 15px; text-align: right; margin-left: auto; }

/* ════════════════════════════════════════════════════════════════════════
   CEK NAMA MURASYAH (/cek-murasyah)
   Memakai komponen .cek milik cek qoimah, ditambah kotak sumber resmi
   dan panel langkah berikutnya.
════════════════════════════════════════════════════════════════════════ */
.mr-resmi {
  padding: 20px 24px; border: 1px solid var(--garis-kuat); border-left: 4px solid var(--navy);
  border-radius: 0 16px 16px 0; background: var(--putih); display: grid; gap: 8px;
}
.mr-resmi > strong { font-size: 16px; font-weight: 600; color: var(--navy); }
.mr-resmi > p { max-width: 52em; font-size: var(--t-sedang); line-height: 1.7; color: var(--teks); }
.mr-sumber { margin-top: 4px; font-size: var(--t-sedang); color: var(--teks); }
.mr-sumber b { color: var(--navy); font-weight: 600; }
.mr-sumber__rinci { margin-top: 6px; }
.mr-sumber__rinci summary { cursor: pointer; width: fit-content; font-size: 14px; font-weight: 500; color: var(--tanah); text-decoration: underline; text-underline-offset: 3px; }
.mr-sumber__rinci summary:hover { color: var(--navy); }
.mr-sumber__daftar { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--garis); }
.mr-sumber__daftar li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  padding: 10px 0; border-bottom: 1px solid var(--garis); font-size: 14px;
}
.mr-sumber__daftar li > span { display: grid; gap: 1px; min-width: 0; }
.mr-sumber__daftar b { font-weight: 500; color: var(--navy); }
.mr-sumber__daftar small { font-size: 12.5px; color: var(--teks-2); }
.cek__hasil > .mr-sumber__daftar { margin-top: 0; }

.mr-cek { margin-top: 24px; border: 1px solid var(--garis-kuat); }
.mr-cek h2 { font-size: clamp(21px, 2vw, 25px); }
.mr-cek[hidden] { display: none; }
.mr-letak { font-size: 13px; color: var(--teks-2); }

.mr-langkah {
  margin-top: 6px; padding: clamp(20px, 3vw, 28px); border-radius: 18px; background: var(--navy); color: var(--teks-navy);
  animation: panel-masuk 420ms var(--lembut) both; scroll-margin-top: 96px;
}
.mr-langkah:focus { outline: none; }
.mr-langkah h3 { font-size: clamp(20px, 2vw, 24px); color: var(--putih); }
.mr-langkah__nama { margin-top: 4px; font-size: var(--t-sedang); }
.mr-langkah__nama span { font-family: var(--naskh); font-size: 19px; font-weight: 600; color: var(--emas); }
.mr-langkah ol { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 12px; font-size: var(--t-sedang); line-height: 1.7; }
.mr-langkah ol b { color: var(--putih); font-weight: 600; }
.mr-langkah ol li::marker { color: var(--emas); font-weight: 600; }
.mr-langkah .tautan { color: var(--putih); text-decoration-color: rgba(255,255,255,.35); }
.mr-langkah .tautan:hover { color: var(--emas); text-decoration-color: var(--emas); }
.mr-langkah__aksi { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.mr-langkah .btn--navy { background: var(--emas); color: var(--navy); }
.mr-langkah .btn--navy:hover { background: #C7A775; }
.mr-langkah .btn--garis { border-color: rgba(255,255,255,.4); color: var(--putih); background: transparent; }
.mr-langkah .btn--garis:hover { background: var(--putih); color: var(--navy); }
.mr-langkah :focus-visible { outline-color: var(--emas); }
.mr-langkah__harga { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: var(--t-sedang); }
.mr-langkah__harga b { display: block; color: var(--emas); font-weight: 600; }
.mr-langkah__harga p { margin-top: 4px; line-height: 1.7; }
.mr-tanya__tombol { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 600px) {
  .mr-resmi { padding: 18px; }
  .mr-langkah__aksi .btn, .mr-tanya__tombol .btn { flex: 1 1 100%; min-width: 0; white-space: normal; text-align: center; height: auto; padding: 12px 18px; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) { .mr-langkah { animation: none; } }

/* Kotak sorotan musiman (beranda tahap kuliah, halaman layanan) */
.sorotan {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin-bottom: 20px; padding: 20px 24px; border: 1.5px solid var(--emas); border-radius: 18px; background: var(--putih);
}
.sorotan > div { flex: 1 1 320px; min-width: 0; }
.sorotan b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.sorotan p { margin-top: 4px; font-size: var(--t-sedang); color: var(--teks); }
.sorotan .btn { flex: none; }
@media (max-width: 600px) { .sorotan .btn { flex: 1 1 100%; } }
.kaki__pernyataan[lang="ar"] { font-size: 17px; }

.catatan--tutup { border-left-color: var(--tanah); background: #F6EEE3; }

/* Pasang di HP (aplikasi web) */
.pasang { margin-top: 32px; display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; padding: 20px 24px; border: 1px solid var(--garis); border-radius: 18px; background: var(--putih); }
.pasang[hidden] { display: none; }
.pasang img { width: 56px; height: 56px; border-radius: 14px; flex: none; border: 1px solid var(--garis); }
.pasang__teks { flex: 1 1 180px; display: grid; gap: 6px; font-size: var(--t-sedang); }
.pasang__teks b { color: var(--navy); font-weight: 600; }
.pasang__cara { color: var(--teks-2); }
.pasang__cara[hidden] { display: none; }
.pasang .btn[hidden] { display: none; }
@media (max-width: 600px) { .pasang .btn { flex: 1 1 100%; } }

/* ── Bilah "Pasang LAPA di HP" (HP saja, bisa ditutup) ─────────────────── */
.bilah-pasang {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 140;
  display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 12px;
  border-radius: 18px; background: var(--navy); color: var(--teks-navy);
  box-shadow: 0 12px 32px rgba(11, 26, 45, .28);
  transform: translateY(140%); transition: transform 320ms var(--lembut);
}
.bilah-pasang--tampil { transform: none; }
.bilah-pasang img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.bilah-pasang p { flex: 1 1 auto; min-width: 0; display: grid; font-size: 13px; line-height: 1.35; }
.bilah-pasang b { color: var(--putih); font-weight: 600; font-size: 14px; }
.bilah-pasang .btn { flex: none; }
.bilah-pasang__tutup { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.bilah-pasang__tutup svg { width: 18px; height: 18px; stroke: var(--teks-navy); }
.bilah-pasang :focus-visible { outline-color: var(--emas); }
@media (min-width: 761px) { .bilah-pasang { display: none; } }
@media (prefers-reduced-motion: reduce) { .bilah-pasang { transition: none; } }

/* ── Halaman /pasang ───────────────────────────────────────────────────── */
.ps { padding-bottom: 72px; }
.ps-utama { margin-top: 8px; }
.ps-sudah { margin-top: 32px; padding: 20px 24px; border-radius: 18px; background: var(--krem); border-left: 4px solid var(--emas); }
.ps-sudah[hidden], .ps-belum[hidden] { display: none; }
.ps-cara { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ps-cara__kartu { padding: 26px 28px; border: 1px solid var(--garis); border-radius: 22px; background: var(--putih); }
.ps-cara__kartu h2 { font-size: var(--t-h3, 24px); }
.ps-cara__kartu > p { margin-top: 6px; color: var(--teks-2); font-size: var(--t-sedang); }
.ps-langkah { margin-top: 18px; display: grid; gap: 14px; counter-reset: ps; list-style: none; padding: 0; }
.ps-langkah li { counter-increment: ps; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; font-size: var(--t-sedang); }
.ps-langkah li::before { content: counter(ps); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--putih); font-weight: 600; font-size: 14px; }
.ps-langkah b { color: var(--navy); font-weight: 600; }
.ps-ikon { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; stroke: var(--navy); }
.ps-manfaat { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ps-manfaat div { padding: 22px 24px; border-radius: 18px; background: var(--krem); }
.ps-manfaat b { display: block; font-family: var(--serif); font-size: 19px; color: var(--navy); font-weight: 600; }
.ps-manfaat p { margin-top: 6px; font-size: var(--t-sedang); }
.ps-tanya { margin-top: 48px; }
.ps-tanya details { border-bottom: 1px solid var(--garis-kuat); padding: 16px 0; }
.ps-tanya summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.ps-tanya details p { margin-top: 10px; font-size: var(--t-sedang); }
@media (max-width: 860px) { .ps-cara, .ps-manfaat { grid-template-columns: 1fr; } }

/* ── Kartu pengingat kuliah (/jadwal) ──────────────────────────────────── */
.ingat { margin-top: 32px; padding: 26px 28px; border-radius: 22px; background: var(--navy); color: var(--teks-navy); }
.ingat[hidden] { display: none; }
.ingat :focus-visible { outline-color: var(--emas); }
.ingat__kepala { display: flex; align-items: flex-start; gap: 14px; }
.ingat__kepala svg { width: 28px; height: 28px; flex: none; stroke: var(--emas); margin-top: 2px; }
.ingat h2 { font-size: 22px; color: var(--putih); }
.ingat__sub { margin-top: 4px; font-size: var(--t-sedang); }
.ingat__isi { margin-top: 20px; display: grid; gap: 18px; }
.ingat fieldset { border: 0; padding: 0; margin: 0; }
.ingat legend { font-size: var(--t-kecil); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--emas); margin-bottom: 10px; }
.ingat__wilayah { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ingat__wilayah label { position: relative; cursor: pointer; }
.ingat__wilayah input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ingat__wilayah span { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: var(--navy-lapis); font-size: 14px; line-height: 1.3; }
.ingat__wilayah span b { color: var(--putih); font-weight: 600; font-size: 15px; }
.ingat__wilayah input:checked + span { border-color: var(--emas); background: rgba(183,149,98,.16); }
.ingat__wilayah input:focus-visible + span { outline: 2px solid var(--emas); outline-offset: 2px; }
.ingat__centang { display: grid; gap: 10px; }
.ingat__centang label { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-sedang); cursor: pointer; }
.ingat__centang input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--emas); }
.ingat__aksi { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ingat__aksi .btn--garis { border-color: rgba(255,255,255,.4); color: var(--putih); }
.ingat__aksi .btn--garis:hover { background: var(--putih); color: var(--navy); }
.ingat__pesan { font-size: var(--t-sedang); }
.ingat__pesan b { color: var(--putih); font-weight: 600; }
.ingat__pesan[hidden] { display: none; }
.ingat__ringkas { display: flex; flex-wrap: wrap; gap: 8px; }
.ingat__ringkas span { padding: 6px 12px; border-radius: 999px; background: var(--navy-lapis); border: 1px solid rgba(255,255,255,.14); font-size: 13px; }
.ingat .tautan { color: var(--putih); text-decoration-color: rgba(255,255,255,.35); }
@media (max-width: 600px) {
  .ingat { padding: 22px; }
  .ingat__wilayah { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ingat__aksi .btn { flex: 1 1 100%; }
}