/* ==========================================================================
   THEME: DESAIN 30 - MISTY FOREST ARCH
   KitoNgundang Wedding Invitation
   Konsep: hutan berkabut bergaya toile, bingkai lengkung berkontur emas,
   dan bunga tropis pastel di sudut. Satu momen gerak: kabut menyibak saat
   sampul dibuka.
   ========================================================================== */

:root {
    --mist: #dde7d8;
    --mist-2: #e9f0e5;
    --parch: #e8dcc2;
    --moss: #4a6745;
    --moss-deep: #2f4a2c;
    --gold: #a87b1f;
    --gold-deep: #86600f;
    --gold-light: #dcbd6e;
    --coral: #e27d66;
    --ink: #2e3a2b;
    --muted: #4f5e49;
    --line: rgba(168, 123, 31, 0.45);
    --bg-body: #2f4a2c;

    --font-script: 'Imperial Script', 'Brush Script MT', cursive;
    --font-serif: 'Sorts Mill Goudy', Georgia, serif;
    --font-arab: 'Amiri', serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
    --spring: cubic-bezier(0.34, 1.5, 0.5, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 400;
    background-color: var(--bg-body);
    color: var(--ink);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.locked {
    overflow: hidden;
    height: 100vh;
}

img {
    display: block;
    max-width: 100%;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 3px;
}

/* ---------- Elemen dekoratif ---------- */
.deco {
    pointer-events: none;
    user-select: none;
}

.bloom {
    position: absolute;
    z-index: 1;
    display: block;
    width: var(--w, 250px);
    pointer-events: none;
    user-select: none;
}

/* gambar bergoyang dari pangkal rangkaian (sudut kiri bawah gambar) */
.bloom img {
    width: 100%;
    height: auto;
    transform-origin: 6% 96%;
    animation: sway var(--sway, 9s) ease-in-out var(--sd, 0s) infinite;
}

/* ---------- Tombol ---------- */
.btn-gold {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(180deg, #a57a1b 0%, #82590b 100%);
    color: #fffaf0;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    padding: 0.8rem 2.2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 244, 214, 0.55);
    outline: 1px solid var(--gold);
    outline-offset: 4px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(90, 62, 8, 0.34);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-gold::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
    transform: translateX(-130%);
    transition: transform 0.9s var(--ease);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(90, 62, 8, 0.4);
}

.btn-gold:hover::before {
    transform: translateX(130%);
}

.btn-gold:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

.btn-gold:focus-visible {
    outline-color: var(--gold-deep);
    outline-offset: 5px;
}

.btn-block {
    width: 100%;
}

/* tombol garis emas (lokasi) */
.btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0.55rem 1.6rem;
    border-radius: 999px;
    border: 1.5px solid var(--gold);
    color: var(--gold-deep);
    background: transparent;
    font-family: var(--font-serif);
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, transform 0.3s;
}

.btn-line:hover {
    background: var(--gold);
    color: #fffaf0;
    transform: translateY(-2px);
}

.btn-line:active {
    transform: scale(0.97);
}

/* ---------- Bingkai lengkung berkontur emas ---------- */
.arch-photo {
    position: relative;
    padding: 7px;
    border: 1.5px solid var(--gold);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    box-shadow:
        0 0 0 6px rgba(233, 240, 229, 0.7),
        0 0 0 7.5px var(--gold),
        0 22px 40px rgba(47, 74, 44, 0.28);
}

.arch-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
    background: var(--mist);
}

/* ==========================================================================
   COVER: kabut yang menyebar pelan saat dibuka
   ========================================================================== */
#cover {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 480px;
    transform: translateX(-50%);
    z-index: 9999;
    overflow: hidden;
}

/* lapisan dasar dan dua panel memakai gambar yang sama persis, jadi belahan di tengah tidak terlihat */
#cover::before,
.veil {
    background:
        radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 62%),
        url('../images/toile-forest.svg') center bottom / cover no-repeat,
        var(--mist);
}

#cover::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: opacity 1.9s ease 0.8s;
}

#cover.opened::before {
    opacity: 0;
}

.veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    will-change: transform, opacity;
    transition:
        transform 2.7s cubic-bezier(0.38, 0.02, 0.2, 1),
        opacity 1.7s ease-in 1s;
}

