/* ==========================================================
   1. GAYA PRELOADER & LOGO
   ========================================================== */
.sekolah-logo-preload { width: 150px; margin-bottom: 15px; animation: pulseLogo 1.5s infinite ease-in-out; }
@keyframes pulseLogo { 0% { transform: scale(0.85); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(0.85); opacity: 0.7; } }

/* ==========================================================
   2. TOP BAR & SOSMED DESKTOP
   ========================================================== */
.top-bar .container { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-top: 10px !important; padding-bottom: 10px !important; }
.top-bar .nav-left, .top-bar .nav-right { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; }
.top-bar .nav-left { gap: 20px; }
.top-bar .nav-right { gap: 25px; }
.top-social-icons ul { display: flex; gap: 15px; list-style: none; margin: 0; padding: 0; align-items: center; }
.top-social-icons ul li a { color: #ffffff; display: flex; align-items: center; transition: 0.3s; }
.top-social-icons ul li a:hover { opacity: 0.7; transform: translateY(-2px); }
.topbar-global-cta { margin: 0; }
.topbar-global-cta .cta-btn { background-color: #17a2b8; color: #fff; padding: 10px 30px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; transition: 0.3s; display: inline-block; border-radius: 4px; line-height: 1; }
.topbar-global-cta .cta-btn:hover { background-color: #117a8b; color: #ffffff; }
li.mobile-only-extras { display: none !important; }

/* ==========================================================
   3. RESPONSIVE MOBILE (MAKS 768px)xxx
   ========================================================== */
@media (max-width: 768px) {
    /* Sembunyikan Topbar */
    .top-bar { display: none !important; }
    
    /* --- FIX: MENGHANCURKAN TINGGI "HANTU" DARI JS STICKY HEADER --- */
    .header-wrapper { 
        height: auto !important; 
        min-height: 0 !important; 
        margin-bottom: 0 !important; 
        padding-bottom: 0 !important; 
    }
    .site-header { 
        margin-bottom: 0 !important; 
        padding-bottom: 0 !important; 
        border-bottom: none !important; 
    }
    .featured-wrapper, #content, .site-content { 
        margin-top: 0 !important; 
        padding-top: 0 !important; 
    }
    
    /* Struktur Header Mobile */
    .site-header .container { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 15px !important; width: 100% !important; box-sizing: border-box !important; }
    .site-branding { margin: 0 !important; padding: 0 !important; flex-grow: 1; }
    .site-branding img, .site-branding .custom-logo { max-height: 45px !important; width: auto !important; }
    .main-navigation { display: flex !important; align-items: center !important; gap: 15px !important; margin: 0 !important; }
    
    /* Menu Mobile Extras (Logo, CTA, Sosmed di dalam menu) */
    li.mobile-only-extras { display: block !important; padding: 0 !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; }
    .mobile-menu-logo { text-align: center; padding: 20px 15px !important; border-bottom: 1px solid #eaeaea; }
    .mobile-menu-logo img { max-height: 55px; width: auto; display: inline-block; }
    .mobile-menu-bottom { padding: 15px !important; border-top: 1px solid #eaeaea; margin-top: 10px !important; width: 100% !important; box-sizing: border-box !important; }
    .mobile-cta-btn { background-color: #17a2b8; color: #fff !important; display: block; text-align: center; padding: 12px; font-size: 14px; font-weight: 700; border-radius: 4px; text-decoration: none; margin-bottom: 15px; text-transform: uppercase; width: 100% !important; box-sizing: border-box !important; }
    .mobile-social-icons { background-color: #f5f5f5; padding: 15px !important; border-radius: 4px; display: flex !important; justify-content: center !important; align-items: center !important; gap: 20px !important; width: 100% !important; box-sizing: border-box !important; flex-wrap: nowrap !important; }
    .mobile-social-icons a { color: #222 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; width: auto !important; border: none !important; }
}

/* ==========================================================
       4. MOBILE BOTTOM MENU (GAYA APLIKASI NATIVE)
       ========================================================== */
    /* Memberi jarak ekstra di bawah halaman agar konten tidak tertutup menu */
    body { padding-bottom: 70px !important; }

    .mobile-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 8px 5px 12px;
        z-index: 9999;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .mbm-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #777777; /* Warna menu tidak aktif */
        flex: 1;
        transition: 0.3s;
    }

    .mbm-item:hover, .mbm-item:active {
        color: #17a2b8; /* Warna toska aktif */
    }

    .mbm-icon svg { width: 24px; height: 24px; fill: currentColor; }
    
    .mbm-text {
        font-size: 11px;
        font-weight: 600;
        margin-top: 4px;
    }

    /* TOMBOL TENGAH BESAR MELAYANG (FAB - Floating Action Button) */
    .mbm-item.mbm-center {
        position: relative;
        top: -15px; /* Mengangkat tombol ke atas */
        flex: 1.2;
    }

    .mbm-center-btn {
        background: #17a2b8;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 15px rgba(23, 162, 184, 0.4);
        border: 4px solid #f9f9f9; /* Membuat ilusi melayang memotong bar */
        transition: 0.3s;
    }

    .mbm-center-btn svg { width: 28px; height: 28px; fill: #ffffff; }

    .mbm-item.mbm-center:hover .mbm-center-btn {
        transform: translateY(-5px);
        background: #117a8b;
    }

    /* Menyembunyikan bottom bar ini jika layarnya Desktopxx */
    @media (min-width: 769px) {
        .mobile-bottom-bar { display: none !important; }
        body { padding-bottom: 0 !important; }
    }
    
    
    
 /* ==========================================================
   5. STATS & INFO BAR (HOMEPAGE) - REVISI ROUNDED RECTANGLE
   ========================================================== */
.stats-bar-wrapper {
    width: 100%;
    padding: 0 20px;
    margin-top: -50px; /* Menarik kapsul ke atas agar menimpa slider */
    margin-bottom: 40px;
    box-sizing: border-box;
    position: relative; 
    z-index: 99; /* Memastikan kapsul melayang di atas gambar */
}

.stats-pill {
    background-color: #1a56db; /* Warna Biru Utama */
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 24px; /* <--- BAGIAN YANG DIUBAH: Membuat bentuk kotak sudut membulat */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    box-shadow: 0 15px 35px rgba(26, 86, 219, 0.3);
}

/* FIX: Memaksa Grid berjajar rapi ke samping pada Desktop */
.stats-mobile-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1; /* Mengisi ruang kosong di kiri */
    padding-right: 30px; /* Jarak antara grup data dengan tombol CTA */
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
}

.stat-icon svg {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stat-text {
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    font-family: 'Heebo', sans-serif;
}

.stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 4px;
    opacity: 0.9;
}

/* FIX: Garis pemisah proporsional */
.stat-divider {
    width: 1px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 0 15px;
}

.stat-cta {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #ffffff !important;
    transition: 0.3s;
    border-left: 1px solid rgba(255, 255, 255, 0.3); /* Garis pemisah sebelum CTA */
    padding-left: 30px;
}

.stat-cta:hover {
    opacity: 0.8;
    transform: translateX(5px);
}

.cta-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.cta-title {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
}

.cta-subtitle {
    font-size: 11px;
    font-weight: 500;
}

.stat-cta-icon svg {
    width: 30px;
    height: 30px;
    stroke: #ffffff;
    fill: none;
}

 /* ==========================================================
   FIX RUANG KOSONG HEADER (BERLAKU GLOBAL)
   ========================================================== */
.header-wrapper { height: auto !important; min-height: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
.site-content, #content, .featured-wrapper { margin-top: 0 !important; padding-top: 0 !important; }

/* ==========================================================
   --- RESPONSIVE MOBILE UNTUK STATS BAR (DISEMBUNYIKAN) ---
   ========================================================== */
@media (max-width: 991px) {
    /* Menyembunyikan keseluruhan kapsul biru di versi HP/Tablet */
    .stats-bar-wrapper {
        display: none !important;
    }
}


/* ==========================================================
   HOMEPAGE: LATEST NEWS (HYBRID DESKTOP & MOBILE)
   ========================================================== */

/* 1. VISIBILITY CONTROL (PENGATUR TAMPILAN) */
.latnews-desktop-view { display: block; margin-top: 30px; }
.latnews-mobile-view { display: none; }

/* Saat layar mengecil ke ukuran Tablet/HP (di bawah 991px) */
@media (max-width: 991px) {
    .latnews-desktop-view { display: none !important; }
    .latnews-mobile-view { display: block !important; margin-top: 20px; }
}

/* 2. STYLE UNTUK DESKTOP HERO + SIDEBAR LAYOUT */
.latnews-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

/* Kiri: Hero News */
.latnews-hero {
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    padding: 40px;
    color: #ffffff;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.latnews-hero-content { position: relative; z-index: 2; }

.latnews-hero-category {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.latnews-hero-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.3;
}
.latnews-hero-title a { color: #ffffff; text-decoration: none; transition: opacity 0.3s; }
.latnews-hero-title a:hover { opacity: 0.8; }

.latnews-hero-meta {
    display: flex;
    gap: 20px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 15px;
}
.latnews-hero-meta i { margin-right: 5px; }

.latnews-hero-excerpt {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 25px;
}

.latnews-hero-button {
    background: #ffffff;
    color: #667eea;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}
.latnews-hero-button:hover {
    background: #f8f9ff;
    gap: 15px;
    transform: translateX(5px);
}

/* Kanan: Sidebar News */
.latnews-sidebar {
    background: #f8fafc;
    border-radius: 15px;
    padding: 25px;
    border: 1px solid #e2e8f0;
}

.latnews-sidebar-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #667eea;
}

.latnews-sidebar-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}
.latnews-sidebar-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.latnews-sidebar-thumb {
    width: 75px;
    height: 75px;
    background-color: #e2e8f0;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    flex-shrink: 0;
    display: block;
    transition: opacity 0.3s;
}
.latnews-sidebar-thumb:hover { opacity: 0.8; }

.latnews-sidebar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.latnews-sidebar-content h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.4;
}
.latnews-sidebar-content h4 a { color: #1f2937; text-decoration: none; transition: color 0.3s; }
.latnews-sidebar-content h4 a:hover { color: #667eea; }

.latnews-date {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
}
.latnews-date i { color: #667eea; }

/* ==========================================================
   GARIS PEMBATAS ATAS - SECTION BERITA (BOXED / SEJAJAR KONTEN)
   ========================================================== */
.latnews-wrapper {
    margin-top: 20px;
    border-top: none !important; /* Mematikan garis full-width yang sebelumnya */
}

.latnews-wrapper .container {
    border-top: 1px solid #e2e8f0; /* Garis abu-abu diterapkan di dalam batas container */
    padding-top: 40px; /* Jarak ruang bernapas antara garis dan teks BERITA */
}