/* ==========================================================================
   Undangan Pernikahan Digital — Sulthan & Maydhita
   Tema: Kertas & Sogan — dusty rose + cokelat batik sogan Solo, ornamen melati
   ========================================================================== */

/* ---------- Token Desain ---------- */
:root {
    /* Warna */
    --cream: #f6efe4;
    --rose-100: #f7e9e5;
    --rose-300: #e2bdbc;
    --rose-500: #c08387;
    /* dusty rose */
    --rose-700: #9c5f66;
    --rose-900: #4a3328;
    --gold-300: #e8d7bb;
    --gold-500: #b08a5a;
    --gold-600: #8a6440;
    --sogan: #6b4a32;
    --sogan-900: #3f2c20;
    --ink: #463831;
    --muted: #85736a;
    --white: #fffcf6;
    color-scheme: #fdf8f3;

    /* Font */
    --serif: "Cormorant Garamond", "Times New Roman", serif;
    --script: "Great Vibes", cursive;
    --sans: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --arabic: "Amiri", serif;

    /* Ornamen batik kawung (Jawa) — dipakai sebagai latar halus */
    --kawung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%238a6440' stroke-width='1' opacity='0.08'%3E%3Cellipse cx='28' cy='13' rx='8' ry='12'/%3E%3Cellipse cx='28' cy='43' rx='8' ry='12'/%3E%3Cellipse cx='13' cy='28' rx='12' ry='8'/%3E%3Cellipse cx='43' cy='28' rx='12' ry='8'/%3E%3Ccircle cx='28' cy='28' r='2.5'/%3E%3C/g%3E%3C/svg%3E");

    /* Untaian melati (ronce). Dulu rantai belah ketupat, tapi itu yang bikin kesan Lebaran */
    --songket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 26 14'%3E%3Cpath d='M0 7H26' stroke='%23b08a5a' stroke-width='.7' opacity='.55'/%3E%3Cg transform='translate(13 7)' fill='%23fffcf6' stroke='%23b08a5a' stroke-width='.7'%3E%3Cpath id='p' d='M0 -1C1.6 -2.6 1.6 -4.8 0 -5.8C-1.6 -4.8 -1.6 -2.6 0 -1Z'/%3E%3Cuse href='%23p' transform='rotate(72)'/%3E%3Cuse href='%23p' transform='rotate(144)'/%3E%3Cuse href='%23p' transform='rotate(216)'/%3E%3Cuse href='%23p' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle cx='13' cy='7' r='.9' fill='%23b08a5a'/%3E%3C/svg%3E");

    --shadow-card: 0 24px 50px -22px rgba(74, 51, 40, 0.28);
    --radius: 20px;
}

/* ---------- Reset & Dasar ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: calc(100% * var(--fs, 1.15)); /* skala font: diatur tombol A− / A+ */
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent; /* hilangkan kotak biru saat tombol diketuk di HP */
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--ink);
    background-color: var(--cream);
    background-image: var(--kawung);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body:not(.opened) {
    overflow: hidden;
}

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

button {
    font: inherit;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

section {
    scroll-margin-top: 16px;
}

::selection {
    background: var(--rose-300);
    color: var(--rose-900);
}

/* ---------- Utilitas ---------- */
.container {
    width: min(100% - 2.75rem, 560px);
    margin-inline: auto;
}

.container--wide {
    width: min(100% - 2.75rem, 980px);
}

.container--gift {
    width: min(100% - 2.75rem, 720px);
}

.sec {
    padding: 76px 0;
    position: relative;
}

.tint {
    background: linear-gradient(180deg, rgba(247, 233, 229, 0.0), rgba(247, 233, 229, 0.65) 18%, rgba(247, 233, 229, 0.65) 82%, rgba(247, 233, 229, 0));
}

.sec-head {
    text-align: center;
    margin-bottom: 34px;
}

.eyebrow {
    font-size: 0.87rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: 10px;
}

.sec-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(2rem, 7vw, 2.6rem);
    color: var(--rose-900);
    line-height: 1.15;
}

.sec-sub {
    text-align: center;
    font-size: 0.9rem;
    color: var(--muted);
    max-width: 400px;
    margin: -18px auto 30px;
}

.amp {
    font-family: var(--script);
    font-weight: 400;
    color: var(--gold-500);
    padding: 0 0.08em;
}

.gold-grad-text {
    color: var(--sogan);
}

/* Ornamen bunga melati */
.orn-star {
    width: 24px;
    height: 24px;
    fill: var(--white);
    stroke: var(--gold-500);
    stroke-width: 1.4;
    --m-core: var(--gold-500);
}

/* Garis pembatas: garis — bintang — garis */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 26px auto;
    max-width: 300px;
}

.divider .line {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--gold-500));
}

.divider .line:last-child {
    background: linear-gradient(90deg, var(--gold-500), transparent);
}

.divider--light .line {
    background: linear-gradient(90deg, transparent, var(--gold-300));
}

.divider--light .line:last-child {
    background: linear-gradient(90deg, var(--gold-300), transparent);
}

.divider--light .orn-star {
    fill: transparent;
    stroke: var(--gold-300);
    --m-core: var(--gold-300);
}

