/* custom.css */

/* Header initial state */
#main-header {
    background-color: transparent;
    transition: transform 0.6s ease, opacity 0.6s ease, background-color 0.6s ease, box-shadow 0.6s ease, backdrop-filter 0.6s ease;
}

/* Header when scrolled - Glassmorphism */
.header-solid {
    background: rgba(255, 255, 255, 0.7) !important; /* transparan 70% */
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* shadow lembut */
    transition: transform 0.6s ease, opacity 0.6s ease, background-color 0.6s ease, backdrop-filter 0.6s ease, box-shadow 0.6s ease;
}

/* Logo default state */
.logo-solid,
.logo-transparent {
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
}

/* Logo solid tersembunyi di awal */
.logo-solid {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
}

/* Logo transparan muncul di awal */
.logo-transparent {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Fade out helper class */
.fade-out {
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    pointer-events: none;
}

/* Navigation menu color */
nav a {
    color: white;
    transition: color 0.3s ease;
}

.header-solid nav a {
    color: #1F2937; /* text-gray-800 */
}

/* Header slide up (hide) */
.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease, background-color 0.6s ease, backdrop-filter 0.6s ease;
}

/* Header slide down (show) */
.header-slide-down {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.6s ease, opacity 0.6s ease, background-color 0.6s ease, backdrop-filter 0.6s ease;
}

/* CTA Button */
.cta-button {
    border-color: rgb(210, 28, 28);
    color: rgb(255, 255, 255);
    transition: border-color 0.4s ease, color 0.4s ease;
}

.header-solid .cta-button {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Mobile menu */
#mobile-menu a {
    display: block;
    padding: 0.5rem;
    background-color: #FCD34D;
    text-align: center;
    font-weight: 200;
    border-bottom: 1px solid #fff;
    margin: 0;
}

#mobile-menu a:last-child {
    border-bottom: none;
}

/* Gambar di Swiper (Mobile) */
.swiper-slide img {
    width: 100%;
    height: 12rem; /* h-48 */
    object-fit: cover;
    border-radius: 0.5rem; /* rounded-lg */
    display: block;
    margin: 0 auto;
}

/* ===== Posisi Logo & Main Menu Mobile ===== */
@media (max-width: 768px) {
    /* Container header lebih tipis */
    #main-header .container {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    /* Geser logo solid & transparan ke atas */
    #main-header .logo-solid,
    #main-header .logo-transparent {
        transform: translateY(-6px);
        transition: transform 0.3s ease;
    }

    /* Geser tombol main menu ke atas */
    #main-menu-toggle {
        margin-top: -4px;
        transition: margin-top 0.3s ease;
    }
}





/* ===== Header Styling & Scroll Animation ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
    background-color: transparent;
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.header .logo,
.header .main-menu-btn {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.header.hidden .logo,
.header.hidden .main-menu-btn {
    opacity: 0;
    transform: translateY(-15px);
}

/* ===== Mobile Menu Premium Animation ===== */
#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateY(100%);
    opacity: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
    z-index: 9999;
    padding-top: 80px;
}

#mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
}

/* Animasi tiap link */
#mobile-menu a {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Saat menu terbuka, link masuk bertahap */
#mobile-menu.open a {
    opacity: 1;
    transform: translateY(0);
}

#mobile-menu.open a:nth-child(1) { transition-delay: 0.05s; }
#mobile-menu.open a:nth-child(2) { transition-delay: 0.1s; }
#mobile-menu.open a:nth-child(3) { transition-delay: 0.15s; }
#mobile-menu.open a:nth-child(4) { transition-delay: 0.2s; }
#mobile-menu.open a:nth-child(5) { transition-delay: 0.25s; }
#mobile-menu.open a:nth-child(6) { transition-delay: 0.3s; }
#mobile-menu.open a:nth-child(7) { transition-delay: 0.35s; }

/* Style link */
#mobile-menu a {
    display: block;
    padding: 0.8rem;
    text-align: center;
    font-weight: 500;
    background-color: rgba(252, 211, 77, 0.9);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    margin: 2px 0;
    border-radius: 8px;
    color: #1F2937;
}

#mobile-menu a:last-child {
    border-bottom: none;
}

/* ===== Logo & Menu Mobile Position Adjustment ===== */
@media (max-width: 768px) {
    .header .logo {
        margin-top: -5px;
    }
    .header .main-menu-btn {
        margin-top: -5px;
    }
}

html {
    scroll-behavior: smooth;
}