/* === Responsive Enhancements === */

/* Biar gambar, video, iframe tidak keluar layar */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Container & wrapper menyesuaikan layar */
.container, .content, .wrapper {
    max-width: 100%;
    overflow-x: hidden;
}

/* Tablet (<= 768px) */
@media (max-width: 768px) {
    .sidebar {
        display: none; /* sidebar disembunyikan di mobile */
    }
    .content {
        width: 100%;
        padding: 10px;
    }
    nav ul {
        flex-direction: column;
        gap: 5px;
    }
    .menu-toggle {
        display: block;
        cursor: pointer;
        font-size: 20px;
        margin: 10px;
    }
    .menu {
        display: none;
        flex-direction: column;
    }
    .menu.active {
        display: flex;
    }
}

/* Handphone kecil (<= 480px) */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    h1 {
        font-size: 20px;
    }
    .menu {
        align-items: flex-start;
    }
}