/* =========================================================================
   JOGIN Studio — ruang gelap / meja cahaya
   -------------------------------------------------------------------------
   ATURAN PALET, jangan dilanggar tanpa alasan:
   Halaman ini MONOKROM. Hitam, putih, abu. Titik.
   Satu-satunya warna yang boleh muncul adalah warna yang keluar dari
   gambar karya itu sendiri. Begitu ada aksen berwarna di antarmuka
   (emas, biru, apa pun), mata langsung punya dua tempat untuk singgah dan
   render-nya kehilangan panggung. Itu justru barang yang dijual unit ini.

   Ini juga yang memisahkan situs ini dari tiga saudaranya:
     jogin-web            hitam-emas, Cormorant
     jogja-interior-web   kertas ivory, serif tenang
     jogin-construction   kertas milimeter + mode cetak biru, monospace
   Tidak ada satu pun komponen yang dipinjam dari ketiganya.
   ========================================================================= */

:root {
  --hitam:      #08080a;
  --panel:      #0f0f12;
  --panel-2:    #16161a;
  --panel-3:    #1e1e23;

  --tinta:      #eeece8;
  --redup:      #97948e;
  /* #6b6963 sebelumnya. DIGANTI 9 Agu 2026 — gagal kontras 4,5:1 di SEMUA
     latar yang dipakai (3,65 di hitam · 3,49 di panel · 3,29 di panel-2),
     padahal warna ini dipakai untuk seluruh label bagian, keterangan kecil,
     blok sumber, meta karya, dan kaki halaman. Nilai baru diukur, bukan
     dikira: 5,66 · 5,41 · 5,10 · 4,69. Jangan digelapkan lagi tanpa
     menghitung ulang — SOP Bagian 4, "kontras diperiksa untuk SEMUA teks". */
  --redup-2:    #8a8884;

  --garis:      rgba(255, 255, 255, .10);
  --garis-tebal:rgba(255, 255, 255, .22);

  /* "cahaya" = aksen. Putih, plus sedikit hangat khusus untuk pendar lampu. */
  --cahaya:     #ffffff;
  --pendar:     rgba(255, 226, 189, .55);
  --pendar-tipis: rgba(255, 226, 189, .16);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --lebar: 1160px;
  --tepi: clamp(20px, 5vw, 64px);

  --lentur: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--hitam);
  color: var(--tinta);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

/* =========================================================================
   LAYAR MUAT
   -------------------------------------------------------------------------
   Aturan yang tidak boleh dilanggar: layar ini WAJIB bisa hilang sendiri.
   JS menyingkirkannya saat halaman siap, DAN ada batas waktu keras 2,5 detik
   kalau ada yang gagal termuat. Kalau JS mati sama sekali, <noscript> di
   index.html menyembunyikannya. Tiga jaring pengaman untuk satu hal yang
   kalau macet bikin situs terlihat mati total.
   ========================================================================= */

.muat {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--hitam);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 30px;
  transition: opacity .8s var(--lentur), visibility .8s;
}
.muat.is-selesai { opacity: 0; visibility: hidden; pointer-events: none; }

.muat__logo {
  width: min(360px, 64vw);
  height: auto;
  opacity: 0;
  transform: translateY(10px);
  animation: muatNaik 1.1s var(--lentur) forwards;
}
@keyframes muatNaik { to { opacity: 1; transform: none; } }

/* Garis yang disapu cahaya — bahasa yang sama dengan sisa situs, bukan
   lingkaran berputar yang bisa dipakai situs mana pun. */
.muat__garis {
  width: min(360px, 64vw);
  height: 1px;
  background: var(--garis);
  position: relative;
  overflow: hidden;
}
.muat__garis::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, var(--pendar), transparent);
  animation: muatSapu 1.4s var(--lentur) infinite;
}
@keyframes muatSapu {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Halaman dikunci selama layar muat tampil, supaya tidak ada yang menggulir
   ke isi yang belum sempat menata diri. */
body.is-memuat { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .muat__logo { opacity: 1; transform: none; animation: none; }
  .muat__garis::after { animation: none; opacity: .5; }
}

/* -------------------------------------------------------------------------
   Dua lapis yang bikin ruang gelap ini terasa hidup, bukan sekadar gelap.
   Keduanya di belakang segalanya dan tidak bisa diklik.
   ------------------------------------------------------------------------- */

/* 1. Cahaya yang mengikuti kursor. Ini konsep ruang tayang: lampu sorot ikut
      ke mana orangnya memandang. Dibuat sangat samar — begitu kelihatan jelas
      sebagai lingkaran, dia berubah jadi mainan dan bukan suasana lagi. */
.cahaya-ikut {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    620px circle at var(--mx, 50%) var(--my, 12%),
    rgba(255, 233, 205, .05), rgba(255, 233, 205, .018) 42%, transparent 68%);
  opacity: 0;
  transition: opacity 1.2s var(--lentur);
}
.cahaya-ikut.is-hidup { opacity: 1; }

/* 2. Butiran halus. Bidang gelap dengan gradasi selalu memunculkan garis-garis
      belang (banding) di layar biasa; butiran ini menutupinya sekaligus bikin
      latarnya terasa seperti bahan, bukan warna datar. Data URI, nol permintaan
      ke luar. */
.butir {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}

main, .kaki { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   MOTIF GARIS — burung dalam cincin, versi garis.
   Berkas yang sama dipakai di company profile dan situs Jogja Interior
   (`motif-burung.png` di sana). Di sini dia TIDAK dipakai sebagai logo —
   JOGIN belum punya logo — melainkan sebagai bias latar.

   Gambarnya aslinya bergaris emas. Di sini emasnya dibuang lewat mask:
   yang dipakai cuma BENTUKNYA, warnanya diisi ulang dari palet situs ini.
   Kalau dipasang apa adanya, satu-satunya warna di halaman monokrom ini jadi
   emas — persis aturan yang dijaga di kepala berkas ini.
   ------------------------------------------------------------------------- */

.motif {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  aspect-ratio: 1200 / 1066;
  /* Emas merek JOGIN, bukan putih. KOREKSI 7 Agu 2026: versi sebelumnya
     mengecat motif ini putih demi aturan monokrom, hasilnya dia terbaca
     sebagai bentuk abu-abu acak, bukan sebagai logo. Owner minta logonya
     benar-benar tampil di latar hitam utama — jadi warnanya dikembalikan.
     Aturan monokrom tetap berlaku untuk ANTARMUKA (tombol, garis, teks);
     logo adalah pengecualian yang disengaja, bukan kebocoran. */
  background: #f2c230;
  opacity: .12;
  -webkit-mask: url("../img/motif-garis.png") center / contain no-repeat;
          mask: url("../img/motif-garis.png") center / contain no-repeat;
}

/* Melayang sangat pelan. Satu putaran 46 detik dan geraknya cuma belasan
   piksel — tidak akan tertangkap sebagai animasi, tapi cukup membuat latarnya
   tidak terasa seperti stiker yang ditempel. */
@keyframes apung {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -16px, 0) rotate(-1.6deg); }
}
.motif--apung { animation: apung 46s ease-in-out infinite; }

