:root {
        --green-dark: #0f381e;
        --green-main: #1e4d2b;
        --green-medium: #2d7a42;
        --green-light: #e8f5e9;
        --green-accent: #82c91e;
    }

    /* Mengunci lebar viewport mobile agar tidak bocor ke kanan */
html, body {
width: 100%;
max-width: 100%;
overflow-x: clip !important; /* clip, bukan hidden, agar navbar sticky tetap berfungsi */
}

/* Memastikan semua section memotong elemen yang keluar batas */
section,
.psb-landscape-container,
#fasilitasCarousel {
overflow-x: hidden;
}


    /* Hero Carousel Slider Custom */
    .hero-carousel .carousel-item {
        height: 85vh;
        min-height: 520px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .hero-carousel .overlay-green {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(135deg, rgba(15, 56, 30, 0.92) 0%, rgba(30, 77, 43, 0.78) 60%, rgba(15, 56, 30, 0.85) 100%);
    }

    .hero-carousel .carousel-indicators-bar {
        bottom: 30px;
        margin-bottom: 0;
        gap: 10px;
    }

    .hero-carousel .carousel-indicators-bar [data-bs-target] {
        width: 45px;
        height: 6px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.4);
        border: none;
        transition: all 0.3s ease;
    }

    .hero-carousel .carousel-indicators-bar .active {
        width: 75px;
        background-color: var(--green-accent);
    }

    /* Badges & Theme Styles */
    .badge-green-theme {
        background-color: rgba(130, 201, 30, 0.2);
        color: #b2f2bb;
        border: 1px solid var(--green-accent);
    }

    .text-green-accent {
        color: var(--green-accent) !important;
    }

    .bg-green-soft {
        background-color: #f2f9f4;
    }

    /* Modern Cards Hover Effects */
    .card-interactive {
        transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
        border: 1px solid rgba(30, 77, 43, 0.08);
    }

    .card-interactive:hover {
        transform: translateY(-8px);
        box-shadow: 0 16px 30px rgba(30, 77, 43, 0.12) !important;
        border-color: var(--green-medium);
    }

    /* PSB Banner Design */
    .psb-banner-wrapper {
        background: linear-gradient(135deg, #0f381e 0%, #1e4d2b 100%);
        border-radius: 2rem;
        position: relative;
        overflow: hidden;
    }

    .psb-banner-wrapper::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 350px;
        height: 350px;
        background: rgba(130, 201, 30, 0.12);
        border-radius: 50%;
        pointer-events: none;
    }

    /* Nav Pills Modern */
    .nav-pills-green .nav-link {
        color: var(--green-main);
        font-weight: 600;
        border-radius: 50rem;
        padding: 12px 26px;
        background-color: #ffffff;
        border: 1px solid #d3e2d5;
        transition: all 0.3s ease;
    }

    .nav-pills-green .nav-link.active,
    .nav-pills-green .nav-link:hover {
        background-color: var(--green-main);
        color: #ffffff;
        box-shadow: 0 6px 16px rgba(30, 77, 43, 0.2);
    }

    .img-hover-scale {
        overflow: hidden;
        border-radius: 1rem;
    }

    .img-hover-scale img {
        transition: transform 0.5s ease;
    }

    .img-hover-scale:hover img {
        transform: scale(1.05);
    }

    @media (max-width: 768px) {
        .hero-carousel .carousel-item {
            height: 75vh;
            min-height: 480px;
        }
        .hero-title {
            font-size: 2.2rem;
        }
    }

	/* ==========================================
   STYLING EKOSISTEM PROGRAM & HOVER ANIMATION
   ========================================== */
#ekosistem .nav-pills-green {
gap: 12px;
}

/* Tab Non-Aktif: Teks Hijau Gelap dengan Background Putih & Border Jelas */
#ekosistem .nav-pills-green .nav-link {
color: #1e4d2b !important;
background-color: #ffffff;
border: 2px solid #c8e6c9;
font-weight: 700;
padding: 12px 24px;
border-radius: 50rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

