/*
 * Modul Panduan v1.4.0 — halaman Panduan Pengadaan, artikel, dan bantuan TKDN
 * di halaman produk. Semua kelas berawalan pn- dan memakai token sorak.css.
 */

.pn {
	padding-bottom: 48px;
}

.pn-label {
	display: inline-block;
	font: 600 11.5px/1 var(--semi);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--biru-teks);
}

.pn-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font: 500 12.5px/1.3 var(--semi);
	color: var(--tinta-3);
}

/* ---------- arsip: kepala ---------- */

.pn-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 28px;
	align-items: end;
	padding: 14px 0 22px;
	border-bottom: 1px solid var(--garis);
}

.pn-hero__judul {
	font: 700 clamp(32px, 4.5vw, 44px)/1 var(--cond);
	color: var(--navy);
	margin: 8px 0 12px;
	text-wrap: balance;
}

.pn-hero__teks {
	margin: 0;
	color: var(--tinta-2);
	max-width: 62ch;
}

.pn-fakta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--garis);
	border: 1px solid var(--garis);
	border-radius: var(--radius);
	margin: 0;
	overflow: hidden;
}

.pn-fakta > div {
	background: var(--permukaan);
	padding: 12px 14px;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
}

.pn-fakta dd {
	margin: 0;
	font: 700 26px/1 var(--cond);
	color: var(--navy);
	font-variant-numeric: tabular-nums;
}

.pn-fakta dt {
	font: 500 12px/1.3 var(--semi);
	color: var(--tinta-2);
	margin-top: 4px;
}

/* ---------- arsip: artikel unggulan ---------- */

.pn-mulai {
	margin-top: 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	background: var(--permukaan);
	border: 1px solid var(--garis);
	border-radius: var(--radius);
	overflow: hidden;
}

.pn-mulai__gbr {
	background: #fff;
	border-right: 1px solid var(--garis-halus);
	display: grid;
	place-items: center;
	min-height: 220px;
}

.pn-mulai__gbr img {
	width: 100%;
	height: 100%;
	max-height: 360px;
	object-fit: contain;
}

.pn-mulai__isi {
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pn-mulai__isi p {
	margin: 0;
	color: var(--tinta-2);
}

.pn-pita {
	align-self: flex-start;
	background: var(--oranye);
	color: #fff;
	font: 700 11.5px/1 var(--semi);
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 8px;
	border-radius: 2px;
}

.pn-mulai__judul {
	font: 700 clamp(24px, 3vw, 30px)/1.05 var(--cond);
	margin: 0;
	text-wrap: balance;
}

.pn-mulai__judul a {
	color: var(--tinta);
	text-decoration: none;
}

.pn-mulai__judul a:hover {
	color: var(--navy);
	text-decoration: underline;
}

/* ---------- arsip: saringan & grup ---------- */

.pn-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 28px 0 4px;
}

.pn-filter a {
	border: 1px solid var(--garis);
	background: var(--permukaan);
	color: var(--tinta-2);
	border-radius: 999px;
	padding: 6px 14px;
	font: 600 13px/1.2 var(--semi);
	text-decoration: none;
}

.pn-filter a:hover {
	border-color: var(--navy);
	color: var(--navy);
}

