/* ============================================================
 * JURAGAN BANDUNG — Frontend Styles
 * Mobile-first. Semua class prefix `jb-`.
 *
 * Dipakai di: profil juragan, arsip direktori, taksonomi
 * kategori/wilayah, pencarian, 404, dan sebagai dasar bagi
 * event.css / produk.css / blog.css / dashboard.css.
 *
 * ATURAN BERKAS INI: setiap selector ditulis SEKALI SAJA, di
 * bagiannya sendiri. Berkas ini pernah tumbuh lewat enam blok
 * tempelan berurutan sehingga 36 selector terdefinisi dua kali
 * atau lebih dan sebagian nilainya saling membatalkan. Kalau
 * perlu mengubah sesuatu, cari selectornya lalu sunting di
 * tempat — jangan menempelkan blok baru di akhir berkas.
 * ============================================================ */

:root {
	--jb-primer: #0f2a52;         /* biru tua */
	--jb-primer-gelap: #0a1d3a;
	--jb-aksen: #f5b301;          /* emas/kuning */
	--jb-teks: #1a1f2c;
	--jb-teks-sekunder: #5a6478;  /* abu netral */
	--jb-garis: #e5e8ef;
	--jb-latar: #ffffff;
	--jb-latar-lembut: #f7f8fb;
	--jb-wa: #25D366;
	--jb-wa-gelap: #1ebe5b;
	--jb-radius: 10px;
	--jb-radius-kecil: 6px;
	--jb-shadow: 0 2px 12px rgba(15, 42, 82, 0.08);
	--jb-tap: 44px;
}

/* ------------------------------------------------------------
 * WRAPPER & KEPALA HALAMAN
 * ------------------------------------------------------------ */
.jb-wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 1rem;
	color: var(--jb-teks);
	font-size: 16px;
	line-height: 1.6;
}

.jb-page-header {
	margin-bottom: 2rem;
	padding-bottom: 0.25rem;
}

.jb-page-title {
	position: relative;
	margin: 0 0 0.5rem;
	padding-bottom: 0.65rem;
	font-size: 1.75rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--jb-primer);
}
.jb-page-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: var(--jb-aksen);
}

.jb-page-intro {
	margin: 0;
	max-width: 62ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--jb-teks-sekunder);
	text-wrap: pretty;
}

/* ------------------------------------------------------------
 * BREADCRUMB
 * ------------------------------------------------------------ */
.jb-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 1rem;
	font-size: 0.82rem;
	color: var(--jb-teks-sekunder);
}
.jb-crumb a {
	color: var(--jb-teks-sekunder);
	text-decoration: none;
}
.jb-crumb a:hover {
	color: var(--jb-primer);
	text-decoration: underline;
}
.jb-crumb__kini {
	color: var(--jb-primer);
	font-weight: 600;
	max-width: 18ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------
 * BADGE — kategori dan wilayah dibedakan
 * ------------------------------------------------------------ */
.jb-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.75rem 0;
}

.jb-badge {
	display: inline-block;
	padding: 5px 12px;
	background: var(--jb-latar-lembut);
	border: 1px solid var(--jb-garis);
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--jb-teks-sekunder);
	text-decoration: none;
	transition:
		background-color 0.16s var(--jb-lentur, ease),
		color 0.16s var(--jb-lentur, ease),
		border-color 0.16s var(--jb-lentur, ease);
}
.jb-badge:hover {
	background: var(--jb-primer);
	color: #fff;
	border-color: var(--jb-primer);
}

.jb-badge--kategori {
	background: rgba(15, 42, 82, 0.07);
	border-color: rgba(15, 42, 82, 0.14);
	color: var(--jb-primer);
}
.jb-badge--kategori:hover {
	background: var(--jb-primer);
	border-color: var(--jb-primer);
	color: #fff;
}

.jb-badge--wilayah {
	background: #fff;
	border-color: var(--jb-garis);
	color: var(--jb-teks-sekunder);
}
.jb-badge--wilayah::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--jb-aksen);
	vertical-align: 1px;
}
.jb-badge--wilayah:hover {
	background: var(--jb-latar-lembut);
	border-color: #c9d2e0;
	color: var(--jb-primer);
}

/* ------------------------------------------------------------
 * TOMBOL
 * ------------------------------------------------------------ */
