/* =====================================================
   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-line {

    width: 100%;

    height: 60px;

    margin-top: 48px;

}


.wave-line svg {

    width: 100%;

    height: 100%;

}


.wave-line path {

    fill: none;

    stroke: #e90070;

    stroke-width: 8;

    stroke-linecap: round;

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


/* =====================================================
   PINK BLOB FLOWER
===================================================== */

.blob-flower {

    position: absolute;

    left: -20px;

    bottom: 280px;

    width: 85px;

    height: 85px;

    animation:
        blobFloat 5s ease-in-out infinite,
        blobRotate 12s linear infinite;

}


.blob-flower span {

    position: absolute;

    width: 42px;

    height: 42px;

    background: #f19ac3;

    border-radius: 50%;

    left: 22px;

    top: 22px;

}


.blob-flower span:nth-child(1) {
    transform: translateY(-25px);
}

.blob-flower span:nth-child(2) {
    transform: translateX(25px);
}

.blob-flower span:nth-child(3) {
    transform: translateY(25px);
}

.blob-flower span:nth-child(4) {
    transform: translateX(-25px);
}

.blob-flower span:nth-child(5) {

    width: 25px;

    height: 25px;

    left: 31px;

    top: 31px;

    background: #f19ac3;

}


/* =====================================================
   SPARKLES
===================================================== */

.home-sparkle {

    position: absolute;

    color: #f4c52d;

    font-size: 30px;

    animation:
        sparklePulse 2.3s infinite,
        sparkleRotate 6s linear infinite;

}


.sparkle-a {

    left: 64px;

    top: 125px;

}


.sparkle-b {

    right: 66px;

    top: 280px;

}


.tiny-sparkle {

    position: absolute;

    right: 85px;

    bottom: 360px;

    color: #f4c52d;

    font-size: 22px;

    animation: sparklePulse 2s infinite;

}


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

.guest-section {

    background: #fdf1e8;

    display: flex;

    align-items: flex-start;

    justify-content: center;

}


.section-inner {

    width: min(88%, 350px);

    padding-top: 50px;

    text-align: center;

}


.orange-title {

    color: #f39a00;

    font-family: "Chewy", cursive;

    font-size: 29px;

    letter-spacing: 1px;

    animation: titleFloat 4s infinite;
}


.guest-description {

    margin-top: 28px;

    color: #4d4d4d;

    font-size: 17px;

    line-height: 1.8;

}


.floating-heart {

    position: absolute;

    right: 35px;

    bottom: 170px;

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #e90070;

    color: white;

    font-size: 26px;

    box-shadow: 0 8px 25px rgba(233,0,112,.22);

    animation:
        heartFloat 3s ease-in-out infinite,
        heartBeat 2s infinite;
}


/* =====================================================
   PLACEHOLDER
===================================================== */

.placeholder-section {

    min-height: 100svh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 40px;

    background: #fff8f3;

}


.placeholder-section h2 {

    font-family: "Chewy", cursive;

    font-size: 32px;

    color: #e90070;

}


.placeholder-section p {

    max-width: 300px;

    margin-top: 15px;

    color: #777;

    line-height: 1.7;

}


/* =====================================================
   MUSIC BUTTON
===================================================== */

.music-button {

    position: fixed;

    z-index: 900;

    right: 22px;

    bottom: 78px;

    width: 58px;

    height: 58px;

    border: none;

    border-radius: 50%;

    background: #e90070;

    color: white;

    font-size: 27px;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(0,0,0,.18);

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

}


.music-button.playing {

    animation:
        musicFloat 3s ease-in-out infinite,
        musicPulse 1.6s ease-in-out infinite;

}


/* =====================================================
   BOTTOM NAV
===================================================== */

.bottom-nav {

    position: fixed;

    z-index: 800;

    left: 50%;

    bottom: 0;

    transform: translateX(-50%);

    width: min(100%, 430px);

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    background: rgba(255,250,247,.97);

    border-top: 1px solid #f3b6ce;

    box-shadow:
        0 -5px 20px rgba(0,0,0,.04);

    backdrop-filter: blur(10px);

}


.nav-item {

    flex: 1;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    color: #a39a96;

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;

    transition: .3s;

}


.nav-icon {

    font-size: 22px;

    line-height: 1;

}


.nav-item.active {

    color: #e90070;

}


.nav-item.active .nav-icon {

    animation:
        navBounce .7s ease;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes fadeDown {

    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes gentleFloat {

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

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

}


@keyframes guestFloat {

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

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

}


@keyframes buttonPulse {

    0%,100% {
        box-shadow:
            0 0 0 6px #fdf1e8,
            0 0 0 8px #f5b1ce;
    }

    50% {
        box-shadow:
            0 0 0 6px #fdf1e8,
            0 0 0 12px rgba(245,177,206,.45),
            0 10px 30px rgba(233,0,112,.12);
    }

}


@keyframes heartBeat {

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

    15% {
        transform: scale(1.25);
    }

    30% {
        transform: scale(1);
    }

}


@keyframes flowerFloat {

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

    50% {
        transform: translateY(12px);
    }

}


@keyframes flowerRotate {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }

}


@keyframes flowerRotateReverse {

    from {
        rotate: 0deg;
    }

    to {
        rotate: -360deg;
    }

}


@keyframes sparklePulse {

    0%,100% {
        opacity: .5;
        transform: scale(.8);
    }

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

}


@keyframes sparkleRotate {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }

}


@keyframes spinLittle {

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

    50% {
        transform: rotate(8deg);
    }

}


@keyframes littleFlowerBounce {

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

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

}


@keyframes littleFlowerSpin {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }

}


@keyframes titleFloat {

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

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

}


@keyframes heartFloat {

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

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

}



@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 {
    pointer-events: auto;
    cursor: pointer;
}

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

}


/* WULAN dan PAKSEH */

.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;

}


.guest-floating-heart {
    position: absolute;

    right: 18px;

    bottom: 15px;

    width: 58px;
    height: 58px;

    display: flex;

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

    background: #e90070;

    color: white;

    border-radius: 50%;

    font-size: 25px;

    box-shadow:
        0 8px 22px
        rgba(233,0,112,.25);

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

}


@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 58px;
    }
    .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;
    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; }
}