/* =========================================
   GLOBAL VARIABLES & CUSTOM COMPONENTS
========================================= */
:root {
    --primary-teal: #005C97; /* Diperbarui menjadi Biru sesuai palet logo */
    --primary-lime: #A2D149;
    --primary-dark: #1a1a2e;
    --transition: all 0.3s ease;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
    overflow-x: hidden;
}

/* Utilities */
.text-teal { color: var(--primary-teal) !important; }
.text-lime { color: var(--primary-lime) !important; }
.bg-teal { background-color: var(--primary-teal) !important; }
.bg-lime { background-color: var(--primary-lime) !important; }

/* Topbar Styles */
.topbar {
    background: linear-gradient(90deg, var(--primary-teal) 0%, #36B27E 50%, var(--primary-lime) 100%);
    color: white;
    font-size: 12px;
    padding: 8px 0;
}
.topbar a { color: white; text-decoration: none; transition: var(--transition); }
.topbar a:hover { opacity: 0.8; }
.topbar-socials a { margin-left: 15px; }

/* Navbar Styles */
.navbar { background-color: #FFFFFF; transition: var(--transition); padding: 15px 0; }
.navbar-scrolled { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); padding: 10px 0; }
.navbar-brand { font-weight: 700; color: var(--primary-dark); font-size: 20px; }
.navbar-brand img { height: 40px; margin-right: 10px; object-fit: cover; }
.nav-link {
    color: var(--primary-dark) !important;
    font-weight: 500;
    font-size: 0.95rem;
    margin: 0 5px;
    position: relative;
    transition: var(--transition);
}
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0;
    background-color: var(--primary-teal); transition: var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--primary-teal) !important; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Buttons */
.btn-daftar {
    background-color: var(--primary-lime);
    color: white !important;
    border-radius: 25px;
    padding: 8px 24px;
    font-weight: 600;
    border: none;
    transition: var(--transition);
}
.btn-daftar:hover {
    background-color: #8ebd3b; /* Sedikit lebih gelap dari primary-lime */
    box-shadow: 0 0 15px rgba(162, 209, 73, 0.6);
    transform: translateY(-2px);
}
.navbar-toggler { border: none; }
.navbar-toggler:focus { box-shadow: none; outline: none; }

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 1s ease-out forwards; }

/* Page Banners Umum */
.page-banner {
    background: linear-gradient(135deg, var(--primary-dark), #2a2a4a);
    padding: 80px 0;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-banner::before {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: url('https://source.unsplash.com/1600x400/?school,education') center/cover;
    opacity: 0.15;
}

/* Profil Sekolah - Struktur Organisasi */
.org-chart .box {
    padding: 12px 20px; border-radius: 8px; font-weight: bold; color: white; display: inline-block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); min-width: 180px; z-index: 2; position: relative;
}
.org-box-kepsek { background-color: var(--primary-teal); font-size: 1.1rem; }
.org-box-wakasek { background-color: #0077b6; font-size: 0.95rem; }
.org-box-staf { background-color: #6c757d; font-size: 0.95rem; }
.org-line-v { width: 3px; height: 30px; background-color: #dee2e6; margin: 0 auto; z-index: 1; position: relative; }
.org-line-h { height: 3px; background-color: #dee2e6; margin: 0 auto; z-index: 1; position: relative; }

/* Kesiswaan - Fasilitas Card */
.facility-card {
    border-radius: 15px; overflow: hidden; position: relative; border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.4s ease;
}
.facility-card img { width: 100%; height: 220px; object-fit: cover; transition: all 0.4s ease; }
.facility-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 92, 151, 0.85); /* rgba dari #005C97 */
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; transition: all 0.4s ease; padding: 20px; text-align: center; color: white;
}
.facility-card:hover { transform: scale(1.05); box-shadow: 0 15px 30px rgba(0,0,0,0.15); z-index: 10; }
.facility-card:hover .facility-overlay { opacity: 1; }

/* Responsive adjustments Navbar */
@media (max-width: 991px) {
    .navbar-collapse {
        background: white; padding: 20px; border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
    }
}