/* =====================================================
   ROOT
===================================================== */

:root {

    --navy:
        #06232d;

    --navy-2:
        #0b2940;

    --gold:
        #d4af37;

    --gold-light:
        #f4df8b;

    --white:
        #ffffff;

    --muted:
        rgba(255,255,255,.68);

}


/* =====================================================
   GLOBAL
===================================================== */

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    background:
        var(--navy);

    color:
        var(--white);

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

}


body::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .05;

    background-image:

        radial-gradient(
            circle at 20% 20%,
            var(--gold),
            transparent 1px
        );

    background-size:
        45px 45px;

    z-index:
        0;

}


h1,
h2,
h3,
h4 {

    font-family:
        "Cormorant Garamond",
        serif;

}


.section {

    position:
        relative;

    padding:
        100px 0;

    overflow:
        hidden;

}


.container {

    position:
        relative;

    z-index:
        2;

}


/* =====================================================
   LOADING
===================================================== */

#loadingScreen {

    position:
        fixed;

    inset:
        0;

    z-index:
        99999;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    background:
        var(--navy);

    transition:
        opacity .7s,
        visibility .7s;

}


.loading-hide {

    opacity:
        0;

    visibility:
        hidden;

}


.loading-content {

    text-align:
        center;

}


.loading-content h5 {

    color:
        var(--gold-light);

}


.loading-content p {

    color:
        var(--muted);

}


.islamic-loader {

    width:
        80px;

    height:
        80px;

    margin:
        auto;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border:
        2px solid
        var(--gold);

    border-radius:
        50%;

    animation:
        rotateLoader
        4s
        linear
        infinite;

}


.islamic-loader i {

    color:
        var(--gold-light);

    font-size:
        30px;

}


@keyframes rotateLoader {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


/* =====================================================
   OPENING
===================================================== */

.opening-section {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at center,
            rgba(212,175,55,.15),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #04111e,
            #0b2940
        );

}


.opening-section::before {

    content:
        "";

    position:
        absolute;

    width:
        700px;

    height:
        700px;

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

    border-radius:
        50%;

    animation:
        pulseCircle
        8s
        ease-in-out
        infinite;

}


.opening-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            45deg,
            transparent 48%,
            rgba(212,175,55,.04) 50%,
            transparent 52%
        );

    background-size:
        60px 60px;

}


.opening-content {

    position:
        relative;

    z-index:
        3;

    text-align:
        center;

    padding:
        30px;

}


.bismillah {

    color:
        var(--gold-light);

    font-size:
        28px;

    margin-bottom:
        20px;

}


.opening-small {

    letter-spacing:
        5px;

    color:
        var(--muted);

    text-transform:
        uppercase;

}


.opening-name {

    font-size:
        clamp(
            55px,
            10vw,
            110px
        );

    color:
        var(--gold-light);

    margin:
        20px 0;

    text-shadow:
        0 10px 40px
        rgba(0,0,0,.5);

}


.amp {

    color:
        var(--white);

    margin:
        0 12px;

}


.opening-date {

    color:
        var(--muted);

    font-size:
        17px;

}


.opening-hide {

    animation:
        openingOut
        1s
        forwards;

}


@keyframes openingOut {

    to {

        opacity:
            0;

        transform:
            scale(1.08);

    }

}


@keyframes pulseCircle {

    0%,
    100% {

        transform:
            scale(.85);

        opacity:
            .3;

    }

    50% {

        transform:
            scale(1.1);

        opacity:
            .7;

    }

}


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

.btn-gold {

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );

    color:
        var(--navy);

    border:
        none;

    border-radius:
        50px;

    padding:
        12px 25px;

    font-weight:
        600;

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

}


.btn-gold:hover {

    transform:
        translateY(-3px);

    color:
        var(--navy);

}


.btn-outline-gold {

    border:
        1px solid
        var(--gold);

    color:
        var(--gold-light);

    border-radius:
        50px;

}


.btn-outline-gold:hover {

    background:
        var(--gold);

    color:
        var(--navy);

}


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

.hero-section {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

    perspective:
        1200px;

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(212,175,55,.13),
            transparent 45%
        );

}


.hero-card {

    max-width:
        850px;

    margin:
        auto;

    padding:
        70px 40px;

    text-align:
        center;

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

    border-radius:
        35px;

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

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.35);

    transform-style:
        preserve-3d;

    transition:
        transform .3s ease;

}


.ornament-top,
.ornament-bottom {

    color:
        var(--gold);

    font-size:
        30px;

}


.hero-subtitle {

    font-size:
        28px;

    color:
        var(--gold-light);

}


.hero-label {

    color:
        var(--muted);

    letter-spacing:
        5px;

    text-transform:
        uppercase;

}


.couple-name {

    font-size:
        clamp(
            55px,
            9vw,
            100px
        );

    color:
        var(--gold-light);

    margin:
        20px 0;

}


.hero-date {

    color:
        var(--muted);

}


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

.section-title {

    text-align:
        center;

    margin-bottom:
        60px;

}


.section-title span {

    color:
        var(--gold);

    letter-spacing:
        4px;

    text-transform:
        uppercase;

    font-size:
        13px;

}


