/* ==========================================================
   1. GAYA PRELOADER & LOGO
   ========================================================== */
.sekolah-logo-preload { width: 150px; margin-bottom: 15px; animation: pulseLogo 1.5s infinite ease-in-out; display: inline-flex; justify-content: center; align-items: center; font-weight: 700; }
.preloader .custom-logo-link .custom-logo { width: 150px; height: auto; }
@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. DESIGN TOKEN: TYPOGRAPHY + COLOR SYSTEM
   ========================================================== */
.top-bar { background: #f5f6f8 !important; border-top: 1px solid #e4e7ec; border-bottom: 1px solid #e4e7ec; }
.top-bar .container { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-top: 7px !important; padding-bottom: 7px !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: 16px; }
.top-bar .nav-right { gap: 16px; }
.top-bar .contact-label { display: none !important; }
.top-bar .contact-phone a, .top-bar .contact-email a { color: var(--biz-muted-2) !important; font-size: 13px; font-weight: 500; }
.top-bar .contact-phone .icon svg, .top-bar .contact-email .icon svg { fill: #d45a92 !important; }
.top-social-icons ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; align-items: center; }
.top-social-icons ul li a { color: var(--biz-muted-2) !important; font-size: 13px; font-weight: 500; text-decoration: none; transition: color 0.2s ease; }
.top-social-icons ul li a:hover { color: var(--biz-primary-blue) !important; }
.site-header {
    background: var(--biz-glass) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.35) !important;
}
.site-header .container { min-height: 72px; }
.main-navigation { display: flex; align-items: center; gap: 24px; }
.main-navigation > div > .primary-menu > li > a { font-size: 13px !important; letter-spacing: 0.03em; color: var(--biz-muted-2) !important; font-weight: 600; }
.main-navigation > div > .primary-menu > li > a:hover { color: var(--biz-primary-blue) !important; }
.main-navbar-cta { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: var(--biz-radius-md); color: #fff !important; text-decoration: none; font-size: 16px; font-weight: 800; background: var(--biz-main-gradient); white-space: nowrap; box-shadow: 0 10px 30px rgba(78, 154, 214, 0.28); }
.top-bar .contact-phone a, .top-bar .contact-email a { color: #7a7f87 !important; font-size: 13px; font-weight: 500; }
.top-bar .contact-phone .icon svg, .top-bar .contact-email .icon svg { fill: #d45a92 !important; }
.top-social-icons ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; align-items: center; }
.top-social-icons ul li a { color: #7a7f87 !important; font-size: 13px; font-weight: 500; text-decoration: none; transition: color 0.2s ease; }
.top-social-icons ul li a:hover { color: #2a7fbe !important; }
.site-header { background: #f5f6f8 !important; border-bottom: 1px solid #dfe3e8 !important; }
.site-header .container { min-height: 72px; }
.main-navigation { display: flex; align-items: center; gap: 24px; }
.main-navigation > div > .primary-menu > li > a { font-size: 13px !important; letter-spacing: 0.03em; color: #6d7380 !important; }
.main-navigation > div > .primary-menu > li > a:hover { color: #2a7fbe !important; }
.main-navbar-cta { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 15px; color: #fff !important; text-decoration: none; font-size: 16px; font-weight: 700; background: linear-gradient(90deg, #4b8bd6 0%, #4bc2a6 100%); white-space: nowrap; }
.main-navbar-cta:hover { filter: brightness(0.95); }
li.mobile-only-extras { display: none !important; }

/* ==========================================================
   4. HERO/SLIDER BUSINESS LOOK
   ========================================================== */
.featured-wrapper { background: transparent !important; height: auto !important; padding: 32px 0 28px !important; }
.featured-slider { width: min(1240px, calc(100% - 80px)); margin: 0 auto !important; border-radius: 30px; overflow: hidden; background: #dfe8ef; box-shadow: var(--biz-soft-shadow); }
.featured-slider .slick-list .slick-track .slick-slide { height: 560px !important; }
.featured-slider .slick-list .slick-track .slick-slide img.slider-image-fit,
.featured-slider .slick-list .slick-track .slick-slide video { height: 560px !important; object-fit: cover !important; object-position: center !important; }
.featured-slider .slick-list .slick-track .slick-slide:before { background: linear-gradient(100deg, rgba(78,154,214,0.6) 0%, rgba(91,190,159,0.45) 45%, rgba(91,190,159,0.08) 100%) !important; }
.featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container { width: min(1240px, 100%) !important; }
.featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container .fsc-content { top: 50% !important; left: 60px !important; transform: translateY(-50%); width: min(560px, calc(100% - 120px)) !important; }
.featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container .fsc-content h3 { font-size: 22px !important; color: rgba(255,255,255,0.9) !important; font-weight: 500; margin-bottom: 6px !important; }
.featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container .fsc-content h2 { font-size: 72px !important; line-height: 1.03em !important; text-transform: uppercase; margin-bottom: 10px !important; }
.featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container .fsc-content h2 a { color: #ffffff !important; font-weight: 800; text-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
   3. HERO/SLIDER BUSINESS LOOK
   ========================================================== */
.featured-wrapper { background: #edf1f5 !important; height: auto !important; padding: 32px 0 28px !important; }
.featured-slider { width: min(1240px, calc(100% - 80px)); margin: 0 auto !important; border-radius: 42px; overflow: hidden; background: #dfe8ef; }
.featured-slider .slick-list .slick-track .slick-slide { height: 560px !important; }
.featured-slider .slick-list .slick-track .slick-slide img.slider-image-fit,
.featured-slider .slick-list .slick-track .slick-slide video { height: 560px !important; object-fit: cover !important; object-position: center !important; }
.featured-slider .slick-list .slick-track .slick-slide:before { background: linear-gradient(90deg, rgba(64,171,198,0.62) 0%, rgba(64,171,198,0.45) 46%, rgba(64,171,198,0.08) 100%) !important; }
.featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container { width: min(1240px, 100%) !important; }
.featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container .fsc-content { top: 50% !important; left: 60px !important; transform: translateY(-50%); width: min(560px, calc(100% - 120px)) !important; }
.featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container .fsc-content h3 { font-size: 22px !important; color: #f4fbff !important; margin-bottom: 6px !important; }
.featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container .fsc-content h2 { font-size: 72px !important; line-height: 1.03em !important; text-transform: uppercase; margin-bottom: 10px !important; }
.featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container .fsc-content h2 a { color: #ffffff !important; text-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
.featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container .fsc-content .btn { display: none !important; }
.featured-slider ul.slick-dots { left: 50% !important; transform: translateX(-50%); right: auto !important; top: auto !important; bottom: 22px !important; display: flex !important; gap: 8px; }
.featured-slider ul.slick-dots li { margin: 0 !important; }
.featured-slider ul.slick-dots li button { width: 20px !important; height: 6px !important; border-radius: 6px !important; border: none !important; background: rgba(255, 255, 255, 0.45) !important; }
.featured-slider ul.slick-dots li.slick-active button { background: #ffffff !important; }
.featured-box { display: none !important; }

/* ==========================================================
   5. RESPONSIVE MOBILE (MAKS 768px)xxx
   4. 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; }
    .main-navbar-cta { display: none !important; }
    .featured-slider {
        width: calc(100% - 16px);
        border-radius: 22px;
        aspect-ratio: 16 / 9;
        min-height: 210px;
        max-height: 250px;
        background: #a3a3a3;
    }
    .featured-slider .slick-list,
    .featured-slider .slick-track,
    .featured-slider .slick-list .slick-track .slick-slide { height: 100% !important; }
    .featured-slider .slick-list .slick-track .slick-slide img.slider-image-fit,
    .featured-slider .slick-list .slick-track .slick-slide video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
    .featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container .fsc-content { left: 22px !important; width: calc(100% - 44px) !important; }
    .featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container .fsc-content h2 { font-size: 36px !important; }
    .featured-slider .slick-list .slick-track .slick-slide .fsc-wrapper .fsc-container .fsc-content h3 { font-size: 16px !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; }
}

/* ==========================================================
       6. MOBILE BOTTOM MENU (GAYA APLIKASI NATIVE)
       5. MOBILE BOTTOM MENU (GAYA APLIKASI NATIVE)
       ========================================================== */
    /* Memberi jarak ekstra di bawah halaman agar konten tidak tertutup menu (khusus mobile). */
    @media (max-width: 768px) {
        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 layar desktop. */
    @media (min-width: 769px) {
        .mobile-bottom-bar { display: none !important; }
        body { padding-bottom: 0 !important; }
    }