/* Pita songket (aksen Minang) */
.songket {
  height: 14px;
  width: 130px; /* 5 × 26px = motif utuh, gak kepotong */
  margin: 14px auto 0;
  background-image: var(--songket);
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.9;
}

/* Kaca buram */
.glass {
    background: rgba(255, 250, 246, 0.14);
    border: 1px solid rgba(232, 215, 187, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Kartu dasar + sudut ornamen */
.card {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(176, 138, 90, 0.35);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 26px 22px;
}


/* Tombol */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 34px;
    border-radius: 999px;
    background: var(--sogan);
    color: #f6efe4;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: none;
    box-shadow: 0 14px 28px -12px rgba(63, 44, 32, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.btn-gold svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.btn-gold:hover, .btn-gold:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 20px 36px -14px rgba(63, 44, 32, 0.7);
    background: var(--sogan-900);
}

.btn-gold:active {
    transform: translateY(0);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 30px;
    border-radius: 999px;
    border: 1px solid rgba(138, 100, 64, 0.55);
    color: var(--gold-600);
    background: rgba(255, 253, 250, 0.75);
    font-size: 0.89rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background 0.3s ease, transform 0.3s ease;
}

.btn-ghost svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.btn-ghost:hover, .btn-ghost:focus-visible {
    background: var(--rose-100);
    transform: translateY(-2px);
}

.btn-block {
    width: 100%;
}

.btn-gold:focus-visible, .btn-ghost:focus-visible, .dock-link:focus-visible, .music-btn:focus-visible {
    outline: 2px solid var(--rose-700);
    outline-offset: 3px;
}

/* Bingkai foto mihrab (lengkung Islami) */
.arch {
    padding: 10px;
    border: 1px solid rgba(176, 138, 90, 0.55);
    border-radius: 999px 999px 22px 22px;
    background: var(--white);
    position: relative;
}

.arch::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(176, 138, 90, 0.4);
    border-radius: 999px 999px 18px 18px;
    pointer-events: none;
}

.arch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 990px 990px 14px 14px;
}

/* Animasi muncul saat scroll (dipicu IntersectionObserver di script.js) */
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
}

[data-reveal].revealed {
    opacity: 1;
    transform: none;
}

/* Kartu membuka seperti kertas dilipat (cuma transform + opacity, ringan di GPU) */
.quote-card[data-reveal], .card[data-reveal], .map-wrap[data-reveal] {
    transform: perspective(900px) rotateX(-16deg) translateY(26px);
    transform-origin: 50% 0;
    transition-duration: 1s, 1.1s;
}

.quote-card[data-reveal].revealed, .card[data-reveal].revealed, .map-wrap[data-reveal].revealed {
    transform: none;
}

/* ==========================================================================
   SAMPUL / LANDING
   ========================================================================== */
.cover {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    overflow: hidden;
    background-color: var(--cream);
    background-image: radial-gradient(90% 60% at 50% 45%, rgba(255, 252, 246, 0.9), rgba(246, 239, 228, 0) 70%), var(--kawung);
    transition: opacity 0.6s ease;
}

.cover.leaving {
    opacity: 0;
    pointer-events: none;
}


.cover.gone {
    display: none;
}

.cover__content {
    position: relative;
    text-align: center;
    color: var(--rose-900);
    padding: 0 24px;
    width: min(100%, 420px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cover__lead {
    font-family: var(--script);
    font-size: clamp(1.6rem, 6.5vw, 2rem);
    color: var(--rose-700);
    line-height: 1.2;
}

.cover__names {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.5rem, 11vw, 3.8rem);
    line-height: 1.05;
    margin-top: 4px;
}

.cover__names .amp {
    font-size: 0.85em;
    color: var(--gold-500);
}

.cover__date {
    margin-top: 10px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--gold-600);
}

