/* ==========================================================================
   STYLE.CSS - SIDARASD (SISTEM DATA & INFORMASI SEKOLAH DASAR)
   ========================================================================== */

/* --- Pengaturan Dasar & Pencegahan Overflow --- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- Variabel Warna Tema (Mendukung Light & Dark Mode) --- */
:root {
    --bg-color: #fcfdfd;
    --bg-alt: #f2f5f4;
    --bg-menu: #fff9e7; 
    --card-bg: #ffffff;
    --primary-green: #1b4332;
    --accent-gold: #c5a02e;
    --text-main: #1a1c1e;
    --text-muted: #6b7280;
    --border-color: rgba(27, 67, 50, 0.1);
}

[data-theme="dark"] {
    --bg-color: #0b1a14;
    --bg-alt: #0e241c;
    --bg-menu: #0b1a14;
    --card-bg: #162a22;
    --primary-green: #40916c;
    --accent-gold: #e9c46a;
    --text-main: #f3f4f6;    
    --text-muted: #9ca3af;
    --border-color: rgba(255, 255, 255, 0.1);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    padding-top: 80px; 
    transition: background-color 0.3s, color 0.3s;
    margin: 0;
}

/* --- Tipografi & Heading Global --- */
.section-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--text-main);
    font-size: 2.2rem;
    line-height: 1.3;
}

.section-subheading {
    color: var(--primary-green);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.section-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
}

/* --- Preloader (Mode Glassmorphism) --- */
#preloader {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: rgba(252, 253, 253, 0.6); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

[data-theme="dark"] #preloader {
    background-color: rgba(11, 26, 20, 0.7); 
}

.loader-hidden { 
    opacity: 0; 
    visibility: hidden; 
}

