/* =========================================================================
   JANGKAR KUNINGAN
   Identitas visual dikunci 4 September 2026.

   Satu aturan yang mengikat seluruh berkas ini:
   LIME ADALAH BIDANG, BUKAN HURUF.
   #BFE408 di atas putih kontrasnya 1,47 — jauh di bawah ambang 4,5. Jadi lime
   selalu jadi latar, dan teks di atasnya selalu near-black. Untuk teks yang
   perlu terasa lime, turunan gelapnya #5A6B04 (5,93).
   ====================================================================== */

/* --- Huruf -------------------------------------------------------------
   Keduanya berlisensi terbuka (OFL dan UFL) dan di-self-host. Tidak ada
   permintaan ke fonts.googleapis.com — bukan demi kecepatan, tapi supaya
   tidak ada alamat IP pengunjung yang dikirim ke pihak ketiga tanpa alasan.

   Boldonse punya kotak baris alami ~1,93x ukuran huruf. Itu sebabnya semua
   line-height display di bawah 1,3–1,45 dan ukurannya ~30% lebih kecil
   daripada yang biasa dipakai untuk huruf tebal lain. Di bawah 1,3 barisnya
   bertabrakan.
   -------------------------------------------------------------------- */

@font-face {
  font-family: 'Boldonse';
  src: url('../fonts/boldonse.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/ubuntu-var.woff2') format('woff2-variations'),
       url('../fonts/ubuntu-var.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* --- Token -------------------------------------------------------------- */

:root {
  --putih:      #FFFFFF;
  --hitam:      #0E0E09;

  --lime:       #BFE408;
  --lime-2:     #D1F423;
  --lime-3:     #E0F66F;
  --lime-4:     #EEFBA7;
  --lime-5:     #F8FED9;
  --lime-tua:   #5A6B04;   /* 5,93 di atas putih — untuk teks */

  --abu:        #90947F;   /* 3,12 di atas putih — bidang dan garis saja, tidak pernah teks kecil */

  /* Teks sekunder. Sebelumnya #727565, dan itu keliru: 4,72 di atas putih
     MURNI, tapi cuma 4,31 di atas latar kartu #F4F5F1 dan 4,27 di atas
     lime-4 — dua-duanya di bawah ambang. Nilai ini lolos di seluruh latar
     terang yang dipakai tema: putih 5,39 · kartu 4,92 · lime-5 5,18 · lime-4 4,87. */
  --abu-teks:   #696C5B;
  --abu-garis:  #E4E6DE;
  --abu-muda:   #F4F5F1;

  --cyan:       #21C1D8;
  --pink:       #F179E2;

  --display: 'Boldonse', 'Arial Black', system-ui, sans-serif;
  --badan:   'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-xl: 30px;
  --r-l:  26px;
  --r-m:  20px;
  --r-s:  16px;
  --r-xs: 10px;
  --r-pil: 999px;

  --tepi: 20px;
  --lebar: 1440px;
}

@media (min-width: 900px) { :root { --tepi: 48px; } }

/* --- Dasar -------------------------------------------------------------- */

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

/* ATRIBUT hidden HARUS MENANG DARI display APA PUN.
   ======================================================================
   Aturan bawaan peramban untuk [hidden] cuma `display: none` dengan
   kekhususan (0,0,1) — kalah dari SETIAP kelas yang memasang display.
   Akibatnya el.hidden = true tidak menyembunyikan apa pun, dan tidak ada
   yang error: elemennya tetap terlihat, seolah baris JavaScript-nya tidak
   pernah jalan.

   DITEMUKAN 11 September lewat laporan Ajay: kotak saring di Jelajah
   memunculkan "Tidak ada yang cocok" untuk kata asal — jadi skripnya jelas
   jalan — tapi kartunya tidak pernah hilang satu pun. Sebabnya .kartu
   memasang display: flex, dan itu mengalahkan [hidden] bawaan. Artinya
   penyaring di halaman Jelajah TIDAK PERNAH benar-benar menyaring sejak
   pertama dibuat.

   Tema ini sudah tiga kali menambal gejala yang sama di tempat berbeda
   (.perbesar[hidden], .kirim .langkah [hidden], .laci-kain[hidden]) tanpa
   ada yang menyadari polanya. Satu baris di sini menutup semuanya,
   termasuk yang belum ditulis. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--putih);
  color: var(--hitam);
  font-family: var(--badan);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* Jarak antarbaris — DIUKUR, bukan dikira-kira.
   Diperbaiki 7 September 2026 setelah barisnya masih bersentuhan.
   
   Cara mengukurnya: judul dirender di browser, lalu jarak TINTA antar-baris
   dihitung dari pikselnya. Hasilnya mengagetkan — pada 1,5 pita tintanya
   terbaca sebagai satu blok utuh, artinya barisnya benar-benar bersentuhan,
   bukan sekadar rapat. Pada h2 dengan 1,45, sama.
   
       hero  1,5  -> bersentuhan di 1440 maupun 390
       hero  1,7  -> renggang 8 px di 1440, 4 px di 390
       hero  1,9  -> renggang 16 px di 1440, 9 px di 390
       h2    1,45 -> bersentuhan
       h2    1,8  -> renggang 5 px
   
   Jadi 1,8 untuk semua judul, 1,9 untuk judul hero yang paling besar.
   Angka ini bukan selera: kotak baris alami Boldonse memang 1,93x ukuran
   hurufnya. Selama ini saya melawan metrik hurufnya sendiri, dan huruf itu
   yang menang. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(29px, 5.6vw, 58px); }
h2 { font-size: clamp(18px, 2.4vw, 30px); }
h3 { font-size: clamp(15px, 1.5vw, 19px); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--lime-tua);
  outline-offset: 3px;
  border-radius: 4px;
}

.lompat {
  position: absolute; left: -9999px;
  background: var(--hitam); color: var(--lime);
  padding: 12px 20px; z-index: 100;
}
.lompat:focus { left: 12px; top: 12px; }

.tersembunyi {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.bungkus {
  max-width: var(--lebar);
  margin: 0 auto;
  padding-inline: var(--tepi);
}

/* --- Kepala ------------------------------------------------------------- */

.kepala {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--abu-garis);
}

.kepala__isi {
  /*
   * Tepi kepala halaman punya nama sendiri karena DUA hal harus memakainya:
   * padding baris ini, dan posisi kiri/kanan kotak cari waktu ia mengembang
   * di ponsel (ia absolut, jadi ia tidak ikut padding induknya sendiri).
   * Di bawah 340px nilainya dikecilkan — dan dengan satu nama, keduanya ikut
   * mengecil bersama. Waktu masih dua angka terpisah, kotak carinya meleset
   * 8px dan huruf pertama logo mengintip dari baliknya.
   */
  --tepi-kepala: var(--tepi);

  display: flex; align-items: center; gap: 20px;
  min-height: 62px;
  padding-inline: var(--tepi-kepala);
}

.kepala__logo { flex: none; display: flex; align-items: center; }
/* 27px, naik dari 22px. Kepala halaman tetap 62px, jadi ruang napasnya masih
   cukup — di atas ini logonya mulai menekan tepi dan kepala terasa penuh. */
.kepala__logo svg, .kepala__logo img { height: 27px; width: auto; }

@media (max-width: 480px) {
  /* Di layar sempit, logo bersaing dengan tiga tautan menu. Yang mengalah
     logonya — menu yang mengalah akan menghilangkan jalan keluar. */
  .kepala__logo svg, .kepala__logo img { height: 23px; }
}

.kepala__nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  font-size: 14px;
}

.kepala__nav a {
  text-decoration: none;
  padding: 7px 13px;
  border-radius: var(--r-pil);
  color: var(--abu-teks);
}
.kepala__nav a:hover { background: var(--lime-5); color: var(--hitam); }
.kepala__nav a[aria-current] { background: var(--lime); color: var(--hitam); font-weight: 500; }

.kepala__kirim {
  background: var(--hitam) !important;
  color: var(--putih) !important;
  font-weight: 500;
}
.kepala__kirim:hover { background: var(--lime-tua) !important; }

/* --- Kotak cari di kepala halaman --------------------------------------

   MENGEMBANG WAKTU DIKLIK, TANPA JAVASCRIPT.

   Sebelum diklik: satu lingkaran lime berisi kaca pembesar. Diklik: melebar
   jadi kapsul putih dengan kotak teksnya. Diminta Ajay 17 September 2026.

   Mesinnya cuma dua hal bawaan: ikonnya sebuah <label for> — mengkliknya
   memindahkan fokus ke input — dan :focus-within yang melebarkan kotaknya.
   Tidak ada skrip yang perlu dimuat, jadi tidak ada keadaan "ikonnya muncul
   tapi belum bisa diklik".

   UKURANNYA TIDAK PERNAH BERUBAH TINGGINYA. Tingginya dikunci 40px dan
   bingkainya selalu ada — cuma warnanya yang berganti dari transparan jadi
   hitam. Kalau bingkainya baru muncul waktu mengembang, seluruh baris kepala
   halaman ikut bergeser 2px tiap kali diklik.
   ---------------------------------------------------------------------- */

.kepala__cari {
  flex: none;
  margin-left: 6px;
  display: flex;
  align-items: center;
  height: 40px;
  border: 1px solid transparent;
  border-radius: var(--r-pil);
  background: transparent;
  transition: background .18s ease, border-color .18s ease;
}

.kepala__cari-ikon {
  flex: none;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--hitam);
  cursor: pointer;
  transition: background .18s ease, width .22s ease;
}
.kepala__cari-ikon:hover { background: var(--lime-tua); color: var(--putih); }

.kepala__cari-ketik {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  background: transparent;
  font-family: var(--badan);
  font-size: 14px;
  line-height: 1.4;
  color: var(--hitam);
  transition: width .22s ease, opacity .16s ease, padding .22s ease;
}
.kepala__cari-ketik::placeholder { color: var(--abu-teks); }
.kepala__cari-ketik:focus { outline: none; }

/* Mengembang: waktu ada yang fokus di dalamnya, atau waktu pencariannya
   memang sedang berlaku (?cari= di alamat). */
.kepala__cari:focus-within,
.kepala__cari--isi {
  background: var(--putih);
  border-color: var(--hitam);
}
.kepala__cari:focus-within .kepala__cari-ikon,
.kepala__cari--isi .kepala__cari-ikon {
  background: transparent;
  color: var(--hitam);
  width: 34px;
}
.kepala__cari:focus-within .kepala__cari-ketik,
.kepala__cari--isi .kepala__cari-ketik {
  width: 210px;
  opacity: 1;
  padding: 0 14px 0 2px;
}

@media (max-width: 860px) {
  /* Menunya mulai rapat. Yang mengalah lebar kotak teksnya waktu mengembang —
     bukan kotaknya yang dihapus. Sebelum 17 September kotak cari memang hilang
     sama sekali di bawah lebar ini, dan itu yang sedang diperbaiki. */
  .kepala__cari:focus-within .kepala__cari-ketik,
  .kepala__cari--isi .kepala__cari-ketik { width: 170px; }
}

@media (max-width: 640px) {
  .kepala__nav { gap: 2px; font-size: 13px; }
  .kepala__nav a { padding: 6px 9px; }
}

/*
 * Di bawah 480px menunya jadi lima: Beranda, Jelajah, Tentang, Kenalin, dan
 * ikon cari. Diukur dengan peramban sungguhan, susunan sebelumnya meluber ke
 * samping mulai 390px — lebar iPhone 12 sampai 15, dan 360px lebar sebagian
 * besar Android. Itu bukan lebar pinggiran; justru itu yang paling banyak
 * dipakai orang membuka Jangkar.
 *
 * Yang mengalah jaraknya, bukan menunya. Menghapus satu tautan berarti
 * menghapus jalan, dan yang pertama tergoda dihapus justru Beranda — padahal
 * itu yang barusan ditambahkan karena orang memang mencarinya.
 */
@media (max-width: 480px) {
  .kepala__isi { gap: 8px; }
  .kepala__nav { gap: 0; font-size: 12px; }
  .kepala__nav a { padding: 6px 7px; }
}

/*
 * .kepala__cari-kecil SUDAH TIDAK ADA LAGI.
 *
 * Ia dulu tautan berbentuk ikon yang muncul menggantikan kotak cari di layar
 * sempit — dan yang dituju cuma halaman Jelajah, alamat yang sama persis
 * dengan tautan "Jelajah" di sebelahnya. Jadi ia tidak pernah benar-benar
 * jadi pencarian, cuma terlihat seperti pencarian.
 *
 * Sejak 17 September kotak carinya yang sungguhan hadir di semua lebar, jadi
 * penggantinya tidak diperlukan lagi. Aturan-aturan yang dulu menyembunyikan
 * dan memunculkannya ikut dibuang, bukan disisakan sebagai CSS yang tidak
 * menunjuk apa-apa.
 */

/*
 * 320px — iPhone SE generasi pertama, layar sampul ponsel lipat. Melepas ikon
 * cari saja masih kurang. Sisanya diambil dari tepi kepala halaman dan dari
 * logonya, BUKAN dari ukuran huruf menu: di bawah 12px tautan ini mulai sulit
 * dibaca dan sulit ditekan dengan jempol.
 *
 * Tepi yang disempitkan cuma tepi kepala halaman; --tepi untuk seluruh situs
 * dibiarkan 20px supaya isi halaman tidak ikut menempel ke pinggir.
 *
 * Ambangnya 340px, bukan 400px: di 360px ke atas ruangnya masih longgar (52px
 * tersisa, diukur), jadi tidak ada alasan mengecilkan logo di sana.
 */