.cover__note {
    margin-top: 16px;
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* ---------- Amplop (3D ringan: hanya transform & opacity yang dianimasikan) ---------- */
.env {
    position: relative;
    width: min(78vw, 320px);
    aspect-ratio: 6 / 5;
    margin: 30px 0 26px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.env__back {
    position: absolute;
    inset: 0;
    border-radius: 0 0 6px 6px; /* sudut atas tajam: menyatu dengan segitiga tutup, tanpa celah di pojok */
    background: linear-gradient(180deg, #d4bd98, #e2d0b2 60%);
    box-shadow: 0 30px 46px -26px rgba(63, 44, 32, 0.55);
}

.env__letter {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 6%;
    height: 90%;
    z-index: 1;
    overflow: hidden;
    border-radius: 4px;
    background: var(--white);
    /* tanpa bingkai putih: dulu terlihat seperti celah di samping kartu */
    box-shadow: 0 0 0 1px rgba(138, 100, 64, 0.22), 0 6px 18px -10px rgba(63, 44, 32, 0.4);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
}

.env__letter img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.env__pocket {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* garis tipis di tepi bukaan V (filter di pembungkus, karena clip-path memotong bayangan) */
    filter: drop-shadow(0 -1px 1.5px rgba(63, 44, 32, 0.22));
}

.env__front {
    position: absolute;
    inset: 0;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(170deg, #f6eddf, #eee2cd);
    clip-path: polygon(0 0, 50% 43%, 100% 0, 100% 100%, 0 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 18px 22px;
}

.env__to {
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--muted);
}

.env__guest.is-long {
    font-size: clamp(1.25rem, 5.4vw, 1.5rem);
}

.env__guest {
    font-family: var(--script);
    font-size: clamp(1.5rem, 6.5vw, 1.85rem);
    line-height: 1.35;
    color: var(--rose-900);
    overflow-wrap: anywhere;
}

.env__flap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44%;
    z-index: 3;
    background: linear-gradient(180deg, #ecdfc8, #e2cfb1);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: 50% 0;
    /* Lipat 2D, sengaja tanpa rotasi 3D: Chrome Android mengurutkan elemen 3D menurut
       kedalaman, bukan z-index, sehingga tutup bisa tergambar di depan foto. */
    transition: transform 0.35s cubic-bezier(0.55, 0, 0.9, 0.45) 0.2s, opacity 0s linear 0.55s;
}

/* Tutup sisi dalam: segitiga di atas amplop, di belakang kartu, tumbuh ke atas */
.env__flapin {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 1px); /* tumpuk 1px: cegah garis sambungan sub-piksel di HP */
    height: 44%;
    z-index: 0;
    background: linear-gradient(0deg, #d4bd98, #e8d8bc);
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.4s cubic-bezier(0.1, 0.55, 0.45, 1) 0.55s;
}

.env__seal {
    position: absolute;
    left: 50%;
    top: 44%;
    z-index: 4;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--rose-700);
    box-shadow: 0 4px 10px -3px rgba(63, 44, 32, 0.5), inset 0 0 0 3px rgba(255, 255, 255, 0.14);
    --m-core: var(--rose-900);
    transition: transform 0.35s ease, opacity 0.3s ease;
}

.env__seal svg {
    width: 30px;
    height: 30px;
    fill: #fbeee8;
}

/* Urutan saat dibuka */
.cover.is-open .env__seal {
    transform: scale(1.4);
    opacity: 0;
}

.cover.is-open .env__flap {
    transform: scaleY(0);
    opacity: 0;
}

.cover.is-open .env__flapin {
    transform: none;
}

.cover.is-open .env__letter {
    transform: translateY(-36%);
}

.cover.is-open .cover__lead,
.cover.is-open .cover__names,
.cover.is-open .cover__date,
.cover.is-open #btn-open,
.cover.is-open .cover__note {
    animation: coverOut 0.4s ease forwards;
}

@keyframes coverOut {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}


/* Animasi masuk elemen sampul */
.anim {
    opacity: 0;
    transform: translateY(26px);
    animation: coverIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.a1 {
    animation-delay: 0.15s;
}

.a2 {
    animation-delay: 0.35s;
}

.a3 {
    animation-delay: 0.55s;
}

.a4 {
    animation-delay: 0.8s;
}

.a5 {
    animation-delay: 1.05s;
}

.a6 {
    animation-delay: 1.35s;
}

@keyframes coverIn {
    to {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.bismillah {
    font-family: var(--arabic);
    font-size: clamp(1.5rem, 6vw, 1.9rem);
    color: var(--rose-700);
    text-align: center;
    line-height: 1.9;
}

.quote-card {
    margin-top: 20px;
    background: var(--white);
    border: 1px solid rgba(176, 138, 90, 0.35);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 30px 24px;
    text-align: center;
    position: relative;
}


.quote-ar {
    font-family: var(--arabic);
    font-size: 1.28rem;
    line-height: 2.15;
    color: var(--rose-900);
}

.quote-id {
    margin-top: 16px;
    font-size: 0.97rem;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.9;
}

.quote-src {
    margin-top: 14px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--gold-600);
}

.hero-photo {
    width: min(76%, 330px);
    aspect-ratio: 4 / 5;
    margin: 8px auto 0;
}

.hero-photo__clip {
    height: 100%;
    overflow: hidden;
    border-radius: 990px 990px 14px 14px;
}

.hero-photo__clip img {
    border-radius: 0;
}

.hero-names {
    margin-top: 26px;
    text-align: center;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(2rem, 8vw, 2.5rem);
    color: var(--rose-900);
    line-height: 1.15;
}

.hero-date {
    margin-top: 8px;
    text-align: center;
    font-size: 0.89rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-600);
}

/* Countdown */
.countdown {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.cd-box {
    min-width: 72px;
    padding: 14px 6px 12px;
    background: var(--white);
    border: 1px solid rgba(176, 138, 90, 0.4);
    border-radius: 16px;
    box-shadow: 0 16px 30px -16px rgba(74, 51, 40, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.cd-num {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cd-label {
    font-size: 0.83rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}

.countdown-done {
    margin-top: 18px;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--gold-600);
}

/* ==========================================================================
   MEMPELAI
   ========================================================================== */
.sec--couple .container {
    max-width: 980px;
}
.sec--couple .love {
    max-width: 980px;
}
.p-grid {
    display: grid;
    gap: 34px;
}

.p-card {
    text-align: center;
    padding: 34px 24px 30px;
}

.p-role {
    display: inline-block;
    padding: 6px 18px;
    border: 1px solid rgba(176, 138, 90, 0.55);
    border-radius: 999px;
    background: var(--white);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-600);
}

.p-photo {
    width: min(72%, 270px);
    aspect-ratio: 3 / 4;
    margin: 20px auto 0;
}

.p-name {
    margin-top: 24px;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.85rem;
    color: var(--rose-900);
    line-height: 1.2;
}

.p-meta {
    margin-top: 8px;
    font-size: 0.87rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold-600);
}

.p-parents {
    margin-top: 10px;
    font-size: 0.94rem;
    font-weight: 300;
    font-style: italic;
    color: var(--muted);
    line-height: 1.6;
}

.p-parent-name {
    font-weight: 600;
    font-style: italic;
    color: var(--rose-700);
}

.p-bio {
    margin-top: 14px;
    font-size: 0.98rem;
    font-weight: 300;
    color: var(--muted);
    max-width: 330px;
    margin-inline: auto;
}

.gunungan {
    width: 54px;
    margin: 0 auto;
    color: var(--gold-500);
    opacity: 0.85;
}

.gunungan svg {
    width: 100%;
    height: auto;
}

@media (min-width: 860px) {
    .p-grid {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 28px;
    }
}

/* ==========================================================================
   ACARA & PETA
   ========================================================================== */
.e-card {
    text-align: center;
    padding: 30px 24px 28px;
    margin-bottom: 22px;
}

.e-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--rose-100);
    border: 1px solid rgba(176, 138, 90, 0.45);
    color: var(--gold-600);
    margin-bottom: 14px;
}

.e-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.e-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.55rem;
    color: var(--rose-900);
}

.e-date {
    margin-top: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--rose-700);
}

.e-time {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 1.0rem;
    color: var(--ink);
}

.e-time svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--gold-600);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.e-rule {
    display: block;
    width: 44px;
    height: 1px;
    margin: 18px auto 0;
    background: var(--gold-500);
    opacity: 0.55;
}