/* Bukaan: motif ditaruh di SISI KIRI, di atas bidang gelap tempat teks
   berdiri — bukan di sisi kanan yang terang. Di atas render terang, garis
   setipis ini hilang berapa pun opasitasnya; di atas bidang gelap dia terbaca
   seperti cap timbul pada kertas. Sengaja dibiarkan tertimpa judul: itu yang
   bikin dia terbaca sebagai latar, bukan sebagai gambar kedua. */
.motif--bukaan {
  left: -16%;
  top: 4%;
  width: min(88vh, 780px);
  opacity: .3;
  mix-blend-mode: screen;
  z-index: 0;
}

/* Cara kerja: separuh motif keluar dari tepi kiri. Bagian yang terpotong
   justru yang bikin halaman terasa lebih luas daripada bingkainya. */
.motif--cara {
  left: -22%;
  top: 6%;
  width: min(62vw, 760px);
  opacity: .15;
}

/* Kontak: motif jadi latar blok penutup. */
.motif--kontak {
  right: -10%;
  bottom: -16%;
  width: min(54vw, 620px);
  opacity: .16;
}

.kaki { overflow: hidden; }
.motif--kaki {
  left: 50%;
  bottom: -48%;
  width: min(74vw, 820px);
  transform: translateX(-50%);
  opacity: .13;
}

@media (max-width: 680px) {
  .motif--kontak { display: none; }
  .motif--cara { left: -46%; width: 130vw; opacity: .12; }
  .motif--bukaan { left: -34%; top: 10%; width: 118vw; opacity: .26; }
}

/* height:auto WAJIB ada. Semua <img> di situs ini menulis width/height asli di
   HTML supaya tata letaknya tidak melompat waktu gambar baru termuat — tapi
   atribut height itu juga mengunci tinggi elemen dan mengalahkan aspect-ratio.
   Tanpa baris ini, kaca kecil di deret karya jadi setinggi 1000 px. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--tinta); color: var(--hitam); }

:focus-visible {
  outline: 2px solid var(--cahaya);
  outline-offset: 3px;
}

/* ---------- kerangka ---------- */

.bungkus {
  max-width: var(--lebar);
  margin: 0 auto;
  padding-inline: var(--tepi);
  /* Wajib: motif latar itu elemen berposisi. Tanpa z-index di sini, teks yang
     tidak berposisi dicat LEBIH DULU dan motifnya menutupi tulisan. */
  position: relative;
  z-index: 1;
}

/* overflow:hidden dipakai supaya motif yang sengaja keluar dari tepi terpotong
   rapi di batas bagian, bukan bikin halaman bisa digeser ke samping.

   Padding sengaja lebih rapat daripada lazimnya situs bergaya galeri: halaman
   ini isinya tujuh bagian, dan tiap 40 px napas antarbagian bertambah jadi
   hampir satu layar penuh gulir di ujungnya. */
.bidang { padding-block: clamp(54px, 7vw, 92px); position: relative; overflow: hidden; }

/* Garis pemisah antarbagian sengaja MEMUDAR di kedua ujungnya. Garis lurus
   penuh dari tepi ke tepi itu yang bikin halaman terasa seperti tabel. */
.bidang + .bidang::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(255,255,255,.13) 14%, rgba(255,255,255,.13) 86%, transparent);
}

/* Tanpa ini, judul bagian yang dituju dari indeks berhenti persis di balik
   kepala halaman yang menempel di atas. Dulu 96px karena ada pita "prototipe"
   di atasnya; pita itu dilepas 21 Agustus 2026 waktu situs dibuka ke publik. */
main section { scroll-margin-top: 72px; }

/* Judul bagian: label kecil, judul besar, lalu garis rambut sampai tepi kanan. */
.kepala { margin-bottom: clamp(24px, 3.2vw, 40px); }

.kepala__label,
.label {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--redup-2);
  margin: 0 0 13px;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Garisnya DIGAMBAR waktu bagian ini masuk layar, bukan sudah jadi. Satu gerak
   kecil yang menandai "bagian ini baru dibuka" tanpa perlu animasi mencolok. */
.kepala__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--garis-tebal), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.15s var(--lentur) .15s;
}
.is-tampak .kepala__label::after,
.kepala.is-tampak .kepala__label::after { transform: scaleX(1); }

.kepala h2 {
  margin: 0;
  font-weight: 200;
  font-size: clamp(27px, 3.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -.03em;
  max-width: 22ch;
}

.kepala p {
  margin: 14px 0 0;
  color: var(--redup);
  max-width: 66ch;
  font-size: 15.5px;
  line-height: 1.58;
}

.hal-kecil { font-size: 14px; color: var(--redup-2); line-height: 1.6; }

/* ---------- kepala halaman ---------- */

/* Pembungkus kepala halaman yang menempel di puncak layar. Dibiarkan ada
   meski sekarang isinya tinggal satu unsur: dialah yang membuat tinggi
   tumpukan tidak perlu ditebak lewat angka ajaib kalau nanti ada yang
   ditambahkan lagi di atas kepala. */
.puncak {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
}

.atas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--tepi);
  background: linear-gradient(to bottom, rgba(8, 8, 10, .92), rgba(8, 8, 10, 0));
  transition: background .35s var(--lentur);
}
.atas.is-padat {
  background: rgba(8, 8, 10, .9);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--garis);
}

/* Logo di kepala halaman. Tingginya dikunci, lebarnya ikut — logonya
   memanjang (rasio ±4:1), jadi kalau lebarnya yang dikunci dia akan menyusut
   tak terbaca di layar sempit. */
.merek {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 1 auto;
  min-width: 0;
}
.merek img {
  height: clamp(22px, 3.4vw, 30px);
  width: auto;
  max-width: 58vw;
  object-fit: contain;
  transition: opacity .3s;
}
.merek:hover img { opacity: .82; }

.tombol-indeks {
  appearance: none;
  background: none;
  border: 1px solid var(--garis-tebal);
  color: var(--tinta);
  font: inherit;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 9px 17px;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .28s var(--lentur), color .28s var(--lentur);
}
.tombol-indeks:hover { border-color: var(--cahaya); color: var(--hitam); }

