/* =====================================================================================================================
   HSN 2026 — lapisan komponen (redesign 15-10-2026). Dimuat SETELAH hsn-publik.css; markup baru memakai kelas di sini dan
   tidak memakai kelas tema Islamus, agar tidak bertabrakan (mis. <br> yang disembunyikan tema, efek hover kartu).

   Katalog komponen (pakai yang ada sebelum menambah varian baru):
   - Token warna/jarak ........ :root --k-*  (turunan palet HSN: hijau NU #005221, emas logo PBNU, latar #F6F8F6)
   - Navigasi ................. .nav-turun (dropdown "Informasi", <details>), .menu-ponsel__* (menu ponsel berkelompok)
   - Tombol ................... .tombol-hsn + --hijau (utama) / --terang (sekunder) / --emas · --garis (di atas latar gelap)
                                / --kecil / --blok (selebar wadah). Tombol lama (.tombol-utama, .tombol-kedua) tetap untuk halaman bayar.
   - Lencana status ........... .chip-hsn + --buka / --segera / --live / --selesai / --tutup / --gratis / --bayar / --info
   - Kartu kegiatan ........... .kartu-kegiatan (satu komponen untuk beranda & /kegiatan/; templat publik/_kartu_kegiatan.html)
   - Katalog .................. .katalog (judul grup, saringan .saring-chip, pencarian .cari-kegiatan)
   - Kartu paket .............. .pilih-paket (kartu radio seperti memilih tiket)
   - Kartu tiket .............. .kartu-tiket (ringkasan pendaftaran di samping detail kegiatan)
   - Formulir ................. .form-control/.form-select di halaman publik (tinggi sentuh 48px, fokus hijau)
   - Lipatan .................. .lipat-hsn (sudah ada; <details>)
   - Keadaan kosong/galat ..... .kosong-hsn, .galat-hsn; memuat = [aria-busy="true"]
   ===================================================================================================================== */
:root {
  --k-hijau: #005221; --k-hijau-tua: #0A3320; --k-hijau-muda: #E6F0EA; --k-hijau-garis: #B8D0BF;
  --k-emas: #EAB87A; --k-emas-tua: #7A5414; --k-emas-muda: #FBF3E8;
  --k-latar: #F6F8F6; --k-putih: #fff; --k-garis: #DFE7E1;
  --k-teks: #16221B; --k-teks-2: #3D5246; --k-teks-3: #5B6B62;
  --k-merah: #9B1C12; --k-merah-muda: #FDECEA;
  --k-radius: 16px; --k-radius-kecil: 12px;
  --k-bayang: 0 1px 2px rgba(13,59,34,.05), 0 6px 18px rgba(13,59,34,.06);
  --k-bayang-angkat: 0 2px 4px rgba(13,59,34,.06), 0 12px 28px rgba(13,59,34,.10);
}

/* ---------------------------------------------------------------- navigasi ---------------------------------------------------------------- */
/* Menu penuh mulai 992px (lima butir muat); di bawahnya menu ponsel. Menimpa batas 1200px lama (delapan butir). */
@media (min-width: 992px) {
  .main-header .main-menu { display: block !important; }
  .header-style-one .action-box .mobile-nav-toggler, .sticky-header .mobile-nav-toggler { display: none !important; }
}
.header-style-one .main-menu .navigation > li > a, .nav-turun > summary { font-family: var(--body-font-family); font-weight: 600; }
.nav-turun { position: relative; }
.nav-turun > summary { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 46px; cursor: pointer; list-style: none;
  color: var(--k-teks); font-size: 16px; line-height: 1.25; white-space: nowrap; }
.nav-turun > summary::-webkit-details-marker { display: none; }
.nav-turun > summary:hover, .nav-turun[open] > summary { background: var(--k-hijau-muda); color: var(--k-hijau); }
.nav-turun > summary:focus-visible { outline: 3px solid var(--k-emas); outline-offset: 2px; }
.nav-turun > summary .ikon { width: 16px; height: 16px; transition: transform .2s; }
.nav-turun[open] > summary .ikon { transform: rotate(180deg); }
li.current > .nav-turun > summary { color: var(--k-hijau); background: var(--k-hijau-muda); }
.nav-turun__panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 1000; width: min(540px, 90vw);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; padding: 16px; background: #fff; border: 1px solid var(--k-garis);
  border-radius: var(--k-radius); box-shadow: var(--k-bayang-angkat); }
.nav-turun__grup { margin: 0; padding: 0; list-style: none; }
.nav-turun__judul { margin: 4px 10px 6px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--k-emas-tua); }
.header-style-one .main-menu .navigation .nav-turun li { border: 0; float: none; padding: 0; margin: 0; }
.nav-turun__grup a { display: block; padding: 9px 10px; border-radius: 10px; color: var(--k-teks); font-size: .95rem; font-weight: 600; line-height: 1.3; text-decoration: none; }
.nav-turun__grup a small { display: block; font-weight: 500; font-size: .8rem; color: var(--k-teks-3); }
.nav-turun__grup a:hover, .nav-turun__grup a:focus-visible { background: var(--k-hijau-muda); color: var(--k-hijau); }
.nav-turun__grup a[aria-current="page"] { color: var(--k-hijau); background: var(--k-hijau-muda); }

