/* ==========================================================================
   Variables & Theme
   ========================================================================== */
:root {
    /* Soft Pastel Palette */
    --c-ivory: #FAF9F6;
    --c-champagne: #EBE1D7;
    --c-blush: #E6C5C5;
    --c-dusty: #C2A878; /* Primary Accent */
    --c-beige: #F4EBE1;
    --c-text: #4A4A4A;
    --c-light: #ffffff;
    --c-rose: #d9a8a3;
    --c-deep-gold: #9f7a33;
    --c-ink: #352e2b;
    
    /* Fonts */
    --font-serif: 'Playfair Display', serif;
    --font-prayer: 'Cormorant Garamond', serif;
    --font-sans: 'Inter', sans-serif;
    --font-accent: 'Great Vibes', cursive;
}

/* ==========================================================================
   Global Styles
   ========================================================================== */
body {
    font-family: var(--font-sans);
    color: var(--c-text);
    background-color: var(--c-ivory);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    padding-bottom: 4.35rem;
}

body.opening-active {
    overflow: hidden;
}

.music-toggle {
    position: fixed;
    right: 1rem;
    bottom: 5rem;
    z-index: 1040;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, rgba(185, 146, 79, 0.96), rgba(216, 182, 109, 0.96));
    box-shadow: 0 12px 28px rgba(104, 74, 38, 0.24), 0 0 18px rgba(255, 228, 168, 0.38);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.music-toggle:hover,
.music-toggle:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(104, 74, 38, 0.3), 0 0 26px rgba(255, 228, 168, 0.56);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    color: #2c2c2c;
}

.font-serif { font-family: var(--font-serif) !important; }
.font-sans { font-family: var(--font-sans) !important; }
.font-accent { font-family: var(--font-accent) !important; }

.text-primary { color: var(--c-dusty) !important; }
.bg-primary { background-color: var(--c-dusty) !important; }

.section-bg-soft { background-color: var(--c-beige); }

.py-6 { padding-top: 5rem; padding-bottom: 5rem; }

.divider {
    height: 2px;
    width: 60px;
    background-color: var(--c-dusty);
}

.letter-spacing-2 { letter-spacing: 2px; }
.cursor-pointer { cursor: pointer; }

/* Buttons */
.btn-primary {
    background-color: var(--c-dusty);
    border-color: var(--c-dusty);
    color: #fff;
    transition: all 0.3s ease;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #B09565;
    border-color: #B09565;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(194, 168, 120, 0.3);
}

.btn-outline-primary {
    color: var(--c-dusty);
    border-color: var(--c-dusty);
}
.btn-outline-primary:hover {
    background-color: var(--c-dusty);
    color: #fff;
}

/* ==========================================================================
   Pembukaan Gerbang Cinta
   ========================================================================== */
.opening-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(1rem, 3vw, 2rem);
    color: var(--c-ink);
    background:
        linear-gradient(180deg, rgba(255, 252, 246, 0.16), rgba(89, 61, 44, 0.32)),
        url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=1800&q=85') center/cover no-repeat;
    transition: opacity 1s ease, visibility 1s ease;
}

.opening-gate::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 248, 224, 0.86), rgba(255, 248, 224, 0.28) 32%, rgba(55, 35, 27, 0.42) 72%),
        linear-gradient(90deg, rgba(80, 52, 35, 0.32), transparent 28%, transparent 72%, rgba(80, 52, 35, 0.32));
}

.opening-gate::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.72) 0 2px, transparent 3px),
        radial-gradient(circle at 80% 24%, rgba(255, 235, 188, 0.7) 0 2px, transparent 4px),
        radial-gradient(circle at 68% 72%, rgba(255, 255, 255, 0.48) 0 2px, transparent 4px),
        radial-gradient(circle at 28% 78%, rgba(255, 226, 212, 0.52) 0 3px, transparent 5px);
    filter: blur(0.2px);
    animation: bokehDrift 9s ease-in-out infinite alternate;
}