/* tepi tengah dibuat berbulu (feather) supaya terasa seperti kabut, bukan pintu */
.veil-l {
    -webkit-mask-image: linear-gradient(to right, #000 calc(50% - 56px), transparent calc(50% + 8px));
    mask-image: linear-gradient(to right, #000 calc(50% - 56px), transparent calc(50% + 8px));
    transform-origin: 100% 50%;
}

.veil-r {
    -webkit-mask-image: linear-gradient(to left, #000 calc(50% - 56px), transparent calc(50% + 8px));
    mask-image: linear-gradient(to left, #000 calc(50% - 56px), transparent calc(50% + 8px));
    transform-origin: 0 50%;
}

#cover.opened .veil-l {
    opacity: 0;
    transform: translateX(-58%) scale(1.14);
}

#cover.opened .veil-r {
    opacity: 0;
    transform: translateX(58%) scale(1.14);
}

#cover.opened {
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 2.8s;
}

/* bunga di sudut sampul: ukuran maksimal setengah lebar agar tidak terpotong panel */
.bloom-bl { --w: min(236px, 49%); left: -14px; bottom: -8px; }
.bloom-br { --w: min(236px, 49%); right: -14px; bottom: -8px; transform: scaleX(-1); --sway: 11s; --sd: -3s; }
.bloom-tl { --w: min(150px, 34%); left: -26px; top: -22px; transform: scaleY(-1); --sway: 12s; --sd: -5s; }
.bloom-tr { --w: min(150px, 34%); right: -26px; top: -22px; transform: rotate(180deg); --sway: 10s; --sd: -1.5s; }

.cover-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.35rem, 1.6dvh, 1rem);
    padding: 3dvh 1.5rem 7dvh;
    text-align: center;
}

/* saat dibuka, isi sampul naik pelan satu per satu sambil memudar */
.cover-inner > * {
    transition: opacity 1.3s ease, transform 1.6s var(--ease), box-shadow 0.3s ease;
}

#cover.opened .cover-inner > * {
    opacity: 0;
    transform: translateY(-36px) scale(0.96);
}

#cover.opened .cover-inner > :nth-child(2) { transition-delay: 0.08s; }
#cover.opened .cover-inner > :nth-child(3) { transition-delay: 0.16s; }
#cover.opened .cover-inner > :nth-child(4) { transition-delay: 0.24s; }
#cover.opened .cover-inner > :nth-child(5) { transition-delay: 0.32s; }

#cover.opened .petals {
    opacity: 0;
    transition: opacity 1.4s ease 0.4s;
}

.cover-title {
    font-style: italic;
    font-size: 1.15rem;
    color: var(--muted);
}

.cover-photo {
    height: clamp(190px, 38dvh, 300px);
    aspect-ratio: 0.64;
    animation:
        unfold 1.8s var(--ease) 0.6s backwards,
        float 7s ease-in-out 2.6s infinite;
}

.cover-photo img {
    animation: settle 2.6s var(--ease) 0.6s backwards;
}

.cover-names {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: clamp(2.6rem, 14vw, 3.6rem);
    line-height: 1.15;
    word-spacing: 0.12em;
    color: var(--gold);
    padding: 0.1em 0.2em;
    white-space: nowrap;
    animation:
        writeIn 2.2s cubic-bezier(0.45, 0.05, 0.25, 1) 1.2s backwards,
        sheen 7s ease-in-out 4.2s infinite;
}

.cover-guest {
    margin-bottom: 0.4rem;
}

.cover-to {
    font-style: italic;
    font-size: 1rem;
    color: var(--muted);
}

.cover-guest-name {
    font-size: 1.55rem;
    line-height: 1.3;
    color: var(--moss-deep);
    max-width: 17ch;
    overflow-wrap: anywhere;
}

/* animasi masuk sampul */
.cv {
    animation: coverIn 1.3s var(--ease) var(--d, 0s) backwards;
}

/* tombol buka: kilau lewat berkala sebagai ajakan */
#btn-open::before {
    animation: btnShine 5s ease-in-out 3.2s infinite;
}

/* ==========================================================================
   LAYOUT UMUM
   ========================================================================== */
.app-container {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(rgba(233, 240, 229, 0.5), rgba(233, 240, 229, 0.5)),
        url('../images/toile-forest.svg') center top / 480px 960px repeat-y,
        var(--mist);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
}

