:root {
            --bg-1: #12070b;
            --bg-2: #241018;
            --bg-3: #3b1f2b;
            --accent: #8a5a68;
            --accent-soft: #b78997;
            --accent-light: #d9b8bf;
            --gold: #cfaf87;
            --paper: #f1e9e6;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
        }

        .cover-shell {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 18% 18%, rgba(207, 175, 135, .18), transparent 22%),
                radial-gradient(circle at 82% 24%, rgba(138, 90, 104, .20), transparent 26%),
                linear-gradient(135deg, #1b0a0f 0%, #2a1017 30%, #4a1f2d 68%, #2c0f18 100%);
            border: 1px solid rgba(216, 192, 175, .14);
            box-shadow:
                0 30px 90px rgba(0, 0, 0, .42),
                inset 0 1px 0 rgba(255, 255, 255, .06);
        }

        .cover-shell::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: .12;
            background-image:
                repeating-linear-gradient(-45deg,
                    rgba(216, 192, 175, .18) 0px,
                    rgba(216, 192, 175, .18) 2px,
                    transparent 2px,
                    transparent 18px);
            mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
            -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
        }

        .cover-shell::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at top center, rgba(255, 255, 255, .08), transparent 28%),
                linear-gradient(to bottom, rgba(255, 255, 255, .03), transparent 18%, transparent 82%, rgba(0, 0, 0, .10));
        }

        .cover-jawa-gold {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .cover-jawa-gold .glow-left,
        .cover-jawa-gold .glow-right,
        .cover-jawa-gold .glow-bottom {
            position: absolute;
            border-radius: 9999px;
            filter: blur(34px);
        }

        .cover-jawa-gold .glow-left {
            width: 280px;
            height: 280px;
            top: -80px;
            left: -70px;
            background: rgba(207, 175, 135, .10);
        }

        .cover-jawa-gold .glow-right {
            width: 300px;
            height: 300px;
            right: -90px;
            top: 8%;
            background: rgba(138, 90, 104, .18);
        }

        .cover-jawa-gold .glow-bottom {
            width: 340px;
            height: 220px;
            left: 30%;
            bottom: -120px;
            background: rgba(216, 192, 175, .08);
        }

        .cover-leaf-left {
            position: absolute;
            top: 29px;
            left: -28px;
            width: 240px;
            aspect-ratio: 832 / 432;
            pointer-events: none;
            opacity: .74;
            z-index: 0;
            background-image: url('/images/ornaments/daun-kiri.png');
            background-repeat: no-repeat;
            background-position: left top;
            background-size: contain;
            filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .12));
            transform: rotate(-18deg);
            transform-origin: top left;
        }

        .cover-leaf-right-bottom {
            position: absolute;
            right: -20px;
            bottom: -1px;
            width: 190px;
            height: 340px;
            pointer-events: none;
            opacity: .80;
            background-image: url('/images/ornaments/daun-kanan.png');
            background-repeat: no-repeat;
            background-position: right bottom;
            background-size: contain;
            filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .10));
        }

        @media (max-width: 1024px) {
            .cover-leaf-right-bottom {
                width: 145px;
                height: 180px;
                right: -4px;
                bottom: -6px;
                opacity: .28;
            }
        }

        .ornament-batik-left,
        .ornament-batik-right {
            position: absolute;
            pointer-events: none;
            z-index: 0;
            opacity: 0.15;
            filter: brightness(0) invert(1) drop-shadow(0 8px 22px rgba(255, 255, 255, 0.05));
            mix-blend-mode: screen;
        }

        .ornament-batik-left {
            top: 22%;
            left: -42px;
            width: 220px;
        }

        .ornament-batik-right {
            top: 22%;
            right: -42px;
            width: 220px;
            transform: scaleX(-1);
        }

        @media (max-width: 1024px) {

            .ornament-batik-left,
            .ornament-batik-right {
                opacity: 0.08;
            }

            .ornament-batik-left {
                width: 155px;
                left: -28px;
                top: 24%;
            }

            .ornament-batik-right {
                width: 155px;
                right: -28px;
                top: 24%;
            }
        }

        @media (max-width: 767px) {

            .ornament-batik-left,
            .ornament-batik-right {
                opacity: 0.06;
            }

            .ornament-batik-left {
                width: 105px;
                left: -18px;
                top: 26%;
            }

            .ornament-batik-right {
                width: 105px;
                right: -18px;
                top: 26%;
            }
        }

        @media (max-width: 767px) {
            .cover-shell {
                border-radius: 28px;
            }

            .cover-inner-border {
                inset: 10px;
                border-radius: 22px;
            }

            .cover-jawa-gold .glow-left {
                width: 170px;
                height: 170px;
                top: -42px;
                left: -48px;
                opacity: .9;
                filter: blur(24px);
            }

            .cover-jawa-gold .glow-right {
                width: 180px;
                height: 180px;
                right: -58px;
                top: 4%;
                opacity: .85;
                filter: blur(24px);
            }

            .cover-jawa-gold .glow-bottom {
                width: 220px;
                height: 140px;
                left: 22%;
                bottom: -72px;
                opacity: .8;
                filter: blur(24px);
            }

            .cover-leaf-left {
                top: 12px;
                left: -10px;
                width: 260px;
                opacity: .52;
                transform: rotate(-6deg);
                transform-origin: top left;
            }

            .cover-leaf-right-bottom {
                width: 128px;
                height: 176px;
                right: -10px;
                bottom: -8px;
                opacity: .52;
            }

            .cover-cover-mist {
                background:
                    radial-gradient(circle at 10% 100%, rgba(207, 175, 135, .11), transparent 24%),
                    radial-gradient(circle at 90% 0%, rgba(138, 90, 104, .13), transparent 26%);
            }

            .ornament-gunungan-top {
                width: 128px;
                top: -18px;
                opacity: .08;
            }

            .ornament-gunungan-bottom {
                width: 150px;
                right: -34px;
                bottom: -42px;
                opacity: .06;
            }
        }

        .cover-cover-mist {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 12% 100%, rgba(207, 175, 135, .08), transparent 20%),
                radial-gradient(circle at 88% 0%, rgba(138, 90, 104, .10), transparent 24%);
        }

        @media (max-width: 1024px) {
            .cover-leaf-left {
                top: 10px;
                left: -14px;
                width: 420px;
                opacity: .55;
                transform: rotate(-8deg);
                transform-origin: top left;
            }

            .cover-leaf-right-bottom {
                width: 145px;
                height: 180px;
                right: -4px;
                bottom: -6px;
                opacity: .48;
            }
        }

        .cover-inner-border {
            position: absolute;
            inset: 16px;
            border-radius: 30px;
            border: 1px solid rgba(216, 192, 175, .12);
            pointer-events: none;
        }

        @media (max-width: 767px) {
            #cover {
                padding: .45rem;
                align-items: center;
            }

            #cover .scene {
                max-width: 22.5rem;
            }

            #cover .cover-shell {
                max-height: calc(100svh - .9rem);
                overflow: hidden;
            }

            #cover .cover-grid {
                gap: .65rem;
                padding: .85rem .95rem 1rem;
            }

            #cover .cover-photo-wrap {
                max-width: min(15.6rem, 100%);
            }

            #cover .cover-photo {
                height: clamp(190px, 34svh, 255px);
            }

            #cover .cover-photo-label {
                padding: .6rem .75rem;
                border-radius: 1rem;
            }

            #cover .cover-title {
                font-size: clamp(1.85rem, 8.5vw, 2.25rem);
                line-height: .96;
            }

            #cover .cover-intro {
                margin-top: .35rem;
                font-size: .78rem;
                line-height: 1.32;
            }

            #cover .cover-guest-card {
                margin-top: .8rem;
                padding: .75rem .9rem;
                border-radius: 1.1rem;
            }

            #cover .cover-guest-label {
                margin-bottom: .35rem;
                font-size: .7rem;
            }

            #cover .cover-guest-card .text-xl {
                font-size: 1.08rem;
                line-height: 1.25;
            }

            #cover .cover-guest-card .text-white\/50 {
                margin-top: .35rem;
                font-size: .78rem;
                line-height: 1.25;
            }

            #cover .cover-action {
                margin-top: .9rem;
            }

            #openInvitation {
                padding: .7rem 1.35rem;
            }
        }

        @media (max-width: 767px) and (max-height: 620px) {
            #cover .cover-shell {
                overflow-y: auto;
            }

            #cover .cover-photo {
                height: 180px;
            }

            #cover .cover-photo-label {
                display: none;
            }
        }

        .section-label {
            letter-spacing: .34em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .62);
            font-size: .78rem;
        }

        .event-icon-wrap {
            width: 52px;
            height: 52px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(216, 192, 175, .18), rgba(199, 156, 171, .12));
            border: 1px solid rgba(255, 255, 255, .10);
            color: #f1e9e6;
            box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
        }

        .event-info-card {
            border: 1px solid rgba(255, 255, 255, .10);
            background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
            border-radius: 28px;
            padding: 1.4rem;
        }

        .hero-name {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 700;
            line-height: .94;
            letter-spacing: -.03em;
        }

        .hero-kicker {
            font-family: 'Marcellus', serif;
            letter-spacing: .28em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .62);
            font-size: .82rem;
        }

        section h2,
        .gift-modal-title,
        .info-title {
            font-family: 'Marcellus', serif;
            font-weight: 400;
            letter-spacing: 0;
        }

        #mempelai h3,
        .cover-title,
        .hero-name,
        .penutup-sign {
            font-family: 'Cormorant Garamond', serif;
        }

        body {
            background:
                radial-gradient(circle at top left, rgba(183, 137, 151, .17), transparent 24%),
                radial-gradient(circle at top right, rgba(207, 175, 135, .10), transparent 18%),
                radial-gradient(circle at bottom left, rgba(94, 42, 58, .18), transparent 24%),
                linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 42%, var(--bg-3) 100%);
            overflow-x: hidden;
        }

        .glass {
            background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .05));
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        .scene {
            perspective: 1200px;
        }

        .tilt-card {
            transform-style: preserve-3d;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }

        .tilt-card:hover {
            box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
            border-color: rgba(255, 255, 255, .16);
        }

        .floating-orb {
            position: absolute;
            border-radius: 9999px;
            filter: blur(12px);
            opacity: .35;
            animation: floaty 8s ease-in-out infinite;
        }

        .floating-orb:nth-child(2) {
            animation-delay: -2s;
        }

        .floating-orb:nth-child(3) {
            animation-delay: -4s;
        }

        @keyframes floaty {

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

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

        .shine {
            position: relative;
            overflow: hidden;
        }

        .shine::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .14) 48%, transparent 75%);
            transform: translateX(-130%);
            transition: transform .8s ease;
        }

        .shine:hover::after {
            transform: translateX(130%);
        }

        .gallery-item img {
            transition: transform .55s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.08);
        }

        .gallery-item .gallery-overlay {
            transition: opacity .25s ease;
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .music-panel {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 45;
        }

        .lightbox-backdrop {
            background: rgba(8, 3, 5, .86);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .lightbox-image {
            cursor: grab;
            user-select: none;
            touch-action: none;
            will-change: transform;
        }

        .lightbox-image.dragging {
            cursor: grabbing;
        }

        .hide-scrollbar::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        .hide-scrollbar {
            scrollbar-width: none;
        }

        .soft-link {
            color: rgba(255, 255, 255, .58);
            font-size: .92rem;
        }

        .soft-link:hover {
            color: rgba(255, 255, 255, .82);
        }

        .portrait-frame {
            position: relative;
            overflow: hidden;
            border-radius: 28px;
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .05);
            box-shadow: 0 18px 55px rgba(138, 90, 104, .18);
        }

        .portrait-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .subtle-action {
            color: rgba(255, 255, 255, .62);
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .05);
            transition: all .2s ease;
        }

        .subtle-action:hover {
            color: rgba(255, 255, 255, .90);
            background: rgba(255, 255, 255, .09);
        }

        .section-space {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            padding-top: 1.1rem;
            padding-bottom: 1.1rem;
        }

        @media (min-width: 768px) {
            .section-space {
                padding-top: 1.5rem;
                padding-bottom: 1.5rem;
            }
        }

        .wishes-scroll {
            max-height: 720px;
            overflow-y: auto;
            padding-right: 0.35rem;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, .25) transparent;
        }

        .wishes-scroll::-webkit-scrollbar {
            width: 8px;
        }

        .wishes-scroll::-webkit-scrollbar-track {
            background: transparent;
        }

        .wishes-scroll::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, .18);
            border-radius: 999px;
        }

        .wishes-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, .28);
        }

        .javanese-ornaments {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .ambient-decor {
            position: fixed;
            inset: 0;
            z-index: 44;
            overflow: hidden;
            pointer-events: none;
            contain: layout paint;
        }

        .content-layer>section,
        .content-layer>.site-footer {
            position: relative;
            z-index: 3;
        }

        .petal {
            position: absolute;
            top: -12vh;
            left: var(--x);
            width: var(--size);
            height: calc(var(--size) * 1.45);
            border-radius: 70% 30% 70% 30%;
            background:
                radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .58), transparent 18%),
                linear-gradient(145deg, rgba(232, 196, 204, .50), rgba(183, 137, 151, .22));
            opacity: var(--opacity);
            filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .15));
            animation: petal-drift var(--duration) linear infinite;
            animation-delay: var(--delay);
            transform: translate3d(0, 0, 0) rotate(var(--rotate));
        }

        .petal:nth-child(3n) {
            background:
                radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .52), transparent 18%),
                linear-gradient(145deg, rgba(216, 192, 175, .46), rgba(207, 175, 135, .18));
        }

        .falling-leaf {
            position: absolute;
            top: -14vh;
            left: var(--x);
            width: var(--size);
            height: calc(var(--size) * 1.8);
            border-radius: 2% 72% 8% 72%;
            background:
                linear-gradient(135deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, .08)),
                linear-gradient(160deg, rgba(216, 192, 175, .62), rgba(138, 90, 104, .42));
            opacity: var(--opacity);
            filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .22));
            animation: leaf-fall var(--duration) linear infinite;
            animation-delay: var(--delay);
            transform: rotate(var(--rotate));
        }

        .falling-leaf::after {
            content: '';
            position: absolute;
            inset: 18% 45% 12% 45%;
            border-radius: 999px;
            background: rgba(0, 0, 0, .18);
        }

        .flying-bird {
            position: absolute;
            top: var(--top);
            left: -18vw;
            width: var(--size);
            height: calc(var(--size) * .42);
            opacity: var(--opacity);
            animation: bird-cross var(--duration) linear infinite;
            animation-delay: var(--delay);
            transform: scale(var(--scale));
            filter:
                drop-shadow(0 1px 1px rgba(255, 255, 255, .12))
                drop-shadow(0 4px 8px rgba(0, 0, 0, .18));
        }

        .flying-bird--reverse {
            left: auto;
            right: -18vw;
            animation-name: bird-cross-reverse;
        }

        .flying-bird::before,
        .flying-bird::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 52%;
            height: 56%;
            border-top: 2.5px solid rgba(0, 0, 0, .78);
            border-radius: 100% 100% 0 0;
            animation-duration: 1.35s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-delay: var(--delay);
        }

        .flying-bird::before {
            left: 0;
            transform: rotate(18deg);
            transform-origin: right center;
            animation-name: bird-wing-left;
        }

        .flying-bird::after {
            right: 0;
            transform: rotate(-18deg);
            transform-origin: left center;
            animation-name: bird-wing-right;
        }

        @keyframes petal-drift {
            0% {
                transform: translate3d(0, -12vh, 0) rotate(var(--rotate));
            }

            50% {
                transform: translate3d(var(--sway), 54vh, 0) rotate(calc(var(--rotate) + 180deg));
            }

            100% {
                transform: translate3d(calc(var(--sway) * -0.55), 112vh, 0) rotate(calc(var(--rotate) + 360deg));
            }
        }

        @keyframes leaf-fall {
            0% {
                transform: translate3d(0, -12vh, 0) rotate(var(--rotate));
            }

            35% {
                transform: translate3d(var(--sway), 34vh, 0) rotate(calc(var(--rotate) + 95deg));
            }

            70% {
                transform: translate3d(calc(var(--sway) * -0.65), 78vh, 0) rotate(calc(var(--rotate) + 210deg));
            }

            100% {
                transform: translate3d(calc(var(--sway) * .35), 114vh, 0) rotate(calc(var(--rotate) + 320deg));
            }
        }

        @keyframes bird-cross {
            0% {
                transform: translate3d(-8vw, 0, 0) scale(var(--scale));
            }

            22% {
                transform: translate3d(24vw, var(--lift), 0) scale(var(--scale));
            }

            54% {
                transform: translate3d(58vw, var(--dip), 0) scale(var(--scale));
            }

            78% {
                transform: translate3d(94vw, calc(var(--lift) * -0.55), 0) scale(var(--scale));
            }

            100% {
                transform: translate3d(130vw, 9px, 0) scale(var(--scale));
            }
        }

        @keyframes bird-cross-reverse {
            0% {
                transform: translate3d(8vw, 0, 0) scaleX(-1) scale(var(--scale));
            }

            28% {
                transform: translate3d(-30vw, var(--dip), 0) scaleX(-1) scale(var(--scale));
            }

            63% {
                transform: translate3d(-74vw, var(--lift), 0) scaleX(-1) scale(var(--scale));
            }

            100% {
                transform: translate3d(-132vw, -8px, 0) scaleX(-1) scale(var(--scale));
            }
        }

        @keyframes bird-wing-left {

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

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

        @keyframes bird-wing-right {

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

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

        .ornament-candi-center {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 680px;
            max-width: 72vw;
            transform: translate(-50%, -50%);
            opacity: 0.30;
            pointer-events: none;
            z-index: 0;
            filter: drop-shadow(0 10px 25px rgba(0, 0, 0, .12));

            -webkit-mask-image: linear-gradient(to top,
                    transparent 0%,
                    rgba(0, 0, 0, 0.15) 10%,
                    rgba(0, 0, 0, 0.45) 18%,
                    rgba(0, 0, 0, 0.75) 28%,
                    #000 40%);
            mask-image: linear-gradient(to top,
                    transparent 0%,
                    rgba(0, 0, 0, 0.15) 10%,
                    rgba(0, 0, 0, 0.45) 18%,
                    rgba(0, 0, 0, 0.75) 28%,
                    #000 40%);
        }

        @media (max-width: 1024px) {
            .ornament-candi-center {
                width: 520px;
                max-width: 82vw;
                opacity: 0.10;
            }
        }

        @media (max-width: 767px) {
            .ornament-candi-center {
                width: 340px;
                max-width: 88vw;
                opacity: 0.08;
            }
        }

        .countdown-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .countdown-box {
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .05);
            border-radius: 24px;
            padding: 1.25rem 1rem;
            text-align: center;
        }

        .countdown-value {
            font-size: clamp(1.9rem, 4vw, 3rem);
            line-height: 1;
            font-weight: 700;
            color: #f1e9e6;
        }

        .countdown-label {
            margin-top: .55rem;
            font-size: .78rem;
            letter-spacing: .24em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .58);
        }

        .countdown-note {
            margin-top: 1.25rem;
            text-align: center;
            color: rgba(255, 255, 255, .72);
            line-height: 1.8rem;
        }

        @media (max-width: 768px) {
            .countdown-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767px) {
            .section-space {
                padding-left: 1rem;
                padding-right: 1rem;
                padding-top: .8rem;
                padding-bottom: .8rem;
            }

            .main-hero {
                min-height: auto !important;
                padding-top: 1rem;
                align-items: flex-start;
            }

            .main-hero-card {
                border-radius: 28px !important;
                padding: 1.1rem !important;
                gap: 1.15rem;
            }

            .main-hero .hero-kicker,
            .section-label,
            .text-sm.uppercase.tracking-\[0\.35em\] {
                letter-spacing: .18em;
                font-size: .68rem;
            }

            .main-hero .hero-kicker {
                margin-bottom: .75rem;
                text-align: center;
            }

            .main-hero .hero-name {
                font-size: clamp(2.05rem, 12vw, 3rem);
                text-align: center;
            }

            section h2 {
                font-size: clamp(1.65rem, 8vw, 2.25rem) !important;
                line-height: 1.12 !important;
            }

            #countdown h2,
            #konfirmasi h2 {
                font-size: clamp(1.35rem, 6.2vw, 1.75rem) !important;
                line-height: 1.18 !important;
            }

            section h3 {
                line-height: 1.15 !important;
            }

            .main-hero p {
                margin-top: 1rem;
                text-align: center;
                font-size: .92rem;
                line-height: 1.65rem;
            }

            .main-hero .action-chip {
                justify-content: center;
            }

            .action-grid {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: .65rem !important;
                width: 100%;
            }

            .action-grid .action-chip,
            .action-grid button {
                width: 100%;
                min-width: 0;
                justify-content: center;
                text-align: center;
            }

            .action-grid .action-chip {
                height: 40px;
            }

            .action-grid--hero .action-chip:first-child {
                grid-column: 1 / -1;
            }

            .info-card,
            .soft-section-card,
            .reveal-card.rounded-3xl,
            .glass.reveal-card {
                border-radius: 24px !important;
                padding: 1rem !important;
            }

            .info-list {
                gap: .85rem !important;
            }

            .info-item {
                grid-template-columns: 44px minmax(0, 1fr) !important;
                gap: .75rem !important;
            }

            .info-icon {
                width: 44px !important;
                height: 44px !important;
                border-radius: 15px !important;
                font-size: .92rem;
            }

            .info-title {
                font-size: 1.45rem !important;
            }

            .info-label {
                letter-spacing: .16em;
                font-size: .66rem;
            }

            .info-value {
                font-size: .93rem !important;
                line-height: 1.45rem !important;
                overflow-wrap: anywhere;
            }

            .info-subvalue,
            .info-kicker {
                font-size: .84rem !important;
                line-height: 1.4rem !important;
                overflow-wrap: anywhere;
            }

            .action-chip {
                min-height: 38px !important;
                border-radius: 13px !important;
                padding: .52rem .55rem !important;
                font-size: clamp(.72rem, 3.2vw, .8rem) !important;
                gap: .45rem !important;
                line-height: 1.2 !important;
            }

            .action-chip i {
                width: 14px !important;
                font-size: .76rem;
                flex: 0 0 auto;
            }

            .action-chip span {
                min-width: 0;
                white-space: nowrap;
            }

            #konfirmasi .rsvp-action-grid {
                width: 100%;
                max-width: 18rem;
            }

            #konfirmasi .rsvp-action-grid button {
                height: 40px;
                min-height: 40px;
                border-radius: 14px !important;
                padding: .5rem .7rem !important;
                font-size: clamp(.72rem, 3.2vw, .8rem);
                line-height: 1.1;
                white-space: nowrap;
            }

            .countdown-grid {
                gap: .7rem;
                margin-top: 1rem;
            }

            .countdown-box {
                border-radius: 18px !important;
                padding: .9rem .55rem !important;
            }

            .countdown-value {
                font-size: clamp(1.65rem, 11vw, 2.35rem);
            }

            .countdown-label {
                margin-top: .4rem;
                font-size: .66rem;
                letter-spacing: .16em;
            }

            .countdown-note {
                margin-top: .9rem;
                font-size: .9rem;
                line-height: 1.55rem;
            }

            #mempelai .w-52 {
                width: 10rem;
                height: 10rem;
            }

            #mempelai h3 {
                font-size: 1.75rem;
                line-height: 2rem;
            }

            #mempelai p {
                font-size: .9rem;
                line-height: 1.55rem;
            }

            #galeri .gallery-item {
                min-height: 220px;
                border-radius: 22px;
            }

            #galeri h2 {
                font-size: clamp(1.45rem, 7vw, 1.95rem) !important;
                line-height: 1.16 !important;
            }

            #galeri p,
            #acara p {
                font-size: .9rem;
                line-height: 1.6rem;
            }

            #konfirmasi {
                padding-bottom: 1.2rem;
            }

            #konfirmasi input,
            #konfirmasi select,
            #konfirmasi textarea {
                border-radius: 16px;
                font-size: .92rem;
            }

            .wishes-scroll {
                max-height: 520px;
                padding-right: 0;
            }

            .music-panel {
                right: 12px;
                bottom: 12px;
            }

            .music-panel .glass {
                padding: .5rem;
                border-radius: 16px;
            }

            #musicToggle {
                width: 2.4rem;
                height: 2.4rem;
            }

            .petal {
                opacity: calc(var(--opacity) * 1.15);
            }

            .falling-leaf {
                opacity: calc(var(--opacity) * 1.2);
            }

            .flying-bird {
                opacity: calc(var(--opacity) * 1.35);
            }

            .gift-modal-wrap {
                padding: .9rem;
                align-items: center;
            }

            .gift-modal-card {
                max-width: 21rem;
                border-radius: 24px !important;
                padding: 1rem !important;
            }

            .gift-modal-head {
                gap: .75rem;
                margin-bottom: .85rem;
            }

            .gift-modal-title {
                font-size: 1.55rem !important;
                line-height: 1.1 !important;
            }

            .gift-modal-desc {
                margin-top: .45rem;
                font-size: .82rem;
                line-height: 1.45rem;
            }

            .gift-close-btn {
                width: 2.25rem !important;
                height: 2.25rem !important;
                border-radius: .8rem !important;
                flex: 0 0 auto;
            }

            .rekening-list {
                gap: .7rem !important;
            }

            .rekening-card {
                border-radius: 20px !important;
                padding: .95rem !important;
            }

            .rekening-card>div {
                display: grid !important;
                grid-template-columns: 1fr;
                gap: .65rem !important;
            }

            .rekening-bank {
                font-size: .67rem !important;
                letter-spacing: .22em !important;
                margin-bottom: .45rem !important;
            }

            .rekening-number {
                font-size: 1.25rem !important;
                line-height: 1.45rem !important;
                letter-spacing: .01em !important;
                overflow-wrap: anywhere;
            }

            .rekening-name {
                margin-top: .45rem !important;
                font-size: .84rem !important;
            }

            .copy-rekening {
                min-height: 31px;
                width: fit-content;
                justify-self: end;
                gap: .35rem !important;
                border-radius: 11px !important;
                padding: .38rem .62rem !important;
                font-size: .72rem !important;
                line-height: 1;
            }

            .copy-rekening i {
                font-size: .72rem;
            }

            #giftCopyInfo {
                border-radius: 14px !important;
                padding: .65rem .8rem !important;
                font-size: .78rem !important;
            }
        }

        @media (max-width: 380px) {
            .section-space {
                padding-left: .75rem;
                padding-right: .75rem;
            }

            .main-hero-card,
            .info-card,
            .soft-section-card,
            .reveal-card.rounded-3xl,
            .glass.reveal-card {
                padding: .85rem !important;
                border-radius: 21px !important;
            }

            .action-chip {
                justify-content: center;
            }

            .countdown-grid {
                gap: .55rem;
            }

            .countdown-box {
                padding: .75rem .45rem;
            }
        }

        .content-layer {
            position: relative;
            z-index: 1;
        }

        .closing-section {
            text-align: center;
        }

        .closing-quote {
            max-width: 820px;
            margin: 0 auto;
            font-size: 1.05rem;
            line-height: 2rem;
            color: rgba(255, 255, 255, .82);
        }

        .closing-note {
            max-width: 760px;
            margin: 1.25rem auto 0;
            color: rgba(255, 255, 255, .68);
            line-height: 1.9rem;
        }

        .site-footer {
            padding: 0 1.5rem 2.5rem;
        }

        .site-footer-inner {
            max-width: 1280px;
            margin: 0 auto;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, .10);
        }

        .footer-brand {
            color: rgba(255, 255, 255, .88);
            font-weight: 600;
        }

        .footer-link {
            color: #d8c0af;
            text-decoration: none;
        }

        .footer-link:hover {
            color: #efe3e8;
            text-decoration: underline;
        }

        .reveal-card {
            opacity: 0;
            transform: translateY(70px);
            filter: blur(10px);
            transition:
                opacity .9s cubic-bezier(.22, 1, .36, 1),
                transform .9s cubic-bezier(.22, 1, .36, 1),
                filter .9s cubic-bezier(.22, 1, .36, 1);
            will-change: opacity, transform, filter;
        }

        .reveal-card.is-visible {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }

        @media (prefers-reduced-motion: reduce) {

            .reveal-card,
            .reveal-card.is-visible {
                opacity: 1;
                transform: none;
                filter: none;
                transition: none;
            }

        }

        .info-card {
            border: 1px solid rgba(255, 255, 255, .10);
            background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
            border-radius: 30px;
            padding: 1.5rem;
            box-shadow: 0 16px 38px rgba(0, 0, 0, .16);
        }

        .info-list {
            display: grid;
            gap: 1rem;
        }

        .info-item {
            display: grid;
            grid-template-columns: 56px minmax(0, 1fr);
            gap: 1rem;
            align-items: start;
        }

        .info-icon {
            width: 56px;
            height: 56px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(216, 192, 175, .18), rgba(199, 156, 171, .12));
            border: 1px solid rgba(255, 255, 255, .10);
            color: #f1e9e6;
            box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
            flex-shrink: 0;
        }

        .info-label {
            font-size: .74rem;
            text-transform: uppercase;
            letter-spacing: .22em;
            color: rgba(255, 255, 255, .50);
            margin-bottom: .28rem;
        }

        .info-value {
            color: rgba(255, 255, 255, .94);
            font-size: 1.05rem;
            line-height: 1.7rem;
        }

        .info-subvalue {
            color: rgba(255, 255, 255, .66);
            font-size: .94rem;
            line-height: 1.6rem;
            margin-top: .18rem;
        }

        .info-item {
            display: grid;
            grid-template-columns: 56px minmax(0, 1fr);
            gap: 1rem;
            align-items: center;
        }

        .info-item.is-top {
            align-items: start;
        }

        .info-title {
            font-family: 'Marcellus', serif;
            font-size: 2rem;
            line-height: 1.2;
            color: rgba(255, 255, 255, .96);
        }

        .info-kicker {
            color: rgba(255, 255, 255, .60);
            margin-top: .3rem;
            line-height: 1.6rem;
        }

        .info-value {
            color: rgba(255, 255, 255, .95);
            font-size: 1.05rem;
            line-height: 1.7rem;
            font-weight: 600;
        }

        .info-subvalue {
            color: rgba(255, 255, 255, .68);
            font-size: .95rem;
            line-height: 1.7rem;
            margin-top: .15rem;
        }

        @media (max-width: 640px) {
            .info-title {
                font-size: 1.7rem;
            }
        }

        .info-divider {
            height: 1px;
            background: rgba(255, 255, 255, .10);
            margin: .2rem 0;
        }

        .action-chip {
            display: inline-flex;
            align-items: center;
            gap: .65rem;
            min-height: 48px;
            padding: .85rem 1.15rem;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .06);
            color: rgba(255, 255, 255, .90);
            transition: all .2s ease;
        }

        .action-chip:hover {
            background: rgba(255, 255, 255, .11);
        }

        .action-chip--primary {
            background: linear-gradient(to right, #d8c0af, #c79cab);
            color: #3c0f18;
            border-color: transparent;
        }

        .action-chip i {
            width: 18px;
            text-align: center;
        }

        @media (max-width: 640px) {
            .info-item {
                grid-template-columns: 50px minmax(0, 1fr);
                gap: .85rem;
            }

            .info-icon {
                width: 50px;
                height: 50px;
                border-radius: 18px;
            }

            .info-value {
                font-size: .98rem;
                line-height: 1.55rem;
            }

            .info-subvalue {
                font-size: .88rem;
                line-height: 1.45rem;
            }
        }

        .penutup-card {
            position: relative;
            overflow: hidden;
            border-radius: 34px;
            border: 1px solid rgba(255, 255, 255, .08);
            background:
                radial-gradient(circle at 30% 20%, rgba(183, 137, 151, .18), transparent 28%),
                radial-gradient(circle at 75% 70%, rgba(207, 175, 135, .08), transparent 24%),
                linear-gradient(135deg, rgba(60, 20, 33, .95) 0%, rgba(73, 31, 47, .92) 45%, rgba(51, 18, 28, .96) 100%);
            box-shadow:
                0 24px 60px rgba(0, 0, 0, .28),
                inset 0 1px 0 rgba(255, 255, 255, .04);
        }

        .penutup-inner {
            position: relative;
            z-index: 2;
            padding: 2.2rem 2.5rem 2rem;
        }

        .penutup-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(2.3rem, 4vw, 3.6rem);
            line-height: 1.05;
            font-weight: 700;
            color: #f8f1ef;
            text-align: left;
        }

        .penutup-copy {
            max-width: 860px;
            margin: 1.1rem auto 0;
            text-align: center;
        }

        .penutup-quote {
            margin: 0 auto;
            max-width: 900px;
            font-size: 1.05rem;
            line-height: 2rem;
            color: rgba(255, 255, 255, .86);
        }

        .penutup-note {
            margin: 1.2rem auto 0;
            max-width: 860px;
            font-size: 1rem;
            line-height: 1.95rem;
            color: rgba(255, 255, 255, .72);
        }

        .penutup-sign {
            margin-top: 1.8rem;
            text-align: right;
            font-size: clamp(1.5rem, 2vw, 2.2rem);
            font-weight: 700;
            color: #e7d0bf;
            font-family: 'Cormorant Garamond', serif;
        }

        .penutup-ornament {
            position: absolute;
            z-index: 1;
            width: 130px;
            height: 130px;
            background-image: url('/images/ornaments/under.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            opacity: 1;
            pointer-events: none;
        }

        .penutup-ornament--top-right {
            top: 10px;
            right: 18px;
        }

        .penutup-ornament--bottom-left {
            left: 18px;
            bottom: 6px;
            transform: rotate(180deg);
        }

        @media (max-width: 768px) {
            .penutup-inner {
                padding: 1.5rem 1.35rem 1.5rem;
            }

            .penutup-copy {
                margin-top: 1rem;
                max-width: 100%;
            }

            .penutup-quote,
            .penutup-note {
                max-width: 100%;
                font-size: .95rem;
                line-height: 1.8rem;
            }

            .penutup-ornament {
                width: 105px;
                height: 105px;
            }

            .penutup-ornament--top-right {
                top: 8px;
                right: 8px;
            }

            .penutup-ornament--bottom-left {
                left: 8px;
                bottom: 4px;
            }

            .penutup-sign {
                text-align: center;
            }
        }

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