.e-venue {
    margin-top: 14px;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ink);
}

.e-addr {
    margin-top: 6px;
    font-size: 0.97rem;
    color: var(--muted);
}

.e-note {
    margin-top: 0px;
    padding-bottom: 10px;
    font-size: 0.89rem;
    font-style: italic;
    color: var(--muted);
}

.sec--events .btn-gold {
    margin-top: 6px;
}

.map-wrap {
    margin-top: 22px;
    height: 280px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(176, 138, 90, 0.4);
    box-shadow: var(--shadow-card);
}

.map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: sepia(0.12) saturate(1.02);
}

.sec--events .btn-ghost {
    margin-top: 18px;


}

.venue-card {
    margin-top: 22px;
    background: linear-gradient(180deg, var(--white), #fdf5f1);
    border: 1px solid rgba(176, 138, 90, 0.35);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.venue-card__photo {
    position: relative;
    display: block;
}

.venue-card__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.venue-card__photo:hover img {
    transform: scale(1.04);
}

.venue-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(74, 51, 40, 0.78);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: var(--gold-300);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 8px 13px;
    border-radius: 999px;
}

.venue-card__badge svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    flex: none;
}

.venue-card__body {
    padding: 22px 22px 26px;
    text-align: center;
}

.venue-card__body .eyebrow {
    margin-bottom: 8px;
}

.venue-card__title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--rose-900);
    line-height: 1.25;
}

.venue-card__desc {
    margin-top: 10px;
    font-size: 0.98rem;
    font-weight: 300;
    color: var(--muted);
    max-width: 340px;
    margin-inline: auto;
}

.venue-card__copy {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(138, 100, 64, 0.55);
    color: var(--gold-600);
    background: rgba(255, 253, 250, 0.75);
    font-size: 0.87rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background 0.3s ease, color 0.3s ease;
}

.venue-card__copy svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.venue-card__copy:hover {
    background: var(--gold-500);
    color: #fff;
    border-color: var(--gold-500);
}

/* ==========================================================================
   GALERI
   ========================================================================== */
.masonry {
    columns: 2;
    column-gap: 14px;
}

.g-item {
    break-inside: avoid;
    margin-bottom: 14px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(176, 138, 90, 0.35);
    box-shadow: 0 18px 36px -20px rgba(74, 51, 40, 0.35);
    cursor: zoom-in;
    position: relative;
    background: var(--rose-100);
}

.g-item img {
    width: 100%;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease;
}

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

.g-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 62%, rgba(74, 51, 40, 0.35));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.g-item:hover::after {
    opacity: 1;
}

@media (min-width: 760px) {
    .masonry {
        columns: 3;
        column-gap: 18px;
    }

    .g-item {
        margin-bottom: 18px;
        border-radius: 22px;
    }
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(40, 28, 20, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

.lb-img {
    max-width: 86vw;
    max-height: 74vh;
    border-radius: 14px;
    border: 1px solid rgba(232, 215, 187, 0.5);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.96);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox.open .lb-img {
    transform: scale(1);
}

.lb-cap {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: min(86vw, 520px);
    text-align: center;
    color: var(--gold-300);
    font-size: 0.95rem;
    font-style: italic;
}

.lb-btn {
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--gold-300);
    background: rgba(255, 250, 246, 0.1);
    border: 1px solid rgba(232, 215, 187, 0.4);
    font-size: 1.5rem;
    line-height: 1;
    transition: background 0.3s ease, transform 0.3s ease;
}

.lb-btn:hover {
    background: rgba(255, 250, 246, 0.22);
    transform: scale(1.06);
}

.lb-close {
    top: 18px;
    right: 18px;
}

.lb-prev {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.lb-next {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.lb-prev:hover {
    transform: translateY(-50%) scale(1.06);
}

.lb-next:hover {
    transform: translateY(-50%) scale(1.06);
}

/* ==========================================================================
   RSVP & UCAPAN
   ========================================================================== */
.rsvp-form {
    padding: 28px 22px;
}

.field {
    margin-bottom: 16px;
    text-align: left;
}

.field label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: 7px;
}

.field input, .field select, .field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(176, 138, 90, 0.45);
    border-radius: 13px;
    background: var(--white);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    appearance: none;
}

.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a9823a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.field textarea {
    resize: vertical;
    min-height: 104px;
}

.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--rose-500);
    box-shadow: 0 0 0 4px rgba(192, 131, 135, 0.16);
}

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    gap: 12px;
}