.jb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--jb-tap);
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--jb-primer);
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 42, 82, 0.06), 0 2px 8px rgba(15, 42, 82, 0.06);
	transition:
		background-color 0.16s var(--jb-lentur, ease),
		box-shadow 0.16s var(--jb-lentur, ease),
		transform 0.08s ease;
}
.jb-btn:hover  { background: var(--jb-primer-gelap); color: #fff; }
.jb-btn:active { transform: translateY(1px); }

.jb-btn--primer { background: var(--jb-primer); color: #fff; }

.jb-btn--sekunder {
	background: #fff;
	color: var(--jb-primer);
	border-color: var(--jb-primer);
	box-shadow: 0 1px 2px rgba(15, 42, 82, 0.05);
}
.jb-btn--sekunder:hover {
	background: var(--jb-primer);
	color: #fff;
	box-shadow: 0 2px 6px rgba(15, 42, 82, 0.12), 0 6px 18px rgba(15, 42, 82, 0.1);
}

/* Ikon Instagram dan globe tetap biru saat tombol putih,
   ikut memutih saat tombol terisi. */
.jb-btn--sekunder .jb-ikon { color: var(--jb-primer); }
.jb-btn--sekunder:hover .jb-ikon { color: #fff; }

.jb-btn--penuh {
	display: flex;
	width: 100%;
	margin-top: 0.75rem;
	border-radius: 8px;
}

.jb-btn--kecil {
	min-height: 36px;
	padding: 6px 12px;
	font-size: 0.9rem;
}

/* Ikon SVG di dalam tombol. */
.jb-ikon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	fill: currentColor;
	display: block;
}

/* --- WhatsApp: hijau lebih tua, bergradasi --- */
.jb-btn--wa,
.jb-fab-wa {
	background: linear-gradient(135deg, #23b35b 0%, #17945a 52%, #0f7c56 100%);
	color: #fff;
	border: 0;
	box-shadow:
		0 1px 2px rgba(8, 74, 48, 0.28),
		0 6px 18px rgba(15, 124, 86, 0.34);
}
.jb-btn--wa:hover,
.jb-fab-wa:hover {
	background: linear-gradient(135deg, #27c163 0%, #1aa563 52%, #128b60 100%);
	color: #fff;
	box-shadow:
		0 2px 4px rgba(8, 74, 48, 0.3),
		0 10px 26px rgba(15, 124, 86, 0.42);
}
.jb-btn--wa:active,
.jb-fab-wa:active {
	box-shadow: 0 1px 3px rgba(8, 74, 48, 0.35);
}

/* --- Kilap berkala ---
   Seberkas cahaya menyapu tombol setiap beberapa detik. Cukup
   untuk menarik mata, tidak sampai mengganggu. */
.jb-btn--kilap::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -80%;
	width: 45%;
	height: 220%;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.42) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(16deg);
	animation: jb-kilap 5.5s ease-in-out 1.2s infinite;
}
/* Saat disentuh, kilapnya lewat sekali lagi lebih cepat. */
.jb-btn--kilap:hover::after {
	animation: jb-kilap 1.1s ease-in-out;
}

@keyframes jb-kilap {
	0%   { left: -80%; }
	18%  { left: 130%; }
	100% { left: 130%; }
}

/* ------------------------------------------------------------
 * GRID & KARTU (dipakai archive + taxonomy)
 * ------------------------------------------------------------ */
.jb-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 1.5rem 0;
}

.jb-kartu {
	display: flex;
	flex-direction: column;
	background: var(--jb-latar);
	border: 1px solid var(--jb-garis);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--jb-bayang-1, 0 2px 8px rgba(15, 42, 82, 0.05));
	transition:
		box-shadow 0.22s var(--jb-lentur, ease),
		transform 0.22s var(--jb-lentur, ease),
		border-color 0.22s ease;
}
.jb-kartu:hover {
	box-shadow: var(--jb-bayang-2, 0 8px 24px rgba(15, 42, 82, 0.09));
	transform: translateY(-3px);
	border-color: #d3dae6;
}

.jb-kartu__gambar {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--jb-latar-lembut);
	overflow: hidden;
}
.jb-kartu__gambar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--jb-lentur, ease);
}
.jb-kartu:hover .jb-kartu__gambar img {
	transform: scale(1.035);
}

.jb-kartu__isi {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}
.jb-kartu__judul {
	font-size: 1.15rem;
	margin: 0;
	line-height: 1.3;
}
/* Garis bawah emas muncul saat kartu disentuh. */
.jb-kartu__judul a {
	color: var(--jb-primer);
	text-decoration: none;
	background-image: linear-gradient(var(--jb-aksen), var(--jb-aksen));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition: background-size 0.24s var(--jb-lentur, ease);
}
.jb-kartu__judul a:hover { text-decoration: underline; }
.jb-kartu:hover .jb-kartu__judul a {
	background-size: 100% 2px;
	text-decoration: none;
}

.jb-kartu__tagline {
	margin: 0;
	color: var(--jb-teks-sekunder);
	font-size: 0.95rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jb-kartu .jb-btn--kecil { align-self: flex-start; margin-top: auto; }

/* Placeholder huruf awal: beri nuansa merek, jangan abu polos. */
.jb-kartu__placeholder,
.jb-hero__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: rgba(245, 179, 1, 0.85);
	background: linear-gradient(135deg, var(--jb-primer) 0%, var(--jb-primer-gelap) 100%);
}
.jb-kartu__placeholder { font-size: 2.5rem; }
.jb-hero__placeholder  { font-size: 4rem; }

/* ------------------------------------------------------------
 * FILTER (archive)
 * ------------------------------------------------------------ */
.jb-filter {
	margin: 1rem 0;
	padding: 1.1rem 1.25rem;
	background: var(--jb-latar-lembut);
	border: 1px solid var(--jb-garis);
	border-radius: var(--jb-radius);
}

.jb-filter__judul {
	position: relative;
	margin: 0 0 0.5rem;
	padding-left: 15px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jb-teks-sekunder);
}
.jb-filter__judul::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 12px;
	border-radius: 2px;
	background: var(--jb-aksen);
}

.jb-filter__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.jb-filter__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 36px;
	padding: 6px 12px;
	background: #fff;
	border: 1px solid var(--jb-garis);
	border-radius: 999px;
	color: var(--jb-primer);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color 0.16s var(--jb-lentur, ease),
		color 0.16s var(--jb-lentur, ease),
		border-color 0.16s var(--jb-lentur, ease),
		box-shadow 0.16s var(--jb-lentur, ease);
}
.jb-filter__list a:hover {
	background: var(--jb-primer);
	color: #fff;
	border-color: var(--jb-primer);
	box-shadow: var(--jb-bayang-1, 0 2px 8px rgba(15, 42, 82, 0.05));
}

