/* ============================================================
 * JURAGAN BANDUNG — GLOBAL
 * Dimuat di seluruh situs. Berisi token bersama, status fokus,
 * detail identitas, dan footer.
 * ============================================================ */

:root {
	--jb-primer: #0f2a52;
	--jb-primer-gelap: #0a1d3a;
	--jb-aksen: #f5b301;
	--jb-aksen-terang: #ffc426;

	/* Warna garis. Nilainya sama dengan yang ada di juragan.css,
	   beranda.css, dan halaman.css — didefinisikan juga di sini
	   supaya global.css berdiri sendiri. Berkas ini dimuat di
	   SELURUH situs, termasuk halaman yang tidak memuat satu pun
	   dari ketiganya; tanpa baris ini garis pemisah di drawer
	   mobile hilang tanpa jejak. */
	--jb-garis: #e5e8ef;

	/* Skala bayangan tiga tingkat. */
	--jb-bayang-1: 0 1px 2px rgba(15, 42, 82, 0.05), 0 2px 8px rgba(15, 42, 82, 0.05);
	--jb-bayang-2: 0 2px 4px rgba(15, 42, 82, 0.06), 0 8px 24px rgba(15, 42, 82, 0.09);
	--jb-bayang-3: 0 4px 8px rgba(15, 42, 82, 0.07), 0 18px 44px rgba(15, 42, 82, 0.14);

	/* Footer sengaja lebih gelap dari --jb-primer supaya terpisah jelas
	   dari blok CTA biru di atasnya. */
	--jb-footer-bg: #081221;

	--jb-lentur: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------
 * DETAIL IDENTITAS
 * ------------------------------------------------------------ */

/* Sorotan teks memakai emas — kecil, tapi terasa milik sendiri. */
::selection {
	background: rgba(245, 179, 1, 0.28);
	color: var(--jb-primer);
}

/* Status fokus keyboard yang konsisten di seluruh situs. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--jb-aksen);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ------------------------------------------------------------
 * FOOTER — ringkas, gelap, satu baris
 * ------------------------------------------------------------ */

#colophon.site-footer,
.site-footer {
	background: var(--jb-footer-bg);
	color: rgba(255, 255, 255, 0.6);
	position: relative;
}

/* Garis cahaya emas memudar simetris di tepi atas footer —
   konsisten dengan batas blok gelap lain. */
#colophon.site-footer::before,
.site-footer::before {
	content: "";
	display: block;
	height: 2px;
	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%);
	box-shadow: 0 0 18px rgba(245,179,1,.35);
}

.site-footer a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.16s var(--jb-lentur);
}
.site-footer a:hover { color: var(--jb-aksen); }

.site-footer .site-bottom-footer-inner-wrap {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.42);
}

.site-footer .jb-foot__kolom,
.site-footer .jb-foot__kolom p,
.site-footer .jb-foot__kolom li {
	color: rgba(255, 255, 255, 0.6);
}

.jb-foot__kolom { margin: 0; }

/* --- Blok merek: logo dan teks sejajar --- */

.jb-foot__merek {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

/* Dudukan putih untuk logo footer — kini hanya cadangan.
   Dipakai bila footer terpaksa jatuh ke logo header yang berlatar
   putih solid. Di atas footer yang nyaris hitam kotak putihnya
   terlihat seperti cacat, jadi kotak itu dijadikan elemen yang
   disengaja: kartu putih membulat, bentuk yang sama dengan dudukan
   logo di sudut hero profil juragan.

   Sejak 1.0.4 tema membawa logo versi latar gelap sendiri, dan
   logo itu memakai .jb-foot__logo--polos di bawah — tanpa dudukan. */
.jb-foot__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 10px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.jb-foot__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 132px;
	max-height: 40px;
}

/* Logo footer berlatar transparan: tanpa dudukan, boleh lebih besar
   karena tidak lagi dibatasi lebar kartu putih. */
