/* ==========================================================================
   syarif.com — dasar, layout, dan komponen
   Semua nilai diambil dari assets/css/tokens.css. Tidak ada hex/px/nama font
   mentah di sini kecuali untuk hal yang memang bukan token (mis. 1px hairline).
   ========================================================================== */

/* — reset & dasar — */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  margin: 0 0 var(--space-2);
}

h1, h2 { letter-spacing: -0.035em; line-height: 1; }
h3 { letter-spacing: -0.02em; }

h1 { font-size: clamp(46px, 7.4vw, 96px); }
h2 { font-size: clamp(32px, 4.6vw, 54px); }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }

a {
  color: var(--color-accent-700);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-accent); }

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

strong, b { font-weight: 700; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.text-muted { color: var(--color-neutral-600); }
.accent-italic {
  font-family: var(--font-accent);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0;
}

/* — layout — */
.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}
.wrap-narrow { max-width: 820px; }

.sec { padding: 130px 0; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.col  { flex: 1 1 300px; min-width: 0; }
.col2 { flex: 1 1 430px; min-width: 0; }
.col4 { flex: 1 1 210px; min-width: 0; }

.rule { border-top: 1px solid var(--color-text); }
.band {
  border-top: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-divider);
}
.hr {
  height: 1px;
  border: 0;
  margin: var(--space-4) 0;
  background: var(--color-divider);
}

.mob-only { display: none; }

/* Atribut hidden harus selalu menang. Tanpa ini, elemen seperti .btn yang
   punya display:inline-flex tetap terlihat meski diberi hidden lewat JS. */
[hidden] { display: none !important; }

@media (max-width: 940px) {
  .sec { padding: 72px 0; }
  .desk-only { display: none !important; }
  .mob-only { display: block; }
}

/* — tombol — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn svg { display: block; }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
  color: #ffffff;
}
.btn-primary:active { background: var(--color-accent-800); border-color: var(--color-accent-800); }

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
.btn-secondary:hover { background: var(--color-text); color: var(--color-bg); }

.btn-ghost {
  color: var(--color-accent-700);
  padding-inline: 0;
}
.btn-ghost:hover { color: var(--color-accent); background: transparent; }

/* Varian di atas latar gelap / accent (footer, pita CTA). */
.btn-on-accent {
  background: var(--color-bg);
  color: var(--color-accent-800);
  border-color: transparent;
}
.btn-on-accent:hover { background: var(--color-accent-100); color: var(--color-accent-900); }

.btn-outline-light {
  border: 1px solid color-mix(in srgb, #fff 55%, transparent);
  color: var(--color-bg);
}
.btn-outline-light:hover { background: color-mix(in srgb, #fff 14%, transparent); color: var(--color-bg); }

.btn-block { width: 100%; flex-shrink: 1; }
.btn-lg { font-size: 17px; padding: 16px 30px; }
.btn-md { font-size: 16px; padding: 14px 26px; }
.btn-sm { font-size: 15px; padding: 11px 20px; }

/* — tag — */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}
.tag-accent   { background: var(--color-accent-200); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.tag-neutral  { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline  { border: 1px solid var(--color-accent); color: var(--color-accent-700); }

/* — kartu — */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.card-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.card-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  line-height: 1.2;
}
.card-body { margin: 0; flex: 1; }
.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--color-neutral-600);
}

/* Hover kartu: hanya garis yang menguat — tanpa angkat, tanpa bayangan. */
.lift { transition: border-color var(--dur-fast) var(--ease); }
.lift:hover { border-color: var(--color-text); }

/* Kelas warisan dari design system. Sengaja dinetralkan pada pass editorial —
   dipertahankan sebagai kait kalau nanti mau memperlakukan foto lagi. */
.washed { filter: none; }

/* — form — */
.field { display: block; }
.field > label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-neutral-700);
}
.input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.input:hover { border-color: var(--color-neutral-500); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 120px; resize: vertical; }
select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-neutral-600) 50%),
                    linear-gradient(135deg, var(--color-neutral-600) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* — tabel — */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.table th {
  text-align: left;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-neutral-200);
}
.table tbody tr:last-child td { border-bottom: 0; }

/* — akordeon (FAQ) — pakai <details>, tanpa JavaScript — */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

.acc {
  background: transparent;
  border-top: 1px solid var(--color-divider);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.acc > summary {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 21px;
  line-height: 1.25;
  padding: 26px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.acc > summary::after {
  content: "+";
  color: var(--color-accent);
  font-size: 26px;
  line-height: 1;
  flex: none;
  transition: transform var(--dur-fast) var(--ease);
}
.acc[open] > summary::after { content: "\2013"; }
.acc > div {
  padding: 0 0 26px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-neutral-700);
  max-width: 70ch;
}

@media (max-width: 940px) {
  .acc > summary { font-size: 19px; }
}

/* — header — */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-divider);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 23px;
  color: var(--color-text);
  margin-right: auto;
  white-space: nowrap;
}
.brand:hover { color: var(--color-text); }
.brand span { color: var(--color-accent); }

.nav-main {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
  font-weight: 500;
}
.nav-main ul {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link { color: var(--color-text); }
.nav-link:hover { color: var(--color-accent); }
.nav-link[aria-current="page"],
.nav-main .current-menu-item > a,
.nav-main .current_page_item > a,
.nav-main .current-menu-ancestor > a { color: var(--color-accent); }

/* ==========================================================================
   Menu mobile — tirai layar penuh
   --------------------------------------------------------------------------
   Sengaja memakai bahasa gerak yang sama dengan preloader: bidang gelap
   --color-accent-2-800, kurva --ease-tirai, dan tautan yang naik dari balik
   topeng. Dua momen berbeda di situs yang sama sebaiknya terasa dikerjakan
   orang yang sama.

   Kenapa position:absolute, bukan fixed?
   .site-header memakai backdrop-filter, dan backdrop-filter menjadikan
   dirinya containing block untuk keturunan yang position:fixed — panel
   "layar penuh" justru akan terkurung di dalam kotak header setinggi 78px.
   Absolut terhadap header yang sticky memberi hasil yang sama persis
   (membentang selebar layar, mulai tepat di bawah header) tanpa jebakan itu,
   dan tanpa perlu :has() atau JavaScript.

   Header tetap terlihat di atas tirai — di sanalah tombol silangnya.
   ========================================================================== */

/* Tidak position:relative. Offset parent panel harus .site-header (yang
   sticky), bukan <details> selebar 44px ini. */
.nav-mobile > summary::after { content: none; }

.nav-toggle {
  display: grid;
  place-items: center;
  /* 44×44: batas bawah sasaran sentuh. Margin negatif menariknya kembali rata
     dengan tepi .wrap supaya ruang tambahannya tidak terlihat. */
  width: 44px;
  height: 44px;
  margin-right: -10px;
  cursor: pointer;
  color: var(--color-text);
  list-style: none; /* buang segitiga bawaan <summary> */
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle:hover { color: var(--color-accent); }

.nav-toggle-ikon {
  position: relative;
  width: 26px;
  height: 13px;
}
.nav-toggle-ikon i {
  position: absolute;
  left: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
}
/* Garis kedua lebih pendek: hamburger dua garis yang sama panjang terbaca
   seperti tanda "sama dengan". */
.nav-toggle-ikon i:first-child { top: 0; width: 100%; }
.nav-toggle-ikon i:last-child { bottom: 0; width: 62%; }

.nav-mobile[open] .nav-toggle-ikon i:first-child {
  transform: translateY(5.5px) rotate(45deg);
}
.nav-mobile[open] .nav-toggle-ikon i:last-child {
  width: 100%;
  transform: translateY(-5.5px) rotate(-45deg);
}

.nav-mobile-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h)); /* dvh: bilah alamat HP yang menyusut */
  background: var(--color-accent-2-800);
  color: var(--color-accent-2-100);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(24px, 6vw, 40px);
  padding: clamp(18px, 4vw, 32px) var(--wrap-pad) clamp(24px, 6vw, 40px);
  overflow-y: auto;
  overscroll-behavior: contain; /* gulir mentok tidak merembet ke halaman */
}