.ucapan-wrap {
    margin-top: 34px;
}

.ucapan-title {
    text-align: center;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--rose-900);
}

.ucapan-count {
    font-size: 0.95rem;
    color: var(--gold-600);
    font-style: italic;
}

.ucapan-list {
    margin-top: 18px;
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--rose-300) transparent;
}

.ucapan-list::-webkit-scrollbar {
    width: 5px;
}

.ucapan-list::-webkit-scrollbar-thumb {
    background: var(--rose-300);
    border-radius: 99px;
}

.u-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--white);
    border: 1px solid rgba(176, 138, 90, 0.28);
    border-radius: 16px;
    padding: 14px 16px;
    animation: uIn 0.5s ease both;
}

@keyframes uIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.u-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--rose-500);
    color: #fff;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.1rem;
}

.u-body {
    flex: 1;
    min-width: 0;
}

.u-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.u-name {
    font-weight: 600;
    font-size: 1.0rem;
    color: var(--rose-900);
    overflow-wrap: anywhere;
}

.u-badge {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 99px;
}

.b-hadir {
    color: #3f6e50;
    background: #e7f2ea;
}

.b-berhalangan {
    color: #9c4a4a;
    background: #f7e7e7;
}

.b-ragu {
    color: #8a6d2f;
    background: #f6ecd4;
}

.u-time {
    font-size: 0.87rem;
    color: var(--muted);
    margin-top: 1px;
}

.u-msg {
    margin-top: 8px;
    font-size: 0.98rem;
    font-weight: 300;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.ucapan-empty {
    text-align: center;
    font-size: 0.98rem;
    color: var(--muted);
    padding: 18px 0;
}

/* ==========================================================================
   AMPLOP DIGITAL
   ========================================================================== */
.gift-grid {
    display: grid;
    gap: 14px;
}

@media (min-width: 640px) {
    .gift-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.gift-card {
    padding: 22px 22px 20px;
}

.gift-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gift-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--rose-700);
    letter-spacing: 0.06em;
}

.gift-brand .g-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-500);
    flex: none;
}

.gift-type {
    font-size: 0.82rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-600);
}

.gift-number {
    margin-top: 12px;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0.09em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.gift-holder {
    margin-top: 4px;
    font-size: 0.94rem;
    color: var(--muted);
}

.gift-copy {
    margin-top: 16px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(138, 100, 64, 0.55);
    color: var(--gold-600);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background 0.3s ease, color 0.3s ease;
}

.gift-copy svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gift-copy:hover {
    background: var(--gold-500);
    color: #fff;
    border-color: var(--gold-500);
}

.gift-card--address .gift-number {
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    font-family: var(--sans);
    font-weight: 400;
    line-height: 1.7;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    position: relative;
    margin-top: 20px;
    padding: 70px 0 130px;
    text-align: center;
    color: #f3e4e0;
    background: var(--sogan-900);
    overflow: hidden;
}

.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--kawung);
    opacity: 0.55;
    pointer-events: none;
}

.footer .container {
    position: relative;
}

.footer-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.75;
    max-width: 30rem;
    margin: 0 auto;
    color: rgba(255, 240, 235, 0.92);
}

.footer-thanks {
    margin-top: 24px;
    font-size: 0.84rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-300);
}

.footer-names {
    margin-top: 14px;
    font-family: var(--script);
    font-size: clamp(2.6rem, 11vw, 3.4rem);
    line-height: 1.2;
    color: #d6b47e;
}

.footer-date {
    margin-top: 8px;
    font-size: 0.88rem;
    letter-spacing: 0.42em;
    color: rgba(255, 240, 235, 0.8);
}

.footer .divider {
    margin: 30px auto 18px;
    max-width: 240px;
}

.footer-credit {
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    color: rgba(255, 240, 235, 0.65);
}

/* ==========================================================================
   ELEMEN MELAYANG
   ========================================================================== */
.petals {
    position: fixed;
    inset: 0;
    z-index: 210;
    pointer-events: none;
}

.yt-holder {
    position: fixed;
    top: -12px;
    left: -12px;
    width: 2px;
    height: 2px;
    opacity: 0;
    pointer-events: none;
    /* Player YouTube tetap ukuran penuh di dalamnya, tapi tidak boleh mencuat keluar layar:
       dulu bikin halaman lebih lebar dari layar HP & tombol musik terdorong ke luar */
    overflow: hidden;
}