/* ---------- indeks layar penuh ---------- */

.indeks {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 8, 10, .97);
  backdrop-filter: blur(18px);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  /* visibility DITUNDA saat menutup, dan LANGSUNG saat membuka — bukan
     ditransisikan. Alasannya bukan estetika: elemen yang masih
     visibility:hidden tidak bisa menerima fokus, dan .focus() padanya gagal
     tanpa bersuara. Versi sebelumnya mengakalinya dengan requestAnimationFrame,
     dan itu ikut beku di tab yang tidak sedang dilihat — jadi fokusnya tidak
     pernah pindah ke dalam dialog. Sekarang JS bisa memanggil .focus()
     langsung, tanpa menunggu frame. */
  transition: opacity .3s var(--lentur), visibility 0s linear .3s;
}
.indeks.is-buka {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--lentur), visibility 0s linear 0s;
}

.indeks__isi { width: min(760px, 88vw); }
.indeks ol { list-style: none; margin: 0; padding: 0; }
.indeks li { border-bottom: 1px solid var(--garis); }
.indeks a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 16px 4px;
  text-decoration: none;
  font-size: clamp(20px, 3.4vw, 30px);
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--redup);
  transition: color .2s, padding-left .25s var(--lentur);
}
.indeks a i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--redup-2);
  min-width: 26px;
}
.indeks a:hover { color: var(--tinta); padding-left: 14px; }

.indeks__tutup {
  position: absolute;
  top: 18px;
  right: var(--tepi);
  appearance: none;
  background: none;
  border: 0;
  color: var(--redup);
  font: inherit;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px;
}
.indeks__tutup:hover { color: var(--tinta); }

/* ---------- penanda posisi (pojok kiri bawah) ---------- */

.penanda {
  position: fixed;
  left: var(--tepi);
  bottom: 22px;
  z-index: 55;
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--redup-2);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity .4s;
}
.penanda.is-tampil { opacity: 1; }
.penanda i {
  font-style: normal;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cahaya);
  box-shadow: 0 0 10px 2px var(--pendar);
}

/* =========================================================================
   1. BUKAAN — lampu ruang tayang dinyalakan
   ========================================================================= */

.bukaan {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  border-top: 0;
  /* Padding bawaan .bidang dinolkan: bukaan sudah punya jarak sendiri di
     .bukaan__isi, dan kalau keduanya jalan, tinggi bukaan jadi 1.004 px di
     layar 860 px — satu layar penuh plus sisa yang tidak berisi apa-apa. */
  padding-block: 0;
}

.bukaan__gambar {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bukaan__gambar img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Lampu mati. JS menambah .is-nyala setelah gambar benar-benar termuat. */
  filter: brightness(.14) saturate(.25) contrast(1.05);
  transform: scale(1.08);
  transition: filter 2.1s var(--lentur), transform 2.6s var(--lentur);
  will-change: transform, filter;
}
.bukaan__gambar.is-nyala img {
  filter: brightness(.62) saturate(.95) contrast(1);
  transform: scale(1);
}

/* Setelah lampunya menyala penuh, gambar bernapas sangat pelan. Satu putaran
   28 detik — tidak akan pernah tertangkap mata sebagai animasi, tapi bikin
   layar tidak terasa seperti gambar mati. */
@keyframes napas-gambar {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}
.bukaan__gambar.is-nyala.is-bernapas img {
  animation: napas-gambar 28s ease-in-out infinite alternate;
  transition: filter 2.1s var(--lentur);
}
/* Tiga lapis penggelap, masing-masing punya tugas sendiri:
   1. dari kiri  — memberi teks bidang gelap untuk berdiri, TANPA menggelapkan
                   sisi kanan gambar. Menggelapkan seluruh render demi teks itu
                   membuang barang yang justru mau ditunjukkan.
   2. dari bawah — menyambung ke bagian berikutnya supaya tidak ada garis putus.
   3. sudut      — menahan pandangan tetap di tengah. */
.bukaan__gambar::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(8, 8, 10, .93) 0%, rgba(8, 8, 10, .82) 26%,
      rgba(8, 8, 10, .42) 54%, rgba(8, 8, 10, .12) 78%, transparent 100%),
    linear-gradient(to top, var(--hitam) 1%, rgba(8, 8, 10, .35) 26%, rgba(8, 8, 10, 0) 62%),
    radial-gradient(130% 92% at 62% 34%, transparent 0%, rgba(8, 8, 10, .38) 68%, rgba(8, 8, 10, .82) 100%);
}

/* Di layar sempit teksnya memenuhi lebar, jadi bidang gelapnya ikut merata. */
@media (max-width: 780px) {
  .bukaan__gambar::after {
    background:
      linear-gradient(to top, var(--hitam) 2%, rgba(8, 8, 10, .72) 42%, rgba(8, 8, 10, .5) 100%),
      radial-gradient(130% 92% at 50% 30%, transparent 0%, rgba(8, 8, 10, .5) 70%, rgba(8, 8, 10, .88) 100%);
  }
}

.bukaan__isi {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(72px, 10vw, 118px);
  padding-top: 148px;
}

/* Isi bukaan naik satu per satu, mengikuti lampu yang menyala. */
.bukaan__isi > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--lentur), transform 1.1s var(--lentur);
  transition-delay: var(--tunda, 0ms);
}
.bukaan__isi.is-tampak > * { opacity: 1; transform: none; }

.bukaan h1 {
  margin: 0;
  font-weight: 200;
  font-size: clamp(38px, 7.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -.045em;
  max-width: 15ch;
}
/* Baris ketiga sengaja lebih redup: kalimatnya memang jatuh ke sana, dan
   perbedaan terang bikin judul punya arah baca, bukan sekadar tiga baris. */
.bukaan h1 em {
  font-style: normal;
  color: var(--redup);
}

.bukaan__sub {
  margin: 26px 0 0;
  max-width: 54ch;
  color: var(--redup);
  font-size: clamp(16px, 1.9vw, 19px);
}

.bukaan__kaki {
  margin-top: clamp(34px, 5vw, 52px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  align-items: center;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--redup-2);
}

.turun {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--tinta);
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding-bottom: 8px;
  transition: gap .3s var(--lentur);
}
/* Dua garis bertumpuk: yang redup selalu ada, yang terang tumbuh dari kiri.
   Garis yang tumbuh selalu terasa lebih hidup daripada garis yang berganti warna. */
