/* ============================================================
   Jogja Interior — style.css
   Palet & rasa diambil dari Company Profile 2026: kertas ivory
   hangat, tinta hampir-hitam, aksen emas tua. Sengaja TERANG —
   ini kebalikan situs JOGIN yang gelap, supaya dua merek di bawah
   satu payung tidak terlihat seperti satu situs yang dicat ulang.
   Semua warna & ukuran ada di :root. Ubah di sini, seluruh halaman ikut.
   ============================================================ */

/* ---------- Huruf ----------
   Cormorant Garamond dilayani dari server sendiri, bukan dari Google.
   Alasannya dua: (1) hilang dua sambungan ke domain luar — di jaringan
   HP itu kira-kira 0,3 detik yang tidak perlu; (2) tidak ada lagi pihak
   ketiga yang melihat alamat IP setiap pengunjung situs ini.
   Satu berkas untuk semua bobot: berkasnya font variabel, jadi 400,
   500, dan 600 diambil dari sumbu yang sama — bukan tiga unduhan.
   Subset latin saja. Huruf di luar itu jatuh ke serif bawaan sistem. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../font/cormorant-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../font/cormorant-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Warna — sama persis dengan blok :root di company profile */
  --kertas:    #F6F1E4;
  --kertas-2:  #EFE8D6;
  --kertas-3:  #E7DFC9;
  --garis:     #DED4BE;
  --garis-2:   #CDBFA2;
  --aksen:     #96701C;
  /* Varian gelap KHUSUS teks. #96701C sebagai huruf di atas kertas ivory cuma
     mencapai kontras 4,02 — di bawah ambang 4,5. Semua pemakaiannya sebagai
     huruf berukuran kecil (label 11px huruf besar), justru yang paling butuh.
     Emas aslinya tidak diubah supaya isian, garis, dan cincin fokus tetap sama. */
  --aksen-teks: #7D5D17;
  --aksen-2:   #C9A44A;
  --motif:     #B49037;
  --tinta:     #1B1A16;
  --tinta-2:   #4A463C;
  --tinta-3:   #686256;   /* digelapkan dari #7A7365: kontras 3,85 → 4,55 */

  --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r:    10px;
  --r-lg: 16px;
  --gap:  clamp(1.1rem, 2.4vw, 1.9rem);
  --pad:  clamp(1.4rem, 5vw, 3rem);
  --sec:  clamp(4rem, 9vw, 7.5rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Atribut `hidden` di HTML hanya berlaku lewat stylesheet bawaan browser
   (`[hidden] { display: none }`), dan itu KALAH oleh `display` apa pun yang
   kita tulis sendiri. Tanpa baris ini, `.lb` yang ber-atribut hidden tetap
   dibentangkan satu layar penuh di z-index 400 — tak terlihat karena
   opacity 0, tapi menelan SELURUH klik di halaman.
   Ditemukan 6 Agu 2026: seluruh menu dan tombol header jadi mati. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Header lengket setinggi ~72px. Tanpa dua baris ini, judul bagian yang
     dituju jangkar berhenti persis di belakangnya. */
  scroll-padding-top: 88px;
}
section[id], article[id] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr-only:focus {
  position: fixed; top: 12px; left: 12px; width: auto; height: auto;
  clip: auto; padding: .7rem 1.1rem; background: var(--tinta); color: var(--kertas);
  border-radius: var(--r); z-index: 999;
}
:focus-visible { outline: 2px solid var(--aksen); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1240px, 100% - var(--pad) * 2); margin-inline: auto; }
.section { padding-block: var(--sec); }
.section--kertas2 { background: var(--kertas-2); border-block: 1px solid var(--garis); }

