/* ============================================================
 * JURAGAN BANDUNG — Beranda (front-page.php)
 * Mobile-first. Semua class prefix `jb-`.
 *
 * Nomor blok di bawah mengikuti penomoran di front-page.php:
 *   1 Hero            6 Jelajahi kategori
 *   2 Angka           7 Juragan terbaru
 *   3 Tiga pilar      8 Founder
 *   4 Ruang belajar   9 Untuk siapa
 *   5 Agenda         10 Ajakan penutup
 *
 * ATURAN BERKAS INI: setiap selector ditulis SEKALI SAJA.
 * Jangan menempelkan blok baru di akhir berkas — sunting di
 * bagiannya masing-masing.
 * ============================================================ */

:root {
	/* Palet (ditulis ulang di sini supaya beranda mandiri kalau
	   juragan.css tidak ter-muat). */
	--jb-primer: #0f2a52;
	--jb-primer-gelap: #0a1d3a;
	--jb-primer-terang: #16346a;
	--jb-aksen: #f5b301;
	--jb-aksen-gelap: #d19c00;
	--jb-teks: #1a1f2c;
	--jb-teks-sekunder: #5a6478;
	--jb-teks-terang: #ffffff;
	--jb-teks-terang-lembut: rgba(255, 255, 255, 0.78);
	--jb-garis: #e5e8ef;
	--jb-latar: #ffffff;
	--jb-latar-lembut: #f7f8fb;
	--jb-latar-gelap: #0a1d3a;

	/* Tipografi — badan diperkecil ~20% (15→12px) atas permintaan.
	   Ini kecil; kalau di HP terasa menyiksa, lantai mobile di bawah
	   menahannya sedikit lebih besar. */
	--jb-fs-body: 0.75rem;     /* 12px */
	--jb-fs-h3:   1.25rem;     /* 20px */
	--jb-fs-h2:   1.5rem;      /* 24px */
	--jb-fs-h1:   2rem;        /* 32px */

	/* Ritme spasi (kelipatan 8) */
	--jb-s-1:  8px;
	--jb-s-2:  16px;
	--jb-s-3:  24px;
	--jb-s-4:  32px;
	--jb-s-6:  48px;
	--jb-s-8:  64px;
	--jb-s-12: 96px;

	/* Radius — diperkecil di 1.0.9. Radius besar (12px+) adalah ciri
	   tema template; sudut lebih tajam terkesan lebih sengaja. */
	--jb-r-btn:   6px;
	--jb-r-kartu: 10px;

	/* Shadow konsisten */
	--jb-sh-1: 0 1px 2px rgba(15, 42, 82, 0.06), 0 1px 3px rgba(15, 42, 82, 0.05);
	--jb-sh-2: 0 4px 12px rgba(15, 42, 82, 0.08), 0 2px 4px rgba(15, 42, 82, 0.05);
	--jb-sh-3: 0 12px 32px rgba(15, 42, 82, 0.12), 0 4px 8px rgba(15, 42, 82, 0.06);

	--jb-tap: 44px;
	--jb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------
 * FOUNDATION
 * ------------------------------------------------------------ */
.jb-beranda {
	color: var(--jb-teks);
	font-size: var(--jb-fs-body);
	line-height: 1.6;
	/* Latar halaman putih sedikit dingin — kartu putih murni tampak
	   mengambang di atasnya, memberi kedalaman premium (ala Apple). */
	background: #f6f8fb;
}
.jb-beranda * { box-sizing: border-box; }
/* Blok terang default: putih murni, kontras lembut dengan latar dingin. */
.jb-beranda .jb-sec:not(.jb-founder):not(.jb-belajar) { background: #ffffff; }
.jb-beranda .jb-belajar { background: transparent; }

/* Paragraf badan: sedikit lebih rapat dari judul, dan dibatasi
   lebarnya supaya barisnya tidak terlalu panjang untuk dibaca.
   max-width hanya berlaku pada paragraf yang mengalir bebas —
   paragraf di dalam kartu/grid tidak terpengaruh karena sudah
   dibatasi wadahnya. */
.jb-beranda p {
	line-height: 1.6;
}

.jb-container {
	max-width: 1140px;
	margin: 0 auto;
	padding-left: var(--jb-s-3);
	padding-right: var(--jb-s-3);
	width: 100%;
}

/* Jarak antar blok. Dirapatkan supaya beranda tidak banyak
   ruang kosong; di desktop dilebarkan lewat media query. */
.jb-sec { padding: 56px 0; }

.jb-sec__head {
	max-width: 720px;
	margin: 0 auto var(--jb-s-4);
	text-align: center;
}
.jb-sec__judul {
	font-size: var(--jb-fs-h2);
	line-height: 1.2;
	margin: var(--jb-s-1) 0 0;
	color: var(--jb-primer);
}
.jb-sec__sub {
	margin: var(--jb-s-2) 0 0;
	color: var(--jb-teks-sekunder);
	font-size: var(--jb-fs-body);
}

/* Motif garis emas pendek di bawah judul seksi. Judul beranda
   rata tengah, jadi garisnya ikut di tengah. */
.jb-sec__head .jb-sec__judul {
	position: relative;
	padding-bottom: 0.85rem;
	letter-spacing: -0.015em;
}
.jb-sec__head .jb-sec__judul::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: var(--jb-aksen);
}

/* Eyebrow disamakan dengan yang dipakai di halaman profil. */
.jb-eyebrow {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid rgba(245, 179, 1, 0.4);
	background: rgba(245, 179, 1, 0.08);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jb-aksen);
}
.jb-eyebrow--emas {
	border-color: var(--jb-aksen);
	color: var(--jb-aksen-gelap);
	background: rgba(245, 179, 1, 0.1);
}