.turun::before, .turun::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
}
.turun::before { background: var(--garis-tebal); }
.turun::after {
  background: var(--cahaya);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--lentur);
}
.turun:hover { gap: 18px; }
.turun:hover::after { transform: scaleX(1); }

/* Garis tipis yang turun berulang di tepi bawah bukaan — penanda "masih ada
   di bawah" yang tidak perlu tulisan atau panah. */
.tarikan {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 64px;
  overflow: hidden;
  z-index: 1;
}
.tarikan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--pendar), transparent);
  animation: tarik 3.4s var(--lentur) infinite;
}
@keyframes tarik {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* =========================================================================
   2. MEJA CAHAYA — inti halaman
   ========================================================================= */

/* position:relative dipakai sebagai jangkar kartu catatan yang melayang. */
.meja { display: grid; gap: 20px; position: relative; }

/* --- bingkai gambar --- */
.meja__bingkai {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  cursor: crosshair;
}

.meja__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter .45s var(--lentur), opacity .4s;
}
.meja__bingkai.is-ganti .meja__foto { opacity: 0; }

/* Suhu cahaya — TIDAK me-render ulang apa pun, cuma menghangatkan tampilan
   layar. Labelnya di HTML wajib bilang begitu. */
.meja__bingkai[data-suhu="2700"] .meja__foto { filter: sepia(.30) saturate(1.15) brightness(1.02) hue-rotate(-8deg); }
.meja__bingkai[data-suhu="3000"] .meja__foto { filter: sepia(.14) saturate(1.06) brightness(1.01) hue-rotate(-4deg); }
.meja__bingkai[data-suhu="4000"] .meja__foto { filter: none; }
.meja__bingkai[data-suhu="5000"] .meja__foto { filter: saturate(.94) brightness(1.03) hue-rotate(4deg) contrast(1.02); }

/* --- kaca pembesar --- */
.kaca {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 1px solid var(--garis-tebal);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 22px 60px rgba(0,0,0,.6);
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  transition: opacity .18s, transform .18s var(--lentur);
  z-index: 4;
}
.kaca.is-tampil { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* --- titik catatan --- */
.titik {
  position: absolute;
  z-index: 5;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(8, 8, 10, .45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: transform .25s var(--lentur), background .25s;
}
.titik::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--cahaya);
  box-shadow: 0 0 12px 2px var(--pendar);
}
.titik::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .5s, transform .5s var(--lentur);
}
.titik:hover { transform: scale(1.18); }
.titik:hover::before,
.titik.is-aktif::before { opacity: 1; transform: scale(1); }
.titik.is-aktif { background: var(--cahaya); }
.titik.is-aktif::after { background: var(--hitam); box-shadow: none; }

/* Denyut sekali saat gambar baru dibuka, supaya titiknya ketahuan bisa diklik */
@keyframes denyut {
  0%   { box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 0 0 0 rgba(255,255,255,.34); }
  70%  { box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 0 0 16px rgba(255,255,255,0); }
  100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 0 0 0 rgba(255,255,255,0); }
}
.meja__bingkai.is-baru .titik { animation: denyut 2.4s var(--lentur) 2; }

/* Setelah denyut pembukanya lewat, titik tetap bernapas pelan-pelan. Ini yang
   membedakan gambar yang "bisa diklik" dari gambar yang diam saja — tanpa
   perlu tulisan "klik di sini". Tiap titik diberi jeda beda dari JS supaya
   tidak berdenyut serempak seperti lampu sirene. */
@keyframes napas-titik {
  0%, 100% { opacity: 0; transform: scale(.72); }
  45%      { opacity: .55; transform: scale(1.12); }
}
.titik::before { animation: napas-titik 4.2s var(--lentur) infinite; animation-delay: var(--tunda, 0s); }
.titik:hover::before,
.titik.is-aktif::before { animation: none; opacity: 1; transform: scale(1); }

/* --- kartu catatan --- */
.catatan {
  position: absolute;
  z-index: 6;
  width: min(300px, 74vw);
  background: rgba(14, 14, 17, .93);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--garis-tebal);
  border-radius: 3px;
  padding: 15px 17px 17px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .22s, transform .22s var(--lentur), visibility .22s;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .72);
}
.catatan.is-buka { opacity: 1; visibility: visible; transform: translateY(0); }
.catatan h4 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--redup-2);
  font-weight: 500;
}
.catatan p { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* --- cap "visualisasi 3D" --- */
.cap {
  position: absolute;
  left: 14px; top: 14px;
  z-index: 5;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(8, 8, 10, .72);
  border: 1px solid var(--garis-tebal);
  backdrop-filter: blur(6px);
  color: var(--tinta);
}

.penunjuk-kaca {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 5;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--redup);
  background: rgba(8, 8, 10, .6);
  padding: 6px 11px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: opacity .3s;
}
.meja__bingkai:hover .penunjuk-kaca { opacity: 0; }

/* --- kendali di bawah bingkai --- */
.meja__kendali {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--garis);
}

.suhu { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* .suhu boleh melipat, tapi dulu .suhu__pilihan di dalamnya tidak — empat
   tombol suhu terkunci berjajar. Akibatnya lebar terkecil blok ini 292px,
   dan itu menjadi lantai bagi SELURUH panel keterangan karya. Diukur
   21 Agu 2026 di layar 280px (Galaxy Fold terlipat): panelnya melebar sampai
   312px lalu dipotong `overflow-x: hidden` milik section — judul, rasa, dan
   putusan karya hilang di luar tepi tanpa bisa digulir. */
.suhu__pilihan { flex-wrap: wrap; }
.suhu__label {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--redup-2);
}
.suhu__pilihan { display: flex; gap: 6px; }
.suhu__pilihan button {
  appearance: none;
  background: none;
  border: 1px solid var(--garis);
  border-radius: 999px;
  color: var(--redup);
  font: inherit;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 6px 13px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .28s var(--lentur), border-color .28s var(--lentur);
}
/* Isian menyapu dari kiri, tidak berkedip ganti warna. Gerak arah kiri-ke-kanan
   ini yang bikin tombol terasa ditekan, bukan cuma berubah. */
.suhu__pilihan button::before,
.pilih button::before,
.tombol-indeks::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cahaya);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--lentur);
}
.suhu__pilihan button:hover::before,
.pilih button:hover::before,
.tombol-indeks:hover::before { transform: scaleX(1); }

.suhu__pilihan button:hover { color: var(--hitam); border-color: var(--cahaya); }
.suhu__pilihan button[aria-pressed="true"] {
  background: var(--cahaya);
  border-color: var(--cahaya);
  color: var(--hitam);
}