/* Hover Tab Non-Aktif: Efek Naik & Glow Lembut */
#ekosistem .nav-pills-green .nav-link:hover {
color: #0f381e !important;
background-color: #e8f5e9;
border-color: #1e4d2b;
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(30, 77, 43, 0.15);
}

/* Tab Aktif: Gradien Hijau Mewah & Teks Putih Terang */
#ekosistem .nav-pills-green .nav-link.active {
color: #ffffff !important;
background: linear-gradient(135deg, #1e4d2b 0%, #0f381e 100%);
border-color: #1e4d2b;
box-shadow: 0 10px 22px rgba(30, 77, 43, 0.3);
}

#ekosistem .nav-pills-green .nav-link.active i {
color: #82c91e !important;
}

/* Kartu Ekosistem Tab Content */
.ekosistem-card {
background-color: #ffffff;
border: 1px solid rgba(30, 77, 43, 0.12);
border-radius: 1.5rem;
transition: all 0.35s ease;
}

/* Card Item untuk Klub & Ekstra (Tab 4) dengan Animasi Hover Interaktif */
.klub-card-item {
background: #ffffff;
border: 2px solid #e0eee2;
border-radius: 1.25rem;
padding: 1.5rem 1rem;
text-align: center;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.klub-card-item i {
color: #1e4d2b;
transition: transform 0.35s ease, color 0.35s ease;
}

.klub-card-item span {
color: #1f2937 !important; /* Warna teks gelap tajam saat idle */
font-weight: 700;
transition: color 0.3s ease;
}

/* Hover State untuk Kartu Klub: Inversi Warna & Icon Bounce */
.klub-card-item:hover {
background: linear-gradient(135deg, #1e4d2b 0%, #0f381e 100%);
border-color: #1e4d2b;
transform: translateY(-6px) scale(1.03);
box-shadow: 0 12px 24px rgba(30, 77, 43, 0.22);
}

.klub-card-item:hover i {
color: #82c91e !important;
transform: scale(1.25) rotate(6deg);
}

.klub-card-item:hover span {
color: #ffffff !important; /* Teks otomatis jadi putih bersih saat di-hover */
}

/* ==========================================
   STYLING PSB INTERACTIVE LANDSCAPE BANNER
   ========================================== */
.psb-landscape-container {
position: relative;
border-radius: 2rem;
overflow: hidden;
background-color: #0f381e;
box-shadow: 0 20px 40px rgba(15, 56, 30, 0.25);
}

/* Background Image Landscape dengan Hover Zoom Smooth */
.psb-bg-landscape {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.35;
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
z-index: 1;
}

.psb-landscape-container:hover .psb-bg-landscape {
transform: scale(1.06);
opacity: 0.45;
}

/* Gradient Overlay & Content Layer */
.psb-overlay-gradient {
position: relative;
z-index: 2;
background: linear-gradient(135deg, rgba(15, 56, 30, 0.92) 0%, rgba(30, 77, 43, 0.78) 50%, rgba(15, 56, 30, 0.88) 100%);
padding: 3.5rem 2.5rem;
}

/* Glassmorphism Cards */
.psb-glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 1.25rem;
padding: 1.5rem;
transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.psb-glass-card:hover {
background: rgba(255, 255, 255, 0.2);
border-color: #82c91e;
transform: translateY(-6px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Interactive Step Nav Pills */
.psb-step-nav .nav-link {
background: rgba(255, 255, 255, 0.12);
color: #e8f5e9 !important;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50rem;
padding: 10px 22px;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
}

.psb-step-nav .nav-link:hover {
background: rgba(130, 201, 30, 0.25);
color: #ffffff !important;
border-color: #82c91e;
transform: translateY(-2px);
}

.psb-step-nav .nav-link.active {
background: #82c91e !important;
color: #0f381e !important;
border-color: #82c91e;
font-weight: 700;
box-shadow: 0 6px 16px rgba(130, 201, 30, 0.4);
}

@media (max-width: 768px) {
.psb-overlay-gradient {
    padding: 2rem 1.25rem;
}
}

.psb-carousel {
border-radius: 1.5rem;
overflow: hidden;
box-shadow: 0 16px 35px rgba(0, 0, 0, 0.35);
border: 1.5px solid rgba(255, 255, 255, 0.25);
position: relative;
}

.psb-carousel .carousel-item {
height: 380px;
background-size: cover;
background-position: center;
position: relative;
}

/* Gradient Overlay Tipis pada Gambar Slider */
.psb-carousel .carousel-item::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.1) 40%, rgba(15, 56, 30, 0.85) 100%);
}

/* Floating Status Badge di Pojok Atas Slider */
.psb-status-float-badge {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
background: rgba(130, 201, 30, 0.95);
color: #0f381e;
font-size: 0.85rem;
font-weight: 800;
padding: 8px 16px;
border-radius: 50rem;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(6px);
}

.pulse-dot {
width: 8px;
height: 8px;
background-color: #0f381e;
border-radius: 50%;
display: inline-block;
animation: pulse 1.5s infinite;
}

@keyframes pulse {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(15, 56, 30, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(15, 56, 30, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(15, 56, 30, 0); }
}

/* Glassmorphism Caption di Bagian Bawah Gambar */
.psb-carousel-caption-glass {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
z-index: 5;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 14px 18px;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.3);
text-align: left;
transition: transform 0.3s ease;
}

.psb-carousel:hover .psb-carousel-caption-glass {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.22);
}