/* ------------------------------------------------------------
 * TOMBOL BERANDA
 * ------------------------------------------------------------ */
.jb-btn-b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--jb-tap);
	padding: 12px 22px;
	border-radius: var(--jb-r-btn);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	line-height: 1.2;
	border: 1px solid transparent;
	transition: background 180ms var(--jb-ease), color 180ms var(--jb-ease),
	            border-color 180ms var(--jb-ease), transform 120ms var(--jb-ease),
	            box-shadow 180ms var(--jb-ease);
}
.jb-btn-b:active { transform: translateY(1px); }

.jb-btn-b--primer {
	background: var(--jb-primer);
	color: #fff;
}
.jb-btn-b--primer:hover {
	background: var(--jb-primer-gelap);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(15, 42, 82, 0.24);
}

.jb-btn-b--emas {
	background: linear-gradient(180deg, #f8c02e 0%, var(--jb-aksen) 52%, #e7a600 100%);
	color: var(--jb-primer-gelap);
	box-shadow: 0 2px 6px rgba(191, 138, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* Di seluruh situs, sentuhan membuat tombol emas lebih TERANG dan
   sedikit terangkat — bukan lebih gelap. Arah yang konsisten terasa
   lebih disengaja. Gradasi turun ke emas-tua, bukan ke terang, supaya
   tidak pucat seperti jebakan di logo dulu. */
.jb-btn-b--emas:hover {
	background: linear-gradient(180deg, #ffce4a 0%, #f9c02b 52%, #efb00f 100%);
	color: var(--jb-primer-gelap);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(191, 138, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.jb-btn-b--emas:active {
	transform: translateY(0);
	box-shadow: 0 2px 5px rgba(191, 138, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.jb-btn-b--outline-putih {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.45);
}
.jb-btn-b--outline-putih:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border-color: #fff;
}

.jb-tautan-lanjut {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--jb-primer);
	font-weight: 700;
	text-decoration: none;
	padding: 4px 0;
	min-height: 36px;
	transition: color 180ms var(--jb-ease);
}
.jb-tautan-lanjut:hover { color: var(--jb-aksen-gelap); text-decoration: underline; }

/* ============================================================
 * BLOK 1 — HERO
 * ============================================================ */
.jb-hero-b {
	position: relative;
	overflow: hidden;
	background: radial-gradient(1000px 500px at 85% -5%, rgba(245, 179, 1, 0.13), transparent 55%),
	            radial-gradient(700px 400px at 5% 110%, rgba(245, 179, 1, 0.05), transparent 55%),
	            linear-gradient(135deg, var(--jb-primer-gelap) 0%, var(--jb-primer) 55%, var(--jb-primer-terang) 100%);
	color: #fff;
	padding: var(--jb-s-7) 0 var(--jb-s-8);
}
/* Kisi emas samar — tekstur premium, memudar ke kanan atas. */
.jb-hero-b::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(245, 179, 1, 0.3) 1px, transparent 1px),
	                  linear-gradient(90deg, rgba(245, 179, 1, 0.3) 1px, transparent 1px);
	background-size: 20px 20px;
	-webkit-mask-image: radial-gradient(900px 500px at 85% 0%, #000, transparent 70%);
	mask-image: radial-gradient(900px 500px at 85% 0%, #000, transparent 70%);
	pointer-events: none;
}
/* Garis foil emas tipis di tepi bawah. */
.jb-hero-b::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(245,179,1,0) 15%,
		rgba(245,179,1,.85) 50%,
		rgba(245,179,1,0) 85%,
		transparent 100%);
	box-shadow: 0 0 18px rgba(245,179,1,.35);
	pointer-events: none;
}
.jb-hero-b__grid {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--jb-s-6);
	grid-template-columns: 1fr;
	align-items: center;
}
/* Eyebrow jadi pil beraksen emas. */
.jb-hero-b .jb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--jb-aksen);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	padding: 8px 18px;
	border: 1px solid rgba(245, 179, 1, 0.4);
	border-radius: 100px;
	margin-bottom: var(--jb-s-3);
}
.jb-hero-b .jb-eyebrow::before {
	content: "";
	width: 20px;
	height: 1px;
	background: var(--jb-aksen);
}
.jb-hero-b__judul {
	font-size: var(--jb-fs-h1);
	line-height: 1.1;
	margin: var(--jb-s-3) 0 var(--jb-s-3);
	color: #fff;
	font-weight: 800;
	letter-spacing: -0.01em;
}
/* "Juragan" jadi emas bergradasi seperti foil. */
.jb-highlight {
	background: linear-gradient(180deg, #ffe08a, #f5b301 55%, #c88f00);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.jb-hero-b__sub {
	max-width: 620px;
	margin: 0 0 var(--jb-s-4);
	color: var(--jb-teks-terang-lembut);
	font-size: 0.85rem;
	line-height: 1.62;
}
.jb-hero-b__aksi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jb-s-2);
}

/* Kolom kanan: grafis JB emas samar di belakang kartu. */
.jb-hero-b__kanan {
	position: relative;
}
.jb-hero-b__kanan::before {
	content: "JB";
	position: absolute;
	right: -18px;
	top: -78px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 260px;
	font-weight: 800;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(245, 179, 1, 0.14);
	z-index: 0;
	pointer-events: none;
}

