/* ==========================================================
   DInvite — Halaman undangan publik (tema dasar + koleksi tema tambahan)
   ========================================================== */

/* ---------- Variabel tema ---------- */
.t-ivory {
    --bg: #fbf7f0; --bg-2: #f3eadb; --card: #fffdf9; --ink: #3b2f22; --muted: #7d6c58;
    --accent: #a8834c; --accent-2: #c9a36b; --on-accent: #fff; --line: rgba(168,131,76,.28);
    --hero-rgb: 251,247,240; --tint-a: .82; --hero-ink: #3b2f22;
}
.t-midnight {
    --bg: #15120f; --bg-2: #1d1915; --card: #221d18; --ink: #f2e8d8; --muted: #b3a48f;
    --accent: #d4af7a; --accent-2: #e8c995; --on-accent: #1a1511; --line: rgba(212,175,122,.25);
    --hero-rgb: 21,18,15; --tint-a: .72; --hero-ink: #f6eee2;
}
.t-sage {
    --bg: #f3f5ef; --bg-2: #e4eadc; --card: #fbfcf9; --ink: #2f3b2b; --muted: #66755f;
    --accent: #5d7653; --accent-2: #87a07b; --on-accent: #fff; --line: rgba(93,118,83,.25);
    --hero-rgb: 243,245,239; --tint-a: .8; --hero-ink: #2f3b2b;
}
.t-rose {
    --bg: #fdf6f4; --bg-2: #f7e4e0; --card: #fffbfa; --ink: #4a2e2e; --muted: #8b6464;
    --accent: #b0686a; --accent-2: #d29a99; --on-accent: #fff; --line: rgba(176,104,106,.25);
    --hero-rgb: 253,246,244; --tint-a: .8; --hero-ink: #4a2e2e;
}
.t-batik {
    --bg: #3a1e10; --bg-2: #4a2716; --card: #52301c; --ink: #f6e6cc; --muted: #d4b994;
    --accent: #e3be86; --accent-2: #f3dcb5; --on-accent: #3a1e10; --line: rgba(243,220,181,.25);
    --hero-rgb: 58,30,16; --tint-a: .72; --hero-ink: #f6e6cc;
    --pattern: radial-gradient(circle at 25% 25%, rgba(243,220,181,.07) 2px, transparent 3px) 0 0 / 22px 22px,
               radial-gradient(circle at 75% 75%, rgba(243,220,181,.07) 2px, transparent 3px) 0 0 / 22px 22px;
}
.t-ocean {
    --bg: #f2f8fa; --bg-2: #ddedf1; --card: #fbfdfe; --ink: #1f3d47; --muted: #5a7983;
    --accent: #2f6f82; --accent-2: #5f9aab; --on-accent: #fff; --line: rgba(47,111,130,.22);
    --hero-rgb: 242,248,250; --tint-a: .8; --hero-ink: #1f3d47;
}

/* ==========================================================
   Tema bergambar (adat): bingkai sudut, pita, ilustrasi
   Gambar & warna diatur di assets/css/themes/{tema}.css
   ========================================================== */
