/* =========================================================================
   responsive.css
   Penyesuaian tampilan untuk Desktop, Laptop, Tablet, dan Mobile.
   ========================================================================= */

/* ---------- Laptop kecil / layar sedang (<=1200px) ---------- */
@media (max-width: 1200px) {
    .main-content { padding: 26px 32px 70px; }
    .hero-title { font-size: 36px; }
}

/* ---------- Tablet (<=992px) ---------- */
@media (max-width: 992px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { order: -1; }
    .feature-strip { grid-template-columns: repeat(2, 1fr); }
    .result-grid { grid-template-columns: 1fr; }
}

/* ---------- Tablet kecil / mobile landscape (<=768px) ---------- */
@media (max-width: 768px) {
    :root { --sidebar-width: 240px; }

    .sidebar {
        transform: translateX(-100%);
        transition: transform .3s ease;
        box-shadow: 20px 0 60px rgba(0,0,0,0.4);
    }
    .sidebar.open { transform: translateX(0); }

    .sidebar-burger { display: flex; align-items: center; justify-content: center; }
    body.sidebar-open .sidebar-overlay { display: block; }

    .main-content {
        margin-left: 0;
        padding: 80px 20px 60px;
    }

    .hero-title { font-size: 28px; }
    .hero-desc { font-size: 14px; }
    .feature-strip { grid-template-columns: 1fr; }

    .mode-switch { width: 100%; }
    .mode-btn { flex: 1; }

    .matrix-pair-wrap { flex-direction: column; gap: 16px; }

    table.state-matrix td { width: 38px; height: 34px; font-size: 11.5px; }
}

/* ---------- Mobile (<=480px) ---------- */
@media (max-width: 480px) {
    .section-title { font-size: 21px; }
    .glass-card { padding: 18px; border-radius: 16px; }
    .radio-row { flex-direction: column; }
    .action-row { flex-direction: column; }
    .action-row .btn { width: 100%; }
    .result-actions { flex-direction: column; width: 100%; }
    .result-actions .btn { width: 100%; }
    table.state-matrix td { width: 32px; height: 30px; font-size: 10.5px; }
    .byte-grid { max-width: 100%; }
    .breadcrumb-bar { flex-wrap: wrap; }
}