.nav-mobile-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: navnum;
  border-top: 1px solid color-mix(in srgb, var(--color-neutral-100) 14%, transparent);
}
.nav-mobile-panel li {
  counter-increment: navnum;
  overflow: hidden; /* topeng: tautan naik dari balik garis ini */
  border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 14%, transparent);
}
.nav-mobile-panel ul a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(11px, 2.6vw, 16px) 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 7.5vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #ffffff;
}
/* Nomor urutnya counter, bukan angka yang ditulis di markup: menu diatur dari
   dashboard, jadi jumlah dan urutannya bukan urusan template. */
.nav-mobile-panel ul a::before {
  content: counter(navnum, decimal-leading-zero);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-accent-300);
}
.nav-mobile-panel ul a[aria-current="page"],
.nav-mobile-panel ul .current-menu-item > a,
.nav-mobile-panel ul .current_page_item > a,
.nav-mobile-panel ul .current-menu-ancestor > a { color: var(--color-accent-300); }

/* Jeda tiap tautan. CSS tidak bisa mengalikan nilai counter dengan satuan
   waktu, jadi indeksnya ditulis manual lewat :nth-child. */
.nav-mobile-panel li:nth-child(1) { --i: 0; }
.nav-mobile-panel li:nth-child(2) { --i: 1; }
.nav-mobile-panel li:nth-child(3) { --i: 2; }
.nav-mobile-panel li:nth-child(4) { --i: 3; }
.nav-mobile-panel li:nth-child(5) { --i: 4; }
.nav-mobile-panel li:nth-child(6) { --i: 5; }
.nav-mobile-panel li:nth-child(7) { --i: 6; }
.nav-mobile-panel li:nth-child(n+8) { --i: 7; }

.nav-mobile-kaki {
  display: grid;
  gap: 14px;
}
.nav-mobile-kaki .btn { width: 100%; }
.nav-mobile-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent-2-100) 62%, transparent);
}

/* --------------------------------------------------------------------------
   Gerak buka-tutup: keyframe yang dipicu kelas.

   Tiga jalan sudah dicoba di sini, dan dua di antaranya gagal:

   1. Keyframe tanpa syarat (langsung menempel di .nav-mobile-panel) hanya
      berjalan SEKALI seumur halaman. Browser modern menyembunyikan isi
      <details> dengan content-visibility, bukan display — elemennya tidak
      pernah keluar dari box tree, jadi keyframe-nya tidak pernah mulai ulang.
   2. content-visibility + allow-discrete untuk menahan isinya selama menutup:
      diuji di Chrome 151, isinya tetap lenyap seketika.
   3. Transisi yang dipicu kelas: arah membuka berjalan (dengan paksaan reflow
      lebih dulu), arah menutupnya tidak bisa dibuat andal.

   Yang dipakai sekarang jalan keempat, dan yang paling sedikit syaratnya:
   keyframe yang baru muncul bersama kelasnya. Animasi selalu mulai dari awal
   begitu animation-name berubah dari none menjadi sebuah nama — tidak perlu
   gaya "sebelum", tidak perlu reflow, tidak peduli content-visibility. Karena
   itu ia berulang tiap kali, di kedua arah.

   Yang tetap harus dikerjakan app.js: menahan pelepasan atribut [open] sampai
   animasi menutup selesai. Tanpa itu isinya berhenti dirender sebelum ada yang
   sempat bergerak. Sejak app.js aktif (kelas .js-nav), yang menentukan
   tampilan adalah .is-terbuka / .is-menutup — bukan [open].

   Tanpa JavaScript, [open] tetap jadi patokan: menunya bekerja penuh, hanya
   muncul dan hilang seketika tanpa gerak.
   -------------------------------------------------------------------------- */

/* Tiap arah punya NAMA SENDIRI, dan itu bukan pemborosan.

   Versi sebelumnya memakai satu nama untuk kedua arah, yang menutup tinggal
   diberi `reverse`. Hasilnya animasinya mati: animasi hanya mulai dari awal
   kalau animation-name-nya berubah. Kalau namanya tetap sama, browser
   menganggap itu animasi yang sama dan membiarkannya — dan animasi itu sudah
   selesai sejak tadi. Mengganti animation-direction tidak menjalankannya lagi,
   cuma memindahkan nilai akhirnya.

   Dengan nama berbeda, tiap perpindahan keadaan (none → buka → tutup → none)
   selalu mengganti nama, jadi selalu mulai dari awal. */
@keyframes syarif-nav-tirai-buka {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes syarif-nav-tirai-tutup {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 100% 0); }
}
@keyframes syarif-nav-baris-buka {
  from { transform: translateY(105%); }
  to   { transform: none; }
}
@keyframes syarif-nav-baris-tutup {
  from { transform: none; }
  to   { transform: translateY(105%); }
}
@keyframes syarif-nav-kaki-buka {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes syarif-nav-kaki-tutup {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(14px); }
}

/* -- keadaan diam: tertutup -- */
.nav-mobile-panel { clip-path: inset(0 0 100% 0); }
.nav-mobile-panel ul a { transform: translateY(105%); }
.nav-mobile-kaki { opacity: 0; transform: translateY(14px); }

/* -- tanpa JavaScript: [open] langsung berarti terbuka -- */
.nav-mobile:not(.js-nav)[open] .nav-mobile-panel { clip-path: inset(0 0 0 0); }
.nav-mobile:not(.js-nav)[open] .nav-mobile-panel ul a { transform: none; }
.nav-mobile:not(.js-nav)[open] .nav-mobile-kaki { opacity: 1; transform: none; }

/* -- membuka --
   Nilai diamnya ditulis ulang sama persis dengan frame terakhir animasinya,
   supaya tidak ada kedipan begitu animasinya selesai dan berhenti berlaku. */
.nav-mobile.is-terbuka .nav-mobile-panel {
  clip-path: inset(0 0 0 0);
  animation: syarif-nav-tirai-buka var(--dur-tirai-cepat) var(--ease-tirai);
}
.nav-mobile.is-terbuka .nav-mobile-panel ul a {
  transform: none;
  animation: syarif-nav-baris-buka var(--dur-slow) var(--ease-tirai) both;
  animation-delay: calc(0.08s + var(--i, 0) * 0.055s);
}
.nav-mobile.is-terbuka .nav-mobile-kaki {
  opacity: 1;
  transform: none;
  animation: syarif-nav-kaki-buka var(--dur) var(--ease) both;
  animation-delay: 0.34s;
}

/* -- menutup --
   Menutup lebih cepat daripada membuka: membuka adalah undangan untuk
   melihat, menutup adalah keputusan yang sudah diambil — menahan orang di
   situ terasa seperti pintu yang seret. */
.nav-mobile.is-menutup .nav-mobile-panel {
  clip-path: inset(0 0 100% 0);
  animation: syarif-nav-tirai-tutup var(--dur) var(--ease-tirai);
}
.nav-mobile.is-menutup .nav-mobile-panel ul a {
  transform: translateY(105%);
  animation: syarif-nav-baris-tutup var(--dur-fast) var(--ease-tirai) both;
  animation-delay: calc(var(--i, 0) * 0.02s);
}
.nav-mobile.is-menutup .nav-mobile-kaki {
  opacity: 0;
  transform: translateY(14px);
  animation: syarif-nav-kaki-tutup var(--dur-fast) var(--ease) both;
}

html.syarif-menu-buka { overflow: hidden; }

/* — footer — */
.site-footer {
  background: var(--color-accent-2-800);
  color: var(--color-accent-2-100);
  padding: 76px 0 34px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--color-accent-300); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-brand {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 26px;
  color: #ffffff;
}
.footer-brand span { color: var(--color-accent-300); }
.footer-head {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 16px;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 54px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, #fff 18%, transparent);
  font-size: 14px;
  opacity: 0.7;
}

/* — blok CTA berulang — */
.cta-band {
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: clamp(38px, 6vw, 72px);
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}
.cta-band h2 { margin: 0; max-width: 22ch; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.1; }
.cta-band p { font-size: 18px; line-height: 1.6; max-width: 44ch; margin: 16px 0 0; opacity: 0.92; }