.jb-foot__logo--polos {
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.jb-foot__logo--polos img {
	max-width: 186px;
	max-height: 74px;
}

.site-footer .jb-foot__namasitus {
	font-size: 1.05rem;
	font-weight: 800;
	color: #fff;
	text-decoration: none;
}

.jb-foot__merek-teks { min-width: 0; }

.site-footer .jb-foot__tagline {
	margin: 0;
	font-size: 0.85rem;
	font-style: italic;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.52);
}

.site-footer .jb-foot__tiga {
	margin: 0.22rem 0 0;
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jb-aksen);
}

/* --- Navigasi sebaris --- */

.jb-foot__nav {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.6rem;
	margin: 0;
	padding: 0;
}
.jb-foot__nav li { margin: 0; }

.site-footer .jb-foot__nav a {
	font-size: 0.94rem;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.8);
}

/* --- Daftar tautan berkolom [jb_tautan_list] ---
   Berbeda dari .jb-foot__nav yang sebaris: yang ini menurun, dipakai
   saat footer ditata berkolom. Sebelumnya tidak punya aturan sama
   sekali sehingga keluar dengan bulatan bawaan browser. */

.jb-foot__tautan {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
}
.jb-foot__tautan li { margin: 0; }

.site-footer .jb-foot__tautan a {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
}

/* --- Chip kategori: satu baris tipis --- */

.jb-foot__chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
}
.jb-foot__chips li { margin: 0; }

.site-footer .jb-foot__chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: transparent;
	font-size: 0.78rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition: background-color 0.16s var(--jb-lentur), color 0.16s var(--jb-lentur), border-color 0.16s var(--jb-lentur);
}
.site-footer .jb-foot__chip:hover {
	background: var(--jb-aksen);
	border-color: var(--jb-aksen);
	color: var(--jb-footer-bg);
}

/* Kategori yang sudah terisi ditandai titik emas, bukan angka. */
.site-footer .jb-foot__chip--isi {
	border-color: rgba(245, 179, 1, 0.34);
	color: rgba(255, 255, 255, 0.85);
}
.site-footer .jb-foot__chip--isi::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 5px;
	border-radius: 50%;
	background: var(--jb-aksen);
	vertical-align: 2px;
}
.site-footer .jb-foot__chip--isi:hover::before { background: var(--jb-footer-bg); }

/* Judul kolom hanya dipakai bila Akang memilih tata letak berkolom. */
.jb-foot__judul {
	margin: 0 0 0.7rem;
	padding: 0 0 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #fff;
	position: relative;
}
.jb-foot__judul::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	background: var(--jb-aksen);
}

/* --- Ikon sosial --- */

.jb-foot__sosial-baris {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.site-footer a.jb-foot__sosial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.7);
	transition: background-color 0.16s var(--jb-lentur), color 0.16s var(--jb-lentur), border-color 0.16s var(--jb-lentur);
}
.site-footer a.jb-foot__sosial:hover {
	background: var(--jb-aksen);
	border-color: var(--jb-aksen);
	color: var(--jb-footer-bg);
}
.jb-foot__sosial svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* Penyesuaian footer untuk layar kecil dikumpulkan di satu blok
   @media (max-width: 767px) di bagian bawah berkas ini. */

@media (prefers-reduced-motion: reduce) {
	.site-footer a,
	.site-footer .jb-foot__chip,
	.site-footer a.jb-foot__sosial { transition: none; }
}

/* ------------------------------------------------------------
 * HEADER SITUS
 * ------------------------------------------------------------ */

.site-header {
	box-shadow: 0 1px 0 rgba(15, 42, 82, 0.07), 0 2px 10px rgba(15, 42, 82, 0.04);
}

/* Tinggi header — baseline ramping dari tema. Padding dikunci tipis;
   LEBAR logo TIDAK dikunci, jadi Customizer Kadence (Header → Logo →
   Logo Max Width) tetap bisa Akang atur untuk mengecilkan lebih jauh.
   Tinggi header mengikuti tinggi logo, jadi mengecilkan lebar logo di
   Customizer = header lebih pendek. */