/* ==========================================
   STYLING SLIDER FASILITAS SEKOLAH
   ========================================== */
#fasilitasCarousel {
padding-bottom: 50px; /* Ruang untuk indikator di bawah */
}

/* Navigasi Panah Luar (Tombol Prev/Next) */
.fasilitas-carousel-btn {
width: 45px;
height: 45px;
background-color: var(--green-main);
color: #ffffff;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 0.9;
transition: all 0.3s ease;
border: 2px solid #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fasilitas-carousel-btn:hover {
background-color: var(--green-accent);
color: var(--green-dark);
opacity: 1;
transform: translateY(-50%) scale(1.1);
}

.fasilitas-carousel-btn.carousel-control-prev {
left: -20px;
}

.fasilitas-carousel-btn.carousel-control-next {
right: -20px;
}

/* Indikator Slider Fasilitas */
.fasilitas-indicators [data-bs-target] {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #c8e6c9;
border: none;
margin: 0 5px;
transition: all 0.3s ease;
}

.fasilitas-indicators .active {
width: 32px;
border-radius: 10px;
background-color: var(--green-main);
}

/* Card Styling dalam Slider */
.fasilitas-card {
background: #ffffff;
border: 1px solid rgba(30, 77, 43, 0.12);
border-radius: 1.25rem;
padding: 1.5rem;
height: 100%;
transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.fasilitas-card:hover {
transform: translateY(-6px);
box-shadow: 0 14px 28px rgba(30, 77, 43, 0.12) !important;
border-color: var(--green-medium);
}

.fasilitas-icon-box {
width: 55px;
height: 55px;
min-width: 55px;
background-color: #f2f9f4;
color: var(--green-main);
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: all 0.3s ease;
}

.fasilitas-card:hover .fasilitas-icon-box {
background-color: var(--green-main);
color: #ffffff;
}

@media (max-width: 991px) {
.fasilitas-carousel-btn.carousel-control-prev { left: 0; }
.fasilitas-carousel-btn.carousel-control-next { right: 0; }
}
/* Penyesuaian Ruang Slider 2 Baris */
#fasilitasCarousel .carousel-item {
padding: 10px 5px; /* Memberi ruang agar bayangan hover card tidak terpotong */
}

/* ==========================================
   STYLING KURIKULUM INTERAKTIF
   ========================================== */
