/* ================================================================
   css/responsive.css — Virtual Lab TJKT
   Breakpoint responsif untuk Tablet (≤ 768px) dan Mobile (≤ 480px)
   ================================================================ */

/* ----------------------------------------------------------------
   TABLET & LAYAR KECIL (≤ 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

  /* ---- Layout ---- */
  .app-main { padding: var(--space-md); }

  /* ---- Header ---- */
  .header-inner { padding: var(--space-sm) var(--space-md); }
  .brand-label  { display: none; }
  .nav-toggle   { display: flex; }

  /* ---- Navigasi Tab: mobile drawer ---- */
  .tab-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(10, 14, 26, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: var(--space-sm) 0;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .tab-nav.nav-open { max-height: 400px; }

  .tab-btn {
    padding: var(--space-md) var(--space-xl);
    border-bottom: none;
    border-left: 2px solid transparent;
    justify-content: flex-start;
    margin-bottom: 0;
    font-size: 0.9rem;
  }

  .tab-btn.active { border-left-color: var(--accent); border-bottom: none; }
  .tab-btn-help   { margin-left: 0; border-left: none; padding-left: var(--space-xl); border-top: 1px solid var(--border); }

  /* ---- Ensiklopedia ---- */
  .tools-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

  /* ---- Modal ---- */
  .modal-box { padding: var(--space-lg); max-height: 95vh; }
  .modal-tool-header { flex-direction: column; text-align: center; }
  .modal-tool-icon { margin: 0 auto; }

  /* ---- Simulasi ---- */
  .steps-wrap { grid-template-columns: 1fr; }
  .steps-sidebar {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: var(--space-sm);
    gap: var(--space-xs);
    scrollbar-width: none;
  }
  .steps-sidebar::-webkit-scrollbar { display: none; }
  .step-item { flex-direction: column; text-align: center; flex-shrink: 0; padding: var(--space-xs) var(--space-sm); }
  .step-text { display: none; }

  .steps-content { padding: var(--space-md); }
  .lan-tester-visual { flex-direction: column; }
  .tester-cable-line { width: 2px; height: 30px; }

  /* ---- Pemeliharaan ---- */
  .maintenance-grid { grid-template-columns: 1fr; }

  /* ---- Intro Page ---- */
  .intro-stats-row { grid-template-columns: repeat(2, 1fr); }
  .intro-author-card { flex-direction: column; align-items: center; text-align: center; }
  .author-meta-grid { grid-template-columns: 1fr; }
  .author-avatar { width: 100px; height: 100px; }

  /* ---- Guide Page ---- */
  .guide-card { flex-direction: column; }
  .guide-sound-grid { grid-template-columns: 1fr; }
  .guide-card-icon { width: 100%; height: 48px; font-size: 1.5rem; }
}

/* ----------------------------------------------------------------
   MOBILE KECIL (≤ 480px)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {

  /* ---- Header ---- */
  .brand-title { font-size: 0.8rem; }

  /* ---- Tab Panel ---- */
  .panel-title { font-size: 1.1rem; }

  /* ---- Kuis ---- */
  .quiz-start-card { padding: var(--space-lg) var(--space-md); }
  .result-card     { padding: var(--space-lg) var(--space-md); }
  .score-big       { font-size: 3rem; }
  .trivia-choices  { flex-direction: column; }

  /* ---- Intro Page ---- */
  .intro-stats-row   { grid-template-columns: repeat(2, 1fr); }
  .intro-cta-row     { flex-direction: column; align-items: stretch; }
  .intro-btn-primary,
  .intro-btn-secondary { justify-content: center; }

  /* ---- Guide Page ---- */
  .guide-header      { flex-wrap: wrap; }
  .guide-bottom-nav  { flex-direction: column; align-items: stretch; }
  .guide-back-btn    { justify-content: center; }
  .guide-compat-grid { grid-template-columns: 1fr; }

  /* ---- Ensiklopedia ---- */
  .tools-grid   { grid-template-columns: 1fr; }
  .modal-box    { padding: var(--space-md); }
  .spec-table   { font-size: 0.78rem; }

  /* ---- Simulasi ---- */
  .cable-choices { gap: var(--space-xs); }
  .cable-btn     { font-size: 0.72rem; padding: var(--space-xs) var(--space-sm); }
  .sim-selector  { gap: var(--space-xs); }
  .sim-sel-btn   { font-size: 0.8rem; padding: var(--space-xs) var(--space-md); }

  /* ---- LED ---- */
  .led { width: 16px; height: 16px; }
}

/* ----------------------------------------------------------------
   PREFERENSI MOTION (aksesibilitas)
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }

  .splash-loader-fill { transition: none !important; }
}

/* ----------------------------------------------------------------
   DARK MODE (sudah dark by default — ini untuk forced light mode)
   ---------------------------------------------------------------- */
@media (forced-colors: active) {
  .led.on-green { forced-color-adjust: none; background: ButtonText; }
  .led.off      { forced-color-adjust: none; background: GrayText; }
}