/* ==========================================================================
   Halim Kitab Utama — variabel & reset
   Palette "Blue Color Palette — Royal Elegance" (Fase 8, dikonfirmasi user,
   ganti total dari navy/gold sebelumnya): #1D2B56, #364B7A, #7587C4,
   #C1C8E4, #F8E8C1. --gold/--gold-dark/--navy-tint dipertahankan sebagai
   NAMA variabel (supaya tidak perlu ubah ratusan referensi di file ini),
   tapi NILAI-nya sekarang dari palette baru — --gold bukan lagi kuning,
   cuma nama peran "aksen terang" yang sekarang diisi krem.
   ========================================================================== */
:root {
	--navy: #364B7A;
	--navy-dark: #1D2B56;
	--navy-tint: #7587C4;
	--lavender: #C1C8E4;
	--gold: #F8E8C1;
	--gold-dark: #7587C4;
	/* Versi --gold-dark yang cukup gelap untuk dipakai sebagai WARNA TEKS di
	   atas putih/abu muda. #7587C4 aslinya cuma ~3.1:1 kontrasnya (di bawah
	   ambang WCAG AA 4.5:1 untuk teks kecil) — masih aman untuk garis/border/
	   ikon dekoratif, tapi bikin teks kecil seperti "Diskon 20%", "5.000++",
	   dan angka diskon susah dibaca di HP (ketemu saat audit mobile
	   menyeluruh Fase 8). Warna ini masih satu keluarga (periwinkle palette
	   Royal Elegance), cuma diturunkan gelapnya → ~6.4:1 di atas putih. */
	--aksen-teks: #4A5B99;
	--wa-green: #25d366;
	--wa-green-dark: #1ebe5b;
	--ink: #1f2430;
	--muted: #6b7280;
	--bg: #f7f7f9;
	--bg-abu: #f1f0ec;
	--border: #e5e5ea;
	--white: #ffffff;
	--radius: 10px;
	--radius-lg: 16px;
	--container: 1200px;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-serif: "Merriweather", Georgia, "Times New Roman", serif;
	--font-arab: "Amiri", "Traditional Arabic", var(--font);
	--shadow: 0 2px 10px rgba(33, 40, 86, 0.08);
	--shadow-lg: 0 10px 30px rgba(33, 40, 86, 0.14);
}

/* Font judul (Serif) — kesan akademis/prestise ala toko buku & kitab,
   dipasangkan dengan UI sans-serif bawaan sistem supaya beban halaman tetap
   ringan (cuma 1 file font tambahan, bukan seluruh body text). Di-hosting
   sendiri (bukan Google Fonts CDN) supaya konsisten dengan prinsip "ringan &
   tanpa dependensi pihak ketiga" proyek ini — lihat CLAUDE.md §3 & §13. */
@font-face {
	font-family: "Merriweather";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/merriweather-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
/* Font Arab tradisional untuk halaman Arab & Jawi — font sans-serif sistem
   render aksara Arab tidak konsisten antar OS/browser, sedangkan Amiri
   dirancang khusus untuk teks Arab klasik (cocok nuansa kitab kuning/Qur'an). */
@font-face {
	font-family: "Amiri";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/amiri-400-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
	font-family: "Amiri";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/amiri-700-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font);
	color: var(--ink);
	background: var(--white);
	line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; line-height: 1.25; margin: 0 0 0.6em; }
p { margin: 0 0 1em; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; cursor: pointer; }

.hku-container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 20px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}
.hku-skip-link:focus {
	position: fixed;
	top: 8px; left: 8px;
	width: auto; height: auto;
	clip: auto;
	background: var(--navy);
	color: var(--white);
	padding: 10px 16px;
	border-radius: var(--radius);
	z-index: 999;
}

/* ==========================================================================
   Header
   ========================================================================== */
.hku-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--navy);
	box-shadow: var(--shadow);
}
.hku-header__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 72px;
}
/* flex-shrink:0 WAJIB — tanpa ini, di layar sempit flexbox nge-kompres logo
   (elemen "termudah" mengecil karena cuma <img width:auto>, beda dgn tombol
   ikon/select di .hku-header__aksi yang punya ukuran tetap) sampai jadi
   garis tipis nyaris tak kelihatan, BUKAN cuma mengecil wajar — ketemu saat
   user cek header. Logo harus selalu tampil utuh proporsional. */
.hku-header__logo { flex-shrink: 0; }
.hku-header__logo img { height: 44px; width: auto; }
/* Mobile-first: nav default TERSEMBUNYI (panel overlay), baru ditampilkan
   permanen sebagai bar horizontal di breakpoint desktop (lihat blok
   @media min-width:900px di bagian Responsive). */
.hku-header__nav {
	display: none;
	flex: 1;
	position: absolute;
	top: 72px; left: 0; right: 0;
	background: var(--navy);
	padding: 8px 20px 16px;
	max-height: calc(100vh - 72px);
	overflow-y: auto;
}
.hku-header__nav.is-terbuka { display: block; }
.hku-menu { display: flex; flex-direction: column; gap: 4px; }
.hku-menu a {
	color: var(--white);
	font-weight: 600;
	font-size: 0.95rem;
	opacity: 0.9;
	display: block;
	padding: 12px 4px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hku-menu a:hover { opacity: 1; color: var(--gold); }
/* margin-left:auto mendorong kelompok tombol ke KANAN.
   Tanpa ini semua isi header menumpuk di kiri dan menyisakan ruang kosong
   besar di kanan begitu layar melebar — terlihat seperti header yang gagal
   dimuat, bukan tata letak yang disengaja. Logo di kiri, aksi di kanan
   adalah pola yang dikenali orang sebagai "header". */
.hku-header__aksi { position: relative; display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Switcher bahasa ringkas: tombol ikon+kode (~58px, muat di HP paling sempit),
   panel daftar tetap pakai nama lengkap supaya jelas. Menggantikan <select>
   native yang lebarnya terpaksa ~108px karena harus memuat "Bahasa Indonesia"
   dan bikin header meluber di layar ~316px. */
/* position:static (BUKAN relative) — biar containing block panel dropdown
   jatuh ke .hku-header__aksi yang jauh lebih lebar. Kalau di-anchor ke tombol
   kecil ini, panel 190px-nya meluber ke kiri layar sampai kepotong di HP
   sempit (ketemu saat verifikasi di lebar 316px). */
.hku-lang-switch { position: static; display: flex; align-items: center; }
.hku-lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--white);
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 8px;
	font-size: 0.82rem;
	font-weight: 800;
	padding: 0 8px;
	height: 44px;
	flex-shrink: 0;
}
.hku-lang-toggle svg { flex-shrink: 0; }
.hku-lang-toggle__panah { transition: transform 0.18s ease; }
.hku-lang-toggle[aria-expanded="true"] .hku-lang-toggle__panah { transform: rotate(180deg); }
.hku-lang-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 120;
	min-width: 190px;
	background: var(--white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 6px;
	list-style: none;
	margin: 0;
}
.hku-lang-menu[hidden] { display: none; }
.hku-lang-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border-radius: 8px;
	color: var(--ink);
	font-size: 0.88rem;
}
.hku-lang-menu a:hover { background: var(--bg-abu); }
.hku-lang-menu a.is-aktif { background: var(--bg-abu); font-weight: 800; color: var(--navy); }
.hku-lang-menu__kode {
	flex-shrink: 0;
	font-size: 0.7rem;
	font-weight: 800;
	background: var(--navy);
	color: var(--white);
	border-radius: 5px;
	padding: 3px 6px;
	min-width: 30px;
	text-align: center;
}
[dir="rtl"] .hku-lang-menu { right: auto; left: 0; }
.hku-header__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--wa-green);
	color: var(--white);
}
.hku-rencana-badge {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	color: var(--white);
	flex-shrink: 0;
}
.hku-rencana-badge__count {
	position: absolute;
	top: -4px; right: -4px;
	/* Putih di atas --aksen-teks (6.4:1), bukan navy-dark di atas --gold-dark
	   (3.9:1) — angka sekecil ini butuh kontras tinggi supaya kebaca di HP. */
	background: var(--aksen-teks);
	color: var(--white);
	font-size: 0.75rem;
	font-weight: 800;
	min-width: 20px;
	height: 20px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}
.hku-rencana-badge__count[hidden] { display: none; }
.hku-menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px; height: 44px;
	background: none;
	border: none;
	padding: 6px;
}
.hku-menu-toggle span {
	width: 24px; height: 2px;
	background: var(--white);
	display: block;
}

/* Layar sangat sempit (mis. iPhone SE gen 1, 320px) — logo (flex-shrink:0)
   dijamin tidak pernah gepeng, tapi total lebar header (logo + language
   select + 3 tombol bulat) bisa lebih lebar dari 320px kalau semua elemen
   dipertahankan ukuran penuhnya, menyebabkan scroll horizontal (ketemu saat
   user cek header). Padatkan select bahasa & jarak antar tombol khusus di
   breakpoint ini, BUKAN logo. */
@media (max-width: 359px) {
	.hku-header__inner { gap: 8px; }
	.hku-header__aksi { gap: 4px; }
	#hku-lang-select { max-width: 84px; padding: 10px 6px; font-size: 0.78rem; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hku-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% -20%, rgba(117, 135, 196, 0.16), transparent 45%),
		linear-gradient(135deg, var(--navy-tint) 0%, var(--navy) 48%, var(--navy-dark) 100%);
	color: var(--white);
	padding: 64px 0 48px;
}
/* Ilustrasi line-art buku/kitab terbuka + bulan sabit — hiasan dekoratif
   supaya hero tidak cuma teks polos di atas warna navy (permintaan user
   Fase 8: "biar keliatan hidup"). Mobile-first: disembunyikan di layar
   sempit (ruang kosong di sisi hero tidak cukup tanpa mengganggu teks),
   baru muncul di breakpoint desktop — lihat blok respons min-width:900px. */
.hku-hero__ilustrasi {
	display: none;
	position: absolute;
	top: 50%; right: -60px;
	transform: translateY(-50%);
	width: 320px; height: 320px;
	color: var(--gold);
	opacity: 0.28;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}
[dir="rtl"] .hku-hero__ilustrasi { right: auto; left: -60px; transform: translateY(-50%) scaleX(-1); }
.hku-hero__inner { text-align: center; max-width: 820px; margin: 0 auto; }
.hku-hero__badge {
	display: inline-block;
	background: rgba(117, 135, 196, 0.18);
	color: var(--gold);
	border: 1px solid rgba(117, 135, 196, 0.4);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: 20px;
}
/* Judul hero: dua baris dalam satu <h1>.
   Hierarki dibentuk dari KONTRAS, bukan cuma beda ukuran —
   merek: serif, besar, tracking rapat, putih penuh
   deskriptor: sans, jauh lebih kecil, tracking longgar, opacity diturunkan
   Dua sumbu perbedaan (jenis huruf + bobot) membuat keduanya terbaca sebagai
   dua tingkat informasi, bukan satu kalimat panjang yang terputus. */
.hku-hero__judul {
	margin-bottom: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}
