/* Sambut — halaman undangan tamu. Satu tata letak, empat tema lewat variabel CSS. */
[hidden] { display: none !important; }
[data-theme="kenanga"] {
  --bg: #F6F1E9; --alt: #EFE7D8; --surface: #FFFDF9; --ink: #26221C; --muted: #5A5248;
  --accent: #4E5B3F; --on-accent: #FFFDF9; --label: #7E5F33; --orn: #B8975F; --line: #E4DCCF;
  --band: #2F3826; --band-ink: #F6F1E9; --band-muted: #CFC7B8; --chip: #3D4832;
  --cover: #F1EADD; --curtain: #4E5B3F; --petal: #E2B8A6;
  --display: 'Cormorant Garamond', Georgia, serif; --names: 62px; --italic: italic;
}
[data-theme="malam"] {
  --bg: #0F1830; --alt: #141F3D; --surface: #18244A; --ink: #F3EDE1; --muted: #C2BBAE;
  --accent: #D4B062; --on-accent: #0F1830; --label: #D4B062; --orn: #D4B062; --line: #2A3658;
  --band: #1B2850; --band-ink: #F3EDE1; --band-muted: #C2BBAE; --chip: #24346A;
  --cover: #0B1226; --curtain: #1B2850; --petal: #E6CC8A;
  --display: 'Playfair Display', Georgia, serif; --names: 54px; --italic: italic;
}
[data-theme="sage"] {
  --bg: #EEF1E8; --alt: #E4EADB; --surface: #FFFFFF; --ink: #1F2A1E; --muted: #4F5A4C;
  --accent: #4F6A48; --on-accent: #FFFFFF; --label: #5E6B3A; --orn: #7E9A72; --line: #D3DBC8;
  --band: #3E5238; --band-ink: #F2F5EC; --band-muted: #CFD8C6; --chip: #4E6446;
  --cover: #E1E8D8; --curtain: #9DB28E; --petal: #F0C9CC;
  --display: 'Fraunces', Georgia, serif; --names: 54px; --italic: normal;
}
[data-theme="blush"] {
  --bg: #F8ECE8; --alt: #F2E0DA; --surface: #FFFAF8; --ink: #3B2328; --muted: #6E5157;
  --accent: #8E5A6B; --on-accent: #FFFFFF; --label: #8E5A6B; --orn: #C99AA5; --line: #EBD3CD;
  --band: #5E3A45; --band-ink: #FBEFEC; --band-muted: #E3C9CD; --chip: #734856;
  --cover: #F4DFD9; --curtain: #C99AA5; --petal: #E8A9B5;
  --display: 'Cormorant Garamond', Georgia, serif; --names: 62px; --italic: italic;
}
[data-theme="teduh"] {
  --bg: #F7F4EF; --alt: #EFEAE3; --surface: #FFFFFF; --ink: #3A3128; --muted: #6E6457;
  --accent: #6F604E; --on-accent: #FFFFFF; --label: #7A6A55; --orn: #B5A794; --line: #E3DCD1;
  --band: #6F604E; --band-ink: #F7F4EF; --band-muted: #DDD3C6; --chip: #807160;
  --cover: #C9C0B4; --curtain: #8C7D69; --petal: #E2D8CB;
  --display: 'Cinzel Decorative', Georgia, serif; --names: 40px; --italic: normal;
  --panel: #C9C1B6;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Undangan tidak boleh bisa digeser ke samping di ponsel: elemen dekorasi/pembuka yang keluar tepi dipotong. */
html, body.inv { overflow-x: hidden; overflow-x: clip; }
/* Undangan tidak bisa diperbesar dengan cubit (iOS mengabaikan user-scalable=no, jadi dibantu touch-action). */
body.inv { touch-action: pan-x pan-y; }
.inv .curtain.done, .inv .cover.done { display: none !important; }
body.inv { margin: 0; background: var(--alt); color: var(--ink); font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.js body.locked { overflow: hidden; }
a { color: var(--accent); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.display { font-family: var(--display); font-weight: 500; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.tiny { font-size: 12px; }
.strong { font-weight: 700; }
.center { text-align: center; }
.label { margin: 0 0 18px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--label); font-weight: 600; }
.label.on-band { color: var(--band-muted); }
.kicker { margin: 0; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--label); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.flourish { width: 140px; color: var(--orn); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }

.draft-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: #26221C; color: #F6F1E9; text-align: center; font-size: 13px; padding: 6px 12px; }

/* ---------------------------------------------------------------- cover & curtains */
.cover { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 48px 28px; background: var(--cover); color: var(--ink); }
.js .cover { position: fixed; inset: 0; z-index: 20; transition: opacity .7s ease, transform .9s ease, visibility 0s linear 0s; }
/* Isi sampul lebih tinggi dari layar (HP pendek): bisa digulir, dan bagian atasnya tidak terpotong. */
.js .cover { overflow-y: auto; overscroll-behavior: contain; justify-content: safe center; }
.cover .kicker { margin-top: 22px; }
.cover-title { margin: 10px 0 14px; font-size: var(--names); line-height: 1; font-style: var(--italic); }
.guest-box { margin-top: 32px; width: 100%; max-width: 380px; padding: 18px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guest-box p { margin: 0; }
.guest-name { font-size: 28px; line-height: 1.15; margin-top: 6px !important; }
.btn-open { margin-top: 28px; }
.opened .cover { opacity: 0; transform: translateY(-4%) scale(1.04); visibility: hidden; pointer-events: none; transition: opacity .7s ease, transform .9s ease, visibility 0s linear .9s; }

.curtain { display: none; }
.js .curtain { display: block; position: fixed; top: 0; bottom: 0; width: 50%; z-index: 15; background: var(--curtain); transition: transform 1.4s cubic-bezier(.7, 0, .25, 1) .35s; }
.curtain-l { left: 0; border-right: 1px solid var(--orn); }
.curtain-r { right: 0; border-left: 1px solid var(--orn); }
.opened .curtain-l { transform: translateX(-101%); }
.opened .curtain-r { transform: translateX(101%); }

/* ---------------------------------------------------------------- main column */
.inv-main { max-width: 520px; margin: 0 auto; background: var(--bg); min-height: 100vh; overflow: hidden; box-shadow: 0 0 60px rgba(0, 0, 0, .08); }
.section { padding: 56px 22px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; }

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 28px; overflow: hidden; }
.orn { position: absolute; width: 210px; color: var(--orn); opacity: .85; will-change: transform; }
.orn svg { width: 100%; }
.orn-top { top: -40px; left: -56px; }
.orn-bottom { bottom: -30px; right: -56px; }
.orn-bottom svg { transform: rotate(180deg); }
.hero-inner { position: relative; will-change: transform; }
.hero-title { margin: 14px 0 22px; font-size: var(--names); line-height: 1.08; font-style: var(--italic); display: flex; flex-wrap: wrap; justify-content: center; column-gap: .28em; }
.word { display: inline-block; }
.enter { opacity: 0; transform: translateY(24px); transition: opacity 1s ease var(--d, 0s), transform 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.opened .enter, html:not(.js) .enter { opacity: 1; transform: none; }
.scroll-hint { position: absolute; bottom: 32px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); }
.bob { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.in { opacity: 1; transform: none; }

.quote { font-size: 22px; font-style: italic; line-height: 1.5; margin: 18px 0 12px; }

.hosts { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.host { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.host p { margin: 0; }
.host-photo { width: 150px; height: 190px; object-fit: cover; border-radius: 80px 80px 16px 16px; border: 1px solid var(--line); background: var(--alt); }
.host-mono { display: flex; align-items: center; justify-content: center; font-size: 46px; color: var(--orn); }
.host-name { font-size: 30px; line-height: 1.2; margin-top: 8px !important; }
.amp { font-size: 40px; color: var(--orn); margin: 0; }

.band { margin: 0 16px; padding: 32px 18px; border-radius: 26px; background: var(--band); color: var(--band-ink); text-align: center; }
.countdown { display: flex; justify-content: center; gap: 8px; }
.countdown span { width: 72px; padding: 10px 0; border-radius: 14px; background: var(--chip); font-size: 11px; color: var(--band-muted); }
.countdown strong { display: block; font-size: 32px; font-weight: 500; color: var(--band-ink); line-height: 1.15; }

.sched p { margin: 0; }
.sched-name { font-size: 30px; }
.sched-date { font-weight: 600; margin-top: 4px !important; }
.sched-time { color: var(--muted); }
.sched-place { color: var(--muted); font-size: 14px; margin-top: 8px !important; }
.sched-place strong { color: var(--ink); }

.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid var(--orn); display: flex; flex-direction: column; gap: 22px; }
.timeline li { position: relative; }
.timeline li::before { content: ''; position: absolute; left: -28px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--orn); }
.timeline li:last-child::before { background: var(--accent); }
.timeline p { margin: 4px 0 0; }
.tl-head { margin: 0 !important; font-size: 13px; font-weight: 700; color: var(--label); }

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; gap: 8px; }
.g-item { padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--alt); }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.g-item:hover img { transform: scale(1.04); }
.g-tall { grid-row: span 2; }
.video { margin-top: 12px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.video iframe { width: 100%; height: 100%; border: 0; }

.stream { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.stream-icon { width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--alt); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.stream-go { margin-left: auto; font-weight: 700; color: var(--accent); }

.gifts { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gift { width: 100%; padding: 18px; border-radius: 16px; background: var(--alt); text-align: left; }
.gift p { margin: 0; }
.gift-no { font-size: 26px; letter-spacing: 1px; margin: 4px 0 !important; word-break: break-all; }
.gift .btn { margin-top: 10px; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.field-label { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-weight: 400; }
textarea.input { resize: vertical; }
.choices { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-weight: 600; transition: background-color .25s, color .25s; }
.choice input:checked + span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-error { margin: 0; color: #B3261E; font-size: 14px; font-weight: 600; }
.thanks { text-align: center; }
.thanks .display { font-size: 30px; margin: 0; }

.wishes { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; }
.wish { padding: 14px 16px; }
.wish p { margin: 6px 0 0; font-size: 15px; }
.wish-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.wish.is-new { animation: pop .6s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.closing { padding: 48px 28px 120px; background: var(--alt); }
.signature { font-size: 40px; font-style: var(--italic); margin: 22px 0 28px; }

/* ---------------------------------------------------------------- extras */
.petals { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
.petal { position: absolute; top: 0; border-radius: 70% 0 70% 0; background: var(--petal); opacity: .8; animation: fall linear infinite; }
@keyframes fall { 0% { transform: translate3d(0, -40px, 0) rotate(0); } 50% { transform: translate3d(26px, 50vh, 0) rotate(200deg); } 100% { transform: translate3d(-14px, 105vh, 0) rotate(380deg); } }

.music-btn { position: fixed; right: 18px; bottom: 18px; z-index: 12; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--band); color: var(--band-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .22); cursor: pointer; }
.music-btn .ic-off { display: none; }
.music-btn.is-paused .ic-on { display: none; }
.music-btn.is-paused .ic-off { display: flex; }
.music-btn:not(.is-paused) .ic-on { display: flex; animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .92); }
.lightbox[hidden] { display: none; }
html.lb-open, html.lb-open body { overflow: hidden; }
.lb-close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 50; background: #26221C; color: #F6F1E9; padding: 10px 18px; border-radius: 999px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .petals { display: none; }
}

/* kode masuk (check-in QR) */
.entry-pass { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.entry-qr { position: relative; z-index: 11; width: 220px; max-width: 100%; margin: 14px auto 6px; padding: 10px; background: #fff; border-radius: 16px; }
.entry-qr svg { display: block; width: 100%; height: auto; }
.entry-name { font-size: 26px; margin: 4px 0 0; line-height: 1.2; }
.entry-code { margin: 0; font-weight: 700; letter-spacing: 4px; color: var(--muted); }

/* layar sambutan */
body.welcome { min-height: 100vh; background: var(--bg); overflow: hidden; }
.welcome-stage { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 5vh 6vw; gap: 1.5vh; color: var(--orn); }
.welcome-stage .flourish { width: min(220px, 30vw); }
.welcome-stage .kicker { color: var(--label); font-size: clamp(14px, 1.6vw, 22px); letter-spacing: 6px; text-transform: uppercase; margin: 0; }
.welcome-title { color: var(--ink); font-size: clamp(40px, 6vw, 96px); line-height: 1.05; margin: 0 0 3vh; font-style: var(--italic); }
.welcome-card { background: var(--surface); border: 1px solid var(--line); border-radius: 32px; padding: 5vh 5vw; width: min(1100px, 100%); box-shadow: 0 30px 60px rgba(0,0,0,.12); }
.welcome-card .label { font-size: clamp(14px, 1.6vw, 22px); }
.welcome-guest { color: var(--ink); font-size: clamp(36px, 5.5vw, 88px); line-height: 1.1; margin: 1vh 0; }
.welcome-card .muted { font-size: clamp(16px, 1.8vw, 26px); margin: 0; }
.welcome-card.pop { animation: welcome-pop .9s cubic-bezier(.2,.8,.2,1); }
.welcome-count { color: var(--muted); font-size: clamp(14px, 1.4vw, 20px); margin-top: 2vh; }
@keyframes welcome-pop { 0% { transform: scale(.94); opacity: .2; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .welcome-card.pop { animation: none; } }

.entry-table { margin: 6px 0 0; padding: 4px 14px; border-radius: 999px; background: var(--alt); font-weight: 700; }
/* pratinjau langsung di editor: lewati tirai pembuka */
.live .curtain { display: none; }

/* ayat berbahasa Arab */
.arabic { font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif; font-size: 27px; line-height: 2.1; color: var(--ink); margin: 6px 0 18px; word-spacing: 2px; }

/* contoh ucapan */
.wish-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.wish-chip { max-width: 100%; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wish-chip:hover, .wish-chip:focus-visible { border-color: var(--accent); color: var(--ink); }

/* ---------------------------------------------------------------- tema Teduh (sampul foto) */
.photo-layout .curtain { display: none !important; }
.photo-layout .flourish, .photo-layout .orn { display: none; }
.photo-layout .display { letter-spacing: .5px; }
.photo-layout .cover, .photo-layout .hero { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 5%, transparent) 25%, color-mix(in srgb, var(--ink) 55%, transparent) 62%, color-mix(in srgb, var(--ink) 92%, transparent)), var(--cover-img, none) center / cover no-repeat, var(--cover); }
.photo-layout .cover[data-nophoto], .photo-layout .hero[data-nophoto] { background: linear-gradient(180deg, var(--cover), color-mix(in srgb, var(--accent) 65%, var(--ink))); }
.photo-layout .cover { justify-content: flex-end; padding-bottom: 56px; gap: 2px; }
.photo-layout .cover .kicker, .photo-layout .hero .kicker { color: rgba(255, 255, 255, .88); letter-spacing: 1px; text-transform: none; font-size: 14px; }
.photo-layout .cover-title, .photo-layout .hero-title { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.photo-layout .cover .muted, .photo-layout .hero .muted { color: rgba(255, 255, 255, .85); }
.photo-layout .guest-box { margin-top: 18px; border: 0; padding: 6px 10px; }
.photo-layout .guest-name { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; color: #fff; }
.photo-layout .btn-open { margin-top: 18px; background: color-mix(in srgb, var(--accent) 92%, transparent); color: var(--on-accent); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.photo-layout.opened .cover { transform: translateY(-100%); opacity: 1; transition: transform 1s cubic-bezier(.7, 0, .25, 1), visibility 0s linear 1s; }
.photo-layout .hero { justify-content: flex-end; padding-bottom: 120px; }
.photo-layout .hero .scroll-hint { display: none; }
.photo-layout .hero .countdown { margin-top: 18px; }
.photo-layout .hero .countdown span { width: 58px; padding: 8px 0 6px; border-radius: 10px; background: rgba(255, 255, 255, .92); color: var(--muted); font-size: 10px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.photo-layout .hero .countdown strong { color: var(--ink); font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 700; }

.photo-layout .label { letter-spacing: 2px; }
.photo-layout .host-photo { width: 200px; height: 250px; border-radius: 18px; border: 0; box-shadow: 0 0 0 6px var(--surface), 0 0 0 7px var(--line), 0 18px 36px rgba(58, 49, 40, .14); }
.photo-layout .host-mono { width: 200px; height: 250px; }
.photo-layout .host-name { font-size: 26px; margin-top: 18px !important; }
.photo-layout .amp { font-size: 84px; line-height: 1; margin: 18px 0; color: var(--accent); }
.photo-layout .card { border-radius: 18px; box-shadow: 0 10px 30px rgba(58, 49, 40, .06); }
.photo-layout .sched-name { font-size: 24px; }
/* Cinzel hanya untuk nama & judul pendek; teks panjang memakai serif yang mudah dibaca. */
.photo-layout .quote, .photo-layout .thanks .display { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; letter-spacing: 0; }
.photo-layout .gift-no, .photo-layout .entry-name { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 1px; }

.side-panel { display: none; }
.dust i { position: absolute; border-radius: 50%; background: #2F2821; opacity: .55; animation: drift linear infinite; }
@keyframes drift { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .55; } 100% { transform: translate(24px, -90px); opacity: 0; } }

.dock { display: none; }
@keyframes dock-in { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.dust i { background: var(--ink); }

/* ---------------------------------------------------------------- semua tema: navigasi kapsul, tombol musik, layar lebar */
body.inv.opened .dock { display: flex; position: fixed; left: 50%; bottom: 14px; z-index: 13; transform: translateX(-50%); gap: 4px; padding: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 12px 28px rgba(0, 0, 0, .22); animation: dock-in .6s ease 1s both; }
.dock a { display: flex; align-items: center; justify-content: center; width: 44px; height: 40px; border-radius: 999px; color: var(--on-accent); transition: width .3s ease, background-color .3s ease, color .3s ease; }
.dock a:hover { background: rgba(255, 255, 255, .14); }
.dock a.is-active { width: 64px; background: var(--surface); color: var(--accent); }
body.inv .music-btn { bottom: 76px; right: 14px; width: 44px; height: 44px; background: var(--accent); color: var(--on-accent); border: 0; }
body.inv .closing { padding-bottom: 140px; }
.live.inv .dock { display: none !important; }

@media (min-width: 960px) {
  body.inv:not(.welcome):not(.unavailable) { --col: 440px; }
  .side-panel { display: flex; position: fixed; top: 0; bottom: 0; left: 0; right: var(--col); flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; overflow: hidden; color: var(--ink); background: radial-gradient(ellipse at 30% 40%, var(--surface), var(--panel, var(--alt)) 75%); }
  .side-panel .flourish { position: relative; width: 170px; margin-bottom: 14px; color: var(--orn); }
  .side-panel .kicker { position: relative; }
  .photo-layout .side-panel .kicker { color: var(--ink); text-transform: none; letter-spacing: 1px; font-size: 16px; }
  .side-title { position: relative; margin: 10px 0 14px; font-size: clamp(48px, 4.6vw, 76px); line-height: 1.08; color: var(--ink); font-style: var(--italic); max-width: 14ch; }
  .side-panel .muted { position: relative; }
  .dust { position: absolute; inset: 0; }
  body.inv .inv-main { margin: 0 0 0 auto; max-width: var(--col); }
  .js body.inv:not(.welcome) .cover { left: auto; width: var(--col); }
  .js body.inv .curtain-l { left: auto; right: calc(var(--col) / 2); width: calc(var(--col) / 2); }
  .js body.inv .curtain-r { width: calc(var(--col) / 2); }
  /* Di layar lebar tirai menguncup ke tepi kolom supaya tidak menutupi panel samping. */
  .js body.inv .curtain-l { transform-origin: left center; }
  .js body.inv .curtain-r { transform-origin: right center; }
  .opened .curtain-l, .opened .curtain-r { transform: scaleX(0); }
  body.inv .petals { left: auto; width: var(--col); }
  body.inv.opened .dock { left: calc(100% - var(--col) / 2); }
  body.inv .toast { left: calc(100% - var(--col) / 2); }
}
@media (prefers-reduced-motion: reduce) { .dust { display: none; } }

/* ---------------------------------------------------------------- foto sampul di tema klasik */
.frame-photo { margin: 0 auto; position: relative; }
.frame-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.frame-hero { display: none; }
.cover.has-frame { gap: 2px; padding-top: 32px; padding-bottom: 32px; }
.cover.has-frame .kicker { margin-top: 18px; }
/* Kenanga: lengkung berbingkai garis ganda */
[data-theme="kenanga"] .frame-cover { width: min(220px, 56vw); height: min(300px, 32vh); height: min(300px, 30svh); margin-top: 10px; }
[data-theme="kenanga"] .frame-cover img { border-radius: 999px 999px 18px 18px; }
[data-theme="kenanga"] .frame-cover::after { content: ''; position: absolute; inset: -9px; border: 1px solid var(--orn); border-radius: 999px 999px 24px 24px; pointer-events: none; }
/* Malam: bulat dengan cincin emas */
[data-theme="malam"] .frame-cover { width: min(220px, 56vw); aspect-ratio: 1; max-height: 30vh; max-width: 30vh; max-height: 28svh; max-width: 28svh; margin-top: 12px; }
[data-theme="malam"] .frame-cover img { border-radius: 50%; box-shadow: 0 0 0 3px var(--accent), 0 0 0 10px var(--cover), 0 0 0 11px var(--orn), 0 20px 50px rgba(0, 0, 0, .45); }
/* Sage & Blush: sampul tetap ringan, foto tampil di halaman pembuka */
[data-theme="sage"] .frame-cover, [data-theme="blush"] .frame-cover { display: none; }
[data-theme="sage"] .frame-hero, [data-theme="blush"] .frame-hero { display: block; margin-bottom: 22px; }
[data-theme="sage"] .frame-hero { width: min(250px, 64vw); height: min(330px, 42vh); }
[data-theme="sage"] .frame-hero img { border-radius: 36px; box-shadow: 14px 14px 0 var(--alt), 14px 14px 0 1px var(--orn); }
[data-theme="blush"] .frame-hero { width: min(230px, 60vw); height: min(320px, 42vh); }
[data-theme="blush"] .frame-hero img { border-radius: 50%; border: 6px solid var(--surface); box-shadow: 0 0 0 1px var(--orn), 0 18px 40px rgba(94, 58, 69, .18); }
[data-theme="kenanga"] .cover.has-frame .flourish, [data-theme="malam"] .cover.has-frame .flourish { display: none; }
@media (max-height: 640px) { .cover.has-frame .guest-box { margin-top: 14px; } .cover.has-frame .btn-open { margin-top: 14px; } }
/* Layar HP pendek: nama & jarak sampul dirapatkan supaya tombol Buka Undangan tetap terlihat tanpa menggulir. */
@media (max-height: 720px) and (max-width: 600px) {
  .cover .cover-title { font-size: calc(var(--names) * .84); margin-bottom: 8px; }
  [data-title="upper"] .cover .cover-title { font-size: calc(var(--names) * .74); }
  .cover.has-frame { padding-top: 22px; padding-bottom: 22px; }
  .cover .guest-box { margin-top: 16px; padding-top: 12px; padding-bottom: 12px; }
  .cover .btn-open { margin-top: 16px; }
}
/* Layar sangat pendek: foto & nama lebih kecil, catatan kecil di bawah nama tamu disembunyikan. */
@media (max-height: 620px) and (max-width: 600px) {
  [data-theme="kenanga"] .frame-cover { height: min(300px, 24vh); height: min(300px, 23svh); width: min(180px, 48vw); }
  [data-theme="malam"] .frame-cover { max-height: 22vh; max-width: 22vh; max-height: 21svh; max-width: 21svh; }
  .cover .cover-title { font-size: calc(var(--names) * .74); }
  .cover .kicker { margin-top: 10px; }
  .cover .guest-box { margin-top: 10px; padding-top: 8px; padding-bottom: 8px; }
  .cover .guest-box + .tiny { display: none; }
  .cover .btn-open { margin-top: 12px; }
}


/* undangan belum aktif / sudah berakhir */
body.unavailable { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px 20px; background: var(--cover); }
.na-card { width: min(440px, 100%); padding: 36px 26px 30px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .08); }
.na-card .flourish { margin: 0 auto 10px; }
.na-headline { margin: 10px 0 0; font-size: 34px; line-height: 1.15; font-style: var(--italic); }
.na-title { margin: 14px 0 8px; font-size: 20px; line-height: 1.35; font-weight: 700; }
.na-card .muted { margin: 0; }
.na-guest { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.na-foot { margin: 0; }

/* ---------------------------------------------------------------- tombol "Buka Undangan" (semua tema) */
.btn-open { position: relative; overflow: hidden; isolation: isolate; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, filter .3s ease; animation: open-breathe 2.6s ease-in-out infinite; will-change: transform; }
.btn-open::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .42) 50%, transparent 70%); transform: translateX(-130%); transition: transform .85s ease; }
.btn-open svg { transition: transform .35s ease; }
.btn-open:hover, .btn-open:focus-visible { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 32px rgba(0, 0, 0, .26); animation-play-state: paused; filter: brightness(1.05); }
.btn-open:hover::before, .btn-open:focus-visible::before { transform: translateX(130%); }
.btn-open:hover svg, .btn-open:focus-visible svg { animation: env-wiggle .7s ease; }
.btn-open:active { transform: translateY(0) scale(.95); transition-duration: .1s; }
.btn-open .ripple { position: absolute; z-index: -1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(255, 255, 255, .55); pointer-events: none; animation: open-ripple .6s ease-out forwards; }
.btn-open.is-opening { animation: open-pop .5s cubic-bezier(.2, .8, .2, 1) forwards; }
.btn-open.is-opening svg { animation: env-fly .55s ease-in forwards; }
@keyframes open-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); } }
@keyframes env-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@keyframes env-fly { 0% { transform: none; } 40% { transform: translateY(2px) scale(.9); } 100% { transform: translate(18px, -26px) rotate(-18deg) scale(.6); opacity: 0; } }
@keyframes open-ripple { to { transform: scale(30); opacity: 0; } }
@keyframes open-pop { 0% { transform: scale(.95); } 45% { transform: scale(1.08); } 100% { transform: scale(1); box-shadow: 0 0 0 18px color-mix(in srgb, var(--accent) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .btn-open, .btn-open::before, .btn-open svg { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- efek latar lainnya */
.fx-leaf, .fx-confetti, .fx-snow, .fx-heart, .fx-bubble, .fx-star { position: absolute; display: block; pointer-events: none; }
.fx-leaf { top: 0; border-radius: 0 85% 0 85%; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); opacity: .85; animation: fx-leaf linear infinite; }
.fx-leaf::after { content: ''; position: absolute; left: 50%; top: 10%; bottom: 10%; width: 1px; background: rgba(255, 255, 255, .45); transform: rotate(35deg); }
@keyframes fx-leaf { 0% { transform: translate3d(0, -40px, 0) rotate(0); } 25% { transform: translate3d(40px, 25vh, 0) rotate(90deg); } 50% { transform: translate3d(-10px, 50vh, 0) rotate(180deg); } 75% { transform: translate3d(35px, 75vh, 0) rotate(250deg); } 100% { transform: translate3d(0, 105vh, 0) rotate(340deg); } }
.fx-confetti { top: 0; border-radius: 2px; background: var(--c); opacity: .9; animation: fx-confetti linear infinite; }
@keyframes fx-confetti { 0% { transform: translate3d(0, -30px, 0) rotateX(0) rotateZ(0); } 50% { transform: translate3d(-20px, 50vh, 0) rotateX(540deg) rotateZ(160deg); } 100% { transform: translate3d(15px, 105vh, 0) rotateX(1080deg) rotateZ(320deg); } }
.fx-snow { top: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .18); opacity: .9; animation: fx-snow linear infinite; }
@keyframes fx-snow { 0% { transform: translate3d(0, -20px, 0); } 50% { transform: translate3d(22px, 50vh, 0); } 100% { transform: translate3d(-8px, 105vh, 0); } }
.fx-heart { bottom: -30px; color: color-mix(in srgb, #E06C80 70%, var(--petal)); opacity: .85; animation: fx-rise ease-in infinite; }
.fx-heart svg { width: 100%; height: 100%; display: block; }
.fx-bubble { bottom: -30px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--orn) 70%, transparent); background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .05) 45%, transparent 70%); animation: fx-rise linear infinite; }
@keyframes fx-rise { 0% { transform: translate3d(0, 0, 0) scale(.8); opacity: 0; } 10% { opacity: .85; } 50% { transform: translate3d(24px, -55vh, 0) scale(1); } 90% { opacity: .7; } 100% { transform: translate3d(-12px, -110vh, 0) scale(1.05); opacity: 0; } }
.fx-star { background: var(--orn); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--orn) 70%, transparent)); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: fx-twinkle ease-in-out infinite; }
@keyframes fx-twinkle { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* contoh kecil di editor tidak dimuat di sini; lihat app.css */

/* ---------------------------------------------------------------- sentuhan khas tema per jenis acara */
/* pola latar halus di halaman pembuka dan panel samping */
[data-skin] .hero::before, [data-skin] .side-panel::before { content: none; }
[data-skin="sekar"] .hero::before, [data-skin="sekar"] .side-panel::before,
[data-skin="sakinah"] .hero::before, [data-skin="sakinah"] .side-panel::before,
[data-skin="lentera"] .hero::before, [data-skin="lentera"] .side-panel::before,
[data-skin="ceria"] .hero::before, [data-skin="ceria"] .side-panel::before,
[data-skin="permen"] .hero::before, [data-skin="permen"] .side-panel::before,
[data-skin="korporat"] .hero::before, [data-skin="korporat"] .side-panel::before,
[data-skin="inovasi"] .hero::before, [data-skin="inovasi"] .side-panel::before,
[data-skin="pesta"] .hero::before, [data-skin="pesta"] .side-panel::before,
[data-skin="melati"] .hero::before, [data-skin="melati"] .side-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .16; }
/* Sekar: motif kawung (lingkaran bertumpuk) */
[data-skin="sekar"] .hero::before, [data-skin="sekar"] .side-panel::before { background: radial-gradient(circle at 0 50%, transparent 11px, var(--orn) 12px, transparent 13px) 0 0 / 26px 26px, radial-gradient(circle at 50% 0, transparent 11px, var(--orn) 12px, transparent 13px) 0 0 / 26px 26px; opacity: .22; }
/* Sakinah & Lentera: pola bintang geometris islami */
[data-skin="sakinah"] .hero::before, [data-skin="sakinah"] .side-panel::before,
[data-skin="lentera"] .hero::before, [data-skin="lentera"] .side-panel::before { background: conic-gradient(from 45deg at 50% 50%, var(--orn) 0 25%, transparent 0 50%, var(--orn) 0 75%, transparent 0) 0 0 / 34px 34px; -webkit-mask: radial-gradient(circle, #000 1.5px, transparent 2px) 0 0 / 17px 17px; mask: radial-gradient(circle, #000 1.5px, transparent 2px) 0 0 / 17px 17px; opacity: .55; }
[data-skin="lentera"] .hero::before, [data-skin="lentera"] .side-panel::before { opacity: .35; }
/* Ceria & Permen Kapas: titik-titik warna */
[data-skin="ceria"] .hero::before, [data-skin="ceria"] .side-panel::before { background: radial-gradient(var(--orn) 3px, transparent 3.5px) 0 0 / 34px 34px, radial-gradient(var(--accent) 3px, transparent 3.5px) 17px 17px / 34px 34px; opacity: .17; }
[data-skin="permen"] .hero::before, [data-skin="permen"] .side-panel::before { background: radial-gradient(var(--orn) 4px, transparent 4.5px) 0 0 / 40px 40px, radial-gradient(var(--accent) 3px, transparent 3.5px) 20px 20px / 40px 40px; opacity: .16; }
/* Korporat & Inovasi: kisi garis tipis */
[data-skin="korporat"] .hero::before, [data-skin="korporat"] .side-panel::before,
[data-skin="inovasi"] .hero::before, [data-skin="inovasi"] .side-panel::before { background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 32px 32px; opacity: .9; }
/* Pesta Malam: cahaya neon samar */
[data-skin="pesta"] .hero::before, [data-skin="pesta"] .side-panel::before { background: radial-gradient(circle at 20% 25%, var(--accent), transparent 35%), radial-gradient(circle at 80% 70%, var(--orn), transparent 40%); opacity: .22; }
/* Melati: kilau emas lembut di sudut */
[data-skin="melati"] .hero::before, [data-skin="melati"] .side-panel::before { background: radial-gradient(circle at 15% 10%, var(--orn), transparent 30%), radial-gradient(circle at 85% 90%, var(--orn), transparent 30%); opacity: .2; }
[data-skin] .hero-inner, [data-skin] .side-panel > :not(.dust) { position: relative; }

/* tema anak: bentuk membulat, huruf tebal, tanpa ornamen daun */
[data-skin="ceria"] .orn, [data-skin="permen"] .orn { display: none; }
[data-skin="ceria"] .display, [data-skin="permen"] .display { font-weight: 600; }
[data-skin="ceria"] .card, [data-skin="permen"] .card { border-radius: 28px; border-width: 2px; }
[data-skin="ceria"] .band, [data-skin="permen"] .band { border-radius: 32px; }
[data-skin="ceria"] .host-photo, [data-skin="permen"] .host-photo { border-radius: 50%; width: 170px; height: 170px; border: 5px solid var(--surface); box-shadow: 0 0 0 3px var(--orn); }
[data-skin="ceria"] .kicker, [data-skin="permen"] .kicker { letter-spacing: 2px; font-weight: 700; }
[data-skin="ceria"] .cover-title { color: var(--accent); }

/* tema kegiatan: bersih, tanpa ornamen bunga, tanpa tirai */
[data-skin="korporat"] .orn, [data-skin="inovasi"] .orn, [data-skin="korporat"] .flourish, [data-skin="inovasi"] .flourish, [data-skin="monokrom"] .flourish { display: none; }
[data-skin="korporat"] .curtain, [data-skin="inovasi"] .curtain { display: none !important; }
[data-skin="korporat"] .display, [data-skin="inovasi"] .display { font-weight: 800; letter-spacing: -.5px; }
[data-skin="korporat"] .card, [data-skin="inovasi"] .card { border-radius: 14px; }
[data-skin="korporat"] .band, [data-skin="inovasi"] .band { border-radius: 16px; }
[data-skin="korporat"] .host-photo, [data-skin="inovasi"] .host-photo { border-radius: 16px; }
[data-skin="korporat"] .kicker::before, [data-skin="inovasi"] .kicker::before { content: ''; display: block; width: 36px; height: 3px; margin: 0 auto 14px; border-radius: 3px; background: var(--accent); }
[data-skin="inovasi"] .kicker::before { background: var(--orn); }
[data-skin="korporat"] .label, [data-skin="inovasi"] .label { letter-spacing: 2px; }
[data-skin="monokrom"] .display { letter-spacing: 0; }

/* Pesta Malam: judul bercahaya */
[data-skin="pesta"] .cover-title, [data-skin="pesta"] .hero-title, [data-skin="pesta"] .side-title { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 65%, transparent); font-weight: 800; }
[data-skin="pesta"] .orn { color: var(--orn); }
[data-skin="pesta"] .card { border-radius: 20px; }

/* Lentera: kartu bersinar emas tipis */
[data-skin="lentera"] .card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--orn) 30%, transparent), 0 18px 40px rgba(0, 0, 0, .25); }
[data-skin="lentera"] .cover-title, [data-skin="lentera"] .hero-title { text-shadow: 0 0 24px color-mix(in srgb, var(--orn) 35%, transparent); }

/* Sekar & Sakinah & Melati: bingkai garis ganda di kartu */
[data-skin="sekar"] .card, [data-skin="sakinah"] .card, [data-skin="melati"] .card { box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--line); }
[data-skin="sekar"] .host-photo, [data-skin="sakinah"] .host-photo { border-radius: 90px 90px 12px 12px; border: 2px solid var(--orn); }
[data-skin="monokrom"].photo-layout .btn-open { background: #fff; color: #111; }
.photo-layout .btn-open { border: 1px solid rgba(255, 255, 255, .45); }

/* ================================================================ tema pernikahan premium */
.cover-frame { display: none; }
.cover > *:not(.cover-frame) { position: relative; }

/* teks emas berkilau (Kencana, Lazuardi, Pualam) */
[data-skin="kencana"] :is(.cover-title, .hero-title .word, .side-title, .host-name, .signature, .amp),
[data-skin="lazuardi"] :is(.cover-title, .hero-title .word, .side-title, .host-name, .signature, .amp),
[data-skin="pualam"] :is(.cover-title, .hero-title .word, .side-title, .signature) {
  background: linear-gradient(100deg, #8E6B2C 0%, #E9C978 22%, #B48A3C 40%, #F8E3A3 58%, #A47E37 78%, #E2BF6E 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s ease-in-out infinite;
}
[data-skin="pualam"] :is(.cover-title, .hero-title .word, .side-title, .signature) { background-image: linear-gradient(100deg, #7E6438 0%, #C9A86A 25%, #8F7240 45%, #DCC08A 62%, #8A6D3E 80%, #B8975F 100%); }
@keyframes foil { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------------- Kencana: kemewahan kerajaan */
[data-skin="kencana"] .cover-frame, [data-skin="lazuardi"] .cover-frame, [data-skin="pualam"] .cover-frame, [data-skin="mawar"] .cover-frame { display: block; position: absolute; pointer-events: none; z-index: 0; }
[data-skin="kencana"] .cover-frame { inset: 16px; border: 1px solid var(--orn); box-shadow: inset 0 0 0 6px var(--cover), inset 0 0 0 7px color-mix(in srgb, var(--orn) 55%, transparent); }
[data-skin="kencana"] .cover-frame::before, [data-skin="kencana"] .cover-frame::after { content: ''; position: absolute; left: 50%; width: 14px; height: 14px; margin-left: -7px; background: var(--orn); transform: rotate(45deg); }
[data-skin="kencana"] .cover-frame::before { top: -7px; } [data-skin="kencana"] .cover-frame::after { bottom: -7px; }
[data-skin="kencana"] .cover, [data-skin="kencana"] .hero, [data-skin="kencana"] .side-panel { background: radial-gradient(ellipse at 50% 35%, #2A1A10, var(--cover) 70%); }
[data-skin="kencana"] .hero::before, [data-skin="kencana"] .side-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .08;
  background: radial-gradient(circle at 50% 50%, transparent 9px, var(--orn) 10px, transparent 11px) 0 0 / 44px 44px, radial-gradient(circle at 0 0, var(--orn) 2px, transparent 3px) 0 0 / 22px 22px; }
[data-skin="kencana"] .card { background: linear-gradient(160deg, #24170F, #1A100A); border: 1px solid color-mix(in srgb, var(--orn) 45%, transparent); box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px color-mix(in srgb, var(--orn) 25%, transparent); }
[data-skin="kencana"] .btn-accent, [data-skin="kencana"] .btn-open { background: linear-gradient(135deg, #B48A3C, #EBCB7E 50%, #A47E37); color: #1A0F08; }
[data-skin="kencana"] .orn { width: 230px; opacity: .9; }
[data-skin="kencana"] .kicker { letter-spacing: 6px; }
[data-skin="kencana"] .band { background: linear-gradient(160deg, #2A1B11, #160D08); border: 1px solid color-mix(in srgb, var(--orn) 40%, transparent); }
[data-skin="kencana"] .host-photo { border: 2px solid var(--orn); box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px color-mix(in srgb, var(--orn) 50%, transparent); }

/* ---------------- Pualam: marmer putih & emas sampanye */
[data-skin="pualam"] { --marble: radial-gradient(ellipse at 18% 8%, rgba(255, 255, 255, .95), transparent 38%), linear-gradient(118deg, transparent 38%, rgba(160, 150, 138, .10) 39.5%, transparent 42%), linear-gradient(158deg, transparent 58%, rgba(150, 140, 130, .08) 59.5%, transparent 62.5%), linear-gradient(32deg, transparent 18%, rgba(170, 160, 150, .08) 19.5%, transparent 22%), linear-gradient(80deg, transparent 70%, rgba(180, 168, 150, .07) 71%, transparent 73%), #F6F4F0; }
[data-skin="pualam"] .cover, [data-skin="pualam"] .hero, [data-skin="pualam"] .side-panel, [data-skin="pualam"] .inv-main { background: var(--marble); }
[data-skin="pualam"] .cover-frame { inset: 26px 30px; border: 1px solid var(--orn); border-radius: 300px 300px 6px 6px / 240px 240px 6px 6px; box-shadow: inset 0 0 0 7px transparent, 0 0 0 7px transparent; outline: 1px solid color-mix(in srgb, var(--orn) 45%, transparent); outline-offset: -9px; }
[data-skin="pualam"] .cover.has-frame .cover-frame { display: none; }
[data-skin="pualam"] .card { background: rgba(255, 255, 255, .82); border: 1px solid color-mix(in srgb, var(--orn) 40%, transparent); backdrop-filter: blur(2px); }
[data-skin="pualam"] .band { background: linear-gradient(160deg, #2E2A25, #45403A); }
[data-skin="pualam"] .orn { opacity: .7; }
[data-skin="pualam"] .host-photo { border-radius: 999px 999px 8px 8px; border: 1px solid var(--orn); box-shadow: 0 0 0 7px rgba(255, 255, 255, .8), 0 0 0 8px color-mix(in srgb, var(--orn) 40%, transparent); }

/* ---------------- Taman Mawar: buket mawar */
[data-skin="mawar"] .orn { width: 270px; opacity: 1; }
[data-skin="mawar"] .orn-top { top: -34px; left: -34px; } [data-skin="mawar"] .orn-bottom { bottom: -34px; right: -34px; }
[data-skin="mawar"] .cover-title, [data-skin="mawar"] .hero-title, [data-skin="mawar"] .side-title, [data-skin="mawar"] .host-name, [data-skin="mawar"] .signature { color: var(--accent); font-weight: 400; }
[data-skin="mawar"] .host-name { font-size: 40px; }
[data-skin="mawar"] .cover-frame { inset: 14px; border-radius: 28px; border: 1.5px solid color-mix(in srgb, var(--orn) 60%, transparent); }
[data-skin="mawar"] .cover, [data-skin="mawar"] .hero { background: radial-gradient(ellipse at 50% 40%, #FFFFFF, var(--cover) 75%); }
[data-skin="mawar"] .card { border-radius: 26px; box-shadow: 0 14px 36px rgba(176, 94, 108, .10); }
[data-skin="mawar"] .host-photo { border-radius: 50%; width: 180px; height: 180px; border: 6px solid #fff; box-shadow: 0 0 0 2px var(--orn), 0 16px 36px rgba(176, 94, 108, .18); }
[data-skin="mawar"] .flourish { width: 120px; }

/* ---------------- Lazuardi: art deco */
[data-skin="lazuardi"] .cover-frame { inset: 18px; border: 1px solid var(--orn); }
[data-skin="lazuardi"] .cover-frame::before { content: ''; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--orn) 45%, transparent);
  clip-path: polygon(0 24px, 24px 24px, 24px 0, calc(100% - 24px) 0, calc(100% - 24px) 24px, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 24px calc(100% - 24px), 0 calc(100% - 24px)); }
[data-skin="lazuardi"] .cover-frame::after { content: ''; position: absolute; left: 50%; top: -1px; width: 120px; height: 60px; margin-left: -60px; border: 1px solid var(--orn); border-top: 0; border-radius: 0 0 120px 120px;
  background: repeating-conic-gradient(from 90deg at 50% 0, color-mix(in srgb, var(--orn) 35%, transparent) 0 4deg, transparent 4deg 18deg); }
[data-skin="lazuardi"] .cover, [data-skin="lazuardi"] .hero, [data-skin="lazuardi"] .side-panel { background: radial-gradient(ellipse at 50% 30%, #14284A, var(--cover) 75%); }
[data-skin="lazuardi"] .hero::before, [data-skin="lazuardi"] .side-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background: repeating-radial-gradient(circle at 50% 100%, transparent 0 13px, var(--orn) 13px 14px) 0 0 / 56px 28px; }
[data-skin="lazuardi"] :is(.cover-title, .hero-title, .side-title) { text-transform: uppercase; letter-spacing: 5px; }
[data-skin="lazuardi"] .kicker { letter-spacing: 8px; }
[data-skin="lazuardi"] .card { border-radius: 4px; border: 1px solid color-mix(in srgb, var(--orn) 50%, transparent); box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px color-mix(in srgb, var(--orn) 25%, transparent); }
[data-skin="lazuardi"] .btn { border-radius: 4px; letter-spacing: 1px; }
[data-skin="lazuardi"] .btn-accent, [data-skin="lazuardi"] .btn-open { background: linear-gradient(135deg, #B99B5E, #EBD6A5 50%, #B39456); color: #0C1726; }
[data-skin="lazuardi"] .band { border-radius: 4px; border: 1px solid color-mix(in srgb, var(--orn) 35%, transparent); }
[data-skin="lazuardi"] .countdown span { border-radius: 4px; }
[data-skin="lazuardi"] .host-photo { border-radius: 4px; border: 1px solid var(--orn); box-shadow: 8px 8px 0 -1px var(--bg), 8px 8px 0 0 var(--orn); }

/* ---------------- Sutra: sampul foto gaya majalah */
[data-skin="sutra"].photo-layout .cover-title, [data-skin="sutra"].photo-layout .hero-title { font-size: 60px; font-weight: 500; letter-spacing: 0; }
[data-skin="sutra"].photo-layout .cover .kicker, [data-skin="sutra"].photo-layout .hero .kicker { display: flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: 6px; font-size: 11px; }
[data-skin="sutra"].photo-layout .cover .kicker::before, [data-skin="sutra"].photo-layout .cover .kicker::after,
[data-skin="sutra"].photo-layout .hero .kicker::before, [data-skin="sutra"].photo-layout .hero .kicker::after { content: ''; width: 40px; height: 1px; background: rgba(255, 255, 255, .7); }
[data-skin="sutra"].photo-layout .cover .kicker, [data-skin="sutra"].photo-layout .hero .kicker { justify-content: center; }
[data-skin="sutra"].photo-layout .btn-open { background: transparent; border: 1px solid rgba(255, 255, 255, .85); color: #fff; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; }
[data-skin="sutra"] .card { border-radius: 0; border-color: var(--line); box-shadow: none; }
[data-skin="sutra"] .band { border-radius: 0; }
[data-skin="sutra"] .countdown span { border-radius: 0 !important; }
[data-skin="sutra"].photo-layout .host-photo { border-radius: 0; box-shadow: 12px 12px 0 -1px var(--bg), 12px 12px 0 0 var(--orn); }
[data-skin="sutra"] .label { letter-spacing: 5px; }
[data-skin="sutra"] .amp { font-style: italic; }

@media (prefers-reduced-motion: reduce) { [data-skin] :is(.cover-title, .hero-title .word, .side-title, .host-name, .signature, .amp) { animation: none; } }
/* ornamen bingkai sudut (sulur, art deco, garis) ditaruh di dalam layar */
:is([data-skin="kencana"], [data-skin="lazuardi"], [data-skin="pualam"]) .orn { width: 170px; }
:is([data-skin="kencana"], [data-skin="lazuardi"], [data-skin="pualam"]) .orn-top { top: 14px; left: 14px; }
:is([data-skin="kencana"], [data-skin="lazuardi"], [data-skin="pualam"]) .orn-bottom { bottom: 14px; right: 14px; }

/* ================================================================ efek latar premium */
.fx-dust, .fx-firefly, .fx-bokeh, .fx-sakura, .fx-lantern, .fx-butterfly, .fx-rosepetal, .fx-meteor, .fx-aurora, .fx-firework { position: absolute; display: block; pointer-events: none; will-change: transform, opacity; }
.fx-sakura svg, .fx-lantern svg, .fx-butterfly svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Debu emas: butiran emas berkilau yang naik perlahan */
.fx-dust { border-radius: 50%; background: radial-gradient(circle, #FFF6D5 0 20%, #E8C872 45%, transparent 72%); box-shadow: 0 0 6px 1px rgba(232, 200, 114, .65); animation: fx-dust ease-in-out infinite; }
@keyframes fx-dust { 0% { transform: translate3d(0, 30px, 0) scale(.4); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate3d(14px, -40px, 0) scale(1); opacity: .9; } 80% { opacity: .8; } 100% { transform: translate3d(-8px, -110px, 0) scale(.5); opacity: 0; } }

/* Kunang-kunang: titik bercahaya yang mengembara dan berdenyut */
.fx-firefly { border-radius: 50%; background: #FFF4A8; box-shadow: 0 0 8px 3px rgba(255, 236, 120, .75), 0 0 22px 6px rgba(255, 220, 90, .35); animation: fx-wander ease-in-out infinite, fx-glow 2.6s ease-in-out infinite; }
@keyframes fx-wander { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(40px, -30px, 0); } 50% { transform: translate3d(-20px, -60px, 0); } 75% { transform: translate3d(-50px, -20px, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes fx-glow { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Cahaya bokeh: lingkaran cahaya lembut yang melayang */
.fx-bokeh { border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 70%, transparent) 0, color-mix(in srgb, var(--c) 25%, transparent) 45%, transparent 70%); opacity: .35; animation: fx-bokeh ease-in-out infinite alternate; }
@keyframes fx-bokeh { 0% { transform: translate3d(0, 0, 0) scale(.85); opacity: .15; } 50% { opacity: .4; } 100% { transform: translate3d(30px, -50px, 0) scale(1.1); opacity: .2; } }

/* Sakura: bunga lima kelopak yang berputar sambil jatuh */
.fx-sakura { top: 0; color: var(--c); filter: drop-shadow(0 2px 2px rgba(180, 80, 110, .18)); animation: fx-sakura linear infinite; }
@keyframes fx-sakura { 0% { transform: translate3d(0, -40px, 0) rotate(0) rotateX(0); opacity: 0; } 8% { opacity: .95; } 30% { transform: translate3d(36px, 28vh, 0) rotate(120deg) rotateX(60deg); } 60% { transform: translate3d(-18px, 60vh, 0) rotate(240deg) rotateX(140deg); } 100% { transform: translate3d(24px, 106vh, 0) rotate(380deg) rotateX(260deg); opacity: .85; } }

/* Lampion: lentera bercahaya yang naik ke langit */
.fx-lantern { bottom: -50px; color: var(--c); filter: drop-shadow(0 0 10px rgba(255, 170, 70, .75)); animation: fx-lantern linear infinite; }
@keyframes fx-lantern { 0% { transform: translate3d(0, 0, 0) rotate(-3deg) scale(.9); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate3d(18px, -55vh, 0) rotate(3deg) scale(.8); } 90% { opacity: .85; } 100% { transform: translate3d(-10px, -115vh, 0) rotate(-2deg) scale(.6); opacity: 0; } }

/* Kupu-kupu: terbang berkelok sambil mengepakkan sayap */
.fx-butterfly { bottom: -40px; color: var(--c); animation: fx-flutter linear infinite; }
.fx-butterfly .w1, .fx-butterfly .w2 { animation: fx-wing .32s ease-in-out infinite alternate; }
.fx-butterfly .w1 { transform-origin: 20px 15px; } .fx-butterfly .w2 { transform-origin: 20px 15px; animation-name: fx-wing2; }
@keyframes fx-wing { from { transform: scaleX(1); } to { transform: scaleX(.45); } }
@keyframes fx-wing2 { from { transform: scaleX(1); } to { transform: scaleX(.45); } }
@keyframes fx-flutter { 0% { transform: translate3d(0, 0, 0) rotate(10deg); opacity: 0; } 8% { opacity: 1; } 25% { transform: translate3d(60px, -25vh, 0) rotate(-12deg); } 50% { transform: translate3d(-30px, -52vh, 0) rotate(14deg); } 75% { transform: translate3d(50px, -80vh, 0) rotate(-10deg); } 92% { opacity: 1; } 100% { transform: translate3d(0, -112vh, 0) rotate(8deg); opacity: 0; } }

/* Kelopak mawar: kelopak merah tiga dimensi yang berputar */
.fx-rosepetal { top: 0; border-radius: 60% 10% 60% 50% / 70% 10% 70% 40%; background: radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--c) 55%, #fff) 0, var(--c) 45%, color-mix(in srgb, var(--c) 70%, #000) 100%); box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .18); animation: fx-rosepetal linear infinite; }
@keyframes fx-rosepetal { 0% { transform: translate3d(0, -40px, 0) rotateX(0) rotateY(0) rotateZ(0); opacity: 0; } 8% { opacity: .95; } 35% { transform: translate3d(40px, 32vh, 0) rotateX(180deg) rotateY(60deg) rotateZ(90deg); } 70% { transform: translate3d(-24px, 70vh, 0) rotateX(320deg) rotateY(160deg) rotateZ(200deg); } 100% { transform: translate3d(18px, 106vh, 0) rotateX(480deg) rotateY(240deg) rotateZ(300deg); opacity: .9; } }

/* Bintang jatuh: garis cahaya melintas diagonal, sesekali */
.fx-meteor { height: 2px !important; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95) 70%, #fff); box-shadow: 0 0 6px rgba(255, 255, 255, .7); transform-origin: right center; animation: fx-meteor linear infinite; opacity: 0; }
@keyframes fx-meteor { 0% { transform: rotate(32deg) translate3d(0, 0, 0) scaleX(.2); opacity: 0; } 3% { opacity: 1; transform: rotate(32deg) translate3d(60px, 0, 0) scaleX(1); } 12% { opacity: 0; transform: rotate(32deg) translate3d(420px, 0, 0) scaleX(.6); } 100% { opacity: 0; transform: rotate(32deg) translate3d(420px, 0, 0); } }
[data-effect="meteors"] .fx-star { background: #fff; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)); }

/* Aurora: pita cahaya lembut yang bergeser perlahan */
.fx-aurora { border-radius: 50%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c) 75%, transparent) 0, transparent 68%); opacity: .38; transform-origin: center; animation: fx-aurora ease-in-out infinite alternate; }
@keyframes fx-aurora { 0% { transform: translate3d(-30px, 0, 0) scale(1, .7) rotate(-8deg); } 50% { transform: translate3d(30px, -30px, 0) scale(1.25, .9) rotate(6deg); } 100% { transform: translate3d(-10px, 30px, 0) scale(1, .75) rotate(-4deg); } }

/* Kembang api: pancaran titik warna-warni yang mekar lalu memudar */
.fx-firework { height: auto !important; aspect-ratio: 1; animation: fx-burst ease-out infinite; opacity: 0; }
.fx-firework i { position: absolute; left: 50%; top: 50%; width: 50%; height: 2px; margin-top: -1px; transform-origin: 0 50%; }
.fx-firework i::after { content: ''; position: absolute; right: 0; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.fx-firework i::before { content: ''; position: absolute; left: 30%; right: 6px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 70%, transparent)); }
@keyframes fx-burst { 0% { transform: scale(.05); opacity: 0; } 4% { opacity: 1; } 30% { transform: scale(1); opacity: 1; } 55% { transform: scale(1.08) translateY(12px); opacity: 0; } 100% { transform: scale(1.08); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .fx-dust, .fx-firefly, .fx-bokeh, .fx-sakura, .fx-lantern, .fx-butterfly, .fx-rosepetal, .fx-meteor, .fx-aurora, .fx-firework { display: none; } }

/* ================================================================ efek premium tambahan */
.fx-goldrain, .fx-rain, .fx-fallspin, .fx-feather, .fx-balloon, .fx-streamer, .fx-ring, .fx-goldheart, .fx-iridescent, .fx-dandelion, .fx-crane, .fx-mist, .fx-crescent, .fx-star8, .fx-goldconfetti, .fx-candle, .fx-diamond, .fx-note { position: absolute; display: block; pointer-events: none; will-change: transform, opacity; }
:is(.fx-fallspin, .fx-feather, .fx-balloon, .fx-streamer, .fx-ring, .fx-goldheart, .fx-crane, .fx-crescent, .fx-star8, .fx-note) svg { display: block; width: 100%; height: 100%; overflow: visible; }
:is(.fx-fallspin, .fx-feather, .fx-balloon, .fx-streamer, .fx-ring, .fx-crane, .fx-crescent, .fx-star8, .fx-note) { color: var(--c); }

/* Hujan emas & gerimis: garis tipis yang turun cepat */
.fx-goldrain { top: 0; border-radius: 2px; background: linear-gradient(180deg, transparent, #F3D58A 60%, #FFF3C4); box-shadow: 0 0 4px rgba(243, 213, 138, .6); animation: fx-rain linear infinite; opacity: .85; }
.fx-rain { top: 0; border-radius: 2px; background: linear-gradient(180deg, transparent, rgba(170, 190, 215, .95)); box-shadow: 0 0 2px rgba(60, 80, 110, .35); animation: fx-rain linear infinite; opacity: .75; transform: rotate(8deg); }
@keyframes fx-rain { 0% { transform: translate3d(0, -60px, 0) rotate(8deg); } 100% { transform: translate3d(-24px, 108vh, 0) rotate(8deg); } }

/* Jatuh berputar (daun maple, melati, kristal salju) */
.fx-fallspin { top: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .22)); animation: fx-fallspin linear infinite; }
@keyframes fx-fallspin { 0% { transform: translate3d(0, -50px, 0) rotate(0) rotateY(0); opacity: 0; } 6% { opacity: 1; } 30% { transform: translate3d(34px, 28vh, 0) rotate(110deg) rotateY(35deg); } 60% { transform: translate3d(-20px, 60vh, 0) rotate(220deg) rotateY(-30deg); } 100% { transform: translate3d(22px, 106vh, 0) rotate(360deg) rotateY(20deg); opacity: .9; } }
[data-effect="crystals"] .fx-fallspin { filter: drop-shadow(0 0 3px rgba(150, 190, 230, .9)); }
[data-effect="jasmine"] .fx-fallspin { filter: drop-shadow(0 0 1px rgba(110, 90, 50, .55)) drop-shadow(0 2px 4px rgba(110, 90, 50, .3)); }

/* Bulu: melayang pelan seperti bandul */
.fx-feather { top: 0; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .35)) drop-shadow(0 3px 4px rgba(0, 0, 0, .18)); animation: fx-feather ease-in-out infinite; }
@keyframes fx-feather { 0% { transform: translate3d(0, -50px, 0) rotate(-25deg); opacity: 0; } 8% { opacity: .95; } 25% { transform: translate3d(40px, 22vh, 0) rotate(25deg); } 50% { transform: translate3d(-10px, 50vh, 0) rotate(-20deg); } 75% { transform: translate3d(36px, 78vh, 0) rotate(22deg); } 100% { transform: translate3d(0, 106vh, 0) rotate(-15deg); opacity: .9; } }

/* Balon: naik sambil bergoyang */
.fx-balloon { bottom: -60px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .15)); animation: fx-balloon linear infinite; }
@keyframes fx-balloon { 0% { transform: translate3d(0, 0, 0) rotate(-4deg); opacity: 0; } 6% { opacity: 1; } 50% { transform: translate3d(22px, -58vh, 0) rotate(5deg); } 94% { opacity: 1; } 100% { transform: translate3d(-10px, -118vh, 0) rotate(-3deg); opacity: 0; } }

/* Pita serpentin: jatuh berputar */
.fx-streamer { top: 0; animation: fx-streamer linear infinite; }
@keyframes fx-streamer { 0% { transform: translate3d(0, -80px, 0) rotate(0) rotateY(0); } 50% { transform: translate3d(-20px, 50vh, 0) rotate(160deg) rotateY(180deg); } 100% { transform: translate3d(14px, 108vh, 0) rotate(320deg) rotateY(360deg); } }

/* Cincin emas: naik sambil berputar tiga dimensi */
.fx-ring { bottom: -40px; filter: drop-shadow(0 0 6px rgba(233, 200, 115, .6)); animation: fx-ring linear infinite; }
@keyframes fx-ring { 0% { transform: translate3d(0, 0, 0) rotateY(0); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate3d(20px, -55vh, 0) rotateY(360deg); } 92% { opacity: .9; } 100% { transform: translate3d(-8px, -112vh, 0) rotateY(720deg); opacity: 0; } }

/* Hati emas: naik dengan kilau */
.fx-goldheart { bottom: -30px; color: #E2BF6E; filter: drop-shadow(0 0 5px rgba(226, 191, 110, .75)); animation: fx-rise ease-in infinite; }
.fx-goldheart svg { width: 100%; height: 100%; display: block; }

/* Gelembung pelangi */
.fx-iridescent { bottom: -40px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .9) 0 8%, transparent 20%), conic-gradient(from 0deg, rgba(255, 120, 180, .35), rgba(120, 200, 255, .35), rgba(160, 255, 190, .35), rgba(255, 230, 120, .35), rgba(255, 120, 180, .35)); -webkit-mask: radial-gradient(circle, transparent 52%, #000 56%); mask: radial-gradient(circle, transparent 52%, #000 56%); animation: fx-rise linear infinite, fx-hue 6s linear infinite; }
@keyframes fx-hue { to { filter: hue-rotate(360deg); } }

/* Dandelion: biji berbulu melayang tertiup angin */
.fx-dandelion { border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 10%, transparent 12%), repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .85) 0 3deg, transparent 3deg 22deg); -webkit-mask: radial-gradient(circle, #000 60%, transparent 66%); mask: radial-gradient(circle, #000 60%, transparent 66%); filter: drop-shadow(0 0 1px rgba(0, 0, 0, .55)) drop-shadow(0 0 3px rgba(0, 0, 0, .2)); animation: fx-dandelion ease-in-out infinite; }
@keyframes fx-dandelion { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; } 10% { opacity: .95; } 50% { transform: translate3d(60px, -40px, 0) rotate(120deg); } 90% { opacity: .85; } 100% { transform: translate3d(130px, -10px, 0) rotate(260deg); opacity: 0; } }

/* Burung bangau kertas: terbang melintas */
.fx-crane { left: -60px !important; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .18)); animation: fx-crane linear infinite; }
@keyframes fx-crane { 0% { transform: translate3d(0, 0, 0) rotate(-6deg); } 25% { transform: translate3d(30vw, -20px, 0) rotate(4deg); } 50% { transform: translate3d(60vw, 10px, 0) rotate(-5deg); } 75% { transform: translate3d(90vw, -16px, 0) rotate(4deg); } 100% { transform: translate3d(125vw, 0, 0) rotate(-4deg); } }

/* Kabut: lapisan kabut tipis yang bergeser */
.fx-mist { height: auto !important; aspect-ratio: 3 / 1; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--surface) 85%, transparent) 0, transparent 70%); opacity: .55; animation: fx-mist ease-in-out infinite alternate; }
@keyframes fx-mist { 0% { transform: translate3d(-40px, 0, 0) scale(1); } 100% { transform: translate3d(60px, -20px, 0) scale(1.15); } }

/* Bulan sabit: melayang naik turun dan berkelip */
.fx-crescent { filter: drop-shadow(0 0 6px rgba(242, 213, 138, .6)); animation: fx-bob ease-in-out infinite, fx-glow 4s ease-in-out infinite; }
@keyframes fx-bob { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); } 50% { transform: translate3d(0, -18px, 0) rotate(6deg); } }

/* Bintang islami delapan sudut: turun pelan sambil berputar */
.fx-star8 { top: 0; filter: drop-shadow(0 0 4px rgba(201, 160, 78, .5)); animation: fx-star8 linear infinite; }
@keyframes fx-star8 { 0% { transform: translate3d(0, -40px, 0) rotate(0); opacity: 0; } 8% { opacity: .9; } 50% { transform: translate3d(20px, 50vh, 0) rotate(180deg); } 100% { transform: translate3d(-10px, 106vh, 0) rotate(360deg); opacity: .8; } }

/* Konfeti emas & perak: serpihan logam berkilau */
.fx-goldconfetti { top: 0; border-radius: 1px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 50%, color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 0 4px color-mix(in srgb, var(--c) 60%, transparent); animation: fx-confetti linear infinite; }

/* Cahaya lilin: titik hangat yang berkedip */
.fx-candle { border-radius: 50%; background: radial-gradient(circle, #FFF2C2 0 18%, rgba(255, 186, 90, .75) 40%, transparent 70%); animation: fx-flicker ease-in-out infinite; }
@keyframes fx-flicker { 0%, 100% { opacity: .55; transform: scale(1); } 20% { opacity: .9; transform: scale(1.12); } 35% { opacity: .65; transform: scale(.95); } 60% { opacity: 1; transform: scale(1.08); } 80% { opacity: .7; transform: scale(1); } }

/* Kilau berlian: kilatan bintang empat sudut */
.fx-diamond { background: linear-gradient(135deg, #FFFFFF, #CFE8FF 50%, #FFFFFF); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); filter: drop-shadow(0 0 4px rgba(200, 230, 255, .9)); animation: fx-glint ease-in-out infinite; }
@keyframes fx-glint { 0%, 45%, 100% { transform: scale(0) rotate(0); opacity: 0; } 65% { transform: scale(1) rotate(45deg); opacity: 1; } 85% { transform: scale(.35) rotate(90deg); opacity: .6; } }

/* Not musik: naik sambil bergoyang */
.fx-note { bottom: -40px; opacity: .8; animation: fx-rise ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) { .fx-goldrain, .fx-rain, .fx-fallspin, .fx-feather, .fx-balloon, .fx-streamer, .fx-ring, .fx-goldheart, .fx-iridescent, .fx-dandelion, .fx-crane, .fx-mist, .fx-crescent, .fx-star8, .fx-goldconfetti, .fx-candle, .fx-diamond, .fx-note { display: none; } }

/* ================================================================ token gaya tema koleksi */
/* ornamen sudut berbentuk bingkai diletakkan di dalam layar; lambang tradisional lebih kecil */
[data-orn-inset="1"] .orn { width: 170px; }
[data-orn-inset="1"] .orn-top { top: 14px; left: 14px; }
[data-orn-inset="1"] .orn-bottom { bottom: 14px; right: 14px; }
.flourish-emblem { width: 76px; }
[data-orn="siger"] .flourish-emblem, [data-orn="gonjong"] .flourish-emblem { width: 130px; }
[data-orn="merpati"] .flourish-emblem, [data-orn="padma"] .flourish-emblem { width: 110px; }

/* ---------- bingkai sampul */
[data-frame] .cover-frame { display: block; position: absolute; pointer-events: none; z-index: 0; }
[data-frame="double"] .cover-frame { inset: 16px; border: 1px solid var(--orn); box-shadow: inset 0 0 0 6px var(--cover), inset 0 0 0 7px color-mix(in srgb, var(--orn) 55%, transparent); }
[data-frame="double"] .cover-frame::before, [data-frame="double"] .cover-frame::after { content: ''; position: absolute; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: var(--orn); transform: rotate(45deg); }
[data-frame="double"] .cover-frame::before { top: -6px; } [data-frame="double"] .cover-frame::after { bottom: -6px; }
[data-frame="arch"] .cover-frame { inset: 24px 28px; border: 1px solid var(--orn); border-radius: 300px 300px 8px 8px / 230px 230px 8px 8px; outline: 1px solid color-mix(in srgb, var(--orn) 45%, transparent); outline-offset: -9px; }
[data-frame="arch"] .cover.has-frame .cover-frame { display: none; }
[data-frame="deco"] .cover-frame { inset: 18px; border: 1px solid var(--orn); }
[data-frame="deco"] .cover-frame::before { content: ''; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--orn) 45%, transparent);
  clip-path: polygon(0 24px, 24px 24px, 24px 0, calc(100% - 24px) 0, calc(100% - 24px) 24px, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 24px calc(100% - 24px), 0 calc(100% - 24px)); }
[data-frame="deco"] .cover-frame::after { content: ''; position: absolute; left: 50%; top: -1px; width: 110px; height: 55px; margin-left: -55px; border: 1px solid var(--orn); border-top: 0; border-radius: 0 0 110px 110px; background: repeating-conic-gradient(from 90deg at 50% 0, color-mix(in srgb, var(--orn) 35%, transparent) 0 4deg, transparent 4deg 18deg); }
[data-frame="rounded"] .cover-frame { inset: 14px; border-radius: 28px; border: 1.5px solid color-mix(in srgb, var(--orn) 60%, transparent); }
[data-frame="corners"] .cover-frame { inset: 18px; --c: var(--orn);
  background: linear-gradient(var(--c), var(--c)) top left / 46px 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px 46px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 46px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px 46px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 46px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px 46px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 46px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 46px no-repeat; }

/* ---------- pola latar (halaman pembuka, panel samping, sampul) */
[data-pattern] .hero::before, [data-pattern] .side-panel::before, [data-pattern] .cover::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .14; }
[data-pattern] .hero-inner, [data-pattern] .side-panel > :not(.dust) { position: relative; }
.photo-layout[data-pattern] .cover::before, .photo-layout[data-pattern] .hero::before { content: none; }
[data-pattern="kawung"] :is(.hero, .side-panel, .cover)::before { background: radial-gradient(circle at 0 50%, transparent 11px, var(--orn) 12px, transparent 13px) 0 0 / 26px 26px, radial-gradient(circle at 50% 0, transparent 11px, var(--orn) 12px, transparent 13px) 0 0 / 26px 26px; opacity: .22; }
[data-pattern="dots"] :is(.hero, .side-panel, .cover)::before { background: radial-gradient(var(--orn) 2px, transparent 2.5px) 0 0 / 26px 26px; opacity: .3; }
[data-pattern="grid"] :is(.hero, .side-panel, .cover)::before { background: linear-gradient(var(--orn) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, var(--orn) 1px, transparent 1px) 0 0 / 30px 30px; opacity: .12; }
[data-pattern="islamic"] :is(.hero, .side-panel, .cover)::before { background: conic-gradient(from 45deg at 50% 50%, var(--orn) 0 25%, transparent 0 50%, var(--orn) 0 75%, transparent 0) 0 0 / 34px 34px; -webkit-mask: radial-gradient(circle, #000 1.6px, transparent 2px) 0 0 / 17px 17px; mask: radial-gradient(circle, #000 1.6px, transparent 2px) 0 0 / 17px 17px; opacity: .6; }
[data-pattern="damask"] :is(.hero, .side-panel, .cover)::before { background: radial-gradient(circle at 50% 50%, transparent 9px, var(--orn) 10px, transparent 11px) 0 0 / 44px 44px, radial-gradient(circle at 0 0, var(--orn) 2px, transparent 3px) 0 0 / 22px 22px; opacity: .1; }
[data-pattern="fan"] :is(.hero, .side-panel, .cover)::before { background: repeating-radial-gradient(circle at 50% 100%, transparent 0 13px, var(--orn) 13px 14px) 0 0 / 56px 28px; opacity: .13; }
[data-pattern="marble"] :is(.hero, .side-panel, .cover)::before { background: linear-gradient(118deg, transparent 38%, rgba(120, 110, 100, .35) 39.5%, transparent 42%), linear-gradient(158deg, transparent 58%, rgba(120, 110, 100, .3) 59.5%, transparent 62.5%), linear-gradient(32deg, transparent 18%, rgba(120, 110, 100, .28) 19.5%, transparent 22%); opacity: .3; }
[data-pattern="parang"] :is(.hero, .side-panel, .cover)::before { background: repeating-linear-gradient(45deg, transparent 0 14px, var(--orn) 14px 16px, transparent 16px 22px, var(--orn) 22px 23px, transparent 23px 34px), radial-gradient(circle, var(--orn) 2px, transparent 2.5px) 0 0 / 24px 24px; opacity: .14; }
[data-pattern="songket"] :is(.hero, .side-panel, .cover)::before { background: repeating-linear-gradient(45deg, var(--orn) 0 1px, transparent 1px 18px), repeating-linear-gradient(-45deg, var(--orn) 0 1px, transparent 1px 18px), radial-gradient(circle, var(--orn) 2.5px, transparent 3px) 0 0 / 25.4px 25.4px; opacity: .22; }
[data-pattern="mega"] :is(.hero, .side-panel, .cover)::before { background: radial-gradient(circle at 50% 100%, transparent 12px, var(--orn) 13px 14px, transparent 15px 20px, var(--orn) 21px 22px, transparent 23px) 0 0 / 64px 32px, radial-gradient(circle at 50% 100%, transparent 12px, var(--orn) 13px 14px, transparent 15px 20px, var(--orn) 21px 22px, transparent 23px) 32px 16px / 64px 32px; opacity: .18; }
[data-pattern="gorga"] :is(.hero, .side-panel, .cover)::before { background: linear-gradient(135deg, var(--accent) 25%, transparent 25%) -12px 0 / 24px 24px, linear-gradient(225deg, var(--accent) 25%, transparent 25%) -12px 0 / 24px 24px, linear-gradient(315deg, var(--orn) 25%, transparent 25%) 0 0 / 24px 24px, linear-gradient(45deg, var(--orn) 25%, transparent 25%) 0 0 / 24px 24px; opacity: .12; }
[data-pattern="confetti"] :is(.hero, .side-panel, .cover)::before { background: radial-gradient(var(--accent) 3px, transparent 3.5px) 0 0 / 46px 46px, radial-gradient(var(--orn) 3px, transparent 3.5px) 23px 15px / 46px 46px, radial-gradient(var(--petal) 3px, transparent 3.5px) 11px 32px / 46px 46px; opacity: .3; }
[data-pattern="waves"] :is(.hero, .side-panel, .cover)::before { background: radial-gradient(circle at 50% 0, transparent 14px, var(--orn) 15px 16px, transparent 17px) 0 0 / 40px 22px; opacity: .2; }
[data-pattern="stripes"] :is(.hero, .side-panel, .cover)::before { background: repeating-linear-gradient(90deg, var(--accent) 0 22px, transparent 22px 44px); opacity: .06; }
[data-pattern="plus"] :is(.hero, .side-panel, .cover)::before { background: var(--orn); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 8v12M8 14h12' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 28px 28px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 8v12M8 14h12' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 28px 28px; opacity: .35; }
[data-pattern="stars"] :is(.hero, .side-panel, .cover)::before { background: radial-gradient(1.5px 1.5px at 20% 30%, var(--orn), transparent), radial-gradient(1px 1px at 70% 10%, var(--orn), transparent), radial-gradient(2px 2px at 40% 70%, var(--orn), transparent), radial-gradient(1px 1px at 85% 60%, var(--orn), transparent), radial-gradient(1.5px 1.5px at 10% 85%, var(--orn), transparent); background-size: 140px 140px; opacity: .6; }
[data-pattern="rays"] :is(.hero, .side-panel, .cover)::before { background: repeating-conic-gradient(from 180deg at 50% 0, color-mix(in srgb, var(--orn) 60%, transparent) 0 3deg, transparent 3deg 12deg); -webkit-mask: linear-gradient(#000, transparent 75%); mask: linear-gradient(#000, transparent 75%); opacity: .35; }
[data-pattern="zellige"] :is(.hero, .side-panel, .cover)::before { background: conic-gradient(from 45deg, var(--accent) 0 25%, transparent 0 50%, var(--orn) 0 75%, transparent 0) 0 0 / 28px 28px; -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); opacity: .1; }

/* ---------- teks berkilau pada nama */
[data-foil] :is(.cover-title, .hero-title .word, .side-title, .signature) { background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s ease-in-out infinite; }
[data-foil="gold"] :is(.cover-title, .hero-title .word, .side-title, .signature) { background-image: linear-gradient(100deg, #8E6B2C 0%, #E9C978 22%, #B48A3C 40%, #F8E3A3 58%, #A47E37 78%, #E2BF6E 100%); }
[data-foil="champagne"] :is(.cover-title, .hero-title .word, .side-title, .signature) { background-image: linear-gradient(100deg, #7E6438 0%, #C9A86A 25%, #8F7240 45%, #DCC08A 62%, #8A6D3E 80%, #B8975F 100%); }
[data-foil="silver"] :is(.cover-title, .hero-title .word, .side-title, .signature) { background-image: linear-gradient(100deg, #8A93A3 0%, #F2F5FA 22%, #A3ABBA 40%, #FFFFFF 58%, #8E97A6 78%, #DDE3EC 100%); }
[data-foil="rose"] :is(.cover-title, .hero-title .word, .side-title, .signature) { background-image: linear-gradient(100deg, #A9635F 0%, #F1B9A8 24%, #B7756A 44%, #F7D3C6 62%, #A86A61 80%, #E3A797 100%); }
[data-foil="gold"] :is(.btn-accent, .btn-open) { background: linear-gradient(135deg, #B48A3C, #EBCB7E 50%, #A47E37); color: #1A0F08; }
[data-foil="champagne"] :is(.btn-accent, .btn-open) { background: linear-gradient(135deg, #A58A57, #E5CF9F 50%, #9A7F4E); color: #1D1A15; }
[data-foil="silver"] :is(.btn-accent, .btn-open) { background: linear-gradient(135deg, #9AA3B2, #F1F4F9 50%, #8D96A5); color: #18202C; }
[data-foil="rose"] :is(.btn-accent, .btn-open) { background: linear-gradient(135deg, #B7756A, #F4C6B8 50%, #A9635F); color: #3A1F1C; }

/* ---------- gaya kartu */
[data-cards="glass"] .card { background: color-mix(in srgb, var(--surface) 78%, transparent); border: 1px solid color-mix(in srgb, var(--orn) 40%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
[data-cards="sharp"] .card, [data-cards="sharp"] .band, [data-cards="sharp"] .countdown span { border-radius: 4px; }
[data-cards="sharp"] .btn { border-radius: 6px; }
[data-cards="double"] .card { border: 1px solid color-mix(in srgb, var(--orn) 50%, transparent); box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px color-mix(in srgb, var(--orn) 25%, transparent); }
[data-cards="double"] .band { border: 1px solid color-mix(in srgb, var(--orn) 35%, transparent); }
[data-cards="round"] .card { border-radius: 28px; box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 12%, transparent); }
[data-cards="round"] .band { border-radius: 32px; }

/* ---------- bentuk foto mempelai/tokoh */
[data-photo="arch"] .host-photo { border-radius: 999px 999px 10px 10px; border: 1px solid var(--orn); box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px color-mix(in srgb, var(--orn) 50%, transparent); }
[data-photo="circle"] .host-photo { border-radius: 50%; width: 180px; height: 180px; border: 6px solid var(--surface); box-shadow: 0 0 0 2px var(--orn), 0 16px 36px color-mix(in srgb, var(--accent) 18%, transparent); }
[data-photo="offset"] .host-photo { border-radius: 4px; border: 1px solid var(--orn); box-shadow: 9px 9px 0 -1px var(--bg), 9px 9px 0 0 var(--orn); }
[data-photo="rounded"] .host-photo { border-radius: 26px; }

/* ---------- huruf judul kapital */
[data-title="upper"] :is(.cover-title, .hero-title, .side-title) { text-transform: uppercase; letter-spacing: 4px; }
[data-title="upper"] .kicker { letter-spacing: 7px; }
/* lambang tradisional/keagamaan di halaman pembuka */
.hero-emblem { display: block; margin: 0 auto 14px; color: var(--orn); }
.hero-emblem .flourish { margin: 0 auto; display: block; }
/* teks berkilau lebih pekat di latar terang supaya tetap terbaca */
[data-tone="light"][data-foil="gold"] :is(.cover-title, .hero-title .word, .side-title, .signature) { background-image: linear-gradient(100deg, #6E4F17 0%, #B8913E 24%, #7A5A1E 44%, #C9A24E 62%, #6E4F17 80%, #A8822F 100%); }
[data-tone="light"][data-foil="champagne"] :is(.cover-title, .hero-title .word, .side-title, .signature) { background-image: linear-gradient(100deg, #6A5230 0%, #A88A55 25%, #735A33 45%, #B99A62 62%, #6A5230 80%, #967A4A 100%); }
[data-tone="light"][data-foil="silver"] :is(.cover-title, .hero-title .word, .side-title, .signature) { background-image: linear-gradient(100deg, #3E4A5C 0%, #7E8DA3 24%, #4A576A 44%, #95A3B8 62%, #3E4A5C 80%, #6E7C91 100%); }
[data-tone="light"][data-foil="rose"] :is(.cover-title, .hero-title .word, .side-title, .signature) { background-image: linear-gradient(100deg, #8A4A45 0%, #C98476 24%, #96564D 44%, #D89A8B 62%, #8A4A45 80%, #B9776A 100%); }
/* buket bunga kamboja & teratai sedikit masuk ke layar */
:is([data-orn="padma"], [data-orn="kamboja"]) .orn { width: 230px; opacity: 1; }
:is([data-orn="padma"], [data-orn="kamboja"]) .orn-top { top: -16px; left: -16px; }
:is([data-orn="padma"], [data-orn="kamboja"]) .orn-bottom { bottom: -16px; right: -16px; }

:is([data-orn="balloon"], [data-orn="stars"]) .orn { width: 200px; opacity: 1; }
:is([data-orn="balloon"], [data-orn="stars"]) .orn-top { top: -6px; left: -6px; }
:is([data-orn="balloon"], [data-orn="stars"]) .orn-bottom { bottom: -6px; right: -6px; }
[data-orn="balloon"] .orn-bottom svg { transform: scaleX(-1); }

/* ---------------------------------------------------------------- kado impian */
.wishlist { margin-top: 16px; text-align: center; }
.wish-items { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.wish-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--alt); border: 1px solid var(--line); }
.wish-item-main { display: flex; flex-direction: column; gap: 2px; }
.wish-item-main strong { font-size: 16px; }
.wish-price { color: var(--accent); font-weight: 700; font-size: 14px; }
.wish-item-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wish-item.is-claimed { opacity: .75; }
.wish-item.is-claimed .wish-item-main strong { text-decoration: line-through; text-decoration-color: var(--orn); }
.gift-taken { font-size: 13px; font-weight: 700; color: var(--accent); }
.claim-form { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.claim-form .input { flex: 1 1 160px; min-height: 40px; padding: 8px 12px; }
.private-note { margin: -8px 0 14px; padding: 8px 12px; border-radius: 10px; background: var(--alt); }

/* ---------------------------------------------------------------- layar sapa: latar, orientasi, kiosk */
body.welcome { position: relative; }
body.welcome.bg-black { --bg: #000; --surface: #111; --ink: #F5F0E6; --muted: #B9B3A7; --label: #D4B062; --line: #2A2A2A; background: #000; }
body.welcome.bg-navy { --bg: #0E1B33; --surface: #142645; --ink: #F3EEE2; --muted: #BBC3D3; --label: #D4B062; --line: #24365A; background: #0E1B33; }
body.welcome.bg-accent { background: var(--accent); --ink: var(--on-accent); --label: var(--on-accent); }
body.welcome.bg-accent .welcome-stage .kicker, body.welcome.bg-accent .welcome-title, body.welcome.bg-accent .welcome-count { color: var(--on-accent); }
body.welcome.bg-light { --bg: #F4F4F6; --surface: #FFFFFF; --ink: #1E1E24; --muted: #66666F; --line: #E2E2E8; background: #F4F4F6; }
.welcome-photos { position: fixed; inset: 0; z-index: 0; }
.welcome-photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease; }
.welcome-photo.is-on { opacity: 1; }
.welcome-photos::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55)); }
body.welcome.bg-photo .welcome-stage { position: relative; z-index: 1; color: #fff; }
body.welcome.bg-photo .welcome-stage .kicker, body.welcome.bg-photo .welcome-title, body.welcome.bg-photo .welcome-count { color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .4); }
body.welcome.bg-photo .welcome-card { background: rgba(255, 255, 255, .92); }
.welcome-card.is-vip { box-shadow: 0 0 0 3px var(--orn), 0 30px 60px rgba(0, 0, 0, .18); }
body.welcome.is-portrait .welcome-stage { padding: 8vh 6vw; }
body.welcome.is-portrait .welcome-title { font-size: clamp(36px, 9vw, 120px); }
body.welcome.is-portrait .welcome-guest { font-size: clamp(32px, 8vw, 110px); }
body.welcome.is-portrait .welcome-card { padding: 5vh 6vw; }
.kiosk { position: fixed; right: 24px; bottom: 24px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.kiosk-btn { min-height: 56px; padding: 14px 24px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: clamp(15px, 1.4vw, 20px); font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }
.kiosk-panel { width: min(420px, calc(100vw - 48px)); padding: 18px; border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 12px; }
.kiosk-video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: #000; }
.kiosk-note { margin: 0; text-align: center; font-weight: 600; }
.kiosk-walkin { display: flex; flex-direction: column; gap: 8px; }
.kiosk-close { align-self: center; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }
/* tombol kiosk di tengah bawah, tidak menempel dengan teks jumlah tamu */
.kiosk { left: 50%; right: auto; bottom: 28px; transform: translateX(-50%); align-items: center; }
body.welcome:has(.kiosk) .welcome-stage { padding-bottom: calc(5vh + 96px); }
body.welcome:has(.kiosk) .welcome-count { margin-bottom: 0; }
.kiosk-btn { white-space: nowrap; }
.kiosk-panel { order: -1; }
/* kiosk di dalam alur halaman: tombol di bawah jumlah tamu, jendela pemindai melayang di tengah */
.kiosk { position: static; transform: none; margin-top: 2vh; display: flex; flex-direction: column; align-items: center; }
body.welcome:has(.kiosk) .welcome-stage { padding-bottom: 4vh; }
.kiosk-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55), 0 24px 60px rgba(0, 0, 0, .35); }
body.welcome.is-landscape .welcome-stage { gap: 1.2vh; }
body.welcome.is-landscape .welcome-title { margin-bottom: 2vh; }
body.welcome.is-landscape .welcome-card { padding: 4vh 5vw; }

/* ---------------------------------------------------------------- galeri: tampilan besar yang bisa digeser */
.lb-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.lb-track::-webkit-scrollbar { display: none; }
.lb-track.is-zoomed { scroll-snap-type: none; overflow-x: hidden; }
.lb-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: 56px 16px; box-sizing: border-box; overflow: hidden; }
.lb-slide img { max-width: 100%; max-height: 100%; border-radius: 10px; object-fit: contain; user-select: none; -webkit-user-drag: none; cursor: zoom-in; animation: lb-in .25s ease; }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } }
.lb-slide.is-zoom { overflow: auto; display: block; padding: 0; }
.lb-slide.is-zoom img { max-width: none; max-height: none; width: 200%; height: auto; border-radius: 0; cursor: zoom-out; animation: none; }
.lb-close { position: absolute; top: 14px; right: 14px; z-index: 3; }
.lb-nav { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.45); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 4px; }
.lb-nav[hidden] { display: none; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-count { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; margin: 0; text-align: center; color: rgba(255,255,255,.85); font-size: 14px; letter-spacing: .08em; pointer-events: none; }
@media (hover: none) { .lb-nav { display: none; } }

/* ---------------------------------------------------------------- peta lokasi tertanam */
.map-embed { margin-top: 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--alt); aspect-ratio: 16 / 10; }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------- stiker ucapan */
.sticker { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px 6px 8px; border-radius: 14px; background: var(--st-bg, #fff3d6); color: var(--st-fg, #7a5a12); font-weight: 800; font-size: 14px; line-height: 1.1; transform: rotate(-2.5deg); box-shadow: 0 3px 0 rgba(0,0,0,.08), 0 6px 14px rgba(0,0,0,.08); border: 2px solid #fff; }
.sticker i { font-style: normal; font-size: 22px; line-height: 1; }
.wish .sticker { margin-top: 10px; }
.sticker-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.sticker-pick { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: thin; }
.st-opt { position: relative; flex: none; cursor: pointer; }
.st-opt input { position: absolute; opacity: 0; pointer-events: none; }
.st-opt .sticker { margin: 0; transform: none; opacity: .72; transition: transform .15s, opacity .15s, box-shadow .15s; }
.st-opt input:checked + .sticker { opacity: 1; transform: rotate(-3deg) scale(1.06); box-shadow: 0 0 0 3px var(--accent), 0 6px 14px rgba(0,0,0,.12); }
.st-opt input:focus-visible + * { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-none { display: inline-flex; align-items: center; height: 100%; min-height: 38px; padding: 0 12px; border-radius: 14px; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; background: var(--surface); }
.st-opt input:checked + .st-none { border-style: solid; border-color: var(--accent); color: var(--ink); }
.wish-reply { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--alt); }
.wish-reply p { margin: 0; font-size: 14px; }
.wish-reply .tiny { color: var(--muted); margin-bottom: 2px; }
.wish-warn { margin: 0; padding: 8px 12px; border-radius: 10px; background: #FDECEC; color: #A42B2B; font-size: 13px; font-weight: 600; }
.input.is-bad { border-color: #D64545 !important; box-shadow: 0 0 0 3px rgba(214, 69, 69, .15); }

/* ---------------------------------------------------------------- photobooth */
.booth-card { padding: 26px 20px; display: grid; justify-items: center; gap: 8px; }
.booth-ic { font-size: 40px; line-height: 1; }
.booth-title { margin: 0; font-size: 26px; }
.booth-card .muted { margin: 0 0 6px; max-width: 320px; }
.booth { position: fixed; inset: 0; z-index: 70; background: #0b0b0d; color: #fff; display: flex; flex-direction: column; }
.booth[hidden] { display: none; }
.booth-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.booth-name { margin: 0; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; opacity: .8; }
.booth-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.booth-stage { position: relative; flex: 1; min-height: 0; margin: 0 auto; aspect-ratio: 4 / 5; max-width: 100%; max-height: calc(100% - 4px); width: auto; height: 100%; background: #111; overflow: hidden; border-radius: 12px; }
.booth-stage video { position: absolute; object-fit: cover; }
.booth-stage video.is-mirror { transform: scaleX(-1); }
.booth-overlay, .booth-result { position: absolute; inset: 0; width: 100%; height: 100%; }
.booth-result { object-fit: cover; z-index: 2; }
.booth-count { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font-size: 120px; font-weight: 800; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.6); animation: booth-pop .8s ease infinite; }
@keyframes booth-pop { from { transform: scale(1.3); opacity: .4; } 30% { transform: scale(1); opacity: 1; } }
.booth-flash { position: absolute; inset: 0; z-index: 4; background: #fff; animation: booth-flash .26s ease-out forwards; }
@keyframes booth-flash { to { opacity: 0; } }
.booth-msg { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 5; margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.75); font-size: 14px; line-height: 1.45; text-align: center; }
.booth-live, .booth-after { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
.booth-live[hidden], .booth-after[hidden] { display: none; }
.booth-frames { display: flex; justify-content: center; gap: 8px; }
.booth-frames button { border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.booth-frames button.is-on { background: #fff; color: #111; }
.booth-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; }
.booth-side { display: grid; justify-items: center; gap: 2px; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.booth-side span { font-size: 22px; }
.booth-side small { font-size: 11px; opacity: .8; }
.booth-snap { width: 74px; height: 74px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 5px; cursor: pointer; }
.booth-snap i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .1s; }
.booth-snap:active i { transform: scale(.88); }
.booth-who { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.booth-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.booth-btns .btn-line { color: #fff; border-color: rgba(255,255,255,.4); }

/* ---------------------------------------------------------------- love story / linimasa (semua tema) */
.story { list-style: none; margin: 18px 0 0; padding: 0; position: relative; display: grid; gap: 22px; }
.story::before { content: ''; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--orn), var(--accent)); opacity: .55; }
.story-item { position: relative; padding-left: 54px; }
.story-node { position: absolute; left: 0; top: 10px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--orn); color: var(--accent); font-family: var(--display); font-weight: 700; font-size: 16px; box-shadow: 0 0 0 5px var(--bg), 0 6px 16px rgba(0,0,0,.08); }
.story-node svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.story-item:nth-child(even) .story-node { color: var(--orn); }
.story-item.is-last .story-node { background: var(--accent); border-color: var(--accent); color: var(--on-accent); animation: story-beat 1.8s ease-in-out infinite; }
@keyframes story-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(1); } 42% { transform: scale(1.08); } }
.story-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.07); transition: transform .3s ease, box-shadow .3s ease; }
.story-card::before { content: ''; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.story-item.has-photo .story-card::before { display: none; }
@media (hover: hover) { .story-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.12); } }
.story-photo { margin: 0; position: relative; }
.story-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story-photo::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(0,0,0,.18)); pointer-events: none; }
.story-body { padding: 14px 18px 18px; }
.story-meta { display: flex; align-items: center; gap: 10px; margin: 0; }
.story-no { font-family: var(--display); font-style: var(--italic); font-size: 30px; line-height: 1; color: var(--orn); opacity: .9; }
.story-year { padding: 4px 10px; border-radius: 999px; background: var(--alt); color: var(--label); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.story-title { margin: 8px 0 4px; font-size: 23px; line-height: 1.2; color: var(--ink); }
.story-text { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.story-end { margin: 22px 0 0; text-align: center; font-style: var(--italic); font-size: 20px; color: var(--label); }
.story-end::before { content: '♥'; display: block; font-style: normal; font-size: 14px; color: var(--accent); margin-bottom: 4px; }
.story-item.reveal { transition-delay: .05s; }
.story-kegiatan .story::before { background: var(--line); opacity: 1; }
.story-kegiatan .story-item.is-last .story-node { animation: none; }

/* ---------------------------------------------------------------- Voice of Us */
.voice-chip { --p: 0%; position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 14px auto 0; padding: 7px 16px 7px 7px; border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, var(--surface)) var(--p), var(--surface) var(--p)); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.07); transition: transform .15s; }
.voice-chip:active { transform: scale(.97); }
.voice-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); flex: none; }
.voice-ic svg { fill: currentColor; }
.voice-ic .vi-pause, .voice-chip.is-playing .vi-play { display: none; }
.voice-chip.is-playing .vi-pause { display: inline; }
.voice-bars { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.voice-bars i { width: 3px; height: 6px; border-radius: 2px; background: var(--orn); }
.voice-chip.is-playing .voice-bars i { animation: voice-bar .9s ease-in-out infinite; }
.voice-chip.is-playing .voice-bars i:nth-child(2) { animation-delay: .15s; }
.voice-chip.is-playing .voice-bars i:nth-child(3) { animation-delay: .3s; }
.voice-chip.is-playing .voice-bars i:nth-child(4) { animation-delay: .45s; }
@keyframes voice-bar { 50% { height: 16px; } }
.voice-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 28px; }
.voice-time:empty { display: none; }
.host .voice-chip { margin-top: 10px; font-size: 13px; }
.story-sec .voice-chip { display: flex; width: fit-content; }
.closing .voice-chip { margin-bottom: 8px; }

/* sesi kedatangan tamu */
.session-card { margin: 0 0 16px; padding: 18px 16px; border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.session-card .label { margin: 0; }
.session-name { margin: 4px 0 0; font-size: 28px; }
.session-time { margin: 2px 0 6px; font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: .03em; }
.session-card .muted { margin: 0; }

/* label untuk pemilik: acara khusus grup tertentu */
.sched-only { display: inline-block; margin: 0 0 6px; padding: 3px 10px; border-radius: 999px; background: var(--alt); color: var(--label); font-size: 12px; font-weight: 700; }


/* Angka tegak di huruf dekoratif: nomor rekening, hitung mundur, kode masuk tidak boleh salah baca */
.display, .gift-no, [data-cd], .story-no, .entry-code, .session-time { font-variant-numeric: lining-nums; }

/* Sapaan suara di layar sapa */
.welcome-sound { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 20; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; font-size: clamp(14px, 1.3vw, 18px); cursor: pointer; box-shadow: 0 10px 26px rgba(0, 0, 0, .3); animation: welcome-sound-pulse 2s ease-in-out infinite; max-width: calc(100vw - 32px); }
.welcome-sound.is-on { animation: none; opacity: .85; }
@keyframes welcome-sound-pulse { 50% { box-shadow: 0 10px 26px rgba(0, 0, 0, .3), 0 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent); } }

/* Penanda kolom Wajib / Opsional di form RSVP */
.field-tag { display: inline-block; margin-left: 4px; font-size: 11px; line-height: 1.5; vertical-align: 1px; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.field-tag.is-req { padding: 0 7px; border-radius: 999px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.field-tag.is-opt { font-weight: 500; color: var(--muted); }

/* ---- Penanda antarbagian (style.divider) ---- */
/* Sobekan kertas: tiap bagian jadi lembaran kertas bertepi sobek di atas latar kraft. */
[data-divider="torn"] .inv-main {
  background:
    repeating-linear-gradient(115deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(25deg, color-mix(in srgb, #fff 10%, transparent) 0 1px, transparent 1px 13px),
    var(--bg);
}
[data-divider="torn"] :is(.section, .closing) { position: relative; margin: 66px 10px 0; padding-left: 20px; padding-right: 20px; background: var(--paper); box-shadow: 0 2px 6px rgba(60, 40, 20, .12); }
[data-divider="torn"] .band { margin-top: 46px; }
[data-divider="torn"] :is(.section, .closing)::before,
[data-divider="torn"] :is(.section, .closing)::after {
  content: ''; position: absolute; left: 0; right: 0; height: 22px; background: var(--paper); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath d='M0 22V9L9 2L14 9L18 5L23 4L30 13L34 5L38 13L42 2L50 4L58 5L63 5L72 1L76 10L86 12L95 3L102 13L113 14L121 5L131 15L137 4L142 13L151 11L162 1L170 4L174 14L185 14L194 12L200 9L204 15L210 10L220 4L231 13L236 15L240 9V22z'/%3E%3C/svg%3E") 0 0 / 240px 22px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath d='M0 22V9L9 2L14 9L18 5L23 4L30 13L34 5L38 13L42 2L50 4L58 5L63 5L72 1L76 10L86 12L95 3L102 13L113 14L121 5L131 15L137 4L142 13L151 11L162 1L170 4L174 14L185 14L194 12L200 9L204 15L210 10L220 4L231 13L236 15L240 9V22z'/%3E%3C/svg%3E") 0 0 / 240px 22px repeat-x;
}
[data-divider="torn"] :is(.section, .closing)::before { bottom: calc(100% - 1px); }
[data-divider="torn"] :is(.section, .closing)::after { top: calc(100% - 1px); transform: scaleY(-1); -webkit-mask-position: 97px 0; mask-position: 97px 0; filter: drop-shadow(0 -3px 2px rgba(60, 40, 20, .14)); }
[data-divider="torn"] .closing::after { content: none; }
/* Kartu di atas kertas: garis tipis, bukan bayangan, supaya lembaran tetap terasa. */
[data-divider="torn"] .section .card { box-shadow: none; border: 1px solid color-mix(in srgb, var(--orn) 30%, transparent); }

/* Pita berselang-seling bertepi bentuk (semua divider selain torn). Bagian ganjil jadi pita berwarna --lace;
   tepinya (mask --edge, tinggi --edge-h) menjorok ke bagian tetangga, tepi bawah = cerminan tepi atas. */
[data-divider]:not([data-divider="torn"]) :is(.section:nth-child(odd of .section), .closing) {
  position: relative; padding-top: calc(56px + var(--edge-pad)); padding-bottom: calc(56px + var(--edge-pad));
  background: var(--lace-art, none), var(--lace);
}
[data-divider]:not([data-divider="torn"]) .closing { padding-bottom: 140px; }
/* Kotak hitung mundur di antara pita: beri ruang supaya tidak tertutup tepi pita. */
[data-divider]:not([data-divider="torn"]) .band { margin-top: calc(var(--edge-h) + 20px); margin-bottom: calc(var(--edge-h) + 20px); }
[data-divider]:not([data-divider="torn"]) :is(.section:nth-child(odd of .section), .closing)::before,
[data-divider]:not([data-divider="torn"]) .section:nth-child(odd of .section)::after {
  content: ''; position: absolute; left: 0; right: 0; height: var(--edge-h); z-index: 1; background: var(--lace); pointer-events: none;
  -webkit-mask: var(--edge); mask: var(--edge);
}
[data-divider]:not([data-divider="torn"]) :is(.section:nth-child(odd of .section), .closing)::before { bottom: calc(100% - 1px); }
[data-divider]:not([data-divider="torn"]) .section:nth-child(odd of .section)::after { top: calc(100% - 1px); transform: scaleY(-1); }
/* Ombak: gelombang laut yang landai. */
[data-divider="wave"] { --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18'%3E%3Cpath d='M0 18V9C20 0 40 0 60 9S100 18 120 9V18Z'/%3E%3C/svg%3E") 0 0 / 120px 18px repeat-x; --edge-h: 18px; --edge-pad: 13px; }
/* Zigzag: potongan gunting bergerigi. */
[data-divider="zigzag"] { --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 12L10 0L20 12Z'/%3E%3C/svg%3E") 0 0 / 20px 12px repeat-x; --edge-h: 12px; --edge-pad: 10px; }
/* Kubah: satu lengkung besar selebar layar. */
[data-divider="arch"] { --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44V34Q50 -22 100 34V44Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; --edge-h: 44px; --edge-pad: 26px; }
/* Miring: potongan diagonal. */
[data-divider="tilt"] { --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40L100 0V40Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; --edge-h: 40px; --edge-pad: 24px; }
/* Bukit: dua lapis siluet perbukitan. */
[data-divider="hills"] { --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50V28C60 4 120 6 180 24S300 2 400 22V50Z' fill-opacity='.45'/%3E%3Cpath d='M0 50V38C80 20 150 26 230 38S340 30 400 36V50Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; --edge-h: 50px; --edge-pad: 29px; }
/* Awan: gumpalan awan bulat. */
[data-divider="clouds"] { --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30'%3E%3Ccircle cx='0' cy='20' r='10'/%3E%3Ccircle cx='22' cy='17' r='13'/%3E%3Ccircle cx='48' cy='13' r='16'/%3E%3Ccircle cx='76' cy='19' r='12'/%3E%3Ccircle cx='98' cy='14' r='14'/%3E%3Ccircle cx='120' cy='20' r='10'/%3E%3Crect y='22' width='120' height='8'/%3E%3C/svg%3E") 0 0 / 120px 30px repeat-x; --edge-h: 30px; --edge-pad: 19px; }
/* Tangga art deco: undakan di tengah dengan garis samping. */
[data-divider="steps"] { --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30V24H58V18H76V12H88V6H112V12H124V18H142V24H200V30Z'/%3E%3Cpath d='M0 21H52V22H0ZM148 21H200V22H148Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; --edge-h: 30px; --edge-pad: 19px;
  --lace-art: linear-gradient(var(--orn), var(--orn)) 0 10px / 100% 1px no-repeat, linear-gradient(var(--orn), var(--orn)) 0 calc(100% - 10px) / 100% 1px no-repeat; }
/* Sapuan kuas: tepi cat air kasar dengan percikan. */
[data-divider="brush"] { --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24'%3E%3Cpath d='M0 24V10L0 9.7L7 12.5L13 9.7L20 7.8L27 9.8L34 12.1L37 9.6L41 7.1L44 10.7L50 13.3L57 11.1L64 6.6L71 6.9L74 7.8L78 10.7L84 8.8L91 12.4L98 8.1L103 10.0L106 9.7L111 9.3L118 13.5L121 11.5L126 11.8L133 8.5L136 10.4L139 9.3L144 9.2L147 12.4L150 8.0L153 9.8L159 9.4L166 10.9L171 8.9L176 8.8L182 11.8L185 7.4L188 6.6L194 12.1L198 11.3L202 9.6L206 13.4L210 9.4L216 7.3L222 13.4L225 8.4L232 8.6L235 8.0L241 13.5L248 11.0L251 6.8L255 8.0L260 6.6L267 8.8L272 9.2L275 7.1L282 11.0L285 10.7L290 10.9L294 13.2L300 10V24Z'/%3E%3Ccircle cx='77' cy='4.5' r='1.0'/%3E%3Ccircle cx='86' cy='2.6' r='1.0'/%3E%3Ccircle cx='135' cy='4.0' r='1.0'/%3E%3Ccircle cx='291' cy='2.2' r='1.8'/%3E%3Ccircle cx='255' cy='3.6' r='1.2'/%3E%3Ccircle cx='61' cy='1.9' r='1.3'/%3E%3C/svg%3E") 0 0 / 300px 24px repeat-x; --edge-h: 24px; --edge-pad: 16px; }
/* Lengkung bawang: deretan kubah lancip khas Timur Tengah. */
[data-divider="kubah"] { --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M0 30V22C6 22 10 18 12 12C14 6 18 4 20 0C22 4 26 6 28 12C30 18 34 22 40 22V30Z'/%3E%3C/svg%3E") 0 0 / 40px 30px repeat-x; --edge-h: 30px; --edge-pad: 19px; }
/* Untaian mutiara: butir bulat pada seutas benang. */
[data-divider="pearls"] { --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18'%3E%3Ccircle cx='11' cy='8' r='6.5'/%3E%3Crect y='7.4' width='22' height='1.2'/%3E%3Crect y='14' width='22' height='4'/%3E%3C/svg%3E") 0 0 / 22px 18px repeat-x; --edge-h: 18px; --edge-pad: 13px;
  --lace-art: linear-gradient(color-mix(in srgb, var(--orn) 55%, transparent), color-mix(in srgb, var(--orn) 55%, transparent)) 0 14px / 100% 1px no-repeat, linear-gradient(color-mix(in srgb, var(--orn) 55%, transparent), color-mix(in srgb, var(--orn) 55%, transparent)) 0 calc(100% - 14px) / 100% 1px no-repeat; }
/* Renda: gelombang setengah lingkaran. */
[data-divider="scallop"] { --edge: radial-gradient(circle at 50% 100%, #000 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x; --edge-h: 14px; --edge-pad: 11px;
  --lace-art: radial-gradient(circle, var(--bg) 2.4px, transparent 3px) 0 12px / 28px 8px repeat-x, radial-gradient(circle, var(--bg) 2.4px, transparent 3px) 0 calc(100% - 12px) / 28px 8px repeat-x,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 7px, transparent 7px 12px) 0 28px / 100% 1px no-repeat, repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 7px, transparent 7px 12px) 0 calc(100% - 28px) / 100% 1px no-repeat; }

/* ---- Gerakan pembuka (anim.opening, body[data-opening]). Bawaan "tirai" memakai aturan .curtain di atas. ---- */
/* Pintu: dua daun pintu berpanel dengan gagang, berayun ke dalam. */
[data-opening="pintu"] .curtain { transition: transform 1.6s cubic-bezier(.6, 0, .2, 1) .3s, opacity .5s ease 1.4s; box-shadow: inset 0 0 0 16px var(--curtain), inset 0 0 0 17px color-mix(in srgb, var(--orn) 70%, transparent); }
[data-opening="pintu"] .curtain-l { transform-origin: left center; transform: perspective(1400px) rotateY(0); background: radial-gradient(circle at calc(100% - 30px) 50%, var(--orn) 5px, transparent 6px), var(--curtain); }
[data-opening="pintu"] .curtain-r { transform-origin: right center; transform: perspective(1400px) rotateY(0); background: radial-gradient(circle at 30px 50%, var(--orn) 5px, transparent 6px), var(--curtain); }
[data-opening="pintu"].opened .curtain-l { transform: perspective(1400px) rotateY(-100deg); opacity: 0; }
[data-opening="pintu"].opened .curtain-r { transform: perspective(1400px) rotateY(100deg); opacity: 0; }

/* Amplop: tutup segitiga terangkat ke atas, lalu badan amplop turun keluar layar. */
.js body.inv[data-opening="amplop"] .curtain { left: auto; right: 0; width: var(--col, 100%); border: 0; }
[data-opening="amplop"] .curtain-l { bottom: auto; height: 52%; z-index: 16; background: color-mix(in srgb, var(--curtain) 82%, #000); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transform: perspective(1200px) rotateX(0); transition: transform .9s cubic-bezier(.6, 0, .3, 1) .3s, opacity .3s ease .9s; }
[data-opening="amplop"] .curtain-r { background: linear-gradient(to top left, transparent calc(50% - 1px), color-mix(in srgb, var(--orn) 60%, transparent) 50%, transparent calc(50% + 1px)) left bottom / 50% 48% no-repeat, linear-gradient(to top right, transparent calc(50% - 1px), color-mix(in srgb, var(--orn) 60%, transparent) 50%, transparent calc(50% + 1px)) right bottom / 50% 48% no-repeat, var(--curtain); transition: transform 1.1s cubic-bezier(.7, 0, .25, 1) 1s; }
[data-opening="amplop"].opened .curtain-l { transform: perspective(1200px) rotateX(-180deg); opacity: 0; }
[data-opening="amplop"].opened .curtain-r { transform: translateY(105%); }

/* Lingkaran, Angkat, Pudar: hanya sampul yang bergerak, tanpa tirai. */
:is([data-opening="lingkaran"], [data-opening="geser"], [data-opening="pudar"]) .curtain { display: none !important; }
.js [data-opening="lingkaran"] .cover { clip-path: circle(72% at 50% 50%); }
[data-opening="lingkaran"].opened .cover { opacity: 1; transform: none; clip-path: circle(0 at 50% 50%); transition: clip-path 1.3s cubic-bezier(.7, 0, .3, 1), visibility 0s linear 1.3s; }
.js [data-opening="geser"] .cover { box-shadow: 0 24px 50px rgba(0, 0, 0, .28); }
[data-opening="geser"].opened .cover { opacity: 1; transform: translateY(-104%); transition: transform 1.2s cubic-bezier(.7, 0, .25, 1), visibility 0s linear 1.2s; }
[data-opening="pudar"].opened .cover { opacity: 0; transform: scale(1.12); filter: blur(10px); transition: opacity 1.2s ease, transform 1.4s ease, filter 1.2s ease, visibility 0s linear 1.4s; }