@media (max-width: 340px) {
  .kepala__isi {
    --tepi-kepala: 12px;
    gap: 6px;

    /*
     * Jaring pengaman untuk layar yang lebih sempit lagi — peramban dengan
     * huruf diperbesar, atau jendela yang diperkecil sampai ekstrem. Diukur:
     * tanpa ini, di 300px kepalanya meluber 2px dan seluruh halaman bisa
     * digeser ke samping. Dengan wrap, menunya turun ke baris kedua alih-alih
     * mendorong halaman. Di 320px ke atas ini tidak pernah aktif.
     */
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .kepala__logo svg, .kepala__logo img { height: 21px; }
  .kepala__nav a { padding: 6px 5px; }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--hitam);
  color: var(--putih);
  border-radius: var(--r-xl);
  padding: 42px var(--tepi) 54px;
  margin-top: 22px;
  overflow: visible;
}

/* Baris penjelas — kecil, di atas judul. Ia yang mengerjakan pekerjaan
   sebenarnya: pengunjung yang cuma membaca satu baris tetap tahu ini situs apa. */
.hero__alis {
  color: #C7C9BF;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .01em;
  margin: 0 0 16px;
  max-width: 34ch;
}

.hero__judul {
  color: var(--putih);
  font-size: clamp(23px, 3.6vw, 40px);
  line-height: 1.9;   /* diukur: 16 px renggang di 1440, 9 px di 390 */
  max-width: 20ch;
}
/* Kalimat kedua mulai di barisnya sendiri. Keduanya kalimat penuh dengan bobot
   yang mirip, jadi pergantian warna di tengah baris membuat keduanya terbaca
   seperti satu kalimat panjang yang putus — bukan dua pernyataan. */
.hero__lime { color: var(--lime); display: block; }

/* "ngait ka lemah cai" — Boldonse cuma punya satu gaya, jadi miringnya
   disintesis browser dan hasilnya kasar. Dimiringkan tipis sendiri (7°) supaya
   terkendali, tanpa menumpuk dengan huruf sebelahnya. */
.hero__judul i {
  font-style: normal;
  display: inline-block;
  transform: skewX(-7deg);
}

/* --- Jejaring hero -----------------------------------------------------
   Kalimat positioning yang digambar, bukan hiasan. Di HP tidak muat
   berdampingan, jadi disembunyikan — bukan dipaksa mengular di bawah teks.

   ATURAN YANG MENGIKAT GERAKANNYA: tidak ada animasi yang boleh MEMINDAHKAN
   simpul. Kalau simpulnya bergeser, ujung garisnya tidak ikut — garisnya lepas
   dan menggantung, dan pada gerakan yang berulang terus itu akan terlihat.
   Jadi yang beranimasi cuma denyut, kilau, dan opasitas: geometrinya diam,
   energinya yang bergerak.

   Semua daur dipilih agar bilangan bulat detik dan berujung sama dengan
   awalnya, jadi perulangannya tidak pernah tersentak.
   -------------------------------------------------------------------- */

.hero__rantai,
.hero__jejaring { display: none; }

.hero__jejaring { width: 100%; max-width: 440px; height: auto; }

/* Garis dasar — meredup dan menyala pelan, seperti jejaring yang bernapas. */
.hero__jejaring .jk-garis {
  stroke: #4A5138;
  stroke-width: 1.6;
  stroke-linecap: round;
  animation: jk-napas 7s ease-in-out infinite;
}

/* Denyut lime yang berjalan di sepanjang garis utama.
   pathLength="100" menyeragamkan panjang tiap garis jadi 100 satuan, jadi
   denyutnya melaju di kecepatan yang sama meski garisnya beda panjang —
   tanpa itu, garis pendek akan terlihat tersentak. */
.hero__jejaring .jk-alir {
  stroke: var(--lime);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 16 84;
  animation: jk-alir 3.2s linear infinite;
}

/* Cincin yang memancar dari simpul terbesar. */
.hero__jejaring .jk-cincin {
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: jk-denyut 4.8s ease-out infinite;
}

.hero__jejaring .jk-n {
  transform-box: fill-box;
  transform-origin: center;
  animation: jk-kilau 5.6s ease-in-out infinite;
}

.hero__jejaring .jk-n--utama  { fill: var(--lime); }
.hero__jejaring .jk-n--isi    { fill: var(--cyan); }
.hero__jejaring .jk-n--redup  { fill: #6E7458; }
.hero__jejaring .jk-n--cincin { fill: var(--hitam); stroke: #7C8265; stroke-width: 1.5; }

@keyframes jk-napas {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

@keyframes jk-alir {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@keyframes jk-denyut {
  0%       { transform: scale(1);   opacity: .55; }
  70%      { transform: scale(2.6); opacity: 0; }
  100%     { transform: scale(2.6); opacity: 0; }
}

@keyframes jk-kilau {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.09); }
}

/* Gerakan dimatikan penuh kalau sistemnya minta begitu. Gambarnya tetap utuh
   dan tetap menyampaikan hal yang sama — yang hilang cuma geraknya. */
@media (prefers-reduced-motion: reduce) {
  .hero__jejaring .jk-garis,
  .hero__jejaring .jk-alir,
  .hero__jejaring .jk-cincin,
  .hero__jejaring .jk-n { animation: none; }
  .hero__jejaring .jk-garis { opacity: .8; }
  .hero__jejaring .jk-cincin { opacity: .35; }
}

/* Lingkaran hitungan. Di sini line-height 1,5 justru merugikan — angka dan
   labelnya cuma dua baris pendek yang harus terbaca sebagai satu satuan, jadi
   kotak barisnya dirapatkan sendiri, bukan diwarisi dari aturan judul. */
.hero__angka {
  position: absolute; right: 24px; bottom: -38px;
  width: 92px; height: 92px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--lime);
  color: var(--hitam);
  border: 4px solid var(--putih);
  border-radius: 50%;
  transform: rotate(-7deg);
  font-family: var(--display);
  font-size: 26px;
  /* 1,15 bukan 1: pada line-height 1 huruf Boldonse meluber keluar kotak
     barisnya dan labelnya tertimpa. Ini nilai paling rapat yang masih bersih. */
  line-height: 1.15;
}
.hero__angka small {
  font-family: var(--badan);
  font-size: 9px; font-weight: 500;
  line-height: 1;
  margin-top: 2px;
  letter-spacing: .09em; text-transform: uppercase;
}

@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 64px 56px 72px; }
  .hero__kata { max-width: 44ch; }
  .hero__angka { right: 48px; bottom: -44px; width: 118px; height: 118px; font-size: 34px; }
  .hero__rantai,
  .hero__jejaring { display: block; justify-self: center; max-width: 100%; }
}

/* --- Bagian ------------------------------------------------------------- */

.bagian { margin-top: 64px; }

.bagian__kepala {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 20px;
}
.bagian__kepala h2 { flex: 1; }

/* Tautan "Lihat semua" yang duduk di bawah kisi, bukan di sebelah judul. */
.bagian__kaki { display: flex; justify-content: center; margin-top: 24px; }

.tautan-kecil {
  font-size: 13px; font-weight: 500;
  color: var(--lime-tua);
  text-decoration: none;
  white-space: nowrap;
}
.tautan-kecil:hover { text-decoration: underline; }

/* --- Kartu -------------------------------------------------------------- */

.kartu {
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none;

  /* 20px, turun dari 26px pada 9 September.
     Nama entitas dicetak di pojok kiri bawah, dan lengkungan besar memakan
     ruang tepat di situ. Diukur di Chromium: pada 26px lengkungannya masuk
     2,0px ke dalam padding kiri kartu jelajah dan 4,8px di kartu "yang udah
     nyambung" versi HP — dari padding yang cuma 11px. Pada 20px tinggal
     0,4px dan 2,1px. */
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--abu-muda);

  /* Garis rambut yang sama dengan .profil__potret, dan alasannya juga sama.
     Diterapkan 10 September, sesudah bingkai potret diberi garis: tanpa ini,
     kartu jadi satu-satunya bidang di situs yang batasnya cuma ditentukan
     warna isiannya sendiri — dan untuk entitas yang fotonya berlatar putih,
     batas itu hilang sama sekali di tepi atas kartu.

     Berlaku untuk SEMUA kartu tanpa kecuali, termasuk yang fotonya gelap dan
     sudah punya batas sendiri. Garis yang cuma muncul kadang-kadang bukan
     garis, melainkan gejala — dan orang akan menghabiskan waktu menebak
     aturannya. */
  border: 1px solid var(--abu-garis);

  transition: transform .16s ease;
}
.kartu:hover { transform: translateY(-3px); }

