/* Anava — ukuran sasaran sentuh.
   Dipisah dari <style> tiap halaman karena masalahnya identik di 13 file:
   memperbaiki di satu tempat lebih baik daripada menyalin 13 kali. Di-link
   SETELAH <style> inline supaya menang pada spesifisitas yang seri.

   Dua tingkat, sengaja:

   1. SEMUA perangkat → minimum 24×24px. Ini WCAG 2.5.8 (AA), wajib.
   2. @media (pointer: coarse) → 44×44px. Ini yang dipakai jari.

   Kenapa `pointer: coarse` dan bukan lebar layar: yang menentukan butuh
   sasaran besar itu ALAT TUNJUKNYA, bukun lebar viewport. Jendela desktop
   selebar 390px tetap dipakai dengan mouse presisi 1px — tidak perlu tombol
   gemuk. Sebaliknya tablet 1024px dipakai dengan jempol dan sangat perlu.
   Media query lebar akan salah di dua-duanya.

   Angka 44px bukan karangan: itu minimum Apple HIG dan WCAG 2.5.5 (AAA).
   Android/Material menyebut 48dp. 44 diambil sebagai lantai yang aman.

   YANG SENGAJA TIDAK DIBESARKAN — link di tengah kalimat. WCAG 2.5.8 punya
   pengecualian eksplisit "Inline": sasaran yang berada di dalam kalimat atau
   yang ukurannya dibatasi line-height teks sekitarnya. Membesarkannya berarti
   merusak alur paragraf, dan orang membaca kalimat itu dulu sebelum menekan,
   jadi salah-tap-nya jauh lebih kecil. Honeypot form juga dikecualikan: dia
   memang bukan sasaran manusia. */

/* ---------- tingkat 1: 24px untuk semua ---------- */

/* Link daftar (footer, jalan keluar 404, sidebar guides). inline-flex +
   min-height menaikkan area tekan tanpa mengubah ukuran huruf. */
.footer li a,
.notfound-list a,
.topic-list li a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Link teks berdiri sendiri (bukan di dalam kalimat) yang tadinya 23px. */
.area-map-link,
.channel-link,
.text-link {
  min-height: 24px;
}

