:root {
    --ivory: #F6F1E7;
    --navy: #172B49;
    --gold: #B08A4A;
    --gold-light: #C9A96E;
    --bg-light: #F6F1E7;
    --text-dark: #172B49;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--ivory);
    color: var(--navy);
    background-image: radial-gradient(rgba(176, 138, 74, 0.15) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
}

.font-wedding {
    font-family: 'Allura', cursive;
    color: var(--gold);
}

/* Background Hero & Section */
.section-wedding {
    padding: 60px 0;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
}

.hero-section {
    height: 100vh;
    background: linear-gradient(rgba(246, 241, 231, 0.4), rgba(246, 241, 231, 0.4)),
        url('https://images.unsplash.com/photo-1519741497674-611481863552?q=80&w=2070') center/cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
}

.floral-top {
    width: 150px;
    margin-bottom: 20px;
}

/* Profil Mempelai */
.couple-img {
    width: 250px;
    height: 350px;
    object-fit: cover;
    border-radius: 150px 150px 0 0;
    border: 4px solid var(--gold);
    box-shadow: 0 16px 36px rgba(23, 43, 73, 0.16);
}

/* Countdown */
.countdown-item {
    background: var(--navy);
    color: var(--gold-light);
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 10px;
    min-width: 65px;
    margin: 5px;
    box-shadow: 0 8px 24px rgba(23, 43, 73, 0.15);
}

/* Gift Section */
.card-gift {
    border: 1px solid rgba(176, 138, 74, 0.3);
    border-radius: 15px;
    padding: 20px;
    background: var(--ivory);
}

/* Floating Navigation Bar */
.nav-floating {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(246, 241, 231, 0.94);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(176, 138, 74, 0.35);
    border-radius: 50px;
    padding: 10px 22px;
    box-shadow: 0 8px 28px rgba(23, 43, 73, 0.14);
    z-index: 9999;
    display: flex;
    gap: 18px;
}

.nav-floating a {
    color: var(--navy);
    font-size: 1.2rem;
    transition: color 0.25s ease;
}

.nav-floating a:hover {
    color: var(--gold);
}

/* Card Event (Akad & Resepsi) */
.event-card {
    background: var(--ivory);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(23, 43, 73, 0.08);
    border: 1.5px solid var(--gold);
}

/* Story Image */
.story-img {
    width: 100%;
    border-radius: 15px;
    margin-bottom: 15px;
}

/* Gallery 2 Kolom Masonry */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

.gallery-container img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

/* Tombol Aksi */
.btn-action {
    background-color: var(--navy);
    color: var(--ivory);
    border: 1px solid var(--gold);
    border-radius: 50px;
    padding: 8px 25px;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.btn-action:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--navy);
    box-shadow: 0 8px 20px rgba(176, 138, 74, 0.35);
}