/* Menempel ke tepi bawah area foto, di atas nama tapi masih di dalam gambar. */
.kartu__pil {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  background: var(--putih);
  color: var(--hitam);

  /* Garis rambut, sama dengan bidang bergambar lainnya.
     Kapsul putih ini duduk DI ATAS gambar, jadi selama gambarnya berwarna ia
     punya batas sendiri. Begitu gambarnya berlatar putih — logo transparan,
     ilustrasi berlatar kertas — batas itu hilang dan kapsulnya larut. Sudah
     terjadi sebelum 11 September pada kartu ilustrasi berlatar putih; sejak
     logo transparan ikut berlatar putih, kejadiannya jadi sering. */
  border: 1px solid var(--abu-garis);
  font-size: 9px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pil);
  max-width: calc(100% - 20px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.kartu__gambar {
  position: relative;   /* jangkar untuk kapsul bidang di dalamnya */
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;
  background: var(--lime-4);
  overflow: hidden;
}
/*
 * POTONGANNYA DARI TENGAH, BUKAN DARI ATAS.
 *
 * Sebelumnya cuma width/height 100% + object-fit: cover, dan foto tegak selalu
 * terpotong dari atas — kepala orang kepotong, bagian bawahnya hilang sama
 * sekali. Diukur dengan gambar uji tiga pita warna (merah-hijau-biru dari atas
 * ke bawah): pita merah 47%, pita biru 7%. Kalau benar-benar tengah, merah dan
 * biru harus sama banyak.
 *
 * Sebabnya BUKAN object-position — nilainya memang sudah 50% 50%. Sebabnya
 * gambar itu anak grid, dan barisnya berukuran auto. Baris auto mengambil
 * tinggi max-content, yaitu tinggi asli gambarnya (630px untuk kotak 300px),
 * jadi height: 100% justru ikut ke 630px, meluber ke bawah, dan yang terlihat
 * di dalam kotak tinggal bagian atasnya. Menambahkan place-self: stretch atau
 * mengubah object-position tidak menolong sama sekali: barisnya yang salah,
 * bukan gambarnya.
 *
 * Jadi gambarnya dikeluarkan dari aliran grid — position: absolute; inset: 0.
 * Sekarang tinggi barisnya tidak lagi ditentukan gambar, kotaknya tetap seukuran
 * yang diminta, dan cover memotong dari tengah seperti seharusnya.
 *
 * place-items: center di induk tetap dipertahankan, karena itu yang
 * menengahkan .kartu__inisial waktu entri belum punya foto.
 */
.kartu__img {
  position: absolute; inset: 0;
  z-index: 0;   /* .kartu__pil ditulis lebih dulu di HTML — tanpa ini fotonya menimbun */
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Logo di kartu: sama dengan .profil__potret --------------------------
   Ditambahkan 11 September. Sebelumnya SEMUA gambar kartu dipotong persegi,
   jadi logo transparan tampil dalam dua rupa: utuh di halaman profilnya
   sendiri, terpotong di atas bidang lime waktu berdampingan dengan entitas
   lain di Jelajah. Yang paling terasa justru waktu keduanya dilihat berturutan
   — orang mengira itu dua gambar yang berbeda.

   Angkanya sengaja sama persis dengan bingkai potret: 82% untuk logo, 100%
   untuk spanduk, latar putih. Kalau salah satunya digeser tanpa yang lain,
   ada ujinya. */
.kartu__gambar--utuh { background: var(--putih); }

.kartu__gambar--utuh .kartu__img {
  /* Tetap absolut dengan inset 0, lalu ditengahkan margin: auto — trik yang
     sama dengan .profil__potret--utuh, dan alasannya juga sama: barisnya grid,
     dan gambar yang ikut aliran grid akan menarik tingginya sendiri. */
  margin: auto;
  width: auto; height: auto;
  max-width: 82%; max-height: 82%;
  object-fit: contain;
}

.kartu__gambar--spanduk .kartu__img { max-width: 100%; max-height: 100%; }

/* Inisial besar. Ini bukan gaya-gayaan: entri tanpa foto justru jadi kartu
   paling ramai dilihat, karena Core Value kedua berbunyi tayang dulu,
   lengkapi sambil jalan. */
.kartu__inisial {
  font-family: var(--display);
  font-size: clamp(38px, 13vw, 58px);
  line-height: 1.3;
}

.kartu__isi { padding: 13px 15px 16px; }

.kartu__nama {
  display: block;
  font-weight: 500; font-size: 15px; line-height: 1.35;
}
.kartu__lokasi {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--abu-teks);
}

/* --- Petak jelajah ------------------------------------------------------ */

.petak {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 14px;
}

@media (min-width: 900px) {
  .petak { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 20px; }
}

/* --- Bento beranda ------------------------------------------------------
   Kartu dengan lebar dan tinggi berbeda. Ini yang membuat entri yang datanya
   sedikit tidak kelihatan bolong — kartunya kecil, bukan kartu besar yang
   setengah kosong. */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

/* LEBAR KARTU: DUA URUTAN TERPISAH, HP DAN DESKTOP.
   Dulu satu urutan melayani keduanya karena kebetulan berjumlah 12 di dua
   lebar layar sekaligus. Kebetulan itu habis begitu susunan desktop diganti
   jadi pola berputar — jadi sekarang tiap kartu membawa dua kelas, dan
   masing-masing lebar layar dijamin sendiri-sendiri. */
/*
 * Kartu kolam: dicetak ke HTML, tidak ditampilkan.
 *
 * Beranda di-cache, jadi sembilan yang tampil dipilih di sisi pengunjung dari
 * kolam 24 (lihat front-page.php). Baris ini yang membuat halaman tetap benar
 * kalau JavaScript mati: yang lewat dari sembilan disembunyikan, dan sembilan
 * pertama sudah membawa kelas posisinya dari PHP.
 */
.bento > *:nth-child(n+10) { display: none; }

.bento > * { grid-column: span 12; }
.bento > .b-hp-12 { grid-column: span 12; }
.bento > .b-hp-7  { grid-column: span 7; }
.bento > .b-hp-5  { grid-column: span 5; }

.bento .kartu--bento .kartu__gambar { aspect-ratio: auto; height: 160px; }
.bento > .b-hp-12 .kartu__gambar { height: 200px; }

/* BLOK NAMA DI HP: dirampingkan.
   Dengan padding dan ukuran huruf yang sama seperti di desktop, blok abu-abu
   di bawah foto memakan sekitar 37% tinggi kartu — di kartu selebar 130px itu
   terbaca seperti label yang menempel di atas foto, bukan keterangan di
   bawahnya. Yang dikecilkan cuma jarak dan ukuran hurufnya; isinya tetap sama,
   dan di desktop tidak ada yang berubah. */
/* BLOK NAMA DI HP — dipakai bento DAN blok "Yang udah nyambung".
   Ditulis sekali dengan dua pemilih, bukan disalin dua kali: begitu disalin,
   suatu hari salah satunya akan diubah dan yang lain ketinggalan, dan dua
   blok kartu di halaman yang sama jadi berbeda tanpa alasan. */
@media (max-width: 899px) {
  .bento .kartu__isi,
  .nyambung .kartu__isi { padding: 9px 11px 11px; }

  /* Padding 11px itu yang paling sempit di seluruh situs, jadi lengkungannya
     ikut paling kecil. Pada 16px lengkungan cuma masuk 0,8px. */
  .nyambung .kartu { border-radius: var(--r-s); }

  .bento .kartu__lokasi,
  .nyambung .kartu__lokasi { font-size: 11px; margin-top: 2px; }

  /* Nama dibatasi dua baris. Di kartu selebar 126px (layar 360px), nama seperti
     "Dapoer Nona Ketjil" memanjang jadi tiga baris — bloknya membengkak DAN
     menarik naik tinggi kartu di sebelahnya, karena keduanya sebaris di kisi.
     Dua baris cukup untuk hampir semua nama; yang lebih panjang dipotong, dan
     nama utuhnya tetap ada di halaman profilnya.

     Di blok "Yang udah nyambung" kartunya lebih sempit lagi — dua kartu plus
     kolom rantai 52px di dalam satu layar — jadi justru di sana batas ini yang
     paling sering kepakai. */
  .bento .kartu__nama,
  .nyambung .kartu__nama {
    font-size: 13.5px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* --- LENGKUNGAN SUDUT: dua nilai, tempatnya berpindah ---------------------
 *
 * Diukur dari sketsa: kecil 18px pada blok setinggi 224px, besar 48px —
 * sekitar 0,21 tinggi blok. Nilainya di bawah mengikuti perbandingan itu
 * terhadap tinggi kartu yang sebenarnya (217px di HP, 351px di desktop).
 *
 * KIRI BAWAH TIDAK PERNAH BESAR. Nama entitas dicetak di pojok itu, dan
 * lengkungan besar akan memakan huruf pertamanya. Karena itu tidak ada kelas
 * b-r-bl sama sekali — bukan sekadar tidak dipakai, tapi memang tidak ada,
 * supaya tidak bisa dipasang tanpa sengaja.
 *
 * Radius dasar di HP juga diturunkan dari 26px ke 18px: di kartu selebar 126px
 * lengkungan 26px membuat baris terakhir nama menempel ke tepi lengkungnya.
 */
.bento .kartu { border-radius: 18px; }
.bento > .b-r-tr .kartu,
.bento > .b-r-tl-tr .kartu { border-top-right-radius: 44px; }
.bento > .b-r-tl .kartu,
.bento > .b-r-tl-br .kartu,
.bento > .b-r-tl-tr .kartu { border-top-left-radius: 44px; }
.bento > .b-r-br .kartu,
.bento > .b-r-tl-br .kartu { border-bottom-right-radius: 44px; }

@media (min-width: 900px) {
  .bento { gap: 20px; }

  .bento .kartu { border-radius: var(--r-l); }
  .bento > .b-r-tr .kartu,
  .bento > .b-r-tl-tr .kartu { border-top-right-radius: 72px; }
  .bento > .b-r-tl .kartu,
  .bento > .b-r-tl-br .kartu,
  .bento > .b-r-tl-tr .kartu { border-top-left-radius: 72px; }
  .bento > .b-r-br .kartu,
  .bento > .b-r-tl-br .kartu { border-bottom-right-radius: 72px; }


  /* POLA BERPUTAR: 4+5+3 | 5+3+4 | 3+4+5.
     Tiap baris berjumlah 12, dan tiap ukuran muncul sekali per baris di
     posisi yang bergeser — jadi tidak ada dua kartu selebar sama yang
     berdampingan di kolom yang sama antar baris. */
  .bento > .b-dk-3 { grid-column: span 3; }
  .bento > .b-dk-4 { grid-column: span 4; }
  .bento > .b-dk-5 { grid-column: span 5; }

  /* TINGGI SERAGAM. Sebelumnya 300/262/230 mengikuti lebarnya, dan barisnya
     jadi bergerigi. Dengan satu tinggi, yang membedakan kartu cuma lebarnya —
     dan barisnya terbaca sebagai baris. */
  .bento .kartu--bento .kartu__gambar { height: 280px; }
  .bento > .b-hp-12 .kartu__gambar { height: 280px; }
}

/* --- Blok "Yang nyambung" ----------------------------------------------
   Sepasang entitas dengan simpul di antaranya. SENGAJA bukan peta jejaring:
   peta jadi halaman tersendiri (diputuskan 4 September 2026). Blok ini cuma
   perlu menyampaikan gagasannya, dan untuk itu dua entitas sudah cukup. */

.nyambung-dua {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 56px;
  align-items: start;
}

.nyambung__ket {
  margin: 14px 0 0;
  color: var(--abu-teks);
  font-size: 14px;
}

.nyambung {
  display: grid;
  gap: 0;
  /* Kolom tengah diberi lebar tetap supaya garis penghubungnya punya ruang
     untuk benar-benar MENYAMBUNG kedua kartu. Dengan lebar 'auto', garisnya
     cuma sepanjang teksnya dan simpulnya jadi mengambang. */
  grid-template-columns: 1fr 118px 1fr;
  align-items: stretch;
}

/* Kalau cuma satu pasang yang cukup datanya, ia tidak dibiarkan melar
   selebar dua kolom — kartunya jadi raksasa dan blok ini kehilangan
   proporsinya terhadap bento di atasnya. */
.nyambung-dua:has(> .nyambung-satu:only-child) { grid-template-columns: minmax(0, 700px); }

.nyambung > .kartu { height: 100%; }

.nyambung__simpul {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 12px; line-height: 1.45;
  color: var(--abu-teks);
}

/* Rantai: garis — simpul — garis. Garisnya menempel ke tepi kedua kartu,
   jadi hubungannya terlihat sebagai sambungan, bukan sebagai dua kartu yang
   kebetulan berdampingan. */
.nyambung__rantai {
  display: flex; align-items: center;
  width: 100%;
}
.nyambung__rantai::before,
.nyambung__rantai::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--lime);
}

.nyambung__titik {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--lime);
  flex: none;
}

.nyambung__tautan {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px; font-weight: 500;
  color: var(--lime-tua);
  text-decoration: none;
}
.nyambung__tautan:hover { text-decoration: underline; }

/* Di layar kecil blok ini TETAP mendatar. Kalau ditumpuk, dua kartu yang
   bersambung berubah jadi dua kartu yang kebetulan berurutan — persis gagasan
   yang blok ini ada untuk menyampaikannya. Yang menyusut kolom tengahnya, bukan
   susunannya. (Diputuskan 7 September 2026.) */
/* Dua pasang berdampingan cuma muat di layar lebar. Di bawah ini keduanya
   menumpuk — tapi TIAP PASANG tetap mendatar, karena itu gagasannya. */
@media (max-width: 980px) {
  .nyambung-dua { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .nyambung { max-width: 700px; }
}

@media (max-width: 620px) {
  .nyambung { grid-template-columns: 1fr 68px 1fr; max-width: none; }
  .nyambung__simpul { font-size: 10px; line-height: 1.35; gap: 5px; }
  .nyambung__titik { width: 20px; height: 20px; }
}

@media (max-width: 430px) {
  .nyambung { grid-template-columns: 1fr 52px 1fr; }
  .nyambung__simpul { font-size: 9px; }
  .nyambung__titik { width: 16px; height: 16px; }
}

/* --- Baris hasil pencarian ---------------------------------------------- */

.hasil-cari {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 16px;
  background: var(--lime-5);
  border-radius: var(--r-s);
  padding: 12px 18px;
  margin-bottom: 20px;
}
.hasil-cari__baris { margin: 0; font-size: 14px; color: var(--abu-teks); }
.hasil-cari__baris strong { color: var(--hitam); font-weight: 500; }
.hasil-cari__hapus {
  margin-left: auto;
  font-size: 13px; font-weight: 500;
  color: var(--lime-tua);
  text-decoration: none;
  white-space: nowrap;
}
.hasil-cari__hapus:hover { text-decoration: underline; }

/* --- Chip filter -------------------------------------------------------- */

.chip-baris {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 26px;
}

.chip {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--abu-garis);
  border-radius: var(--r-pil);
  background: var(--putih);
  color: var(--abu-teks);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { border-color: var(--hitam); color: var(--hitam); }

/* --- Kapsul yang TIDAK menuju ke mana-mana -----------------------------
   TIDAK DIPAKAI SEJAK 10 SEPTEMBER 2026, dan sengaja tidak dihapus.

   Dulu untuk nama klien di halaman profil. Kolom itu sekarang tampil sebagai
   paragraf: isian aslinya ternyata cerita, bukan daftar, dan pemecah namanya
   membelah kalimat jadi kapsul-kapsul yang terbaca seolah masing-masing satu
   klien (lihat catatan di single-entitas.php).

   Ditinggalkan di sini karena bentuknya masih dibutuhkan kalau nanti ada
   daftar sungguhan yang tidak boleh diklik. Kalau sampai akhir tahun tidak ada
   yang memakainya, buang saja bersama .mati-baris.

   Bedanya garis putus-putus, bukan warna yang lebih pudar: warna pudar terbaca
   sebagai "nonaktif sementara" dan orang tetap mencoba mengekliknya. Garis
   putus-putus terbaca sebagai "ini catatan, bukan pintu".

   Tidak ada :hover sama sekali — itu yang paling jelas mengatakan bahwa di sini
   memang tidak ada yang bisa diklik. */
.mati-baris {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.chip--mati {
  border-style: dashed;
  border-color: var(--abu);
  background: transparent;
  cursor: default;
  white-space: normal;   /* nama panitia atau dinas bisa panjang */
}

/* Chip terpilih pakai lime penuh — statusnya kebaca sekilas tanpa ikon centang. */
.chip[aria-pressed="true"], .chip--aktif {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--hitam);
  font-weight: 500;
}

.chip-grup {
  margin-bottom: 12px;
}
.chip-grup__label {
  display: block;
  font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--abu-teks);
  margin-bottom: 7px;
}

/* --- Kelompok kapsul yang dilipat ---------------------------------------
   Dipakai Asal kecamatan, yang bisa tumbuh sampai 32 kapsul. Klaster dan
   Tipe entitas TIDAK dilipat: keduanya muat satu baris dan tidak akan bertambah,
   dan lipatan yang isinya sedikit cuma menambah satu klik tanpa menghemat
   apa pun.

   <details>, bukan JavaScript — lipatannya jalan tanpa skrip sama sekali,
   bisa dibuka dengan papan ketik, dan isinya tetap ada di dalam HTML
   sehingga Ctrl+F peramban tetap menemukannya. Aturan yang sama dengan
   kapsul penyaring: semuanya tetap bekerja kalau JavaScript gagal dimuat. */

.chip-grup--lipat > summary {
  display: flex; align-items: center; gap: 7px;
  width: fit-content;
  cursor: pointer;

  /* Segitiga bawaan peramban bentuknya berbeda-beda di tiap mesin, jadi
     dimatikan dan panahnya digambar sendiri di ::after. */
  list-style: none;
}
.chip-grup--lipat > summary::-webkit-details-marker { display: none; }

.chip-grup--lipat > summary:hover { color: var(--hitam); }
.chip-grup--lipat > summary:focus-visible {
  outline: 2px solid var(--lime-tua);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Panah dari dua garis, berputar 90 derajat waktu terbuka. Arah panah yang
   memberi tahu keadaannya — bukan warna, yang tidak terbaca semua orang. */
.chip-grup--lipat > summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
  transition: transform .15s ease;
}
.chip-grup--lipat[open] > summary::after {
  transform: rotate(45deg) translateY(-2px);
}

/* Jumlahnya disebut di ringkasannya, supaya yang belum membuka tetap tahu
   ada berapa di dalam. Lipatan tanpa angka memaksa orang menebak apakah
   isinya layak dibuka, dan tebakan yang salah dua-duanya merugikan. */
.chip-grup__jumlah {
  font-size: 10px;
  letter-spacing: 0;
  color: var(--abu-teks);
  background: var(--abu-muda);
  border-radius: var(--r-pil);
  padding: 1px 7px 2px;
}

