/*
 * PGRI Digital Competition - gaya utama.
 * Nilai warna, font, ukuran, dan layout datang dari variabel CSS pada :root
 * yang dibangun inc/enqueue.php dari pengaturan tema. Nilai di bawah hanya cadangan.
 */

/* ==========================================================================
   1. Dasar
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	font-size: calc(var(--pgri-base, 17) * 1px);
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--pgri-bg, #f6f8f7);
	color: var(--pgri-text, #1a2422);
	font-family: var(--pgri-font-body, system-ui, sans-serif);
	font-size: 1rem;
	line-height: var(--pgri-lh, 1.65);
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
	font-family: var(--pgri-font-heading, Georgia, serif);
	font-weight: var(--pgri-heading-wt, 700);
	line-height: 1.2;
	margin: 0 0 .6em;
}
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--pgri-h1, 2.44rem)); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, var(--pgri-h2, 1.95rem)); }
h3 { font-size: var(--pgri-h3, 1.56rem); }
h4 { font-size: var(--pgri-h4, 1.25rem); }
p { margin: 0 0 1em; }

a {
	color: var(--pgri-secondary, #b7242a);
	text-underline-offset: .18em;
}
a:hover { color: var(--pgri-btn-hover, #8f1b20); }

:focus-visible {
	outline: 3px solid var(--pgri-secondary, #b7242a);
	outline-offset: 2px;
}
.on-dark :focus-visible,
.hero :focus-visible,
.page-header :focus-visible,
.site-footer :focus-visible,
.has-transparent-header .site-header :focus-visible {
	outline-color: var(--pgri-accent, #f2b705);
}
.site-main:focus { outline: none; }

.icon { width: 1.25rem; height: 1.25rem; flex: none; }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}
.screen-reader-text:focus,
.skip-link:focus {
	background: #fff;
	color: #111;
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: .75rem 1.25rem;
	left: .5rem;
	top: .5rem;
	z-index: 100000;
	font-weight: 600;
	text-decoration: none;
}

.muted { color: var(--pgri-muted, #5b6663); }

/* ==========================================================================
   2. Tata letak dan bagian
   ========================================================================== */
.container {
	width: min(100% - 2rem, var(--pgri-width, 1160px));
	margin-inline: auto;
}
.container--narrow { width: min(100% - 2rem, 52rem); }
.container--form { width: min(100% - 2rem, 48rem); }

