/* Virtual photobooth tamu. Warna & huruf mengikuti tema undangan (variabel dari tema.js: --bg, --ink, --aksen, --f-nama, ...). */
:root { --bg: #0b0b0c; --bg2: #141416; --kartu: #1a1a1d; --ink: #f4f1ea; --muted: #b3ada0; --aksen: #e8dcc2; --aksen2: #8c8679; --aksen-ink: #111; --garis: #2c2b28;
  --f-nama: 'Cormorant Garamond', serif; --f-judul: 'Cormorant Garamond', serif; --f-isi: system-ui, sans-serif; --radius: 18px; --nama-skala: 1; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.6 var(--f-isi); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

.pb-memuat, .pb-galat { min-height: 100vh; display: grid; place-content: center; text-align: center; padding: 24px; color: var(--muted); }
.pb-putar { width: 34px; height: 34px; margin: 0 auto 12px; border-radius: 50%; border: 2px solid var(--garis); border-top-color: var(--aksen); animation: pb-putar 1s linear infinite; }
@keyframes pb-putar { to { transform: rotate(360deg); } }

.pb { max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; overflow: hidden; background: var(--bg); background-image: var(--pola); }
.pb-layar { min-height: 100vh; padding: 28px 22px 34px; display: flex; flex-direction: column; }
.pb-atas { margin: 0; font: 500 11px var(--f-isi); letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }
.pb-nama { margin: 6px 0 0; font-family: var(--f-nama); font-weight: 400; font-size: calc(46px * var(--nama-skala)); line-height: 1.1; color: var(--aksen); }
body[data-kapital] .pb-nama { text-transform: uppercase; letter-spacing: .03em; font-size: calc(34px * var(--nama-skala)); }
.pb-redup { color: var(--muted); font-size: 14px; margin: 4px 0 16px; }
.pb-tengah { text-align: center; }

/* tombol */
.pb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 22px; font-weight: 600; font-size: 14px; letter-spacing: .04em; cursor: pointer; transition: transform .15s, opacity .2s; }
.pb-btn:active { transform: scale(.98); }
.pb-btn[disabled] { opacity: .5; cursor: default; }
.pb-btn-utama { background: var(--aksen); color: var(--aksen-ink); box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--aksen) 80%, transparent); }
.pb-btn-garis { background: color-mix(in srgb, var(--kartu) 40%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pb-kecil { padding: 9px 14px; font-size: 13px; }
.pb-tautan { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 10px; }
.pb-tombol-tumpuk { display: grid; gap: 10px; margin-top: 22px; }
.pb-tombol-baris { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 14px; flex-wrap: wrap; }

/* 1. amplop */
.pb-amplop { justify-content: center; text-align: center; background: radial-gradient(70% 50% at 50% 40%, color-mix(in srgb, var(--aksen) 18%, transparent), transparent 70%); }
.pb-amplop-isi { display: flex; flex-direction: column; align-items: center; }
.pb-surat { position: relative; width: 250px; height: 168px; margin: 34px 0 22px; border: 0; padding: 0; cursor: pointer; border-radius: 10px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--kartu) 90%, #fff 10%), var(--kartu)); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6), inset 0 0 0 1px color-mix(in srgb, var(--aksen) 25%, transparent); animation: pb-ambang 3s ease-in-out infinite; }
.pb-surat-tutup { position: absolute; inset: 0 0 auto; height: 60%; background: linear-gradient(165deg, color-mix(in srgb, var(--kartu) 80%, #000 20%), var(--kartu)); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 10px 10px 0 0; }
.pb-segel { position: absolute; left: 50%; top: 60%; width: 66px; height: 66px; margin: -33px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--aksen) 80%, #fff), var(--aksen)); color: var(--aksen-ink); font: 400 24px var(--f-nama); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.pb-ketuk { font: 500 11px var(--f-isi); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); animation: pb-kedip 2s ease-in-out infinite; }
@keyframes pb-ambang { 50% { transform: translateY(-6px); } }
@keyframes pb-kedip { 50% { opacity: .45; } }
.pb-amplop.buka .pb-surat { animation: pb-terbuka .7s ease forwards; }
@keyframes pb-terbuka { to { transform: scale(1.15); opacity: 0; } }

/* 2. beranda */
.pb-beranda { padding: 0 0 26px; }
.pb-foto-sampul { height: 54vh; min-height: 300px; background: var(--bg2) center/cover no-repeat; position: relative; }
.pb-foto-sampul::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--bg)); }
.pb-beranda-isi { padding: 0 24px; margin-top: -70px; position: relative; text-align: center; }
.pb-tgl { margin: 10px 0 0; font: 500 13px var(--f-isi); letter-spacing: .2em; text-transform: uppercase; }
.pb-tempat { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.pb-ajak { color: var(--muted); font-size: 14px; margin: 18px auto 0; max-width: 340px; }
.pb-kaki { margin: auto 0 0; padding: 26px 20px 0; text-align: center; font-size: 12px; color: var(--muted); }

/* 3. alur */
.pb-alur-kepala { margin-bottom: 18px; }
.pb-alur-kepala span { font: 600 11px var(--f-isi); letter-spacing: .24em; text-transform: uppercase; color: var(--aksen); }
.pb-progres { height: 3px; background: var(--garis); border-radius: 9px; margin-top: 8px; overflow: hidden; }
.pb-progres i { display: block; height: 100%; background: var(--aksen); transition: width .3s; }
.pb-langkah h2 { margin: 0; font-family: var(--f-judul); font-weight: 500; font-size: 28px; line-height: 1.2; }
.pb-input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); color: var(--ink); font: inherit; font-size: 17px; padding: 12px 2px; outline: none; resize: vertical; }
textarea.pb-input { border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 14px; padding: 12px 14px; background: color-mix(in srgb, var(--kartu) 40%, transparent); }
.pb-input:focus { border-color: var(--aksen); }
.pb-alur-kaki { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: auto; padding-top: 22px; }
.pb-salah { color: #ff8a80; font-size: 14px; margin: 12px 0 0; }

.pb-kamera { position: relative; aspect-ratio: 4 / 5; width: 100%; border-radius: 16px; overflow: hidden; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--garis); }
.pb-kamera video, .pb-kamera img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-kamera video.cermin { transform: scaleX(-1); }
.pb-kamera-kosong { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); font-size: 14px; gap: 6px; }
.pb-kamera-kosong span { font-size: 34px; }
.pb-bingkai-pratinjau { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 16px 18px; text-align: center; color: #fff;
  background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, .65)); box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .0); }
