/*
 * =========================================
 * MEDIA QUERY UNTUK LAYAR HANDPHONE (Max 768px)
 * =========================================
 */
@media (max-width: 768px) {

    /* Penyesuaian Body dan Konten Utama */
    body {
        font-size: 14px; /* Sedikit lebih kecil untuk mobile */
    }
    
    /* Header Atas (#atas) */
    #atas {
        position: relative; /* Hapus 'fixed' agar konten tidak tertutup */
        margin-bottom: 0;
    }

    /* Kepala (Logo/Judul Besar) */
    #Kepala {
        flex-direction: column; /* Tata letak kolom */
        padding: 10px 15px;
    }

    /* Sembunyikan atau Kecilkan Gambar Kepala/Logo di Mobile */
    #Kepala img {
        position: static; /* Hapus posisi absolut */
        margin: 10px auto;
        max-width: 200px;
    }
    
    /* Menu Navigasi (Sederhanakan ke Kolom) */
    nav ul {
        flex-direction: column; /* Buat menu menjadi satu kolom */
        align-items: stretch;
    }
    
    nav ul li {
        width: 100%; /* Setiap item menu mengambil lebar penuh */
    }

    /* Sembunyikan Submenu di Mobile (Biasanya ditangani dengan JS/Hamburger Menu) */
    nav ul li ul {
        position: static;
        width: 100%;
        min-width: unset;
        background-image: none; /* Hapus gradient di submenu mobile */
        background-color: rgba(0, 0, 0, 0.1); /* Latar belakang untuk submenu */
    }

    /* Penyesuaian Konten dan Sidebar */
    #page {
        margin-top: 10px; /* Kurangi margin atas */
        padding: 0 10px; /* Tambahkan padding di sisi page */
    }
    
    #content {
        float: none; /* Hapus float */
        width: 100%; /* Ambil lebar penuh */
    }
    
    #menu_side {
        float: none; /* Hapus float */
        width: 100%; /* Ambil lebar penuh */
        order: 2; /* Atur agar sidebar muncul di bawah konten utama (opsional, tergantung struktur HTML) */
        margin-top: 15px;
    }

    /* Penyesuaian Konten Dalam */
    #contetdalam {
        padding: 10px;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Tabel dan Konten yang Bisa Digulir */
    .scroll-x, .ckeditor-content table {
        display: block;
        width: 100%;
        overflow-x: auto; /* Pastikan tabel bisa digulir horizontal */
    }
    
    /* Gambar dalam Konten Berita */
    .news-intro-image {
        float: none; /* Hapus float */
        margin: 0 auto 15px auto; /* Pusatkan gambar */
        width: 100%;
        height: auto;
    }
    
    /* CKEditor Content Image */
    .ckeditor-content img {
        max-width: 100%; /* Batasi gambar agar tidak melebihi lebar layar */
    }
    
    /* Layout Fleksibel */
    .section-flex {
        flex-direction: column; /* Tumpuk box menjadi kolom */
        gap: 10px;
    }
    
    .section-flex .box,
    .section-flex .box-full {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    
    /* Ringkasan (Summary) */
    .summary {
        grid-template-columns: 1fr; /* Satu kolom untuk kotak ringkasan */
    }

    /* Grafik (Charts) */
    .charts {
        grid-template-columns: 1fr; /* Satu kolom untuk grafik */
        gap: 15px;
    }
    
    .chart-box {
        width: 100%;
    }
    
    /* Penyesuaian Elemen Lain */
    .row {
        flex-direction: column;
        margin: 0;
    }

    .col-md-6 {
        width: 100%;
        padding: 5px 0;
    }
    
    /* Overlay Slideshow */
    .overlay-bottom {
        flex-wrap: wrap;
        bottom: 10px;
        gap: 10px;
    }
    
    .icon-link {
        width: 65px;
        height: 65px;
        padding: 5px;
        font-size: 8px;
    }
    
    .icon-link img {
        height: 35px;
        width: auto;
    }

    /* Judul dan Font Size */
    h1, h2, h3, h4, h5,
    .ckeditor-content h1, .ckeditor-content h2, .ckeditor-content h3, .ckeditor-content h4, .ckeditor-content h5 {
        margin-top: 8px;
        margin-bottom: 4px;
    }
    .ckeditor-content h1 { font-size: 1.8rem; }
    .ckeditor-content h2 { font-size: 1.5rem; }
    .ckeditor-content h3 { font-size: 1.3rem; }
    .ckeditor-content h4 { font-size: 1.1rem; }
    .ckeditor-content h5 { font-size: 1rem; }
    
    .news-detail-title {
        font-size: 1.5rem;
    }
    
    /* Footer */
    #footer {
        text-align: center;
        padding: 15px 10px;
    }
}