/* Reset CSS Dasar */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* HEADER */
header {
    background-color: #003366; /* Biru Gelap SLB Style */
    color: white;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 100;
}

header h1 { margin: 0; font-size: 24px; }
header p { margin: 5px 0 0; font-size: 14px; opacity: 0.8; }

/* LAYOUT CONTAINER (Flexbox untuk Sidebar & Main) */
.container {
    display: flex;
    flex: 1; /* Mengisi sisa ruang vertikal */
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* SIDEBAR KIRI */
.sidebar {
    width: 260px;
    background-color: #fff;
    border-right: 1px solid #ddd;
    padding: 20px 0;
    flex-shrink: 0; /* Mencegah sidebar mengecil */
    
    /* Agar sidebar tetap diam saat konten discroll */
    position: sticky;
    top: 0;
    height: calc(100vh - 80px); /* Tinggi layar dikurangi header */
    overflow-y: auto; /* Scrollbar jika menu terlalu panjang */
}

/* Judul Kategori di Sidebar */
.category-title {
    font-size: 14px;
    text-transform: uppercase;
    color: #444;
    font-weight: bolder;
    padding: 15px 20px 5px 20px;
    letter-spacing: 1px;
    margin-top: 10px;
}
.category-title:first-child { margin-top: 0; }

/* Tombol Navigasi Sidebar */
.nav-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: #444;
    transition: all 0.2s;
    border-left: 4px solid transparent; /* Garis indikator kiri */
}

.nav-btn:hover {
    background-color: #f8f9fa;
    color: #003366;
}

/* Tombol Aktif */
.nav-btn.active {
    background-color: #e3f2fd;
    color: #0056b3;
    font-weight: 600;
    border-left: 4px solid #0056b3; /* Indikator biru di kiri */
}

/* MAIN CONTENT (KANAN) */
main {
    flex: 1;
    padding: 30px;
    background-color: #f0f2f5;
    overflow-y: auto;
}

/* Styling Konten (Sama seperti sebelumnya, tapi disesuaikan) */
h2 { color: #003366; border-bottom: 2px solid #ccc; padding-bottom: 10px; margin-top: 0; }
h3 { color: #0056b3; margin-top: 25px; }
h4 { color: #444; margin-top: 20px; font-weight: bold; }

ul { line-height: 1.6; }
li { margin-bottom: 8px; }

/* Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background: #000;
}
.video-container iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* FOOTER */
footer {
    background-color: #333;
    color: #bbb;
    text-align: center;
    padding: 10px;
    font-size: 13px;
}

/* RESPONSIVE (Untuk HP) */
@media (max-width: 768px) {
    .container { flex-direction: column; }
    .sidebar { 
        width: 100%; 
        height: auto; 
        position: relative; 
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
    .main { padding: 15px; }
}
/* --- STYLE UNTUK TOMBOL MENU MOBILE --- */
.mobile-menu-btn {
    display: none; /* Default: Sembunyi di Desktop */
    background-color: #0056b3; /* Biru sedikit lebih terang dari header */
    color: white;
    border: 1px solid white;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 15px;
    cursor: pointer;
    font-size: 14px;
    width: 100%; /* Lebar penuh di HP */
    font-weight: bold;
}

.mobile-menu-btn:hover {
    background-color: #004494;
}

/* --- MEDIA QUERY (KHUSUS TAMPILAN MOBILE) --- */
@media (max-width: 768px) {
    
    /* 1. Tampilkan Tombol Menu */
    .mobile-menu-btn {
        display: block;
    }

    /* 2. Ubah Susunan Layout Container */
    .container {
        flex-direction: column; /* Susun Vertikal (Atas-Bawah) */
    }

    /* 3. Modifikasi Sidebar agar menjadi Dropdown */
    .sidebar {
        width: 100%;       /* Lebar Penuh */
        height: auto;      /* Tinggi menyesuaikan isi */
        position: static;  /* Matikan fitur sticky */
        border-right: none;
        border-bottom: 2px solid #ccc;
        
        /* PENTING: Sembunyikan menu secara default di HP */
        display: none;     
        padding: 0;
    }

    /* Class tambahan untuk Menampilkan Menu (akan di-trigger JS) */
    .sidebar.show {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

    /* Merapikan Tombol di dalam Dropdown Mobile */
    .nav-btn {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    .category-title {
        background-color: #eee;
        margin: 0;
        border-bottom: 1px solid #ddd;
    }

    /* Efek Animasi Turun */
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .teks-download a {
        color: #4da6ff; /* Contoh: warna biru muda agar terlihat di background gelap */
        text-decoration: underline; /* Garis bawah agar jelas bahwa ini link */
        transition: color 0.3s ease; /* Opsional: membuat perubahan warna lebih halus */
    }

    /* INI BAGIAN PENTINGNYA: Mengubah warna saat di-hover */
    .teks-download a:hover {
        color: #ffd700; /* Gold / Emas */
        text-decoration: none; /* Opsional: menghilangkan garis bawah saat di-hover */
    }
}