.jb-filter__count {
	padding: 0 6px;
	background: var(--jb-latar-lembut);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--jb-teks-sekunder);
	transition: background-color 0.16s ease, color 0.16s ease;
}
.jb-filter__list a:hover .jb-filter__count {
	background: var(--jb-aksen);
	color: var(--jb-teks);
}

/* ------------------------------------------------------------
 * DESKRIPSI TERM (SEO)
 * ------------------------------------------------------------ */
.jb-term-desc {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: linear-gradient(90deg, rgba(245, 179, 1, 0.06), transparent 60%);
	border-left: 3px solid var(--jb-aksen);
	border-radius: var(--jb-radius-kecil);
	box-shadow: var(--jb-bayang-1, 0 2px 8px rgba(15, 42, 82, 0.05));
}
.jb-term-desc p {
	max-width: 64ch;
	text-wrap: pretty;
}
.jb-term-desc p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
 * PAGINASI
 * ------------------------------------------------------------ */
.jb-pagination {
	margin: 2rem 0;
	text-align: center;
}
.jb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--jb-tap);
	min-height: var(--jb-tap);
	margin-right: 4px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--jb-garis);
	border-radius: var(--jb-radius-kecil);
	color: var(--jb-primer);
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color 0.16s var(--jb-lentur, ease),
		color 0.16s var(--jb-lentur, ease),
		border-color 0.16s var(--jb-lentur, ease);
}
.jb-pagination a.page-numbers:hover {
	border-color: var(--jb-primer);
	background: var(--jb-latar-lembut);
}
.jb-pagination .page-numbers.current {
	background: var(--jb-primer);
	border-color: var(--jb-primer);
	color: #fff;
}
.jb-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* ------------------------------------------------------------
 * KEADAAN KOSONG
 * ------------------------------------------------------------ */
.jb-empty {
	padding: 2.5rem 1.5rem;
	background: #fff;
	border: 1px dashed #ccd5e2;
	border-radius: var(--jb-radius);
	text-align: center;
}
.jb-empty::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin: 0 auto 1.1rem;
	border-radius: 2px;
	background: var(--jb-aksen);
}
.jb-empty p {
	margin: 0 auto 1rem;
	max-width: 46ch;
	color: var(--jb-teks-sekunder);
	text-wrap: pretty;
}

/* ============================================================
 * SINGLE JURAGAN
 * ============================================================ */
.jb-single { padding-bottom: 4rem; }

/* --- Hero --- */
.jb-hero {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 0 0 2rem;
	padding: 1.75rem;
	border-radius: 18px;
	background: radial-gradient(700px 400px at 88% 0%, rgba(245,179,1,.12), transparent 55%),
	            linear-gradient(135deg, #0a1d3a 0%, #0f2a52 60%, #16346a 100%);
	color: #fff;
	box-shadow: 0 24px 60px rgba(10,29,58,.28);
}
/* Kisi emas rapat khas KJB */
.jb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(245,179,1,.16) 1px, transparent 1px),
	                  linear-gradient(90deg, rgba(245,179,1,.16) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(500px 320px at 90% 0%, #000, transparent 72%);
	mask-image: radial-gradient(500px 320px at 90% 0%, #000, transparent 72%);
	pointer-events: none;
}
.jb-hero > * { position: relative; z-index: 1; }
.jb-hero__foto {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #16346a, #0a1d3a);
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(245,179,1,.3);
	box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.jb-hero__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jb-hero__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4rem;
	font-weight: 800;
	color: var(--jb-aksen);
	opacity: .9;
}
.jb-hero__meta { align-self: center; }
.jb-hero__judul {
	font-size: 1.9rem;
	line-height: 1.15;
	margin: 0;
	color: #fff;
	letter-spacing: -.01em;
}
.jb-hero__tagline {
	margin: 0.6rem 0 0;
	color: rgba(255,255,255,.75);
	font-size: 1rem;
	line-height: 1.55;
}
.jb-hero__berdiri {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: rgba(255,255,255,.6);
}

/* Logo usaha di sudut foto — dudukan putih tetap, agar logo apa pun terbaca. */
.jb-hero__logo {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	padding: 8px;
	background: #fff;
	border: 1px solid rgba(245,179,1,.4);
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.jb-hero__logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* --- Status buka / tutup --- */
.jb-status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0.75rem 0 0;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
}
.jb-status__titik {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
}
.jb-status--buka {
	background: rgba(37, 211, 102, 0.12);
	color: #0f7a3d;
}
.jb-status--buka .jb-status__titik {
	background: var(--jb-wa);
	box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
	animation: jb-denyut 2s infinite;
}
.jb-status--tutup {
	background: var(--jb-latar-lembut);
	color: var(--jb-teks-sekunder);
}
.jb-status--tutup .jb-status__titik { background: #9aa4b5; }

@keyframes jb-denyut {
	0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
	70%  { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* --- Fakta cepat --- */
.jb-fakta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0;
}
.jb-fakta__item {
	position: relative;
	flex: 1 1 0;
	min-width: 88px;
	padding: 0.7rem 0.5rem;
	background: #fff;
	border: 1px solid #e6eaf1;
	border-radius: var(--jb-radius-kecil);
	text-align: center;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 42, 82, 0.05), 0 4px 14px rgba(15, 42, 82, 0.06);
	transition:
		box-shadow 0.22s var(--jb-lentur, ease),
		transform 0.22s var(--jb-lentur, ease),
		border-color 0.22s ease;
}
.jb-fakta__item:hover {
	transform: translateY(-2px);
	border-color: rgba(245, 179, 1, 0.55);
	box-shadow: 0 2px 6px rgba(15, 42, 82, 0.07), 0 10px 24px rgba(15, 42, 82, 0.1);
}
/* Garis emas tipis di sisi atas tiap kotak. */
.jb-fakta__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 3px;
	border-radius: 0 0 2px 2px;
	background: var(--jb-aksen);
}
.jb-fakta__angka {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--jb-primer);
	font-variant-numeric: tabular-nums;
}
.jb-fakta__label {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jb-teks-sekunder);
}

