/* spasi.css — memperkecil jarak vertikal yang terlalu jauh.
   Hanya mengatur padding/margin/gap. Tidak menyentuh struktur, warna, atau ukuran teks. */

/* ===== Desktop: section 40px → 28px ===== */
.py-space-xl { padding-top: 28px !important; padding-bottom: 28px !important; }
.pt-space-xl { padding-top: 28px !important; }
.pb-space-xl { padding-bottom: 28px !important; }
.mt-space-xl { margin-top: 24px !important; }
.mb-space-xl { margin-bottom: 24px !important; }

/* ===== Jarak antar-blok ===== */
.gap-space-xl { gap: 24px !important; }
.gap-space-lg { gap: 20px !important; }
/* gap-space-md dibiarkan 16px: kalau dikecilkan, baris kartu produk jadi menempel */

/* hero: 48px → 36px */
main .p-8.lg\:p-12 { padding: 36px !important; }

/* footer */
footer .py-space-xl { padding-top: 28px !important; padding-bottom: 20px !important; }

/* ===== Mobile: lebih rapat lagi ===== */
@media (max-width: 640px) {
  .py-space-xl, main section.py-space-xl, footer .py-space-xl { padding-top: 18px !important; padding-bottom: 18px !important; }
  .pt-space-xl { padding-top: 18px !important; }
  .pb-space-xl { padding-bottom: 18px !important; }
  .mt-space-xl { margin-top: 16px !important; }
  .mb-space-xl { margin-bottom: 16px !important; }
  .gap-space-xl { gap: 16px !important; }
  .gap-space-lg { gap: 12px !important; }
  /* gap-space-md tetap */
  main .p-8.lg\:p-12 { padding: 20px !important; }
  /* jarak antar-section yang menumpuk tidak perlu dobel */
  main > div > section + section { margin-top: 0 !important; }
}

/* ===== Ruang aman bawah: navigator HP (60px) + jarak ===== */
@media (max-width: 640px) {
  main { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
  /* badge "Bantuan Pembeli": jarak antar-panel diatur di blok bawah (semua lebar) */
}

/* ===== Blok "trust badge" (Dikirim via Email / Hubungi CS) ===== */
main section.bg-surface-container-lowest.rounded-xl { padding: 16px !important; }
main section.rounded-xl > .grid { row-gap: 14px !important; column-gap: 14px !important; }
main section.rounded-xl .w-12.h-12 { width: 42px !important; height: 42px !important; }

/* ===== Footer dipadatkan ===== */
footer { margin-top: 16px !important; }
footer .pt-space-xl { padding-top: 22px !important; }
footer .pb-space-xl { padding-bottom: 12px !important; }
footer .gap-space-lg { gap: 14px !important; }
footer ul.gap-2 { gap: 6px !important; }

@media (max-width: 640px) {
  main section.bg-surface-container-lowest.rounded-xl { padding: 12px !important; }
  main section.rounded-xl .w-12.h-12 { width: 38px !important; height: 38px !important; }
  footer { margin-top: 12px !important; }
  footer .pt-space-xl { padding-top: 18px !important; }
  footer .gap-space-lg { gap: 10px !important; }
}

/* ===== Hilangkan ruang kosong besar sebelum footer di halaman pendek =====
   Sebelumnya main dipaksa setinggi layar (min-h-screen) sehingga footer
   terdorong ke dasar dan menyisakan 200–250px kosong di halaman Lacak/Masuk. */
main.min-h-screen { min-height: 0 !important; }

/* Ruang aman navigator dipindah dari main ke footer,
   supaya tidak muncul celah kosong antara konten dan footer. */
@media (max-width: 640px) {
  main { padding-bottom: 0 !important; }
  footer { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
}

/* Badge "Bantuan Pembeli" tidak lagi menimpa kartu mockup (semua lebar) */
main .-mt-6 { margin-top: 12px !important; margin-left: 0 !important; }

/* Kategori dihapus (Okt 2026): katalog langsung di bawah hero.
   Margin pengganti agar tidak menempel. */
main #katalog-produk { margin-top: 16px !important; }
@media (max-width: 640px) {
  main #katalog-produk { margin-top: 12px !important; }
}

/* ===== Opsi A: kecilkan mockup kanan di 1024–1440 (modul MODUL-HERO-SEIMBANG) =====
   Lapis 1: zoom 0.85 pada kartu mockup (ikut mengecilkan ruang, bukan sekadar visual).
   Lapis 2 (dasar/fallback): rapatkan padding dalam bila zoom tak didukung.
   HP/tablet (<1024) tidak berubah. */
@media (min-width: 1024px) and (max-width: 1440px) {
  main section:first-child .lg\:col-span-5 > div:first-child { zoom: 0.85; }
  main section:first-child .lg\:col-span-5 .p-6 { padding: 1rem !important; }
  main section:first-child .lg\:col-span-5 .p-4 { padding: 0.75rem !important; }
  main section:first-child .lg\:col-span-5 .p-3 { padding: 0.625rem !important; }
  main section:first-child .lg\:col-span-5 .pt-2 { padding-top: 0.25rem !important; }
}