section {
    position: relative;
    padding: 4.5rem 1.75rem;
    text-align: center;
    overflow: hidden;
}

section > *:not(.deco) {
    position: relative;
    z-index: 2;
}

/* bagian berlatar perkamen: tepi memudar ke kabut sage */
.parch {
    padding-top: 6rem;
    padding-bottom: 6.5rem;
}

.parch::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(rgba(241, 232, 211, 0.5), rgba(241, 232, 211, 0.5)),
        url('../images/toile-sepia.svg') center top / 480px 960px repeat-y,
        var(--parch);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}

/* judul bagian */
.sec-title {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: 2.9rem;
    line-height: 1.2;
    word-spacing: 0.14em;
    color: var(--gold);
    padding: 0.05em 0.2em;
}

.sec-title::after {
    content: '';
    display: block;
    width: 180px;
    height: 24px;
    margin: 0.5rem auto 2.1rem;
    background: url('../images/sprig.svg') center / contain no-repeat;
}

.sec-date {
    margin: -1rem 0 1.8rem;
    font-style: italic;
    color: var(--muted);
}

.lead {
    max-width: 34ch;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--ink);
}

.parch .lead {
    margin-bottom: 0.4rem;
}

/* ==========================================================================
   HERO
   ========================================================================== */
#home {
    padding-top: 4.2rem;
    padding-bottom: 3.2rem;
}

.bloom-hero-tr { --w: 190px; right: -34px; top: -26px; transform: rotate(180deg); --sway: 10s; --sd: -2s; }
.bloom-hero-bl { --w: 210px; left: -26px; bottom: -22px; --sway: 9s; --sd: -6s; }

.hero-kicker {
    font-style: italic;
    font-size: 1.15rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.hero-photo {
    width: min(250px, 66%);
    aspect-ratio: 0.64;
    margin: 0 auto;
}

.hero-names {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: clamp(2.7rem, 14.5vw, 3.8rem);
    line-height: 1.2;
    word-spacing: 0.12em;
    white-space: nowrap;
    color: var(--gold);
    margin-top: 2.2rem;
    padding: 0.05em 0.2em;
}

.hero-date {
    margin-top: 0.3rem;
    font-size: 1.15rem;
    color: var(--moss-deep);
}

/* ==========================================================================
   PEMBUKAAN
   ========================================================================== */
#opening {
    padding-top: 3.2rem;
}

.salam {
    font-family: var(--font-arab);
    font-size: 1.7rem;
    line-height: 1.9;
    color: var(--moss-deep);
    margin-bottom: 1.2rem;
}

.ayat {
    max-width: 330px;
    margin: 2.6rem auto 0;
    padding: 1.9rem 1.4rem 1.6rem;
    background: rgba(255, 255, 255, 0.62);
    border-top: 1.5px solid var(--gold);
    border-bottom: 1.5px solid var(--gold);
    border-radius: 120px 120px 18px 18px / 70px 70px 18px 18px;
}

.ayat-ar {
    font-family: var(--font-arab);
    font-size: 1.35rem;
    line-height: 2.1;
    color: var(--moss-deep);
}

.ayat-id {
    margin-top: 0.8rem;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.7;
}

.ayat cite {
    display: block;
    margin-top: 0.8rem;
    font-style: normal;
    color: var(--gold-deep);
}

/* ==========================================================================
   MEMPELAI
   ========================================================================== */
.person-photo {
    width: min(210px, 62%);
    aspect-ratio: 0.72;
    margin: 0 auto 1.8rem;
}

.person-name {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: 3.3rem;
    line-height: 1.2;
    color: var(--gold);
    padding: 0.05em 0.2em;
}

.person-full {
    font-size: 1.2rem;
    color: var(--moss-deep);
    margin-bottom: 0.7rem;
}

.person-parents {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--muted);
}

.person-parents strong {
    font-weight: 400;
    color: var(--ink);
}

.person-ig {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1rem;
    padding: 0.3rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.55);
    color: var(--gold-deep);
    text-decoration: none;
    font-size: 0.98rem;
    transition: background 0.3s, transform 0.3s;
}