.pb-bingkai-pratinjau::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 8px; }
.pb-bingkai-pratinjau span { font: 500 9px var(--f-isi); letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.pb-bingkai-pratinjau b { font-family: var(--f-nama); font-weight: 400; font-size: 30px; line-height: 1.1; }
body[data-kapital] .pb-bingkai-pratinjau b { text-transform: uppercase; font-size: 24px; }
.pb-hitung { position: absolute; inset: 0; display: grid; place-items: center; font: 300 110px var(--f-judul); color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
.pb-jepret { width: 72px; height: 72px; border-radius: 50%; border: 4px solid var(--ink); background: var(--aksen); cursor: pointer; box-shadow: 0 0 0 4px color-mix(in srgb, var(--aksen) 30%, transparent); }
.pb-suara { display: grid; gap: 8px; margin-top: 14px; justify-items: start; }
.pb-suara audio { width: 100%; }
.pb-btn.merekam { background: #d93a3a; color: #fff; box-shadow: none; animation: pb-kedip 1.2s infinite; }
.pb-ringkas { display: grid; gap: 12px; }
.pb-ringkas img { width: 100%; border-radius: 14px; }
.pb-ringkas .pb-kartu { padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--kartu) 50%, transparent); box-shadow: inset 0 0 0 1px var(--garis); }
.pb-ringkas b { display: block; font-family: var(--f-judul); font-size: 20px; }

/* 4. selesai */
.pb-selesai { justify-content: center; text-align: center; }
.pb-selesai h2 { font-family: var(--f-judul); font-weight: 500; font-size: 32px; margin: 0; }
.pb-foto-selesai { width: 100%; border-radius: 14px; margin-top: 10px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7); }

/* 5. galeri */
.pb-galeri { padding: 18px 14px 30px; }
.pb-galeri-kepala { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; margin-bottom: 14px; }
.pb-galeri-kepala h2 { margin: 0; text-align: center; font-family: var(--f-judul); font-weight: 500; font-size: 22px; }
.pb-kisi { columns: 2; column-gap: 10px; }
.pb-item { break-inside: avoid; margin: 0 0 10px; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--kartu) 60%, transparent); box-shadow: inset 0 0 0 1px var(--garis); }
.pb-item img { display: block; width: 100%; cursor: zoom-in; }
.pb-item-isi { padding: 10px 12px 12px; }
.pb-item-isi b { display: block; font-size: 13px; }
.pb-item-isi p { margin: 4px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.pb-item audio { width: 100%; height: 34px; margin-top: 6px; }
.pb-lagi { margin: 8px auto 0; display: flex; }
.pb-lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .92); display: grid; place-items: center; padding: 16px; }
.pb-lightbox img { max-width: 100%; max-height: 90vh; border-radius: 10px; }
.pb-lightbox button { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 18px; cursor: pointer; }
@media (min-width: 700px) { .pb-kisi { columns: 3; } .pb { box-shadow: 0 0 60px rgba(0, 0, 0, .25); } }
@media (prefers-reduced-motion: reduce) { .pb-surat, .pb-ketuk { animation: none; } }

/* pilihan ukuran foto */
.pb-format { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 12px; }
.pb-format button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--kartu) 45%, transparent); box-shadow: inset 0 0 0 1px var(--garis); }
.pb-format button i { display: block; height: 30px; max-width: 34px; border-radius: 3px; border: 1.5px solid currentColor; opacity: .7; }
.pb-format button b { font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; }
.pb-format button small { font-size: 10px; color: var(--muted); }
.pb-format button.aktif { box-shadow: inset 0 0 0 2px var(--aksen); background: color-mix(in srgb, var(--aksen) 14%, transparent); }
.pb-format button.aktif i { opacity: 1; border-color: var(--aksen); }
.pb-kamera { max-height: 62vh; margin: 0 auto; transition: aspect-ratio .3s; }
.pb-kamera.kilat::after { content: ''; position: absolute; inset: 0; background: #fff; animation: pb-kilat .25s ease-out forwards; }
@keyframes pb-kilat { from { opacity: .9; } to { opacity: 0; } }
.pb-strip-info { margin: 10px 0 0; font-size: 13px; }
.pb-ukur-lain { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pb-ukur-lain small { opacity: .7; font-weight: 400; }
@media (max-width: 380px) { .pb-format { grid-template-columns: repeat(3, 1fr); } }
.pb-kamera #hasilFoto { object-fit: contain; }
.pb-foto-selesai { width: auto; max-width: 100%; max-height: 58vh; margin: 10px auto 0; display: block; }