/* =====================================================
   RESET
===================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    background: #fdf1e8;
    color: #e90070;
    font-family: "DM Sans", sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
}


/* Saat cover masih terbuka */
body.cover-active {
    overflow: hidden;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =====================================================
   COVER
===================================================== */

.opening-page {

    position: fixed;

    inset: 0;

    z-index: 1000;

    min-height: 100svh;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #fdf1e8;

    transition:
        opacity 1s ease,
        transform 1.15s cubic-bezier(.22,1,.36,1),
        filter 1s ease;
}


.opening-page.hide {

    opacity: 0;

    transform:
        scale(1.08)
        translateY(-35px);

    filter: blur(12px);

    pointer-events: none;

}


/* =====================================================
   COVER CONTENT
===================================================== */

.content {

    position: relative;

    z-index: 10;

    width: min(86%, 360px);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


.small-title {

    margin-bottom: 20px;

    color: #f39a00;

    font-family: "Chewy", cursive;

    font-size: 20px;

    letter-spacing: 2px;

    animation:
        fadeDown 1s ease forwards,
        gentleFloat 4s ease-in-out infinite;

}


.couple-name {

    display: flex;

    flex-direction: column;

    align-items: center;

    color: #e90070;

    font-family: "Chewy", cursive;

    font-size: clamp(43px, 12vw, 57px);

    line-height: .98;

    font-weight: 400;

}


.couple-name strong {

    margin: 7px 0;

    color: #f3b400;

    font-size: 28px;

    font-weight: 400;

    animation: spinLittle 4s ease-in-out infinite;
}


/* =====================================================
   GUEST BOX
===================================================== */

.guest-box {

    width: 235px;

    margin-top: 21px;

    padding: 14px 10px;

    border: 2px dashed #ff9bc5;

    border-radius: 21px;

    background: rgba(255,255,255,.15);

    animation: guestFloat 4s ease-in-out infinite;
}


.guest-label {

    color: #99918d;

    font-size: 14px;

    margin-bottom: 4px;
}


.guest-name {

    color: #e90070;

    font-family: "Chewy", cursive;

    font-size: 20px;
}


/* =====================================================
   OPEN BUTTON
===================================================== */

.open-button {

    width: 270px;

    height: 62px;

    margin-top: 14px;

    border: 0;

    border-radius: 40px;

    background: #e90070;

    color: white;

    font-family: "Chewy", cursive;

    font-size: 19px;

    letter-spacing: 1px;

    cursor: pointer;

    box-shadow:
        0 0 0 6px #fdf1e8,
        0 0 0 8px #f5b1ce;

    animation:
        buttonPulse 2.7s ease-in-out infinite;

    transition: .25s;
}


.open-button:hover {

    transform: scale(1.04);

}


.open-button:active {

    transform: scale(.95);

}


.heart {

    display: inline-block;

    margin-right: 7px;

    animation: heartBeat 1.4s infinite;
}


/* =====================================================
   MUSIC NOTE
===================================================== */

.music-note {

    margin-top: 14px;

    color: #a79c98;

    font-family: "Patrick Hand", cursive;

    font-size: 16px;

    font-style: italic;
}


/* =====================================================
   FLOWER DOODLE
===================================================== */

.doodle-flower {

    position: absolute;

    width: 125px;

    height: 125px;

    pointer-events: none;

}


.doodle-flower .petal {

    position: absolute;

    width: 31px;

    height: 58px;

    left: 47px;

    top: 34px;

    border: 4px solid #ef9fc2;

    border-radius: 50%;

    transform-origin: center bottom;
}


.doodle-flower .p1 {
    transform: rotate(0deg) translateY(-32px);
}

.doodle-flower .p2 {
    transform: rotate(72deg) translateY(-32px);
}

.doodle-flower .p3 {
    transform: rotate(144deg) translateY(-32px);
}

.doodle-flower .p4 {
    transform: rotate(216deg) translateY(-32px);
}

.doodle-flower .p5 {
    transform: rotate(288deg) translateY(-32px);
}


.flower-top-left {

    left: -48px;

    top: 55px;

    animation:
        flowerFloat 6s ease-in-out infinite,
        flowerRotate 18s linear infinite;

}


.flower-bottom-right {

    right: -42px;

    bottom: 45px;

    animation:
        flowerFloat 7s ease-in-out infinite,
        flowerRotateReverse 20s linear infinite;

}


.sparkle {

    position: absolute;

    color: #f4bd1d;

    font-size: 42px;

    animation:
        sparklePulse 2s infinite,
        sparkleRotate 5s linear infinite;

}


.sparkle-one {

    right: 54px;

    top: 108px;

}


/* =====================================================
   SMALL FLOWER
===================================================== */

.small-pink-flower {

    position: absolute;

    left: 48px;

    bottom: 148px;

    width: 35px;

    height: 35px;

    animation:
        littleFlowerBounce 3s ease-in-out infinite,
        littleFlowerSpin 9s linear infinite;

}


.small-pink-flower span {

    position: absolute;

    width: 15px;

    height: 21px;

    left: 10px;

    top: 6px;

    background: #ed0871;

    border-radius: 50%;

}


.small-pink-flower span:nth-child(1) {
    transform: rotate(0deg) translateY(-7px);
}

.small-pink-flower span:nth-child(2) {
    transform: rotate(72deg) translateY(-7px);
}

.small-pink-flower span:nth-child(3) {
    transform: rotate(144deg) translateY(-7px);
}

.small-pink-flower span:nth-child(4) {
    transform: rotate(216deg) translateY(-7px);
}

.small-pink-flower span:nth-child(5) {
    transform: rotate(288deg) translateY(-7px);
}


.small-pink-flower i {

    position: absolute;

    width: 9px;

    height: 9px;

    left: 13px;

    top: 13px;

    background: #ed0871;

    border-radius: 50%;

}


/* =====================================================
   INVITATION
===================================================== */

.invitation {

    position: relative;

    opacity: 0;

    transform:
        scale(.96)
        translateY(30px);

    filter: blur(8px);

    transition:
        opacity 1.2s ease .15s,
        transform 1.25s cubic-bezier(.22,1,.36,1),
        filter 1.2s ease .15s;

}


.invitation.show {

    opacity: 1;

    transform: scale(1) translateY(0);

    filter: blur(0);

}


/* =====================================================
   GENERAL SECTION
===================================================== */

.section {

    position: relative;

    width: 100%;

    min-height: 100svh;

    overflow: hidden;

    padding-bottom: 95px;
}


/* =====================================================
   HOME
===================================================== */

.home-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    background: #fdf1e8;

}


.home-content {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding-top: 62px;

}


/* =====================================================
   TITLE
===================================================== */

.section-title {

    color: #e90070;

    font-family: "Chewy", cursive;

    font-size: 34px;

    letter-spacing: 1px;

    animation: titleFloat 4s ease-in-out infinite;
}


/* =====================================================
   HEART PHOTO
===================================================== */

.heart-photo-wrapper {

    position: relative;

    width: 290px;

    height: 290px;

    margin-top: 8px;

    animation: heartFloat 5s ease-in-out infinite;

}


.heart-photo {
    width: 100%;
    height: 100%;
    overflow: visible;

    filter:
        drop-shadow(0 5px 3px rgba(243,154,10,.12))
        drop-shadow(0 12px 18px rgba(233,0,112,.08));
}


/* =====================================================
   CIRCLE TEXT
===================================================== */

.circle-text {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 250px;
    height: 250px;

    transform: translate(-50%, -50%);

    color: #f39a00;

    font-family: "Chewy", cursive;

    font-size: 16px;

    letter-spacing: 3px;

    pointer-events: none;

    opacity: .95;

    /* TIDAK BERPUTAR */
    animation: none;

    /* sedikit lebih lembut */
    text-shadow: 0 1px 0 rgba(255,255,255,.3);
}


/* =====================================================
   DATE
===================================================== */

.wedding-date {

    margin-top: 2px;

    color: #777;

    font-size: 14px;

    animation: dateFloat 4s ease-in-out infinite;
}


/* =====================================================
   WAVE
===================================================== */

/* =====================================================
   WAVE — DUA LAPIS GELOMBANG BERGERAK
===================================================== */
.wave-line {
    position: relative;
    width: 100%;
    height: 74px;
    margin-top: 42px;
    overflow: hidden;
    isolation: isolate;
}

.wave-layer {
    position: absolute;
    inset: 0 -18% 0 -18%;
    width: 136%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.wave-layer path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wave-layer-back {
    opacity: .30;
    animation: waveFloatBack 7s ease-in-out infinite;
}
.wave-layer-back path {
    stroke: #f39a0a;
    stroke-width: 7;
}

.wave-layer-front {
    opacity: .95;
    animation: waveFloatFront 5.5s ease-in-out infinite;
}
.wave-layer-front path {
    stroke: #e90070;
    stroke-width: 8;
}

@keyframes waveFloatBack {
    0%, 100% { transform: translate3d(-2%, 3px, 0) scaleY(.96); }
    50% { transform: translate3d(2%, -3px, 0) scaleY(1.04); }
}

@keyframes waveFloatFront {
    0%, 100% { transform: translate3d(2%, -1px, 0) scaleY(1); }
    50% { transform: translate3d(-3%, 2px, 0) scaleY(.93); }
}

@keyframes dateFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }

}


@keyframes waveMove {

    0%,100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-8px);
    }

}


@keyframes blobFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}


@keyframes blobRotate {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }

}


@keyframes musicFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

}


@keyframes musicPulse {

    0%,100% {
        box-shadow:
            0 8px 25px rgba(0,0,0,.18);
    }

    50% {
        box-shadow:
            0 8px 25px rgba(233,0,112,.25),
            0 0 0 9px rgba(233,0,112,.08);
    }

}


@keyframes navBounce {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }

}


/* =====================================================
   DESKTOP
===================================================== */

@media (min-width: 700px) {

    body {
        background: #ddd;
    }

    .opening-page,
    .invitation {
        width: 430px;
        margin: auto;
    }

    .opening-page {
        left: 50%;
        right: auto;
        width: 430px;
        transform: translateX(-50%);
    }

    .opening-page.hide {
        transform:
            translateX(-50%)
            scale(1.08)
            translateY(-35px);
    }

    .invitation {
        background: #fdf1e8;
    }

}

/* =====================================================
   FIX COVER / SCROLL
===================================================== */

.opening-page {
    pointer-events: auto;
    touch-action: auto;
}

.opening-page.hide {
    pointer-events: none;
}

.invitation {
    pointer-events: auto;
    min-height: 100vh;
}


/* Pastikan tombol cover bisa ditekan */

.open-button {
    position: relative;
    z-index: 50;
    pointer-events: auto;
    cursor: pointer;
}


/* Navbar selalu bisa disentuh */

.bottom-nav {
    pointer-events: auto;
}

.nav-item {
    pointer-events: auto;
    cursor: pointer;
}


/* Tombol musik */

.music-button {
    position: fixed !important;
    right: max(14px, calc((100vw - min(430px, 100vw)) / 2 + 14px)) !important;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #e90070, #f22b87) !important;
    color: #fff !important;
    font-family: Georgia, serif !important;
    font-size: 27px !important;
    line-height: 1 !important;
    box-shadow: 0 8px 22px rgba(233,0,112,.24) !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 130 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateZ(0);
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s ease, box-shadow .2s ease;
}

.music-button:hover {
    transform: scale(1.06) translateZ(0);
    box-shadow: 0 10px 26px rgba(233,0,112,.30) !important;
}

.music-button:active {
    transform: scale(.94) translateZ(0);
}

.music-button.playing {
    animation: musicButtonFloat 1.8s ease-in-out infinite;
}

@keyframes musicButtonFloat {
    0%, 100% { transform: translateY(0) translateZ(0); }
    50% { transform: translateY(-3px) translateZ(0); }
}

@media (max-width: 600px) {
    .music-button {
        width: 54px !important;
        height: 54px !important;
        right: 14px !important;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        font-size: 25px !important;
    }
}

/* =====================================
   FIX FINAL OPENING
===================================== */

html {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
}


/* Cover */

.opening-page {
    pointer-events: auto;
}


/* Tombol harus bisa ditekan */

.open-button {
    position: relative;
    z-index: 99999;
    pointer-events: auto !important;
    cursor: pointer;
}


/* Saat cover ditutup */

.opening-page.closing {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(10px);
    pointer-events: none;
}


/* Website */

.invitation {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}


/* Website setelah dibuka */

.invitation.visible {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}/* =====================================
   FIX FINAL OPENING
===================================== */

html {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
}


/* Cover */

.opening-page {
    pointer-events: auto;
}


/* Tombol harus bisa ditekan */

.open-button {
    position: relative;
    z-index: 99999;
    pointer-events: auto !important;
    cursor: pointer;
}


/* Saat cover ditutup */

.opening-page.closing {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(10px);
    pointer-events: none;
}


/* Website */

.invitation {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}


/* Website setelah dibuka */

.invitation.visible {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* =====================================================
   NAVBAR ICON CUTE
===================================================== */

.nav-icon {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        transform .3s ease,
        color .3s ease;
}


.nav-icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .3s ease,
        stroke-width .3s ease;
}


.nav-item.active .nav-icon {
    transform: translateY(-2px) scale(1.08);

    color: #e90070;
}


.nav-item.active .nav-icon svg {
    stroke-width: 2.2;
}


.nav-item:hover .nav-icon {
    transform: translateY(-3px) scale(1.08);
}


.nav-item:active .nav-icon {
    transform: scale(.9);
}

/* =====================================================
   FOTO LOVE - POSISI BARU
===================================================== */

.heart-photo-wrapper {

    position: relative;

    width: 330px;

    height: 400px;

    margin: 25px auto 0;

    display: flex;

    justify-content: center;

    align-items: flex-start;

}


/* =====================================================
   NAMA PENGANTIN
===================================================== */

.couple-photo-name {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    z-index: 20;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    white-space: nowrap;

    text-align: center;

    font-family: "Chewy", cursive;

    font-size: 18px;

    letter-spacing: 2px;

    color: #f39a0a;

    pointer-events: none;

    animation: none !important;

}


/* Lusiyana dan Imam Khanafi */

.couple-photo-name span {

    display: inline-block;

    animation: none !important;

    transform: none !important;

}


/* simbol & */

.couple-photo-name strong {

    display: inline-block;

    color: #e90070;

    font-family: "Chewy", cursive;

    font-size: 20px;

    animation: none !important;

    transform: none !important;

}


/* =====================================================
   FOTO LOVE
===================================================== */

.heart-photo {

    position: absolute;

    left: 50%;

    top: 38px;

    transform: translateX(-50%);

    width: 300px;

    height: 270px;

    z-index: 10;

    overflow: visible;

    filter:
        drop-shadow(
            0 5px 5px
            rgba(243,154,10,.12)
        )
        drop-shadow(
            0 12px 18px
            rgba(233,0,112,.08)
        );

}


/* =====================================================
   DEKORASI BELAKANG
===================================================== */

.heart-decoration {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

}


/* lingkaran */

.deco-circle {

    position: absolute;

    border-radius: 50%;

}


/* pink */

.circle-1 {

    width: 125px;
    height: 125px;

    left: -28px;
    top: 95px;

    background:
        rgba(245,157,199,.20);

    animation:
        heartFloat 5s ease-in-out infinite;

}


/* kuning */

.circle-2 {

    width: 85px;
    height: 85px;

    right: -18px;
    top: 45px;

    background:
        rgba(255,198,47,.18);

    animation:
        heartFloat 6s ease-in-out infinite reverse;

}


/* pink kecil */

.circle-3 {

    width: 60px;
    height: 60px;

    right: 5px;
    bottom: 70px;

    background:
        rgba(233,0,112,.10);

    animation:
        heartFloat 4s ease-in-out infinite;

}


/* =====================================================
   SPARKLE
===================================================== */

.deco-star {

    position: absolute;

    color: #ffc62f;

    font-family: Arial, sans-serif;

    animation:
        heartSparkle 3s ease-in-out infinite;

}


/* kiri atas */

.star-1 {

    left: 5px;
    top: 55px;

    font-size: 25px;

}


/* kanan */

.star-2 {

    right: 0;
    top: 170px;

    font-size: 20px;

    animation-delay: .8s;

}


/* bawah */

.star-3 {

    left: 30px;
    bottom: 55px;

    font-size: 17px;

    animation-delay: 1.5s;

}


/* =====================================================
   TITIK
===================================================== */

.deco-dot {

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ef92be;

    opacity: .75;

    animation:
        heartDot 4s ease-in-out infinite;

}


.dot-1 {

    left: 35px;
    top: 150px;

}


.dot-2 {

    right: 30px;
    top: 110px;

    width: 6px;
    height: 6px;

    animation-delay: .5s;

}


.dot-3 {

    left: 55px;
    bottom: 100px;

    width: 6px;
    height: 6px;

    animation-delay: 1s;

}


.dot-4 {

    right: 48px;
    bottom: 125px;

    width: 10px;
    height: 10px;

    background: #ffc52c;

    animation-delay: 1.5s;

}


/* =====================================================
   BUNGA
===================================================== */

.deco-flower {

    position: absolute;

    color: #ed82b8;

    font-size: 30px;

    opacity: .65;

    animation:
        heartFlower 6s ease-in-out infinite;

}


.flower-1 {

    left: -10px;
    bottom: 130px;

}


.flower-2 {

    right: -5px;
    top: 105px;

    font-size: 24px;

    color: #f5a5c9;

    animation-delay: 1.2s;

}


/* =====================================================
   ANIMASI HALUS
===================================================== */

@keyframes heartFloat {

    0%,
    100% {

        transform:
            translateY(0)
            scale(1);

    }

    50% {

        transform:
            translateY(-9px)
            scale(1.04);

    }

}


@keyframes heartSparkle {

    0%,
    100% {

        opacity: .55;

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        opacity: 1;

        transform:
            translateY(-7px)
            rotate(12deg);

    }

}


@keyframes heartDot {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-6px);

    }

}


@keyframes heartFlower {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-5deg);

    }

    50% {

        transform:
            translateY(-8px)
            rotate(8deg);

    }

}

/* =====================================================
   TAMU TERSAYANG - HOME
===================================================== */

.guest-home {
    position: relative;

    z-index: 5;

    padding:
        45px
        25px
        70px;

    text-align: center;
}


.guest-home .orange-title {
    margin: 0;

    color: #f39a0a;

    font-family:
        "Chewy",
        cursive;

    font-size: 28px;

    letter-spacing: 2px;
}


.guest-description {
    max-width: 330px;

    margin: 25px auto 0;

    color: #444;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 16px;

    line-height: 1.9;

}





@keyframes guestHeartFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-5deg);
    }

    50% {
        transform:
            translateY(-8px)
            rotate(5deg);
    }

}

/* =====================================================
   HALAMAN ACARA
===================================================== */