.meja__jujur {
  font-size: 12px;
  color: var(--redup-2);
  max-width: 46ch;
  line-height: 1.5;
}

/* --- keterangan karya ---
   Tiga kolom sejajar: judul, tuntutan, keputusan. Sebelumnya judul memakan
   satu baris penuh sendirian di atas dua kolom — tinggi yang terbuang. */
.meja__ket {
  display: grid;
  grid-template-columns: .9fr 1fr 1fr;
  gap: 24px 36px;
  align-items: start;
}
/* Anak grid bawaannya `min-width: auto` — artinya dia menolak menyempit lebih
   kecil dari isi terlebarnya, dan isi itu bisa mendorong seluruh kolom melebihi
   layar. Sama alasannya dengan `minmax(0, 1fr)` yang dipakai di breakpoint
   bawah; ini menutup jalur yang satunya lagi. */
.meja__ket > * { min-width: 0; }
.meja__ket h3 {
  margin: 0 0 7px;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.16;
  letter-spacing: -.024em;
}
.meja__ket .meta {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--redup-2);
}
.meja__ket dl { margin: 0; }
.meja__ket dt {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--redup-2);
  margin-bottom: 8px;
}
.meja__ket dd { margin: 0; color: var(--redup); font-size: 14.5px; line-height: 1.55; }

/* --- salinan teks meja cahaya ---
   Terlihat kalau JavaScript mati atau datanya gagal dimuat; disembunyikan JS
   begitu versi interaktifnya siap. Dibuat rapi, bukan asal — kalau suatu hari
   JavaScript-nya rusak, INI yang dilihat pengunjung. */
.cadangan {
  border-top: 1px solid var(--garis);
  padding-top: 26px;
  display: grid;
  gap: 26px;
}
.cadangan[hidden] { display: none; }
.cadangan > h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--redup-2);
  font-weight: 500;
}
.cadangan article {
  border-left: 1px solid var(--garis-tebal);
  padding-left: 18px;
}
.cadangan h4 {
  margin: 0 0 4px;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -.02em;
}
.cadangan .meta {
  margin: 0 0 12px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--redup-2);
}
.cadangan p { margin: 0 0 8px; font-size: 14.5px; color: var(--redup); line-height: 1.55; }
.cadangan p b { color: var(--tinta); font-weight: 400; }
.cadangan ul { margin: 12px 0 0; padding-left: 18px; }
.cadangan li { font-size: 14px; color: var(--redup); padding: 4px 0; line-height: 1.5; }
.cadangan li b { color: var(--tinta); font-weight: 400; }

/* --- deret kaca kecil --- */
.deret {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-3) transparent;
}
.deret::-webkit-scrollbar { height: 5px; }
.deret::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 3px; }

.deret button {
  flex: 0 0 auto;
  width: 132px;
  appearance: none;
  padding: 0;
  border: 1px solid var(--garis);
  border-radius: 2px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .25s, filter .35s, transform .25s var(--lentur);
  filter: brightness(.44) saturate(.5);
}
.deret button img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  transition: transform .7s var(--lentur);
}
/* Gambarnya yang bergerak di dalam bingkai yang diam — ini kesan "hidup" yang
   paling murah dan paling jarang terasa berlebihan. */
.deret button:hover img { transform: scale(1.07); }
.deret button:hover { filter: brightness(.82) saturate(.9); transform: translateY(-3px); }
.deret button[aria-current="true"] {
  filter: none;
  border-color: var(--cahaya);
  box-shadow: 0 0 0 1px var(--cahaya), 0 0 30px -4px var(--pendar);
}

/* =========================================================================
   3. CARA MEMBACA RUANG
   ========================================================================= */

/* Tiga aturan disusun BERDAMPINGAN, bukan bertumpuk. Versi sebelumnya tiga
   baris melebar penuh dan sendirian memakan 1.274 px — hampir satu setengah
   layar untuk tiga paragraf. Berdampingan, isinya sama tapi tingginya sepertiga. */
.aturan {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--garis);
  border: 1px solid var(--garis);
}
.aturan__sel {
  background: var(--hitam);
  padding: clamp(22px, 2.6vw, 30px);
  transition: background .55s var(--lentur);
  position: relative;
}
.aturan__sel:hover { background: var(--panel); }

/* Sepotong cahaya menyusur sisi atas kartu waktu kursor lewat. Kotak-kotak
   berpetak ini yang tadinya bikin halaman terasa seperti tabel; satu garis
   yang tumbuh dari kiri sudah cukup menghidupkannya. */
.aturan__sel::after,
.terima__sel::after,
.temu__sel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right, var(--cahaya), rgba(255,255,255,.18) 45%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--lentur);
}
.aturan__sel:hover::after,
.terima__sel:hover::after,
.temu__sel:hover::after { transform: scaleX(1); }

.aturan__no {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--redup-2);
  margin-bottom: 14px;
  transition: color .4s;
}
.aturan__sel:hover .aturan__no { color: var(--tinta); }
.aturan h3 {
  margin: 0 0 11px;
  font-weight: 300;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.25;
  letter-spacing: -.02em;
}
.aturan p { margin: 0; color: var(--redup); font-size: 14.5px; line-height: 1.56; }
.aturan__bukti {
  margin-top: 13px !important;
  padding-left: 14px;
  border-left: 1px solid var(--garis-tebal);
  font-size: 13.5px;
  color: var(--redup-2) !important;
}
.aturan__bukti b { color: var(--redup); font-weight: 400; }

/* =========================================================================
   4. YANG ANDA TERIMA
   ========================================================================= */

/* Isi berkas. Sekarang tinggal di dalam bagian pengukur lingkup, bukan bagian
   sendiri — dua-duanya menjawab pertanyaan yang sama, "saya dapat apa". */
.terima { margin-top: clamp(26px, 3.2vw, 40px); }
/* EMPAT sel, jadi jumlah kolomnya wajib pembagi empat: 4, 2, atau 1.
   `auto-fit minmax(200px,1fr)` yang dipakai sebelumnya memberi TIGA kolom di
   lebar tablet — sel keempat menggantung sendirian dengan 461 px kosong di
   sebelahnya. Ketahuan lewat sapuan ruang mati 15 Agu 2026, bukan lewat mata.
   Kalau nanti selnya ditambah jadi lima, angka kolom di sini harus dihitung
   ulang; auto-fit tidak akan menolong. */