@media (prefers-reduced-motion: reduce) {
  .chip-grup--lipat > summary::after { transition: none; }
}

/* --- Halaman profil ----------------------------------------------------- */

.profil { margin-top: 26px; }

.profil__kepala {
  display: grid; gap: 22px;

  /* Garis pemisah antara kepala halaman (foto + identitas) dan isinya.
     Ditambahkan 11 September. Sebelumnya cuma jarak 34px, dan jarak saja tidak
     cukup di layar lebar: kapsul kontak di kolom kanan berakhir jauh lebih
     tinggi daripada fotonya, jadi batas bawah "kepala" terbaca berbeda-beda
     tergantung entitasnya — ada yang seperti berakhir di bawah kapsul, ada
     yang seperti berakhir di bawah foto. Garis menjawabnya sekali untuk semua.

     Tebal dan warnanya sama dengan garis lain di situs; lihat catatan di
     .profil__potret soal kenapa tidak dibuat lebih tegas. */
  padding-bottom: 30px;
  border-bottom: 1px solid var(--abu-garis);
  margin-bottom: 34px;
}

@media (min-width: 800px) {
  .profil__kepala { grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
}

.profil__potret {
  position: relative;   /* jangkar untuk fotonya — lihat catatan .kartu__img */
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;

  /* PUTIH, sama dengan latar halaman. Latar ini cuma terlihat di belakang
     gambar yang tidak dipotong penuh-bingkai — logo transparan dan spanduk.

     Sampai 10 September abu muda, dan niatnya masuk akal: memberi bidang
     supaya logo punya tempat berdiri. Praktiknya bidang itu jadi kotak abu
     yang terbaca sebagai elemen tersendiri, padahal ia bukan apa-apa — cuma
     ruang sisa. Dengan putih, yang terlihat tinggal logonya, dan itu memang
     satu-satunya yang perlu dilihat.

     Warna klaster tetap dipasang inline untuk entitas yang belum punya foto:
     di situ warnanya memang isi, bukan latar. */
  background: var(--putih);

  /* Garis rambut, supaya bingkainya tidak hilang sama sekali.
     Efek samping latar putih: untuk logo transparan, bingkai perseginya jadi
     tidak ada bendanya — logonya mengambang begitu saja di samping nama, dan
     ruang kosong tanpa batas terbaca sebagai gambar yang gagal dimuat, bukan
     sebagai ruang yang disengaja.
     Satu piksel --abu-garis di atas putih kontrasnya ~1,2: cukup untuk
     memberi tahu mata di mana bidangnya berakhir, tidak cukup untuk ikut
     dibaca sebagai elemen. Warna dan tebalnya sama dengan seluruh garis lain
     di situs ini — bingkai yang punya garisnya sendiri akan jadi benda baru,
     dan itu justru yang mau dihindari. */
  border: 1px solid var(--abu-garis);
}
/* Sama persis alasannya dengan .kartu__img di atas. */
.profil__potret img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Logo dimuat utuh di dalam bingkai, bukan dipotong — kalau dipotong persegi,
   yang tersisa dari sebuah wordmark cuma bagian tengah namanya. Latarnya
   putih, sama untuk semua: logo transparan tidak bisa kami atur warnanya, dan
   latar berwarna membuat sebagiannya hilang kalau warnanya berdekatan.

   82%, bukan 100%: logo butuh ruang napas di sekelilingnya, dan ruang itu
   yang membuatnya terbaca sebagai lambang, bukan sebagai gambar yang
   kekecilan. Sejak 10 September aturan ini CUMA berlaku untuk logo — yang
   menentukan transparansi, bukan rasio. Foto rasio panjang dulu ikut kena
   dan hasilnya persis "gambar yang kekecilan" itu. */
.profil__potret--utuh img {
  /* Tetap absolut, tapi ditengahkan dengan margin: auto, bukan dipenuhkan. */
  margin: auto;
  width: auto; height: auto;
  max-width: 82%; max-height: 82%;
  object-fit: contain;
}

/* Spanduk: gambar opak yang sangat melebar atau menjulang — biasanya logo
   yang diekspor dengan latar putih, sesekali foto panorama. Tetap tidak
   dipotong, tapi memenuhi sisi panjangnya sampai ke tepi bingkai.

   Bedanya dengan logo memang cuma angka ini, dan itu memang inti bedanya:
   yang latarnya buram tidak menyatu dengan bidang di belakangnya, jadi
   memberinya margin cuma menghasilkan dua bingkai bersarang. */
.profil__potret--spanduk img {
  max-width: 100%; max-height: 100%;
}
.profil__potret .kartu__inisial { font-size: clamp(64px, 18vw, 104px); }

.profil__tipe {
  display: inline-block;
  background: var(--lime);
  color: var(--hitam);
  font-size: 10px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--r-pil);
  margin-bottom: 10px;
}

/* Nama profil punya ukurannya sendiri, lebih kecil daripada h1 di tempat lain.
   Angkanya bukan selera: kolom kanan berisi tumpukan tetap (lencana tipe, baris
   asal, dua label, kapsul bidang, kapsul kontak) setinggi 241 px terukur,
   sementara fotonya 300 px. Sisa 59 px itulah jatah satu baris nama — 31 x 1,9
   = 58,9 — sehingga bagian bawah foto dan bagian bawah kapsul kontak rata.
   Angkanya diukur, bukan dikira.

   line-height 1,9 (bukan 1,8 bawaan h1) karena kotak baris alami Boldonse
   sekitar 1,93x ukuran hurufnya: pada 1,8 tinta dua baris nama panjang
   BERSENTUHAN — terukur -3,2 px di layar 390 px. Batas bawah 29 px menjaga
   nama tetap terbaca di ponsel, tempat kolomnya menyatu dan perkara rata-bawah
   ini tidak berlaku lagi. */
.profil__nama {
  font-size: clamp(29px, 5vw, 31px);
  line-height: 1.9;
  margin-bottom: 10px;
}

/* Sub-nama — kepanjangan, alias, atau penjelas.
   Sengaja tidak dibuat sebesar nama: ia keterangan, bukan nama kedua. Tapi
   juga tidak sekecil .profil__baris, karena ia masih bagian dari identitas,
   bukan metadata. Jaraknya diambil dari nama di atasnya supaya keduanya
   terbaca sebagai satu blok. */
.profil__subnama {
  margin-top: -6px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--abu-teks);
  max-width: 46ch;
}

.profil__baris {
  color: var(--abu-teks);
  font-size: 14px;
  margin-bottom: 16px;
}
.profil__baris strong { color: var(--hitam); font-weight: 500; }

.profil__bidang { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }

/* Jarak antara satu kelompok berlabel dan kelompok sebelumnya. */
.profil__label + .profil__bidang,
.profil__label + .tombol-baris { margin-top: 0; }
.profil__baris + .profil__label { margin-top: 18px; }
.profil__bidang + .profil__label { margin-top: 0; }

/* Kapsul kontak. Ikon jadi pendamping label, bukan penggantinya — tombol tanpa
   teks memaksa orang menebak, dan tebakan yang salah di halaman kontak berarti
   pesan nyasar ke kanal yang orangnya tidak pakai.
   
   line-height DITULIS TEGAS. Tanpa itu, <a> mewarisi 1,6 dari body sementara
   <button> memakai 'normal' bawaan browser — selisih 6,4 px, dan dua tombol
   bersebelahan jadi beda tinggi. Ketahuan waktu diukur, bukan waktu dilihat.
   
   Lebar garis tepi juga disamakan di sini, dan varian di bawah cuma mengubah
   WARNANYA. Kalau varian ikut mengubah lebarnya, tingginya ikut bergeser lagi. */
.tombol {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pil);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  line-height: 1.4;
  border: 1.5px solid var(--abu-garis);
  color: var(--hitam);
  background: var(--putih);
}
.tombol:hover { border-color: var(--hitam); }

.tombol svg {
  flex: none;
  /* Ikut warna tombolnya, termasuk saat tombol utama berlatar hitam. */
  color: currentColor;
  opacity: .75;
}
.tombol:hover svg { opacity: 1; }
.tombol--utama svg { opacity: .9; }

/* Label panjang (alamat email, URL toko) dipotong daripada memaksa kapsulnya
   melar melewati lebar layar. */
.tombol span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 30ch;
}

/* Instagram jadi tombol utama, WhatsApp sekunder. Pembalikan dari mockup lama:
   IG terisi 18/18 dan tak seorang pun keberatan; WA terisi 15/18 tapi 8 dari 12
   yang menjawab kolom batasan minta nomornya jangan tampil. */
.tombol--utama {
  background: var(--hitam);
  border-color: var(--hitam);   /* cuma warna — lebarnya tetap 1,5px dari .tombol */
  color: var(--putih);
}
.tombol--utama:hover { background: var(--lime-tua); border-color: var(--lime-tua); }

/* Lime penuh. Dipakai "Lihat semua" di kaki tiap bagian beranda — sampai 11
   September ia cuma tautan kecil berwarna lime-tua, dan pada akhir deretan
   kartu yang ramai, tautan sekecil itu praktis tidak pernah terlihat.

   Hurufnya near-black, bukan putih: lime di atas putih kontrasnya 1,47, jadi
   di situs ini lime SELALU jadi bidang dan tidak pernah jadi huruf. Aturan
   yang sama dengan blok lime di beranda dan kapsul alamat di kartu Story.
   Garis tepinya dibuat sewarna isiannya supaya tingginya tidak bergeser dari
   varian lain — lihat catatan di .tombol. */
.tombol--lime {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--hitam);
}
.tombol--lime:hover { background: var(--lime-2); border-color: var(--lime-2); }

.tombol-baris { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Unduh kartu Story -------------------------------------------------- *
 *
 * Duduk di bawah portofolio, di kolom yang sama. Memakai .tombol — kapsul
 * yang sama dengan kapsul kontak di atas, karena keduanya sama-sama "klik
 * untuk melakukan sesuatu". Satu halaman tidak butuh dua bentuk tombol yang
 * artinya sama.
 *
 * Diberi garis pemisah di atasnya, bukan latar berwarna: blok ini tawaran,
 * bukan peringatan, dan latar berwarna akan menariknya lebih kuat daripada
 * portofolio yang justru jadi alasan orang membagikannya. */

.unduh-kartu {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--abu-garis);
}
.unduh-kartu__nota {
  margin: 9px 0 0;
  font-size: 13px;
  color: var(--abu-teks);
}

/* Di kolom sempit (desktop dua kolom) kapsulnya boleh memenuhi lebarnya
   supaya tidak terlihat menggantung sendirian. */
@media (min-width: 1000px) {
  .profil__karya .unduh-kartu .tombol { width: 100%; justify-content: center; }
}



/* Tombol yang bukan tautan (menyalin, bukan pindah halaman). */
button.tombol { font-family: var(--badan); cursor: pointer; }

/* Tombol pendukung di atas bidang lime. Putih transparan tidak dipakai —
   di atas lime ia jadi pucat dan batasnya hilang; bingkai near-black tegas
   dan tetap jelas kedua-duanya bisa diklik. */
.tombol--garis {
  background: transparent;
  border-color: var(--hitam);   /* cuma warna — lihat catatan di .tombol */
  color: var(--hitam);
}
.tombol--garis:hover { background: var(--hitam); color: var(--putih); }

.tombol--selesai {
  background: var(--putih) !important;
  border-color: var(--hitam) !important;
  color: var(--hitam) !important;
}

/* --- Blok ajakan --------------------------------------------------------
   Pekerjaannya menyerahkan tautan supaya diteruskan, bukan membuka formulir.
   Yang mengisi formulir tetap entitasnya sendiri. */