.jb-hero-card {
	position: relative;
	z-index: 1;
	background: rgba(255, 255, 255, 0.055);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(245, 179, 1, 0.22);
	border-radius: 16px;
	padding: var(--jb-s-4);
	color: var(--jb-teks-terang);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.jb-hero-card__judul {
	font-size: var(--jb-fs-h3);
	color: #fff;
	margin: 0 0 var(--jb-s-3);
	padding-bottom: var(--jb-s-2);
	border-bottom: 1px solid rgba(245, 179, 1, 0.2);
}
.jb-hero-card__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--jb-s-3);
}
.jb-hero-card__list li {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: var(--jb-s-2);
	align-items: start;
}
.jb-hero-card__list strong {
	display: block;
	color: #fff;
	font-size: 1rem;
	margin-bottom: 4px;
	font-weight: 700;
}
.jb-hero-card__list p {
	margin: 0;
	color: var(--jb-teks-terang-lembut);
	font-size: 0.75rem;
	line-height: 1.6;
}
.jb-hero-card__ikon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(245, 179, 1, 0.15);
	color: var(--jb-aksen);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 200ms var(--jb-ease);
}
.jb-hero-card__ikon svg { width: 22px; height: 22px; }
.jb-hero-card__list li:hover .jb-hero-card__ikon {
	transform: scale(1.06);
}

/* ============================================================
 * BLOK 2 — ANGKA
 * ============================================================ */
.jb-angka {
	background: linear-gradient(180deg, var(--jb-latar-lembut), #eef2f7);
	padding: var(--jb-s-6) 0;
	border-top: 1px solid var(--jb-garis);
	border-bottom: 1px solid var(--jb-garis);
	position: relative;
}
.jb-angka::before,
.jb-angka::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(245,179,1,.5), transparent);
}
.jb-angka::before { top: -1px; }
.jb-angka::after { bottom: -1px; }
.jb-angka__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--jb-s-4);
	text-align: center;
}
.jb-angka__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px 4px;
	position: relative;
	transition: transform 300ms var(--jb-ease);
}
.jb-angka__item:hover { transform: translateY(-3px); }
/* Lebar digit tetap supaya angka tidak bergeser saat jumlahnya berubah. */
.jb-angka__nilai {
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	background: linear-gradient(180deg, var(--jb-primer), #1c3f74);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.jb-angka__item:last-child .jb-angka__nilai {
	background: linear-gradient(180deg, #ffce4a, var(--jb-aksen) 55%, #d69300);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.jb-angka__label {
	font-size: 0.8125rem;
	color: var(--jb-teks-sekunder);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}

/* ============================================================
 * KARTU-B — dipakai Blok 3 (Tiga Pilar) dan Blok 9 (Untuk Siapa)
 * ============================================================ */
.jb-kartu-b {
	position: relative;
	background: var(--jb-latar);
	border: 1px solid var(--jb-garis);
	border-radius: var(--jb-r-kartu);
	padding: var(--jb-s-4);
	box-shadow: none;
	overflow: hidden;
	transition: transform 260ms var(--jb-ease), border-color 260ms var(--jb-ease), box-shadow 260ms var(--jb-ease);
}
.jb-kartu-b::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--jb-aksen), #ffe08a);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 320ms var(--jb-ease);
}
.jb-kartu-b:hover {
	transform: translateY(-6px);
	border-color: rgba(245,179,1,.45);
	box-shadow: 0 20px 44px rgba(15,42,82,.12);
}
.jb-kartu-b:hover::before { transform: scaleX(1); }
.jb-kartu-b__ikon {
	display: inline-flex;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(15, 42, 82, 0.06);
	color: var(--jb-primer);
	align-items: center;
	justify-content: center;
	margin-bottom: var(--jb-s-2);
	transition: background-color 180ms var(--jb-ease), color 180ms var(--jb-ease);
}
.jb-kartu-b:hover .jb-kartu-b__ikon {
	background: rgba(245, 179, 1, 0.14);
	color: var(--jb-aksen-gelap);
}
.jb-kartu-b__ikon svg { width: 24px; height: 24px; }
.jb-kartu-b__judul {
	font-size: var(--jb-fs-h3);
	color: var(--jb-primer);
	margin: 0 0 var(--jb-s-1);
	line-height: 1.3;
}
.jb-kartu-b p {
	margin: 0;
	color: var(--jb-teks-sekunder);
	font-size: 0.75rem;
	line-height: 1.65;
}

/* Grid Blok 3 dan Blok 9. */
.jb-pilar__grid,
.jb-cocok__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--jb-s-3);
}
.jb-cocok__grid--empat { grid-template-columns: 1fr; }

/* ============================================================
 * BLOK 4 — RUANG BELAJAR
 * ============================================================ */
.jb-belajar { background: var(--jb-latar-lembut); }

.jb-belajar__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--jb-s-4);
	align-items: start;
}

.jb-belajar__teks .jb-sec__judul {
	text-align: left;
	margin: var(--jb-s-1) 0 var(--jb-s-2);
}
.jb-belajar__teks p {
	margin: 0 0 var(--jb-s-2);
	color: var(--jb-teks-sekunder);
	line-height: 1.7;
	max-width: 52ch;
}
.jb-belajar__teks .jb-tautan-lanjut { margin-top: var(--jb-s-1); }

.jb-belajar__kolom {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--jb-s-2);
}

