/* Komponen khas halaman detail rumah Griyanava.

   Diekstrak dari <style> inline griyanava-rumah-detail.html 02 Sep 2026: sembilan
   halaman detail memakai komponen yang sama, dan inline berarti satu perbaikan
   harus disalin sembilan kali — kesalahan yang sudah terbukti mahal di prototype
   Anava (chrome halaman hidup 11x dan tiap bug ikut hidup 11x).

   Yang TIDAK ikut pindah: token :root, reset, dan aturan header/nav — semuanya
   sudah ada di griya.css dan salinan keduanya hanya menciptakan dua sumber
   kebenaran. Yang ada di sini murni komponen detail: breadcrumb, baris judul,
   galeri, grid 7/5, spesifikasi, panel ringkasan, kalkulator listing, tabel
   tenor, panduan terkait, pita ajakan, kartu rumah lain.

   Dimuat SESUDAH griya.css supaya komponen detail menang, dan SEBELUM touch.css
   supaya aturan sasaran sentuh 44px tetap paling akhir. */

/* ---------- breadcrumb ---------- */
.breadcrumb{padding:24px 0 12px;font-family:var(--font-mono);font-size:.8125rem;color:var(--muted)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb a{display:inline-flex;align-items:center;min-height:24px;border-bottom:1px solid transparent}
.breadcrumb a:hover{color:var(--ink);border-bottom-color:var(--line)}
.breadcrumb [aria-current="page"]{color:var(--ink)}
.breadcrumb .sep{color:var(--line)}

/* ---------- baris judul ---------- */
.title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.title-left h1{margin-bottom:4px}
.title-area{font-family:var(--font-mono);font-size:.875rem;color:var(--muted)}
.title-right{text-align:right;flex-shrink:0}
.price{font-family:var(--font-mono);font-size:1.375rem;font-weight:500;color:var(--ink);white-space:nowrap}
.price-monthly{font-family:var(--font-mono);font-size:.875rem;color:var(--muted);white-space:nowrap;margin-top:2px}
.badge{display:inline-flex;align-items:center;min-height:24px;margin-top:8px;padding:2px 10px;border:1px solid var(--accent);border-radius:var(--radius);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--paper)}

/* ---------- galeri ---------- */
.gallery{padding:32px 0 0}
.lead-image{aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line)}
.gallery-caption{font-family:var(--font-mono);font-size:.75rem;color:var(--muted);margin-top:8px}
.thumb-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}
.thumbs{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;flex:1;min-width:0}
.thumb-btn{display:block;width:100%;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);border:2px solid transparent;background:var(--paper);cursor:pointer;padding:0;transition:opacity .15s ease,border-color .15s ease}
.thumb-btn:hover{opacity:.85}
.thumb-btn.active{border-color:var(--accent)}
.gallery-count{font-family:var(--font-mono);font-size:.8125rem;color:var(--muted);white-space:nowrap;flex-shrink:0}

/* ---------- grid utama 7/5 ---------- */
.detail-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;padding:48px 0}
.block{margin-bottom:32px}
.block:last-child{margin-bottom:0}
.block-head{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}

/* tabel spesifikasi: baris 40px (Anava 48px), nilai mono */
.spec-list{border-top:1px solid var(--line)}
.spec-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;border-bottom:1px solid var(--line);padding:4px 0}
.spec-row dt{font-family:var(--font-body);font-size:.9375rem;font-weight:500;color:var(--ink)}
.spec-row dd{font-family:var(--font-mono);font-size:.9375rem;color:var(--ink);text-align:right}

/* catatan turunan (legal, pembiayaan): paper di atas paper-warm, hairline */
.derived-note{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.derived-note p{font-size:.9375rem}
.derived-note a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* WCAG 2.5.8 berlaku untuk SEMUA alat tunjuk, bukan hanya jari. Tautan "Baca:"
   berdiri sendiri di paragrafnya sendiri, jadi dia sasaran penuh — tinggi 20px itu
   pelanggaran juga dengan mouse. Lantai 24px dipasang di aturan dasar; lantai 44px
   untuk pointer:coarse tetap di blok media di bawah. */
.derived-note p>a{display:inline-flex;align-items:center;min-height:24px}
.prose{max-width:64ch}
.prose p{font-size:1rem}
.fact-bullets{list-style:none;margin-top:16px}
.fact-bullets li{position:relative;padding-left:16px;font-size:.9375rem;margin-bottom:6px}
.fact-bullets li::before{content:"·";position:absolute;left:0;color:var(--muted)}

/* panel ringkasan cicilan, sticky, hilang di bawah 900px */
.aside-col{position:sticky;top:96px;align-self:start}
.summary-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:20px}
.summary-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:34px;border-bottom:1px solid var(--line)}
.summary-row:last-of-type{border-bottom:none}
.summary-label{font-family:var(--font-mono);font-size:.75rem;color:var(--muted)}
.summary-value{font-family:var(--font-mono);font-size:.9375rem;font-weight:500;color:var(--ink)}
.summary-row.final .summary-value{font-size:1.125rem;color:var(--accent)}
.summary-jump{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-mono);font-size:.75rem;color:var(--accent);border-top:1px solid var(--line);width:100%;margin-top:8px;text-decoration:underline;text-underline-offset:3px}
.cta-stack{display:flex;flex-direction:column;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--radius);font-family:var(--font-body);font-size:.9375rem;font-weight:500;cursor:pointer;border:1px solid transparent;transition:opacity .15s ease,background .15s ease,color .15s ease}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{opacity:.9}
.btn-secondary{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--paper)}
.cta-note{font-family:var(--font-mono);font-size:.75rem;color:var(--muted);margin-top:12px}