.pn-filter a[aria-current="page"] {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.pn-filter small {
	font-size: inherit;
	font-weight: 500;
	opacity: .75;
	margin-left: 3px;
	font-variant-numeric: tabular-nums;
}

.pn-grup {
	margin-top: 26px;
}

.pn-grup__judul {
	font: 700 22px/1.1 var(--cond);
	color: var(--navy);
	margin: 0 0 4px;
}

.pn-grup__teks {
	margin: 0 0 14px;
	color: var(--tinta-2);
	font-size: 14px;
}

.pn-grup__semua {
	margin: 12px 0 0;
	font: 600 14px/1.3 var(--semi);
}

.pn-grup__semua a {
	color: var(--biru-teks);
}

/* ---------- kartu artikel ---------- */

.pn-kisi {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.pn-kisi--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pn-kartu {
	position: relative;
	background: var(--permukaan);
	border: 1px solid var(--garis);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .15s, box-shadow .15s;
}

.pn-kartu:hover {
	border-color: var(--biru);
	box-shadow: 0 6px 18px rgba(22, 35, 58, .08);
}

.pn-kartu__gbr {
	background: #fff;
	border-bottom: 1px solid var(--garis-halus);
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.pn-kartu__gbr img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pn-kartu__kosong {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background: var(--permukaan-2);
	color: var(--navy);
	font: 700 20px/1 var(--cond);
}

.pn-kartu__isi {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.pn-kartu__judul {
	margin: 0;
	font: 700 19px/1.15 var(--cond);
	text-wrap: balance;
}

.pn-kartu__tautan {
	color: var(--tinta);
	text-decoration: none;
}

.pn-kartu__tautan::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pn-kartu__tautan:focus-visible {
	outline: none;
}

.pn-kartu:focus-within {
	outline: 2px solid var(--oranye);
	outline-offset: 2px;
}

.pn-kartu__ringkas {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--tinta-2);
}

.pn-kartu .pn-meta {
	margin-top: auto;
}

/* ---------- ajakan penawaran ---------- */

.pn-ajakan {
	margin-top: 34px;
	background: var(--navy);
	color: #fff;
	border-radius: var(--radius);
	padding: 22px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
}

.pn-ajakan > div {
	flex: 1 1 320px;
	min-width: 0;
}

.pn-ajakan__judul {
	margin: 0;
	font: 700 24px/1.1 var(--cond);
	color: #fff;
}

.pn-ajakan p {
	margin: 4px 0 0;
	color: #C9D6EE;
	font-size: 14px;
}

/* ---------- artikel ---------- */

.pn-artikel__kepala {
	max-width: 780px;
	padding-top: 12px;
}

.pn-artikel__judul {
	font: 700 clamp(30px, 4.5vw, 42px)/1.03 var(--cond);
	color: var(--navy);
	margin: 8px 0 12px;
	text-wrap: balance;
}

.pn-oleh {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font: 500 13px/1.3 var(--semi);
	color: var(--tinta-2);
}

.pn-oleh b {
	color: var(--tinta);
}

.pn-oleh__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	display: inline-grid;
	place-items: center;
	font: 700 12px/1 var(--cond);
}

.pn-oleh__cek {
	color: var(--hijau);
	font-weight: 600;
}

.pn-artikel__tata {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 32px;
	margin-top: 20px;
	align-items: start;
}

.pn-artikel__gbr {
	margin: 0 0 20px;
	background: #fff;
	border: 1px solid var(--garis);
	border-radius: var(--radius);
	overflow: hidden;
}

.pn-artikel__gbr img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 460px;
	object-fit: contain;
}

.pn-prosa {
	font-size: 16.5px;
	line-height: 1.7;
	max-width: 70ch;
}

.pn-prosa h2 {
	scroll-margin-top: 16px;
}

.pn-prosa a {
	color: var(--biru-teks);
}

.pn-prosa .wp-block-table {
	margin: 6px 0 18px;
	overflow-x: auto;
	border: 1px solid var(--garis);
	border-radius: var(--radius);
	background: var(--permukaan);
}

.pn-prosa table {
	border-collapse: collapse;
	width: 100%;
	font-size: 14.5px;
	line-height: 1.45;
}

.pn-prosa th,
.pn-prosa td {
	text-align: left;
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--garis-halus);
	vertical-align: top;
}

.pn-prosa th {
	font: 600 12.5px/1.3 var(--semi);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--tinta-2);
	background: var(--permukaan-2);
}

.pn-prosa tr:last-child td {
	border-bottom: 0;
}

.pn-subjudul {
	font: 700 24px/1.1 var(--cond);
	color: var(--navy);
	margin: 0 0 14px;
}

.pn-disebut {
	margin-top: 30px;
}

.pn-samping {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 16px;
}

.pn-kotak {
	background: var(--permukaan);
	border: 1px solid var(--garis);
	border-radius: var(--radius);
	padding: 16px;
}

.pn-kotak__judul {
	margin: 0 0 10px;
	font: 600 12px/1.2 var(--semi);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tinta-2);
}

.pn-kotak--gelap {
	background: var(--navy);
	border-color: var(--navy);
}

.pn-kotak--gelap .pn-kotak__judul {
	color: #A9C0E8;
}

.pn-kotak--gelap p {
	margin: 0 0 12px;
	font-size: 14px;
	color: #DCE6F7;
}

.pn-kotak--gelap .tombol {
	width: 100%;
	white-space: normal;
	text-align: center;
}

.pn-toc {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
	font: 500 14px/1.35 var(--semi);
}

.pn-toc a {
	display: block;
	padding: 5px 0 5px 10px;
	border-left: 2px solid var(--garis-halus);
	color: var(--tinta-2);
	text-decoration: none;
}