/* ---------- Tipografi ---------- */
.h-display {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.5rem, 6.4vw, 5.1rem); line-height: 1.04;
  letter-spacing: -.015em; color: var(--tinta); margin: 0;
}
.h-2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.85rem, 3.7vw, 3rem); line-height: 1.13;
  letter-spacing: -.01em; color: var(--tinta); margin: 0;
}
.h-3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.28;
  color: var(--tinta); margin: 0;
}
.serif-it { font-family: var(--serif); font-style: italic; }
.lead { font-size: clamp(1rem, 1.35vw, 1.14rem); color: var(--tinta-2); margin: 0; }
.eyebrow {
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--aksen-teks); margin: 0 0 1rem; display: flex; align-items: center; gap: .8rem;
  font-weight: 600;
}
.eyebrow::before { content: ""; width: 38px; height: 1px; background: var(--garis-2); flex: none; }
.note { font-size: .82rem; color: var(--tinta-3); line-height: 1.6; margin: 0; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.sec-head { max-width: 60ch; margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem; border-radius: 99px; border: 1px solid var(--tinta);
  background: var(--tinta); color: var(--kertas);
  font-size: .92rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn:hover { background: var(--aksen); border-color: var(--aksen); transform: translateY(-1px); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--ghost { background: transparent; color: var(--tinta); border-color: var(--garis-2); }
.btn--ghost:hover { background: var(--kertas-3); color: var(--tinta); border-color: var(--tinta); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Header ---------- */
.progress { position: fixed; inset: 0 auto auto 0; height: 2px; background: var(--aksen); z-index: 300; width: 0; }

.hdr {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in srgb, var(--kertas) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
@supports (backdrop-filter: blur(10px)) { .hdr { backdrop-filter: blur(10px) saturate(1.1); } }
.hdr.stuck { border-bottom-color: var(--garis); box-shadow: 0 1px 20px rgba(27,26,22,.05); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.brand img { height: clamp(20px, 2.4vw, 26px); width: auto; }
/* Layar 320px (iPhone SE lama) — wordmark 20px memakan 209px dari 288px ruang
   yang ada, jadi logo dan burger nyaris bersenggolan. Turunkan sedikit. */
@media (max-width: 359px) { .brand img { height: 17px; } }
.nav { display: none; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a {
  text-decoration: none; font-size: .9rem; color: var(--tinta-2);
  padding-block: .3rem; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--tinta); border-bottom-color: var(--aksen-2); }
.hdr__cta { display: flex; align-items: center; gap: .6rem; }
.hdr__cta .btn { padding: .62rem 1.15rem; font-size: .85rem; white-space: nowrap; }
.hdr__cta .btn--ghost { display: none; }

/* Di layar sempit tombol ajakan ini dicabut dari header.
   Alasannya bukan malas menata: wordmark ~209px + pil + burger tidak muat di
   337px ruang yang tersedia pada layar 375px, dan yang terjadi dulu adalah
   tulisan pil patah dua baris lalu menindih logo. Ajakannya tidak hilang —
   masih ada tombol WhatsApp mengambang yang selalu terlihat, plus satu lagi
   di dasar menu. Jadi header di HP cukup dua benda: logo dan burger. */
@media (max-width: 519px) { .hdr__cta .btn { display: none; } }

.burger { width: 42px; height: 42px; display: grid; place-content: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 0; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--tinta); transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 940px) {
  .nav { display: flex; }
  .burger { display: none; }
  .hdr__cta .btn--ghost { display: inline-flex; }
}

.menu {
  position: fixed; inset: 0; z-index: 190; background: var(--kertas);
  display: grid; align-content: center; gap: .3rem; padding: var(--pad);
  opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
  transition: opacity .3s, transform .35s var(--ease), visibility .35s;
}
/* visibility juga dimatikan supaya tautan di dalam menu tertutup tidak bisa
   dicapai lewat tombol Tab — pointer-events saja hanya menahan mouse. */
.menu.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
/* HANYA anak langsung. Dulu ditulis `.menu a` — selektor itu ikut mengenai
   tombol WhatsApp di dalam .menu__foot, sehingga warnanya jadi --tinta di atas
   latar --tinta: tulisannya hilang, tombolnya tampak sebagai pil hitam kosong.
   Tanda `>` menahannya di tautan navigasi saja. */
.menu > a {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--serif); font-size: clamp(1.7rem, 8vw, 2.6rem); color: var(--tinta);
  text-decoration: none; padding-block: .5rem; border-bottom: 1px solid var(--garis);
}
.menu > a span { font-family: var(--sans); font-size: .72rem; color: var(--aksen-teks); letter-spacing: .16em; }
.menu__foot { margin-top: 1.6rem; }
.menu__foot .btn { width: 100%; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem); overflow: hidden; }
.hero__motif {
  position: absolute; top: -8%; right: -12%; width: min(620px, 62vw);
  height: auto;   /* tanpa ini atribut height="675" di HTML bikin motifnya gepeng */
  opacity: .11; pointer-events: none; user-select: none;
}
.hero__in { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.4rem); align-items: end; }
.hero__lead { max-width: 54ch; margin-top: 1.6rem; }
.hero__cta { margin-top: 2rem; }
.hero__foto {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--garis);
  aspect-ratio: 2 / 1; background: var(--kertas-3);
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero__ket { margin-top: .7rem; }

@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
  .hero__foto { aspect-ratio: 4 / 5; }
}

/* Tiga janji */
.janji { display: grid; gap: var(--gap); margin-top: clamp(2.6rem, 5vw, 4rem); }
@media (min-width: 760px) { .janji { grid-template-columns: repeat(3, 1fr); } }
.janji__i { border-top: 2px solid var(--tinta); padding-top: 1.1rem; }
.janji__i h2, .janji__i .janji__j { font-family: var(--serif); font-size: 1.28rem; font-weight: 500; color: var(--tinta); margin: 0 0 .45rem; }
.janji__i p { font-size: .92rem; margin: 0; }

/* ---------- Dinding logo klien ---------- */
.klien { padding-block: clamp(2.6rem, 5vw, 4rem); background: var(--kertas-2); border-block: 1px solid var(--garis); }
.klien__label { text-align: center; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 2rem; }
/* Logo bar bergerak. Jalurnya berisi DUA salinan daftar logo; animasi
   menggesernya sejauh tepat -50%, jadi begitu salinan pertama habis,
   salinan kedua sudah duduk di posisi awal — tidak ada sambungan terlihat.
   Lebar tiap logo dikunci karena rasionya jauh berbeda: wordmark memanjang
   (Samsung) di sebelah lambang persegi (Sardjito). Tanpa kotak tetap, yang
   memanjang mendominasi dan yang persegi tenggelam. */
.klien__bar { position: relative; overflow: hidden; }
/* Kedua tepinya dibuat memudar supaya logo tidak terpotong mendadak. */
.klien__bar::before, .klien__bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(28px, 7vw, 90px); z-index: 1;
  pointer-events: none;
}
.klien__bar::before { left: 0;  background: linear-gradient(90deg, var(--kertas-2), transparent); }
.klien__bar::after  { right: 0; background: linear-gradient(270deg, var(--kertas-2), transparent); }

.klien__jalur {
  display: flex; align-items: center; width: max-content;
  animation: jalanLogo 46s linear infinite;
}
.klien__jalur img {
  width: clamp(104px, 12vw, 150px); height: clamp(34px, 4vw, 44px);
  object-fit: contain; flex: none;
  margin-inline: clamp(.9rem, 2.2vw, 1.9rem);
  opacity: .5; filter: grayscale(1); transition: opacity .3s, filter .3s;
}
.klien__jalur img:hover { opacity: .95; filter: none; }
.klien__bar:hover .klien__jalur { animation-play-state: paused; }