.ajak {
  background: var(--lime);
  border-radius: var(--r-xl);
  padding: 40px var(--tepi) 36px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

/* Pemisah antarkolom. Garis, bukan jarak besar — keduanya masih satu ajakan,
   cuma dua jalan masuk yang berbeda. */
.ajak__kolom + .ajak__kolom {
  border-top: 1px solid rgba(14,14,9,.22);
  padding-top: 30px;
}

@media (min-width: 820px) {
  .ajak {
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    padding: 48px 52px 44px;
  }
  .ajak__kolom + .ajak__kolom {
    border-top: 0;
    border-left: 1px solid rgba(14,14,9,.22);
    padding-top: 0;
    padding-left: 52px;
  }
}

/* Kolom dijadikan flex supaya tombolnya sejajar di kedua sisi. Tanpa ini,
   judul kiri yang dua baris dan judul kanan yang satu baris membuat kedua
   tombol duduk di ketinggian berbeda — dan dua tombol yang tidak sebaris
   terbaca seperti salah satunya menyusul, bukan seperti dua pilihan setara. */
.ajak__kolom { display: flex; flex-direction: column; }

.ajak__judul {
  font-size: clamp(19px, 2vw, 26px);
  max-width: 20ch;
  margin: 0 0 10px;
}

.ajak__kata {
  max-width: 38ch;
  margin: 0 0 22px;
  font-size: 15px;
  flex: 1;   /* menyerap sisa tinggi, mendorong tombol ke bawah */
}

.ajak__kolom .tombol { align-self: flex-start; }

/* Tautan mentah di bawah tombol — jaring pengaman kalau papan klip ditolak
   browser, bukan hiasan. Karena itu boleh disorot, dan warnanya cukup gelap
   untuk dibaca di atas lime. */
.ajak__tautan {
  margin: 14px 0 0;
  font-size: 12px;
  color: #3D4A03;   /* 7,4 di atas lime — aman dibaca, tetap terbaca sekunder */
  word-break: break-all;
  user-select: all;
}

/* --- Cerita ------------------------------------------------------------- */

/* --- Badan profil: dua kolom di layar lebar ------------------------------
 *
 * Kiri: cerita, lalu jejaring dan sisanya. Kanan: Portofolio, sejajar dengan
 * pertanyaan cerita.
 *
 * Sebelum ini semuanya satu kolom penuh. Jawaban cerita dibatasi 62ch supaya
 * enak dibaca, jadi di layar 1440px separuh kanan halaman kosong sama sekali —
 * dan Portofolio, yang paling ingin dilihat orang, terdorong jauh ke bawah.
 *
 * TIGA ANAK, BUKAN DUA. Kalau dibuat dua pembungkus (kiri dan kanan), urutan
 * HTML-nya jadi "semua kiri, lalu portofolio" — dan di layar sempit, waktu
 * kolomnya hilang, Portofolio terlempar ke bawah jejaring. Dengan tiga anak
 * berurutan (cerita, portofolio, lanjutan), urutan mengalirnya di HP tetap
 * sama persis seperti sebelumnya, tanpa satu pun aturan order.
 *
 * Barisnya dinyatakan eksplisit, bukan diserahkan ke penempatan otomatis:
 * kolom kanan HARUS boleh lebih tinggi daripada baris pertama kolom kiri tanpa
 * mendorong .profil__lanjut ke bawah. Itu yang terjadi kalau portofolio cuma
 * ditaruh di kolom 2 tanpa rentang baris — dan celahnya baru kelihatan pada
 * profil yang portofolionya banyak.
 */
@media (min-width: 1000px) {
  .profil__isi {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 48px;
    align-items: start;
  }
  .profil__cerita { grid-column: 1; grid-row: 1; }
  .profil__karya  { grid-column: 2; grid-row: 1 / span 2; }
  .profil__lanjut { grid-column: 1; grid-row: 2; }

  /* Kedua kolom mulai di garis yang sama. .bagian bawaannya berjarak 64px ke
     atas — kalau dibiarkan, judul Portofolio turun sendiri sementara cerita
     tidak, dan keduanya jadi tidak sejajar. */
  .profil__karya > .bagian:first-child,
  .profil__cerita > .bagian:first-child { margin-top: 0; }

  /* Di dalam kolom yang cuma separuh halaman, ambang 210px bawaan tile
     portofolio menyisakan satu kolom saja di layar 1000-1100px — satu tile
     selebar 430px, yang terbaca seperti gambar bocor, bukan grid. Ambangnya
     diturunkan supaya minimal dua tile selalu berdampingan. */
  .profil__karya .karya { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

.cerita { max-width: 62ch; }

/* Garis lime di kiri baris pertanyaan.
   Ini bidang, bukan huruf — jadi lime boleh dipakai penuh di sini tanpa
   melanggar aturan kontras: ia menandai, tidak menyampaikan kata. Jawabannya
   diberi lekuk masuk yang sama supaya kolom teksnya tetap satu garis lurus;
   tanpa itu jawabannya akan menggantung ke kiri dan garisnya terbaca seperti
   pemisah, bukan penanda. */
.cerita__tanya {
  position: relative;
  padding-left: 15px;
  font-size: 13px; font-weight: 500;
  color: var(--abu-teks);
  margin-bottom: 5px;
}

.cerita__tanya::before {
  content: '';
  position: absolute;
  left: 0; top: .18em; bottom: .18em;
  width: 3px;
  border-radius: 2px;
  background: var(--lime);
}

.cerita__jawab {
  padding-left: 15px;
  font-size: 17px; line-height: 1.62;
  margin-bottom: 26px;
}

/* --- Jejaring ----------------------------------------------------------- */

.jejaring__kelompok { margin-bottom: 22px; }

/* Satu gaya untuk semua label kecil penanda kelompok — di halaman profil
   maupun di blok jejaring. Ditulis sekali supaya keduanya tidak pelan-pelan
   berbeda. */
.jejaring__label,
.profil__label {
  font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--abu-teks);
  margin-bottom: 9px;
}

.jejaring__daftar { display: flex; flex-wrap: wrap; gap: 8px; }

.simpul {
  display: inline-block;
  padding: 8px 15px;
  border-radius: var(--r-pil);
  background: var(--lime-5);
  border: 1px solid var(--lime-4);
  color: var(--hitam);
  font-size: 14px;
  text-decoration: none;
}
.simpul:hover { background: var(--lime-4); }
.simpul small { color: var(--abu-teks); }

/* Nama yang disebut tapi belum punya entri: garis putus-putus, bukan tautan.
   Ini daftar tunggu alami — dan ia harus KELIHATAN berbeda dari yang tertaut,
   supaya tidak terbaca sebagai tautan mati. */
.simpul--tunggu {
  background: transparent;
  border: 1px dashed var(--abu);
  color: var(--abu-teks);
  cursor: default;
}
/* Tidak ada :hover sama sekali — itu yang paling jelas mengatakan bahwa di sini
   memang tidak ada yang bisa diklik. Kapsul ini sekarang duduk berdampingan
   dengan yang tertaut di baris yang sama, jadi bedanya harus terbaca dari
   bentuknya, bukan dari tempatnya. */
.simpul--tunggu:hover { background: transparent; }

/* Satu kalimat penjelas untuk seluruh blok jejaring, bukan per kelompok. */
.jejaring__catatan {
  font-size: 12px;
  color: var(--abu-teks);
  max-width: 52ch;
  margin: 4px 0 0;
}
.jejaring__catatan a { color: var(--lime-tua); }

/* --- Pengenal: nada rendah, di paling bawah ----------------------------- */

.pengenal {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--abu-garis);
  font-size: 13px;
  line-height: 1.65;
  color: var(--abu-teks);
  max-width: 72ch;
}
.pengenal a { color: var(--lime-tua); }
.pengenal p { margin: 0 0 6px; }
.pengenal p:last-child { margin-top: 12px; margin-bottom: 0; }

/* --- Foto karya --------------------------------------------------------- */

.karya {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.karya img { border-radius: var(--r-s); width: 100%; display: block; }

/*
 * SATU UKURAN DI BARIS, UTUH WAKTU DIBUKA.
 *
 * Foto karya datang apa adanya — ada yang tegak, ada yang panjang sekali, ada
 * tangkapan layar 16:9. Ditaruh berdampingan tanpa aturan, barisnya jadi
 * bergerigi: satu gambar setinggi 400px di sebelah gambar setinggi 140px, dan
 * yang terbaca duluan bukan karyanya, melainkan ketidakrapiannya.
 *
 * Jadi di layout semuanya dipaksa PERSEGI dan dipotong dari tengah. Persegi
 * juga menyamakannya dengan kartu di Jelajah dan potret di kepala profil —
 * satu bentuk yang sama di seluruh situs, bukan tiga rasio berbeda.
 *
 * Yang dipotong cuma tampilannya di baris ini. Tautannya tetap menunjuk berkas
 * ukuran penuh, dan .perbesar__gambar memakai object-fit: contain — jadi begitu
 * diklik, gambarnya kembali utuh, tanpa potongan. Itu memang inti kompromi ini:
 * baris yang rapi untuk melihat sekilas, gambar penuh untuk melihat sungguhan.
 */
.karya__tautan {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--lime-5);   /* terlihat sekejap sebelum gambar lazy-load datang */

  /* Garis rambut yang sama dengan .kartu dan .profil__potret. Tile portofolio
     memang bukan "kartu", tapi masalahnya persis sama: foto karya berlatar
     putih — tangkapan layar, mockup produk, poster berlatar kertas — larut ke
     halaman dan barisnya jadi terlihat bolong. */
  border: 1px solid var(--abu-garis);

  cursor: zoom-in;
}
.karya__tautan:hover img { transform: scale(1.03); }
.karya__tautan img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .22s ease;
}

/* --- Video di dalam grid Portofolio -------------------------------------
 *
 * Video duduk di grid yang sama dengan gambar, dengan tile persegi yang sama.
 * Yang membedakannya cuma tanda putar di tengah — dan kursornya: gambar
 * membesar (zoom-in), video diputar (pointer).
 *
 * Waktu diklik, isinya diganti iframe dengan kelas tile yang sama persis, jadi
 * ukuran kotaknya tidak berubah dan baris di sekitarnya tidak melompat. Video
 * 16:9 di dalam kotak persegi akan berbilah — itu kompromi yang disengaja,
 * ditukar dengan grid yang diam.
 */

.karya__video { cursor: pointer; }

.karya__kosong { position: absolute; inset: 0; display: block; }

/* Kalimat waktu portofolionya masih kosong.
   Judul "Portofolio" sekarang selalu tampil (17 September 2026), jadi bagian
   ini butuh isi waktu belum ada apa-apa. Nadanya sengaja rendah: ini keterangan
   keadaan, bukan peringatan — kalau dibuat mencolok, profil yang sehat-sehat
   saja akan terbaca seperti profil yang bermasalah. */
.karya__belum {
  margin: 0;
  color: var(--abu-teks);
  font-size: 14px;
  line-height: 1.65;
  max-width: 46ch;
}

.karya__putar {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(20, 20, 20, .62);
  color: #fff;
  /* Cuplikan YouTube sering terang di tengah; cincin tipis ini yang menjaga
     tanda putarnya tetap terbaca di atas gambar apa pun. */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
  transition: background .18s ease, transform .18s ease;
  pointer-events: none;   /* kliknya milik <a>, bukan milik lencana ini */
}
.karya__putar svg { margin-left: 3px; }  /* segitiga terbaca lebih pas sedikit ke kanan */

.karya__video:hover .karya__putar,
.karya__video:focus-visible .karya__putar {
  background: rgba(20, 20, 20, .82);
  transform: translate(-50%, -50%) scale(1.08);
}

/*
 * Pemutarnya sendiri ada di overlay, bukan di dalam tile ini.
 *
 * Versi pertama memutar video di dalam kotak persegi tempat cuplikannya
 * berada. Di HP itu baik-baik saja — tile-nya 390px. Di desktop tile-nya cuma
 * 216px, dan YouTube membuang sebagian kontrolnya sendiri kalau pemutarnya
 * sesempit itu, tombol layar penuh termasuk yang pertama hilang. Karena itu
 * video sekarang dibuka di .perbesar--video, selebar layar dan 16:9.
 */

/* --- Perbesar foto karya ------------------------------------------------
   Ditulis sendiri, tanpa pustaka: yang dibutuhkan cuma buka, tutup, dan

/* --- Perbesar foto karya ------------------------------------------------
   Ditulis sendiri, tanpa pustaka: yang dibutuhkan cuma buka, tutup, dan
   pindah gambar. Tiga hal itu lebih pendek ditulis daripada memuat 30 KB
   pustaka lightbox untuk halaman yang mungkin cuma punya satu foto. */

.perbesar {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,14,9,.94);
  padding: 56px 20px;
}

/* WAJIB ADA. Aturan bawaan browser untuk [hidden] cuma display:none dengan
   kekuatan paling rendah, jadi 'display: flex' di atas mengalahkannya — dan
   kotaknya tetap menutupi layar meski JavaScript sudah menandainya tersembunyi.
   Ketahuan saat pengujian: Escape terasa tidak berfungsi, padahal fungsinya
   jalan; yang gagal cuma menyembunyikannya. */
.perbesar[hidden] { display: none; }

.perbesar__isi {
  margin: 0;
  max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
}

.perbesar__gambar {
  max-width: 100%;
  max-height: calc(100vh - 130px);
  width: auto; height: auto;
  border-radius: var(--r-s);
  object-fit: contain;
}

.perbesar__teks {
  color: #C7C9BF;
  font-size: 12px;
  letter-spacing: .04em;
}

/* --- Pemutar video di overlay yang sama ---------------------------------
 *
 * Selebar mungkin sampai 1100px, selalu 16:9, dan tidak pernah lebih tinggi
 * dari layar. Rasionya dijaga lewat max-width yang diturunkan dari tinggi
 * layar — bukan lewat max-height. Kalau tingginya yang dibatasi sementara
 * lebarnya tetap, aspect-ratio-nya patah dan pemutarnya jadi gepeng.
 */
.perbesar__video {
  position: relative;
  width: min(1100px, 100%);
  max-width: calc((100vh - 130px) * 16 / 9);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-s);
  overflow: hidden;
}
.perbesar__bingkai {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

.perbesar__tutup,
.perbesar__nav {
  position: absolute;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1);
  color: var(--putih);
  border: 0; border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  transition: background .15s ease;
}
.perbesar__tutup:hover,
.perbesar__nav:hover { background: var(--lime); color: var(--hitam); }

.perbesar__tutup {
  top: 14px; right: 14px;
  width: 42px; height: 42px;
  font-size: 26px;
}

.perbesar__nav {
  top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  font-size: 30px;
}
.perbesar__nav--kiri  { left: 12px; }
.perbesar__nav--kanan { right: 12px; }

@media (max-width: 560px) {
  .perbesar { padding: 56px 10px; }
  .perbesar__nav { width: 40px; height: 40px; font-size: 26px; }
  .perbesar__nav--kiri  { left: 6px; }
  .perbesar__nav--kanan { right: 6px; }
}

/* Umpan penyaring kiriman. Disembunyikan dari mata DAN dari pembaca layar —
   kalau cuma disembunyikan dari mata, pengguna pembaca layar akan mendengarnya
   dan bingung diminta mengisi apa. */
