/* Mode presentasi: bingkai 16:9 yang menyesuaikan layar. Ukuran huruf memakai satuan bingkai (cqw). */
html, body { height: 100%; overflow: hidden; }
body.presentasi { background: #e9e2da; display: flex; flex-direction: column; }

.panggung { flex: 1 1 auto; display: grid; place-items: center; padding: 12px; min-height: 0; }
.bingkai {
    position: relative; width: min(100%, calc((100vh - 84px) * 16 / 9)); aspect-ratio: 16 / 9;
    container-type: size; background: var(--latar); border-radius: 18px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(29, 43, 34, .18);
}
:fullscreen .panggung { padding: 0; }
:fullscreen .bingkai { width: min(100vw, calc(100vh * 16 / 9)); border-radius: 0; box-shadow: none; }
body.layar-penuh .kendali { position: fixed; bottom: 0; left: 0; right: 0; opacity: 0; transition: opacity .2s ease; }
body.layar-penuh .kendali:hover, body.layar-penuh .kendali:focus-within { opacity: 1; }

.slaid {
    position: absolute; inset: 0; padding: 6cqh 6cqw; display: flex; flex-direction: column;
    font-size: 2.3cqw; line-height: 1.45; visibility: hidden; opacity: 0; transform: translateX(2cqw);
    transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.slaid.aktif { visibility: visible; opacity: 1; transform: none; transition: opacity .35s ease, transform .35s ease; }
.slaid.lalu { transform: translateX(-2cqw); }
.slaid .anim { opacity: 0; transform: translateY(1.2cqh); transition: opacity .4s ease, transform .4s ease; }
.slaid.aktif .anim { opacity: 1; transform: none; }
.slaid.aktif .anim:nth-child(2) { transition-delay: .08s; }
.slaid.aktif .anim:nth-child(3) { transition-delay: .16s; }
.slaid.aktif .anim:nth-child(4) { transition-delay: .24s; }
.slaid.aktif .anim:nth-child(5) { transition-delay: .32s; }

.slaid--gelap { background: var(--gelap); color: #fff; justify-content: center; }
.slaid--gelap::after { content: ""; position: absolute; right: -14cqw; top: -24cqh; width: 46cqw; height: 46cqw; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); }
.s-label { font-size: 1.5cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teks-2); margin: 0 0 1.2cqh; display: flex; align-items: center; gap: .8cqw; }
.slaid--gelap .s-label { color: var(--gelap-teks); }
.s-kode { font-family: var(--mono); font-weight: 600; background: var(--gelap); color: var(--hijau); padding: .3cqh .8cqw; border-radius: .8cqw; letter-spacing: 0; }
.s-judul { font-size: 4.4cqw; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 2.4cqh; }
.s-judul span { color: var(--hijau-tua); }
.slaid--gelap .s-judul span { color: var(--hijau); }
.s-raksasa { font-size: 7.4cqw; font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin: 0; }
.s-raksasa span { color: var(--hijau); }
.s-sub { font-size: 2.4cqw; color: var(--gelap-teks); margin: 2.4cqh 0 0; max-width: 60cqw; }
.s-isi { flex: 1 1 auto; min-height: 0; display: grid; gap: 3cqw; align-items: center; }
.s-isi--gambar { grid-template-columns: 1.65fr 1fr; }
.s-isi--hp { grid-template-columns: auto 1fr; }
.s-isi--hp2 { grid-template-columns: auto auto 1fr; }
.s-isi--kolom { grid-template-columns: repeat(3, 1fr); }
.s-isi--dua { grid-template-columns: 1fr 1fr; }
.s-isi--empat { grid-template-columns: repeat(4, 1fr); }
/* Kartu sejajar: setinggi isi terpanjang dalam baris, baris diletakkan di tengah. */
.s-isi--kolom, .s-isi--dua, .s-isi--empat { align-items: stretch; align-content: center; }

.s-gambar { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.s-gambar img { max-height: 100%; max-width: 100%; width: auto; height: auto; border-radius: 1.2cqw; border: 1px solid var(--garis); background: #fff; box-shadow: 0 1.2cqh 3cqh rgba(29, 43, 34, .08); }
.s-isi--hp .s-gambar img, .s-isi--hp2 .s-gambar img { max-height: 66cqh; }

.s-ket { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8cqh; }
.s-ket li { position: relative; padding-left: 4.4cqw; min-height: 3cqw; }
.s-ket li::before { content: attr(data-n); position: absolute; left: 0; top: .2cqw; width: 3cqw; height: 3cqw; border-radius: 50%; display: grid; place-items: center; background: var(--hijau-tua); color: #fff; font-weight: 800; font-size: 1.7cqw; line-height: 1; }
.s-ket li:not([data-n])::before { width: 1cqw; height: 1cqw; left: 1cqw; top: 1.2cqw; }
.s-poin { margin: 0; padding-left: 2.6cqw; display: grid; gap: 1.4cqh; }

.s-kartu { background: #fff; border: 1px solid var(--garis); border-radius: 1.8cqw; padding: 3cqh 2cqw; display: flex; flex-direction: column; gap: 1cqh; }
.s-kartu h3 { font-size: 2.5cqw; margin: 0; }
.s-kartu p { margin: 0; color: var(--teks-2); font-size: 1.9cqw; }
.s-kartu .s-alamat { font-family: var(--mono); color: var(--hijau-tua); font-size: 1.6cqw; }
.s-kartu .ikon { width: 4cqw; height: 4cqw; padding: .9cqw; border-radius: 1.2cqw; background: var(--hijau-pucat); color: var(--hijau-tua); }
.s-nomor { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: var(--hijau); color: var(--hijau-teks); font-weight: 800; font-size: 2.2cqw; }
.s-siapa { align-self: flex-start; margin-top: auto; padding: .4cqh 1cqw; border-radius: 99px; font-size: 1.5cqw; font-weight: 700; background: var(--hijau-pucat); color: var(--hijau-tua); }
.s-siapa--warga { background: var(--kuning-pucat); color: var(--kuning-teks); }

.s-catatan { margin-top: 2.4cqh; padding: 1.6cqh 1.6cqw; border-radius: 1.4cqw; background: var(--hijau-pucat); color: var(--hijau-teks); font-size: 1.9cqw; }
.s-catatan--merah { background: var(--merah-pucat); color: var(--merah); }

.s-jadwal { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4cqh; font-size: 2.2cqw; }
.s-jadwal li { display: grid; grid-template-columns: 12cqw 1fr; gap: 2cqw; padding: 1.6cqh 2cqw; background: #fff; border: 1px solid var(--garis); border-radius: 1.4cqw; }
.s-jadwal .angka { color: var(--teks-2); }
.s-jadwal small { display: block; color: var(--teks-2); font-size: 1.7cqw; }

.slaid--gelap .s-poin { color: var(--gelap-teks); }
.slaid--gelap .s-poin b { color: #fff; }
.s-logo { width: 7cqw; height: 7cqw; border-radius: 1.8cqw; margin-bottom: 4cqh; }

/* Kendali bawah */
.kendali { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; }
.kendali__kembali { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--teks); text-decoration: none; font-weight: 600; }
.kendali__kembali:hover { background: rgba(255, 255, 255, .6); color: var(--teks); }
.kemajuan-slaid { flex: 1; height: 6px; border-radius: 99px; background: rgba(29, 43, 34, .1); overflow: hidden; }
.kemajuan-slaid div { height: 100%; background: var(--hijau-tua); width: 0; transition: width .3s ease; }
.kendali__angka { font-family: var(--mono); font-size: 14px; color: var(--teks-2); min-width: 56px; text-align: center; }
.kendali button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--garis); background: #fff; color: var(--teks); display: grid; place-items: center; }
.kendali button:hover { background: var(--abu); }
.kendali button:disabled { opacity: .4; cursor: not-allowed; }
.kendali .ikon { width: 20px; height: 20px; }
.kendali__petunjuk { font-size: 13px; color: var(--teks-2); }
@media (max-width: 700px) { .kendali__petunjuk, .kendali__kembali span { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .slaid, .slaid .anim { transition: none !important; transform: none !important; }
}