.site-header .site-header-row-container-inner,
.site-header .site-main-header-inner-wrap,
.site-header .kadence-sticky-header .site-header-row-container-inner {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}
.site-header .site-branding img.custom-logo,
.site-header .site-header-item img.custom-logo {
	max-height: 40px !important;
	height: auto !important;
	width: auto !important;
}
/* Rapatkan tinggi seluruh isi baris header — cegah elemen lain
   (pencarian, menu, tombol) menaikkan tinggi baris. */
.site-header .site-main-header-inner-wrap,
.site-header .site-header-inner-wrap {
	min-height: 0 !important;
}
.site-header .header-search input,
.site-header .search-toggle-open-container input {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}
/* Mobile: header paling ramping. */
@media (max-width: 767px) {
	.site-header .site-header-row-container-inner,
	.site-header .site-main-header-inner-wrap,
	.site-header .kadence-sticky-header .site-header-row-container-inner {
		padding-top: 5px !important;
		padding-bottom: 5px !important;
	}
	.site-header .site-branding img.custom-logo,
	.site-header .site-header-item img.custom-logo {
		max-height: 38px !important;
	}
}
@media (min-width: 1024px) {
	.site-header .site-header-row-container-inner,
	.site-header .site-main-header-inner-wrap {
		padding-top: 7px !important;
		padding-bottom: 7px !important;
	}
	.site-header .site-branding img.custom-logo,
	.site-header .site-header-item img.custom-logo {
		max-height: 42px !important;
	}
}

/* Navigasi utama: garis emas tumbuh dari kiri saat disentuh. */
.site-header .primary-menu-container > ul > li > a,
.header-navigation .menu > li > a {
	position: relative;
	font-weight: 600;
}

.site-header .primary-menu-container > ul > li > a::after,
.header-navigation .menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	height: 2px;
	border-radius: 2px;
	background: var(--jb-aksen);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s var(--jb-lentur);
}

.site-header .primary-menu-container > ul > li > a:hover::after,
.header-navigation .menu > li > a:hover::after,
.header-navigation .menu > li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* Item menu yang sedang aktif diberi warna biru penuh. */
.header-navigation .menu > li.current-menu-item > a {
	color: var(--jb-primer);
}

@media (prefers-reduced-motion: reduce) {
	.site-header .primary-menu-container > ul > li > a::after,
	.header-navigation .menu > li > a::after { transition: none; }
}

/* ------------------------------------------------------------
 * KOTAK PENCARIAN [jb_cari]
 * Dipakai di header lewat elemen HTML Kadence.
 * ------------------------------------------------------------ */

.jb-cari-kotak {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 320px;
	margin: 0;
}

.jb-cari-kotak__ikon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	pointer-events: none;
	color: #8a94a6;
}
.jb-cari-kotak__ikon svg { width: 17px; height: 17px; fill: currentColor; }

.jb-cari-kotak__input {
	width: 100%;
	padding: 9px 44px 9px 36px;
	font-family: inherit;
	font-size: .92rem;
	line-height: 1.4;
	color: var(--jb-primer);
	background: #fff;
	border: 1px solid #dbe1ea;
	border-radius: 999px;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .16s var(--jb-lentur), box-shadow .16s var(--jb-lentur);
}

.jb-cari-kotak__input::placeholder { color: #9aa4b5; opacity: 1; }
.jb-cari-kotak__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.jb-cari-kotak__input:focus {
	outline: none;
	border-color: var(--jb-primer);
	box-shadow: 0 0 0 3px rgba(15, 42, 82, .12);
}

.jb-cari-kotak__tombol {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	font-family: inherit;
	font-size: .88rem;
	font-weight: 700;
	color: var(--jb-primer);
	background: var(--jb-aksen);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .16s var(--jb-lentur);
}
.jb-cari-kotak__tombol:hover { background: var(--jb-aksen-terang); }
.jb-cari-kotak__tombol svg { width: 16px; height: 16px; fill: currentColor; }

/* Varian tombol berteks */
.jb-cari-kotak--teks .jb-cari-kotak__input { padding-right: 76px; }
.jb-cari-kotak--teks .jb-cari-kotak__tombol {
	width: auto;
	padding: 0 16px;
	height: 34px;
}

/* Penempatan kotak cari di header dan di drawer diatur sekali saja,
   masing-masing di bagiannya sendiri di bawah. Jangan tambahkan
   aturan .site-header .jb-cari-kotak di sini — dulu ada tiga definisi
   yang saling menimpa dan dua media query jadi tidak pernah berlaku. */

.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;
}

