/* --- Reset Dasar --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lexend", sans-serif;
}

/* Menghilangkan titik di semua list dalam header */
header ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- Alert Bar Pengumuman --- */
.alert-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffb400; 
    color: #222;
    padding: 10px 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001; 
    font-size: 0.9rem;
    font-weight: 600;
}

.alert-bar p {
    margin: 0;
    text-align: center;
    padding-right: 30px; 
}

.alert-bar a {
    color: #222;
    text-decoration: underline;
    margin-left: 10px;
    font-weight: bold;
    transition: color 0.3s;
}

.alert-bar a:hover {
    color: #fff;
}

.close-alert {
    position: absolute;
    right: 5%;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #222;
    transition: 0.3s;
    display: flex;
    align-items: center;
}

.close-alert:hover {
    color: #fff;
    transform: scale(1.1);
}

/* --- Navbar Styling --- */
.navbar {
    position: fixed; 
    top: 40px; 
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background: rgba(0, 0, 0, 0.2); 
    z-index: 1000; 
    transition: top 0.3s ease, background 0.3s ease-in-out, padding 0.3s ease;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-weight: 600;
    font-size: 1.2rem;
}

.logo img { height: 40px; }

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

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    transition: 0.3s;
}

.nav-links a:hover { color: #ffb400; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.dropdown-content li a {
    color: #333;
    padding: 12px 20px;
    display: block;
    border-bottom: 1px solid #eee;
}

.dropdown:hover .dropdown-content { display: block; }

/* --- Hero Section --- */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                url('../assets/bgawal.jpg'); 
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

/* Search Box */
.search-box {
    background: white;
    padding: 5px;
    border-radius: 50px;
    display: flex;
    width: 600px;
    max-width: 90%;
    margin: 0 auto;
}

.search-box input {
    flex: 1;
    border: none;
    padding: 15px 25px;
    border-radius: 50px;
    outline: none;
    font-size: 1rem;
}