.pn-toc a:hover {
	border-color: var(--oranye);
	color: var(--tinta);
}

.pn-toc-hp {
	display: none;
	margin-top: 14px;
}

.pn-toc-hp summary {
	font: 600 14px/1.2 var(--semi);
	cursor: pointer;
	padding: 10px 12px;
	background: var(--permukaan);
	border: 1px solid var(--garis);
	border-radius: var(--radius);
}

.pn-toc-hp .pn-toc {
	padding: 8px 12px;
	background: var(--permukaan);
	border: 1px solid var(--garis);
	border-top: 0;
}

.pn-terkait {
	margin-top: 36px;
	border-top: 1px solid var(--garis);
	padding-top: 22px;
}

/* ---------- meter TKDN (artikel & produk) ---------- */

.pn-produk-kisi {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.pn-produk {
	background: var(--permukaan);
	border: 1px solid var(--garis);
	border-radius: var(--radius);
	padding: 12px 14px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--tinta);
}

.pn-produk:hover {
	border-color: var(--biru);
}

.pn-produk__judul {
	font: 600 15px/1.25 var(--semi);
}

.pn-meter {
	position: relative;
	height: 10px;
	background: var(--permukaan-2);
	border-radius: 2px;
	margin-top: 14px;
}

.pn-meter i {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background: var(--navy);
	border-radius: 2px 0 0 2px;
}

.pn-meter .pn-meter__bmp {
	background: var(--biru);
	border-radius: 0;
}

.pn-meter__garis {
	position: absolute;
	top: -14px;
	bottom: -3px;
	width: 0;
	border-left: 1.5px dashed var(--tinta-3);
	text-decoration: none;
}

.pn-meter__garis::after {
	content: attr(data-l);
	position: absolute;
	top: -2px;
	left: 3px;
	font: 600 10px/1 var(--semi);
	color: var(--tinta-3);
}

.pn-angka {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font: 600 12.5px/1.2 var(--semi);
	color: var(--tinta-2);
	font-variant-numeric: tabular-nums;
}

.pn-angka b {
	color: var(--navy);
}

.pn-status {
	align-self: flex-start;
	display: inline-block;
	font: 600 12px/1.3 var(--semi);
	color: var(--hijau);
	background: #E3F2EA;
	padding: 4px 7px;
	border-radius: 2px;
}

.pn-status--turun {
	color: #8A4B00;
	background: #FDEBD0;
}

.pn-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font: 500 12px/1.3 var(--semi);
	color: var(--tinta-3);
	margin: 10px 0 0;
}

.pn-legenda span:nth-child(-n+2)::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	margin-right: 5px;
	vertical-align: -1px;
	background: var(--navy);
}

.pn-legenda span:nth-child(2)::before {
	background: var(--biru);
}

/* kotak Komponen Dalam Negeri di halaman produk */
.pn-tkdn {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}

.pn-bantu {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--permukaan-2);
	border-radius: var(--radius);
	padding: 10px 12px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--tinta-2);
	text-decoration: none;
}

.pn-bantu b {
	display: block;
	color: var(--biru-teks);
	font: 600 14px/1.3 var(--semi);
}

.pn-bantu:hover b {
	text-decoration: underline;
}

.pn-bantu__ik {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--biru-teks);
	color: var(--biru-teks);
	display: grid;
	place-items: center;
	font: 700 13px/1 var(--sans);
}

/* ---------- lebar sempit ---------- */

@media (max-width: 1000px) {
	.pn-kisi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pn-artikel__tata {
		grid-template-columns: minmax(0, 1fr) 220px;
	}
}

@media (max-width: 760px) {
	.pn-hero,
	.pn-mulai,
	.pn-artikel__tata {
		grid-template-columns: minmax(0, 1fr);
	}
	.pn-mulai__gbr {
		border-right: 0;
		border-bottom: 1px solid var(--garis-halus);
		min-height: 0;
	}
	.pn-mulai__isi {
		padding: 16px;
	}
	.pn-kisi,
	.pn-kisi--2,
	.pn-produk-kisi {
		grid-template-columns: minmax(0, 1fr);
	}
	.pn-kartu__gbr {
		aspect-ratio: 16 / 8;
	}
	.pn-samping {
		position: static;
	}
	.pn-samping .pn-kotak:not(.pn-kotak--gelap) {
		display: none;
	}
	.pn-toc-hp {
		display: block;
	}
	.pn-prosa {
		font-size: 16px;
	}
	.pn-fakta dd {
		font-size: 22px;
	}
}

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