/* =========================================================================
   Tema Fanus — khitan: lentera emas, melati & tirai hijau giok.

   Titik tolaknya video 3D lembut: dinding krem berlengkung, bingkai bulat
   bercincin emas ganda berhias melati, tirai hijau giok di kedua sisi,
   lentera emas bergantung, masjid berkubah hijau, anak berbaju koko giok
   duduk di bantal.

   Gagasan utama: TIRAI & JENDELA. Foto (atau foto contoh) mengisi bingkai
   bulat sampul; kartu isi diberi "tirai" giok tipis di kedua sisinya;
   bunga melati di atas tiap judul; hitung mundur dalam jendela lengkung.
   Warna: hijau giok (utama), emas, krem, putih melati.
   Huruf: Amiri (nama & judul), Figtree (teks).
   ========================================================================= */

:root {
    --c-paper: #F8F4EC;
    --c-ink: #33473F;
    --c-accent: #4F8573;

    --c-muted: color-mix(in srgb, var(--c-ink) 70%, #fff);
    --c-rule: color-mix(in srgb, var(--fns-gold) 40%, #fff);
    --c-sunk: color-mix(in srgb, var(--c-accent) 9%, #fff);
    --c-action: var(--c-accent);

    --f-display: 'Amiri', 'Cormorant Garamond', Georgia, serif;
    --f-body: 'Figtree', system-ui, sans-serif;
    --f-script: var(--f-display);

    --fns-gold: #C9A464;
    --fns-gold-hi: #E4CD97;
    --fns-card: rgb(251 248 242 / .93);
    /* Video 9:16. Ponsel: menutupi layar. Layar lebar: utuh setinggi layar. */
    --fns-w: max(100vw, 100dvh * 9 / 16);
}

@media (min-aspect-ratio: 3 / 4) {
    :root { --fns-w: calc(100dvh * 9 / 16); }
}

body.inv.fns {
    background: #E9E6DA; color: var(--c-ink);
    font-family: var(--f-body); font-size: .95rem; line-height: 1.75;
}

.fns-amp { font-family: var(--f-display); font-style: italic; color: var(--fns-gold); }

/* ---------------------------------------------------------- latar tetap */

.fns-film { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #E9E6DA; }
.fns-film::before {
    content: ''; position: absolute; inset: -40px;
    background: var(--fns-blur) center / cover no-repeat;
    filter: blur(20px); opacity: .9;
}
.fns-film__stage {
    position: absolute; left: 50%; top: 50%; container-type: inline-size;
    width: var(--fns-w); aspect-ratio: 9 / 16; transform: translate(-50%, -50%);
    box-shadow: 0 0 80px rgb(50 75 65 / .2);
}
.fns-film__poster, .fns-film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fns-film__video { opacity: 0; transition: opacity .8s ease; }
.fns-film.is-live .fns-film__video { opacity: 1; }

/* ---------------------------------------------------------------- sampul */

.fns .inv-cover.fns-cover { background: transparent; padding: 0; overflow: hidden; display: block; }
.fns-cover__frame {
    position: absolute; left: 50%; top: 50%;
    width: var(--fns-w); aspect-ratio: 9 / 16; transform: translate(-50%, -50%);
    container-type: inline-size;
}
/* Bujur sangkar di dalam bingkai bulat video (pusat 50% / 75cqw, jari-jari
   dalam ±33cqw). */
.fns-cover__text {
    position: absolute; left: 50%; top: 70.8cqw; width: 50cqw; height: 50cqw; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 1.6cqw;
    text-align: center;
}
.fns-cover__text > * { animation: fns-rise 1.4s var(--ease) both .2s; }
@keyframes fns-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fns-cover__label { margin: 0; font: 500 2.9cqw/1.3 var(--f-body); letter-spacing: .16em; color: var(--fns-gold); }
.fns-cover__name {
    width: 100%; margin: 0;
    font: 700 11cqw/1.1 var(--f-display); color: var(--c-accent); text-wrap: balance;
}
.fns-cover__full { margin: 0; font: italic 400 3.4cqw/1.35 var(--f-display); color: var(--c-ink); text-wrap: balance; }
.fns-cover__date {
    margin: .8cqw 0 0; padding-top: 1.6cqw; border-top: 1px solid var(--fns-gold-hi);
    font: 500 2.9cqw/1.2 var(--f-body); letter-spacing: .08em; color: var(--c-ink);
}

/* Mode foto: foto mengisi lingkaran dalam (diameter ±66cqw). Teks duduk di
   atas pendar krem berbentuk elips yang tepinya lebur ke foto — tanpa tepi
   keras atau kotak. */
/* Foto di bingkai bulat: di lapisan latar tetap (layout), jadi bingkai
   tetap terisi setelah sampul terangkat. Pendar krem untuk keterbacaan nama
   hanya di sampul (.fns-cover__veil). */
.fns-film__photo, .fns-cover__veil {
    position: absolute; left: 15.5cqw; top: calc(70.8cqw - 34.5cqw); width: 69cqw; aspect-ratio: 1; border-radius: 50%;
}
.fns-film__photo { overflow: hidden; background: var(--c-sunk); animation: fns-photo-in 1.4s var(--ease) both .1s; }
.fns-film__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.fns-cover__veil {
    background:
        radial-gradient(ellipse 62% 34% at 50% 80%, rgb(251 248 242 / .96) 0 42%, rgb(251 248 242 / .7) 62%, transparent 100%),
        linear-gradient(180deg, transparent 58%, rgb(251 248 242 / .5) 100%);
}
@keyframes fns-photo-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.fns-cover--photo .fns-cover__text { top: 89cqw; width: 46cqw; height: 22cqw; gap: .8cqw; }
.fns-cover--photo .fns-cover__label { font-size: 2.3cqw; }
.fns-cover--photo .fns-cover__name { font-size: 9cqw; }
.fns-cover--photo .fns-cover__date { margin-top: .2cqw; padding-top: 0; border-top: 0; font-size: 2.6cqw; }
.fns-cover--photo .fns-cover__date::before {
    content: ''; display: block; width: 12cqw; height: 1px; margin: 0 auto 1cqw;
    background: linear-gradient(90deg, transparent, var(--fns-gold), transparent);
}

/* Sapaan tamu: langit atas, di antara kedua gugus balon. */
.fns-cover__guestbox {
    position: absolute; left: 22cqw; top: 6cqw; width: 56cqw; height: 26cqw;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center; text-align: center;
    padding: 2cqw 4cqw; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, rgb(250 246 239 / .9) 0 45%, rgb(250 246 239 / .55) 62%, transparent 71%);
    animation: fns-rise 1.4s var(--ease) both .5s;
}
/* Tombol: di bawah lingkaran, di antara bulan sabit & bayi. */
.fns-cover__foot {
    position: absolute; left: 0; right: 0; top: 109.5cqw;
    display: flex; flex-direction: column; align-items: center;
    animation: fns-rise 1.4s var(--ease) both .7s;
}
.fns-cover__to { margin: 0; font-size: max(.7rem, 2.6cqw); color: var(--c-muted); }
.fns-cover__guest {
    max-width: 100%; margin: .05rem 0 0;
    font: 400 max(1rem, 4.2cqw)/1.25 var(--f-display); color: var(--c-ink); overflow-wrap: anywhere;
}
.fns-open {
    margin-top: 0; padding: .8rem 1.5rem; border: 0; border-radius: 999px; white-space: nowrap;
    background: var(--c-accent); color: #fff;
    font: 500 .84rem/1 var(--f-body); letter-spacing: .04em; cursor: pointer;
    box-shadow: 0 0 0 3px rgb(251 248 242 / .9), 0 0 0 4px var(--fns-gold), 0 10px 20px -10px rgb(40 65 55 / .6);
    transition: background .25s ease;
}
.fns-open:hover { background: var(--c-ink); }
.fns-open:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 7px; }

/* ---------------------------------------------------------------- isi */

body.fns:not(.is-open) .fns-main { visibility: hidden; opacity: 0; }
body.fns.is-open .fns-main { animation: fns-fade 1s ease both .3s; }
@keyframes fns-fade { from { opacity: 0; } }

.fns .inv__main.fns-main {
    position: relative; z-index: 1;
    width: min(100% - 2.5rem, 26rem); max-width: none; margin: 0 auto; padding: 36vh 0 0;
}

.fns .inv-section {
    position: relative; margin: 0 0 16vh; padding: 2.2rem 1.9rem 2.5rem;
    border: 1px solid var(--fns-gold-hi); border-radius: 1.4rem;
    text-align: center; background: var(--fns-card);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    /* "Tirai" giok tipis berlipit di kedua sisi kartu. */
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-accent) 32%, #fff) 0 3px, color-mix(in srgb, var(--c-accent) 18%, #fff) 3px 6px) left / 12px 100% no-repeat,
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-accent) 18%, #fff) 0 3px, color-mix(in srgb, var(--c-accent) 32%, #fff) 3px 6px) right / 12px 100% no-repeat,
        var(--fns-card);
    box-shadow: 0 22px 44px -26px rgb(40 65 55 / .45);
}