/* ------------------------------------------------------------
 * TOMBOL AKUN HEADER [jb_akun]
 * ------------------------------------------------------------ */

.jb-akun {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.jb-akun--bergaris {
	padding-left: 1rem;
	margin-left: .25rem;
	border-left: 1px solid #dbe1ea;
}

.site-header a.jb-akun__tombol,
.jb-akun__tombol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	padding: 8px 18px;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	border-radius: 8px;
	border: 2px solid transparent;
	transition:
		background-color .16s var(--jb-lentur),
		color .16s var(--jb-lentur),
		border-color .16s var(--jb-lentur),
		box-shadow .16s var(--jb-lentur);
}

/* Tombol kiri: bergaris */
.site-header a.jb-akun__tombol--garis {
	color: var(--jb-primer);
	background: transparent;
	border-color: var(--jb-primer);
}
.site-header a.jb-akun__tombol--garis:hover {
	color: #fff;
	background: var(--jb-primer);
}

/* Tombol kanan: emas terisi */
.site-header a.jb-akun__tombol--isi {
	color: var(--jb-primer);
	background: var(--jb-aksen);
	border-color: var(--jb-aksen);
	box-shadow: 0 2px 8px rgba(245, 179, 1, .3);
}
.site-header a.jb-akun__tombol--isi:hover {
	background: var(--jb-aksen-terang);
	border-color: var(--jb-aksen-terang);
	color: var(--jb-primer);
	box-shadow: 0 4px 14px rgba(245, 179, 1, .42);
}

@media (max-width: 1280px) {
	.jb-akun--bergaris { padding-left: .75rem; }
}

/* Di drawer mobile, dua tombol CTA sudah disediakan terpisah. */
#mobile-drawer .jb-akun { display: none; }

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

/* ------------------------------------------------------------
 * KOTAK CARI DI HEADER — satu-satunya tempat pengaturannya
 *
 * Ruang di header sempit: ikon kiri dibuang supaya teks bayangan
 * tidak tertumpuk, dan kotaknya diramping jadi 175px.
 *
 * Lebar 175px sengaja tetap di semua ukuran layar. Di bawah 1024px
 * Kadence sudah berpindah ke drawer, jadi tidak ada yang perlu
 * dikecilkan lagi.
 * ------------------------------------------------------------ */

.site-header .jb-cari-kotak { max-width: 175px; }
.site-header .jb-cari-kotak__ikon { display: none; }
.site-header .jb-cari-kotak__input {
	padding-left: 16px;
	font-size: .88rem;
}

/* ------------------------------------------------------------
 * SUBMENU DROPDOWN
 * Bawaan Kadence berlatar hitam. Diganti kartu putih bergaris
 * emas supaya sejalan dengan panel lain di situs ini.
 * ------------------------------------------------------------ */

.site-header .sub-menu,
.header-navigation ul ul,
.primary-menu-container ul ul {
	background: #fff;
	border: 1px solid #e3e8ef;
	border-top: 3px solid var(--jb-aksen);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 14px 34px rgba(15, 42, 82, .16);
	padding: .35rem 0;
	min-width: 210px;
	overflow: hidden;
}

.site-header .sub-menu li,
.header-navigation ul ul li {
	border: 0;
}

.site-header .sub-menu li a,
.header-navigation ul ul li a,
.primary-menu-container ul ul li a {
	display: block;
	padding: .62rem 1.1rem;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--jb-primer);
	background: transparent;
	transition: background-color .14s var(--jb-lentur), color .14s var(--jb-lentur);
}

