/**
 * Header Modern untuk OJS 3.5 (v1.1)
 * Latar #0038A3 + motif batik kawung, logo transparan, mode malam.
 * Warna dasar: --hm-primary (diatur lewat atribut style pada .hm-root).
 */

.hm-root {
	--hm-primary: #0038A3;
	--hm-p-600: color-mix(in srgb, var(--hm-primary) 86%, #000);
	--hm-p-700: color-mix(in srgb, var(--hm-primary) 68%, #000);
	--hm-p-900: color-mix(in srgb, var(--hm-primary) 38%, #000);
	--hm-gold: #F2BE5C;
	--hm-gold-600: #E2A83A;
	--hm-hdr: var(--hm-primary);
	--hm-ink: #0f1a33;
	--hm-muted: #5b6784;
	--hm-panel: #fff;
	--hm-tint: color-mix(in srgb, var(--hm-primary) 8%, #fff);
	--hm-line: color-mix(in srgb, var(--hm-primary) 12%, #e6e9f0);
	--hm-bar-h: 108px;
	--hm-logo-h: 76px;
	--hm-batik: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3E%3Cg%20fill='none'%20stroke='white'%20stroke-opacity='.17'%20stroke-width='1.3'%3E%3Cellipse%20cx='32'%20cy='16'%20rx='8'%20ry='16'/%3E%3Cellipse%20cx='32'%20cy='48'%20rx='8'%20ry='16'/%3E%3Cellipse%20cx='16'%20cy='32'%20rx='16'%20ry='8'/%3E%3Cellipse%20cx='48'%20cy='32'%20rx='16'%20ry='8'/%3E%3C/g%3E%3Ccircle%20cx='32'%20cy='32'%20r='3'%20fill='%23F2BE5C'%20fill-opacity='.5'/%3E%3Cg%20fill='white'%20fill-opacity='.17'%3E%3Ccircle%20cx='0'%20cy='0'%20r='2.5'/%3E%3Ccircle%20cx='64'%20cy='0'%20r='2.5'/%3E%3Ccircle%20cx='0'%20cy='64'%20r='2.5'/%3E%3Ccircle%20cx='64'%20cy='64'%20r='2.5'/%3E%3C/g%3E%3C/svg%3E");
	--hm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	display: contents; /* agar header sticky mengacu ke <body> */
	font-family: var(--hm-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--hm-ink);
}

/* Mode malam */
html.hm-dark .hm-root {
	--hm-hdr: color-mix(in srgb, var(--hm-primary) 44%, #050a18);
	--hm-p-900: color-mix(in srgb, var(--hm-primary) 20%, #02050d);
	--hm-ink: #e8edf8;
	--hm-muted: #9aa7c4;
	--hm-panel: #111a31;
	--hm-tint: #1b2746;
	--hm-line: #26345c;
}

.hm-root *, .hm-root *::before, .hm-root *::after { box-sizing: border-box; }
.hm-root a { text-decoration: none; }
.hm-root ul { margin: 0; padding: 0; list-style: none; }
.hm-root [hidden] { display: none !important; }

.hm-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* ---------- Topbar ---------- */
.hm-topbar { background: var(--hm-p-900); color: rgba(255, 255, 255, .82); font-size: 12.5px; }
.hm-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.hm-topbar__left, .hm-topbar__right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hm-topbar__text { font-weight: 600; color: #fff; }
.hm-chip { padding: 1px 9px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-variant-numeric: tabular-nums; }
.hm-topbar a, .hm-user__name { color: rgba(255, 255, 255, .82); transition: color .2s; }
.hm-topbar a:hover, .hm-topbar a:focus-visible { color: #fff; }
.hm-lang, .hm-user { display: flex; align-items: center; gap: 4px; }
.hm-lang a, .hm-user a, .hm-user__name { display: inline-block; padding: 4px 9px; border-radius: 8px; }
.hm-lang a.is-active { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }
.hm-lang { padding-right: 10px; margin-right: 2px; border-right: 1px solid rgba(255, 255, 255, .18); }
.hm-user a:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Header utama ---------- */
.hm-header {
	position: relative;
	z-index: 1000;
	color: #fff;
	background-color: var(--hm-hdr);
	border-bottom: 3px solid var(--hm-gold);
	transition: box-shadow .25s ease, background-color .3s ease;
}
/* Motif batik kawung; sisi kiri dibuat lebih tenang agar logo tetap bersih */
.hm-has-batik .hm-header {
	background-image:
		linear-gradient(98deg,
			color-mix(in srgb, var(--hm-hdr) 90%, transparent) 0%,
			color-mix(in srgb, var(--hm-hdr) 45%, transparent) 30%,
			transparent 62%),
		var(--hm-batik);
	background-size: auto, 64px 64px;
	background-position: 0 0, 0 0;
}
.hm-root[data-sticky="1"] .hm-header { position: sticky; top: 0; }
.hm-header.is-stuck { box-shadow: 0 12px 30px -12px rgba(0, 10, 40, .55); }

.hm-bar { display: flex; align-items: center; gap: 30px; min-height: var(--hm-bar-h); transition: min-height .3s ease; }
.hm-header.is-stuck .hm-bar { min-height: 78px; }

/* Brand: logo transparan langsung di atas latar biru */
.hm-brand { display: inline-flex; align-items: center; gap: 14px; color: #fff; flex-shrink: 0; max-width: 380px; }
.hm-brand__logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: var(--hm-logo-h);
	background: none;
	filter: drop-shadow(0 2px 8px rgba(0, 12, 50, .35));
	transition: max-height .3s ease, height .3s ease;
}
.hm-header.is-stuck .hm-brand__logo { max-height: 54px; }
.hm-brand__mark {
	display: inline-grid;
	place-items: center;
	min-width: 60px;
	height: 60px;
	padding: 0 10px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .12);
	border: 1.5px solid rgba(255, 255, 255, .55);
	color: #fff;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: .02em;
}
.hm-brand__name {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Navigasi ---------- */
.hm-nav { flex: 1; display: flex; justify-content: flex-end; min-width: 0; }
.hm-root .hm-menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; flex-wrap: nowrap; }
.hm-root .hm-menu > li { position: relative; display: flex; align-items: center; margin: 0; padding: 0; float: none; list-style: none; }
.hm-root .hm-menu a {
	position: relative;
	display: block;
	padding: 11px 13px;
	border-radius: 10px;
	background: none;
	border: 0;
	color: #fff;
	font-weight: 600;
	font-size: 14.5px;
	white-space: nowrap;
	transition: color .2s, background-color .2s;
}
.hm-root .hm-menu > li > a::after {
	content: "";
	position: absolute;
	left: 13px; right: 13px; bottom: 5px;
	height: 2px;
	border-radius: 2px;
	background: var(--hm-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.hm-root .hm-menu > li:hover > a,
.hm-root .hm-menu > li:focus-within > a,
.hm-root .hm-menu > li.is-open > a { background: rgba(255, 255, 255, .14); color: #fff; }
.hm-root .hm-menu > li:hover > a::after,
.hm-root .hm-menu > li:focus-within > a::after,
.hm-root .hm-menu > li > a[aria-current]::after,
.hm-root .hm-menu > li.current > a::after { transform: scaleX(1); }

/* Tombol panah submenu (dibuat oleh JS) */
.hm-subtoggle {
	display: inline-grid;
	place-items: center;
	width: 26px; height: 26px;
	margin-left: -10px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: rgba(255, 255, 255, .8);
	cursor: pointer;
	transition: color .2s, background-color .2s;
}
.hm-subtoggle svg { transition: transform .25s ease; }
.hm-menu li:hover > .hm-subtoggle, .hm-menu li.is-open > .hm-subtoggle { color: #fff; }
.hm-menu li.is-open > .hm-subtoggle svg { transform: rotate(180deg); }
.hm-subtoggle:hover { background: rgba(255, 255, 255, .16); }

/* Dropdown */
.hm-root .hm-menu ul {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 20;
	display: block;
	width: auto;
	min-width: 240px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--hm-panel);
	border: 1px solid var(--hm-line);
	border-top: 3px solid var(--hm-gold);
	border-radius: 14px;
	box-shadow: 0 24px 48px -16px rgba(0, 12, 50, .5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.hm-root .hm-menu ul::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.hm-root .hm-menu li:hover > ul,
.hm-root .hm-menu li:focus-within > ul,
.hm-root .hm-menu li.is-open > ul { opacity: 1; visibility: visible; transform: none; }
.hm-root .hm-menu ul li { display: block; margin: 0; padding: 0; float: none; }
.hm-root .hm-menu ul a { padding: 10px 12px; font-weight: 500; font-size: 14px; white-space: normal; border-radius: 9px; color: var(--hm-ink); }
.hm-root .hm-menu ul a:hover, .hm-root .hm-menu ul a:focus-visible { background: var(--hm-tint); color: var(--hm-primary); }
html.hm-dark .hm-root .hm-menu ul a:hover, html.hm-dark .hm-root .hm-menu ul a:focus-visible { color: var(--hm-gold); }
.hm-root .hm-menu ul ul { top: -9px; left: calc(100% + 6px); }
.hm-root .hm-menu ul li.hm-has-sub { display: flex; flex-wrap: wrap; align-items: center; position: relative; }
.hm-root .hm-menu ul li.hm-has-sub > a { flex: 1; }
.hm-root .hm-menu ul .hm-subtoggle { color: var(--hm-muted); }

/* ---------- Aksi ---------- */
.hm-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.hm-iconbtn {
	display: inline-grid;
	place-items: center;
	width: 44px; height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: 12px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	cursor: pointer;
	transition: color .2s, border-color .2s, background-color .2s, transform .2s;
}
.hm-iconbtn:hover, .hm-iconbtn[aria-expanded="true"], .hm-iconbtn[aria-pressed="true"] {
	background: rgba(255, 255, 255, .22);
	border-color: #fff;
}

/* Tombol mode malam: bulan (terang) <-> matahari (gelap) */
.hm-ico-sun { display: none; }
html.hm-dark .hm-ico-sun { display: block; color: var(--hm-gold); }
html.hm-dark .hm-ico-moon { display: none; }

.hm-root .hm-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 22px;
	border-radius: 12px;
	background: linear-gradient(145deg, var(--hm-gold), var(--hm-gold-600));
	color: #14224a;
	font-weight: 800;
	font-size: 14.5px;
	white-space: nowrap;
	box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .55);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s;
}
.hm-root .hm-cta:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .6); color: #14224a; }
.hm-cta--mobile { display: none !important; }

.hm-burger { display: none; }
.hm-burger__close { display: none; }
.hm-header.is-open .hm-burger__open { display: none; }
.hm-header.is-open .hm-burger__close { display: block; }

/* ---------- Pencarian ---------- */
.hm-search { border-top: 1px solid var(--hm-line); background: var(--hm-panel); color: var(--hm-ink); animation: hm-drop .22s ease; }
.hm-search__form { display: flex; align-items: center; gap: 12px; padding-top: 16px; padding-bottom: 16px; color: var(--hm-muted); }
.hm-search__form input[type="search"] {
	flex: 1;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--hm-line);
	border-radius: 12px;
	background: var(--hm-tint);
	color: var(--hm-ink);
	font: inherit;
	font-size: 15.5px;
	box-shadow: none;
}
.hm-search__form input[type="search"]:focus { outline: 0; border-color: var(--hm-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hm-primary) 22%, transparent); }
.hm-search__submit {
	height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 12px;
	background: var(--hm-primary);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s;
}
.hm-search__submit:hover { background: var(--hm-p-700); }
@keyframes hm-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Fokus keyboard ---------- */
.hm-root a:focus-visible, .hm-root button:focus-visible { outline: 3px solid var(--hm-gold); outline-offset: 2px; }

/* ---------- Tablet & mobile ---------- */
@media (max-width: 1099px) {
	.hm-root .hm-menu > li > a { padding: 10px 10px; font-size: 14px; }
	.hm-bar { gap: 18px; }
}

@media (max-width: 991px) {
	.hm-root { --hm-bar-h: 84px; --hm-logo-h: 56px; }
	.hm-header.is-stuck .hm-bar { min-height: 68px; }
	.hm-header.is-stuck .hm-brand__logo { max-height: 44px; }
	.hm-burger { display: inline-grid; }
	.hm-cta--desktop { display: none !important; }
	.hm-actions { margin-left: auto; }
	.hm-topbar__left { display: none; }
	.hm-topbar__inner { justify-content: flex-end; }

	.hm-nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		display: block;
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		background: var(--hm-panel);
		border-bottom: 3px solid var(--hm-gold);
		box-shadow: 0 24px 40px -20px rgba(0, 12, 50, .55);
		transition: max-height .35s ease, visibility .35s;
	}
	.hm-header.is-open .hm-nav { max-height: calc(100vh - var(--hm-bar-h) - 40px); overflow-y: auto; visibility: visible; }

	.hm-root .hm-menu { flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 16px 8px; }
	.hm-root .hm-menu > li, .hm-root .hm-menu li.hm-has-sub { display: flex; flex-wrap: wrap; align-items: center; }
	.hm-root .hm-menu a, .hm-root .hm-menu > li > a { flex: 1; color: var(--hm-ink); padding: 13px 12px; font-size: 15.5px; white-space: normal; }
	.hm-root .hm-menu > li > a::after { display: none; }
	.hm-root .hm-menu > li:hover > a { background: none; color: var(--hm-ink); }
	.hm-root .hm-menu > li.is-open > a, .hm-root .hm-menu > li > a:active { background: var(--hm-tint); color: var(--hm-primary); }
	html.hm-dark .hm-root .hm-menu > li.is-open > a { color: var(--hm-gold); }
	.hm-subtoggle, .hm-menu li:hover > .hm-subtoggle { width: 40px; height: 40px; margin: 0; color: var(--hm-muted); }

	.hm-root .hm-menu ul,
	.hm-root .hm-menu ul ul {
		position: static;
		flex-basis: 100%;
		min-width: 0;
		max-height: 0;
		overflow: hidden;
		padding: 0 0 0 14px;
		margin: 0 0 0 12px;
		border: 0;
		border-left: 2px solid var(--hm-line);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: max-height .3s ease;
	}
	.hm-root .hm-menu ul::before { display: none; }
	.hm-root .hm-menu li:hover > ul, .hm-root .hm-menu li:focus-within > ul { max-height: 0; }
	.hm-root .hm-menu li.is-open > ul, .hm-root .hm-menu li.is-open:hover > ul { max-height: 800px; padding-top: 4px; padding-bottom: 4px; }

	.hm-cta--mobile { display: flex !important; margin: 8px 16px 18px; height: 50px; }
}

@media (max-width: 560px) {
	.hm-container { padding: 0 16px; }
	.hm-brand__name { font-size: 15px; }
	.hm-brand__mark { min-width: 46px; height: 46px; font-size: 14px; border-radius: 13px; }
	.hm-search__submit { display: none; }
	.hm-lang { padding-right: 6px; }
	.hm-actions { gap: 8px; }
	.hm-iconbtn { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
	.hm-root *, .hm-root *::before, .hm-root *::after { transition: none !important; animation: none !important; }
}

/* =====================================================================
 * Mode malam untuk halaman (disetel untuk tema Default OJS; tambahkan
 * selector tema lain di sini bila perlu).
 * ===================================================================== */
html.hm-dark { color-scheme: dark; }
html.hm-dark body,
html.hm-dark .pkp_structure_page,
html.hm-dark .pkp_structure_content,
html.hm-dark .pkp_structure_main,
html.hm-dark .pkp_structure_sidebar { background-color: #0b1224; color: #d3dbee; }
html.hm-dark .pkp_structure_footer_wrapper,
html.hm-dark .pkp_structure_footer { background-color: #070d1c; color: #aab6d3; }
html.hm-dark .pkp_structure_page h1, html.hm-dark .pkp_structure_page h2,
html.hm-dark .pkp_structure_page h3, html.hm-dark .pkp_structure_page h4,
html.hm-dark .pkp_structure_page h5, html.hm-dark .pkp_structure_page h6,
html.hm-dark .pkp_structure_page .title, html.hm-dark .pkp_structure_page .label { color: #f1f5ff; }
html.hm-dark .pkp_structure_page a:not(.cmp_button):not(.obj_galley_link):not(.pkp_button) { color: #8fb2ff; }
html.hm-dark .pkp_structure_page a:not(.cmp_button):not(.obj_galley_link):not(.pkp_button):hover { color: var(--hm-gold, #F2BE5C); }
html.hm-dark .pkp_structure_page .obj_article_summary,
html.hm-dark .pkp_structure_page .obj_issue_summary,
html.hm-dark .pkp_structure_page .pkp_block,
html.hm-dark .pkp_structure_page .cmp_breadcrumbs,
html.hm-dark .pkp_structure_page table, html.hm-dark .pkp_structure_page th,
html.hm-dark .pkp_structure_page td, html.hm-dark .pkp_structure_page hr { border-color: #26345c; }
html.hm-dark .pkp_structure_page input, html.hm-dark .pkp_structure_page select,
html.hm-dark .pkp_structure_page textarea { background-color: #131c33; color: #e8edf8; border-color: #2d3b66; }
html.hm-dark .pkp_structure_page .page, html.hm-dark .pkp_structure_page .item,
html.hm-dark .pkp_structure_page .cmp_notification { color: #d3dbee; }