.section-title h2 {

    font-size:
        52px;

    color:
        var(--gold-light);

    margin:
        8px 0;

}


.section-title p {

    max-width:
        650px;

    margin:
        auto;

    color:
        var(--muted);

}


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

.quote-section {

    padding-top:
        40px;

}


.quote-card {

    max-width:
        850px;

    margin:
        auto;

    text-align:
        center;

    padding:
        45px;

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

    border-radius:
        30px;

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

}


.arabic {

    font-size:
        34px;

    line-height:
        2;

    color:
        var(--gold-light);

}


.translation {

    color:
        var(--muted);

    font-style:
        italic;

    line-height:
        1.8;

}


.quote-card small {

    color:
        var(--gold);

}


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

.couple-card {

    text-align:
        center;

    padding:
        30px;

}


.photo-3d {

    width:
        260px;

    height:
        340px;

    margin:
        auto auto 25px;

    padding:
        8px;

    border:
        1px solid
        var(--gold);

    border-radius:
        130px 130px 30px 30px;

    transform:
        perspective(900px)
        rotateY(0deg);

    transition:
        transform .6s ease;

}


.couple-card:hover
.photo-3d {

    transform:
        perspective(900px)
        rotateY(10deg)
        rotateX(5deg)
        translateY(-10px);

}


.photo-3d img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        120px 120px 22px 22px;

}


.couple-card h3 {

    font-size:
        38px;

    color:
        var(--gold-light);

}


.parent-text {

    color:
        var(--muted);

    line-height:
        1.8;

}


/* =====================================================
   COUNTDOWN
===================================================== */

.countdown-section {

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

}


.countdown-grid {

    display:
        grid;

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

    gap:
        18px;

    max-width:
        800px;

    margin:
        auto;

}


.count-card {

    padding:
        30px 15px;

    text-align:
        center;

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

    border-radius:
        25px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.02)
        );

    transform:
        perspective(600px)
        rotateX(0deg);

    transition:
        .4s;

}


.count-card:hover {

    transform:
        perspective(600px)
        rotateX(8deg)
        translateY(-7px);

}


.count-card strong {

    display:
        block;

    font-size:
        50px;

    font-family:
        "Cormorant Garamond";

    color:
        var(--gold-light);

}


.count-card span {

    color:
        var(--muted);

}


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

.event-card {

    text-align:
        center;

    padding:
        45px 30px;

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

    border-radius:
        30px;

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

    height:
        100%;

    transition:
        .4s;

}


.event-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.3);

}


.event-icon {

    width:
        70px;

    height:
        70px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    margin:
        auto auto 20px;

    border:
        1px solid
        var(--gold);

    border-radius:
        50%;

    color:
        var(--gold-light);

    font-size:
        28px;

}


.event-card h3 {

    color:
        var(--gold-light);

    font-size:
        36px;

}


.event-date {

    color:
        var(--gold);

    margin:
        15px 0 5px;

}


.event-time {

    color:
        var(--white);

}


.event-location {

    color:
        var(--muted);

    margin:
        20px 0;

}


/* =====================================================
   STORY
===================================================== */

.story-section {

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

}


.timeline {

    max-width:
        850px;

    margin:
        auto;

    position:
        relative;

}


.timeline::before {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    background:
        linear-gradient(
            transparent,
            var(--gold),
            transparent
        );

}


.timeline-item {

    position:
        relative;

    width:
        50%;

    padding:
        20px 40px;

}


.timeline-item:nth-child(
    odd
) {

    left:
        0;

    text-align:
        right;

}


.timeline-item:nth-child(
    even
) {

    left:
        50%;

}


.timeline-dot {

    position:
        absolute;

    top:
        30px;

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--gold);

    border-radius:
        50%;

    background:
        var(--navy);

    color:
        var(--gold);

    z-index:
        2;

}


.timeline-item:nth-child(
    odd
) .timeline-dot {

    right:
        -18px;

}


.timeline-item:nth-child(
    even
) .timeline-dot {

    left:
        -18px;

}


.timeline-card {

    padding:
        25px;

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

    border-radius:
        20px;

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

}


.timeline-year {

    color:
        var(--gold);

    font-weight:
        600;

}


.timeline-card h4 {

    color:
        var(--gold-light);

    font-size:
        30px;

    margin:
        8px 0;

}


.timeline-card p {

    color:
        var(--muted);

    margin:
        0;

    line-height:
        1.7;

}


/* =====================================================
   GALLERY
===================================================== */

.gallery-item {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        20px;

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

    cursor:
        pointer;

    aspect-ratio:
        1 / 1;

}


.gallery-item img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .6s;

}


.gallery-item:hover img {

    transform:
        scale(1.1);

}


.gallery-overlay {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

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

    opacity:
        0;

    transition:
        .4s;

}


.gallery-item:hover
.gallery-overlay {

    opacity:
        1;

}


.gallery-overlay i {

    font-size:
        30px;

    color:
        var(--gold-light);

}


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

.image-lightbox {

    position:
        fixed;

    inset:
        0;

    z-index:
        100000;

    background:
        rgba(0,0,0,.92);

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        30px;

}