/* --- Baris tombol aksi --- */
.jb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}
.jb-actions .jb-btn { flex: 1 1 auto; }

/* --- Tombol salin tautan --- */
.jb-salin { cursor: pointer; font-family: inherit; font-size: 1rem; }
.jb-salin .jb-ikon--centang { display: none; }
.jb-salin.is-sukses .jb-ikon--tautan { display: none; }
.jb-salin.is-sukses .jb-ikon--centang { display: block; }
.jb-salin.is-sukses {
	background: var(--jb-aksen);
	border-color: var(--jb-aksen);
	color: var(--jb-primer);
}
.jb-salin.is-sukses .jb-ikon { color: var(--jb-primer); }

/* ------------------------------------------------------------
 * BODY: main + sidebar
 * ------------------------------------------------------------ */
.jb-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.jb-section { margin-bottom: 2rem; }

/* Motif garis emas pendek di bawah judul seksi — penanda visual
   yang berulang di seluruh situs. */
.jb-section__judul {
	position: relative;
	margin: 0 0 0.75rem;
	padding-bottom: 0.7rem;
	font-size: 1.25rem;
	letter-spacing: -0.015em;
	color: var(--jb-primer);
	/* Kadence memberi garis bawah pada heading di sebagian gaya.
	   Dinolkan supaya yang terlihat hanya garis emas pendek di bawah. */
	border-bottom: 0;
}
.jb-section__judul::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: var(--jb-aksen);
}

/* ------------------------------------------------------------
 * CERITA USAHA — kenyamanan baca
 * ------------------------------------------------------------ */
.jb-cerita__isi {
	font-size: 1.02rem;
	line-height: 1.72;
	color: #26313f;
}
.jb-cerita__isi p {
	margin: 0 0 1.15rem;
	max-width: 68ch;
	text-wrap: pretty;
}

/* Paragraf pembuka sedikit lebih besar, plus drop cap. */
.jb-cerita__isi > p:first-of-type {
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--jb-teks);
}
.jb-cerita__isi > p:first-of-type::first-letter {
	float: left;
	font-size: 3.1rem;
	line-height: 0.86;
	font-weight: 800;
	margin: 0.16em 0.12em 0 0;
	color: var(--jb-primer);
}

.jb-cerita__isi blockquote {
	margin: 1.75rem 0;
	padding: 0.25rem 0 0.25rem 1.15rem;
	border-left: 4px solid var(--jb-aksen);
	font-size: 1.1rem;
	font-style: italic;
	color: var(--jb-primer);
}
.jb-cerita__isi blockquote p:last-child { margin-bottom: 0; }

.jb-cerita__isi a {
	color: var(--jb-primer);
	text-decoration: underline;
	text-decoration-color: var(--jb-aksen);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.16s ease;
}
.jb-cerita__isi a:hover {
	text-decoration-color: var(--jb-primer);
}

/* ------------------------------------------------------------
 * PRODUK / LAYANAN (daftar teks di profil)
 * Diberi latar lembut supaya mata punya jeda setelah cerita
 * yang panjang.
 * ------------------------------------------------------------ */
.jb-produk {
	padding: 1.5rem;
	margin-left: -1rem;
	margin-right: -1rem;
	background: var(--jb-latar-lembut);
	border: 1px solid var(--jb-garis);
	border-radius: 12px;
}
.jb-produk__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
/* Kartu produk putih supaya menonjol di atas latar lembut. */
.jb-produk__item {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1rem;
	background: #fff;
	border: 1px solid var(--jb-garis);
	border-radius: var(--jb-radius-kecil);
	transition: box-shadow 0.18s var(--jb-lentur, ease);
}
.jb-produk__item:hover {
	box-shadow: var(--jb-bayang-1, 0 2px 8px rgba(15, 42, 82, 0.05));
}
.jb-produk__nama {
	font-size: 1rem;
	margin: 0;
	font-weight: 700;
	color: var(--jb-teks);
}
.jb-produk__desk {
	margin: 0;
	color: var(--jb-teks-sekunder);
	font-size: 0.95rem;
}
.jb-produk__harga {
	font-weight: 700;
	color: var(--jb-primer);
	font-size: 0.95rem;
}
.jb-produk__catatan {
	margin: 0.85rem 0 0;
	font-size: 0.82rem;
	color: var(--jb-teks-sekunder);
}

/* ------------------------------------------------------------
 * GALERI & LIGHTBOX
 * ------------------------------------------------------------ */
.jb-galeri__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
}
.jb-galeri__item {
	position: relative;
	padding: 0;
	margin: 0;
	background: var(--jb-latar-lembut);
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	min-height: var(--jb-tap);
	transition: box-shadow 0.2s var(--jb-lentur, ease);
}
.jb-galeri__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}
.jb-galeri__item:hover img { transform: scale(1.04); }
.jb-galeri__item:hover {
	box-shadow: var(--jb-bayang-2, 0 8px 24px rgba(15, 42, 82, 0.09));
}
.jb-galeri__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 29, 58, 0.22), transparent 45%);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.jb-galeri__item:hover::after { opacity: 1; }

