/* Tambahan untuk halaman acara. Dasar visual dan token memakai assets/btf.css (gelap emas, Fraunces + Figtree). */
.fmt.alasan { grid-template-columns: 1fr; }
@media (min-width: 700px) { .fmt.alasan { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .fmt.alasan { grid-template-columns: repeat(3, 1fr); } }
.tile { position: relative; overflow: hidden; }
.tile .num { position: absolute; right: 16px; top: 8px; font: 600 3rem/1 var(--serif); color: var(--ln); letter-spacing: -.04em; transition: color .4s; }
.tile:hover .num { color: var(--gold); }
.tile h3 { padding-right: 2.6rem; margin-top: 4px; }

.vids { display: grid; gap: 16px; margin-top: clamp(28px, 4vw, 48px); grid-template-columns: 1fr; }
@media (min-width: 700px) { .vids { grid-template-columns: repeat(3, 1fr); } }
.vid { position: relative; display: block; padding: 0; border: 1px solid var(--ln); border-radius: 22px; overflow: hidden; background: #000; cursor: pointer; aspect-ratio: 4 / 3; color: #f4eadb; font: inherit; text-align: left; }
.vid img, .vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; transition: transform .6s var(--ease), opacity .3s; }
.vid:hover img { transform: scale(1.04); opacity: .85; }
.vid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(18, 12, 6, .85)); pointer-events: none; }
.vid.on::after, .vid.on .vid-play, .vid.on b { display: none; }
.vid-play { position: absolute; left: 50%; top: 44%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #f0d9a8, #d9b67c); color: #261b09; box-shadow: 0 10px 28px -8px rgba(217, 182, 124, .7); transition: transform .35s var(--ease); }
.vid-play .ic { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.vid:hover .vid-play, .vid:focus-visible .vid-play { transform: scale(1.1); }
.vid b { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; font: 600 1.02rem/1.25 var(--serif); }

.hc-k strong { white-space: nowrap; }
.price.dua { grid-template-columns: 1fr; }
@media (min-width: 760px) { .price.dua { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.pc h3 { display: flex; align-items: center; gap: .6em; } .pc h3 .ic { width: 1.4em; height: 1.4em; }
.pc .amt { font-size: clamp(2.1rem, 5vw, 3.1rem); }

/* Halaman daftar dan bayar: pilihan paket dua kolom di layar lebar */
.daf-pay-opts.paket { grid-template-columns: 1fr; }
@media (min-width: 560px) { .daf-pay-opts.paket { grid-template-columns: 1fr 1fr; } }
.fld.kedua[hidden], .fld[data-untuk][hidden] { display: none; }
.daf-lunas { text-align: center; }
.daf-lunas .tanda { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #f0d9a8, #d9b67c); color: #261b09; }
.daf-lunas .tanda svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Admin */
.adm-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.adm-bar small { color: var(--mu-h, #bba982); }
.adm-kartu { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin: 18px 0 26px; }
@media (min-width: 720px) { .adm-kartu { grid-template-columns: repeat(5, 1fr); } }
.adm-kartu div { border: 1px solid rgba(240, 217, 168, .25); border-radius: 16px; padding: 14px 16px; background: rgba(255, 255, 255, .04); }
.adm-kartu b { display: block; font: 600 1.8rem/1.1 var(--serif); color: #f4eadb; font-variant-numeric: tabular-nums; }
.adm-kartu span { font-size: 13px; color: #bba982; }
.adm-segar { border: 1px solid var(--gold-3); border-radius: 16px; padding: 14px 18px; margin-bottom: 18px; background: rgba(240, 217, 168, .1); }
.adm-segar.ok { border-color: rgba(120, 190, 140, .6); background: rgba(120, 190, 140, .1); }
.adm-undangan { margin-top: 28px; }
.adm-undangan code { display: block; word-break: break-all; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .35); color: var(--gold-2); font-size: 14px; user-select: all; }

/* Absensi panitia (HP): sasaran sentuh 56px, satu tombol per baris. */
.abs-ke { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.abs-ke a { min-width: 48px; min-height: 52px; padding: 6px 10px; border: 1px solid rgba(240, 217, 168, .3); border-radius: 14px; text-align: center; text-decoration: none; color: inherit; display: flex; flex-direction: column; justify-content: center; }
.abs-ke a b { font: 600 1.15rem/1 var(--serif); }
.abs-ke a small { font-size: 13px; color: #bba982; }
.abs-ke a.hari { border-color: var(--gold-3); }
.abs-ke a[aria-current] { background: var(--gold); color: #120c06; border-color: var(--gold); }
.abs-ke a[aria-current] small { color: #261b09; }
.abs-judul h2 { margin: 0 0 4px; font-size: 1.25rem; }
.abs-judul p { margin: 0 0 8px; }
.abs-angka { grid-template-columns: repeat(3, 1fr); }
.abs-cari { display: flex; gap: 10px; align-items: end; margin-bottom: 14px; }
.abs-cari .fld { flex: 1; margin: 0; }
.abs-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.abs-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; border: 1px solid rgba(240, 217, 168, .22); border-radius: 16px; padding: 10px 12px 10px 16px; min-height: 64px; }
.abs-row.hadir { background: rgba(120, 190, 140, .12); border-color: rgba(120, 190, 140, .5); }
.abs-row[hidden] { display: none; }
.abs-nama { min-width: 0; }
.abs-nama strong { display: block; overflow-wrap: anywhere; }
.abs-nama small { color: #bba982; overflow-wrap: anywhere; }
.abs-row form { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.abs-btn { min-width: 96px; min-height: 56px; }
.abs-ok { font-weight: 700; color: #9bd6ac; white-space: nowrap; }
.abs-kosong { padding: 18px; text-align: center; color: #bba982; }

/* Dasbor BTF dan teks WhatsApp */
.adm-menu { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.adm-wa { width: 100%; max-width: 560px; font: 15px/1.5 var(--sans, system-ui); padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(240, 217, 168, .3); background: rgba(0, 0, 0, .3); color: inherit; resize: vertical; }

/* Rekap kehadiran */
.rekap td.ya { color: #9bd6ac; font-weight: 700; text-align: center; }
.rekap td.tdk { color: #8a7a5c; text-align: center; }
.rekap th { text-align: center; }
.rekap th:first-child, .rekap td:first-child { text-align: left; }
.rekap .st-memenuhi { color: #9bd6ac; font-weight: 600; }

/* Kelompok dan fasilitator */
.kel, .kel-aksi { margin: 0 0 26px; }
.kel h2 { margin: 0 0 4px; font-size: 1.25rem; }
.kel h2 small { font: 500 14px var(--sans, system-ui); color: #bba982; margin-left: 6px; }
.kel-fasil { margin: 0 0 10px; color: #d9cba9; }
.kel-daftar { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.kel-baris { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid rgba(240, 217, 168, .18); border-radius: 14px; padding: 8px 12px 8px 14px; }
.kel-baris small { display: block; color: #bba982; overflow-wrap: anywhere; }
.kel-baris form { display: flex; gap: 8px; align-items: center; }
.kel-baris select { min-height: 44px; max-width: 220px; border-radius: 12px; }
.kel-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.kel-form small { flex-basis: 100%; color: #bba982; }
.kel-isi { max-width: 520px; margin: 12px 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* HP sempit: baris absen bertumpuk supaya tombol Hadir lebar dan mudah diketuk; tombol panjang boleh turun baris */
.kel-form .btn, .adm-menu .btn { white-space: normal; line-height: 1.3; text-align: center; }
details > summary.btn { display: inline-flex; cursor: pointer; }
@media (max-width: 520px) {
  .abs-row { flex-direction: column; align-items: stretch; padding: 12px 14px; }
  .abs-row form { justify-content: space-between; }
  .abs-btn { flex: 1; }
}

/* Selaras tokens.css CBC v0.1 (5 Okt 2026): nilai resmi menggantikan angka hampir-sama dari btf.css.
   Seal Brown, Paper, Sand, Cream, Espresso, Walnut. Mode gelap tidak diubah (brand belum mengatur). */
:root { --bronze: #795932; --paper: #faf6ec; --paper-2: #e8dcc6; --card: #f4eadb; }
@media not all and (prefers-color-scheme: dark) {
  .lt, .lt2 { --tx: #261b09; --mu: #543813; }
  .lt2 { --cd: #faf6ec; }
}
/* Keterangan kecil minimal 13px (brand 4). */
.cd span, .tg span, .adm-t th { font-size: 13px; }
/* Aksen program SSK Blue hanya di bagian terang: di atas Night kontrasnya 1,87 : 1 (tidak lulus). */
@media not all and (prefers-color-scheme: dark) { .prog-ssk .lt, .prog-ssk .lt2 { --ac: #2b3b7c; } }

/* Formulir staf: pilihan, area teks, kotak centang, kolom dua, tombol bahaya */
.fld select, .fld textarea { width: 100%; padding: 12px 16px; border-radius: 14px; border: 1.5px solid rgba(240, 217, 168, .3); background: rgba(255, 255, 255, .06); color: inherit; font: inherit; min-height: 52px; }
.fld select option { color: #261b09; }
.fld textarea { resize: vertical; line-height: 1.5; }
.fld select:focus, .fld textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(217, 182, 124, .22); }
.fld small, .cek-baris + small { color: #bba982; font-size: 13px; }
.cek-baris { display: flex; gap: 12px; align-items: center; min-height: 44px; cursor: pointer; }
.cek-baris input { width: 22px; height: 22px; accent-color: #d9b67c; flex: none; }
.fm-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .fm-grid { grid-template-columns: 1fr 1fr; } .fm-grid .lebar { grid-column: 1 / -1; } }
.fm-kartu { border: 1px solid rgba(240, 217, 168, .22); border-radius: 18px; padding: 18px 20px; margin: 0 0 20px; background: rgba(255, 255, 255, .03); }
.fm-kartu > h2 { margin: 0 0 14px; font: 600 1.3rem/1.2 var(--serif); }
.fm-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
.btn-bahaya { background: rgba(246, 194, 184, .12); color: #f6c2b8; border-color: rgba(246, 194, 184, .5); }
.adm-f select { min-height: 42px; border-radius: 10px; border: 1px solid rgba(240, 217, 168, .3); background: rgba(255, 255, 255, .06); color: inherit; padding: 0 10px; }
.lencana { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid rgba(240, 217, 168, .35); }
.lencana.aktif { color: #9bd6ac; border-color: rgba(155, 214, 172, .5); } .lencana.selesai { color: #bba982; } .lencana.arsip { color: #f6c2b8; border-color: rgba(246, 194, 184, .5); }

/* Hari-H: tiket peserta, scan absen, walk-in */
.tk-kartu { text-align: center; }
.tk-kartu h1 { margin: 12px 0 2px; font: 600 1.7rem/1.15 var(--serif); }
.tk-kode { margin: 0 0 14px; color: #bba982; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.tk-kartu .daf-dl { text-align: left; }
.tk-banner { margin: 10px 0 16px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid; font-weight: 600; line-height: 1.4; }
.tk-hijau .tk-banner { background: rgba(120, 190, 140, .14); border-color: rgba(120, 190, 140, .6); color: #b9e6c6; }
.tk-kuning .tk-banner { background: rgba(217, 182, 124, .16); border-color: rgba(217, 182, 124, .7); color: #f0d9a8; }
.tk-oranye .tk-banner { background: rgba(236, 150, 80, .16); border-color: rgba(236, 150, 80, .7); color: #f6c79c; }
.tk-merah .tk-banner { background: rgba(240, 120, 110, .15); border-color: rgba(246, 194, 184, .6); color: #f6c2b8; }
.tk-qr { width: min(280px, 78vw); margin: 4px auto 14px; padding: 8px; background: #fff; border-radius: 16px; line-height: 0; color: #261b09; font-size: 14px; }
.tk-qr svg { width: 100%; height: auto; display: block; }
.tk-qr:empty { min-height: 200px; }
.tk-aksi { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0 0; }
.tk-mini .tk-banner { margin-top: 0; }
.tk-per { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tk-per li { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid rgba(240, 217, 168, .22); border-radius: 14px; }
.tk-per li.hadir { background: rgba(120, 190, 140, .12); border-color: rgba(120, 190, 140, .5); }
.tk-per li b { font: 600 1.2rem/1 var(--serif); text-align: center; }
.tk-per small { color: #bba982; }
.tk-per .tk-st { color: #9bd6ac; font-weight: 600; }
.tk-per li a { grid-column: 2 / -1; font-size: 14px; color: var(--gold); }
.abs-scan { margin: 0 0 18px; display: grid; gap: 12px; }
#sc-cam[hidden] { display: none; }
#sc-cam { display: grid; gap: 10px; justify-items: start; }
#sc-video { width: 100%; max-width: 420px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: #000; border: 1px solid rgba(240, 217, 168, .3); }
.abs-info { margin: 0; padding: 12px 16px; border-radius: 14px; border: 1.5px solid; font-weight: 600; line-height: 1.4; }
.abs-info.ok { background: rgba(120, 190, 140, .14); border-color: rgba(120, 190, 140, .6); color: #b9e6c6; }
.abs-info.warn { background: rgba(236, 150, 80, .16); border-color: rgba(236, 150, 80, .7); color: #f6c79c; }
.abs-info.err { background: rgba(240, 120, 110, .15); border-color: rgba(246, 194, 184, .6); color: #f6c2b8; }
.abs-walkin { border: 1px solid rgba(240, 217, 168, .22); border-radius: 16px; padding: 12px 16px; }
.abs-walkin summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
@media (prefers-reduced-motion: no-preference) { .abs-info { transition: background .2s, border-color .2s; } }

/* Uang: jadwal cicilan peserta, teks pengingat siap salin, blok isi di halaman Uang */
.daf-cicil { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.daf-cicil li { padding: 8px 12px; border: 1px solid rgba(240, 217, 168, .22); border-radius: 12px; font-size: 15px; }
.daf-cicil li.ok { border-color: rgba(155, 214, 172, .5); color: #9bd6ac; }
.daf-cicil li.telat { border-color: rgba(246, 194, 184, .5); color: #f6c2b8; }
.salin { width: 100%; min-height: 96px; padding: 10px 12px; background: rgba(255, 255, 255, .05); color: inherit; border: 1px solid rgba(240, 217, 168, .3); border-radius: 12px; font: inherit; font-size: 15px; line-height: 1.5; }
.fm-isi { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(240, 217, 168, .12); }
.fm-isi:last-child { border-bottom: 0; }
.pengingat-teks{width:100%;min-width:260px;font:inherit;font-size:14px;line-height:1.4}
.acara-kartu h2 a{color:inherit;text-decoration:none}
.cek-baris.pdp{align-items:flex-start;margin:6px 0}
@media print{.no-print,.bar,.hero-bg,.daf-toast{display:none!important}body.cetak .bukti:not(.cetak-ini){display:none!important}body{background:#fff!important;color:#000!important}.daf-card{box-shadow:none!important;border:1px solid #999!important;background:#fff!important;color:#000!important}}
.jadwal{list-style:none;margin:0 0 14px;padding:0}.jadwal li{padding:10px 0;border-bottom:1px solid rgba(240,217,168,.16)}.jadwal small{opacity:.75}
.telat{color:#f6c2b8}