.image-lightbox img {

    max-width:
        95%;

    max-height:
        90vh;

    border-radius:
        15px;

}


.lightbox-close {

    position:
        absolute;

    top:
        25px;

    right:
        25px;

    width:
        45px;

    height:
        45px;

    border:
        1px solid
        var(--gold);

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--gold-light);

}


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

.gift-section {

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

}


.gift-card {

    text-align:
        center;

    padding:
        45px;

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

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.02)
        );

}


.bank-logo {

    color:
        var(--gold);

    font-weight:
        700;

    letter-spacing:
        3px;

}


.gift-card h4 {

    font-size:
        30px;

    color:
        var(--gold-light);

}


.rekening {

    font-size:
        32px;

    letter-spacing:
        2px;

    margin:
        15px 0;

}


.rekening-name {

    color:
        var(--muted);

}


/* =====================================================
   RSVP
===================================================== */

.rsvp-card {

    padding:
        35px;

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

    border-radius:
        30px;

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

}


.rsvp-card label {

    color:
        var(--gold-light);

    margin-bottom:
        7px;

}


.rsvp-card .form-control,
.rsvp-card .form-select {

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

    color:
        white;

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

    border-radius:
        12px;

}


.rsvp-card .form-control:focus,
.rsvp-card .form-select:focus {

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

    color:
        white;

    border-color:
        var(--gold);

    box-shadow:
        none;

}


.rsvp-card option {

    color:
        black;

}


.wish-card {

    max-width:
        800px;

    margin:
        0 auto 15px;

    padding:
        20px 25px;

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

    border-radius:
        18px;

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

}


.wish-card strong {

    color:
        var(--gold-light);

}


.wish-card p {

    color:
        var(--muted);

}


.wish-badge {

    font-size:
        12px;

    padding:
        5px 10px;

    border-radius:
        20px;

    color:
        var(--gold-light);

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

}


/* =====================================================
   EMPTY
===================================================== */

.empty-content {

    text-align:
        center;

    padding:
        50px;

    color:
        var(--muted);

}


.empty-content i {

    font-size:
        45px;

    color:
        var(--gold);

    display:
        block;

    margin-bottom:
        15px;

}


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

.music-button {

    position:
        fixed;

    right:
        20px;

    bottom:
        20px;

    z-index:
        5000;

    width:
        52px;

    height:
        52px;

    border:
        1px solid
        var(--gold);

    border-radius:
        50%;

    background:
        rgba(6,26,45,.85);

    color:
        var(--gold-light);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.3);

}


.music-button:hover {

    transform:
        scale(1.08);

}


/* =====================================================
   FOOTER
===================================================== */

.footer {

    padding:
        70px 20px;

    background:
        #04121f;

}


.footer-bismillah {

    color:
        var(--gold-light);

    font-size:
        25px;

}


.footer h3 {

    font-size:
        42px;

    color:
        var(--gold-light);

    margin:
        15px 0;

}


.footer p {

    color:
        var(--muted);

}


.footer-brand {

    margin-top:
        30px;

    color:
        var(--gold);

    letter-spacing:
        3px;

    font-weight:
        600;

}


/* =====================================================
   TOAST
===================================================== */

.custom-toast {

    position:
        fixed;

    left:
        50%;

    bottom:
        30px;

    transform:
        translateX(-50%);

    z-index:
        100001;

    background:
        #102c40;

    color:
        white;

    border:
        1px solid
        var(--gold);

    border-radius:
        50px;

    padding:
        12px 25px;

    box-shadow:
        0 10px 40px
        rgba(0,0,0,.4);

    animation:
        toastIn .4s ease;

}


.toast-hide {

    opacity:
        0;

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

    transition:
        .4s;

}


@keyframes toastIn {

    from {

        opacity:
            0;

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

    }

    to {

        opacity:
            1;

        transform:
            translateX(-50%);

    }

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (
    max-width: 768px
) {


    .section {

        padding:
            75px 0;

    }


    .bismillah {

        font-size:
            21px;

    }


    .opening-name {

        font-size:
            55px;

    }


    .couple-name {

        font-size:
            55px;

    }


    .section-title h2 {

        font-size:
            42px;

    }


    .arabic {

        font-size:
            25px;

    }


    .countdown-grid {

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

    }


    .count-card strong {

        font-size:
            42px;

    }


    .timeline::before {

        left:
            15px;

    }


    .timeline-item {

        width:
            100%;

        left:
            0 !important;

        text-align:
            left !important;

        padding:
            15px 15px 15px 50px;

    }


    .timeline-item
    .timeline-dot {

        left:
            -2px !important;

        right:
            auto !important;

    }


    .photo-3d {

        width:
            220px;

        height:
            290px;

    }


    .rekening {

        font-size:
            25px;

    }

}
/* =====================================================
   PERSONALIZED GUEST
===================================================== */

.guest-invitation {

    margin:
        25px auto 0;

    max-width:
        420px;

    padding:
        20px 30px;

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

    border-radius:
        20px;

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

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.2);

}


