/* --- Root & Base Styling (FIXED SCROLL & SPACING) --- */
:root {
    --nav-height: 70px;
    --primary-color: #0d6efd;
    --success-color: #28a745;
}

html, body {
    overflow-x: hidden; /* OBAT SCROLL SAMPING */
    width: 100%;
    margin: 0;
    padding: 0;
}

body { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    padding-top: var(--nav-height); /* Wajib ada karena navbar fixed-top */
    font-family: 'Segoe UI', Roboto, sans-serif; 
    background-color: #f8f9fa;
    color: #333;
}

/* --- Hero Section Fix --- */
.hero-section { 
    position: relative; 
    min-height: 500px; /* Tinggi minimum desktop */
    /* Di HP, tinggi bisa lebih kecil biar pas di layar */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background-color: #222;
    overflow: hidden;
    margin-top: -1px; /* Trik menghilangkan garis putih tipis di bawah navbar */
}

/* FIX: Pastikan konten di dalam hero tidak menyebabkan lebar berlebih */
.hero-content {
    width: 100%;
    max-width: 100%;
}

.hero-bg-animate { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background-image: url('../sls/assets/images/sekolah/gambarsekolah1.jpg'); 
    background-size: cover; 
    background-position: center; 
    z-index: 0; 
    animation: kenburnsEffect 20s infinite alternate ease-in-out; 
}

@keyframes kenburnsEffect { 
    0% { transform: scale(1); } 
    100% { transform: scale(1.15); } 
}
.hero-overlay { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.5));
    z-index: 1; 
}

.hero-content { 
    position: relative; 
    z-index: 2; 
    padding: 40px 20px;
    text-align: center; 
    color: white; 
}

/* --- Card Styling --- */
.card-buku, .card-terbaru { 
    transition: all 0.3s ease; 
    border-radius: 15px;
    border: 1px solid rgba(0,0,0,0.05);
}

.card-buku:hover, .card-terbaru:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; 
}

/* --- Utilities --- */
.bg-hijau-custom { background-color: #28a745 !important; }
.text-warning { color: #ffc107 !important; }
.text-primary { color: #0d6efd !important; }
.text-white-opac { color: rgba(255, 255, 255, 0.95) !important; } /* Kontras Tinggi Mobile */

/* --- Mobile Navigation & Responsive Tweaks --- */
.mobile-nav { display: none; } 

.swal2-container { z-index: 10000 !important; }

/* === MOBILE MODE (Max Width 768px) === */
@media (max-width: 768px) {
    body { padding-bottom: 85px !important; } /* Ruang untuk navbar bawah */

    /* FIX HERO MOBILE: Agar pas di layar HP tanpa scroll berlebih */
    .hero-section {
        min-height: 85vh; /* Hampir full layar HP */
        padding-top: 0; 
        align-items: center; /* Konten di tengah vertikal */
    }
    
    .hero-content {
        padding-top: 20px; /* Reset padding berlebih */
    }
    
    .hero-content h1 {
        font-size: 1.8rem !important;
        line-height: 1.2;
        margin-top: 10px;
    }
    
    .hero-content .lead {
        font-size: 0.95rem !important;
        padding: 0 10px; /* Padding kiri-kanan agar teks tidak mentok layar */
    }

    .swal2-popup {
        margin-bottom: 90px !important; 
        border-radius: 20px !important;
    }

    /* NAVIGASI BAWAH (LAMBORGHINI STYLE) */
    .mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 65px;
        background: rgba(255, 255, 255, 0.98); /* Lebih solid agar tidak transparan aneh */
        border-top: 1px solid rgba(0,0,0,0.05);
        z-index: 9999;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -5px 25px rgba(0,0,0,0.08);
    }

    .mobile-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #8e9499;
        text-decoration: none;
        font-size: 0.7rem;
        font-weight: 500;
        padding: 5px 0;
    }

    .mobile-nav-item i { font-size: 1.3rem; margin-bottom: 2px; }
    .mobile-nav-item.active { color: #28a745; }

    /* TOMBOL TENGAH (FLOAT) */
    .mobile-nav-item.mobile-nav-center {
        flex: 0 0 62px !important; 
        width: 62px !important;
        height: 62px !important;
        background: linear-gradient(135deg, #28a745, #1e7e34) !important;
        border-radius: 50% !important;
        border: 5px solid #f8f9fa !important; /* Warna border sama dengan background body */
        position: relative;
        top: -25px; /* Naikkan sedikit lagi */
        box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
    }

    .mobile-nav-center i { color: #ffffff !important; font-size: 1.6rem !important; margin: 0 !important; }
}

/* FIX: Mencegah gambar carousel testi penyok */
.carousel-item img {
    object-fit: cover;
}

/* FIX: Lightbox Icons */
.lb-cancel, .lb-close, .lb-next, .lb-prev, .lb-loading { background-image: none !important; }
.lb-loading {
    border: 3px solid #f3f3f3; border-top: 3px solid #3498db;
    border-radius: 50%; width: 20px; height: 20px;
    animation: spin 1s linear infinite; margin: 0 auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.lb-prev:after { content: '❮'; color: #fff; font-size: 30px; }
.lb-next:after { content: '❯'; color: #fff; font-size: 30px; }
.lb-close:after { content: '✖'; color: #fff; font-size: 20px; }