.jb-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(15, 29, 58, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 1rem;
}
.jb-lightbox[hidden] { display: none; }
.jb-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--jb-radius);
}
.jb-lightbox__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: var(--jb-tap);
	height: var(--jb-tap);
	background: rgba(255,255,255,0.15);
	color: #fff;
	border: 0;
	border-radius: 50%;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}
.jb-lightbox__close:hover { background: rgba(255,255,255,0.28); }

/* ------------------------------------------------------------
 * SIDEBAR INFO & PETA
 * ------------------------------------------------------------ */
.jb-info {
	background: var(--jb-latar-lembut);
	border: 1px solid var(--jb-garis);
	border-radius: 12px;
	padding: 1rem;
	box-shadow: var(--jb-bayang-1, 0 2px 8px rgba(15, 42, 82, 0.05));
}
.jb-info__row {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--jb-garis);
}
.jb-info__row:last-of-type { border-bottom: 0; }
.jb-info__label {
	font-size: 0.8rem;
	text-transform: uppercase;
	color: var(--jb-teks-sekunder);
	letter-spacing: 0.05em;
}
.jb-info__value {
	color: var(--jb-teks);
	font-size: 0.95rem;
}
.jb-info__tautan {
	color: #0f2a52;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(245, 179, 1, 0.6);
}
.jb-info__tautan:hover {
	border-bottom-color: #f5b301;
}

.jb-peta {
	margin-top: 0.85rem;
	border-radius: var(--jb-radius-kecil);
	overflow: hidden;
	border: 1px solid var(--jb-garis);
	background: var(--jb-latar-lembut);
	aspect-ratio: 4 / 3;
}
.jb-peta iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ------------------------------------------------------------
 * JURAGAN LAIN
 * ------------------------------------------------------------ */
.jb-lain { margin-top: 2.5rem; }
.jb-lain__semua {
	margin: 0.5rem 0 0;
	font-size: 0.92rem;
}
.jb-lain__semua a {
	color: var(--jb-primer);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--jb-aksen);
}
.jb-lain__semua a:hover { color: var(--jb-primer-gelap); }

/* ------------------------------------------------------------
 * FAB WHATSAPP (mobile)
 * ------------------------------------------------------------ */
.jb-fab-wa {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: var(--jb-tap);
	padding: 14px 18px;
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
}
.jb-fab-wa[hidden] { display: none; }
.jb-fab-wa .jb-ikon { width: 20px; height: 20px; }

/* ------------------------------------------------------------
 * AJAKAN GABUNG
 * ------------------------------------------------------------ */
.jb-gabung {
	margin: 2.5rem 0 0;
	padding: 2.25rem 1.5rem;
	background: var(--jb-primer);
	background-image: radial-gradient(circle at 88% 8%, rgba(245, 179, 1, 0.18), transparent 55%);
	border-radius: 12px;
	text-align: center;
	color: #fff;
	box-shadow: var(--jb-bayang-3, 0 18px 44px rgba(15, 42, 82, 0.14));
}
.jb-gabung__eyebrow {
	margin: 0 0 0.6rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jb-aksen);
}
.jb-gabung__judul {
	margin: 0 0 0.65rem;
	font-size: 1.4rem;
	line-height: 1.25;
	color: #fff;
	text-wrap: balance;
}
.jb-gabung__teks {
	margin: 0 auto 1.4rem;
	max-width: 52ch;
	font-size: 0.98rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	text-wrap: pretty;
}
.jb-gabung__tombol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--jb-tap);
	padding: 12px 28px;
	background: var(--jb-aksen);
	color: var(--jb-primer);
	font-weight: 700;
	font-size: 1rem;
	border-radius: var(--jb-radius);
	text-decoration: none;
	transition: background 0.15s ease, transform 0.05s ease;
}
.jb-gabung__tombol:hover {
	background: #ffc426;
	color: var(--jb-primer);
}
.jb-gabung__tombol:active { transform: translateY(1px); }

/* Untuk anggota, nadanya bukan mengajak melainkan mengingatkan.
   Warnanya diturunkan supaya tidak berteriak seperti CTA. */
.jb-gabung--anggota {
	background: var(--jb-primer-gelap);
	background-image: radial-gradient(circle at 88% 8%, rgba(245, 179, 1, 0.1), transparent 55%);
	box-shadow: var(--jb-bayang-2, 0 8px 24px rgba(15, 42, 82, 0.09));
}
.jb-gabung--anggota .jb-gabung__tombol {
	background: transparent;
	color: var(--jb-aksen);
	border: 2px solid var(--jb-aksen);
}
.jb-gabung--anggota .jb-gabung__tombol:hover {
	background: var(--jb-aksen);
	color: var(--jb-primer);
}

/* ------------------------------------------------------------
 * LENCANA ANGGOTA KJB
 * ------------------------------------------------------------ */
