/* ==========================================================================
   1. GLOBAL & UTILITY STYLES
   ========================================================================== */
/* Setting background animasi partikel agar memenuhi layar */
#particles-js { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; }

/* Animasi elemen muncul perlahan saat discroll (Scroll Reveal) */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Animasi kursor berkedip (Home Page) */
.cursor-blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ==========================================================================
   2. NAVBAR LOGIC & ANIMATION
   ========================================================================== */
#main-nav { transition: all 0.4s ease; padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* Transisi pertukaran Logo (Putih ke Gelap) */
#main-nav .logo-white { opacity: 1; pointer-events: auto; }
#main-nav .logo-dark { opacity: 0; pointer-events: none; }

/* Animasi Garis Bawah Menu (Underline Effect) */
#main-nav .nav-link { color: #ffffff; position: relative; text-decoration: none; }
#main-nav .nav-link:hover { color: #c5a017; }
#main-nav .nav-link::after { 
    content: ''; position: absolute; width: 0; height: 2px; 
    bottom: -4px; left: 0; background-color: #c5a017; 
    transition: width 0.3s ease; 
}
#main-nav .nav-link:hover::after { width: 100%; }

/* Tombol Join Research di Navbar */
#main-nav .btn-join { border: 1px solid rgba(255,255,255,0.5); color: white; background: transparent; }

/* --- STATE SCROLLED (Saat Navbar turun ke bawah) --- */
#main-nav.scrolled { 
    background-color: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px); 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
    padding-top: 0.75rem; padding-bottom: 0.75rem; 
}
#main-nav.scrolled .logo-white { opacity: 0; pointer-events: none; }
#main-nav.scrolled .logo-dark { opacity: 1; pointer-events: auto; }
#main-nav.scrolled .nav-link { color: #475569; }
#main-nav.scrolled .nav-link:hover { color: #0e2b5c; }
#main-nav.scrolled .btn-join { background-color: #0e2b5c; border-color: #0e2b5c; color: white; }
#main-nav.scrolled .mobile-menu-btn { color: #0e2b5c; }
.mobile-menu-btn { color: white; }

/* ==========================================================================
   3. CARDS & COMPONENTS STYLES
   ========================================================================== */
/* A. Profile Cards (Halaman About Us & Tim) */
.profile-card { transition: all 0.3s ease; }
.profile-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); border-color: #0e2b5c; }
.profile-img-container { overflow: hidden; }
.profile-card:hover .profile-img { transform: scale(1.1); }
.profile-img { transition: transform 0.5s ease; width: 100%; height: 100%; object-fit: cover; }

/* B. News Cards & Filter (Halaman News) */
.news-card { transition: all 0.3s ease; }
.news-card: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); }
.news-card img { transition: transform 0.5s ease; }
.news-card:hover img { transform: scale(1.05); }
.filter-btn.active { background-color: #0e2b5c; color: white; border-color: #0e2b5c; }

/* C. Research Area Cards (Halaman Research) */
.area-card { transition: all 0.3s ease; border-left: 4px solid transparent; }
.area-card:hover { transform: translateY(-5px); border-left-color: #c5a017; box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1); }
.area-icon { transition: all 0.3s ease; }
.area-card:hover .area-icon { background-color: #0e2b5c; color: white; transform: rotateY(180deg); }
.project-item { transition: background-color 0.2s; }
.project-item:hover { background-color: #f1f5f9; }

/* D. Publication Cards (Halaman Profile Dosen) */
.pub-card { transition: all 0.2s ease; border-left: 3px solid transparent; }
.pub-card:hover { border-left-color: #c5a017; background-color: #f8fafc; transform: translateX(5px); }