.curriculum-hero-img-wrapper {
position: relative;
border-radius: 1.5rem;
overflow: hidden;
box-shadow: 0 15px 35px rgba(15, 56, 30, 0.15);
}

.curriculum-hero-img {
width: 100%;
height: 360px;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.curriculum-hero-img-wrapper:hover .curriculum-hero-img {
transform: scale(1.05);
}

/* Card Mata Pelajaran Interaktif */
.subject-card {
background: #ffffff;
border: 1px solid rgba(15, 56, 30, 0.08);
border-radius: 1.25rem;
overflow: hidden;
transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
height: 100%;
display: flex;
flex-direction: column;
}

.subject-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 32px rgba(15, 56, 30, 0.12);
border-color: #82c91e;
}

.subject-card-img-holder {
position: relative;
height: 170px;
overflow: hidden;
}

.subject-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}

.subject-card:hover .subject-card-img {
transform: scale(1.08);
}

.subject-icon-badge {
position: absolute;
bottom: -20px;
right: 20px;
width: 48px;
height: 48px;
background: #0f381e;
color: #82c91e;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

.subject-card:hover .subject-icon-badge {
background: #82c91e;
color: #0f381e;
transform: scale(1.1) rotate(6deg);
}

/* Category Filter Nav Pills */
.curriculum-nav-pills .nav-link {
background: #eaf4eb;
color: #0f381e;
border-radius: 50rem;
padding: 10px 24px;
font-weight: 600;
transition: all 0.3s ease;
}

.curriculum-nav-pills .nav-link:hover {
background: #c8e6c9;
}

.curriculum-nav-pills .nav-link.active {
background: #0f381e !important;
color: #ffffff !important;
box-shadow: 0 6px 16px rgba(15, 56, 30, 0.25);
}


/* ==========================================
   STYLING VISI MISI SOFT ELEGANT & RESPONSIVE
   ========================================== */
.vm-soft-wrapper {
background: linear-gradient(180deg, #f5f9f6 0%, #ffffff 100%);
border-radius: 2rem;
padding: 3rem 2rem;
border: 1px solid #e2ece5;
}

/* Card Visi Soft Highlight */
.visi-soft-card {
background: #ffffff;
border: 1.5px solid #d4e5d9;
border-radius: 1.5rem;
padding: 2.25rem 2rem;
box-shadow: 0 10px 25px rgba(27, 77, 46, 0.04);
position: relative;
overflow: hidden;
}

.visi-soft-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: linear-gradient(180deg, #82c91e 0%, #2e7d32 100%);
}

.visi-quote-mark {
font-size: 3rem;
line-height: 1;
color: rgba(46, 125, 50, 0.15);
font-family: Georgia, serif;
}

/* Value Badges Soft */
.badge-soft-pill {
background: #edf5ef;
color: #1c4428;
border: 1px solid #d4e5d9;
padding: 6px 14px;
border-radius: 50rem;
font-size: 0.825rem;
font-weight: 600;
}

/* Card Misi Soft */
.misi-soft-card {
background: #ffffff;
border: 1px solid #e2ece5;
border-radius: 1.25rem;
padding: 1.5rem;
height: 100%;
transition: all 0.3s ease;
}

.misi-soft-card:hover {
border-color: #a8d5b5;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(27, 77, 46, 0.06);
}

.misi-icon-soft {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}

/* Theme Colors Muted/Soft */
.icon-theme-green { background: #eaf4ed; color: #2e7d32; }
.icon-theme-teal  { background: #e6f7f5; color: #00897b; }
.icon-theme-amber { background: #fef7e6; color: #b78103; }
.icon-theme-blue  { background: #edf4fc; color: #1e88e5; }

@media (max-width: 767px) {
.vm-soft-wrapper {
    padding: 1.5rem 1rem;
    border-radius: 1.25rem;
}
.visi-soft-card {
    padding: 1.5rem 1.25rem;
    border-radius: 1rem;
}
.misi-soft-card {
    padding: 1.25rem;
}
}