.person-ig:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.amp {
    font-family: var(--font-script);
    font-size: 4.2rem;
    line-height: 1;
    color: var(--gold-light);
    margin: 2.2rem 0 2rem;
}

/* ==========================================================================
   ACARA
   ========================================================================== */
.countdown {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 3rem;
}

.cd-item {
    width: 68px;
    height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    border: 1.5px solid var(--gold);
    border-radius: 999px 999px 14px 14px;
    box-shadow: 0 8px 16px rgba(80, 60, 20, 0.14);
    padding-top: 6px;
}

.cd-number {
    font-size: 1.65rem;
    line-height: 1.1;
    color: var(--moss-deep);
    font-variant-numeric: lining-nums tabular-nums;
}

.cd-label {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--gold-deep);
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: 2.8rem;
}

.event-card {
    position: relative;
    max-width: 330px;
    width: 100%;
    margin: 0 auto;
    padding: 4.4rem 1.6rem 2.3rem;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--gold);
    border-radius: 165px 165px 30px 30px;
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.4),
        0 0 0 7.5px rgba(168, 123, 31, 0.55),
        0 20px 36px rgba(80, 60, 20, 0.24);
    overflow: hidden;
}

/* watermark bunga di dasar kartu */
.event-card::after {
    content: '';
    position: absolute;
    left: -34px;
    bottom: -34px;
    width: 190px;
    height: 190px;
    background: url('../images/bloom.svg') left bottom / contain no-repeat;
    opacity: 0.3;
    pointer-events: none;
}

.event-card > * {
    position: relative;
    z-index: 1;
}

.event-title {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: 2.7rem;
    line-height: 1.2;
    word-spacing: 0.14em;
    color: var(--gold);
    padding: 0.05em 0.2em;
}

.event-icon {
    display: block;
    margin: 0.5rem 0 0.7rem;
    font-size: 1.5rem;
    color: var(--gold);
}

.event-time {
    font-size: 1.25rem;
    color: var(--moss-deep);
}

.event-place {
    margin-top: 0.7rem;
    font-size: 1.12rem;
    color: var(--ink);
}

.event-addr {
    margin: 0.2rem auto 1.4rem;
    max-width: 24ch;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--muted);
}

/* ==========================================================================
   KISAH KAMI
   ========================================================================== */
.timeline {
    position: relative;
    list-style: none;
    max-width: 340px;
    margin: 0 auto;
    padding-left: 2.1rem;
    text-align: left;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 1.5px;
    background: linear-gradient(to bottom, transparent, var(--gold) 8%, var(--gold) 92%, transparent);
    transform-origin: top;
}

.timeline li {
    position: relative;
    padding-bottom: 2.2rem;
}

.timeline li:last-child {
    padding-bottom: 0;
}

.timeline li::before {
    content: '';
    position: absolute;
    left: -2.1rem;
    top: 0.7rem;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--mist-2);
    border: 2px solid var(--gold);
    box-shadow: 0 0 0 4px rgba(233, 240, 229, 0.8);
}

.tl-year {
    display: block;
    font-family: var(--font-script);
    font-size: 2.1rem;
    line-height: 1.2;
    color: var(--gold);
}

.timeline h3 {
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--moss-deep);
    margin-bottom: 0.2rem;
}

.timeline p {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--muted);
}

/* ==========================================================================
   SUSUNAN ACARA
   ========================================================================== */
.rundown {
    list-style: none;
    max-width: 330px;
    margin: 0 auto;
    padding: 1.2rem 1.4rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1.5px solid var(--line);
    border-radius: 24px;
}

.rundown li {
    display: grid;
    grid-template-columns: 4.2rem 1fr;
    align-items: baseline;
    gap: 1rem;
    padding: 0.65rem 0;
    text-align: left;
    border-bottom: 1px dashed rgba(168, 123, 31, 0.35);
}

.rundown li:last-child {
    border-bottom: 0;
}

.rd-time {
    text-align: right;
    font-size: 1.15rem;
    color: var(--gold-deep);
    font-variant-numeric: lining-nums tabular-nums;
}

.rd-text {
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--ink);
}

