body .site-main.village-infographics-page {
	background: #f4f8f5;
	box-sizing: border-box;
	margin-inline: 0;
	max-width: none;
	min-height: 100vh;
	overflow-x: clip;
	width: 100%;
}

body.page-data-infografis .site-header.village-header,
body.village-infographics-page-body .site-header.village-header {
	background: transparent;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity 260ms ease, transform 260ms ease;
}

body.page-data-infografis.admin-bar .site-header.village-header,
body.village-infographics-page-body.admin-bar .site-header.village-header {
	top: 32px;
}

body.page-data-infografis.village-infographics-header-hidden .site-header.village-header,
body.village-infographics-page-body.village-infographics-header-hidden .site-header.village-header {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-120%);
}

@media (max-width: 782px) {
	body.page-data-infografis.admin-bar .site-header.village-header,
	body.village-infographics-page-body.admin-bar .site-header.village-header {
		top: 46px;
	}
}

.village-infographics-page__intro {
	align-content: center;
	align-items: center;
	box-sizing: border-box;
	display: grid;
	gap: 28px 44px;
	grid-template-columns: minmax(320px, 0.72fr) minmax(520px, 1fr);
	margin: 0 auto;
	max-width: none;
	min-height: 100svh;
	padding: 138px clamp(24px, 4vw, 72px) 70px;
	scroll-margin-top: 120px;
	width: 100%;
}

.village-infographics-page__intro > * {
	min-width: 0;
}

.village-infographics-page__intro h1 {
	color: #123f29;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.08;
	margin: 0 0 16px;
}

.village-infographics-page__lead > p:last-of-type {
	color: #586c60;
	font-size: 15px;
	line-height: 1.75;
	margin: 0;
	max-width: 530px;
}

.village-infographics-page__updated {
	color: #27734a;
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	margin-top: 18px;
	padding-left: 17px;
	position: relative;
}