/* Tombol musik melayang */
.music-btn {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 320;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 253, 250, 0.85);
    border: 1px solid rgba(176, 138, 90, 0.5);
    box-shadow: 0 12px 26px -10px rgba(74, 51, 40, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s, opacity 0.4s ease 0.45s;
}

body.opened .music-btn {
    transform: scale(1);
    opacity: 1;
}

.music-disc {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.music-disc svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: var(--rose-700);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: spin 7s linear infinite;
    animation-play-state: paused;
}

.music-btn.playing .music-disc svg {
    animation-play-state: running;
    stroke: var(--gold-600);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Dock navigasi bawah */
.dock {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 320;
    display: flex;
    gap: 2px;
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(255, 253, 250, 0.82);
    border: 1px solid rgba(176, 138, 90, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 40px -14px rgba(74, 51, 40, 0.5);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s, opacity 0.5s ease 0.5s;
}

body:not(.opened) .dock {
    transform: translate(-50%, 100px);
    opacity: 0;
}

.dock-link {
    width: 46px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #a08e92;
    transition: color 0.3s ease, background 0.3s ease;
}

.dock-link svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dock-link:hover {
    color: var(--rose-700);
}

.dock-link.is-active {
    color: var(--rose-700);
    background: var(--rose-100);
}

/* Toast */
/* Toast */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(10px);
    z-index: 500;

    background: var(--sogan-900);
    color: #f6efe4;

    font-size: 0.93rem;
    line-height: 1.35;
    letter-spacing: 0.025em;

    padding: 9px 16px;
    border-radius: 12px;

    border: 1px solid rgba(232, 215, 187, 0.35);
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.45);

    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    width: max-content;
    max-width: calc(100vw - 32px);

    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   RESPONSIF & AKSESIBILITAS
   ========================================================================== */
@media (min-width: 760px) {
    .sec {
        padding: 92px 0;
    }

    .map-wrap {
        height: 340px;
    }
}

@media (max-width: 600px) {
    .toast {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        font-size: 0.9rem;
        padding: 9px 14px;
        border-radius: 10px;
        max-width: calc(100vw - 28px);
    }
}

@media (max-width: 360px) {
    .cd-box {
        min-width: 64px;
    }

    .cd-num {
        font-size: 1.6rem;
    }
}

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

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   EFEK 3D RINGAN SAAT SCROLL
   Pakai CSS scroll-driven animation: tanpa JavaScript, jalan di compositor.
   Browser yang belum dukung (atau mode lite) cukup melewatinya.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {

        /* Ilustrasi bergeser pelan di dalam bingkai (parallax) */
        html:not(.lite) .hero-photo__clip img {
            animation: heroDrift linear both;
            animation-timeline: view();
        }

        /* Gunungan berputar seperti kayon yang diputar dalang saat ganti adegan */
        html:not(.lite) .gunungan svg {
            animation: kayonTurn linear both;
            animation-timeline: view();
            animation-range: cover 10% cover 90%;
        }
    }
}

@keyframes heroDrift {
    from {
        transform: scale(1.12) translateY(-5%);
    }

    to {
        transform: scale(1.12) translateY(5%);
    }
}

@keyframes kayonTurn {
    from {
        transform: perspective(260px) rotateY(-180deg);
    }

    to {
        transform: perspective(260px) rotateY(180deg);
    }
}

/* ==========================================================================
   MODE LITE (HP RAM kecil / prosesor 4 core ke bawah / hemat data)
   Blur latar adalah efek paling berat di HP murah, jadi dimatikan.
   ========================================================================== */
html.lite .dock,
html.lite .music-btn,
html.lite .lightbox,
html.lite .venue-card__badge {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.lite .dock {
    background: rgba(255, 252, 246, 0.97);
}

html.lite .music-btn {
    background: var(--white);
}

html.lite .petals {
    display: none;
}

html.lite [data-reveal],
html.lite .quote-card[data-reveal],
html.lite .card[data-reveal],
html.lite .map-wrap[data-reveal] {
    transform: translateY(16px);
    transition-duration: 0.6s;
    will-change: auto;
}

html.lite [data-reveal].revealed {
    transform: none;
}

/* ==========================================================================
   OUR LOVE STORY: tiga babak di sepanjang untaian melati
   ========================================================================== */
.story {
    list-style: none;
    position: relative;
    max-width: 440px;
    margin: 0 auto;
    padding-left: 48px;
}

@media (max-width: 400px) {
    .story__text br {
        display: none; /* di layar sempit biarkan baris mengalir, biar tidak patah-patah */
    }
}

/* Benang ronce: titik-titik kuncup kecil, dari satu bunga ke bunga berikutnya */
.story__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: -33px;
    top: 34px;
    bottom: 2px;
    width: 3px;
    background-image: radial-gradient(circle, var(--gold-500) 1.1px, transparent 1.5px);
    background-size: 3px 9px;
    background-repeat: repeat-y;
    opacity: 0.75;
    transform-origin: 50% 0;
}

.story__step {
    position: relative;
    padding-bottom: 38px;
}

.story__step:last-child {
    padding-bottom: 0;
}

.story__mark {
    position: absolute;
    left: -48px;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cream);
    transform: scale(0.4) rotate(-72deg);
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}

.story__step.revealed .story__mark {
    transform: none;
}