@keyframes jalanLogo { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  /* Jangan menggerakkan apa pun. Jalurnya dibungkus jadi beberapa baris
     supaya seluruh logo tetap terlihat tanpa animasi. */
  .klien__jalur { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* ---------- Kartu umum ---------- */
.card {
  background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--r-lg);
  padding: clamp(1.3rem, 2.6vw, 2rem);
}
.section--kertas2 .card { background: var(--kertas); }

/* ---------- Salam ---------- */
.salam { display: grid; gap: clamp(2rem, 4vw, 3.2rem); }
@media (min-width: 900px) { .salam { grid-template-columns: 1.1fr .9fr; } }
.salam__tag {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--aksen-teks);
  margin-top: 1.4rem;
}
.fakta { display: grid; gap: 1rem; }
.fakta__i { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.fakta__n {
  font-family: var(--serif); font-size: 1.05rem; color: var(--aksen-teks);
  border: 1px solid var(--garis-2); border-radius: 50%; width: 34px; height: 34px;
  display: grid; place-items: center; flex: none;
}
.fakta__i b { display: block; color: var(--tinta); font-size: .96rem; margin-bottom: .15rem; }
.fakta__i p { font-size: .89rem; margin: 0; }

/* ---------- Enam alasan ---------- */
.alasan { display: grid; gap: 0; border-top: 1px solid var(--garis); }
.alasan__i {
  display: grid; gap: .4rem 1.6rem; padding-block: clamp(1.4rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--garis);
}
@media (min-width: 800px) { .alasan__i { grid-template-columns: 4.5rem 20rem 1fr; align-items: start; } }
.alasan__n { font-family: var(--serif); font-size: 1.5rem; color: var(--aksen-2); line-height: 1; }
.alasan__i p { font-size: .95rem; margin: 0; }

.bukti { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1rem; }
.bukti__chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip-statis {
  border: 1px solid var(--garis-2); border-radius: 99px; padding: .4rem .9rem;
  font-size: .8rem; color: var(--tinta-2); background: var(--kertas);
}

/* ---------- Layanan ---------- */
.pintu { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
@media (min-width: 800px) { .pintu { grid-template-columns: 1fr 1fr; } }
.pintu__i .h-3 { margin-bottom: .6rem; }
.pintu__out {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--garis-2);
  font-size: .82rem; color: var(--aksen-teks);
}
.bidang { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .bidang { grid-template-columns: repeat(3, 1fr); } }
.bidang__i { border-left: 2px solid var(--aksen-2); padding-left: 1.1rem; }
.bidang__i h3 { font-family: var(--serif); font-size: 1.5rem; color: var(--tinta); margin: 0 0 .4rem; font-weight: 400; }
.bidang__i p { font-size: .92rem; margin: 0; }

/* ---------- Lingkup pekerjaan ---------- */
.lingkup { display: grid; gap: var(--gap); }
@media (min-width: 860px) { .lingkup { grid-template-columns: 1fr 1fr; } }
.lingkup ul { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.lingkup li {
  border: 1px solid var(--garis); border-radius: 99px; padding: .34rem .82rem;
  font-size: .84rem; background: var(--kertas-2); color: var(--tinta-2);
}
.section--kertas2 .lingkup li { background: var(--kertas); }
.lingkup__ket { font-size: .89rem; color: var(--tinta-3); font-style: italic; margin: 0; }

/* ---------- Standar mutu ---------- */
.mutu { display: grid; gap: 0; }
.mutu__i {
  display: grid; gap: .25rem 1.4rem; padding-block: 1.1rem; border-bottom: 1px solid var(--garis);
}
@media (min-width: 720px) { .mutu__i { grid-template-columns: 12rem 1fr; } }
.mutu__k { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--aksen-teks); padding-top: .25rem; }
.mutu__i p { font-size: .95rem; margin: 0; }

/* ---------- Diagram alur kerja ----------
   Tujuh langkah dibaca sebagai satu garis, bukan tujuh blok teks. Garisnya
   nyata (pseudo-element), bukan cuma jarak antar kartu — supaya urutannya
   terbaca sekali lihat tanpa perlu membaca satu pun kalimat. */
.alur {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; gap: 1.6rem 0;
}
.alur__i { display: grid; grid-template-columns: auto 1fr; gap: .1rem 1rem; align-items: baseline; }
.alur__n {
  grid-row: span 2; align-self: start;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.1rem; color: var(--aksen-teks);
  background: var(--kertas); border: 1px solid var(--garis-2); position: relative; z-index: 1;
}
.alur__i b { font-family: var(--serif); font-size: clamp(1.1rem, 1.7vw, 1.32rem); font-weight: 500; color: var(--tinta); }
.alur__out { font-size: .8rem; color: var(--aksen-teks); letter-spacing: .02em; }

/* Rel penghubung: tegak di HP, mendatar di layar lebar. */
.alur::before {
  content: ""; position: absolute; left: 23px; top: 23px; bottom: 23px;
  width: 1px; background: var(--garis-2);
}
@media (min-width: 900px) {
  .alur { grid-template-columns: repeat(7, 1fr); gap: 0 .6rem; }
  .alur__i { grid-template-columns: 1fr; gap: .5rem; align-content: start; text-align: left; }
  .alur__n { grid-row: auto; }
  .alur__i b { font-size: 1rem; }
  .alur::before { left: 23px; right: 23px; top: 23px; bottom: auto; width: auto; height: 1px; }
}
.section--kertas2 .alur__n { background: var(--kertas-2); }

/* ---------- Enam alasan: judul saja ---------- */
.poin {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  border-top: 1px solid var(--garis);
}
@media (min-width: 720px)  { .poin { grid-template-columns: repeat(2, 1fr); column-gap: var(--gap); } }
@media (min-width: 1080px) { .poin { grid-template-columns: repeat(3, 1fr); } }
.poin li {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline;
  padding-block: 1.15rem; border-bottom: 1px solid var(--garis);
}
.poin span { font-family: var(--serif); font-size: 1.15rem; color: var(--aksen-2); }
.poin b {
  font-family: var(--serif); font-size: clamp(1.08rem, 1.6vw, 1.26rem);
  font-weight: 500; color: var(--tinta); line-height: 1.3;
}

/* ---------- Tabel spesifikasi ---------- */
.spek { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--garis); }
.spek > div {
  display: grid; gap: .2rem 1.6rem; padding-block: .95rem; border-bottom: 1px solid var(--garis);
}
@media (min-width: 720px) { .spek > div { grid-template-columns: 13rem 1fr; align-items: baseline; } }
.spek dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--aksen-teks); }
.spek dd { margin: 0; font-size: .95rem; color: var(--tinta-2); }