/* ---------- tingkat 2: 44px kalau yang menunjuk itu jari ---------- */
@media (pointer: coarse) {

  /* Footer: margin antar item dihapus karena tinggi 44px sudah memberi
     jarak sendiri. Tanpa ini footer tumbuh 24px per link tanpa guna. */
  .footer li {
    margin-bottom: 0;
  }
  /* min-width ikut dinaikkan: label pendek seperti "FAQ" atau "Email" cuma
     30px lebar, jadi lolos tinggi tapi jatuh di lebar. Ini daftar vertikal,
     jadi melebarkan area tekan tidak menggeser apa pun. */
  .footer li a,
  .notfound-list a,
  .topic-list li a {
    min-height: 44px;
    min-width: 44px;
  }

  /* Chrome halaman */
  .brand,
  .nav-links a,
  .menu-toggle,
  .mobile-menu a {
    min-height: 44px;
  }
  .nav-links a,
  .mobile-menu a {
    display: inline-flex;
    align-items: center;
  }

  /* Kontrol: filter, chip topik, FAQ, tombol kirim */
  .filter-btn,
  .topic-chip,
  .submit-btn,
  summary {
    min-height: 44px;
  }
  .filter-btn,
  .topic-chip {
    display: inline-flex;
    align-items: center;
    padding-block: 0;
  }

  /* Field form. :not(.hp-field input) tidak dipakai karena honeypot memang
     sudah di luar layar; yang penting jangan sampai ikut membesar dan
     merusak posisinya, jadi dikecualikan lewat selector induk. */
  .field input,
  .field textarea,
  .field select,
  .kpr-input {
    min-height: 44px;
  }
  .hp-field input {
    min-height: 0;
  }

  /* Input suku bunga KPR punya `height:28px` sebagai style INLINE di 4 file.
     Tidak perlu !important: `min-height` dan `height` itu properti berbeda,
     dan min-height selalu menang atas height yang lebih kecil — jadi aturan
     ini mengalahkan inline style tanpa perang spesifisitas. Yang benar
     sebetulnya memindahkan style inline itu ke class (tiga implementasi
     kalkulator KPR yang berbeda masih menunggu disatukan), tapi ini bukan
     tempatnya. */
  .kpr-rate-wrap input {
    min-height: 44px;
  }

  /* Link berdiri sendiri */
  .area-map-link,
  .channel-link,
  .text-link,
  .crumb a,
  .breadcrumb a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---------- perpindahan antar halaman ---------- */
/*
   Static multi-page navigation swaps the whole document. A browser can paint
   its white canvas between those two documents even when the old page has a
   fade animation, which is the blink seen in the prototype. A fixed paper
   curtain removes that gap completely:

   1. the current page stays visible while the curtain fades in;
   2. navigation happens behind the opaque curtain;
   3. the new document fades the curtain out after its HTML and script exist.

   This is deliberately a real overlay, not a transparent root snapshot. It
   works in browsers with and without View Transitions support and keeps the
   handoff visually identical on a static host and on the future Next.js app.
*/
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: var(--paper, #ffffff);
  pointer-events: none;
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 520ms cubic-bezier(.76,0,.24,1);
  animation: anava-initial-wipe 900ms cubic-bezier(.76,0,.24,1) forwards;
  will-change: transform;
}

/* No-JS fallback. The page must eventually become visible even if the script
   is blocked or fails before it can add `anava-ready`; otherwise a purely
   decorative transition becomes a blank page for assistive or restricted
   environments. */
@keyframes anava-initial-wipe {
  from { transform: scaleX(1); transform-origin: right center; }
  to { transform: scaleX(0); transform-origin: right center; }
}

/* New page: paper curtain shrinks toward the right edge, revealing the page
   from left to right. This reads as an intentional editorial wipe. */
html.anava-ready::before {
  transform: scaleX(0);
  transform-origin: right center;
  animation: none;
}

/* Old page: at scaleX(0), switching the origin is invisible. The curtain then
   grows from the left edge until the viewport is fully covered. */
html.anava-leaving::before {
  transform: scaleX(1);
  transform-origin: left center;
  animation: none;
  transition-duration: 380ms;
}

@media (prefers-reduced-motion: reduce) {
  html::before,
  html.anava-ready::before,
  html.anava-leaving::before {
    transition: none;
  }
}

/* ---------- slider KPR: bug hit area, bukan sekadar ukuran ---------- */
/* `input[type=range]` di sini tinggi 4px. Thumb-nya TERLIHAT 20px, tapi
   hit-testing dibatasi kotak input — jadi area yang benar-benar bisa
   ditarik cuma 4px, bahkan dengan mouse. Trik-nya: padding menambah
   tinggi kotak (area tekan), `background-clip: content-box` menahan
   supaya track abu-abu tetap tercetak 4px saja. Tampilan tidak berubah,
   yang berubah cuma seberapa mudah dipegang. */
.kpr-slider {
  padding-block: 10px;
  background-clip: content-box;
  box-sizing: content-box;
}
@media (pointer: coarse) {
  .kpr-slider {
    padding-block: 20px;
  }
}

/* ---------- skip-link ---------- */
/* Sebelum 2026-08-28 tidak ada satu pun di 12 halaman: pengguna keyboard harus
   menekan Tab melewati seluruh header + nav di SETIAP halaman sebelum sampai ke
   isi. Itu kegagalan WCAG 2.4.1 (Bypass Blocks) level A, bukan penyempurnaan.

   Disembunyikan lewat posisi, BUKAN display:none atau visibility:hidden —
   dua properti itu mengeluarkan elemen dari urutan Tab, jadi skip-link-nya
   tidak akan pernah bisa difokuskan dan gunanya hilang sama sekali.

   Dia elemen pertama di <body>, jadi Tab pertama di halaman mana pun selalu
   mendarat di sini. z-index tinggi karena header-nya sticky dan pita notice
   berada di atasnya. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background: var(--ink, #111111);
  color: var(--paper, #ffffff);
  border-radius: var(--radius, 2px);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 16px;
}

/* ---------- focus ring ---------- */
/* :focus-visible, bukan :focus — klik mouse tidak meninggalkan ring yang bikin
   desain kelihatan rusak, tapi pengguna keyboard tetap tahu posisinya.

   Perlu ditulis global karena CSS tiap halaman memakai `outline:none` di
   beberapa komponen (mis. .kpr-input, .field input) dan ring bawaan browser
   ikut hilang di sana. Yang punya ring sendiri sebelum ini cuma .kpr-slider,
   .thumb-btn, dan .form-success — nav, kartu listing, chip topik, tombol
   filter, dan tautan footer tidak punya. WCAG 2.4.7.

   `outline` dipilih, bukan box-shadow: outline tidak ikut dipotong
   `overflow:hidden` pada kartu dan tidak menggeser layout. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #1e4d3b);
  outline-offset: 2px;
  border-radius: var(--radius, 2px);
}

/* Kartu listing dan baris guide adalah <a> pembungkus gambar. offset positif
   menaruh ring di luar gambar, jadi tidak tertimpa foto. */
.listing-card:focus-visible,
.guide-row:focus-visible,
.guide-featured:focus-visible {
  outline-offset: 3px;
}

/* Honeypot tidak boleh pernah menampilkan ring: dia bukan sasaran manusia,
   dan ring yang muncul di luar layar bisa menggeser scroll. */
.hp-field input:focus-visible {
  outline: none;
}