.jb-lencana-kjb {
	display: inline-flex;
	align-items: center;
	gap: 0;
	margin: 0.85rem 0 0;
	border-radius: 8px;
	overflow: hidden;
	font-size: 0.78rem;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(15, 42, 82, 0.12);
}
.jb-lencana-kjb__label {
	padding: 7px 10px;
	background: var(--jb-primer);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.jb-lencana-kjb__nomor {
	padding: 7px 11px;
	background: var(--jb-aksen);
	color: var(--jb-primer);
	font-weight: 800;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}
.jb-lencana-kjb__sejak {
	padding: 7px 10px;
	background: var(--jb-latar-lembut);
	border: 1px solid var(--jb-garis);
	border-left: 0;
	color: var(--jb-teks-sekunder);
	font-weight: 600;
}

/* ------------------------------------------------------------
 * KOTAK PENCARIAN (search.php & 404.php)
 * ------------------------------------------------------------ */
.jb-cari {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 2rem;
	max-width: 560px;
}
.jb-cari__input {
	flex: 1;
	min-width: 0;
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--jb-teks);
	background: #fff;
	border: 1px solid var(--jb-garis);
	border-radius: 8px;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.16s var(--jb-lentur, ease), box-shadow 0.16s var(--jb-lentur, ease);
}
.jb-cari__input::placeholder { color: #9aa4b5; }
.jb-cari__input:focus {
	outline: none;
	border-color: var(--jb-primer);
	box-shadow: 0 0 0 3px rgba(15, 42, 82, 0.14);
}
.jb-cari__tombol {
	flex: 0 0 auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border-radius: 8px;
}

.jb-cari-hasil .jb-section { margin-bottom: 2.5rem; }

/* Teks khusus pembaca layar. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------
 * HALAMAN 404
 * ------------------------------------------------------------ */
.jb-404 { padding-top: 1rem; padding-bottom: 4rem; }

.jb-404__isi {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.jb-404__angka {
	margin: 0;
	font-size: clamp(4rem, 18vw, 8rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--jb-primer);
	opacity: 0.1;
}

.jb-404__judul {
	position: relative;
	margin: -0.4em 0 0.75rem;
	padding-bottom: 0.8rem;
	font-size: clamp(1.5rem, 5vw, 2.1rem);
	line-height: 1.18;
	color: var(--jb-primer);
	text-wrap: balance;
}
.jb-404__judul::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: var(--jb-aksen);
}

.jb-404__teks {
	margin: 0 auto 1.75rem;
	max-width: 44ch;
	color: var(--jb-teks-sekunder);
	text-wrap: pretty;
}

.jb-404 .jb-cari {
	margin-left: auto;
	margin-right: auto;
}

.jb-404__jalan {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 2.25rem;
}

.jb-404__kategori {
	padding: 1.25rem;
	background: var(--jb-latar-lembut);
	border: 1px solid var(--jb-garis);
	border-radius: 12px;
	text-align: left;
}
.jb-404__kategori .jb-filter__judul { margin-bottom: 0.75rem; }

/* ============================================================
 * TABLET ≥ 768px
 * ============================================================ */
@media (min-width: 768px) {

	.jb-wrap { padding: 1.5rem; }
	.jb-page-title { font-size: 2.25rem; }

	.jb-crumb__kini { max-width: none; white-space: normal; }

	.jb-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}

	.jb-hero {
		grid-template-columns: 46% 1fr;
		align-items: stretch;
		gap: 2rem;
		padding: 2rem;
	}
	.jb-hero__foto {
		aspect-ratio: 4 / 3;
	}
	.jb-hero__meta {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.jb-hero__judul { font-size: 2.25rem; }

	.jb-hero__logo {
		left: 16px;
		bottom: 16px;
		width: 84px;
		height: 84px;
		padding: 10px;
		border-radius: 14px;
	}

	.jb-fakta__angka { font-size: 1.7rem; }

	.jb-actions .jb-btn { flex: 0 0 auto; }

	.jb-cerita__isi { font-size: 1.05rem; }

	.jb-produk {
		margin-left: 0;
		margin-right: 0;
		padding: 1.75rem;
	}
	.jb-produk__item {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem;
	}
	.jb-produk__teks { flex: 1; }
	.jb-produk__harga { flex: 0 0 auto; text-align: right; }

	.jb-galeri__grid { grid-template-columns: repeat(3, 1fr); }

	.jb-gabung { padding: 3rem 2rem; }
	.jb-gabung__judul { font-size: 1.85rem; }
}

/* ============================================================
 * DESKTOP ≥ 1024px
 * ============================================================ */
@media (min-width: 1024px) {

	.jb-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}

	.jb-body {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 2rem;
		align-items: start;
	}
	.jb-sidebar { position: sticky; top: 1.5rem; }

	.jb-hero__foto { aspect-ratio: 16 / 9; }

	/* FAB tidak diperlukan di desktop — sudah ada tombol utama. */
	.jb-fab-wa { display: none !important; }
}

/* Beri ruang supaya FAB WhatsApp tidak menutupi tombol gabung. */
@media (max-width: 1023px) {
	.jb-gabung { margin-bottom: 4.5rem; }
}

@media (max-width: 480px) {
	.jb-cari { flex-direction: column; }
	.jb-cari__tombol { width: 100%; }

	.jb-lencana-kjb { font-size: 0.72rem; }
	.jb-lencana-kjb__label,
	.jb-lencana-kjb__nomor,
	.jb-lencana-kjb__sejak { padding: 6px 9px; }
}

/* ============================================================
 * PREFERENSI GERAK
 * ============================================================ */

/* Masuk halus saat halaman dibuka — hanya hero dan tombol aksi. */
@media (prefers-reduced-motion: no-preference) {
	.jb-hero,
	.jb-actions {
		animation: jb-naik 0.5s var(--jb-lentur, ease) both;
	}
	.jb-actions { animation-delay: 0.08s; }
}