/* ---------- Batang termin ----------
   Satu batang terbagi tiga, lebarnya sebanding porsinya. Angka 50/40/10
   jadi terbaca sebagai proporsi, bukan tiga kartu yang harus dibandingkan
   sendiri oleh pembaca. */
.termin-bar { display: grid; gap: 2px; margin-bottom: var(--gap); }
@media (min-width: 760px) { .termin-bar { grid-template-columns: 50fr 40fr 10fr; } }
.termin-bar__seg {
  background: var(--kertas-3); border-top: 3px solid var(--aksen);
  padding: 1rem clamp(.9rem, 2vw, 1.3rem) 1.1rem; display: grid; gap: .12rem; align-content: start;
}
.termin-bar__seg:nth-child(2) { border-top-color: var(--aksen-2); }
.termin-bar__seg:nth-child(3) { border-top-color: var(--garis-2); }
.termin-bar__p { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; color: var(--tinta); }
.termin-bar__k { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--aksen-teks); margin-top: .35rem; }
.termin-bar__w { font-size: .85rem; color: var(--tinta-3); }

.chip-statis--tolak { color: var(--tinta-3); text-decoration: line-through; text-decoration-color: var(--garis-2); }

/* ---------- Termin ---------- */
.termin { display: grid; gap: var(--gap); }
@media (min-width: 780px) { .termin { grid-template-columns: repeat(3, 1fr); } }
.termin__i { border-top: 2px solid var(--aksen-2); padding-top: 1rem; }
.termin__p { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--tinta); }
.termin__i b { display: block; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--aksen-teks); margin: .5rem 0 .4rem; }
.termin__i p { font-size: .9rem; margin: 0; }

.dua-kolom { display: grid; gap: var(--gap); margin-top: var(--gap); }
@media (min-width: 800px) { .dua-kolom { grid-template-columns: 1fr 1fr; } }

/* ---------- Karya ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--gap); }
.chip {
  border: 1px solid var(--garis-2); background: transparent; color: var(--tinta-2);
  border-radius: 99px; padding: .5rem 1.05rem; font-size: .86rem; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--kertas); }

/* Etalase, bukan arsip: dikunci 4 kolom supaya selalu jatuh rapi 2 baris x 4.
   Sengaja TIDAK memakai auto-fill — auto-fill bikin jumlah kolom berubah-ubah
   ikut lebar layar, dan barisnya jadi ompong di lebar tertentu. */
.works { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 560px)  { .works { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .works { grid-template-columns: repeat(4, 1fr); } }
.work {
  position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  border: 1px solid var(--garis); background: var(--kertas-3);
  aspect-ratio: 4 / 5; text-align: left; padding: 0; width: 100%;
  transition: border-color .3s, transform .4s var(--ease), box-shadow .3s;
}
.work.hide { display: none; }
.work img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.work:hover { border-color: var(--garis-2); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(27,26,22,.13); }
.work:hover img { transform: scale(1.05); }
/* Gradiennya sengaja pekat dan mulai tinggi. Foto lapangan sering terang
   di bagian bawah (lantai, plafon putih, jendela) dan judul putih langsung
   hilang di situ — beda dengan render yang biasanya gelap merata. */
.work__ov {
  position: absolute; inset: auto 0 0 0; padding: 1.3rem;
  background: linear-gradient(transparent, rgba(27,26,22,.62) 42%, rgba(27,26,22,.93) 88%);
  display: grid; gap: .22rem; color: #F6F1E4;
  text-shadow: 0 1px 12px rgba(27,26,22,.5);
}
.work__cat { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--aksen-2); }
.work__t { font-family: var(--serif); font-size: 1.28rem; font-weight: 500; }
.work__m { font-size: .78rem; opacity: .78; }

/* Label jenis gambar. Selalu terlihat — kalau bisa disembunyikan, gunanya hilang.
   Pemisahan render vs foto lapangan ini diwarisi langsung dari company profile. */
.tipe {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  padding: .34rem .66rem; border-radius: 99px; font-weight: 600;
}
/* Tiga alur kerja, tiga warna. Makin jauh ke kanan makin "sudah nyata":
   3D masih gambar, produksi sudah jadi barang, terpasang sudah di lokasi. */