.guest-label {

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

    font-size:
        12px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.guest-name {

    margin-top:
        5px;

    color:
        var(--gold-light);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        30px;

    font-weight:
        600;

}


.guest-address {

    margin-top:
        3px;

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

    font-size:
        12px;

}


.guest-invitation::before {

    content:
        "✦";

    display:
        block;

    color:
        var(--gold);

    margin-bottom:
        5px;

}


@media (max-width:768px) {

    .guest-invitation {

        max-width:
            90%;

        padding:
            17px 20px;

    }


    .guest-name {

        font-size:
            27px;

    }

}
.islamic-frame {

    position: fixed;

    inset: 15px;

    pointer-events: none;

    z-index: 30;

}


.frame-corner {

    position: absolute;

    width: 100px;

    height: 100px;

    border-color:
        #d6b65d;

    border-style:
        solid;

    opacity: .7;

    filter:
        drop-shadow(
            5px 6px 4px
            rgba(0,0,0,.25)
        );

}


.top-left {

    top: 0;

    left: 0;

    border-width:
        4px 0 0 4px;

    border-radius:
        30px 0 0 0;

}


.top-right {

    top: 0;

    right: 0;

    border-width:
        4px 4px 0 0;

    border-radius:
        0 30px 0 0;

}


.bottom-left {

    bottom: 0;

    left: 0;

    border-width:
        0 0 4px 4px;

    border-radius:
        0 0 0 30px;

}


.bottom-right {

    bottom: 0;

    right: 0;

    border-width:
        0 4px 4px 0;

    border-radius:
        0 0 30px 0;

}
/* ==========================================
   PREMIUM FALLING ISLAMIC ORNAMENT
========================================== */

#fallingOrnaments {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 999;
}

/* Ornamen */

.falling-ornament {
    position: absolute;
    top: -80px;

    color: #d8b65a;

    font-size: 25px;

    opacity: 0;

    text-shadow:
        0 2px 3px rgba(0,0,0,.25),
        0 0 10px rgba(216,182,90,.35);

    filter:
        drop-shadow(
            3px 5px 4px
            rgba(0,0,0,.18)
        );

    animation:
        ornamentFall linear forwards;

}


/* Bentuk bulan */

.falling-ornament.crescent {

    font-size: 30px;

}


/* Bintang */

.falling-ornament.star {

    font-size: 22px;

}


/* Ornamen geometris */

.falling-ornament.diamond {

    width: 17px;

    height: 17px;

    border:
        2px solid
        #d8b65a;

    transform:
        rotate(45deg);

    background:
        linear-gradient(
            135deg,
            rgba(255,240,170,.35),
            rgba(130,90,20,.25)
        );

}


/* Ornamen kecil */

.falling-ornament.dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        #e5c875;

    box-shadow:
        0 0 10px
        rgba(229,200,117,.7);

}


/* ==========================================
   ANIMATION
========================================== */

@keyframes ornamentFall {

    0% {

        transform:
            translate3d(
                0,
                -80px,
                0
            )
            rotateX(0deg)
            rotateY(0deg)
            rotateZ(0deg)
            scale(.7);

        opacity: 0;

    }


    8% {

        opacity:
            .9;

    }


    25% {

        transform:
            translate3d(
                30px,
                25vh,
                0
            )
            rotateX(90deg)
            rotateY(35deg)
            rotateZ(90deg)
            scale(1);

    }


    50% {

        transform:
            translate3d(
                -35px,
                50vh,
                0
            )
            rotateX(180deg)
            rotateY(90deg)
            rotateZ(180deg)
            scale(.9);

    }


    75% {

        transform:
            translate3d(
                40px,
                75vh,
                0
            )
            rotateX(270deg)
            rotateY(180deg)
            rotateZ(270deg)
            scale(1.1);

    }


    100% {

        transform:
            translate3d(
                -20px,
                115vh,
                0
            )
            rotateX(360deg)
            rotateY(360deg)
            rotateZ(360deg)
            scale(.8);

        opacity:
            0;

    }

}
@media (max-width: 576px) {

    .falling-ornament {

        filter:
            drop-shadow(
                2px 3px 3px
                rgba(0,0,0,.15)
            );

    }

}
/* =====================================================
   ISLAMIC 3D DECORATION
===================================================== */

.islamic-3d-decoration {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 20;

    overflow: hidden;

}


/* =====================================================
   BULAN SABIT 3D
===================================================== */

.crescent-3d {

    position: absolute;

    top: 60px;

    right: 60px;

    width: 95px;

    height: 95px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 35% 35%,
            #fff7c9 0%,
            #d9b85c 35%,
            #9c7628 70%,
            #624914 100%
        );

    box-shadow:

        10px 15px 25px
        rgba(0,0,0,.25),

        inset
        -8px -8px 15px
        rgba(0,0,0,.25),

        inset
        8px 8px 15px
        rgba(255,255,255,.35);

    transform:
        rotate(-20deg);

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

}


/*
   Membuat potongan bulan
*/

.crescent-3d::after {

    content: "";

    position: absolute;

    top: -8px;

    left: 27px;

    width: 90px;

    height: 90px;

    border-radius: 50%;

    background:
        #173c2a;

    box-shadow:
        -3px 3px 5px
        rgba(0,0,0,.2);

}



