/* ══════════════════════════════════════════════════════════════════
   PEARL NACRE — haute joaillerie: mutiara, nacre & beludru teal malam
   ══════════════════════════════════════════════════════════════════ */
@property --na { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --nd { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --lidA { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

:root {
    --abyss: #051619;
    --velvet: #0a2a2e;
    --velvet-2: #0f363b;
    --velvet-3: #14444a;
    --pearl: #f7f3ec;
    --pearl-2: #ece5da;
    --champ: #d9c3a0;
    --champ-l: #efe1c6;
    --champ-d: #a68c66;
    --silver: #c5cbcd;
    --blush: #f3d3dc;
    --aqua: #cfeee8;
    --lilac: #ded5f4;
    --peach: #f7e5cf;
    --cream: #eee8de;
    --cream-dim: rgba(238, 232, 222, .68);
    --ink: #17302f;
    --ink-dim: #5f706f;
    --hair: rgba(217, 195, 160, .36);
    --hair-ink: rgba(23, 48, 47, .18);
    --nx: 50%;
    --tiltX: 0deg;
    --tiltY: 0deg;
    --display: 'Italiana', 'Didot', Georgia, serif;
    --serif: 'Cormorant Infant', 'Cormorant Garamond', Georgia, serif;
    --sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --script: 'Pinyon Script', cursive;
    --ease: cubic-bezier(.2, .7, .1, 1);
    --nacre: conic-gradient(from var(--na) at 50% 50%, #f6d4de, #d3efe9, #fbf6ee, #e0d7f6, #f8e6cf, #d6f0ea, #f3d0dd, #f6d4de);
    --nacre-soft:
        linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .55) 46%, transparent 62%) calc(var(--nx) + var(--nd)) 0 / 300% 100%,
        radial-gradient(45% 35% at 26% 28%, rgba(207, 238, 232, .95), transparent 70%),
        radial-gradient(45% 40% at 76% 38%, rgba(243, 205, 219, .95), transparent 70%),
        radial-gradient(55% 40% at 42% 80%, rgba(224, 215, 246, .95), transparent 70%),
        radial-gradient(40% 30% at 74% 86%, rgba(248, 229, 207, .95), transparent 70%),
        linear-gradient(160deg, #fbf7f0, #efe8ee);
    --pearl-fill:
        radial-gradient(circle at 33% 28%, #fff 0 5%, rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 72% 80%, rgba(243, 196, 212, .6), transparent 46%),
        radial-gradient(circle at 20% 72%, rgba(196, 236, 229, .55), transparent 42%),
        radial-gradient(circle at 40% 36%, #fdfaf5 0%, #efe8de 42%, #cfc8c7 76%, #96a0a3 100%);
}

/* --nx/--na kini ditulis per elemen oleh JS: definisikan ulang pada pemakainya agar
   var() tersubstitusi dengan nilai milik elemen itu (bukan nilai :root) */
.pearl, .st-pearl, .cab-stone {
    --nacre: conic-gradient(from var(--na) at 50% 50%, #f6d4de, #d3efe9, #fbf6ee, #e0d7f6, #f8e6cf, #d6f0ea, #f3d0dd, #f6d4de);
}
.lk-photo, .gal.ph .pd-frame {
    --nacre-soft:
        linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .55) 46%, transparent 62%) var(--nx) 0 / 300% 100%,
        radial-gradient(45% 35% at 26% 28%, rgba(207, 238, 232, .95), transparent 70%),
        radial-gradient(45% 40% at 76% 38%, rgba(243, 205, 219, .95), transparent 70%),
        radial-gradient(55% 40% at 42% 80%, rgba(224, 215, 246, .95), transparent 70%),
        radial-gradient(40% 30% at 74% 86%, rgba(248, 229, 207, .95), transparent 70%),
        linear-gradient(160deg, #fbf7f0, #efe8ee);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
    margin: 0;
    background: var(--abyss);
    color: var(--cream);
    font-family: var(--serif);
    font-size: 18.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
body.no-scroll { overflow: hidden; height: 100vh; height: 100svh; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
.ico { width: 1em; height: 1em; flex-shrink: 0; }
::selection { background: rgba(243, 211, 220, .45); color: var(--ink); }

/* ── Teks nacre ──────────────────────────────────────────────────── */
.nacre-text, .nacre-ink {
    display: inline-block; padding: .06em .12em .14em; margin: -.06em -.12em -.14em;
    background-size: 280% 100%;
    background-position: calc(var(--nx) + var(--nd)) 50%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: nacreDrift 9s ease-in-out infinite alternate;
}
.nacre-text {
    background-image: linear-gradient(100deg, #fdfaf4 0%, #f4d3de 14%, #fffaf2 27%, #cdeee8 40%, #fbf8f2 52%, #ddd3f5 64%, #f8e3cb 77%, #fffaf3 88%, #f1d2dc 100%);
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25));
}
.nacre-ink {
    background-image: linear-gradient(100deg, #17302f 0%, #4b6a78 13%, #1d3a3a 26%, #7a6a86 40%, #22403f 52%, #5f8486 64%, #8a6b72 76%, #1c3837 88%, #4a6a74 100%);
}
/* Drift nacre amat lambat: kurva ease-in-out disampel per 10% dan diperbarui bertahap (~15 fps)
   — tak terlihat bedanya, tapi teks ber-clip gradien tak perlu di-repaint tiap frame */
@keyframes nacreDrift { 0% { --nd: -18%; } 10% { --nd: -17.29%; } 20% { --nd: -15.06%; } 30% { --nd: -11.25%; } 40% { --nd: -6.05%; } 50% { --nd: 0%; } 60% { --nd: 6.05%; } 70% { --nd: 11.25%; } 80% { --nd: 15.06%; } 90% { --nd: 17.29%; } 100% { --nd: 18%; } }
.nacre-text, .nacre-ink, .btn-pearl, .nacre-face, .hc-sheen { animation-timing-function: steps(12) !important; }

/* ── Mutiara (komponen dasar) ────────────────────────────────────── */
.pearl {
    position: relative; display: inline-block; border-radius: 50%;
    background: var(--pearl-fill);
    box-shadow: inset -5px -8px 14px rgba(56, 70, 78, .32), inset 3px 4px 8px rgba(255, 255, 255, .7), 0 6px 14px rgba(0, 0, 0, .3);
}
.pearl::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: var(--nacre); mix-blend-mode: soft-light; opacity: .75;
}
.pearl.sm { width: 22px; height: 22px; }

/* ── Musik ───────────────────────────────────────────────────────── */
.music-toggle-btn {
    position: fixed; z-index: 120; top: calc(16px + env(safe-area-inset-top)); right: 16px;
    width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(6, 26, 29, .6); color: var(--champ-l);
    border: 1px solid rgba(217, 195, 160, .5);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.music-toggle-btn svg { width: 17px; height: 17px; }
.music-toggle-btn.playing::after {
    content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(243, 211, 220, .45);
    animation: ring 2.4s ease-out infinite;
}
@keyframes ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

/* ── Toast & progres ─────────────────────────────────────────────── */
.toast {
    position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 130;
    transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    padding: 12px 22px; border-radius: 999px; max-width: calc(100vw - 40px); text-align: center;
    background: rgba(247, 243, 236, .96); color: var(--ink); font-family: var(--sans); font-size: 12px; letter-spacing: .06em;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35); transition: opacity .35s, transform .35s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 110; pointer-events: none; }
.progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--champ), var(--blush), var(--aqua), var(--lilac), var(--pearl)); }
body:not(.opened) .progress { display: none; }

.glints { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 105; pointer-events: none; mix-blend-mode: screen; }
.grain {
    position: fixed; inset: 0; z-index: 104; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Label & tombol ──────────────────────────────────────────────── */
.lbl { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--champ); }
.lbl.ink { color: var(--ink-dim); }
.btn-pearl {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 34px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; overflow: hidden;
    font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #15302f;
    background:
        linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .85) 46%, transparent 62%) calc(var(--nx) + var(--nd)) 0 / 300% 100%,
        linear-gradient(100deg, #f5ede3, #f6dbe3 25%, #fbf7f0 45%, #d8efe9 65%, #e6def6 85%, #f6ece0);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 4px rgba(217, 195, 160, .18), 0 12px 30px rgba(0, 0, 0, .35);
    animation: nacreDrift 6s ease-in-out infinite alternate;
    transition: transform .3s var(--ease), box-shadow .3s;
}
.btn-pearl > span { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.btn-pearl .ico { font-size: 15px; }
.btn-pearl:active { transform: scale(.97); }
.btn-pearl.wide { width: 100%; margin-top: 30px; }
.btn-pearl.loading { opacity: .7; pointer-events: none; }
.btn-line {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 28px;
    padding: 12px 24px; border-radius: 999px; border: 1px solid var(--hair); background: transparent; cursor: pointer; text-decoration: none;
    font-family: var(--sans); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--champ-l);
    transition: background .3s, color .3s;
}
.btn-line .ico { font-size: 14px; }
.btn-line:hover { background: rgba(217, 195, 160, .1); }
.btn-line.ink { color: var(--ink); border-color: rgba(23, 48, 47, .3); }
.btn-line.ink:hover { background: rgba(23, 48, 47, .06); }

/* ══════════════════════════════════════════════════════════════════
   SAMPUL — kerang mutiara di atas beludru
   ══════════════════════════════════════════════════════════════════ */
.cover {
    position: fixed; inset: 0; z-index: 100; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding: calc(30px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom));
    background: var(--abyss); text-align: center;
    transition: opacity .9s ease;
}
.cv-velvet {
    position: absolute; inset: 0;
    background:
        radial-gradient(60% 34% at 50% 56%, rgba(120, 190, 190, .16), transparent 70%),
        linear-gradient(102deg, transparent 12%, rgba(0, 0, 0, .28) 26%, transparent 40%, rgba(255, 255, 255, .035) 55%, transparent 66%, rgba(0, 0, 0, .25) 82%, transparent 94%),
        repeating-linear-gradient(118deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px),
        radial-gradient(120% 80% at 50% 50%, #12424a 0%, #0a2b30 48%, #041214 100%);
}
.caustics {
    position: absolute; inset: -4%; width: 108%; height: 108%; pointer-events: none;
    mix-blend-mode: screen; opacity: .2; filter: blur(7px);
    transition: opacity 1.4s ease;
}
.cover.s3 .caustics { opacity: .6; }

.cv-top { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; transition: opacity .9s, transform 1.2s var(--ease); }
.cv-line { width: 1px; height: 28px; margin: 12px 0 10px; background: linear-gradient(var(--champ), transparent); }
.cv-names {
    margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(46px, 13.5vw, 76px); line-height: 1; letter-spacing: -.01em;
    display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 .18em;
}
.cv-names .amp, .amp { font-family: var(--script); font-style: normal; font-weight: 400; color: var(--champ); font-size: .62em; }
.cv-date { margin: 12px 0 0; font-family: var(--sans); font-size: 10.5px; letter-spacing: .38em; text-transform: uppercase; color: var(--cream-dim); }

.scene {
    --s: min(1.25, calc((100vw - 34px) / 330px));
    position: relative; z-index: 2; width: 100%; flex: 0 0 auto; height: calc(270px * var(--s)); margin-top: auto; flex-shrink: 0;
    cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none;
    outline: none;
}
.sc-glow {
    position: absolute; left: 50%; bottom: 22%; width: 300px; height: 300px; margin-left: -150px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 252, 245, .55) 0%, rgba(243, 211, 220, .3) 25%, rgba(207, 238, 232, .16) 45%, transparent 68%);
    opacity: calc(.1 + var(--hold, 0) * .5); transform: scale(.6); transition: opacity .9s, transform 1.4s var(--ease);
}
.persp {
    position: absolute; left: 50%; bottom: calc(46px * var(--s)); width: 320px; height: 240px; margin-left: -160px;
    perspective: 900px; perspective-origin: 50% 0%;
    transform: scale(var(--s)); transform-origin: 50% 100%;
}
.stage {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transform: translateY(40px) rotateX(calc(57deg + var(--tiltX))) rotateZ(calc(var(--tiltY) * -1)) scale(calc(1 - var(--hold, 0) * .035));
    transition: transform .6s var(--ease);
}
.stage > * { position: absolute; left: 0; top: 0; width: 320px; height: 240px; }
.sh-rim { background: linear-gradient(180deg, #2f3236, #8d8781 70%, #c9bfb2); }
.sh-rim.r1 { transform: translateZ(-3px); }
.sh-rim.r2 { transform: translateZ(-6px); filter: brightness(.8); }
.sh-rim.r3 { transform: translateZ(-10px); filter: brightness(.35) blur(2px); }

.nacre-face {
    background:
        linear-gradient(118deg, transparent 32%, rgba(255, 255, 255, .6) 46%, transparent 60%) calc(var(--nx) + var(--nd)) 0 / 300% 100%,
        radial-gradient(40% 22% at 50% 6%, rgba(70, 72, 92, .55), transparent 70%),
        radial-gradient(38% 30% at 30% 55%, rgba(207, 238, 232, .9), transparent 70%),
        radial-gradient(40% 32% at 70% 48%, rgba(243, 205, 219, .9), transparent 70%),
        radial-gradient(46% 30% at 52% 82%, rgba(224, 215, 246, .9), transparent 70%),
        conic-gradient(from var(--na) at 50% 8%, #f5d6df, #d2eee8, #fdf8f0, #ddd5f4, #f8e5cf, #d4efe9, #f5d6df);
    animation: nacreDrift 7s ease-in-out infinite alternate;
}
.sh-base { transform: translateZ(0); box-shadow: inset 0 0 30px rgba(40, 50, 60, .4); }
.sh-ribs { position: absolute; inset: 0; width: 100%; height: 100%; }
.sh-ribs .rb path { stroke: rgba(255, 255, 255, .5); stroke-width: 1.4; fill: none; }
.sh-ribs .rg path { stroke: rgba(110, 100, 130, .14); stroke-width: 1; fill: none; }
.sh-ribs .rim-line { fill: none; stroke: rgba(120, 112, 112, .55); stroke-width: 7; }
.lid {
    transform-style: preserve-3d; transform-origin: 160px 20px;
    transform: translateZ(2px) rotateX(var(--lidA));
    transition: transform .45s var(--ease);
    animation: peek 4.6s ease-in-out 1.2s infinite;
}
@keyframes peek { 0%, 70%, 100% { --lidA: 0deg; } 80% { --lidA: 7deg; } 88% { --lidA: 2deg; } }
.lid > * { position: absolute; inset: 0; width: 320px; height: 240px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lid-ext { transform: translateZ(.5px); overflow: visible; filter: drop-shadow(0 -2px 0 rgba(255, 255, 255, .25)); }
.lid-ext .ridge { stroke: rgba(255, 250, 240, .4); stroke-width: .9; fill: none; }
.lid-int { transform: rotateY(180deg); }
.lid-sheen { transform: translateZ(1px); mix-blend-mode: soft-light; opacity: .55; pointer-events: none; }

.pearl3d {
    left: 160px !important; top: 132px !important; width: 0 !important; height: 0 !important;
    transform-style: preserve-3d; opacity: 0;
    transform: translateZ(-6px) rotateX(-57deg) scale(.4);
    transition: transform 1.5s cubic-bezier(.22, 1.2, .36, 1), opacity .8s;
}
.pearl.big {
    position: absolute; left: -44px; top: -88px; width: 88px; height: 88px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset -9px -13px 22px rgba(56, 70, 78, .35), inset 5px 7px 12px rgba(255, 255, 255, .75), 0 10px 22px rgba(0, 0, 0, .3), 0 0 0 rgba(255, 250, 240, 0);
    transition: box-shadow 1.2s;
}
.pearl-mono {
    position: relative; z-index: 1; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 25px; letter-spacing: .02em;
    color: rgba(96, 104, 112, .5); text-shadow: 0 1px 0 rgba(255, 255, 255, .85), 0 -1px 0 rgba(60, 70, 80, .18);
}
.pearl-mono i { font-family: var(--script); font-style: normal; font-size: .7em; margin: 0 1px; }

.hold { position: absolute; left: 0; right: 0; top: 4px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: opacity .4s; }
.hold-ring { width: 30px; height: 30px; transform: rotate(-90deg); }
.hr-bg { fill: none; stroke: rgba(217, 195, 160, .3); stroke-width: 6; }
.hr-fg { fill: none; stroke: var(--champ-l); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.hr-dot { fill: var(--pearl); animation: dotPulse 1.8s ease-in-out infinite; transform-origin: 60px 60px; }
@keyframes dotPulse { 50% { transform: scale(.7); opacity: .7; } }
.hold-hint { font-family: var(--sans); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--cream-dim); }

.cv-strand { position: relative; z-index: 1; display: block; width: min(116%, 470px); height: auto; margin: -64px 0 -8px; flex-shrink: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.cv-strand .p1 { opacity: .9; }

.jcard {
    position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 220px; max-width: 86vw; padding: 14px 26px 13px; transform: rotate(-2deg); margin-bottom: auto; flex-shrink: 0;
    background: linear-gradient(160deg, #fbf8f2, #f1ebe1); color: var(--ink); border-radius: 3px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45), inset 0 0 0 5px #fbf8f2, inset 0 0 0 6px rgba(166, 140, 102, .55);
    transition: opacity .5s, transform .6s var(--ease);
}
.jcard::before {
    content: ''; position: absolute; top: -9px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
    background: var(--pearl-fill); box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}
.jc-k, .jc-s { font-family: var(--sans); font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-dim); }
.jc-n { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--ink); word-break: break-word; }

.cv-foot { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; margin-top: 18px; flex-shrink: 0; transition: opacity .5s; }
.cv-note { margin: 12px 0 0; font-family: var(--sans); font-size: 9.5px; letter-spacing: .08em; color: rgba(238, 232, 222, .42); }
.cv-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at 50% 55%, #fffdf8 0%, #f6e6ec 35%, #dbefeb 65%, rgba(219, 239, 235, 0) 100%); transition: opacity .8s ease; }

/* langkah pembukaan */
.cover.s1 .lid { animation: none; --lidA: 12deg; }
.cover.s1 .hold, .cover.s1 .cv-foot, .cover.s1 .jcard { opacity: 0; pointer-events: none; }
.cover.s1 .jcard { transform: rotate(-6deg) translateY(30px); }
.cover.s2 .cv-top { opacity: 0; transform: translateY(-24px); }
.cover.s2 .lid { --lidA: 97deg; transition: transform 1.5s cubic-bezier(.45, 0, .15, 1); }
.cover.s2 .sc-glow { opacity: .8; transform: scale(1); }
.cover.s2 .pearl3d { opacity: 1; transform: translateZ(14px) rotateX(-57deg) scale(.82); transition-delay: .55s; }
.cover.s3 .pearl3d { transform: translateZ(64px) rotateX(-57deg) scale(1.08); transition-delay: 0s; }
.cover.s3 .pearl.big { box-shadow: inset -9px -13px 22px rgba(56, 70, 78, .25), inset 5px 7px 12px rgba(255, 255, 255, .85), 0 0 40px 10px rgba(255, 248, 240, .6), 0 0 90px 30px rgba(243, 211, 220, .35); }
.cover.s3 .sc-glow { opacity: 1; transform: scale(1.5); animation: glowPulse 1.6s ease-in-out infinite; }
.cover.s3 .cv-strand { opacity: .55; transition: opacity 1s; }
@keyframes glowPulse { 50% { opacity: .75; } }
.cover.s4 { opacity: 0; pointer-events: none; }
.cover.s4 .cv-flash { opacity: 1; }
.cover.s4 .scene { transform: scale(1.25); transition: transform 1s var(--ease); }

/* ══════════════════════════════════════════════════════════════════
   ISI UNDANGAN
   ══════════════════════════════════════════════════════════════════ */
main { position: relative; counter-reset: ch; }
/* isi undangan tertutup penuh oleh sampul yang opak: jeda animasinya sampai sampul dibuka */
body:not(.opened) main * { animation-play-state: paused !important; }
.wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }
.wrap.narrow { max-width: 620px; }
.center { text-align: center; }
.narrow-txt { max-width: 460px; margin-left: auto; margin-right: auto; }

/* reveal */
.rv-up { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.rv-up.in { opacity: 1; transform: none; }
.rv-frame { opacity: 0; transform: scale(.96) translateY(18px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); }
.rv-frame.in { opacity: 1; transform: none; }
.mask { display: block; overflow: hidden; padding: .08em .1em .16em; margin: -.08em -.1em -.16em; }
.mask > span { transform: translateY(110%); transition: transform 1.25s var(--ease); }
.mask.in > span, .rv.in .mask > span { transform: none; }
.rv-mask { clip-path: inset(100% 0 0 0 round 50%); transition: clip-path 1.4s var(--ease); }
.rv-mask.in { clip-path: inset(0 0 0 0 round 0); }

/* untaian mutiara */
.strand { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; height: 24px; margin: 26px auto; }
.strand .thread { position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; margin-top: -.5px;
    background: linear-gradient(90deg, transparent, var(--champ) 18%, var(--champ) 82%, transparent); transform: scaleX(0); transition: transform 1.2s var(--ease); }
.strand i {
    position: relative; width: 9px; height: 9px; border-radius: 50%;
    background: var(--pearl-fill);
    box-shadow: inset -1.5px -2px 3px rgba(56, 70, 78, .3), 0 2px 3px rgba(0, 0, 0, .22);
    transform: scale(0); transition: transform .55s cubic-bezier(.3, 1.7, .5, 1); transition-delay: calc(.25s + var(--i) * 75ms);
}
.strand i.s { width: 6.5px; height: 6.5px; }
.strand i.l { width: 11px; height: 11px; }
.strand i.xl { width: 17px; height: 17px; box-shadow: inset -2.5px -3.5px 5px rgba(56, 70, 78, .3), 0 3px 6px rgba(0, 0, 0, .25), 0 0 14px rgba(255, 245, 235, .35); }
.strand.in .thread { transform: scaleX(1); }
.strand.in i { transform: scale(1); }

/* hero */
.hero {
    position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center;
    padding: 80px 20px 60px; overflow: hidden;
    background:
        radial-gradient(70% 50% at 50% 42%, rgba(120, 190, 190, .14), transparent 70%),
        repeating-linear-gradient(118deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 4px),
        radial-gradient(120% 90% at 50% 40%, #11414a, #0a2a2e 50%, #051619);
}
.hero-bokeh i {
    position: absolute; border-radius: 50%; filter: blur(2px); opacity: .45;
    background: radial-gradient(circle at 35% 30%, #fff, #f2dbe2 40%, rgba(207, 238, 232, .3) 70%, transparent 72%);
    animation: floatY 9s ease-in-out infinite alternate;
}
.hero-bokeh i:nth-child(1) { width: 60px; height: 60px; left: 6%; top: 14%; }
.hero-bokeh i:nth-child(2) { width: 26px; height: 26px; right: 12%; top: 10%; animation-delay: -3s; }
.hero-bokeh i:nth-child(3) { width: 90px; height: 90px; right: -24px; top: 48%; filter: blur(6px); opacity: .3; animation-delay: -5s; }
.hero-bokeh i:nth-child(4) { width: 18px; height: 18px; left: 14%; bottom: 16%; animation-delay: -1s; }
.hero-bokeh i:nth-child(5) { width: 40px; height: 40px; left: -12px; top: 60%; filter: blur(5px); opacity: .3; animation-delay: -7s; }
.hero-bokeh i:nth-child(6) { width: 14px; height: 14px; right: 22%; bottom: 9%; animation-delay: -4s; }
@keyframes floatY { from { transform: translateY(-14px); } to { transform: translateY(14px); } }
.hero-card {
    position: relative; width: min(100%, 440px); padding: 74px 26px 44px; text-align: center; color: var(--ink);
    border-radius: 220px 220px 18px 18px; overflow: hidden;
    background:
        radial-gradient(60% 40% at 20% 10%, rgba(243, 211, 220, .45), transparent 70%),
        radial-gradient(60% 40% at 85% 30%, rgba(207, 238, 232, .5), transparent 70%),
        radial-gradient(70% 40% at 50% 100%, rgba(222, 213, 244, .45), transparent 70%),
        linear-gradient(170deg, #fbf8f3, #f1ebe2);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 0 0 7px rgba(251, 248, 243, .9), inset 0 0 0 8px rgba(166, 140, 102, .55), inset 0 0 0 12px rgba(251, 248, 243, .5), inset 0 0 0 12.6px rgba(166, 140, 102, .3);
}
.hc-sheen { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .7) 48%, transparent 60%) calc(var(--nx) + var(--nd)) 0 / 300% 100%;
    mix-blend-mode: soft-light; animation: nacreDrift 8s ease-in-out infinite alternate; }
.hero-names { margin: 18px 0 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(56px, 16vw, 96px); line-height: .98; letter-spacing: -.015em; display: flex; flex-direction: column; align-items: center; }
.hero-names .amp { font-size: .55em; margin: .02em 0 .06em; color: var(--champ-d); }
.hero-date { display: flex; align-items: center; justify-content: center; gap: 16px; font-family: var(--sans); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-dim); }
.hero-date b { font-family: var(--display); font-weight: 400; font-size: 46px; letter-spacing: 0; color: var(--ink); line-height: 1; padding: 0 16px; border-left: 1px solid var(--hair-ink); border-right: 1px solid var(--hair-ink); }
.hero-date span { width: 90px; }
.hero-date span:first-child { text-align: right; }
.hero-date span:last-child { text-align: left; }
.hero-place { margin: 18px 0 0; font-style: italic; font-size: 19px; color: var(--ink); }
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 30px; text-decoration: none; font-family: var(--sans); font-size: 9px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-dim); }
.scroll-cue i { width: 1px; height: 34px; background: linear-gradient(var(--champ-d), transparent); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* bab */
.ch { position: relative; padding: 110px 22px 120px; counter-increment: ch; overflow: hidden; }
.velvet {
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(120, 190, 190, .1), transparent 70%),
        linear-gradient(100deg, transparent 15%, rgba(0, 0, 0, .18) 30%, transparent 45%, rgba(255, 255, 255, .025) 60%, transparent 75%),
        repeating-linear-gradient(118deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, #0a2a2e, #0c3035 50%, #0a2a2e);
}
.velvet.deep { background: radial-gradient(70% 40% at 50% 0%, rgba(120, 190, 190, .08), transparent 70%), repeating-linear-gradient(118deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 4px), #082326; }
.velvet.spot::before { content: ''; position: absolute; left: 50%; top: 18%; width: 520px; height: 520px; margin-left: -260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 211, 220, .12), rgba(207, 238, 232, .06) 40%, transparent 70%); pointer-events: none; }
.pearl-bg {
    color: var(--ink);
    background:
        radial-gradient(50% 30% at 8% 6%, rgba(243, 211, 220, .5), transparent 70%),
        radial-gradient(50% 30% at 96% 40%, rgba(207, 238, 232, .55), transparent 70%),
        radial-gradient(60% 30% at 20% 96%, rgba(222, 213, 244, .45), transparent 70%),
        linear-gradient(180deg, #f8f4ee, #f1ebe2);
}
.ch-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 40px; }
.ch-pearl { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--pearl-fill); box-shadow: 0 2px 5px rgba(0, 0, 0, .35), 0 0 0 5px rgba(217, 195, 160, .12); }
.ch-pearl::before, .ch-pearl::after { content: ''; position: absolute; top: 50%; width: 60px; height: 1px; }
.ch-pearl::before { right: 26px; background: linear-gradient(90deg, transparent, var(--champ)); }
.ch-pearl::after { left: 26px; background: linear-gradient(90deg, var(--champ), transparent); }
.ch-no::before { content: 'Perle ' counter(ch, upper-roman); font-family: var(--display); font-size: 15px; letter-spacing: .2em; color: var(--champ-l); }
.pearl-bg .ch-no::before { color: var(--champ-d); }
.ch-kick { font-family: var(--sans); font-size: 9.5px; letter-spacing: .36em; text-transform: uppercase; color: var(--cream-dim); }
.pearl-bg .ch-kick { color: var(--ink-dim); }

.display { margin: 0 0 18px; font-family: var(--display); font-weight: 400; font-size: clamp(38px, 11vw, 62px); line-height: 1.12; letter-spacing: .02em; }
.display.long { font-size: clamp(34px, 10vw, 58px); }
.sub { margin: 0 0 22px; font-style: italic; font-size: 20px; color: var(--champ-l); }
.txt { margin: 0 auto 10px; font-size: 18.5px; line-height: 1.7; color: var(--cream-dim); }
.txt.ink, .pearl-bg .txt { color: var(--ink-dim); }
.txt.sm { font-size: 16px; }
.arabic { margin: 0 0 16px; font-family: 'Amiri', serif; font-size: 22px; line-height: 2; color: var(--champ-l); direction: rtl; }
.arabic.big { font-size: 26px; }

/* kotak perhiasan beludru */
.jbox {
    position: relative; margin: 40px auto 0; padding: 40px 24px 32px; border-radius: 20px;
    background: radial-gradient(80% 60% at 50% 0%, rgba(120, 190, 190, .12), transparent 70%), linear-gradient(165deg, #0f3338, #082124);
    border: 1px solid rgba(217, 195, 160, .38);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, .45), 0 24px 50px rgba(0, 0, 0, .35);
}
.jbox::before { content: ''; position: absolute; inset: 7px; border-radius: 15px; border: .5px solid rgba(217, 195, 160, .22); pointer-events: none; }
.jb-clasp { position: absolute; top: -9px; left: 50%; width: 54px; height: 18px; margin-left: -27px; border-radius: 9px;
    background: linear-gradient(180deg, #f2e4c8, #b79c72 60%, #8c7350); box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.jb-clasp::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--pearl-fill); }
.ayat blockquote { margin: 0 0 14px; font-style: italic; font-size: 18px; line-height: 1.7; color: var(--cream); }
.ayat figcaption { font-family: var(--sans); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--champ); }

/* mempelai */
.couple { display: grid; gap: 24px; margin-top: 46px; }
.person-card { text-align: center; }
.locket { position: relative; width: min(66vw, 250px); margin: 0 auto 22px; padding-top: 26px; }
.lk-bail { position: absolute; top: 0; left: 50%; width: 22px; height: 28px; margin-left: -11px; border-radius: 11px 11px 8px 8px; border: 3px solid var(--champ-d);
    background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.lk-frame { position: relative; aspect-ratio: 200 / 260; filter: drop-shadow(0 18px 26px rgba(30, 40, 40, .28)); }
.lk-frame.rv-mask { clip-path: inset(100% 0 0 0); }
.lk-frame.rv-mask.in { clip-path: inset(-10% -10% -10% -10%); }
.lk-photo {
    position: absolute; inset: 6.5% 7%; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--nacre-soft);
    box-shadow: 0 0 0 3px #d4bd98, 0 0 0 4.5px #8c7350, inset 0 0 30px rgba(60, 70, 80, .25);
}
.lk-photo img { width: 100%; height: 100%; object-fit: cover; }
.lk-photo .mono { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 108px; line-height: 1; }
.bead-oval { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bd-base { fill: none; stroke: #ddd5cb; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 2.42; filter: drop-shadow(0 1.5px 1px rgba(40, 50, 55, .45)); }
.bd-hi { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 2.42; transform: translate(-1.4px, -1.8px); opacity: .95; }
.person { margin: 6px 0 0; font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 30px; line-height: 1.2; color: var(--ink); }
.mini-strand { display: inline-flex; gap: 4px; margin: 12px 0 10px; }
.mini-strand i { width: 7px; height: 7px; border-radius: 50%; background: var(--pearl-fill); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.mini-strand i:nth-child(2) { width: 10px; height: 10px; margin-top: -1.5px; }
.parent { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-dim); }
.parent b { font-weight: 600; color: var(--ink); }
.couple-amp { text-align: center; font-family: var(--script); font-size: 64px; line-height: 1; color: var(--champ-d); }
.couple-amp em { font-style: normal; }

/* kisah */
.story { list-style: none; margin: 44px 0 0; padding: 0 0 0 0; position: relative; }
.story::before { content: ''; position: absolute; left: 26px; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(transparent, var(--champ), transparent); }
.story li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 22px 0; }
.st-pearl {
    position: relative; justify-self: center; margin-top: 4px;
    width: calc(16px + var(--p) * 30px); height: calc(16px + var(--p) * 30px); border-radius: 50%;
    background: var(--pearl-fill);
    box-shadow: inset -3px -4px 8px rgba(56, 70, 78, .32), 0 0 0 4px #0b2c30, 0 0 0 5px rgba(217, 195, 160, .4), 0 0 calc(var(--p) * 30px) rgba(255, 245, 235, .35);
}
.st-pearl::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--nacre); mix-blend-mode: soft-light; opacity: .8; }
.story h3 { margin: 4px 0 6px; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.15; color: var(--pearl); }
.story p:not(.lbl) { margin: 0; font-size: 17.5px; line-height: 1.65; color: var(--cream-dim); }
.story .lbl { font-size: 9px; }

/* hitung mundur — kabochon mutiara */
.bigdate { margin: 10px 0 34px; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 12vw, 72px); letter-spacing: .04em; line-height: 1.1; }
.cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 460px; margin: 0 auto; }
.cab { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cab-stone {
    position: relative; width: min(19vw, 86px); aspect-ratio: 1; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--pearl-fill);
    box-shadow: inset -6px -9px 16px rgba(56, 70, 78, .32), inset 4px 5px 10px rgba(255, 255, 255, .75),
        0 0 0 3px #d9c3a0, 0 0 0 4px #7d6748, 0 12px 22px rgba(0, 0, 0, .45);
}
.cab-stone::before {
    content: ''; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 0) ,
        radial-gradient(circle 5px at 14.6% 14.6%, #f0e0c0 0 3px, #9b8360 4px, transparent 5px),
        radial-gradient(circle 5px at 85.4% 14.6%, #f0e0c0 0 3px, #9b8360 4px, transparent 5px),
        radial-gradient(circle 5px at 14.6% 85.4%, #f0e0c0 0 3px, #9b8360 4px, transparent 5px),
        radial-gradient(circle 5px at 85.4% 85.4%, #f0e0c0 0 3px, #9b8360 4px, transparent 5px);
}
.cab-stone::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--nacre); mix-blend-mode: soft-light; opacity: .85; pointer-events: none; }
.cab-stone b { position: relative; z-index: 1; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 7vw, 34px); color: #2a4443; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.cab-l { font-family: var(--sans); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--champ); }
.cd-date { margin: 32px 0 0; font-style: italic; font-size: 20px; color: var(--cream); }

/* acara — kotak perhiasan */
.events { display: grid; gap: 34px; margin-top: 44px; }
.jcase {
    position: relative; padding: 0 24px 30px; text-align: center; border-radius: 26px; overflow: hidden;
    background: linear-gradient(175deg, #fffdf9, #f6f1e9);
    box-shadow: 0 24px 50px rgba(23, 48, 47, .14), inset 0 0 0 1px rgba(166, 140, 102, .35), inset 0 0 0 6px #fffdf9, inset 0 0 0 7px rgba(166, 140, 102, .18);
}
.jc-lid {
    position: relative; height: 74px; margin: 0 -24px 46px;
    background: radial-gradient(60% 120% at 50% 0%, rgba(120, 190, 190, .2), transparent 70%), repeating-linear-gradient(118deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 4px), linear-gradient(180deg, #0f383d, #0a2a2e);
    border-bottom: 2px solid #c8b08a;
}
.jc-pearl {
    position: absolute; left: 50%; bottom: -32px; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #4b5f62; font-size: 26px;
    background: var(--pearl-fill);
    box-shadow: inset -5px -8px 14px rgba(56, 70, 78, .3), inset 3px 4px 8px rgba(255, 255, 255, .7), 0 0 0 3px #d9c3a0, 0 0 0 4px #8c7350, 0 10px 18px rgba(0, 0, 0, .25);
}
.jc-pearl .ico { position: relative; z-index: 1; }
.jcase h3 { margin: 8px 0 0; font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1.1; color: var(--ink); }
.jcase .strand { margin: 16px auto 18px; height: 18px; }
.jcase dl { margin: 0 auto; max-width: 320px; text-align: left; }
.jcase dl > div { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--hair-ink); }
.jcase dl > div:first-child { border-top: 0; }
.jcase dt { color: var(--champ-d); font-size: 18px; padding-top: 3px; }
.jcase dd { margin: 0; font-size: 18px; line-height: 1.45; color: var(--ink); }
.dress { margin: 38px auto 0; text-align: center; font-style: italic; font-size: 18px; color: var(--ink); }
.dress .lbl { display: block; margin-bottom: 6px; }

/* lokasi */
.map-frame { position: relative; margin: 34px auto 26px; padding: 6px; border-radius: 26px;
    background: linear-gradient(135deg, #f5ede2, #f2d4de 30%, #d5eee9 60%, #e1d8f5 85%, #f5ede2); box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.map-frame.rv-mask { clip-path: inset(100% 0 0 0 round 26px); }
.map-frame.rv-mask.in { clip-path: inset(0 0 0 0 round 26px); }
.leaflet-map, .map-illu { display: block; width: 100%; aspect-ratio: 4 / 3; position: relative; z-index: 1; border-radius: 20px; overflow: hidden; }
.leaflet-map .leaflet-tile-pane { filter: grayscale(.85) sepia(.25) hue-rotate(130deg) saturate(1.3) brightness(.9) contrast(1.05); }
.map-illu svg { width: 100%; height: 100%; display: block; }
.mi-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; }
.mi-pin .pearl.sm { width: 26px; height: 26px; }
.mi-pin::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(243, 211, 220, .6); animation: ring 2.4s ease-out infinite; }
.pn-marker span { display: block; width: 24px; height: 24px; margin: 4px auto 0; border-radius: 50%; background: var(--pearl-fill);
    box-shadow: 0 0 0 3px #d9c3a0, 0 0 0 4px #0a2a2e, 0 6px 12px rgba(0, 0, 0, .5); }
.leaflet-container { font-family: var(--sans); background: #0b2629; }
.loc-name { margin: 0 0 8px; font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 30px; line-height: 1.2; color: var(--pearl); }
#lokasi .btn-pearl { margin-top: 22px; }

/* galeri — liontin */
.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 18px; margin: 40px auto 26px; max-width: 760px; }
.pend {
    position: relative; display: flex; flex-direction: column; align-items: center; padding: 34px 0 0; border: 0; background: none; cursor: pointer; color: var(--ink);
    transform-origin: 50% 0;
}
.pend.in { animation: sway 6s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes sway { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }
.pd-chain { position: absolute; top: 0; left: 50%; width: 2px; height: 24px; margin-left: -1px;
    background: repeating-linear-gradient(180deg, #b49a72 0 3px, transparent 3px 5px); }
.pd-bail { position: absolute; top: 20px; left: 50%; width: 14px; height: 18px; margin-left: -7px; border-radius: 7px; border: 2.5px solid #b49a72; }
.pd-frame {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 100%; aspect-ratio: 3 / 4; padding: 6px; border-radius: 50%;
    background: linear-gradient(135deg, #f8f0e4, #efd0db 30%, #cfece6 58%, #ddd3f4 82%, #f8f0e4);
    box-shadow: 0 0 0 1.5px #b49a72, 0 18px 28px rgba(23, 48, 47, .2);
}
.pd-frame img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.pend:nth-child(3n) { grid-column: span 2; width: 82%; justify-self: center; }
.pend:nth-child(3n) .pd-frame { aspect-ratio: 16 / 11; }
.pd-no { margin-top: 10px; font-family: var(--sans); font-size: 9px; letter-spacing: .3em; color: var(--ink-dim); }
.gal.ph .pd-frame { cursor: default; background: var(--nacre-soft); box-shadow: 0 0 0 1.5px #b49a72, inset 0 0 0 6px rgba(255, 255, 255, .55), inset 0 0 0 7px rgba(180, 154, 114, .5), 0 18px 28px rgba(23, 48, 47, .2); animation: nacreDrift 8s ease-in-out infinite alternate; }
.ph-art { display: flex; font-size: 38px; color: #4d6466; }
.pend:nth-child(3n) .ph-art { font-size: 48px; }
.ph-cap { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 18px; color: var(--ink); }

/* hadiah (partial) */
.gift-wrap { position: relative; margin-top: 8px; }
.gift #gift-section { background: transparent !important; padding: 10px 0 0 !important; font-family: var(--sans) !important; }
.gift #gift-section .gs-heading { display: none; }
.gift #gift-section .gs-card { border-radius: 20px; border-color: rgba(166, 140, 102, .35); box-shadow: 0 14px 30px rgba(23, 48, 47, .1); background: #fffdf9; }
.gift #gift-section .gs-sbtn, .gift #gift-section .gs-btn-buy { border-radius: 999px !important; background: linear-gradient(100deg, #0f383d, #14454b 50%, #0f383d) !important; color: #f7f3ec !important; letter-spacing: .12em; }
.gift .gs-wrap, .gift .gs-track, .gift .gs-bank-track { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* rsvp */
.rsvp-form { padding: 42px 22px 30px; }
.f-l { display: block; margin: 22px 0 8px; font-family: var(--sans); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--champ); }
.rsvp-form .f-l:first-of-type { margin-top: 0; }
.f-in {
    position: relative; width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0;
    background: transparent; color: var(--pearl); font-family: var(--serif); font-size: 20px; outline: none; resize: vertical;
    transition: border-color .3s;
}
.f-in::placeholder { color: rgba(238, 232, 222, .35); font-style: italic; }
.f-in:focus { border-bottom-color: var(--blush); }
.att { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.att label { position: relative; cursor: pointer; }
.att input { position: absolute; opacity: 0; pointer-events: none; }
.att span { display: block; padding: 11px 4px; text-align: center; border: 1px solid var(--hair); border-radius: 999px; font-family: var(--sans); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-dim); transition: all .3s; }
.att input:checked + span { background: linear-gradient(100deg, #f5ede3, #f6dbe3 30%, #fbf7f0 50%, #d8efe9 75%, #e6def6); color: var(--ink); border-color: transparent; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.att input:focus-visible + span { outline: 1px solid var(--blush); outline-offset: 2px; }

/* ucapan */
.wishes-list { margin-top: 34px; max-height: 560px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--champ-d) transparent; }
.wish-item { display: flex; gap: 14px; padding: 20px 0; border-top: 1px solid rgba(217, 195, 160, .16); }
.wish-item.new { animation: fadeUp .8s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wish-avatar {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), transparent 55%), var(--av, #2f5a5c); color: var(--pearl);
    font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 20px; text-transform: uppercase;
    box-shadow: 0 0 0 2px #082326, 0 0 0 3px rgba(243, 211, 220, .45);
}
.wish-body { flex: 1; min-width: 0; }
.wish-header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.wish-name { font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 20px; color: var(--pearl); word-break: break-word; }
.wish-badge { font-family: var(--sans); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(207, 238, 232, .45); color: var(--aqua); }
.wish-badge.tidak { color: #f0c3cf; border-color: rgba(240, 195, 207, .45); }
.wish-badge.ragu { color: var(--cream-dim); border-color: rgba(238, 232, 222, .25); }
.wish-message { margin: 6px 0; font-size: 17.5px; line-height: 1.6; color: var(--cream-dim); word-break: break-word; }
.wish-time { font-family: var(--sans); font-size: 10px; letter-spacing: .1em; color: rgba(238, 232, 222, .4); }
.wish-empty { text-align: center; padding: 40px 0; color: var(--cream-dim); font-style: italic; }
.we-ico { display: inline-flex; font-size: 30px; color: var(--champ); margin-bottom: 8px; }

/* penutup */
.finale { position: relative; padding: 110px 22px calc(130px + env(safe-area-inset-bottom)); text-align: center; overflow: hidden;
    background: radial-gradient(60% 34% at 50% 18%, rgba(243, 211, 220, .14), transparent 70%), radial-gradient(120% 70% at 50% 30%, #0e3a40, #061a1d 70%); }
.fin-shell { position: relative; width: 200px; margin: 0 auto 26px; }
.fin-shell svg { display: block; width: 100%; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); }
.fin-pearl { position: absolute; left: 50%; top: 58%; width: 46px; height: 46px; margin-left: -23px;
    box-shadow: inset -4px -6px 10px rgba(56, 70, 78, .3), inset 3px 4px 8px rgba(255, 255, 255, .7), 0 0 30px 6px rgba(255, 245, 240, .35); }
.finale .lbl { margin-bottom: 10px; }
.fin-names { margin: 18px 0 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(58px, 17vw, 120px); line-height: .96; letter-spacing: -.015em; display: flex; flex-direction: column; align-items: center; }
.fin-names .amp { font-size: .5em; margin: .02em 0 .06em; }
.fam { display: grid; gap: 18px; margin: 30px auto 30px; max-width: 560px; }
.fam p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--cream); }
.fam span { display: block; margin-bottom: 4px; font-family: var(--sans); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--champ); }
.salam { margin: 0; font-style: italic; font-size: 20px; color: var(--champ-l); }
.monogram { display: flex; justify-content: center; margin: 56px 0 24px; }
.mono-pearl { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; gap: 2px;
    box-shadow: inset -8px -12px 20px rgba(56, 70, 78, .32), inset 5px 6px 12px rgba(255, 255, 255, .75), 0 0 0 4px rgba(217, 195, 160, .2), 0 14px 30px rgba(0, 0, 0, .45); }
.mono-pearl b, .mono-pearl i { position: relative; z-index: 1; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 28px; color: rgba(90, 100, 108, .55); text-shadow: 0 1px 0 rgba(255, 255, 255, .85); }
.mono-pearl i { font-family: var(--script); font-style: normal; font-size: 18px; }
.credit { margin: 0; font-family: var(--sans); font-size: 10px; letter-spacing: .14em; color: rgba(238, 232, 222, .42); }

/* lightbox */
.gallery-lightbox {
    display: none; opacity: 0; transition: opacity .3s; position: fixed; inset: 0; z-index: 9600;
    background: rgba(4, 16, 18, .95); align-items: center; justify-content: center;
}
.lb-img-wrap { max-width: 92vw; max-height: 82vh; padding: 6px; border-radius: 14px; background: linear-gradient(135deg, #f5ede2, #f2d4de 30%, #d5eee9 60%, #e1d8f5 85%, #f5ede2); }
.lb-img-wrap img { max-width: calc(92vw - 12px); max-height: calc(82vh - 12px); object-fit: contain; border-radius: 10px; }
.lb-close, .lb-prev, .lb-next {
    position: absolute; z-index: 2; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    background: rgba(6, 26, 29, .7); border: 1px solid var(--hair); color: var(--champ-l); font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.lb-close { top: calc(18px + env(safe-area-inset-top)); right: 18px; font-size: 16px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-counter { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); font-family: var(--sans); font-size: 11px; letter-spacing: .3em; color: var(--champ-l); }

/* qr fab spacing */
body.has-qr .finale { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }

/* ── Layar kecil (tinggi) ────────────────────────────────────────── */
@media (max-height: 700px) {
    .cv-names { font-size: clamp(40px, 11vw, 60px); }
    .cv-line { height: 16px; margin: 8px 0 6px; }
    .jcard { padding: 10px 22px; }
    .jc-n { font-size: 20px; }
    .cv-strand { margin-top: -40px; }
}

/* ── Desktop ─────────────────────────────────────────────────────── */
@media (min-width: 760px) {
    .ch { padding: 150px 48px 160px; }
    .ch-head { margin-bottom: 56px; }
    .couple { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
    .couple-amp { font-size: 96px; }
    .events { grid-template-columns: 1fr 1fr; gap: 34px; }
    .gal { grid-template-columns: repeat(3, 1fr); gap: 40px 26px; }
    .pend:nth-child(3n) { grid-column: auto; width: 100%; }
    .pend:nth-child(3n) .pd-frame { aspect-ratio: 3 / 4; }
    .pend:nth-child(4n+2) .pd-frame { aspect-ratio: 1; }
    .fam { grid-template-columns: 1fr 1fr; }
    .rsvp-form { padding: 50px 44px 40px; }
    .cv-strand { width: 520px; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
    .rv-up, .rv-frame { opacity: 1; transform: none; transition: none; }
    .mask > span { transform: none; transition: none; }
    .rv-mask, .lk-frame.rv-mask, .map-frame.rv-mask { clip-path: none; transition: none; }
    .strand i, .strand .thread { transform: none; transition: none; }
    .lid { animation: none; }
}