/* Header Styles */
#main-header {
    /* Benar-benar transparan - tidak ada background sama sekali */
    background: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
}

/* Default state - font putih */
#main-header .text-gray-900 {
    color: white !important;
}

#main-header .border-black {
    border-color: white !important;
    color: white !important;
}

/* Mobile responsive: Always use scrolled state on mobile */
@media (max-width: 1024px) {
    #main-header {
        background-color: #ffffff !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    }
    
    /* Force dark text on mobile */
    #main-header .text-gray-900 {
        color: #111827 !important;
    }
    
    #main-header .border-black {
        border-color: #111827 !important;
        color: #111827 !important;
    }
    
    /* Mobile toggle button - dark */
    #main-header button svg {
        color: #111827 !important;
    }
}

/* Header saat scroll - background putih SOLID */
#main-header.scrolled {
    background-color: #ffffff !important; /* Putih solid, tidak transparan */
    background: #ffffff !important; /* Pastikan tidak ada background lain */
    backdrop-filter: none !important; /* Hapus backdrop filter jika ada */
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Font hitam saat scroll */
#main-header.scrolled .text-gray-900 {
    color: #111827 !important; /* gray-900 */
}

#main-header.scrolled .border-black {
    border-color: #111827 !important;
    color: #111827 !important;
}

/* Navigation hover effects */
#main-header nav a {
    position: relative;
    transition: all 0.3s ease;
}

/* Hover state default (transparan) - warna teal */
#main-header nav a:not(.border-3):not(._bg-primary-color):hover {
    color: #14b8a6 !important;
    transform: translateY(-2px);
}

/* Hover state saat scroll (background putih) - warna teal */
#main-header.scrolled nav a:not(.border-3):not(._bg-primary-color):hover {
    color: #14b8a6 !important;
}

/* Button hover effects */
#main-header .border-3 {
    transition: all 0.3s ease;
    border-radius: 12px;
}

/* Button hover default (transparan) */
#main-header .border-3:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

/* Button hover saat scroll (background putih) */
#main-header.scrolled .border-3:hover {
    background-color: #14b8a6;
    color: white !important;
}

#main-header ._bg-primary-color {
    transition: all 0.3s ease;
    border-radius: 12px;
}

#main-header ._bg-primary-color:hover {
    background-color: #0f766e !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.4);
}

/* Mobile menu improvements */
#main-header .mobile-menu-item {
    transition: all 0.3s ease;
    border-radius: 8px;
}

#main-header .mobile-menu-item:hover {
    background-color: #f0fdfa;
    transform: translateX(5px);
}



/* Smooth animations */
* {
    scroll-behavior: smooth;
}

/* Logo transition */
#main-header .logo img {
    transition: all 0.3s ease;
}

/* Logo default (white) sudah di HTML */
/* Logo saat scroll akan diganti via JavaScript */

/* Mobile toggle button */
#main-header button {
    transition: all 0.3s ease;
}

/* Mobile toggle default (putih) */
#main-header button svg {
    color: white !important;
}

/* Mobile toggle saat scroll (hitam) */
#main-header.scrolled button svg {
    color: #111827 !important;
}

#main-header button:hover {
    transform: scale(1.1);
}

/* Button Login dan Register Styles */

/* Login Button - State Normal (Pertama) */
#login-btn {
    background-color: white !important;
    color: #14b8a6 !important; /* teal-500 */
    border: none !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

/* Register Button - State Normal (Pertama) */
#main-header #register-btn,
#main-header a#register-btn.text-sm\/6.font-bold {
    background-color: transparent !important;
    color: white !important;
    border: none !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

/* Login Button - State Scrolling */
#main-header.scrolled #login-btn {
    background-color: #14b8a6 !important; /* teal-500 primary */
    color: white !important;
    border: none !important;
    text-decoration: none !important;
}

/* Register Button - State Scrolling */
#main-header.scrolled #register-btn,
#main-header.scrolled a#register-btn.text-sm\/6.font-bold {
    background-color: transparent !important;
    color: #14b8a6 !important; /* teal-500 primary */
    border: none !important;
    text-decoration: none !important;
}

/* Hover effects untuk buttons */
#login-btn:hover, #register-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none !important;
}