/* ============================================================================
   NAVBAR JN ENGINEERING — komponen berdiri sendiri
   Dibuat 23 September 2026.

   Kenapa berkas terpisah: keempat halaman situs memuat CSS yang berbeda-beda
   (index -> style-page.css, product -> product.css, offer -> style.css,
   artikel -> style.css + artikel.css). Menaruh aturan navbar di salah satunya
   berarti tiga halaman lain tidak kebagian. Berkas ini dimuat keempatnya.

   Nilai warna DIAMBIL DARI TEMA YANG SUDAH ADA, bukan warna baru:
     #212529  latar navbar solid   (sama dengan .solid-navbar .header-style)
     #dfa667  garis aksen nav      (sama dengan .header-menu li a:after)
     #11161d  panel dropdown

   Saat pindah ke WordPress, berkas ini + blok markup-nya pindah sekali ke
   header.php. Tidak ada yang perlu ditulis ulang.
   ============================================================================ */

.jn-nav, .jn-nav * { box-sizing: border-box; }

.jn-nav {
	position: relative;
	z-index: 500;
	background: #212529;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Dipakai HANYA di beranda: melayang di atas foto hero, lalu memadat saat digulir.
   Halaman lain berlatar terang, jadi navbar-nya solid sejak awal. */
.jn-nav--overlay {
	position: fixed;
	top: 0; left: 0; right: 0;
	background: transparent;
}

.jn-nav--overlay.is-solid {
	background: #212529;
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.jn-nav-inner {
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 60px;
	height: 92px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.jn-nav-brand { flex-shrink: 0; display: block; line-height: 0; }
.jn-nav-brand img { display: block; width: 230px; height: auto; }

.jn-nav-menu {
	display: flex;
	align-items: center;
	gap: 34px;
}

.jn-nav-menu > a,
.jn-nav-sub > summary {
	position: relative;
	display: block;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #ffffff;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.jn-nav-menu > a:hover,
.jn-nav-sub > summary:hover { color: #ffffff; }

/* garis emas yang menskala dari nol — perilaku tema aslinya, dipertahankan */
.jn-nav-menu > a:after,
.jn-nav-sub > summary:after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 2px;
	background: #dfa667;
	transform: scale(0);
	transition: transform 0.4s;
}

.jn-nav-menu > a:hover:after,
.jn-nav-menu > a[aria-current="page"]:after,
.jn-nav-sub:hover > summary:after,
.jn-nav-sub[open] > summary:after { transform: scale(1); }

/* ---- dropdown: pakai <details> supaya tetap jalan tanpa JavaScript ---- */
.jn-nav-sub { position: relative; }
.jn-nav-sub > summary { list-style: none; }
.jn-nav-sub > summary::-webkit-details-marker { display: none; }

.jn-nav-caret {
	display: inline-block;
	width: 0; height: 0;
	margin-left: 7px;
	vertical-align: 2px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.7;
	transition: transform 0.25s, opacity 0.25s;
}

.jn-nav-sub[open] .jn-nav-caret { opacity: 1; transform: rotate(180deg); }

.jn-nav-panel {
	position: absolute;
	left: 0; top: calc(100% + 14px);
	width: 212px;
	padding: 8px 0;
	background: #11161d;
	border: 1px solid rgba(223, 166, 103, 0.28);
	border-radius: 4px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

/* jembatan tak terlihat: tanpa ini panel menutup saat kursor melintasi celah */
.jn-nav-sub:after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 100%;
	height: 16px;
}

.jn-nav-panel a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 500;
	color: #e6ebf2;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s, background 0.2s;
}

.jn-nav-panel a:hover { color: #dfa667; background: rgba(223, 166, 103, 0.08); }

/* ---- tombol hamburger ---- */
.jn-nav-toggle {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.jn-nav-toggle span {
	display: block;
	width: 24px; height: 2px;
	margin: 5px auto;
	background: #ffffff;
	transition: transform 0.25s, opacity 0.25s;
}

.jn-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jn-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.jn-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- mobile ---- */
@media (max-width: 991px) {
	.jn-nav-inner { height: 74px; padding: 0 20px; }
	.jn-nav-brand img { width: 178px; }
	.jn-nav-toggle { display: block; }

	.jn-nav-menu {
		display: none;
		position: absolute;
		left: 0; right: 0; top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 20px 20px;
		background: #212529;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: 0 18px 30px rgba(0, 0, 0, 0.4);
	}

	.jn-nav-menu.is-open { display: flex; }

	.jn-nav-menu > a,
	.jn-nav-sub > summary { padding: 13px 0; }

	.jn-nav-menu > a:after,
	.jn-nav-sub > summary:after { display: none; }

	/* di layar kecil panel mengalir ke bawah, bukan melayang */
	.jn-nav-panel {
		position: static;
		width: auto;
		margin: 0 0 6px;
		box-shadow: none;
	}

	.jn-nav-sub:after { display: none; }
}

/* ---- indikator fokus keyboard ----
   Ditambahkan 23 Sep 2026. Versi pertama berkas ini tidak punya satu pun aturan
   :focus — artinya pengguna keyboard tidak bisa melihat sedang di mana. Acuan
   styling (04 - ACUAN §6) menyebut "penghilangan outline tanpa indikator fokus
   pengganti" sebagai masalah warisan yang tidak boleh disalin. Ini menutupnya.
   Memakai :focus-visible, jadi tidak muncul saat diklik mouse. */
.jn-nav a:focus-visible,
.jn-nav summary:focus-visible,
.jn-nav button:focus-visible {
	outline: 2px solid #dfa667;
	outline-offset: 3px;
	border-radius: 2px;
}

/* Jangkar (#about, #contact, dst) tidak boleh tertutup navbar yang melayang.
   Diambil dari navigation.css milik Codex -- satu-satunya aturan di berkas itu
   yang bukan soal header, jadi ikut dipindahkan ke sini. */
html { scroll-padding-top: 100px; }