/* ---------- lokasi ---------- */
.location-section{padding:0 0 48px}
.location-text{max-width:64ch;font-size:.9375rem}
/* ---------- pita Kalkulator KPR: paper di atas paper-warm, lebar penuh ---------- */
/* Pita, bukan kotak: .kpr-band di griya.css adalah panel berbingkai untuk
   beranda/daftar. Di halaman detail dia selebar section, jadi bingkai, radius,
   dan latar warm-nya dicabut eksplisit — bukan sekadar ditimpa sebagian. */
.kpr-band{padding:72px 0;background:none;border:0;border-top:1px solid var(--line);border-radius:0}
.kpr-inner{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.kpr-heading{margin-bottom:8px}
.kpr-subhead{font-size:.9375rem;color:var(--muted);max-width:64ch;margin-bottom:24px}
.kpr-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.kpr-controls{display:flex;flex-direction:column;gap:20px}
.kpr-group{display:flex;flex-direction:column}
.kpr-label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.kpr-dp-wrapper{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.kpr-dp-rp{flex:1;min-width:0}
.kpr-dp-or{font-family:var(--font-body);font-size:.875rem;color:var(--muted);white-space:nowrap;flex-shrink:0}
.kpr-dp-pct{width:96px;flex-shrink:0}
/* 16px di mobile supaya iOS tidak zoom saat fokus (addendum §6.1). */
.kpr-input{width:100%;height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--font-mono);font-size:1rem;font-weight:500;text-align:right;color:var(--ink);background:var(--paper)}
.kpr-input:focus{outline:none;border-color:var(--accent)}
.kpr-slider-wrap{display:flex;align-items:center;height:44px}
.kpr-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:var(--line);border-radius:2px;outline:none;cursor:pointer}
.kpr-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--paper);border:1px solid var(--accent);cursor:pointer;transition:transform .15s ease}
.kpr-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}
.kpr-slider::-webkit-slider-thumb:active{transform:scale(.95)}
.kpr-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--paper);border:1px solid var(--accent);cursor:pointer;transition:transform .15s ease}
.kpr-slider::-moz-range-track{height:4px;background:var(--line);border:none;border-radius:2px}
.kpr-slider:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* Catatan clamp: satu per kontrol, mono kecil, --warn, hilang saat kosong. */
.kpr-clamp-note{font-family:var(--font-mono);font-size:.6875rem;line-height:1.5;color:var(--warn);margin-top:6px}

/* Ledger memakai CONTAINER query, bukan viewport: lebarnya fungsi dari kotaknya
   sendiri (addendum §4.8). Nilai nowrap — angka rupiah tidak pernah dipotong
   dua baris, jadi baris yang menyusun ulang dirinya adalah satu-satunya jalan. */
.kpr-ledger{container-type:inline-size;container-name:ledger;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-warm);overflow:hidden}
.kpr-ledger-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:16px;min-height:34px;padding:4px 16px;border-bottom:1px solid var(--line)}
.kpr-ledger-row:last-child{border-bottom:none}
.kpr-ledger-row.final{min-height:48px;border-top:1px solid var(--ink);border-bottom:none}
.kpr-ledger-label{font-family:var(--font-mono);font-size:.75rem;color:var(--muted)}
.kpr-ledger-value{font-family:var(--font-mono);font-size:.9375rem;font-weight:500;color:var(--ink);white-space:nowrap}
.kpr-ledger-row.final .kpr-ledger-value{font-size:1.375rem;color:var(--accent)}
/* Suku bunga: satu-satunya kontrol di dalam ledger, karena dia parameter bank
   dan bukan pilihan pembeli. Dipisah dari style inline supaya lantai jari 44px
   bisa mengalahkannya dari @media(pointer:coarse) tanpa !important. */