.section { padding-block: var(--pgri-section-space, 80px); }
.section--plain { background: var(--pgri-bg, #f6f8f7); }
.section--soft { background: var(--pgri-soft, #eaf0ee); }
.section--primary { background: var(--pgri-primary, #1f4e46); color: var(--pgri-on-primary, #fff); }
.section--secondary { background: var(--pgri-secondary, #b7242a); color: var(--pgri-on-secondary, #fff); }
.section--countdown { padding-block: calc(var(--pgri-section-space, 80px) * .5); }
.section--guide,
.section--cta { padding-block: calc(var(--pgri-section-space, 80px) * .7); }

.section__head { max-width: 46rem; margin-bottom: 2rem; }
.section__head h2 { margin-bottom: .4em; }
.section__head p { margin: 0; color: var(--pgri-muted, #5b6663); }
.on-dark .section__head p { color: inherit; opacity: .9; }
.section__more { margin: 1.75rem 0 0; }

.card {
	background: var(--pgri-surface, #fff);
	border: 1px solid var(--pgri-line, #d9dfdd);
	border-radius: var(--pgri-radius, 10px);
	box-shadow: var(--pgri-shadow, none);
}

.empty-state {
	margin: 0;
	padding: 1.25rem;
	border: 1px dashed var(--pgri-line, #d9dfdd);
	border-radius: var(--pgri-radius, 10px);
	color: var(--pgri-muted, #5b6663);
}

.text-link { font-weight: 600; }

.sample-notice {
	background: #fff3cd;
	color: #4a3b00;
	padding: .5rem 1rem;
	text-align: center;
	font-size: .9rem;
}

/* ==========================================================================
   3. Tombol dan lencana
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.4rem;
	border: 2px solid var(--pgri-btn-bg, #b7242a);
	background: var(--pgri-btn-bg, #b7242a);
	color: var(--pgri-on-btn, #fff);
	border-radius: var(--pgri-btn-radius, 8px);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover {
	background: var(--pgri-btn-hover, #8f1b20);
	border-color: var(--pgri-btn-hover, #8f1b20);
	color: var(--pgri-on-btn-hover, #fff);
}
.btn .icon { width: 1.1em; height: 1.1em; }
.btn--header { padding: .55rem 1.1rem; }

.btn--accent,
.btn--accent:hover {
	background: var(--pgri-accent, #f2b705);
	border-color: var(--pgri-accent, #f2b705);
	color: var(--pgri-on-accent, #111);
}
.btn--accent:hover { filter: brightness(.93); }

.btn--ghost-light,
.btn--ghost-light:hover {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .14); }

.badge {
	display: inline-block;
	padding: .15rem .7rem;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.5;
}
.badge--status {
	background: var(--pgri-badge, #1f4e46);
	color: var(--pgri-on-badge, #fff);
}
.hero .badge--status {
	background: var(--pgri-accent, #f2b705);
	color: var(--pgri-on-accent, #111);
}
.badge--schedule.is-selesai { background: var(--pgri-line, #d9dfdd); color: var(--pgri-text, #1a2422); }
.badge--schedule.is-berlangsung { background: var(--pgri-accent, #f2b705); color: var(--pgri-on-accent, #111); }
.badge--schedule.is-akan_datang { border: 1px solid var(--pgri-muted, #5b6663); color: var(--pgri-muted, #5b6663); }

/* ==========================================================================
   4. Header dan navigasi
   ========================================================================== */
.site-header {
	position: relative;
	z-index: 50;
	background: var(--pgri-header-bg, #fff);
	color: var(--pgri-on-header, #111);
	border-bottom: 1px solid var(--pgri-line, #d9dfdd);
}
.has-sticky-header .site-header { position: sticky; top: 0; }
.admin-bar.has-sticky-header .site-header { top: 32px; }

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.25rem;
	min-height: 4.5rem;
}

.brand {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	color: inherit;
	text-decoration: none;
}
.brand:hover { color: inherit; }
.brand__logo { display: block; width: var(--pgri-logo-w, 56px); height: auto; }
.brand__name {
	font-family: var(--pgri-font-heading, Georgia, serif);
	font-weight: var(--pgri-heading-wt, 700);
	font-size: 1.15rem;
	line-height: 1.2;
}
.brand__desc { font-size: .8rem; opacity: .8; }

.nav-toggle {
	display: none;
	margin-left: auto;
	padding: .55rem;
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
	border-radius: var(--pgri-btn-radius, 8px);
	cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline; }

.site-header__panel {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 1.25rem;
}
.site-nav { flex: 1; }
.site-nav .menu {
	display: flex;
	flex-wrap: wrap;
	gap: .15rem .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu-pos-left .site-nav .menu { justify-content: flex-start; }
.menu-pos-center .site-nav .menu { justify-content: center; }
.menu-pos-right .site-nav .menu { justify-content: flex-end; }

.site-nav a {
	display: block;
	padding: .55rem .8rem;
	color: inherit;
	text-decoration: none;
	font-weight: 500;
	border-radius: var(--pgri-btn-radius, 8px);
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	background: var(--pgri-soft, #eaf0ee);
	color: var(--pgri-on-header, #111);
}
.site-nav .menu-item { position: relative; }
.site-nav .sub-menu {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 14rem;
	margin: 0;
	padding: .4rem;
	list-style: none;
	background: var(--pgri-header-bg, #fff);
	color: var(--pgri-on-header, #111);
	border: 1px solid var(--pgri-line, #d9dfdd);
	border-radius: var(--pgri-radius, 10px);
	z-index: 10;
}
.site-nav .menu-item:hover > .sub-menu,
.site-nav .menu-item:focus-within > .sub-menu { display: block; }

/* Header transparan (hanya beranda dengan hero). */
.has-transparent-header .site-header {
	position: absolute;
	left: 0;
	right: 0;
	background: transparent;
	color: var(--pgri-on-hero, #fff);
	border-bottom-color: rgba(255, 255, 255, .2);
}
.has-transparent-header .site-nav a:hover { background: rgba(255, 255, 255, .16); color: inherit; }
.has-transparent-header .hero { padding-top: 4.5rem; }

@media (max-width: 959px) {
	.admin-bar.has-sticky-header .site-header { top: 46px; }
	.nav-toggle { display: inline-flex; }
	.site-header__panel {
		flex: 1 1 100%;
		flex-direction: column;
		align-items: stretch;
		padding-bottom: 1rem;
	}
	.site-nav .menu { flex-direction: column; }
	.site-nav .sub-menu {
		display: block;
		position: static;
		border: 0;
		padding: 0 0 0 1rem;
		background: transparent;
	}
	.btn--header { align-self: flex-start; }

	.js .site-header__panel { display: none; }
	.js .site-header__panel.is-open { display: flex; }
	.js .mobile-menu-dropdown .site-header__panel.is-open {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		padding: 1rem;
		background: var(--pgri-header-bg, #fff);
		color: var(--pgri-on-header, #111);
		border-bottom: 1px solid var(--pgri-line, #d9dfdd);
	}
	.js .mobile-menu-fullscreen .site-header__panel.is-open {
		position: fixed;
		inset: 4.5rem 0 0 0;
		overflow-y: auto;
		padding: 1.5rem 1rem;
		background: var(--pgri-header-bg, #fff);
		color: var(--pgri-on-header, #111);
	}
	.js .site-header__panel.is-open .site-nav a:hover { background: var(--pgri-soft, #eaf0ee); }
	body.nav-open { overflow: hidden; }
}

/* ==========================================================================
   5. Hero (papan tulis dengan garis buku tulis)
   ========================================================================== */
.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: var(--pgri-hero-h, 520px);
	padding-block: 5rem;
	background: var(--pgri-primary, #1f4e46);
	color: var(--pgri-on-hero, #fff);
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .08;
	background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, currentColor 47px, currentColor 48px);
	pointer-events: none;
}
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--pgri-overlay, #16302b);
	opacity: var(--pgri-overlay-op, .62);
}
.hero__inner { width: min(100% - 2rem, var(--pgri-width, 1160px)); }
.hero__content { max-width: 46rem; }
.hero--center .hero__content { margin-inline: auto; text-align: center; }
.hero--right .hero__content { margin-left: auto; text-align: right; }

.hero__title {
	max-width: 22ch;
	margin: .9rem 0 0;
	font-size: clamp(2rem, 1.1rem + 3.4vw, calc(var(--pgri-h1, 2.44rem) * 1.45));
	line-height: 1.12;
}
.hero--center .hero__title { margin-inline: auto; }
.hero--right .hero__title { margin-left: auto; }

.hero__subtitle {
	display: inline-block;
	margin: 1.25rem 0 0;
	padding-left: .8rem;
	border-left: 4px solid var(--pgri-accent, #f2b705);
	font-size: var(--pgri-h4, 1.25rem);
	font-weight: 600;
}
.hero--center .hero__subtitle {
	padding: 0 0 .35rem;
	border-left: 0;
	border-bottom: 4px solid var(--pgri-accent, #f2b705);
}
.hero--right .hero__subtitle {
	padding: 0 .8rem 0 0;
	border-left: 0;
	border-right: 4px solid var(--pgri-accent, #f2b705);
}
.hero__tagline {
	margin: 1rem 0 0;
	font-family: var(--pgri-font-heading, Georgia, serif);
	font-size: var(--pgri-h4, 1.25rem);
	font-style: italic;
}
.hero__desc { max-width: 60ch; margin: 1rem 0 0; opacity: .92; }
.hero--center .hero__desc { margin-inline: auto; }
.hero--right .hero__desc { margin-left: auto; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero--center .hero__actions { justify-content: center; }
.hero--right .hero__actions { justify-content: flex-end; }

/* ==========================================================================
   6. Bagian beranda
   ========================================================================== */

/* Hitung mundur */
.countdown {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}
.countdown__label { margin: 0; font-weight: 600; }
.countdown__units { display: flex; gap: 1.5rem; }
.countdown__units > div { display: flex; flex-direction: column; align-items: center; min-width: 3.5rem; }
.countdown__num {
	font-family: var(--pgri-font-heading, Georgia, serif);
	font-size: 2.4rem;
	font-weight: var(--pgri-heading-wt, 700);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--pgri-primary, #1f4e46);
}
.countdown__name { font-size: .85rem; color: var(--pgri-muted, #5b6663); }

/* Ringkasan */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1px;
	margin: 0;
	background: var(--pgri-line, #d9dfdd);
	border: 1px solid var(--pgri-line, #d9dfdd);
	border-radius: var(--pgri-radius, 10px);
	overflow: hidden;
}
.stats__item { padding: 1.25rem; background: var(--pgri-surface, #fff); }
.stats dt {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .4rem;
	font-size: .9rem;
	color: var(--pgri-muted, #5b6663);
}
.stats dd {
	margin: 0;
	font-family: var(--pgri-font-heading, Georgia, serif);
	font-size: var(--pgri-h4, 1.25rem);
	font-weight: var(--pgri-heading-wt, 700);
	line-height: 1.3;
}
.stats dd .badge { font-family: var(--pgri-font-body, sans-serif); }

/* Kategori */
.category-grid {
	display: grid;
	grid-template-columns: repeat(var(--pgri-cat-cols, 3), minmax(0, 1fr));
	gap: 1.25rem;
}
.category-card { padding: 1.5rem; }
.category-card h3 { margin: 0 0 .5rem; font-size: var(--pgri-h4, 1.25rem); }
.category-card p { color: var(--pgri-muted, #5b6663); }
.category-card__icon,
.category-detail__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
	border-radius: var(--pgri-radius, 10px);
	background: var(--pgri-primary, #1f4e46);
	color: var(--pgri-on-primary, #fff);
	overflow: hidden;
}
.category-card__icon img,
.category-detail__icon img { width: 100%; height: 100%; object-fit: cover; }
.category-card__icon .icon,
.category-detail__icon .icon { width: 1.5rem; height: 1.5rem; }

.category-detail-list { display: grid; gap: 1.25rem; }
.category-detail {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 1.5rem;
	padding: 1.75rem;
}
.category-detail h2 { margin-bottom: .4em; }
.category-detail h3 { margin: 1.25rem 0 .5rem; font-size: var(--pgri-h4, 1.25rem); }
.category-detail__limit { margin: 1rem 0 0; color: var(--pgri-muted, #5b6663); font-size: .95rem; }

/* Tahapan */
.stages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: stage;
}
.stages__item { padding-top: .9rem; border-top: 3px solid var(--pgri-primary, #1f4e46); }
.stages__item::before {
	content: counter(stage);
	counter-increment: stage;
	display: block;
	margin-bottom: .35rem;
	font-family: var(--pgri-font-heading, Georgia, serif);
	font-size: var(--pgri-h3, 1.56rem);
	font-weight: 700;
	line-height: 1;
	color: var(--pgri-secondary, #b7242a);
}
.stages__item h3 { margin: 0 0 .3rem; font-size: var(--pgri-h4, 1.25rem); }
.stages__item p { margin: 0; color: var(--pgri-muted, #5b6663); }

/* Timeline */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline__when { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pgri-muted, #5b6663); }
.timeline__body h3 { margin: 0 0 .25rem; font-size: var(--pgri-h4, 1.25rem); }
.timeline__body p { margin: .15rem 0 .5rem; color: var(--pgri-muted, #5b6663); }

.timeline--vertical::before {
	content: "";
	position: absolute;
	top: .5rem;
	bottom: .5rem;
	left: calc(11rem + 1rem - 1px);
	width: 2px;
	background: var(--pgri-line, #d9dfdd);
}
.timeline--vertical .timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	gap: 0 2rem;
	padding-bottom: 1.75rem;
}
.timeline--vertical .timeline__when { text-align: right; }
.timeline--vertical .timeline__item::before {
	content: "";
	position: absolute;
	top: .4rem;
	left: calc(11rem + 1rem - 7px);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--pgri-surface, #fff);
	border: 2px solid var(--pgri-primary, #1f4e46);
}
.timeline--vertical .timeline__item.is-selesai::before { background: var(--pgri-primary, #1f4e46); }
.timeline--vertical .timeline__item.is-berlangsung::before { background: var(--pgri-accent, #f2b705); }

.timeline--compact .timeline__item {
	display: grid;
	grid-template-columns: 12rem minmax(0, 1fr);
	gap: 1rem;
	padding: .9rem 0;
	border-bottom: 1px solid var(--pgri-line, #d9dfdd);
}
.timeline--compact .timeline__item:first-child { border-top: 1px solid var(--pgri-line, #d9dfdd); }
.timeline--compact .timeline__body h3 { display: inline; margin-right: .6rem; }
.timeline--compact .timeline__body p { margin-bottom: 0; }

@media (max-width: 639px) {
	.timeline--vertical::before { left: 6px; }
	.timeline--vertical .timeline__item { grid-template-columns: minmax(0, 1fr); padding-left: 2rem; }
	.timeline--vertical .timeline__item::before { left: 0; }
	.timeline--vertical .timeline__when { text-align: left; margin-bottom: .25rem; }
	.timeline--compact .timeline__item { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}

/* Daftar centang */
.check-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: .65rem; align-items: flex-start; }
.check-list .icon { margin-top: .2rem; color: var(--pgri-primary, #1f4e46); }
.check-list--columns { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: .9rem 2rem; }

/* Pita unduh panduan dan ajakan registrasi */
.guide-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2rem;
}
.guide-band h2 { margin: 0 0 .35rem; font-size: var(--pgri-h3, 1.56rem); }
.guide-band p { margin: 0; }
.guide-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.cta-band { max-width: 46rem; }
.cta-band h2 { margin-bottom: .4em; }
.cta-band p { margin-bottom: 1.5rem; }

/* Kartu Technical Meeting */
.tm-card { padding: 1.5rem; }
.tm-card__list { display: grid; gap: 1.1rem; margin: 0; }
.tm-card__list > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: .35rem 1.5rem; }
.tm-card dt { display: flex; align-items: center; gap: .5rem; color: var(--pgri-muted, #5b6663); }
.tm-card dd { margin: 0; }
.tm-card dd ul { margin: 0; padding-left: 1.1rem; }
.tm-card__heading { margin: 1.75rem 0 .75rem; font-size: var(--pgri-h4, 1.25rem); }
.tm-card__notes { margin: 1.25rem 0 0; color: var(--pgri-muted, #5b6663); }
.download-list { display: grid; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.download-list li { display: flex; align-items: center; gap: .5rem; }

/* Pengumuman dan berita */
.announce-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pgri-line, #d9dfdd); }
.announce-row {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	gap: .25rem 1rem;
	padding: .9rem 0;
	border-bottom: 1px solid var(--pgri-line, #d9dfdd);
}
.announce-row time { color: var(--pgri-muted, #5b6663); font-variant-numeric: tabular-nums; }
.announce-row a { font-weight: 600; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; }
.post-card { display: flex; flex-direction: column; overflow: hidden; }
.post-card__thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card__body { padding: 1.25rem; }
.post-card__date { display: block; margin-bottom: .35rem; font-size: .88rem; color: var(--pgri-muted, #5b6663); }
.post-card__title { margin: 0 0 .5rem; font-size: var(--pgri-h4, 1.25rem); }
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; }
.post-card p { margin: 0; color: var(--pgri-muted, #5b6663); }

/* Galeri */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(var(--pgri-gallery-cols, 3), minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gallery-grid__link { display: block; }
.gallery-grid img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--pgri-radius, 10px);
}
.lightbox {
	max-width: min(92vw, 1100px);
	max-height: 92vh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
	color: #fff;
}
.lightbox::backdrop { background: rgba(10, 20, 18, .85); }
.lightbox img { display: block; max-width: 100%; max-height: 80vh; margin-inline: auto; border-radius: var(--pgri-radius, 10px); }
.lightbox__caption { margin: .75rem 0 0; text-align: center; }
.lightbox__close {
	position: absolute;
	top: -2.75rem;
	right: 0;
	padding: .4rem;
	background: transparent;
	color: #fff;
	border: 1px solid #fff;
	border-radius: var(--pgri-btn-radius, 8px);
	cursor: pointer;
}

/* FAQ */
.faq-list { border-top: 1px solid var(--pgri-line, #d9dfdd); }
.faq-item { border-bottom: 1px solid var(--pgri-line, #d9dfdd); }
.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__chevron { transition: transform .2s; }
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__answer { padding: 0 0 1rem; max-width: 70ch; color: var(--pgri-muted, #5b6663); }
.faq-item__answer > :last-child { margin-bottom: 0; }

/* ==========================================================================
   7. Halaman dalam
   ========================================================================== */
.page-header {
	position: relative;
	isolation: isolate;
	padding-block: 2.5rem 3rem;
	background: var(--pgri-primary, #1f4e46);
	color: var(--pgri-on-primary, #fff);
	overflow: hidden;
}
.page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .08;
	background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, currentColor 39px, currentColor 40px);
}
.page-header h1 { max-width: 28ch; margin: .5rem 0 0; }
.page-header__lead { max-width: 60ch; margin: .75rem 0 0; opacity: .92; }
.breadcrumb { font-size: .9rem; opacity: .9; }
.breadcrumb a { color: inherit; }

.doc--with-toc { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; }
.doc__toc { position: sticky; top: 6rem; }
.doc__toc-title { margin: 0 0 .5rem; font-weight: 600; }
.doc__toc ul { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--pgri-line, #d9dfdd); }
.doc__toc a { display: block; padding: .3rem 0 .3rem .9rem; color: var(--pgri-muted, #5b6663); text-decoration: none; }
.doc__toc a:hover { color: var(--pgri-text, #1a2422); }

.download-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
	margin-bottom: 2rem;
	padding: 1.25rem 1.5rem;
}
.download-card > .icon { width: 2.25rem; height: 2.25rem; color: var(--pgri-primary, #1f4e46); }
.download-card > div { flex: 1; min-width: 14rem; }
.download-card h2 { margin: 0 0 .25rem; font-size: var(--pgri-h4, 1.25rem); }
.download-card p { margin: 0; color: var(--pgri-muted, #5b6663); }

.entry-content { max-width: 70ch; }
.entry-content--intro { margin-bottom: 2rem; }
.entry-content > :first-child { margin-top: 0; }
.entry-content h2 { margin-top: 2.5rem; }
.entry-content h3 { margin-top: 2rem; font-size: var(--pgri-h4, 1.25rem); }
.entry-content ul,
.entry-content ol { padding-left: 1.4rem; }
.entry-content li { margin-bottom: .35rem; }
.entry-content blockquote {
	margin: 1.5rem 0;
	padding: .25rem 0 .25rem 1.25rem;
	border-left: 4px solid var(--pgri-accent, #f2b705);
}
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.entry-content th,
.entry-content td { padding: .6rem .75rem; border-bottom: 1px solid var(--pgri-line, #d9dfdd); text-align: left; vertical-align: top; }
.entry-content th { background: var(--pgri-soft, #eaf0ee); }
.entry-content img { border-radius: var(--pgri-radius, 10px); }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text,
figcaption { font-size: .9rem; color: var(--pgri-muted, #5b6663); }

.single-article { max-width: 46rem; margin-inline: auto; }
.single-article__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--pgri-muted, #5b6663); }
.single-article__image { margin: 0 0 1.5rem; }
.single-article__image img { display: block; width: 100%; border-radius: var(--pgri-radius, 10px); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }

.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; }
.page-numbers {
	padding: .45rem .85rem;
	border: 1px solid var(--pgri-line, #d9dfdd);
	border-radius: var(--pgri-btn-radius, 8px);
	color: inherit;
	text-decoration: none;
}
.page-numbers.current { background: var(--pgri-primary, #1f4e46); border-color: var(--pgri-primary, #1f4e46); color: var(--pgri-on-primary, #fff); }

.search-box { margin-bottom: 2rem; }
.search-form { display: flex; gap: .5rem; max-width: 32rem; }
.search-form label { flex: 1; }
.search-submit {
	padding: .65rem 1.2rem;
	background: var(--pgri-btn-bg, #b7242a);
	color: var(--pgri-on-btn, #fff);
	border: 0;
	border-radius: var(--pgri-btn-radius, 8px);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.faq-contact { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.faq-contact__contact { position: sticky; top: 6rem; padding: 1.5rem; }
.faq-contact__contact h2 { font-size: var(--pgri-h4, 1.25rem); }

/* Kontak dan media sosial */
.contact-list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: .65rem; align-items: flex-start; }
.contact-list .icon { margin-top: .2rem; color: var(--pgri-primary, #1f4e46); }
.social-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.social-list a {
	display: inline-block;
	padding: .3rem .8rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: .9rem;
	text-decoration: none;
}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.site-footer { background: var(--pgri-footer-bg, #16302b); color: var(--pgri-on-footer, #fff); }
.site-footer a { color: inherit; }
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2.5rem;
	padding-block: 3.5rem;
}
.site-footer__title { margin: 0 0 1rem; font-size: var(--pgri-h4, 1.25rem); }
.site-footer__about p { margin: 1rem 0 0; max-width: 40ch; color: var(--pgri-footer-muted, #c9d3d0); }
.site-footer .contact-list .icon { color: var(--pgri-accent, #f2b705); }
.site-footer .muted { color: var(--pgri-footer-muted, #c9d3d0); }
.site-footer .empty-state { padding: 0; border: 0; color: var(--pgri-footer-muted, #c9d3d0); }
.footer-menu,
.site-footer .menu { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.site-footer__bar { border-top: 1px solid var(--pgri-footer-line, #35514b); }
.site-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding-block: 1.1rem;
	font-size: .9rem;
	color: var(--pgri-footer-muted, #c9d3d0);
}
.site-footer__bar-inner p { margin: 0; }

/* ==========================================================================
   9. Tampilan komponen plugin (formulir, notifikasi, tabel, lencana)
   ========================================================================== */
.pgri-dc-form { display: grid; gap: 1.25rem; }
.pgri-dc-form fieldset {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--pgri-line, #d9dfdd);
	border-radius: var(--pgri-radius, 10px);
	background: var(--pgri-surface, #fff);
}
.pgri-dc-form legend {
	padding-inline: .4rem;
	font-family: var(--pgri-font-heading, Georgia, serif);
	font-weight: var(--pgri-heading-wt, 700);
	font-size: var(--pgri-h4, 1.25rem);
}
.pgri-dc-field { display: grid; gap: .35rem; }
.pgri-dc-field label,
.pgri-dc-field .pgri-dc-label { font-weight: 600; }
.pgri-dc-field .required { color: var(--pgri-secondary, #b7242a); }
.pgri-dc-field small { color: var(--pgri-muted, #5b6663); }
.pgri-dc-field--check { display: flex; gap: .6rem; align-items: flex-start; }
.pgri-dc-field--check input { margin-top: .35rem; }
.pgri-dc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select,
textarea {
	width: 100%;
	padding: .65rem .8rem;
	background: #fff;
	color: #111;
	border: 1px solid var(--pgri-muted, #5b6663);
	border-radius: calc(var(--pgri-radius, 10px) * .6);
	font: inherit;
}
textarea { min-height: 7rem; }
.pgri-dc-field.has-error input,
.pgri-dc-field.has-error select,
.pgri-dc-field.has-error textarea { border-color: var(--pgri-secondary, #b7242a); border-width: 2px; }
.pgri-dc-error { color: var(--pgri-secondary, #b7242a); font-size: .92rem; }

.pgri-dc-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pgri-dc-notice {
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--pgri-primary, #1f4e46);
	border-radius: calc(var(--pgri-radius, 10px) * .6);
	background: var(--pgri-soft, #eaf0ee);
}
.pgri-dc-notice--error { border-left-color: var(--pgri-secondary, #b7242a); }
.pgri-dc-notice--warning { border-left-color: var(--pgri-accent, #f2b705); }
.pgri-dc-notice > :last-child { margin-bottom: 0; }

.pgri-dc-table-wrap { overflow-x: auto; }
.pgri-dc-table { width: 100%; border-collapse: collapse; }
.pgri-dc-table th,
.pgri-dc-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--pgri-line, #d9dfdd); text-align: left; vertical-align: top; }
.pgri-dc-table th { background: var(--pgri-soft, #eaf0ee); }

.pgri-dc-badge { display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.pgri-dc-badge--ok { background: #dff1ea; color: #134a38; }
.pgri-dc-badge--warn { background: #fff1c2; color: #5c4300; }
.pgri-dc-badge--bad { background: #fbdcdc; color: #7a1a1a; }
.pgri-dc-badge--info { background: #e2ebf7; color: #1c3b66; }

.pgri-dc-proof { padding: 1.5rem; border: 2px solid var(--pgri-primary, #1f4e46); border-radius: var(--pgri-radius, 10px); background: var(--pgri-surface, #fff); }
.pgri-dc-regnumber { font-family: var(--pgri-font-heading, Georgia, serif); font-size: var(--pgri-h2, 1.95rem); font-weight: 700; letter-spacing: .02em; }

/* ==========================================================================
   10. Responsif
   ========================================================================== */
@media (max-width: 959px) {
	.doc--with-toc { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.doc__toc { position: static; }
	.faq-contact { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.faq-contact__contact { position: static; }
	.site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2.5rem; }
	.category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.category-grid { grid-template-columns: minmax(0, 1fr); }
	.category-detail { grid-template-columns: minmax(0, 1fr); }
	.gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tm-card__list > div { grid-template-columns: minmax(0, 1fr); }
	.announce-row { grid-template-columns: minmax(0, 1fr); }
	.pgri-dc-grid-2 { grid-template-columns: minmax(0, 1fr); }
	.countdown__units { gap: 1rem; }
	.countdown__num { font-size: 2rem; }
	.hero { padding-block: 3.5rem; }
}

/* ==========================================================================
   11. Gerak dan cetak
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.site-header,
	.site-footer,
	.skip-link,
	.hero,
	.btn,
	.nav-toggle,
	.sample-notice,
	.no-print { display: none !important; }
	body { background: #fff; color: #000; }
	.page-header { background: none; color: #000; padding-block: 0 1rem; }
	.page-header::before { display: none; }
	a { color: inherit; text-decoration: none; }
	.pgri-dc-proof { break-inside: avoid; }
}