.opening-gate.is-closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.opening-ambience {
    position: absolute;
    inset: auto auto 5% 50%;
    width: min(58rem, 92vw);
    height: min(58rem, 92vw);
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 227, 169, 0.52), rgba(255, 255, 255, 0) 66%);
    filter: blur(10px);
    animation: warmPulse 5.6s ease-in-out infinite;
}

.gate-scene {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.gate-glow {
    position: absolute;
    width: min(42rem, 88vw);
    height: min(42rem, 88vw);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 242, 204, 0.7), rgba(255, 242, 204, 0) 64%);
    transform: translateY(6vh);
}

.gate-arch {
    position: relative;
    width: min(33rem, 82vw);
    height: min(46rem, 78svh);
    border: clamp(0.55rem, 1.6vw, 0.9rem) solid rgba(191, 153, 79, 0.74);
    border-bottom-width: 0;
    border-radius: 18rem 18rem 0 0;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.45) inset,
        0 24px 80px rgba(64, 41, 28, 0.26),
        0 0 44px rgba(255, 221, 153, 0.45);
    overflow: hidden;
    animation: archReveal 1.25s ease-out both;
}

.gate-arch::before {
    content: '';
    position: absolute;
    inset: 1rem;
    border: 1px solid rgba(255, 250, 235, 0.66);
    border-bottom: 0;
    border-radius: inherit;
    z-index: 3;
}

.gate-door {
    position: absolute;
    top: 1rem;
    bottom: 0;
    width: 50.5%;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.16), transparent),
        linear-gradient(180deg, rgba(255, 250, 238, 0.92), rgba(229, 200, 181, 0.82));
    border: 1px solid rgba(160, 119, 58, 0.42);
    box-shadow: inset 0 0 38px rgba(161, 111, 80, 0.22);
    transition: transform 2.4s cubic-bezier(0.2, 0.75, 0.18, 1);
}

.gate-door::after {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 11%;
    width: 1px;
    background: linear-gradient(transparent, rgba(157, 119, 56, 0.5), transparent);
}

.gate-door-left {
    left: 0;
    border-radius: 18rem 0 0 0;
    transform-origin: left center;
}

.gate-door-left::after {
    right: 18%;
}

.gate-door-right {
    right: 0;
    border-radius: 0 18rem 0 0;
    transform-origin: right center;
}

.gate-door-right::after {
    left: 18%;
}

.opening-gate.gate-open .gate-door-left {
    transform: perspective(900px) rotateY(-72deg) translateX(-12%);
}

.opening-gate.gate-open .gate-door-right {
    transform: perspective(900px) rotateY(72deg) translateX(12%);
}