.tm-frame { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.tm-corner { position: absolute; width: clamp(70px, 18vw, 110px); height: auto; }
.tm-corner--tl { top: 12px; left: 12px; }
.tm-corner--tr { top: 12px; right: 12px; transform: scaleX(-1); }
.tm-corner--bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.tm-corner--br { bottom: 12px; right: 12px; transform: scale(-1, -1); }
.tm-band { position: absolute; left: 0; right: 0; height: 18px; background-position: center; background-repeat: repeat-x; background-size: 40px 18px; }
.tm-band--top { top: 0; transform: scaleY(-1); }
.tm-band--bottom { bottom: 0; }
.tm-house { width: min(270px, 70vw); height: auto; margin: 0 auto; filter: drop-shadow(0 14px 22px rgba(0,0,0,.35)); }
.cover .tm-house { width: min(230px, 58vw); margin-bottom: .2rem; animation: tmRise 1.4s ease both; }
.hero .tm-house { width: min(250px, 66vw); }
.aside .tm-house { width: 300px; }
.tm-house--sm { width: 170px; margin-bottom: 1.2rem; opacity: .95; }
.tm-divider { width: 200px; height: auto; margin: 0 auto .9rem; }
@keyframes tmRise { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.hero__inner, .aside__inner { position: relative; z-index: 1; }

/* Lapisan warna di atas foto sampul. --tint-a (0–1) bisa diatur pengguna per undangan
   lewat editor (atribut style pada <body>), bawaannya mengikuti tema. */
body { --hero-tint: rgba(var(--hero-rgb, 0,0,0), var(--tint-a, .75)); }
/* Saat lapisan tipis, teks diberi "cahaya" warna tema agar tetap terbaca di atas foto */
.cover__inner, .hero__inner, .aside__inner { text-shadow: 0 0 18px rgba(var(--hero-rgb, 0,0,0), calc(1 - var(--tint-a, .75))), 0 1px 3px rgba(var(--hero-rgb, 0,0,0), calc(.9 - var(--tint-a, .75))); }
.countdown, .cover__inner .ibtn { text-shadow: none; }

/* Tema gelap: kontrol bawaan browser (daftar pilihan, kursor, scrollbar) ikut gelap */
.t-midnight, .t-batik { color-scheme: dark; }
.t-ivory, .t-sage, .t-rose, .t-ocean { color-scheme: light; }

/* ---------- Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.is-auto-scrolling { scroll-behavior: auto !important; }
body {
    margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.7;
    color: var(--ink); background: var(--bg); background-image: var(--pattern, none);
    -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; }
[hidden] { display: none !important; }

.kicker { display: block; font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.names { font-family: 'Great Vibes', cursive; font-weight: 400; line-height: 1.15; color: var(--hero-ink, var(--ink)); }
.names i { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--accent); font-size: .6em; }
.names--xl { font-size: clamp(3.5rem, 6vw, 5.5rem); }
.names--lg { font-size: 3.4rem; }
.names--md { font-size: 2.3rem; color: var(--ink); }

.ibtn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .7rem 1.4rem; border-radius: 999px; border: 1px solid var(--accent);
    background: transparent; color: var(--accent); font: 600 .86rem 'Plus Jakarta Sans', sans-serif;
    text-decoration: none; cursor: pointer; transition: background .25s, color .25s, transform .25s;
}
.ibtn:hover { background: var(--accent); color: var(--on-accent); }
.ibtn:active { transform: scale(.98); }
.ibtn svg { width: 18px; height: 18px; }
.ibtn--solid { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -12px var(--accent); }
.ibtn--solid:hover { background: var(--accent-2); }
.ibtn--sm { padding: .45rem 1rem; font-size: .78rem; }
.ibtn--block { width: 100%; }
.ibtn:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.draft-bar { position: fixed; top: 0; inset-inline: 0; z-index: 200; padding: .5rem 1rem; text-align: center; font-size: .82rem; background: #1c1917; color: #f3e9d8; }
.draft-bar a { color: #d4af7a; font-weight: 700; }

/* ---------- Sampul ---------- */
.cover {
    position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 2rem 1.5rem;
    text-align: center; color: var(--hero-ink);
    background: linear-gradient(var(--hero-tint), var(--hero-tint)), var(--cover, none) center / cover no-repeat, var(--bg);
    transition: transform 1s cubic-bezier(.7,0,.2,1), opacity 1s;
}
.cover::before { content: ''; position: absolute; inset: 18px; border: 1px solid var(--line); border-radius: 18px; pointer-events: none; }
.cover::after { content: ''; position: absolute; inset: 26px; border: 1px solid var(--line); border-radius: 12px; opacity: .5; pointer-events: none; }
.cover.is-open { transform: translateY(-100%); opacity: .4; pointer-events: none; }
.cover__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 420px; animation: rise 1.2s ease both; }
.cover .names { font-size: clamp(3.2rem, 13vw, 5rem); }
.cover__date { font: italic 500 1.2rem 'Cormorant Garamond', serif; }
.cover__to { display: grid; gap: .2rem; margin: 1.2rem 0 .8rem; }
.cover__to small { font-size: .76rem; opacity: .75; }
.cover__to strong { font: 600 1.55rem 'Cormorant Garamond', serif; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Tata letak ---------- */
.layout { display: block; }
.aside { display: none; }
.page { max-width: 520px; margin: 0 auto; background: var(--bg); background-image: var(--pattern, none); min-height: 100vh; box-shadow: 0 0 60px rgba(0,0,0,.08); }

@media (min-width: 960px) {
    .layout { display: grid; grid-template-columns: 1fr 480px; }
    .aside {
        display: grid; place-items: center; position: sticky; top: 0; height: 100vh; padding: 3rem; text-align: center;
        background: linear-gradient(var(--hero-tint), var(--hero-tint)), var(--cover, none) center / cover no-repeat, var(--bg-2);
    }
    .aside__inner { display: grid; gap: 1rem; }
    .aside__date { font: italic 500 1.4rem 'Cormorant Garamond', serif; color: var(--hero-ink); }
    .page { max-width: none; margin: 0; }
}

/* ---------- Seksi ---------- */
.sec { position: relative; padding: 4.2rem 1.8rem; text-align: center; }
.sec--tint { background: var(--bg-2); }
.sec__title { font: 600 2.1rem 'Cormorant Garamond', serif; margin-bottom: 1.6rem; color: var(--ink); }
.sec__title::after { content: '❦'; display: block; margin-top: .3rem; font-size: 1rem; color: var(--accent); }
.lead-txt { color: var(--muted); max-width: 400px; margin: 0 auto 2rem; font-size: .92rem; }

.hero {
    min-height: 100vh; display: grid; place-items: center; color: var(--hero-ink);
    background: linear-gradient(var(--hero-tint), var(--hero-tint)), var(--cover, none) center / cover no-repeat, var(--bg-2);
}
.hero__inner { display: grid; justify-items: center; gap: 1.1rem; }
.hero__date { font: italic 500 1.3rem 'Cormorant Garamond', serif; }
.hero__couple { display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; margin: .1rem 0 .15rem; }
.hero__couple .person { flex: 0 1 140px; min-width: 0; }
.hero__couple .pframe { width: min(132px, 28vw); margin: 0 auto; padding: 6px; }
.hero__couple .pframe::after { width: 8px; height: 8px; bottom: -4px; box-shadow: 0 0 0 3px var(--bg); }
.hero__couple .pframe__arch { border-radius: 999px 999px 10px 10px; }
.hero__couple .names, .hero__couple .person__parents, .hero__couple .person__soc { display: none; }
.hero__couple .amp { font-size: 1.9rem; margin: 0 -.1rem; }
.countdown { display: grid; grid-template-columns: repeat(4, 66px); gap: .6rem; margin: .4rem 0 .6rem; }
.countdown div { padding: .7rem 0; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(0,0,0,.4); }
.countdown b { display: block; font: 600 1.6rem/1 'Cormorant Garamond', serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.countdown small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.sec--quote { padding-block: 3.2rem 1rem; }
.sec--quote + .sec { padding-top: 1.6rem; }                 /* kutipan menyatu dengan salam pembuka */
.ornament { display: block; font-size: 1.8rem; color: var(--accent); margin-bottom: .8rem; }
.quote { font: italic 500 1.2rem/1.65 'Cormorant Garamond', serif; color: var(--ink); max-width: 400px; margin: 0 auto; }

.couple { display: grid; gap: 1.2rem; }
.person__parents { color: var(--muted); font-size: .88rem; margin-top: .4rem; }
.amp { font: italic 500 2.6rem 'Cormorant Garamond', serif; color: var(--accent); line-height: 1; }

.events { display: grid; gap: 1.2rem; }
.event { padding: 2rem 1.5rem; border-radius: 22px; background: var(--card); border: 1px solid var(--line); position: relative; }
.event::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--line); border-radius: 16px; pointer-events: none; }
.event h3 { font: 600 1.7rem 'Cormorant Garamond', serif; color: var(--accent); margin-bottom: .6rem; }
.event__date { font-weight: 700; }
.event__time { color: var(--muted); font-size: .9rem; }
.divider { display: block; width: 40px; height: 1px; background: var(--accent); margin: 1rem auto; }
.event__place { font-weight: 600; }
.event__addr { color: var(--muted); font-size: .88rem; }
.event__btns { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.3rem; }

.story { color: var(--muted); max-width: 420px; margin: 0 auto; text-align: left; }

/* ===== The Couple: foto berbingkai lengkung + media sosial ===== */
.couple--framed { gap: 1.6rem; }
.couple--framed .amp { font-size: 3rem; }
.pframe { position: relative; width: min(210px, 62vw); margin: 0 auto 1.3rem; padding: 10px; }
.pframe::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--accent); border-radius: 999px 999px 22px 22px; opacity: .85; }
.pframe::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 11px; height: 11px; transform: translateX(-50%) rotate(45deg); background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.sec--tint .pframe::after { box-shadow: 0 0 0 4px var(--bg-2); }
.pframe__arch { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 14px 14px; background: var(--bg-2); box-shadow: 0 22px 44px -26px rgba(0,0,0,.55), inset 0 0 0 1px var(--line); }
.pframe__arch img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 1.2s ease; }
.pframe:hover .pframe__arch img { transform: scale(1.04); }
.pframe__init { position: absolute; inset: 0; display: grid; place-items: center; font: 400 4.6rem/1 'Great Vibes', cursive; color: var(--accent); background: radial-gradient(circle at 50% 35%, var(--card), var(--bg-2)); }
.person__soc { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .9rem; }
.psoc { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--accent); background: var(--card); text-decoration: none; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.psoc .soc-ic { width: 17px; height: 17px; }
.psoc:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: translateY(-2px); }

/* ===== Love Story: linimasa ===== */
.story--intro { margin-bottom: 2.2rem; text-align: center; }
.lstory { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 440px; display: grid; gap: 1.6rem; text-align: left; }
.lstory::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--accent), var(--line) 85%, transparent); }
.lstory__item { position: relative; padding-left: 38px; }
.lstory__dot { position: absolute; left: 5px; top: 18px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--line); }
.sec--tint .lstory__dot { box-shadow: 0 0 0 4px var(--bg-2), 0 0 0 5px var(--line); }
.lstory__card { overflow: hidden; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 36px -30px rgba(0,0,0,.5); }
.lstory__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.lstory__body { padding: 1.05rem 1.2rem 1.2rem; }
.lstory__date { display: inline-block; margin-bottom: .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.lstory__title { font: 600 1.45rem/1.2 'Cormorant Garamond', serif; color: var(--ink); }
.lstory__text { margin-top: .45rem; color: var(--muted); font-size: .9rem; line-height: 1.7; overflow-wrap: anywhere; }
@media (max-width: 380px) {
    .sec--couple { padding-inline: 1.3rem; }
    .lstory__item { padding-left: 32px; }
    .lstory__body { padding: .95rem 1rem 1.05rem; }
}

/* Galeri: slider geser */
.gslider { position: relative; border-radius: 18px; overflow: hidden; background: var(--bg-2); }
.gslider__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab;
}
.gslider__track::-webkit-scrollbar { display: none; }
.gslider__track.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.gslider__track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gslider__slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; aspect-ratio: 4 / 5; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gslider__slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.gslider__nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.85); color: #1c1917; font-size: 1.6rem; line-height: 1; cursor: pointer;
    box-shadow: 0 6px 18px -6px rgba(0,0,0,.4); display: grid; place-items: center; padding-bottom: 3px;
}
.gslider__nav--prev { left: 10px; }
.gslider__nav--next { right: 10px; }
.gslider__count { position: absolute; top: 10px; right: 10px; padding: .2rem .6rem; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: .74rem; font-variant-numeric: tabular-nums; }
.gslider__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: .9rem; }
.gslider__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: width .25s, background .25s; }
.gslider__dots button.is-active { width: 22px; background: var(--accent); }
.gslider__hint { margin-top: .6rem; font-size: .74rem; color: var(--muted); }