/* Bunga melati bertangkai daun di atas judul. */
.fns-head { margin-bottom: 1.4rem; text-align: center; }
.fns-jasmine { display: block; overflow: visible; }
.fns-jasmine__leaf { fill: var(--c-accent); }
.fns-jasmine__flower path { fill: #fff; stroke: color-mix(in srgb, var(--fns-gold) 70%, #fff); stroke-width: .8; }
.fns-jasmine__heart { fill: var(--fns-gold); }
.fns-head__jasmine { width: 4.4rem; height: auto; margin: -.4rem auto .3rem; }
.fns-head__title { margin: 0; font: 700 clamp(1.7rem, 7.5vw, 2rem)/1.2 var(--f-display); color: var(--c-accent); }
.fns-head__lead { max-width: 22rem; margin: .5rem auto 0; color: var(--c-muted); }

/* Pembuka */
.fns .inv-bismillah { color: var(--c-accent); }
.fns-verse { margin: 0 0 1.4rem; }
.fns-verse__text { margin: 0; font: italic 400 1.08rem/1.75 var(--f-display); color: var(--c-ink); }
.fns-verse__source { margin-top: .5rem; font: 500 .78rem/1.3 var(--f-body); letter-spacing: .12em; color: var(--fns-gold); }
.fns-lede { max-width: 23rem; margin: 0 auto; color: var(--c-muted); }

/* Ananda: foto bulat bercincin emas ganda + ranting melati di sudut */
.fns-photo {
    position: relative; width: min(12rem, 66%); aspect-ratio: 1; margin: .4rem auto 1.5rem; padding: 6px; border-radius: 50%;
    box-shadow: 0 0 0 2px var(--fns-gold), 0 0 0 7px var(--fns-card), 0 0 0 8px var(--fns-gold-hi);
}
.fns-photo img, .fns-photo__initial {
    display: grid; place-items: center; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
    background: var(--c-sunk); font: 400 4.6rem/1 var(--f-display); color: var(--c-accent);
}
.fns-child__name { margin: 0; font: 400 clamp(2.4rem, 11vw, 2.9rem)/1.1 var(--f-display); color: var(--c-accent); overflow-wrap: break-word; }
.fns-child__full { margin: .35rem 0 0; font: italic 400 1.1rem/1.4 var(--f-display); color: var(--c-ink); text-wrap: balance; }
.fns-child__order { display: inline-block; margin: .6rem 0 0; padding: .15rem .85rem; border-radius: 999px; background: var(--c-sunk); font-size: .8rem; font-weight: 500; color: var(--c-accent); }
.fns-child__bio { max-width: 22rem; margin: .8rem auto 0; font-size: .9rem; color: var(--c-muted); }

/* Orang tua */
.fns-parents__names { display: grid; gap: .1rem; }
.fns-parents__name { margin: 0; font: 400 1.3rem/1.4 var(--f-display); color: var(--c-ink); text-wrap: balance; }
.fns-parents__name span { display: block; font: 500 .74rem/1.7 var(--f-body); letter-spacing: .1em; color: var(--c-muted); }
.fns-parents__amp { margin: .2rem 0; font: italic 400 1.8rem/1 var(--f-display); color: var(--fns-gold); }

/* Hitung mundur: jendela lengkung bertepi emas */
.fns-countdown { display: flex; justify-content: center; gap: .5rem; margin: 0 auto 2rem; }
.fns .fns-countdown .inv-countdown__cell {
    display: grid; justify-items: center; align-content: center; gap: .1rem; min-width: 3.6rem; padding: 1.1rem .3rem .6rem;
    border: 1px solid var(--fns-gold); border-radius: 999px 999px .5rem .5rem; background: #fff;
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px color-mix(in srgb, var(--c-accent) 30%, #fff);
}
.fns .fns-countdown b { font: 700 1.45rem/1 var(--f-display); color: var(--c-accent); }
.fns .fns-countdown span { font-size: .62rem; font-weight: 600; letter-spacing: .03em; text-transform: none; color: var(--c-muted); }

/* Acara */
.fns-events__list { display: grid; }
.fns-event { padding: 1.3rem 0; }
.fns-event + .fns-event { border-top: 1px solid var(--c-rule); }
.fns-event.is-past { opacity: .55; }
.fns-event__title { margin: 0 0 .25rem; font: 400 1.7rem/1.15 var(--f-display); color: var(--c-accent); }
.fns-event__date { margin: 0; font: 500 1rem/1.4 var(--f-body); }
.fns-event__time { margin: 0; color: var(--c-muted); }
.fns-event__venue { margin: .85rem 0 0; font-weight: 600; }
.fns-event__address { margin: .1rem 0 0; font-size: .88rem; color: var(--c-muted); }
.fns-event__meta { margin: .35rem 0 0; font-size: .84rem; color: var(--c-muted); }
.fns-event__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.1rem; }
.fns-event__actions .inv-btn { flex: 1 1 8.5rem; text-align: center; }

/* Tombol */
.fns .inv-btn { border-radius: 999px; padding: .72rem 1.2rem; font: 500 .82rem/1.2 var(--f-body); letter-spacing: .03em; text-transform: none; }
.fns .inv-btn--solid { background: var(--c-accent); border-color: var(--c-accent); color: #fff; box-shadow: none; }
.fns .inv-btn--ghost { background: #fff; border-color: var(--fns-gold-hi); color: var(--c-accent); }
.fns .inv-btn:hover { filter: none; background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

/* Galeri (markup _base): foto pertama bulat dalam bingkai emas */
.fns .inv-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.fns .inv-gallery__cell { padding: 0; border: 0; border-radius: 1rem; aspect-ratio: 1; overflow: hidden; background: var(--c-sunk); cursor: zoom-in; }
.fns .inv-gallery__cell:first-child {
    grid-column: 1 / -1; width: 76%; margin: .4rem auto 1rem; border-radius: 50%;
    box-shadow: 0 0 0 2px var(--fns-gold), 0 0 0 7px var(--fns-card), 0 0 0 8px var(--fns-gold-hi);
}
.fns .inv-gallery__cell img { width: 100%; height: 100%; object-fit: cover; }

/* Video & siaran langsung */
.fns .inv-video { padding: 0; border: 0; border-radius: 1rem; overflow: hidden; background: #000; }
.fns .inv-video iframe { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Form RSVP & ucapan (markup _base) */
.fns .inv-form { gap: 1.3rem; text-align: left; }
.fns .inv-label { font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink); }
.fns .inv-input { padding: .8rem 1rem; border: 1px solid var(--c-rule); border-radius: .9rem; background: #fff; font-size: .95rem; }
.fns .inv-input:focus, .fns .inv-input:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent); }
.fns .inv-choice { border: 1px solid var(--c-rule); border-radius: .9rem; background: #fff; }
.fns .inv-choice:has(:checked) { border-color: var(--c-accent); background: var(--c-sunk); color: var(--c-accent); }
.fns .inv-choice input { accent-color: var(--c-accent); }
.fns .inv-form .inv-btn--solid { width: 100%; padding-block: .95rem; }
.fns .inv-tally div { border: 1px solid var(--c-rule); border-radius: .9rem; background: #fff; }
.fns .inv-tally dd { font-family: var(--f-display); font-size: 1.8rem; color: var(--c-accent); }
.fns .inv-wish { padding: .95rem 1.1rem; border: 0; border-radius: .9rem; background: #fff; text-align: left; box-shadow: inset 0 0 0 1px var(--c-rule); }
.fns .inv-wish__name { font-weight: 600; color: var(--c-accent); }

/* Hadiah: kartu sage dengan lingkaran emas samar */
.fns .inv-gifts { display: grid; gap: 1rem; }
.fns .inv-gift {
    position: relative; overflow: hidden; isolation: isolate; padding: 1.9rem 1.4rem; border: 0; border-radius: 1.4rem; text-align: center; color: #fff;
    background: linear-gradient(165deg, color-mix(in srgb, var(--c-accent) 88%, #fff), color-mix(in srgb, var(--c-accent) 80%, #132a22));
    box-shadow: inset 0 0 0 1px var(--fns-gold-hi);
}
.fns .inv-gift::before {
    content: ''; position: absolute; z-index: -1; width: 13rem; aspect-ratio: 1; right: -5rem; top: -5rem; border-radius: 50%;
    border: 1px solid rgb(228 205 151 / .6); box-shadow: 0 0 0 8px rgb(255 255 255 / .05), 0 0 0 9px rgb(228 205 151 / .35);
}
.fns .inv-gift__logo { max-height: 1.6rem; margin-inline: auto; filter: brightness(0) invert(1); opacity: .9; }
.fns .inv-gift__label { font-size: .84rem; letter-spacing: .03em; text-transform: none; color: rgb(255 255 255 / .8); }
.fns .inv-gift__account { font: 400 1.6rem/1.35 var(--f-display); letter-spacing: .06em; color: #fff; }
.fns .inv-gift__holder, .fns .inv-gift__address { color: rgb(255 255 255 / .9); }
.fns .inv-gift .inv-btn--ghost { margin-top: 1rem; background: #fff; border: 0; color: var(--c-accent); }
.fns .inv-gift__qr { display: block; max-width: 12rem; margin: .75rem auto 0; padding: .5rem; background: #fff; border-radius: .6rem; }

/* Penutup */
.fns .fns-closing { margin-bottom: 52vh; }
.fns-closing__text { max-width: 22rem; margin: 0 auto; color: var(--c-muted); }
.fns-closing__salutation { margin: 1.5rem 0 0; font: 500 .8rem/1.3 var(--f-body); letter-spacing: .12em; color: var(--fns-gold); }
.fns-closing__names { display: grid; margin: .5rem 0 0; font: 400 1.3rem/1.4 var(--f-display); color: var(--c-accent); text-wrap: balance; }
.fns-closing__names .fns-amp { font-size: 1.5rem; line-height: 1.3; }
.fns-closing__tag { margin: .8rem 0 0; font-size: .86rem; color: var(--c-muted); }

.fns .fns-footer {
    position: relative; margin: 0 -1.25rem; padding: 1rem; border-radius: 1.25rem 1.25rem 0 0;
    background: rgb(51 71 63 / .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: rgb(255 255 255 / .85); font-size: .75rem; text-align: center;
}
.fns .fns-footer a { color: var(--fns-gold-hi); }

/* Musik, tombol QR, navigasi cepat */
.fns .inv-music { background: var(--c-accent); }
.fns .inv-checkin-btn { background: var(--c-accent); color: #fff; }
.fns { --qn-bg: rgb(251 248 242 / .93); --qn-fg: var(--c-muted); --qn-active: var(--c-accent); }

/* ------------------------------------------------------------ layar lebar */

@media (min-width: 900px) {
    .fns .inv-cover.fns-cover { left: 0; right: 0; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .fns-cover__text > *, .fns-cover__foot, .fns-cover__guestbox, .fns-film__photo, body.fns.is-open .fns-main { animation: none; }
    .fns-open, .fns-film__video { transition: none; }
}

/* ------------------------------------------------- HP: bilah alamat menyusut
   Di HP, bilah alamat menutup sendiri saat digulir → tinggi layar berubah →
   latar fixed ikut berubah ukuran ("melompat"). Latar memakai tinggi layar
   TERBESAR (lvh) yang tetap.

   Sebelum dibuka: tinggi layar saat ini (dvh), supaya teks sampul tetap sejajar
   dengan bingkai video. Setelah dibuka: tinggi TERBESAR (lvh) yang tetap —
   bergeser halus sekali saat sampul memudar, lalu tidak berubah lagi. */
@supports (height: 100lvh) {
    .fns-film { bottom: auto; height: 100dvh; transition: height .7s ease; }
    .fns-film__stage { transition: width .7s ease; }
    body.inv.is-open .fns-film { height: 100lvh; }
    body.inv.is-open { --fns-w: max(100vw, 100lvh * 9 / 16); }
    @media (min-aspect-ratio: 3 / 4) { body.inv.is-open { --fns-w: calc(100lvh * 9 / 16); } }
}