.gate-floral {
    position: absolute;
    z-index: 4;
    width: 10rem;
    height: 16rem;
    top: 2rem;
    background:
        radial-gradient(circle at 45% 14%, #fff 0 0.48rem, transparent 0.52rem),
        radial-gradient(circle at 24% 29%, #e9b9b3 0 0.7rem, transparent 0.75rem),
        radial-gradient(circle at 58% 36%, #fff8f2 0 0.64rem, transparent 0.7rem),
        radial-gradient(circle at 35% 53%, #d9a8a3 0 0.52rem, transparent 0.58rem),
        radial-gradient(circle at 68% 61%, #fff 0 0.45rem, transparent 0.5rem),
        linear-gradient(130deg, transparent 34%, rgba(132, 134, 83, 0.55) 35% 38%, transparent 39%);
    filter: drop-shadow(0 12px 18px rgba(81, 53, 35, 0.18));
}

.floral-left {
    left: -2.2rem;
    transform: rotate(-18deg);
}

.floral-right {
    right: -2.2rem;
    transform: scaleX(-1) rotate(-18deg);
}

.opening-content {
    position: relative;
    z-index: 8;
    width: min(42rem, 92vw);
    max-height: calc(100svh - 2rem);
    overflow: auto;
    text-align: center;
    padding: clamp(1.45rem, 3vw, 2.6rem);
    border: 1px solid rgba(191, 153, 79, 0.35);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 253, 247, 0.86), rgba(255, 247, 239, 0.7));
    box-shadow: 0 28px 90px rgba(58, 39, 30, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(24px);
    animation: openingTextIn 1.2s ease 1.15s forwards;
}

.opening-bismillah {
    margin-bottom: 1rem;
    color: var(--c-deep-gold);
    font-family: var(--font-serif);
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    line-height: 1.8;
}

.opening-poem p {
    margin-bottom: 0.82rem;
    font-size: clamp(0.9rem, 2.1vw, 1.03rem);
    line-height: 1.75;
}

.opening-names {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 1rem);
    margin: 1.1rem 0 0.8rem;
    color: var(--c-deep-gold);
    font-family: var(--font-accent);
    font-size: clamp(2.75rem, 9vw, 5.5rem);
    line-height: 1;
    text-shadow: 0 10px 26px rgba(128, 83, 58, 0.2);
}

.opening-names strong {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 5vw, 2.6rem);
    font-weight: 400;
    color: var(--c-rose);
}

.opening-quote {
    margin: 0 auto 1.45rem;
    color: #6a5750;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(0.92rem, 2vw, 1.06rem);
}

.opening-btn {
    min-width: 13rem;
    padding: 0.9rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #b9924f, #d8b66d 52%, #ad8351);
    box-shadow: 0 12px 28px rgba(159, 122, 51, 0.32), 0 0 24px rgba(255, 228, 168, 0.64);
    font-weight: 600;
    letter-spacing: 0.02em;
    animation: buttonGlow 2.8s ease-in-out infinite;
}

.opening-btn:hover,
.opening-btn:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(159, 122, 51, 0.42), 0 0 36px rgba(255, 228, 168, 0.78);
}

.opening-petals span {
    position: absolute;
    top: -8vh;
    width: 0.75rem;
    height: 1.05rem;
    border-radius: 80% 0 80% 0;
    background: rgba(240, 188, 184, 0.78);
    z-index: 7;
    animation: petalFall linear infinite;
}

.opening-petals span:nth-child(1) { left: 8%; animation-duration: 15s; animation-delay: -2s; }
.opening-petals span:nth-child(2) { left: 17%; animation-duration: 18s; animation-delay: -7s; }
.opening-petals span:nth-child(3) { left: 26%; animation-duration: 13s; animation-delay: -5s; }
.opening-petals span:nth-child(4) { left: 35%; animation-duration: 20s; animation-delay: -9s; }
.opening-petals span:nth-child(5) { left: 44%; animation-duration: 16s; animation-delay: -3s; }
.opening-petals span:nth-child(6) { left: 53%; animation-duration: 19s; animation-delay: -12s; }
.opening-petals span:nth-child(7) { left: 61%; animation-duration: 14s; animation-delay: -4s; }
.opening-petals span:nth-child(8) { left: 70%; animation-duration: 21s; animation-delay: -11s; }
.opening-petals span:nth-child(9) { left: 78%; animation-duration: 17s; animation-delay: -6s; }
.opening-petals span:nth-child(10) { left: 86%; animation-duration: 15s; animation-delay: -1s; }
.opening-petals span:nth-child(11) { left: 93%; animation-duration: 22s; animation-delay: -14s; }
.opening-petals span:nth-child(12) { left: 4%; animation-duration: 19s; animation-delay: -10s; }

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

@keyframes archReveal {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes petalFall {
    0% {
        transform: translate3d(0, -8vh, 0) rotate(0deg);
        opacity: 0;
    }
    12% {
        opacity: 0.9;
    }
    100% {
        transform: translate3d(8vw, 112vh, 0) rotate(420deg);
        opacity: 0;
    }
}

@keyframes buttonGlow {
    0%, 100% {
        box-shadow: 0 12px 28px rgba(159, 122, 51, 0.32), 0 0 18px rgba(255, 228, 168, 0.5);
    }
    50% {
        box-shadow: 0 16px 36px rgba(159, 122, 51, 0.42), 0 0 38px rgba(255, 228, 168, 0.82);
    }
}

@keyframes warmPulse {
    0%, 100% { opacity: 0.68; transform: translateX(-50%) scale(0.96); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

@keyframes bokehDrift {
    from { transform: translateY(0); opacity: 0.76; }
    to { transform: translateY(-1.4rem); opacity: 1; }
}

@media (max-width: 767.98px) {
    .opening-gate {
        padding: 0.8rem;
        align-items: end;
    }

    .gate-arch {
        width: 86vw;
        height: 72svh;
        transform: translateY(-4vh);
    }

    .gate-floral {
        width: 7rem;
        height: 12rem;
    }

    .opening-content {
        width: min(25rem, 94vw);
        max-height: 84svh;
        padding: 1.15rem;
    }

    .opening-poem p:nth-child(2) {
        display: none;
    }

    .opening-names {
        flex-wrap: wrap;
    }

    .hero {
        background-attachment: scroll;
        min-height: 680px;
    }
}

@media (max-width: 380px) {
    .opening-poem p {
        font-size: 0.84rem;
        line-height: 1.58;
    }

    .opening-bismillah,
    .opening-quote {
        font-size: 0.86rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .opening-gate *,
    .fade-in-up,
    .rsvp-bg-glow-1,
    .rsvp-bg-glow-2 {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .opening-gate.gate-open .gate-door-left,
    .opening-gate.gate-open .gate-door-right {
        transform: none;
        opacity: 0.2;
    }
}

/* ==========================================================================
   Navigasi
   ========================================================================== */
.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: min(100%, 480px);
    min-height: 3.95rem;
    transform: translateX(-50%);
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, rgba(251, 245, 235, 0.96), rgba(232, 204, 197, 0.94));
    border: 1px solid rgba(194, 168, 120, 0.28);
    border-bottom: 0;
    box-shadow: 0 -14px 34px rgba(123, 82, 46, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.bottom-nav-link {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.58rem 0.3rem 0.62rem;
    color: var(--c-ink);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.1;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.bottom-nav-link i {
    color: var(--c-deep-gold);
    font-size: 1rem;
    line-height: 1;
}

.bottom-nav-link:hover,
.bottom-nav-link:focus,
.bottom-nav-link.active {
    color: var(--c-deep-gold);
    background-color: rgba(194, 168, 120, 0.16);
}

.bottom-nav-link:active {
    transform: translateY(1px);
}

@media (min-width: 768px) {
    .bottom-nav {
        bottom: 0.8rem;
        border-radius: 18px;
        border-bottom: 1px solid rgba(194, 168, 120, 0.28);
    }
}

/* ==========================================================================
   Bahagian Utama
   ========================================================================== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    background:
        linear-gradient(180deg, rgba(73, 49, 38, 0.18), rgba(73, 49, 38, 0.22)),
        url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat fixed;
    overflow: hidden;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 236, 196, 0.2), rgba(55, 34, 27, 0.32) 42%, rgba(35, 24, 20, 0.62)),
        linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(0,0,0,0.58));
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 80px;
}
.hero h1 {
    font-size: clamp(4rem, 8vw, 7rem);
    color: #ffffff;
    text-shadow: 0 4px 15px rgba(0,0,0,0.8), 0 0 30px rgba(255,255,255,0.4);
    font-weight: 500;
}

.date-box {
    display: inline-block;
    padding: 1.1rem 2rem;
    border: 1px solid rgba(255, 242, 208, 0.38);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}

.countdown-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 10px 15px;
    min-width: 70px;
}
.countdown-item span {
    display: block;
    font-size: 2rem;
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 5px;
}
.countdown-item small {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (min-width: 768px) {
    .countdown-item { min-width: 100px; padding: 15px 20px; }
    .countdown-item span { font-size: 2.5rem; }
}

/* ==========================================================================
   Bahagian Jemputan
   ========================================================================== */
.invitation-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(250, 244, 235, 0.96)),
        url('https://www.transparenttextures.com/patterns/cream-paper.png');
}

.invitation-card {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(194, 168, 120, 0.42);
    border-radius: 8px;
    background:
        radial-gradient(circle at top left, rgba(230, 197, 197, 0.28), transparent 34%),
        radial-gradient(circle at bottom right, rgba(194, 168, 120, 0.2), transparent 34%),
        rgba(255, 253, 248, 0.88);
    box-shadow: 0 22px 60px rgba(123, 82, 46, 0.12);
}

.invitation-card::before,
.invitation-card::after {
    content: "";
    position: absolute;
    inset: 1rem;
    pointer-events: none;
    border: 1px solid rgba(159, 122, 51, 0.3);
    border-radius: 6px;
}

.invitation-card::after {
    inset: 1.45rem;
    border-color: rgba(217, 168, 163, 0.28);
}

.invitation-card-light {
    background:
        radial-gradient(circle at top right, rgba(217, 168, 163, 0.22), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 253, 0.93), rgba(250, 244, 235, 0.92));
}

.prayer-card {
    background:
        radial-gradient(circle at top, rgba(194, 168, 120, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(246, 236, 226, 0.94));
}

.prayer-card h2 {
    color: var(--c-deep-gold) !important;
    font-family: var(--font-prayer);
    font-size: clamp(2rem, 7vw, 3.6rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.invitation-content {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5rem) clamp(1.55rem, 5vw, 4.5rem);
    text-align: center;
}

.invitation-kicker {
    margin-bottom: 1.2rem;
    color: var(--c-ink);
    font-size: clamp(0.9rem, 2.7vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.12em;
}

.ornament-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 auto 1.8rem;
    color: var(--c-deep-gold);
}

.ornament-divider span {
    width: min(6rem, 22vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(159, 122, 51, 0.72), transparent);
}

.ornament-divider i {
    font-size: 1rem;
}

.invitation-names {
    margin: 0;
    color: var(--c-deep-gold);
    font-size: clamp(2.1rem, 8vw, 4.25rem);
    font-weight: 700;
    line-height: 1.08;
}

.invitation-ampersand {
    margin: 0.45rem 0;
    color: var(--c-rose);
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 4vw, 2rem);
    font-weight: 700;
}

.invitation-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.2rem;
    margin: 1.9rem auto 1.7rem;
    padding: 0.9rem 1.6rem;
    min-width: min(100%, 18rem);
    border-top: 1px solid rgba(159, 122, 51, 0.42);
    border-bottom: 1px solid rgba(159, 122, 51, 0.42);
    color: var(--c-ink);
}

.invitation-date span {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.invitation-date strong {
    color: var(--c-deep-gold);
    font-family: var(--font-serif);
    font-size: clamp(1rem, 4vw, 1.35rem);
}

.quran-verse {
    margin: 0;
    color: var(--c-text);
    font-family: var(--font-serif);
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-style: italic;
}

.quran-verse cite {
    display: block;
    margin-top: 0.45rem;
    color: var(--c-deep-gold);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 600;
}

.bismillah-text {
    margin-bottom: 1.25rem;
    color: var(--c-deep-gold);
    font-size: clamp(1.85rem, 7vw, 3rem);
    line-height: 1.35;
}

.salam-text {
    color: var(--c-ink);
    font-weight: 700;
}

.parents-name {
    margin: 2rem auto;
    color: var(--c-deep-gold);
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.25;
}

.parents-name span,
.parents-name em {
    display: block;
}

.parents-name em {
    margin: 0.25rem 0;
    color: var(--c-rose);
    font-style: normal;
}

.invitation-wording,
.prayer-text {
    margin-bottom: 1.25rem;
    color: var(--c-ink);
    font-size: clamp(0.98rem, 3vw, 1.08rem);
    line-height: 1.8;
}

.prayer-text {
    font-family: var(--font-prayer);
    font-size: clamp(1.18rem, 4.5vw, 1.55rem);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.01em;
}

.invitation-couple-small {
    margin: 0;
    color: var(--c-deep-gold);
    font-size: clamp(1.6rem, 6vw, 2.7rem);
    font-weight: 700;
}

.amin-text {
    margin: 1.7rem 0 0;
    color: var(--c-deep-gold);
    font-family: var(--font-prayer);
    font-size: clamp(1.55rem, 6vw, 2.55rem);
    font-weight: 700;
    font-style: italic;
}

.floral-corner {
    position: absolute;
    z-index: 1;
    width: clamp(7rem, 22vw, 12rem);
    aspect-ratio: 1;
    pointer-events: none;
    opacity: 0.82;
}

.floral-corner::before,
.floral-corner::after {
    content: "";
    position: absolute;
    border-radius: 999px 999px 999px 0;
    transform: rotate(-35deg);
}

.floral-corner::before {
    width: 58%;
    height: 58%;
    background:
        radial-gradient(circle at 32% 32%, #fff 0 12%, transparent 13%),
        radial-gradient(circle at 50% 50%, rgba(230, 197, 197, 0.92) 0 38%, rgba(217, 168, 163, 0.85) 39% 56%, transparent 57%);
    box-shadow:
        2.7rem 0.35rem 0 -1.1rem rgba(255, 255, 253, 0.94),
        2.9rem 0.45rem 0 -0.75rem rgba(230, 197, 197, 0.9),
        0.7rem 2.6rem 0 -0.9rem rgba(255, 255, 253, 0.92),
        0.85rem 2.75rem 0 -0.6rem rgba(217, 168, 163, 0.88);
}

.floral-corner::after {
    right: 8%;
    bottom: 10%;
    width: 46%;
    height: 46%;
    background:
        linear-gradient(45deg, transparent 45%, rgba(159, 122, 51, 0.45) 46% 52%, transparent 53%),
        radial-gradient(ellipse at 35% 60%, rgba(191, 170, 128, 0.58) 0 42%, transparent 43%);
}

.floral-corner-top-left {
    top: -1.4rem;
    left: -1.4rem;
}

.floral-corner-top-right {
    top: -1.4rem;
    right: -1.4rem;
    transform: scaleX(-1);
}

.floral-corner-bottom-left {
    bottom: -1.4rem;
    left: -1.4rem;
    transform: scaleY(-1);
}

.floral-corner-bottom-right {
    right: -1.4rem;
    bottom: -1.4rem;
    transform: scale(-1);
}

@media (max-width: 575.98px) {
    .invitation-card::before {
        inset: 0.75rem;
    }

    .invitation-card::after {
        inset: 1.1rem;
    }

    .floral-corner {
        width: 6.6rem;
        opacity: 0.58;
    }
}

/* ==========================================================================
   Bahagian Pengantin
   ========================================================================== */
.couple-image-wrapper {
    width: 250px;
    height: 250px;
    border: 8px solid var(--c-light);
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}
.couple-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.couple-image-wrapper:hover .couple-img {
    transform: scale(1.05);
}

/* ==========================================================================
   Bahagian Majlis
   ========================================================================== */
.event-card {
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--c-light);
}
.event-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
}

/* ==========================================================================
   Bahagian Borang Ucapan
   ========================================================================== */
.floral-pattern {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://www.transparenttextures.com/patterns/floral-motif.png');
    opacity: 0.1;
    z-index: 0;
}
.card-radio input[type="radio"]:checked + label {
    border-color: var(--c-dusty) !important;
    background-color: var(--c-beige);
    box-shadow: 0 0 0 1px var(--c-dusty);
}
.form-control:focus, .form-select:focus {
    border-color: var(--c-dusty);
    box-shadow: 0 0 0 0.25rem rgba(194, 168, 120, 0.25);
}

/* ==========================================================================
   Kod Pakaian
   ========================================================================== */
.color-swatch .circle {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 2px solid #fff;
}
.bg-ivory { background-color: #FAF9F6; }
.bg-champagne { background-color: #EBE1D7; }
.bg-blush { background-color: #E6C5C5; }
.bg-dusty { background-color: #C2A878; }
.bg-beige { background-color: #F4EBE1; }

/* ==========================================================================
   Animations
   ========================================================================== */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }

/* ==========================================================================
   Animasi Paparan Ucapan
   ========================================================================== */
.wish-card {
    transition: all 0.4s ease;
    border-left: 4px solid var(--c-dusty);
}
.wish-card.new-wish {
    animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards, glowHighlight 2s ease-out forwards;
}
.counter-number {
    transition: all 0.3s ease;
}
.counter-number.bump {
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(194, 168, 120, 0.5);
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glowHighlight {
    0% { box-shadow: 0 0 0 rgba(194, 168, 120, 0); background-color: var(--c-light); }
    30% { box-shadow: 0 0 20px rgba(194, 168, 120, 0.6); background-color: #fff; }
    100% { box-shadow: 0 4px 6px rgba(0,0,0,0.05); background-color: var(--c-light); }
}

.wish-board-wrapper {
    height: 320px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
}

@media (min-width: 992px) {
    .wish-board-wrapper {
        height: 400px;
    }
}

.wish-scroll-area {
    height: 100%;
    overflow-y: auto !important;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE dan Edge */
}
.wish-scroll-area::-webkit-scrollbar {
    display: none; /* Chrome, Safari dan Opera */
}

/* ==========================================================================
   Gaya Bahagian Ucapan Eksklusif
   ========================================================================== */
.rsvp-premium-section {
    background:
        linear-gradient(135deg, rgba(253, 251, 247, 0.96) 0%, rgba(248, 240, 230, 0.96) 100%),
        url('https://www.transparenttextures.com/patterns/cream-paper.png');
    box-shadow: inset 0 0 100px rgba(194, 168, 120, 0.15);
}

.rsvp-bg-glow-1, .rsvp-bg-glow-2 {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    animation: floatGlow 15s infinite alternate ease-in-out;
    pointer-events: none;
}

.rsvp-bg-glow-1 {
    top: -10%;
    left: -10%;
    width: 40vw;
    height: 40vw;
    min-width: 300px;
    min-height: 300px;
    background: radial-gradient(circle, rgba(194, 168, 120, 0.25) 0%, rgba(255,255,255,0) 70%);
}

.rsvp-bg-glow-2 {
    bottom: -10%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    min-width: 400px;
    min-height: 400px;
    background: radial-gradient(circle, rgba(216, 186, 180, 0.3) 0%, rgba(255,255,255,0) 70%);
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes floatGlow {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, 50px) scale(1.1); }
    100% { transform: translate(-20px, 20px) scale(0.95); }
}

/* Kad kaca eksklusif */
.glass-card {
    background: rgba(255, 255, 253, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(194, 168, 120, 0.4);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 2;
}

/* Kemas kini input dalam kad kaca */
.glass-card .form-control, .glass-card .form-select {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(194, 168, 120, 0.3);
}

.glass-card .form-control:focus, .glass-card .form-select:focus {
    background-color: #fff;
    border-color: var(--c-dusty);
    box-shadow: 0 0 0 0.25rem rgba(194, 168, 120, 0.25);
}

.glass-card .card-radio {
    background-color: rgba(255, 255, 255, 0.8) !important;
}