/* =====================================================
   BINTANG 3D
===================================================== */

.star-3d {

    position: absolute;

    color: #e0c269;

    font-size: 35px;

    text-shadow:

        3px 4px 0
        #8c6925,

        0 0 15px
        rgba(224,194,105,.7);

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

}


.star-1 {

    top: 150px;

    right: 170px;

}


.star-2 {

    top: 110px;

    left: 100px;

    font-size: 25px;

    animation-delay:
        1s;

}


.star-3 {

    bottom: 130px;

    right: 100px;

    font-size: 30px;

    animation-delay:
        2s;

}



/* =====================================================
   ISLAMIC GEOMETRIC PATTERN
===================================================== */

.islamic-pattern {

    position: absolute;

    width: 220px;

    height: 220px;

    opacity: .22;

    background:

        linear-gradient(
            30deg,
            transparent 45%,
            #d4b45c 46%,
            #d4b45c 49%,
            transparent 50%
        ),

        linear-gradient(
            150deg,
            transparent 45%,
            #d4b45c 46%,
            #d4b45c 49%,
            transparent 50%
        );

    background-size:
        55px 55px;

    transform:
        rotate(45deg)
        perspective(500px)
        rotateX(20deg);

    filter:
        drop-shadow(
            8px 10px 5px
            rgba(0,0,0,.15)
        );

}


.pattern-left {

    left: -100px;

    top: 25%;

}


.pattern-right {

    right: -100px;

    bottom: 20%;

    transform:
        rotate(-45deg)
        perspective(500px)
        rotateX(20deg);

}



/* =====================================================
   ORNAMEN ATAS
===================================================== */

.ornament-top-3d {

    position: absolute;

    top: 0;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: flex-start;

    justify-content: center;

}


.ornament-top-3d span {

    display: block;

    width: 45px;

    height: 80px;

    margin: 0 3px;

    border-left:
        2px solid
        rgba(215,185,95,.7);

    border-right:
        2px solid
        rgba(215,185,95,.7);

    border-bottom:
        2px solid
        rgba(215,185,95,.7);

    border-radius:
        0 0 50px 50px;

    transform:
        perspective(400px)
        rotateY(25deg);

    box-shadow:

        5px 8px 10px
        rgba(0,0,0,.15);

}


.ornament-top-3d span:nth-child(2) {

    height: 110px;

    width: 60px;

}



/* =====================================================
   ORNAMEN BAWAH
===================================================== */

.ornament-bottom-3d {

    position: absolute;

    bottom: 0;

    left: 50%;

    transform:
        translateX(-50%)
        rotate(180deg);

    display: flex;

}


.ornament-bottom-3d span {

    width: 45px;

    height: 70px;

    margin: 0 3px;

    border-left:
        2px solid
        rgba(215,185,95,.6);

    border-right:
        2px solid
        rgba(215,185,95,.6);

    border-bottom:
        2px solid
        rgba(215,185,95,.6);

    border-radius:
        0 0 50px 50px;

}



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

@keyframes moonFloat {

    0% {

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

    }

    50% {

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

    }

    100% {

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

    }

}



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

@keyframes starFloat {

    0%,
    100% {

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

    }

    50% {

        transform:
            translateY(-15px)
            rotate(15deg)
            scale(1.15);

    }

}



/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 576px) {

    .crescent-3d {

        width: 65px;

        height: 65px;

        top: 35px;

        right: 25px;

    }


    .crescent-3d::after {

        width: 62px;

        height: 62px;

        left: 20px;

        top: -5px;

    }


    .star-1 {

        top: 100px;

        right: 110px;

    }


    .star-2 {

        left: 35px;

        top: 90px;

    }


    .pattern-left {

        left: -150px;

    }


    .pattern-right {

        right: -150px;

    }


    .ornament-top-3d span {

        width: 30px;

        height: 55px;

    }


    .ornament-top-3d span:nth-child(2) {

        height: 75px;

        width: 40px;

    }

}
.cover {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            rgba(15, 48, 34, .65),
            rgba(10, 35, 25, .85)
        ),
        url("../assets/cover.jpg")
        center / cover no-repeat;

    overflow: hidden;

}


.cover-content {

    position: relative;

    z-index: 5;

    width: 90%;

    max-width: 600px;

    text-align: center;

    color: white;

}


.cover-label {

    font-size: 12px;

    letter-spacing: 6px;

    color: #d9bc69;

}


.couple-name {

    font-family:
        "Cinzel",
        serif;

    font-size:
        clamp(45px, 9vw, 85px);

    margin:
        15px 0 35px;

}


.guest-box {

    margin:
        0 auto 30px;

    padding:
        20px 30px;

    max-width:
        400px;

    border:
        1px solid
        rgba(218, 190, 105, .55);

    border-radius:
        20px;

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

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.2);

}


.guest-box small {

    display: block;

    color:
        #e0c77d;

    margin-bottom:
        8px;

}


.guest-box h3 {

    margin:
        0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        25px;

    color:
        white;

    word-break:
        break-word;

}