@keyframes jb-naik {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.jb-kartu,
	.jb-kartu__gambar img,
	.jb-galeri__item,
	.jb-badge,
	.jb-btn,
	.jb-filter__list a,
	.jb-kartu__judul a,
	.jb-pagination .page-numbers,
	.jb-fakta__item { transition: none; }

	.jb-kartu:hover { transform: none; }
	.jb-fakta__item:hover { transform: none; }

	.jb-status--buka .jb-status__titik { animation: none; }
	.jb-btn--kilap::after { animation: none; opacity: 0; }
}

/* ==================================================================
   PROFIL ORANG (single-orang.php)
   Identitas anggota + portofolio bisnis. Dibuat sekeluarga dengan
   halaman bisnis, tetapi lebih ringkas dan personal.
   ================================================================== */
.jb-orang {
	padding-top: 20px;
	padding-bottom: 64px;
}
.jb-profil-orang {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Hero profil */
.jb-orang-hero {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	margin: 0;
	padding: 22px;
	border-radius: 18px;
	background:
		radial-gradient(640px 360px at 92% 0%, rgba(245,179,1,.14), transparent 56%),
		linear-gradient(135deg, #0a1d3a 0%, #0f2a52 58%, #16346a 100%);
	color: #fff;
	box-shadow: 0 20px 50px rgba(10,29,58,.22);
}
.jb-orang-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(245,179,1,.14) 1px, transparent 1px),
		linear-gradient(90deg, rgba(245,179,1,.14) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(520px 320px at 92% 0%, #000, transparent 74%);
	mask-image: radial-gradient(520px 320px at 92% 0%, #000, transparent 74%);
	pointer-events: none;
}
.jb-orang-hero > * {
	position: relative;
	z-index: 1;
}
.jb-orang-hero__foto {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, #16346a, #0a1d3a);
	display: grid;
	place-items: center;
	border: 2px solid rgba(245,179,1,.65);
	box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.jb-orang-hero__foto img,
.jb-orang-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jb-orang-hero__inisial {
	color: var(--jb-aksen);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
}
.jb-orang-hero__teks {
	min-width: 0;
}
.jb-orang-hero__eyebrow {
	display: block;
	margin: 0 0 7px;
	color: var(--jb-aksen);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.jb-orang-hero__nama {
	margin: 0;
	font-size: clamp(1.7rem, 4vw, 2.35rem);
	line-height: 1.08;
	letter-spacing: -.025em;
	color: #fff;
}
.jb-orang-hero__meta {
	margin: 8px 0 12px;
	color: rgba(255,255,255,.72);
	font-size: .92rem;
	line-height: 1.5;
}
.jb-orang-hero__aksi {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.jb-orang-hero__aksi .jb-btn {
	min-height: 40px;
	padding: 8px 14px;
	font-size: .9rem;
}
.jb-orang-hero__privat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 5px 0 0;
	padding: 8px 12px;
	border: 1px dashed rgba(245,179,1,.42);
	border-radius: 8px;
	color: rgba(255,255,255,.76);
	font-size: .84rem;
	background: rgba(255,255,255,.05);
}

/* Ringkasan kanan hero */
.jb-orang-hero__ringkas {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	margin: 2px 0 0;
	padding: 10px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 12px;
	background: rgba(255,255,255,.055);
	backdrop-filter: blur(3px);
}
.jb-orang-stat {
	min-width: 0;
	padding: 10px 12px;
	border-radius: 9px;
	background: rgba(255,255,255,.055);
}
.jb-orang-stat strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #fff;
	font-size: 1.02rem;
	line-height: 1.25;
}
.jb-orang-stat span {
	display: block;
	margin-top: 3px;
	color: rgba(255,255,255,.58);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* Lencana dan bagikan di hero gelap */
.jb-orang-hero .jb-lencana-kjb {
	margin-top: 10px;
}
.jb-orang-hero .jb-bagikan {
	margin-top: 14px;
	padding-top: 12px;
	border-top-color: rgba(255,255,255,.14);
}
.jb-orang-hero .jb-bagikan__label {
	color: rgba(255,255,255,.62);
}
.jb-orang-hero .jb-bagikan__btn {
	padding: 7px 11px;
	background: rgba(255,255,255,.07);
	border-color: rgba(255,255,255,.18);
	color: #fff;
}
.jb-orang-hero .jb-bagikan__btn:hover {
	border-color: var(--jb-aksen);
	background: rgba(245,179,1,.13);
}

/* Panel profil */
.jb-orang-panel {
	margin: 0;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--jb-garis);
	border-radius: 16px;
	box-shadow: var(--jb-bayang-1, 0 2px 8px rgba(15,42,82,.05));
}
.jb-orang-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}
.jb-orang-section-head .jb-section__judul {
	margin-bottom: 0;
}
.jb-orang-section-head__eyebrow {
	display: block;
	margin-bottom: 6px;
	color: #9a7100;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.jb-orang-section-head__count {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 5px 11px;
	border: 1px solid rgba(15,42,82,.1);
	border-radius: 999px;
	background: rgba(15,42,82,.055);
	color: var(--jb-primer);
	font-size: .78rem;
	font-weight: 700;
}
.jb-orang-bio__isi {
	max-width: 76ch;
	color: #26313f;
	font-size: 1rem;
	line-height: 1.75;
}
.jb-orang-bio__isi p {
	margin: 0 0 1rem;
}
.jb-orang-bio__isi p:last-child {
	margin-bottom: 0;
}

/* Portofolio bisnis */
.jb-orang-bisnis {
	margin: 0;
}
.jb-orang-bisnis__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.jb-orang-bkartu {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--jb-garis);
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(15,42,82,.055);
	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease;
}
.jb-orang-bkartu:hover {
	transform: translateY(-3px);
	border-color: rgba(245,179,1,.65);
	box-shadow: 0 12px 28px rgba(15,42,82,.11);
}
.jb-orang-bkartu__gambar {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, #16346a, #0a1d3a);
}
.jb-orang-bkartu__gambar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.jb-orang-bkartu:hover .jb-orang-bkartu__gambar img {
	transform: scale(1.035);
}
.jb-orang-bkartu__kosong {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--jb-aksen);
	font-size: 2.4rem;
	font-weight: 800;
}
.jb-orang-bkartu__isi {
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
	padding: 15px 16px 16px;
	min-width: 0;
}
.jb-orang-bkartu__nama {
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.3;
}
.jb-orang-bkartu__nama a {
	color: var(--jb-primer);
	text-decoration: none;
}
.jb-orang-bkartu__nama a:hover {
	text-decoration: underline;
	text-decoration-color: var(--jb-aksen);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.jb-orang-bkartu__tag {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	min-height: 2.7em;
	color: var(--jb-teks-sekunder);
	font-size: .9rem;
	line-height: 1.5;
}
.jb-orang-bkartu__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 1px;
}
.jb-orang-bkartu__badges .jb-badge {
	padding: 4px 9px;
	font-size: .72rem;
}
.jb-orang-bkartu__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 11px;
	border-top: 1px solid var(--jb-garis);
	color: var(--jb-primer);
	font-size: .86rem;
	font-weight: 700;
	text-decoration: none;
}
.jb-orang-bkartu__cta span {
	color: var(--jb-aksen);
	font-size: 1.1rem;
	transition: transform .18s ease;
}
.jb-orang-bkartu:hover .jb-orang-bkartu__cta span {
	transform: translateX(3px);
}
.jb-orang-bisnis__kosong {
	padding: 22px;
	border: 1px dashed #ccd5e2;
	border-radius: 12px;
	background: var(--jb-latar-lembut);
	color: var(--jb-teks-sekunder);
	text-align: center;
}

