/* ==========================================
   ROOT VARIABLES & BASE STYLES
   ========================================== */
:root {
    --primary-color: #2c3e50;
    --accent-color: #d4af37;
    --bg-light: #fdfbf7;
}

body {
    font-family: 'Jost', sans-serif;
    background-color: var(--bg-light);
    color: var(--primary-color);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, .font-serif-custom {
    font-family: 'Cormorant Garamond', serif;
}

/* ==========================================
   HERO SECTION
   ========================================== */
.hero-bg {
    /* Menggunakan background.jpg dari folder assets */
    /* Overlay linear-gradient ditingkatkan sedikit agar teks putih tetap kontras */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), 
                      url('../assets/background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ==========================================
   COMPONENTS
   ========================================== */

/* Floating WhatsApp Button Animation */
.wa-float {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* FAQ Accordion */
.faq-content {
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.faq-content.active {
    max-height: 500px; /* Nilai maksimal agar animasi slide lancar */
    opacity: 1;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
}

.faq-icon { 
    transition: transform 0.3s ease; 
}

.faq-icon.active { 
    transform: rotate(180deg); 
}

/* ==========================================
   UTILITIES
   ========================================== */
.section-padding { 
    padding-top: 5rem; 
    padding-bottom: 5rem; 
}

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

/* Custom Navbar Link Hover */
.nav-link {
    position: relative;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--accent-color);
}