.terima__kisi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--garis);
  border: 1px solid var(--garis);
}
@media (max-width: 1024px) {
  .terima__kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .terima__kisi { grid-template-columns: minmax(0, 1fr); }
}
.terima__sel {
  background: var(--hitam);
  padding: 20px 20px 24px;
  transition: background .55s var(--lentur);
  position: relative;
}
.terima__sel:hover { background: var(--panel); }
.terima__sel h4 {
  margin: 0 0 8px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -.01em;
}
.terima__sel ul { margin: 0; padding: 0; list-style: none; }
.terima__sel li {
  font-size: 13.5px;
  color: var(--redup);
  padding: 3px 0 3px 15px;
  position: relative;
  line-height: 1.45;
}
.terima__sel li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 1px;
  background: var(--garis-tebal);
}

/* =========================================================================
   5. PENGUKUR LINGKUP
   ========================================================================= */

.ukur {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 1px;
  background: var(--garis);
  border: 1px solid var(--garis);
}
.ukur__kiri, .ukur__kanan { background: var(--hitam); padding: clamp(26px, 3.4vw, 40px); }
.ukur__kanan { background: var(--panel); }

.kolom { margin-bottom: 30px; }
.kolom:last-child { margin-bottom: 0; }
.kolom > .label { margin-bottom: 13px; }

.pilih { display: flex; flex-wrap: wrap; gap: 7px; }
.pilih button {
  appearance: none;
  background: none;
  border: 1px solid var(--garis);
  border-radius: 2px;
  color: var(--redup);
  font: inherit;
  font-size: 13.5px;
  padding: 9px 15px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .28s var(--lentur), border-color .28s var(--lentur);
}
.pilih button:hover { color: var(--hitam); border-color: var(--cahaya); }
.pilih button[aria-pressed="true"] {
  background: var(--cahaya);
  border-color: var(--cahaya);
  color: var(--hitam);
}

.ket-pilih { margin: 11px 0 0; font-size: 13.5px; color: var(--redup-2); }

.geser { display: grid; gap: 12px; }
.geser__angka {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: clamp(30px, 4.6vw, 42px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1;
}
.geser__angka span { font-size: 14px; color: var(--redup-2); letter-spacing: .04em; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  background: none;
  cursor: pointer;
  margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--garis-tebal);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--cahaya);
  box-shadow: 0 0 16px 1px var(--pendar);
  border: 0;
}
input[type="range"]::-moz-range-track { height: 1px; background: var(--garis-tebal); }
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--cahaya);
  box-shadow: 0 0 16px 1px var(--pendar);
}

/* hasil */
.hasil { display: grid; gap: 1px; background: var(--garis); border: 1px solid var(--garis); }
.hasil__baris {
  background: var(--panel);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
}
.hasil__baris dt { font-size: 13.5px; color: var(--redup); }
.hasil__baris dd {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -.02em;
}
.hasil__baris dd small { font-size: 12.5px; color: var(--redup-2); margin-left: 5px; letter-spacing: 0; }

.fee {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--garis-tebal);
  border-radius: 3px;
  background: var(--panel-2);
}
.fee__angka {
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 6px 0 0;
}
.fee__ideal { margin: 12px 0 0; font-size: 14px; color: var(--redup); }
.fee__ideal b { color: var(--tinta); font-weight: 400; }

/* penanda status angka */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--garis-tebal);
  color: var(--redup);
  vertical-align: middle;
}
.status::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.status--asumsi { color: #d9d3c6; border-color: rgba(255,255,255,.34); }

.sumber {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--redup-2);
}
.sumber b { color: var(--redup); font-weight: 400; }

/* Asal angka tetap ada dan tetap bisa dibaca siapa pun — cuma dilipat.
   Sumber fee itu delapan baris; dibiarkan terbuka, dia mendorong seluruh
   halaman ke bawah demi keterangan yang dibaca satu dari seratus pembaca.
   Yang dilipat SUMBERNYA, bukan peringatannya: label "Acuan pasar" dan
   blok ASUMSI tetap terbuka di layar. */
.lipat { margin-top: 14px; border-top: 1px solid var(--garis); padding-top: 12px; }
.lipat summary {
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--redup-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: color .25s;
}
.lipat summary::-webkit-details-marker { display: none; }
.lipat summary::before {
  content: "+";
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
}
.lipat[open] summary::before { content: "–"; }
.lipat summary:hover { color: var(--tinta); }

/* =========================================================================
   6. TIGA KALI BERTEMU
   ========================================================================= */

.temu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--garis); border: 1px solid var(--garis); }
.temu__sel {
  background: var(--hitam);
  padding: clamp(22px, 2.6vw, 30px);
  position: relative;
  transition: background .55s var(--lentur);
}
.temu__sel:hover { background: var(--panel); }
.temu__no {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--redup-2);
  margin-bottom: 14px;
  transition: color .4s;
}
.temu__sel:hover .temu__no { color: var(--tinta); }
.temu h3 {
  margin: 0 0 10px;
  font-weight: 300;
  font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: -.02em;
  line-height: 1.22;
}
.temu p { margin: 0 0 13px; color: var(--redup); font-size: 14.5px; line-height: 1.56; }
.temu__gerbang {
  font-size: 12.5px;
  color: var(--redup-2);
  border-top: 1px solid var(--garis);
  padding-top: 11px;
  margin-bottom: 0 !important;
}
.temu__gerbang b { color: var(--tinta); font-weight: 400; }

/* =========================================================================
   7. BATAS KERJA
   ========================================================================= */

.batas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.4vw, 48px); }
.batas ul { margin: 0; padding: 0; list-style: none; }
.batas li {
  padding: 9px 0 9px 24px;
  border-bottom: 1px solid var(--garis);
  position: relative;
  font-size: 14.5px;
  color: var(--redup);
  line-height: 1.5;
}
.batas li::before {
  position: absolute;
  left: 0; top: 9px;
  font-size: 13px;
  color: var(--redup-2);
}
.batas__ya li::before { content: "✓"; color: var(--tinta); }
.batas__tidak li::before { content: "—"; }
.batas h3 {
  margin: 0 0 6px;
  font-weight: 400;
  font-size: 15.5px;
}

/* =========================================================================
   8. KONTAK
   ========================================================================= */

.kontak { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 4vw, 52px); align-items: start; }

.wa {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--cahaya);
  color: var(--hitam);
  text-decoration: none;
  font-size: 14.5px;
  letter-spacing: .01em;
  transition: transform .25s var(--lentur), box-shadow .3s;
}
.wa:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -12px var(--pendar); }

/* Blok data kantor. Isinya milik Jogja Interior — satu atap, bukan alamat
   karangan untuk unit ini. */