.hku-hero__merek {
	font-family: var(--font-serif);
	font-size: clamp(2rem, 6.5vw, 3.4rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.hku-hero__deskriptor {
	font-family: var(--font);
	font-size: clamp(0.9rem, 2.3vw, 1.08rem);
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0.01em;
	opacity: 0.82;
	max-width: 46ch;
	text-wrap: balance;
}

.hku-search { position: relative; max-width: 560px; margin: 0 auto 28px; }
.hku-search__input {
	width: 100%;
	/* Ruang kanan disediakan untuk tombol Cari yang duduk di dalam kolom. */
	padding: 14px 108px 14px 20px;
	border-radius: 999px;
	border: none;
	font-size: 1rem;
	box-shadow: var(--shadow-lg);
}

/* Tombol Cari menempel di dalam kolom pencarian.
   Sebelumnya tidak ada tombol sama sekali — pengunjung yang tidak terbiasa
   dengan pencarian instan tidak punya isyarat visual bahwa kolom ini bisa
   ditindaklanjuti, dan di HP tidak semua papan ketik menampilkan tombol
   "cari". Form-nya juga punya action sungguhan ke halaman Cari Produk, jadi
   menekan tombol/Enter tetap berhasil walau JS gagal. */
.hku-search__tombol {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border: none;
	border-radius: 999px;
	background: var(--navy);
	color: var(--white);
	font-size: 0.86rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
.hku-search__tombol:hover,
.hku-search__tombol:focus-visible { background: #2d3670; }

/* ==========================================================================
   Tombol kamera — cari kitab dengan memotret sampulnya.

   Ditaruh di DALAM kolom ketik, tepat di kiri tombol "Cari", bukan di luar
   kotak pencarian: keduanya sama-sama cara memulai pencarian, jadi harus
   terbaca sebagai satu kelompok. Gayanya sengaja lebih redup (tanpa latar
   penuh) supaya tombol "Cari" tetap jadi aksi utama.

   Hanya muncul kalau kunci API sudah disetel — tombolnya tidak dipasang sama
   sekali oleh JS kalau fiturnya belum aktif.
   ========================================================================== */
.hku-search__kamera {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	/* Digeser dari kanan sejauh lebar tombol "Cari" + jaraknya. */
	right: 104px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.hku-search__kamera:hover,
.hku-search__kamera:focus-visible { background: var(--bg-abu); color: var(--navy); }

/* Beri ruang di kanan kolom ketik supaya teks tidak tertimpa dua tombol. */
.hku-search__input { padding-right: 150px; }

[dir="rtl"] .hku-search__kamera { right: auto; left: 104px; }

/* ==========================================================================
   Blok "cari dengan foto sampul" di bawah kotak pencarian hero.
   Dua tombol terpisah (kamera & galeri) karena satu input ber-`capture` hanya
   membuka kamera, sedangkan pembeli sering sudah memegang fotonya. Lihat
   hku_search_foto_html().
   ========================================================================== */
.hku-cari-foto {
	max-width: 560px;
	margin: -14px auto 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}
.hku-cari-foto__label {
	font-size: 0.85rem;
	/* Hero berlatar navy: warnanya diwarisi dari hero, bukan dipatok gelap. */
	color: rgba(255, 255, 255, 0.72);
}
.hku-cari-foto__aksi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	/* Ruangnya dipesan lebih dulu. JS bisa menukar blok WhatsApp dengan blok
	   tombol foto (mode barcode), dan tanpa tinggi minimum penukaran itu
	   menggeser isi halaman setelah tergambar — CLS di hero, §13 brief. */
	min-height: 40px;
}
/* Atribut `hidden` menyembunyikan lewat display:none di stylesheet UA, yang
   KALAH oleh aturan kelas di atas. Tanpa ini blok yang disembunyikan JS tetap
   terlihat — masalah yang sama sudah sempat terjadi pada tombol kamera. */
.hku-cari-foto__aksi[hidden],
.hku-cari-foto__label[hidden] { display: none; }
.hku-cari-foto__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.hku-cari-foto__btn svg { flex-shrink: 0; }
/* Atribut `hidden` menyembunyikan lewat display:none di stylesheet UA, yang
   KALAH oleh aturan kelas di atas. Tanpa baris ini tombol kamera tetap terlihat
   di desktop padahal JS sudah menyembunyikannya — ketahuan saat verifikasi. */
.hku-cari-foto__btn[hidden] { display: none; }
.hku-cari-foto__btn:hover,
.hku-cari-foto__btn:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.5);
}
/* SENGAJA tidak memakai hijau WhatsApp yang pekat. Tepat di bawah blok ini ada
   CTA utama "Chat Harga Grosir" yang memang hijau penuh; dua tombol hijau
   bertumpuk membuat keduanya saling bersaing dan terbaca berulang. Ikon
   WhatsApp-nya sudah cukup memberi tahu ke mana tombol ini menuju. */
.hku-cari-foto__btn--wa .hku-icon-wa { color: var(--wa-green); }
.hku-cari-foto__catatan-admin {
	margin: 2px 0 0;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
}
.hku-cari-foto__catatan-admin a { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 480px) {
	/* Di layar sempit dua tombol berdampingan jadi terlalu rapat; ditumpuk
	   penuh supaya sasaran sentuhnya tetap lebar. */
	.hku-cari-foto__aksi { width: 100%; flex-direction: column; min-height: 92px; }
	.hku-cari-foto__btn { justify-content: center; width: 100%; }
}

/* Teks "terbaca sebagai" pada hasil pencarian foto — pengunjung perlu tahu
   apa yang dibaca mesin supaya bisa mengoreksinya sendiri. */
.hku-search__terbaca {
	margin-bottom: 8px;
	font-size: 0.9rem;
	color: var(--muted);
}
.hku-search__terbaca b { color: var(--ink); }
.hku-search__wa { margin-top: 12px; }

/* Label kelompok hasil (Penerbit / Penulis / Kategori / Produk). */
.hku-search__grup {
	padding: 9px 16px 5px;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--muted);
	background: var(--bg-abu);
	text-align: left;
}
/* Item term tidak punya gambar — beri jarak kiri yang sama dengan item produk
   supaya judulnya tetap sejajar dan daftarnya tidak terlihat patah. */
.hku-search__item--term { padding-left: 16px; }

@media (max-width: 419px) {
	/* Di layar sempit, teks "Cari" dilepas — ikon kaca pembesar sudah cukup
	   jelas, dan kolom ketiknya jadi jauh lebih lega. */
	.hku-search__input { padding-right: 108px; }
	.hku-search__tombol { padding: 9px 12px; }
	.hku-search__tombol-teks { display: none; }
	/* Tombol "Cari" menyusut jadi ikon saja, jadi kameranya ikut merapat. */
	.hku-search__kamera { right: 54px; width: 34px; height: 34px; }
	[dir="rtl"] .hku-search__kamera { right: auto; left: 54px; }
}
.hku-search__hasil {
	position: absolute;
	top: calc(100% + 8px);
	left: 0; right: 0;
	background: var(--white);
	color: var(--ink);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	max-height: 360px;
	overflow-y: auto;
	text-align: left;
	z-index: 50;
}
.hku-search__item {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 16px;
	border-bottom: 1px solid var(--border);
}
.hku-search__item:last-child { border-bottom: none; }
.hku-search__item img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.hku-search__item-judul { font-weight: 700; font-size: 0.9rem; }
.hku-search__item-penerbit { font-size: 0.78rem; color: var(--muted); }
.hku-search__empty, .hku-search__loading { padding: 14px 16px; font-size: 0.85rem; color: var(--muted); }

.hku-hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 40px;
}
.hku-hero__stats {
	display: flex;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
}
.hku-hero__stats div { text-align: center; }
/* Efek "menyala" pada angka statistik hero (44 tahun/4 negara/100+ penerbit)
   — permintaan user Fase 8, biar terasa hidup. Redup→terang→redup + sedikit
   membesar, bukan kedip tajam supaya tetap terkesan premium bukan norak.
   Tiap angka delay beda dikit (nth-child) biar tidak nyala bareng serempak. */
.hku-hero__stats strong {
	display: block;
	font-size: 1.8rem;
	color: var(--gold);
	animation: hkuStatGlow 2.6s ease-in-out infinite;
}
.hku-hero__stats div:nth-child(2) strong { animation-delay: 0.5s; }
.hku-hero__stats div:nth-child(3) strong { animation-delay: 1s; }
@keyframes hkuStatGlow {
	0%, 100% { transform: scale(1); text-shadow: 0 0 6px rgba(248, 232, 193, 0.25); }
	50% { transform: scale(1.1); text-shadow: 0 0 14px rgba(248, 232, 193, 0.75), 0 0 24px rgba(248, 232, 193, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
	.hku-hero__stats strong { animation: none; }
}
.hku-hero__stats span { font-size: 0.85rem; opacity: 0.8; }
/* Baris ini di-center murni oleh justify-content:center, TIDAK ADA
   padding/transform sepihak — dua percobaan sebelumnya (padding sepihak di
   item terakhir, lalu padding 76px simetris yang malah bikin wrap) sama-sama
   merusak presisi tengah, ketemu & diperbaiki tuntas saat user cek screenshot
   beranda. Kalau baris ini jatuh di zona tombol WA melayang saat layar pendek
   (mis. Safari mobile dengan address bar), tombol yang disembunyikan
   sementara lewat JS (initHeroWaClearance di main.js) — BUKAN baris statistik
   yang digeser — supaya center selalu presisi apa pun kondisinya. */

/* ==========================================================================
   Tombol
   ========================================================================== */
.hku-btn {
	display: inline-flex;
	/* flex-start (bukan center) + nudge kecil di ikon (lihat "svg" di bawah) —
	   supaya kalau teks tombol membungkus 2 baris di layar sempit (mis. "Chat
	   WhatsApp untuk Kategori Ini"), ikon sejajar baris PERTAMA, bukan
	   melayang di tengah antara 2 baris. Ketemu saat audit mobile Fase 8,
	   persis contoh yang user maksud soal spacing tombol WA "kayak nanggung". */
	align-items: flex-start;
	gap: 8px;
	padding: 13px 22px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.35;
	border: 2px solid transparent;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.hku-btn svg { flex-shrink: 0; margin-top: 0.15em; }
.hku-btn:hover { transform: translateY(-1px); }
.hku-btn--wa { background: var(--wa-green); color: var(--white); }
.hku-btn--wa:hover { background: var(--wa-green-dark); }
.hku-btn--outline { border-color: rgba(255,255,255,0.5); color: var(--white); }
.hku-btn--outline:hover { border-color: var(--gold); color: var(--gold); }
.hku-btn--besar { padding: 16px 30px; font-size: 1rem; }

.hku-btn-wa {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	background: var(--wa-green);
	color: var(--white);
	padding: 11px 18px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1.35;
	width: 100%;
	justify-content: center;
	margin-top: 10px;
}
.hku-btn-wa svg { flex-shrink: 0; margin-top: 0.15em; }
.hku-btn-wa:hover { background: var(--wa-green-dark); }
.hku-btn-wa--besar { width: auto; padding: 15px 26px; font-size: 0.95rem; }
.hku-btn-wa--sticky { margin-top: 0; }

/* Tombol "+ Rencana Pembelian" — sengaja gaya sekunder (outline navy), WA
   tombol tetap yang paling menonjol (jalur konversi utama). */
.hku-btn-rencana {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--white);
	color: var(--navy);
	border: 1.5px solid var(--navy-tint);
	padding: 11px 14px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.85rem;
	width: 100%;
	transition: background 0.15s ease, transform 0.15s ease;
}
.hku-btn-rencana svg { flex-shrink: 0; }
.hku-btn-rencana:hover { background: var(--bg-abu); transform: translateY(-1px); }
.hku-btn-rencana.is-ditambahkan { background: var(--gold-dark); color: var(--navy-dark); border-color: var(--gold-dark); }

.hku-kartu-produk__aksi { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.hku-kartu-produk__aksi .hku-btn-wa { margin-top: 0; }

.hku-info-produk__cta { align-items: center; gap: 12px; flex-wrap: wrap; }
.hku-info-produk__cta .hku-btn-rencana { width: auto; padding: 13px 20px; font-size: 0.85rem; }


.hku-wa-float {
	position: fixed;
	right: 20px; bottom: 20px;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--wa-green);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-lg);
	z-index: 90;
}
.hku-wa-float svg { width: 26px; height: 26px; }

/* Halaman dengan tombol WA menonjol sendiri di konten (Kontak, Mitra) tidak
   butuh tombol melayang lagi — redundan, dan di Kontak sempat menutupi
   kontrol peta Google Maps di pojok kanan bawah (ketemu saat audit Fase 8,
   berlaku semua ukuran layar karena peta full-width di semua breakpoint). */
body.hku-sembunyikan-wa-melayang .hku-wa-float { display: none; }
/* Toggle dinamis via JS (initHeroWaClearance, main.js) — sembunyikan tombol
   WA melayang HANYA selagi baris statistik hero betul-betul jatuh di zona
   tombol (layar pendek + belum discroll), dipulihkan begitu lewat. Solusi
   ini dipilih supaya baris statistik hero tidak perlu digeser/di-padding
   sama sekali (tetap presisi center apa pun tinggi layarnya). */
body.hku-wa-clash-hero .hku-wa-float { display: none; }

/* Mobile-first: tombol WA melayang & sticky bar bawah (single produk)
   sama-sama fixed bottom-right — tumpang tindih di layar sempit kalau
   dibiarkan tampil bersamaan (ketemu saat audit mobile). Direset lagi di
   breakpoint desktop karena sticky bar mobile tidak tampil di sana. */
body.hku-punya-sticky-wa .hku-wa-float { display: none; }
/* Sticky bar fixed di bawah butuh padding penyeimbang di body, kalau tidak
   konten paling akhir halaman (disclaimer, dst.) ketutupan pas discroll
   sampai bawah — ketemu saat audit mobile. */
body.hku-punya-sticky-wa { padding-bottom: 76px; }

/* ==========================================================================
   Section umum
   ========================================================================== */
.hku-section { padding: 56px 0; }
.hku-section--abu { background: var(--bg-abu); }
.hku-section--navy { background: var(--navy); color: var(--white); }
.hku-section h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); text-align: center; margin-bottom: 32px; }