.tipe--3d        { background: var(--kertas); color: var(--tinta-2); border: 1px solid var(--garis-2); }
.tipe--produksi  { background: var(--aksen-2); color: var(--tinta); border: 1px solid var(--aksen-2); }
.tipe--terpasang { background: var(--aksen); color: #FFF; border: 1px solid var(--aksen); }
.work__tipe { position: absolute; top: 13px; left: 13px; z-index: 1; }

/* ---------- Video YouTube, dua sisi ----------
   Kiri 3D Virtual Tour, kanan Production & Installation. Dipisah garis tegak
   di layar lebar supaya dua alur kerja itu terbaca sebagai dua hal berbeda,
   bukan satu daftar panjang berisi empat video. */
.vid-kolom { display: grid; gap: clamp(2.4rem, 5vw, 3.4rem); }
@media (min-width: 900px) {
  /* Jarak ke garis pemisah dipasang di KEDUA sisi. Sebelumnya cuma sisi
     kanan yang diberi padding, jadi kolom kanan lebih sempit ±50 px dan
     thumbnail-nya ikut mengecil — dua sisi tidak pernah presisi sama. */
  .vid-kolom { grid-template-columns: 1fr 1fr; gap: 0; }
  /* Garis 1 px di kolom kanan ikut memakan lebar isinya (box-sizing: border-box),
     jadi kolom kiri diberi garis tembus pandang selebar sama sebagai penyeimbang.
     Tanpa ini thumbnail kiri 554 px dan kanan 553 px — kecil, tapi terlihat
     sebagai baris yang tidak rata begitu dua kolom disandingkan. */
  .vid-kolom > .vid-sisi:first-child {
    padding-right: clamp(1.4rem, 3vw, 2.6rem);
    border-left: 1px solid transparent;
  }
  .vid-kolom > .vid-sisi + .vid-sisi {
    border-left: 1px solid var(--garis); padding-left: clamp(1.4rem, 3vw, 2.6rem);
  }

  /* Menyejajarkan kartu kiri dan kanan SUNGGUHAN, bukan kira-kira.
     Tanpa ini, judul yang membungkus dua baris di satu sisi mendorong kartu
     di bawahnya turun, dan dua kolom jadi meleset beberapa piksel.
     subgrid membuat kepala grup dan tiap kartu berbagi baris yang sama
     persis di seluruh lebar. Browser lama tetap rapi lewat min-height
     yang sudah dipasang di bawah — cuma tidak sepresisi ini. */
  @supports (grid-template-rows: subgrid) {
    .vid-kolom { grid-template-rows: auto auto auto; align-items: stretch; }
    .vid-sisi { grid-row: 1 / span 3; grid-template-rows: subgrid; }
    .vid-sisi__isi { grid-row: span 2; grid-template-rows: subgrid; }
  }
}
/* Kepala grup dan judul video sama-sama rata tengah, dan tingginya dikunci —
   tanpa itu, sisi yang judulnya lebih panjang mendorong kartunya turun dan
   dua kolom jadi tidak sejajar. */
.vid-sisi { display: grid; grid-template-rows: auto 1fr; }
.vid-sisi__kepala {
  display: grid; justify-items: center; align-content: center; gap: .45rem;
  min-height: 8.5rem; margin-bottom: 1.5rem; text-align: center;
}
.vid-sisi__kepala .h-3 { margin: 0; }
.vid-sisi__kepala .note { margin: 0; max-width: 34ch; }
.vid-sisi__isi { display: grid; gap: var(--gap); align-content: start; }

.vid-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.vid { margin: 0; display: grid; gap: .8rem; }
.vid__putar, .vid iframe {
  width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  border: 1px solid var(--garis); display: block;
}
.vid__putar {
  position: relative; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--kertas-3); transition: border-color .3s, transform .4s var(--ease), box-shadow .3s;
}
.vid__putar img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.vid__putar:hover { border-color: var(--garis-2); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(27,26,22,.13); }
.vid__putar:hover img { transform: scale(1.04); }
.vid__tipe { position: absolute; top: 13px; left: 13px; z-index: 1; }
.vid__ikon {
  position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%;
  background: rgba(27,26,22,.72); color: var(--kertas);
  display: grid; place-items: center; transition: background .3s, transform .3s var(--ease);
}
.vid__putar:hover .vid__ikon { background: var(--aksen); transform: scale(1.06); }
.vid__ikon svg { width: 26px; height: 26px; margin-left: 3px; }
/* Judul di tengah, keterangan singkat di bawahnya seperti caption cetak.
   Tinggi dikunci dua baris supaya kartu kiri dan kanan berhenti di garis
   yang sama walau panjang judulnya beda. */
.vid figcaption {
  display: grid; gap: .15rem; text-align: center; justify-items: center;
  min-height: 3.9rem; align-content: start; padding-inline: .5rem;
}
.vid figcaption b { font-family: var(--serif); font-size: 1.16rem; font-weight: 500; color: var(--tinta); line-height: 1.25; }
.vid figcaption span { font-size: .84rem; color: var(--tinta-3); }
.vid iframe { border: 0; }

/* Slot yang ID YouTube-nya belum diisi. Hanya untuk pengecekan di Mac/HP —
   siapkan-upload.sh menolak membuat paket selama masih ada slot begini,
   jadi mustahil terlihat pengunjung. */
.vid--kosong .vid__putar {
  cursor: default; border-style: dashed; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--kertas-3) 0 10px, var(--kertas-2) 10px 20px);
}
.vid--kosong .vid__putar:hover { transform: none; box-shadow: none; border-color: var(--garis); }
.vid__tunggu {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3);
  border: 1px dashed var(--garis-2); border-radius: 99px; padding: .5rem 1rem; background: var(--kertas);
}
.vid--kosong figcaption b { color: var(--tinta-3); }

/* Ajakan di bawah grid karya. Dipisah garis supaya terbaca sebagai langkah
   berikutnya, bukan sebagai keterangan kartu terakhir. */
.karya__lanjut {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--garis);
  display: grid; gap: 1.1rem; justify-items: start;
}
.karya__lanjut .lead { max-width: 62ch; }
@media (min-width: 900px) {
  .karya__lanjut { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
}

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: rgba(27,26,22,.72); padding: var(--pad);
  /* visibility ikut dimatikan, bukan cuma opacity. Elemen ber-opacity 0
     tetap menerima klik — pengaman kedua kalau aturan [hidden] di atas
     suatu saat tertimpa. */
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
@supports (backdrop-filter: blur(4px)) { .lb { backdrop-filter: blur(4px); } }
.lb.open { opacity: 1; visibility: visible; }
.lb__box {
  background: var(--kertas); border: 1px solid var(--garis-2); border-radius: var(--r-lg);
  width: min(1080px, 100%); max-height: 88vh; overflow: auto; display: grid;
  transform: translateY(14px) scale(.99); transition: transform .35s var(--ease);
}
.lb.open .lb__box { transform: none; }
.lb__img { background: var(--kertas-3); aspect-ratio: 16/10; }
.lb__img img { width: 100%; height: 100%; object-fit: cover; }
.lb__body { padding: clamp(1.4rem, 3.4vw, 2.3rem); display: grid; gap: 1rem; align-content: start; }
.lb__head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 0; }
.lb__body dl { display: grid; gap: .85rem; margin: 0; }
.lb__body dt { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--aksen-teks); }
.lb__body dd { margin: .22rem 0 0; font-size: .93rem; }
.lb__close {
  position: fixed; top: 18px; right: 18px; z-index: 401;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--garis-2);
  background: var(--kertas); color: var(--tinta); display: grid; place-items: center; cursor: pointer;
}
@media (min-width: 880px) { .lb__box { grid-template-columns: 1.1fr 1fr; } .lb__img { aspect-ratio: auto; height: 100%; } }