/* menu ponsel: kelompok yang jelas, tidak bertumpuk; prioritas Kegiatan → Pendaftaran → Pendaftaran Saya → Informasi */
.mobile-menu .menu-ponsel__judul { margin: 18px 20px 6px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #F2D48A; }
.mobile-menu .menu-ponsel__utama > li > a { display: flex; align-items: center; gap: 12px; min-height: 52px; font-size: 1.05rem; font-weight: 700; }
.mobile-menu .menu-ponsel__utama > li > a .ikon { width: 20px; height: 20px; flex: none; color: #F2D48A; }
.mobile-menu .menu-ponsel__info { display: grid; grid-template-columns: 1fr 1fr; }
.mobile-menu .menu-ponsel__info > li > a { min-height: 46px; display: flex; align-items: center; padding: 10px 20px; font-size: .95rem; }
.mobile-menu .navigation > li[aria-current] > a, .mobile-menu .navigation > li > a[aria-current="page"] { background: rgba(255,255,255,.08); }
/* hover tema (hijau tua di atas hijau) tak terbaca dan "menempel" setelah disentuh → emas muda */
.mobile-menu .navigation li:hover > a, .mobile-menu .navigation li.current > a { color: #F2D48A; }
.mobile-menu .navigation li > a:focus-visible { outline: 3px solid #F2D48A; outline-offset: -3px; }

/* bilah tanggal: satu baris di ponsel */
@media (max-width: 575.98px) {
  .bilah-tanggal { font-size: .8rem; padding: 5px 0; }
  .bilah-tanggal .container { flex-wrap: nowrap; }
  .bilah-tanggal .bilah-tanggal__lengkap { display: none; }
}
@media (min-width: 576px) { .bilah-tanggal .bilah-tanggal__ringkas { display: none; } }

/* ---------------------------------------------------------------- tombol & lencana ---------------------------------------------------------------- */
.tombol-hsn--blok { display: flex; width: 100%; }
.tombol-hsn[aria-disabled="true"], .tombol-hsn:disabled { opacity: .6; pointer-events: none; }
.tombol-hsn .ikon { width: 1.1em; height: 1.1em; flex: none; }
.chip-hsn--tutup { background: #EEF0EE; color: #3F4A44; }
.chip-hsn--gratis { background: #fff; color: var(--k-hijau); box-shadow: inset 0 0 0 1.5px var(--k-hijau-garis); }
.chip-hsn--gratis::before, .chip-hsn--bayar::before, .chip-hsn--info::before { display: none; }
.chip-hsn--bayar { background: var(--k-emas-muda); color: var(--k-emas-tua); box-shadow: inset 0 0 0 1.5px #EBD3AE; }
.chip-hsn--info { background: #EEF2F7; color: #2C4057; }
.chip-hsn--penuh { background: var(--k-merah-muda); color: var(--k-merah); }

/* ---------------------------------------------------------------- formulir ---------------------------------------------------------------- */
body.publik .form-control, body.publik .form-select { min-height: 48px; border-radius: var(--k-radius-kecil); border-color: #C9D6CD; font-size: 1rem; color: var(--k-teks); }
body.publik textarea.form-control { min-height: 96px; }
body.publik .form-control:focus, body.publik .form-select:focus { border-color: var(--k-hijau); box-shadow: 0 0 0 3px rgba(0,82,33,.15); }
body.publik .form-label { font-weight: 700; color: var(--k-teks); }
body.publik .form-text { color: var(--k-teks-3); }
body.publik .form-control.is-invalid, body.publik .form-select.is-invalid { border-color: var(--k-merah); }

/* ---------------------------------------------------------------- keadaan kosong / galat / memuat ---------------------------------------------------------------- */
.kosong-hsn { display: grid; justify-items: center; gap: 8px; padding: 28px 20px; border: 1.5px dashed var(--k-garis); border-radius: var(--k-radius);
  background: #fff; text-align: center; color: var(--k-teks-2); }
.kosong-hsn[hidden] { display: none; }
.kosong-hsn .ikon { width: 32px; height: 32px; color: var(--k-teks-3); }
.kosong-hsn b { color: var(--k-teks); font-size: 1.05rem; }
.galat-hsn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--k-radius-kecil); background: var(--k-merah-muda); color: var(--k-merah); }
[aria-busy="true"] { opacity: .6; transition: opacity .2s; }

/* ---------------------------------------------------------------- kartu kegiatan ---------------------------------------------------------------- */
/* Ponsel: mendatar (gambar kecil kiri) agar kartu tidak tinggi; ≥576px: tegak dalam grid. Poster potret ditampilkan utuh di atas
   latar kabur dari gambar yang sama; foto tempat dipangkas & diberi label "Foto lokasi"; tanpa gambar → ubin beridentitas HSN. */
.kartu-kegiatan { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--k-garis);
  border-radius: var(--k-radius); box-shadow: var(--k-bayang); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.kartu-kegiatan:hover { box-shadow: var(--k-bayang-angkat); }
.kartu-kegiatan:focus-within { outline: 3px solid var(--k-emas); outline-offset: 2px; }
.kartu-kegiatan__media { position: relative; display: block; min-height: 100%; background: var(--k-hijau-tua); overflow: hidden; }
.kartu-kegiatan__media img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.kartu-kegiatan__media--poster::before { content: ""; position: absolute; inset: -12px; background-image: var(--gambar); background-size: cover;
  background-position: center; filter: blur(14px) saturate(1.1); opacity: .7; }
.kartu-kegiatan__media--poster img { object-fit: contain; }
.kartu-kegiatan__media--kosong { display: grid; place-items: center; background: linear-gradient(150deg, #EEF5F0, #E2EFE6 60%, #FBF3E8); }
.kartu-kegiatan__media--kosong img { width: 58%; max-width: 120px; height: auto; object-fit: contain; }
.kartu-kegiatan__label-foto { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(10,51,32,.78); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .02em; }
.kartu-kegiatan__tgl { position: absolute; top: 6px; left: 6px; display: grid; justify-items: center; min-width: 44px; padding: 4px 6px; border-radius: 10px;
  background: #fff; color: var(--k-hijau); box-shadow: 0 2px 8px rgba(0,0,0,.18); line-height: 1.05; }
.kartu-kegiatan__tgl b { font-size: 1.15rem; font-weight: 800; }
.kartu-kegiatan__tgl span { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--k-teks-2); }
.kartu-kegiatan__isi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; }
.kartu-kegiatan__lencana { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.kartu-kegiatan__judul { margin: 0; font-family: var(--body-font-family); font-size: 1rem; font-weight: 800; line-height: 1.3; color: var(--k-teks); }
.kartu-kegiatan__judul a { color: inherit; text-decoration: none; }
.kartu-kegiatan__judul a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* seluruh kartu dapat diklik → detail */
.kartu-kegiatan__meta { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: .84rem; color: var(--k-teks-2); }
.kartu-kegiatan__meta li { display: flex; gap: 6px; align-items: flex-start; min-width: 0; }
.kartu-kegiatan__meta .ikon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--k-hijau); }
.kartu-kegiatan__meta span { overflow-wrap: anywhere; }
.kartu-kegiatan__kaki { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.kartu-kegiatan__harga { font-size: .9rem; font-weight: 800; color: var(--k-hijau); }
.kartu-kegiatan__harga small { display: block; font-size: .74rem; font-weight: 600; color: var(--k-teks-3); }
.kartu-kegiatan__aksi { position: relative; z-index: 2; }   /* tombol daftar di atas tautan-kartu */
.kartu-kegiatan--selesai .kartu-kegiatan__media { filter: grayscale(.6); }
.kartu-kegiatan--selesai .kartu-kegiatan__judul { color: var(--k-teks-2); }
@media (max-width: 575.98px) {
  .kartu-kegiatan__media { min-height: 132px; }
  .kartu-kegiatan__tgl { top: 6px; left: 6px; min-width: 40px; }
  .kartu-kegiatan__kaki .tombol-hsn { min-height: 40px; padding: 8px 14px; font-size: .88rem; }
  .kartu-kegiatan__label-foto { font-size: .6rem; }
}
@media (min-width: 576px) {
  .kartu-kegiatan { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .kartu-kegiatan__media { aspect-ratio: 16 / 10; min-height: 0; }
  .kartu-kegiatan__tgl { top: 10px; left: 10px; min-width: 50px; padding: 6px 8px; }
  .kartu-kegiatan__tgl b { font-size: 1.35rem; }
  .kartu-kegiatan__isi { padding: 14px 16px 16px; gap: 8px; }
  .kartu-kegiatan__judul { font-size: 1.05rem; }
  .kartu-kegiatan__label-foto { left: auto; right: 8px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .kartu-kegiatan { transition: none; } }

/* ---------------------------------------------------------------- katalog ---------------------------------------------------------------- */
.katalog__alat { display: grid; gap: 12px; margin-bottom: 18px; }
@media (min-width: 768px) { .katalog__alat { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); align-items: center; } }
.saring-chip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0; list-style: none; scrollbar-width: thin; }
.saring-chip a, .saring-chip button { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid var(--k-garis); background: #fff; color: var(--k-teks); font-size: .92rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.saring-chip a:hover, .saring-chip button:hover { border-color: var(--k-hijau-garis); color: var(--k-hijau); }
.saring-chip [aria-current], .saring-chip [aria-pressed="true"] { background: var(--k-hijau); border-color: var(--k-hijau); color: #fff; }
.saring-chip__jumlah { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--k-hijau-muda);
  color: var(--k-hijau); font-size: .76rem; }
.saring-chip [aria-current] .saring-chip__jumlah, .saring-chip [aria-pressed="true"] .saring-chip__jumlah { background: rgba(255,255,255,.2); color: #fff; }
.saring-chip a:focus-visible, .saring-chip button:focus-visible { outline: 3px solid var(--k-emas); outline-offset: 2px; }
.cari-kegiatan { position: relative; margin: 0; }
.cari-kegiatan .ikon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--k-teks-3); pointer-events: none; }
.cari-kegiatan input { padding-left: 42px; border-radius: 999px !important; }
.katalog__grup { margin-top: 26px; }
.katalog__grup:first-of-type { margin-top: 0; }
.katalog__grup[hidden] { display: none; }
.katalog__grup-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.katalog__grup-judul { margin: 0; font-family: var(--heading-font-family); font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); font-weight: 600; color: var(--green-dark, #0d3b22); }
.katalog__grup-judul small { margin-left: 6px; font-family: var(--body-font-family); font-size: .85rem; font-weight: 700; color: var(--k-teks-3); }
.katalog__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .katalog__daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 992px) { .katalog__daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1400px) { .katalog__daftar--padat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.katalog__daftar > li[hidden] { display: none; }
.katalog__lipat { margin-top: 26px; }
.katalog__lipat > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; border-radius: var(--k-radius);
  border: 1px solid var(--k-garis); background: #fff; cursor: pointer; list-style: none; font-weight: 800; color: var(--k-teks); }
.katalog__lipat > summary::-webkit-details-marker { display: none; }
.katalog__lipat > summary .ikon { transition: transform .2s; }
.katalog__lipat[open] > summary { margin-bottom: 14px; }
.katalog__lipat[open] > summary .ikon { transform: rotate(180deg); }
.katalog__semua { display: flex; justify-content: center; margin-top: 22px; }

/* ---------------------------------------------------------------- kartu paket (pilih seperti tiket) ---------------------------------------------------------------- */
.pilih-paket { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.pilih-paket legend { margin-bottom: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--k-teks-2); float: none; }
.pilih-paket__opsi { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 64px;
  padding: 12px 14px; border: 1.5px solid var(--k-garis); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.pilih-paket__opsi:hover { border-color: var(--k-hijau-garis); }
.pilih-paket__opsi input { width: 20px; height: 20px; margin: 0; accent-color: var(--k-hijau); }
.pilih-paket__opsi:has(input:checked) { border-color: var(--k-hijau); background: var(--k-hijau-muda); box-shadow: inset 0 0 0 1px var(--k-hijau); }
.pilih-paket__opsi:has(input:focus-visible) { outline: 3px solid var(--k-emas); outline-offset: 2px; }
.pilih-paket__nama { font-weight: 800; color: var(--k-teks); line-height: 1.25; }
.pilih-paket__nama small { display: block; font-weight: 600; font-size: .8rem; color: var(--k-teks-3); }
.pilih-paket__harga { font-weight: 800; color: var(--k-hijau); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pilih-paket__penuh { grid-column: 2 / -1; font-size: .78rem; font-weight: 700; color: #8A4B00; }
.pilih-paket__label-unggul { position: absolute; top: -9px; right: 12px; padding: 1px 8px; border-radius: 999px; background: var(--k-emas); color: #241803; font-size: .68rem; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .pilih-paket__opsi { transition: none; } }

/* ---------------------------------------------------------------- detail kegiatan ---------------------------------------------------------------- */
.detail-kegiatan-hsn { padding: 18px 0 64px; }
.remah { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; font-size: .88rem; color: var(--k-teks-3); }
.remah li + li::before { content: "›"; margin-right: 6px; color: var(--k-teks-3); }
.remah a { color: var(--k-hijau); font-weight: 700; text-decoration: none; }
.detail-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "poster" "tiket" "isi"; }
.detail-grid__poster { grid-area: poster; } .detail-grid__tiket { grid-area: tiket; } .detail-grid__isi { grid-area: isi; min-width: 0; }
@media (min-width: 992px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "poster tiket" "isi tiket"; gap: 24px 32px; align-items: start; }
  .detail-grid__tiket { position: sticky; top: 96px; }
}
@media (min-width: 1200px) { .detail-grid { grid-template-columns: minmax(0, 1fr) 400px; } }
.poster-kegiatan { position: relative; margin: 0; border-radius: var(--k-radius); overflow: hidden; background: var(--k-hijau-tua); box-shadow: var(--k-bayang); }
.poster-kegiatan::before { content: ""; position: absolute; inset: -20px; background-image: var(--gambar); background-size: cover; background-position: center;
  filter: blur(22px) saturate(1.1); opacity: .65; }
.poster-kegiatan a, .poster-kegiatan img { position: relative; display: block; }
.poster-kegiatan img { width: 100%; height: auto; max-height: min(78vh, 760px); object-fit: contain; margin: 0 auto; }
.poster-kegiatan--lanskap img { max-height: none; aspect-ratio: 16 / 9; object-fit: cover; }
.poster-kegiatan--kosong { display: grid; place-items: center; aspect-ratio: 16 / 6; background: linear-gradient(150deg, #EEF5F0, #E2EFE6 60%, #FBF3E8);
  border: 1px solid var(--k-garis); box-shadow: none; }
.poster-kegiatan--kosong::before { display: none; }
.poster-kegiatan--kosong a { display: grid; place-items: center; height: 100%; padding: 12px; }
.poster-kegiatan--kosong img { width: auto; height: 100%; max-height: 200px; }
.poster-kegiatan figcaption { position: relative; padding: 6px 12px; background: rgba(10,51,32,.85); color: #fff; font-size: .78rem; }
@media (max-width: 575.98px) { .poster-kegiatan img { max-height: 62vh; } .poster-kegiatan--kosong { aspect-ratio: 16 / 7; } }

.kartu-tiket { display: grid; gap: 14px; padding: 20px; background: #fff; border: 1px solid var(--k-garis); border-radius: var(--k-radius); box-shadow: var(--k-bayang); }
.kartu-tiket__kategori { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--k-emas-tua); }
.kartu-tiket h1 { margin: 0; font-family: var(--heading-font-family); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); font-weight: 600; line-height: 1.2; color: var(--green-dark, #0d3b22); }
.kartu-tiket__tema { margin: 0; padding: 10px 12px; border-radius: var(--k-radius-kecil); background: var(--k-emas-muda); color: var(--k-teks); font-size: .9rem; }
.kartu-tiket__tema .arab { display: block; margin-bottom: 4px; font-size: 1.1rem; line-height: 1.9; }
.kartu-tiket__info { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.kartu-tiket__info li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .95rem; color: var(--k-teks); }
.kartu-tiket__info .ikon { width: 20px; height: 20px; color: var(--k-hijau); }
.kartu-tiket__info small { display: block; color: var(--k-teks-3); font-size: .82rem; }
.kartu-tiket__info a { font-weight: 700; color: var(--k-hijau); }
.kartu-tiket__harga { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--k-garis); }
.kartu-tiket__harga-label { font-size: .8rem; font-weight: 700; color: var(--k-teks-3); }
.kartu-tiket__harga-nilai { font-size: 1.4rem; font-weight: 800; color: var(--k-hijau); font-variant-numeric: tabular-nums; }
.kartu-tiket__ringkas { margin: 0; padding: 10px 12px; border-radius: var(--k-radius-kecil); background: var(--k-hijau-muda); color: var(--k-teks); font-size: .92rem; }
.kartu-tiket__ringkas b { color: var(--k-hijau); }
.kartu-tiket__catatan { margin: 0; font-size: .82rem; color: var(--k-teks-3); }
.kartu-tiket__bantuan { margin: 0; padding-top: 12px; border-top: 1px solid var(--k-garis); font-size: .86rem; color: var(--k-teks-2); }

.isi-kegiatan > section { padding: 22px 0; border-top: 1px solid var(--k-garis); }
.isi-kegiatan > section:first-child { border-top: 0; padding-top: 4px; }
.isi-kegiatan h2 { margin: 0 0 12px; font-family: var(--heading-font-family); font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); font-weight: 600; color: var(--green-dark, #0d3b22); }
.isi-kegiatan p, .isi-kegiatan li { line-height: 1.7; color: #2F4238; }
.isi-kegiatan .fakta-grid { margin-top: 12px; }

/* ---------------------------------------------------------------- beranda (redesign) ---------------------------------------------------------------- */
.lompat-daftar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff;
  color: var(--k-teks); text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.lompat-daftar:hover { color: var(--k-teks); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.lompat-daftar:focus-visible { outline: 3px solid var(--k-emas); outline-offset: 2px; }
.lompat-daftar b { display: block; font-size: 1.05rem; color: var(--k-hijau); }
.lompat-daftar small { display: block; font-size: .86rem; color: var(--k-teks-2); }
.lompat-daftar .ikon { flex: none; width: 22px; height: 22px; color: var(--k-hijau); }
.seksi-katalog { padding-top: clamp(36px, 5vw, 64px); }
.info-pendukung { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .info-pendukung { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .info-pendukung { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.info-pendukung__kartu { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--k-radius); border: 1px solid var(--k-garis); background: #fff;
  color: var(--k-teks); text-decoration: none; box-shadow: var(--k-bayang); }
.info-pendukung__kartu:hover { color: var(--k-teks); box-shadow: var(--k-bayang-angkat); }
.info-pendukung__kartu .ikon { width: 26px; height: 26px; color: var(--k-hijau); }
.info-pendukung__kartu b { font-size: 1.02rem; }
.info-pendukung__kartu span { font-size: .88rem; color: var(--k-teks-2); }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-header .main-box .nav-outer { justify-content: center; }
  .header-style-one .main-menu .navigation > li > a, .nav-turun > summary { padding: 8px 10px; font-size: 15px; }
}
.page-title-hsn--ringkas { padding-block: clamp(28px, 4vw, 48px); }
.katalog__catatan a { font-weight: 700; color: var(--k-hijau); }
.kartu-kegiatan__jenis { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--k-emas-tua); }
.kartu-kegiatan__pembeda { margin: 0; font-size: .8rem; color: var(--k-teks-2); }
/* detail kegiatan: bilah Daftar lama (.bilah-daftar, hsn-publik.css) disembunyikan selama tombol kartu tiket terlihat */
.bilah-daftar { transition: transform .2s; }
.bilah-daftar.tersembunyi { transform: translateY(115%); }
@media (prefers-reduced-motion: reduce) { .bilah-daftar { transition: none; } }
.tema-kegiatan--terang { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--k-radius-kecil); background: var(--k-emas-muda); border: 1px solid #EBD3AE; }
.tema-kegiatan--terang .tema-label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--k-emas-tua); }
.tema-kegiatan--terang .tema-arab { margin: 4px 0; font-size: 1.25rem; line-height: 1.9; color: var(--k-teks); }
.tema-kegiatan--terang .tema-teks { margin: 0; font-style: italic; color: var(--k-teks-2); }
.foto-lokasi--isi { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--k-radius); margin-bottom: 14px; }
.kartu-tiket__form { display: grid; gap: 12px; }
.tombol-tiket { min-height: 54px; font-size: 1rem; text-align: center; white-space: normal; }
.detail-grid__isi .lipat { margin: 0; }

/* ================================================= finalisasi P1–P2 (15-10-2026) ================================================= */
/* Tema Islamus menyembunyikan SEMUA <br> di bawah 1440px (style.css) → alamat, kontak, dan pesan panitia (linebreaksbr) menempel
   menjadi satu baris di ponsel ("…Mojokerto61361rminumojokerto@…"). Baris baru dikembalikan untuk seluruh halaman publik. */
br { display: inline; }

/* FAQ beranda: butir terbuka tema = teks #111 di atas hijau tua (kontras ±2,3:1) → teks putih, nomor emas */
.accordion-box3 .block .acc-btn.active, .accordion-box3 .block .acc-btn.active .icon { color: #fff; }
.accordion-box3 .block .acc-btn.active .number { color: #F2D48A; }

/* menu ponsel: tautan Masuk & kanal Telegram setinggi target sentuh (≥44px), rata kiri dengan butir menu lain (tema memberi ruang ikon 54px) */
.mobile-menu .menu-akun-mobile > a { display: flex; align-items: center; min-height: 44px; }
.mobile-menu .menu-akun-mobile .menu-akun-aksi a, .mobile-menu .menu-akun-mobile .menu-akun-aksi button { display: inline-flex; align-items: center; min-height: 44px; }
.mobile-menu .contact-list-one { padding: 14px 20px 24px; }
.mobile-menu .contact-list-one li { padding-left: 0; margin-bottom: 10px; }
.mobile-menu .contact-list-one li .title { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.mobile-menu .contact-list-one li .text a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* katalog: chip saringan dan kotak cari baru bersebelahan ≥1200px; di bawahnya bertumpuk agar chip "Selesai" tidak terpotong (1024px) */
@media (min-width: 768px) and (max-width: 1199.98px) { .katalog__alat { grid-template-columns: minmax(0, 1fr); } .katalog__alat .cari-kegiatan { max-width: 420px; } }
@media (min-width: 1200px) { .katalog__alat { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); align-items: center; } }
@media (min-width: 1200px) { .katalog__daftar--padat { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }

/* kartu ponsel: "Lihat Detail" (dekoratif — seluruh kartu sudah tautan) menjadi teks kecil agar kartu tidak tinggi */
@media (max-width: 575.98px) {
  .kartu-kegiatan__kaki > span.tombol-hsn[aria-hidden="true"] { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none;
    color: var(--k-hijau); font-size: .86rem; font-weight: 800; }
  .kartu-kegiatan__kaki > span.tombol-hsn[aria-hidden="true"]::after { content: " ›"; }
}

/* beranda ponsel: katalog "Jelajahi" sebagai deret geser (kartu tegak 80% lebar, kartu berikutnya mengintip) — tidak lagi
   menumpuk belasan kartu; saringan & pencarian tetap bekerja pada deret yang sama. ≥768px tetap grid. */
.katalog__geser { display: none; }
@media (max-width: 767.98px) {
  .katalog--rel .katalog__daftar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80%, 300px); gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: thin; }
  .katalog--rel .katalog__daftar > li { scroll-snap-align: start; display: flex; }
  .katalog--rel .kartu-kegiatan { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; width: 100%; }
  .katalog--rel .kartu-kegiatan__media { aspect-ratio: 16 / 9; min-height: 0; }
  .katalog--rel .kartu-kegiatan__label-foto { left: auto; right: 8px; bottom: 8px; }
  .katalog--rel .katalog__geser { display: inline; font-family: var(--body-font-family); font-size: .8rem; font-weight: 700; color: var(--k-teks-3); white-space: nowrap; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) { .katalog--rel .katalog__daftar { scroll-behavior: smooth; } }

/* hero ponsel: daftar nama kegiatan di tautan "N kegiatan membuka pendaftaran" disembunyikan — kartunya tepat di bawah hero */
@media (max-width: 575.98px) { .lompat-daftar .lompat-daftar__nama { display: none; } }

/* seksi Lomba beranda setelah hasil diumumkan: ringkas */
.kartu-lomba--selesai .kartu-lomba__aksi { display: flex; flex-wrap: wrap; gap: 10px; }

/* detail kegiatan ponsel: poster dibatasi agar nama, jadwal, status, dan harga terlihat di layar pertama (ketuk poster = ukuran penuh) */
@media (max-width: 575.98px) { .poster-kegiatan img { max-height: min(44vh, 340px); } }
@media (min-width: 576px) and (max-width: 991.98px) { .poster-kegiatan img { max-height: min(60vh, 520px); } }

/* beranda ponsel: berita sebagai deret geser; "Tentang" lebih padat (logo mendatar, fakta 2 kolom) */
@media (max-width: 767.98px) {
  .beranda-berita .berita-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 320px); gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: thin; }
  .beranda-berita .berita-grid > * { scroll-snap-align: start; }
  .about-section .tentang-logo { display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-align: left; }
  .about-section .tentang-logo img { width: 72px; margin: 0; flex: none; }
  .about-section .tentang-logo span { margin-top: 0; }
  .about-section .fakta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .about-section .fakta-grid .fakta { padding: 10px 12px; font-size: .9rem; }
}
@media (max-width: 767.98px) {
  .beranda-berita .berita-ringkas { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ================================================= Akun Saya (redesign 15-10-2026) =================================================
   Dashboard peserta: kepala ringkas → ringkasan status → kartu pendaftaran per prioritas (kegiatan/services/akun_peserta.py). */
.akun-hsn { padding-block: 20px 56px; background: var(--k-latar); }
.akun-hsn__wadah { max-width: 1040px; }
.akun-kepala { display: grid; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--k-garis); border-radius: var(--k-radius); box-shadow: var(--k-bayang); }
@media (min-width: 768px) { .akun-kepala { grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding: 22px 26px; } }
.akun-kepala h1 { margin: 0; font-family: var(--heading-font-family); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height: 1.2; color: var(--green-dark, #0d3b22); }
.akun-kepala__salam { margin: 4px 0 8px; color: var(--k-teks-2); }
.akun-identitas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; color: var(--k-teks-2); }
.akun-identitas li { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.akun-identitas .ikon { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--k-hijau); }
.akun-identitas span { overflow-wrap: anywhere; }
.akun-identitas a, .akun-catatan-tg a { font-weight: 700; color: var(--k-hijau); }
.akun-kepala__aksi { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.akun-kepala__aksi form { margin: 0; }
.akun-keluar { min-height: 40px; padding: 8px 14px; border: 0; border-radius: 999px; background: none; color: var(--k-merah); font-weight: 700; cursor: pointer; }
.akun-keluar:hover { background: var(--k-merah-muda); }
.akun-keluar:focus-visible { outline: 3px solid var(--k-emas); outline-offset: 2px; }
.akun-catatan-tg { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--k-radius-kecil); background: var(--k-emas-muda); border: 1px solid #EBD3AE; font-size: .9rem; color: var(--k-teks); }
.akun-ringkas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; background: #fff; border: 1px solid var(--k-garis); border-radius: var(--k-radius); overflow: hidden; }
.akun-ringkas > div { display: grid; gap: 2px; padding: 12px 8px; text-align: center; }
.akun-ringkas > div + div { border-left: 1px solid var(--k-garis); }
.akun-ringkas b { font-size: 1.5rem; line-height: 1.1; color: var(--k-hijau); font-variant-numeric: tabular-nums; }
.akun-ringkas span { font-size: .78rem; font-weight: 700; color: var(--k-teks-3); }
.akun-ringkas .perlu { background: var(--k-emas-muda); }
.akun-ringkas .perlu b { color: var(--k-emas-tua); }
.akun-grup { margin-top: 26px; }
.akun-grup__judul { margin: 0 0 12px; font-family: var(--heading-font-family); font-size: 1.25rem; color: var(--green-dark, #0d3b22); }
.akun-grup__judul small { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: var(--k-hijau-muda); color: var(--k-hijau); font: 800 .8rem var(--body-font-family); vertical-align: middle; }
.akun-grup--0 .akun-grup__judul small { background: var(--k-emas); color: #241803; }
.akun-daftar { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .akun-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .akun-daftar.akun-daftar--lebar { grid-template-columns: minmax(0, 1fr); } }
.akun-lipat > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; cursor: pointer; list-style: none; }
.akun-lipat > summary::-webkit-details-marker { display: none; }
.akun-lipat > summary .akun-grup__judul { margin: 0; }
.akun-lipat > summary .ikon { width: 20px; height: 20px; transition: transform .2s; }
.akun-lipat[open] > summary { margin-bottom: 12px; }
.akun-lipat[open] > summary .ikon { transform: rotate(180deg); }
.akun-kosong { margin-top: 16px; }

/* kartu pendaftaran (kegiatan & grup Nasyid) */
.kartu-daftar { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 16px; background: #fff; border: 1px solid var(--k-garis);
  border-radius: var(--k-radius); box-shadow: var(--k-bayang); }
.kartu-daftar--p0 { border-left: 4px solid var(--k-emas); }
.kartu-daftar--p3 { background: #FAFBFA; box-shadow: none; }
.kartu-daftar__kepala { display: grid; gap: 4px; min-width: 0; }
.kartu-daftar__nomor { margin: 0; font-size: .76rem; font-weight: 800; letter-spacing: .05em; color: var(--k-teks-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kartu-daftar h3 { margin: 0; font-family: var(--body-font-family); font-size: 1.08rem; font-weight: 800; line-height: 1.3; color: var(--k-teks); overflow-wrap: anywhere; }
.kartu-daftar__waktu { display: flex; gap: 6px; margin: 0; font-size: .86rem; color: var(--k-teks-2); }
.kartu-daftar__waktu .ikon { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--k-hijau); }
.kartu-daftar__chip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.kartu-daftar__data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; padding: 12px 0; border-block: 1px dashed var(--k-garis); }
.kartu-daftar__data > div { min-width: 0; }
.kartu-daftar__data dt { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--k-teks-3); }
.kartu-daftar__data dd { margin: 2px 0 0; font-size: .93rem; color: var(--k-teks); overflow-wrap: anywhere; }
.kartu-daftar__data dd small { display: block; font-size: .8rem; color: var(--k-teks-3); }
.kartu-daftar__np { font-size: 1.15rem; color: var(--k-hijau); font-variant-numeric: tabular-nums; }
.kartu-daftar__redup { color: var(--k-teks-3); font-weight: 600; }
.kartu-daftar .kartu-daftar__langkah { margin: 0; padding: 10px 12px; border: 0; border-radius: var(--k-radius-kecil); background: var(--k-hijau-muda); font-size: .9rem; color: var(--k-teks); }
.kartu-daftar .kartu-daftar__langkah b { display: block; margin: 0; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--k-hijau); }
.kartu-daftar--p0 .kartu-daftar__langkah { background: var(--k-emas-muda); }
.kartu-daftar--p0 .kartu-daftar__langkah b { color: var(--k-emas-tua); }
.kartu-daftar--p3 .kartu-daftar__langkah { background: #EEF0EE; }
.kartu-daftar--p3 .kartu-daftar__langkah b { color: var(--k-teks-2); }
.kartu-daftar__catatan { margin: 0; font-size: .88rem; color: var(--k-teks-2); }
.kartu-daftar__lipat > summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; font-weight: 700; color: var(--k-hijau); }
.kartu-daftar__lipat ol { margin: 4px 0 0; padding-left: 20px; font-size: .9rem; }
.kartu-daftar__sertifikat { display: grid; gap: 6px; font-size: .9rem; }
.kartu-daftar__sertifikat > b { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--k-teks-3); }
.kartu-daftar__sertifikat a { display: flex; gap: 8px; align-items: flex-start; min-height: 32px; font-weight: 700; color: var(--k-hijau); }
.kartu-daftar__sertifikat a small { display: block; font-weight: 500; color: var(--k-teks-3); }
.kartu-daftar__sertifikat .ikon { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.kartu-daftar__aksi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kartu-daftar__aksi .tombol-hsn { justify-content: center; min-height: 44px; text-align: center; white-space: normal; }
.kartu-daftar__aksi .tombol-hsn--hijau { grid-column: 1 / -1; }
@media (min-width: 576px) {
  .kartu-daftar { padding: 18px 20px; }
  .kartu-daftar__aksi { display: flex; flex-wrap: wrap; }
}
.kartu-daftar .akun-bagian { margin: 0; padding-top: 12px; border-top: 1px solid var(--k-garis); }
.kartu-daftar .akun-bagian h4 { margin: 0 0 8px; font-size: 1rem; }
.kartu-daftar .akun-kunci { margin: 0; font-size: .84rem; color: var(--k-teks-3); }
.akun-penilaian { margin: 0; padding-left: 18px; }
.akun-penilaian li { margin-bottom: 4px; }
.akun-nilai-ringkas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.akun-nilai-ringkas > div { min-width: 0; padding: 8px 10px; border: 1px solid var(--k-garis); border-radius: 10px; font-size: .9rem; }
.akun-nilai-ringkas b { display: block; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--k-teks-3); }
.akun-nilai-ringkas small { display: block; color: var(--k-teks-3); }
.akun-nilai-ringkas .big { font-size: 1.3rem; font-weight: 800; color: var(--k-hijau); }
.akun-buka { margin-top: 28px; }
.akun-buka__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 768px) { .akun-buka__daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.akun-buka__daftar a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 10px 14px; background: #fff;
  border: 1px solid var(--k-garis); border-radius: var(--k-radius-kecil); color: var(--k-teks); font-weight: 700; text-decoration: none; }
.akun-buka__daftar a small { display: block; font-size: .8rem; font-weight: 500; color: var(--k-teks-3); }
.akun-buka__daftar a:hover { border-color: var(--k-hijau-garis); color: var(--k-hijau); }
.akun-buka__daftar a:focus-visible { outline: 3px solid var(--k-emas); outline-offset: 2px; }
.akun-buka__daftar .ikon { width: 18px; height: 18px; flex: none; color: var(--k-hijau); }
.akun-bantuan { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 28px 0 0; font-size: .88rem; color: var(--k-teks-2); }
.akun-bantuan .ikon { width: 16px; height: 16px; color: var(--k-hijau); }

/* ================================================= Kartu Peserta digital (redesign 15-10-2026) =================================================
   QR = URL kartu yang sudah terbit, di petak putih dengan zona sunyi; kop hijau NU; satu kartu utuh saat dicetak. */
.kartu-halaman { padding-block: 16px 48px; background: var(--k-latar); }
.kartu-halaman__wadah { max-width: 480px; }
.kartu-halaman__remah a { display: inline-flex; gap: 6px; align-items: center; min-height: 40px; font-weight: 700; color: var(--k-hijau); text-decoration: none; }
.kartu-halaman__remah .ikon { width: 16px; height: 16px; }
.kartu-peserta-hsn { margin-top: 6px; background: #fff; border: 1px solid var(--k-hijau-garis); border-radius: 20px; overflow: hidden; box-shadow: var(--k-bayang-angkat); }
.kartu-peserta-hsn__kop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 16px; background: var(--k-hijau); color: #fff; }
.kartu-peserta-hsn__logo-nu { width: 52px; height: auto; filter: brightness(0) invert(1); }
.kartu-peserta-hsn__logo-hsn { width: 28px; height: auto; padding: 4px; border-radius: 8px; background: #fff; box-sizing: content-box; }
.kartu-peserta-hsn__penerbit { line-height: 1.2; text-align: center; }
.kartu-peserta-hsn__penerbit b { display: block; font-size: .92rem; letter-spacing: .02em; color: #fff; }   /* tema mewarnai semua <b> */
.kartu-peserta-hsn__penerbit span { font-size: .78rem; color: #fff; opacity: .92; }
.kartu-peserta-hsn__judul { padding: 16px 18px 4px; text-align: center; }
.kartu-peserta-hsn__label { margin: 0; font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--k-emas-tua); }
.kartu-peserta-hsn h1 { margin: 4px 0 8px; font-family: var(--heading-font-family); font-size: clamp(1.25rem, 1.1rem + .8vw, 1.55rem); line-height: 1.25;
  color: var(--green-dark, #0d3b22); text-wrap: balance; }
.kartu-peserta-hsn__waktu { display: flex; justify-content: center; gap: 6px; margin: 2px 0; font-size: .86rem; color: var(--k-teks-2); }
.kartu-peserta-hsn__waktu .ikon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--k-hijau); }
.kartu-peserta-hsn__peringatan { display: flex; gap: 8px; margin: 10px 16px 0; padding: 10px 12px; border-radius: 12px; background: var(--k-merah-muda); color: var(--k-merah); font-size: .9rem; }
.kartu-peserta-hsn__peringatan .ikon { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.kartu-peserta-hsn__qr { margin: 12px 0 0; text-align: center; }
.kartu-peserta-hsn__qr-petak { width: min(62vw, 230px); margin: 0 auto; padding: 14px; background: #fff; border: 1px solid var(--k-garis); border-radius: 14px; box-sizing: content-box; }
.kartu-peserta-hsn__qr-petak svg { display: block; width: 100%; height: auto; }
.kartu-peserta-hsn__qr figcaption { margin-top: 8px; font-size: .8rem; font-weight: 700; color: var(--k-teks-2); }
.kartu-peserta-hsn__qr figcaption span { font-weight: 500; color: var(--k-teks-3); }
.kartu-peserta-hsn--tidak-berlaku .kartu-peserta-hsn__qr-petak { opacity: .3; }
.kartu-peserta-hsn__nomor { display: grid; justify-items: center; gap: 2px; margin: 14px 18px 0; padding: 10px; border-radius: 12px; background: var(--k-hijau-muda); }
.kartu-peserta-hsn__nomor span { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--k-teks-2); }
.kartu-peserta-hsn__nomor b { font-size: 2rem; line-height: 1.1; letter-spacing: .04em; color: var(--k-hijau); font-variant-numeric: tabular-nums; }
.kartu-peserta-hsn__nomor b.belum { font-size: 1.1rem; letter-spacing: 0; color: var(--k-teks-3); }
.kartu-peserta-hsn__nomor small { font-size: .78rem; color: var(--k-teks-3); text-align: center; }
.kartu-peserta-hsn__data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 14px 18px 0; }
.kartu-peserta-hsn__data > div { min-width: 0; }
.kartu-peserta-hsn__data .lebar { grid-column: 1 / -1; }
.kartu-peserta-hsn__data dt { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--k-teks-3); }
.kartu-peserta-hsn__data dd { margin: 1px 0 0; font-size: .98rem; font-weight: 600; color: var(--k-teks); overflow-wrap: anywhere; }
.kartu-peserta-hsn__data dd.kode { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
.kartu-peserta-hsn__data dd small { display: block; font-size: .82rem; font-weight: 500; color: var(--k-teks-2); }
.kartu-peserta-hsn__status { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 18px 0; }
.kartu-peserta-hsn__status .chip-hsn .ikon { width: 14px; height: 14px; }
.kartu-peserta-hsn__kaki { margin-top: 16px; padding: 12px 18px 14px; border-top: 1px dashed var(--k-garis); font-size: .8rem; color: var(--k-teks-2); text-align: center; }
.kartu-peserta-hsn__kaki span { display: block; margin-top: 4px; font-weight: 700; color: var(--k-hijau); }
.kartu-petugas { display: grid; gap: 10px; margin-top: 16px; padding: 16px; background: #fff; border: 2px solid var(--k-hijau); border-radius: var(--k-radius); }
.kartu-petugas__judul { margin: 0; font-weight: 800; color: var(--k-hijau); }
.kartu-petugas__catatan { margin: 0; font-size: .84rem; color: var(--k-teks-2); }
.kartu-halaman__aksi { display: grid; gap: 10px; margin-top: 16px; }
.kartu-halaman__aksi .tombol-hsn { justify-content: center; min-height: 48px; }
.kartu-halaman__bantuan { margin: 14px 0 0; font-size: .86rem; color: var(--k-teks-2); text-align: center; }
@media print {
  body:has(.kartu-halaman) .demo-banner, body:has(.kartu-halaman) .bilah-tanggal, body:has(.kartu-halaman) .main-header, body:has(.kartu-halaman) .sticky-header,
  body:has(.kartu-halaman) .mobile-menu, body:has(.kartu-halaman) .footer-one, body:has(.kartu-halaman) .info-pendaftaran,
  .kartu-halaman__remah, .kartu-halaman__aksi, .kartu-halaman__bantuan, .kartu-petugas { display: none !important; }
  .kartu-halaman { padding: 0; background: #fff; }
  .kartu-halaman__wadah { max-width: 105mm; padding: 0; }
  .kartu-peserta-hsn { margin: 0 auto; border: 1pt solid #0d3b22; box-shadow: none; break-inside: avoid; }
  .kartu-peserta-hsn__kop, .kartu-peserta-hsn__nomor, .kartu-peserta-hsn__peringatan, .kartu-peserta-hsn .chip-hsn { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kartu-peserta-hsn__qr-petak { width: 50mm; }
}

/* ================================================= P4 formulir pendaftaran (15-10-2026) =================================================
   Penunjuk langkah · ringkasan pilihan · isian & galat aksesibel · kartu peserta delegasi · halaman Periksa · status memuat tombol.
   Mobile-first; lebar isian terkontrol di desktop (kolom formulir col-lg-8). */
.konten-formulir { padding-block: 20px 56px; }
.form-hsn { padding: clamp(16px, 3vw, 28px); }
/* penunjuk langkah */
.langkah-form { margin: 0 0 16px; }
.langkah-form__ringkas { margin: 0 0 8px; font-size: .86rem; color: var(--k-teks-3); }
.langkah-form__ringkas b { color: var(--k-hijau); }
.langkah-form__daftar { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.langkah-form__butir { flex: 1 1 0; display: flex; align-items: center; gap: 6px; min-width: 0; padding-top: 6px; border-top: 3px solid var(--k-garis); font-size: .8rem;
  color: var(--k-teks-3); }
.langkah-form__butir--selesai { border-top-color: var(--k-hijau-garis); color: var(--k-teks-2); }
.langkah-form__butir--aktif { border-top-color: var(--k-hijau); color: var(--k-hijau); font-weight: 800; }
.langkah-form__no { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .74rem; font-weight: 800;
  background: var(--k-latar); color: var(--k-teks-3); border: 1.5px solid var(--k-garis); }
.langkah-form__butir--selesai .langkah-form__no { background: var(--k-hijau-muda); color: var(--k-hijau); border-color: var(--k-hijau-garis); }
.langkah-form__butir--aktif .langkah-form__no { background: var(--k-hijau); color: #fff; border-color: var(--k-hijau); }
.langkah-form__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) { .langkah-form__label { display: none; } .langkah-form__butir--aktif .langkah-form__label { display: inline; } }
/* ringkasan pilihan */
.pilihan-daftar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--k-radius-kecil);
  background: var(--k-hijau-muda); }
.pilihan-daftar > div { min-width: 0; }
.pilihan-daftar dt { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--k-teks-3); }
.pilihan-daftar dd { margin: 2px 0 0; color: var(--k-teks); font-size: .95rem; overflow-wrap: anywhere; }
.pilihan-daftar dd b { color: var(--k-hijau); }
.pilihan-daftar dd small { display: block; font-size: .78rem; color: var(--k-teks-2); }
.identitas-masuk { margin: 0 0 12px; font-size: .86rem; color: var(--k-teks-3); overflow-wrap: anywhere; }
.keterangan-wajib { margin: 0 0 10px; font-size: .84rem; color: var(--k-teks-3); }
.tanda-wajib { color: var(--k-merah); font-weight: 800; }
.ganti-pilihan { margin: 0 0 8px; font-size: .88rem; color: var(--k-teks-2); }
.ganti-pilihan a { font-weight: 700; color: var(--k-hijau); }
/* isian */
.form-hsn h3 { margin-top: 22px; font-size: 1.08rem; color: var(--green-dark, #0d3b22); }
.isian-hsn { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.isian-hsn legend.form-label { float: none; font-size: 1rem; margin-bottom: 6px; }
.isian-hsn--centang label { padding: 6px 0; min-height: 44px; cursor: pointer; }
.isian-hsn--centang .form-check-input { width: 22px; height: 22px; }
.pilihan-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.pilihan-radio__opsi { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 14px; border: 1.5px solid #C9D6CD; border-radius: var(--k-radius-kecil);
  background: #fff; cursor: pointer; }
.pilihan-radio__opsi input { width: 20px; height: 20px; accent-color: var(--k-hijau); }
.pilihan-radio__opsi:has(input:checked) { border-color: var(--k-hijau); background: var(--k-hijau-muda); }
.pilihan-radio__opsi:has(input:focus-visible) { outline: 3px solid var(--k-emas); outline-offset: 2px; }
.galat-isian { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: var(--k-merah); font-size: .88rem; font-weight: 700; }
.galat-isian .ikon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.galat-isian--blok { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--k-radius-kecil); background: var(--k-merah-muda); }
.isian-hsn--galat .pilihan-radio__opsi { border-color: var(--k-merah); }
body.publik .form-control.is-invalid, body.publik .form-select.is-invalid { border-width: 2px; background-image: none; padding-right: .75rem; }
.galat-ringkas { margin: 0 0 16px; padding: 14px 16px; border: 2px solid var(--k-merah); border-radius: var(--k-radius-kecil); background: var(--k-merah-muda); color: var(--k-teks); }
.galat-ringkas:focus { outline: 3px solid var(--k-emas); outline-offset: 2px; }
.galat-ringkas__judul { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; font-weight: 800; color: var(--k-merah); }
.galat-ringkas__judul .ikon { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.galat-ringkas ul { margin: 0; padding-left: 20px; }
.galat-ringkas li { margin: 4px 0; }
.galat-ringkas a { color: var(--k-merah); font-weight: 700; text-decoration: underline; }
.galat-ringkas__catatan { margin: 6px 0 0; font-size: .84rem; color: var(--k-teks-2); }
/* peserta delegasi */
.peserta-delegasi:focus { outline: none; }
.peserta-delegasi__daftar { display: grid; gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; }
@media (min-width: 768px) { .peserta-delegasi__daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.peserta-kartu { padding: 12px 14px 2px; border: 1px solid var(--k-garis); border-radius: var(--k-radius-kecil); background: #fff; }
.peserta-kartu fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.peserta-kartu__judul { float: none; display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 8px; font-size: .9rem; font-weight: 800; color: var(--k-hijau); }
.peserta-kartu__wajib { padding: 1px 8px; border-radius: 999px; background: var(--k-emas-muda); color: var(--k-emas-tua); font-size: .7rem; font-weight: 800; }
.peserta-kartu__isian .isian-hsn { margin-bottom: 10px; }
.peserta-kartu__isian .form-label { font-size: .86rem; margin-bottom: 4px; }
.peserta-kartu--galat { border-color: var(--k-merah); box-shadow: inset 3px 0 0 var(--k-merah); }
/* tombol & aksi */
.aksi-formulir { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--k-garis); }
.aksi-formulir__catatan { margin: 8px 0 0; font-size: .84rem; color: var(--k-teks-3); text-align: center; }
.tombol-formulir { min-height: 54px; font-size: 1.02rem; justify-content: center; }
.tombol-hsn[aria-disabled="true"] { opacity: .75; cursor: progress; }
.tombol-formulir__putar { width: 18px; height: 18px; margin-right: 8px; border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
  animation: putar-hsn .8s linear infinite; }
@keyframes putar-hsn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tombol-formulir__putar { animation: none; } }
/* kolom info */
.info-formulir__judul { margin: 0 0 10px; font-size: 1.05rem; color: var(--green-dark, #0d3b22); }
.info-formulir__daftar { display: grid; gap: 10px; margin: 0; }
.info-formulir__daftar dt { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--k-teks-3); }
.info-formulir__daftar dd { margin: 2px 0 0; font-size: .92rem; color: var(--k-teks); }
@media (min-width: 992px) { .info-formulir--tempel { position: sticky; top: 96px; } }
/* halaman Periksa */
.periksa-daftar__judul { margin: 0 0 8px; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); color: var(--green-dark, #0d3b22); }
.periksa-daftar__status { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--k-radius-kecil);
  background: var(--k-emas-muda); color: var(--k-teks); font-size: .92rem; }
.periksa-daftar__status .ikon { flex: none; width: 20px; height: 20px; color: var(--k-emas-tua); margin-top: 1px; }
.periksa-blok { padding: 14px 0; border-top: 1px solid var(--k-garis); }
.periksa-blok h3 { margin: 0 0 10px; font-size: 1.02rem; }
.periksa-data { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 16px; margin: 0; }
@media (min-width: 576px) { .periksa-data { grid-template-columns: repeat(2, minmax(0, 1fr)); } .periksa-data__panjang { grid-column: 1 / -1; } }
.periksa-data dt { font-size: .76rem; font-weight: 700; color: var(--k-teks-3); }
.periksa-data dd { margin: 1px 0 0; font-weight: 700; color: var(--k-teks); overflow-wrap: anywhere; }
.periksa-peserta { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 576px) { .periksa-peserta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.periksa-peserta li { padding: 8px 12px; border: 1px solid var(--k-garis); border-radius: 10px; }
.periksa-peserta__no { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--k-teks-3); }
.periksa-peserta small { display: block; color: var(--k-teks-2); }
.periksa-catatan { margin: 8px 0 0; font-size: .86rem; color: var(--k-teks-2); }
.periksa-pernyataan { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.periksa-pernyataan li { display: flex; gap: 8px; align-items: flex-start; }
.periksa-pernyataan .ikon { flex: none; width: 18px; height: 18px; color: var(--k-hijau); margin-top: 2px; }
.periksa-peringatan { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--k-radius-kecil); background: var(--k-merah-muda); }
.periksa-peringatan .ikon { flex: none; width: 20px; height: 20px; color: var(--k-merah); margin-top: 1px; }
.periksa-lanjut { margin: 0; padding-left: 20px; font-size: .92rem; color: var(--k-teks-2); }
.periksa-lanjut li { margin: 4px 0; }
.periksa-aksi { display: grid; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--k-garis); }
/* kepala halaman pendaftaran ringkas (P4) */
.kepala-formulir h1 { margin-bottom: 6px; }
.kepala-formulir__identitas { display: grid; gap: 4px; margin: 8px 0 6px; padding: 10px 12px; border-radius: var(--k-radius-kecil); background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: .9rem; line-height: 1.45; }
.kepala-formulir__label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: #F2D48A; }
.kepala-formulir__identitas a { color: #fff; font-weight: 700; text-decoration: underline; }
.kepala-formulir__meta { margin: 6px 0 0; font-size: .92rem; opacity: .92; }

/* ---- Bahtsul Masail bersifat undangan (27-10-2026): konfirmasi kehadiran & materi pembahasan ---- */
.kepala-formulir__tema { margin: 8px 0 4px; max-width: 62ch; font-size: .95rem; line-height: 1.5; color: #fff; }
.kepala-formulir__tema span { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #F2D48A; }
.catatan-undangan { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--k-radius-kecil);
  background: var(--k-hijau-muda); border: 1px solid var(--k-hijau-garis); color: var(--k-teks); font-size: .92rem; line-height: 1.5; }
.catatan-undangan svg { flex-shrink: 0; margin-top: 2px; color: var(--k-hijau); }
.bagian-formulir { border: 0; margin: 0; padding: 0; min-width: 0; }
.bagian-formulir > legend { float: none; width: auto; padding: 0; color: var(--k-teks); }
.bagian-formulir[hidden], [data-blok][hidden] { display: none !important; }
.materi-ringkas { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--k-radius-kecil); background: var(--k-emas-muda); border: 1px solid #EBD3AE; }
.materi-ringkas__judul { margin: 0 0 6px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--k-emas-tua); }
.materi-ringkas__daftar { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: .9rem; line-height: 1.5; color: var(--k-teks-2); }
.lampiran-tersimpan { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; padding: 10px 12px; border-radius: var(--k-radius-kecil);
  background: var(--k-hijau-muda); color: var(--k-teks); font-size: .9rem; }
.isi-kegiatan > section.materi-forum, .materi-forum { margin: 0 0 28px; padding: clamp(18px, 3vw, 26px); border-radius: var(--k-radius); background: var(--k-putih); border: 1px solid #EBD3AE;
  box-shadow: var(--k-bayang); border-top: 4px solid var(--k-emas); }
.materi-forum__label { margin: 0 0 6px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--k-emas-tua); }
.materi-forum h2 { margin: 0 0 10px; font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.35; color: var(--k-teks); }
.materi-forum h3 { margin: 18px 0 8px; font-size: 1rem; color: var(--k-teks); }
.materi-forum__tanya { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.materi-forum__tanya li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--k-radius-kecil);
  background: var(--k-latar); border: 1px solid var(--k-garis); line-height: 1.55; color: var(--k-teks-2); }
.materi-forum__huruf { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--k-hijau); color: #fff; font-weight: 800; }
.materi-forum__aksi { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 4px; }
.materi-forum details { margin-top: 14px; }
.materi-forum details ul { padding-left: 1.2rem; }
.kartu-tiket__tema { margin: 4px 0 12px; font-size: .9rem; line-height: 1.45; color: var(--k-teks-2); }
.kartu-tiket__tema b { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--k-emas-tua); }

/* ---- Kartu Peserta perorangan & kumpulan kartu (Bahtsul Masail undangan, 27-10-2026) ---- */
.kartu-peserta-hsn__lbm { display: flex; justify-content: center; padding: 12px 16px 0; }
.kartu-peserta-hsn__lbm img { width: 140px; height: auto; }
.kartu-orang { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; margin: 4px 16px 0; padding: 12px;
  border-radius: 14px; background: var(--k-hijau-muda); }
.kartu-orang__foto { width: 96px; height: 120px; object-fit: cover; border-radius: 10px; border: 2px solid #fff; box-shadow: var(--k-bayang); background: #fff; }
.kartu-orang__foto--kosong { display: grid; place-items: center; color: var(--k-teks-3); }
.kartu-orang__data { display: grid; gap: 2px; min-width: 0; line-height: 1.35; color: var(--k-teks-2); font-size: .9rem; }
.kartu-orang__nama { font-size: 1.15rem; color: var(--k-teks); overflow-wrap: anywhere; }
.kartu-orang__lembaga { font-weight: 700; color: var(--k-hijau); }
.kartu-orang__unsur { font-size: .8rem; }
.kartu-kumpulan__kepala { display: flex; gap: 14px; align-items: center; margin: 6px 0 12px; }
.kartu-kumpulan__kepala img { width: 96px; height: auto; flex-shrink: 0; }
.kartu-kumpulan__kepala h1 { margin: 2px 0; font-size: 1.3rem; } .kartu-kumpulan__kepala p { margin: 0; font-size: .9rem; color: var(--k-teks-2); }
.kartu-kumpulan__kepala .kode { font-size: .8rem; }
.kartu-kumpulan__petunjuk { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--k-hijau-muda); font-size: .9rem; line-height: 1.45; }
.kartu-kumpulan__daftar { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 12px; }
.kartu-mini { display: grid; grid-template-columns: 64px minmax(0, 1fr) 96px; grid-template-areas: "foto data qr" "aksi aksi aksi"; gap: 10px 12px;
  align-items: center; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--k-hijau-garis); box-shadow: var(--k-bayang); }
.kartu-mini__foto { grid-area: foto; width: 64px; height: 80px; object-fit: cover; border-radius: 8px; }
.kartu-mini__data { grid-area: data; display: grid; gap: 2px; min-width: 0; font-size: .85rem; color: var(--k-teks-2); }
.kartu-mini__data b { font-size: 1rem; color: var(--k-teks); overflow-wrap: anywhere; }
.kartu-mini__qr { grid-area: qr; } .kartu-mini__qr svg { width: 96px; height: 96px; display: block; }
.kartu-mini__aksi { grid-area: aksi; display: flex; gap: 8px; flex-wrap: wrap; }
.kartu-mini__aksi .tombol-hsn { flex: 1 1 auto; justify-content: center; }

/* ---- Formulir konfirmasi: peserta + foto (ponsel dulu, 27-10-2026) ---- */
.judul-bagian { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 10px; font: 700 1.1rem/1.3 var(--heading-font-family, Georgia, serif); color: var(--k-teks); }
.judul-bagian small { font: 400 .85rem var(--body-font-family, sans-serif); }
.judul-bagian__no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--k-hijau); color: #fff; font: 700 .9rem var(--body-font-family, sans-serif); }
.peserta-foto { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 12px; }
.peserta-foto__kartu { padding: 12px; border-radius: 16px; border: 1px solid var(--k-hijau-garis); background: #fff; }
.peserta-foto__kartu[hidden] { display: none; }
.peserta-foto__judul { margin: 0 0 8px; font-weight: 800; font-size: .85rem; color: var(--k-hijau); }
.peserta-foto__isi { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.peserta-foto__unggah { position: relative; display: grid; place-items: center; width: 96px; height: 120px; border-radius: 12px; border: 2px dashed var(--k-hijau-garis);
  background: var(--k-hijau-muda); cursor: pointer; overflow: hidden; text-align: center; color: var(--k-hijau); }
.peserta-foto__unggah--galat { border-color: var(--k-merah); background: var(--k-merah-muda); }
.peserta-foto__ajak { display: grid; gap: 4px; justify-items: center; font-size: .78rem; font-weight: 700; line-height: 1.2; padding: 4px; }
.peserta-foto__ajak small { font-weight: 400; color: var(--k-teks-3); }
.peserta-foto__ajak svg { width: 28px; height: 28px; }
.peserta-foto__pratinjau { width: 100%; height: 100%; object-fit: cover; }
.peserta-foto__input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 0; }
.peserta-foto__data .isian-hsn { margin-bottom: 8px; }
.lipat-rumusan { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--k-garis); background: #fff; }
.lipat-rumusan > summary { cursor: pointer; font-weight: 700; color: var(--k-hijau); }
.lipat-rumusan[open] > summary { margin-bottom: 10px; }
@media (max-width: 380px) { .peserta-foto__isi { grid-template-columns: 1fr; } .peserta-foto__unggah { width: 100%; height: 160px; } }
.kartu-mini--ringkas { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "foto data" "aksi aksi"; }

/* ---- Logo penyelenggara Bahtsul Masail: LBM NU + RMI NU berdampingan (27-10-2026) ---- */
.logo-kolaborasi { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: nowrap; }
.logo-kolaborasi img { display: block; height: 64px; width: auto; }
.logo-kolaborasi__rmi { border-radius: 6px; }
.logo-kolaborasi--tiket { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--k-garis); }
.logo-kolaborasi--tiket img { height: 72px; }
.logo-kolaborasi--kepala { float: right; margin: 0 0 6px 12px; padding: 6px 8px; border-radius: 12px; background: #fff; gap: 8px; }
.logo-kolaborasi--kepala img { height: 46px; }
.logo-kolaborasi--kecil img { height: 48px; }
.kartu-kumpulan__kepala .logo-kolaborasi { flex-shrink: 0; }
.fakta-logo .logo-kolaborasi { justify-content: flex-start; margin-top: 6px; }
.fakta-logo .logo-kolaborasi img { max-height: 70px; }
@media (max-width: 575px) { .logo-kolaborasi--kepala img { height: 34px; } .logo-kolaborasi--kecil img { height: 40px; } }
.materi-forum__subjudul { font-weight: 700; font-style: italic; color: var(--k-hijau); }
.kedatangan-pj { margin: 14px 0; padding: 12px; border-radius: 14px; background: var(--k-emas-muda); border: 1px solid #EBD3AE; }
.kedatangan-pj__judul { margin: 0 0 8px; font-weight: 700; color: var(--k-emas-tua); }
.pilih-jam { display: flex; align-items: center; gap: 6px; max-width: 280px; }
.pilih-jam select { flex: 1 1 0; font-size: 1.15rem; font-weight: 700; text-align: center; }
.pilih-jam__titik { font-size: 1.4rem; font-weight: 800; } .pilih-jam__wib { font-weight: 700; color: var(--k-teks-2); }