.guest-box span {

    display:
        block;

    margin-top:
        5px;

    font-size:
        13px;

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

}


.btn-open {

    border:
        1px solid #d9bc69;

    background:
        linear-gradient(
            135deg,
            #b18b36,
            #e0c77d
        );

    color:
        #173a29;

    padding:
        13px 28px;

    border-radius:
        50px;

    font-weight:
        600;

    transition:
        .4s;

}


.btn-open:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 10px 30px
        rgba(218,190,105,.3);

}   
/* =========================================================
   FAHRI & MEGA — MODERN ISLAMIC ROYAL REDESIGN
   Visual-only enhancement: existing HTML/JS functionality
   is preserved.
========================================================= */

:root{
    --navy:#071d18;
    --navy-2:#0d3027;
    --green:#123f32;
    --green-soft:#1a5141;
    --gold:#c9a24b;
    --gold-light:#f1d58a;
    --cream:#f6f0e3;
    --cream-2:#ede3ce;
    --text-dark:#25342f;
    --muted-dark:#68746f;
    --glass:rgba(255,255,255,.055);
    --line:rgba(201,162,75,.30);
}

/* Fine Islamic geometry across the page */
body{
    background:
      radial-gradient(circle at 15% 10%, rgba(201,162,75,.09), transparent 25%),
      radial-gradient(circle at 85% 75%, rgba(201,162,75,.07), transparent 28%),
      linear-gradient(145deg,#061914 0%,#0a261f 48%,#071b17 100%);
    color:#fff;
}
body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    opacity:.055;
    background:
      repeating-conic-gradient(from 45deg, transparent 0 8deg, rgba(241,213,138,.75) 8.2deg 9deg, transparent 9.2deg 18deg);
    background-size:90px 90px;
    mask-image:linear-gradient(to bottom,black,transparent 88%);
}

/* Section depth + ornamental borders */
.section{
    padding:110px 0;
    background:
      radial-gradient(circle at 50% 0, rgba(201,162,75,.075), transparent 34%);
}
.section:nth-of-type(even){
    background-color:rgba(255,255,255,.012);
}
.section::before,
.section::after{
    content:"✦";
    position:absolute;
    color:rgba(201,162,75,.22);
    font-family:"Cormorant Garamond",serif;
    font-size:72px;
    line-height:1;
    pointer-events:none;
}
.section::before{left:2.5%;top:55px;transform:rotate(-18deg);}
.section::after{right:2.5%;bottom:45px;transform:rotate(18deg);}

.section-title{
    position:relative;
    margin-bottom:68px;
}
.section-title::after{
    content:"";
    display:block;
    width:110px;
    height:1px;
    margin:18px auto 0;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    box-shadow:0 0 14px rgba(201,162,75,.25);
}
.section-title span{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--gold-light);
    letter-spacing:4px;
}
.section-title span::before,
.section-title span::after{
    content:"✦";
    font-size:10px;
    opacity:.75;
}
.section-title h2{
    font-size:clamp(40px,5vw,58px);
    letter-spacing:.5px;
}

/* Opening: luxury arch + geometric veil */
.opening-section{
    background:
      radial-gradient(circle at 50% 38%,rgba(201,162,75,.20),transparent 24%),
      linear-gradient(135deg,rgba(4,18,14,.84),rgba(7,40,31,.88)),
      url("../assets/cover.jpg") center/cover no-repeat;
}
.opening-section::before{
    content:"";
    position:absolute;
    width:min(72vw,720px);
    height:min(90vh,900px);
    left:50%;
    bottom:-42%;
    transform:translateX(-50%);
    border:1px solid rgba(241,213,138,.23);
    border-radius:50% 50% 0 0;
    box-shadow:
      0 0 0 12px rgba(201,162,75,.035),
      0 0 0 30px rgba(201,162,75,.025),
      inset 0 0 80px rgba(201,162,75,.04);
}
.opening-overlay{
    opacity:.65;
    background:
      repeating-linear-gradient(45deg,transparent 0 24px,rgba(241,213,138,.025) 25px 26px),
      repeating-linear-gradient(-45deg,transparent 0 24px,rgba(241,213,138,.025) 25px 26px);
}
.opening-content{
    max-width:900px;
    padding:55px 24px;
}
.opening-content::before,
.opening-content::after{
    content:"";
    position:absolute;
    top:50%;
    width:115px;
    height:115px;
    border:1px solid rgba(201,162,75,.20);
    transform:translateY(-50%) rotate(45deg);
}
.opening-content::before{left:-85px;}
.opening-content::after{right:-85px;}
.opening-name{
    font-size:clamp(58px,10vw,118px);
    letter-spacing:1px;
    text-shadow:0 14px 45px rgba(0,0,0,.48);
}
.opening-name .amp{font-size:.55em;color:#fff9e9;}
.opening-date{letter-spacing:2px;color:#dfc984;}
.guest-wrapper{
    width:min(92%,460px);
    margin:28px auto 0;
    padding:18px 26px 20px;
    border:1px solid rgba(241,213,138,.35);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
    backdrop-filter:blur(14px);
    box-shadow:0 24px 70px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.10);
}
.guest-wrapper p{
    margin:0 0 5px;
    color:#cfc8b6;
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
}
.guest-wrapper h3{
    margin:0;
    color:#fff9e9;
    font-family:"Cormorant Garamond",serif;
    font-size:30px;
}

/* Gold button becomes premium */
.btn-gold{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#9e792e 0%,#d6b65e 48%,#f2d98d 100%);
    border:1px solid rgba(255,244,190,.55);
    color:#102a22;
    box-shadow:0 12px 35px rgba(201,162,75,.20), inset 0 1px rgba(255,255,255,.7);
}
.btn-gold::after{
    content:"";
    position:absolute;
    top:-120%;
    left:-30%;
    width:25%;
    height:340%;
    transform:rotate(25deg);
    background:rgba(255,255,255,.35);
    transition:.65s;
}
.btn-gold:hover::after{left:115%;}

/* Hero as a royal invitation card */
.hero-section{
    background:
      radial-gradient(circle at 50% 40%,rgba(201,162,75,.14),transparent 38%),
      linear-gradient(180deg,#0a2b22,#071c18);
}
.hero-card{
    position:relative;
    overflow:hidden;
    border-radius:34px;
    border:1px solid rgba(241,213,138,.28);
    background:
      linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018));
    box-shadow:0 35px 100px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.10);
}
.hero-card::before,
.hero-card::after{
    content:"";
    position:absolute;
    width:180px;height:180px;
    border:1px solid rgba(201,162,75,.22);
    transform:rotate(45deg);
}
.hero-card::before{left:-105px;top:-105px;}
.hero-card::after{right:-105px;bottom:-105px;}
.ornament-top,.ornament-bottom{
    color:var(--gold-light);
    text-shadow:0 0 18px rgba(241,213,138,.30);
}