.jb-belajar__kotak {
	padding: var(--jb-s-4) var(--jb-s-3);
	background: var(--jb-latar);
	border: 1px solid var(--jb-garis);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15,42,82,.03);
	transition: box-shadow 300ms var(--jb-ease), border-color 300ms var(--jb-ease), transform 300ms var(--jb-ease);
}
.jb-belajar__kotak:hover {
	box-shadow: 0 18px 44px rgba(15,42,82,.10);
	border-color: rgba(245,179,1,.4);
	transform: translateY(-3px);
}

.jb-belajar__judul {
	position: relative;
	margin: 0 0 var(--jb-s-3);
	padding-bottom: .6rem;
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--jb-primer);
}
.jb-belajar__judul::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 28px; height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--jb-aksen), #ffe08a);
}

.jb-belajar__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Baris hidup: garis emas menyapu dari kiri saat hover, panah muncul. */
.jb-belajar__baris {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: .62rem .6rem;
	margin: 0 -.6rem;
	border-radius: 9px;
	font-size: .95rem;
	color: var(--jb-teks);
	cursor: default;
	overflow: hidden;
	transition: background 260ms var(--jb-ease), color 260ms var(--jb-ease), transform 260ms var(--jb-ease);
}
.jb-belajar__baris::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--jb-aksen), #ffe08a);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 300ms var(--jb-ease);
}
.jb-belajar__baris:hover {
	background: rgba(245,179,1,.07);
	transform: translateX(4px);
}
.jb-belajar__baris:hover::before { transform: scaleY(1); }

.jb-belajar__dot {
	flex: 0 0 auto;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--jb-aksen);
	box-shadow: 0 0 0 0 rgba(245,179,1,.5);
	transition: box-shadow 300ms var(--jb-ease), transform 300ms var(--jb-ease);
}
.jb-belajar__baris:hover .jb-belajar__dot {
	transform: scale(1.25);
	box-shadow: 0 0 0 5px rgba(245,179,1,.16);
}
.jb-belajar__teks-item { flex: 1 1 auto; }
.jb-belajar__panah {
	flex: 0 0 auto;
	color: var(--jb-aksen-gelap);
	font-weight: 700;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 260ms var(--jb-ease), transform 260ms var(--jb-ease);
}
.jb-belajar__baris:hover .jb-belajar__panah {
	opacity: 1;
	transform: translateX(0);
}

/* ============================================================
 * BLOK 5 — AGENDA TERDEKAT
 * Kartu event digayakan event.css; di sini hanya penyesuaian
 * jaraknya saat tampil di beranda.
 * ============================================================ */
.jb-agenda-beranda .jb-ev-grid { margin-bottom: 0; }

/* ============================================================
 * BLOK 6 — JELAJAHI KATEGORI
 * ============================================================ */
.jb-kategori {
	background: var(--jb-latar-lembut);
	border-top: 1px solid var(--jb-garis);
	border-bottom: 1px solid var(--jb-garis);
}
/* auto-fit + justify-content: center supaya 1–2 kartu tetap terpusat
   dan tidak melar penuh; kartu punya batas maksimal 340px. */
.jb-kategori__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
	justify-content: center;
	gap: var(--jb-s-2);
}
.jb-kategori-kartu {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jb-s-2);
	padding: var(--jb-s-3);
	background: var(--jb-latar);
	border: 1px solid var(--jb-garis);
	border-radius: var(--jb-r-kartu);
	text-decoration: none;
	color: var(--jb-teks);
	min-height: 72px;
	transition: transform 180ms var(--jb-ease),
	            box-shadow 180ms var(--jb-ease),
	            border-color 180ms var(--jb-ease);
}
.jb-kategori-kartu:hover {
	transform: translateY(-2px);
	border-color: var(--jb-primer);
	box-shadow: var(--jb-sh-2);
}
/* Aksen emas tumbuh dari kiri saat disentuh. */
.jb-kategori-kartu::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--jb-aksen);
	transform: scaleY(0);
	transform-origin: center top;
	transition: transform 200ms var(--jb-ease);
}
.jb-kategori-kartu:hover::before {
	transform: scaleY(1);
}
.jb-kategori-kartu__isi { display: flex; flex-direction: column; gap: 2px; }
.jb-kategori-kartu__nama {
	font-weight: 700;
	color: var(--jb-primer);
	font-size: 1rem;
}
.jb-kategori-kartu__jumlah {
	color: var(--jb-teks-sekunder);
	font-size: 0.875rem;
}
.jb-kategori-kartu__panah {
	display: inline-flex;
	color: var(--jb-teks-sekunder);
	transition: transform 180ms var(--jb-ease), color 180ms var(--jb-ease);
}
.jb-kategori-kartu:hover .jb-kategori-kartu__panah {
	transform: translateX(3px);
	color: var(--jb-aksen);
}

/* ============================================================
 * BLOK 7 — JURAGAN TERBARU
 * ============================================================ */
/* Override .jb-grid dari juragan.css khusus di blok terbaru:
   auto-fit + center supaya 1–2 profil tetap terpusat, kartu tidak
   melar penuh, dan tidak ada kolom kosong. */
