/* css/style.css - IEEE Branding Edition */

:root {
    /* --- IEEE OFFICIAL PALETTE --- */
    --ieee-blue: #00629B;       /* Primary Brand Color */
    --ieee-dark: #002855;       /* Dark Navy (High Contrast Text) */
    --ieee-light: #F0F8FF;      /* Very Light Blue for Backgrounds */
    --text-dark: #333333;       /* Body Text */
    
    /* --- BOOTSTRAP OVERRIDES --- */
    --bs-primary: #00629B; 
    --bs-primary-rgb: 0, 98, 155;
    --bs-link-color: #00629B;
    --bs-link-hover-color: #002855;
}

body {
    font-family: 'Rubik', sans-serif;
    color: #555;
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif;
    color: var(--ieee-dark);
    font-weight: 700;
}

/* --- UTILITIES OVERRIDE --- */
.text-primary { color: var(--ieee-blue) !important; }
.bg-primary { background-color: var(--ieee-blue) !important; }
.bg-dark { background-color: var(--ieee-dark) !important; }
.btn-primary {
    background-color: var(--ieee-blue);
    border-color: var(--ieee-blue);
}
.btn-primary:hover {
    background-color: var(--ieee-dark);
    border-color: var(--ieee-dark);
}

/* --- NAVBAR STYLING (FIXED LOGIC) --- */
.navbar {
    transition: all 0.5s;
    z-index: 999;
}

/* KONDISI 1: Saat di Pucuk Atas (Top Page) */
.navbar-dark {
    position: fixed;
    width: 100%;
    top: 45px; 
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* KONDISI 2: Saat di-Scroll (Scrolled) */
.navbar-light {
    position: fixed;
    width: 100%;
    top: 0;
    background: #FFFFFF !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.navbar .nav-link {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    outline: none;
    transition: .3s;
    padding: 10px 15px; /* Langsing */
}

/* Warna Teks - Dark Mode (Transparan) */
.navbar-dark .navbar-nav .nav-link { color: #FFFFFF !important; }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active { color: #61bdfa !important; }
.navbar-dark .navbar-brand h1 { color: #FFFFFF !important; font-size: 24px; }

/* Warna Teks - Light Mode (Putih) */
.navbar-light .navbar-nav .nav-link { color: var(--ieee-dark) !important; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active { color: var(--ieee-blue) !important; }
.navbar-light .navbar-brand h1 { color: var(--ieee-blue) !important; font-size: 24px; }

/* Mobile Fix (Saat layar kecil) */
@media (max-width: 991.98px) {
    .navbar-dark {
        top: 0 !important; 
        background: rgba(0, 40, 85, 0.95) !important; /* Latar Gelap di HP */
    }
    .navbar-collapse {
        background: #fff;
        padding: 15px;
        border-radius: 8px;
        margin-top: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    /* Warna teks di hamburger menu jadi gelap */
    .navbar-dark .navbar-nav .nav-link { color: #333 !important; padding: 10px 0; }
}

/* --- HERO CAROUSEL --- */
.header-carousel .carousel-item {
    position: relative;
    height: 100vh;
    min-height: 600px;
    background-color: var(--ieee-dark);
}
.header-carousel .carousel-item img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.5);
}
.carousel-caption {
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 40, 85, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
}

/* --- SECTION TITLES (SMART ALIGNMENT) --- */

.section-title {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 10px; /* Beri jarak antara teks dan garis */
}

/* 1. SETUP GARIS (Default: Rata Kiri - Cocok untuk About) */
.section-title::before {
    position: absolute;
    content: "";
    width: 45px;
    height: 4px;
    bottom: 0;
    left: 0; /* Default di Kiri */
    background: var(--ieee-dark);
}

.section-title::after {
    position: absolute;
    content: "";
    width: 4px;
    height: 4px;
    bottom: 0;
    left: 50px; /* Berjarak 50px dari kiri */
    background: var(--ieee-blue);
}

/* 2. KHUSUS RATA TENGAH (Cocok untuk Tracks, Speakers, Dates) */
/* Jika elemen memiliki class 'text-center', garis akan pindah ke tengah */
.section-title.text-center::before {
    left: 50%;
    transform: translateX(-25px); /* Geser ke tengah */
}

.section-title.text-center::after {
    left: 50%;
    transform: translateX(25px); /* Geser ke kanan sedikit dari tengah */
}

/* --- CARDS & SERVICES --- */
.service-item, .team-item, .bg-light {
    background-color: #FFFFFF !important;
    border: 1px solid #eef4f9;
}
.service-item:hover {
    border-color: var(--ieee-blue);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 98, 155, 0.1) !important;
}
.bg-light { 
    background-color: var(--ieee-light) !important; 
}

/* --- Ikon Kecil (Untuk Contact & Guidelines) --- */
/* Biarkan ini tetap Light Blue agar kontras dengan background putih */
.btn-square {
    width: 40px; 
    height: 40px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 50%;
    background: var(--ieee-light);
    color: var(--ieee-blue);
}

/* --- Ikon Besar (Untuk Important Dates & Tracks) --- */
.service-icon {
    margin: 0 auto 20px auto;
    width: 70px;
    height: 70px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 50%;
    transition: .4s;
    
    /* KONDISI NORMAL: Background Biru, Ikon Putih */
    background: var(--ieee-blue);
    color: #FFFFFF;
    border: 1px solid var(--ieee-blue);
}

/* KONDISI HOVER: Background Putih, Ikon Biru */
.service-item:hover .service-icon {
    background: #FFFFFF;
    color: var(--ieee-blue);
    transform: rotate(360deg);
    box-shadow: 0 0 15px rgba(0, 98, 155, 0.3);
}

/* --- TABLE FEES --- */
.table thead {
    background-color: var(--ieee-blue);
    color: white;
}
.table-hover tbody tr:hover {
    background-color: var(--ieee-light);
}

/* --- SPINNER --- */
#spinner {
    opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s linear .5s; z-index: 99999;
}
#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1;
}

.back-to-top {
    position: fixed;
    display: none;
    
    right: 30px;
    bottom: 30px;
    
    z-index: 9999;
    transition: background 0.3s;
}

.back-to-top:hover {
    background: var(--ieee-dark);
    border-color: var(--ieee-dark);
}