/* Quran card: parchment glass */
.quote-card{
    position:relative;
    overflow:hidden;
    background:
      linear-gradient(145deg,rgba(246,240,227,.085),rgba(255,255,255,.025));
    border:1px solid rgba(201,162,75,.28);
    border-radius:28px;
    box-shadow:0 25px 70px rgba(0,0,0,.24);
}
.quote-card::before{
    content:"۞";
    position:absolute;
    left:22px;top:14px;
    font-size:40px;
    color:rgba(201,162,75,.20);
}
.quote-card::after{
    content:"۞";
    position:absolute;
    right:22px;bottom:10px;
    font-size:40px;
    color:rgba(201,162,75,.20);
}
.arabic{
    font-family:"Cormorant Garamond","Amiri",serif;
    font-size:clamp(28px,4vw,42px);
    color:#f4dfa4;
}

/* Couple portraits: arch + gold halo */
.couple-card{
    position:relative;
    padding:32px 20px 35px;
    border-radius:30px;
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
    border:1px solid rgba(201,162,75,.15);
    transition:.5s ease;
}
.couple-card::before{
    content:"";
    position:absolute;
    inset:12px;
    border:1px solid rgba(201,162,75,.08);
    border-radius:24px;
    pointer-events:none;
}
.couple-card:hover{
    transform:translateY(-10px);
    border-color:rgba(201,162,75,.35);
    box-shadow:0 28px 65px rgba(0,0,0,.28);
}
.photo-3d{
    position:relative;
    width:min(270px,75vw);
    height:min(350px,96vw);
    border:1px solid rgba(241,213,138,.70);
    border-radius:150px 150px 28px 28px;
    padding:7px;
    box-shadow:
      0 25px 55px rgba(0,0,0,.32),
      0 0 0 8px rgba(201,162,75,.035);
}
.photo-3d::before{
    content:"";
    position:absolute;
    inset:-13px;
    border:1px solid rgba(201,162,75,.16);
    border-radius:165px 165px 40px 40px;
    pointer-events:none;
}
.photo-3d img{
    filter:saturate(.92) contrast(1.03);
}
.couple-card h3{
    font-size:42px;
    margin-top:22px;
    color:#f0d58d;
}

/* Countdown = jewel cards */
.countdown-section{
    background:
      linear-gradient(180deg,rgba(201,162,75,.035),rgba(0,0,0,.08)),
      #09241d;
}
.countdown-grid{gap:20px;}
.count-card{
    position:relative;
    overflow:hidden;
    border-radius:22px;
    padding:28px 12px;
    background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.018));
    border:1px solid rgba(201,162,75,.25);
    box-shadow:0 18px 45px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.08);
}
.count-card::after{
    content:"✦";
    position:absolute;
    right:12px;top:8px;
    color:rgba(241,213,138,.18);
}
.count-card strong{
    font-size:clamp(40px,6vw,56px);
    color:#f4da95;
}

/* Event cards become Islamic arch panels */
.event-card{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
    border:1px solid rgba(201,162,75,.23);
    box-shadow:0 22px 60px rgba(0,0,0,.20);
}
.event-card::before{
    content:"";
    position:absolute;
    width:180px;height:180px;
    left:50%;top:-115px;
    transform:translateX(-50%) rotate(45deg);
    border:1px solid rgba(201,162,75,.13);
}
.event-icon{
    background:rgba(201,162,75,.06);
    box-shadow:0 0 0 8px rgba(201,162,75,.025),0 10px 30px rgba(0,0,0,.20);
}