/* Galeri: kisi 2 kolom & semua ke bawah */
.gallery { display: grid; gap: .5rem; }
.gallery--grid { grid-template-columns: 1fr 1fr; }
.gallery--grid .gallery__item:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery--grid .gallery__item { aspect-ratio: 1; }
.gallery--stack { gap: .8rem; }
.gallery__item { display: block; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--bg-2); cursor: zoom-in; }
.gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery--stack .gallery__item img { height: auto; }
.gallery__item:hover img { transform: scale(1.03); }

/* Lightbox: foto besar dengan swipe */
.lightbox { position: fixed; inset: 0; z-index: 150; overflow: hidden; background: rgba(0,0,0,.92); touch-action: pan-y; }
.lightbox__track { display: flex; height: 100%; will-change: transform; }
.lightbox__slide { flex: 0 0 100%; display: grid; place-items: center; padding: 3.5rem 1rem; }
.lightbox__slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; user-select: none; -webkit-user-drag: none; }
.lightbox__close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.8rem; cursor: pointer; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.9rem; cursor: pointer; display: grid; place-items: center; padding-bottom: 4px; }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__count { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: .85rem; font-variant-numeric: tabular-nums; }
@media (hover: none) { .lightbox__nav { display: none; } }

.gifts { display: grid; gap: 1rem; }
.gift { display: grid; justify-items: center; gap: .25rem; padding: 1.5rem; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.gift__bank { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; color: var(--accent); }
.gift__num { font: 600 1.6rem 'Cormorant Garamond', serif; letter-spacing: .04em; }
.gift__name { color: var(--muted); font-size: .86rem; margin-bottom: .6rem; }
/* Amplop Digital bergaya ATM (gaya kartu di assets/css/atm.css) */
.reveal .gift-atm { opacity: 0; transform: translateY(24px) rotateX(14deg); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible .gift-atm { opacity: 1; transform: none; }
.reveal.is-visible .gift-atm:nth-child(2) { transition-delay: .15s; }
.reveal.is-visible .gift-atm:nth-child(3) { transition-delay: .3s; }
.reveal.is-visible .gift-atm:nth-child(4) { transition-delay: .45s; }
.reveal.is-visible .atm__shine { animation: atmShine 1.6s ease .4s both; }
@media (prefers-reduced-motion: reduce) { .reveal .gift-atm { opacity: 1; transform: none; } }


/* RSVP */
.rsvp { display: grid; gap: 1rem; text-align: left; padding: 1.5rem; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.ifld { display: grid; gap: .35rem; }
.ifld > span { font-size: .8rem; font-weight: 600; color: var(--ink); }
.ifld input, .ifld textarea, .ifld select {
    width: 100%; padding: .75rem .9rem; border-radius: 12px; border: 1px solid var(--line);
    background: var(--bg); color: var(--ink); font: inherit; font-size: .92rem;
}
.ifld select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 2.6rem; cursor: pointer; line-height: inherit;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--accent) 50%),
        linear-gradient(135deg, var(--accent) 50%, transparent 50%);
    background-position: calc(100% - 1.2rem) 52%, calc(100% - .85rem) 52%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
.ifld select::-ms-expand { display: none; }
.ifld select option { color: var(--ink); background: var(--card); }
.ifld input:focus, .ifld textarea:focus, .ifld select:focus { outline: none; border-color: var(--accent); }
.att { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.att label { position: relative; }
.att input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.att span { display: block; padding: .6rem .3rem; border-radius: 10px; border: 1px solid var(--line); text-align: center; font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--muted); transition: all .2s; }
.att input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.att input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.ialert { padding: .75rem .9rem; border-radius: 12px; font-size: .86rem; }
.ialert--ok { background: rgba(80,150,90,.14); color: #3d7a47; }
.ialert--err { background: rgba(190,80,80,.13); color: #b24b4b; }
.t-midnight .ialert--ok, .t-batik .ialert--ok { color: #a9dcae; }
.t-midnight .ialert--err, .t-batik .ialert--err { color: #f2b3b3; }

.wishes { margin-top: 2rem; text-align: left; }
.wishes__title { font: 600 1.4rem 'Cormorant Garamond', serif; text-align: center; margin-bottom: 1rem; }
.wishes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; max-height: 460px; overflow-y: auto; padding-right: .3rem; }
.wish { padding: 1rem 1.1rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.wish.is-new { animation: rise .6s ease both; }
.wish__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.wish p { font-size: .9rem; color: var(--ink); overflow-wrap: anywhere; }
.wish small { font-size: .74rem; color: var(--muted); }
.tag { font-size: .68rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; background: var(--bg-2); color: var(--muted); white-space: nowrap; }
.tag--hadir { color: var(--accent); }
.wishes__empty { text-align: center; color: var(--muted); font-size: .9rem; }

.sec--closing { padding-bottom: 3rem; }
.thanks { font: italic 500 1.3rem 'Cormorant Garamond', serif; margin-bottom: .2rem; }
.ifoot { display: grid; justify-items: center; gap: .55rem; padding: 2rem 1.5rem 2.3rem; text-align: center; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--line); }
.ifoot a { color: var(--accent); font-weight: 700; text-decoration: none; }
.ifoot__brand { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink) !important; font: 700 1.25rem 'Cormorant Garamond', serif; }
.ifoot__logo { display: block; height: 34px; width: auto; max-width: 180px; object-fit: contain; }
.ifoot__brand .brand-logo__name { font: 700 1.1rem 'Cormorant Garamond', serif; }
.ifoot__mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-style: italic; font-size: 1.05rem; }
.ifoot__txt { margin: 0; }
.ifoot__biz { color: var(--ink) !important; font: 700 1.35rem/1.2 'Cormorant Garamond', serif; letter-spacing: .01em; }
.ifoot__wa { display: inline-flex; align-items: center; gap: .4rem; margin-top: .2rem; padding: .5rem 1.05rem; border-radius: 999px; background: #25d366; color: #fff !important; font-size: .78rem; box-shadow: 0 6px 16px rgba(37,211,102,.25); }
.ifoot__wa .ic, .ifoot__wa svg { width: 16px; height: 16px; }
.ifoot__cta { padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--line); font-size: .76rem; }

/* QR check-in */
.qr-card { width: min(280px, 100%); margin: 0 auto 1.3rem; padding: 1.2rem 1.2rem 1rem; border-radius: 22px; background: var(--card); border: 1px solid var(--line); position: relative; }
.qr-card::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--line); border-radius: 17px; pointer-events: none; }
.qr-card__code { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; }
.qr-card__code svg { display: block; width: 100%; height: 100%; }
.qr-card__name { position: relative; margin-top: .8rem; font-weight: 700; font-size: 1.05rem; }
.qr-card__group { position: relative; font-size: .8rem; color: var(--accent); font-weight: 600; }
.qr-done { display: flex; align-items: center; gap: .8rem; max-width: 320px; margin: 0 auto 1.3rem; padding: .9rem 1rem; border-radius: 14px; text-align: left; background: rgba(80,150,90,.14); }
.qr-done__ic { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #3f7a4a; color: #fff; font-weight: 700; }
.qr-done p { font-size: .86rem; }

/* Kartu QR gaya tiket pesawat (boarding pass) */
.qr-ticket { --tear: 210px; position: relative; width: min(330px, 100%); margin: 0 auto 1.3rem; text-align: left; color: #1c1917; background: #fffdf8;
    border-radius: 20px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.05);
    -webkit-mask: radial-gradient(circle 13px at 0 calc(100% - var(--tear)), #0000 96%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle 13px at 100% calc(100% - var(--tear)), #0000 96%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 13px at 0 calc(100% - var(--tear)), #0000 96%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle 13px at 100% calc(100% - var(--tear)), #0000 96%, #000) right / 51% 100% no-repeat; }
.qr-ticket__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .85rem 1.1rem; border-radius: 20px 20px 0 0;
    background: var(--accent, #1f2a37); color: var(--on-accent, #fff); font: 700 .66rem/1.2 'Plus Jakarta Sans', sans-serif; letter-spacing: .16em; }
.qr-ticket__head > span:last-child { opacity: .8; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-ticket__brand { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.qr-ticket__brand svg { width: 16px; height: 16px; transform: rotate(90deg); }
.qr-ticket__route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: 1.1rem 1.1rem .4rem; }
.qr-ticket__route > div { display: grid; min-width: 0; }
.qr-ticket__route > div:last-child { text-align: right; }
.qr-ticket__route b { font: 800 2rem/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .02em; color: #1c1917; }
.qr-ticket__route small { margin-top: .25rem; font-size: .7rem; color: #78716c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.qr-ticket__route > div:last-child small { justify-self: end; }
.qr-ticket__path { display: flex; align-items: center; gap: .3rem; color: var(--accent, #b8935a); }
.qr-ticket__path i { flex: 1; height: 0; border-top: 2px dotted currentColor; opacity: .6; }
.qr-ticket__path svg { width: 20px; height: 20px; transform: rotate(90deg); }
.qr-ticket__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; padding: .7rem 1.1rem 1rem; }
.qr-ticket__f { display: grid; gap: .1rem; min-width: 0; }
.qr-ticket__f--wide { grid-column: 1 / -1; }
.qr-ticket__f small { font: 700 .58rem 'Plus Jakarta Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #a8a29e; }
.qr-ticket__f b { font: 700 .92rem/1.3 'Plus Jakarta Sans', sans-serif; color: #1c1917; overflow-wrap: anywhere; }
.qr-ticket__stub { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 1rem; height: var(--tear); padding: 1.2rem 1.1rem 1.1rem; border-top: 2px dashed #e2dbcf; box-sizing: border-box; }
.qr-ticket__stub .qr-card__code { border-radius: 8px; box-shadow: 0 0 0 1px #eee6d9; }
.qr-ticket__note { display: grid; gap: .25rem; min-width: 0; }
.qr-ticket__note b { font: 700 .95rem/1.25 'Plus Jakarta Sans', sans-serif; color: #1c1917; }
.qr-ticket__note small { font-size: .72rem; color: #78716c; letter-spacing: .04em; }
.qr-ticket__bars { display: block; height: 34px; margin-top: .4rem; opacity: .85;
    background: repeating-linear-gradient(90deg, #1c1917 0 2px, transparent 2px 4px, #1c1917 4px 5px, transparent 5px 8px, #1c1917 8px 11px, transparent 11px 13px); }
@media (max-width: 360px) { .qr-ticket { --tear: 190px; } .qr-ticket__stub { grid-template-columns: 110px 1fr; } .qr-ticket__route b { font-size: 1.7rem; } }

/* Tombol QR di samping kanan + laci kartu masuk (tampil / sembunyi) */
.qr-fab { position: fixed; right: 0; top: 50%; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .8rem .5rem; border: 0; border-radius: 14px 0 0 14px;
    background: var(--accent, #1c1917); color: var(--on-accent, #fff); box-shadow: -6px 10px 26px -12px rgba(0,0,0,.55); cursor: pointer; transform: translate(0, -50%); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.qr-fab svg { width: 22px; height: 22px; }
.qr-fab span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 .66rem 'Plus Jakarta Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.qr-fab:hover { transform: translate(-3px, -50%); }
.qr-fab.is-active { transform: translate(100%, -50%); opacity: 0; pointer-events: none; }
body.is-locked .qr-fab { transform: translate(110%, -50%); opacity: 0; visibility: hidden; pointer-events: none; }
.qr-drawer { position: fixed; inset: 0; z-index: 180; }
.qr-drawer[hidden] { display: none; }
.qr-drawer__backdrop { position: absolute; inset: 0; background: rgba(10,8,6,.45); opacity: 0; transition: opacity .35s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.qr-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); overflow-y: auto; padding: 1rem 1.2rem 1.6rem; text-align: center;
    background: var(--bg, #fbf7f0); color: var(--ink); box-shadow: -20px 0 50px -20px rgba(0,0,0,.5); transform: translateX(105%); transition: transform .38s cubic-bezier(.2,.8,.2,1); }
.qr-drawer.is-open .qr-drawer__backdrop { opacity: 1; }
.qr-drawer.is-open .qr-drawer__panel { transform: none; }
.qr-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.qr-drawer__head strong { font: 600 1.3rem 'Cormorant Garamond', serif; color: var(--ink); }
.qr-drawer__close { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.qr-drawer .lead-txt { font-size: .86rem; margin-bottom: 1rem; }
@media (prefers-reduced-motion: reduce) { .qr-fab, .qr-drawer__panel, .qr-drawer__backdrop { transition: none; } }

/* Musik */
.music {
    position: fixed; right: 18px; bottom: 18px; z-index: 90; display: grid; place-items: center;
    width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--card); color: var(--accent); cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0,0,0,.35);
}
.music svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; }
.music.is-playing svg { animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.itoast { position: fixed; left: 50%; bottom: 80px; z-index: 160; transform: translate(-50%, 16px); padding: .65rem 1.1rem; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .84rem; font-weight: 600; opacity: 0; pointer-events: none; transition: all .25s; }
.itoast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* Animasi muncul */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Halaman sederhana (404/draf) */
.simple { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; text-align: center; overflow: auto; }
.simple__box { display: grid; gap: 1rem; justify-items: center; max-width: 420px; }
.simple h1 { font: 600 2.2rem 'Cormorant Garamond', serif; }
.simple p { color: var(--muted); }

@media (max-width: 380px) {
    .countdown { grid-template-columns: repeat(4, 58px); }
    .sec { padding-inline: 1.2rem; }
    .names--lg { font-size: 2.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
}

/* Tombol bahasa ID / EN */
.langsw { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 140; display: inline-flex; padding: 3px; border-radius: 999px;
    background: rgba(20,17,15,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.langsw a { min-width: 38px; padding: .32rem .6rem; border-radius: 999px; color: rgba(255,255,255,.8); font: 700 .72rem/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .08em; text-align: center; text-decoration: none; }
.langsw a.is-active { background: #fff; color: #1c1917; }
.draft-bar ~ .langsw { top: calc(52px + env(safe-area-inset-top)); }

/* ==========================================================
   Foto sampul: teks diletakkan di bawah agar wajah di foto tidak tertutup.
   Lapisan warna dibuat bergradasi — tipis di atas, pekat di bawah tempat teks berada.
   (Berlaku untuk semua tema; prioritas lebih tinggi dari latar bawaan tema.)
   ========================================================== */
body[class] .cover.has-photo, body[class] .hero.has-photo, body[class] .aside.has-photo {
    background:
        linear-gradient(to bottom,
            rgba(var(--hero-rgb, 0,0,0), calc(var(--tint-a, .75) * .35)) 0%,
            rgba(var(--hero-rgb, 0,0,0), calc(var(--tint-a, .75) * .1)) 28%,
            rgba(var(--hero-rgb, 0,0,0), calc(var(--tint-a, .75) * .3)) 48%,
            rgba(var(--hero-rgb, 0,0,0), max(.62, calc(var(--tint-a, .75) + .12))) 74%,
            rgb(var(--hero-rgb, 0,0,0)) 100%),
        var(--cover, none) center 22% / cover no-repeat,
        var(--bg);
}
/* Tema forest mempertahankan foto pengguna sebagai foto konten/frame,
   sementara sampul tetap memakai latar hutan agar identitas tema tidak hilang. */
body.t-rainforest .cover.has-photo, body.t-rainforest .hero.has-photo, body.t-rainforest .aside.has-photo {
    background: linear-gradient(to bottom, rgba(9,35,24,.18) 0%, rgba(9,35,24,.3) 38%, rgba(9,35,24,.72) 100%), url(../img/themes/rainforest/background.jpg) center / cover no-repeat, var(--bg) !important;
}
body.t-mysticwood .cover.has-photo, body.t-mysticwood .hero.has-photo, body.t-mysticwood .aside.has-photo {
    background: linear-gradient(to bottom, rgba(8,21,31,.18) 0%, rgba(8,21,31,.34) 38%, rgba(8,21,31,.76) 100%), url(../img/themes/mysticwood/background.jpg) center / cover no-repeat, var(--bg) !important;
}
body.t-forestamber .cover.has-photo, body.t-forestamber .hero.has-photo, body.t-forestamber .aside.has-photo {
    background: linear-gradient(to bottom, rgba(76,43,20,.08) 0%, rgba(76,43,20,.28) 38%, rgba(76,43,20,.66) 100%), url(../img/themes/forestamber/background.jpg) center / cover no-repeat, var(--bg) !important;
}
.cover.has-photo { place-items: end center; padding-bottom: calc(2.4rem + env(safe-area-inset-bottom)); }
.cover.has-photo .cover__inner { gap: .75rem; }
.cover.has-photo .cover__to { margin: .6rem 0 .5rem; }
.hero.has-photo { place-items: end center; padding-bottom: 3.4rem; }
.hero.has-photo .hero__inner { gap: .7rem; }
@media (min-width: 960px) {
    .aside.has-photo { place-items: end center; padding-bottom: 4.5rem; }
}
/* Ilustrasi tema (rumah adat dll.) disembunyikan di atas foto agar foto tetap jadi pusat perhatian */
.cover.has-photo .tm-house, .hero.has-photo .tm-house, .aside.has-photo .tm-house { display: none; }

/* Penanda gulir di bagian pembuka */
.hero__scroll { display: block; width: 22px; height: 34px; margin-top: .6rem; border: 1.5px solid currentColor; border-radius: 12px; opacity: .65; position: relative; }
.hero__scroll::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: heroScroll 1.8s ease-in-out infinite; }
@keyframes heroScroll { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

/* ===== Bagian hitung mundur ===== */
.sec--countdown { padding-block: 3.4rem; }
.sec--countdown .sec__title { margin-bottom: 1rem; }
.countdown__date { margin-bottom: 1.3rem; color: var(--muted); font: italic 500 1.15rem 'Cormorant Garamond', serif; }
.sec--countdown .countdown { justify-content: center; margin: 0 auto 1.5rem; }
.countdown__done { max-width: 340px; margin: 0 auto 1.5rem; font: italic 500 1.35rem/1.5 'Cormorant Garamond', serif; color: var(--ink); }
.sec--streaming { padding-block: 3.4rem; }
.sec--streaming .lead-txt { margin-bottom: 1.5rem; }
/* Motif tema (mis. kain adat) memudar di bagian atas foto agar wajah tetap jelas */
.has-photo .tm-frame::before { -webkit-mask-image: linear-gradient(to bottom, transparent 25%, #000 78%); mask-image: linear-gradient(to bottom, transparent 25%, #000 78%); }
/* Hitung mundur di bagian pembuka (pilihan "Di bagian pembuka") */
.hero__cd { display: grid; justify-items: center; gap: .9rem; margin-top: .3rem; }
.hero__cd .countdown { margin: 0; }
.hero__cd .countdown__done { margin: 0; color: var(--hero-ink); }
.hero.has-photo .hero__cd { gap: .7rem; }

/* Media sosial di footer undangan */
.ifoot__soc { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: .2rem; }
.ifoot__soc a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--accent) !important; background: var(--card); transition: background .25s, color .25s, transform .25s, border-color .25s; }
.ifoot__soc a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent) !important; transform: translateY(-2px); }
.ifoot__soc .soc-ic { width: 16px; height: 16px; }

/* ==========================================================
   Tema adat beranimasi — efek bersama (assets/js/themes/adat-motion.js)
   Gambar tiap tema diatur lewat variabel di assets/css/themes/{tema}.css:
   --am-panel (pintu/tirai); garis tengah sengaja disembunyikan agar pembuka bersih
   ========================================================== */
/* Pembuka: pintu / tirai menutupi sampul, terbuka saat undangan dibuka */
.am-open { position: absolute; inset: 0; z-index: 0; pointer-events: none; perspective: 1700px; overflow: hidden; }
.am-panel { position: absolute; top: 0; bottom: 0; width: 50.2%; transition: transform 1s cubic-bezier(.66,.04,.26,1); will-change: transform; }
.am-panel::before { content: ''; position: absolute; inset: 0; background: var(--am-panel, var(--bg)); }
.am-panel--a { left: 0; transform-origin: 0 50%; }
.am-panel--b { right: 0; transform-origin: 100% 50%; }
.am-panel--b::before { transform: scaleX(-1); }
.am-seam { display: none; position: absolute; top: 0; bottom: 0; left: 50%; width: 0; margin-left: 0; background: transparent; transition: opacity .25s; }
.am-open--roll .am-panel--a { width: 100%; transform-origin: 50% 0; }
.am-open--roll .am-panel--b, .am-open--roll .am-seam { display: none; }
.cover.is-open .am-open--doors .am-panel--a { transform: rotateY(-104deg); }
.cover.is-open .am-open--doors .am-panel--b { transform: rotateY(104deg); }
.cover.is-open .am-open--slide .am-panel--a { transform: translateX(-104%); }
.cover.is-open .am-open--slide .am-panel--b { transform: translateX(104%); }
.cover.is-open .am-open--roll .am-panel--a { transform: translateY(-104%); }
.cover.is-open .am-seam { opacity: 0; }
/* Sampul tetap di tempat; isi memudar lalu pintu/tirai membuka */
body.am-has-opening .cover.is-open { transform: none; opacity: 1; background: transparent !important; pointer-events: none; }
.am-has-opening .cover.is-open::before, .am-has-opening .cover.is-open::after,
.am-has-opening .cover.is-open .tm-frame, .am-has-opening .cover.is-open .am-garland, .am-has-opening .cover.is-open .am-drift { opacity: 0; transition: opacity .3s; }
.am-has-opening .cover__inner { transition: opacity .35s ease, transform .5s ease; }
.am-has-opening .cover.is-open .cover__inner { opacity: 0; transform: scale(.94); }
/* Sampul berpintu: isi di tengah walau ada foto (foto tampil di bagian pembuka) */
body.am-has-opening .cover.has-photo { place-items: center; padding-bottom: 2rem; }
.am-has-opening .cover.has-photo .tm-house { display: block; }

/* Forest: pembuka bersih dengan background hutan sebagai fokus utama.
   Tidak ada emblem bunga, frame sudut, tirai, atau taburan pada sampul. */
body.t-rainforest .cover .tm-house, body.t-mysticwood .cover .tm-house, body.t-forestamber .cover .tm-house,
body.t-rainforest .cover .tm-frame, body.t-mysticwood .cover .tm-frame, body.t-forestamber .cover .tm-frame,
body.t-rainforest .cover .am-open, body.t-mysticwood .cover .am-open, body.t-forestamber .cover .am-open,
body.t-rainforest .cover .am-garland, body.t-mysticwood .cover .am-garland, body.t-forestamber .cover .am-garland,
body.t-rainforest .cover .am-drift, body.t-mysticwood .cover .am-drift, body.t-forestamber .cover .am-drift {
    display: none !important;
}
body.t-rainforest .hero .tm-house, body.t-mysticwood .hero .tm-house, body.t-forestamber .hero .tm-house,
body.t-rainforest .aside .tm-house, body.t-mysticwood .aside .tm-house, body.t-forestamber .aside .tm-house,
body.t-rainforest .hero .tm-frame, body.t-mysticwood .hero .tm-frame, body.t-forestamber .hero .tm-frame,
body.t-rainforest .aside .tm-frame, body.t-mysticwood .aside .tm-frame, body.t-forestamber .aside .tm-frame {
    display: none !important;
}
body.t-rainforest .cover::before, body.t-rainforest .cover::after,
body.t-mysticwood .cover::before, body.t-mysticwood .cover::after,
body.t-forestamber .cover::before, body.t-forestamber .cover::after {
    display: none;
}
body.t-rainforest .cover, body.t-mysticwood .cover, body.t-forestamber .cover {
    transition: transform .72s cubic-bezier(.7,0,.2,1), opacity .45s ease;
}
body.t-rainforest .cover.is-open, body.t-mysticwood .cover.is-open, body.t-forestamber .cover.is-open {
    transform: translateY(-100%);
    opacity: 0;
}

/* Hiasan gantung yang bergoyang (gerak ada di dalam file SVG) */
.am-garland { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: clamp(64px, 20vw, 110px); pointer-events: none; background: var(--img) top center / auto 100% repeat-x; }
.aside .am-garland { height: 120px; }

/* Lapisan ornamen melayang perlahan */
.am-drift { position: absolute; left: 0; right: 0; z-index: 0; height: 26%; pointer-events: none; background: var(--img) 0 0 / auto 100% repeat-x; opacity: .5; animation: amDrift 90s linear infinite; }
.am-drift--top { top: 0; transform: scaleY(-1); }
.am-drift--bottom { bottom: 0; animation-direction: reverse; animation-duration: 120s; }
@keyframes amDrift { to { background-position: -1600px 0; } }

/* Taburan berjatuhan (melati, kelopak, kilau emas) */
.am-fall { position: fixed; inset: 0; z-index: 101; pointer-events: none; overflow: hidden; }
.am-fall i { position: absolute; top: -48px; left: var(--x); width: calc(22px * var(--s)); height: calc(22px * var(--s)); background: center / contain no-repeat; opacity: var(--o, .8); animation: amFall var(--d) linear var(--delay) infinite; will-change: transform; }
@keyframes amFall {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(calc(var(--dx) * .7), 55vh, 0) rotate(calc(var(--r) * .5)); }
    100% { transform: translate3d(var(--dx), 112vh, 0) rotate(var(--r)); }
}
/* Partikel naik perlahan (gelembung, kunang-kunang) */
.am-rise { position: fixed; inset: 0; z-index: 101; pointer-events: none; overflow: hidden; }
.am-rise i { position: absolute; top: 100%; left: var(--x); width: calc(18px * var(--s)); height: calc(18px * var(--s)); background: center / contain no-repeat; opacity: 0; animation: amRise var(--d) ease-in-out var(--delay) infinite; will-change: transform, opacity; }
@keyframes amRise {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    10%  { opacity: var(--o, .8); }
    30%  { transform: translate3d(var(--dx), -32vh, 0); }
    55%  { transform: translate3d(calc(var(--dx) * -.6), -60vh, 0); opacity: var(--o, .8); }
    80%  { transform: translate3d(var(--dx), -88vh, 0); opacity: calc(var(--o, .8) * .7); }
    100% { transform: translate3d(0, -112vh, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .am-fall, .am-rise { display: none; } }

/* ==========================================================
   Set font pilihan pengguna (menimpa font bawaan tema)
   Variabel diisi di <body style> dari font_sets() di app/bootstrap.php:
   --fs-display (nama), --fs-head (judul), --fs-accent (miring), --fs-body (teks), --fs-k (skala nama)
   ========================================================== */
body.fs-on, body.fs-on .ibtn, body.fs-on input, body.fs-on textarea, body.fs-on select, body.fs-on button,
body.fs-on p, body.fs-on small, body.fs-on li, body.fs-on .lead-txt, body.fs-on .tag { font-family: var(--fs-body) !important; }
body.fs-on .names, body.fs-on .names span, body.fs-on .pframe__init { font-family: var(--fs-display) !important; }
body.fs-on .names i, body.fs-on .amp, body.fs-on .cover__date, body.fs-on .hero__date, body.fs-on .aside__date, body.fs-on .quote,
body.fs-on .thanks, body.fs-on .countdown__date, body.fs-on .countdown__done, body.fs-on .tale__no, body.fs-on .tale__end { font-family: var(--fs-accent) !important; }
body.fs-on .kicker, body.fs-on .sec__title, body.fs-on .event h3, body.fs-on .lstory__title, body.fs-on .tale__title, body.fs-on .countdown b,
body.fs-on .wishes__title, body.fs-on .gift__num, body.fs-on .cover__to strong, body.fs-on .ifoot__biz, body.fs-on .ifoot__brand { font-family: var(--fs-head) !important; }
body.fs-on .sec__title, body.fs-on .event h3, body.fs-on .lstory__title, body.fs-on .tale__title { font-weight: var(--fs-hw, 600) !important; }
.fs-editorial, .fs-minimalis { --fs-hw: 400; }
.fs-mewah { --fs-hw: 500; }
/* Ukuran nama disesuaikan dengan karakter font (font tegak lebih lebar daripada huruf sambung) */
body.fs-on .cover .names { font-size: calc(clamp(3.2rem, 13vw, 5rem) * var(--fs-k, 1)) !important; }
body.fs-on .names--xl { font-size: calc(clamp(3.5rem, 6vw, 5.5rem) * var(--fs-k, 1)) !important; }
body.fs-on .names--lg { font-size: calc(3.4rem * var(--fs-k, 1)) !important; }
body.fs-on .names--md { font-size: calc(2.3rem * var(--fs-k, 1)) !important; }
body.fs-on .pframe__init { font-size: calc(4.6rem * var(--fs-k, 1)) !important; }
@media (max-width: 380px) { body.fs-on .names--lg { font-size: calc(2.9rem * var(--fs-k, 1)) !important; } }

/* ==========================================================
   Love Story bentuk cerita: tiap momen menjadi babak buku cerita
   ========================================================== */
.tale__intro { max-width: 420px; margin: 0 auto 2.4rem; font: italic 500 1.15rem/1.7 'Cormorant Garamond', serif; color: var(--ink); }
.tale { display: grid; gap: 0; max-width: 460px; margin: 0 auto; counter-reset: tale; }
.tale__ch { position: relative; text-align: left; }
.tale__ch + .tale__ch { margin-top: 1rem; }
.tale__fig { position: relative; margin: 0 0 1.3rem; overflow: hidden; border-radius: 4px; box-shadow: 0 26px 46px -32px rgba(0,0,0,.6); }
.tale__fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transform: scale(1.12); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.tale__fig::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.55); pointer-events: none; }
.tale__ch:nth-of-type(even) .tale__fig { margin-left: 12%; }
.tale__ch:nth-of-type(odd) .tale__fig { margin-right: 12%; }
.tale__head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .2rem; }
.tale__no { font: italic 500 1.05rem 'Cormorant Garamond', serif; color: var(--accent); white-space: nowrap; }
.tale__no::after { content: ''; display: inline-block; width: 28px; height: 1px; margin: 0 0 .3rem .55rem; vertical-align: middle; background: var(--accent); opacity: .6; }
.tale__date { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.tale__title { margin-bottom: .7rem; font: 600 1.75rem/1.2 'Cormorant Garamond', serif; color: var(--ink); }
.tale__text { color: var(--ink); opacity: .88; font-size: .94rem; line-height: 1.85; overflow-wrap: anywhere; }
.tale__text::first-letter { float: left; margin: .32rem .55rem 0 0; font: 600 3.4rem/.78 'Cormorant Garamond', serif; color: var(--accent); }
.tale__orn { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 1.6rem 0 1.2rem; color: var(--accent); font-size: 1.1rem; }
.tale__orn::before, .tale__orn::after { content: ''; width: 54px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.tale__orn::after { transform: scaleX(-1); }
.tale__end { margin-top: 2.2rem; font: italic 500 1.2rem 'Cormorant Garamond', serif; color: var(--accent); }
/* Muncul bertahap: foto memperbesar perlahan, teks naik */
.tale__ch .tale__body { opacity: 0; transform: translateY(18px); transition: opacity .9s ease .15s, transform .9s ease .15s; }
.tale__ch.is-visible .tale__body { opacity: 1; transform: none; }
.tale__ch.is-visible .tale__fig img { transform: scale(1); }
@media (max-width: 380px) { .tale__title { font-size: 1.5rem; } .tale__ch:nth-of-type(n) .tale__fig { margin-inline: 0; } }
@media (prefers-reduced-motion: reduce) { .tale__ch .tale__body { opacity: 1; transform: none; } .tale__fig img { transform: none; } }

/* ---------- Ornamen "nyata" (tema dengan 'relief': assets/js/themes/relief.js) ----------
   Ornamen utama dibungkus .lx-tilt: miring halus seperti benda 3D + kilau cahaya yang bergeser. */
.lx-tilt { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto .2rem; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
.lx-tilt > .tm-house { display: block; margin: 0; }
.lx-tilt--sm { margin-bottom: 1.2rem; }
.lx-glare { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    background: linear-gradient(105deg, rgba(255,244,214,0) 40%, rgba(255,244,214,.55) 50%, rgba(255,244,214,0) 60%) var(--gx, 50%) 0 / 260% 100% no-repeat; mix-blend-mode: screen; }
.cover.has-photo .lx-tilt, .hero.has-photo .lx-tilt, .aside.has-photo .lx-tilt { display: none; }
.am-has-opening .cover.has-photo .lx-tilt { display: block; }
@media (prefers-reduced-motion: reduce) { .lx-tilt { transform: none; } .lx-glare { display: none; } }

/* ===== Video di galeri: muat pemutar hanya saat diketuk (ringan) ===== */
.gvideos { display: grid; gap: .8rem; margin-top: 1.2rem; grid-template-columns: 1fr; }
.gvideo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #111; box-shadow: 0 16px 34px -22px rgba(0,0,0,.6); }
.gvideo iframe, .gvideo video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.gvideo__play { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; cursor: pointer; background: #1c1917 center / cover no-repeat;
    background-image: linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.25)); }
.gvideo__play::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.35)); transition: background .3s; }
.gvideo__play:hover::after { background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.2)); }
.gvideo__ic { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px;
    border-radius: 50%; background: rgba(255,255,255,.92); color: var(--accent, #1c1917); box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); transition: transform .3s; }
.gvideo__ic svg { width: 28px; height: 28px; margin-left: 4px; }
.gvideo__play:hover .gvideo__ic, .gvideo__play:focus-visible .gvideo__ic { transform: scale(1.08); }
.gvideo--vimeo .gvideo__play { background-image: linear-gradient(135deg, #1a2a36, #0d1720); }

/* ===== Peta lokasi di kartu acara (opsional) ===== */
.event__map { position: relative; margin: .9rem 0 .2rem; aspect-ratio: 4 / 3; max-height: 260px; width: 100%; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); }
.event__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ===== Menu navigasi bawah (opsional, dipilih di editor) =====
   Mengikuti warna tema (var --card, --ink, --accent). Muncul setelah undangan dibuka. */
.inav { position: fixed; z-index: 95; left: 50%; bottom: 0; width: min(520px, 100%); transform: translate(-50%, 0);
    display: flex; justify-content: space-around; align-items: stretch; gap: 2px; padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--card, #fff) 92%, transparent); color: var(--ink); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -10px 30px -18px rgba(0,0,0,.35);
    transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s; }
body.is-locked .inav { transform: translate(-50%, 120%); opacity: 0; pointer-events: none; }
.inav__item { flex: 1 1 0; display: grid; justify-items: center; align-content: center; gap: .15rem; min-width: 0; min-height: 46px; padding: .3rem .2rem; border-radius: 12px;
    color: inherit; opacity: .62; text-decoration: none; font: 600 .6rem/1.1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .02em; transition: opacity .25s, color .25s, background .25s; }
.inav__item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.inav__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inav__item:hover, .inav__item:focus-visible { opacity: 1; }
.inav__item.is-active { opacity: 1; color: var(--accent); }
.inav--icon .inav__item.is-active, .inav--label .inav__item.is-active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* Mengambang: kapsul di atas konten */
.inav--float { bottom: calc(14px + env(safe-area-inset-bottom)); width: auto; max-width: calc(100% - 28px); padding: .35rem; border: 1px solid var(--line); border-radius: 999px; gap: .2rem; box-shadow: 0 14px 34px -14px rgba(0,0,0,.45); }
.inav--float .inav__item { flex: 0 0 auto; width: 46px; min-height: 46px; border-radius: 50%; }
.inav--float .inav__item.is-active { background: var(--accent); color: var(--on-accent, #fff); }
/* Ruang untuk menu: tombol musik & isi tidak tertutup */
body.has-inav .page { padding-bottom: 64px; }
body.has-inav--float .page { padding-bottom: 80px; }
body.has-inav .music { bottom: calc(76px + env(safe-area-inset-bottom)); }
body.has-inav--float .music { bottom: calc(84px + env(safe-area-inset-bottom)); }
body.has-inav .itoast { bottom: 140px; }
@media (min-width: 960px) {
    .inav { left: auto; right: 0; width: 480px; transform: none; }
    body.is-locked .inav { transform: translateY(120%); }
    .inav--float { right: 240px; transform: translateX(50%); width: auto; }
    body.is-locked .inav--float { transform: translate(50%, 120%); }
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { .inav { background: var(--card, #fff); } .inav--icon .inav__item.is-active, .inav--label .inav__item.is-active { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .inav { transition: none; } }

/* ===== Video latar pembuka (pengganti foto utama) =====
   Video menutupi bagian (seperti background-size: cover), dengan lapisan gelap agar teks tetap terbaca.
   Berlaku untuk semua tema; teks di bagian pembuka dibuat terang. */
.bgvid { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; background: #000; }
.bgvid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bgvid iframe { position: absolute; left: 50%; top: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); min-width: 177.78%; min-height: 100%; border: 0; transform: translate(-50%, -50%); }
.has-bgvid .bgvid iframe { min-width: 0; width: max(100%, calc(100svh * 16 / 9)); height: max(100%, calc(100vw * 9 / 16)); }
.aside .bgvid iframe { width: max(100%, calc(100vh * 16 / 9)); height: max(100%, calc((100vw - 480px) * 9 / 16)); }
.bgvid::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.38) 0%, rgba(0,0,0,.12) 30%, rgba(0,0,0,.18) 52%, rgba(0,0,0,.62) 80%, rgba(0,0,0,.82) 100%); }
.has-bgvid { --ink: #fff; --muted: rgba(255,255,255,.86); --hero-ink: #fff; }
.has-bgvid .cover__inner, .has-bgvid .hero__inner, .has-bgvid .aside__inner { position: relative; z-index: 5; }
.hero.has-bgvid .names, .aside.has-bgvid .names, .cover.has-bgvid .names,
.hero.has-bgvid .kicker, .aside.has-bgvid .kicker, .hero.has-bgvid .hero__date, .aside.has-bgvid .aside__date { color: #fff !important; text-shadow: 0 2px 22px rgba(0,0,0,.55) !important; }
.hero.has-bgvid .hero__scroll { z-index: 5; color: #fff; border-color: rgba(255,255,255,.7); }
.hero.has-bgvid .ph-show { display: none; }
@media (prefers-reduced-motion: reduce) { .bgvid video, .bgvid iframe { display: none; } .bgvid { background: var(--cover, none) center 30% / cover no-repeat, #000; } }

/* v25: meja tamu & konfirmasi kado */
.cover__seat { justify-self: center; display: inline-flex; align-items: center; gap: .35rem; margin: .15rem 0; padding: .22rem .75rem; border-radius: 999px; border: 1px solid currentColor; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.qr-card__seat { position: relative; display: inline-block; margin-top: .35rem; padding: .25rem .8rem; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.qr-ticket__f--seat b { color: var(--accent); }
.giftc { max-width: 460px; margin: 1.6rem auto 0; text-align: center; }
.giftc > summary { list-style: none; cursor: pointer; }
.giftc > summary::-webkit-details-marker { display: none; }
.giftc[open] > summary { opacity: .65; }
.giftc__form { margin-top: 1.1rem; text-align: left; }
.giftc__intro { margin: 0 0 .4rem; font-size: .88rem; opacity: .8; text-align: center; }
.giftc__form input[type=file] { padding: .55rem; font-size: .82rem; }

/* v26: lencana usia / tahun pernikahan & kartu detail acara (gaya dasar; tema bisa menimpa) */
.ev-badge { display: inline-flex; align-items: baseline; justify-content: center; gap: .3rem; margin: .1rem auto; padding: .22rem .9rem; border-radius: 999px; border: 1px solid currentColor; line-height: 1; }
.ev-badge b { font: 700 1.25rem/1 'Cormorant Garamond', serif; }
.ev-badge small { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.sec--evinfo .evinfo { display: grid; gap: 1rem; max-width: 440px; margin: 0 auto; }
.evinfo__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .7rem; }
.evinfo__stat { padding: 1rem .6rem; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.evinfo__stat b { display: block; font: 600 1.5rem/1.15 'Cormorant Garamond', serif; color: var(--accent); overflow-wrap: anywhere; }
.evinfo__stat small { display: block; margin-top: .3rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.evinfo__list { margin: 0; padding: .4rem 1.1rem; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-align: left; }
.evinfo__list > div { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: .8rem; padding: .7rem 0; border-bottom: 1px dashed var(--line); }
.evinfo__list > div:last-child { border-bottom: 0; }
.evinfo__list dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.evinfo__list dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.evinfo__note { padding: 1rem 1.1rem; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.evinfo__note small { display: block; margin-bottom: .35rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.evinfo__note p { margin: 0; color: var(--ink); line-height: 1.7; }

/* Logo usaha Mitra di footer undangan — kotak putih kecil agar terbaca di tema apa pun */
.ifoot__logo-biz { display: inline-grid; place-items: center; margin: .35rem auto .15rem; padding: .55rem .9rem; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px -10px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.05); text-decoration: none; }
.ifoot__logo-biz img { display: block; max-width: 170px; max-height: 56px; width: auto; height: auto; object-fit: contain; }
.ifoot--biz .ifoot__logo-biz + .ifoot__biz { font-size: 1.1rem; }
/* Logo usaha tampil apa adanya: transparan tetap transparan, berlatar tetap berlatar */
.ifoot__logo-biz { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.ifoot__logo-biz img { max-width: 180px; max-height: 64px; }

/* =====================================================================
   AMPLOP DIGITAL: tab Wedding Gift / Gift List + alamat kirim kado
   ===================================================================== */
.gtabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 360px; margin: 0 auto 1.4rem; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--card) 82%, transparent); border: 1px solid var(--line); box-shadow: 0 8px 22px -16px rgba(0,0,0,.35); }
.gtabs__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 40px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 .84rem/1 inherit; font-family: inherit; cursor: pointer; transition: color .3s; }
.gtabs__btn svg { width: 16px; height: 16px; }
.gtabs__btn.is-on { color: var(--on-accent, #fff); }
.gtabs__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--accent); box-shadow: 0 6px 16px -8px var(--accent); transition: transform .38s cubic-bezier(.2,.8,.2,1); }
.gtabs[data-on="1"] .gtabs__pill { transform: translateX(100%); }
.gpane:not([hidden]) { animation: gpIn .4s ease; }
@keyframes gpIn { from { opacity: 0; transform: translateY(6px); } }

.gaddr { display: flex; gap: .85rem; align-items: flex-start; max-width: 380px; margin: 1.2rem auto 0; padding: 1rem 1.1rem; text-align: left; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 26px -20px rgba(0,0,0,.45); }
.gaddr__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.gaddr__ic svg { width: 20px; height: 20px; }
.gaddr__body strong { display: block; font-size: .92rem; color: var(--ink); margin-bottom: .2rem; }
.gaddr__body p { margin: 0 0 .6rem; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.gaddr__copy { padding: .38rem .9rem; border-radius: 999px; border: 1px solid var(--accent); background: none; color: var(--accent); font: 600 .74rem inherit; font-family: inherit; cursor: pointer; }
.gaddr__copy:active { transform: scale(.97); }

.glist__title { font-size: 1.2rem; margin: 1.6rem 0 .3rem; color: var(--ink); }
.glist__intro { margin: 0 auto 1rem; max-width: 340px; font-size: .86rem; color: var(--muted); }
.glist { list-style: none; margin: 0 auto; padding: 0; max-width: 400px; display: grid; gap: .6rem; text-align: left; }
.glist__item { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 24px -20px rgba(0,0,0,.45); }
.glist__no { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 700; font-size: .8rem; }
.glist__body { flex: 1; min-width: 0; }
.glist__body strong { display: block; font-size: .92rem; line-height: 1.3; color: var(--ink); }
.glist__body small { display: block; margin-top: .15rem; font-size: .76rem; color: var(--muted); }
.glist__link { flex: none; display: inline-flex; align-items: center; gap: .25rem; padding: .42rem .8rem; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff) !important; font-size: .74rem; font-weight: 600; text-decoration: none; }
.glist__link svg { width: 13px; height: 13px; }

/* Alamat kirim kado selebar kartu ATM · Gift List bergambar */
.gaddr { box-sizing: border-box; width: min(340px, 100%); max-width: 340px; }
.glist { max-width: 400px; }
.glist__img { position: relative; flex: none; width: 66px; height: 66px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.glist__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.glist__no--tag { position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; font-size: .64rem; background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(4px); }
.glist__item.has-img { padding: .6rem .8rem .6rem .6rem; }

/* ===== Dress code: palet warna & gambar bulat ===== */
.evinfo__dc { padding: 1.1rem 1.1rem 1.25rem; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-align: center; }
.evinfo__dc > small { display: block; margin-bottom: .35rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.dc__txt { margin: 0 0 .2rem; color: var(--ink); font-weight: 600; }
.dc__colors { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem .8rem; margin: .9rem 0 0; padding: 0; }
.dc__colors li { display: grid; justify-items: center; gap: .35rem; }
.dc__dot { width: 46px; height: 46px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px color-mix(in srgb, var(--ink) 18%, transparent), 0 8px 16px -8px rgba(0,0,0,.45); }
.dc__colors code { font: 600 .62rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--muted); background: none; padding: 0; }
.dc__imgs { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 1.1rem; }
.dc__img { display: block; width: 92px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; padding: 3px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent)); box-shadow: 0 10px 22px -12px rgba(0,0,0,.5); }
.dc__img img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--card); box-sizing: border-box; }
.dc__imgs--1 .dc__img { width: 132px; }
.dc__imgs--2 .dc__img { width: 112px; }
@media (max-width: 380px) { .dc__img { width: 76px; } .dc__dot { width: 40px; height: 40px; } }