@media (min-width: 680px) {
	.jb-orang-bisnis__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.jb-orang-hero {
		grid-template-columns: 128px minmax(0, 1fr) 310px;
		gap: 26px;
		padding: 30px 32px;
	}
	.jb-orang-hero__foto {
		width: 128px;
		height: 128px;
	}
	.jb-orang-hero__inisial {
		font-size: 3rem;
	}
	.jb-orang-hero__ringkas {
		grid-column: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: 0;
		padding: 10px;
	}
	.jb-orang-panel {
		padding: 26px 28px;
	}
	.jb-orang-bisnis__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}
}

@media (max-width: 520px) {
	.jb-orang-hero {
		grid-template-columns: 1fr;
		text-align: left;
	}
	.jb-orang-hero__foto {
		width: 88px;
		height: 88px;
	}
	.jb-orang-section-head {
		align-items: flex-start;
		flex-direction: column;
	}
	.jb-orang-section-head__count {
		align-self: flex-start;
	}
}

/* ==================================================================
   DIREKTORI JURAGAN (archive-orang.php)
   ================================================================== */
.jb-dir-orang { padding-top: 24px; padding-bottom: 56px; }
.jb-dir-orang__kepala { text-align: center; max-width: 640px; margin: 8px auto 32px; }
.jb-dir-orang__intro { color: #5b6675; margin-top: 10px; line-height: 1.6; }
.jb-dir-orang__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
@media (min-width: 560px) { .jb-dir-orang__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .jb-dir-orang__grid { grid-template-columns: repeat(4, 1fr); } }
.jb-dir-orang__grid .jb-jkartu { width: auto; }

/* ==================================================================
   TOMBOL BAGIKAN (single-orang & single-juragan)
   ================================================================== */
.jb-bagikan {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--jb-garis, #e6e9ee);
}
.jb-bagikan__label { font-size: .85rem; color: #5b6675; font-weight: 600; }
.jb-bagikan__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 8px;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid #d9dee6;
	color: #0f2a52;
	background: #fff;
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.jb-bagikan__btn:hover { border-color: #f5b301; background: rgba(245,179,1,.06); transform: translateY(-1px); }
.jb-bagikan__btn svg { width: 16px; height: 16px; }
.jb-bagikan__btn--wa { color: #128c4a; }
.jb-bagikan__salin-ok { color: #128c4a; font-size: .82rem; font-weight: 600; }

/* ==================================================================
   HERO BISNIS GELAP — penyesuaian elemen agar terbaca di latar biru
   ================================================================== */
.jb-hero .jb-badge {
	background: rgba(255,255,255,.08);
	border-color: rgba(245,179,1,.35);
	color: rgba(255,255,255,.85);
}
.jb-hero .jb-badge:hover {
	background: rgba(245,179,1,.16);
	border-color: var(--jb-aksen);
	color: #fff;
}
.jb-hero .jb-badges { margin-top: 12px; }
/* Lencana KJB di hero gelap */
.jb-hero .jb-lencana-kjb { margin-top: 14px; }
/* Status buka/tutup di hero gelap */
.jb-hero .jb-status--buka { background: rgba(37,211,102,.18); color: #7df0ad; }
.jb-hero .jb-status--tutup { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }