/* =========================================================
   ALUMINIUM SUBANG — responsive.css
   Breakpoint: 1024px (tablet landscape), 768px (tablet), 480px (mobile)
   ========================================================= */

/* ---------- Tablet landscape ---------- */
@media (max-width: 1024px) {
  .menu { gap: 1.4rem; }
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "a a"
      "b c"
      "d e"
      "f f";
  }
  .card--a { min-height: 420px; }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 3.5rem; }
  .timeline::before, .timeline::after { display: none; }
  .step::before { display: none; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .shot--p, .shot--l { aspect-ratio: 4 / 5; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Tablet / mobile: menu hamburger ---------- */
@media (max-width: 768px) {
  .menu { display: none; }
  .burger { display: block; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: 0; padding-left: 0; border-top: 1px solid rgba(0,0,0,.15); padding-block: 1.6rem; }
  .stat:nth-child(-n+2) { border-top: 0; }
  .split { grid-template-columns: 1fr; }
  .split__img { margin-right: 1.5rem; }
  .quotes { grid-template-columns: 1fr; }
  .hero__shade { background: linear-gradient(0deg, var(--bg-dark) 5%, rgba(10,10,10,.65) 60%); }
  .footer__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .map { height: 260px; }
}

/* ---------- Mobile kecil (360px) ---------- */
@media (max-width: 480px) {
  .navbar__actions .btn span { display: none; }  /* tombol WA jadi ikon saja */
  .navbar__actions .btn { padding: .6rem; }
  .bento {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d" "e" "f";
    grid-auto-rows: auto;
  }
  .card, .card--a, .card--f { min-height: 300px; }
  .timeline { grid-template-columns: 1fr; padding-left: 1.5rem; border-left: 2px solid #2a2a2a; padding-top: 0; }
  .step::before { display: block; top: .6rem; left: -1.5rem; margin-left: -6px; margin-top: 0; }
  .gallery { grid-template-columns: 1fr; }
  .shot--l { aspect-ratio: 4 / 3; }
  .shot span { opacity: 1; transform: none; }  /* tidak ada hover di layar sentuh */
  .hero__cta .btn { flex: 1 1 100%; }
  .wa-float { width: 54px; height: 54px; }
}