/* ==========================================================================
   GALERI
   ========================================================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.g-item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1.5px solid var(--gold);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: var(--mist);
    aspect-ratio: 1 / 1;
    box-shadow: 0 10px 20px rgba(47, 74, 44, 0.2);
    transition: transform 0.4s var(--ease), box-shadow 0.4s;
}

.g-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}

.g-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 26px rgba(47, 74, 44, 0.28);
}

.g-item:hover img {
    transform: scale(1.06);
}

.g-tall {
    grid-row: span 2;
    aspect-ratio: auto;
    border-radius: 999px 999px 16px 16px;
}

.g-wide {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
    border-radius: 16px 16px 90px 90px / 16px 16px 60px 60px;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 36, 20, 0.95);
}

.lightbox[hidden] {
    display: none;
}

.lightbox:not([hidden]) {
    animation: fadeIn 0.4s ease;
}

.lb-img {
    max-width: 92vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 0 0 2px var(--gold);
}

.lb-img.swap {
    animation: lbImg 0.6s var(--ease);
}

.lb-close,
.lb-prev,
.lb-next {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(220, 189, 110, 0.6);
    background: rgba(255, 255, 255, 0.08);
    color: var(--gold-light);
    font-size: 1rem;
    cursor: pointer;
}

.lb-close { top: 16px; right: 16px; }
.lb-prev  { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 10px; top: 50%; transform: translateY(-50%); }

.lb-close:focus-visible,
.lb-prev:focus-visible,
.lb-next:focus-visible {
    outline-color: var(--gold-light);
}

/* ==========================================================================
   TANDA KASIH
   ========================================================================== */
.bank-list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    max-width: 320px;
    margin: 2rem auto 0;
}

.bank-card {
    padding: 2.2rem 1.25rem 1.6rem;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--gold);
    border-radius: 110px 110px 24px 24px / 80px 80px 24px 24px;
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.4),
        0 0 0 6.5px rgba(168, 123, 31, 0.5),
        0 16px 30px rgba(80, 60, 20, 0.22);
}

.bank-name {
    font-size: 1.55rem;
    line-height: 1.3;
    color: var(--gold-deep);
}

.bank-number {
    margin-top: 0.2rem;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    color: var(--moss-deep);
    font-variant-numeric: lining-nums tabular-nums;
}

.bank-holder {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--muted);
}

.btn-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1.4rem;
    border-radius: 999px;
    border: 1.5px solid var(--gold);
    background: transparent;
    color: var(--gold-deep);
    font-family: var(--font-serif);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, transform 0.3s;
}

.btn-copy:hover {
    background: var(--gold);
    color: #fffaf0;
}

.btn-copy:active {
    transform: scale(0.96);
}

/* ==========================================================================
   RSVP & UCAPAN
   ========================================================================== */
.rsvp-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 340px;
    margin: 0 auto;
    text-align: left;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.field-row {
    display: flex;
    gap: 0.8rem;
}

.field label {
    font-style: italic;
    font-size: 1rem;
    color: var(--muted);
    padding-left: 0.4rem;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    transition: border-color 0.3s, background 0.3s;
}

.field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2386600f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
}

.field textarea {
    resize: vertical;
    min-height: 110px;
    border-radius: 20px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--gold);
    background: #ffffff;
}

.rsvp-form .btn-block {
    margin-top: 0.4rem;
}

.wishes-feed {
    max-width: 340px;
    max-height: 380px;
    margin: 2.4rem auto 0;
    overflow-y: auto;
    padding: 4px 6px 4px 2px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.wish-card {
    padding: 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.78);
    border-left: 3px solid var(--gold);
    border-radius: 6px 18px 18px 6px;
}

.wish-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.2rem;
}

.wish-author {
    font-size: 1.08rem;
    color: var(--moss-deep);
}

.wish-status {
    flex-shrink: 0;
    font-size: 0.88rem;
    font-style: italic;
    color: var(--moss);
}

.wish-status-no {
    color: #9b4a3c;
}

.wish-new {
    animation: newWish 0.8s var(--ease);
}

.wish-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--muted);
}

/* ==========================================================================
   PENUTUP
   ========================================================================== */
.closing {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 5rem 1.75rem 9rem;
}

.closing > *:not(.deco) {
    position: relative;
    z-index: 2;
}

.bloom-close-l { --w: 220px; left: -26px; bottom: -22px; --sway: 10s; --sd: -4s; }
.bloom-close-r { --w: 220px; right: -26px; bottom: -22px; transform: scaleX(-1); --sway: 12s; --sd: -8s; }