.jb-terbaru .jb-grid {
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
}
@media (min-width: 560px) {
	.jb-terbaru .jb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.jb-terbaru .jb-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Radius disamakan dengan kartu beranda lain (12px), bukan 10px
   bawaan juragan.css, supaya beranda terasa satu bahasa. */
.jb-terbaru .jb-kartu {
	border-radius: var(--jb-r-kartu);
}
.jb-terbaru .jb-kartu .jb-btn--kecil {
	border-radius: var(--jb-r-btn);
}
.jb-terbaru__aksi {
	margin-top: var(--jb-s-4);
	text-align: center;
}
.jb-empty-b {
	background: var(--jb-latar-lembut);
	padding: var(--jb-s-6) var(--jb-s-3);
	border-radius: var(--jb-r-kartu);
	text-align: center;
	border: 1px solid var(--jb-garis);
}
.jb-empty-b p {
	margin: 0 auto var(--jb-s-3);
	color: var(--jb-teks-sekunder);
	max-width: 480px;
}

/* ============================================================
 * BLOK 8 — FOUNDER
 * ============================================================ */
.jb-founder {
	position: relative;
	overflow: hidden;
	background: radial-gradient(800px 400px at 12% 0%, rgba(245,179,1,.10), transparent 55%),
	            linear-gradient(135deg, var(--jb-primer-gelap) 0%, var(--jb-primer) 60%, var(--jb-primer-terang) 100%);
	color: #fff;
}
/* Garis cahaya emas memudar di tepi atas & bawah (bukan border penuh). */
.jb-founder > .jb-container { position: relative; z-index: 1; }
.jb-founder-garis-atas,
.jb-founder-garis-bawah { display: none; }
.jb-founder::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 15%, rgba(245,179,1,.7) 50%, transparent 85%);
	pointer-events: none;
	z-index: 2;
}
/* Kisi emas samar khas blok gelap KJB */
.jb-founder::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(245,179,1,.22) 1px, transparent 1px),
	                  linear-gradient(90deg, rgba(245,179,1,.22) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(700px 400px at 12% 0%, #000, transparent 70%);
	mask-image: radial-gradient(700px 400px at 12% 0%, #000, transparent 70%);
	pointer-events: none;
}
.jb-founder__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--jb-s-4);
	align-items: center;
}
.jb-founder__foto {
	position: relative;
	aspect-ratio: 4 / 5;
	background: linear-gradient(135deg, #16346a 0%, var(--jb-primer-gelap) 100%);
	border-radius: var(--jb-r-kartu);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,.4);
	border: 1px solid rgba(245,179,1,.25);
	max-width: 420px;
	margin: 0 auto;
	width: 100%;
}
.jb-founder__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jb-founder__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4.5rem;
	font-weight: 800;
	color: var(--jb-aksen);
	opacity: 0.9;
	letter-spacing: 0.05em;
}
.jb-founder__teks { max-width: 620px; }
.jb-founder__teks .jb-eyebrow--emas { color: var(--jb-aksen); }
.jb-founder__teks .jb-sec__judul {
	text-align: left;
	margin: var(--jb-s-1) 0 var(--jb-s-3);
	color: #fff;
}
/* Blok founder rata kiri, garis emasnya ikut ke kiri. */
.jb-founder__teks .jb-sec__judul::after {
	left: 0;
	transform: none;
}
.jb-founder__teks p {
	margin: 0 0 var(--jb-s-2);
	color: rgba(255,255,255,.74);
	line-height: 1.75;
}
.jb-founder__teks .jb-tautan-lanjut {
	margin-top: var(--jb-s-2);
	color: var(--jb-aksen);
}

/* ============================================================
 * BLOK 10 — CTA PENUTUP
 * ============================================================ */
.jb-cta-penutup {
	position: relative;
	overflow: hidden;
	background: radial-gradient(900px 400px at 50% 100%, rgba(245, 179, 1, 0.10), transparent 65%),
	            linear-gradient(135deg, var(--jb-primer-gelap) 0%, var(--jb-primer) 100%);
	color: #fff;
	padding: var(--jb-s-8) 0;
}
.jb-cta-penutup::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(245,179,1,.22) 1px, transparent 1px),
	                  linear-gradient(90deg, rgba(245,179,1,.22) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(700px 400px at 50% 120%, #000, transparent 70%);
	mask-image: radial-gradient(700px 400px at 50% 120%, #000, transparent 70%);
	pointer-events: none;
}
.jb-cta-penutup::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 2px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(245,179,1,0) 15%,
		rgba(245,179,1,.85) 50%,
		rgba(245,179,1,0) 85%,
		transparent 100%);
	box-shadow: 0 0 18px rgba(245,179,1,.35);
	pointer-events: none;
}
.jb-cta-penutup__isi {
	position: relative;
	z-index: 1;
	max-width: 720px;
	text-align: center;
	margin: 0 auto;
}
.jb-cta-penutup__judul {
	position: relative;
	font-size: var(--jb-fs-h2);
	line-height: 1.15;
	margin: 0 0 var(--jb-s-3);
	padding-bottom: 0.9rem;
	letter-spacing: -0.015em;
	color: #fff;
	font-weight: 800;
}
/* Judul di atas latar gelap: garis tetap emas, tetap terbaca. */
.jb-cta-penutup__judul::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: var(--jb-aksen);
}
.jb-cta-penutup__teks {
	color: var(--jb-teks-terang-lembut);
	margin: 0 auto var(--jb-s-4);
	font-size: 0.85rem;
	line-height: 1.68;
	max-width: 560px;
}
.jb-cta-penutup__aksi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jb-s-2);
	justify-content: center;
}

/* Untuk anggota nadanya mengingatkan, bukan merayu.
   Warnanya diturunkan supaya tidak terasa seperti iklan. */
.jb-cta-penutup--anggota {
	background: var(--jb-primer-gelap);
	background-image: radial-gradient(700px 320px at 50% 100%, rgba(245, 179, 1, 0.07), transparent 65%);
}