.cta-dark {
  background: var(--color-accent-2-800);
  color: #ffffff;
  padding: clamp(34px, 5vw, 72px);
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}
.cta-dark h2 { margin: 0; max-width: 24ch; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.06; }
.cta-dark p { font-size: 18px; line-height: 1.6; max-width: 48ch; margin: 16px 0 0; opacity: 0.85; }

/* — media & rasio — */
.media { overflow: hidden; border-radius: var(--radius-lg); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.ratio-16-10 { aspect-ratio: 16 / 10; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-1-1 { aspect-ratio: 1 / 1; }

.thumb-cover {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--color-neutral-200);
}
.thumb-cover-sm { height: 176px; }

/* — placeholder saat sebuah item belum punya gambar unggulan —
   Ruangnya tetap dipesan supaya tata letak tidak melompat begitu gambar
   diunggah. Nadanya diberi semburat teal tipis, bukan abu polos, agar terbaca
   sebagai elemen desain — bukan gambar yang gagal dimuat. */
.thumb-empty {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg));
  color: color-mix(in srgb, var(--color-accent) 55%, var(--color-bg));
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 44px;
  letter-spacing: -0.04em;
}

/* ==========================================================================
   Katalog
   ========================================================================== */

/*
 * Grid kartu.
 *
 * Sebelumnya memakai flexbox dengan `flex: 1 1 320px`. Itu bug halus tapi nyata:
 * kartu yatim di baris terakhir MELAR mengisi sisa ruang, jadi menyaring ke
 * kategori berisi satu desain menghasilkan satu kartu selebar 1180px. Grid
 * dengan auto-fill menjaga lebar kolom tetap sama berapa pun jumlah isinya.
 *
 * auto-fill, bukan auto-fit — auto-fit meruntuhkan kolom kosong sehingga
 * kartunya melar lagi, persis masalah yang mau dihindari.
 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 26px;
  align-items: start;
}

/* ==========================================================================
   Bilah filter katalog
   --------------------------------------------------------------------------
   Versi pertama menaruh sepuluh chip dalam dua kelompok bersebelahan. Chip-nya
   membungkus jadi empat sampai lima baris dan bilahnya makan ruang lebih tinggi
   daripada kartu pertama yang mau disaring — filternya jadi lebih menonjol
   daripada isinya.

   Sekarang dibagi menurut seberapa sering dipakai:
     · Kategori tetap chip — filter utama, sekali tekan, statusnya kelihatan.
       Satu baris penuh, digeser menyamping kalau tidak muat.
     · Harga jadi dropdown — filter sekunder. Lima pilihan tidak sepadan dengan
       dua baris ruang; jumlahnya tetap tertulis di dalam pilihannya.
     · Urutkan tetap dropdown, berdampingan dengan harga.

   Hasilnya dua baris ringkas, bukan lima.
   ========================================================================== */
.filterbar {
  position: relative;
  background: var(--color-bg);
}

@media (min-width: 941px) {
  .filterbar {
    position: sticky;
    top: var(--header-h);
    z-index: 40;
  }
  .admin-bar .filterbar { top: calc(var(--header-h) + 32px); }
}

/*
 * Garis bawah hanya saat bilahnya benar-benar sedang menempel.
 *
 * Sewaktu bilah masih di posisi aslinya, garis itu tidak memisahkan apa pun —
 * cuma menambah aturan di halaman yang sudah punya banyak. Ia baru berguna saat
 * bilahnya mengambang di atas kartu yang lewat di belakangnya, sebagai batas
 * antara kontrol dan isi.
 *
 * CSS sendiri tidak bisa mendeteksi elemen sticky yang sedang menempel, jadi
 * app.js memasang penanda 1px di atasnya dan mengawasi kapan penanda itu keluar
 * layar (lihat initFilterbarStuck). Tanpa JavaScript, garisnya tidak pernah
 * muncul — dan itu keadaan yang benar, karena tanpa JavaScript tidak ada yang
 * disaring juga.
 */
.filterbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-divider);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.filterbar.is-stuck::after { opacity: 1; }

.filterbar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid var(--color-text);
}

.filter-selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* .filter-select dipasang langsung pada <select>-nya, bukan pembungkus:
   labelnya sudah dilebur jadi pilihan pertama tiap dropdown. */

@media (max-width: 620px) {
  .filter-selects { flex: 1 1 100%; }
  .filter-select { flex: 1 1 150px; }
}

/* — kaki katalog: jumlah hasil + paginasi, berdampingan —
   Ditaruh SETELAH daftar, bukan sebelumnya. Sebelum daftar, angka "12 dari 12"
   belum berarti apa-apa — pengunjung belum melihat apa pun untuk dihitung.
   Setelah daftar, ia menjawab "sudah habis atau masih ada lagi?" tepat saat
   pertanyaan itu muncul, dan tombol halamannya ada di sebelahnya. */
.katalog-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--color-text);
}
.katalog-foot .pagination { margin-top: 0; }

/* Kartu yang tersembunyi karena berada di halaman lain. Dibedakan dari
   .is-filtered-out supaya kedua mekanisme tidak saling menimpa. */
.is-paged-out { display: none !important; }

/* — dropdown di dalam bilah filter (harga & urutkan) — */
.filter-select {
  min-height: 44px; /* target sentuh minimum */
  padding: 8px 34px 8px 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  background-color: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-neutral-600) 50%),
                    linear-gradient(135deg, var(--color-neutral-600) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color var(--dur-fast) var(--ease);
}
.filter-select:hover { border-color: var(--color-text); }

/* Pilihan rentang harga yang memang kosong dimatikan, bukan disembunyikan —
   supaya pengunjung tahu rentangnya ada, cuma sedang tidak ada isinya. */
.filter-select option:disabled { color: var(--color-neutral-500); }

.katalog-empty { display: none; }
.katalog-empty.is-shown { display: block; }

/* Item yang tersaring keluar. */
.is-filtered-out { display: none !important; }

/* — daftar berpoin gaya desain (titik tebal berwarna accent) — */
.dotlist { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.dotlist li {
  display: flex;
  gap: 11px;
  font-size: 17px;
  line-height: 1.5;
}
.dotlist li::before {
  content: "\00b7";
  color: var(--color-accent-700);
  font-weight: 700;
  flex: none;
}

/* — langkah bernomor — */
.steps { display: flex; flex-direction: column; gap: 22px; margin-top: 32px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step-num {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
}
.step h3 { font-size: 21px; margin: 0 0 5px; }
.step p { margin: 0; font-size: 16px; line-height: 1.6; max-width: 44ch; }

/* — ikon dalam kotak — */
.icon-box {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--color-accent);
}
.icon-box svg { width: 28px; height: 28px; }

/* — breadcrumb — */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 15px;
  color: var(--color-neutral-600);
}
.breadcrumb a { color: inherit; }
.breadcrumb a:hover { color: var(--color-accent); }

/* — bintang rating — */
.stars { display: flex; gap: 3px; color: var(--color-accent); }
.stars svg { width: 19px; height: 19px; }

/* — pesan notis form — */
.notice {
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-100);
  padding: 16px 20px;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.6;
}
.notice-error {
  border-left-color: var(--color-accent-2-600);
  background: var(--color-neutral-100);
}

/* — honeypot: harus tersembunyi dari manusia, tetap ada untuk bot — */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* — reveal saat scroll; hanya aktif kalau JS menyalakannya (lihat app.js) — */
.js-reveal.is-armed {
  opacity: 0;
  transform: translateY(18px);
}
.js-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

/* ==========================================================================
   Lapisan editorial — dipakai beranda hasil redesain.

   Prinsipnya: garis, bukan kotak. Di halaman tanpa foto, kartu berpinggir
   penuh membuat semuanya terasa sama berat. Aturan tipis dan tipografi besar
   memberi hierarki tanpa perlu gambar sama sekali.
   ========================================================================== */

/* — irama antar section —
   Satu kelas, satu angka. Sebelumnya tiap section menulis padding sendiri
   lewat style inline, jadi jaraknya gampang melenceng dan susah disetel
   serentak. Ubah di sini, seluruh beranda ikut. */
.sec-block { padding-bottom: clamp(96px, 11vw, 168px); }
.sec-block-tight { padding-bottom: clamp(64px, 7vw, 104px); }