/* ---------- Estimator ---------- */
.est { display: grid; gap: var(--gap); }
@media (min-width: 980px) { .est { grid-template-columns: 1fr 1fr; align-items: start; } }
.field { margin-bottom: 1.5rem; }
.field:last-child { margin-bottom: 0; }
.field__t { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 .7rem; }
.opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt {
  border: 1px solid var(--garis-2); background: var(--kertas); color: var(--tinta-2);
  border-radius: 99px; padding: .52rem 1rem; font-size: .87rem; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.opt:hover { border-color: var(--tinta); }
.opt[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--kertas); }

.slider-row { display: flex; align-items: center; gap: 1rem; }
input[type=range] {
  -webkit-appearance: none; appearance: none; flex: 1; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--aksen) var(--fill, 0%), var(--garis) var(--fill, 0%));
  outline: none; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--aksen); border: 3px solid var(--kertas); box-shadow: 0 0 0 1px var(--aksen);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--aksen);
  border: 3px solid var(--kertas); box-shadow: 0 0 0 1px var(--aksen); cursor: pointer;
}
.ukuran { font-family: var(--serif); font-size: 1.6rem; color: var(--tinta); min-width: 4.2rem; text-align: right; }
.ukuran small { font-size: .8rem; color: var(--tinta-3); }
.est__ket { font-size: .84rem; color: var(--tinta-3); margin-top: .7rem; padding-left: .9rem; border-left: 2px solid var(--garis); }

.check {
  display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center;
  border: 1px solid var(--garis); border-radius: var(--r); padding: .68rem .9rem;
  font-size: .88rem; cursor: pointer; margin-bottom: .45rem; background: var(--kertas);
  transition: border-color .2s, background .2s;
}
.check:hover { border-color: var(--garis-2); }
.check input { accent-color: var(--aksen); width: 16px; height: 16px; }
.check span:last-child { font-size: .8rem; color: var(--aksen-teks); white-space: nowrap; }

.est__out { background: var(--kertas-3); border-color: var(--garis-2); display: grid; gap: 1.3rem; align-content: start; }
.est__price { display: grid; gap: .2rem; margin: 0; }
.est__price small { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3); }
.est__price span { font-family: var(--serif); font-size: clamp(2rem, 4.6vw, 2.9rem); color: var(--tinta); line-height: 1.05; }
.est__unit { font-size: .84rem; color: var(--tinta-3); margin: 0; }

.bars { display: grid; gap: .6rem; }
.bar { display: grid; grid-template-columns: 1fr auto; gap: .28rem .8rem; font-size: .82rem; }
.bar__v { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.bar__track { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--garis); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 3px; background: var(--aksen); width: 0; transition: width .7s var(--ease); }
.bar:nth-child(2) .bar__fill { background: var(--aksen-2); }
.bar:nth-child(3) .bar__fill { background: var(--garis-2); }

.why { border-top: 1px solid var(--garis-2); padding-top: 1.1rem; display: grid; gap: .6rem; }
.why__t { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--aksen-teks); margin: 0; }
.why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.why li { display: flex; gap: .6rem; font-size: .88rem; line-height: 1.55; }
.why li::before { content: "—"; color: var(--aksen-2); flex: none; }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid var(--garis); }
.faq details { border-bottom: 1px solid var(--garis); }
.faq summary {
  cursor: pointer; list-style: none; padding-block: 1.15rem; padding-right: 2.2rem;
  position: relative; font-family: var(--serif); font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  color: var(--tinta); font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .3rem; top: 50%; width: 11px; height: 11px;
  border-right: 1.5px solid var(--aksen); border-bottom: 1.5px solid var(--aksen);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq p { font-size: .95rem; padding-bottom: 1.3rem; padding-right: clamp(0rem, 6vw, 5rem); margin: 0; }

/* ---------- Kontak ---------- */
.contact { display: grid; gap: clamp(1.6rem, 3.4vw, 3rem); }
@media (min-width: 900px) { .contact { grid-template-columns: .85fr 1.15fr; } }
.info-row { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding-block: 1.1rem; border-bottom: 1px solid var(--garis); align-items: start; }
.info-row:first-child { padding-top: 0; }
.info-row svg { width: 19px; height: 19px; color: var(--aksen-teks); margin-top: .2rem; }
.info-row b { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: .3rem; font-weight: 600; }
.info-row a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--garis-2); }
.info-row a:hover { border-bottom-color: var(--aksen); color: var(--aksen-teks); }
.info-row p { font-size: .93rem; color: var(--tinta-2); margin: 0; }

/* Kartu ajakan WhatsApp — pengganti form lead yang disembunyikan. */
.ajak { display: grid; gap: 1rem; align-content: start; }
.ajak__langkah { list-style: none; counter-reset: langkah; margin: .3rem 0 .4rem; padding: 0; display: grid; gap: .95rem; }
.ajak__langkah li {
  counter-increment: langkah; display: grid; grid-template-columns: auto 1fr;
  gap: .2rem .9rem; align-items: baseline;
}
.ajak__langkah li::before {
  content: counter(langkah, decimal-leading-zero); grid-row: span 2;
  font-family: var(--serif); font-size: 1.05rem; color: var(--aksen-teks);
  border: 1px solid var(--garis-2); border-radius: 50%;
  width: 34px; height: 34px; display: grid; place-items: center; align-self: start;
}
.ajak__langkah b { color: var(--tinta); font-size: .96rem; }
.ajak__langkah span { font-size: .89rem; color: var(--tinta-2); }