.closing-text {
    max-width: 32ch;
    margin: 0 auto 1.6rem;
    font-style: italic;
    font-size: 1.08rem;
    color: var(--ink);
}

.closing-regards {
    color: var(--muted);
}

.closing-names {
    font-family: var(--font-script);
    font-size: 3.6rem;
    line-height: 1.3;
    word-spacing: 0.12em;
    white-space: nowrap;
    color: var(--gold);
    padding: 0.05em 0.2em;
}

.footer-credit {
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.footer-credit i {
    color: var(--coral);
}

.footer-credit a {
    color: var(--gold-deep);
    text-decoration: none;
}

/* ==========================================================================
   MUSIK & NAVIGASI BAWAH (gaya sama dengan desain 16-29)
   ========================================================================== */
#music-btn {
    position: fixed;
    top: 18px;
    right: max(18px, calc(50% - 240px + 18px));
    width: 42px;
    height: 42px;
    border: 1px solid rgba(233, 221, 195, 0.7);
    border-radius: 50%;
    background: rgba(74, 103, 69, 0.95);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 4px 14px rgba(35, 52, 32, 0.4);
    animation: rotateMusic 4s linear infinite;
}

#music-btn.paused {
    animation-play-state: paused;
    opacity: 0.88;
}

#music-btn::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(233, 221, 195, 0.95);
    opacity: 0;
    pointer-events: none;
}

#music-btn:not(.paused)::after {
    animation: ripple 2.4s var(--ease) infinite;
}