/* Kategori */
.hku-grid-kategori {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}
.hku-kartu-kategori {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 24px 16px;
	text-align: center;
	font-weight: 700;
	box-shadow: var(--shadow);
	transition: transform 0.15s ease, border-color 0.15s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
/* Icon line-art kategori (Fase 8) — supaya kartu tidak cuma teks polos.
   Warna navy di lingkaran krem lembut, senada palette baru. */
.hku-kartu-kategori__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--bg-abu);
	color: var(--navy);
}
.hku-kartu-kategori:hover { transform: translateY(-3px); border-color: var(--gold-dark); }

/* Penerbit */
.hku-grid-penerbit {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}
.hku-kartu-penerbit {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px 20px;
	font-weight: 700;
}
.hku-kartu-penerbit:hover { border-color: var(--gold-dark); }
.hku-kartu-penerbit__jumlah { font-weight: 500; font-size: 0.8rem; color: var(--muted); }

/* Produk */
.hku-grid-produk {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}
/* Carousel geser (mobile-first) — HANYA dipakai di section beranda yang
   berisi sedikit item kurasi (Produk Terlaris), BUKAN grid arsip/kategori
   yang bisa puluhan produk (carousel jelek buat browsing banyak item, grid
   biasa lebih pas di sana — makanya modifier class ini, bukan ubah
   .hku-grid-produk langsung). Direset balik jadi grid biasa di desktop
   (kolom sudah cukup lega, tak perlu geser). Ide dari referensi
   qurancordoba.com/mizanstore.com (Fase 8). */