/* ------------------------------------------------------------
 * LATAR KHAS BIDANG BIRU
 * Kisi emas sangat samar di atas bidang biru. Tidak terbaca
 * sebagai pola, tapi membuat bidang gelap tidak terasa mati.
 * ------------------------------------------------------------ */
.jb-hero-b::before,
.jb-cta-penutup::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(245, 179, 1, 0.24) 1px, transparent 1px),
		linear-gradient(90deg, rgba(245, 179, 1, 0.24) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: radial-gradient(620px 420px at 92% 2%, #000, transparent 62%);
	-webkit-mask-image: radial-gradient(620px 420px at 92% 2%, #000, transparent 62%);
}
/* CTA penutup: kisi terpusat di bawah-tengah (di belakang tombol),
   memudar sebelum teks. */
.jb-cta-penutup::before {
	mask-image: radial-gradient(680px 380px at 50% 115%, #000, transparent 62%);
	-webkit-mask-image: radial-gradient(680px 380px at 50% 115%, #000, transparent 62%);
}

/* Garis emas tipis sebagai batas bawah hero. */
.jb-hero-b::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--jb-aksen) 0%, var(--jb-aksen) 18%, rgba(245, 179, 1, 0.14) 18%);
}

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

	.jb-container {
		padding-left: var(--jb-s-4);
		padding-right: var(--jb-s-4);
	}

	.jb-hero-b__aksi .jb-btn-b { min-width: 180px; }

	.jb-angka__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--jb-s-3);
	}
	.jb-angka__nilai { font-size: 2.5rem; }

	.jb-pilar__grid,
	.jb-cocok__grid { grid-template-columns: repeat(3, 1fr); }
	.jb-cocok__grid--empat { grid-template-columns: repeat(2, 1fr); }

	.jb-belajar__grid { grid-template-columns: 1fr 1fr; gap: var(--jb-s-6); }
	.jb-belajar__kolom { grid-template-columns: 1fr 1fr; }

	/* Kategori & terbaru: biarkan auto-fit yang mengatur —
	   jangan paksa jumlah kolom di sini. */

	.jb-founder__grid {
		grid-template-columns: 340px 1fr;
		gap: var(--jb-s-6);
	}
}

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

	.jb-sec { padding: 56px 0; }
	.jb-hero-b { padding: 48px 0 64px; }
	.jb-cta-penutup { padding: 56px 0; }
	.jb-angka { padding: var(--jb-s-4) 0; }

	.jb-hero-b__grid {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--jb-s-8);
	}
	.jb-hero-b__judul { font-size: 3.25rem; }

	.jb-sec__judul { font-size: 1.75rem; }
	.jb-cta-penutup__judul { font-size: 1.75rem; }

	.jb-angka__nilai { font-size: 2.375rem; }

	.jb-belajar__grid { grid-template-columns: 1fr 1.15fr; gap: var(--jb-s-8); }

	.jb-cocok__grid--empat { grid-template-columns: repeat(4, 1fr); }
	.jb-cocok__grid--empat .jb-kartu-b { padding: var(--jb-s-3); }
	.jb-cocok__grid--empat .jb-kartu-b__judul { font-size: 1.15rem; }

	.jb-founder__grid { grid-template-columns: 380px 1fr; }
}

/* ============================================================
 * PREFERENSI GERAK
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.jb-kategori-kartu::before,
	.jb-kartu-b__ikon,
	.jb-hero-card__ikon { transition: none; }

	.jb-hero-card__list li:hover .jb-hero-card__ikon { transform: none; }

	.jb-hero-b::before,
	.jb-cta-penutup::before { display: none; }
}

/* ============================================================
 * BLOK TANYA JAWAB DI BERANDA
 * Akordeon ringkas. Gayanya berdiri sendiri di sini karena
 * halaman.css — tempat .jb-faq berada — tidak dimuat di beranda.
 * ============================================================ */

.jb-faq-beranda { background: var(--jb-latar-lembut); }

.jb-faqb__daftar {
	max-width: 760px;
	margin: 0 auto;
	background: var(--jb-latar);
	border: 1px solid var(--jb-garis);
	border-radius: var(--jb-r-kartu);
	overflow: hidden;
	box-shadow: var(--jb-sh-1);
}

.jb-faqb__item { border-bottom: 1px solid var(--jb-garis); }
.jb-faqb__item:last-child { border-bottom: 0; }

.jb-faqb__tanya {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 1.25rem;
	cursor: pointer;
	list-style: none;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--jb-primer);
	transition: background-color .16s var(--jb-ease);
	-webkit-tap-highlight-color: transparent;
}
.jb-faqb__tanya::-webkit-details-marker { display: none; }
.jb-faqb__tanya::marker { content: ""; }
.jb-faqb__tanya:hover { background: var(--jb-latar-lembut); }
.jb-faqb__tanya:focus-visible {
	outline: 3px solid var(--jb-aksen);
	outline-offset: -3px;
}

/* Tanda plus yang jadi silang saat terbuka. */
.jb-faqb__tanda {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: .15rem;
}
.jb-faqb__tanda::before,
.jb-faqb__tanda::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: var(--jb-aksen);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform .22s var(--jb-ease), opacity .22s ease;
}
.jb-faqb__tanda::before { width: 14px; height: 2.5px; }
.jb-faqb__tanda::after  { width: 2.5px; height: 14px; }

.jb-faqb__item[open] .jb-faqb__tanda::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}
.jb-faqb__item[open] .jb-faqb__tanya { background: var(--jb-latar-lembut); }