/* — label kecil di atas judul — */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.eyebrow-muted { color: var(--color-neutral-600); }

/* — kepala section: nomor + judul, dipisah garis penuh — */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--color-text);
  margin-bottom: 56px;
}
/* Varian tanpa garis — tata letaknya sama (judul kiri, pendamping kanan),
   cuma aturannya dilepas. */
.sec-head.is-bare {
  border-top: 0;
  padding-top: 0;
}

.sec-head h2 {
  margin: 0;
  flex: 1 1 460px;
  max-width: 20ch;
}
.sec-head-aside {
  flex: 0 1 auto;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-600);
  max-width: 34ch;
}

/* — paragraf pembuka besar — */
.lede {
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.55;
  max-width: 46ch;
}

/* — daftar bergaris: dipakai harga dan layanan — */
.rule-list { border-top: 1px solid var(--color-text); }
.rule-list > * { border-bottom: 1px solid var(--color-divider); }
.rule-list > *:last-child { border-bottom: 0; }

/* — baris harga di hero — */
.price-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease);
}
.price-row:hover { color: var(--color-accent-700); }
.price-row-label {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 500;
  min-width: 0;
}
.price-row-count {
  flex: none;
  font-size: 13px;
  color: var(--color-neutral-600);
}
.price-row-value {
  flex: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
  letter-spacing: -0.02em;
}

/* — baris fakta: pengganti pita statistik lama — */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-divider);
}
/*
 * Padding kiri DAN kanan, bukan kanan saja.
 *
 * Versi pertama hanya memberi padding kanan, jadi teks di kolom 2-4 menempel
 * ke garis pemisah di sebelah kirinya. Garis pemisah butuh ruang di kedua
 * sisinya, kalau tidak ia terbaca sebagai bagian dari tulisan.
 * Kolom pertama dan terakhir dinolkan supaya tetap rata dengan tepi .wrap.
 */
.fact {
  padding: 40px 34px;
  border-right: 1px solid var(--color-divider);
}
.fact:first-child { padding-left: 0; }
.fact:last-child { padding-right: 0; border-right: 0; }
.fact-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1;
  letter-spacing: -0.035em;
}
.fact-label {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-neutral-600);
  /* 26ch, bukan 22ch. Sejak barisnya tinggal tiga, tiap kolom kebagian ruang
     lebih lebar; ukuran lama membuat kalimat pecah jadi tiga baris pendek di
     tengah kolom yang lapang. Masih jauh di bawah batas 65-75 karakter per
     baris, jadi tetap enak dibaca. */
  max-width: 26ch;
}

/*
 * Menumpuk di 860px, bukan 720px.
 *
 * Di antara keduanya tiga kolom masih dipaksa berdampingan dan tiap kolom cuma
 * menyisakan ±170px untuk teks — kalimatnya pecah jadi lima baris dan angkanya
 * kehilangan kaitan dengan keterangannya. Lebih baik menumpuk lebih awal.
 */
@media (max-width: 860px) {
  /* Kolomnya harus dipaksa satu di sini.
     Tanpa baris ini, yang menentukan jumlah kolom tetap auto-fit di .facts —
     tiga fakta pada layar 800px masih muat berdampingan (±250px per kolom),
     lalu aturan garis di bawah dipakai pada tata letak yang sebenarnya belum
     menumpuk: garis mendatar di bawah kolom yang masih bersebelahan. */
  .facts { grid-template-columns: 1fr; }
  .fact {
    padding: 26px 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .fact:last-child { border-bottom: 0; }
  .fact-label { max-width: 44ch; }
}

/* ==========================================================================
   Platform (web / mobile / desktop) — grid berikon, tanpa garis
   --------------------------------------------------------------------------
   Menggantikan daftar bergaris yang lama. Karena harga dihapus, kolom kanan
   yang dulu memuatnya jadi kosong dan barisnya kehilangan alasan untuk
   memanjang — bentuk kolom lebih pas untuk tiga pilihan sejajar.

   Blok ini TIDAK bisa ditekan. Sempat berupa tautan sewaktu masih ada ajakan
   "Lihat template →" di dalamnya; begitu ajakan itu dihapus, tidak ada lagi
   penanda apa pun bahwa kartunya bisa diklik. Area klik tanpa tanda justru
   menjebak, jadi kursor tangan dan efek hover ikut dilepas — tampilannya harus
   jujur bahwa ini keterangan, bukan tombol.
   ========================================================================== */
.plat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}

.plat {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: clamp(26px, 2.6vw, 34px) clamp(24px, 2.4vw, 32px) clamp(28px, 2.6vw, 36px) 0;
  color: var(--color-text);
}

.plat-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  /* accent-700, bukan accent murni: ikon butuh 3:1 dan teal murni cuma 2,75:1. */
  color: var(--color-accent-700);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg));
}
.plat-icon svg { width: 26px; height: 26px; }

.plat-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.4vw, 29px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
}

.plat-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-neutral-700);
  flex: 1;
}

/* — baris layanan: nomor, judul, penjelasan, harga — */
.svc {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 0.78fr) minmax(0, 1.32fr) auto;
  gap: 28px;
  align-items: start;
  padding: 38px 0;
  transition: background var(--dur-fast) var(--ease);
}
.svc:hover { background: var(--color-neutral-100); }
.svc-num {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  color: var(--color-accent-700);
  padding-top: 6px;
}
.svc-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
}
.svc-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-neutral-700);
}
.svc-aside {
  text-align: right;
  white-space: nowrap;
  padding-top: 4px;
}
.svc-price {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--color-accent-700);
}
.svc-price-note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-neutral-600);
}
.svc-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.svc-link:hover { color: var(--color-accent-700); border-bottom-color: var(--color-accent); }

@media (max-width: 940px) {
  .svc {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 8px 18px;
    padding: 30px 0;
  }
  .svc-num { grid-row: 1; padding-top: 4px; }
  .svc-title { grid-column: 2; }
  .svc-desc { grid-column: 2; margin-top: 10px; }
  .svc-aside { grid-column: 2; text-align: left; margin-top: 14px; padding-top: 0; }
}

/* — kutipan testimoni tanpa kotak — */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-text);
}
/* Sama seperti .fact — garis pemisah butuh ruang di kedua sisi. */
.quote {
  padding: 40px 36px;
  border-right: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
}
.quote:first-child { padding-left: 0; }
.quote:last-child { padding-right: 0; border-right: 0; }
.quote blockquote {
  margin: 14px 0 22px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.02em;
  flex: 1;
}
.quote-by {
  font-size: 15px;
  font-weight: 600;
}
.quote-org {
  font-size: 14px;
  color: var(--color-neutral-600);
  margin-top: 2px;
}

@media (max-width: 860px) {
  .quote {
    padding: 30px 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .quote:last-child { border-bottom: 0; }
}

/* ==========================================================================
   Panel harga mengambang — kaca GELAP
   --------------------------------------------------------------------------
   Kenapa gelap, bukan resep glassmorphism yang baku?

   Resep bakunya rgba(255,255,255,0.15) + blur, dan itu dirancang untuk latar
   berwarna atau berfoto. Halaman ini putih polos: memburamkan putih tetap
   menghasilkan putih, jadi panelnya lenyap. Versi terang sempat dicoba dan
   memang nyaris tak terlihat.

   Kaca gelap di atas halaman terang menyelesaikan itu sekaligus:
     · panelnya langsung terbaca sebagai lapisan terpisah, bahkan di area kosong
     · teks putih di atasnya punya kontras tinggi tanpa perlu diakali
     · border putih tipis — trik glassmorphism yang asli — akhirnya berfungsi,
       karena baru terlihat kalau dasarnya gelap

   Opacity 86%→76% bukan angka selera. Di atas halaman putih (kondisi paling
   tembus), 76% menghasilkan latar ±rgb(83,87,94): teks putih 7,3:1 dan teks
   sekunder #e0e2e4 5,6:1 — keduanya lolos 4,5:1. Lebih tembus dari itu, teks
   putihnya mulai gagal.
   ========================================================================== */

.pricebox {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 50;
  width: min(360px, calc(100vw - 32px));
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #ffffff;
  animation: pricebox-in var(--dur-slow) var(--ease) both;

  /* Gradien miring: kaca sungguhan menangkap cahaya lebih banyak di satu sisi. */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-accent-2-800) 86%, transparent) 0%,
    color-mix(in srgb, var(--color-accent-2-800) 76%, transparent) 100%
  );

  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);

  border: 1px solid color-mix(in srgb, #ffffff 16%, transparent);
  box-shadow:
    0 24px 60px color-mix(in srgb, var(--color-accent-2-900) 30%, transparent),
    0 4px 14px color-mix(in srgb, var(--color-accent-2-900) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
}

/* Browser tanpa backdrop-filter tetap harus terbaca: panelnya jadi solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pricebox { background: var(--color-accent-2-800); }
}

@keyframes pricebox-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.pricebox > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 13px 18px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease);
}
.pricebox > summary:hover { background: color-mix(in srgb, #ffffff 8%, transparent); }

.pricebox-label {
  flex: 1 1 auto;
  min-width: 0;
}
.pricebox-value {
  flex: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  /* 19px + bold = "teks besar" menurut WCAG, jadi syaratnya 3:1 bukan 4,5:1.
     Teal muda ini 4,4:1 di kondisi terburuk — aman dengan margin. */
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--color-accent-300);
}
.pricebox-chevron {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--color-accent-2-200);
  transition: transform var(--dur) var(--ease);
}
.pricebox[open] .pricebox-chevron { transform: rotate(180deg); }