/* Story timeline */
.timeline::before{
    width:2px;
    background:linear-gradient(transparent,#9f7b34 10%,#efd38a 50%,#9f7b34 90%,transparent);
    box-shadow:0 0 14px rgba(201,162,75,.22);
}
.timeline-dot{
    background:#0b2b22;
    box-shadow:0 0 0 7px rgba(201,162,75,.055),0 0 20px rgba(201,162,75,.22);
}

/* Generic cards generated by JS */
.gallery-item,
.gift-card,
.wish-card,
.story-card,
.rsvp-card,
.form-card{
    border-color:rgba(201,162,75,.20)!important;
    box-shadow:0 20px 55px rgba(0,0,0,.20)!important;
    border-radius:26px!important;
}

/* Forms */
.form-control,.form-select{
    background:rgba(255,255,255,.045)!important;
    color:#fff!important;
    border:1px solid rgba(201,162,75,.20)!important;
    border-radius:14px!important;
}
.form-control:focus,.form-select:focus{
    border-color:rgba(241,213,138,.65)!important;
    box-shadow:0 0 0 4px rgba(201,162,75,.08)!important;
}
.form-control::placeholder{color:rgba(255,255,255,.42)!important;}

/* Footer */
.footer{
    position:relative;
    overflow:hidden;
    background:#04130f!important;
    border-top:1px solid rgba(201,162,75,.16);
    padding-top:80px!important;
}
.footer::before{
    content:"۞  ✦  ۞";
    position:absolute;
    left:50%;
    top:20px;
    transform:translateX(-50%);
    color:rgba(201,162,75,.32);
    letter-spacing:16px;
    white-space:nowrap;
}
.footer-bismillah{color:#e6cb83!important;}
.footer h3{color:#f0d58d;}

/* Floating music button */
.music-button{
    border:1px solid rgba(241,213,138,.55)!important;
    background:linear-gradient(145deg,#a17b31,#dfc575)!important;
    color:#10291f!important;
    box-shadow:0 12px 35px rgba(0,0,0,.30),0 0 0 7px rgba(201,162,75,.06);
}
.music-button:hover{transform:scale(1.08) rotate(8deg);}

/* Scroll reveal polish */
[data-aos]{will-change:transform,opacity;}
::selection{background:rgba(201,162,75,.35);color:#fff;}

/* Mobile refinement */
@media(max-width:768px){
    .section{padding:82px 0;}
    .section::before{left:-24px;top:35px;font-size:50px;}
    .section::after{right:-24px;bottom:25px;font-size:50px;}
    .opening-content::before,.opening-content::after{display:none;}
    .opening-name{font-size:clamp(52px,15vw,82px);}
    .hero-card{padding:55px 22px;}
    .section-title{margin-bottom:48px;}
    .section-title h2{font-size:42px;}
    .countdown-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
    .count-card{padding:22px 8px;}
    .timeline::before{left:16px;}
    .timeline-item,.timeline-item:nth-child(even),.timeline-item:nth-child(odd){
        width:100%;
        left:0;
        text-align:left;
        padding:18px 15px 18px 52px;
    }
    .timeline-item:nth-child(odd) .timeline-dot,
    .timeline-item:nth-child(even) .timeline-dot{
        left:0;right:auto;
    }
    .guest-wrapper{padding:16px 18px;}
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition-duration:.01ms!important;
    }
}

/* =====================================================
   PERSONAL GUEST DISPLAY
===================================================== */
.hero-guest{
    margin:22px auto 0;
    padding:12px 22px;
    width:fit-content;
    max-width:92%;
    text-align:center;
    border:1px solid rgba(201,164,92,.45);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.hero-guest-label{
    display:block;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.72;
    margin-bottom:3px;
}
.hero-guest strong{
    display:block;
    font-family:"Cormorant Garamond",serif;
    font-size:1.35rem;
    font-weight:600;
}


/* Balasan pengantin: tersembunyi sampai tombol ditekan */
.wish-reply-toggle-wrap {
    margin-top: 11px;
}
.wish-reply-toggle {
    appearance: none;
    border: 1px solid rgba(229,198,106,.45);
    background: transparent;
    color: #e5c66a;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: .75rem;
    line-height: 1.2;
    cursor: pointer;
    transition: all .2s ease;
}
.wish-reply-toggle:hover,
.wish-reply-toggle:focus-visible {
    background: rgba(229,198,106,.10);
    border-color: rgba(229,198,106,.75);
    outline: none;
}
.wish-reply-public {
    margin-top: 9px;
    padding: 10px 13px;
    border-left: 2px solid #e5c66a;
    border-radius: 9px;
    background: rgba(229,198,106,.055);
}
.wish-reply-public[hidden] {
    display: none !important;
}
.wish-reply-public-label {
    font-size: .74rem;
    font-weight: 700;
    color: #e5c66a;
    margin-bottom: 4px;
}
.wish-reply-public-text {
    color: rgba(255,255,255,.88);
    line-height: 1.5;
    white-space: pre-wrap;
}