.jangkar-umpan {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Formulir kirim ----------------------------------------------------- */

/* 1000px rata kiri, sama dengan halaman biasa — bukan lagi 720px di tengah.

   Yang di tengah terlihat paling janggal di antara semua halaman: tepi
   kirinya tidak sejajar dengan judul, menu, maupun halaman lain, jadi
   formulirnya seperti mengambang sendiri di layar lebar.

   Isian formulirnya sendiri TIDAK ikut selebar itu. Kotak isian sepanjang
   1000px membuat orang harus menyeret mata dari label di kiri sampai ujung
   kanan untuk memastikan ia masih mengisi kolom yang sama; 760px sudah lebih
   lega daripada sebelumnya dan masih terbaca sebagai satu kolom. */
.kirim { max-width: 1000px; }
.kirim .jangkar-form { max-width: 760px; }

/* Layar terima kasih. Selebar kolom formulirnya, bukan selebar kanvas —
   supaya yang muncul sesudah tombol Kirim mendarat di tempat yang sama
   dengan yang barusan diisi orangnya. */
.kirim__terima {
  max-width: 760px;
  background: var(--lime);
  border-radius: var(--r-l);
  padding: 34px var(--tepi);
}
@media (min-width: 700px) { .kirim__terima { padding: 34px; } }

/* Paragraf pembuka halaman Kenalin — isinya dari editor, jadi bisa beberapa
   paragraf sekaligus tanpa merusak jaraknya. */
.kirim__pembuka { color: var(--abu-teks); max-width: 56ch; }
.kirim__pembuka p:last-child { margin-bottom: 0; }

.kirim .acf-field { margin-bottom: 22px; padding: 0; border: 0; }

.kirim .acf-label label {
  font-family: var(--badan);
  font-weight: 500; font-size: 15px;
  color: var(--hitam);
  margin-bottom: 4px;
}
.kirim .acf-label .description {
  font-size: 13px; color: var(--abu-teks); font-style: normal;
}

.kirim .acf-input input[type=text],
.kirim .acf-input input[type=email],
.kirim .acf-input input[type=url],
.kirim .acf-input input[type=number],
.kirim .acf-input textarea,
.kirim .acf-input select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--abu-garis);
  border-radius: var(--r-xs);
  font-family: var(--badan);
  font-size: 15px;
  background: var(--putih);
  color: var(--hitam);
}
.kirim .acf-input input:focus,
.kirim .acf-input textarea:focus,
.kirim .acf-input select:focus {
  border-color: var(--hitam);
  outline: none;
}

/*
 * Bidang lain: dua kolom, di semua lebar layar.
 *
 * Daftarnya 37 bidang. Satu kolom membuat formulir Kenalin memanjang jauh ke
 * bawah — dan di HP itu berarti orang menggulir lama persis di bagian yang
 * paling mudah membuat mereka berhenti mengisi.
 *
 * Grid, bukan column-count: column-count memotong satu pilihan jadi dua kolom
 * kalau tingginya pas-pasan. Label yang terpenggal di tengah lebih buruk
 * daripada daftar yang panjang.
 *
 * Cuma untuk kategori_lain. 'batas' isinya lima dan pendek-pendek — dua kolom
 * di situ malah membuat orang membacanya menyilang.
 */
.kirim .acf-field[data-name="kategori_lain"] .acf-checkbox-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
}
.kirim .acf-field[data-name="kategori_lain"] .acf-checkbox-list li { margin: 0; }

/* Label yang jatuh ke dua baris tetap rata dengan kotak centangnya, tidak
   menyelip ke bawahnya. */
.kirim .acf-field[data-name="kategori_lain"] .acf-checkbox-list label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.35;
  padding: 3px 0;
}
.kirim .acf-field[data-name="kategori_lain"] .acf-checkbox-list input { margin-top: 2px; flex: none; }

/*
 * Di layar sempit labelnya dikecilkan sedikit. Diukur di Chromium 9 September,
 * lebar 390px: dengan ukuran bawaan 17 dari 37 pilihan patah jadi dua baris
 * dan daftarnya setinggi 755px; pada 13.5px cuma 9 yang patah dan tingginya
 * 587px. Dibanding satu kolom (1021px) itu hemat 43%.
 *
 * 13px sedikit lebih pendek lagi, tapi tidak dipakai: ini daftar centang yang
 * disentuh jari, bukan teks yang dibaca sekilas.
 */
@media (max-width: 480px) {
  .kirim .acf-field[data-name="kategori_lain"] .acf-checkbox-list { gap: 2px 12px; }
  .kirim .acf-field[data-name="kategori_lain"] .acf-checkbox-list label {
    font-size: 13.5px;
    padding: 5px 0;
  }
}

.kirim .acf-tab-wrap { border: 0; background: transparent; margin-bottom: 26px; }
.kirim .acf-tab-group { border: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kirim .acf-tab-group li a {
  border: 1px solid var(--abu-garis);
  border-radius: var(--r-pil);
  background: var(--putih);
  color: var(--abu-teks);
  font-size: 13px;
  padding: 7px 14px;
  margin: 0;
}
.kirim .acf-tab-group li.active a {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--hitam);
  font-weight: 500;
}

.kirim .acf-form-submit .acf-button {
  background: var(--hitam);
  color: var(--putih);
  border: 0;
  border-radius: var(--r-pil);
  padding: 14px 30px;
  font-family: var(--badan);
  font-size: 15px; font-weight: 500;
  cursor: pointer;
}
.kirim .acf-form-submit .acf-button:hover { background: var(--lime-tua); }

/* --- Kepala progres formulir Kenalin -----------------------------------
   Ditambahkan setelah orang yang benar-benar mengisi formulirnya bingung:
   sembilan kapsul bagian di atas TIDAK terbaca sebagai penunjuk kemajuan, tapi
   sebagai filter — dan itu wajar, bentuknya memang sama persis dengan chip
   filter di halaman Jelajah.

   Jadi kemajuannya dinyatakan dengan bentuk yang tidak bisa disalahartikan:
   batang terisi. Kapsulnya tidak dihapus — meloncat berguna waktu membetulkan
   kiriman yang ditolak — cuma dipindahkan ke balik satu tombol.

   Seluruh blok ini dibuat JavaScript, sama seperti baris langkah di bawah.
   Tanpa JavaScript, tab ACF juga tidak terbentuk dan formulirnya jadi satu
   halaman panjang biasa — keadaan yang memang tidak butuh penunjuk kemajuan. */

.kirim .maju {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--abu-garis);
}

.kirim .maju__atas {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 9px;
}

.kirim .maju__hitung {
  font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--abu-teks);
}

.kirim .maju__buka {
  margin-left: auto;
  border: 0; background: none; padding: 0;
  font-family: var(--badan);
  font-size: 13px; font-weight: 500;
  color: var(--lime-tua);
  cursor: pointer;
  text-decoration: underline;
}

/* Batang kemajuan. Lime dipakai sebagai BIDANG, bukan huruf — sesuai aturan
   yang mengikat seluruh berkas ini. */
.kirim .maju__rel {
  height: 6px;
  border-radius: var(--r-pil);
  background: var(--abu-garis);
  overflow: hidden;
}
.kirim .maju__isi {
  display: block;
  height: 100%;
  width: 11%;
  border-radius: var(--r-pil);
  background: var(--lime);
  transition: width .25s ease;
}

.kirim .maju__judul {
  font-family: var(--display);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.7;
  margin-top: 12px;
}

/* Kapsul bagian: tersembunyi sampai diminta, atau sampai ada yang salah. */
.kirim .maju__pil { display: none; }
.kirim .maju__pil--buka { display: block; }

@media (prefers-reduced-motion: reduce) {
  .kirim .maju__isi { transition: none; }
}

/* --- Baris langkah di formulir Kenalin ---------------------------------
   "Kirim" cuma muncul di bagian terakhir; di bagian lain tempatnya diisi
   "Lanjut". Keduanya menempati posisi yang sama persis, jadi tidak pernah
   ada dua tombol utama di layar yang sama.

   Seluruh baris ini dibuat JavaScript. Kalau JavaScript gagal, tab ACF juga
   tidak terbentuk — semua isian tampil berurutan dan satu "Kirim" memang
   jawaban yang benar. Jadi tidak ada yang perlu dijaga di sini untuk keadaan
   tanpa JavaScript. */

.kirim .langkah {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--abu-garis);
}

.kirim .langkah__hitung {
  margin-inline: auto;
  font-size: 13px;
  color: var(--abu-teks);
  order: -1;            /* di HP: keterangan di baris atas, tombol di bawah */
  flex-basis: 100%;
}

@media (min-width: 560px) {
  .kirim .langkah__hitung { order: 0; flex-basis: auto; text-align: center; }
}

.kirim .langkah__maju { margin-left: auto; }
.kirim .langkah [hidden] { display: none !important; }

/* Tombol Kirim dipindahkan JavaScript ke dalam baris ini, jadi jarak atas
   bawaannya dilepas — jaraknya sekarang milik barisnya. */
.kirim .langkah .acf-form-submit { margin: 0 0 0 auto; padding: 0; }

/* Bagian yang isiannya bermasalah setelah kiriman ditolak. Titik merah, bukan
   pil merah penuh: pil merah di antara delapan pil abu terbaca seperti bagian
   yang sedang aktif, bukan seperti bagian yang perlu dibuka. */
.kirim .acf-tab-group li.langkah-error a { position: relative; padding-right: 26px; }
.kirim .acf-tab-group li.langkah-error a::after {
  content: '';
  position: absolute; right: 11px; top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #C0392B;
}

/* --- Kaki halaman ------------------------------------------------------- */

.kaki {
  margin-top: 84px;
  background: var(--hitam);
  color: #C7C9BF;
  padding: 48px 0 34px;
}

.kaki a { color: var(--putih); text-decoration: none; }
.kaki a:hover { color: var(--lime); }

.kaki__isi {
  display: grid; gap: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .kaki__isi { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
}

/* Logo kaki halaman: 38px, naik dari 26px.
   Di 26px ia lebih kecil daripada logo di kepala halaman, jadi terbaca seperti
   catatan kaki alih-alih penutup. Jaraknya ke bawah ikut ditambah supaya
   proporsinya tidak berubah. */
.kaki__logo svg, .kaki__logo img { height: 38px; width: auto; margin-bottom: 18px; }

.kaki__judul {
  font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--abu);
  margin-bottom: 11px;
}

.kaki ul { list-style: none; margin: 0; padding: 0; }
.kaki li { margin-bottom: 7px; font-size: 14px; }

.kaki__bawah {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: space-between; align-items: baseline;
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid #2A2A24;
  font-size: 12px;
}

/* Core Value ketiga sebagai kalimat penutup. */
.kaki__nilai {
  font-family: var(--display);
  font-size: 15px;
  color: var(--lime);
  line-height: 1.4;
}

/* --- Halaman kosong & 404 ----------------------------------------------- */

.kosong {
  text-align: center;
  padding: 72px 0;
  color: var(--abu-teks);
}
.kosong h2 { color: var(--hitam); margin-bottom: 12px; }

/* --- Navigasi halaman --------------------------------------------------- */

.laman {
  display: flex; flex-wrap: wrap; gap: 7px;
  justify-content: center;
  margin-top: 40px;
}
.laman .page-numbers {
  display: inline-block;
  min-width: 40px; text-align: center;
  padding: 8px 12px;
  border: 1px solid var(--abu-garis);
  border-radius: var(--r-pil);
  text-decoration: none;
  font-size: 14px;
  color: var(--abu-teks);
}
.laman .page-numbers:hover { border-color: var(--hitam); color: var(--hitam); }
.laman .page-numbers.current {
  background: var(--lime); border-color: var(--lime);
  color: var(--hitam); font-weight: 500;
}

/* --- Isi halaman biasa (Tentang, dll) ----------------------------------- */

/* --- Lebar halaman biasa -------------------------------------------------
   Diseragamkan 10 September 2026, atas permintaan Ajay: Tentang, Privasi,
   Kenalin, dan Tanya harus punya kanvas yang sama.

   Sampai tanggal itu ada tiga lebar yang berbeda-beda tanpa alasan yang bisa
   dipertahankan: Tentang 1000px rata kiri, halaman biasa 68ch rata kiri
   (± 560px — sepertiga layar 1440 dan terlihat seperti pita), dan Kenalin
   720px DI TENGAH, yang paling mencolok karena tepi kirinya tidak sejajar
   dengan apa pun di situs ini.

   Sekarang satu angka: 1000px, rata kiri, sama seperti Tentang.

   TAPI WADAHNYA SAJA. Teks yang dibaca lurus tetap dibatasi 80ch (± 660px,
   sekitar 76 huruf per baris). Paragraf selebar 1000px berarti 120 huruf per
   baris, dan pada baris sepanjang itu mata kehilangan awal baris berikutnya.
   Jadi yang melebar adalah judul, kisi, kartu, dan formulir; yang tetap
   adalah kalimat.
   -------------------------------------------------------------------- */

.halaman { max-width: 1000px; margin-top: 30px; }

/* Anak langsung saja: paragraf di dalam kartu Tentang punya lebarnya sendiri
   dan tidak boleh ikut diatur dari sini. */
.halaman > p,
.halaman > ul,
.halaman > ol,
.halaman > blockquote { max-width: 80ch; }

.halaman h2 { margin: 34px 0 12px; }
.halaman h3 { margin: 26px 0 8px; }
.halaman ul, .halaman ol { padding-left: 22px; }
.halaman li { margin-bottom: 6px; }
/* Kapsul DIKECUALIKAN. Tanpa :not(), pemilih ini (0,1,1) mengalahkan
   .tombol--utama (0,1,0), dan tombol gelapnya kebagian teks lime-tua —
   kontras 1,6 di atas near-black. Ketahuan waktu halaman Tentang dikasih
   tombol; sebelum itu tidak pernah ada tautan berkapsul di halaman biasa. */
.halaman a:not(.tombol) { color: var(--lime-tua); }