.hku-grid-produk--carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}
.hku-grid-produk--carousel > .hku-kartu-produk {
	flex: 0 0 auto;
	width: 72vw;
	max-width: 260px;
	scroll-snap-align: start;
}
.hku-kartu-produk {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
}
.hku-kartu-produk__gambar {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--bg-abu);
}
.hku-kartu-produk__gambar img { width: 100%; height: 100%; object-fit: cover; }
.hku-kartu-produk__gambar-kosong { display: block; width: 100%; height: 100%; background: var(--bg-abu); }
.hku-badge-terlaris {
	position: absolute;
	top: 10px; left: 10px;
	background: var(--gold);
	color: var(--navy-dark);
	/* 0.8rem (12.8px) — di bawah ~12px teks mulai tidak nyaman dibaca di HP;
	   naik dari 0.72rem (11.5px) saat audit mobile menyeluruh Fase 8. */
	font-size: 0.8rem;
	font-weight: 800;
	padding: 4px 10px;
	border-radius: 999px;
}
.hku-kartu-produk__isi { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; }
.hku-kartu-produk__judul {
	font-weight: 700;
	font-size: 0.92rem;
	/* min-height 2 baris + padding bawah: judul 1-baris tadinya cuma 23px
	   (area tap tipis), sekaligus bikin tinggi kartu seragam walau judul
	   produk beda panjang — ketemu saat audit mobile menyeluruh Fase 8. */
	min-height: 2.6em;
	padding-bottom: 4px;
	margin-bottom: 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hku-bintang { color: var(--border); font-size: 0.85rem; margin-bottom: 6px; }
.hku-bintang-icon.is-aktif { color: var(--aksen-teks); }
.hku-bintang-footnote { text-align: center; font-size: 0.82rem; line-height: 1.5; color: var(--muted); margin-top: 20px; }

.hku-teks-terjual { font-size: 0.8rem; color: var(--muted); margin: 0 0 6px; }
.hku-teks-terjual strong { color: var(--aksen-teks); }

.hku-harga-baris-atas { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.hku-harga-coret { color: var(--muted); text-decoration: line-through; font-size: 0.82rem; }
.hku-harga-badge {
	background: rgba(117, 135, 196, 0.15);
	color: var(--aksen-teks);
	/* Persen diskon = informasi jual UTAMA, jangan sampai jadi teks terkecil
	   di kartu — naik dari 0.7rem (11.2px, terkecil di seluruh situs) saat
	   audit mobile menyeluruh Fase 8. */
	font-size: 0.82rem;
	font-weight: 800;
	padding: 3px 9px;
	border-radius: 999px;
}
.hku-harga-final { display: block; font-size: 1.15rem; font-weight: 800; color: var(--navy); }
.hku-harga--detail .hku-harga-final { font-size: 1.7rem; }
/* Konversi mata uang (Fase 8) — kecil & muted, murni info tambahan, harga
   Rupiah tetap yang utama/resmi. */
.hku-harga-valas { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 3px; }

/* Badge diskon versi grosir — hijau, bukan warna aksen diskon biasa, supaya
   pengunjung bisa membedakan "potongan yang sudah berlaku" dari "potongan
   tertinggi yang bisa dicapai kalau ambil banyak". */
.hku-harga-badge--grosir { background: rgba(20, 128, 74, 0.14); color: #14804a; }

/* Penjelas di bawah harga: harga di atas adalah harga pada potongan
   TERTINGGI. Sengaja teks polos & kecil (bukan badge lagi) supaya tidak
   bersaing perhatian dengan angka harganya sendiri. */
.hku-harga-grosir {
	display: block;
	margin-top: 4px;
	color: #14804a;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.4;
}
.hku-harga--detail .hku-harga-grosir { font-size: 0.82rem; margin-top: 6px; }
.hku-harga--detail .hku-harga-valas { font-size: 0.85rem; margin-top: 4px; }
.hku-harga-catatan { font-size: 0.82rem; color: var(--muted); margin: 6px 0 0; }
.hku-disclaimer-harga {
	font-size: 0.78rem;
	color: var(--muted);
	border-top: 1px solid var(--border);
	padding-top: 14px;
	margin-top: 20px;
}

/* Cerita */
.hku-cerita { max-width: 720px; text-align: center; margin: 0 auto; }
.hku-link-panah { color: var(--aksen-teks); font-weight: 700; display: inline-block; padding: 8px 0; }

/* Jangkauan distribusi */
.hku-jangkauan {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	text-align: center;
}
.hku-jangkauan__negara {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: var(--radius-lg);
	padding: 24px 12px;
}
.hku-jangkauan__negara strong { display: block; font-size: 1.1rem; margin-bottom: 4px; color: var(--gold); }
.hku-jangkauan__negara span { font-size: 0.82rem; opacity: 0.8; }
/* Bendera sederhana per negara (Fase 8) — bukan pin lokasi generik, supaya
   section ini lebih hidup & negaranya lebih cepat dikenali sekilas. */
.hku-jangkauan__bendera { display: block; margin: 0 auto 10px; width: 32px; }
.hku-jangkauan__bendera svg { display: block; margin: 0 auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }

/* Testimoni */
.hku-grid-testimoni {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}
.hku-kartu-testimoni {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 22px;
	box-shadow: var(--shadow);
}
.hku-kartu-testimoni img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
.hku-kartu-testimoni__bintang { color: var(--border); margin-bottom: 8px; }
.hku-kartu-testimoni__bintang .is-aktif { color: var(--aksen-teks); }
.hku-kartu-testimoni__kutipan { font-style: italic; }
.hku-kartu-testimoni__nama { font-weight: 700; font-size: 0.85rem; color: var(--muted); margin: 0; }

/* Profil Penulis/Mualif (Fase 8) */
.hku-penulis-intro { text-align: center; color: var(--muted); max-width: 640px; margin: -16px auto 32px; }
.hku-grid-penulis {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}
.hku-kartu-penulis {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 22px;
	box-shadow: var(--shadow);
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.hku-kartu-penulis:hover { transform: translateY(-3px); border-color: var(--gold-dark); }
.hku-kartu-penulis__nama { font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-bottom: 8px; }
.hku-kartu-penulis__bio { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.hku-kartu-penulis__jumlah { font-size: 0.78rem; font-weight: 700; color: var(--aksen-teks); margin-top: auto; }
[dir="rtl"] .hku-kartu-penulis__nama, [dir="rtl"] .hku-kartu-penulis__bio { text-align: right; }

/* Sosmed CTA */
.hku-sosmed-cta { text-align: center; }
.hku-sosmed-cta__link { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.hku-sosmed-cta__link a {
	background: var(--navy);
	color: var(--white);
	padding: 10px 22px;
	border-radius: 999px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Blog */
.hku-grid-blog {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}
/* Carousel geser mobile-first, sama alasan dengan .hku-grid-produk--carousel
   di atas — cuma untuk "Artikel Terbaru" di beranda (3 kartu kurasi), bukan
   arsip /blog/ yang berpaginasi. */
.hku-grid-blog--carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}
.hku-grid-blog--carousel > .hku-kartu-blog {
	flex: 0 0 auto;
	width: 78vw;
	max-width: 300px;
	scroll-snap-align: start;
}
.hku-kartu-blog {
	display: block;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
}
/* display:block WAJIB — elemennya <a> (default inline), dan aspect-ratio
   TIDAK berlaku untuk elemen inline non-replaced. Tanpa ini, kartu blog yang
   belum punya Featured Image kolaps jadi 0px (area gambar hilang total, kartu
   terlihat rusak & tidak sejajar dengan kartu lain yang ada gambarnya) —
   ketemu saat audit mobile menyeluruh Fase 8. */
.hku-kartu-blog__gambar { display: block; aspect-ratio: 16/10; background: var(--bg-abu); }
.hku-kartu-blog__gambar img { width: 100%; height: 100%; object-fit: cover; }
.hku-kartu-blog__judul { display: block; font-weight: 700; padding: 14px 16px 4px; }
.hku-kartu-blog__ringkas { padding: 0 16px 16px; font-size: 0.85rem; color: var(--muted); }

/* CTA penutup */
.hku-cta-penutup {
	background: var(--gold);
	text-align: center;
}
.hku-cta-penutup h2 { color: var(--navy-dark); max-width: 720px; margin: 0 auto 28px; }
.hku-cta-penutup .hku-btn--wa { background: var(--navy); }
.hku-cta-penutup .hku-btn--wa:hover { background: var(--navy-dark); }

/* ==========================================================================
   Footer
   ========================================================================== */
.hku-footer { background: var(--navy-dark); color: rgba(255,255,255,0.85); padding: 56px 0 0; }
.hku-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-bottom: 40px;
}
.hku-footer__brand img { height: 40px; margin-bottom: 14px; }
.hku-footer__brand p { font-size: 0.88rem; opacity: 0.8; }
.hku-footer__sosmed { display: flex; gap: 14px; margin-top: 10px; }
/* padding vertikal di semua link footer — memperbesar area tap di HP tanpa
   mengubah tampilan teks (link 19-21px terlalu tipis untuk jari), ketemu
   saat audit mobile menyeluruh Fase 8. */
.hku-footer__sosmed a { font-size: 0.85rem; font-weight: 700; color: var(--gold); display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; }
.hku-footer h3 { font-size: 0.95rem; margin-bottom: 14px; color: var(--white); }
.hku-footer__kategori ul li { margin-bottom: 2px; font-size: 0.88rem; }
.hku-footer__kategori a { display: inline-block; padding: 7px 0; }
.hku-footer__kategori a:hover { color: var(--gold); }
.hku-footer address { font-style: normal; font-size: 0.88rem; margin-bottom: 10px; }
.hku-footer address a { color: var(--wa-green); font-weight: 700; display: inline-block; padding: 8px 0; }
.hku-footer__jam { font-size: 0.82rem; opacity: 0.75; }
.hku-footer__link-statis { display: flex; flex-direction: column; gap: 0; margin-top: 14px; }
.hku-footer__link-statis a { font-size: 0.85rem; display: inline-block; padding: 7px 0; }
.hku-footer__link-statis a:hover { color: var(--gold); }
.hku-footer__copyright {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 18px 0;
	font-size: 0.78rem;
	text-align: center;
	opacity: 0.7;
}
/* Mobile-first: tombol WA melayang menutupi baris copyright di ujung scroll
   paling bawah di SEMUA halaman biasa (blog, arsip kategori, FAQ, dst),
   karena lebar teks copyright yang center-align di layar sempit kebetulan
   pas berada di zona tombol. Ketemu saat audit mobile Fase 8. Reservasi
   ruang khusus di baris ini saja (bukan padding body keseluruhan) supaya
   tidak mengubah jarak section lain. Direset di breakpoint desktop. */
.hku-footer__copyright { padding-right: 76px; }
[dir="rtl"] .hku-footer__copyright { padding-right: 0; padding-left: 76px; }

/* ==========================================================================
   Arsip (kategori / penerbit / blog) & halaman statis
   ========================================================================== */
.hku-halaman-404 {
	max-width: 640px;
	margin: 0 auto;
	padding: 64px 20px 80px;
	text-align: center;
}
.hku-halaman-404 .hku-search--404 { margin: 28px auto; }
.hku-halaman-404 .hku-search__input {
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
}
.hku-halaman-404 .hku-grid-kategori { margin: 32px 0; text-align: left; }
.hku-halaman-404 .hku-btn--wa { margin-top: 12px; }

/* Longhand (BUKAN shorthand "padding: 32px 0 64px") — sengaja, supaya tidak
   menimpa padding kiri/kanan 20px dari .hku-container yang menempel di
   elemen yang sama. Shorthand versi lama nge-nolkan sisi kiri/kanan sampai
   nempel ke tepi layar di SEMUA halaman arsip/statis (blog, kategori,
   penerbit, Kontak, FAQ, Mitra, dst) — ketemu saat user cek keterbacaan. */
.hku-halaman-arsip, .hku-halaman-statis { padding-top: 32px; padding-bottom: 64px; }
.hku-halaman-arsip h1, .hku-halaman-statis h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.hku-arsip-eyebrow { color: var(--muted); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; }

/* Blok "Data Terbitan" — ISBN, muhaqqiq, halaman, jilid, ukuran.
   Mengikuti gaya tabel spesifikasi yang sudah ada supaya terbaca sebagai satu
   keluarga, tapi dengan judul terpisah karena isinya beda jenis: ini data
   terbitan yang bisa diverifikasi, bukan keterangan fisik. */
/* Rantai kitab: matan -> syarah -> hasyiah. Diberi latar tipis supaya terbaca
   sebagai blok navigasi antar-kitab, bukan bagian dari spesifikasi produk. */
/* Harga belum ditetapkan — tampil sebagai ajakan, bukan angka.
   Warnanya sengaja BUKAN warna harga (yang mencolok) supaya tidak terbaca
   sebagai penawaran, melainkan sebagai undangan bertanya. */
.hku-harga-belum {
	display: inline-block;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--aksen-teks);
}
.hku-harga--detail .hku-harga-belum { font-size: 1.15rem; }
/* Jaraknya 0px ke blok berikutnya di MOBILE: ".hku-harga-catatan" memakai
   shorthand "margin: 6px 0 0" (bawahnya nol), dan pemisah yang selama ini
   menutupi hal itu — ".hku-info-produk__cta" dengan margin 16px — justru
   display:none di mobile karena digantikan sticky bar. Jadi "Data Terbitan"
   menempel persis di bawah catatan harga. Jaraknya dipasang di blok harga
   sendiri (bukan di .hku-harga-catatan yang dipakai bersama, dan bukan di
   .hku-bibliografi yang juga muncul di konteks lain) supaya tidak gampang
   ke-override lagi — masalah sama pernah terjadi di ".hku-info-produk__sku". */
.hku-harga--detail.hku-harga--belum { margin-bottom: 22px; }

.hku-relasi-kitab {
	margin: 0 0 22px;
	padding: 14px 16px;
	background: var(--bg-abu);
	border-radius: 10px;
}
.hku-relasi-kitab h2 { font-size: 1.02rem; color: var(--navy); margin: 0 0 8px; }
.hku-relasi-kitab p { margin: 0 0 8px; font-size: 0.94rem; }
.hku-relasi-kitab__daftar { margin: 0; padding-left: 18px; list-style: disc; }
.hku-relasi-kitab__daftar li { margin-bottom: 5px; font-size: 0.94rem; }
.hku-relasi-kitab__daftar li::marker { color: var(--gold-dark); }
.hku-relasi-kitab__jenis { color: var(--muted); font-size: 0.85rem; }
[dir="rtl"] .hku-relasi-kitab__daftar { padding-left: 0; padding-right: 18px; }

.hku-bibliografi { margin: 0 0 22px; }
.hku-bibliografi h2 {
	font-size: 1.05rem;
	color: var(--navy);
	margin: 0 0 10px;
}
.hku-bibliografi table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.hku-bibliografi th,
.hku-bibliografi td {
	text-align: left;
	padding: 7px 10px;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
.hku-bibliografi th { width: 42%; color: var(--muted); font-weight: 600; }
.hku-bibliografi tr:last-child th,
.hku-bibliografi tr:last-child td { border-bottom: 0; }
/* Nama muhaqqiq ditulis Arab — arah & jenis huruf mengikuti isinya, bukan
   mengikuti bahasa halaman. */
.hku-bibliografi td[dir="rtl"] { font-family: var(--font-arab); font-size: 1.05rem; }
[dir="rtl"] .hku-bibliografi th,
[dir="rtl"] .hku-bibliografi td { text-align: right; }

/* ==========================================================================
   Judul kitab dalam tulisan Arab.

   Ditampilkan di SEMUA bahasa (bukan cuma halaman Arab) karena pembeli kitab
   — termasuk dari Malaysia & Thailand — mengenali kitab dari nama Arabnya,
   sedangkan judul transliterasi kami penuh keterangan cetakan
   ("... 1/4 17X24 4JUZ KUNING") yang menyulitkan pengenalan cepat.

   Ukurannya sengaja SEDIKIT LEBIH BESAR dari teks Latin di sekitarnya: pada
   ukuran piksel yang sama, tulisan Arab terbaca lebih kecil karena bentuk
   hurufnya lebih rapat dan banyak detail di bawah garis dasar.
   ========================================================================== */
.hku-judul-arab,
.hku-kartu-produk__arab,
.hku-info-produk__arab,
.hku-search__item-arab {
	display: block;
	font-family: var(--font-arab);
	direction: rtl;
	text-align: right;
	color: var(--muted);
	line-height: 1.8;
}

.hku-kartu-produk__arab {
	font-size: 1.05rem;
	margin: 2px 0 6px;
	/* Satu baris saja di kartu — nama kitab panjang tidak boleh mendorong
	   harga & tombol turun sampai kartu jadi tidak rata tingginya. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hku-info-produk__arab {
	font-size: 1.6rem;
	color: var(--navy);
	margin: 0 0 12px;
}

.hku-search__item-arab {
	font-size: 0.95rem;
	margin-top: 1px;
}

/* Di halaman berbahasa Arab/Jawi, seluruh tata letaknya sudah RTL — nama Arab
   justru harus mengikuti perataan halaman, bukan dipaksa ke kanan sendiri. */
[dir="rtl"] .hku-judul-arab,
[dir="rtl"] .hku-kartu-produk__arab,
[dir="rtl"] .hku-info-produk__arab,
[dir="rtl"] .hku-search__item-arab { text-align: inherit; }

/* Judul pemisah di atas grid produk arsip kategori ("Terlaris"/"Semua Produk").
   Garis bawah tipis dipakai supaya terbaca sebagai SEKAT antara blok
   sub-kategori dan blok produk — tanpa itu, judulnya mengambang dan terlihat
   seperti bagian dari kartu sub-kategori di atasnya. */
.hku-arsip-judul-grid {
	font-size: 1.15rem;
	color: var(--navy);
	margin: 28px 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--bg-abu);
}
.hku-arsip-deskripsi { color: var(--muted); max-width: 680px; }

/* Banner promo arsip kategori — reuse gradasi navy hero (§7 brand) supaya
   halaman kategori terasa seperti "etalase" khusus, bukan cuma header teks
   polos. Ide dari referensi qurancordoba.com/mizanstore.com (Fase 8). */
.hku-kategori-banner {
	position: relative;
	background:
		radial-gradient(circle at 12% -20%, rgba(117, 135, 196, 0.16), transparent 45%),
		linear-gradient(135deg, var(--navy-tint) 0%, var(--navy) 48%, var(--navy-dark) 100%);
	color: var(--white);
	padding: 28px 0 36px;
	margin-bottom: 32px;
}
/* Varian dengan gambar (Fase 8, opsional diisi staf per kategori lewat
   Produk → Kategori → edit kategori) — gambar jadi latar, gradasi navy tetap
   dipakai sebagai overlay semi-transparan supaya teks tetap terbaca. */
.hku-kategori-banner--bergambar { background-size: cover; background-position: center; }
.hku-kategori-banner--bergambar::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 12% -20%, rgba(117, 135, 196, 0.16), transparent 45%),
		linear-gradient(135deg, rgba(54, 75, 122, 0.88) 0%, rgba(29, 43, 86, 0.92) 100%);
}
.hku-kategori-banner__inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto; }
.hku-kategori-banner h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--white); margin-top: 12px; }
.hku-kategori-banner__deskripsi { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto 6px; }
.hku-kategori-banner__tagline { color: rgba(255,255,255,0.75); font-size: 0.88rem; margin-bottom: 20px; }
.hku-kategori-banner .hku-breadcrumb ol { justify-content: center; color: rgba(255,255,255,0.7); }
.hku-kategori-banner .hku-breadcrumb a { color: rgba(255,255,255,0.9); }
.hku-kategori-banner .hku-breadcrumb a:hover { color: var(--gold); }
.hku-grid-kategori--sub { margin: 24px 0 40px; }
.hku-arsip-kosong { color: var(--muted); padding: 40px 0; text-align: center; }
.hku-paginasi { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.hku-paginasi .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px; height: 36px;
	border-radius: 8px;
	border: 1px solid var(--border);
	font-weight: 700;
	font-size: 0.85rem;
}
.hku-paginasi .current { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* list-style:none WAJIB — reset global cuma menyasar `ul` (baris ~79), `ol`
   tidak pernah direset, jadi breadcrumb tampil bernomor "1. Beranda 2. Kitab
   ..." di SEMUA halaman. Catatan: `display:list-item` itu sudah block-level,
   jadi blockification flex TIDAK menghapus markernya — harus dimatikan
   eksplisit. Sengaja di-scope ke breadcrumb saja, JANGAN jadi reset global
   `ol`, karena Daftar Isi artikel & list bernomor di konten memang perlu
   nomornya. Ketemu saat audit mobile menyeluruh Fase 8. */
/* padding: 0 WAJIB eksplisit. Reset global di atas hanya menargetkan <ul>,
   tidak <ol> — jadi breadcrumb (yang memang <ol>, karena urutannya bermakna)
   masih membawa padding-left: 40px bawaan browser. Di banner kategori yang
   rata tengah, padding itu menggeser isinya 20px ke kanan dari titik tengah
   sejati: terlihat jelas "Beranda / Kitab" tidak sejajar dengan judul di
   bawahnya, walau keduanya sama-sama di-center. */
.hku-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); margin: 20px 0; padding: 0; }
/* Padding vertikal kecil di link breadcrumb — memperbesar area tap tanpa
   mengubah tampilan (teksnya tetap sama), link 17px terlalu tipis untuk jari
   di HP. Pola yang sama dipakai di link teks lain (footer, daftar isi). */