.story__mark svg {
    width: 26px;
    height: 26px;
    fill: var(--white);
    stroke: var(--gold-500);
    stroke-width: 1.5;
    --m-core: var(--rose-500);
}

.story__label {
    font-family: var(--script);
    font-weight: 400;
    font-size: 2.0rem;
    line-height: 1;
    color: var(--rose-700);
    padding-top: 2px;
}

.story__text {
    margin-top: 10px;
    font-family: var(--serif);
    font-size: 1.08rem;
    line-height: 1.75;
    text-wrap: pretty;
    color: var(--ink);
}

/* Tagar sebagai cap stempel di ujung cerita */
.story__tag {
    width: max-content;
    max-width: 100%;
    margin: 44px auto 0;
    padding: 9px 22px;
    border: 1.5px solid var(--rose-700);
    border-radius: 999px;
    background: rgba(192, 131, 135, 0.07);
    /* garis ganda khas stempel */
    box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 4px rgba(156, 95, 102, 0.45);
    font-family: var(--serif);
    font-style: italic;
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
    color: var(--rose-700);
    rotate: -4deg;
}

/* Efek dicap: turun dari besar, menghentak sedikit, lalu menempel */
.story__tag[data-reveal] {
    opacity: 0;
    transform: scale(1.5);
    transition: opacity 0.3s ease, transform 0.8s cubic-bezier(0.34, 1.6, 0.5, 1);
    transition-delay: var(--d, 0ms);
}

.story__tag[data-reveal].revealed {
    opacity: 0.92;
    transform: none;
}

html.lite .story__tag[data-reveal] {
    transform: scale(1.4);
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        html:not(.lite) .story__step::before {
            animation: threadGrow linear both;
            animation-timeline: view();
            animation-range: entry 40% cover 55%;
        }
    }
}

@keyframes threadGrow {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

/* Halaman baru muncul setelah sampul hilang, supaya tidak tumpang tindih saat amplop dibuka */
.page {
    transition: opacity 0.5s ease;
}

body:not(.page-in) .page {
    opacity: 0;
}


/* Tombol lebar: selalu satu baris & di tengah, termasuk di HP sempit */
.btn-block {
    text-align: center;
}

.btn-block span {
    white-space: nowrap;
}

@media (max-width: 420px) {
    .btn-block {
        padding-inline: 18px;
        letter-spacing: 0.13em;
    }
}

@media (max-width: 350px) {
    .btn-block {
        padding-inline: 14px;
        letter-spacing: 0.06em;
        font-size: 0.87rem;
        gap: 7px;
    }
}

/* Pengaman: tidak ada elemen yang boleh membuat halaman lebih lebar dari layar HP.
   (Stempel yang diperbesar sebelum "dicap" dulu mendorong tombol musik keluar layar.) */
html,
body {
    overflow-x: clip;
}

.sec {
    overflow-x: clip;
}

/* Frasa yang tidak boleh terpisah: kalau tidak muat, turun ke baris berikutnya bersama-sama */
.nowrap {
    white-space: nowrap;
}

/* ==========================================================================
   MEMPELAI: medali monogram + masuk dari arah berlawanan
   ========================================================================== */
.p-grid {
    gap: 6px;
}

.p-card {
    padding-top: 22px;
    padding-bottom: 22px;
}

.p-card--pria[data-reveal] {
    transform: translateX(-34px);
}

.p-card--wanita[data-reveal] {
    transform: translateX(34px);
}

.p-card[data-reveal].revealed {
    transform: none;
}

.p-mono {
    position: relative;
    width: 128px;
    height: 128px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
}

.p-mono svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Lingkaran luar "tergambar" melingkar saat muncul */
.p-ring {
    fill: var(--white);
    stroke: var(--gold-500);
    stroke-width: 1.2;
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    transform: rotate(-90deg);
    transform-origin: 60px 60px;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.35s;
}

/* Untaian melati di lingkaran dalam */
.p-dots {
    fill: none;
    stroke: var(--gold-500);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 0 6.15;
    opacity: 0;
    transition: opacity 0.8s ease 1s;
}

.p-bloom {
    fill: var(--white);
    stroke: var(--gold-500);
    stroke-width: 1.6;
    --m-core: var(--rose-500);
    transform: scale(0) rotate(-90deg);
    transform-origin: 60px 6px;
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.45s;
}

.p-initial {
    /* Diposisikan absolut di tengah lingkaran, lalu digeser sesuai pusat "tinta" huruf.
       Huruf Great Vibes tidak berada di tengah kotak hurufnya (ekornya menjulur ke kanan),
       jadi tiap huruf diberi koreksi dari hasil pengukuran glyph. */
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: var(--script);
    font-size: 3.4rem; /* "M" selebar 1,46em: di ukuran ini muat di lingkaran dalam */
    line-height: 1;
    color: var(--rose-700);
    translate: calc(-50% - var(--ink-dx, 0em)) calc(-50% + var(--ink-dy, 0em));
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.8s ease 0.75s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.75s;
}

.p-initial--s {
    --ink-dx: 0.055em;
    --ink-dy: 0.165em;
}

.p-initial--m {
    --ink-dx: 0.07em;
    --ink-dy: 0.15em;
}

.p-card.revealed .p-ring {
    stroke-dashoffset: 0;
}

.p-card.revealed .p-dots {
    opacity: 0.7;
}

.p-card.revealed .p-bloom {
    transform: none;
}

.p-card.revealed .p-initial {
    opacity: 1;
    transform: none;
}

/* Gunungan penghubung: lebih besar & diberi garis ke atas-bawah */
.gunungan {
    position: relative;
    width: 64px;
    padding: 30px 0;
}

.gunungan::before,
.gunungan::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    height: 24px;
    background: linear-gradient(var(--gold-500), transparent);
    opacity: 0.6;
}