.bottom-nav {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(74, 103, 69, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(233, 221, 195, 0.45);
    border-radius: 50px;
    padding: 0.5rem 1.2rem;
    display: flex;
    gap: clamp(0.7rem, 3.6vw, 1.5rem);
    z-index: 998;
    box-shadow: 0 8px 25px rgba(35, 52, 32, 0.4);
}

.nav-item {
    color: #e3ecd9;
    text-decoration: none;
    font-size: 0.78rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: color 0.3s, transform 0.3s;
}

.nav-item i {
    font-size: 1.1rem;
}

.nav-item.active,
.nav-item:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

.nav-item:focus-visible {
    outline-color: #ffffff;
}

body.opened .bottom-nav {
    animation: navIn 1.2s cubic-bezier(0.34, 1.45, 0.64, 1) 1.6s backwards;
}

.nav-item.active i {
    animation: navPop 0.55s cubic-bezier(0.34, 1.8, 0.64, 1);
}

/* ==========================================================================
   ANIMASI
   Konsep: kabut dan angin hutan. Semua gerak memakai easing "keluar cepat,
   berhenti pelan" (tanpa linear), ada gerak diam yang pelan (bunga bergoyang,
   kabut melayang, kelopak jatuh), dan tiap jenis elemen punya gaya masuk sendiri.
   ========================================================================== */
@keyframes coverIn {
    from { opacity: 0; transform: translateY(18px); filter: blur(5px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

/* bingkai lengkung terbuka dari bawah ke atas */
@keyframes unfold {
    from { clip-path: inset(100% -24px -24px -24px); }
    to   { clip-path: inset(-24px); }
}

/* foto menenang dari sedikit membesar */
@keyframes settle {
    from { transform: scale(1.22); }
    to   { transform: none; }
}

/* tulisan script tertulis dari kiri ke kanan */
@keyframes writeIn {
    from { clip-path: inset(-30% 100% -30% -6%); opacity: 0.35; }
    to   { clip-path: inset(-30% -6% -30% -6%); opacity: 1; }
}

@keyframes riseSoft {
    from { opacity: 0; transform: translateY(20px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes lbImg {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: none; }
}

@keyframes newWish {
    from { opacity: 0; transform: translateY(-14px); background: rgba(220, 189, 110, 0.5); }
    to   { opacity: 1; transform: none; }
}

@keyframes tick {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes rotateMusic {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes ripple {
    from { transform: scale(1); opacity: 0.7; }
    to   { transform: scale(1.9); opacity: 0; }
}

@keyframes navIn {
    from { transform: translate(-50%, 160%); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
}

@keyframes navPop {
    0%   { transform: scale(0.7); }
    60%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ---------- gerak diam: pelan dan tidak berhenti ---------- */
/* memakai properti rotate/translate/scale terpisah agar tidak bentrok dengan transform pembalik bunga */
@keyframes sway {
    0%, 100% { rotate: 0deg; }
    35%      { rotate: 1.6deg; }
    70%      { rotate: -0.9deg; }
}

@keyframes float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -7px; }
}

@keyframes mistDrift {
    from { transform: translateX(-10%); opacity: 0.5; }
    to   { transform: translateX(10%); opacity: 0.95; }
}

@keyframes petalFall {
    0%   { transform: translate3d(0, -8vh, 0) rotate(0deg); opacity: 0; }
    8%   { opacity: 0.9; }
    25%  { transform: translate3d(calc(var(--dx) * 0.7), 22vh, 0) rotate(95deg); }
    50%  { transform: translate3d(calc(var(--dx) * -0.3), 50vh, 0) rotate(200deg); }
    75%  { transform: translate3d(calc(var(--dx) * 0.8), 78vh, 0) rotate(290deg); opacity: 0.85; }
    100% { transform: translate3d(calc(var(--dx) * -0.2), 108vh, 0) rotate(380deg); opacity: 0; }
}

/* kilau emas lewat di atas nama, berhenti sejenak lalu lewat lagi */
@keyframes sheen {
    0%, 40% { background-position: 100% 0; }
    100%    { background-position: 0% 0; }
}

@keyframes btnShine {
    0%, 55% { transform: translateX(-130%); }
    100%    { transform: translateX(130%); }
}

@keyframes bloomIn {
    from { opacity: 0; scale: 0.78; }
    to   { opacity: 1; scale: 1; }
}

.cover-names,
.hero-names,
.closing-names {
    background-image: linear-gradient(100deg, var(--gold) 0%, var(--gold) 40%, #f3dc98 50%, var(--gold) 60%, var(--gold) 100%);
    background-size: 280% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.closing-names {
    animation: sheen 7s ease-in-out infinite;
}

/* kelopak yang jatuh pelan */
.petals {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.petals i {
    position: absolute;
    top: 0;
    left: var(--x);
    width: var(--s);
    height: calc(var(--s) * 1.4);
    border-radius: 100% 0 100% 0;
    background: linear-gradient(135deg, #fbe2dc 0%, #f2a392 100%);
    box-shadow: 0 1px 3px rgba(150, 70, 50, 0.2);
    opacity: 0;
    animation: petalFall var(--dur) ease-in-out var(--d) infinite;
}

.petals i:nth-child(3n + 2) {
    background: linear-gradient(135deg, #fff4ea 0%, #f6c7ae 100%);
}

.petals i:nth-child(3n) {
    background: linear-gradient(135deg, #ffffff 0%, #f3b3b8 100%);
}

/* kabut tipis yang melintas */
.mist {
    position: absolute;
    left: -40%;
    width: 180%;
    height: 230px;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 68%);
    animation: mistDrift 19s ease-in-out infinite alternate;
}

.mist-a { top: 26%; }
.mist-b { top: 60%; animation-duration: 25s; animation-delay: -9s; }
.mist-c { top: 4%; animation-duration: 22s; animation-delay: -5s; }

/* ---------- hero: tampil berurutan setelah kabut menyebar ---------- */
body.locked .hero-seq > * {
    opacity: 0;
}

body.opened .hero-seq > * {
    animation: riseSoft 1.3s var(--ease) backwards;
}

body.opened .hero-kicker { animation-delay: 1.2s; }

body.opened .hero-photo {
    animation:
        unfold 1.8s var(--ease) 1.3s backwards,
        float 7.5s ease-in-out 3.4s infinite;
}

body.opened .hero-photo img {
    animation: settle 2.6s var(--ease) 1.3s backwards;
}

body.opened .hero-names {
    animation:
        writeIn 2.2s cubic-bezier(0.45, 0.05, 0.25, 1) 2.3s backwards,
        sheen 7s ease-in-out 5.2s infinite;
}

body.opened .hero-date { animation-delay: 3s; }

body.opened .bloom-hero-tr,
body.opened .bloom-hero-bl {
    animation: bloomIn 2.4s var(--ease) 1.1s backwards;
}

/* ---------- muncul saat digulir: tiap jenis elemen punya gerak sendiri ---------- */
.js [data-reveal] {
    opacity: 0;
    transition:
        opacity 1.2s var(--ease) var(--d, 0s),
        transform 1.4s var(--ease) var(--d, 0s),
        filter 1.2s var(--ease) var(--d, 0s),
        scale 1.8s var(--ease) var(--d, 0s),
        clip-path 1.8s var(--ease) var(--d, 0s);
}

.js [data-reveal="up"] {
    transform: translateY(28px);
    filter: blur(6px);
}

.js [data-reveal="slide"] {
    transform: translateX(-20px);
    filter: blur(4px);
}

.js [data-reveal="card"] {
    transform: translateY(46px) scale(0.95);
    filter: blur(4px);
}

.js [data-reveal="pop"] {
    transform: translateY(22px) scale(0.9);
}

.js [data-reveal="medal"] {
    transform: translateY(22px) scale(0.8);
    transition-timing-function: var(--spring);
}

.js [data-reveal="bloom"] {
    scale: 0.78;
}

/* bingkai lengkung: terbuka dari bawah, fotonya menenang */
.js [data-reveal="arch"] {
    clip-path: inset(calc(100% - 1px) -24px -24px -24px);
}

.js [data-reveal="arch"] img {
    transform: scale(1.22);
    transition: transform 2.4s var(--ease) var(--d, 0s);
}

/* judul script: tertulis dari kiri, lalu hiasan melebar dari tengah */
.js [data-reveal="write"] {
    clip-path: inset(-30% calc(100% - 1px) -30% -6%);
    transition-duration: 1.2s, 1.4s, 1.2s, 1.8s, 2.2s;
    transition-timing-function: var(--ease), var(--ease), var(--ease), var(--ease), cubic-bezier(0.45, 0.05, 0.25, 1);
}

.js [data-reveal="write"]::after {
    transform: scaleX(0);
    transition: transform 1.3s var(--ease) calc(var(--d, 0s) + 0.9s);
}

/* garis linimasa menggambar dari atas ke bawah */
.js [data-reveal="line"] {
    opacity: 1;
}

.js [data-reveal="line"]::before {
    transform: scaleY(0);
    transition: transform 2.4s var(--ease) var(--d, 0s);
}

.js [data-reveal].in {
    opacity: 1;
    scale: 1;
}

/* transform hanya dibalik untuk jenis yang memakainya; bunga penutup punya transform pembalik sendiri */
.js [data-reveal="up"].in,
.js [data-reveal="slide"].in,
.js [data-reveal="card"].in,
.js [data-reveal="pop"].in,
.js [data-reveal="medal"].in {
    transform: none;
    filter: none;
}

.js [data-reveal="arch"].in {
    clip-path: inset(-24px);
}

.js [data-reveal="arch"].in img {
    transform: none;
}

.js [data-reveal="write"].in {
    clip-path: inset(-30% -6% -30% -6%);
}

.js [data-reveal="write"].in::after,
.js [data-reveal="line"].in::before {
    transform: none;
}

.cd-number.tick {
    animation: tick 0.55s var(--ease);
}

/* ==========================================================================
   RESPONSIF & AKSESIBILITAS
   ========================================================================== */
/* layar pendek: bunga sampul dikecilkan agar tidak menumpuk di tombol */
@media (max-height: 640px) {
    .bloom-bl,
    .bloom-br {
        --w: min(190px, 42%);
    }

    .bloom-tl,
    .bloom-tr {
        --w: min(110px, 26%);
    }

    .cover-title {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    section {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .bottom-nav {
        padding: 0.45rem 0.9rem;
    }

    .nav-item {
        font-size: 0.7rem;
    }

    .cd-item {
        width: 58px;
        height: 78px;
    }

    .cd-number {
        font-size: 1.35rem;
    }

    .sec-title {
        font-size: 2.5rem;
    }

    .event-card {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    #cover.opened {
        display: none;
    }

    .petals,
    .mist {
        display: none;
    }

    body.locked .hero-seq > *,
    .js [data-reveal] {
        opacity: 1;
        clip-path: none;
        transform: none;
        filter: none;
        scale: 1;
    }

    .js [data-reveal="arch"] img,
    .js [data-reveal="write"]::after,
    .js [data-reveal="line"]::before {
        transform: none;
    }
}