.pricebox-body {
  padding: 0 18px 18px;
  border-top: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
}

/* Daftar harga di dalam kaca gelap: semua warnanya dibalik dari versi terang. */
.pricebox .rule-list { border-top: 0; }
.pricebox .price-row {
  padding: 13px 0;
  color: #ffffff;
  border-bottom-color: color-mix(in srgb, #ffffff 12%, transparent);
}
.pricebox .price-row:hover { color: var(--color-accent-300); }
.pricebox .price-row-count { color: var(--color-accent-2-200); }
.pricebox .price-row-value { color: var(--color-accent-300); }

.pricebox-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-accent-2-200);
}

/* Tombol di atas kaca gelap: putih pekat, bukan teal.
   Teal dengan teks putih hanya 2,6:1 — gagal. Putih dengan teks teal gelap
   memberi kontras tinggi sekaligus jadi elemen paling menonjol di panel,
   yang memang pantas untuk satu-satunya ajakan di sini. */
.pricebox .btn-primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--color-accent-900);
}
.pricebox .btn-primary:hover {
  background: var(--color-accent-200);
  border-color: var(--color-accent-200);
  color: var(--color-accent-900);
}

/* Cincin fokus keyboard harus terlihat di atas dasar gelap. */
.pricebox :focus-visible { outline-color: var(--color-accent-300); }

/* Di layar sempit panel melebar penuh supaya angka harga tidak terjepit. */
@media (max-width: 520px) {
  .pricebox {
    left: 16px;
    right: 16px;
    width: auto;
  }
}

/* Tidak perlu ikut tercetak. */
@media print {
  .pricebox { display: none; }
}

/* — pita CTA versi editorial: garis tebal, bukan blok warna — */
.cta-editorial {
  border-top: 2px solid var(--color-text);
  padding-top: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: flex-end;
  justify-content: space-between;
}
.cta-editorial h2 {
  margin: 0;
  flex: 1 1 460px;
  max-width: 18ch;
  font-size: clamp(34px, 5vw, 62px);
}

/* ==========================================================================
   Paginasi — dipakai blog (dirender PHP) dan katalog (dirender JS).
   Satu gaya untuk keduanya, jadi berpindah halaman terasa sama di mana pun.
   ========================================================================== */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 52px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
}

/* Selektor sengaja mencakup button: paginasi katalog dibangun JavaScript
   sebagai <button> (tidak memuat ulang halaman), sedangkan paginate_links()
   bawaan WordPress mengeluarkan <a> dan <span>. */
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;   /* target sentuh minimum */
  height: 44px;
  padding: 0 13px;
  font: inherit;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--color-text); color: var(--color-text); }

/* Halaman aktif: dibalik jadi blok pekat. Panduan skill soal "active state" —
   posisi sekarang harus terbaca sekilas, bukan cuma beda tipis. */
.pagination .page-numbers.current,
.pagination .page-numbers[aria-current="page"] {
  background: var(--color-text);
  border-color: var(--color-text);
  color: #ffffff;
  cursor: default;
}

/* Prev/next memakai kata, bukan cuma panah — lebih jelas dan lebih mudah
   ditekan. Di layar sempit katanya disembunyikan, panahnya tetap. */
.pagination .page-numbers.prev,
.pagination .page-numbers.next { gap: 7px; }

.pagination .page-numbers:disabled,
.pagination .page-numbers[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: var(--color-divider);
}

/* Elipsis bukan tombol: tanpa kotak, tanpa kursor tangan. */
.pagination .page-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 44px;
  color: var(--color-neutral-500);
}

@media (max-width: 560px) {
  .pagination .page-label { display: none; }
  .pagination .page-numbers { padding: 0 10px; }
}

/* ==========================================================================
   Arsip tulisan — halaman blog, kategori, tag, dan hasil pencarian.
   --------------------------------------------------------------------------
   Ditulis sebagai pass terakhir, mengikuti lapisan editorial beranda: garis
   tipis sebagai pemisah, tipografi sebagai hierarki, kotak sesedikit mungkin.

   Tiga keputusan yang perlu diingat kalau nanti diubah:

   1. Media artikel unggulan MENGISI tinggi kolomnya (position:absolute di
      dalam pembungkus ber-min-height), bukan dikunci tinggi tetap. Versi
      sebelumnya memakai .thumb-cover yang tingginya mati di 200px, jadi saat
      kolom teks tumbuh sampai 600px, separuh kartu menganga kosong.
   2. Daftar tulisan tidak memakai kartu. Kartu butuh gambar untuk hidup;
      tulisan di sini kebanyakan belum berfoto, dan deretan kotak berinisial
      membuat semuanya terasa sama berat.
   3. Chip topik memakai tinggi 44px — target sentuh minimum, sama dengan
      dropdown filter katalog dan tombol paginasi.
   ========================================================================== */

/* — kepala halaman — */
.arsip-head { padding: clamp(52px, 6.5vw, 104px) 0 clamp(26px, 3.2vw, 44px); }
.arsip-head .breadcrumb { margin-bottom: 22px; }

.arsip-title {
  margin: 0;
  font-size: clamp(42px, 6.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.arsip-lede { margin: 24px 0 0; }

/* — bilah topik: kategori + jumlah hasil — */
.arsip-bar-wrap { padding-bottom: clamp(24px, 3vw, 40px); }
.arsip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--color-text);
}
.arsip-bar-aside {
  flex: none;
  margin: 0;
  font-size: 14px;
  color: var(--color-neutral-600);
  font-variant-numeric: tabular-nums;
}

.topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.topic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;   /* target sentuh minimum */
  padding: 0 15px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.topic:hover { border-color: var(--color-text); }
.topic-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral-600);
  font-variant-numeric: tabular-nums;
}
/* Topik aktif dibalik jadi blok pekat — sama perlakuannya dengan halaman
   aktif di paginasi, supaya "kamu sedang di mana" terbaca sekilas. */
.topic.is-current {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}
.topic.is-current .topic-count { color: color-mix(in srgb, var(--color-bg) 72%, transparent); }

/* — artikel unggulan — */
.arsip-unggulan { padding-bottom: clamp(48px, 6vw, 84px); }

.post-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: stretch;
  color: inherit;
  text-decoration: none;
}

/* Pembungkus gambar. min-height menjamin ada tinggi walau kolom teks pendek;
   position:relative + inset:0 pada isinya menjamin gambar (atau kotak
   pengganti) ikut memanjang saat kolom teksnya lebih tinggi. */