.kantor { margin: 24px 0 0; display: grid; gap: 15px; }
.kantor dt {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--redup-2);
  margin-bottom: 6px;
}
.kantor dd { margin: 0; font-size: 15px; color: var(--redup); line-height: 1.55; }
.kantor a {
  color: var(--redup);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.kantor a:hover { color: var(--tinta); border-color: var(--garis-tebal); }

.bawa { border: 1px solid var(--garis); padding: 24px; border-radius: 3px; background: var(--panel); position: relative; z-index: 1; }
.bawa ol { margin: 0; padding-left: 20px; }
.bawa li { font-size: 14.5px; color: var(--redup); padding: 5px 0; }
.bawa li b { color: var(--tinta); font-weight: 400; }

/* ---------- kaki ---------- */

.kaki {
  border-top: 1px solid var(--garis);
  padding-block: 38px 28px;
  font-size: 13.5px;
  color: var(--redup-2);
}
/* TIGA blok lagi sejak 21 Agu 2026 (blok "Satu grup" dikembalikan). Jumlah
   kolom SELALU dihitung ulang tiap jumlah bloknya berubah — kolom yang tidak
   habis membagi jumlah blok bikin baris terakhir menggantung, dan itu sudah
   pernah kejadian di sini. */
.kaki__isi { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 28px; }
.kaki h4 {
  margin: 0 0 11px;
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--redup-2);
  font-weight: 500;
}
.kaki ul { list-style: none; margin: 0; padding: 0; }
.kaki li { padding: 3px 0; color: var(--redup); line-height: 1.5; }
.kaki a { color: var(--redup); text-decoration: none; border-bottom: 1px solid transparent; }
.kaki a:hover { color: var(--tinta); border-color: var(--garis-tebal); }
.kaki__garis {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--garis);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-size: 12px;
}


/* ---------- muncul saat digulir ----------
   Yang bergerak ANAK-ANAKNYA, satu per satu, bukan seluruh bloknya sekaligus.
   Bedanya besar: blok utuh yang muncul serentak terbaca sebagai halaman yang
   dimuat; unsur yang menyusul satu-satu terbaca sebagai halaman yang menyala.
   Jeda tiap anak (--tunda) diisi JS supaya urutannya ikut urutan di HTML. */

.mc > *, .mc-solo {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .85s var(--lentur), transform .85s var(--lentur);
  transition-delay: var(--tunda, 0ms);
}
.mc.is-tampak > *, .mc-solo.is-tampak { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mc > *, .mc-solo { opacity: 1 !important; transform: none !important; transition: none !important; }
  .kepala__label::after { transform: scaleX(1) !important; transition: none !important; }
  .bukaan__gambar img,
  .bukaan__isi > * { transition: none !important; animation: none !important; }
  .meja__bingkai.is-baru .titik,
  .titik::before { animation: none !important; }
  .cahaya-ikut { display: none; }
  * { scroll-behavior: auto !important; }
}

/* =========================================================================
   TANGGA LEBAR LAYAR
   -------------------------------------------------------------------------
   Dibuat bertingkat, bukan satu lompatan dari desktop ke HP. Alasannya ada
   di kejadian nyata: versi sebelumnya cuma punya patahan di 960 px, dan di
   antara 700–960 px kolom teks aturan menyempit sampai satu kata per baris.

   Sebabnya satu pemilih yang meleset: `.aturan__baris > p:last-child`.
   Anak terakhir baris itu <div>, bukan <p>, jadi aturannya tidak pernah
   kena — div-nya jatuh ke kolom ketiga yang sudah tidak ada dan lebarnya
   menyusut jadi selebar kata terpanjang. Sekarang dipakai `> *:last-child`.
   Kalau menambah kolom di sini, cek ulang di 768 px sebelum yakin.
   ========================================================================= */

/* ---------- di atas 1024px: kepala seksi jadi dua kolom ----------
   Hasil sapuan ruang mati 15 Agu 2026 (SOP Web v2.2 Tahap 4): tiap kepala seksi
   menyisakan 487 px kosong di kanan judulnya, enam kali sepanjang halaman.
   Sebabnya `max-width` yang menjaga panjang baris — perlu, tapi bikin lubang.

   Jalan keluarnya bukan mencabut max-width (baris jadi kepanjangan dan susah
   dibaca), melainkan MENGISI lubangnya: paragraf pengantar pindah ke kanan
   judul, bukan di bawahnya.

   ⚠ Kepala seksi punya TIGA anak: label, h2, paragraf. Menaruh grid dua kolom
   begitu saja akan melempar paragrafnya ke kolom kiri baris kedua — persis
   jebakan "grid 2 kolom padahal anaknya 3" di katalog SOP. Jadi tiap anak
   ditempatkan eksplisit: label melebar penuh, h2 kiri, paragraf kanan. */
@media (min-width: 1025px) {
  .kepala {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(30px, 4vw, 64px);
    align-items: end;
  }
  /* :not() WAJIB. Labelnya juga sebuah <p>, jadi `.kepala p` menangkapnya juga —
     dan menang spesifisitas atas `.kepala__label`. Akibatnya label ikut lompat
     ke kolom kanan, menumpuk di atas paragraf pengantar. Pemilih yang menyaring
     berdasar isinya, bukan berdasar urutan, tidak bisa salah begitu. */
  /* max-width:none juga perlu — labelnya sebuah <p>, jadi ikut kena
     `max-width: 66ch` dari aturan dasar dan garis rambutnya berhenti di
     tengah, bukan sampai tepi kanan. */
  .kepala > .kepala__label { grid-column: 1 / -1; max-width: none; }
  .kepala h2 { grid-column: 1; max-width: none; }
  .kepala > p:not(.kepala__label) {
    grid-column: 2;
    max-width: none;
    margin-top: 0;
    padding-bottom: 5px;
  }
}

/* ---------- 1024px: tablet melintang ---------- */
@media (max-width: 1024px) {
  /* Keterangan karya: judul naik jadi satu baris sendiri, dua keterangan
     tetap berdampingan di bawahnya. */
  .meja__ket { grid-template-columns: 1fr 1fr; gap: 20px 32px; }
  .meja__ket > div:first-child { grid-column: 1 / -1; }
}