.hku-breadcrumb a { display: inline-block; padding: 6px 0; }
.hku-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 6px; }
.hku-breadcrumb a:hover { color: var(--aksen-teks); }

/* ==========================================================================
   Single produk
   ========================================================================== */
.hku-single-produk { padding-bottom: 64px; }
.hku-single-produk__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: start;
}
.hku-galeri-produk__utama {
	aspect-ratio: 1/1;
	background: var(--bg-abu);
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: static;
}
.hku-galeri-produk__utama img { width: 100%; height: 100%; object-fit: cover; }
.hku-galeri-produk__kosong { display: block; width: 100%; height: 100%; }
.hku-galeri-produk__thumb { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.hku-galeri-produk__thumb-btn {
	width: 64px; height: 64px;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid transparent;
	padding: 0;
	background: none;
}
.hku-galeri-produk__thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.hku-galeri-produk__thumb-btn.is-aktif { border-color: var(--gold-dark); }

.hku-info-produk__kategori { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
/* Chip kategori & link penerbit/penulis = jalur navigasi ke arsip, sering
   ditekan. Font & padding dinaikkan supaya terbaca + area tap layak di HP
   (sebelumnya 12px/27px & 20px tinggi) — audit mobile menyeluruh Fase 8. */
.hku-info-produk__kategori a {
	font-size: 0.82rem;
	font-weight: 700;
	background: var(--bg-abu);
	color: var(--navy);
	padding: 8px 14px;
	border-radius: 999px;
}
.hku-info-produk__judul { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 12px; }
.hku-info-produk__penerbit { font-size: 0.9rem; color: var(--muted); margin-bottom: 4px; }
.hku-info-produk__penerbit a { font-weight: 700; color: var(--navy); display: inline-block; padding: 5px 0; }
.hku-info-produk__penulis { font-size: 0.9rem; color: var(--muted); margin-top: 0; margin-bottom: 14px; }
.hku-info-produk__penulis a { font-weight: 700; color: var(--navy); display: inline-block; padding: 5px 0; }
/* Mobile-first: sticky bar bawah (.hku-sticky-wa-mobile) menggantikan
   tombol CTA biasa ini di layar sempit — dobel kalau ditampilkan bersamaan.
   Direset tampil lagi di breakpoint desktop (sticky bar mobile disembunyikan
   di sana). */
.hku-info-produk__cta { margin: 16px 0; display: none; }
/* Jarak sebelumnya 0px pas ke ".hku-harga-catatan" di atasnya (margin-bottom
   elemen itu ke-override jadi 0 oleh shorthand "margin: 6px 0 0") — teks
   "Kode: ..." nempel langsung, terasa sesak & rapat di mobile (keluhan user
   Fase 8 soal spacing mobile "kayak nanggung"). Kasih jarak dari sisi sini
   saja supaya tidak gampang ke-timpa lagi oleh perubahan margin di atasnya. */
.hku-info-produk__sku { font-size: 0.8rem; color: var(--muted); margin-top: 16px; }
.hku-info-produk__subjudul { font-size: 1.05rem; margin-top: 28px; }
.hku-tabel-spesifikasi th, .hku-tabel-spesifikasi td {
	text-align: left;
	padding: 8px 12px;
	border-bottom: 1px solid var(--border);
	font-size: 0.88rem;
}
.hku-tabel-spesifikasi th { width: 40%; color: var(--muted); font-weight: 600; }
.hku-info-produk__deskripsi { font-size: 0.94rem; color: var(--ink); }

.hku-produk-terkait { margin-top: 64px; }
.hku-produk-terkait h2 { font-size: 1.3rem; margin-bottom: 20px; }

/* Mobile-first: sticky bar CTA di dasar layar, base tampil (mobile),
   disembunyikan lagi di breakpoint desktop (lihat .hku-info-produk__cta
   yang jadi CTA normal di sana). */
.hku-sticky-wa-mobile {
	display: flex;
	gap: 8px;
	align-items: stretch;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 95;
	background: var(--white);
	padding: 10px 16px;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
}
.hku-sticky-wa-mobile .hku-btn-wa { flex: 1; margin-top: 0; }
.hku-sticky-wa-mobile .hku-btn-rencana { width: auto; flex-shrink: 0; padding: 10px 14px; }
.hku-sticky-wa-mobile .hku-btn-rencana span { display: none; }

/* Blog single */
.hku-single-post h1 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
.hku-single-post__gambar { margin: 20px 0; border-radius: var(--radius-lg); overflow: hidden; }
.hku-single-post__konten { font-size: 1rem; }
.hku-single-post__konten p { margin-bottom: 1.2em; }
.hku-single-post__konten h2 { margin: 1.6em 0 0.6em; scroll-margin-top: 90px; }

/* Ruang gambar kosong (belum diisi staf) — Fase 8, mencontoh pola
   tokobuku.co.id yang selalu ada gambar di awal artikel. Gaya sama dengan
   fallback ".hku-kartu-blog__gambar" (bg abu) supaya konsisten. */
.hku-single-post__gambar--kosong {
	aspect-ratio: 16/9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--bg-abu);
	border: 1.5px dashed var(--border);
	color: var(--muted);
	text-align: center;
	padding: 20px;
}
.hku-single-post__gambar--kosong span { font-size: 0.8rem; max-width: 260px; }

/* Daftar Isi (TOC) beranchor — Fase 8, mencontoh blog.mizanstore.com &
   tokobuku.co.id. scroll-margin-top di atas (h2) supaya heading tidak
   ketutupan header sticky pas lompat dari link ini.

   ATURANNYA ADA DI SATU TEMPAT: cari ".hku-daftar-isi" di bagian "Halaman
   penulis" di bawah. Dulu ada DUA blok yang sama-sama mengatur daftar isi —
   yang satu di sini, satu di bawah — dan keduanya saling menimpa dengan
   specificity yang nyaris sama (mis. `text-decoration: underline` di sini
   kalah oleh `none` di bawah, tapi `padding` dari sini tetap ikut).
   Menyunting salah satunya memberi hasil yang membingungkan, jadi blok ini
   dikosongkan dan semuanya dipindah ke bawah. */

/* ==========================================================================
   Responsive — MOBILE-FIRST (Fase 8): semua style di atas ini adalah
   tampilan dasar untuk layar sempit. Breakpoint tunggal min-width:900px di
   bawah ini MENAMBAH kompleksitas untuk tablet/desktop (nav horizontal,
   grid multi-kolom, dst), bukan sebaliknya. Alasan: mayoritas pengunjung
   toko ini dari HP, jadi tampilan mobile harus jadi prioritas/default, baru
   desktop sebagai "peningkatan" — bukan tampilan desktop yang diciutkan.
   ========================================================================== */
@media (min-width: 900px) {
	.hku-header__nav {
		display: block;
		position: static;
		padding: 0;
		max-height: none;
		overflow: visible;
		background: none;
	}
	.hku-menu { flex-direction: row; gap: 28px; }
	.hku-menu a { display: inline; padding: 0; border-bottom: none; }
	.hku-menu-toggle { display: none; }
	.hku-hero__ilustrasi { display: block; }

	.hku-footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
	.hku-single-produk__grid { grid-template-columns: 1fr 1fr; gap: 48px; }
	.hku-galeri-produk__utama { position: sticky; top: 90px; }
	.hku-sticky-wa-mobile { display: none; }
	.hku-info-produk__cta { display: flex; }

	/* Reset fix khusus mobile — di layar lebar tombol WA melayang & sticky
	   bar tidak sedekat/tumpang tindih itu, jadi ruang cadangannya tak perlu. */
	body.hku-punya-sticky-wa .hku-wa-float { display: flex; }
	body.hku-punya-sticky-wa { padding-bottom: 0; }
	.hku-footer__copyright { padding-right: 0; }
	[dir="rtl"] .hku-footer__copyright { padding-left: 0; }

	/* Carousel geser cuma relevan mobile (kolom desktop sudah lega) — balik
	   ke grid biasa di sini. */
	.hku-grid-produk--carousel {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		overflow-x: visible;
		padding-bottom: 0;
	}
	.hku-grid-produk--carousel > .hku-kartu-produk { width: auto; max-width: none; }
	.hku-grid-blog--carousel {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		overflow-x: visible;
		padding-bottom: 0;
	}
	.hku-grid-blog--carousel > .hku-kartu-blog { width: auto; max-width: none; }
}

/* ==========================================================================
   Popup Promo (Fase 8) — konten diisi staf lewat Tampilan → Popup Promo.
   ========================================================================== */
body.hku-popup-terbuka { overflow: hidden; }
.hku-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(29, 43, 86, 0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
/* Atribut HTML "hidden" biasanya cukup (browser terapkan display:none bawaan),
   tapi kalah spesifisitas lawan class selector ".hku-popup-overlay{display:flex}"
   di atas — tanpa baris ini, klik tombol tutup/Escape "berhasil" set hidden=true
   tapi popup TETAP kelihatan tampil. Ketemu saat verifikasi Fase 8. */
.hku-popup-overlay[hidden] { display: none; }
.hku-popup-kartu {
	position: relative;
	background: var(--white);
	border-radius: var(--radius-lg);
	max-width: 420px;
	width: 100%;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	box-shadow: var(--shadow-lg);
}
.hku-popup-tutup {
	position: absolute;
	top: 10px; right: 10px;
	/* 44px — popup menutupi konten, jadi tombol tutup WAJIB gampang ditekan
	   di HP; 32px sebelumnya di bawah ambang nyaman (ketemu saat audit
	   mobile menyeluruh Fase 8). */
	width: 44px; height: 44px;
	border-radius: 50%;
	/* 0.6 (bukan 0.35) — tanda "×" putih di atas latar terlalu transparan cuma
	   2.4:1 kontrasnya (nyaris tak terlihat kalau gambar popup-nya terang);
	   0.6 menaikkan ke ~5.7:1. Tombol tutup wajib gampang DILIHAT & ditekan. */
	background: rgba(0,0,0,0.6);
	color: var(--white);
	border: none;
	font-size: 1.3rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.hku-popup-gambar { aspect-ratio: 16/9; background: var(--bg-abu); border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.hku-popup-gambar img { width: 100%; height: 100%; object-fit: cover; }
.hku-popup-konten { padding: 22px; text-align: center; }
.hku-popup-judul { font-size: 1.3rem; color: var(--navy); margin-bottom: 10px; }
.hku-popup-isi { font-size: 0.92rem; color: var(--ink); margin-bottom: 18px; }
.hku-popup-konten .hku-btn { width: 100%; justify-content: center; }
[dir="rtl"] .hku-popup-tutup { right: auto; left: 10px; }

/* ==========================================================================
   Rencana Pembelian (Fase 8) — simulator diskon bertingkat, BUKAN cart
   transaksional (CLAUDE.md §2 update Fase 8). Mobile-first: 1 kolom, grid
   2 kolom (daftar + ringkasan) baru di breakpoint desktop.
   ========================================================================== */
.hku-rencana-disclaimer { font-size: 0.82rem; color: var(--muted); background: var(--bg-abu); padding: 10px 14px; border-radius: var(--radius); }
.hku-btn--terang { border-color: var(--navy-tint); color: var(--navy); }
.hku-btn--terang:hover { border-color: var(--navy); background: var(--bg-abu); }

.hku-rencana-kosong { text-align: center; padding: 40px 20px; }
.hku-rencana-kosong p { color: var(--muted); margin-bottom: 16px; }
.hku-rencana-kosong .hku-btn { display: inline-flex; }

.hku-rencana-grid { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
.hku-rencana-daftar h2 { font-size: 1.1rem; display: flex; align-items: baseline; gap: 8px; }
.hku-rencana-daftar__jumlah { font-size: 0.85rem; color: var(--muted); font-weight: 400; }

/* Mobile-first 2 baris: [gambar | judul+harga | hapus] lalu [kontrol qty].
   Versi 1-baris (4 kolom sejajar) bikin kolom judul tersisa cuma ~93px di
   layar 375px setelah tombol qty diperbesar ke 40px — judul produk jadi
   terjepit & terpotong. Dipisah 2 baris supaya judul dapat lebar penuh
   TANPA mengecilkan lagi tombolnya (ketemu saat audit mobile menyeluruh). */
.hku-rencana-item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	grid-template-areas:
		"gambar info hapus"
		"gambar qty  qty";
	align-items: center;
	gap: 8px 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--border);
}
.hku-rencana-item__gambar { grid-area: gambar; align-self: start; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--bg-abu); }
.hku-rencana-item__info { grid-area: info; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hku-rencana-item__hapus { grid-area: hapus; }
.hku-rencana-item__qty { grid-area: qty; justify-self: start; }
.hku-rencana-item__judul { font-weight: 700; font-size: 0.85rem; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hku-rencana-item__harga { font-size: 0.88rem; color: var(--navy); font-weight: 700; }
/* Kontrol jumlah: SATU kesatuan, bukan tiga potongan.
   Versi sebelumnya memakai pill radius 999px dengan tombol persegi 40px
   ber-latar abu di dalamnya — sudut tombol terpotong oleh lengkung pill dan
   bagian angka tidak berlatar, sehingga terlihat seperti garis yang putus di
   tengah. Sekarang: satu kotak membulat, latar seragam, dan pembatas tipis
   antar bagian supaya batas tombolnya tetap terbaca tanpa memutus bentuknya. */
.hku-rencana-item__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--white);
	overflow: hidden;
}
/* 40px (bukan 28px) — tombol +/- & hapus adalah interaksi UTAMA di halaman
   ini dan paling sering ditekan di HP; 28px jauh di bawah ambang nyaman
   (~44px) dan gampang salah tekan, ketemu saat audit mobile menyeluruh. */
.hku-rencana-item__qty button {
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	color: var(--navy);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}
.hku-rencana-item__qty button:hover,
.hku-rencana-item__qty button:focus-visible { background: var(--bg-abu); }
.hku-rencana-item__qty span {
	padding: 0 6px;
	min-width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.92rem;
	font-variant-numeric: tabular-nums;
	border-left: 1px solid var(--border);
	border-right: 1px solid var(--border);
}
.hku-rencana-item__hapus { color: var(--muted); font-size: 1.35rem; line-height: 1; width: 40px; height: 40px; }
.hku-rencana-item__hapus:hover { color: #d63638; }

.hku-rencana-simulasi { background: var(--bg-abu); border-radius: var(--radius-lg); padding: 18px; }
.hku-rencana-simulasi h3 { font-size: 0.95rem; margin-bottom: 10px; }
.hku-rencana-promo-list { display: flex; flex-direction: column; gap: 6px; }
.hku-rencana-promo { display: flex; justify-content: space-between; gap: 8px; font-size: 0.78rem; color: var(--muted); padding: 8px 10px; border-radius: 8px; background: var(--white); }
.hku-rencana-promo.is-aktif { background: var(--navy); color: var(--white); font-weight: 700; }
.hku-rencana-promo-kosong { font-size: 0.8rem; color: var(--muted); text-align: center; padding: 8px; }

.hku-rencana-total { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-top: 16px; }
.hku-rencana-total__baris { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 6px 0; }
.hku-rencana-total__baris--diskon { color: var(--aksen-teks); font-weight: 700; }
.hku-rencana-total__baris--final { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; font-size: 1.1rem; font-weight: 800; color: var(--navy); }

.hku-rencana-form { margin-top: 16px; }
.hku-rencana-form h3 { font-size: 0.9rem; margin-bottom: 10px; }
.hku-rencana-form input, .hku-rencana-form textarea {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 10px 14px;
	font-size: 0.88rem;
	margin-bottom: 10px;
	font-family: var(--font);
	resize: vertical;
}

.hku-rencana-aksi { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.hku-rencana-aksi .hku-btn--wa { justify-content: center; width: 100%; }
.hku-rencana-aksi__sekunder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hku-rencana-aksi__sekunder .hku-btn { width: 100%; justify-content: center; }

@media (min-width: 900px) {
	.hku-rencana-grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
	.hku-rencana-grid { display: grid; }
}

/* ==========================================================================
   RTL (Arab & Jawi) — flexbox/grid otomatis mirror ikut dir="rtl", tapi
   properti fisik eksplisit (left/right/text-align/margin) di atas tidak.
   Cukup override yang benar-benar physical, bukan tulis ulang semua.
   ========================================================================== */
[dir="rtl"] .hku-skip-link:focus { left: auto; right: 8px; }
[dir="rtl"] .hku-search__hasil { text-align: right; }
[dir="rtl"] .hku-wa-float { right: auto; left: 20px; }
[dir="rtl"] .hku-badge-terlaris { left: auto; right: 10px; }
[dir="rtl"] .hku-halaman-404 .hku-grid-kategori { text-align: right; }
[dir="rtl"] .hku-breadcrumb li:not(:last-child)::after { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .hku-tabel-spesifikasi th,
[dir="rtl"] .hku-tabel-spesifikasi td { text-align: right; }
[dir="rtl"] .hku-info-produk { order: -1; }
[dir="rtl"] .hku-hero__badge { direction: rtl; }
[dir="rtl"] .hku-kartu-produk__judul,
[dir="rtl"] .hku-info-produk__judul { text-align: right; }

/* Font Arab tradisional (Amiri) di seluruh teks halaman Arab/Jawi — font
   sans-serif sistem tidak konsisten merender aksara Arab antar OS/browser,
   dan Merriweather (Serif Latin) tidak punya glyph Arab sama sekali sehingga
   akan fallback balik ke sans-serif sistem kalau tidak di-override eksplisit
   di sini. Fallback tetap ke --font untuk karakter Latin yang tercampur
   (mis. SKU, merek asing) — lihat CLAUDE.md §7 & catatan sesi Fase 8. */
[dir="rtl"] body { font-family: var(--font-arab); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: var(--font-arab); font-weight: 700; }

/* ==========================================================================
   Fade-in saat scroll (Fase 8, gaya apple.com — permintaan user)
   Class "hku-fade" HANYA dipasang oleh JS (initFadeInScroll di main.js), TIDAK
   pernah ada di HTML statis — supaya kalau JS gagal/dimatikan, konten tetap
   tampil normal alih-alih tersangkut transparan selamanya. Efeknya juga
   otomatis dilewati kalau pengguna aktifkan "reduce motion" di sistemnya.
   ========================================================================== */
.hku-fade {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease-out, transform 0.55s ease-out;
	will-change: opacity, transform;
}
.hku-fade--tampil {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.hku-fade { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Halaman Cari Produk (Fase 8) — search bar + filter kategori/penerbit +
   urutan (terkait/terbaru/terlaris/termurah/termahal). Mobile-first: baris
   urutan & chip filter bisa digeser horizontal, filter dibungkus <details>
   supaya tidak memakan layar HP saat belum dibuka.
   ========================================================================== */
.hku-cari-form { display: flex; gap: 8px; margin: 4px 0 16px; }
.hku-cari-form input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 1.5px solid var(--border);
	border-radius: 999px;
	padding: 12px 18px;
	font-size: 0.95rem;
	font-family: var(--font);
}
.hku-cari-form input[type="search"]:focus { outline: 2px solid var(--navy-tint); outline-offset: 1px; }
.hku-cari-form button {
	flex-shrink: 0;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--navy);
	color: var(--white);
	display: flex; align-items: center; justify-content: center;
}
.hku-cari-form button:hover { background: var(--navy-dark); }

.hku-cari-urut {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	margin-bottom: 12px;
	-webkit-overflow-scrolling: touch;
}
.hku-cari-urut__label { flex-shrink: 0; font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.hku-cari-urut__opsi {
	flex-shrink: 0;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1.5px solid var(--border);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
}
.hku-cari-urut__opsi.is-aktif { background: var(--navy); color: var(--white); border-color: var(--navy); }

.hku-cari-filter { border: 1.5px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; }
.hku-cari-filter > summary {
	cursor: pointer;
	padding: 13px 16px;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--navy);
}
.hku-cari-filter__isi { padding: 0 16px 16px; }
.hku-cari-filter__grup + .hku-cari-filter__grup { margin-top: 14px; }
.hku-cari-filter__grup h2 { font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; }
.hku-cari-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.hku-cari-chip {
	padding: 8px 13px;
	border-radius: 999px;
	background: var(--bg-abu);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--ink);
}
.hku-cari-chip.is-aktif { background: var(--navy); color: var(--white); }

.hku-cari-jumlah { font-size: 0.85rem; color: var(--muted); margin-bottom: 14px; }

/* Hasil pencarian kosong → jangan jadi jalan buntu, arahkan ke WhatsApp. */
.hku-cari-kosong {
	text-align: center;
	padding: 44px 20px 52px;
	max-width: 460px;
	margin: 0 auto;
}
.hku-cari-kosong__ikon { color: var(--muted); opacity: 0.5; margin-bottom: 14px; }
.hku-cari-kosong__judul {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.5;
	margin: 0 0 8px;
}
.hku-cari-kosong__sub {
	font-size: 0.9rem;
	color: var(--muted);
	line-height: 1.6;
	margin: 0 0 20px;
}
.hku-cari-kosong .hku-btn--wa { display: inline-flex; align-items: center; gap: 8px; }

/* ==========================================================================
   Preloader (Fase 8, permintaan user) — logo + "Halim Kitab Utama" +
   "Sejak 1982" + lingkaran progres 0-100% saat halaman dimuat.
   ========================================================================== */
#hku-preloader {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 50% 30%, rgba(117, 135, 196, 0.25), transparent 55%),
		linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 100%);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease, visibility 0s linear 0s;
}
/* Jaring pengaman: walau JS gagal total (mis. diblokir), preloader TETAP
   memudar sendiri lewat animasi murni CSS ini setelah beberapa detik —
   pengunjung tidak boleh pernah tersandera layar loading selamanya. JS
   (initPreloader di main.js) biasanya lebih cepat dari ini kalau berhasil. */
@keyframes hkuPreloaderJaringPengaman {
	to { opacity: 0; visibility: hidden; }
}
#hku-preloader {
	animation: hkuPreloaderJaringPengaman 0.01s linear 3.5s forwards;
}
#hku-preloader.hku-preloader--sembunyi {
	opacity: 0;
	visibility: hidden;
}
body.hku-preload-aktif { overflow: hidden; }