.village-infographics-page__updated::before,
.village-infographics-page__updated::after {
	border-radius: 50%;
	content: "";
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.village-infographics-page__updated::before {
	background: #2b9360;
	height: 8px;
	width: 8px;
}

.village-infographics-page__updated::after {
	border: 1px solid rgba(43, 147, 96, 0.55);
	height: 8px;
	width: 8px;
	animation: village-data-pulse 2.4s ease-out infinite;
}

.village-infographics-page__key-insights {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 20px;
}

.village-infographics-page__key-insights > div {
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid #d2e4d8;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	min-height: 64px;
	padding: 9px 10px;
}

.village-infographics-page__key-insights small {
	color: #6e7d74;
	font-size: 9px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
}

.village-infographics-page__key-insights strong {
	color: #174d31;
	font-size: 12px;
	line-height: 1.25;
	margin-top: 5px;
}

.village-infographics-page__key-insights span {
	color: #587065;
	font-size: 9px;
	line-height: 1.3;
	margin-top: 2px;
}

.village-infographics-page__intro .village-home__data-summary {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	min-width: 0;
}

.village-infographics-page__intro .village-home__data-summary div {
	align-items: center;
	animation: village-summary-enter 620ms ease both;
	background: #ffffff;
	border: 1px solid #d8e6dc;
	border-radius: 8px;
	box-shadow: 0 14px 32px rgba(18, 65, 38, 0.08);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 132px;
	min-width: 0;
	padding: 16px 10px;
	text-align: center;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.village-infographics-page__intro .village-home__data-summary div:nth-child(2) {
	animation-delay: 80ms;
}

.village-infographics-page__intro .village-home__data-summary div:nth-child(3) {
	animation-delay: 160ms;
}

.village-infographics-page__intro .village-home__data-summary div:nth-child(4) {
	animation-delay: 240ms;
}

.village-infographics-page__intro .village-home__data-summary div:hover {
	border-color: #a9ceb5;
	box-shadow: 0 18px 38px rgba(18, 81, 44, 0.13);
	transform: translateY(-4px);
}

.village-infographics-page__intro .village-home__data-summary small {
	color: #718078;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.3;
}

.village-infographics-page__intro .village-home__data-summary strong {
	color: #17633d;
	font-size: 27px;
	margin-top: 10px;
}

.village-infographics-page__intro .village-home__data-summary span {
	color: #3e664d;
	font-size: 10px;
	margin-top: 6px;
}

.village-infographics-page__intro .village-home__data-summary sup {
	font-size: 0.65em;
}

.village-infographics-page__overview {
	align-items: stretch;
	background: rgba(231, 241, 234, 0.78);
	border-block: 1px solid #cfdfd3;
	display: grid;
	gap: 38px;
	grid-column: 1 / -1;
	grid-template-columns: minmax(230px, 0.52fr) minmax(0, 1.48fr);
	min-height: 174px;
	overflow: hidden;
	padding: 20px 26px;
	position: relative;
}

.village-infographics-page__overview > header {
	align-self: center;
}

.village-infographics-page__overview > header > p:first-child {
	color: #2f8053;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0;
	margin: 0 0 5px;
	text-transform: uppercase;
}

.village-infographics-page__overview h2 {
	color: #123f29;
	font-size: 20px;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0;
}

.village-infographics-page__overview > header > p:last-of-type {
	color: #586c60;
	font-size: 11px;
	line-height: 1.55;
	margin: 9px 0 0;
	max-width: 330px;
}

.village-infographics-page__overview > header > span {
	color: #527064;
	display: inline-block;
	font-size: 9px;
	margin-top: 11px;
}

.village-infographics-page__overview > header > span strong {
	color: #1d7046;
	font-size: 14px;
}

.village-infographics-page__overview-plot {
	align-items: end;
	display: grid;
	gap: clamp(10px, 2vw, 28px);
	grid-template-columns: repeat(5, minmax(0, 1fr));
	min-width: 0;
}

.village-infographics-page__overview-item {
	color: #476052;
	display: grid;
	gap: 5px;
	grid-template-rows: 18px 92px minmax(24px, auto);
	min-width: 0;
	outline: none;
	text-align: center;
}

.village-infographics-page__overview-item > strong {
	color: #245b3b;
	font-size: 12px;
	line-height: 18px;
}

.village-infographics-page__overview-item > span {
	font-size: 10px;
	font-weight: 800;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.village-infographics-page__overview-track {
	align-items: flex-end;
	border-bottom: 1px solid #b9d0c0;
	display: flex;
	height: 92px;
	justify-content: center;
}

.village-infographics-page__overview-track span {
	background: #27784d;
	border-radius: 5px 5px 0 0;
	height: var(--bar-size);
	max-width: 56px;
	min-height: 8px;
	transform: scaleY(0);
	transform-origin: bottom;
	transition: filter 180ms ease, transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
	width: 58%;
}

.village-infographics-page__overview.is-visible .village-infographics-page__overview-track span {
	transform: scaleY(1);
}

.village-infographics-page__overview-item:nth-child(2) .village-infographics-page__overview-track span {
	background: #2f8f8b;
	transition-delay: 90ms;
}

.village-infographics-page__overview-item:nth-child(3) .village-infographics-page__overview-track span {
	background: #d6a23a;
	transition-delay: 180ms;
}

.village-infographics-page__overview-item:nth-child(4) .village-infographics-page__overview-track span {
	background: #d66b52;
	transition-delay: 270ms;
}

.village-infographics-page__overview-item:nth-child(5) .village-infographics-page__overview-track span {
	background: #5276a7;
	transition-delay: 360ms;
}

.village-infographics-page__overview-item:hover .village-infographics-page__overview-track span,
.village-infographics-page__overview-item:focus-visible .village-infographics-page__overview-track span {
	filter: brightness(1.08) saturate(1.12);
}

.village-infographics-page__overview-item:focus-visible {
	box-shadow: 0 0 0 2px rgba(39, 120, 77, 0.25);
}

@keyframes village-summary-enter {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes village-data-pulse {
	0% {
		opacity: 0.75;
		transform: translateY(-50%) scale(1);
	}
	75%,
	100% {
		opacity: 0;
		transform: translateY(-50%) scale(2.4);
	}
}

.village-infographics-page__toolbar {
	align-items: center;
	background: transparent;
	border: 0;
	box-shadow: none;
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(210px, 1fr) minmax(360px, 520px) minmax(210px, 1fr);
	margin: -38px clamp(14px, 2vw, 34px) 12px;
	max-width: none;
	padding: 10px 0;
	position: sticky;
	top: 10px;
	width: auto;
	z-index: 48;
}

.village-infographics-page__controls {
	align-items: center;
	display: flex;
	grid-column: 1;
	justify-content: flex-start;
	min-width: 0;
	position: relative;
	z-index: 2;
}

.village-infographics-page__jumps {
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	backdrop-filter: blur(18px) saturate(1.2);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(230, 241, 234, 0.68));
	border: 1px solid rgba(195, 216, 201, 0.8);
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(18, 62, 37, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.94);
	display: flex;
	gap: 2px;
	min-width: 0;
	overflow-x: auto;
	padding: 4px;
	scrollbar-width: thin;
}

.village-infographics-page__jumps a {
	border-radius: 999px;
	color: #42584b;
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	min-height: 38px;
	padding: 12px 11px;
	text-decoration: none;
	transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease;
	white-space: nowrap;
}

.village-infographics-page__jumps a:hover,
.village-infographics-page__jumps a:focus-visible {
	background: #e5f0e8;
	color: #1c6a41;
	outline: none;
}

.village-infographics-page__jumps a.is-active {
	background: linear-gradient(135deg, #1e7749, #2f9a64);
	box-shadow: 0 7px 16px rgba(31, 112, 70, 0.2);
	color: #ffffff;
}

.village-infographics-page__actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
	min-width: 0;
}

.village-infographics-page__period {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(225, 240, 230, 0.72));
	border: 1px solid rgba(195, 216, 201, 0.86);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
	color: #476052;
	font-size: 11px;
	font-weight: 800;
	min-height: 38px;
	padding: 12px 11px;
	white-space: nowrap;
}

.village-infographics-page__controls .village-home__dusun-filter {
	gap: 6px;
	position: relative;
}

.village-infographics-page__controls .village-home__dusun-filter > span {
	display: none;
}

.village-infographics-page__controls .village-home__dusun-filter select {
	appearance: none;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	background:
		linear-gradient(45deg, transparent 50%, #1f7046 50%) calc(100% - 20px) 18px / 5px 5px no-repeat,
		linear-gradient(135deg, #1f7046 50%, transparent 50%) calc(100% - 15px) 18px / 5px 5px no-repeat,
		linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(230, 243, 235, 0.82));
	border: 1px solid rgba(191, 215, 198, 0.9);
	border-radius: 999px;
	box-shadow: 0 9px 18px rgba(31, 112, 70, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
	min-height: 38px;
	min-width: 145px;
	padding-right: 42px;
}

.village-infographics-page__select {
	position: relative;
	min-width: 175px;
}

.village-infographics-page__select > button[data-region-toggle] {
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	background:
		linear-gradient(45deg, transparent 50%, #1f7046 50%) calc(100% - 20px) 18px / 5px 5px no-repeat,
		linear-gradient(135deg, #1f7046 50%, transparent 50%) calc(100% - 15px) 18px / 5px 5px no-repeat,
		linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(230, 243, 235, 0.82));
	border: 1px solid rgba(191, 215, 198, 0.9);
	border-radius: 999px;
	box-shadow: 0 9px 18px rgba(31, 112, 70, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
	color: #214834;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 850;
	min-height: 38px;
	padding: 9px 42px 9px 15px;
	text-align: left;
	width: 100%;
}

.village-infographics-page__select > button[data-region-toggle]:hover,
.village-infographics-page__select > button[data-region-toggle]:focus-visible {
	border-color: #1f7046;
	box-shadow: 0 0 0 4px rgba(31, 112, 70, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
	outline: none;
}

.village-infographics-page__select-menu {
	-webkit-backdrop-filter: blur(18px) saturate(1.16);
	backdrop-filter: blur(18px) saturate(1.16);
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(232, 244, 237, 0.88));
	border: 1px solid rgba(190, 214, 198, 0.92);
	border-radius: 18px;
	box-shadow: 0 18px 36px rgba(18, 62, 37, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.96);
	display: grid;
	gap: 4px;
	min-width: 210px;
	padding: 7px;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 80;
}

.village-infographics-page__select-menu[hidden] {
	display: none;
}

.village-infographics-page__select-menu button {
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: #315442;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	padding: 10px 13px;
	text-align: left;
}

.village-infographics-page__select-menu button:hover,
.village-infographics-page__select-menu button:focus-visible {
	background: rgba(255, 255, 255, 0.78);
	color: #17633d;
	outline: none;
}

.village-infographics-page__select-menu button.is-active {
	background: linear-gradient(135deg, #1e7749, #2f9a64);
	box-shadow: 0 8px 18px rgba(31, 112, 70, 0.2);
	color: #ffffff;
}

body.village-infographics-page-body .village-infographics-page__native-select {
	height: 1px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

.village-infographics-page__controls .village-home__dusun-filter select:focus-visible {
	border-color: #1f7046;
	box-shadow: 0 0 0 4px rgba(31, 112, 70, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
	outline: none;
}

.village-infographics-page__download {
	background: #ffffff;
	border: 1px solid #bdd6c5;
	border-radius: 6px;
	color: #1d6840;
	cursor: pointer;
	font: inherit;
	font-size: 11px;
	font-weight: 800;
	min-height: 38px;
	padding: 10px 13px;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
	white-space: nowrap;
}

.village-infographics-page__download:hover,
.village-infographics-page__download:focus-visible {
	background: #1f7046;
	border-color: #1f7046;
	color: #ffffff;
	outline: none;
}

.village-infographics-page__sections {
	align-items: start;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	max-width: none;
	padding: 26px clamp(14px, 2vw, 34px) 18px;
	width: 100%;
}

.village-infographics-page__section {
	background: #ffffff;
	border: 1px solid #dce8df;
	border-radius: 8px;
	box-shadow: 0 14px 34px rgba(19, 64, 38, 0.07);
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 22px;
	scroll-margin-top: 148px;
}

.village-infographics-page__section[data-section="umurPiramida"],
.village-infographics-page__section[data-section="pendidikan"],
.village-infographics-page__section[data-section="pekerjaan"],
.village-infographics-page__section[data-section="bantuan"],
.village-infographics-page__section[data-section="produkUnggulan"],
.village-infographics-page__section[data-section="kondisiRumah"],
.village-infographics-page__section[data-section="aset"] {
	grid-column: 1 / -1;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] {
	align-self: start;
	order: 1;
}

.village-infographics-page__section[data-section="fasilitas"] {
	align-self: start;
	order: 2;
}

.village-infographics-page__section[data-section="umurPiramida"] {
	order: 3;
}

.village-infographics-page__section[data-section="pendidikan"] {
	order: 4;
}

.village-infographics-page__section[data-section="pekerjaan"] {
	order: 5;
}

.village-infographics-page__section[data-section="pernikahan"] {
	order: 6;
}

.village-infographics-page__section[data-section="desil"] {
	order: 7;
}

.village-infographics-page__section[data-section="bantuan"] {
	order: 8;
}

.village-infographics-page__section[data-section="produkUnggulan"] {
	order: 9;
}

.village-infographics-page__section[data-section="kondisiRumah"] {
	order: 10;
}

.village-infographics-page__section[data-section="aset"] {
	order: 11;
}

.village-infographics-page__section-head {
	align-items: start;
	display: grid;
	gap: 12px;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	margin-bottom: 16px;
}

.village-infographics-page__section-head > span {
	align-items: center;
	background: #1f7046;
	border-radius: 6px;
	color: #ffffff;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	height: 30px;
	justify-content: center;
	width: 30px;
}

.village-infographics-page__section-head div > p:first-child {
	color: #2d8555;
	font-size: 10px;
	font-weight: 800;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.village-infographics-page__section-head h2 {
	font-size: 21px;
	line-height: 1.2;
	margin: 0 0 5px;
}

.village-infographics-page__section-head div > p:last-child {
	color: #63736a;
	font-size: 12px;
	line-height: 1.55;
	margin: 0;
	max-width: 680px;
}

.village-infographics-page__section-head > strong {
	background: #edf6ef;
	border-radius: 6px;
	color: #42634f;
	font-size: 10px;
	font-weight: 800;
	padding: 8px 9px;
	text-align: right;
	white-space: nowrap;
}

.village-infographics-page__visual {
	display: grid;
	flex: 1;
	grid-template-columns: minmax(0, 1fr) 205px;
	min-height: 350px;
}

.village-infographics-page__chart-wrap {
	min-width: 0;
	padding: 18px 20px 4px 6px;
}

.village-infographics-page__chart-wrap .village-home__chart {
	min-height: 280px;
}

.village-infographics-page__section[data-chart-type="bars"] .village-home__chart,
.village-infographics-page__section[data-chart-type="lollipop"] .village-home__chart {
	min-height: 360px;
}

.village-infographics-page__visual .village-home__data-insight {
	border-radius: 6px;
	min-width: 0;
	padding: 24px 20px;
}

.village-infographics-page__visual .village-home__data-insight > strong {
	font-size: 38px;
	margin: 22px 0 9px;
}

.village-infographics-page__visual .village-home__data-insight h3 {
	font-size: 16px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-infographics-page__visual,
.village-infographics-page__section[data-section="fasilitas"] .village-infographics-page__visual {
	align-content: start;
	align-items: start;
	flex: 0 0 auto;
	gap: 16px;
	grid-template-columns: 1fr;
	min-height: 0;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-infographics-page__chart-wrap,
.village-infographics-page__section[data-section="fasilitas"] .village-infographics-page__chart-wrap {
	padding: 6px 0 0;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__donut-layout {
	gap: 16px;
	grid-template-columns: minmax(170px, 0.76fr) minmax(0, 1fr);
	min-height: 218px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__donut {
	max-width: 205px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__chart,
.village-infographics-page__section[data-section="fasilitas"] .village-home__chart {
	min-height: 228px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__donut-detail {
	border: 1px solid rgba(198, 218, 204, 0.82);
	border-radius: 8px;
	padding: 9px 12px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__data-insight,
.village-infographics-page__section[data-section="fasilitas"] .village-home__data-insight {
	border-radius: 12px;
	justify-content: flex-start;
	min-height: 148px;
	padding: 18px 20px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__data-insight > strong,
.village-infographics-page__section[data-section="fasilitas"] .village-home__data-insight > strong {
	font-size: 36px;
	margin: 10px 0 6px;
}

.village-infographics-page__section[data-section="desil"] .village-infographics-page__chart-wrap {
	padding-right: 6px;
}

.village-infographics-page__section[data-section="desil"] .village-home__column-chart {
	gap: 6px;
	grid-template-columns: repeat(11, minmax(30px, 1fr));
}

.village-infographics-page__section[data-section="desil"] .village-home__column {
	grid-template-rows: 22px 230px 22px;
}

.village-infographics-page__source {
	color: #718078;
	font-size: 11px;
	line-height: 1.7;
	margin: 0;
	max-width: none;
	padding: 0 clamp(14px, 2vw, 34px) 54px;
}

.village-infographics-page__section-source {
	align-items: flex-start;
	background: rgba(237, 246, 239, 0.78);
	border: 1px solid rgba(197, 217, 203, 0.82);
	border-radius: 999px;
	color: #607368;
	display: flex;
	gap: 5px;
	font-size: 11px;
	font-weight: 650;
	line-height: 1.35;
	margin: 16px 0 0;
	padding: 9px 12px;
}

.village-infographics-page__section-source span {
	color: #1f7046;
	font-weight: 850;
	white-space: nowrap;
}

@media (max-width: 1180px) {
	.village-infographics-page__toolbar {
		grid-template-columns: minmax(190px, 1fr) minmax(320px, 480px) minmax(120px, 0.4fr);
	}

	.village-infographics-page__jumps a {
		padding-inline: 9px;
	}
}

@media (max-width: 980px) {
	.village-infographics-page__intro {
		align-items: start;
		grid-template-columns: 1fr;
		min-height: 100svh;
	}

	.village-infographics-page__overview {
		grid-template-columns: minmax(220px, 0.52fr) minmax(0, 1.48fr);
	}

	.village-infographics-page__intro .village-home__data-summary {
		width: 100%;
	}

	.village-infographics-page__toolbar {
		gap: 8px;
		grid-template-columns: 1fr;
		margin-inline: 12px;
	}

	.village-infographics-page__controls,
	.village-infographics-page__view-tabs {
		grid-column: 1;
		margin-inline: auto;
		max-width: min(520px, 100%);
		width: 100%;
	}

	.village-infographics-page__actions {
		justify-content: center;
	}
}

@media (max-width: 760px) {
	.village-infographics-page__intro {
		gap: 28px;
		padding: 42px 18px 32px;
	}

	.village-infographics-page__key-insights {
		gap: 6px;
	}

	.village-infographics-page__key-insights > div {
		min-height: 60px;
		padding: 8px;
	}

	.village-infographics-page__overview {
		display: none;
	}

	.village-infographics-page__intro h1 {
		font-size: 34px;
	}

	.village-infographics-page__intro .village-home__data-summary {
		gap: 8px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.village-infographics-page__intro .village-home__data-summary div {
		min-height: 112px;
		overflow: hidden;
	}

	.village-infographics-page__intro .village-home__data-summary strong {
		font-size: 24px;
	}

	.village-infographics-page__toolbar {
		padding-block: 8px;
	}

	.village-infographics-page__actions {
		display: grid;
		grid-template-columns: auto minmax(130px, 1fr);
		width: 100%;
	}

	.village-infographics-page__controls .village-home__dusun-filter select {
		min-width: 0;
		width: 100%;
	}

	.village-infographics-page__sections {
		grid-template-columns: 1fr;
		padding: 18px 12px 14px;
	}

	.village-infographics-page__section,
	.village-infographics-page__section[data-section="usia"],
	.village-infographics-page__section[data-section="pendidikan"],
	.village-infographics-page__section[data-section="pekerjaan"],
	.village-infographics-page__section[data-section="bantuan"] {
		grid-column: 1;
	}

	.village-infographics-page__section {
		padding: 18px 14px;
		scroll-margin-top: 106px;
	}

	.village-infographics-page__section-head {
		grid-template-columns: 32px minmax(0, 1fr);
	}

	.village-infographics-page__section-head > strong {
		grid-column: 2;
		justify-self: start;
	}

	.village-infographics-page__visual {
		grid-template-columns: 1fr;
	}

	.village-infographics-page__chart-wrap {
		padding: 14px 2px 20px;
	}

	.village-infographics-page__visual .village-home__data-insight {
		min-height: 190px;
	}

	.village-infographics-page__section[data-section="pernikahan"] .village-home__donut-layout {
		grid-template-columns: 1fr;
	}

	.village-infographics-page__section[data-section="desil"] .village-home__chart {
		overflow-x: auto;
	}

	.village-infographics-page__section[data-section="desil"] .village-home__column-chart {
		min-width: 590px;
	}

	.village-infographics-page__source {
		padding: 0 18px 46px;
	}
}

@media (max-width: 460px) {
	.village-infographics-page__actions {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.village-infographics-page__period {
		font-size: 10px;
		padding-inline: 9px;
	}

	.village-infographics-page__download {
		padding-inline: 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.village-infographics-page__updated::after,
	.village-infographics-page__intro .village-home__data-summary div {
		animation: none;
	}

	.village-infographics-page__overview-track span {
		transform: scaleY(1);
		transition: none;
	}
}

.village-infographics-page__controls[hidden],
.village-infographics-page__panel[hidden] {
	display: none !important;
}

.village-infographics-page__intro {
	background:
		radial-gradient(circle at 10% 18%, rgba(57, 140, 91, 0.12), transparent 28%),
		radial-gradient(circle at 84% 28%, rgba(47, 143, 139, 0.11), transparent 30%),
		linear-gradient(135deg, #f7fbf8 0%, #eef7f1 48%, #f9fbf7 100%);
	position: relative;
}

.village-infographics-page__intro::before {
	background:
		linear-gradient(90deg, rgba(31, 112, 70, 0.09) 1px, transparent 1px),
		linear-gradient(0deg, rgba(31, 112, 70, 0.08) 1px, transparent 1px);
	background-size: 38px 38px;
	content: "";
	inset: 0;
	opacity: 0.18;
	pointer-events: none;
	position: absolute;
}

.village-infographics-page__intro > * {
	position: relative;
	z-index: 1;
}

.village-infographics-page__lead h1,
.village-infographics-page__intro h1 {
	font-size: clamp(48px, 5.4vw, 92px);
	max-width: 560px;
}

.village-infographics-page__view-tabs {
	-webkit-backdrop-filter: blur(18px) saturate(1.18);
	backdrop-filter: blur(18px) saturate(1.18);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(226, 239, 229, 0.66));
	border: 1px solid rgba(194, 216, 201, 0.82);
	border-radius: 999px;
	box-shadow: 0 16px 34px rgba(18, 64, 38, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.95);
	display: flex;
	gap: 4px;
	grid-column: 2;
	justify-content: center;
	margin: 0;
	max-width: none;
	overflow-x: auto;
	padding: 5px;
	position: relative;
	scrollbar-width: none;
	width: 100%;
	z-index: 2;
}

.village-infographics-page__view-tabs::-webkit-scrollbar {
	display: none;
}

.village-infographics-page__view-tabs button {
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: #40584a;
	cursor: pointer;
	flex: 1 0 150px;
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	min-height: 42px;
	padding: 10px 20px;
	transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.village-infographics-page__view-tabs button:hover,
.village-infographics-page__view-tabs button:focus-visible {
	background: rgba(255, 255, 255, 0.75);
	color: #17633d;
	outline: none;
}

.village-infographics-page__view-tabs button.is-active {
	background: linear-gradient(135deg, #1e7749, #2f9a64);
	box-shadow: 0 10px 20px rgba(31, 112, 70, 0.22);
	color: #ffffff;
}

.village-infographics-page__sources {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
	max-width: 640px;
}

.village-infographics-page__sources strong,
.village-infographics-page__sources span {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	background: rgba(255, 255, 255, 0.74);
	border: 1px solid rgba(193, 216, 199, 0.9);
	border-radius: 999px;
	color: #315f44;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
	padding: 8px 10px;
}

.village-infographics-page__sources strong {
	background: rgba(31, 112, 70, 0.1);
	color: #17633d;
	text-transform: uppercase;
}

.village-infographics-page__product-spotlight {
	-webkit-backdrop-filter: blur(22px) saturate(1.18);
	backdrop-filter: blur(22px) saturate(1.18);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(225, 241, 231, 0.76)),
		radial-gradient(circle at 88% 0%, rgba(218, 165, 54, 0.16), transparent 28%);
	border: 1px solid rgba(197, 218, 202, 0.9);
	border-radius: 16px;
	box-shadow: 0 24px 55px rgba(18, 62, 37, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
	margin-top: 0;
	overflow: hidden;
	padding: 24px;
	position: relative;
}

.village-infographics-page__product-spotlight::after {
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	content: "";
	height: 180%;
	left: -40%;
	position: absolute;
	top: -40%;
	transform: rotate(16deg);
	width: 24%;
	animation: village-gloss-sweep 7s ease-in-out infinite;
}

.village-infographics-page__product-spotlight > * {
	position: relative;
	z-index: 1;
}

.village-infographics-page__product-spotlight p {
	color: #5c7165;
	font-size: 13px;
	line-height: 1.7;
	margin: 0;
}

.village-infographics-page__product-copy > p:first-child {
	color: #27734a;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.village-infographics-page__product-spotlight h2 {
	color: #123f29;
	font-size: clamp(24px, 2.6vw, 38px);
	letter-spacing: 0;
	line-height: 1.1;
	margin: 0 0 10px;
}

.village-infographics-page__product-metrics {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 16px;
}

.village-infographics-page__product-metrics div {
	background: rgba(31, 112, 70, 0.08);
	border: 1px solid rgba(31, 112, 70, 0.14);
	border-radius: 10px;
	min-width: 0;
	padding: 12px 10px;
}

.village-infographics-page__product-metrics strong,
.village-infographics-page__product-metrics span {
	display: block;
	line-height: 1.2;
}

.village-infographics-page__product-metrics strong {
	color: #17633d;
	font-size: 20px;
}

.village-infographics-page__product-metrics span {
	color: #61736a;
	font-size: 10px;
	font-weight: 800;
	margin-top: 6px;
}

.village-infographics-page__product-cards {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.village-infographics-page__product-cards > div {
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(203, 224, 209, 0.95);
	border-radius: 12px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
	min-width: 0;
	padding: 16px 12px;
}

.village-infographics-page__product-cards small,
.village-infographics-page__product-cards span {
	color: #61736a;
	display: block;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.35;
}

.village-infographics-page__product-cards strong {
	color: #17633d;
	display: block;
	font-size: 23px;
	line-height: 1.1;
	margin: 9px 0 5px;
	overflow-wrap: anywhere;
}

.village-infographics-page__product-strip {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.village-infographics-page__product-strip > div {
	background: rgba(255, 255, 255, 0.64);
	border: 1px solid rgba(204, 224, 209, 0.8);
	border-radius: 12px;
	padding: 12px;
}

.village-infographics-page__product-strip span,
.village-infographics-page__product-strip strong {
	color: #345b43;
	display: block;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.35;
}

.village-infographics-page__product-strip i {
	background: #d9eadf;
	border-radius: 999px;
	display: block;
	height: 8px;
	margin: 9px 0 8px;
	overflow: hidden;
	position: relative;
}

.village-infographics-page__product-strip i::before {
	background: linear-gradient(90deg, #1d7648, #44a86c);
	border-radius: inherit;
	content: "";
	inset: 0 auto 0 0;
	position: absolute;
	width: var(--bar-size);
}

.village-infographics-page__sections {
	align-items: start;
}

.village-infographics-page__section[data-section="umurPiramida"],
.village-infographics-page__section[data-section="pendidikan"],
.village-infographics-page__section[data-section="pekerjaan"],
.village-infographics-page__section[data-section="bantuan"],
.village-infographics-page__section[data-section="produkUnggulan"],
.village-infographics-page__section[data-section="kondisiRumah"],
.village-infographics-page__section[data-section="aset"] {
	grid-column: 1 / -1;
}

.village-infographics-page__section {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(250, 253, 251, 0.84));
	border-color: rgba(202, 222, 207, 0.9);
	border-radius: 16px;
	box-shadow: 0 18px 42px rgba(18, 62, 37, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.village-home__pie-layout {
	align-items: center;
	display: grid;
	gap: 28px;
	grid-template-columns: minmax(210px, 0.78fr) minmax(240px, 1fr);
	min-height: 280px;
}

.village-home__pie {
	aspect-ratio: 1;
	background: var(--chart-gradient);
	border-radius: 50%;
	box-shadow: 0 18px 34px rgba(22, 68, 42, 0.13), inset 0 0 0 14px rgba(255, 255, 255, 0.9);
	display: grid;
	margin: 0 auto;
	max-width: 260px;
	place-items: center;
	width: min(100%, 260px);
}

.village-home__pie-center {
	align-items: center;
	background: rgba(255, 255, 255, 0.94);
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	height: 45%;
	justify-content: center;
	width: 45%;
}

.village-home__pie-center strong {
	color: #123f29;
	font-size: 25px;
	line-height: 1;
}

.village-home__pie-center span {
	color: #647469;
	font-size: 10px;
	font-weight: 800;
	margin-top: 5px;
}

.village-home__pie-details {
	display: grid;
	gap: 10px;
}

.village-home__pie-detail {
	align-items: center;
	background: #f4f9f6;
	border: 1px solid #d7e7dc;
	border-radius: 12px;
	display: grid;
	gap: 10px;
	grid-template-columns: 12px minmax(0, 1fr) auto auto;
	padding: 12px;
}

.village-home__pie-detail i {
	border-radius: 50%;
	height: 10px;
	width: 10px;
}

.village-home__pie-detail span {
	color: #395d48;
	font-size: 12px;
	font-weight: 800;
}

.village-home__pie-detail strong {
	color: #123f29;
	font-size: 15px;
}

.village-home__pie-detail small {
	color: #6d7d72;
	font-size: 11px;
	font-weight: 800;
}

.village-home__pyramid-chart {
	display: grid;
	gap: 6px;
	min-height: 430px;
	padding: 4px 0;
}

.village-home__pyramid-head,
.village-home__pyramid-row {
	align-items: center;
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(160px, 1fr) 64px minmax(160px, 1fr);
}

.village-home__pyramid-head span {
	color: #4d6a59;
	font-size: 11px;
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
}

.village-home__pyramid-row strong {
	color: #31493b;
	font-size: 11px;
	font-weight: 800;
	text-align: center;
}

.village-home__pyramid-bar {
	align-items: center;
	border-radius: 999px;
	display: flex;
	height: 18px;
	overflow: visible;
	position: relative;
}

.village-home__pyramid-bar--female {
	background: linear-gradient(90deg, #f25289, #ff8aac);
	justify-content: flex-start;
	margin-left: auto;
	transform-origin: right;
	width: var(--bar-size);
}

.village-home__pyramid-bar--male {
	background: linear-gradient(90deg, #1d64c7, #1f8beb);
	justify-content: flex-end;
	transform-origin: left;
	width: var(--bar-size);
}

.village-home__pyramid-bar b {
	color: #ffffff;
	font-size: 10px;
	line-height: 1;
	padding-inline: 8px;
}

.village-home__pyramid-note {
	background: #eef8f2;
	border: 1px solid #d1e7d8;
	border-radius: 12px;
	color: #365f48;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
	margin: 14px 0 0;
	padding: 12px 14px;
}

.village-home__creative-chart {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
	min-height: 320px;
}

.village-home__creative-bars {
	display: grid;
	gap: 12px;
}

.village-home__creative-item {
	align-items: center;
	display: grid;
	gap: 12px;
	grid-template-columns: 62px minmax(0, 1fr) minmax(150px, 0.42fr);
}

.village-home__creative-item > strong {
	color: #17633d;
	font-size: 18px;
	text-align: right;
}

.village-home__creative-label {
	min-width: 0;
}

.village-home__creative-label span,
.village-home__creative-label small {
	display: block;
	line-height: 1.35;
}

.village-home__creative-label span {
	color: #3f5949;
	font-size: 12px;
	font-weight: 800;
}

.village-home__creative-label small {
	color: #718078;
	font-size: 10px;
	font-weight: 800;
	margin-top: 3px;
}

.village-home__creative-track {
	background: #e6f0ea;
	border-radius: 999px;
	height: 20px;
	overflow: hidden;
}

.village-home__creative-fill {
	border-radius: inherit;
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
	width: var(--bar-size);
}

.village-home__chart.is-visible .village-home__creative-fill {
	transform: scaleX(1);
}

.village-home__creative-summary {
	background: linear-gradient(145deg, #13703f, #0f4c31);
	border-radius: 16px;
	box-shadow: 0 18px 32px rgba(16, 87, 51, 0.2);
	color: #ffffff;
	padding: 22px;
}

.village-home__creative-summary span,
.village-home__creative-summary p {
	color: rgba(255, 255, 255, 0.78);
	font-size: 12px;
	line-height: 1.7;
	margin: 0;
}

.village-home__creative-summary strong {
	display: block;
	font-size: 44px;
	line-height: 1;
	margin: 18px 0 12px;
}

.village-home__creative-subsectors {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	display: grid;
	gap: 7px;
	margin-top: 16px;
	padding-top: 14px;
}

.village-home__capacity-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 18px;
}

.village-home__capacity-card,
.village-home__housing-card,
.village-home__asset-card,
.village-home__asset-summary {
	background: #f5faf7;
	border: 1px solid #d7e7dc;
	border-radius: 14px;
	min-width: 0;
	padding: 16px;
}

.village-home__capacity-card h4,
.village-home__housing-card h4,
.village-home__asset-card h4 {
	color: #123f29;
	font-size: 15px;
	line-height: 1.25;
	margin: 0;
}

.village-home__capacity-row,
.village-home__housing-row,
.village-home__asset-row {
	align-items: center;
	display: grid;
	gap: 10px;
	margin-top: 10px;
	min-width: 0;
}

.village-home__capacity-row {
	grid-template-columns: minmax(108px, 0.44fr) minmax(0, 1fr) 34px;
}

.village-home__capacity-row > span:first-child,
.village-home__housing-row > span:first-child,
.village-home__asset-row > span:first-child {
	color: #405a49;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.35;
	min-width: 0;
}

.village-home__capacity-row strong,
.village-home__housing-row strong,
.village-home__asset-row strong {
	color: #123f29;
	font-size: 12px;
	text-align: right;
}

.village-home__capacity-track,
.village-home__housing-track,
.village-home__asset-track {
	background: #e4f0e8;
	border-radius: 999px;
	display: block;
	height: 13px;
	overflow: hidden;
}

.village-home__capacity-track i,
.village-home__housing-track i,
.village-home__asset-track i {
	background: linear-gradient(90deg, #1f7046, #4eac70);
	border-radius: inherit;
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 850ms cubic-bezier(0.2, 0.8, 0.2, 1);
	width: var(--bar-size);
}

.village-home__chart.is-visible .village-home__capacity-track i,
.village-home__chart.is-visible .village-home__housing-track i,
.village-home__chart.is-visible .village-home__asset-track i {
	transform: scaleX(1);
}

.village-home__housing-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.village-home__housing-head {
	align-items: start;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin-bottom: 10px;
}

.village-home__housing-head span,
.village-home__housing-row small {
	color: #718078;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.35;
	text-align: right;
}

.village-home__housing-row {
	grid-template-columns: minmax(105px, 0.42fr) minmax(0, 1fr) 38px 48px;
}

.village-home__asset-summary {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 14px;
}

.village-home__asset-summary div {
	background: #ffffff;
	border: 1px solid #dceae1;
	border-radius: 10px;
	padding: 12px;
}

.village-home__asset-summary span,
.village-home__asset-summary strong {
	display: block;
	line-height: 1.2;
}

.village-home__asset-summary span {
	color: #61736a;
	font-size: 10px;
	font-weight: 800;
}

.village-home__asset-summary strong {
	color: #17633d;
	font-size: 24px;
	margin-top: 8px;
}

.village-home__asset-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.village-home__asset-row {
	grid-template-columns: minmax(44px, 0.3fr) minmax(0, 1fr) 38px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"],
.village-infographics-page__section[data-section="fasilitas"] {
	display: grid;
	grid-template-rows: auto auto auto;
	min-height: 0;
	padding: 18px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-infographics-page__section-head,
.village-infographics-page__section[data-section="fasilitas"] .village-infographics-page__section-head {
	margin-bottom: 8px;
	min-height: 112px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-infographics-page__visual,
.village-infographics-page__section[data-section="fasilitas"] .village-infographics-page__visual {
	display: grid;
	flex: 0 0 auto;
	gap: 12px;
	grid-template-rows: 232px 142px;
	min-height: 0;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-infographics-page__chart-wrap,
.village-infographics-page__section[data-section="fasilitas"] .village-infographics-page__chart-wrap {
	align-items: center;
	display: grid;
	min-height: 0;
	padding: 0;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__chart,
.village-infographics-page__section[data-section="fasilitas"] .village-home__chart {
	align-items: center;
	display: grid;
	min-height: 0;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__pie-layout {
	gap: 18px;
	grid-template-columns: minmax(170px, 0.62fr) minmax(0, 0.92fr);
	min-height: 0;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__pie {
	max-width: 214px;
	width: min(100%, 214px);
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__pie-details {
	gap: 8px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__pie-detail {
	border-radius: 10px;
	gap: 8px;
	grid-template-columns: 10px minmax(0, 1fr) auto auto;
	padding: 9px 10px;
}

.village-infographics-page__section[data-section="fasilitas"] .village-home__bar-chart {
	gap: 10px;
}

.village-infographics-page__section[data-section="fasilitas"] .village-home__bar-row {
	gap: 12px;
	grid-template-columns: minmax(145px, 0.9fr) minmax(170px, 1.65fr) 28px;
	min-height: 30px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__data-insight,
.village-infographics-page__section[data-section="fasilitas"] .village-home__data-insight {
	align-self: stretch;
	border-radius: 12px;
	justify-content: center;
	min-height: 0;
	padding: 18px 20px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__data-insight > strong,
.village-infographics-page__section[data-section="fasilitas"] .village-home__data-insight > strong {
	font-size: 34px;
	margin: 8px 0 4px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__data-insight p,
.village-infographics-page__section[data-section="fasilitas"] .village-home__data-insight p {
	margin-top: 8px;
}

.village-infographics-page__section[data-section="sebaranPenduduk"] .village-infographics-page__section-source,
.village-infographics-page__section[data-section="fasilitas"] .village-infographics-page__section-source {
	margin-top: 12px;
}

.village-infographics-page__poster-carousel {
	padding: 28px clamp(14px, 2vw, 34px) 54px;
}

.village-infographics-page__poster-head {
	align-items: end;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	margin: 0 auto 22px;
	max-width: 1180px;
}

.village-infographics-page__poster-head h2 {
	color: #123f29;
	font-size: clamp(30px, 4vw, 56px);
	font-weight: 850;
	letter-spacing: 0;
	line-height: 1.04;
	margin: 8px 0 10px;
}

.village-infographics-page__poster-head p:not(.village-home__section-label) {
	color: #5c7165;
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
	max-width: 620px;
}

.village-infographics-page__poster-track {
	display: grid;
	gap: 18px;
	grid-auto-columns: minmax(320px, min(72vw, 560px));
	grid-auto-flow: column;
	margin: 0 auto;
	max-width: 1220px;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	padding: 6px 4px 22px;
	scroll-padding-inline: 4px;
	scroll-snap-type: x mandatory;
	scrollbar-color: rgba(31, 112, 70, 0.36) rgba(218, 232, 222, 0.9);
}

.village-infographics-page__poster-card {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 248, 0.88));
	border: 1px solid rgba(202, 222, 207, 0.95);
	border-radius: 8px;
	box-shadow: 0 18px 40px rgba(18, 62, 37, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.98);
	overflow: hidden;
	scroll-snap-align: start;
}

.village-infographics-page__poster-card figure {
	background: #ffffff;
	margin: 0;
	padding: 10px;
}

.village-infographics-page__poster-open {
	background: transparent;
	border: 0;
	border-radius: 6px;
	cursor: zoom-in;
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}

.village-infographics-page__poster-open:hover,
.village-infographics-page__poster-open:focus-visible {
	background: transparent;
	outline: 3px solid rgba(31, 112, 70, 0.22);
	outline-offset: 3px;
}

.village-infographics-page__poster-card img {
	aspect-ratio: 2 / 3;
	background: #ffffff;
	border-radius: 6px;
	height: auto;
	object-fit: contain;
	transition: transform 260ms ease;
	width: 100%;
}

.village-infographics-page__poster-open:hover img,
.village-infographics-page__poster-open:focus-visible img {
	transform: scale(1.012);
}

.village-infographics-page__poster-card footer {
	align-items: center;
	border-top: 1px solid rgba(202, 222, 207, 0.75);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 14px 16px;
}

.village-infographics-page__poster-card footer span {
	background: linear-gradient(135deg, #1e7749, #2f9a64);
	border-radius: 999px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 850;
	padding: 7px 10px;
}

.village-infographics-page__poster-card footer strong {
	color: #173f2b;
	font-size: 15px;
	line-height: 1.25;
	text-align: right;
}

.village-infographics-page__lightbox {
	background: transparent;
	border: 0;
	color: #ffffff;
	height: 100%;
	margin: auto;
	max-height: none;
	max-width: none;
	overflow: hidden;
	padding: 0;
	width: 100%;
}

.village-infographics-page__lightbox[open] {
	display: grid;
	place-items: center;
}

.village-infographics-page__lightbox::backdrop {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background: rgba(7, 28, 18, 0.78);
}

.village-infographics-page__lightbox figure {
	align-items: center;
	display: grid;
	gap: 12px;
	margin: 0;
	max-height: 94vh;
	max-width: min(94vw, 1040px);
	padding: 18px;
	position: relative;
	z-index: 1;
}

.village-infographics-page__lightbox img {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.36);
	display: block;
	max-height: 86vh;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.village-infographics-page__lightbox figcaption {
	color: rgba(255, 255, 255, 0.92);
	font-size: 14px;
	font-weight: 800;
	text-align: center;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.32);
}

.village-infographics-page__lightbox-close {
	align-items: center;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 999px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
	color: #123f29;
	cursor: pointer;
	display: inline-flex;
	font-size: 28px;
	font-weight: 700;
	height: 44px;
	justify-content: center;
	line-height: 1;
	padding: 0 0 3px;
	position: fixed;
	right: clamp(14px, 3vw, 32px);
	top: clamp(14px, 3vw, 32px);
	width: 44px;
	z-index: 2;
}

.village-infographics-page__lightbox-close:hover,
.village-infographics-page__lightbox-close:focus-visible {
	background: #1f7046;
	color: #ffffff;
	outline: none;
}

.village-infographics-page__poster-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 26px clamp(14px, 2vw, 34px) 42px;
}

.village-infographics-page__poster {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(250, 253, 251, 0.82)),
		radial-gradient(circle at 12% 16%, rgba(63, 160, 94, 0.14), transparent 30%);
	border: 1px solid rgba(202, 222, 207, 0.9);
	border-radius: 22px;
	box-shadow: 0 20px 46px rgba(18, 62, 37, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.96);
	min-width: 0;
	overflow: hidden;
	padding: 26px;
	position: relative;
}

.village-infographics-page__poster::before {
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
	background-size: 26px 26px;
	content: "";
	inset: 0;
	opacity: 0.24;
	pointer-events: none;
	position: absolute;
}

.village-infographics-page__poster > * {
	position: relative;
	z-index: 1;
}

.village-infographics-page__poster--age {
	background-color: #c9f4f1;
	grid-column: 1 / -1;
}

.village-infographics-page__poster--work {
	background-color: #d8f1cf;
}

.village-infographics-page__poster--marriage {
	background-color: #ffe0e2;
}

.village-infographics-page__poster--product {
	background-color: #fff1a6;
}

.village-infographics-page__poster--facility {
	background-color: #f2efff;
}

.village-infographics-page__poster header span {
	background: rgba(31, 112, 70, 0.1);
	border: 1px solid rgba(31, 112, 70, 0.18);
	border-radius: 999px;
	color: #17633d;
	display: inline-flex;
	font-size: 10px;
	font-weight: 800;
	padding: 7px 10px;
	text-transform: uppercase;
}

.village-infographics-page__poster h2 {
	color: #123f29;
	font-size: clamp(24px, 3.4vw, 52px);
	line-height: 1.08;
	margin: 12px 0 22px;
	max-width: 1080px;
}

.village-infographics-page__poster-pyramid {
	background: rgba(255, 255, 255, 0.76);
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 20px;
	box-shadow: 0 14px 28px rgba(24, 72, 45, 0.1);
	display: grid;
	gap: 5px;
	padding: 20px;
}

.village-infographics-page__poster-pyramid > div {
	align-items: center;
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(120px, 1fr) 58px minmax(120px, 1fr);
}

.village-infographics-page__poster-pyramid strong {
	color: #244634;
	font-size: 12px;
	text-align: center;
}

.village-infographics-page__poster-pyramid i {
	align-items: center;
	border-radius: 999px;
	display: flex;
	font-style: normal;
	height: 22px;
	min-width: 30px;
	width: var(--bar-size);
}

.village-infographics-page__poster-pyramid i:first-child {
	background: linear-gradient(90deg, #ff236a, #ff7aa0);
	justify-content: flex-start;
	margin-left: auto;
}

.village-infographics-page__poster-pyramid i:last-child {
	background: linear-gradient(90deg, #0758d4, #1485ff);
	justify-content: flex-end;
}

.village-infographics-page__poster-pyramid span {
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	padding-inline: 8px;
}

.village-infographics-page__poster footer {
	align-items: center;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(150px, auto)) minmax(240px, 1fr);
	margin-top: 18px;
}

.village-infographics-page__poster footer div,
.village-infographics-page__poster footer p {
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 16px;
	color: #365848;
	line-height: 1.7;
	margin: 0;
	padding: 16px;
}

.village-infographics-page__poster footer strong {
	color: #d82c39;
	display: block;
	font-size: 34px;
	line-height: 1;
}

.village-infographics-page__poster footer span {
	color: #355847;
	font-size: 12px;
	font-weight: 800;
}

.village-infographics-page__poster-split {
	align-items: center;
	display: grid;
	gap: 22px;
	grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 1fr);
}

.village-infographics-page__poster-donut {
	aspect-ratio: 1;
	background: var(--poster-gradient);
	border-radius: 50%;
	box-shadow: inset 0 0 0 28px rgba(255, 255, 255, 0.86), 0 16px 26px rgba(35, 70, 47, 0.16);
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	max-width: 240px;
	text-align: center;
	width: 100%;
}

.village-infographics-page__poster-donut strong {
	color: #123f29;
	font-size: 32px;
	line-height: 1;
}

.village-infographics-page__poster-donut span {
	color: #52675a;
	font-size: 11px;
	font-weight: 800;
	margin-top: 7px;
}

.village-infographics-page__poster-list,
.village-infographics-page__poster-bars {
	display: grid;
	gap: 10px;
}

.village-infographics-page__poster-list p {
	align-items: center;
	background: rgba(255, 255, 255, 0.72);
	border-radius: 12px;
	color: #364f41;
	display: grid;
	font-size: 12px;
	font-weight: 800;
	gap: 10px;
	grid-template-columns: 12px minmax(0, 1fr) auto;
	margin: 0;
	padding: 11px 12px;
}

.village-infographics-page__poster-list i {
	border-radius: 50%;
	height: 10px;
	width: 10px;
}

.village-infographics-page__poster-list strong {
	color: #123f29;
}

.village-infographics-page__poster-bars > div {
	align-items: center;
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(105px, 0.46fr) minmax(0, 1fr) 42px;
}

.village-infographics-page__poster-bars span,
.village-infographics-page__poster-bars strong {
	color: #324f3f;
	font-size: 12px;
	font-weight: 800;
}

.village-infographics-page__poster-bars i {
	background: rgba(255, 255, 255, 0.68);
	border-radius: 999px;
	height: 14px;
	overflow: hidden;
	position: relative;
}

.village-infographics-page__poster-bars i::before {
	background: linear-gradient(90deg, #1d7448, #52af71);
	border-radius: inherit;
	content: "";
	inset: 0 auto 0 0;
	position: absolute;
	width: var(--bar-size);
}

.village-infographics-page__poster-metrics {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 20px;
}

.village-infographics-page__poster-metrics div,
.village-infographics-page__poster-assets div {
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.82);
	border-radius: 16px;
	box-shadow: 0 12px 24px rgba(31, 84, 48, 0.08);
	padding: 18px;
}

.village-infographics-page__poster-metrics strong,
.village-infographics-page__poster-assets strong {
	color: #d73330;
	display: block;
	font-size: clamp(24px, 3vw, 42px);
	line-height: 1;
	margin-bottom: 8px;
}

.village-infographics-page__poster-metrics span,
.village-infographics-page__poster-assets span {
	color: #3f5549;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.45;
}

.village-infographics-page__poster-assets {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@keyframes village-gloss-sweep {
	0%,
	42% {
		transform: translateX(0) rotate(16deg);
	}
	72%,
	100% {
		transform: translateX(560%) rotate(16deg);
	}
}

@media (max-width: 1180px) {
	.village-infographics-page__product-spotlight {
		grid-template-columns: 1fr;
	}

	.village-infographics-page__product-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.village-home__asset-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.village-home__housing-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.village-infographics-page__lead h1,
	.village-infographics-page__intro h1 {
		font-size: 38px;
	}

	.village-infographics-page__intro {
		padding-top: 126px;
	}

	.village-infographics-page__view-tabs {
		max-width: calc(100% - 24px);
	}

	.village-infographics-page__view-tabs button {
		flex-basis: 130px;
	}

	.village-infographics-page__poster-head {
		align-items: stretch;
		flex-direction: column;
	}

	.village-infographics-page__poster-track {
		grid-auto-columns: minmax(82vw, 1fr);
	}

	.village-infographics-page__product-cards,
	.village-infographics-page__product-strip,
	.village-infographics-page__product-metrics,
	.village-home__capacity-grid,
	.village-home__asset-summary,
	.village-home__asset-grid {
		grid-template-columns: 1fr;
	}

	.village-home__pie-layout,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__donut-layout,
	.village-home__creative-chart {
		grid-template-columns: 1fr;
	}

	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-infographics-page__visual,
	.village-infographics-page__section[data-section="fasilitas"] .village-infographics-page__visual {
		grid-template-rows: auto auto;
	}

	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-infographics-page__section-head,
	.village-infographics-page__section[data-section="fasilitas"] .village-infographics-page__section-head {
		min-height: 0;
	}

	.village-home__pyramid-chart {
		overflow-x: auto;
	}

	.village-home__pyramid-head,
	.village-home__pyramid-row {
		min-width: 560px;
	}

	.village-home__creative-item {
		grid-template-columns: 50px minmax(0, 1fr);
	}

	.village-home__creative-label {
		grid-column: 2;
	}

	.village-home__capacity-row,
	.village-home__housing-row,
	.village-home__asset-row {
		grid-template-columns: 1fr;
	}

	.village-home__capacity-row strong,
	.village-home__housing-row strong,
	.village-home__asset-row strong,
	.village-home__housing-row small {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.village-infographics-page__product-spotlight::after {
		animation: none;
	}

	.village-home__creative-fill {
		transform: scaleX(1);
		transition: none;
	}

	.village-home__capacity-track i,
	.village-home__housing-track i,
	.village-home__asset-track i {
		transform: scaleX(1);
		transition: none;
	}
}

@media (max-width: 760px) {
	body .site-main.village-infographics-page {
		overflow-x: hidden;
	}

	.village-infographics-page__intro {
		min-height: auto;
		padding: 118px 14px 30px;
	}

	.village-infographics-page__lead h1,
	.village-infographics-page__intro h1 {
		font-size: clamp(34px, 10vw, 44px);
		line-height: 1.08;
		max-width: 100%;
	}

	.village-infographics-page__product-spotlight {
		border-radius: 16px;
		max-width: 100%;
		padding: 20px 16px;
		width: 100%;
	}

	.village-infographics-page__product-spotlight *,
	.village-infographics-page__product-copy,
	.village-infographics-page__product-copy * {
		max-width: 100%;
		min-width: 0;
	}

	.village-infographics-page__product-spotlight h2 {
		font-size: clamp(24px, 7.5vw, 30px);
		line-height: 1.14;
		overflow-wrap: anywhere;
	}

	.village-infographics-page__product-spotlight p {
		font-size: 13px;
		line-height: 1.65;
		overflow-wrap: break-word;
	}

	.village-infographics-page__product-cards > div,
	.village-infographics-page__product-strip > div,
	.village-infographics-page__product-metrics div {
		overflow: hidden;
	}

	.village-infographics-page__lead > p:last-of-type {
		font-size: 14px;
		line-height: 1.65;
	}

	.village-infographics-page__toolbar {
		gap: 8px;
		grid-template-columns: 1fr;
		margin: -18px 10px 8px;
		padding: 6px 0;
		top: 0;
		z-index: 70;
	}

	.village-infographics-page__controls,
	.village-infographics-page__view-tabs {
		grid-column: 1;
		max-width: 100%;
		width: 100%;
	}

	.village-infographics-page__actions {
		display: grid;
		gap: 8px;
		grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
		width: 100%;
	}

	.village-infographics-page__period,
	.village-infographics-page__select > button[data-region-toggle],
	.village-infographics-page__view-tabs button {
		min-height: 38px;
	}

	.village-infographics-page__period {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		padding-inline: 10px;
	}

	.village-infographics-page__select {
		min-width: 0;
		width: 100%;
	}

	.village-infographics-page__select > button[data-region-toggle] {
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.village-infographics-page__select-menu {
		left: 0;
		min-width: 100%;
		right: auto;
	}

	.village-infographics-page__view-tabs {
		padding: 4px;
	}

	.village-infographics-page__view-tabs button {
		flex: 1 1 0;
		font-size: 13px;
		padding: 8px 12px;
	}

	.village-infographics-page__sections {
		gap: 16px;
		padding: 18px 10px 16px;
	}

	.village-infographics-page__section {
		border-radius: 16px;
		overflow: hidden;
		padding: 18px 14px;
		scroll-margin-top: 118px;
	}

	.village-infographics-page__section-head {
		gap: 10px;
		grid-template-columns: 34px minmax(0, 1fr);
		margin-bottom: 12px;
	}

	.village-infographics-page__section-head h2 {
		font-size: clamp(26px, 8vw, 34px);
		line-height: 1.12;
	}

	.village-infographics-page__section-head div > p:last-child {
		font-size: 14px;
		line-height: 1.55;
	}

	.village-infographics-page__section-head > strong {
		grid-column: 1 / -1;
		justify-self: start;
		max-width: 100%;
		white-space: normal;
	}

	.village-infographics-page__visual,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-infographics-page__visual,
	.village-infographics-page__section[data-section="fasilitas"] .village-infographics-page__visual {
		gap: 14px;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		min-height: 0;
	}

	.village-infographics-page__chart-wrap,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-infographics-page__chart-wrap,
	.village-infographics-page__section[data-section="fasilitas"] .village-infographics-page__chart-wrap {
		padding: 6px 0 0;
	}

	.village-infographics-page__chart-wrap .village-home__chart,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__chart,
	.village-infographics-page__section[data-section="fasilitas"] .village-home__chart {
		min-height: 0;
		width: 100%;
	}

	.village-home__pie-layout,
	.village-home__donut-layout,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__pie-layout,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__donut-layout {
		gap: 16px;
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.village-home__pie,
	.village-home__donut,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__pie {
		max-width: min(70vw, 235px);
		width: min(70vw, 235px);
	}

	.village-home__pie-details,
	.village-home__donut-details {
		width: 100%;
	}

	.village-home__pie-detail,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__pie-detail {
		gap: 7px 9px;
		grid-template-columns: 10px minmax(0, 1fr) auto;
		padding: 10px 12px;
	}

	.village-home__pie-detail small {
		grid-column: 2 / -1;
		justify-self: start;
	}

	.village-home__pie-detail span {
		overflow-wrap: anywhere;
	}

	.village-infographics-page__visual .village-home__data-insight,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__data-insight,
	.village-infographics-page__section[data-section="fasilitas"] .village-home__data-insight {
		border-radius: 14px;
		min-height: 150px;
		padding: 18px;
	}

	.village-infographics-page__visual .village-home__data-insight > strong,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__data-insight > strong,
	.village-infographics-page__section[data-section="fasilitas"] .village-home__data-insight > strong {
		font-size: clamp(38px, 13vw, 52px);
		margin: 8px 0 4px;
	}

	.village-infographics-page__section[data-section="fasilitas"] .village-home__bar-chart {
		gap: 16px;
	}

	.village-infographics-page__section[data-section="fasilitas"] .village-home__bar-row {
		gap: 8px 10px;
		grid-template-columns: minmax(0, 1fr) auto;
		min-height: 0;
	}

	.village-infographics-page__section[data-section="fasilitas"] .village-home__bar-row > span,
	.village-infographics-page__section[data-section="fasilitas"] .village-home__bar-row > strong {
		grid-row: 1;
		min-width: 0;
	}

	.village-infographics-page__section[data-section="fasilitas"] .village-home__bar-track {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
	}

	.village-home__pyramid-chart {
		gap: 5px;
		min-height: 0;
		overflow: hidden;
		width: 100%;
	}

	.village-home__pyramid-head,
	.village-home__pyramid-row {
		gap: 6px;
		grid-template-columns: minmax(72px, 1fr) 52px minmax(72px, 1fr);
		min-width: 0;
		width: 100%;
	}

	.village-home__pyramid-head span,
	.village-home__pyramid-row strong {
		font-size: 10px;
	}

	.village-home__pyramid-bar {
		height: 16px;
		max-width: 100%;
		min-width: 20px;
	}

	.village-home__pyramid-bar b {
		font-size: 9px;
		padding-inline: 5px;
	}

	.village-home__pyramid-note {
		font-size: 12px;
		padding: 10px 12px;
	}

	.village-infographics-page__section-source {
		border-radius: 18px;
		font-size: 11px;
		line-height: 1.45;
		padding: 10px 12px;
	}

	.village-infographics-page__section-source span {
		white-space: nowrap;
	}
}

@media (max-width: 420px) {
	.village-infographics-page__period {
		font-size: 10px;
		padding-inline: 8px;
	}

	.village-infographics-page__view-tabs button {
		font-size: 12px;
		padding-inline: 10px;
	}

	.village-infographics-page__section {
		padding-inline: 12px;
	}

	.village-home__pie,
	.village-home__donut,
	.village-infographics-page__section[data-section="sebaranPenduduk"] .village-home__pie {
		max-width: 220px;
		width: 220px;
	}
}