/* ==================================================================
   JK ADISTORE AI — Responsive & Mobile
   Sidebar jadi drawer di HP, layout auth jadi satu kolom.
   ================================================================== */

/* tombol sidebar khusus HP */
.btn-menu-sidebar {
  display: none;
}

/* ---------- TABLET KECIL & HP ---------- */
@media (max-width: 900px) {
  .auth-halaman { grid-template-columns: 1fr; }
  .auth-kiri { display: none; }
  .auth-kanan { border-left: none; padding: 28px 20px; }
}

@media (max-width: 860px) {
  :root { --header-h: 56px; }
  body { font-size: 14.5px; }

  /* layout: sidebar overlay */
  .app-layout { grid-template-columns: 1fr; }

  .btn-menu-sidebar {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 13px; border-radius: 10px; cursor: pointer;
    background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-soft);
    font-size: 12.5px; font-weight: 600; font-family: inherit;
    transition: all var(--speed);
  }
  .btn-menu-sidebar:hover { color: var(--text); border-color: var(--text-dim); }

  .sidebar {
    position: fixed; top: var(--header-h); bottom: 0; left: 0; width: min(300px, 84vw);
    z-index: 90; transform: translateX(-102%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow: none; border-right: 1px solid var(--border);
    background: var(--bg-soft);
  }
  .sidebar.buka { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar-tutup {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 80;
    background: rgba(4, 7, 18, .55); backdrop-filter: blur(3px);
    animation: fade .2s ease;
  }

  .nav-menu .nav-btn { padding: 7px 10px; font-size: 13px; }
  .status-pill { display: none; }
  .header-in { padding: 0 10px; gap: 8px; }

  .chat-inner, .composer { padding: 0 14px; }
  .composer-foot { padding: 8px 18px 0; }
  .pesan-error-bawah { padding: 8px 18px 0; }
  .chat-box { padding-top: 16px; }
  .kolom { max-width: 86%; }

  .hero-awal { padding-top: 4vh; }
  .saran-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kartu-saran { padding: 13px; }
  .kartu-saran .jd { font-size: 12.5px; }
  .kartu-saran .ds { display: none; }
}

@media (max-width: 560px) {
  .brand span { display: none; }           /* sisakan logo saja */
  .nav-menu .nav-btn:not(.nav-btn.penting) { display: none; }
  .nav-btn.penting { display: inline-flex !important; }
  .saran-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid .stat-kartu:last-child { grid-column: span 2; }
  .dua-kolom { grid-template-columns: 1fr; }
  .chip-baris { gap: 6px; }
  .chip { padding: 5px 10px; font-size: 11.5px; }
  .chat-top { padding: 8px 12px; }
  .chat-top h1 { font-size: 14px; }
  .composer-box { border-radius: 20px; padding: 8px 8px 8px 14px; }
  .btn-kirim { width: 36px; height: 36px; font-size: 15px; }
  .ai-grid { grid-template-columns: 1fr 1fr; }
  .auth-kartu { padding: 22px; }
  .aksi-kode { gap: 6px; }
  .btn-aksi { padding: 5px 10px; font-size: 11.5px; }
  .preview-bingkai { height: 50vh; }
  .pesan.user .kolom, .kolom { max-width: 90%; }
}

/* ---------- HP SANGAT KECIL ---------- */
@media (max-width: 380px) {
  .hero-awal h2 { font-size: 24px; }
  .nav-menu .nav-btn.penting { padding: 6px 8px; font-size: 12px; }
  .icon-btn { width: 34px; height: 34px; }
}

/* ---------- CETAK ---------- */
@media print {
  .site-header, .sidebar, .composer-wrap, .btn-menu-sidebar, .chip-baris, #toast, .modal { display: none !important; }
  .app-layout { position: static; display: block; }
  .chat-box { overflow: visible; }
  body { overflow: visible; background: #fff; color: #111; }
}

/* ---------- AKSESIBILITAS: kurangi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .chat-box { scroll-behavior: auto; }
}

/* ---------- MOBILE PWA: safe-area ---------- */
@supports (padding: env(safe-area-inset-bottom)) {
  .composer-wrap { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .site-header { padding-top: env(safe-area-inset-top); }
}