.hku-preloader__isi { text-align: center; color: var(--white); padding: 20px; }
.hku-preloader__ring { position: relative; width: 96px; height: 96px; margin: 0 auto 20px; }
.hku-preloader__ring svg { transform: rotate(-90deg); }
.hku-preloader__ring-latar { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 5; }
.hku-preloader__ring-progres {
	fill: none;
	stroke: var(--gold);
	stroke-width: 5;
	stroke-linecap: round;
	/* keliling lingkaran r=44 => 2*pi*44 ≈ 276.5 — dipakai JS untuk stroke-dashoffset */
	stroke-dasharray: 276.5;
	stroke-dashoffset: 276.5;
	transition: stroke-dashoffset 0.25s ease-out;
}
.hku-preloader__ikon {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 40px; height: auto;
}
.hku-preloader__merek { font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; margin: 0 0 4px; letter-spacing: 0.01em; }
.hku-preloader__tahun { font-size: 0.8rem; opacity: 0.75; margin: 0 0 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.hku-preloader__persen { font-size: 0.85rem; font-weight: 700; color: var(--gold); margin: 0; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	.hku-preloader__ring-progres { transition: none; }
	#hku-preloader { transition: opacity 0.15s linear; animation-duration: 0.01s; animation-delay: 1.2s; }
}

/* ==========================================================================
   Halaman Penulis/Mualif — tata letak artikel + daftar isi (Fase 8).
   Dibuat menyerupai artikel karena halaman ini menyasar pencarian nama ulama
   ("kitab karya Imam Nawawi"), bukan cuma jadi arsip produk — lihat catatan
   di taxonomy-penulis_mualif.php.
   ========================================================================== */
.hku-penulis-meta { color: var(--muted); font-size: 0.92rem; margin: -4px 0 22px; }

.hku-penulis-layout { display: block; }

/* Satu-satunya tempat aturan daftar isi. Dipakai halaman penulis DAN artikel. */
.hku-daftar-isi {
	background: var(--bg-abu);
	border-radius: 12px;
	padding: 16px 18px;
	margin: 24px 0 26px;
}
.hku-daftar-isi__judul {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
}
/* Penomoran pakai counter manual, BUKAN list-style bawaan.
   Dengan list-style bawaan, sekadar menyembunyikan nomor sub-item (bidang
   ilmu) tetap membuatnya MENGHABISKAN satu angka — hasilnya penomoran utama
   melompat (1, 2, lalu 4). Counter manual hanya dinaikkan oleh item utama. */
.hku-daftar-isi ol {
	margin: 0;
	padding-left: 0;
	list-style: none;
	counter-reset: hku-toc;
}
.hku-daftar-isi li {
	line-height: 1.45;
	padding-left: 26px;
	position: relative;
	/* Item tidak boleh terpotong antar kolom (lihat aturan 2 kolom di bawah):
	   nomor dan judulnya harus tetap satu kesatuan. */
	break-inside: avoid;
}
.hku-daftar-isi li:not(.is-sub) { counter-increment: hku-toc; }
.hku-daftar-isi li:not(.is-sub)::before {
	content: counter(hku-toc) ".";
	position: absolute;
	left: 0;
	top: 6px; /* sejajar baris pertama teks, karena <a> punya padding atas. */
	color: var(--aksen-teks);
	font-size: 0.85rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.hku-daftar-isi li.is-sub { font-size: 0.9rem; padding-left: 40px; }

/* display:block, bukan inline-block — daftar isi ini navigasi utama di dalam
   artikel dan memang dibuat untuk ditekan. Dengan inline-block, area tekannya
   hanya selebar teks; dengan block, seluruh baris bisa ditekan. */
.hku-daftar-isi a {
	display: block;
	padding: 6px 0;
	color: var(--ink);
	text-decoration: none;
	border-radius: 4px;
}
.hku-daftar-isi a:hover,
.hku-daftar-isi a:focus-visible { color: var(--aksen-teks); text-decoration: underline; text-underline-offset: 3px; }

/* Dua kolom begitu ruangnya cukup.

   Artikel bisa punya 7-8 bagian; satu kolom membuat daftar isi setinggi ~365px
   dan pembaca harus menggulir melewati blok abu-abu besar sebelum sampai ke
   kalimat pertama artikel. Dua kolom memangkasnya jadi sekitar separuh, tanpa
   menghilangkan satu pun entri.

   Ambangnya 720px, bukan 900px: di bawah itu judul bagian yang panjang
   ("Edisi yang Beredar: 4 Jilid Kuning vs 5 Jilid Putih") jadi terlalu sering
   patah ke banyak baris dan malah bikin kolomnya tidak rata. */
@media (min-width: 720px) {
	.hku-daftar-isi ol { columns: 2; column-gap: 32px; }
}

.hku-penulis-bagian { margin-bottom: 40px; }
/* Offset supaya judul bagian tidak ketutupan header sticky saat diklik dari
   daftar isi — tanpa ini, anchor mendarat persis di balik header. */
.hku-penulis-bagian, .hku-penulis-bidang { scroll-margin-top: 90px; }
.hku-penulis-bagian > h2 {
	font-size: 1.35rem;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--bg-abu);
}
.hku-penulis-bidang {
	font-size: 1.02rem;
	color: var(--muted);
	margin: 22px 0 12px;
	font-weight: 700;
}
.hku-penulis-bio { line-height: 1.75; }
.hku-penulis-bio p { margin: 0 0 14px; }

.hku-penulis-cta {
	background: var(--bg-abu);
	border-radius: 12px;
	padding: 22px;
}
.hku-penulis-cta > h2 { border-bottom: 0; padding-bottom: 0; }
.hku-penulis-cta .hku-btn--wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }

/* Desktop: daftar isi jadi kolom kiri yang ikut menggulir. */
@media (min-width: 900px) {
	.hku-penulis-layout {
		display: grid;
		grid-template-columns: 240px 1fr;
		gap: 40px;
		align-items: start;
	}
	/*
	 * Sticky HANYA di dalam grid halaman penulis.
	 *
	 * Sebelumnya selektornya `.hku-daftar-isi` polos, jadi ikut kena di
	 * halaman ARTIKEL yang tidak punya grid ini. Di sana daftar isi bukan
	 * kolom samping melainkan blok biasa di aliran konten, sehingga ia
	 * menempel di atas layar sementara isi artikel lewat DI BELAKANGNYA —
	 * teks artikel tertutup kotak abu-abu setinggi 365px sepanjang halaman.
	 *
	 * Sticky memang benar untuk halaman penulis (di sana daftar isi berdiri
	 * di kolom kirinya sendiri), tapi salah untuk artikel: daftar isi artikel
	 * dibaca sekali di awal, bukan diikuti terus.
	 */
	.hku-penulis-layout > .hku-daftar-isi {
		position: sticky;
		top: 86px;
		margin-bottom: 0;
	}
	/* Kembali satu kolom: di sini daftar isi duduk di kolom selebar 240px,
	   dan aturan 2 kolom (ambang 720px) akan membuatnya berdesakan. Di lebar
	   720-899px halaman penulis masih satu kolom penuh, jadi 2 kolom di sana
	   justru tepat — makanya dikembalikan di sini, bukan dibatalkan total. */
	.hku-penulis-layout > .hku-daftar-isi ol { columns: 1; }
}

/* ==========================================================================
   Tipografi konten panjang (halaman statis & artikel).

   MASALAH YANG DIPERBAIKI: reset global di awal berkas ini mematikan
   list-style, padding, dan margin pada <ul>/<ol> — itu benar untuk menu
   navigasi, tapi ikut merembes ke ISI halaman. Akibatnya daftar Misi di
   "Tentang Kami" tampil sebagai satu blok teks menyambung tanpa bullet dan
   tanpa jarak antar butir: secara teknis <ul> yang benar, tapi tidak
   terbaca sebagai daftar oleh mata pembaca. Heading juga kehilangan jarak
   atas sehingga tiap bagian menempel ke paragraf sebelumnya.

   Ruang lingkupnya SENGAJA dibatasi ke pembungkus konten saja, supaya reset
   global untuk navigasi tidak ikut berubah.
   ========================================================================== */
