/* Modern & menarik Color Scheme: White & Red */
.gradient-text {
    /* Kombinasi merah ke oranye untuk teks logo/judul hero */
    background: linear-gradient(90deg, #dc2626, #f97316); /* red-600 to orange-500 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Hover effects */
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.progress-bar {
    transition: width 0.5s ease-in-out;
}

/* --- Navbar Animation (Enhanced) --- */
nav {
    transition: all 0.3s ease-in-out;
    padding-top: 1rem; /* default py-4 */
    padding-bottom: 1rem; /* default py-4 */
}
nav.scrolled {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* stronger shadow */
    background-color: rgba(255, 255, 255, 0.98); /* Sedikit lebih solid putih */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    border-bottom: 1px solid rgba(229, 231, 235, 0.5); /* subtle border */
}

/* --- Burger Menu Animation (Enhanced) --- */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out; /* Smooth slide up/down */
    opacity: 0;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}
#mobile-menu.active {
    max-height: 500px; /* Cukup besar untuk konten */
    opacity: 1;
}

/* --- Scroll Animation (Reveal on Scroll) --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Full screen overlay for auth forms */
#auth-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6; /* bg-gray-100 */
    z-index: 1000; /* Ensure it's on top of everything */
}

/* Update text colors for better contrast on white background */
body {
    color: #1f2937; /* text-gray-900 or similar for primary text */
}

/* Adjust text-gray-600, text-gray-700 to text-gray-800 for better readability on white */
/* This will be applied directly in HTML files */