/* ---------- 900px: tablet tegak ---------- */
@media (max-width: 900px) {
  /* Tiga aturan jadi dua; yang ketiga melebar penuh. Di bawah ini tiga kolom
     sudah lebih sempit dari 200 px dan kalimatnya mulai patah tiap dua kata. */
  .aturan { grid-template-columns: 1fr 1fr; }
  .aturan__sel:last-child { grid-column: 1 / -1; }

  .temu { grid-template-columns: 1fr 1fr; }
  .temu__sel:last-child { grid-column: 1 / -1; }

  .ukur, .batas, .kontak { grid-template-columns: minmax(0, 1fr); }
  .batas, .kontak { gap: 32px; }

  /* Tiga blok di dua kolom = blok ketiga menggantung. Blok terakhir (kontak,
     yang paling panjang) dibiarkan melebar penuh. */
  .kaki__isi { grid-template-columns: 1fr 1fr; }
  .kaki__isi > div:last-child { grid-column: 1 / -1; }

  /* Kendali suhu dan kalimat penjelasnya berhenti berebut satu baris. */
  .meja__kendali { flex-direction: column; align-items: flex-start; gap: 14px; }
  .meja__jujur { max-width: none; }

  /* Penanda posisi disembunyikan: di layar selebar ini isi halaman sudah
     melebar sampai tepi kiri, dan penandanya menumpuk persis di atas teks. */
  .penanda { display: none; }
}

/* ---------- 760px ---------- */
/* ---------- layar sentuh, selebar apa pun ----------

   Sasaran sentuh 44px sebelumnya cuma menyala di bawah 680px, seolah-olah
   layar sempit = jari dan layar lebar = tetikus. Diukur 21 Agustus 2026 dan
   itu ternyata keliru: di iPad tegak (768px) tata letak desktop sudah aktif,
   jadi titik catatan kembali 26×26 px dan tombol suhu 69×34 px — di alat yang
   justru CUMA bisa disentuh. 29 kendali di bawah 44px pada satu layar.

   Lebar layar tidak pernah memberi tahu alat tunjuknya apa. `pointer: coarse`
   menanyakan yang sebenarnya: jari atau tetikus. Jadi aturan di bawah ini
   sengaja tidak punya batas lebar sama sekali.

   Isinya cuma ukuran sasaran sentuh — bukan tata letak. Tata letak tetap
   diatur lebar layar, karena iPad 1024px memang pantas dapat tata letak lebar;
   yang tidak pantas cuma tombol sebesar ujung pensil. */
@media (pointer: coarse), (max-width: 680px) {

  /* TITIK CATATAN — dua ukuran yang berbeda, dan itu disengaja:
     sasaran sentuh 44 × 44 px, titik yang TERLIHAT tetap 8 px.

     Diukur 9 Agu 2026: versi sebelumnya 20 × 20 px. Di bingkai selebar 330 px,
     enam titik sebesar jempol menutupi render yang justru mau ditunjukkan.

     ⚠ DIPERBAIKI 21 Agu 2026. Selama ini komentar di sini menulis bahwa kotak
     sentuhnya "tembus pandang" — padahal tidak pernah dibuat begitu. `.titik`
     tetap membawa latar gelap 45%, cincin putih, dan blur dari ukuran 26 px-nya.
     Waktu kotaknya dibesarkan jadi 44 px, semua itu ikut membesar: enam cakram
     gelap selebar 44 px menutupi render. Cacatnya tidak pernah terlihat karena
     cuma menyala di lebar HP, dan tangkapan layar HP selama ini berhenti di
     bagian pembuka. Yang benar: kotaknya benar-benar dikosongkan, dan seluruh
     tampilannya dipindah ke ::after.

     Catatan buat yang mengedit nanti: JANGAN mengecilkan width/height di sini
     untuk "merapikan tampilan". Yang mengatur tampilan itu ::after. */
  .titik {
    width: 44px; height: 44px; margin: -22px 0 0 -22px;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  /* Titik 8 px, dengan cincin gelapnya sendiri supaya tetap terbaca di atas
     render yang terang. Cincin ini menggantikan latar tombol yang dibuang. */
  .titik::after {
    inset: 18px;
    box-shadow: 0 0 0 5px rgba(8, 8, 10, .5), 0 0 12px 2px var(--pendar);
  }
  .titik::before { inset: 12px; }
  .titik.is-aktif { background: none; }
  .titik.is-aktif::after {
    background: var(--hitam);
    box-shadow: 0 0 0 5px var(--cahaya);
  }
  /* Tanpa tetikus tidak ada hover, jadi pembesarannya cuma bikin titik
     melompat waktu disentuh. */
  .titik:hover { transform: none; }

  .tombol-indeks,
  .indeks__tutup,
  .suhu__pilihan button,
  .pilih button,
  .lipat summary,
  .merek {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .indeks__tutup { min-width: 44px; }
  .turun { padding-block: 12px 14px; }
  .kantor a, .kaki a { display: inline-block; padding-block: 12px; }
  .deret button { min-height: 44px; }
  input[type="range"] { height: 44px; }
  input[type="range"]::-webkit-slider-thumb { margin-top: -7px; }

  /* Kaca pembesar mengikuti tetikus. Di layar sentuh tidak ada tetikus untuk
     diikuti, jadi ia cuma jadi lapisan mati di atas gambar. */
  .kaca, .penunjuk-kaca { display: none; }
  .meja__bingkai { cursor: default; }
}

@media (max-width: 760px) {
  .aturan, .temu { grid-template-columns: minmax(0, 1fr); }
  .aturan__sel:last-child,
  .temu__sel:last-child { grid-column: auto; }
  .meja__ket { grid-template-columns: minmax(0, 1fr); }
  .kepala h2 { max-width: none; }
}

/* ---------- layar kecil ---------- */

@media (max-width: 680px) {
  body { font-size: 16px; }
  .meja__ket { grid-template-columns: 1fr; }
  .kaki__isi { grid-template-columns: 1fr; }
  .meja__bingkai { aspect-ratio: 4 / 3; cursor: default; }
  .kaca { display: none; }
  .penunjuk-kaca { display: none; }
  .deret button { width: 108px; }
  .penanda { display: none; }
  .bukaan__isi { padding-top: 118px; }

  /* Sasaran sentuh dulu diatur di sini. Sekarang pindah ke blok
     `(pointer: coarse), (max-width: 680px)` di atas — supaya tablet sentuh
     yang lebarnya di atas 680px ikut kebagian. */

  /* Kartu catatan berhenti melayang dan jadi blok biasa tepat di bawah gambar.
     JS menulis left/top sebagai gaya sebaris, jadi di sini harus !important
     untuk mengalahkannya — bukan kemalasan, memang cuma itu jalannya.
     display:none dipakai (bukan sekadar visibility) supaya waktu tertutup dia
     tidak menyisakan lubang kosong di antara gambar dan kendali di bawahnya. */
  .catatan {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto;
    display: none;
    margin-top: -8px;
    box-shadow: none;
    background: var(--panel-2);
  }
  .catatan.is-buka { display: block; }
}