.post-hero-media {
  position: relative;
  overflow: hidden;
  min-height: clamp(230px, 27vw, 400px);
  background: var(--color-neutral-100);
}
.post-hero-media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.post-hero-media img {
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
.post-hero:hover .post-hero-media img { transform: scale(1.03); }
/* Huruf awal ikut membesar mengikuti ukuran panelnya. */
.post-hero-media .thumb-empty { font-size: clamp(60px, 9vw, 128px); }

.post-hero-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  padding: clamp(4px, 1vw, 16px) 0;
}
.post-hero-title {
  margin: 0;
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 20ch;
  transition: color var(--dur-fast) var(--ease);
}
.post-hero:hover .post-hero-title { color: var(--color-accent-700); }
.post-hero-excerpt {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-neutral-700);
  max-width: 52ch;
}

/* Penanda "ini bisa ditekan". Seluruh bloknya memang tautan, tapi tanpa
   penanda eksplisit tidak ada yang memberi tahu itu. */
.post-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-accent-700);
}
.post-more-arrow { transition: transform var(--dur-fast) var(--ease); }
.post-hero:hover .post-more-arrow { transform: translateX(5px); }

@media (max-width: 860px) {
  .post-hero { grid-template-columns: 1fr; gap: 22px; }
  .post-hero-media { min-height: 0; aspect-ratio: 16 / 10; }
}

/* — daftar tulisan — */
.arsip-daftar { padding-bottom: clamp(64px, 8vw, 120px); }
.arsip-daftar-head { margin-bottom: clamp(18px, 2.2vw, 28px); }
.arsip-daftar-head h2 { font-size: clamp(26px, 3vw, 38px); }

.post-list { border-top: 1px solid var(--color-text); }

.post-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 48px);
  align-items: start;
  padding: clamp(24px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--color-divider);
  color: inherit;
  text-decoration: none;
}
.post-row:last-child { border-bottom: 0; }

.post-row-body { min-width: 0; }

.post-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 13px;
  color: var(--color-neutral-600);
}
.post-row-kat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.post-row-title {
  margin: 10px 0 0;
  font-size: clamp(21px, 2.3vw, 29px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 30ch;
  transition: color var(--dur-fast) var(--ease);
}
.post-row:hover .post-row-title {
  color: var(--color-accent-700);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.post-row-excerpt {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-neutral-700);
  max-width: 62ch;
}

.post-row-media {
  width: clamp(128px, 16vw, 208px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-neutral-100);
}
.post-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
.post-row:hover .post-row-media img { transform: scale(1.03); }

@media (max-width: 620px) {
  .post-row { grid-template-columns: 1fr; }
  .post-row-media { width: 100%; }
}

/* — kaki daftar: posisi halaman + paginasi, sebaris —
   Bentuknya sengaja sama dengan kaki katalog: satu kebiasaan, dua halaman. */
.list-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--color-text);
}
.list-foot .pagination { margin-top: 0; }
.list-foot-info {
  margin: 0;
  font-size: 14px;
  color: var(--color-neutral-600);
  font-variant-numeric: tabular-nums;
}

/* — keadaan kosong — */
.arsip-kosong {
  border-top: 1px solid var(--color-text);
  padding: clamp(48px, 7vw, 96px) 0 0;
  text-align: center;
}
.arsip-kosong h2 { margin: 0; font-size: clamp(26px, 3.4vw, 40px); }
.arsip-kosong p {
  margin: 16px auto 26px;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-neutral-700);
}
.arsip-kosong-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Kotak pengganti gambar diberi arsir sangat tipis. Tanpa itu ia terbaca
   sebagai gambar yang gagal dimuat; dengan itu, sebagai panel yang memang
   dirancang kosong. Ditulis di sini, bukan di blok .thumb-empty sebelumnya,
   supaya menimpa shorthand `background` yang dideklarasikan lebih dulu. */
.thumb-empty {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 15px,
    color-mix(in srgb, var(--color-accent) 6%, transparent) 15px 16px
  );
}

/* Fokus keyboard pada blok besar: ring bawaan sistem desain, diberi jarak
   supaya tidak menempel ke gambar. */
.post-hero:focus-visible,
.post-row:focus-visible,
.topic:focus-visible { outline-offset: 4px; }

/* Elipsis di paginasi bukan tombol — jangan diberi kotak seperti angka. */
.pagination .page-numbers.dots {
  border-color: transparent;
  min-width: 26px;
  padding: 0;
  color: var(--color-neutral-500);
  cursor: default;
}

/* Bilah tanpa chip topik (halaman pencarian): hitungannya pindah ke kiri,
   supaya tidak menggantung sendirian di tepi kanan. */
.arsip-bar.is-solo { justify-content: flex-start; }

/* ==========================================================================
   Halaman artikel — pass setelah putaran UI/UX.
   --------------------------------------------------------------------------
   Satu keputusan yang menyetir sisanya: panjang baris. Kolom .wrap-narrow
   (820px) pada teks 18px menghasilkan sekitar 95 karakter per baris, jauh di
   atas kisaran 65–75 yang enak dibaca — mata kehilangan barisnya saat kembali
   ke kiri. Isi artikel dibatasi 68ch, sementara kepala, gambar, dan blok CTA
   tetap boleh selebar kolomnya supaya tulisannya tidak terlihat sempit
   sendirian.
   ========================================================================== */

/* — bilah kemajuan baca —
   Diisi app.js. Tanpa JavaScript lebarnya tetap 0 alias tak terlihat, dan itu
   keadaan yang benar: ia penanda posisi, bukan isi. */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 70;
  pointer-events: none;
}
.read-progress > span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.admin-bar .read-progress { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .read-progress { top: 46px; }
}

/* — kepala artikel — */
.artikel-remah { padding-top: 30px; }
.artikel-head { padding: 26px 0 0; }

.artikel-kat {
  display: inline-block;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.artikel-kat:hover { color: var(--color-accent-900); }

.artikel-judul {
  margin: 16px 0 0;
  /* Turun dari 76px. Judul artikel di sini panjang-panjang; pada 76px sebuah
     judul tujuh kata memakan hampir satu layar penuh sebelum tulisannya
     mulai. */
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 20ch;
}

/* Ringkasan di bawah judul. Teks ini sudah ditulis untuk daftar blog; di sini
   ia bertugas meyakinkan pembaca bahwa tulisannya memang yang dia cari. */
.artikel-deck {
  margin: 22px 0 0;
  color: var(--color-neutral-700);
  max-width: 54ch;
}

.artikel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--color-divider);
}
.artikel-meta-info {
  margin: 0;
  font-size: 14px;
  color: var(--color-neutral-600);
}

/* — bagikan — */
.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.share-label {
  font-size: 13px;
  color: var(--color-neutral-600);
  margin-right: 2px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.share-btn:hover { border-color: var(--color-text); }
.share-btn.is-done {
  border-color: var(--color-accent);
  color: var(--color-accent-700);
}

/* — gambar utama —
   Sedikit lebih lebar dari kolom teks (tapi tetap di dalam .wrap), supaya ada
   pergantian irama antara kepala dan isi. */
.artikel-media-wrap { margin-top: clamp(28px, 4vw, 44px); }
.artikel-media {
  margin: 0;
  max-width: 1000px;
  margin-inline: auto;
}
.artikel-media img {
  width: 100%;
  height: clamp(220px, 32vw, 440px);
  object-fit: cover;
  display: block;
}
.artikel-media figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--color-neutral-600);
}

/* — badan artikel — */
.artikel-badan { padding-top: clamp(34px, 4.5vw, 56px); }

/*
 * Inilah perbaikan panjang baris, dan sengaja dipasang pada KOLOMNYA, bukan
 * pada .prose saja.
 *
 * Kalau hanya .prose yang dipersempit, tulisannya rata kiri di dalam kolom
 * 820px dan menyisakan ~190px kosong di kanan — judul, daftar isi, dan isi
 * jadi tidak sebaris, dan itu terbaca sebagai salah tata, bukan sebagai
 * pilihan. Sekarang seluruh kolom artikel yang menyempit, jadi tepi kiri dan
 * kanannya sama dari remah roti sampai navigasi kaki.
 *
 * 680px pada teks 19px ≈ 70 karakter per baris. Hurufnya ikut dinaikkan dari
 * 18px: pembacanya pemilik usaha yang membaca sambil kerja, sering di HP.
 * Diberi batas pada .artikel supaya halaman lain yang memakai .wrap-narrow
 * (kontak, halaman biasa) tidak ikut berubah.
 */