.gunungan::before {
    top: 0;
    background: linear-gradient(transparent, var(--gold-500));
}

.gunungan::after {
    bottom: 0;
}

@media (min-width: 860px) {
    .gunungan {
        padding: 0;
    }

    .gunungan::before,
    .gunungan::after {
        display: none;
    }
}

/* Peta: ilustrasi dulu, Google Maps dimuat saat diketuk */
.map-load {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    background: #f1e6d3;
}

.map-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ma-paper { fill: #f1e6d3; }
.ma-block path { fill: #e8d9c0; stroke: #dccaa9; stroke-width: 1; }
.ma-park { fill: #d3d6b0; stroke: #b9bf95; stroke-width: 1.5; }
.ma-tree circle { fill: #b7bf92; }
.ma-mall { fill: #e4cfae; stroke: #c9ad85; stroke-width: 1.6; stroke-dasharray: 5 4; }
.ma-road path { fill: none; stroke: #fbf6ec; stroke-linecap: round; stroke-linejoin: round; }
.ma-road .major { stroke-width: 18; }
.ma-road .main { stroke-width: 20; }
.ma-road .minor { stroke-width: 11; }
.ma-road { filter: drop-shadow(0 0 1.1px #d3b98f) drop-shadow(0 0 1.1px #d3b98f); }


.ma-label {
    font-family: var(--serif);
    font-style: italic;
    font-size: 20px;
    fill: var(--sogan-900);
    dominant-baseline: middle;
}

.ma-small {
    font-family: var(--serif);
    font-style: italic;
    font-size: 19px;
    fill: var(--gold-600);
    text-anchor: middle;
}

.map-compass {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: auto;
    pointer-events: none;
}

.ma-compass circle { fill: rgba(255, 252, 246, 0.8); stroke: var(--gold-500); stroke-width: 1; }
.ma-compass path { fill: var(--rose-700); }
.ma-compass text { font-family: var(--serif); font-size: 14px; fill: var(--sogan); text-anchor: middle; }

.ma-pin path { fill: var(--rose-700); stroke: #fffcf6; stroke-width: 1.5; }
.ma-pin-dot { fill: #fffcf6; }
.ma-pulse {
    fill: var(--rose-500);
    opacity: 0.35;
    transform-box: fill-box;
    transform-origin: center;
    animation: maPulse 2.4s ease-out infinite;
}

@keyframes maPulse {
    from { transform: scale(0.4); opacity: 0.5; }
    to { transform: scale(2.6); opacity: 0; }
}

html.lite .ma-pulse { animation: none; }

/* Kartu nama tempat di atas peta ilustrasi */
.map-load__card {
    position: absolute;
    left: 50%;
    bottom: 14px;
    translate: -50% 0;
    width: max-content;
    max-width: calc(100% - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 18px 10px;
    border-radius: 14px;
    background: rgba(255, 252, 246, 0.94);
    border: 1px solid rgba(176, 138, 90, 0.35);
    box-shadow: 0 8px 20px -12px rgba(63, 44, 32, 0.45);
    color: var(--ink);
    transition: transform 0.3s ease;
}

.map-load:hover .map-load__card,
.map-load:focus-visible .map-load__card {
    transform: translateY(-2px);
}

.map-load__title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.2;
}

.map-load__hint {
    font-size: 0.9rem;
    color: var(--muted);
}

/* Peta Google asli: diberi nuansa hangat agar senada (tampilan Google tidak bisa digambar ulang) */
.map-wrap iframe {
    filter: sepia(0.35) saturate(0.8) hue-rotate(-8deg) brightness(1.02) contrast(0.95);
}


/* ==========================================================================
   Pengatur ukuran font (A− / A+) — untuk tamu lansia
   ========================================================================== */
.fs-ctrl {
    position: fixed;
    top: 76px;
    right: 18px;
    z-index: 320;
    display: flex;
    flex-direction: column;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 253, 250, 0.9);
    border: 1px solid rgba(176, 138, 90, 0.5);
    box-shadow: 0 12px 26px -10px rgba(74, 51, 40, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s, opacity 0.4s ease 0.55s;
}

body.opened .fs-ctrl {
    transform: scale(1);
    opacity: 1;
}

.fs-btn {
    width: 47px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--sogan-900, #4a3328);
    font-family: var(--serif);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    font-size: 17px; /* px: tombolnya sendiri tidak ikut membesar */
}

.fs-btn + .fs-btn {
    border-top: 1px solid rgba(176, 138, 90, 0.4);
}

.fs-btn.fs-up { font-size: 23px; }
.fs-btn:disabled { opacity: 0.3; cursor: default; }
.fs-btn:active:not(:disabled) { background: rgba(176, 138, 90, 0.18); }