/* Tablet */
@media (min-width: 640px) {
  .page { padding-left: 28px; padding-right: 28px; }
  .banners, .hscroll { margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; scroll-padding: 0 28px; }
  .card { flex-basis: 164px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .banner { flex-basis: 70%; }
}

/* Desktop: navigasi menjadi sidebar kiri */
@media (min-width: 1024px) {
  .app { max-width: none; margin: 0; padding-left: 232px; }
  #view { max-width: 980px; margin: 0 auto; }
  .page, body.has-mini .page { padding: 28px 40px 130px; }
  .banners, .hscroll { margin-left: -40px; margin-right: -40px; padding-left: 40px; padding-right: 40px; scroll-padding: 0 40px; }
  .grid { grid-template-columns: repeat(4, 1fr); }
  .nav {
    left: 16px; top: 16px; bottom: 16px; right: auto; width: 200px; max-width: none; margin: 0; height: auto;
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 4px; padding: 20px 12px; border-radius: 24px;
  }
  .nav-logo { display: block; font-weight: 800; letter-spacing: 0.12em; padding: 4px 14px 20px; font-size: 16px; }
  .nav a { flex-direction: row; gap: 14px; font-size: 15px; padding: 12px 14px; }
  .nav a.on { background: rgba(255, 255, 255, 0.08); }
  .head .logo { display: none; }
  .head { justify-content: flex-end; }
  .mini { left: 248px; right: 16px; bottom: 16px; max-width: none; }
  #toast { bottom: 100px; }
  body.has-mini #toast { bottom: 100px; }
  .full { align-items: center; }
  .cover.xl { width: 260px; }
}