.artikel .wrap-narrow { max-width: 680px; }
.artikel .prose { font-size: 19px; }

/* Subbab diberi jarak dari header yang sticky, kalau tidak judul yang dituju
   dari daftar isi berhenti tepat di balik header. */
.artikel .prose h2,
.artikel .prose h3 { scroll-margin-top: calc(var(--header-h) + 28px); }

/* — daftar isi — */
.toc {
  margin: 0 0 clamp(30px, 4vw, 44px);
  padding: 22px 0;
  border-top: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-divider);
}
.toc-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  counter-reset: toc;
}
.toc-list li {
  counter-increment: toc;
  margin: 0;
}
.toc-list li + li { margin-top: 2px; }
.toc-list a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.toc-list a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent-700);
}
.toc-list a:hover {
  color: var(--color-accent-700);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* — tag di kaki tulisan — */
.artikel-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(32px, 4vw, 48px);
}

/* — navigasi tulisan sebelumnya/berikutnya — */
.artikel-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px clamp(24px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--color-text);
}
.artikel-nav-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.artikel-nav-item.is-next { text-align: right; }
.artikel-nav-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.artikel-nav-item.is-next .artikel-nav-label { justify-content: flex-end; }
.artikel-nav-judul {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  transition: color var(--dur-fast) var(--ease);
}
.artikel-nav-item:hover .artikel-nav-judul { color: var(--color-accent-700); }
.artikel-nav-item:hover .artikel-nav-label svg { transform: translateX(3px); }
.artikel-nav-item[rel="prev"]:hover .artikel-nav-label svg { transform: translateX(-3px); }
.artikel-nav-label svg { transition: transform var(--dur-fast) var(--ease); }

@media (max-width: 620px) {
  .artikel-nav { grid-template-columns: 1fr; }
  .artikel-nav-item.is-next { text-align: left; }
  .artikel-nav-item.is-next .artikel-nav-label { justify-content: flex-start; }
}

.artikel-cta { padding-top: clamp(48px, 6vw, 80px); }
.artikel-komentar { padding-bottom: clamp(64px, 8vw, 110px); }

/* — baca juga: tiga kolom bergaris, bukan kartu berkotak — */
.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-text);
}
.related-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 30px 30px;
  border-right: 1px solid var(--color-divider);
  color: inherit;
  text-decoration: none;
}
/* Sama seperti .fact di beranda: kolom pertama dan terakhir dinolkan supaya
   tetap rata dengan tepi .wrap, dan garis pemisah punya ruang di kedua sisi. */
.related-item:first-child { padding-left: 0; }
.related-item:last-child { padding-right: 0; border-right: 0; }
.related-judul {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.24;
  letter-spacing: -0.02em;
  transition: color var(--dur-fast) var(--ease);
}
.related-item:hover .related-judul { color: var(--color-accent-700); }
.related-meta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  color: var(--color-neutral-600);
}

/* Dipatahkan di 900px, bukan 720px: di antara keduanya grid auto-fit turun
   jadi dua kolom, dan aturan padding :first-child/:last-child (yang
   mengasumsikan satu baris) mulai salah menempatkan garis pemisahnya. */
@media (max-width: 900px) {
  .related-item {
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .related-item:last-child { border-bottom: 0; }
}

.artikel-nav-item:focus-visible,
.related-item:focus-visible,
.share-btn:focus-visible { outline-offset: 4px; }

/* ==========================================================================
   Halaman kontak — pass setelah putaran UI/UX.
   --------------------------------------------------------------------------
   Halaman ini punya satu tugas: membuat orang benar-benar menghubungi. Jadi
   susunannya tidak lagi "tiga kartu sama besar" (yang membuat pengunjung
   memilih, dan memilih itu melelahkan) melainkan satu jalur utama yang jelas
   plus dua pendamping bergaris.
   ========================================================================== */

/* — kepala — */
.kontak-head { padding: clamp(52px, 6.5vw, 100px) 0 clamp(30px, 3.6vw, 48px); }
.kontak-judul {
  margin: 0;
  font-size: clamp(42px, 6.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 14ch;
}
.kontak-lede {
  margin-top: 24px;
  max-width: 52ch;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
}

/* Jam kerja: dulu jadi chip di ATAS judul, tempat yang tidak dibaca siapa
   pun kecuali sebagai hiasan. Sekarang di bawah judul, sebaris dengan ikon
   jam, dan diulang lagi di panel WhatsApp — yaitu di titik orang benar-benar
   memutuskan mau menghubungi lewat mana. */
.kontak-janji {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-divider);
  font-size: 15px;
  color: var(--color-neutral-700);
}
.kontak-janji svg { flex: none; color: var(--color-accent-700); }

/* — jalur kontak — */
.kontak-jalur-sec { padding-bottom: clamp(56px, 7vw, 100px); }
.kontak-jalur {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: stretch;
}

/*
 * Panel utama memakai teal GELAP (accent-800), bukan teal murni.
 *
 * Alasannya kontras: putih di atas #00adb5 cuma 2,6:1 — cukup untuk isian
 * tombol pendek, tapi panel ini memuat satu paragraf penuh. Di atas
 * accent-800 (#005d61) putih mencapai ~7:1, jadi tulisannya benar-benar
 * terbaca, termasuk di layar HP di bawah matahari.
 */
.kontak-utama {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(30px, 4vw, 46px);
  background: var(--color-accent-800);
  color: #ffffff;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease);
}
.kontak-utama:hover { background: var(--color-accent-900); }

.kontak-utama-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, #ffffff 16%, transparent);
}
.kontak-utama-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.kontak-utama-judul {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.kontak-utama-nomor {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(20px, 2.2vw, 25px);
  letter-spacing: -0.02em;
  color: var(--color-accent-200);
}
.kontak-utama-teks {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.6;
  max-width: 40ch;
  color: color-mix(in srgb, #ffffff 88%, transparent);
}
.kontak-utama-aksi {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 26px;
  font-size: 15px;
  font-weight: 700;
}
.kontak-utama-aksi span { transition: transform var(--dur-fast) var(--ease); }
.kontak-utama:hover .kontak-utama-aksi span { transform: translateX(5px); }

/* — dua pendamping: bergaris, bukan berkotak — */
.kontak-sisi {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-text);
}
/* flex:1 + align-content:center membuat blok-blok ini mengisi tinggi panel
   WhatsApp di sebelahnya, entah ada dua blok atau tinggal satu (blok media
   sosial hilang kalau tautannya belum diisi). */
.kontak-blok {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  flex: 1 1 auto;
  align-content: center;
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-bottom: 1px solid var(--color-divider);
  color: inherit;
  text-decoration: none;
}
.kontak-blok:last-child { border-bottom: 0; }
.kontak-blok-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-200);
  color: var(--color-accent-800);
}
.kontak-blok.is-statis .kontak-blok-ikon {
  background: var(--color-neutral-200);
  color: var(--color-neutral-800);
}
.kontak-blok-isi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kontak-blok-judul {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 21px;
  letter-spacing: -0.02em;
  transition: color var(--dur-fast) var(--ease);
}
a.kontak-blok:hover .kontak-blok-judul { color: var(--color-accent-700); }
.kontak-blok-teks {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-neutral-700);
  max-width: 40ch;
}
.kontak-blok-nilai {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent-700);
  word-break: break-word;
}
.kontak-blok-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 4px;
}

@media (max-width: 860px) {
  .kontak-jalur { grid-template-columns: 1fr; }
}

/* — formulir brief — */
.kontak-brief { padding-bottom: clamp(64px, 8vw, 120px); scroll-margin-top: calc(var(--header-h) + 24px); }
.kontak-brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
  padding-top: clamp(28px, 3.4vw, 46px);
  border-top: 1px solid var(--color-text);
}
.kontak-brief-kiri h2 {
  margin: 0;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.kontak-brief-teks {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.65;
  max-width: 44ch;
  color: var(--color-neutral-700);
}

/* Tiga langkah setelah kirim. Ditaruh persis di sebelah tombolnya karena di
   situlah keraguan terakhir muncul: "kalau saya kirim, apa yang terjadi?" */
.kontak-langkah {
  list-style: none;
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-divider);
}
.kontak-langkah li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-divider);
}
.kontak-langkah-nomor {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent-700);
  padding-top: 3px;
}
.kontak-langkah-isi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.kontak-langkah-isi strong {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  letter-spacing: -0.01em;
}
.kontak-langkah-isi span {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-neutral-700);
}