.form { display: grid; gap: 1rem; }
.row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .row { grid-template-columns: 1fr 1fr; } }
.inp { display: grid; gap: .4rem; }
.inp label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.inp input, .inp select, .inp textarea {
  font: inherit; font-size: .94rem; color: var(--tinta); background: var(--kertas);
  border: 1px solid var(--garis-2); border-radius: var(--r); padding: .74rem .9rem; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.inp textarea { min-height: 118px; resize: vertical; }
.inp input:focus, .inp select:focus, .inp textarea:focus {
  outline: none; border-color: var(--aksen); box-shadow: 0 0 0 3px rgba(150,112,28,.12);
}
.inp input::placeholder, .inp textarea::placeholder { color: var(--tinta-3); opacity: .75; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form__msg { font-size: .88rem; min-height: 1.2em; }
.form__msg.ok { color: #4A6B34; }
.form__msg.err { color: #96341C; }

/* ---------- Pita penutup ---------- */
.band {
  background: var(--tinta); color: var(--kertas); border-radius: var(--r-lg);
  padding: clamp(2.2rem, 5vw, 4rem); display: grid; gap: 1rem; justify-items: start;
  position: relative; overflow: hidden;
}
.band .eyebrow { color: var(--aksen-2); }
.band .eyebrow::before { background: rgba(246,241,228,.3); }
.band .h-2 { color: var(--kertas); max-width: 22ch; }
.band .lead { color: rgba(246,241,228,.76); }
.band .btn { background: var(--kertas); color: var(--tinta); border-color: var(--kertas); }
.band .btn:hover { background: var(--aksen-2); border-color: var(--aksen-2); color: var(--tinta); }
/* Tombol kedua di pita gelap. Sebelumnya diatur lewat style inline dan
   warnanya jadi ivory di atas latar ivory — tombolnya terlihat kosong
   melompong. Sekarang jadi aturan sendiri: transparan, teks ivory. */
.band .btn--ghost { background: transparent; color: var(--kertas); border-color: rgba(246,241,228,.42); }
.band .btn--ghost:hover { background: rgba(246,241,228,.12); border-color: var(--kertas); color: var(--kertas); }
.band__motif { position: absolute; right: -6%; bottom: -34%; width: min(420px, 46%); height: auto; opacity: .13; pointer-events: none; }

/* ---------- Footer ---------- */
.ft { background: var(--kertas-2); border-top: 1px solid var(--garis); padding-block: clamp(2.6rem, 5vw, 4rem) 1.8rem; }
.ft__grid { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
@media (min-width: 780px) { .ft__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.ft__brand img { height: 22px; width: auto; margin-bottom: 1rem; }
.ft__brand p { font-size: .89rem; max-width: 40ch; }
.ft h3 { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 .9rem; font-weight: 600; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ft a { text-decoration: none; font-size: .89rem; color: var(--tinta-2); }
.ft a:hover { color: var(--aksen-teks); }
.socials { display: flex; gap: .6rem; margin-top: 1rem; }
.socials a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--garis-2);
  display: grid; place-items: center; color: var(--tinta-2); transition: all .25s;
}
.socials a:hover { border-color: var(--aksen); color: var(--aksen-teks); }
.socials svg { width: 17px; height: 17px; }
.ft__bot {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 1px solid var(--garis);
  display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; justify-content: space-between;
  font-size: .8rem; color: var(--tinta-3);
}
.ft__tagar { color: var(--aksen-teks); letter-spacing: .04em; }

/* ============================================================
   LAYAR SENTUH & LAYAR KECIL
   Dua hal yang cuma ketahuan waktu diukur, bukan waktu dilihat.

   1. TARGET SENTUH. Tautan nomor telepon, e-mail, peta, dan tautan footer
      tingginya cuma 17–20px — di bawah 44px yang dianjurkan untuk jempol.
      Ditinggikan lewat padding, bukan lewat ukuran huruf, supaya komposisi
      dan hierarki visualnya tidak berubah sama sekali.
   2. UKURAN TEKS PENDUKUNG. Beberapa paragraf memakai .89–.93rem (±14,2px).
      Nyaman di layar 27 inci, kekecilan di HP sambil berdiri. Dinaikkan ke
      ±15,2px — cukup nyaman, dan masih di bawah judulnya jadi hierarkinya utuh.

   Dipicu oleh `pointer: coarse` (perangkat sentuh apa pun, termasuk tablet
   besar) ATAU lebar di bawah 780px, supaya bisa diuji di browser desktop juga.
   ============================================================ */
@media (pointer: coarse), (max-width: 780px) {
  .brand { display: inline-flex; align-items: center; min-height: 44px; }

  .info-row a { display: inline-block; padding-block: .6rem; }
  .info-row a[style] { font-size: .9rem !important; }   /* tautan peta: inline style .85rem */
  .ft ul { gap: .1rem; }
  .ft li a { display: inline-block; padding-block: .62rem; }
  .socials { gap: .5rem; }
  .socials a { width: 44px; height: 44px; }
  .chip { padding-block: .78rem; }
  .burger { width: 44px; height: 44px; }

  .janji__i p, .fakta__i p, .bidang__i p, .ajak__langkah span,
  .info-row p, .ft__brand p, .ft a, .why li, .lingkup__ket { font-size: .95rem; }
  .note, .vid figcaption span { font-size: .88rem; }
  .ft li span[style] { font-size: .88rem !important; }   /* alamat di footer: inline style .83rem */
}

/* ---------- Tombol WA mengambang ---------- */
.wa {
  position: fixed; right: 16px; bottom: 16px; z-index: 180;
  display: inline-flex; align-items: center; gap: .55rem;
  background: #1F7A4C; color: #fff; text-decoration: none;
  padding: .78rem 1.15rem; border-radius: 99px; font-size: .88rem; font-weight: 600;
  box-shadow: 0 10px 30px rgba(31,122,76,.3);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .3s, transform .35s var(--ease);
}
.wa.show { opacity: 1; transform: none; pointer-events: auto; }
.wa svg { width: 19px; height: 19px; }
@media (max-width: 520px) { .wa span { display: none; } .wa { padding: .85rem; } }

/* ---------- Reveal ---------- */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv[data-d="1"] { transition-delay: .07s; }
.js .rv[data-d="2"] { transition-delay: .14s; }
.js .rv[data-d="3"] { transition-delay: .21s; }
.js .rv[data-d="4"] { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   HALAMAN PANDUAN
   Halaman artikel di /kitchen-set/, /interior-rumah/,
   /interior-kantor/, dan daftarnya di /panduan/.

   Sengaja tidak memperkenalkan warna atau huruf baru — semuanya
   token yang sudah ada. Halaman ini harus terasa bagian dari
   situs yang sama, bukan blog yang ditempel belakangan.

   Lebar bacanya dikunci ~68ch. Halaman utama boleh selebar
   1240px karena isinya kartu dan gambar; teks panjang tidak.
   ============================================================ */

/* Remah roti */
.remah {
  font-size: .8rem; color: var(--tinta-3); margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
}
.remah a { color: var(--tinta-3); text-decoration: none; border-bottom: 1px solid var(--garis-2); }
.remah a:hover { color: var(--aksen-teks); border-bottom-color: var(--aksen-teks); }
.remah [aria-current] { color: var(--tinta-2); }

/* Kepala artikel */
.pandu__kepala { max-width: 34ch; }
@media (min-width: 700px) { .pandu__kepala { max-width: 22ch; } }
.pandu__kepala .h-2 { margin-bottom: 1rem; }
.pandu__kepala .lead { max-width: 62ch; }

/* Badan artikel */
.pandu__isi {
  max-width: 68ch; margin-top: clamp(2.4rem, 5vw, 3.6rem);
  font-size: 1.02rem; line-height: 1.75;
}
.pandu__isi h2 {
  font-family: var(--serif); font-weight: 500; color: var(--tinta);
  font-size: clamp(1.32rem, 2.4vw, 1.72rem); line-height: 1.24;
  margin: clamp(2.4rem, 4.5vw, 3.2rem) 0 .85rem; text-wrap: balance;
}
.pandu__isi h2:first-child { margin-top: 0; }
.pandu__isi p { margin: 0 0 1.1rem; }
.pandu__isi strong { color: var(--tinta); font-weight: 600; }
.pandu__isi em { font-family: var(--serif); font-size: 1.06em; }
.pandu__isi ul, .pandu__isi ol { margin: 0 0 1.3rem; padding-left: 1.3rem; display: grid; gap: .55rem; }
.pandu__isi li { padding-left: .2rem; }
.pandu__isi li::marker { color: var(--aksen-teks); }
.pandu__isi ol li::marker { font-weight: 600; }

/* Ajakan di ujung artikel */
.pandu__ajak {
  max-width: 68ch; margin-top: clamp(2.8rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: var(--r-lg);
  background: var(--kertas-2); border: 1px solid var(--garis);
}
.pandu__ajak .h-3 { margin-bottom: .6rem; }
.pandu__ajak p { margin-bottom: 1.2rem; max-width: 56ch; }

/* Tautan ke panduan lain */
.pandu__lain { margin-top: clamp(2.8rem, 5vw, 4rem); max-width: 68ch; }
.pandu__lain .h-3 { margin-bottom: 1.1rem; }
.pandu__lain ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.pandu__lain a {
  display: block; text-decoration: none; padding: .95rem 0;
  border-top: 1px solid var(--garis); transition: padding-left .25s var(--ease);
}
.pandu__lain li:last-child a { border-bottom: 1px solid var(--garis); }
.pandu__lain a:hover { padding-left: .5rem; }
.pandu__lain b { display: block; font-family: var(--serif); font-size: 1.16rem; font-weight: 500; color: var(--tinta); }
.pandu__lain span { display: block; font-size: .9rem; color: var(--tinta-3); margin-top: .18rem; }

/* Halaman daftar panduan */
.pandu-daftar {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap);
  /* auto-fit, bukan jumlah kolom tetap. Dengan 7 artikel, tiga kolom menyisakan
     satu kartu sendirian di baris terakhir. Dibiarkan mengikuti lebar, layarnya
     yang menentukan — dan susunannya tetap seimbang kalau artikelnya bertambah. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
}
.pandu-kartu a {
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
  padding: clamp(1.4rem, 2.6vw, 1.9rem); border-radius: var(--r-lg);
  background: var(--kertas-2); border: 1px solid var(--garis);
  transition: border-color .25s, transform .25s var(--ease);
}
.pandu-kartu a:hover { border-color: var(--garis-2); transform: translateY(-2px); }
.pandu-kartu .h-3 { margin: 0 0 .7rem; }
.pandu-kartu p { font-size: .93rem; margin: 0 0 1.3rem; flex: 1; }
.pandu-kartu__aksi { font-size: .86rem; font-weight: 600; color: var(--aksen-teks); }

/* Tombol menuju panduan dari halaman utama */
.karya__panduan {
  margin-top: clamp(1.4rem, 3vw, 2rem); padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--garis);
}
.karya__panduan p { font-size: .93rem; color: var(--tinta-3); margin: 0 0 .8rem; max-width: 60ch; }

@media (pointer: coarse), (max-width: 780px) {
  .pandu__isi { font-size: 1.04rem; }
  .pandu__lain a { padding-block: 1.1rem; }
  .remah a { padding-block: .72rem; display: inline-block; }   /* 34px → 44px */
}