/* ==========================================================
   DInvite — Halaman undangan publik (6 tema)
   ========================================================== */

/* ---------- 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; }
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; }
.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; }

/* 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; }

/* 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 { width: 22px; height: 22px; }
.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)); }