.site-header .sub-menu li a:hover,
.header-navigation ul ul li a:hover,
.site-header .sub-menu li.current-menu-item > a {
	background: rgba(15, 42, 82, .06);
	color: var(--jb-primer);
}

/* Garis emas tumbuh milik menu utama tidak diwariskan ke submenu. */
.site-header .sub-menu li a::after,
.header-navigation ul ul li a::after {
	content: none;
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.site-header .sub-menu li a { transition: none; }
}

/* Bila kotak cari dan tombol akun berada dalam satu elemen HTML. */
.site-header .header-html .header-html-inner {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: nowrap;
}

/* Kadence menggarisbawahi tautan di elemen HTML header. */
.site-header a.jb-akun__tombol,
.site-header .header-html a.jb-akun__tombol {
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.site-header a.jb-akun__tombol--garis { border-color: var(--jb-primer); }
.site-header a.jb-akun__tombol--isi { border-color: var(--jb-aksen); }
.site-header a.jb-akun__tombol:hover { text-decoration: none; }

/* Rampingkan tombol akun supaya menu tetap satu baris. */
.site-header a.jb-akun__tombol { padding: 7px 14px; font-size: .85rem; }

/* Logo drawer kembali ke baris pertama, sejajar tombol X. */
#mobile-drawer .mobile-navigation ul li.jb-menu-logo {
	padding-top: 0;
	margin-top: 0;
}

/* ------------------------------------------------------------
 * KOTAK CARI DI DRAWER MOBILE — satu-satunya tempat pengaturannya
 *
 * Kotak duduk di bagian bawah drawer, melebar penuh. Tidak perlu
 * ruang untuk tombol X karena tombol itu ada di baris paling atas.
 * ------------------------------------------------------------ */

#mobile-drawer .jb-cari-kotak {
	display: flex;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

#mobile-drawer .jb-cari-kotak__ikon {
	display: flex;
	left: 15px;
}

#mobile-drawer .jb-cari-kotak__input {
	padding: 13px 56px 13px 44px;
	font-size: 1rem;
	border-radius: 10px;
	background: #f7f8fb;
	border-color: #dbe1ea;
}

#mobile-drawer .jb-cari-kotak__tombol {
	right: 5px;
	width: 38px;
	height: 38px;
}

/* Beri jarak dan garis pemisah dari tagline di atasnya. */
#mobile-drawer .header-html {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--jb-garis);
}

/* ------------------------------------------------------------
 * FOOTER — rapatkan di layar kecil
 * Kadence menyisakan ruang bawaan yang berlebihan di mobile.
 * ------------------------------------------------------------ */

@media (max-width: 767px) {

	.site-footer .site-middle-footer-inner-wrap,
	.site-footer .site-top-footer-inner-wrap {
		padding-top: 1.75rem;
		padding-bottom: 1.5rem;
		row-gap: 1.25rem;
	}

	.site-footer .site-bottom-footer-inner-wrap {
		padding-top: 0.9rem;
		padding-bottom: 0.9rem;
		min-height: 0;
	}

	/* Blok merek jadi satu baris rapat. */
	.jb-foot__merek { gap: 0.75rem; }
	.jb-foot__logo { padding: 6px 8px; }
	.jb-foot__logo img { max-width: 104px; max-height: 32px; }
	.jb-foot__logo--polos { padding: 0; }
	.jb-foot__logo--polos img { max-width: 148px; max-height: 58px; }
	.site-footer .jb-foot__tagline { font-size: 0.8rem; }
	.site-footer .jb-foot__tiga { font-size: 0.6rem; letter-spacing: 0.14em; }

	/* Navigasi footer merapat. */
	.jb-foot__nav { gap: 0.25rem 1.1rem; }
	.site-footer .jb-foot__nav a { font-size: 0.88rem; }

	.jb-foot__kolom { margin-bottom: 0; }
}