/* --- Navbar Atas --- */
.navbar-custom {
    background-color: var(--card-bg);
    border-bottom: 2px solid var(--bg-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s;
}

.nav-link {
    color: var(--text-main) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-link:hover, .nav-link.active { 
    color: var(--bg-color) !important; 
    background-color: var(--primary-green); 
    border-radius: 5px;
}

.brand-text { 
    font-family: 'Montserrat'; 
    color: var(--primary-green); 
    font-size: 0.9rem; 
    font-weight: 700; 
}

.brand-text span { 
    display: block; 
    font-size: 0.6rem; 
    color: var(--accent-gold); 
    letter-spacing: 1px; 
}

/* --- UI Elements & Buttons --- */
.btn-theme {
    background-color: var(--primary-green);
    color: #fff;
    border-radius: 12px;
    padding: 8px 16px;
    border: none;
    transition: 0.3s;
}

.btn-theme:hover { 
    background-color: var(--accent-gold); 
    color: #fff; 
}

.btn-rounded {
    border-radius: 10px;
    padding: 8px 20px;
    font-weight: 600;
}

/* --- Bottom Nav (Mobile Only) --- */
.bottom-nav {
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    background: var(--card-bg);
    border-top: 1px solid var(--border-color); 
    display: flex; 
    padding: 12px 0; 
    z-index: 1050;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.03);
}

.bottom-item {
    flex: 1; 
    text-align: center; 
    color: var(--text-muted); 
    text-decoration: none !important; 
    font-size: 0.7rem; 
    transition: 0.2s;
}

.bottom-item.active { 
    color: var(--primary-green); 
    font-weight: 600; 
}

.bottom-item i { 
    font-size: 1.3rem; 
    display: block; 
    margin-bottom: 2px; 
}

@media (min-width: 992px) { 
    .bottom-nav { display: none; } 
}

/* --- Menu Bottom Sheet (Mobile) --- */
.more-sheet {
    position: fixed; 
    bottom: -100%; 
    left: 0; 
    width: 100%;
    background: var(--card-bg); 
    border-radius: 30px 30px 0 0;
    z-index: 1600; 
    padding: 30px 20px; 
    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.more-sheet.active { 
    bottom: 0; 
}

.sheet-link {
    text-decoration: none !important; 
    color: var(--text-main) !important;
    background: var(--bg-color); 
    padding: 15px 8px; 
    border-radius: 20px;
    text-align: center; 
    font-size: 9px; 
    transition: 0.3s;
    border: 1px solid var(--border-color);
}

.sheet-link i { 
    color: var(--accent-gold); 
    font-size: 1rem; 
    margin-bottom: 8px; 
    display: block; 
}

.sheet-link:hover { 
    border-color: var(--primary-green); 
    transform: translateY(-5px); 
}

/* --- Hero Section --- */
.hero-section {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 80px); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

.hero-bg {
    background-image: url('../img/vector_disdik.avif');
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(27, 67, 50, 0.95) 0%, rgba(11, 26, 20, 0.85) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 15px;
    max-width: 900px;
}

.hero-img {
    max-width: 100%;
    height: auto;
}

.hero-small-text {
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
    color: var(--accent-gold);
}

.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    background: linear-gradient(to right, #fff, var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-title-second {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 20px;
    background: linear-gradient(to right, #fff, var(--accent-gold));
    -webkit-background-clip: text;
}

.hero-description {
    font-size: 1.25rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
}

/* --- Layanan Section --- */
.layanan-section {
    position: relative; 
    padding: 80px 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    z-index: 1; 
}

.layanan-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color); 
    opacity: 0.85; 
    z-index: -1;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
    font-family: 'Montserrat', sans-serif;
    color: var(--primary-green);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.layanan-card {
    border-radius: 20px;
    padding: 40px 20px;
    color: white;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border: none;
    height: 100%;
}

.grad-1 { background: linear-gradient(135deg, var(--primary-green) 0%, #40916c 100%); }
.grad-2 { background: linear-gradient(135deg, var(--accent-gold) 0%, #e9c46a 100%); }
.grad-3 { background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%); }

.layanan-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.layanan-icon {
    font-size: 3.5rem;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.9);
}

.layanan-card h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.layanan-card p {
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

/* --- Program Unggulan Section --- */
.program-section {
    padding: 80px 0;
    background-color: var(--bg-alt);
    transition: background-color 0.3s;
}

.program-card {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 16px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    height: 100%;
}

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

.program-icon {
    min-width: 55px;
    height: 55px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-right: 18px;
    flex-shrink: 0;
}

.program-title {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 0;
}

.program-title small {
    font-weight: normal;
    color: #4b5563;
    font-size: 0.8rem;
    display: block;
    margin-top: 5px;
}

/* Gradasi Warna Khusus Program Unggulan */
.card-model { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border: 1px solid #bfdbfe; }
.icon-model { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

.card-ukbm { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #fcd34d; }
.icon-ukbm { background: linear-gradient(135deg, #f59e0b, #d97706); }

.card-uka { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); border: 1px solid #6ee7b7; }
.icon-uka { background: linear-gradient(135deg, #10b981, #047857); }

.card-uld { background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); border: 1px solid #c4b5fd; }
.icon-uld { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }

.card-bsan { background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); border: 1px solid #f9a8d4; }
.icon-bsan { background: linear-gradient(135deg, #ec4899, #be185d); }

.card-talenta { background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%); border: 1px solid #fda4af; }
.icon-talenta { background: linear-gradient(135deg, #f43f5e, #e11d48); }

/* --- Statistik Section --- */
.statistik-section {
    background-color: var(--primary-green); 
    padding: 60px 0;
    color: #ffffff;
    border-top: 3px solid var(--accent-gold); 
}

.stat-icon {
    font-size: 2.5rem;
    color: var(--accent-gold); 
    margin-bottom: 15px;
}

.stat-number {
    font-size: 2.8rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.stat-text {
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

/* --- Berita Section --- */
.berita-section {
    padding: 80px 0;
    background-color: var(--bg-color); 
}

.berita-card {
    background-color: var(--card-bg); 
    border-radius: 16px;
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    border: 1px solid var(--border-color);
    transition: 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.berita-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

.berita-img {
    width: 100%;
    height: 200px;
    object-fit: cover; 
    border-bottom: 3px solid var(--accent-gold); 
}

.berita-content {
    padding: 25px;
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.berita-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-weight: 500;
}

.berita-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 15px;
    line-height: 1.4;
}

.berita-excerpt {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
    flex-grow: 1; 
}

.berita-link {
    color: var(--primary-green);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: 0.2s;
}

.berita-link:hover {
    color: var(--accent-gold);
    text-decoration: none;
}

/* --- Agenda & Galeri Section --- */
.agenda-galeri-section {
    padding: 80px 0;
    background-color: var(--bg-alt); 
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.agenda-item {
    display: flex;
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: 0.3s;
}

.agenda-item:hover {
    border-left: 4px solid var(--primary-green);
    transform: translateX(5px); 
}

.agenda-date {
    background: linear-gradient(135deg, var(--primary-green) 0%, #40916c 100%);
    color: white;
    border-radius: 10px;
    width: 65px;
    height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.date-num {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
}

.date-month {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.agenda-info h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 5px;
    margin-top: 5px;
}

.agenda-info p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0;
}

.galeri-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 180px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.galeri-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.galeri-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(27, 67, 50, 0.7); 
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2rem;
    opacity: 0;
    transition: 0.3s ease;
}

.galeri-item:hover img {
    transform: scale(1.1); 
}

.galeri-item:hover .galeri-overlay {
    opacity: 1; 
}

/* --- Kontak Section --- */
.kontak-section {
    padding: 80px 0;
    background-color: var(--card-bg); 
    border-top: 1px solid var(--border-color);
}

.kontak-desc {
    color: var(--text-muted);
    margin-bottom: 30px;
    font-size: 1.05rem;
    line-height: 1.6;
}

.kontak-item {
    display: flex;
    margin-bottom: 25px;
}

.kontak-icon {
    width: 50px;
    height: 50px;
    background-color: var(--bg-menu);
    color: var(--primary-green);
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 20px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    transition: 0.3s ease; 
}

.kontak-item:hover .kontak-icon {
    background-color: var(--primary-green);
    color: #ffffff;
    transform: scale(1.1); 
}

.kontak-item h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 5px;
}

.kontak-item p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0;
    line-height: 1.5;
}

.map-container {
    width: 100%;
    height: 100%;
    min-height: 350px; 
    border-radius: 20px; 
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
}

/* --- Footer Section --- */
.footer-section {
    position: relative;
    padding-top: 80px;
    border-top: 5px solid var(--accent-gold); 
    color: #ffffff; 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    z-index: 1;
}

.footer-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(11, 26, 20, 0.95) 0%, rgba(27, 67, 50, 0.90) 100%);
    z-index: -1; 
}

.footer-section .brand-text { color: #ffffff; }
.footer-section .brand-text span { color: rgba(255, 255, 255, 0.6); }

.footer-desc {
    font-size: 0.9rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8) !important;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.05); 
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: 0.3s ease;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-icon:hover {
    background-color: var(--accent-gold); 
    color: #ffffff;
    transform: translateY(-5px);
    text-decoration: none;
    border-color: var(--accent-gold);
    box-shadow: 0 5px 15px rgba(197, 160, 46, 0.4); 
}

.footer-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
    font-size: 1.15rem;
}

.footer-links li { margin-bottom: 15px; }

.footer-links a {
    color: rgba(255, 255, 255, 0.7); 
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
}

.footer-links a:hover {
    color: var(--accent-gold); 
    transform: translateX(8px);
}

.text-gold {
    color: var(--accent-gold);
    font-size: 0.75rem;
    margin-right: 10px;
}

.footer-bottom {
    background-color: rgba(0, 0, 0, 0.25); 
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 20px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    padding-bottom: 90px; 
}

@media (min-width: 992px) {
    .footer-bottom { padding-bottom: 25px; }
}

/* --- Scroll to Top Button --- */
.scroll-top-btn {
    position: fixed;
    bottom: 90px; 
    right: 20px;
    width: 45px;
    height: 45px;
    background-color: var(--accent-gold); 
    color: #ffffff;
    border: none;
    border-radius: 50%; 
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 1040; 
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); 
    transition: all 0.3s ease; 
}

.scroll-top-btn.show {
    opacity: 1; 
    visibility: visible;
    transform: translateY(0); 
}

.scroll-top-btn:hover {
    background-color: var(--primary-green); 
    transform: translateY(-3px); 
}

@media (min-width: 992px) {
    .scroll-top-btn {
        bottom: 30px; 
        right: 30px;
        width: 50px;
        height: 50px;
    }
}

/* --- Halaman Berita: Filter & Pagination --- */
.filter-btn {
    background-color: transparent;
    color: var(--text-main);
    border: 2px solid var(--border-color);
    border-radius: 25px;
    padding: 8px 20px;
    margin: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--primary-green);
    color: var(--primary-green);
}

.filter-btn.active {
    background-color: var(--primary-green);
    color: #ffffff;
    border-color: var(--primary-green);
    box-shadow: 0 4px 10px rgba(27, 67, 50, 0.2);
}

.berita-item {
    transition: all 0.4s ease-in-out;
    transform: scale(1);
    opacity: 1;
}

.berita-item.sembunyi {
    transform: scale(0.8);
    opacity: 0;
    display: none;
}

.custom-pagination .page-link {
    color: var(--primary-green);
    background-color: var(--card-bg);
    border-color: var(--border-color);
    margin: 0 4px;
    border-radius: 8px; 
    font-weight: 600;
    transition: 0.3s;
}

.custom-pagination .page-link:hover {
    background-color: var(--bg-alt);
    color: var(--accent-gold);
}

.custom-pagination .page-item.active .page-link {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: #ffffff;
}

/* --- Halaman Data Sekolah: Form & Tabel --- */
.form-control-lg {
    background-color: var(--bg-alt);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.form-control-lg:focus {
    background-color: var(--card-bg);
    color: var(--text-main);
    border-color: var(--primary-green);
    box-shadow: none;
}

.custom-table {
    color: var(--text-main);
}

.custom-table td, .custom-table th {
    vertical-align: middle;
    border-top: 1px solid var(--border-color);
}

/* --- Modal Tabs Styling --- */
.custom-tabs {
    border-bottom: 2px solid var(--border-color);
}

.custom-tabs .nav-link {
    color: var(--text-muted);
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 20px;
    transition: 0.3s;
}

.custom-tabs .nav-link:hover {
    color: var(--primary-green);
}

.custom-tabs .nav-link.active {
    color: var(--primary-green);
    background-color: transparent;
    border-bottom: 3px solid var(--primary-green);
}

/* --- Halaman Profil: Struktur Organisasi --- */
.org-chart {
    position: relative;
    padding-top: 20px;
}

.org-node {
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    padding: 20px;
    border-radius: 15px;
    display: inline-block;
    min-width: 200px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    color: var(--text-main);
    z-index: 2;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.org-node:hover {
    transform: translateY(-5px);
    border-color: var(--primary-green);
}

.org-node.leader {
    border-bottom: 4px solid var(--primary-green);
}

.org-node.staff {
    border-top: 4px solid var(--accent-gold);
    width: 100%;
}

.org-line-vertical {
    width: 2px;
    height: 30px;
    background-color: var(--primary-green);
    margin: 0 auto;
}

.org-line-horizontal {
    width: 66%;
    height: 2px;
    background-color: var(--primary-green);
    margin: 0 auto;
}

/* --- Detail Berita / Artikel --- */
.article-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-main);
}

.article-content p {
    margin-bottom: 20px;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0;
}

.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 20px;
}

.breadcrumb-item a {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 600;
}

.breadcrumb-item.active {
    color: var(--text-muted);
}

.sidebar-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-green);
    border-bottom: 3px solid var(--accent-gold);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block;
}

.sidebar-berita-item {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.sidebar-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 15px;
}

.sidebar-info h6 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.4;
}

.sidebar-info a {
    color: var(--text-main);
    text-decoration: none;
    transition: 0.3s;
}

.sidebar-info a:hover {
    color: var(--primary-green);
}

.sidebar-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}


/* ==========================================================================
   MEDIA QUERIES (RESPONSIF LAYAR HP / MOBILE - Lebar Maksimal 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Penyesuaian Tipografi Utama di HP */
    .section-heading {
        font-size: 1.6rem; 
    }
    
    .section-subheading {
        font-size: 0.85rem; 
    }
    
    .section-desc, .kontak-desc {
        font-size: 0.95rem; 
    }
    
    /* Pengurangan Jarak Padding Antar Section di Layar Mobile */
    .program-section, 
    .statistik-section, 
    .berita-section, 
    .agenda-galeri-section, 
    .kontak-section {
        padding: 50px 0; 
    }

    /* Penyesuaian Konten Hero Section di HP */
    .hero-section {
        min-height: calc(100vh - 400px); 
    }
    
    .hero-title { 
        font-size: 2.2rem; 
    }
    
    .hero-title-second { 
        font-size: 1.5rem; 
    }
    
    .hero-description { 
        font-size: 1rem; 
    }
    
    .hero-img {
        max-width: 90%;
        margin: 0 auto;
        display: block;
    }
    
    /* Penyesuaian Komponen Program Unggulan di HP */
    .program-icon {
        min-width: 45px;
        height: 45px;
        font-size: 1.2rem;
        margin-right: 12px;
    }
    
    .program-title {
        font-size: 0.95rem;
    }
    
    /* Penyesuaian Statistik Section di HP */
    .stat-number { 
        font-size: 2rem; 
    }
    
    .stat-icon { 
        font-size: 2rem; 
    }
    
    /* Mengubah Alur Baris Heading Menjadi Rata Tengah Pada Layar Kecil */
    .d-flex.justify-content-between.align-items-end {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
        gap: 10px;
    }
}


/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN PROFIL
   ======================================================== */

/* --- Hero Section Profil --- */
.hero-profil {
    min-height: 45vh !important;
    background-image: url('../img/ruang_bidang_pembinaan_sd.jpeg');
    background-position: center 30%;
}

.hero-overlay-profil {
    background: linear-gradient(135deg, rgba(27, 67, 50, 0.95) 0%, rgba(11, 26, 20, 0.8) 100%);
}

.hero-title-profil {
    font-size: 2.8rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    
    /* Mengembalikan Efek Gradasi Teks Emas-Putih */
    background: linear-gradient(to right, #fff, var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
}

.hero-desc-profil {
    max-width: 700px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
}

/* --- Layout & Background Section --- */
.profil-section {
    padding: 80px 0;
}

.profil-bg-light {
    background-color: var(--bg-color);
}

.profil-bg-alt {
    background-color: var(--bg-alt);
}

/* --- Komponen Teks & Badge --- */
.about-badge {
    display: inline-block;
    padding: 6px 16px;
    margin-bottom: 15px;
    border-radius: 50px;
    background-color: rgba(45, 106, 79, 0.1);
    color: var(--primary-green);
    font-weight: 600;
    font-size: 0.9rem;
}

.about-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-muted);
    text-align: justify;
}

.divider-line {
    width: 60px;
    height: 4px;
    background-color: var(--primary-green);
    margin: 15px auto;
    border-radius: 2px;
}

/* --- Kartu Maklumat & Program --- */
.profil-card {
    border-radius: 20px;
    overflow: hidden;
}

.profil-card-header {
    background-color: var(--primary-green);
}

.card-header-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.profil-card-body {
    background-color: var(--bg-alt);
}

.maklumat-img {
    border-radius: 20px;
}

.profil-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(45, 106, 79, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profil-program-title {
    font-weight: 700;
    color: var(--text-main);
}

/* --- Struktur Organisasi --- */
.struktur-desc {
    font-size: 1.05rem;
}


/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN AGENDA
   ======================================================== */

/* --- Hero Section Agenda --- */
.hero-agenda {
    min-height: 40vh !important;
    background-image: url('../img/office.avif');
    background-position: center;
}

.hero-overlay-agenda {
    background: linear-gradient(135deg, rgba(27, 67, 50, 0.9) 0%, rgba(11, 26, 20, 0.8) 100%);
}

.hero-title-agenda {
    font-size: 2.5rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    /* Memberikan efek gradasi emas agar selaras dengan profil */
    background: linear-gradient(to right, #fff, var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
}

/* --- Layout Section & Teks Meta --- */
.agenda-page-section {
    padding: 60px 0;
    background-color: var(--bg-color);
}

.agenda-meta {
    font-size: 0.85rem;
    line-height: 1.5;
}


/* ========================================================
   MEDIA QUERIES AGENDA (KHUSUS MOBILE - Max 768px)
   ======================================================== */
@media (max-width: 768px) {
    /* Penyesuaian tinggi spanduk agar tidak memakan ruang terlalu banyak */
    .hero-agenda {
        min-height: 30vh !important;
    }

    /* Penyesuaian ukuran judul */
    .hero-title-agenda {
        font-size: 1.8rem;
    }

    /* Mengurangi jarak bantalan atas-bawah */
    .agenda-page-section {
        padding: 40px 0;
    }

    /* Teks detail keterangan slightly lebih kecil di HP */
    .agenda-meta {
        font-size: 0.8rem;
    }
}

/* ========================================================
   MEDIA QUERIES PROFIL (KHUSUS MOBILE - Max 768px)
   ======================================================== */
@media (max-width: 768px) {
    /* Penyesuaian Hero di Layar HP */
    .hero-profil {
        min-height: 35vh !important;
    }

    .hero-title-profil {
        font-size: 2rem;
    }

    .hero-desc-profil {
        font-size: 0.95rem;
    }

    /* Mengurangi Jarak Antar Section */
    .profil-section {
        padding: 50px 0;
    }

    /* Penyesuaian Teks Paragraf */
    .about-text, .struktur-desc {
        font-size: 0.95rem;
        line-height: 1.6;
        text-align: left; /* Rata kiri lebih nyaman dibaca di HP daripada rata kanan-kiri (justify) */
    }

    /* Penyesuaian Kartu & Gambar */
    .profil-card-body {
        padding: 1.5rem !important; /* Memperkecil padding dalam kartu di HP */
    }

    .maklumat-img, .struktur-img {
        width: 100%;
        height: auto;
    }
}

/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN AJANG TALENTA
   ======================================================== */

/* --- Header Hero Ajang Talenta --- */
.header-talenta {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 58, 138, 0.9) 100%), 
                url('https://images.unsplash.com/photo-1523580494112-071d16940d14?q=80&w=1200') no-repeat center center;
    background-size: cover; 
    background-attachment: fixed;
    padding: 140px 0 100px; 
    color: white; 
    text-align: center; 
    border-radius: 0 0 50px 50px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); 
    position: relative; 
    z-index: 1; 
    margin-bottom: 50px;
}

.talenta-badge {
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.talenta-title {
    font-weight: 800;
    font-size: 3.5rem;
    text-shadow: 2px 4px 8px rgba(0,0,0,0.5);
    margin-bottom: 10px;
}

.talenta-desc {
    max-width: 800px;
    font-weight: 300;
    opacity: 0.9;
}

.divider-talenta {
    width: 80px; 
    height: 4px; 
    background: #f59e0b; 
    margin: 15px auto; 
    border-radius: 2px;
}

/* --- Kartu Galeri Prestasi (Hall of Fame) --- */
.kartu-galeri {
    background: var(--card-bg); 
    border-radius: 20px; 
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    transition: all 0.4s ease; 
    border: 1px solid var(--border-color);
    height: 100%; 
    position: relative;
}

.kartu-galeri:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 20px 40px rgba(245, 158, 11, 0.2); 
}

.galeri-img-box { 
    position: relative; 
    height: 250px; 
    overflow: hidden; 
}

.galeri-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.5s ease; 
}

.kartu-galeri:hover .galeri-img { 
    transform: scale(1.1); 
}

.badge-juara {
    position: absolute; 
    top: 15px; right: 15px; 
    background: linear-gradient(135deg, #f59e0b, #d97706); 
    color: white;
    padding: 8px 15px; 
    border-radius: 30px; 
    font-weight: 800; 
    font-size: 0.85rem;
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4); 
    border: 2px solid #fff; 
    z-index: 2;
}

.badge-tahun {
    position: absolute; 
    bottom: 15px; left: 15px; 
    background: rgba(0,0,0,0.7); 
    color: white;
    padding: 5px 12px; 
    border-radius: 8px; 
    font-weight: 600; 
    font-size: 0.8rem; 
    z-index: 2; 
    backdrop-filter: blur(5px);
}

.galeri-body { 
    padding: 25px; 
    text-align: center; 
}

.galeri-nama { 
    font-weight: 800; 
    font-size: 1.3rem; 
    color: var(--text-main); 
    margin-bottom: 5px; 
}

.galeri-sekolah { 
    color: #3b82f6; 
    font-weight: 600; 
    font-size: 0.95rem; 
    margin-bottom: 15px; 
}

.galeri-lomba { 
    background: var(--bg-alt); 
    padding: 10px; 
    border-radius: 10px; 
    font-size: 0.85rem; 
    color: var(--text-muted); 
    font-weight: 500; 
}

.lomba-icon {
    font-size: 1.2rem;
}

/* --- Tabel Klasemen Prestasi --- */
.panel-tabel {
    background: var(--card-bg); 
    border-radius: 20px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    padding: 40px; 
    border: 1px solid var(--border-color); 
    margin-top: 50px;
}

.panel-tabel-title {
    color: var(--text-main);
}

.peserta-nama {
    color: var(--text-main);
}

/* --- Lencana Medali Tabel --- */
.medali { 
    display: inline-block; 
    padding: 5px 15px; 
    font-size: 0.9rem; 
    text-align: center; 
    border-radius: 30px; 
    font-weight: 800; 
    color: white; 
    box-shadow: 0 3px 10px rgba(0,0,0,0.1); 
}

.medali-1 { background: linear-gradient(135deg, #fbbf24, #d97706); } /* Emas */
.medali-2 { background: linear-gradient(135deg, #cbd5e1, #64748b); } /* Perak */
.medali-3 { background: linear-gradient(135deg, #d97706, #92400e); } /* Perunggu */
.medali-other { background: #e2e8f0; color: #475569; }

/* --- Pagination Talenta --- */
.pagination-talenta {
    border-radius: 8px; 
    overflow: hidden;
}

.pagination-talenta .page-item.active .page-link {
    background-color: #f59e0b; 
    border-color: #f59e0b; 
    color: white; 
    font-weight: bold;
}

.pagination-talenta .page-link { 
    color: var(--text-muted); 
    background-color: var(--card-bg);
    border-color: var(--border-color);
    border-radius: 8px; 
    margin: 0 3px; 
}

.pagination-talenta .page-link:hover {
    background-color: var(--bg-alt);
    color: #f59e0b;
}


/* ========================================================
   MEDIA QUERIES TALENTA (KHUSUS MOBILE - Max 768px)
   ======================================================== */
@media (max-width: 768px) {
    /* Penyesuaian Header agar tidak terlalu besar di HP */
    .header-talenta {
        padding: 100px 15px 60px;
        border-radius: 0 0 30px 30px;
        margin-bottom: 30px;
    }

    .talenta-title {
        font-size: 2.2rem;
    }

    .talenta-desc {
        font-size: 1rem;
    }

    /* Penyesuaian Kartu Gambar */
    .galeri-img-box {
        height: 200px; /* Gambar dibuat sedikit lebih pendek */
    }

    .galeri-nama {
        font-size: 1.15rem;
    }

    /* Penyesuaian Ruang Tabel (DataTables sudah responsif secara native, tapi ruang di luarnya kita kurangi) */
    .panel-tabel {
        padding: 20px;
        border-radius: 15px;
    }

    .panel-tabel-title {
        font-size: 1.4rem;
    }
}

/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN BSAN
   ======================================================== */

/* --- Hero Section DENGAN EFEK GELOMBANG --- */
.bsan-hero {
    position: relative;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    padding: 120px 0 150px;
    color: white;
    text-align: center;
    z-index: 1;
}

.bsan-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('https://primainovasi.com/wp-content/uploads/2023/07/anak-sd-era-90_an-yang-bahagia.webp') no-repeat center center;
    background-size: cover;
    opacity: 0.15;
    z-index: -1;
}

.bsan-hero-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 3.5rem;
    text-shadow: 0 4px 10px rgba(0,0,0,0.2);
    margin-bottom: 20px;
}

.bsan-hero-desc {
    max-width: 750px;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.8;
}

/* --- SVG Wave di Bawah Hero --- */
.wave-bottom {
    position: absolute;
    bottom: -2px; /* Mencegah garis putih tipis */
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
}

.wave-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 80px;
}

.wave-bottom .shape-fill { 
    fill: var(--bg-color); /* Berubah sesuai tema web utama */
}

/* --- Pengatur Layout Pembungkus Konten --- */
.bsan-content-wrapper {
    margin-top: -30px; 
    position: relative; 
    z-index: 5;
}

.bsan-img-rounded {
    border-radius: 20px;
}

.bsan-section-title {
    font-family: 'Outfit', sans-serif; 
    font-weight: 800; 
    color: var(--text-main);
}

.bsan-text {
    font-size: 1.05rem; 
    line-height: 1.8;
}

.bsan-divider {
    width: 60px; 
    height: 4px; 
    background: #e11d48; 
    margin: 15px auto; 
    border-radius: 2px;
}

/* --- Kartu 4 Pilar BSAN --- */
.pilar-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 40px 30px;
    height: 100%;
    text-align: center;
    border: 1px solid rgba(225, 29, 72, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.pilar-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 5px;
    background: linear-gradient(90deg, #f43f5e, #fda4af);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: left;
}

.pilar-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(225, 29, 72, 0.15);
}

.pilar-card:hover::before { 
    transform: scaleX(1); 
}

.pilar-icon-wrapper {
    width: 80px; height: 80px;
    margin: 0 auto 25px;
    background: #fff0f2;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #e11d48;
    transition: all 0.4s ease;
}

.pilar-card:hover .pilar-icon-wrapper {
    background: #e11d48; color: #fff;
    transform: rotateY(360deg);
}

.pilar-title { 
    font-family: 'Outfit', sans-serif; 
    font-weight: 800; 
    color: var(--text-main); 
    margin-bottom: 15px; 
    font-size: 1.3rem; 
}

.pilar-text { 
    color: var(--text-muted); 
    font-size: 0.95rem; 
    line-height: 1.6; 
}

/* --- Section Lapor / Call to Action (CTA) --- */
.cta-section {
    background: var(--card-bg);
    border-radius: 30px;
    padding: 50px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
    margin-top: 60px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.cta-bg-shape {
    position: absolute; top: -50px; right: -50px;
    width: 200px; height: 200px; background: #fff0f2; border-radius: 50%; z-index: 0;
}

.cta-content { 
    position: relative; z-index: 1; 
}

.cta-title {
    font-family: 'Outfit', sans-serif; 
    font-weight: 800; 
    color: var(--text-main); 
    margin-bottom: 10px;
}

.cta-desc {
    font-size: 1.1rem;
}

.btn-lapor {
    background: linear-gradient(135deg, #e11d48, #be185d);
    color: white; padding: 15px 35px; border-radius: 50px;
    font-weight: 800; font-family: 'Outfit', sans-serif; letter-spacing: 1px;
    border: none; box-shadow: 0 10px 25px rgba(225, 29, 72, 0.3);
    transition: all 0.3s ease; text-transform: uppercase;
}

.btn-lapor:hover {
    transform: scale(1.05); 
    box-shadow: 0 15px 35px rgba(225, 29, 72, 0.4); 
    color: white; 
    text-decoration: none;
}


/* ========================================================
   MEDIA QUERIES BSAN (KHUSUS MOBILE - Max 768px)
   ======================================================== */
@media (max-width: 768px) {
    /* Mengurangi jarak pading di hero */
    .bsan-hero {
        padding: 80px 15px 120px;
    }

    /* Memperkecil ukuran teks judul hero di HP */
    .bsan-hero-title {
        font-size: 2.2rem;
    }

    .bsan-hero-desc {
        font-size: 1rem;
    }

    /* Menurunkan margin negatif agar konten tidak menimpa gelombang */
    .bsan-content-wrapper {
        margin-top: 0px;
    }

    /* Penyesuaian padding area CTA (Lapor) */
    .cta-section {
        padding: 30px 20px;
    }
    
    .cta-title {
        font-size: 1.5rem;
    }

    /* Lingkaran aksen di CTA dibuang/diperkecil agar tidak menghalangi tombol di HP */
    .cta-bg-shape {
        display: none;
    }
    
    /* Tombol melar sepenuh layar */
    .btn-lapor {
        display: block;
        width: 100%;
        margin-top: 20px;
    }
}

/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN BERITA & DETAIL BERITA
   ======================================================== */

/* --- Halaman Daftar Berita Utama --- */
.hero-berita {
    min-height: 40vh !important;
    background-image: url('../img/office.avif');
    background-position: center;
}

.hero-overlay-berita {
    background: linear-gradient(135deg, rgba(27, 67, 50, 0.9) 0%, rgba(11, 26, 20, 0.8) 100%);
}

.hero-title-berita {
    font-size: 2.5rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    /* Memberikan efek gradasi emas */
    background: linear-gradient(to right, #fff, var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
}

.berita-page-section {
    padding: 60px 0;
    background-color: var(--bg-color);
}

/* --- Halaman Detail Artikel Berita --- */
.detail-berita-section {
    padding-top: 120px; 
    padding-bottom: 80px; 
    background-color: var(--bg-color);
}

.detail-title {
    font-family: 'Montserrat', sans-serif; 
    font-weight: 800; 
    color: var(--text-main); 
    font-size: 2.2rem; 
    line-height: 1.3;
}

.meta-item {
    color: var(--text-muted); 
    font-size: 0.9rem;
}

.detail-badge {
    background-color: var(--primary-green); 
    color: white; 
    padding: 6px 12px; 
    border-radius: 20px; 
    font-weight: 600;
}

.detail-img {
    border-radius: 16px; 
    max-height: 450px; 
    object-fit: cover; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.not-found-title {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-main);
}


/* ========================================================
   MEDIA QUERIES BERITA & DETAIL (KHUSUS MOBILE - Max 768px)
   ======================================================== */
@media (max-width: 768px) {
    /* Halaman Daftar Berita */
    .hero-berita {
        min-height: 30vh !important;
    }
    
    .hero-title-berita {
        font-size: 1.8rem;
    }

    .berita-page-section {
        padding: 40px 0;
    }

    /* Halaman Detail Berita */
    .detail-berita-section {
        padding-top: 100px; 
        padding-bottom: 40px; 
    }

    .detail-title {
        font-size: 1.6rem;
    }

    /* Mengubah baris meta (tanggal, penulis, label) agar rapi kalau layarnya sempit */
    .detail-meta {
        flex-wrap: wrap;
        gap: 10px;
    }

    .meta-item {
        font-size: 0.8rem;
    }

    .detail-img {
        max-height: 250px; /* Gambar sampul dibuat lebih pendek agar hemat layar */
    }

    /* Bagian bawah artikel (tombol kembali dan share) */
    .share-text {
        display: none; /* Menyembunyikan kata "Bagikan:" agar ikon sosmed tidak berdesakan */
    }
}

/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN PUSAT UNDUHAN (DOWNLOAD)
   ======================================================== */

.header-download {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.95) 0%, rgba(59, 130, 246, 0.9) 100%), 
                url('https://images.unsplash.com/photo-1568227450376-79133bdcb83c?q=80&w=1200') no-repeat center center;
    background-size: cover; 
    padding: 120px 0 80px; 
    color: white; 
    text-align: center; 
    border-radius: 0 0 40px 40px;
    box-shadow: 0 15px 35px rgba(30, 58, 138, 0.2); 
    position: relative; 
    z-index: 1; 
    margin-bottom: -40px;
}

.download-title {
    font-weight: 800; 
    font-size: 3rem; 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.download-desc {
    max-width: 700px; 
    font-weight: 300; 
    opacity: 0.9;
}

.panel-dokumen {
    background: var(--card-bg); 
    border-radius: 20px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    padding: 40px; 
    border: 1px solid var(--border-color); 
    position: relative; 
    z-index: 2;
}

/* --- Ikon File Berdasarkan Ekstensi --- */
.icon-doc { 
    width: 45px; height: 45px; 
    border-radius: 12px; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 1.3rem; flex-shrink: 0;
}
.doc-pdf { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.doc-word { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.doc-excel { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.doc-link { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.doc-zip { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

/* --- Tabel Unduhan --- */
.table-custom {
    width: 100%;
}
.table-custom th { 
    background-color: var(--bg-alt); 
    color: var(--text-muted); 
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color) !important; 
    border-top: none !important; padding: 15px 20px;
}
.table-custom td { 
    padding: 18px 20px; vertical-align: middle; 
    border-top: 1px solid var(--border-color); 
    transition: background-color 0.2s ease;
}
.table-custom tbody tr:hover td { background-color: var(--bg-alt); }

.doc-title { 
    font-family: 'Outfit', sans-serif; 
    font-size: 1.05rem; font-weight: 600; 
    color: var(--text-main); 
    line-height: 1.4; display: block; margin-bottom: 3px;
}

.doc-meta { font-size: 0.85rem; color: var(--text-muted); font-weight: 400; }
.doc-date { color: var(--text-main); }
.separator { color: var(--border-color); }

.badge-kategori {
    background-color: var(--bg-alt); 
    color: var(--text-muted); 
    border: 1px solid var(--border-color); 
    padding: 6px 15px; border-radius: 30px; 
    font-weight: 500; font-size: 0.8rem;
}

.btn-unduh {
    border-radius: 8px; 
    padding: 6px 15px;
}

/* Customizing DataTables Search Input */
.dataTables_filter input { 
    border-radius: 20px !important; 
    padding: 5px 15px !important; 
    border: 1px solid var(--border-color); 
    outline: none; 
    background: var(--bg-color);
    color: var(--text-main);
}
.dataTables_filter input:focus { 
    border-color: #3b82f6; 
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25); 
}
table.dataTable.no-footer { border-bottom: 1px solid var(--border-color); }


/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN INFO BOSP SEKOLAH
   ======================================================== */

.hero-bosp {
    background: linear-gradient(135deg, rgba(20, 83, 45, 0.95) 0%, rgba(6, 78, 59, 0.98) 100%), 
                url('https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?q=80&w=1200') no-repeat center center;
    background-size: cover; background-attachment: fixed;
    padding: 130px 0 80px; color: white; border-radius: 0 0 50px 50px;
    box-shadow: 0 15px 35px rgba(6, 78, 59, 0.3); position: relative;
}

.badge-bosp {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
    color: #fff; padding: 8px 25px; border-radius: 30px; 
    font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}

.bosp-title {
    font-weight: 800; 
    font-size: 3rem; 
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
}

.bosp-desc {
    max-width: 800px; 
    font-weight: 300; 
    opacity: 0.9;
}

/* --- Kartu KPI Statistik --- */
.kpi-wrapper { transform: translateY(-40px); position: relative; z-index: 10; }
.kpi-card {
    background: var(--card-bg); 
    border-radius: 20px; padding: 30px 20px; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    border: 1px solid var(--border-color); 
    transition: all 0.3s ease; height: 100%;
}
.kpi-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(20, 83, 45, 0.15); }
.kpi-icon {
    width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; margin: 0 auto 20px;
}
.kpi-blue { background-color: #3b82f6; }
.kpi-yellow { background-color: #fbbf24; }

.kpi-number { font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: 5px; }
.text-blue { color: #3b82f6; }
.text-yellow { color: #fbbf24; }

/* --- Panel & Timeline --- */
.panel-visual {
    background: var(--card-bg); 
    border-radius: 20px; padding: 30px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); 
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
}
.panel-title-text { color: var(--text-main); }
.list-title-text { color: var(--text-main); }

.chart-container { position: relative; height: 320px; }

.timeline-container { position: relative; padding-left: 30px; margin-top: 30px; }
.timeline-container::before { 
    content: ''; position: absolute; left: 0; top: 0; height: 100%; 
    width: 4px; background: var(--border-color); border-radius: 4px; 
}
.timeline-item { position: relative; margin-bottom: 30px; }
.timeline-item::before {
    content: ''; position: absolute; left: -38px; top: 5px; width: 20px; height: 20px;
    background: #10b981; border: 4px solid var(--card-bg); border-radius: 50%; 
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.timeline-content { 
    background: var(--bg-alt); padding: 20px; border-radius: 15px; 
    border-left: 5px solid #10b981; 
}
.timeline-blue-border { border-left-color: #3b82f6; }
.timeline-yellow-border { border-left-color: #fbbf24; }
.timeline-text { color: var(--text-main) !important; } /* Memaksa teks mematuhi tema agar terlihat di dark mode */


/* ========================================================
   MEDIA QUERIES DOWNLOAD & BOSP (MOBILE - Max 768px)
   ======================================================== */
@media (max-width: 768px) {
    
    /* Halaman Pusat Unduhan */
    .header-download {
        padding: 90px 15px 60px;
        border-radius: 0 0 25px 25px;
    }
    .download-title {
        font-size: 2.2rem;
    }
    .download-desc {
        font-size: 1rem;
    }
    .panel-dokumen {
        padding: 20px 15px;
    }
    /* Mempersempit kolom agar tidak tumpang tindih */
    .table-custom td {
        padding: 10px 10px;
    }

    /* Halaman Info BOSP */
    .hero-bosp {
        padding: 90px 15px 60px;
        border-radius: 0 0 25px 25px;
    }
    .bosp-title {
        font-size: 2.2rem;
    }
    .bosp-desc {
        font-size: 1rem;
    }
    
    /* Mengembalikan KPI agar tidak nyungsep (menumpuk hero) di HP */
    .kpi-wrapper {
        transform: translateY(-20px);
    }
    .kpi-number {
        font-size: 2.5rem;
    }

    /* Menyempitkan panel dan diagram di HP */
    .panel-visual {
        padding: 20px 15px;
    }
    .chart-container {
        height: 250px; /* Chart agak diperkecil tingginya */
    }
    
    .timeline-container {
        padding-left: 20px;
    }
    .timeline-item::before {
        left: -28px;
    }
}

/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN LAYANAN (SOP)
   ======================================================== */

.header-layanan {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(37, 99, 235, 0.85) 100%), 
                url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=1200') no-repeat center center;
    background-size: cover; 
    background-attachment: fixed;
    padding: 130px 0 90px; 
    color: white; 
    text-align: center; 
    border-radius: 0 0 50px 50px;
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.2); 
    position: relative; 
    margin-bottom: 60px;
    z-index: 1;
}

.badge-layanan {
    font-size: 0.9rem; 
    letter-spacing: 0.5px;
}

.layanan-title {
    font-weight: 800; 
    font-size: 3.5rem; 
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.layanan-desc {
    max-width: 800px; 
    font-weight: 300; 
    opacity: 0.9; 
    line-height: 1.8;
}

.section-heading-layanan {
    color: var(--text-main);
}

.layanan-divider {
    width: 60px; 
    height: 4px; 
    background: #3b82f6; 
    margin: 15px auto; 
    border-radius: 2px;
}

/* --- Accordion Custom (Menu Lipat SOP) --- */
.accordion-custom .card {
    border: 1px solid var(--border-color); 
    border-radius: 20px !important; 
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); 
    overflow: hidden; 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: var(--card-bg);
}

.accordion-custom .card:hover { 
    border-color: rgba(59, 130, 246, 0.3); 
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.1); 
    transform: translateY(-5px); 
}

.accordion-custom .card-header {
    background-color: transparent; 
    padding: 0; 
    border-bottom: none;
}

/* --- Tombol Akordeon --- */
.btn-accordion {
    width: 100%; 
    text-align: left; 
    padding: 25px 30px; 
    color: var(--text-main); 
    font-weight: 700; 
    font-size: 1.2rem;
    background: transparent; 
    border: none; 
    outline: none; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    transition: all 0.3s ease; 
    text-decoration: none !important; 
    cursor: pointer;
}

.btn-accordion:hover, .btn-accordion:focus { 
    color: #2563eb; 
    outline: none; 
    box-shadow: none; 
}

.btn-accordion[aria-expanded="true"] { 
    background-color: var(--bg-alt); 
    color: #1d4ed8; 
    border-bottom: 1px dashed var(--border-color); 
}

/* --- Ikon Interaktif --- */
.btn-accordion i.toggle-icon { 
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    color: var(--text-muted); 
    font-size: 1.1rem; 
}

.btn-accordion[aria-expanded="true"] i.toggle-icon { 
    transform: rotate(180deg); 
    color: #2563eb; 
}

.icon-layanan {
    width: 55px; height: 55px; 
    border-radius: 15px;
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.5rem; 
    margin-right: 20px;
    transition: all 0.3s ease; 
    flex-shrink: 0;
}
.card:hover .icon-layanan { transform: scale(1.1); }

/* Pewarnaan Khusus Ikon Layanan */
.icon-layanan-mutasi { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.icon-layanan-skpi { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.icon-layanan-hilang { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.icon-layanan-bosp { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

/* --- Isi dari Akordeon (Kotak Syarat & Prosedur) --- */
.card-body-custom { 
    padding: 35px 30px; 
    background-color: var(--card-bg); 
}

.box-syarat, .box-prosedur {
    padding: 25px; 
    border-radius: 15px; 
    height: 100%; 
    position: relative; 
    overflow: hidden; 
    z-index: 1;
}

/* Pewarnaan Gradien Tipis untuk Kotak Syarat (Kuning) dan Prosedur (Hijau) */
.box-syarat { background: linear-gradient(145deg, rgba(254, 243, 199, 0.4) 0%, rgba(253, 230, 138, 0.4) 100%); }
.box-prosedur { background: linear-gradient(145deg, rgba(240, 253, 244, 0.4) 0%, rgba(220, 252, 231, 0.4) 100%); }

.box-title-syarat { color: #b45309; }
.box-title-prosedur { color: #047857; }

.list-syarat { 
    padding-left: 20px; 
    color: var(--text-main); 
    font-size: 0.95rem; 
    margin-bottom: 0; 
}
.list-syarat li { margin-bottom: 10px; line-height: 1.6; }

/* Desain Langkah Prosedur */
.step-item { 
    display: flex; 
    margin-bottom: 20px; 
    align-items: flex-start; /* Tambahan agar sejajar di atas jika teksnya panjang */
}

/* Tambahkan .step-item di depannya agar lebih spesifik dan gunakan !important untuk menimpa CSS UKBM */
.step-item .step-number { 
    position: relative !important; 
    top: 0 !important; 
    left: 0 !important;
    width: 30px; 
    height: 30px; 
    background: #10b981; 
    color: white; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.9rem; 
    font-weight: 800; 
    flex-shrink: 0; 
    margin-right: 15px;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.step-text { 
    color: var(--text-main); 
    font-size: 0.95rem; 
    line-height: 1.6; 
    margin-top: 3px; 
}


/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN PENCARIAN PROFIL SEKOLAH
   ======================================================== */

.header-profil-sekolah {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.95) 0%, rgba(15, 81, 50, 0.98) 100%), 
                url('https://images.unsplash.com/photo-1580582932707-520aed937b7b?q=80&w=1200') no-repeat center center;
    background-size: cover; 
    background-attachment: fixed;
    padding: 120px 0 100px; 
    color: white; 
    text-align: center; 
    border-radius: 0 0 50px 50px;
    box-shadow: 0 15px 35px rgba(25, 135, 84, 0.3); 
    position: relative; 
    z-index: 1;
}

.profil-sek-title {
    font-weight: 800; 
    font-size: 3rem; 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.profil-sek-desc {
    max-width: 700px; 
    font-weight: 300; 
    opacity: 0.9;
}

/* --- Input Pencarian Select2 --- */
.search-box-container {
    max-width: 800px; 
    margin: -50px auto 40px; 
    background: var(--card-bg); 
    padding: 25px;
    border-radius: 20px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.12); 
    position: relative; 
    z-index: 2;
    border: 1px solid var(--border-color);
}

.select2-container .select2-selection--single {
    height: 60px; 
    border-radius: 12px; 
    border: 2px solid var(--border-color); 
    display: flex; align-items: center; 
    font-size: 1.15rem; font-weight: 600; 
    padding-left: 15px; 
    color: var(--text-main);
    background-color: var(--bg-color);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { 
    height: 60px; right: 15px; 
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-main);
}

/* --- Kartu Hasil Pencarian Profil --- */
.profil-card {
    background: var(--card-bg); 
    border-radius: 20px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    padding: 35px; 
    border: 1px solid var(--border-color); 
    transition: all 0.3s ease;
}

.profil-logo {
    width: 120px; height: 120px; 
    object-fit: cover; border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
    border: 4px solid var(--card-bg);
}

.ps-nama-sekolah { color: var(--text-main); font-size: 2.2rem;}
.badge-npsn { font-size: 0.85rem; }
.badge-status { font-size: 0.85rem; }
.badge-akreditasi { font-size: 0.85rem; }
.ps-alamat-text { font-size: 1.1rem; }

/* --- 4 Kotak KPI Kecil --- */
.kpi-profil {
    text-align: center; 
    padding: 25px 15px; 
    border-radius: 20px; 
    background: var(--bg-alt);
    transition: transform 0.3s ease; 
    border: 1px solid var(--border-color); 
    height: 100%;
}
.kpi-profil:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 15px 25px rgba(0,0,0,0.05); 
}

.kpi-profil-siswa { border-bottom: 4px solid #3b82f6; }
.kpi-value-siswa { color: #3b82f6; font-weight: 800; font-size: 2.5rem; margin-top: 15px; margin-bottom: 5px; }

.kpi-profil-rombel { border-bottom: 4px solid #10b981; }
.kpi-value-rombel { color: #10b981; font-weight: 800; font-size: 2.5rem; margin-top: 15px; margin-bottom: 5px; }

.kpi-profil-guru { border-bottom: 4px solid #f59e0b; }
.kpi-value-guru { color: #f59e0b; font-weight: 800; font-size: 2.5rem; margin-top: 15px; margin-bottom: 5px; }

.kpi-profil-tendik { border-bottom: 4px solid #8b5cf6; }
.kpi-value-tendik { color: #8b5cf6; font-weight: 800; font-size: 2.5rem; margin-top: 15px; margin-bottom: 5px; }

.kpi-label { font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0; }

/* --- List Kontak Sekolah --- */
.panel-kontak-title { color: var(--text-main); }
.text-strong { color: var(--text-main); }

.detail-list { list-style: none; padding: 0; margin: 0; }
.detail-list li { 
    padding: 15px 0; 
    border-bottom: 1px dashed var(--border-color); 
    display: flex; align-items: flex-start; 
}
.detail-list li:last-child { border-bottom: none; padding-bottom: 0; }

.detail-icon {
    width: 40px; height: 40px; border-radius: 10px; 
    background: rgba(25, 135, 84, 0.1); color: #198754;
    display: flex; align-items: center; justify-content: center; 
    font-size: 1.2rem; margin-right: 15px; flex-shrink: 0;
}

/* Area untuk grafik JS */
.chart-gender-container {
    position: relative; height: 250px; width: 100%; display: flex; justify-content: center;
}
#hasil-profil { display: none; }


/* ========================================================
   MEDIA QUERIES LAYANAN & PROFIL SEKOLAH (MOBILE - Max 768px)
   ======================================================== */
@media (max-width: 768px) {
    /* Penyesuaian Halaman Layanan */
    .header-layanan {
        padding: 90px 15px 60px;
        border-radius: 0 0 25px 25px;
        margin-bottom: 40px;
    }
    .layanan-title { font-size: 2.2rem; }
    .layanan-desc { font-size: 1rem; }
    
    /* Memperkecil ruang kosong di dalam Menu Akordeon */
    .btn-accordion {
        padding: 15px 20px;
        font-size: 1.05rem;
    }
    .icon-layanan {
        width: 45px; height: 45px;
        font-size: 1.2rem;
        margin-right: 15px;
    }
    .card-body-custom {
        padding: 20px 15px;
    }
    .box-syarat, .box-prosedur {
        padding: 20px 15px;
    }


    /* Penyesuaian Halaman Profil Sekolah */
    .header-profil-sekolah {
        padding: 90px 15px 80px;
        border-radius: 0 0 25px 25px;
    }
    .profil-sek-title { font-size: 2.2rem; }
    .profil-sek-desc { font-size: 1rem; }
    
    /* Box pencarian dinaikkan agar tidak tumpang tindih */
    .search-box-container {
        margin: -30px 15px 30px;
        padding: 15px;
    }
    .select2-container .select2-selection--single {
        font-size: 1rem; /* Ukuran teks pencarian lebih kecil agar pas di HP */
    }

    /* Kartu Detail Sekolah */
    .profil-card {
        padding: 20px;
    }
    .ps-nama-sekolah {
        font-size: 1.6rem;
    }
    .kpi-value-siswa, .kpi-value-rombel, .kpi-value-guru, .kpi-value-tendik {
        font-size: 2rem; /* Memperkecil angka counter siswa dkk */
    }
}

/* MEDIA PRINT KHUSUS UNTUK CETAK PROFIL */
@media print {
    body { background: #fff !important; }
    .header-profil-sekolah, .search-box-container, footer, .navbar-custom, .bottom-nav { display: none !important; }
    #hasil-profil { display: block !important; }
    .profil-card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN SARPRAS SEKOLAH
   ======================================================== */

.header-sarpras {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.9) 0%, rgba(15, 81, 50, 0.95) 100%), 
                url('https://images.unsplash.com/photo-1580582932707-520aed937b7b?q=80&w=1200') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 130px 0 80px;
    color: white;
    border-radius: 0 0 40px 40px;
    margin-bottom: -30px;
    position: relative;
    z-index: 1;
    box-shadow: 0 15px 35px rgba(25, 135, 84, 0.3);
}

.sarpras-title {
    font-weight: 800; 
    font-size: 3rem; 
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
}

.sarpras-desc {
    max-width: 800px; 
    font-weight: 300; 
    opacity: 0.9;
}

.badge-sarpras {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
    color: #fff; padding: 8px 25px; border-radius: 30px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}

.panel-filter-sarpras {
    transform: translateY(-20px);
}

.panel-interaktif {
    background: var(--card-bg); 
    border-radius: 15px; padding: 25px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    position: relative; z-index: 2; margin-bottom: 30px; 
    border: 1px solid var(--border-color);
}

.badge-kondisi { font-size: 0.85rem; padding: 6px 10px; border-radius: 6px; font-weight: 600; }

.select2-container .custom-select-sarpras + .select2-selection--single { 
    height: 42px; border-radius: 8px; border: 1px solid var(--border-color); display: flex; align-items: center; font-weight: 500;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; right: 10px; }

.ruang-list {
    display: inline-block; font-size: 0.8rem; color: var(--text-muted); background: var(--bg-alt); padding: 4px 10px;
    border-radius: 6px; border: 1px solid var(--border-color); margin-top: 5px; line-height: 1.4;
}

.custom-pill-link { 
    border-radius: 30px; padding: 10px 25px; font-weight: 600; color: var(--text-muted); background: var(--bg-alt); margin: 0 5px; transition: all 0.3s; 
}
.nav-pills .custom-pill-link.active { 
    background: linear-gradient(135deg, #198754, #0f5132); color: #fff; box-shadow: 0 5px 15px rgba(25, 135, 84, 0.4); 
}

.chart-container-sarpras { position: relative; height: 250px; }

.custom-table-sarpras { width: 100%; color: var(--text-main); }
.thead-green { background-color: var(--primary-green); color: white; }
.thead-cyan { background-color: #0dcaf0; color: white; }

/* --- Dark Mode Support Sarpras --- */
body[data-theme="dark"] .custom-table-sarpras { color: #f8fafc; }


/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN RINTISAN SEKOLAH MODEL
   ======================================================== */

.hero-kka {
    background: linear-gradient(135deg, rgba(15, 81, 50, 0.95) 0%, rgba(25, 135, 84, 0.85) 100%), 
                url('../img/RSM_Foto1.jpeg') no-repeat center center;
    background-size: cover;
    padding: 120px 0 80px;
    color: white;
    border-radius: 0 0 40px 40px;
    box-shadow: 0 10px 30px rgba(25, 135, 84, 0.2);
}

.model-title {
    font-weight: 800; font-size: 2.8rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.model-desc {
    max-width: 800px; font-weight: 300; opacity: 0.9;
}

.pilar-section { padding: 60px 0; transition: background-color 0.3s ease; }
.card-feature {
    border: 1px solid var(--border-color); border-radius: 20px; background: var(--card-bg);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); height: 100%; transition: all 0.3s ease;
}
.card-feature:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(25, 135, 84, 0.1); }
.icon-box {
    width: 70px; height: 70px; border-radius: 18px; display: flex; align-items: center; 
    justify-content: center; font-size: 2rem; margin-bottom: 20px;
}

.spotlight-section {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.95) 0%, rgba(226, 232, 240, 0.95) 100%), 
                url('../img/RSM_Foto1.jpeg?v=2') no-repeat center center;
    background-size: cover; background-attachment: fixed; transition: background 0.3s ease;
}
.spotlight-card {
    background: var(--card-bg); border-radius: 20px; box-shadow: 0 15px 35px rgba(25, 135, 84, 0.1); transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}
.spotlight-school-name { color: var(--text-main); }
.spotlight-img-container { border-radius: 10px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); position: relative; }
.spotlight-img { width: 100%; height: 110px; object-fit: cover; transition: transform 0.3s ease; }
.spotlight-img-container:hover .spotlight-img { transform: scale(1.1); }
.spotlight-badge-wrapper { position: absolute; bottom: 5px; right: 5px; }

.status-label { font-size: 0.9rem; }
.status-badge { font-size: 0.85rem; }

.pulse-bos { animation: pulse-animation 2s infinite; }
@keyframes pulse-animation {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.gallery-section {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.98) 100%), 
                url('https://www.transparenttextures.com/patterns/cubes.png') repeat;
    color: var(--text-main); transition: background 0.3s ease, color 0.3s ease;
}
.gallery-item {
    position: relative; overflow: hidden; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); 
    margin-bottom: 30px; background: var(--card-bg); border: 1px solid var(--border-color); transition: all 0.3s ease; cursor: pointer; 
}
.gallery-img-wrapper { position: relative; overflow: hidden; border-radius: 14px 14px 0 0; }
.gallery-item img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.5s ease; }
.gallery-item:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(25, 135, 84, 0.15); border-color: #198754; }
.gallery-item:hover img { transform: scale(1.08); }

.video-play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(25, 135, 84, 0.9); color: #ffffff; width: 55px; height: 55px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem; 
    box-shadow: 0 0 15px rgba(0,0,0,0.2); z-index: 2; transition: all 0.3s ease;
}
.gallery-item:hover .video-play-btn { background: #f59e0b; transform: translate(-50%, -50%) scale(1.1); }

.rintisan-section { padding: 80px 0; background: var(--bg-color); transition: background-color 0.3s ease; }
.rintisan-card { border-radius: 20px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.05); background: var(--card-bg); transition: all 0.3s ease; }

.table-custom-rintisan { width: 100%; color: var(--text-main); }
.thead-rintisan { background-color: var(--bg-alt); color: var(--text-muted); }

/* Modal Khusus Media */
.modal-close-btn { opacity: 1; font-size: 2.5rem; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }
.modal-media-preview { max-height: 80vh; object-fit: contain; width: 100%; }
.modal-video-bg { background: #000; }

/* --- Dark Mode Support Sekolah Model --- */
body[data-theme="dark"] .spotlight-section {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.96) 100%), 
                url('../img/RSM_Foto1.jpeg?v=2') no-repeat center center !important;
    background-size: cover !important;
}
body[data-theme="dark"] .gallery-section {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
}


/* ========================================================
   MEDIA QUERIES SARPRAS & SEKOLAH MODEL (MOBILE - Max 768px)
   ======================================================== */
@media (max-width: 768px) {
    /* Sarpras */
    .header-sarpras {
        padding: 90px 15px 60px;
        border-radius: 0 0 25px 25px;
    }
    .sarpras-title { font-size: 2.2rem; }
    .sarpras-desc { font-size: 1rem; }
    
    .panel-interaktif { padding: 20px 15px; }
    .chart-container-sarpras { height: 200px; } /* Chart lebih kecil di HP */
    .custom-pill-link { padding: 8px 15px; font-size: 0.9rem; margin-bottom: 10px; display: inline-block;} /* Navigasi tab membungkus dengan rapi */

    /* Sekolah Model */
    .hero-kka {
        padding: 90px 15px 60px;
        border-radius: 0 0 25px 25px;
    }
    .model-title { font-size: 2.2rem; }
    .model-desc { font-size: 1rem; }

    .spotlight-card { padding: 20px !important; }
    .spotlight-school-name { font-size: 1.8rem; }
    .gallery-item img { height: 180px; }
}

/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN UKBM
   ======================================================== */

.hero-ukbm {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.9) 0%, rgba(30, 30, 30, 0.95) 100%), 
                url('https://images.unsplash.com/photo-1544365558-35aa4afcf11f?q=80&w=1200') no-repeat center center;
    background-size: cover; 
    padding: 140px 0 100px; 
    color: white;
    border-radius: 0 0 50px 50px; 
    box-shadow: 0 10px 30px rgba(139, 0, 0, 0.2);
    position: relative; 
    overflow: hidden;
}

.ukbm-hero-title { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.ukbm-hero-desc { max-width: 800px; opacity: 0.9; }

.badge-ukbm {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); color: #fff;
    padding: 8px 20px; border-radius: 30px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.about-ukbm { padding: 80px 0; }
.ukbm-img-about { border-radius: 20px; }

.about-card {
    background: var(--card-bg); border-radius: 20px; border: 1px solid var(--border-color); 
    box-shadow: 0 15px 35px rgba(0,0,0,0.05); transition: transform 0.3s ease;
}
.about-card:hover { transform: translateY(-5px); }

.alur-section { padding: 80px 0; background: var(--bg-alt); transition: background 0.3s ease;}
.step-card {
    background: var(--card-bg); border-radius: 15px; padding: 30px 20px; text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); height: 100%; transition: all 0.3s ease;
    position: relative; z-index: 1; border: 1px solid var(--border-color);
}
.step-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(139, 0, 0, 0.1); border-color: #8b0000; }
.step-icon {
    width: 80px; height: 80px; border-radius: 50%; background: rgba(139, 0, 0, 0.1); color: #8b0000;
    display: flex; align-items: center; justify-content: center; font-size: 2.5rem;
    margin: 0 auto 20px; transition: all 0.3s ease;
}
.step-card:hover .step-icon { background: #8b0000; color: #fff; }
.step-number {
    position: absolute; top: -15px; left: -15px; width: 40px; height: 40px; background: #f59e0b; color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.2rem; box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
}

.cta-section-ukbm { 
    padding: 80px 0; 
    background: url('https://www.transparenttextures.com/patterns/stardust.png') repeat, #1e293b; 
    color: #fff; 
}
.cta-box {
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px;
    padding: 40px; backdrop-filter: blur(10px); transition: all 0.3s ease;
}
.cta-box:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }

.text-color-main { color: var(--text-main); }
.list-ukbm-seksi { color: var(--text-muted); }
.text-light-muted { color: #cbd5e1; }

.btn-maroon { background-color: #8b0000; color: white; font-weight: 600; border-radius: 30px; padding: 10px 25px; transition: all 0.3s ease; }
.btn-maroon:hover { background-color: #660000; color: white; box-shadow: 0 5px 15px rgba(139, 0, 0, 0.4); }
.btn-outline-gold { border: 2px solid #f59e0b; color: #f59e0b; font-weight: 600; border-radius: 30px; padding: 10px 25px; transition: all 0.3s ease; background: transparent;}
.btn-outline-gold:hover { background-color: #f59e0b; color: #fff; }


/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN ULD
   ======================================================== */

.hero-uld {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.95) 0%, rgba(107, 33, 168, 0.9) 100%), 
                url('https://images.unsplash.com/photo-1516627145497-ae6968895b74?q=80&w=1200') no-repeat center center;
    background-size: cover; 
    padding: 120px 0 60px; 
    color: white; 
    border-radius: 0 0 40px 40px; 
    box-shadow: 0 10px 30px rgba(107, 33, 168, 0.3);
}

.uld-title { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.uld-desc { max-width: 800px; opacity: 0.9; }

.badge-uld {
    background: linear-gradient(90deg, #f472b6 0%, #ec4899 100%); box-shadow: 0 0 15px rgba(236, 72, 153, 0.5);
    color: white; padding: 8px 20px; border-radius: 20px; font-weight: 700; letter-spacing: 1px;
}

.uld-filter-wrapper { position: relative; z-index: 10; transform: translateY(-50%); }
.filter-panel-uld {
    background: var(--card-bg); padding: 15px 25px; 
    border-radius: 50px; display: inline-block; box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    border: 1px solid var(--border-color);
}

.select2-container .select-uld + .select2-selection--single { 
    height: 40px; border-radius: 20px; border: 1px solid var(--border-color); display: flex; align-items: center; padding-left: 10px; font-weight: 600;
    background: var(--bg-color); color: var(--text-main);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 10px; }

.kpi-card-uld {
    background: var(--card-bg); border-radius: 20px; padding: 25px; box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    display: flex; align-items: center; border: 1px solid var(--border-color); transition: transform 0.3s ease;
}
.kpi-card-uld:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(107, 33, 168, 0.15); }
.kpi-icon-uld { width: 70px; height: 70px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-right: 20px; }
.kpi-icon-purple { background: #7e22ce; }

.kpi-uld-label { letter-spacing: 1px; }
.kpi-uld-unit { font-size: 1rem; font-weight: 500; color: var(--text-muted); }
.text-purple { color: #7e22ce; }
.text-purple-light { color: #9333ea; }

.panel-data-uld { background: var(--card-bg); border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-bottom: 30px; border: 1px solid var(--border-color); }
.panel-title-uld { color: var(--text-main); }
.chart-container-uld { position: relative; height: 350px; }

.fokus-container { display: flex; align-items: center; justify-content: center; height: 350px; flex-direction: column; }
.fokus-box { background: rgba(126, 34, 206, 0.05); border-radius: 20px; border: 1px dashed #c084fc; width: 100%; }

.nav-pills-uld .nav-link { border-radius: 30px; padding: 10px 25px; font-weight: 600; color: var(--text-muted); background: var(--bg-alt); margin: 0 5px; transition: all 0.3s; }
.nav-pills-uld .nav-link.active { background: linear-gradient(135deg, #1e3a8a, #7e22ce); color: #fff; box-shadow: 0 5px 15px rgba(126, 34, 206, 0.4); }

.custom-table-uld { color: var(--text-main); }


/* --- Dark Mode Support ULD --- */
body[data-theme="dark"] .filter-panel-uld { background: rgba(30, 41, 59, 0.9); border-color: #475569; }
body[data-theme="dark"] .select2-container .select-uld + .select2-selection--single { background: #1e293b; color: #f1f5f9; }
body[data-theme="dark"] .custom-table-uld { color: #cbd5e1; }
body[data-theme="dark"] .custom-table-uld thead th { background-color: #334155 !important; color: #f8fafc !important; border-color: #475569 !important; }
body[data-theme="dark"] .custom-table-uld tbody tr { background-color: #1e293b !important; }
body[data-theme="dark"] .custom-table-uld tbody tr:hover { background-color: #334155 !important; color: #fff !important; }
body[data-theme="dark"] .fokus-box { background: rgba(126, 34, 206, 0.2); }


/* ========================================================
   MEDIA QUERIES UKBM & ULD (MOBILE - Max 768px)
   ======================================================== */
@media (max-width: 768px) {
    /* UKBM */
    .hero-ukbm { padding: 90px 15px 60px; border-radius: 0 0 25px 25px; }
    .ukbm-hero-title { font-size: 2.2rem; }
    .ukbm-hero-desc { font-size: 1rem; }
    .ukbm-btn-group { flex-direction: column; width: 100%; }
    .ukbm-btn-group .btn { width: 100%; margin: 0 !important; margin-bottom: 10px !important; }
    
    .about-ukbm { padding: 40px 0; }
    .alur-section { padding: 50px 0; }
    .cta-section-ukbm { padding: 50px 0; }
    
    /* ULD */
    .hero-uld { padding: 90px 15px 80px; border-radius: 0 0 25px 25px; }
    .uld-title { font-size: 2.2rem; }
    .uld-desc { font-size: 1rem; }
    
    .filter-panel-uld { width: 90%; max-width: 400px; }
    .select2-container .select-uld + .select2-selection--single { width: 100% !important; }
    
    .kpi-card-uld { padding: 15px; }
    .kpi-icon-uld { width: 50px; height: 50px; font-size: 1.5rem; margin-right: 15px; }
    .kpi-uld-label { font-size: 0.8rem; }
    
    .panel-data-uld { padding: 20px 15px; }
    .chart-container-uld { height: 250px; }
    .fokus-container { height: auto; } /* Biarkan fleksibel di HP */
    .nav-pills-uld .nav-link { padding: 8px 15px; font-size: 0.9rem; margin-bottom: 10px; display: inline-block; }
}

/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN UKA (ISLAMI)
   ======================================================== */

.uka-hero {
    position: relative;
    background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
    padding: 130px 0 100px;
    color: white;
    text-align: center;
    z-index: 1;
    border-radius: 0 0 50px 50px;
    box-shadow: 0 15px 35px rgba(4, 120, 87, 0.3);
    margin-bottom: 50px;
}

/* Motif Geometri Islami (Transparan) */
.uka-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(#10b981 1px, transparent 1px), radial-gradient(#10b981 1px, transparent 1px);
    background-position: 0 0, 20px 20px;
    background-size: 40px 40px;
    opacity: 0.15;
    z-index: -1;
    border-radius: 0 0 50px 50px;
}

.arab-text {
    font-family: 'Amiri', serif;
    font-size: 2.5rem;
    color: var(--accent-gold);
    margin-bottom: 15px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.uka-badge-top { font-weight: 800; font-family: 'Outfit', sans-serif; letter-spacing: 1px; }
.uka-hero-title { font-weight: 800; font-size: 3.5rem; text-shadow: 0 4px 10px rgba(0,0,0,0.3); margin-bottom: 20px; }
.uka-hero-desc { max-width: 800px; font-weight: 300; font-size: 1.15rem; line-height: 1.8; opacity: 0.9; }

.uka-section-title { font-weight: 800; color: var(--text-main); }
.uka-divider { width: 60px; height: 4px; background: #059669; margin: 15px auto; border-radius: 2px; }

/* KARTU INDIKATOR PENILAIAN */
.uka-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 35px 25px;
    height: 100%;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
    position: relative;
}
.uka-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.15);
    border-color: #34d399;
}
.uka-icon {
    width: 70px; height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #047857;
    transform: rotate(45deg);
    transition: all 0.4s ease;
}
.uka-icon i { transform: rotate(-45deg); } 
.uka-card:hover .uka-icon {
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
}

/* SECTION DOWNLOAD & APLIKASI PENGUJI */
.portal-section {
    background: url('https://images.unsplash.com/photo-1604085572504-a392ddf0d86a?q=80&w=1200') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    border-radius: 30px;
    padding: 60px 40px;
    position: relative;
    overflow: hidden;
    margin-top: 60px;
}
.portal-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.95), rgba(4, 120, 87, 0.9));
    z-index: 1;
}
.portal-content { position: relative; z-index: 2; color: white; }

.portal-title { font-weight: 800; font-size: 2.5rem; margin-bottom: 20px; }
.portal-desc { font-size: 1.1rem; line-height: 1.8; opacity: 0.9; margin-bottom: 30px; }
.portal-btn-text { font-size: 1.1rem; }

/* Tombol Kaca (Glassmorphism) */
.btn-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white; padding: 15px 30px; border-radius: 15px;
    font-weight: 600; display: inline-flex; align-items: center;
    transition: all 0.3s ease; text-decoration: none !important;
}
.btn-glass:hover {
    background: rgba(255, 255, 255, 0.2); transform: translateY(-3px); color: var(--accent-gold);
}

/* Kartu Emas untuk Login Penguji */
.penguji-card {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    border-radius: 20px; padding: 30px;
    box-shadow: 0 15px 35px rgba(180, 83, 9, 0.4);
    border: 2px solid #fcd34d;
    color: white; text-align: center;
    transition: all 0.4s ease;
    text-decoration: none !important;
    display: block;
}
.penguji-card:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 20px 40px rgba(180, 83, 9, 0.6);
    color: white;
}
.penguji-icon-wrapper {
    background: rgba(255,255,255,0.2); width: 80px; height: 80px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
.penguji-title { font-weight: 800; margin-bottom: 10px; }
.penguji-desc { font-size: 0.95rem; opacity: 0.9; margin-bottom: 20px; }

.penguji-pulse { animation: pulse-gold 2s infinite; }
@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* ========================================================
   TAMBAHAN CSS UNTUK HALAMAN 404 (NOT FOUND)
   ======================================================== */

.not-found-container {
    padding: 100px 15px; 
    min-height: 60vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
}
.not-found-icon { font-size: 6rem; }
.not-found-title-404 { font-family: 'Montserrat', sans-serif; color: var(--text-main); }
.not-found-desc { max-width: 500px; font-size: 1.1rem; }


/* ========================================================
   MEDIA QUERIES UKA & 404 (MOBILE - Max 768px)
   ======================================================== */
@media (max-width: 768px) {
    /* UKA */
    .uka-hero { padding: 90px 15px 60px; border-radius: 0 0 25px 25px; }
    .arab-text { font-size: 1.8rem; }
    .uka-hero-title { font-size: 2.2rem; }
    .uka-hero-desc { font-size: 1rem; }
    
    .uka-card { padding: 25px 20px; }
    
    .portal-section { padding: 40px 20px; border-radius: 20px; }
    .portal-title { font-size: 1.8rem; }
    .portal-desc { font-size: 1rem; }
    .btn-glass { width: 100%; display: flex; justify-content: center; margin-bottom: 30px; }
    
    /* 404 */
    .not-found-container { padding: 60px 15px; }
    .not-found-icon { font-size: 4rem; }
}