/* ==========================================================================
   responsive.css — Adaptive overrides (tablet / mobile / motion)
   Dimuat SETELAH styles.css. Tata letak desktop/base ada di styles.css;
   semua yang spesifik ukuran-layar atau preferensi ada di sini agar rapi
   dan mode desktop vs mobile tidak saling mengganggu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤900px — grid tablet
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .foot-cols { grid-template-columns: 1fr 1fr; }   /* tablet: 2 x 2 */
}

/* --------------------------------------------------------------------------
   ≤720px — MOBILE: header hamburger + layout menumpuk
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Header: brand (kiri) · tombol ikon WhatsApp · hamburger (kanan).
     Header dibuat solid & container relatif agar panel menu menempel
     tepat di bawah header. */
  .site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header .container { position: relative; gap: 0.5rem; }
  .brand__mark { width: 24px; height: 24px; }
  .brand__name { font-size: 0.92rem; font-variation-settings: "wdth" 100; }
  .nav { display: contents; }
  .brand { order: 0; min-width: 0; }
  .nav__cta { order: 1; margin-left: auto; flex: none; font-size: 0; gap: 0; padding: 8px; }
  .nav__cta .wa-ico { width: 20px; height: 20px; }
  .nav-burger { display: inline-flex; order: 2; flex: none; }

  /* Overlay gelap di belakang drawer — klik untuk menutup (label → checkbox). */
  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(9, 26, 18, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    cursor: pointer;
  }
  .nav-toggle:checked ~ .nav-overlay { opacity: 1; visibility: visible; }

  /* Drawer geser dari kanan (gaya centralcats.id) — panel hijau, slide .35s. */
  .nav__links {
    order: 3;
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    width: min(74vw, 300px);
    z-index: 46;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--green-deep);
    padding: 1.4rem 1.35rem 2rem;
    box-shadow: -14px 0 36px rgba(0, 0, 0, .3);
    transform: translateX(100%);
    transition: transform .35s ease;
    overflow-y: auto;
  }
  .nav-toggle:checked ~ .nav .nav__links { transform: translateX(0); }
  .nav__link {
    display: block;
    color: #EAF6EE;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.9rem 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .nav__link:hover { color: var(--green-light); }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--green-light); }

  .prod { grid-template-columns: 1fr; }
  .prod--reverse .prod__media { order: -1; position: static; }   /* gambar tetap di atas saat menumpuk */
  /* batalkan trik absolute desktop → foto & bukti kembali mengalir normal saat 1 kolom */
  .prod--reverse { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
  .prod--reverse .prod__img { position: static; inset: auto; height: clamp(300px, 42vw, 420px); }
  .prod--reverse .prod__proof { position: static; }

  /* Judul yang dipaksa satu baris di desktop → boleh wrap lagi agar tak overflow di mobile */
  .sec-head h2.h2-nowrap-lg { white-space: normal; }
}

/* --------------------------------------------------------------------------
   ≤560px — kartu satu kolom
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .grid--2 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  /* Banner judul (produk/tentang/kontak): min-height lebih tinggi karena lead
     wrap lebih banyak di layar sempit — beri ruang agar ketiganya tetap seragam. */
  .hero--banner { min-height: 380px; }
}

/* --------------------------------------------------------------------------
   ≤360px — layar sangat kecil
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  :root { --space: 3rem; }
  .brand__name { font-size: 0.86rem; }
  .btn { font-size: 0.92rem; padding: 0.8em 1.15em; }
  .nav__cta { padding: 7px; }
}

/* --------------------------------------------------------------------------
   Preferensi gerak
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover, .pcard:hover, .feature:hover,
  .pcard:hover .pcard__img, .step:hover .step__n { transform: none; }
  /* Cahaya berjalan mati total → sisakan siluet skyline statis (background CSS). */
  .hero__skyline { display: none; }
  /* Reveal scroll-in: jangan sembunyikan apa pun → paksa tampil tanpa gerak. */
  .has-js .hero__inner > *,
  .has-js .sec-head,
  .has-js .pcard,
  .has-js .feature,
  .has-js .prod,
  .has-js .step,
  .has-js .card,
  .has-js .map-block,
  .has-js .cta-band .container > * {
    opacity: 1 !important;
    transform: none !important;
  }
}