.kontak-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(26px, 3.4vw, 42px);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
}

/* Baris label: nama kolom di kiri, penanda wajib/opsional di kanan.
   Ditulis apa adanya ("wajib"), bukan tanda bintang — bintang harus
   diterjemahkan dulu oleh pembacanya, dan tidak semua orang tahu artinya. */
.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.field-head > label { margin-bottom: 0; }
.field-wajib,
.field-opsional {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.field-wajib { color: var(--color-accent-700); }
.field-opsional { color: var(--color-neutral-600); }

.field-bantu {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-neutral-600);
}

/* Kolom yang ditolak validasi. Warna bukan satu-satunya penanda: ada teks di
   notice di atas formulir, ada aria-invalid untuk pembaca layar, dan garis
   kolomnya ikut menebal. */
.input[aria-invalid="true"] {
  border-color: var(--color-accent-2-700);
  box-shadow: inset 0 0 0 1px var(--color-accent-2-700);
  background: var(--color-neutral-100);
}

.kontak-form-kaki {
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--color-neutral-600);
}
.kontak-form-kaki a { color: var(--color-accent-700); text-decoration: underline; }

/* Tombol yang sedang mengirim: dikunci supaya tidak terkirim dua kali kalau
   ditekan berulang saat koneksinya lambat. */
.btn[data-brief-submit][disabled] {
  opacity: 0.65;
  cursor: progress;
}

@media (max-width: 860px) {
  .kontak-brief-grid { grid-template-columns: 1fr; }
}

/* — tiga jalan pintas: memakai kisi .related dari halaman artikel — */
.kontak-pintas-sec { padding-top: 0; }
.related-item.is-statis { cursor: default; }
/* Judul jalan pintas ditulis sebagai <h3> sungguhan, bukan label eyebrow:
   ini memang kepala blok, dan pembaca layar butuh tahu itu. Ukurannya juga
   harus lebih besar dari teksnya — eyebrow 11px di atas teks 16px membalik
   hierarkinya. */
.kontak-pintas-judul {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.kontak-pintas-teks {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-700);
}
.kontak-pintas-teks a {
  color: var(--color-accent-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kontak-utama:focus-visible,
.kontak-blok:focus-visible { outline-offset: 4px; }

/* ==========================================================================
   Halaman FAQ — pass setelah putaran UI/UX.
   --------------------------------------------------------------------------
   Orang tidak datang ke FAQ untuk membaca FAQ. Mereka datang dengan SATU
   pertanyaan dan mau keluar secepatnya. Jadi yang ditambahkan di sini semuanya
   soal menemukan: kotak pencarian, bilah lompat-ke-grup yang menempel, judul
   grup yang ikut menempel, dan id per pertanyaan supaya satu jawaban bisa
   ditautkan langsung.
   ========================================================================== */

.faq-head { padding: clamp(52px, 6.5vw, 100px) 0 clamp(26px, 3.2vw, 40px); }
.faq-judul {
  margin: 0;
  font-size: clamp(42px, 6.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.faq-lede {
  margin-top: 24px;
  max-width: 52ch;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
}

/* — bilah cari + lompat — */
.faq-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--color-text);
}

.faq-cari {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 300px;
  min-height: 44px;   /* target sentuh minimum */
  padding: 0 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.faq-cari:focus-within { border-color: var(--color-accent); }
.faq-cari svg { flex: none; color: var(--color-neutral-600); }
.faq-cari-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 15px;
  color: var(--color-text);
  background: transparent;
  caret-color: var(--color-accent);
}
.faq-cari-input:focus { outline: none; }
/* Tombol × bawaan Safari/Chrome pada input[type=search] dibiarkan: ia justru
   satu-satunya cara cepat mengosongkan pencarian tanpa menghapus manual. */

.faq-lompat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.faq-hitung {
  flex: none;
  margin: 0;
  font-size: 14px;
  color: var(--color-neutral-600);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .faq-cari { flex: 1 1 100%; }
  /* Chip grup digeser menyamping, bukan membungkus jadi tiga baris: di HP,
     bilah setinggi 150px akan menutupi pertanyaan yang mau dibaca. */
  .faq-lompat {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .faq-lompat::-webkit-scrollbar { display: none; }
  .faq-lompat .topic { flex: none; }
}

/* — isi — */
.faq-isi { padding: clamp(34px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); }

.faq-grup {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
  padding-top: clamp(30px, 3.6vw, 48px);
  /* Jarak untuk header + bilah yang menempel, supaya judul grup tidak
     berhenti di baliknya saat ditautkan dari chip lompat. */
  scroll-margin-top: calc(var(--header-h) + 90px);
}
.faq-grup + .faq-grup { margin-top: clamp(30px, 3.6vw, 48px); }

.faq-grup-kiri h2 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.faq-grup-jumlah {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--color-neutral-600);
}

/* Judul grup ikut menempel selama pertanyaannya masih lewat. Di daftar
   akordeon yang panjang, tanpa ini pengunjung kehilangan konteks "ini bagian
   apa" begitu jawaban pertama dibuka. */
@media (min-width: 941px) {
  .faq-grup-kiri {
    position: sticky;
    top: calc(var(--header-h) + 96px);
  }
  .admin-bar .faq-grup-kiri { top: calc(var(--header-h) + 128px); }
}

@media (max-width: 940px) {
  .faq-grup { grid-template-columns: 1fr; }
}

.faq-grup-daftar { min-width: 0; }
/* Garis penutup daftar: tiap .acc punya garis ATAS, jadi yang terakhir
   butuh garis bawah supaya bloknya tertutup. */
.faq-grup-daftar > .acc:last-child { border-bottom: 1px solid var(--color-divider); }

/* Pertanyaan yang disembunyikan pencarian. Kelas sendiri, bukan atribut
   hidden, supaya tidak bertabrakan dengan keadaan lain. */
.acc.is-tersaring { display: none !important; }
.faq-grup.is-tersaring { display: none !important; }

/* Baris pertanyaan yang sedang dituju dari tautan (#faq-...). Menyala sebentar
   supaya jelas yang mana yang dimaksud, lalu memudar sendiri. */
.acc.is-dituju > summary { color: var(--color-accent-700); }

.acc > summary:hover { color: var(--color-accent-700); }
/*
 * Tanda +/− dipindah dari --color-accent ke --color-accent-700.
 *
 * Ini menutup catatan kontras yang tertinggal di README: teal murni cuma
 * 2,75:1 di atas putih, sementara ikon sebesar ini butuh 3:1. accent-700
 * mencapai 4,86:1 — lewat dengan selisih yang jelas, bukan pas-pasan.
 */
.acc > summary::after { color: var(--color-accent-700); }

/* Animasi buka-tutup, hanya di browser yang mendukung ::details-content.
   Di browser lain <details> tetap buka-tutup seketika — sama sekali tidak
   rusak, cuma tanpa gerak. */
@supports selector(::details-content) {
  /* interpolate-size diwariskan, jadi dipasang di elemennya sekaligus di
     pseudo-element yang tingginya benar-benar dianimasikan — sebagian
     implementasi hanya membaca yang di ancestor. */
  .acc { interpolate-size: allow-keywords; }
  .acc::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete;
    interpolate-size: allow-keywords;
  }
  .acc[open]::details-content { block-size: auto; }
}

/* — hasil pencarian kosong — */
.faq-kosong {
  border-top: 1px solid var(--color-text);
  margin-top: clamp(30px, 3.6vw, 48px);
  padding: clamp(44px, 6vw, 80px) 0 0;
  text-align: center;
}
.faq-kosong h2 { margin: 0; font-size: clamp(26px, 3.2vw, 38px); }
.faq-kosong p {
  margin: 14px auto 24px;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-neutral-700);
}
.faq-kosong-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.faq-cta { padding-top: 0; }