.kpr-rate-wrap{display:flex;align-items:baseline;gap:4px}
.kpr-rate-input{width:56px;height:28px;padding:2px 6px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--font-mono);font-size:.9375rem;font-weight:500;text-align:right;color:var(--ink);background:var(--paper)}
.kpr-rate-input:focus{outline:none;border-color:var(--accent)}
@container ledger (max-width:320px){
  .kpr-ledger-row{flex-direction:column;align-items:flex-start;row-gap:2px;padding:8px 16px}
}
@container ledger (max-width:256px){
  .kpr-ledger-row{padding-left:8px;padding-right:8px}
}
@media(prefers-reduced-motion:no-preference){
  .kpr-ledger-value{animation:kpr-update 200ms ease-out}
}
@keyframes kpr-update{from{opacity:.6;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Perbandingan tenor: viewport query 1024px, bukan container — tabelnya butuh
   kolom kedua yang nyata di halaman, bukan di kotaknya. Nilainya SELALU
   dihitung; yang digerbang hanya tampilannya (audit prototipe #5). */
.kpr-tenor-compare{display:none}
.kpr-tenor-list{list-style:none;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.kpr-tenor-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:8px 16px;background:var(--paper);border:none;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;transition:background .15s ease}
.kpr-tenor-list li:last-child .kpr-tenor-row{border-bottom:none}
.kpr-tenor-row:hover{background:var(--paper-warm)}
.kpr-tenor-row[aria-pressed="true"]{background:var(--accent)}
.kpr-tenor-label{font-family:var(--font-mono);font-size:.875rem;color:var(--muted)}
.kpr-tenor-value{font-family:var(--font-mono);font-size:.9375rem;font-weight:500;color:var(--ink)}
.kpr-tenor-row[aria-pressed="true"] .kpr-tenor-label,
.kpr-tenor-row[aria-pressed="true"] .kpr-tenor-value{color:#fff}
@media(min-width:1024px){.kpr-tenor-compare{display:block;margin-top:24px}}

.kpr-disclaimer{margin-top:24px;font-size:.875rem;line-height:1.6;color:var(--muted);max-width:64ch}
.kpr-disclaimer a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.kpr-wa-cta{margin-top:20px}
.kpr-wa-btn{width:100%}
@media(min-width:1024px){.kpr-wa-btn{width:auto;min-width:240px}}

/* ---------- panduan terkait ---------- */
.guides-section{padding:0 0 48px}
.guide-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:12px 0;border-bottom:1px solid var(--line)}
.guide-row:first-of-type{border-top:1px solid var(--line)}
.guide-row:hover .guide-title{text-decoration:underline;text-underline-offset:3px}
.guide-title{font-size:1rem;font-weight:500}
.guide-meta{font-family:var(--font-mono);font-size:.8125rem;color:var(--muted);white-space:nowrap}

/* ---------- pita ajakan ---------- */
.cta-band{padding:48px 0;border-top:1px solid var(--line)}
.cta-band-inner{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band h2{margin-bottom:4px}
.cta-band-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- rumah lain ---------- */
.related-section{padding:0 0 72px}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card-price{font-family:var(--font-mono);font-size:1.125rem;font-weight:500;margin-bottom:8px}
.card-monthly{font-family:var(--font-mono);font-size:.875rem;color:var(--accent);margin-bottom:8px}
.card-specs{font-family:var(--font-mono);font-size:.875rem;color:var(--muted);margin-bottom:12px}

/* ---------- footer ---------- */
.footer .descriptor{font-size:.8125rem;margin-top:4px}
.footer-disclosure{border-top:1px solid rgba(255,255,255,.14);padding:20px 0;font-family:var(--font-mono);font-size:.75rem;line-height:1.6;color:rgba(255,255,255,.6)}

.footer 
.footer 
.footer 
.footer 

/* ---------- responsif ---------- */
@media(max-width:1099px){
  .thumbs{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:900px){
  .main-nav{display:none}
  .header-wrap{position:relative}
  .menu-toggle{display:inline-flex}
  .wa-btn{width:44px;padding:0;gap:0;justify-content:center}
  .wa-btn .wa-label{display:none}
  .mobile-menu{display:block;position:absolute;right:24px;top:calc(100% + 8px);width:min(320px,calc(100vw - 48px));background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:8px 20px 20px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
  .site-header.menu-open .mobile-menu{opacity:1;transform:none;pointer-events:auto}
  .mobile-menu>a:not(.wa-btn){display:block;text-align:right;font-family:var(--font-display);font-size:1.25rem;font-weight:500;padding:12px 0;border-bottom:1px solid var(--line)}
  .mobile-menu>a:not(.wa-btn):first-child{border-top:1px solid var(--line)}
  .mobile-menu .wa-btn{width:100%;justify-content:center;margin-top:16px;padding:0 20px;gap:8px}
  .mobile-menu .wa-btn .wa-label{display:inline}
  

  /* Tuas 2: padding section -25% di mobile (64px -> 48px) */
  .kpr-band{padding:48px 0}
  .kpr-inner{padding:20px}
  .kpr-cols{grid-template-columns:1fr;gap:24px}
  .kpr-dp-wrapper{flex-direction:column;align-items:stretch;gap:8px}
  .kpr-dp-or{text-align:center}
  .kpr-dp-pct{width:100%}
  .kpr-input{font-size:1rem}

  /* Tuas 4: foto 4:3 di mobile */
  .lead-image{aspect-ratio:4/3}
  /* .thumb-row jadi kolom di sini, dan di flex kolom `flex:1` mengatur TINGGI,
     bukan lebar — dengan align-items:flex-start lebar strip menyusut ke lebar
     isinya (6 × 40vw) dan overflow-x:auto miliknya tidak pernah kena. width:100%
     mengembalikan kotak pembatasnya, jadi strip yang menggeser, bukan halaman. */
  .thumbs{display:flex;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px}
  .thumbs li{flex:0 0 40vw;scroll-snap-align:start}
  .thumb-row{flex-direction:column;align-items:stretch;gap:8px}

  /* Grid 7/5 jadi satu kolom. Urutan sumber diatur ulang: spesifikasi ->
     catatan legal -> pasangan CTA -> deskripsi -> lokasi. CTA sengaja diangkat
     ke atas prosa panjang (addendum §3.4 "di bawah 900px"). */
  .detail-grid{grid-template-columns:1fr;gap:32px;padding:32px 0}
  .aside-col{position:static;display:contents}
  /* RINGKASAN CICILAN dihilangkan di bawah 900px: pita penuh sudah cukup dekat,
     dua angka bulanan dalam satu scroll jadi mubazir. */
  .summary-panel{display:none}
  .main-col{display:contents}
  .block-spec{order:1}
  .block-legal{order:2}
  .cta-stack{order:3}
  .block-about{order:4}

  /* Baris panduan: judul + meta mono sejajar tidak muat di 360px, dan meta-nya
     nowrap (tanggal/menit baca tidak boleh terpotong dua baris), jadi barisnya
     yang menyusun ulang diri — bukan halaman yang melebar. */
  .guide-row{flex-direction:column;align-items:flex-start;gap:2px}

  .cta-band{padding:32px 0}
  .cta-band-inner{padding:20px;flex-direction:column;align-items:stretch}
  .cta-band-actions{flex-direction:column}
  .related-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  
}
@media(max-width:600px){
  .title-row{flex-direction:column;gap:12px}
  .title-right{text-align:left}
  .price{font-size:1.25rem}
  .footer-grid{grid-template-columns:1fr}
}
@media(pointer:coarse){
  .kpr-slider::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px}
  .kpr-slider::-moz-range-thumb{width:24px;height:24px}
  .thumb-btn{min-height:44px}
  /* Lantai 44px yang tidak dijangkau touch.css karena kelasnya khas halaman ini.
     Label pemilih bagian, jejak navigasi, dan tautan "Baca:" yang berdiri
     sendiri di paragrafnya sendiri semuanya sasaran jari. Yang TETAP dikecualikan
     hanya tautan di TENGAH kalimat (#kprDisclaimerWa) — pengecualian "Inline"
     WCAG 2.5.8: membesarkannya merusak alur paragraf. */
  
  .derived-note p>a{display:inline-flex;align-items:center;min-height:44px}
  /* Jejak navigasi: tautannya sasaran jari penuh. min-height sendiri tidak cukup
     karena <li> induknya flex — lebarnya ikut isi teks, dan "Rumah" hanya 39px.
     padding horizontal yang menaikkannya melewati 44px di kedua sisi. */
  .breadcrumb a{min-height:44px;padding:0 6px;margin:0 -6px}
  /* Suku bunga: field kecil di dalam baris ledger. Tingginya dinaikkan ke
     lantai jari; baris ledger ikut tumbuh, dan itu memang yang diinginkan. */
  #kprRateInput{height:44px;min-width:64px}
}
@media(prefers-reduced-motion:reduce){
  .kpr-slider::-webkit-slider-thumb,.kpr-slider::-moz-range-thumb{transition:none}
  .card-media img{transition:none}
}