.hku-halaman-statis__konten,
.hku-single-post__konten {
	max-width: 68ch; /* baris terlalu panjang melelahkan; ~65-75 karakter optimal */
	line-height: 1.75;
}

.hku-halaman-statis__konten p,
.hku-single-post__konten p { margin: 0 0 1.15em; }

/* Jarak ATAS heading jauh lebih besar daripada jarak bawahnya — supaya judul
   terbaca menempel pada bagian yang dijudulinya, bukan mengambang di tengah. */
.hku-halaman-statis__konten h2,
.hku-single-post__konten h2 {
	margin: 2.2em 0 0.6em;
	font-size: 1.35rem;
	padding-bottom: 0.35em;
	border-bottom: 1px solid var(--border);
}
.hku-halaman-statis__konten h3,
.hku-single-post__konten h3 { margin: 1.8em 0 0.5em; font-size: 1.1rem; }
.hku-halaman-statis__konten > *:first-child,
.hku-single-post__konten > *:first-child { margin-top: 0; }

/* Kembalikan daftar ke bentuk daftar. */
.hku-halaman-statis__konten ul,
.hku-halaman-statis__konten ol,
.hku-single-post__konten ul,
.hku-single-post__konten ol {
	margin: 0 0 1.3em;
	padding-left: 1.5em;
	list-style: disc;
}
.hku-halaman-statis__konten ol,
.hku-single-post__konten ol { list-style: decimal; }
.hku-halaman-statis__konten li,
.hku-single-post__konten li { margin-bottom: 0.6em; padding-left: 0.2em; }
.hku-halaman-statis__konten li::marker,
.hku-single-post__konten li::marker { color: var(--gold); }
.hku-halaman-statis__konten li:last-child,
.hku-single-post__konten li:last-child { margin-bottom: 0; }

.hku-halaman-statis__konten blockquote,
.hku-single-post__konten blockquote {
	margin: 1.5em 0;
	padding: 0.2em 0 0.2em 1.2em;
	border-left: 3px solid var(--gold);
	color: var(--muted);
}

/*
 * Tabel di dalam artikel.
 *
 * Reset global cuma menyetel border-collapse + width:100%, jadi tabel artikel
 * tampil tanpa garis maupun padding — tidak terbaca sebagai tabel. Tabel
 * pembanding termasuk bagian artikel yang paling sering dikutip Google, dan
 * kerangka artikel (inc/pola-artikel.php) menyertakannya, jadi ini bakal
 * dipakai staf berulang kali.
 *
 * Pembungkus <figure> dari blok tabel Gutenberg yang menggulir, BUKAN <body>:
 * tabel 3 kolom pasti lebih lebar dari layar HP, dan kalau halamannya yang
 * ikut geser, seluruh artikel jadi susah dibaca.
 */
.hku-halaman-statis__konten .wp-block-table,
.hku-single-post__konten .wp-block-table {
	margin: 1.6em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hku-halaman-statis__konten table,
.hku-single-post__konten table {
	min-width: 32rem; /* di bawah ini kolom terlalu sempit; biar menggulir saja. */
	font-size: 0.94rem;
	border: 1px solid var(--border);
	border-radius: 6px;
	border-collapse: collapse;
	overflow: hidden;
}

.hku-halaman-statis__konten th,
.hku-halaman-statis__konten td,
.hku-single-post__konten th,
.hku-single-post__konten td {
	padding: 0.7em 0.9em;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--border);
}

.hku-halaman-statis__konten thead th,
.hku-single-post__konten thead th {
	background: var(--bg-abu);
	color: var(--navy);
	font-weight: 700;
	font-size: 0.86rem;
	letter-spacing: 0.02em;
}

.hku-halaman-statis__konten tbody tr:last-child td,
.hku-single-post__konten tbody tr:last-child td { border-bottom: 0; }

/* Kolom pertama tabel pembanding berfungsi sebagai label baris. */
.hku-halaman-statis__konten tbody td:first-child,
.hku-single-post__konten tbody td:first-child { font-weight: 600; }

[dir="rtl"] .hku-halaman-statis__konten th,
[dir="rtl"] .hku-halaman-statis__konten td,
[dir="rtl"] .hku-single-post__konten th,
[dir="rtl"] .hku-single-post__konten td { text-align: right; }

/* RTL: indentasi & garis kutip pindah ke kanan. */
[dir="rtl"] .hku-halaman-statis__konten ul,
[dir="rtl"] .hku-halaman-statis__konten ol,
[dir="rtl"] .hku-single-post__konten ul,
[dir="rtl"] .hku-single-post__konten ol { padding-left: 0; padding-right: 1.5em; }
[dir="rtl"] .hku-halaman-statis__konten blockquote,
[dir="rtl"] .hku-single-post__konten blockquote {
	border-left: none;
	border-right: 3px solid var(--gold);
	padding: 0.2em 1.2em 0.2em 0;
}

/* ==========================================================================
   Dialog konfirmasi Rencana Pembelian.
   ========================================================================== */
.hku-dialog {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(12, 15, 35, 0.55);
	backdrop-filter: blur(2px);
}
.hku-dialog[hidden] { display: none; }
.hku-dialog__kartu {
	position: relative;
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 28px 22px 22px;
	max-width: 380px;
	width: 100%;
	text-align: center;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
	animation: hkuDialogMasuk 0.18s ease-out;
}
@keyframes hkuDialogMasuk {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hku-dialog__kartu { animation: none; }
}
.hku-dialog__tutup {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 34px;
	height: 34px;
	border: none;
	background: transparent;
	color: var(--muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}
.hku-dialog__tutup:hover { background: var(--bg-abu); color: var(--ink); }
.hku-dialog__ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(20, 128, 74, 0.12);
	color: #14804a;
	margin-bottom: 12px;
}
.hku-dialog__judul { font-size: 1.08rem; margin: 0 0 6px; }
.hku-dialog__teks { font-size: 0.88rem; color: var(--muted); margin: 0 0 18px; line-height: 1.55; }
.hku-dialog__aksi { display: flex; flex-direction: column; gap: 9px; }
.hku-dialog__aksi .hku-btn { width: 100%; justify-content: center; }

/* Tombol utama dialog — navy padat, jadi pilihan yang paling jelas ditekan. */
.hku-btn--navy { background: var(--navy); color: var(--white); border: 1px solid var(--navy); }
.hku-btn--navy:hover { background: #2d3670; border-color: #2d3670; color: var(--white); }

/* Tombol sekunder dialog — netral, supaya pilihan utama (buka simulasi) tetap
   yang paling menonjol tanpa membuat pilihan lain terasa terlarang. */
.hku-btn--outline-abu {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--ink);
}
.hku-btn--outline-abu:hover { background: var(--bg-abu); }

/* ==========================================================================
   Indikator fokus keyboard.

   Sebelumnya TIDAK ADA aturan fokus global — hanya beberapa elemen tertentu
   yang punya. Hasil uji: 31 dari 75 elemen fokusabel tidak menampilkan
   apa pun saat difokus, termasuk logo header, pemilih bahasa, tombol WA
   header, dan lencana Rencana Pembelian. Bagi pengguna papan ketik itu
   berarti benar-benar tidak tahu sedang berada di mana.

   Pakai :focus-visible (bukan :focus) supaya pengguna tetikus tidak melihat
   cincin fokus saat mengklik — hanya muncul untuk navigasi papan ketik.

   Dua konteks warna karena situs ini punya dua latar besar: konten terang
   dan blok navy (header, hero, footer). Satu warna saja pasti hilang di
   salah satunya.
   ========================================================================== */
:focus-visible {
	outline: 3px solid var(--navy);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Di atas latar navy, garis navy tidak terlihat — pakai krem terang. */
.hku-header :focus-visible,
.hku-hero :focus-visible,
.hku-footer :focus-visible,
.hku-kategori-banner :focus-visible,
.hku-cta-penutup :focus-visible {
	outline-color: var(--gold);
}

/* Tombol WhatsApp hijau: krem lebih terbaca daripada navy di atas hijau. */
.hku-btn--wa:focus-visible,
.hku-wa-float:focus-visible { outline-color: var(--gold); }

/* Kartu produk & item hasil pencarian: garis mengikuti lengkung kartunya
   supaya tidak terlihat seperti kotak asing yang menempel. */
.hku-kartu-produk a:focus-visible,
.hku-search__item:focus-visible { border-radius: 8px; }

/* ==========================================================================
   CTA penutup artikel — jembatan dari bacaan ke katalog.
   Diberi latar abu supaya jelas terpisah dari isi artikel: pembaca harus
   langsung mengenali ini sebagai ajakan, bukan kelanjutan tulisan.
   ========================================================================== */
.hku-cta-artikel {
	max-width: 68ch;
	margin: 44px 0 0;
	padding: 26px 24px;
	background: var(--bg-abu);
	border-radius: var(--radius-lg);
	border-top: 3px solid var(--navy);
}
.hku-cta-artikel__judul { font-size: 1.15rem; margin: 0 0 8px; border-bottom: 0; padding-bottom: 0; }
.hku-cta-artikel__teks { font-size: 0.92rem; color: var(--muted); margin: 0 0 18px; line-height: 1.65; }
.hku-cta-artikel__aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.hku-cta-artikel__aksi .hku-btn { flex: 1 1 auto; justify-content: center; min-width: 190px; }
.hku-cta-artikel__konsultasi {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--border);
	font-size: 0.88rem;
	color: var(--muted);
	line-height: 1.7;
}
.hku-cta-artikel__wa {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 4px;
	color: var(--wa-green-dark);
	font-weight: 700;
	text-decoration: none;
}
.hku-cta-artikel__wa:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Saran bahasa — pita tipis di atas konten, bukan popup yang menghadang.
   Sengaja TIDAK sticky dan TIDAK menutupi apa pun: pengunjung yang tidak
   membutuhkannya cukup mengabaikannya dan langsung mencari kitab.
--------------------------------------------------------------------------- */
.hku-saran-bahasa {
	background: #eef1f8;
	border-bottom: 1px solid #d8dded;
	font-size: 14px;
}
.hku-saran-bahasa__isi {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 9px;
	padding-bottom: 9px;
}
.hku-saran-bahasa__teks {
	color: #3a4160;
	flex: 1 1 auto;
	min-width: 0;
}
.hku-saran-bahasa__aksi {
	flex: 0 0 auto;
	color: #212856;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hku-saran-bahasa__aksi:hover,
.hku-saran-bahasa__aksi:focus-visible {
	color: #0d1233;
}
.hku-saran-bahasa__tutup {
	flex: 0 0 auto;
	background: none;
	border: 0;
	cursor: pointer;
	color: #6b7291;
	font-size: 22px;
	line-height: 1;
	padding: 2px 6px;
	border-radius: 4px;
}
.hku-saran-bahasa__tutup:hover,
.hku-saran-bahasa__tutup:focus-visible {
	color: #212856;
	background: #dfe4f1;
}