* {
            box-sizing: border-box;
        }


        html {
            scroll-behavior: auto;
            overflow-x: hidden;
            overflow-x: clip;
            overflow-anchor: none;
        }


        body {

            margin: 0;

            max-width: 100%;

            background:
                #FAF9F6;

            color:
                #1A1A1A;

            font-family:
                "Inter",
                sans-serif;

            overflow-x:
                clip;

        }


        /* =================================================
           VARIABLES
        ================================================= */

        :root {

            --gold:
                #D4AF37;

            --ivory:
                #FAF9F6;

            --ink:
                #1A1A1A;

            --ease:
                cubic-bezier(.16,
                    1,
                    .3,
                    1);

        }


        /* =================================================
           COMMON
        ================================================= */

        .serif {

            font-family:
                "Playfair Display",
                serif;

        }


        .script {

            font-family:
                "Great Vibes",
                cursive;

        }


        .gold {

            color:
                var(--gold);

        }


        .gold-line {

            width:
                55px;

            height:
                1px;

            background:
                var(--gold);

        }


        .section {

            position:
                relative;

            min-height:
                100vh;

            min-height:
                100svh;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            overflow:
                hidden;

        }


        /* =================================================
           GLOBAL SCROLL PROGRESS
        ================================================= */

        #scrollProgress {

            position:
                fixed;

            top:
                0;

            left:
                0;

            width:
                0%;

            height:
                2px;

            background:
                var(--gold);

            z-index:
                9999;

            transform-origin:
                left;

        }


        /* =================================================
           SIDE NAV
        ================================================= */

        .side-navigation {

            position:
                fixed;

            right:
                25px;

            top:
                50%;

            transform:
                translateY(-50%);

            display:
                flex;

            flex-direction:
                column;

            gap:
                15px;

            z-index:
                500;

        }


        .nav-item {

            width:
                6px;

            height:
                6px;

            border-radius:
                50%;

            background:
                rgba(26,
                    26,
                    26,
                    .22);

            transition:
                all .5s var(--ease);

        }


        .nav-item.active {

            background:
                var(--gold);

            transform:
                scale(2);

        }


        /* =================================================
           CINEMATIC SECTION
        ================================================= */

        .cinematic-section {

            will-change:
                transform,
                opacity;

            transform-origin:
                center center;

        }


        /* =================================================
           REVEAL
        ================================================= */

        .reveal {

            opacity:
                0;

            transform:
                translateY(70px) scale(.97);

            filter:
                blur(8px);

            transition:

                opacity 1.2s var(--ease),

                transform 1.2s var(--ease),

                filter 1.2s var(--ease);

        }


        .reveal.active {

            opacity:
                1;

            transform:
                translateY(0) scale(1);

            filter:
                blur(0);

        }


        /* =================================================
           STAGGER
        ================================================= */

        .stagger {

            opacity:
                0;

            transform:
                translateY(35px);

            transition:

                opacity 1s var(--ease),

                transform 1s var(--ease);

        }


        .stagger.active {

            opacity:
                1;

            transform:
                translateY(0);

        }


        .stagger:nth-child(1) {
            transition-delay: .05s;
        }

        .stagger:nth-child(2) {
            transition-delay: .15s;
        }

        .stagger:nth-child(3) {
            transition-delay: .25s;
        }

        .stagger:nth-child(4) {
            transition-delay: .35s;
        }


        /* =================================================
           IMAGE REVEAL
        ================================================= */

        .image-reveal {

            overflow:
                hidden;

            position:
                relative;

        }


        .image-reveal::after {

            content:
                "";

            position:
                absolute;

            inset:
                0;

            background:
                var(--ivory);

            transform:
                translateX(0);

            transition:
                transform 1.4s var(--ease);

            z-index:
                3;

        }


        .image-reveal.active::after {

            transform:
                translateX(101%);

        }


        .image-reveal img {

            transform:
                scale(1.18);

            transition:
                transform 2s var(--ease);

        }


        .image-reveal.active img {

            transform:
                scale(1);

        }


        /* =================================================
           HERO
        ================================================= */

        #hero {

            position:
                relative;

            height:
                200vh;

            background:
                #111;

        }


        .hero-sticky {

            position:
                sticky;

            top:
                0;

            height:
                100vh;

            height:
                100svh;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            overflow:
                hidden;

        }


        .hero-background {

            position:
                absolute;

            inset:
                -8%;

            background:

                linear-gradient(to bottom,
                    rgba(0,
                        0,
                        0,
                        .05),
                    rgba(0,
                        0,
                        0,
                        .48)),

                url("../2.webp") center center / cover no-repeat;

            transform:
                scale(1.08);

            animation:
                heroZoom 12s var(--ease) forwards;

        }


        @keyframes heroZoom {

            from {

                transform:
                    scale(1.08);

            }

            to {

                transform:
                    scale(1);

            }

        }


        .hero-overlay {

            position:
                absolute;

            inset:
                0;

            background:
                radial-gradient(circle at center,
                    transparent 15%,
                    rgba(0,
                        0,
                        0,
                        .28));

        }


        .hero-content {

            position:
                relative;

            z-index:
                10;

            color:
                white;

            text-align:
                center;

            will-change:
                transform,
                opacity;

        }


        .hero-name {

            font-size:
                clamp(4rem,
                    10vw,
                    9rem);

            line-height:
                .95;

            text-shadow:
                0 8px 40px rgba(0,
                    0,
                    0,
                    .25);

        }


        /* =================================================
           MOMENT IMAGE
        ================================================= */

        #moments {

            position:
                relative;

            height:
                100vh;

            height:
                100svh;

            overflow:
                hidden;

            background:
                #111;

        }


        .moment-image {

            display:
                block;

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            transform:
                scale(1.14);

            animation:
                momentZoom 3s var(--ease) forwards;

        }


        @keyframes momentZoom {

            from {

                transform:
                    scale(1.14);

            }

            to {

                transform:
                    scale(1);

            }

        }


        .moment-overlay {

            position:
                absolute;

            top:
                0;

            left:
                0;

            right:
                0;

            height:
                300px;

            /* background:
                linear-gradient(
                    to bottom,
                    rgba(17, 17, 17, .42),
                    rgba(17, 17, 17, 0)
                ); */

            z-index:
                4;

            pointer-events:
                none;

        }


        .moment-verse {

            position:
                absolute;

            top:
                0;

            left:
                0;

            right:
                0;

            padding:
                200px 24px 0;

            text-align:
                center;

            color:
                #FAF9F6;

            z-index:
                5;

        }


        .moment-verse-text {

            font-family:
                "Playfair Display",
                serif;

            font-style:
                italic;

            font-size:
                clamp(1rem,
                    2.3vw,
                    1.35rem);

            line-height:
                1.95;

            max-width:
                620px;

            margin:
                0 auto;

            text-shadow:
                0 2px 22px rgba(0, 0, 0, .5),
                0 1px 4px rgba(0, 0, 0, .35);

        }


        .moment-verse-ref {

            margin-top:
                16px;

            font-size:
                10px;

            letter-spacing:
                .35em;

            text-transform:
                uppercase;

            opacity:
                .92;

            text-shadow:
                0 1px 10px rgba(0, 0, 0, .45);

        }


        .moment-verse-ref.reveal {

            transition-delay:
                .55s;

        }


        /* =================================================
           PARTICLES
        ================================================= */

        #particles {

            position:
                absolute;

            inset:
                0;

            z-index:
                5;

            pointer-events:
                none;

        }


        .particle {

            position:
                absolute;

            width:
                3px;

            height:
                3px;

            border-radius:
                50%;

            background:
                var(--gold);

            opacity:
                0;

            animation:
                particleFloat linear infinite;

        }


        @keyframes particleFloat {

            0% {

                transform:
                    translateY(40px) scale(.4);

                opacity:
                    0;

            }

            15% {

                opacity:
                    .8;

            }

            80% {

                opacity:
                    .35;

            }

            100% {

                transform:
                    translateY(-100vh) scale(1);

                opacity:
                    0;

            }

        }


        /* =================================================
           SCROLL HINT
        ================================================= */

        .scroll-hint {

            display:
                flex;

            flex-direction:
                column;

            align-items:
                center;

            gap:
                12px;

            margin-top:
                56px;

            opacity:
                .85;

        }


        .scroll-hint-text {

            font-size:
                9px;

            letter-spacing:
                .4em;

            text-transform:
                uppercase;

            text-indent:
                .4em;

        }


        .scroll-hint-arrow {

            animation:
                hintBounce 2.2s ease-in-out infinite;

        }


        @keyframes hintBounce {

            0%,
            100% {

                transform:
                    translateY(0);

                opacity:
                    .45;

            }

            50% {

                transform:
                    translateY(7px);

                opacity:
                    1;

            }

        }


        /* =================================================
           COUPLE
        ================================================= */

        #couple {

            background:
                var(--ivory);

        }


        .couple-card {

            position:
                relative;

        }


        .couple-photo {

            position:
                absolute;

            inset:
                0;

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            transition:
                transform 1.6s var(--ease);

        }


        .couple-photo-wrapper {

            position:
                relative;

            height:
                100vh;

            height:
                100dvh;

            overflow:
                hidden;

        }


        .couple-photo-wrapper.active:hover .couple-photo {

            transform:
                scale(1.05);

        }


        .couple-scrim {

            position:
                absolute;

            inset:
                0;

            z-index:
                1;

            background:
                linear-gradient(to top,
                    rgba(10,
                        10,
                        10,
                        .78) 0%,
                    rgba(10,
                        10,
                        10,
                        .28) 45%,
                    rgba(10,
                        10,
                        10,
                        .06) 100%);

            pointer-events:
                none;

        }


        .couple-info {

            position:
                absolute;

            left:
                0;

            right:
                0;

            bottom:
                0;

            z-index:
                2;

            padding:
                2.25rem;

            color:
                white;

            text-align:
                left;

        }


        .couple-frame {

            position:
                absolute;

            inset:
                14px;

            z-index:
                2;

            border:
                1px solid rgba(212,
                    175,
                    55,
                    .45);

            pointer-events:
                none;

        }


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

        #event {

            display:
                block;

            background:
                white;

        }


        .event-band {

            background:
                #111111;

            padding:
                4.5rem 0 5rem;

            border-top:
                1px solid rgba(212,
                    175,
                    55,
                    .35);

            border-bottom:
                1px solid rgba(212,
                    175,
                    55,
                    .35);

        }


        .event-band .countdown-box {

            border-color:
                rgba(255,
                    255,
                    255,
                    .16);

            background:
                transparent;

        }


        .event-band .countdown-number {

            color:
                var(--gold);

        }


        .event-watermark {

            position:
                absolute;

            inset:
                0;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            font-family:
                "Great Vibes",
                cursive;

            font-size:
                clamp(8rem,
                    22vw,
                    18rem);

            color:
                rgba(212,
                    175,
                    55,
                    .07);

            pointer-events:
                none;

            user-select:
                none;

            white-space:
                nowrap;

        }


        .countdown-box {

            min-width:
                85px;

            padding:
                20px 10px;

            border:
                1px solid rgba(26,
                    26,
                    26,
                    .12);

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

            transition:
                transform .5s var(--ease);

        }


        .countdown-box:hover {

            transform:
                translateY(-7px);

        }


        .countdown-number {

            font-family:
                "Playfair Display",
                serif;

            font-size:
                2rem;

        }


        .event-card {

            padding:
                56px 28px;

            border:
                1px solid rgba(26,
                    26,
                    26,
                    .10);

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

            transition:
                transform .6s var(--ease);

        }


        .event-card:hover {

            transform:
                translateY(-7px);

        }


        .event-divider-v {

            width:
                1px;

            background:
                var(--gold);

            opacity:
                .45;

        }


        .event-divider-h {

            height:
                1px;

            background:
                var(--gold);

            opacity:
                .45;

        }


        /* =================================================
           LOCATION BUTTON
        ================================================= */

        .location-button {

            width:
                44px;

            height:
                44px;

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                50%;

            border:
                1px solid rgba(26,
                    26,
                    26,
                    .15);

            background:
                transparent;

            color:
                var(--gold);

            transition:
                all .5s var(--ease);

        }


        .location-button:hover {

            background:
                var(--gold);

            border-color:
                var(--gold);

            color:
                white;

            transform:
                translateY(-4px);

            box-shadow:
                0 14px 30px rgba(212,
                    175,
                    55,
                    .35);

        }


        .location-button-sm {

            width:
                30px;

            height:
                30px;

            flex-shrink:
                0;

        }


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

        #gallery {

            padding:
                7rem 1.5rem;

            background:
                #111;

            color:
                white;

        }


        .carousel-viewport {

            position:
                relative;

            max-width:
                min(880px,
                    100%);

            margin:
                3.5rem auto 0;

            height:
                clamp(380px,
                    62vh,
                    560px);

            overflow:
                hidden;

            touch-action:
                pan-y;

            cursor:
                grab;

            user-select:
                none;

            -webkit-user-select:
                none;

        }


        .carousel-viewport.dragging {

            cursor:
                grabbing;

        }


        .carousel-track {

            display:
                flex;

            height:
                100%;

            transition:
                transform .85s var(--ease);

            will-change:
                transform;

        }


        .carousel-track.no-transition {

            transition:
                none;

        }


        .carousel-slide {

            flex:
                0 0 100%;

            position:
                relative;

            overflow:
                hidden;

        }


        .carousel-slide img {

            display:
                block;

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            pointer-events:
                none;

            transform:
                scale(1.07);

            transition:
                transform 1.3s var(--ease);

            will-change:
                transform;

        }


        .carousel-slide.is-active img {

            transform:
                scale(1.001);

        }


        .carousel-viewport.dragging .carousel-slide.is-active img {

            transform:
                scale(.985);

            transition-duration:
                .45s;

        }


        .carousel-scrim {

            position:
                absolute;

            left:
                0;

            right:
                0;

            bottom:
                0;

            height:
                45%;

            background:
                linear-gradient(to top,
                    rgba(0,
                        0,
                        0,
                        .65),
                    transparent);

            pointer-events:
                none;

        }


        .carousel-caption {

            position:
                absolute;

            left:
                30px;

            bottom:
                26px;

            z-index:
                5;

            opacity:
                0;

            transform:
                translateY(14px);

            transition:
                opacity .7s var(--ease) .2s,
                transform .7s var(--ease) .2s;

        }


        .carousel-slide.is-active .carousel-caption {

            opacity:
                1;

            transform:
                translateY(0);

        }


        .carousel-arrow {

            position:
                absolute;

            top:
                50%;

            transform:
                translateY(-50%);

            z-index:
                10;

            width:
                46px;

            height:
                46px;

            border-radius:
                50%;

            border:
                1px solid rgba(255,
                    255,
                    255,
                    .35);

            background:
                rgba(17,
                    17,
                    17,
                    .45);

            backdrop-filter:
                blur(8px);

            color:
                white;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            cursor:
                pointer;

            transition:
                background .4s var(--ease),
                border-color .4s var(--ease);

        }


        .carousel-arrow:hover {

            background:
                var(--gold);

            border-color:
                var(--gold);

        }


        .carousel-arrow-prev {

            left:
                18px;

        }

        .carousel-arrow-next {

            right:
                18px;

        }


        @media(hover:none) {

            .carousel-arrow {

                display:
                    none;

            }

        }


        .carousel-dots {

            display:
                flex;

            justify-content:
                center;

            align-items:
                center;

            gap:
                10px;

            margin-top:
                2rem;

        }


        .carousel-dot {

            width:
                7px;

            height:
                7px;

            padding:
                0;

            border:
                none;

            border-radius:
                999px;

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

            cursor:
                pointer;

            transition:
                all .5s var(--ease);

        }


        .carousel-dot.active {

            width:
                26px;

            background:
                var(--gold);

        }


        .carousel-arrow.reveal {

            transition-delay:
                .55s;

        }


        .carousel-dots.reveal {

            transition-delay:
                .7s;

        }


        /* =================================================
           PREWEDDING PHOTO WALL
        ================================================= */

        #prewed {

            padding:
                7rem 1.5rem;

            background:
                var(--ivory);

            color:
                var(--ink);

        }


        .masonry {

            max-width:
                1100px;

            margin:
                3.5rem auto 0;

            columns:
                3;

            column-gap:
                14px;

        }


        .masonry-item {

            break-inside:
                avoid;

            margin:
                0 0 14px;

            overflow:
                hidden;

            cursor:
                zoom-in;

        }


        .masonry-item:nth-child(3n+2) {

            transition-delay:
                .12s;

        }

        .masonry-item:nth-child(3n) {

            transition-delay:
                .24s;

        }


        .masonry-item img {

            display:
                block;

            width:
                100%;

            transform:
                scale(1.14);

            transition:
                transform 1.25s var(--ease);

        }


        .masonry-item.reveal {

            transform:
                translateX(-46px) translateY(60px) scale(.97);

        }


        .masonry-item.reveal:nth-child(even) {

            transform:
                translateX(46px) translateY(60px) scale(.97);

        }


        .masonry-item.reveal.active {

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

        }


        .masonry-item.active img {

            transform:
                scale(1);

        }


        .masonry-item.active:hover img {

            transform:
                scale(1.04);

            transition-duration:
                .8s;

        }


        /* =================================================
           LIGHTBOX
        ================================================= */

        #lightbox {

            position:
                fixed;

            inset:
                0;

            z-index:
                10005;

            background:
                rgba(10,
                    10,
                    10,
                    .94);

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            padding:
                4vh 4vw;

            opacity:
                0;

            visibility:
                hidden;

            transition:
                opacity .45s var(--ease),
                visibility .45s var(--ease);

        }


        #lightbox.open {

            opacity:
                1;

            visibility:
                visible;

        }


        #lightboxImage {

            max-width:
                92vw;

            max-height:
                90vh;

            object-fit:
                contain;

            transform:
                scale(.96);

            transition:
                transform .45s var(--ease);

        }


        #lightbox.open #lightboxImage {

            transform:
                scale(1);

        }


        #lightboxClose {

            position:
                absolute;

            top:
                20px;

            right:
                24px;

            width:
                44px;

            height:
                44px;

            border-radius:
                50%;

            border:
                1px solid rgba(255,
                    255,
                    255,
                    .35);

            background:
                transparent;

            color:
                white;

            font-size:
                18px;

            line-height:
                1;

            cursor:
                pointer;

            transition:
                all .4s var(--ease);

        }


        #lightboxClose:hover {

            background:
                var(--gold);

            border-color:
                var(--gold);

        }


        /* =================================================
           MOBILE
        ================================================= */

        #closing {

            min-height:
                80vh;

            background:
                var(--ivory);

        }


        .quote-mark {

            font-family:
                "Great Vibes",
                cursive;

            font-size:
                100px;

            line-height:
                .5;

            color:
                var(--gold);

            opacity:
                .3;

        }


        /* =================================================
           GIFT
        ================================================= */

        #gift {

            background:
                var(--ivory);

        }


        .gift-spacer img {

            display:
                block;

            width:
                100%;

            height:
                clamp(640px,
                    40vh,
                    440px);

            object-fit:
                cover;

            object-position:
                center 12%;

        }


        .account-number {

            font-family:
                "Playfair Display",
                serif;

            font-size:
                1.45rem;

            letter-spacing:
                .14em;

        }


        .copy-button {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                8px;

            padding:
                11px 26px;

            border:
                1px solid rgba(26,
                    26,
                    26,
                    .18);

            background:
                transparent;

            color:
                var(--ink);

            font-size:
                9px;

            letter-spacing:
                .25em;

            text-transform:
                uppercase;

            cursor:
                pointer;

            transition:
                all .5s var(--ease);

        }


        .copy-button:hover,
        .copy-button.copied {

            background:
                var(--gold);

            border-color:
                var(--gold);

            color:
                white;

            box-shadow:
                0 14px 30px rgba(212,
                    175,
                    55,
                    .35);

        }


        /* =================================================
           WISHES
        ================================================= */

        #wishes {

            background:
                white;

        }


        .wish-input {

            width:
                100%;

            padding:
                14px 18px;

            border:
                1px solid rgba(26,
                    26,
                    26,
                    .15);

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

            font-family:
                "Inter",
                sans-serif;

            font-size:
                .9rem;

            color:
                var(--ink);

            outline:
                none;

            transition:
                border-color .4s var(--ease);

        }


        .wish-input:focus {

            border-color:
                var(--gold);

        }


        .wish-input::placeholder {

            color:
                rgba(26,
                    26,
                    26,
                    .35);

        }


        .submit-button {

            width:
                100%;

            padding:
                16px;

            background:
                var(--ink);

            color:
                white;

            font-size:
                10px;

            letter-spacing:
                .3em;

            text-transform:
                uppercase;

            border:
                none;

            cursor:
                pointer;

            transition:
                all .5s var(--ease);

        }


        .submit-button:hover {

            background:
                var(--gold);

            box-shadow:
                0 14px 30px rgba(212,
                    175,
                    55,
                    .35);

        }


        /* =================================================
           TOMBOL SIMPAN TANGGAL (.ICS)
        ================================================= */

        .cal-button {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                8px;

            margin-top:
                2rem;

            padding:
                11px 26px;

            border:
                1px solid rgba(26,
                    26,
                    26,
                    .18);

            background:
                transparent;

            color:
                var(--ink);

            font-size:
                9px;

            letter-spacing:
                .25em;

            text-transform:
                uppercase;

            cursor:
                pointer;

            transition:
                all .5s var(--ease);

        }


        .cal-button:hover {

            background:
                var(--gold);

            border-color:
                var(--gold);

            color:
                white;

            box-shadow:
                0 14px 30px rgba(212,
                    175,
                    55,
                    .35);

        }


        .wish-card {

            display:
                flex;

            gap:
                18px;

            padding:
                24px;

            border:
                1px solid rgba(26,
                    26,
                    26,
                    .10);

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

            text-align:
                left;

        }


        .wish-avatar {

            flex-shrink:
                0;

            width:
                44px;

            height:
                44px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                50%;

            border:
                1px solid rgba(212,
                    175,
                    55,
                    .55);

            background:
                rgba(212,
                    175,
                    55,
                    .08);

            font-family:
                "Playfair Display",
                serif;

            font-size:
                1.05rem;

            color:
                var(--gold);

        }


        .wish-date {

            margin-top:
                10px;

            font-size:
                9px;

            letter-spacing:
                .25em;

            text-transform:
                uppercase;

            color:
                rgba(26,
                    26,
                    26,
                    .35);

        }


        /* =================================================
           PRELOADER
        ================================================= */

        #preloader {

            position:
                fixed;

            inset:
                0;

            z-index:
                10000;

            background:
                var(--ivory);

            display:
                flex;

            flex-direction:
                column;

            align-items:
                center;

            justify-content:
                center;

            transition:
                opacity .9s var(--ease),
                visibility .9s var(--ease);

        }


        #preloader.done {

            opacity:
                0;

            visibility:
                hidden;

            pointer-events:
                none;

        }


        .preloader-names {

            font-family:
                'Great Vibes',
                cursive;

            font-size:
                clamp(2.4rem,
                    8vw,
                    4.2rem);

            color:
                var(--ink);

        }


        .preloader-sub {

            margin-top:
                1rem;

            font-size:
                .62rem;

            letter-spacing:
                .45em;

            text-transform:
                uppercase;

            color:
                #8A8578;

            animation:
                pulseSoft 1.6s ease-in-out infinite;

        }


        @keyframes pulseSoft {

            0%,
            100% {

                opacity:
                    .35;

            }

            50% {

                opacity:
                    1;

            }

        }


        /* =================================================
           BODY LOCK (SAAT COVER TERBUKA)
        ================================================= */

        body.no-scroll {

            overflow:
                hidden;

            height:
                100dvh;

        }


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

        #cover {

            position:
                fixed;

            inset:
                0;

            z-index:
                9990;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            overflow:
                hidden;

            text-align:
                center;

            color:
                #FFFFFF;

            transition:
                opacity 1.2s var(--ease),
                visibility 1.2s var(--ease);

        }


        #cover.opened {

            opacity:
                0;

            visibility:
                hidden;

            pointer-events:
                none;

        }


        .cover-background {

            position:
                absolute;

            inset:
                -30px;

            background:
                url("../6.webp") center / cover no-repeat;

            filter:
                blur(14px) brightness(.45);

            transform:
                scale(1.05);

        }


        .cover-content {

            position:
                relative;

            z-index:
                1;

            max-width:
                580px;

            padding:
                2.5rem 1.75rem;

        }


        .cover-fade {

            opacity:
                0;

            transform:
                translateY(22px);

            animation:
                coverFade 1.1s var(--ease) forwards;

        }


        @keyframes coverFade {

            to {

                opacity:
                    1;

                transform:
                    translateY(0);

            }

        }


        .cover-delay-2 {

            animation-delay:
                .25s;

        }

        .cover-delay-3 {

            animation-delay:
                .55s;

        }

        .cover-delay-4 {

            animation-delay:
                .9s;

        }

        .cover-delay-5 {

            animation-delay:
                1.25s;

        }


        .cover-names {

            margin-top:
                1.5rem;

            font-size:
                clamp(2.6rem,
                    10vw,
                    5rem);

            line-height:
                1.15;

        }


        .cover-names .script {

            color:
                var(--gold);

        }


        .cover-date-line {

            margin-top:
                1.25rem;

            color:
                rgba(255,
                    255,
                    255,
                    .78);

        }


        .cover-guest {

            margin-top:
                2.75rem;

            padding-top:
                2rem;

            border-top:
                1px solid rgba(255,
                    255,
                    255,
                    .22);

        }


        .open-cover-button {

            margin-top:
                2.5rem;

            padding:
                .95rem 2.6rem;

            border:
                1px solid rgba(212,
                    175,
                    55,
                    .75);

            background:
                transparent;

            color:
                #E8C96A;

            font-family:
                'Inter',
                sans-serif;

            font-size:
                .68rem;

            letter-spacing:
                .28em;

            text-transform:
                uppercase;

            cursor:
                pointer;

            transition:
                background .5s var(--ease),
                color .5s var(--ease),
                box-shadow .5s var(--ease);

        }


        .open-cover-button:hover {

            background:
                var(--gold);

            color:
                #111111;

            box-shadow:
                0 12px 34px rgba(212,
                    175,
                    55,
                    .35);

        }


        /* =================================================
           MUSIK LATAR
        ================================================= */

        .music-toggle {

            position:
                fixed;

            bottom:
                24px;

            right:
                24px;

            z-index:
                900;

            width:
                48px;

            height:
                48px;

            border-radius:
                50%;

            border:
                1px solid rgba(212,
                    175,
                    55,
                    .6);

            background:
                rgba(17,
                    17,
                    17,
                    .55);

            backdrop-filter:
                blur(10px);

            color:
                #E8C96A;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            cursor:
                pointer;

            opacity:
                0;

            pointer-events:
                none;

            transform:
                translateY(16px);

            transition:
                opacity .7s var(--ease),
                transform .7s var(--ease),
                background .4s,
                color .4s;

        }


        body.invitation-open .music-toggle {

            opacity:
                1;

            pointer-events:
                auto;

            transform:
                translateY(0);

        }


        .music-toggle.playing {

            background:
                var(--gold);

            border-color:
                var(--gold);

            color:
                #111111;

        }


        .music-toggle.playing svg {

            animation:
                discSpin 3.5s linear infinite;

        }


        @keyframes discSpin {

            to {

                transform:
                    rotate(360deg);

            }

        }


        /* =================================================
           MOBILE
        ================================================= */

        @media(max-width:768px) {

            .side-navigation {

                right:
                    12px;

            }


            .countdown-box {

                min-width:
                    68px;

                padding:
                    15px 7px;

            }


            .masonry {

                columns:
                    2;

                column-gap:
                    10px;

            }


            .masonry-item {

                margin-bottom:
                    10px;

            }


            .countdown-number {

                font-size:
                    1.5rem;

            }

        }