/* --- Halaman Tentang ----------------------------------------------------
   Lebar halamannya sekarang datang dari .halaman di atas — 1000px berlaku
   untuk semua halaman biasa, jadi baris khusus untuk Tentang di sini sudah
   dihapus. Yang tersisa di bawah cuma gaya bloknya.

   Semua kelas di bawah dipasang dari EDITOR lewat "Kelas CSS tambahan" pada
   bloknya, bukan dari templat PHP. Jadi teksnya tetap bisa disunting sendiri
   di editor visual tanpa menyentuh kode.
   -------------------------------------------------------------------- */

/* Paragraf pembuka — satu-satunya teks besar di halaman ini. */
.laman-tentang .t-lead {
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.55;
  max-width: 34ch;
  margin-bottom: 14px;
}
.laman-tentang .t-deck {
  color: var(--abu-teks);
  max-width: 54ch;
}

/* Kalimat penutup satu bagian — diberi bobot tanpa jadi judul. */
.laman-tentang .t-tegas {
  font-family: var(--display);
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.75;
  max-width: 24ch;
  margin: 26px 0 0;
}

/* Kotak catatan bergaris lime — sama seperti pertanyaan cerita di halaman
   profil, jadi keduanya terbaca sebagai jenis isi yang sama. */
.laman-tentang .t-catatan {
  border-left: 3px solid var(--lime);
  padding: 2px 0 2px 16px;
  color: var(--abu-teks);
  max-width: 62ch;
  margin: 22px 0;
}

/* --- Kisi kartu ---------------------------------------------------------
   Satu kisi dipakai berulang dengan jumlah kolom berbeda, dan kartunya satu
   gaya saja — supaya halaman ini tidak jadi pameran kotak yang beda-beda. */

.laman-tentang .t-kisi {
  display: grid;
  gap: 14px;
  margin: 20px 0 8px;
  counter-reset: t-nomor;
}

/* WAJIB ADA. Blok Grup WordPress kadang membungkus isinya sekali lagi di
   dalam .wp-block-group__inner-container — tergantung versi dan dukungan
   layout tema. Kalau itu terjadi, kisinya cuma punya SATU anak (pembungkus
   itu), jadi semua kartunya menumpuk di kolom pertama dan dua kolom lainnya
   kosong. Persis itu yang terjadi waktu halaman ini pertama dipasang, dan
   tidak terlihat di pratinjau karena pratinjaunya tidak memakai pembungkus.

   display:contents membuat pembungkusnya tidak menghasilkan kotak sendiri,
   jadi kartunya kembali jadi anak langsung kisi. Aman dipasang baik
   pembungkusnya ada maupun tidak. */
.laman-tentang .t-kisi > .wp-block-group__inner-container { display: contents; }
.laman-tentang .t-kisi--3 { grid-template-columns: repeat(3, 1fr); }
.laman-tentang .t-kisi--2 { grid-template-columns: repeat(2, 1fr); }

.laman-tentang .t-kartu {
  background: var(--abu-muda);
  border-radius: var(--r-m);
  padding: 22px 22px 24px;
}
.laman-tentang .t-kartu h3 {
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 8px;
}
.laman-tentang .t-kartu p { margin: 0; font-size: 15px; }
.laman-tentang .t-kartu p + p { margin-top: 8px; }

/* Nomor besar di kartu makna dan kartu jalan masuk. Lime dipakai sebagai
   ANGKA BESAR, bukan teks kecil — jadi kontras rendahnya tidak jadi soal. */
.laman-tentang .t-kartu--nomor { position: relative; padding-top: 56px; }
.laman-tentang .t-kartu--nomor::before {
  content: counter(t-nomor, decimal-leading-zero);
  counter-increment: t-nomor;
  position: absolute; top: 18px; left: 22px;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  color: var(--lime);
}

/* Kartu sikap — bernada lime, karena isinya yang paling "Jangkar". */
.laman-tentang .t-kartu--sikap { background: var(--lime-5); }
.laman-tentang .t-kartu--sikap h3 { font-size: 16px; }

/* Kartu manfaat: label kecil di atas, daftar bertanda bulat lime. */
.laman-tentang .t-kartu--guna h3 {
  font-family: var(--badan);
  font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--abu-teks);
  margin: 0 0 12px;
}
.laman-tentang .t-kartu--guna ul { margin: 0; padding: 0; list-style: none; }
.laman-tentang .t-kartu--guna li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
}
.laman-tentang .t-kartu--guna li::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime);
}
.laman-tentang .t-kartu--guna li:last-child { margin-bottom: 0; }

/* --- Kapsul jenis entitas ---------------------------------------------- */

.laman-tentang .t-jenis {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 18px 0 20px; padding: 0; list-style: none;
}
.laman-tentang .t-jenis li {
  background: var(--lime-4);
  border-radius: var(--r-pil);
  padding: 8px 16px;
  font-size: 14px;
  margin: 0;
}
.laman-tentang .t-jenis strong { font-weight: 500; }

/* --- Blok gelap "Jangkar itu…" -----------------------------------------
   Warnanya dibalik karena isinya juga terbalik: satu-satunya bagian yang
   menyebut apa yang TIDAK dikerjakan. Beda warna menahannya supaya tidak
   terbaca sebagai daftar fitur. */

.laman-tentang .t-gelap {
  background: var(--hitam);
  color: var(--putih);
  border-radius: var(--r-xl);
  padding: 34px 30px 36px;
  margin: 36px 0;
}
.laman-tentang .t-gelap h2 { color: var(--putih); margin: 0; }
.laman-tentang .t-gelap ul { margin: 16px 0 0; padding: 0; list-style: none; }
.laman-tentang .t-gelap li {
  border-top: 1px solid #2A2C22;
  padding: 14px 0;
  margin: 0;
  color: #C7C9BF;
  font-size: 15px;
  line-height: 1.55;
}
.laman-tentang .t-gelap li strong { color: var(--lime); font-weight: 500; }

/* --- Ajakan penutup ---------------------------------------------------- */

.laman-tentang .t-ajak {
  background: var(--lime-4);
  border-radius: var(--r-xl);
  padding: 30px 28px 32px;
  margin-top: 36px;
}
.laman-tentang .t-ajak h2 { margin: 0 0 8px; }
.laman-tentang .t-ajak p { max-width: 48ch; margin-bottom: 0; }
.laman-tentang .t-ajak .tombol-baris { margin-top: 18px; }

@media (max-width: 860px) {
  .laman-tentang .t-kisi--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .laman-tentang .t-kisi--3,
  .laman-tentang .t-kisi--2 { grid-template-columns: 1fr; }
  .laman-tentang .t-gelap,
  .laman-tentang .t-ajak { padding-inline: 22px; border-radius: var(--r-l); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .kartu:hover { transform: none; }
}

/* --- Kembali ke atas ----------------------------------------------------
   Pojok kanan bawah, muncul setelah kira-kira satu layar. Dibuat oleh
   assets/js/ke-atas.js — kalau JavaScript tidak jalan, tombolnya tidak ada
   sama sekali, dan itu memang yang diinginkan: tombol yang tidak bisa
   menghilang cuma jadi penghalang di sudut layar.

   z-index 40, di bawah kepala halaman (50) dan jauh di bawah kotak perbesar
   foto (200) — supaya ia tidak pernah mengambang di atas gambar yang sedang
   dilihat orang. */

.ke-atas {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;

  display: inline-flex;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;

  border: 1px solid var(--abu-garis);
  border-radius: 50%;
  background: var(--putih);
  color: var(--hitam);
  box-shadow: 0 2px 10px rgba(14, 14, 9, .10);

  /* Tersembunyi sampai JavaScript memutuskan sebaliknya. Memakai visibility,
     bukan display, supaya transisinya bisa berjalan. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.ke-atas--tampak {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.ke-atas:hover,
.ke-atas:focus-visible {
  background: var(--lime);
  border-color: var(--lime);
}

@media (max-width: 640px) {
  /* Sedikit lebih rapat ke tepi, dan sedikit lebih kecil — di layar sempit
     tombol mengambang paling mudah menutupi isi yang sedang dibaca. */
  .ke-atas { right: 12px; bottom: 12px; width: 38px; height: 38px; }
}

/* --- Menu laci untuk layar sempit ---------------------------------------
   Tombol tiga garis, menunya masuk dari kanan.

   SEMUA aturan di bawah dipagari .ada-laci, kelas yang dipasang
   assets/js/laci.js di <html>. Artinya: kalau JavaScript-nya gagal dimuat,
   tidak satu pun aturan ini menyala, dan menunya tetap berderet seperti biasa
   — dirapatkan oleh @media yang sudah ada di atas. Tombol tiga garis yang
   diklik lalu tidak terjadi apa-apa jauh lebih buruk daripada menu rapat.
   ---------------------------------------------------------------------- */

.kepala__buka { display: none; }

@media (max-width: 640px) {

  /*
   * Lacinya menunggu di luar layar sebelah kanan. Itu tetap menambah lebar
   * halaman: diukur, halaman jadi bisa digeser 200px ke samping padahal
   * lacinya tertutup — persis gejala "halaman goyang" yang membuat situs
   * terasa rusak di ponsel. visibility: hidden tidak menolong; yang dihitung
   * peramban letaknya, bukan terlihatnya.
   *
   * Nilai DAN letaknya ditentukan dengan mengukur sembilan kombinasi, karena
   * tebakan pertama ("clip di html saja cukup") ternyata salah. Angkanya —
   * bisa-digeser, dan apakah kepala halaman masih menempel waktu digulir:
   *
   *                body: visible   body: clip      body: hidden
   *   html: visible   200 menempel   200 menempel    200 menempel
   *   html: clip      200 menempel     0 MENEMPEL      0 lepas
   *   html: hidden    200 menempel     0 menempel      0 lepas
   *
   * Dua hal yang dua-duanya melawan dugaan: memotong di SALAH SATU saja tidak
   * ada gunanya — html dan body dua-duanya harus dipotong; dan begitu body
   * memakai hidden (bukan clip), kepala halaman berhenti menempel — sticky-nya
   * lepas dan ia ikut tergulir sampai -500px. Jadi: clip, di dua-duanya.
   */
  .ada-laci,
  .ada-laci body { overflow-x: clip; }

  /*
   * BLUR DIMATIKAN, DAN INI BUKAN SOAL SELERA.
   *
   * Lacinya position: fixed, dan ia berada di dalam <header class="kepala">.
   * backdrop-filter pada sebuah elemen membuat elemen itu jadi containing block
   * untuk semua keturunannya yang position: fixed — jadi 'top: 0; bottom: 0'
   * milik laci tidak lagi berarti setinggi layar, melainkan SETINGGI KEPALA
   * HALAMAN. Hasilnya persis yang terlihat di ponsel: lacinya cuma setinggi
   * ~275px, isinya terpotong, dan menunya harus digulir di dalam kotak sempit.
   *
   * Uji peramban pertama tidak menangkapnya karena yang diperiksa cuma "apakah
   * lacinya terlihat dan bisa diklik" — dua-duanya lulus. Sekarang tingginya
   * ikut diukur.
   *
   * Latarnya dibuat penuh sebagai gantinya, supaya kepala halaman tetap tidak
   * tembus pandang waktu isi halaman lewat di belakangnya.
   */
  .ada-laci .kepala {
    backdrop-filter: none;
    background: var(--putih);
  }

  .ada-laci .kepala__buka {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;

    margin-left: auto;   /* menggantikan margin-left:auto milik .kepala__nav */
    flex: none;
    width: 40px; height: 40px;
    padding: 0 9px;

    background: none;
    border: 0;
    border-radius: var(--r-pil);
    cursor: pointer;
    color: var(--hitam);
  }
  .ada-laci .kepala__buka:hover { background: var(--lime-5); }

  .ada-laci .kepala__buka-garis {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }

  /* Tiga garis jadi silang waktu lacinya terbuka. Tombolnya satu, jadi
     bentuknya yang harus memberi tahu apa yang akan terjadi kalau ditekan. */
  .ada-laci.laci-buka .kepala__buka-garis:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .ada-laci.laci-buka .kepala__buka-garis:nth-child(2) { opacity: 0; }
  .ada-laci.laci-buka .kepala__buka-garis:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ---- lacinya sendiri ---- */
  .ada-laci .kepala__nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 1;

    width: min(78vw, 300px);
    margin-left: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    /*
     * 2px sebelumnya, dan itu terlalu rapat. Kapsul di sini selebar laci, jadi
     * begitu satu di antaranya ditekan — atau sedang jadi halaman yang dibuka —
     * warnanya menyentuh kapsul tetangganya dan keduanya terbaca seperti satu
     * blok. Di menu horizontal 2px cukup karena kapsulnya cuma selebar
     * tulisannya; di sini tidak.
     */
    gap: 8px;

    padding: 76px 18px 24px;     /* 76px: ruang untuk tombol silang di atasnya */
    background: var(--putih);
    border-left: 1px solid var(--abu-garis);
    box-shadow: -10px 0 30px rgba(14, 14, 9, .10);

    /*
     * Setinggi layar penuh, dan isinya memang muat — jadi biasanya tidak ada
     * yang perlu digulir. auto dibiarkan untuk keadaan sempit yang nyata:
     * ponsel dimiringkan, atau peramban dengan ukuran huruf dibesarkan.
     */
    overflow-y: auto;
    overscroll-behavior: contain;

    transform: translateX(100%);
    visibility: hidden;

    /*
     * visibility diberi durasi 0 dengan JEDA selebar animasinya — bukan
     * ditransisikan bersama transform. Alasannya bukan kehalusan gerak:
     * elemen visibility: hidden TIDAK BISA DIFOKUS, dan waktu visibility ikut
     * ditransisikan, ia masih hidden pada saat laci dibuka. Akibatnya
     * .focus() ke tautan pertama diam-diam gagal, dan orang yang memakai
     * papan ketik membuka laci lalu fokusnya tertinggal di halaman belakang.
     * Diukur: visibility masih 'hidden' tepat setelah kelasnya dipasang.
     *
     * Dengan pola ini: waktu dibuka ia langsung visible (fokus jalan), waktu
     * ditutup ia menunggu lacinya selesai keluar dulu baru menghilang.
     */
    transition: transform .22s ease, visibility 0s linear .22s;
  }

  .ada-laci.laci-buka .kepala__nav {
    transform: none;
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
  }

  /* Tautan jadi baris penuh — sasaran sentuh selebar laci, bukan selebar
     tulisannya. */
  .ada-laci .kepala__nav a {
    padding: 12px 14px;
    font-size: 15px;
    border-radius: var(--r-m);
  }

  .ada-laci .kepala__kirim {
    margin-top: 2px;
    text-align: center;
  }

  /*
   * KOTAK CARI KELUAR DARI LACI — 17 September 2026, diminta Ajay.
   *
   * Sebelumnya ia ditaruh di dalam laci, dan alasannya waktu itu masuk akal:
   * di kepala halaman ponsel tidak ada ruang. Tapi akibatnya mencari jadi
   * pekerjaan dua langkah — buka menu dulu, baru mengetik — untuk sebuah situs
   * yang tugas utamanya justru mencari orang.
   *
   * Sekarang ia berdiri sendiri di kepala halaman, sebagai ikon lime di kiri
   * tombol tiga garis, dan cuma memakan 40px selama belum diklik. Ruangnya ada
   * karena ia tidak lagi harus berbagi baris dengan empat tautan menu — menu
   * itu sudah pindah ke dalam laci.
   *
   * Waktu mengembang, kotaknya MENUMPANG DI ATAS baris kepala halaman, bukan
   * mendorongnya. Di 360px tidak ada cara memuat logo, kotak teks, dan tombol
   * menu berdampingan; kalau dipaksa, yang terjadi halaman meluber ke samping —
   * gejala yang sudah pernah dikejar panjang di blok @media di atas. Jadi
   * begitu difokus, ia jadi absolut dan membentang dari tepi kiri sampai
   * sebelum tombol menu, menutupi logo sementara. Logonya kembali begitu
   * fokusnya lepas.
   */
  .ada-laci .kepala__isi { position: relative; }

  /*
   * YANG MENDORONG KE KANAN LOGONYA, bukan kotak cari dan bukan tombol menu.
   *
   * Di layar sempit <nav> jadi position: fixed, jadi ia keluar dari barisan
   * flex dan yang tersisa cuma logo, kotak cari, dan tombol tiga garis. Dua
   * percobaan sebelumnya sama-sama patah:
   *
   *   margin-left:auto di tombol menu  -> kotak cari menempel di sebelah logo,
   *                                       ada jurang di tengah.
   *   margin-left:auto di kotak cari   -> benar waktu mengecil, tapi begitu
   *                                       kotaknya mengembang ia jadi absolut
   *                                       dan keluar dari barisan — tombol
   *                                       menunya kehilangan pendorong, lalu
   *                                       tergelincir ke kiri dan tertimbun di
   *                                       bawah kotak cari. Ketahuan waktu
   *                                       dirender: tombol menunya hilang.
   *
   * margin-right:auto di LOGO benar di dua-duanya, karena logonya selalu ada
   * di barisan apa pun keadaan kotak carinya.
   */
  .ada-laci .kepala__logo { margin-right: auto; }
  .ada-laci .kepala__buka { margin-left: 0; }   /* auto-nya sudah dipegang logo */

  /*
   * left/right-nya memakai --tepi, bukan 0. Elemen absolut diukur dari KOTAK
   * PADDING induknya, jadi left:0 berarti menempel ke tepi layar dan melewati
   * padding .bungkus — kotaknya jadi tidak sebaris dengan logo di atasnya.
   * --tepi mengikuti nilai yang sama dengan pembungkusnya di tiap lebar layar.
   */
  .ada-laci .kepala__cari:focus-within,
  .ada-laci .kepala__cari--isi {
    position: absolute;
    left: var(--tepi-kepala);
    right: calc(var(--tepi-kepala) + 48px);   /* ruang untuk tombol tiga garis */
    margin-left: 0;
    z-index: 2;
  }
  .ada-laci .kepala__cari:focus-within .kepala__cari-ketik,
  .ada-laci .kepala__cari--isi .kepala__cari-ketik {
    width: auto;
    flex: 1 1 auto;
  }

  /*
   * Kain gelap di belakang laci.
   *
   * KENAPA .kepala IKUT DINAIKKAN. Lacinya ada DI DALAM <header class="kepala">,
   * dan kepala itu punya z-index sendiri (50) — artinya ia membentuk konteks
   * penumpukan. z-index berapa pun yang diberikan ke lacinya cuma berlaku di
   * dalam kepala, jadi seluruh kepala tetap berada di bawah kain (55) dan
   * lacinya ikut tertimbun. Ketahuan waktu menguji klik: menunya terlihat jelas
   * tapi tidak bisa ditekan sama sekali — kain gelaplah yang menangkap
   * sentuhannya. Yang harus naik kepalanya, bukan lacinya.
   */
  .ada-laci.laci-buka .kepala { z-index: 60; }

  .laci-kain {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(14, 14, 9, .42);
  }
  .laci-kain[hidden] { display: none; }
}