.jb-faqb__jawab {
	padding: 0 1.25rem 1.2rem;
	background: var(--jb-latar-lembut);
	animation: jb-faqb-buka .24s var(--jb-ease);
}
.jb-faqb__jawab p {
	margin: 0;
	padding-top: .9rem;
	border-top: 1px solid var(--jb-garis);
	font-size: .96rem;
	line-height: 1.68;
	color: var(--jb-teks);
	text-wrap: pretty;
}

@keyframes jb-faqb-buka {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.jb-faqb__aksi {
	margin-top: var(--jb-s-4);
	text-align: center;
}

@media (min-width: 768px) {
	.jb-faqb__tanya { padding: 1.15rem 1.5rem; font-size: 1.05rem; }
	.jb-faqb__jawab { padding: 0 1.5rem 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
	.jb-faqb__jawab { animation: none; }
	.jb-faqb__tanya,
	.jb-faqb__tanda::before,
	.jb-faqb__tanda::after { transition: none; }
}

/* ============================================================
 * CAROUSEL JURAGAN BERJALAN
 * ============================================================ */
.jb-carousel {
	padding: 48px 0;
	background: var(--jb-latar-lembut);
	border-top: 1px solid var(--jb-garis);
	border-bottom: 1px solid var(--jb-garis);
	overflow: hidden;
}
.jb-carousel .jb-sec__head { margin-bottom: 28px; }
.jb-carousel__jendela {
	position: relative;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.jb-carousel__jalur {
	display: flex;
	gap: 16px;
	width: max-content;
	animation: jb-geser 42s linear infinite;
}
.jb-carousel__jendela:hover .jb-carousel__jalur { animation-play-state: paused; }
@keyframes jb-geser {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.jb-carousel__jalur { animation: none; }
	.jb-carousel__jendela {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

.jb-jkartu {
	flex: 0 0 auto;
	width: 200px;
	background: #fff;
	border: 1px solid var(--jb-garis);
	border-radius: 12px;
	padding: 20px 16px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: transform 180ms var(--jb-ease), border-color 180ms var(--jb-ease), box-shadow 180ms var(--jb-ease);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.jb-jkartu:hover {
	transform: translateY(-4px);
	border-color: var(--jb-aksen);
	box-shadow: 0 12px 28px rgba(15, 42, 82, 0.12);
}
.jb-jkartu__foto {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--jb-primer);
	display: grid;
	place-items: center;
	margin-bottom: 10px;
}
.jb-jkartu__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jb-jkartu__inisial { color: var(--jb-aksen); font-size: 1.8rem; font-weight: 800; }
.jb-jkartu__nama { font-weight: 700; color: var(--jb-primer); font-size: 1rem; line-height: 1.25; }
.jb-jkartu__meta { color: var(--jb-teks-lembut); font-size: 0.82rem; }
.jb-jkartu__kjb {
	margin-top: 8px;
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--jb-aksen-gelap);
	background: rgba(245, 179, 1, 0.12);
	border: 1px solid rgba(245, 179, 1, 0.3);
	padding: 3px 10px;
	border-radius: 100px;
}

/* ============================================================
 * SCROLL REVEAL + MICRO-INTERACTIONS (1.9.0)
 * ============================================================ */
.jb-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 820ms cubic-bezier(.22,.7,.2,1), transform 820ms cubic-bezier(.22,.7,.2,1);
	will-change: opacity, transform;
}
.jb-reveal--tampil {
	opacity: 1;
	transform: none;
}
/* Terhuyung antar anak: kartu muncul sedikit berurutan */
.jb-reveal--tampil .jb-stagger > * {
	animation: jb-naik-halus 620ms cubic-bezier(.22,.7,.2,1) both;
}
.jb-reveal--tampil .jb-stagger > *:nth-child(1) { animation-delay: 60ms; }
.jb-reveal--tampil .jb-stagger > *:nth-child(2) { animation-delay: 160ms; }
.jb-reveal--tampil .jb-stagger > *:nth-child(3) { animation-delay: 260ms; }
.jb-reveal--tampil .jb-stagger > *:nth-child(4) { animation-delay: 360ms; }
.jb-reveal--tampil .jb-stagger > *:nth-child(5) { animation-delay: 460ms; }
.jb-reveal--tampil .jb-stagger > *:nth-child(6) { animation-delay: 560ms; }
@keyframes jb-naik-halus {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}

/* Hero bernafas: kilau emas & kisi bergeser sangat perlahan */
.jb-hero-b::before { animation: jb-kisi-geser 40s ease-in-out infinite alternate; }
@keyframes jb-kisi-geser {
	from { transform: translate3d(0,0,0); }
	to   { transform: translate3d(-24px,-14px,0); }
}
.jb-hero-b__kanan::before { animation: jb-jb-nafas 9s ease-in-out infinite alternate; }
@keyframes jb-jb-nafas {
	from { opacity: .85; transform: translateY(0); }
	to   { opacity: 1; transform: translateY(-8px); }
}

/* Micro-interactions */
.jb-eyebrow--emas { transition: letter-spacing 300ms ease; }
.jb-sec:hover .jb-eyebrow--emas,
.jb-sec__head:hover .jb-eyebrow--emas { letter-spacing: 0.24em; }

.jb-sec__judul::after { transition: width 420ms cubic-bezier(.22,.7,.2,1); }
.jb-reveal--tampil .jb-sec__judul::after { animation: jb-garis-tumbuh 640ms cubic-bezier(.22,.7,.2,1) both; }
@keyframes jb-garis-tumbuh {
	from { width: 0; }
}

/* Hormati reduced-motion: matikan semua gerak tambahan */
@media (prefers-reduced-motion: reduce) {
	.jb-reveal { opacity: 1; transform: none; transition: none; }
	.jb-reveal--tampil .jb-stagger > * { animation: none; }
	.jb-hero-b::before,
	.jb-hero-b__kanan::before,
	.jb-reveal--tampil .jb-sec__judul::after { animation: none; }
}

/* ============================================================
 * PENYESUAIAN MOBILE (audit tampilan HP)
 * ============================================================ */
@media (max-width: 600px) {
	/* Eyebrow pil: teks panjang tak lagi patah jelek. Garis kecil
	   disembunyikan di HP, teks dikecilkan & rata tengah. */
	.jb-hero-b .jb-eyebrow {
		font-size: 0.68rem;
		letter-spacing: 0.14em;
		padding: 7px 14px;
		line-height: 1.4;
		text-align: center;
	}
	.jb-hero-b .jb-eyebrow::before { display: none; }

	/* Hero: spasi lebih rapat & seimbang di HP. */
	.jb-hero-b { padding: 28px 0 40px; }
	.jb-hero-b__judul { font-size: 2rem; line-height: 1.12; }
	.jb-hero-b__sub { font-size: 0.85rem; margin-bottom: 24px; }
	.jb-hero-b__grid { gap: 28px; }

	/* Grafis JB samar dikecilkan supaya tak menabrak kartu di HP. */
	.jb-hero-b__kanan::before { font-size: 150px; top: -46px; right: -8px; }

	/* Kartu hero: padding & jarak lebih pas. */
	.jb-hero-card { padding: 20px 18px; }
	.jb-hero-card__list { gap: 16px; }

	/* Tombol hero: penuh selebar layar, mudah ditekan jempol. */
	.jb-hero-b__aksi { flex-direction: column; }
	.jb-hero-b__aksi > * { width: 100%; text-align: center; }

	/* Section lebih rapat di HP. */
	.jb-sec { padding: 40px 0; }

	/* Blok belajar: kolom jadi satu, kartu tak sempit. */
	.jb-belajar__kolom { grid-template-columns: 1fr; gap: 16px; }

	/* Kisi hero lebih kalem di HP: area kecil di pojok kanan atas,
	   memudar cepat supaya tak menabrak teks. */
	.jb-hero-b::before {
		mask-image: radial-gradient(340px 300px at 100% 0%, #000, transparent 58%);
		-webkit-mask-image: radial-gradient(340px 300px at 100% 0%, #000, transparent 58%);
		background-image:
			linear-gradient(rgba(245, 179, 1, 0.2) 1px, transparent 1px),
			linear-gradient(90deg, rgba(245, 179, 1, 0.2) 1px, transparent 1px);
	}

	/* Angka: 2 kolom tetap, tapi lebih rapat. */
	.jb-angka { padding: 32px 0; }
	.jb-angka__nilai { font-size: 2.1rem; }

	/* Kartu pilar & untuk-siapa: padding lebih pas di HP (jangan
	   menganga), ikon tak menempel tepi. */
	.jb-kartu-b { padding: 20px 18px; }
	.jb-kartu-b__ikon { margin-bottom: 10px; }
	.jb-kartu-b__judul { font-size: 1.15rem; margin-bottom: 6px; }
	.jb-cocok__grid--empat .jb-kartu-b { padding: 20px 18px; }
}

/* ============================================================
 * PAKSA: hapus garis penuh Kadence di batas blok, ganti garis
 * cahaya memudar simetris. (1.12.2)
 * Kadence & elemen lain kadang menaruh border/box-shadow garis di
 * tepi section — di HP terlihat "sepotong". Kita bersihkan paksa.
 * ============================================================ */

/* 1. Matikan border/shadow garis pada wadah section beranda & Kadence. */
.jb-hero-b,
.jb-founder,
.jb-cta-penutup,
.jb-angka,
.jb-sec {
	border-top: 0 !important;
	border-bottom: 0 !important;
}
/* Kadence: entry-content / wrapper kadang beri garis. */
.single .entry-content hr,
.content-container .site-main > hr { display: none !important; }

/* 2. Garis cahaya memudar simetris — dipaksa di batas blok GELAP.
      Memakai ::after yang sudah ada, tapi dipastikan menang. */
.jb-hero-b::after,
.jb-founder::after,
.jb-cta-penutup::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	height: 2px !important;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(245,179,1,0) 12%,
		rgba(245,179,1,.9) 50%,
		rgba(245,179,1,0) 88%,
		transparent 100%) !important;
	box-shadow: 0 0 20px rgba(245,179,1,.4) !important;
	border: 0 !important;
	pointer-events: none !important;
	z-index: 3 !important;
}
.jb-hero-b::after { bottom: 0 !important; top: auto !important; }
.jb-founder::after { bottom: 0 !important; top: auto !important; }
.jb-cta-penutup::after { top: 0 !important; bottom: auto !important; }

/* 3. Angka: garis memudar simetris atas & bawah (bukan border abu). */
.jb-angka { border: 0 !important; }
.jb-angka::before,
.jb-angka::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important; right: 0 !important;
	height: 2px !important;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(245,179,1,0) 15%,
		rgba(245,179,1,.55) 50%,
		rgba(245,179,1,0) 85%,
		transparent 100%) !important;
	border: 0 !important;
	pointer-events: none !important;
}
.jb-angka::before { top: 0 !important; bottom: auto !important; }
.jb-angka::after { bottom: 0 !important; top: auto !important; }