.acara-section {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background: #fff5ec;

    padding:
        55px
        18px
        120px;

    box-sizing: border-box;
}


/* CONTENT */

.acara-content {
    position: relative;

    z-index: 10;

    width: 100%;
    max-width: 390px;

    margin: auto;

    text-align: center;
}


/* =====================================================
   JUDUL
===================================================== */

.acara-title {
    margin: 0;

    color: #e90070;

    font-family:
        "Chewy",
        cursive;

    font-size: 30px;

    letter-spacing: 2px;

    line-height: 1;
}


.lokasi-title {
    margin-top: 48px;

    color: #f39a0a;
}


/* =====================================================
   NOVEMBER
===================================================== */

.acara-month {
    margin-top: 28px;

    color: #f5bd0b;

    font-family:
        "Chewy",
        cursive;

    font-size: 43px;

    line-height: .95;

    letter-spacing: 2px;
}


.acara-year {
    color: #f5bd0b;

    font-family:
        "Chewy",
        cursive;

    font-size: 43px;

    line-height: 1;
}


/* =====================================================
   KALENDER NOVEMBER 2026
===================================================== */

.calendar-box {

    width: 100%;

    max-width: 350px;

    margin:
        28px
        auto
        0;

    padding:
        18px
        12px
        20px;

    box-sizing: border-box;

    background: rgba(255,255,255,.35);

    border-radius: 25px;

    position: relative;

}


/* =====================================================
   NAMA HARI
===================================================== */

.calendar-week {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    text-align: center;

    margin-bottom: 10px;

}


.calendar-week span {

    color: #e90070;

    font-family:
        "Chewy",
        cursive;

    font-size: 15px;

    opacity: .85;

}


/* =====================================================
   GRID TANGGAL
===================================================== */

.calendar-grid {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    grid-auto-rows: 47px;

    align-items: center;

    text-align: center;

}


.calendar-grid > span {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    margin: auto;

    color: #555;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 15px;

    font-weight: 600;

}


.calendar-grid .empty {

    visibility: hidden;

}


/* =====================================================
   TANGGAL ACARA 8
===================================================== */

.event-date {

    position: relative;

    width: 42px !important;

    height: 42px !important;

    z-index: 5;

}


/* angka 8 */

.event-date b {

    position: relative;

    z-index: 20;

    color: #ffffff;

    font-family:
        "Chewy",
        cursive;

    font-size: 20px;

    font-weight: normal;

}


/* =====================================================
   BUNGA DI BELAKANG ANGKA 8
===================================================== */

.event-date::before {

    content: "";

    position: absolute;

    width: 31px;

    height: 31px;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%);

    background: #e90070;

    border-radius:
        50%;

    z-index: 1;

    box-shadow:

        0 -13px 0 -5px #f39a0a,

        0 13px 0 -5px #f39a0a,

        -13px 0 0 -5px #f39a0a,

        13px 0 0 -5px #f39a0a;

    animation:
        flowerPulse 3s ease-in-out infinite;

}


/* =====================================================
   PETAL TAMBAHAN
===================================================== */

.flower-petal {

    position: absolute;

    width: 13px;

    height: 19px;

    background: #f5a0c5;

    border-radius:
        50%;

    z-index: 2;

}


.petal-1 {

    top: -1px;
    left: 14px;

    transform:
        rotate(0deg);

}


.petal-2 {

    right: -1px;
    top: 11px;

    transform:
        rotate(72deg);

}


.petal-3 {

    right: 5px;
    bottom: 0;

    transform:
        rotate(144deg);

}


.petal-4 {

    left: 4px;
    bottom: 0;

    transform:
        rotate(216deg);

}


.petal-5 {

    left: -2px;
    top: 11px;

    transform:
        rotate(288deg);

}


/* =====================================================
   TANGGAL LAIN
===================================================== */

.calendar-grid > span:not(.event-date):not(.empty) {

    transition:
        transform .25s ease,
        color .25s ease;

}


.calendar-grid > span:not(.event-date):not(.empty):hover {

    color: #e90070;

    transform:
        scale(1.15);

}


/* =====================================================
   ANIMASI BUNGA
===================================================== */

@keyframes flowerPulse {

    0%,
    100% {

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(0deg);

    }

    50% {

        transform:
            translate(-50%, -50%)
            scale(1.12)
            rotate(5deg);

    }

}


/* =====================================================
   TANGGAL
===================================================== */

.acara-date {

    margin:
        20px
        auto
        0;

    color: #777;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 15px;

    line-height: 1.7;
}


/* =====================================================
   EVENT
===================================================== */

.event-block {

    margin-top: 26px;

    text-align: center;
}


.event-title {

    margin: 0;

    font-family:
        "Chewy",
        cursive;

    font-size: 19px;

    letter-spacing: 2px;
}


.pink-event {
    color: #e90070;
}


.orange-event {
    color: #f39a0a;
}


.event-place {

    margin:
        10px
        0
        0;

    color: #555;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 17px;
}


.event-address {

    margin:
        5px
        0
        0;

    color: #555;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 16px;

    line-height: 1.5;
}


/* =====================================================
   TOMBOL MAP
===================================================== */

.event-map {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-width: 205px;

    height: 52px;

    margin-top: 18px;

    padding:
        0
        24px;

    box-sizing: border-box;

    border-radius: 30px;

    background: transparent;

    text-decoration: none;

    font-family:
        "Chewy",
        cursive;

    font-size: 17px;

    letter-spacing: 1px;

    transition:
        .3s ease;
}


.event-map span {

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 21px;

}


/* PINK */

.pink-map {

    color: #e90070;

    border:
        2px solid #e90070;
}


.pink-map:hover {

    color: white;

    background: #e90070;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px
        rgba(233,0,112,.2);
}


/* ORANGE */

.orange-map {

    color: #f39a0a;

    border:
        2px solid #f39a0a;
}


.orange-map:hover {

    color: white;

    background: #f39a0a;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px
        rgba(243,154,10,.2);
}


/* =====================================================
   DEKORASI
===================================================== */

.acara-flower {

    position: absolute;

    z-index: 2;

    pointer-events: none;

    color: #ed91bd;

    opacity: .65;

    font-size: 130px;
}


.acara-flower-right {

    right: -55px;

    top: 310px;

    animation:
        acaraFlowerMove 6s
        ease-in-out
        infinite;
}


.acara-flower-bottom {

    left: -45px;

    bottom: 130px;

    font-size: 110px;

    opacity: .5;

    animation:
        acaraFlowerMove 7s
        ease-in-out
        infinite
        reverse;
}


/* =====================================================
   SPARKLE
===================================================== */

.acara-sparkle {

    position: absolute;

    z-index: 3;

    color: #f7c313;

    pointer-events: none;

    font-size: 28px;

    animation:
        acaraSparkleMove 3s
        ease-in-out
        infinite;
}


.acara-sparkle-1 {

    left: 35px;

    top: 160px;
}


.acara-sparkle-2 {

    right: 35px;

    top: 430px;

    font-size: 23px;

    animation-delay: .8s;
}


.acara-sparkle-3 {

    left: 45px;

    bottom: 230px;

    font-size: 18px;

    animation-delay: 1.4s;
}


/* =====================================================
   ANIMASI
===================================================== */

@keyframes calendarBounce {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.08);
    }

}


@keyframes acaraFlowerMove {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-5deg);

    }

    50% {

        transform:
            translateY(-12px)
            rotate(6deg);

    }

}


@keyframes acaraSparkleMove {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

        opacity: .5;
    }

    50% {

        transform:
            translateY(-9px)
            rotate(18deg);

        opacity: 1;
    }

}

/* TURUNKAN NAMA PENGANTIN */
.heart-photo-wrapper .circle-text {
    position: absolute !important;

    top: 285px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    z-index: 50 !important;

    width: 100% !important;

    text-align: center;

    color: #f39a0a;

    font-family: "Chewy", cursive;

    font-size: 20px;

    letter-spacing: 2px;

    white-space: nowrap;
}

/* =====================================================
   AGENDA ACARA
===================================================== */

.agenda-section {
    position: relative;

    width: 100%;

    padding: 55px 28px 100px;

    box-sizing: border-box;

    overflow: hidden;
}


/* JUDUL */

.agenda-title {
    margin: 0 0 38px;

    text-align: center;

    color: #ec0870;

    font-family: "Chewy", cursive;

    font-size: 30px;

    letter-spacing: 1px;

    animation: agendaTitleFloat 3s ease-in-out infinite;
}


/* ITEM AGENDA */

.agenda-item {
    display: grid;

    grid-template-columns: 135px 1fr;

    gap: 10px;

    align-items: start;

    margin-bottom: 28px;
}


/* JAM */

.agenda-time {
    color: #f39a0a;

    font-family: "Chewy", cursive;

    font-size: 24px;

    line-height: 1.1;

    white-space: nowrap;
}


/* INFO */

.agenda-info {
    padding-top: 2px;
}


/* NAMA ACARA */

.agenda-name {
    color: #555;

    font-size: 17px;

    font-weight: 600;

    margin-bottom: 5px;
}


/* DESKRIPSI */

.agenda-description {
    color: #999;

    font-size: 15px;

    line-height: 1.55;
}


/* CATATAN */

.agenda-note {
    display: flex;

    gap: 12px;

    align-items: flex-start;

    margin: 18px 0;

    color: #999;

    font-size: 15px;

    line-height: 1.45;
}


/* BINTANG */

.note-star {
    color: #ffc313;

    font-size: 20px;

    flex-shrink: 0;

    animation: starTwinkle 2s ease-in-out infinite;
}


/* =====================================================
   DEKORASI GARIS PINK
===================================================== */

.agenda-decoration {

    position: relative;

    width: 88%;

    height: 55px;

    margin: 75px auto 25px;

}


/* garis */

.agenda-decoration::before {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 25px;

    height: 4px;

    background: #f5c4da;

    border-radius: 50%;
}


/* lingkaran */

.agenda-decoration span {

    position: absolute;

    top: 12px;

    width: 22px;
    height: 22px;

    border: 5px solid #f5c4da;

    border-radius: 50%;

    background: #fff7f0;

    animation: decorationBounce 2.8s ease-in-out infinite;
}


.agenda-decoration span:nth-child(1) {
    left: 8%;
}

.agenda-decoration span:nth-child(2) {
    left: 34%;
    animation-delay: .3s;
}

.agenda-decoration span:nth-child(3) {
    left: 60%;
    animation-delay: .6s;
}

.agenda-decoration span:nth-child(4) {
    left: 86%;
    animation-delay: .9s;
}


/* =====================================================
   QUOTE
===================================================== */

.agenda-quote {

    text-align: center;

    padding: 0 10px;

    margin-top: 15px;
}


.agenda-quote p {

    margin: 0;

    color: #68605c;

    font-family: "DM Sans", sans-serif;

    font-size: 17px;

    font-style: italic;

    line-height: 2;

}


/* QS */

.agenda-quran {

    margin-top: 22px;

    color: #f39a0a;

    font-family: "Chewy", cursive;

    font-size: 17px;

    letter-spacing: 2px;

    animation: quranFloat 3s ease-in-out infinite;
}


/* =====================================================
   ANIMASI
===================================================== */

@keyframes agendaTitleFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

}


@keyframes starTwinkle {

    0%, 100% {
        transform: scale(1) rotate(0deg);

        opacity: .75;
    }

    50% {
        transform: scale(1.3) rotate(12deg);

        opacity: 1;
    }

}


@keyframes decorationBounce {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}


@keyframes quranFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }

}


/* =====================================================
   HP
===================================================== */

@media (max-width: 480px) {

    .agenda-section {
        padding-left: 20px;
        padding-right: 20px;
    }


    .agenda-title {
        font-size: 29px;
    }


    .agenda-item {
        grid-template-columns: 130px 1fr;

        gap: 8px;
    }


    .agenda-time {
        font-size: 22px;
    }


    .agenda-name {
        font-size: 16px;
    }


    .agenda-description {
        font-size: 14px;
    }


    .agenda-quote p {
        font-size: 16px;

        line-height: 1.95;
    }

}

/* =====================================================
   DUA MANUSIANYA
===================================================== */

.couple-section {

    position: relative;

    width: 100%;

    padding: 70px 20px 120px;

    box-sizing: border-box;

    overflow: hidden;

    text-align: center;

}


/* JUDUL */

.couple-section-title {

    margin: 0 0 28px;

    color: #f39a0a;

    font-family: "Chewy", cursive;

    font-size: 29px;

    letter-spacing: 1px;

    animation: coupleTitleFloat 3s ease-in-out infinite;

}


/* KARTU */

.person-card {

    position: relative;

    width: 100%;

    max-width: 360px;

    margin: 0 auto 75px;

    text-align: center;

}


/* FOTO LOVE */

.person-heart {

    position: relative;

    width: 285px;

    height: 260px;

    margin: 0 auto 25px;

    filter:
        drop-shadow(0 12px 18px rgba(236, 8, 112, .12));

    animation: heartFloat 4s ease-in-out infinite;

}


.person-heart svg {

    display: block;

    width: 100%;

    height: 100%;

}


/* NAMA */

.person-name {

    position: relative;

    z-index: 5;

    margin: 0 0 15px;

    color: #f39a0a;

    font-family: "Chewy", cursive;

    font-size: 27px;

    line-height: 1.25;

    letter-spacing: 1px;

}


/* ORANG TUA */

.person-parent {

    margin: 0 auto 22px;

    max-width: 330px;

    color: #888;

    font-family: "DM Sans", sans-serif;

    font-size: 16px;

    line-height: 1.7;

}


/* INSTAGRAM */

.instagram-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 245px;

    height: 58px;

    padding: 0 25px;

    box-sizing: border-box;

    border: 3px solid #ec0870;

    border-radius: 40px;

    color: #ec0870;

    background: transparent;

    text-decoration: none;

    font-family: "Chewy", cursive;

    font-size: 19px;

    letter-spacing: 1.5px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;

}


.instagram-button:hover {

    transform: translateY(-4px);

    color: white;

    background: #ec0870;

}


.instagram-button:active {

    transform: scale(.96);

}


/* PENGANTIN PRIA */

.groom-card {

    margin-top: 45px;

}


.groom-heart {

    animation-delay: .8s;

}


/* INSTAGRAM PRIA */

.orange-instagram {

    color: #f39a0a;

    border-color: #f39a0a;

}


.orange-instagram:hover {

    color: white;

    background: #f39a0a;

}


/* =====================================================
   ANIMASI
===================================================== */

@keyframes heartFloat {

    0%, 100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}


@keyframes coupleTitleFloat {

    0%, 100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-5px);

    }

}


/* HP */

@media (max-width: 480px) {

    .couple-section {

        padding-left: 15px;

        padding-right: 15px;

    }


    .couple-section-title {

        font-size: 28px;

    }


    .person-heart {

        width: 280px;

        height: 255px;

    }


    .person-name {

        font-size: 26px;

    }


    .person-parent {

        font-size: 15px;

    }

}

/* =====================================================
   EXTRA DECORATION - DUA MANUSIANYA
===================================================== */

.couple-section {
    isolation: isolate;
}


/* LINGKARAN PASTEL BESAR */

.couple-section::before,
.couple-section::after {
    content: "";
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -2;

    animation: pastelFloat 7s ease-in-out infinite;
}


/* pink */

.couple-section::before {
    width: 180px;
    height: 180px;

    background: rgba(244, 158, 195, .20);

    left: -75px;
    top: 130px;
}


/* orange */

.couple-section::after {
    width: 140px;
    height: 140px;

    background: rgba(255, 193, 40, .16);

    right: -55px;
    top: 420px;

    animation-delay: 1.5s;
}


/* =====================================================
   HIASAN BACKGROUND MENGGUNAKAN EXTRA ELEMENT
===================================================== */

.couple-section {
    background-image:
        radial-gradient(
            circle at 10% 18%,
            rgba(236, 8, 112, .14) 0 5px,
            transparent 6px
        ),
        radial-gradient(
            circle at 88% 27%,
            rgba(255, 193, 40, .18) 0 7px,
            transparent 8px
        ),
        radial-gradient(
            circle at 15% 58%,
            rgba(236, 8, 112, .12) 0 4px,
            transparent 5px
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(255, 167, 0, .16) 0 5px,
            transparent 6px
        );

    background-size: 100% 100%;
}


/* =====================================================
   TAMBAHKAN HIASAN MELALUI PERSON CARD
===================================================== */

.person-card::before,
.person-card::after {

    position: absolute;

    pointer-events: none;

    z-index: -1;
}


/* bunga kiri */

.person-card::before {

    content: "✿";

    left: -18px;
    top: 40px;

    color: #f18fbc;

    font-size: 45px;

    animation:
        flowerDrift 5s ease-in-out infinite,
        flowerRotate 8s linear infinite;
}


/* sparkle kanan */

.person-card::after {

    content: "✦";

    right: -10px;
    top: 150px;

    color: #ffc21a;

    font-size: 30px;

    animation: sparkleFloat 2.5s ease-in-out infinite;
}


/* =====================================================
   HIASAN TAMBAHAN PADA FOTO
===================================================== */

.person-heart::before {

    content: "✦";

    position: absolute;

    left: -28px;
    top: 70px;

    color: #ffc21a;

    font-size: 23px;

    z-index: 10;

    animation: sparklePulse 2s ease-in-out infinite;
}


.person-heart::after {

    content: "♥";

    position: absolute;

    right: -28px;
    bottom: 45px;

    color: rgba(236, 8, 112, .22);

    font-size: 35px;

    z-index: 10;

    animation: heartDrift 4s ease-in-out infinite;
}


/* =====================================================
   HIASAN BERBEDA UNTUK PENGANTIN PRIA
===================================================== */

.groom-card::before {

    content: "✿";

    left: auto;

    right: -15px;

    top: 55px;

    color: #f3a5c6;

    font-size: 42px;

    animation:
        flowerDrift 5.5s ease-in-out infinite reverse,
        flowerRotate 9s linear infinite reverse;
}


.groom-card::after {

    content: "✦";

    left: -10px;

    right: auto;

    top: 170px;

    color: #ffc21a;

    font-size: 28px;

    animation: sparkleFloat 3s ease-in-out infinite;
}


/* =====================================================
   FLOATING BUBBLES
===================================================== */

.groom-card .person-heart::before {

    color: #ec0870;

    opacity: .75;
}


.groom-card .person-heart::after {

    color: rgba(243, 154, 10, .25);

    animation-delay: 1s;
}


/* =====================================================
   ANIMASI
===================================================== */

@keyframes pastelFloat {

    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(18px, -18px) scale(1.06);
    }

}


@keyframes flowerDrift {

    0%, 100% {
        transform: translateY(0) rotate(-5deg);
    }

    50% {
        transform: translateY(-14px) rotate(8deg);
    }

}


@keyframes flowerRotate {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }

}


@keyframes sparkleFloat {

    0%, 100% {
        transform:
            translateY(0)
            scale(1)
            rotate(0deg);

        opacity: .65;
    }

    50% {
        transform:
            translateY(-13px)
            scale(1.35)
            rotate(20deg);

        opacity: 1;
    }

}


@keyframes sparklePulse {

    0%, 100% {
        transform: scale(.8) rotate(0deg);

        opacity: .5;
    }

    50% {
        transform: scale(1.4) rotate(25deg);

        opacity: 1;
    }

}


@keyframes heartDrift {

    0%, 100% {
        transform:
            translate(0, 0)
            rotate(-10deg);

        opacity: .35;
    }

    50% {
        transform:
            translate(8px, -15px)
            rotate(10deg);

        opacity: .75;
    }

}

/* =====================================================
   DEKORASI CERIA - HALAMAN ACARA / AGENDA
===================================================== */

.agenda-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(circle at 8% 12%,
            rgba(246, 153, 193, .22) 0 55px,
            transparent 56px),

        radial-gradient(circle at 92% 20%,
            rgba(255, 193, 30, .18) 0 42px,
            transparent 43px),

        radial-gradient(circle at 7% 68%,
            rgba(236, 8, 112, .12) 0 25px,
            transparent 26px),

        radial-gradient(circle at 94% 78%,
            rgba(243, 154, 10, .14) 0 65px,
            transparent 66px);
}


/* =====================================================
   BUNGA BESAR KIRI
===================================================== */

.agenda-section::before {

    content: "✿";

    position: absolute;

    left: -22px;
    top: 90px;

    color: #ef91bc;

    font-size: 90px;

    opacity: .75;

    z-index: -1;

    animation:
        agendaFlowerFloat 5s ease-in-out infinite,
        agendaFlowerRotate 12s linear infinite;
}


/* =====================================================
   SPARKLE KANAN
===================================================== */

.agenda-section::after {

    content: "✦";

    position: absolute;

    right: 25px;
    top: 180px;

    color: #ffc21a;

    font-size: 38px;

    z-index: -1;

    animation: agendaSparkle 2.5s ease-in-out infinite;
}


/* =====================================================
   TAMBAHAN DEKORASI PADA ITEM AGENDA
===================================================== */

.agenda-item {
    position: relative;
}


/* lingkaran pastel bergerak */

.agenda-item::before {

    content: "";

    position: absolute;

    width: 55px;
    height: 55px;

    border-radius: 50%;

    background: rgba(244, 158, 195, .15);

    left: -35px;
    top: -18px;

    z-index: -1;

    animation: agendaBubble 5s ease-in-out infinite;
}


.agenda-item:nth-of-type(2)::before {

    background: rgba(255, 193, 30, .14);

    left: auto;
    right: -20px;

    animation-delay: 1s;
}


/* =====================================================
   BINTANG-BINTANG KECIL
===================================================== */

.agenda-note {
    position: relative;
}


.agenda-note::after {

    content: "✦";

    position: absolute;

    right: 8px;
    top: -8px;

    color: #f6b900;

    font-size: 14px;

    animation: tinyStar 2s ease-in-out infinite;
}


.agenda-note:nth-of-type(2)::after {
    animation-delay: .8s;
}


/* =====================================================
   DEKORASI DI SEKITAR QUOTE
===================================================== */

.agenda-quote {
    position: relative;
}


.agenda-quote::before {

    content: "♥";

    position: absolute;

    left: -8px;
    top: 5px;

    color: rgba(236, 8, 112, .18);

    font-size: 28px;

    animation: littleHeart 4s ease-in-out infinite;
}


.agenda-quote::after {

    content: "✦";

    position: absolute;

    right: 5px;
    bottom: 15px;

    color: rgba(255, 193, 30, .75);

    font-size: 23px;

    animation: agendaSparkle 2.8s ease-in-out infinite;
}


/* =====================================================
   TITIK-TITIK CERIA
===================================================== */

.agenda-decoration::before {

    animation:
        agendaLineMove 4s ease-in-out infinite;
}


/* =====================================================
   ANIMASI
===================================================== */

@keyframes agendaFlowerFloat {

    0%, 100% {
        transform:
            translate(0, 0)
            rotate(0deg);
    }

    50% {
        transform:
            translate(12px, -15px)
            rotate(12deg);
    }
}


@keyframes agendaFlowerRotate {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}


@keyframes agendaSparkle {

    0%, 100% {
        transform:
            scale(.8)
            rotate(0deg);

        opacity: .45;
    }

    50% {
        transform:
            scale(1.35)
            rotate(20deg);

        opacity: 1;
    }
}


@keyframes agendaBubble {

    0%, 100% {
        transform:
            translate(0, 0)
            scale(1);
    }

    50% {
        transform:
            translate(12px, -10px)
            scale(1.12);
    }
}


@keyframes tinyStar {

    0%, 100% {
        transform: scale(.7);
        opacity: .35;
    }

    50% {
        transform: scale(1.4);
        opacity: 1;
    }
}


@keyframes littleHeart {

    0%, 100% {
        transform:
            translateY(0)
            rotate(-8deg);

        opacity: .3;
    }

    50% {
        transform:
            translateY(-12px)
            rotate(8deg);

        opacity: .8;
    }
}


@keyframes agendaLineMove {

    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(8px);
    }
}

/* =====================================================
   GALERI
===================================================== */

.gallery-section {

    position: relative;

    width: 100%;

    padding: 70px 18px 130px;

    box-sizing: border-box;

    text-align: center;

    overflow: hidden;

    isolation: isolate;
}


/* BACKGROUND BULAT */

.gallery-section::before {

    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    background: rgba(246, 154, 194, .18);

    left: -90px;
    top: 150px;

    z-index: -2;

    animation: galleryBubble 7s ease-in-out infinite;
}


.gallery-section::after {

    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background: rgba(255, 193, 30, .14);

    right: -70px;
    bottom: 170px;

    z-index: -2;

    animation:
        galleryBubble 6s ease-in-out infinite reverse;
}


/* =====================================================
   JUDUL
===================================================== */

.gallery-title {

    margin: 0;

    color: #ec0870;

    font-family: "Chewy", cursive;

    font-size: 32px;

    letter-spacing: 1px;

    animation: galleryTitleFloat 3s ease-in-out infinite;
}


.gallery-subtitle {

    margin: 7px 0 30px;

    color: #999;

    font-size: 15px;

    font-style: italic;
}


/* =====================================================
   SLIDER
===================================================== */

.gallery-slider {

    position: relative;

    width: 100%;

    max-width: 350px;

    height: 390px;

    margin: auto;

}


/* TRACK */

.gallery-track {

    position: relative;

    width: 100%;
    height: 100%;
}


/* SLIDE */

.gallery-slide {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    padding: 10px;

    box-sizing: border-box;

    opacity: 0;

    transform:
        scale(.86)
        rotate(-3deg);

    transition:
        opacity .7s ease,
        transform .8s cubic-bezier(.22, .61, .36, 1);

    pointer-events: none;
}


/* FOTO AKTIF */

.gallery-slide.active {

    opacity: 1;

    transform:
        scale(1)
        rotate(0deg);

    z-index: 5;

    pointer-events: auto;
}


/* FRAME */

.gallery-slide::before {

    content: "";

    position: absolute;

    inset: 3px;

    border: 3px solid #ec0870;

    border-radius: 28px;

    transform: rotate(-2deg);

    z-index: -1;
}


.gallery-slide::after {

    content: "";

    position: absolute;

    inset: 0;

    border: 3px solid #f39a0a;

    border-radius: 30px;

    transform: rotate(2deg);

    z-index: -2;
}


/* FOTO */

.gallery-slide img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 25px;

    border: 7px solid #fff8f2;

    box-sizing: border-box;

    box-shadow:
        0 15px 35px rgba(236, 8, 112, .16);

}


/* =====================================================
   TOMBOL SLIDER
===================================================== */

.gallery-arrow {

    position: absolute;

    top: 50%;

    width: 43px;
    height: 43px;

    transform: translateY(-50%);

    border: 0;

    border-radius: 50%;

    background: #ec0870;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 32px;

    line-height: 1;

    cursor: pointer;

    z-index: 20;

    box-shadow:
        0 7px 18px rgba(236, 8, 112, .28);

    transition:
        transform .25s ease,
        background .25s ease;
}


.gallery-arrow:hover {

    background: #f39a0a;

    transform:
        translateY(-50%)
        scale(1.1);
}


.gallery-prev {
    left: -5px;
}


.gallery-next {
    right: -5px;
}


/* =====================================================
   DOTS
===================================================== */

.gallery-dots {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 22px;
}


.gallery-dot {

    width: 9px;
    height: 9px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #e8b5ca;

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease;
}


.gallery-dot.active {

    width: 25px;

    border-radius: 20px;

    background: #ec0870;
}


/* =====================================================
   CAPTION
===================================================== */

.gallery-caption {

    margin-top: 20px;

    color: #f39a0a;

    font-family: "Chewy", cursive;

    font-size: 19px;

    letter-spacing: 2px;
}


/* =====================================================
   DEKORASI
===================================================== */

.gallery-deco {

    position: absolute;

    z-index: -1;

    pointer-events: none;
}


.gallery-flower-left {

    left: -15px;

    top: 40px;

    color: #ef91bc;

    font-size: 65px;

    animation:
        galleryFlower 5s ease-in-out infinite,
        galleryRotate 12s linear infinite;
}


.gallery-flower-right {

    right: -15px;

    bottom: 80px;

    color: #ef91bc;

    font-size: 70px;

    animation:
        galleryFlower 5.5s ease-in-out infinite reverse,
        galleryRotate 14s linear infinite reverse;
}


.gallery-sparkle {

    position: absolute;

    color: #ffc21a;

    pointer-events: none;

    z-index: -1;

    animation: gallerySparkle 2.5s ease-in-out infinite;
}


.gs1 {

    left: 35px;
    top: 210px;

    font-size: 25px;
}


.gs2 {

    right: 38px;
    top: 330px;

    font-size: 31px;

    animation-delay: .8s;
}


.gs3 {

    left: 45px;
    bottom: 240px;

    font-size: 19px;

    animation-delay: 1.4s;
}


/* =====================================================
   ANIMASI
===================================================== */

@keyframes galleryTitleFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}


@keyframes galleryBubble {

    0%, 100% {
        transform:
            translate(0, 0)
            scale(1);
    }

    50% {
        transform:
            translate(18px, -20px)
            scale(1.08);
    }
}


@keyframes galleryFlower {

    0%, 100% {
        transform:
            translateY(0)
            rotate(-5deg);
    }

    50% {
        transform:
            translateY(-14px)
            rotate(10deg);
    }
}


@keyframes galleryRotate {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}


@keyframes gallerySparkle {

    0%, 100% {
        transform:
            scale(.7)
            rotate(0deg);

        opacity: .4;
    }

    50% {
        transform:
            scale(1.35)
            rotate(20deg);

        opacity: 1;
    }
}

/* =====================================================
   DRESS CODE
===================================================== */

.dresscode-section {

    position: relative;

    width: 100%;

    min-height: 560px;

    padding: 75px 25px 110px;

    box-sizing: border-box;

    overflow: hidden;

    isolation: isolate;

    text-align: center;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(245, 166, 199, .20) 0 70px,
            transparent 71px
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(255, 194, 55, .16) 0 80px,
            transparent 81px
        );
}


/* =====================================================
   KONTEN
===================================================== */

.dresscode-content {

    position: relative;

    z-index: 5;

    max-width: 360px;

    margin: auto;
}


/* =====================================================
   JUDUL KECIL
===================================================== */

.dress-small-title {

    color: #999;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    font-style: italic;

    margin-bottom: 4px;
}


/* =====================================================
   JUDUL
===================================================== */

.dresscode-title {

    margin: 0 0 32px;

    color: #ec0870;

    font-family: "Chewy", cursive;

    font-size: 38px;

    letter-spacing: 1px;

    animation:
        dressTitleFloat 3s ease-in-out infinite;
}


/* =====================================================
   PAKAI YANG
===================================================== */

.dress-subtitle {

    color: #777;

    font-size: 16px;

    margin-bottom: 4px;
}


/* =====================================================
   SMART CASUAL
===================================================== */

.dress-main {

    display: inline-block;

    padding: 10px 28px;

    color: #f39a0a;

    font-family: "Chewy", cursive;

    font-size: 31px;

    letter-spacing: 1px;

    border-bottom: 3px solid #f39a0a;

    transform: rotate(-2deg);

    animation:
        dressMainFloat 4s ease-in-out infinite;
}


/* =====================================================
   WARNA
===================================================== */

.dress-color-title {

    margin-top: 35px;

    margin-bottom: 18px;

    color: #888;

    font-size: 14px;

    font-style: italic;
}


.dress-colors {

    display: flex;

    justify-content: center;

    gap: 13px;

    margin-bottom: 30px;
}


.dress-color {

    width: 43px;
    height: 43px;

    border-radius: 50%;

    border: 4px solid white;

    box-shadow:
        0 5px 14px rgba(0,0,0,.10);

    animation:
        colorFloat 3s ease-in-out infinite;
}


.dress-color:nth-child(2) {
    animation-delay: .2s;
}

.dress-color:nth-child(3) {
    animation-delay: .4s;
}

.dress-color:nth-child(4) {
    animation-delay: .6s;
}

.dress-color:nth-child(5) {
    animation-delay: .8s;
}


/* WARNA */

.color-cream {
    background: #f5dfc5;
}

.color-pink {
    background: #efb4c8;
}

.color-peach {
    background: #f5b18d;
}

.color-yellow {
    background: #f5d77a;
}

.color-sage {
    background: #b9c9ad;
}


/* =====================================================
   DESKRIPSI
===================================================== */

.dress-description {

    max-width: 315px;

    margin: 0 auto;

    color: #777;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    line-height: 1.8;
}


/* =====================================================
   HATI
===================================================== */

.dress-heart {

    margin-top: 28px;

    color: rgba(236, 8, 112, .28);

    font-size: 28px;

    animation:
        dressHeart 3s ease-in-out infinite;
}


/* =====================================================
   DEKORASI BUNGA
===================================================== */

.dress-deco {

    position: absolute;

    pointer-events: none;

    z-index: 1;
}


.dress-flower-1 {

    left: -25px;

    top: 80px;

    color: #ef91bc;

    font-size: 85px;

    animation:
        dressFlowerFloat 5s ease-in-out infinite,
        dressRotate 13s linear infinite;
}


.dress-flower-2 {

    right: -25px;

    bottom: 100px;

    color: #f5b45c;

    font-size: 75px;

    animation:
        dressFlowerFloat 6s ease-in-out infinite reverse,
        dressRotate 15s linear infinite reverse;
}


/* =====================================================
   SPARKLE
===================================================== */

.dress-sparkle {

    position: absolute;

    color: #ffc21a;

    pointer-events: none;

    z-index: 2;

    animation:
        dressSparkle 2.5s ease-in-out infinite;
}


.dress-sparkle-1 {

    left: 45px;

    top: 230px;

    font-size: 22px;
}


.dress-sparkle-2 {

    right: 40px;

    top: 180px;

    font-size: 31px;

    animation-delay: .7s;
}


.dress-sparkle-3 {

    left: 65px;

    bottom: 120px;

    font-size: 17px;

    animation-delay: 1.2s;
}


/* =====================================================
   LINGKARAN
===================================================== */

.dress-circle {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

    border: 3px solid rgba(236, 8, 112, .13);

    animation:
        dressCircleFloat 6s ease-in-out infinite;
}


.circle-1 {

    width: 100px;
    height: 100px;

    left: -40px;

    top: 330px;
}


.circle-2 {

    width: 65px;
    height: 65px;

    right: -20px;

    top: 390px;

    border-color: rgba(243,154,10,.18);

    animation-delay: 1s;
}


/* =====================================================
   ANIMASI
===================================================== */

@keyframes dressTitleFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}


@keyframes dressMainFloat {

    0%, 100% {
        transform:
            rotate(-2deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(-2deg)
            translateY(-5px);
    }
}


@keyframes colorFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}


@keyframes dressFlowerFloat {

    0%, 100% {
        transform: translate(0,0) rotate(-5deg);
    }

    50% {
        transform: translate(12px,-15px) rotate(10deg);
    }
}


@keyframes dressRotate {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}


@keyframes dressSparkle {

    0%, 100% {
        transform:
            scale(.7)
            rotate(0deg);

        opacity: .4;
    }

    50% {
        transform:
            scale(1.35)
            rotate(20deg);

        opacity: 1;
    }
}


@keyframes dressCircleFloat {

    0%, 100% {
        transform:
            translate(0,0)
            rotate(0deg);
    }

    50% {
        transform:
            translate(15px,-12px)
            rotate(20deg);
    }
}


@keyframes dressHeart {

    0%, 100% {
        transform: scale(1);

        opacity: .4;
    }

    50% {
        transform: scale(1.3);

        opacity: .8;
    }
}

/* =====================================================
   KADO
===================================================== */

.gift-section {

    position: relative;

    min-height: 650px;

    padding: 90px 25px 120px;

    box-sizing: border-box;

    overflow: hidden;

    isolation: isolate;

    text-align: center;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(246, 154, 194, .20) 0 80px,
            transparent 81px
        ),

        radial-gradient(
            circle at 92% 75%,
            rgba(255, 193, 30, .17) 0 90px,
            transparent 91px
        );
}


/* =====================================================
   KONTEN
===================================================== */

.gift-content {

    position: relative;

    z-index: 10;

    max-width: 390px;

    margin: auto;
}


/* =====================================================
   JUDUL
===================================================== */

.gift-small-title {

    color: #999;

    font-size: 15px;

    font-style: italic;

    margin-bottom: 4px;
}


.gift-title {

    margin: 0;

    color: #ec0870;

    font-family: "Chewy", cursive;

    font-size: 38px;

    letter-spacing: 1px;

    animation:
        giftTitleFloat 3s ease-in-out infinite;
}


/* =====================================================
   ICON
===================================================== */

.gift-icon {

    margin: 28px auto 20px;

    width: 75px;
    height: 75px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 10px 25px rgba(236, 8, 112, .12);

    font-size: 38px;

    animation:
        giftIconFloat 3s ease-in-out infinite;
}


/* =====================================================
   DESKRIPSI
===================================================== */

.gift-description {

    max-width: 350px;

    margin: 0 auto 32px;

    color: #777;

    font-family: "DM Sans", sans-serif;

    font-size: 16px;

    line-height: 1.85;
}


/* =====================================================
   TOMBOL
===================================================== */

.gift-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-width: 220px;

    height: 58px;

    padding: 0 28px;

    border: 0;

    border-radius: 40px;

    background: #ec0870;

    color: white;

    font-family: "Chewy", cursive;

    font-size: 21px;

    letter-spacing: 1px;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(236, 8, 112, .25);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.gift-button:hover {

    background: #f39a0a;

    transform: translateY(-4px);

    box-shadow:
        0 14px 30px rgba(243, 154, 10, .28);
}


.gift-button:active {

    transform: scale(.95);
}


.gift-button-icon {

    font-size: 25px;

    animation:
        buttonHeart 2s ease-in-out infinite;
}


/* =====================================================
   CATATAN
===================================================== */

.gift-note {

    margin-top: 22px;

    color: #aaa;

    font-size: 13px;

    font-style: italic;
}


/* =====================================================
   DEKORASI BUNGA
===================================================== */

.gift-flower {

    position: absolute;

    z-index: 1;

    pointer-events: none;

    color: #ef91bc;

    font-size: 80px;

    opacity: .75;
}


.gift-flower-1 {

    left: -25px;

    top: 80px;

    animation:
        giftFlowerFloat 5s ease-in-out infinite,
        giftRotate 13s linear infinite;
}


.gift-flower-2 {

    right: -25px;

    bottom: 80px;

    color: #f3aa5c;

    animation:
        giftFlowerFloat 6s ease-in-out infinite reverse,
        giftRotate 15s linear infinite reverse;
}


/* =====================================================
   SPARKLE
===================================================== */

.gift-sparkle {

    position: absolute;

    z-index: 2;

    color: #ffc21a;

    pointer-events: none;

    animation:
        giftSparkle 2.5s ease-in-out infinite;
}


.gift-sparkle-1 {

    left: 35px;

    top: 230px;

    font-size: 23px;
}


.gift-sparkle-2 {

    right: 35px;

    top: 170px;

    font-size: 32px;

    animation-delay: .7s;
}


.gift-sparkle-3 {

    left: 65px;

    bottom: 150px;

    font-size: 18px;

    animation-delay: 1.3s;
}


/* =====================================================
   HATI
===================================================== */

.gift-heart {

    position: absolute;

    color: rgba(236, 8, 112, .18);

    z-index: 1;

    pointer-events: none;

    animation:
        giftHeartFloat 4s ease-in-out infinite;
}


.gift-heart-1 {

    left: 25px;

    bottom: 250px;

    font-size: 35px;
}


.gift-heart-2 {

    right: 20px;

    top: 350px;

    font-size: 27px;

    animation-delay: 1s;
}


/* =====================================================
   CIRCLE
===================================================== */

.gift-circle {

    position: absolute;

    border-radius: 50%;

    border: 3px solid rgba(236, 8, 112, .13);

    pointer-events: none;

    z-index: -1;

    animation:
        giftCircleFloat 6s ease-in-out infinite;
}


.gift-circle-1 {

    width: 110px;
    height: 110px;

    left: -45px;

    top: 390px;
}


.gift-circle-2 {

    width: 70px;
    height: 70px;

    right: -25px;

    top: 270px;

    border-color:
        rgba(243, 154, 10, .20);

    animation-delay: 1s;
}


/* =====================================================
   FIX POSISI POPUP KADO
===================================================== */

.gift-modal {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 20px !important;

    box-sizing: border-box;

    z-index: 999999 !important;

    visibility: hidden;

    opacity: 0;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


.gift-modal.show {

    visibility: visible !important;

    opacity: 1 !important;
}


/* BACKGROUND BLUR */

.gift-modal-overlay {

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    background:
        rgba(40, 20, 30, .55);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    z-index: 1;
}


/* KOTAK POPUP */

.gift-modal-box {

    position: relative !important;

    z-index: 2 !important;

    width: min(390px, calc(100vw - 40px)) !important;

    max-height: calc(100vh - 40px) !important;

    overflow-y: auto;

    margin: 0 !important;

    padding: 35px 25px 30px;

    box-sizing: border-box;

    border-radius: 30px;

    background: #fffaf6;

    box-shadow:
        0 25px 70px rgba(0,0,0,.30);

    text-align: center;

    transform:
        translateY(20px)
        scale(.94);

    transition:
        transform .4s cubic-bezier(.22,.61,.36,1);
}


.gift-modal.show .gift-modal-box {

    transform:
        translateY(0)
        scale(1);
}


/* =====================================================
   KARTU ATM
===================================================== */

.atm-card {

    position: relative;

    width: 100%;

    aspect-ratio: 1.62;

    padding: 20px;

    box-sizing: border-box;

    border-radius: 20px;

    overflow: hidden;

    text-align: left;

    color: white;

    background:
        linear-gradient(
            135deg,
            #ec0870,
            #f36a9e 55%,
            #f39a0a
        );

    box-shadow:
        0 15px 30px rgba(236, 8, 112, .25);

    transform: rotate(-2deg);

    margin-bottom: 28px;
}


.atm-card::after {

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    right: -45px;
    bottom: -55px;

    background:
        rgba(255,255,255,.16);
}


.atm-top {

    display: flex;

    justify-content: space-between;

    font-size: 13px;

    font-weight: bold;
}


.atm-chip {

    font-size: 25px;

    opacity: .8;
}


.atm-number {

    margin-top: 35px;

    font-family: monospace;

    font-size: 20px;

    letter-spacing: 2px;

    white-space: nowrap;
}


.atm-bottom {

    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 18px;

    display: flex;

    justify-content: space-between;

    align-items: end;
}


.atm-bottom small {

    display: block;

    font-size: 8px;

    opacity: .75;
}


.atm-bottom strong {

    font-size: 12px;
}


.atm-logo {

    font-weight: bold;

    font-size: 14px;
}


/* =====================================================
   REKENING
===================================================== */

.rekening-info {

    padding: 15px;

    border-radius: 18px;

    background: #fff;

    border: 2px dashed #f2b3ca;

    margin-bottom: 18px;
}


.rekening-bank {

    color: #f39a0a;

    font-family: "Chewy", cursive;

    font-size: 17px;
}


.rekening-number {

    margin: 7px 0;

    color: #444;

    font-family: monospace;

    font-size: 22px;

    font-weight: bold;

    letter-spacing: 1px;
}


.rekening-owner {

    color: #999;

    font-size: 13px;
}


/* =====================================================
   COPY BUTTON
===================================================== */

.copy-rekening-button {

    width: 100%;

    height: 53px;

    border: 0;

    border-radius: 30px;

    background: #f39a0a;

    color: white;

    font-family: "DM Sans", sans-serif;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .25s ease,
        background .25s ease;
}


.copy-rekening-button:hover {

    background: #ec0870;

    transform: translateY(-2px);
}


.copy-rekening-button:active {

    transform: scale(.97);
}


/* SUCCESS */

.copy-success {

    margin-top: 12px;

    color: #24a56a;

    font-size: 13px;

    opacity: 0;

    transform: translateY(-5px);

    transition: .3s ease;
}


.copy-success.show {

    opacity: 1;

    transform: translateY(0);
}


.gift-modal-thanks {

    margin: 20px 5px 0;

    color: #999;

    font-size: 13px;

    line-height: 1.7;
}


/* =====================================================
   ANIMASI
===================================================== */

@keyframes giftTitleFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}


@keyframes giftIconFloat {

    0%,100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-8px) rotate(4deg);
    }
}


@keyframes buttonHeart {

    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }
}


@keyframes giftFlowerFloat {

    0%,100% {
        transform: translate(0,0) rotate(-5deg);
    }

    50% {
        transform: translate(12px,-15px) rotate(10deg);
    }
}


@keyframes giftRotate {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}


@keyframes giftSparkle {

    0%,100% {
        transform: scale(.7) rotate(0);
        opacity: .4;
    }

    50% {
        transform: scale(1.35) rotate(20deg);
        opacity: 1;
    }
}


@keyframes giftHeartFloat {

    0%,100% {
        transform: translateY(0) rotate(-8deg);
    }

    50% {
        transform: translateY(-15px) rotate(8deg);
    }
}


@keyframes giftCircleFloat {

    0%,100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(15px,-12px);
    }
}

body.gift-modal-open {
    overflow: hidden !important;
}

/* =====================================================
   KIRIM KADO — FINAL POPUP FIX
   POPUP DILETAKKAN DI LEVEL BODY, BUKAN DI .invitation
===================================================== */

body.gift-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* LAYER UTAMA */
#giftModal.gift-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    z-index: 2147483000 !important;

    overflow: hidden !important;
    transform: none !important;
    filter: none !important;

    transition:
        opacity .28s ease,
        visibility 0s linear .28s !important;
}

/* SAAT TERBUKA */
#giftModal.gift-modal.show {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition:
        opacity .28s ease,
        visibility 0s linear 0s !important;
}

/* BACKGROUND GELAP */
#giftModal .gift-modal-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255,255,255,.10),
            transparent 38%
        ),
        rgba(24, 10, 18, .72) !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;

    opacity: 1 !important;
    z-index: 0 !important;
}

/* KOTAK POPUP */
#giftModal .gift-modal-box {
    position: relative !important;
    z-index: 1 !important;

    width: min(390px, calc(100vw - 32px)) !important;
    max-width: 390px !important;

    max-height: min(720px, calc(100dvh - 32px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;

    margin: 0 !important;
    padding: 32px 24px 27px !important;
    box-sizing: border-box !important;

    border: 1px solid rgba(233,0,112,.12) !important;
    border-radius: 28px !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(243,154,10,.10),
            transparent 28%
        ),
        linear-gradient(180deg, #fffdfb 0%, #fff7f1 100%) !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.34),
        0 10px 30px rgba(233,0,112,.12) !important;

    text-align: center !important;

    transform: translateY(18px) scale(.94) !important;
    opacity: 0 !important;

    transition:
        transform .38s cubic-bezier(.22,1,.36,1),
        opacity .28s ease !important;

    overscroll-behavior: contain !important;
}

/* KOTAK SAAT TERBUKA */
#giftModal.gift-modal.show .gift-modal-box {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

/* SCROLLBAR POPUP */
#giftModal .gift-modal-box::-webkit-scrollbar {
    width: 5px;
}
#giftModal .gift-modal-box::-webkit-scrollbar-track {
    background: transparent;
}
#giftModal .gift-modal-box::-webkit-scrollbar-thumb {
    background: rgba(233,0,112,.22);
    border-radius: 20px;
}

/* TOMBOL CLOSE */
#giftModal .gift-modal-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;

    width: 38px !important;
    height: 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: rgba(233,0,112,.08) !important;
    color: #e90070 !important;

    font-family: Arial, sans-serif !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    cursor: pointer !important;
    z-index: 20 !important;

    transition:
        transform .2s ease,
        background .2s ease !important;
}
#giftModal .gift-modal-close:hover {
    background: rgba(233,0,112,.16) !important;
    transform: rotate(90deg) scale(1.05) !important;
}
#giftModal .gift-modal-close:active {
    transform: scale(.90) !important;
}

/* JUDUL */
#giftModal .gift-modal-small {
    margin: 0 0 3px !important;
    color: #f39a0a !important;
    font-family: "Patrick Hand", cursive !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
}
#giftModal .gift-modal-title {
    margin: 0 0 18px !important;
    color: #e90070 !important;
    font-family: "Chewy", cursive !important;
    font-size: 31px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
}

/* KARTU ATM */
#giftModal .atm-card {
    width: 100% !important;
    aspect-ratio: 1.62 !important;
    margin: 0 0 21px !important;
    padding: 19px !important;

    border-radius: 19px !important;

    background:
        linear-gradient(
            135deg,
            #e90070 0%,
            #f36a9e 52%,
            #f39a0a 100%
        ) !important;

    box-shadow:
        0 15px 30px rgba(233,0,112,.20) !important;

    transform: rotate(-1.2deg) !important;
}

/* Nomor di kartu tidak boleh overflow */
#giftModal .atm-number {
    margin-top: 31px !important;
    font-size: clamp(15px, 5vw, 20px) !important;
    letter-spacing: clamp(1px, .7vw, 2px) !important;
}

/* DATA REKENING */
#giftModal .rekening-info {
    margin: 0 0 14px !important;
    padding: 13px 15px !important;

    border: 1.5px dashed #f2b3ca !important;
    border-radius: 17px !important;

    background: rgba(255,255,255,.86) !important;
}
#giftModal .rekening-bank {
    margin: 0 !important;
    color: #f39a0a !important;
    font-size: 16px !important;
}
#giftModal .rekening-number {
    margin: 5px 0 !important;
    color: #3d3d3d !important;
    font-family: monospace !important;
    font-size: clamp(18px, 5vw, 22px) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
}
#giftModal .rekening-owner {
    color: #999 !important;
    font-size: 12px !important;
}

/* TOMBOL SALIN */
#giftModal .copy-rekening-button {
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    border: 0 !important;
    border-radius: 28px !important;

    background: #f39a0a !important;
    color: #fff !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .4px !important;

    cursor: pointer !important;

    box-shadow: 0 8px 20px rgba(243,154,10,.20) !important;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease !important;
}
#giftModal .copy-rekening-button:hover {
    background: #e90070 !important;
    box-shadow: 0 10px 25px rgba(233,0,112,.20) !important;
    transform: translateY(-2px) !important;
}
#giftModal .copy-rekening-button:active {
    transform: scale(.97) !important;
}
#giftModal .copy-rekening-button.copied {
    background: #25a56a !important;
    box-shadow: 0 8px 20px rgba(37,165,106,.18) !important;
}

/* PESAN BERHASIL */
#giftModal .copy-success {
    margin: 10px 0 0 !important;
    color: #25a56a !important;
    font-size: 12px !important;

    opacity: 0 !important;
    transform: translateY(-4px) !important;

    transition: opacity .25s ease, transform .25s ease !important;
}
#giftModal .copy-success.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* UCAPAN */
#giftModal .gift-modal-thanks {
    margin: 15px 5px 0 !important;
    color: #999 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
}

/* HP KECIL */
@media (max-width: 380px) {
    #giftModal.gift-modal {
        padding: 12px !important;
    }

    #giftModal .gift-modal-box {
        width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        padding: 29px 17px 22px !important;
        border-radius: 24px !important;
    }

    #giftModal .gift-modal-title {
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }

    #giftModal .atm-card {
        padding: 15px !important;
        margin-bottom: 17px !important;
    }

    #giftModal .atm-number {
        margin-top: 25px !important;
    }

    #giftModal .atm-bottom {
        left: 15px !important;
        right: 15px !important;
        bottom: 13px !important;
    }

    #giftModal .copy-rekening-button {
        font-size: 12px !important;
    }
}

/* DESKTOP:
   popup tetap memenuhi viewport, bukan hanya lebar 430px */
@media (min-width: 700px) {
    #giftModal.gift-modal {
        padding: 24px !important;
    }
}


/* =====================================================
   DOA — HALAMAN PESAN & DOA
   Semua class diprefix doa- agar tidak mengganggu halaman lain.
===================================================== */
.doa-section {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 15%, rgba(255,255,255,.95), transparent 28%),
        radial-gradient(circle at 85% 78%, rgba(255,218,233,.65), transparent 30%),
        #fff7f1;
    padding: 60px 18px 125px;
}

.doa-content {
    position: relative;
    z-index: 10;
    width: min(100%, 390px);
    margin: 0 auto;
    text-align: center;
}

.doa-small-title {
    color: #f39a0a;
    font-family: "Patrick Hand", cursive;
    font-size: 18px;
    letter-spacing: 1px;
    margin-bottom: 4px;
    animation: doaFloat 4s ease-in-out infinite;
}

.doa-title {
    margin: 0;
    color: #e90070;
    font-family: "Chewy", cursive;
    font-size: 36px;
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 4px 15px rgba(233,0,112,.10);
}

.doa-subtitle {
    max-width: 320px;
    margin: 16px auto 25px;
    color: #77706c;
    font-size: 14px;
    line-height: 1.75;
}

.doa-message-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    max-height: 440px;
    overflow-y: auto;
    padding: 5px 4px 12px;
    scrollbar-width: thin;
    scrollbar-color: #f2a8c5 transparent;
}

.doa-wish-card {
    position: relative;
    display: flex;
    gap: 12px;
    text-align: left;
    padding: 15px;
    border: 1px solid rgba(235,157,190,.45);
    border-radius: 21px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 9px 24px rgba(183,87,126,.08);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: transform .25s ease, box-shadow .25s ease;
}

.doa-wish-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(183,87,126,.12);
}

.doa-wish-new {
    animation: doaWishIn .65s cubic-bezier(.22,1,.36,1);
}

.doa-wish-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #e90070, #f46b9e);
    color: white;
    font-family: "Chewy", cursive;
    font-size: 20px;
    box-shadow: 0 5px 12px rgba(233,0,112,.18);
}

.doa-avatar-orange {
    background: linear-gradient(135deg, #f39a0a, #f7c25b);
}

.doa-wish-content { min-width: 0; flex: 1; }

.doa-wish-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.doa-wish-head strong {
    color: #413a38;
    font-size: 14px;
}

.doa-wish-status {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 99px;
    background: #fff0f6;
    color: #e90070;
    font-size: 9px;
    font-weight: 700;
}

.doa-wish-content p {
    margin: 7px 0 5px;
    color: #66605d;
    font-size: 12.5px;
    line-height: 1.65;
}

.doa-wish-content small {
    color: #aaa09b;
    font-size: 10px;
}

.doa-empty {
    padding: 30px 10px;
    color: #aaa;
    font-size: 13px;
}

.doa-write-button {
    position: relative;
    z-index: 12;
    width: min(100%, 300px);
    height: 56px;
    margin: 20px auto 0;
    border: 0;
    border-radius: 30px;
    background: linear-gradient(135deg, #e90070, #f04b91);
    color: white;
    font-family: "Chewy", cursive;
    font-size: 18px;
    letter-spacing: .7px;
    cursor: pointer;
    box-shadow: 0 11px 25px rgba(233,0,112,.22), 0 0 0 5px rgba(255,255,255,.72);
    transition: transform .25s ease, box-shadow .25s ease;
    animation: doaButtonFloat 3.5s ease-in-out infinite;
}

.doa-write-button span { margin-right: 7px; font-size: 20px; }
.doa-write-button:hover { transform: translateY(-3px) scale(1.02); }
.doa-write-button:active { transform: scale(.96); }

.doa-note {
    margin-top: 15px;
    color: #aaa09c;
    font-family: "Patrick Hand", cursive;
    font-size: 15px;
}

.doa-deco,
.doa-orb,
.doa-heart { position: absolute; pointer-events: none; }

.doa-flower {
    color: #ee8fba;
    opacity: .62;
    font-size: 40px;
    animation: doaFlower 6s ease-in-out infinite;
}
.doa-flower-1 { left: -12px; top: 115px; }
.doa-flower-2 { right: -8px; top: 310px; font-size: 31px; animation-delay: 1.2s; }
.doa-flower-3 { left: 28px; bottom: 125px; font-size: 24px; animation-delay: 2s; }

.doa-sparkle {
    color: #f5bd20;
    font-size: 28px;
    animation: doaSparkle 2.8s ease-in-out infinite;
}
.doa-sparkle-1 { left: 54px; top: 72px; }
.doa-sparkle-2 { right: 45px; top: 155px; animation-delay: .9s; }
.doa-sparkle-3 { right: 70px; bottom: 155px; font-size: 21px; animation-delay: 1.7s; }

.doa-orb {
    border-radius: 50%;
    border: 2px solid rgba(233,0,112,.10);
    animation: doaOrb 7s ease-in-out infinite;
}
.doa-orb-1 { width: 115px; height: 115px; left: -55px; top: 420px; }
.doa-orb-2 { width: 85px; height: 85px; right: -35px; bottom: 255px; border-color: rgba(243,154,10,.16); animation-delay: 1.3s; }

.doa-heart {
    color: rgba(233,0,112,.12);
    font-size: 34px;
    animation: doaHeart 4.5s ease-in-out infinite;
}
.doa-heart-1 { right: 23px; bottom: 310px; }
.doa-heart-2 { left: 32px; top: 270px; font-size: 22px; animation-delay: 1.4s; }

/* =====================================================
   POPUP DOA
===================================================== */
/* POPUP DOA — viewport level, sama prinsipnya dengan POPUP KADO */
.doa-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    z-index: 2147483000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    transform: none !important;
    filter: none !important;
    transition: opacity .28s ease, visibility 0s linear .28s !important;
}

.doa-modal.show {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity .28s ease, visibility 0s linear 0s !important;
}

.doa-modal-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(48,23,34,.58) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 0 !important;
}

.doa-modal-box {
    position: relative !important;
    z-index: 1 !important;
    width: min(390px, calc(100vw - 32px)) !important;
    max-width: 390px !important;
    max-height: min(720px, calc(100dvh - 32px)) !important;
    overflow-y: auto;
    padding: 30px 22px 24px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 30px;
    background: #fffaf7;
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
    transform: translateY(24px) scale(.94);
    transition: transform .42s cubic-bezier(.22,1,.36,1);
}

.doa-modal.show .doa-modal-box { transform: translateY(0) scale(1); }

.doa-modal-close {
    position: absolute;
    right: 14px;
    top: 12px;
    width: 39px;
    height: 39px;
    border: 0;
    border-radius: 50%;
    background: #fff0f5;
    color: #e90070;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
}

.doa-modal-flower {
    width: 54px;
    height: 54px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff0f5;
    color: #e90070;
    font-size: 27px;
    animation: doaFlower 4s ease-in-out infinite;
}

.doa-modal-small {
    color: #f39a0a;
    font-family: "Patrick Hand", cursive;
    font-size: 16px;
}

.doa-modal-title {
    margin: 2px 0 5px;
    color: #e90070;
    font-family: "Chewy", cursive;
    font-size: 31px;
    font-weight: 400;
}

.doa-modal-subtitle {
    margin: 0 auto 18px;
    max-width: 300px;
    color: #8a817d;
    font-size: 12px;
    line-height: 1.6;
}

.doa-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.doa-form label { position: relative; display: block; }
.doa-form label > span {
    display: block;
    margin: 0 0 6px 4px;
    color: #4b4441;
    font-size: 11px;
    font-weight: 700;
}

.doa-form input,
.doa-form select,
.doa-form textarea {
    width: 100%;
    border: 1px solid #ead3dc;
    border-radius: 15px;
    outline: none;
    background: white;
    color: #4b4441;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.doa-form input,
.doa-form select { height: 47px; padding: 0 14px; }
.doa-form textarea { min-height: 118px; padding: 12px 14px 25px; resize: vertical; }

.doa-form input:focus,
.doa-form select:focus,
.doa-form textarea:focus {
    border-color: #ef8eb8;
    box-shadow: 0 0 0 3px rgba(233,0,112,.08);
}

.doa-counter {
    position: absolute;
    right: 11px;
    bottom: 9px;
    color: #b1a5a1;
    font-size: 9px;
}

.doa-submit-button {
    width: 100%;
    height: 52px;
    margin-top: 3px;
    border: 0;
    border-radius: 27px;
    background: linear-gradient(135deg, #e90070, #f39a0a);
    color: white;
    font-family: "Chewy", cursive;
    font-size: 17px;
    letter-spacing: .6px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(233,0,112,.18);
    transition: transform .2s ease;
}
.doa-submit-button:hover { transform: translateY(-2px); }
.doa-submit-button:active { transform: scale(.98); }
.doa-submit-button span { margin-left: 6px; }

.doa-success {
    text-align: center;
    color: #2e9b67;
    font-size: 11px;
    opacity: 0;
    transform: translateY(-5px);
    transition: .25s ease;
    height: 0;
    overflow: hidden;
}
.doa-success.show { opacity: 1; transform: translateY(0); height: 18px; }

@keyframes doaFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes doaButtonFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes doaFlower { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-8px) rotate(8deg)} }
@keyframes doaSparkle { 0%,100%{opacity:.45;transform:translateY(0) rotate(0)} 50%{opacity:1;transform:translateY(-8px) rotate(18deg)} }
@keyframes doaOrb { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translateY(-10px) scale(1.05)} }
@keyframes doaHeart { 0%,100%{transform:translateY(0) rotate(-5deg);opacity:.65} 50%{transform:translateY(-8px) rotate(6deg);opacity:1} }
@keyframes doaWishIn { from{opacity:0;transform:translateY(14px) scale(.97)} to{opacity:1;transform:none} }

@media (max-width: 390px) {
    .doa-section { padding-left: 14px; padding-right: 14px; }
    .doa-title { font-size: 33px; }
    .doa-message-list { max-height: 410px; }
    .doa-modal-box { padding: 27px 17px 20px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .doa-section *, .doa-section::before, .doa-section::after { animation: none !important; transition: none !important; }
}


/* =====================================================
   FINAL BUG FIX — GALERI: BINGKAI TETAP DIAM
   Foto yang berganti tidak lagi membawa frame ikut bergerak.
===================================================== */
.gallery-slider {
    position: relative;
    isolation: isolate;
}

/* Bingkai dibuat sebagai bagian dari wadah slider, bukan slide. */
.gallery-slider::before,
.gallery-slider::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 8;
    border-radius: 28px;
}

.gallery-slider::before {
    inset: 3px;
    border: 3px solid #ec0870;
    transform: rotate(-2deg);
}

.gallery-slider::after {
    inset: 0;
    border: 3px solid #f39a0a;
    border-radius: 30px;
    transform: rotate(2deg);
}

/* Slide hanya menangani pergantian foto, bukan posisi bingkai. */
.gallery-slide,
.gallery-slide.active {
    transform: none !important;
    transition: opacity .45s ease !important;
}

.gallery-slide::before,
.gallery-slide::after {
    display: none !important;
}

.gallery-slide img {
    position: relative;
    z-index: 1;
}

/* Tombol tetap berada di atas bingkai. */
.gallery-arrow {
    z-index: 20 !important;
}

/* =====================================================
   FINAL BUG FIX — POPUP DOA: JANGAN MENARIK HALAMAN KE TENGAH
===================================================== */
body.doa-modal-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden !important;
    top: var(--doa-scroll-y, 0px);
}

.doa-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw;
    height: 100dvh;
    min-height: 100vh;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.doa-modal-box {
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 600px) {
    .doa-modal {
        padding: 12px;
    }

    .doa-modal-box {
        max-height: calc(100dvh - 24px);
        max-height: calc(100vh - 24px);
    }
}


/* =====================================================
   HALAMAN TERAKHIR — SAMPAI KETEMU + COUNTDOWN
   Tambahan khusus, tidak mengubah halaman sebelumnya.
===================================================== */

.ketemu-section {
    position: relative;
    width: 100%;
    min-height: 650px;
    padding: 78px 22px 115px;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    background:
        radial-gradient(circle at 8% 16%, rgba(236,8,112,.12) 0 72px, transparent 73px),
        radial-gradient(circle at 94% 76%, rgba(243,154,10,.15) 0 90px, transparent 91px),
        linear-gradient(180deg, #fffaf6 0%, #fff5f8 100%);
}

.ketemu-content {
    position: relative;
    z-index: 5;
    width: min(100%, 380px);
    margin: 0 auto;
}

.ketemu-small-title {
    color: #f39a0a;
    font-family: "Patrick Hand", cursive;
    font-size: 19px;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.ketemu-title {
    margin: 0;
    color: #e90070;
    font-family: "Chewy", cursive;
    font-size: clamp(31px, 9vw, 42px);
    line-height: .98;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 3px 0 rgba(233,0,112,.05);
}

.ketemu-title span {
    display: block;
    margin-top: 8px;
    color: #f39a0a;
    font-size: clamp(20px, 6vw, 27px);
    letter-spacing: .8px;
}

.ketemu-subtitle {
    margin: 18px auto 24px;
    max-width: 330px;
    color: #766d69;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.75;
}

.countdown-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0 auto 18px;
    padding: 14px 8px 12px;
    border-radius: 24px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(236,8,112,.12);
    box-shadow: 0 15px 35px rgba(128,69,92,.10);
    backdrop-filter: blur(8px);
}

.countdown-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.countdown-item strong {
    color: #e90070;
    font-family: "Chewy", cursive;
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1;
    letter-spacing: 1px;
}

.countdown-item span {
    color: #9b908b;
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: lowercase;
}

.ketemu-date-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(100%, 330px);
    margin: 0 auto;
    padding: 13px 15px;
    box-sizing: border-box;
    text-align: left;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #f5c4d7;
    box-shadow: 0 10px 25px rgba(128,69,92,.07);
}

.ketemu-date-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #ec0870, #f39a0a);
    font-size: 20px;
}

.ketemu-date-card strong,
.ketemu-date-card small {
    display: block;
}

.ketemu-date-card strong {
    color: #e90070;
    font-family: "Chewy", cursive;
    font-size: 16px;
    letter-spacing: .6px;
}

.ketemu-date-card small {
    margin-top: 2px;
    color: #8f8580;
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    line-height: 1.45;
}

.ketemu-wave {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 25px auto 20px;
}

.ketemu-wave span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ec0870;
    opacity: .75;
    animation: ketemuDot 1.8s ease-in-out infinite;
}

.ketemu-wave span:nth-child(2) { animation-delay: .12s; }
.ketemu-wave span:nth-child(3) { animation-delay: .24s; }
.ketemu-wave span:nth-child(4) { animation-delay: .36s; }
.ketemu-wave span:nth-child(5) { animation-delay: .48s; }

.ketemu-message {
    max-width: 325px;
    margin: 0 auto;
    color: #766d69;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    line-height: 1.9;
}

.ketemu-names {
    margin-top: 18px;
    color: #e90070;
    font-family: "Chewy", cursive;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: 1px;
}

.ketemu-names span {
    color: #f39a0a;
    margin: 0 4px;
}

.ketemu-love {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin: 18px auto 0;
    border-radius: 50%;
    color: #fff;
    background: #e90070;
    box-shadow: 0 10px 25px rgba(233,0,112,.20);
    animation: ketemuFloat 2.8s ease-in-out infinite;
}

.ketemu-deco,
.ketemu-orb {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.ketemu-flower {
    color: rgba(233,0,112,.22);
    font-size: 62px;
    animation: ketemuFloat 5s ease-in-out infinite;
}

.ketemu-flower-1 {
    left: -20px;
    top: 85px;
    transform: rotate(-12deg);
}

.ketemu-flower-2 {
    right: -22px;
    bottom: 110px;
    color: rgba(243,154,10,.20);
    font-size: 72px;
    animation-delay: 1s;
}

.ketemu-sparkle {
    color: rgba(243,154,10,.65);
    font-size: 23px;
    animation: ketemuSparkle 2.5s ease-in-out infinite;
}

.ketemu-sparkle-1 { top: 180px; right: 28px; }
.ketemu-sparkle-2 { bottom: 205px; left: 32px; animation-delay: .8s; }

.ketemu-orb {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    filter: blur(2px);
    background: rgba(236,8,112,.055);
    animation: ketemuOrb 7s ease-in-out infinite;
}

.ketemu-orb-1 { left: -65px; bottom: 20px; }
.ketemu-orb-2 { right: -65px; top: 25px; background: rgba(243,154,10,.06); animation-delay: 1.4s; }

@keyframes ketemuFloat {
    0%,100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes ketemuSparkle {
    0%,100% { opacity: .35; transform: scale(.75) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(18deg); }
}

@keyframes ketemuOrb {
    0%,100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(12px,-15px) scale(1.12); }
}

@keyframes ketemuDot {
    0%,100% { transform: translateY(0); opacity: .45; }
    50% { transform: translateY(-6px); opacity: 1; }
}

@media (max-width: 360px) {
    .ketemu-section { padding-left: 15px; padding-right: 15px; }
    .countdown-box { gap: 3px; padding-left: 5px; padding-right: 5px; }
    .countdown-item strong { font-size: 28px; }
    .ketemu-title { font-size: 29px; }
}

/* =========================================
   WATERMARK - DI DALAM AREA PUTIH
   ========================================= */

.creator-watermark {
    width: 100%;
    box-sizing: border-box;
    background: #fff;

    padding: 5px 20px 90px;

    text-align: center;
    position: relative;
    z-index: 5;
}

.creator-text {
    font-size: 10px;
    color: #9b8c88;
    letter-spacing: 0.3px;
    margin-bottom: 9px;
}

.creator-text span {
    color: #e9157b;
    font-weight: 700;
}

.creator-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.creator-link {
    width: 27px;
    height: 27px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    transition: transform .2s ease;
}

.creator-link svg {
    width: 13px;
    height: 13px;
}

/* WhatsApp */
.whatsapp-link {
    background: #25D366;
    color: white;
    box-shadow: 0 3px 8px rgba(37,211,102,.2);
}

.whatsapp-link svg {
    fill: currentColor;
    stroke: none;
}

/* Website */
.website-link {
    background: #e9157b;
    color: white;
    box-shadow: 0 3px 8px rgba(233,21,123,.18);
}

.website-link svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.creator-link:hover {
    transform: translateY(-2px);
}

.creator-link:active {
    transform: scale(.94);
}

/* =====================================================
   POLISH PACK — BUG FIX + BACKGROUND DECOR + SCROLL REVEAL
===================================================== */

/* 1. Cover selalu kembali ke posisi paling atas */
html, body { overscroll-behavior-x: none; }
body.cover-active { position: relative; }

/* 2. Galeri: satu frame tetap, foto berganti tanpa transform track */
.gallery-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    transform: none !important;
}
.gallery-slide,
.gallery-slide.active {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    transform: scale(1) rotate(0deg) !important;
    transition: opacity .55s ease, visibility .55s ease !important;
}
.gallery-slide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.gallery-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
    pointer-events: auto !important;
}
.gallery-slide img {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 3. Background lebih ramai untuk bagian awal undangan */
.home-section,
.acara-section,
.agenda-section {
    isolation: isolate;
}

.home-section::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -105px;
    top: 95px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,185,215,.48) 0%, rgba(255,185,215,.18) 48%, transparent 72%);
    z-index: -1;
    animation: bgFloatOne 8s ease-in-out infinite;
}
.home-section::after {
    content: "✿  ✦  ✿";
    position: absolute;
    right: -15px;
    bottom: 100px;
    color: rgba(233,0,112,.22);
    font-size: 42px;
    letter-spacing: 10px;
    transform: rotate(-12deg);
    z-index: -1;
    animation: bgFloatTwo 6s ease-in-out infinite;
}

.acara-section::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -160px;
    top: 85px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,193,30,.27) 0%, rgba(255,193,30,.10) 48%, transparent 72%);
    z-index: -1;
    animation: bgFloatTwo 9s ease-in-out infinite;
}
.acara-section::after {
    content: "✦  ❀  ✦";
    position: absolute;
    left: -18px;
    bottom: 110px;
    color: rgba(236,8,112,.22);
    font-size: 38px;
    letter-spacing: 8px;
    transform: rotate(10deg);
    z-index: -1;
    animation: bgFloatOne 7s ease-in-out infinite reverse;
}

.agenda-section::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    left: -125px;
    top: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246,154,194,.30) 0%, rgba(246,154,194,.10) 50%, transparent 73%);
    z-index: -1;
}
.agenda-section::after {
    content: "✿  ✦  ❀";
    position: absolute;
    right: -25px;
    bottom: 80px;
    color: rgba(243,154,10,.25);
    font-size: 36px;
    letter-spacing: 8px;
    transform: rotate(-8deg);
    z-index: -1;
}

/* Dekorasi kecil tambahan */
.home-section .home-content,
.home-section .guest-home,
.acara-section .acara-content,
.acara-section .acara-flower,
.acara-section .acara-sparkle,
.agenda-section > * {
    position: relative;
    z-index: 2;
}

/* 4. Animasi masuk ketika user scroll */
.scroll-reveal {
    opacity: 0;
    transform: translateY(34px) scale(.97);
    transition:
        opacity .75s ease var(--reveal-delay, 0ms),
        transform .85s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@keyframes bgFloatOne {
    0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
    50% { transform: translate3d(10px,-14px,0) rotate(5deg); }
}
@keyframes bgFloatTwo {
    0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
    50% { transform: translate3d(-10px,12px,0) rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =====================================================
   MOBILE STABILITY PACK — GALERI / DOA / KETEMU
===================================================== */

/* Scroll reveal harus tetap bekerja di layar sentuh. */
.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(.985);
    transition:
        opacity .65s ease var(--reveal-delay, 0ms),
        transform .75s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.scroll-reveal.is-visible {
    opacity: 1 !important;
    transform: translate3d(0,0,0) scale(1) !important;
}

/* Slide rusak tidak pernah ditampilkan sebagai foto kosong. */
.gallery-slide.image-error { display: none !important; }
.gallery-slider { overflow: visible; }
.gallery-track { overflow: hidden !important; border-radius: 30px; }
.gallery-slide img { background: #fff7f1; }

@media (max-width: 600px) {
    .bottom-nav {
        height: 62px;
        width: 100%;
    }
    .nav-item {
        font-size: 9px;
        gap: 2px;
    }
    .nav-icon,
    .nav-icon svg {
        width: 20px;
        height: 20px;
        font-size: 20px;
    }

    .gallery-section {
        padding: 58px 14px 92px;
    }
    .gallery-slider {
        width: min(100%, 340px);
        height: min(82vw, 355px);
        min-height: 300px;
    }
    .gallery-arrow {
        width: 38px;
        height: 38px;
        font-size: 27px;
    }
    .gallery-prev { left: -3px; }
    .gallery-next { right: -3px; }

    .doa-section {
        min-height: auto;
        padding: 58px 14px 92px;
    }
    .doa-content {
        width: 100%;
        max-width: 390px;
    }
    .doa-title { font-size: clamp(31px, 10vw, 36px); }
    .doa-subtitle {
        max-width: 310px;
        margin-bottom: 20px;
    }
    .doa-message-list {
        max-height: 390px;
        padding-left: 2px;
        padding-right: 2px;
    }
    .doa-wish-card {
        padding: 13px 12px;
        gap: 9px;
        border-radius: 18px;
    }
    .doa-wish-avatar {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 17px;
    }
    .doa-wish-head { align-items: flex-start; }
    .doa-wish-content p { font-size: 12px; }
    .doa-write-button { width: min(100%, 290px); }

    .ketemu-section {
        min-height: auto;
        padding: 62px 15px 92px;
    }
    .ketemu-content { width: 100%; max-width: 380px; }
    .ketemu-subtitle { margin-top: 15px; margin-bottom: 20px; }
    .countdown-box {
        gap: 4px;
        padding: 12px 5px 10px;
        border-radius: 20px;
    }
    .countdown-item strong { font-size: clamp(27px, 8vw, 36px); }
    .countdown-item span { font-size: 9px; }
    .ketemu-date-card { width: 100%; max-width: 330px; }

    .creator-watermark {
        padding: 5px 16px 85px;
    }
    .creator-text {
        font-size: 9px;
        margin-bottom: 6px;
    }
    .creator-links { gap: 6px; }
    .creator-link {
        width: 20px;
        height: 20px;
    }
    .creator-link svg {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 360px) {
    .gallery-slider { height: 290px; min-height: 270px; }
    .doa-section { padding-left: 12px; padding-right: 12px; }
    .doa-message-list { max-height: 350px; }
    .ketemu-section { padding-left: 12px; padding-right: 12px; }
}


/* =====================================================
   KALENDER PRAKTIS — 08 NOVEMBER 2026
   Tidak memakai grid kalender bulanan agar hasil HP/PC konsisten.
===================================================== */
.event-date-card {
    width: min(100%, 360px);
    margin: 28px auto 8px;
    padding: 18px 22px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(233,0,112,.12);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,245,249,.72));
    box-shadow: 0 12px 28px rgba(130,60,90,.10);
}

.event-date-card::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    right: -35px;
    top: -45px;
    border-radius: 50%;
    background: rgba(243,154,10,.13);
}

.event-date-day {
    position: relative;
    z-index: 1;
    flex: 0 0 82px;
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: linear-gradient(145deg, #ed006f, #ff8c13);
    color: #fff;
    font-family: 'Chewy', cursive;
    font-size: 48px;
    line-height: 1;
    box-shadow: 0 10px 20px rgba(233,0,112,.18);
}

.event-date-info {
    position: relative;
    z-index: 1;
    text-align: left;
}

.event-date-month {
    color: #e90070;
    font-family: 'Chewy', cursive;
    font-size: 25px;
    line-height: 1;
    letter-spacing: 1px;
}

.event-date-weekday {
    margin-top: 7px;
    color: #f39a0a;
    font-family: 'Chewy', cursive;
    font-size: 18px;
}

.event-date-year {
    margin-top: 2px;
    color: #777;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.event-date-flower {
    position: absolute;
    right: 16px;
    bottom: 10px;
    color: rgba(233,0,112,.15);
    font-size: 28px;
    transform: rotate(-12deg);
}

@media (max-width: 480px) {
    .event-date-card {
        margin-top: 22px;
        padding: 15px 17px;
        gap: 14px;
        border-radius: 24px;
    }
    .event-date-day {
        flex-basis: 70px;
        width: 70px;
        height: 70px;
        border-radius: 20px;
        font-size: 40px;
    }
    .event-date-month { font-size: 22px; }
    .event-date-weekday { font-size: 16px; }
    .event-date-flower { right: 10px; bottom: 7px; font-size: 23px; }
}

/* =====================================================
   HOME COUPLE HEARTS — VERSI LEBIH RAMAI & HIDUP
===================================================== */
.home-section {
    position: relative;
    overflow: hidden;
    min-height: 760px;
}

.home-section::before {
    width: 360px;
    height: 360px;
    left: -145px;
    top: 90px;
}

.home-section::after {
    content: "✿  ✦  ❀  ✦  ✿";
    right: -45px;
    bottom: 105px;
    font-size: 34px;
    letter-spacing: 12px;
}

.home-content {
    position: relative;
    z-index: 5;
    padding-top: 54px;
}

.home-content .section-title {
    margin-bottom: 4px;
    text-shadow: 0 3px 0 rgba(255,255,255,.55);
}

.couple-heart-gallery {
    position: relative;
    width: 350px;
    height: 355px;
    margin: 4px auto 0;
}

.heart-frame {
    position: absolute;
    width: 150px;
    height: 170px;
    padding: 8px;
    background: linear-gradient(145deg,#f6a51a,#e90070);
    filter: drop-shadow(0 12px 15px rgba(233,0,112,.16));
    z-index: 5;
    animation: coupleHeartFloat 4.8s ease-in-out infinite;
}

.heart-frame::before {
    content: "";
    position: absolute;
    inset: -7px;
    border: 2px dashed rgba(233,0,112,.28);
    clip-path: path("M75 145 C55 125 8 94 8 48 C8 8 57 0 75 31 C93 0 142 8 142 48 C142 94 95 125 75 145Z");
    pointer-events: none;
}

.heart-frame-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

.heart-frame-inner svg {
    width: 100%;
    height: 100%;
    display: block;
}

.heart-frame-man {
    left: 12px;
    top: 58px;
    transform: rotate(-3deg);
}

.heart-frame-woman {
    right: 12px;
    top: 28px;
    transform: rotate(4deg);
    animation-delay: -.9s;
}

.heart-frame-sparkle {
    position: absolute;
    right: -18px;
    top: 8px;
    color: #f4c52d;
    font-size: 25px;
    animation: sparklePulse 1.8s infinite;
}

.heart-frame-man .heart-frame-sparkle {
    left: -17px;
    right: auto;
    top: 45px;
    animation-delay: -.5s;
}

.couple-connector {
    position: absolute;
    left: 50%;
    top: 118px;
    transform: translateX(-50%);
    z-index: 12;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: #e90070;
    font-size: 24px;
    box-shadow: 0 6px 16px rgba(233,0,112,.14);
    animation: connectorBeat 2s ease-in-out infinite;
}

.home-couple-names {
    position: relative;
    z-index: 20;
    margin-top: -18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #e90070;
    font-family: "Chewy", cursive;
    font-size: 27px;
    letter-spacing: 2px;
    text-shadow: 0 2px 0 rgba(255,255,255,.75);
}

.home-couple-names strong {
    color: #f39a0a;
    font-size: 25px;
}

.home-love-caption {
    position: relative;
    z-index: 5;
    margin-top: 5px;
    color: #777;
    font-size: 12px;
    letter-spacing: .6px;
    text-align: center;
}

.home-deco {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.home-deco-flower {
    font-size: 43px;
    color: #f19ac3;
    filter: drop-shadow(0 4px 4px rgba(233,0,112,.10));
    animation: decoBob 4.5s ease-in-out infinite;
}

.home-deco-flower.flower-1 { left: -8px; top: 75px; transform: rotate(-15deg); }
.home-deco-flower.flower-2 { right: -7px; top: 145px; color: #f4c52d; animation-delay: -1.4s; }

.home-deco-star { color:#f4c52d; font-size:30px; animation: sparklePulse 2.2s ease-in-out infinite; }
.home-deco-star.star-1 { left: 35px; top: 28px; }
.home-deco-star.star-2 { right: 40px; top: 8px; animation-delay:-.8s; }
.home-deco-star.star-3 { left: 165px; top: 245px; font-size:22px; animation-delay:-1.3s; }

.home-deco-dot { width:12px; height:12px; border-radius:50%; background:#f19ac3; animation: dotFloat 3.5s ease-in-out infinite; }
.home-deco-dot.dot-1 { left: 65px; top: 215px; }
.home-deco-dot.dot-2 { right: 55px; top: 260px; width:9px; height:9px; background:#f4c52d; animation-delay:-1s; }
.home-deco-dot.dot-3 { right: 90px; top: 48px; width:7px; height:7px; background:#e90070; animation-delay:-1.8s; }

@keyframes coupleHeartFloat {
    0%,100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}
@keyframes connectorBeat {
    0%,100% { scale: 1; }
    50% { scale: 1.12; }
}
@keyframes decoBob {
    0%,100% { translate:0 0 rotate(-5deg); }
    50% { translate:0 -9px rotate(5deg); }
}
@keyframes dotFloat {
    0%,100% { translate:0 0; opacity:.55; }
    50% { translate:0 -12px; opacity:1; }
}

@media (max-width: 390px) {
    .couple-heart-gallery { width: 320px; height: 330px; }
    .heart-frame { width: 136px; height: 154px; }
    .heart-frame-man { left: 8px; top: 62px; }
    .heart-frame-woman { right: 8px; top: 32px; }
    .couple-connector { top: 112px; width:38px; height:38px; font-size:21px; }
    .home-couple-names { margin-top:-12px; font-size:24px; }
    .home-love-caption { font-size:11px; }
    .home-deco-flower { font-size:35px; }
}

/* =====================================================
   HOME — POLAROID COUPLE
===================================================== */
.polaroid-couple-wrapper{
    position:relative;
    width:min(94vw,430px);
    height:330px;
    margin:28px auto 0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:14px;
    animation: coupleFloat 6s ease-in-out infinite;
}

.polaroid-card{
    width:150px;
    background:#fff;
    padding:9px 9px 18px;
    border-radius:3px;
    box-shadow:0 14px 28px rgba(60,35,45,.16);
    position:relative;
    transition:transform .4s ease, box-shadow .4s ease;
}

.polaroid-wanita{ transform:rotate(-6deg) translateY(12px); }
.polaroid-pria{ transform:rotate(6deg) translateY(-8px); }
.polaroid-card:hover{ transform:translateY(-8px) rotate(0deg); box-shadow:0 20px 34px rgba(60,35,45,.2); }

.polaroid-photo{
    width:100%;
    height:185px;
    overflow:hidden;
    background:linear-gradient(135deg,#ffe7ef,#fff3df);
}
.polaroid-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center top;
}
.polaroid-caption{
    margin-top:9px;
    text-align:center;
    font-family:"Chewy",cursive;
    font-size:20px;
    letter-spacing:1.5px;
    white-space:nowrap;
    word-spacing:5px;
    color:#e90070;
}
.polaroid-pria .polaroid-caption{ color:#f39a0a; }
.polaroid-heart{
    position:absolute;
    left:50%;
    top:142px;
    transform:translateX(-50%);
    z-index:5;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    background:#fff;
    border-radius:50%;
    color:#e90070;
    font-size:20px;
    box-shadow:0 7px 18px rgba(233,0,112,.18);
    animation:heartPulse 2s ease-in-out infinite;
}

@keyframes coupleFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
}
@keyframes heartPulse{
    0%,100%{ transform:translateX(-50%) scale(1); }
    50%{ transform:translateX(-50%) scale(1.12); }
}

/* =====================================================
   ACARA — TANGGAL PRAKTIS
===================================================== */
.simple-event-date{
    width:min(88vw,340px);
    margin:28px auto 34px;
    padding:20px 18px 22px;
    text-align:center;
    border-radius:28px;
    background:rgba(255,255,255,.48);
    box-shadow:0 12px 30px rgba(80,40,60,.08);
    position:relative;
    overflow:hidden;
}
.simple-event-date::before,
.simple-event-date::after{
    content:"✦";
    position:absolute;
    font-size:22px;
    opacity:.7;
    animation:sparkleFloat 3s ease-in-out infinite;
}
.simple-event-date::before{left:22px;top:15px;color:#e90070;}
.simple-event-date::after{right:22px;bottom:15px;color:#f39a0a;animation-delay:1s;}
.simple-event-day{
    font-family:"Patrick Hand",cursive;
    font-size:25px;
    letter-spacing:4px;
    color:#e90070;
}
.simple-event-number{
    margin-top:2px;
    font-family:"Chewy",cursive;
    font-size:76px;
    line-height:.9;
    color:#f39a0a;
}
.simple-event-month{
    margin-top:8px;
    font-family:"DM Sans",sans-serif;
    font-size:17px;
    font-weight:800;
    letter-spacing:3px;
    color:#e90070;
}

/* sembunyikan komponen kalender lama */
.acara-section .calendar-box,
.acara-section .acara-month,
.acara-section .acara-year{ display:none !important; }

@media(max-width:520px){
    .polaroid-couple-wrapper{ height:305px; gap:7px; }
    .polaroid-card{ width:137px; padding:8px 8px 15px; }
    .polaroid-photo{ height:170px; }
    .polaroid-wanita{ transform:rotate(-6deg) translateY(10px); }
    .polaroid-pria{ transform:rotate(6deg) translateY(-6px); }
    .polaroid-heart{ top:130px; width:32px; height:32px; font-size:18px; }
    .polaroid-caption{ font-size:18px; }
    .simple-event-date{ margin-top:20px; }
}

/* =====================================================
   DUA MANUSIANYA — POLAROID PORTRAIT FINAL
   Tidak menggunakan frame love / SVG.
===================================================== */
.couple-section .person-card{
    width:min(100%, 370px);
    max-width:370px;
    margin:0 auto 78px;
    text-align:center;
}

.couple-section .person-polaroid{
    position:relative;
    width:286px;
    margin:0 auto 34px;
    padding:12px 12px 24px;
    background:#fffdfb;
    border:1px solid rgba(80,55,45,.10);
    box-shadow:0 18px 34px rgba(73,42,45,.18), 0 4px 10px rgba(73,42,45,.08);
    transform-origin:50% 12%;
    z-index:2;
}

.couple-section .person-polaroid-bride{
    transform:rotate(-4.5deg) translateY(5px);
    animation:personPolaroidFloat 5.8s ease-in-out infinite;
}

.couple-section .person-polaroid-groom{
    transform:rotate(4.5deg) translateY(0);
    animation:personPolaroidFloatGroom 6.2s ease-in-out infinite;
}

.couple-section .polaroid-inner{
    position:relative;
    z-index:3;
    background:#fff;
    padding:0 0 2px;
    border:1px solid rgba(100,70,60,.10);
}

.couple-section .person-polaroid-photo{
    width:100%;
    height:315px;
    overflow:hidden;
    background:#eee;
}

.couple-section .person-polaroid-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center top;
}

.couple-section .person-polaroid-name{
    min-height:54px;
    padding:13px 8px 4px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#e90070;
    font-family:"Chewy",cursive;
    font-size:25px;
    line-height:1.05;
    letter-spacing:1px;
}

.couple-section .person-polaroid-groom .person-polaroid-name{
    color:#f39a0a;
}

/* lembar foto belakang */
.couple-section .polaroid-back{
    position:absolute;
    inset:7px -10px -9px 10px;
    z-index:-1;
    background:#fff;
    border:1px solid rgba(90,60,50,.08);
    box-shadow:0 10px 20px rgba(70,40,45,.10);
    transform:rotate(2.2deg);
}

.couple-section .person-polaroid-groom .polaroid-back{
    transform:rotate(-2.5deg);
    inset:8px 10px -9px -10px;
}

/* paper clip yang lebih halus dan menyatu dengan frame */
.couple-section .paperclip{
    position:absolute;
    width:25px;
    height:83px;
    left:50%;
    top:-38px;
    transform:translateX(-50%) rotate(-2deg);
    border:3px solid #aaa;
    border-radius:18px 18px 14px 14px;
    z-index:8;
    pointer-events:none;
    filter:drop-shadow(0 2px 1px rgba(0,0,0,.10));
}

.couple-section .paperclip::before{
    content:"";
    position:absolute;
    width:15px;
    height:65px;
    left:2px;
    top:7px;
    border:2px solid #c4c4c4;
    border-radius:12px 12px 10px 10px;
    border-bottom-color:transparent;
}

.couple-section .person-polaroid-groom .paperclip{
    transform:translateX(-50%) rotate(3deg);
}

/* nama hanya satu: nama di dalam Polaroid */
.couple-section .person-name{ display:none !important; }

.couple-section .person-parent{
    position:relative;
    z-index:4;
    margin:0 auto 20px;
    max-width:335px;
    color:#888;
    font-family:"DM Sans",sans-serif;
    font-size:16px;
    line-height:1.7;
}

@keyframes personPolaroidFloat{
    0%,100%{ transform:rotate(-4.5deg) translateY(5px); }
    50%{ transform:rotate(-3.2deg) translateY(-5px); }
}

@keyframes personPolaroidFloatGroom{
    0%,100%{ transform:rotate(4.5deg) translateY(0); }
    50%{ transform:rotate(3.2deg) translateY(-6px); }
}

@media(max-width:520px){
    .couple-section .person-card{
        max-width:100%;
        margin-bottom:72px;
    }
    .couple-section .person-polaroid{
        width:274px;
        padding:11px 11px 22px;
    }
    .couple-section .person-polaroid-photo{
        height:300px;
    }
    .couple-section .person-polaroid-name{
        min-height:52px;
        font-size:23px;
    }
    .couple-section .paperclip{
        top:-35px;
        height:76px;
        width:23px;
    }
}


/* =====================================================
   DUA MANUSIANYA — POLAROID PIN PORTRAIT
   Model: foto tempel dengan push-pin di bagian atas
===================================================== */
.couple-section{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:16px;
    row-gap:8px;
    align-items:start;
    justify-items:center;
}

.couple-section .couple-section-title{
    grid-column:1 / -1;
    width:100%;
    margin-bottom:32px;
}

.couple-section .person-card{
    width:100%;
    max-width:205px;
    margin:0;
    text-align:center;
}

/* Kartu utama: seperti foto Polaroid yang ditempel */
.couple-section .person-polaroid{
    position:relative;
    width:100%;
    aspect-ratio:.79;
    margin:0 auto 28px;
    padding:10px 10px 14px;
    background:#fffdf9;
    border:1px solid rgba(90,65,60,.13);
    box-shadow:0 13px 24px rgba(70,43,45,.15), 0 2px 7px rgba(70,43,45,.08);
    transform-origin:50% 7%;
    isolation:isolate;
}

/* lembar belakang tipis, bukan bingkai besar */
.couple-section .polaroid-back{
    position:absolute;
    inset:5px -5px -6px 5px;
    z-index:-1;
    background:#fffefa;
    border:1px solid rgba(90,65,60,.07);
    box-shadow:0 6px 12px rgba(70,43,45,.07);
    transform:rotate(1.7deg);
}

.couple-section .person-polaroid-groom .polaroid-back{
    inset:5px 5px -6px -5px;
    transform:rotate(-1.7deg);
}

/* Foto benar-benar menjadi bagian dari kartu.
   Tidak ada rotate pada img sehingga tidak terlihat tegak sendiri. */
.couple-section .polaroid-inner{
    position:relative;
    width:100%;
    height:100%;
    padding:0;
    background:#fff;
    border:1px solid rgba(90,65,60,.08);
}

.couple-section .person-polaroid-photo{
    width:100%;
    aspect-ratio:1 / 1.03;
    overflow:hidden;
    background:#eee;
}

.couple-section .person-polaroid-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
    transform:none !important;
}

/* Area putih bawah Polaroid */
.couple-section .person-polaroid-name{
    min-height:48px;
    padding:11px 4px 4px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    white-space:normal;
    color:#e90070;
    font-family:"Chewy",cursive;
    font-size:19px;
    line-height:1;
    letter-spacing:.7px;
}

.couple-section .person-polaroid-groom .person-polaroid-name{
    color:#f39a0a;
}

/* =====================================================
   PUSH PIN — menggantikan paperclip
===================================================== */
.couple-section .paperclip{
    position:absolute;
    width:25px;
    height:25px;
    left:50%;
    top:-13px;
    transform:translateX(-50%);
    border:0;
    border-radius:50%;
    background:radial-gradient(circle at 35% 28%, #fff4f6 0 10%, #ff7b9f 24%, #e90070 66%, #bd0059 100%);
    box-shadow:0 3px 5px rgba(100,35,55,.25), inset 0 1px 1px rgba(255,255,255,.7);
    z-index:20;
    pointer-events:none;
}

/* jarum pin */
.couple-section .paperclip::before{
    content:"";
    position:absolute;
    width:2px;
    height:17px;
    left:50%;
    top:20px;
    transform:translateX(-50%);
    background:#777;
    border-radius:2px;
    box-shadow:0 0 1px rgba(0,0,0,.35);
}

/* highlight kecil pada kepala pin */
.couple-section .paperclip::after{
    content:"";
    position:absolute;
    width:6px;
    height:4px;
    left:6px;
    top:5px;
    border-radius:50%;
    background:rgba(255,255,255,.72);
    transform:rotate(-25deg);
}

.couple-section .person-polaroid-groom .paperclip{
    transform:translateX(-50%);
}

/* Hilangkan nama lama di luar Polaroid */
.couple-section .person-name{
    display:none !important;
}

.couple-section .person-parent{
    margin:0 auto 13px;
    max-width:205px;
    color:#888;
    font-family:"DM Sans",sans-serif;
    font-size:12px;
    line-height:1.55;
}

.couple-section .instagram-button{
    min-width:0;
    width:100%;
    max-width:185px;
    height:42px;
    padding:0 10px;
    border-width:2px;
    font-size:13px;
    letter-spacing:.7px;
}

/* Satu sedikit turun, satu sedikit naik.
   Semua isi ikut miring karena rotasi hanya diterapkan ke kartu. */
@keyframes polaroidBridePin{
    0%,100%{transform:rotate(-3deg) translateY(13px)}
    50%{transform:rotate(-3.8deg) translateY(7px)}
}

@keyframes polaroidGroomPin{
    0%,100%{transform:rotate(3deg) translateY(-4px)}
    50%{transform:rotate(3.8deg) translateY(-10px)}
}

.couple-section .person-polaroid-bride{
    transform:rotate(-3deg) translateY(13px);
    animation:polaroidBridePin 6s ease-in-out infinite;
}

.couple-section .person-polaroid-groom{
    transform:rotate(3deg) translateY(-4px);
    animation:polaroidGroomPin 6.4s ease-in-out infinite;
}

@media(max-width:520px){
    .couple-section{
        grid-template-columns:repeat(2,minmax(0,1fr));
        column-gap:8px;
        padding-left:12px;
        padding-right:12px;
    }

    .couple-section .couple-section-title{
        margin-bottom:27px;
    }

    .couple-section .person-card{
        max-width:175px;
    }

    .couple-section .person-polaroid{
        padding:7px 7px 10px;
        margin-bottom:24px;
    }

    .couple-section .person-polaroid-photo{
        aspect-ratio:1 / 1.03;
    }

    .couple-section .person-polaroid-name{
        min-height:39px;
        padding:8px 2px 2px;
        font-size:16px;
        letter-spacing:.4px;
    }

    .couple-section .paperclip{
        width:21px;
        height:21px;
        top:-11px;
    }

    .couple-section .paperclip::before{
        height:14px;
        top:17px;
    }

    .couple-section .paperclip::after{
        width:5px;
        height:3px;
        left:5px;
        top:4px;
    }

    .couple-section .person-parent{
        max-width:165px;
        font-size:10.8px;
        line-height:1.5;
    }

    .couple-section .instagram-button{
        height:38px;
        font-size:11.5px;
    }
}


/* =====================================================
   DUA MANUSIANYA — STACK PORTRAIT
   Wanita di atas, pria baru terlihat setelah scroll.
   Override final agar tidak lagi berdampingan.
===================================================== */
.couple-stack-section {
    display: block !important;
    width: 100%;
    padding-top: 72px;
    padding-bottom: 150px;
    text-align: center;
}

.couple-stack-section .couple-section-title {
    width: 100%;
    margin: 0 0 58px;
}

.couple-stack-section .couple-person-block {
    display: block;
    width: min(88vw, 360px);
    max-width: 360px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}

/* Polaroid portrait yang bersih seperti contoh referensi */
.couple-stack-section .person-polaroid {
    width: min(78vw, 292px);
    aspect-ratio: .76 / 1;
    margin: 0 auto 30px;
    padding: 10px 10px 18px;
    background: #fffdf9;
    border: 1px solid rgba(90,65,60,.12);
    box-shadow: 0 18px 32px rgba(70,43,45,.16), 0 4px 10px rgba(70,43,45,.08);
    transform-origin: 50% 8%;
}

.couple-stack-section .polaroid-inner {
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(90,65,60,.07);
}

.couple-stack-section .person-polaroid-photo {
    width: 100%;
    height: calc(100% - 58px);
    aspect-ratio: auto;
    overflow: hidden;
    background: #eee;
}

.couple-stack-section .person-polaroid-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transform: none !important;
}

.couple-stack-section .person-polaroid-name {
    height: 58px;
    min-height: 58px;
    padding: 9px 6px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e90070;
    font-family: "Chewy", cursive;
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: .7px;
}

.couple-stack-section .person-polaroid-groom .person-polaroid-name {
    color: #f39a0a;
}

/* Pin kecil di tengah atas, tidak mengganggu wajah */
.couple-stack-section .paperclip {
    width: 24px;
    height: 24px;
    top: -13px;
    left: 50%;
    border-radius: 50%;
    z-index: 30;
}

.couple-stack-section .paperclip::before {
    height: 17px;
    top: 20px;
}

/* Lembar belakang sangat tipis */
.couple-stack-section .polaroid-back {
    inset: 7px -8px -8px 8px;
    transform: rotate(2deg);
}

.couple-stack-section .person-polaroid-groom .polaroid-back {
    inset: 7px 8px -8px -8px;
    transform: rotate(-2deg);
}

/* Susunan vertikal: wanita selesai dulu, lalu pria muncul setelah scroll */
.couple-stack-section .bride-card {
    margin-bottom: 155px !important;
}

.couple-stack-section .groom-card {
    margin-top: 0 !important;
    margin-bottom: 70px !important;
}

.couple-stack-section .person-parent {
    max-width: 330px;
    margin: 0 auto 7px;
    color: #777;
    font-size: 15px;
    line-height: 1.7;
}

.couple-stack-section .person-address {
    max-width: 310px;
    margin: 0 auto 18px;
    color: #9a918d;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.couple-stack-section .instagram-button {
    width: min(245px, 82vw);
    height: 52px;
    font-size: 17px;
}

/* =====================================================
   POLAROID FINAL — sederhana seperti foto yang ditempel
   ===================================================== */
.couple-stack-section .person-polaroid {
    position: relative;
    width: min(78vw, 285px);
    aspect-ratio: 0.78 / 1;
    margin: 0 auto 27px;
    padding: 11px 11px 17px;
    background: #fffefa;
    border: 1px solid rgba(95,75,65,.10);
    box-shadow:
        0 18px 30px rgba(74,52,46,.13),
        5px 8px 13px rgba(74,52,46,.08);
    transform-origin: 50% 8%;
    isolation: isolate;
}

.couple-stack-section .polaroid-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(95,75,65,.055);
}

.couple-stack-section .person-polaroid-photo {
    width: 100%;
    height: calc(100% - 58px);
    overflow: hidden;
    background: #eee;
}

.couple-stack-section .person-polaroid-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transform: none !important;
}

.couple-stack-section .person-polaroid-name {
    height: 58px;
    min-height: 58px;
    padding: 7px 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #e90070;
    font-family: "Chewy", cursive;
    font-size: 25px;
    line-height: 1;
    letter-spacing: .6px;
}

.couple-stack-section .person-polaroid-groom .person-polaroid-name {
    color: #f39a0a;
}

/* Pita kertas kecil di tengah atas — bukan paperclip */
.couple-stack-section .paperclip {
    position: absolute;
    top: -14px;
    left: 50%;
    width: 58px;
    height: 24px;
    z-index: 40;
    transform: translateX(-50%) rotate(-2deg);
    border: 1px solid rgba(211,181,96,.18);
    border-radius: 2px;
    background: rgba(250,224,151,.78);
    box-shadow: 0 2px 4px rgba(90,70,40,.07);
}

.couple-stack-section .paperclip::before,
.couple-stack-section .paperclip::after {
    content: none !important;
}

/* lembar kertas belakang tipis */
.couple-stack-section .polaroid-back {
    position: absolute;
    z-index: 0;
    inset: 6px -8px -9px 8px;
    background: #fff;
    border: 1px solid rgba(95,75,65,.06);
    box-shadow: 0 12px 22px rgba(74,52,46,.08);
    transform: rotate(2deg);
}

.couple-stack-section .person-polaroid-groom .polaroid-back {
    inset: 6px 8px -9px -8px;
    transform: rotate(-2deg);
}

/* sedikit miring seperti foto sungguhan */
@keyframes coupleBrideStackFloat {
    0%, 100% { transform: rotate(-3.2deg) translateY(0); }
    50% { transform: rotate(-3.2deg) translateY(-5px); }
}

@keyframes coupleGroomStackFloat {
    0%, 100% { transform: rotate(2.8deg) translateY(0); }
    50% { transform: rotate(2.8deg) translateY(-5px); }
}

.couple-stack-section .person-polaroid-bride {
    transform: rotate(-3.2deg);
    animation: coupleBrideStackFloat 6.5s ease-in-out infinite;
}

.couple-stack-section .person-polaroid-groom {
    transform: rotate(2.8deg);
    animation: coupleGroomStackFloat 7s ease-in-out infinite;
}

@media (max-width: 520px) {
    .couple-stack-section {
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 64px;
    }

    .couple-stack-section .couple-section-title {
        margin-bottom: 48px;
        font-size: 29px;
    }

    .couple-stack-section .couple-person-block {
        width: 92vw;
        max-width: 360px;
    }

    .couple-stack-section .person-polaroid {
        width: min(78vw, 292px);
        padding: 9px 9px 16px;
        margin-bottom: 28px;
    }

    .couple-stack-section .person-polaroid-photo {
        height: calc(100% - 54px);
    }

    .couple-stack-section .person-polaroid-name {
        height: 54px;
        min-height: 54px;
        font-size: 22px;
    }

    .couple-stack-section .bride-card {
        margin-bottom: 150px !important;
    }

    .couple-stack-section .person-parent {
        max-width: 330px;
        font-size: 14px;
        line-height: 1.65;
    }

    .couple-stack-section .person-address {
        font-size: 12.5px;
        margin-bottom: 17px;
    }
}

/* =====================================================
   V7 POLISH — POLAROID + LETTER REVEAL + GALLERY LIGHTBOX
===================================================== */

/* Foto di dalam Polaroid mengikuti komposisi portrait, tanpa
   membuat wajah terasa terlalu turun/terpotong. */
.couple-stack-section .person-polaroid-bride .person-polaroid-photo img {
    object-position: 50% 30% !important;
}

.couple-stack-section .person-polaroid-groom .person-polaroid-photo img {
    object-position: 50% 32% !important;
}

/* Polaroid tidak boleh kehilangan kemiringannya saat scroll-reveal. */
.couple-stack-section .person-polaroid.scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

/* =====================================================
   EFEK TEKS PER HURUF — seperti tulisan sedang masuk
===================================================== */
.letter-reveal,
.section-title,
.orange-title,
.acara-title,
.event-title,
.agenda-title,
.agenda-name,
.dresscode-title,
.dress-color-title,
.gift-title,
.doa-small-title,
.doa-title,
.ketemu-small-title,
.simple-event-day,
.simple-event-month {
    --letter-speed: 0.18s;
}

.letter-reveal .typing-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px) rotate(5deg) scale(.72);
    filter: blur(5px);
    will-change: transform, opacity, filter;
}

.is-typing > .typing-letter {
    animation: typingLetterIn .92s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: calc(var(--letter-index) * var(--letter-speed));
}

@keyframes typingLetterIn {
    0% {
        opacity: 0;
        transform: translateY(18px) rotate(5deg) scale(.72);
        filter: blur(5px);
    }
    55% {
        opacity: 1;
        transform: translateY(-4px) rotate(-2deg) scale(1.08);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
        filter: blur(0);
    }
}

/* Garis kecil seperti tinta yang sedang ditarik */
.letter-reveal.is-typing::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    margin: 8px auto 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #e90070, #f39a0a);
    animation: typingUnderline 1.05s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: calc(var(--letter-count) * var(--letter-speed) + .1s);
}

@keyframes typingUnderline {
    from { width: 0; opacity: 0; }
    to { width: min(130px, 70%); opacity: .75; }
}


/* Versi lebih lambat: setiap huruf masuk satu per satu, dengan sedikit jeda
   sehingga pengunjung benar-benar sempat melihat proses tulisnya. */
.typing-letter {
    backface-visibility: hidden;
}

/* FIX MOBILE TEXT WRAPPING
   Spasi sekarang dipertahankan sebagai text node oleh JS, sehingga paragraf
   tetap boleh turun baris normal. Aturan ini mencegah efek huruf membuat
   kontainer melebar ke kanan saat animasi berlangsung. */
.letter-reveal,
.letter-reveal p,
.guest-description,
.agenda-quote p,
.ketemu-message,
.doa-subtitle,
.doa-note,
.gift-modal-thanks {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    max-width: 100%;
}

.typing-letter {
    max-width: 100%;
}

/* =====================================================
   FOTO KENANGAN TAMBAHAN
   - 6 foto total
   - beberapa foto dibuat lebih menonjol
   - foto terakhir full-width landscape
===================================================== */
.gallery-more-title {
    margin: 34px 0 14px;
    color: #e90070;
    font-family: "Chewy", cursive;
    font-size: 21px;
    letter-spacing: 1px;
}

.gallery-more-grid {
    width: min(94vw, 350px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.gallery-more-item {
    position: relative;
    display: block;
    padding: 5px;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 9px 22px rgba(70,43,45,.12);
    cursor: pointer;
    overflow: hidden;
    transform: rotate(var(--thumb-rotate, 0deg));
    transition: transform .28s ease, box-shadow .28s ease;
}

.gallery-more-item:nth-child(1) { --thumb-rotate: -2deg; }
.gallery-more-item:nth-child(2) { --thumb-rotate: 2deg; }
.gallery-more-item:nth-child(3) { --thumb-rotate: 1.5deg; }
.gallery-more-item:nth-child(4) { --thumb-rotate: -2.5deg; }

/* Foto kelima dibuat sedikit lebih besar agar layout tidak monoton. */
.gallery-more-item:nth-child(5) {
    grid-column: 1 / -1;
}

.gallery-more-item:nth-child(5) img {
    aspect-ratio: 16 / 10;
}

/* Foto terakhir: landscape + paling besar. */
.gallery-more-item.gallery-more-landscape {
    grid-column: 1 / -1;
    padding: 6px;
    border-radius: 22px;
}

.gallery-more-item.gallery-more-landscape img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 17px;
}

.gallery-more-item:hover,
.gallery-more-item:focus-visible {
    transform: translateY(-5px) rotate(0deg) scale(1.02);
    box-shadow: 0 15px 28px rgba(70,43,45,.18);
    outline: none;
}

.gallery-more-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.08;
    object-fit: cover;
    border-radius: 14px;
}

/* =====================================================
   LIGHTBOX / PREVIEW FOTO
===================================================== */
.gallery-slide img,
.gallery-more-item img {
    cursor: zoom-in;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(38, 25, 31, .84);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}

.gallery-lightbox.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gallery-lightbox-content {
    position: relative;
    width: min(88vw, 560px);
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(.9) translateY(15px);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
}

.gallery-lightbox.show .gallery-lightbox-content {
    transform: scale(1) translateY(0);
}

.gallery-lightbox-content img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 82vh;
    border: 9px solid #fffaf6;
    border-radius: 8px;
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
    object-fit: contain;
    background: #fff;
}

.gallery-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #fff7f3;
    color: #e90070;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.gallery-lightbox-arrow {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border: 0;
    border-radius: 50%;
    background: #fff7f3;
    color: #e90070;
    font-size: 38px;
    line-height: 42px;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.gallery-lightbox-prev { left: 20px; }
.gallery-lightbox-next { right: 20px; }

.gallery-lightbox-counter {
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

body.gallery-lock {
    overflow: hidden !important;
}

@media (max-width: 600px) {
    .gallery-more-grid {
        width: min(92vw, 350px);
        gap: 10px;
    }

    .gallery-lightbox {
        padding: 14px;
    }

    .gallery-lightbox-content {
        width: 90vw;
    }

    .gallery-lightbox-close {
        top: 12px;
        right: 12px;
        width: 43px;
        height: 43px;
        font-size: 28px;
    }

    .gallery-lightbox-arrow {
        width: 42px;
        height: 42px;
        margin-top: -21px;
        font-size: 32px;
        line-height: 36px;
    }

    .gallery-lightbox-prev { left: 7px; }
    .gallery-lightbox-next { right: 7px; }
}


/* =====================================================
   LIGHTBOX FIX V8 — SELALU CENTER DI VIEWPORT HP
   ===================================================== */
.gallery-lightbox {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    padding: max(16px, env(safe-area-inset-top))
             max(14px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom))
             max(14px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    z-index: 99999 !important;
}

.gallery-lightbox-content {
    position: relative !important;
    width: min(86vw, 560px) !important;
    max-width: calc(100vw - 92px) !important;
    max-height: calc(100dvh - 116px) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.gallery-lightbox-content img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 128px) !important;
    object-fit: contain !important;
}

.gallery-lightbox-close {
    position: fixed !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
}

.gallery-lightbox-arrow {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

.gallery-lightbox-prev {
    left: max(8px, env(safe-area-inset-left)) !important;
}

.gallery-lightbox-next {
    right: max(8px, env(safe-area-inset-right)) !important;
}

.gallery-lightbox-counter {
    position: fixed !important;
    left: 50% !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
}

@media (max-width: 600px) {
    .gallery-lightbox-content {
        width: calc(100vw - 82px) !important;
        max-width: calc(100vw - 82px) !important;
        max-height: calc(100dvh - 112px) !important;
    }

    .gallery-lightbox-content img {
        max-width: calc(100vw - 82px) !important;
        max-height: calc(100dvh - 122px) !important;
        border-width: 6px !important;
        border-radius: 7px !important;
    }

    .gallery-lightbox-close {
        width: 42px !important;
        height: 42px !important;
        font-size: 28px !important;
    }

    .gallery-lightbox-arrow {
        width: 40px !important;
        height: 40px !important;
        font-size: 31px !important;
        line-height: 36px !important;
    }
}

/* =====================================================
   V12 — GLOBAL TEXT TYPEWRITER
   Semua teks masuk seperti sedang ditulis, per huruf.
===================================================== */
.letter-reveal {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
}

.letter-reveal .typing-letter {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(.78) rotate(3deg);
    filter: blur(4px);
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

.letter-reveal.is-typing .typing-letter {
    animation: v12LetterWrite .82s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: calc(var(--letter-index) * var(--letter-speed));
}

@keyframes v12LetterWrite {
    0% {
        opacity: 0;
        transform: translate3d(0, 16px, 0) scale(.78) rotate(3deg);
        filter: blur(4px);
    }
    52% {
        opacity: 1;
        transform: translate3d(0, -3px, 0) scale(1.06) rotate(-1deg);
        filter: blur(0);
    }
    78% {
        transform: translate3d(0, 1px, 0) scale(.985) rotate(0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0);
        filter: blur(0);
    }
}

/* =====================================================
   V12 — GALERI AUTO SLIDE FADE HALUS
   Tidak lagi zoom/rotate saat berganti foto.
===================================================== */
.gallery-track {
    position: relative;
    overflow: hidden !important;
}

.gallery-slide,
.gallery-slide.active {
    transition:
        opacity 1.15s cubic-bezier(.4,0,.2,1),
        transform 1.15s cubic-bezier(.4,0,.2,1) !important;
}

.gallery-slide {
    opacity: 0 !important;
    transform: scale(.995) !important;
    visibility: hidden;
    pointer-events: none !important;
    z-index: 1;
}

.gallery-slide.active {
    opacity: 1 !important;
    transform: scale(1) !important;
    visibility: visible;
    pointer-events: auto !important;
    z-index: 5;
}

/* Saat loading awal, hindari kilatan foto sebelum fade pertama. */
.gallery-slide img {
    backface-visibility: hidden;
    transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
    .letter-reveal.is-typing .typing-letter,
    .gallery-slide,
    .gallery-slide.active {
        animation: none !important;
        transition: opacity .25s ease !important;
        transform: none !important;
    }
}

/* =====================================================
   FINAL POLISH — TEXT & BUTTON
===================================================== */

/* Hilangkan garis otomatis dari efek ketik */
.letter-reveal.is-typing::after {
    display: none !important;
}

/* Animasi huruf lebih cepat tetapi tetap lembut */
.letter-reveal,
.section-title,
.orange-title,
.acara-title,
.event-title,
.agenda-title,
.agenda-name,
.dresscode-title,
.dress-color-title,
.gift-title,
.doa-small-title,
.doa-title,
.ketemu-small-title,
.simple-event-day,
.simple-event-month {
    --letter-speed: 0.075s !important;
}

.letter-reveal .typing-letter {
    animation-duration: .68s !important;
}

/* =====================================================
   TOMBOL TULIS UCAPAN — PRESISI
===================================================== */

.doa-write-button {
    width: min(88%, 300px) !important;
    min-height: 56px;
    height: 56px;
    margin: 22px auto 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px;
    padding: 0 22px !important;

    text-align: center !important;
    line-height: 1 !important;
}

.doa-write-button span {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* HP */
@media (max-width: 600px) {
    .doa-write-button {
        width: calc(100% - 28px) !important;
        max-width: 300px;
        height: 54px;
        min-height: 54px;
        font-size: 17px;
    }
}
/* =====================================================
   FINAL MOBILE FIX + PERFORMANCE PACK
   - teks tidak lagi memotong kata di tengah
   - konten tetap presisi di layar kecil
   - beban awal HP diringankan tanpa menghilangkan gaya utama
===================================================== */

/* Kata tetap utuh, huruf di dalamnya tetap dianimasikan satu per satu. */
.typing-word {
    display: inline-block;
    white-space: nowrap !important;
}

.typing-letter {
    display: inline-block;
    vertical-align: baseline;
    max-width: none !important;
}

/* Jangan biarkan paragraf melebar keluar dari viewport. */
.ketemu-content,
.doa-content,
.agenda-section,
.couple-stack-section,
.couple-stack-section .couple-person-block,
.couple-stack-section .person-parent,
.couple-stack-section .person-address {
    box-sizing: border-box;
    max-width: 100%;
}

.ketemu-subtitle,
.ketemu-message,
.doa-subtitle,
.agenda-quote p,
.couple-stack-section .person-parent,
.couple-stack-section .person-address {
    width: 100%;
    box-sizing: border-box;
    padding-left: 6px;
    padding-right: 6px;
    overflow-wrap: normal;
    word-break: normal;
}

/* Pastikan kartu polaroid tidak mendorong halaman horizontal. */
.couple-stack-section .person-polaroid,
.couple-stack-section .person-polaroid-photo {
    max-width: 100%;
    box-sizing: border-box;
}

/* Kurangi biaya render dekorasi blur/backdrop di HP. */
@media (max-width: 600px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .ketemu-section {
        padding-left: 14px;
        padding-right: 14px;
    }

    .ketemu-content {
        width: 100%;
        max-width: 360px;
    }

    .ketemu-subtitle {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 4px;
        padding-right: 4px;
    }

    .doa-content {
        width: 100%;
        max-width: 360px;
    }

    .doa-subtitle {
        width: min(100%, 310px);
        padding-left: 4px;
        padding-right: 4px;
    }

    .couple-stack-section .couple-person-block {
        width: min(92vw, 360px);
    }

    .couple-stack-section .person-parent {
        width: min(100%, 330px);
        padding-left: 8px;
        padding-right: 8px;
        font-size: 14px;
        line-height: 1.65;
    }

    .couple-stack-section .person-address {
        width: min(100%, 310px);
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Dekorasi yang hanya bergerak tidak perlu GPU terus-menerus. */
    .agenda-section::before,
    .agenda-section::after,
    .couple-section::before,
    .couple-section::after,
    .ketemu-flower,
    .ketemu-sparkle,
    .ketemu-orb {
        will-change: auto;
    }

    /* Blur backdrop adalah salah satu efek mahal di HP. Tetap cantik,
       tetapi lebih ringan daripada blur besar. */
    .countdown-box {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Browser modern dapat melewati layout/pain section yang masih jauh di bawah.
   Intrinsic size menjaga scrollbar tetap stabil. */
@supports (content-visibility: auto) {
    .acara-section,
    .agenda-section,
    .couple-stack-section,
    .gallery-section,
    .dresscode-section,
    .gift-section,
    .doa-section,
    .ketemu-section {
        content-visibility: auto;
        contain-intrinsic-size: 700px;
    }
}


/* =====================================================
   GALLERY LOVE DECORATION — VARIASI WARNA
   Love kecil menempel di bagian bawah bingkai foto.
===================================================== */
.gallery-frame-hearts {
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 78px;
    height: 38px;
    transform: translateX(-50%);
    z-index: 25;
    pointer-events: none;
}

.gallery-heart {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-family: Arial, sans-serif;
    font-size: 27px;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(60, 35, 45, .12);
    animation: galleryHeartFloat 3.2s ease-in-out infinite;
}

.gallery-heart:first-child {
    left: 10px;
    transform: rotate(-8deg);
}

.gallery-heart:last-child {
    right: 10px;
    transform: rotate(8deg);
    animation-delay: -.9s;
}

.heart-pink   { color: #e96aa8; }
.heart-green  { color: #9eaf73; }
.heart-blue   { color: #72a9c9; }
.heart-yellow { color: #f0ca67; }
.heart-purple { color: #a78bc5; }
.heart-orange { color: #f1a052; }

@keyframes galleryHeartFloat {
    0%, 100% { transform: translateY(0) rotate(-6deg) scale(1); }
    50%      { transform: translateY(-3px) rotate(4deg) scale(1.06); }
}

.gallery-heart:last-child {
    animation-name: galleryHeartFloatRight;
}

@keyframes galleryHeartFloatRight {
    0%, 100% { transform: translateY(0) rotate(7deg) scale(1); }
    50%      { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
}

@media (max-width: 600px) {
    .gallery-frame-hearts {
        width: 72px;
        bottom: -2px;
    }

    .gallery-heart {
        width: 25px;
        height: 25px;
        font-size: 24px;
    }
}

/* FINAL GALLERY SIZE OVERRIDES */
.gallery-more-item:nth-child(5) img {
    aspect-ratio: 16 / 10;
}
.gallery-more-item.gallery-more-landscape img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 17px;
}


/* =========================================================
   FINAL PHOTO ENTRY + GLOBAL LOVE BUBBLES
   Dibuat ringan untuk HP. Animasi foto benar-benar dijalankan
   pada slide aktif; tidak lagi dibatalkan oleh override lama.
========================================================= */

/* LOVE BUBBLES — selalu berada di layer paling depan */
.float-layer,
.sparkle-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.float-layer { z-index: 60; }
.sparkle-layer { z-index: 59; }

.float-heart {
    position: absolute;
    bottom: -70px;
    left: var(--left);
    width: var(--size);
    height: var(--size);
    opacity: var(--opacity);
    animation: imamLoveFloat var(--duration) linear var(--delay) infinite;
    will-change: transform, opacity;
    transform: translate3d(0,0,0);
}

.float-heart::before {
    content: "♥";
    display: block;
    color: #ec0870;
    font-size: var(--size);
    line-height: 1;
    text-shadow: 0 2px 0 rgba(255,255,255,.55),
                 0 6px 12px rgba(199,49,108,.12);
}

.float-heart.bubble {
    border: 1.5px solid rgba(255,255,255,.88);
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,.9) 0 7%, transparent 8%),
        radial-gradient(circle at 68% 72%, rgba(255,145,191,.16), rgba(255,255,255,.05) 58%, rgba(255,255,255,.18));
    box-shadow:
        inset 2px 3px 7px rgba(255,255,255,.72),
        0 4px 16px rgba(255,95,155,.10);
}

.float-heart.bubble::before {
    content: "♡";
    color: rgba(236,8,112,.52);
    text-align: center;
    text-shadow: none;
}

.float-heart.bubble::after {
    content: "";
    position: absolute;
    width: 22%;
    height: 22%;
    left: 18%;
    top: 15%;
    border-radius: 50%;
    background: rgba(255,255,255,.7);
}

@keyframes imamLoveFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(.82) rotate(-5deg);
        opacity: 0;
    }
    10% { opacity: var(--opacity); }
    45% {
        transform: translate3d(calc(var(--drift) * .45), -48vh, 0) scale(1) rotate(4deg);
    }
    78% {
        transform: translate3d(calc(var(--drift) * -.35), -82vh, 0) scale(.96) rotate(-3deg);
    }
    100% {
        transform: translate3d(var(--drift), -112vh, 0) scale(.88) rotate(6deg);
        opacity: 0;
    }
}

.sparkle {
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: var(--size);
    height: var(--size);
    opacity: var(--opacity);
    animation: imamTwinkle var(--duration) ease-in-out var(--delay) infinite;
}
.sparkle::before,
.sparkle::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 99px;
}
.sparkle::before { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); }
.sparkle::after { height: 2px; width: 100%; top: 50%; transform: translateY(-50%); }

@keyframes imamTwinkle {
    0%,100% { opacity: .15; transform: scale(.7); }
    50% { opacity: var(--opacity); transform: scale(1); }
}

/* FOTO SLIDER — entry nyata setiap kali foto berganti */
.gallery-slide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, 22px, 0) scale(.94) rotate(-1.2deg) !important;
    z-index: 1 !important;
    transition: opacity .18s ease, visibility .18s ease !important;
}

.gallery-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 5 !important;
}

/* JS menambahkan class ini setiap slide menjadi aktif.
   Karena class dihapus/re-add, animasi selalu dimainkan ulang. */
.gallery-slide.photo-enter {
    animation: galleryPhotoEnter .82s cubic-bezier(.18,.78,.2,1) both !important;
}

@keyframes galleryPhotoEnter {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale(.90) rotate(-2deg);
        filter: blur(3px);
    }
    55% {
        opacity: 1;
        transform: translate3d(0, -3px, 0) scale(1.015) rotate(.35deg);
        filter: blur(.5px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0);
        filter: blur(0);
    }
}

/* Foto kenangan tambahan juga masuk satu per satu saat discroll. */
.gallery-more-item {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.94) rotate(-1deg);
    filter: blur(3px);
    will-change: opacity, transform, filter;
}
.gallery-more-item.photo-grid-visible {
    animation: galleryGridPhotoEnter .72s cubic-bezier(.18,.78,.2,1) both;
    animation-delay: var(--photo-delay, 0ms);
}

@keyframes galleryGridPhotoEnter {
    0% { opacity: 0; transform: translate3d(0,34px,0) scale(.94) rotate(-1deg); filter: blur(3px); }
    65% { opacity: 1; transform: translate3d(0,-4px,0) scale(1.015) rotate(.25deg); filter: blur(.5px); }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1) rotate(0); filter: blur(0); }
}


/* =====================================================
   OPEN INVITATION — TRANSISI MASUK KE HALAMAN HOME
===================================================== */
.home-section.opening-active .home-content > *,
.home-section.opening-active .home-love-caption,
.home-section.opening-active .polaroid-couple-wrapper {
    animation: homeOpeningReveal .95s cubic-bezier(.16,.84,.24,1) both;
}

.home-section.opening-active .home-content .section-title { animation-delay: .05s; }
.home-section.opening-active .polaroid-couple-wrapper { animation-delay: .18s; }
.home-section.opening-active .home-couple-names { animation-delay: .38s; }
.home-section.opening-active .home-love-caption { animation-delay: .52s; }
.home-section.opening-active .wedding-date { animation-delay: .62s; }

@keyframes homeOpeningReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 48px, 0) scale(.90) rotateX(7deg);
        filter: blur(7px);
    }
    55% {
        opacity: 1;
        transform: translate3d(0, -7px, 0) scale(1.025) rotateX(0);
        filter: blur(.7px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotateX(0);
        filter: blur(0);
    }
}

.home-section.opening-active .wave-line {
    animation: waveArrival .9s cubic-bezier(.16,.84,.24,1) .35s both;
}

@keyframes waveArrival {
    from { opacity: 0; transform: translate3d(0, 24px, 0) scaleX(.86); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .wave-layer,
    .home-section.opening-active .home-content > *,
    .home-section.opening-active .home-love-caption,
    .home-section.opening-active .polaroid-couple-wrapper,
    .home-section.opening-active .wave-line {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .float-heart,
    .sparkle,
    .gallery-slide.photo-enter,
    .gallery-more-item.photo-grid-visible {
        animation: none !important;
    }
    .gallery-slide,
    .gallery-slide.active,
    .gallery-more-item {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
    }
}

/* =====================================================
   FINAL FIX — POLAROID MASUK DARI KIRI / KANAN
   ===================================================== */
.home-section.opening-active .polaroid-couple-wrapper {
    animation: homePolaroidWrapperReveal .9s cubic-bezier(.18,.8,.2,1) .08s both !important;
}

.home-section.opening-active .polaroid-card {
    animation-duration: .95s;
    animation-timing-function: cubic-bezier(.18,.8,.2,1);
    animation-fill-mode: both;
    will-change: transform, opacity, filter;
}

.home-section.opening-active .polaroid-pria {
    animation-name: polaroidEnterFromLeft;
    animation-delay: .16s;
}

.home-section.opening-active .polaroid-wanita {
    animation-name: polaroidEnterFromRight;
    animation-delay: .28s;
}

.home-section.opening-active .polaroid-heart {
    animation:
        polaroidHeartEnter .65s cubic-bezier(.18,.8,.2,1) .48s both,
        heartPulse 2s ease-in-out 1.2s infinite;
}

@keyframes homePolaroidWrapperReveal {
    0% { opacity: 1; transform: translate3d(0,18px,0) scale(.97); }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

@keyframes polaroidEnterFromLeft {
    0% {
        opacity: 0;
        transform: translate3d(-115px, 18px, 0) rotate(-15deg) scale(.82);
        filter: blur(5px);
    }
    65% {
        opacity: 1;
        transform: translate3d(7px,-4px,0) rotate(8deg) scale(1.03);
        filter: blur(.4px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0,-8px,0) rotate(6deg) scale(1);
        filter: blur(0);
    }
}

@keyframes polaroidEnterFromRight {
    0% {
        opacity: 0;
        transform: translate3d(115px, 22px, 0) rotate(15deg) scale(.82);
        filter: blur(5px);
    }
    65% {
        opacity: 1;
        transform: translate3d(-7px,-2px,0) rotate(-8deg) scale(1.03);
        filter: blur(.4px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0,12px,0) rotate(-6deg) scale(1);
        filter: blur(0);
    }
}

@keyframes polaroidHeartEnter {
    0% { opacity: 0; transform: translate3d(-50%, 12px,0) scale(.45); }
    70% { opacity: 1; transform: translate3d(-50%, -2px,0) scale(1.12); }
    100% { opacity: 1; transform: translate3d(-50%, 0,0) scale(1); }
}

/* =====================================================
   FINAL FIX — NAVIGASI BAWAH SELALU TERLIHAT
   ===================================================== */
.bottom-nav {
    position: fixed !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    width: min(100vw, 430px) !important;
    height: 70px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    background: rgba(255, 252, 249, .97) !important;
    border-top: 1px solid rgba(233,0,112,.12) !important;
    box-shadow: 0 -8px 24px rgba(70,40,45,.10) !important;
    z-index: 120 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.bottom-nav .nav-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-decoration: none !important;
    color: #99918d !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    position: relative !important;
    z-index: 121 !important;
}

.bottom-nav .nav-item.active {
    color: #e90070 !important;
}

.bottom-nav .nav-icon {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 23px !important;
    line-height: 1 !important;
}

@media (max-width: 600px) {
    .bottom-nav {
        height: 66px !important;
        width: 100vw !important;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Love bubble tetap di depan foto, tetapi navbar selalu di atasnya. */
.float-layer { z-index: 110 !important; }
.sparkle-layer { z-index: 109 !important; }