.search-box button {
    background: #ffb400; 
    color: white;
    border: none;
    padding: 0 30px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.search-box button:hover { background: #e6a300; }

.arrow {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    margin-left: 5px;
    margin-bottom: 3px;
}
.down { transform: rotate(45deg); }

/* --- Pengaturan Layout Umum --- */
.section { padding: 80px 5%; }
.bg-light { background-color: #f8f9fa; }
.container { max-width: 1200px; margin: 0 auto; }

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.section-header h2 { font-size: 2rem; color: #222; }

.see-all {
    text-decoration: none;
    color: #ffb400;
    font-weight: 600;
    font-size: 0.9rem;
    transition: 0.3s;
}
.see-all:hover { color: #e6a300; }

/* --- Sambutan Section --- */
.sambutan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.badge {
    background: #ffb400;
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: bold;
}

.sambutan-teks h2 {
    font-size: 2.5rem;
    margin: 15px 0;
    color: #333;
}

.sambutan-teks p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 25px;
}

.btn-outline {
    display: inline-block;
    padding: 10px 25px;
    border: 2px solid #222;
    color: #222;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px;
    transition: 0.3s;
}

.btn-outline:hover {
    background: #222;
    color: white;
}

.img-box {
    width: 400px;
    height: 400px;
    background-color: #ddd;
    border-radius: 20px;
    overflow: hidden;
}
.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center top; 
}

/* --- Komponen Scroll Horizontal --- */
.scroll-horizontal {
    display: flex;
    gap: 50px;
    overflow-x: auto;
    padding-bottom: 40px;
    scroll-snap-type: x mandatory; 
}

.scroll-horizontal::-webkit-scrollbar { height: 8px; }
.scroll-horizontal::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.card-item {
    min-width: 280px;
    height: 300px;
    background: white;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    scroll-snap-align: start;
    transition: transform 0.3s ease;
    cursor: pointer;
    overflow: hidden;
}

.card-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-item:hover { transform: translateY(-5px); }

/* --- Berita & Prestasi Grid --- */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.berita-card {
    display: flex;
    gap: 20px;
    text-decoration: none;
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: 0.3s;
}

.berita-card img {
    width: 120px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.berita-card:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transform: translateX(5px);
}

.tanggal {
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 8px;
    text-align: center;
    color: #ffb400;
    font-weight: bold;
}

.tanggal span {
    display: block;
    font-size: 1.5rem;
    color: #222;
}

.berita-judul {
    color: #333;
    font-weight: 600;
    align-self: center;
}

.prestasi-card {
    display: flex;
    gap: 20px;
    background: white;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    align-items: center;
}

.prestasi-card img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 15px;
}
.ikon-prestasi { font-size: 2.5rem; color: #ffd700; }
.ikon-prestasi.silver { color: #C0C0C0; }

.prestasi-card h4 { color: #222; margin-bottom: 5px; }
.prestasi-card p { color: #666; font-size: 0.9rem; }

/* --- Kartu Guru --- */
.card-guru {
    min-width: 250px;
    background: white;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    scroll-snap-align: start;
}

.guru-img {
    width: 120px;
    height: 120px;
    background: #ddd;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.guru-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-guru h4 { color: #222; }
.card-guru p { color: #888; font-size: 0.9rem; }

/* --- Profil Alumni Section --- */
.alumni-section {
    background-color: #021833; 
    color: white;
    padding: 80px 5%;
}

.alumni-header {
    text-align: center;
    margin-bottom: 50px;
}

.alumni-header h2 { font-size: 2rem; margin-bottom: 10px; }

.title-line {
    width: 60px;
    height: 3px;
    background-color: #ffb400; 
    margin: 0 auto;
}

.alumni-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.alumni-track {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.alumni-track::-webkit-scrollbar { display: none; }

.alumni-card {
    flex: 0 0 calc((100% / 2) - 15px); 
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 25px;
    display: flex;
    gap: 20px;
    scroll-snap-align: start;
    position: relative;
}

.alumni-card::before {
    content: '“';
    position: absolute;
    font-size: 6rem;
    color: rgba(255, 255, 255, 0.05);
    top: -10px;
    left: 200px;
    font-family: serif;
    pointer-events: none;
}

.alumni-img-box {
    flex: 0 0 160px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #112b4a;
}
.alumni-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.alumni-info { flex: 1; }
.alumni-info h4 { color: #ffb400; font-size: 1.1rem; margin-bottom: 15px; line-height: 1.4; }
.alumni-info p { color: #ddd; font-size: 0.9rem; line-height: 1.6; text-align: justify; }

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background-color: white;
    color: #021833;
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    opacity: 0; 
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.prev-btn { left: -22px; }
.next-btn { right: -22px; }
.carousel-btn:hover { background-color: #ffb400; color: white; }
.alumni-carousel-wrapper:hover .carousel-btn { opacity: 1; visibility: visible; }

/* --- Footer --- */
.footer {
    background: #222;
    color: white;
    padding-top: 60px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.footer-info h3 { font-size: 1.5rem; margin-bottom: 15px; color: #ffb400; }
.footer-info p { max-width: 400px; color: #bbb; line-height: 1.6; }
.footer-social h4 { margin-bottom: 15px; }

.social-icons { display: flex; gap: 15px; }
.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #333;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    transition: 0.3s;
}
.social-icons a:hover { background: #ffb400; }

.footer-bottom {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #333;
    color: #888;
    font-size: 0.9rem;
}

/* =======================================================
   EFEK ANIMASI MODERN (HOVER & SCROLL REVEAL)
   ======================================================= */

/* --- Smooth Scrolling Lanjutan --- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* --- Animasi Gambar Utama (Hero) saat Halaman Dimuat --- */
.hero-content h1 {
    animation: slideDown 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.search-box {
    animation: fadeInSlideUp 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    opacity: 0; /* Mulai dari transparan */
}

/* Keyframes untuk Hero */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Scroll Reveal Classes (Diatur oleh JavaScript) --- */
.reveal {
    opacity: 0;
    transform: translateY(50px); /* Posisi awal di bawah */
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); /* Efek memantul halus */
}

.reveal.active {
    opacity: 1;
    transform: translateY(0); /* Kembali ke posisi semula */
}

/* Reveal dari Kiri (Contoh untuk teks sambutan) */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

/* Reveal dari Kanan (Contoh untuk gambar sambutan) */
.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Penundaan (Delay) bertingkat untuk Grid Card (Berita, Guru, Prestasi) */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.5s; }

/* --- Efek Interaktif Hover Lanjutan --- */

/* Efek Tombol Cari */
.search-box button:hover {
    background: #e6a300;
    transform: scale(1.05); /* Membesar sedikit saat disentuh */
}

/* Efek Berita Card lebih Dinamis */
.berita-card {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.berita-card:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.05);
    transform: translateX(10px) translateY(-2px); /* Geser serong ke atas kanan */
}

/* Efek Gambar Kepsek Melayang (Floating) */
.img-box img {
    transition: transform 0.8s ease;
}
.img-box:hover img {
    transform: scale(1.08) rotate(1deg); /* Zoom pelan dan miring sedikit */
}

/* Efek Glow pada Prestasi Card */
.prestasi-card {
    transition: all 0.4s ease;
    border: 1px solid transparent;
}
.prestasi-card:hover {
    border: 1px solid #ffb400; /* Muncul bingkai emas */
    box-shadow: 0 15px 35px rgba(255, 180, 0, 0.15); /* Glow cahaya kuning */
    transform: translateY(-8px);
}


/* =======================================================
   TAMBAHAN UNTUK HALAMAN SUB-PAGE (SEJARAH, PROFIL, DLL)
   ======================================================= */

/* --- Page Header (Hero Pendek) --- */
.page-header {
    height: 45vh; /* Lebih pendek dari hero halaman utama */
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                url('../assets/bgawal.jpg'); /* Pastikan path gambar benar */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    margin-top: 0;
    padding-top: 40px; /* Jarak untuk alert bar */
}

.page-header-content h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #ffb400;
}

.page-header-content p {
    font-size: 1.1rem;
    color: #ddd;
}

/* --- Layout Konten Sejarah --- */
.history-grid {
    display: grid;
    grid-template-columns: 3fr 2fr; /* Membagi kolom teks dan timeline */
    gap: 60px;
    align-items: start;
}

.history-content h2 {
    font-size: 2.2rem;
    color: #222;
    margin: 15px 0 25px;
}

.history-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

.history-img-inline {
    margin: 30px 0;
    text-align: center;
}

.history-img-inline img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.history-img-inline .caption {
    display: block;
    font-size: 0.85rem;
    color: #888;
    margin-top: 10px;
    font-style: italic;
}

/* --- Timeline (Garis Waktu) --- */
.history-timeline {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.history-timeline h3 {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #222;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.timeline-container {
    position: relative;
    border-left: 3px solid #ffb400; /* Garis vertikal kuning */
    padding-left: 25px;
    margin-left: 10px;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
}

/* Titik Kuning di Garis Waktu */
.timeline-item::before {
    content: '';
    position: absolute;
    left: -33px; /* Posisi menyesuaikan ketebalan garis */
    top: 0;
    width: 14px;
    height: 14px;
    background-color: #ffb400;
    border-radius: 50%;
    border: 3px solid #f8f9fa; /* Membuat efek cincin */
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-year {
    font-weight: bold;
    color: #ffb400;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.timeline-item h4 {
    color: #222;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.timeline-item p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* =======================================================
   HALAMAN VISI & MISI (SPLIT LAYOUT)
   ======================================================= */

.visi-misi-section {
    padding-top: 180px;
    padding-bottom: 100px;
}

/* Grid Layout 2 Kolom */
.visi-misi-split {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Membelah layar jadi 2 sama besar */
    gap: 40px;
    align-items: stretch; /* Membuat kedua kotak tingginya sama */
}

/* Styling Kartu */
.vm-card {
    background: white;
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-top: 6px solid #ffb400; /* Garis emas di atas */
    text-align: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.vm-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* Styling Ikon di Atas */
.vm-icon {
    width: 80px;
    height: 80px;
    background-color: #021833;
    color: #ffb400;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    margin: 0 auto 20px; /* Di tengah-tengah */
    box-shadow: 0 5px 15px rgba(2, 24, 51, 0.2);
}

.vm-card h2 {
    color: #021833;
    font-size: 2rem;
    margin-bottom: 15px;
}

.vm-divider {
    width: 50px;
    height: 3px;
    background-color: #ffb400;
    margin: 0 auto 30px;
}

/* Teks Visi Khusus */
.visi-text {
    font-size: 1.5rem;
    color: #444;
    line-height: 1.6;
    font-style: italic;
    font-weight: 600;
    margin-top: 40px;
}

/* List Misi Baru */
.misi-list-baru {
    list-style: none;
    padding: 0;
    text-align: left; /* Teks misi rata kiri agar mudah dibaca */
}

.misi-list-baru li {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 20px;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    transition: background 0.3s;
}

.misi-list-baru li:hover {
    background: #fff3d6; /* Efek hover warna kuning muda */
}

.misi-angka {
    background-color: #ffb400;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.misi-list-baru p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* =======================================================
   HALAMAN KONDISI SEKOLAH (ZIG-ZAG LAYOUT)
   ======================================================= */

.kondisi-item {
    display: flex;
    align-items: center;
    gap: 40px;
    background: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kondisi-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* KUNCI ZIG-ZAG: Membuat item berurutan genap (ke-2, ke-4, dst) posisinya terbalik (Teks Kiri, Gambar Kanan) */
.kondisi-item:nth-child(even) {
    flex-direction: row-reverse;
}

/* Area Gambar */
.kondisi-img {
    flex: 1; /* Membagi ruang 50:50 dengan teks */
    border-radius: 15px;
    overflow: hidden;
    height: 300px; /* Menyeragamkan tinggi semua gambar */
    background-color: #ddd; /* Warna placeholder jika gambar belum ada */
}

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

.kondisi-item:hover .kondisi-img img {
    transform: scale(1.05); /* Efek gambar membesar pelan saat di-hover */
}

/* Area Teks */
.kondisi-text {
    flex: 1; /* Membagi ruang 50:50 dengan gambar */
    padding: 10px 20px;
}

/* Desain Tanggal (Badge) */
.kondisi-date {
    display: inline-block;
    background: #fff3d6; /* Kuning sangat muda */
    color: #ffb400;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.kondisi-date i {
    margin-right: 5px;
}

.kondisi-text h3 {
    color: #021833;
    font-size: 1.8rem;
    margin-bottom: 15px;
    line-height: 1.3;
}

.kondisi-text p {
    color: #555;
    line-height: 1.7;
    font-size: 1rem;
    text-align: justify;
}
/* =======================================================
   HALAMAN SARANA & PRASARANA (GRID CARDS)
   ======================================================= */

.fasilitas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Membuat 3 kolom sama besar di layar PC */
    gap: 30px;
    margin-top: 40px;
}

.fasilitas-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid transparent;
}

.fasilitas-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-bottom: 4px solid #ffb400; /* Garis emas muncul saat disentuh */
}

/* Area Gambar Fasilitas */
.fasilitas-img {
    height: 220px;
    background-color: #ddd;
    position: relative;
    overflow: hidden;
}

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

/* Efek zoom saat card dihover */
.fasilitas-card:hover .fasilitas-img img {
    transform: scale(1.1);
}

/* Ikon Kecil di Sudut Gambar */
.fasilitas-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background-color: #ffb400;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 2;
}

/* Area Deskripsi */
.fasilitas-info {
    padding: 25px 20px;
    text-align: center;
}

.fasilitas-info h4 {
    color: #021833;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.fasilitas-info p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}
/* =======================================================
   HALAMAN STAFF & MANAJEMEN (HIERARCHY GRID)
   ======================================================= */

.staff-tier {
    margin-bottom: 60px;
}

.staff-tier:last-child {
    margin-bottom: 0;
}

.staff-category-title {
    text-align: center;
    font-size: 1.8rem;
    color: #021833;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
}

/* Garis hiasan di bawah judul kategori */
.staff-category-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #ffb400;
}

/* Pengaturan Grid */
.staff-grid {
    display: grid;
    gap: 30px;
}

.grid-center {
    grid-template-columns: 350px; /* Lebar card khusus pimpinan di tengah */
    justify-content: center;
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Styling Kartu Staff */
.staff-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
}

.staff-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #ffb400;
}

/* Khusus Kartu Pimpinan (Lebih besar/berbeda) */
.leader-card {
    border-top: 5px solid #ffb400;
}

.staff-img {
    width: 100%;
    height: 280px; /* Tinggi foto dibuat seragam */
    background-color: #f0f0f0;
    overflow: hidden;
}

.staff-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.4s ease;
}

.staff-card:hover .staff-img img {
    transform: scale(1.05); /* Efek zoom tipis */
}

.staff-info {
    padding: 20px;
}

.staff-info h4 {
    color: #222;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.staff-role {
    color: #ffb400;
    font-weight: 600;
    font-size: 0.9rem;
}
/* =======================================================
   HALAMAN STAFF (TABLE LIST & PAGINATION)
   ======================================================= */

.table-container {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.table-responsive {
    width: 100%;
    overflow-x: auto; /* Agar tabel bisa digeser kanan-kiri di HP */
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    min-width: 600px; /* Lebar minimum agar tidak terlalu menyempit */
}

.staff-table th {
    text-align: left;
    padding: 15px;
    border-bottom: 2px solid #ddd;
    color: #222;
    font-weight: 600;
}

.staff-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    color: #555;
    font-size: 0.95rem;
}

/* Memberi efek warna belang-belang samar pada baris tabel */
.staff-table tr:nth-child(even) {
    background-color: #fafafa;
}

.staff-table tr:hover {
    background-color: #fff8e6; /* Efek hover warna kuning sangat pudar */
}

/* --- Pagination Styles --- */
.pagination {
    display: flex;
    gap: 8px;
    margin-top: 30px;
    justify-content: flex-start;
}

.page-btn {
    padding: 10px 18px;
    border: 1px solid #ddd;
    background-color: white;
    color: #333;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 0.9rem;
}

.page-btn:hover {
    background-color: #f0f0f0;
}

/* Warna tombol aktif (kuning) */
.page-btn.active {
    background-color: #ffb400;
    color: white;
    border-color: #ffb400;
}

/* =======================================================
   HALAMAN BERITA TERBARU (NEWS GRID BOX)
   ======================================================= */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Kolom untuk PC */
    gap: 30px;
}

.news-box {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
    border: 1px solid #f0f0f0;
}

.news-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #ffb400; /* Garis tepi kuning tipis saat dihover */
}

/* Area Gambar Berita */
.news-box-img {
    height: 220px;
    position: relative;
    overflow: hidden;
    background-color: #ddd;
}

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

.news-box:hover .news-box-img img {
    transform: scale(1.08); /* Efek zoom halus pada gambar */
}

/* Label Kategori (Kuning di atas gambar) */
.news-category {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background-color: #ffb400;
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Area Konten Bawah */
.news-box-content {
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Mendorong tombol baca selengkapnya ke paling bawah */
}

/* Info Tanggal dan Penulis */
.news-box-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 15px;
    font-weight: 500;
}

.news-box-meta i {
    color: #ffb400;
}

/* Judul Berita */
.news-box-title {
    font-size: 1.25rem;
    color: #021833;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.news-box-title:hover {
    color: #ffb400;
}

/* Potongan Isi Berita */
.news-box-excerpt {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Menampilkan maksimal 3 baris teks */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tombol Baca Selengkapnya */
.read-more-btn {
    margin-top: auto; /* Memaksa tombol selalu berada di bawah kartu */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffb400;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    transition: 0.3s;
}

.read-more-btn:hover {
    color: #cc9000;
    gap: 12px;
}

/* =======================================================
   HALAMAN INFO SEKOLAH (QUICK INFO & FAQ ACCORDION)
   ======================================================= */

/* --- Quick Info Grid --- */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.info-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 4px solid transparent;
}

.info-card:hover {
    transform: translateY(-8px);
    border-bottom: 4px solid #ffb400;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.info-icon {
    font-size: 2.5rem;
    color: #021833;
    margin-bottom: 20px;
}

.info-card h4 {
    font-size: 1.3rem;
    color: #222;
    margin-bottom: 20px;
}

.info-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.info-card ul li {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    color: #555;
    font-size: 0.95rem;
}

.info-card ul li:last-child {
    border-bottom: none;
}

.info-card ul li strong {
    color: #222;
    display: inline-block;
    width: 100px; /* Merapikan jarak teks tebal */
}

/* --- FAQ Accordion --- */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.faq-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    cursor: pointer;
    transition: 0.3s;
}

.faq-question h4 {
    font-size: 1.1rem;
    color: #021833;
    font-weight: 600;
}

.faq-question i {
    color: #ffb400;
    font-size: 1.2rem;
    transition: transform 0.4s ease;
}

/* Saat FAQ aktif / terbuka */
.faq-item.active .faq-question h4 {
    color: #ffb400;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg); /* Memutar panah ke atas */
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer p {
    padding: 0 10px 20px 10px;
    color: #666;
    line-height: 1.7;
    font-size: 0.95rem;
}

/* =======================================================
   HALAMAN AGENDA SEKOLAH
   ======================================================= */
.max-w-800 {
    max-width: 800px;
    margin: 0 auto;
}

.agenda-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.agenda-item {
    display: flex;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.agenda-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.agenda-date {
    background-color: #ffb400;
    color: white;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 120px;
}

.agenda-date .month {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.agenda-date .day {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.agenda-info {
    padding: 25px;
    flex: 1;
}

.agenda-info h3 {
    color: #021833;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.agenda-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 15px;
    font-weight: 500;
}

.agenda-meta i {
    color: #ffb400;
}

.agenda-info p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* =======================================================
   HALAMAN GALERI (FILTER & LIGHTBOX EFEK)
   ======================================================= */
.galery-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 40px; }
.filter-btn { background: transparent; border: 2px solid #ddd; padding: 8px 25px; border-radius: 50px; font-size: 0.95rem; font-weight: 600; color: #555; cursor: pointer; transition: 0.3s; }
.filter-btn:hover, .filter-btn.active { background: #ffb400; border-color: #ffb400; color: white; }
.galery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.galery-item { position: relative; height: 250px; border-radius: 15px; overflow: hidden; background-color: #ddd; box-shadow: 0 5px 15px rgba(0,0,0,0.05); cursor: pointer; }
.galery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.galery-item:hover img { transform: scale(1.1); }
.galery-item.hide { display: none; }
.galery-item.show { animation: fadeInScale 0.5s ease forwards; }
@keyframes fadeInScale { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }
.galery-overlay { position: absolute; bottom: -100%; left: 0; width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: 40px 20px 20px; color: white; transition: bottom 0.4s ease; }
.galery-item:hover .galery-overlay { bottom: 0; }
.galery-overlay h4 { font-size: 1.1rem; margin-bottom: 5px; color: #ffb400; }
.galery-overlay p { font-size: 0.85rem; opacity: 0.9; }
.lightbox { display: none; position: fixed; z-index: 9999; padding-top: 60px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(5px); flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.lightbox.active { display: flex; opacity: 1; }
.lightbox-content { max-width: 90%; max-height: 75vh; border-radius: 10px; box-shadow: 0 0 30px rgba(255, 180, 0, 0.3); animation: zoomIn 0.4s ease; }
@keyframes zoomIn { from { transform: scale(0.8); } to { transform: scale(1); } }
.lightbox-caption { margin-top: 15px; color: #ffb400; font-size: 1.3rem; font-weight: 600; text-align: center; letter-spacing: 1px; }
.close-lightbox { position: absolute; top: 20px; right: 40px; color: #fff; font-size: 45px; font-weight: bold; cursor: pointer; transition: color 0.3s; }
.close-lightbox:hover { color: #ffb400; }

/* =======================================================
   HALAMAN EKSTRAKURIKULER (BANNER CARDS & MODAL)
   ======================================================= */

.ekskul-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px;
}

.ekskul-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 1px solid #f4f4f4;
    cursor: pointer;
    position: relative;
}

.ekskul-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    border-color: #ffb400; 
}

.ekskul-banner {
    width: 100%;
    height: 250px;
    background-color: #021833; 
    position: relative;
    overflow: hidden;
}

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

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

.ekskul-info {
    padding: 30px;
}

.ekskul-info h3 {
    color: #021833;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.ekskul-info p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: justify;
}

.ekskul-jadwal {
    display: inline-block;
    background: #fff3d6;
    color: #ffb400;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    border-left: 3px solid #ffb400;
}

.ekskul-jadwal i { margin-right: 5px; }

.click-hint {
    margin-top: 15px;
    font-size: 0.85rem;
    color: #ffb400;
    font-weight: 600;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.3s;
}

.ekskul-card:hover .click-hint {
    transform: translateX(5px);
}

/* --- Pop-Up Modal --- */
.ekskul-modal {
    display: none; 
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.ekskul-modal.active {
    display: flex;
    opacity: 1;
}

.ekskul-modal-content {
    background-color: white;
    border-radius: 15px;
    width: 100%;
    max-width: 750px;
    max-height: 90vh; 
    overflow-y: auto;
    position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    animation: slideUpModal 0.4s ease forwards;
}

.ekskul-modal-content::-webkit-scrollbar { width: 6px; }
.ekskul-modal-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }

@keyframes slideUpModal {
    from { transform: translateY(50px) scale(0.9); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.close-ekskul {
    position: absolute;
    top: 15px; right: 25px;
    font-size: 2.5rem;
    color: white; 
    cursor: pointer;
    z-index: 10;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5); 
    transition: 0.3s;
}

.close-ekskul:hover {
    color: #ffb400;
    transform: scale(1.1);
}

.modal-banner {
    width: 100%;
    height: 250px;
    background-color: #021833;
    position: relative;
}

.modal-banner img { width: 100%; height: 100%; object-fit: cover; }

.modal-banner::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent); 
}

.modal-body { padding: 40px; }
.modal-body h2 { color: #021833; font-size: 2rem; margin-bottom: 10px; }

.modal-jadwal {
    display: inline-block; background: #fff3d6; color: #ffb400;
    padding: 8px 15px; border-radius: 8px; font-weight: 600; font-size: 0.95rem;
    margin-bottom: 25px; border-left: 3px solid #ffb400;
}

.modal-desc p { color: #555; line-height: 1.8; margin-bottom: 15px; font-size: 1rem; text-align: justify; }

.modal-socials { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 30px; border-top: 1px solid #eee; padding-top: 30px; }
.social-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 25px; border-radius: 50px; text-decoration: none; font-weight: bold; transition: 0.3s; color: white; }

.ig-btn { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.ig-btn:hover { box-shadow: 0 5px 15px rgba(220, 39, 67, 0.4); transform: translateY(-3px); }

.email-btn { background-color: #ea4335; }
.email-btn:hover { box-shadow: 0 5px 15px rgba(234, 67, 53, 0.4); transform: translateY(-3px); }

/* =======================================================
   HALAMAN KELAS LAYANAN (FEATURE CARDS)
   ======================================================= */

.layanan-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Menampilkan 2 kolom di layar PC/Laptop */
    gap: 40px;
}

.layanan-card {
    background: white;
    border-radius: 15px;
    padding: 50px 40px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
    border: 1px solid #f4f4f4;
    border-bottom: 5px solid transparent;
}

.layanan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border-bottom: 5px solid #ffb400; /* Muncul garis emas di bawah saat disentuh */
}

/* Desain Lingkaran Ikon */
.layanan-icon {
    width: 80px;
    height: 80px;
    background-color: #021833; /* Biru gelap khas SMAN 8 */
    color: #ffb400; /* Warna ikon kuning */
    border-radius: 20px; /* Bentuk kotak dengan sudut melengkung */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    margin-bottom: 25px;
    box-shadow: 0 10px 20px rgba(2, 24, 51, 0.15);
    transition: transform 0.4s ease, background-color 0.4s ease;
}

/* Efek Ikon berputar sedikit saat kartu disentuh */
.layanan-card:hover .layanan-icon {
    transform: rotate(10deg) scale(1.1);
    background-color: #ffb400;
    color: #021833;
}

.layanan-card h3 {
    color: #021833;
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.layanan-card p {
    color: #666;
    line-height: 1.8;
    font-size: 1rem;
    text-align: justify;
}

/* =======================================================
   HALAMAN STRUKTUR ORGANISASI (ORG CHART) - KODE YANG HILANG
   ======================================================= */
.org-wrapper { max-width: 1000px; margin: 0 auto; padding: 20px 0; }
.org-level { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; text-align: center; flex-direction: column; }
.org-level.grid-2 { flex-direction: row; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.org-level.grid-3 { flex-direction: row; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.org-level.grid-4 { flex-direction: row; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.level-title { background-color: #021833; color: white; padding: 10px 30px; border-radius: 50px; font-size: 1.1rem; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.org-card { background: white; padding: 25px 20px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-top: 5px solid #ccc; text-align: center; transition: transform 0.3s ease; width: 100%; position: relative; }
.org-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.org-icon { font-size: 2.5rem; color: #021833; margin-bottom: 15px; }
.org-card h4 { color: #222; font-size: 1.1rem; margin-bottom: 5px; }
.org-card p { color: #666; font-size: 0.9rem; font-weight: 600; }

/* Warna khusus tiap level jabatan */
.org-card.leader { border-top-color: #ffb400; max-width: 350px; }
.org-card.leader .org-icon { color: #ffb400; }
.org-card.secondary { border-top-color: #4CAF50; }
.org-card.secondary .org-icon { color: #4CAF50; }
.org-card.wakasek { border-top-color: #2196F3; }
.org-card.wakasek .org-icon { color: #2196F3; }
.org-card.base { border-top-color: #9C27B0; }
.org-card.base .org-icon { color: #9C27B0; }
.org-connector { text-align: center; color: #ccc; font-size: 2rem; margin: 20px 0; }

/* Aturan Responsif untuk Struktur Organisasi (Agar rapi di HP) */
@media (max-width: 768px) {
    .org-level.grid-2, .org-level.grid-3, .org-level.grid-4 {
        grid-template-columns: 1fr; width: 100%; gap: 20px;
    }
}


/* =======================================================
   MENGEMBALIKAN CSS KONDISI & SARPRAS YANG JUGA TERHAPUS
   ======================================================= */
/* Kondisi Sekolah Zig-Zag */
.kondisi-item { display: flex; align-items: center; gap: 40px; background: white; border-radius: 20px; padding: 30px; margin-bottom: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: transform 0.3s ease; }
.kondisi-item:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.08); }
.kondisi-item:nth-child(even) { flex-direction: row-reverse; }
.kondisi-img { flex: 1; border-radius: 15px; overflow: hidden; height: 300px; background-color: #ddd; }
.kondisi-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.kondisi-item:hover .kondisi-img img { transform: scale(1.05); }
.kondisi-text { flex: 1; padding: 10px 20px; }
.kondisi-date { display: inline-block; background: #fff3d6; color: #ffb400; padding: 6px 16px; border-radius: 50px; font-size: 0.85rem; font-weight: bold; margin-bottom: 15px; }
.kondisi-text h3 { color: #021833; font-size: 1.8rem; margin-bottom: 15px; }
.kondisi-text p { color: #555; line-height: 1.7; text-align: justify; }

/* Sarana Prasarana Grid */
.fasilitas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.fasilitas-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: transform 0.3s ease; border-bottom: 4px solid transparent; }
.fasilitas-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-bottom: 4px solid #ffb400; }
.fasilitas-img { height: 220px; background-color: #ddd; position: relative; overflow: hidden; }
.fasilitas-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.fasilitas-card:hover .fasilitas-img img { transform: scale(1.1); }
.fasilitas-icon { position: absolute; bottom: 15px; right: 15px; width: 40px; height: 40px; background-color: #ffb400; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.1rem; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 2; }
.fasilitas-info { padding: 25px 20px; text-align: center; }
.fasilitas-info h4 { color: #021833; font-size: 1.25rem; margin-bottom: 10px; }

@media (max-width: 768px) {
    .kondisi-item, .kondisi-item:nth-child(even) { flex-direction: column; padding: 20px; }
    .kondisi-img { width: 100%; height: 220px; }
    .fasilitas-grid { grid-template-columns: 1fr; }
}