/*
 * Aturan rapat untuk layar sempit di atas (480px, 400px, 340px) TIDAK dihapus.
 * Ia sekarang jadi jalur cadangan: yang dipakai kalau JavaScript gagal dimuat
 * dan menunya tetap berderet. Dua-duanya harus benar, dan dua-duanya diukur.
 */

@media (prefers-reduced-motion: reduce) {
  .ada-laci .kepala__nav,
  .ada-laci .kepala__buka-garis { transition: none; }
}

/* --- Bidang yang tercakup satu klaster -----------------------------------
   Muncul di atas hitungan entitas, cuma di halaman klaster. Ukurannya sama
   dengan baris hitungan di bawahnya, tapi warnanya near-black — ia keterangan
   yang menjelaskan judul di atasnya, bukan catatan kaki. */

.klaster__bidang {
  font-size: 14px;
  line-height: 1.55;
  max-width: 62ch;      /* lebih lebar dari baris hitungan: daftarnya panjang */
  margin-bottom: 6px;
}

.klaster__bidang-label {
  font-weight: 500;
  color: var(--abu-teks);
}

/* Klaster yang belum ada isinya.
   Tetap tampil dan tetap bisa diklik — halamannya berisi arti klaster dan
   daftar bidangnya, yang justru jawaban buat orang yang sedang menimbang mau
   mengisi atau tidak. Garisnya dibuat putus-putus karena di seluruh situs ini
   titik-titik berarti "ada, tapi belum terisi". */
.chip--kosong {
  border-style: dashed;
  color: var(--abu);
}
.chip--kosong small { opacity: .75; }

/* =========================================================================
   HALAMAN TANYA
   Semua jawaban terbuka, tidak ada yang dilipat. Akordeon memaksa dua puluh
   dua klik untuk memindai, dan Ctrl+F browser tidak menemukan teks yang
   tersembunyi di dalamnya. Yang menggantikannya: daftar isi kapsul di atas,
   dan jarak antarbutir yang cukup lebar supaya mata bisa meloncat.
   ====================================================================== */

/* 1000px rata kiri, sama dengan Tentang dan halaman biasa. Halaman ini justru
   yang paling diuntungkan: ia memang tidak dibaca lurus dari atas ke bawah —
   orang meloncat ke pertanyaan yang dia cari — dan kanvas lebar membuat
   pertanyaannya terbaca sebagai daftar, bukan sebagai teks bersambung. */
.tanya { max-width: 1000px; }

.tanya__pembuka { margin-bottom: 8px; }
.tanya__pembuka h1 { margin: 34px 0 14px; }
.tanya__kata { color: var(--abu-teks); max-width: 56ch; }
.tanya__kata p:last-child { margin-bottom: 0; }

/* Daftar isi. Kapsul, bukan daftar bernomor — ia jalan pintas, bukan urutan
   yang harus diikuti. */
.tanya__isi {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 22px 0 4px;
}

.tanya__grup { margin-top: 42px; scroll-margin-top: 20px; }

.tanya__kepala {
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.4;
  margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--abu-garis);
}

/* scroll-margin-top ada di sini juga, bukan cuma di kelompoknya: tautan yang
   dikirim lewat WhatsApp menunjuk ke satu jawaban, dan tanpa ini judul
   pertanyaannya mendarat menempel di tepi atas layar. */
.tanya__butir { padding: 22px 0; scroll-margin-top: 20px; }
.tanya__butir + .tanya__butir { border-top: 1px solid var(--abu-garis); }

.tanya__q {
  font-family: var(--badan);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 6px;
}

.tanya__a { margin: 0; max-width: 80ch; }

.tanya__tombol { margin-top: 14px; }

/* Penutup. Latar lime karena ini satu-satunya tindakan di halaman yang
   panjangnya melelahkan — orang yang sampai ke bawah sini sudah mencari
   sesuatu dan tidak menemukannya. */
.tanya__tutup {
  margin-top: 48px;
  background: var(--lime-5);
  border-radius: var(--r-l);
  padding: 30px var(--tepi);
}
.tanya__tutup h2 { font-size: 19px; margin: 0 0 6px; }
.tanya__tutup p { color: var(--abu-teks); margin: 0 0 18px; max-width: 44ch; }

@media (min-width: 700px) {
  .tanya__tutup { padding: 34px 34px; }
}

/* --- Dua tambahan di halaman Kenalin ----------------------------------- */

/* Satu baris ke halaman Tanya, di bawah paragraf pembuka formulir. */
.kirim__ragu {
  margin-top: 14px;
  font-size: 14px;
  color: var(--abu-teks);
}

/* Dua tombol berdampingan di layar terima kasih. Membungkus ke bawah di HP
   supaya tidak ada tombol yang terpotong. */
.kirim__lanjut { display: flex; flex-wrap: wrap; gap: 10px; }

/* =========================================================================
   KEPALA HALAMAN JELAJAH — dua kolom di layar lebar

   Sampai 11 September semuanya bertumpuk vertikal: judul, hitungan, tiga
   kelompok kapsul penyaring, lalu kotak saring. Di layar 1440 akibatnya kartu
   pertama baru muncul setelah sekitar 700px gulungan, sementara separuh kanan
   halaman menganggur kosong sepanjang itu. Di HP tumpukan itu justru benar dan
   tidak diubah sama sekali.

   URUTAN DI HTML TIDAK IKUT BERGESER: judul, kapsul, kotak saring. Itu urutan
   yang dibaca pembaca layar dan yang berlaku di HP, dan keduanya memang benar
   begitu — kapsul dulu sebagai penyaring kasar, kotak saring belakangan
   sebagai penyaring halus atas hasilnya. Yang dipindahkan cuma letaknya di
   layar lebar, lewat grid-template-areas.
   ====================================================================== */

.jelajah__kepala { margin: 28px 0 22px; }

.jelajah__nama { margin-bottom: 8px; }

.jelajah__hitung {
  color: var(--abu-teks);
  font-size: 14px;
  max-width: 52ch;
}

.jelajah__saring { margin-top: 22px; }

/* Kotak saring: dulu bergaya inline di dua templat sekaligus, jadi mengubah
   satu angka berarti mengubahnya di dua tempat dan berharap tidak lupa. */
.jelajah__ketik {
  width: 100%;
  max-width: 420px;
  padding: 11px 16px;
  border: 1px solid var(--abu-garis);
  border-radius: var(--r-pil);
  font-family: var(--badan);
  font-size: 14px;
}
.jelajah__ketik:focus {
  outline: none;
  border-color: var(--hitam);
}

.jelajah__kotak { margin-top: 22px; }

@media (min-width: 1000px) {
  .jelajah__kepala {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "judul  saring"
      "kotak  saring";

    /* Baris pertama setinggi isinya, sisanya jatuh ke baris kedua — dengan
       begitu kotak saring menempel di bawah hitungan, bukan melayang di
       tengah kolom yang tingginya ditentukan kapsul di sebelah kanan. */
    grid-template-rows: auto 1fr;

    gap: 0 48px;
    align-items: start;
  }

  .jelajah__judul  { grid-area: judul; }
  .jelajah__kotak  { grid-area: kotak; margin-top: 26px; }

  /* TANPA GARIS PEMISAH — sempat dicoba 11 September lalu dibatalkan.
     Jarak 48px sudah cukup memisahkan dua kolom yang isinya memang berbeda
     jenis (judul dan kapsul); garis di antaranya cuma menambah satu elemen
     yang tidak menjelaskan apa-apa. Beda dengan garis di bawah kepala
     halaman profil, yang memang memisahkan dua bagian berbeda. */
  .jelajah__saring { grid-area: saring; margin-top: 0; }
}

/* --- Kotak cari di halaman Jelajah --------------------------------------
   Sejak 11 September kotak ini formulir, bukan lagi penyaring layar semata:
   Enter mengirim ?cari= dan mencari ke seluruh entitas. Penyaringan seketika
   sambil mengetik tetap jalan, tapi sebagai bonus — bukan sebagai jawabannya.
   Alasan lengkapnya di archive-entitas.php. */

.jelajah__cari {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.jelajah__cari .jelajah__ketik { flex: 1 1 240px; max-width: 320px; }
.jelajah__cari .tombol { flex: none; }

/* Dulu ada keterangan kecil di bawah kotak ini yang menjelaskan bahwa Enter
   mencari ke seluruh Jangkar. Dibuang: kalimatnya menerangkan cara kerja mesin,
   bukan hal yang perlu dipikirkan orang. Tombol "Cari" sudah cukup jadi isyarat,
   dan layar kosong yang menawarkan pencarian menyeluruh menangkap sisanya —
   di saat orang benar-benar membutuhkan keterangan itu. */