/*
Theme Name: Panoramic Child
Description: Child theme for the Kelurahan Kumpulrejo website.
Author: Kelurahan Kumpulrejo
Template: panoramic
Version: 1.15.14
Text Domain: panoramic-child
*/

:root {
	--kr-header-background: #00796b;
	--kr-header-background-deep: #00564c;
	--kr-header-border: rgba(255, 255, 255, 0.2);
	--kr-header-text: #ffffff;
	--kr-header-muted: #ccebe6;
	--kr-header-accent: #2dd4bf;
	--kr-header-accent-dark: #00796b;
	--kr-header-panel-text: #171717;
	--kr-header-shadow: 0 18px 44px rgba(0, 40, 35, 0.25);
}

.kr-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	background: var(--kr-header-background);
	color: var(--kr-header-text);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.kr-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: min(calc(100% - 48px), 1400px);
	height: 84px;
	min-height: 84px;
	margin-inline: auto;
	transition: height 180ms ease, min-height 180ms ease, opacity 140ms ease;
}

@media (min-width: 1241px) {
	.kr-site-header.is-scrolled .kr-site-header__inner {
		visibility: hidden;
		height: 0;
		min-height: 0;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
	}
}

body.admin-bar .kr-site-header {
	top: 32px;
}

.kr-site-header__branding {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.kr-site-header__branding .custom-logo-link {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.kr-site-header__branding .custom-logo {
	display: block;
	width: auto;
	max-width: 52px;
	height: 52px;
	object-fit: contain;
}

.kr-site-header__title {
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.kr-site-header__title a {
	color: var(--kr-header-text);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.kr-site-header__title a:hover {
	color: var(--kr-header-accent);
}

.kr-site-header__title-main {
	display: block;
}

.kr-site-header__title-sub {
	display: block;
	font-size: clamp(12px, 1.2vw, 15px);
	font-weight: 600;
	letter-spacing: -0.02em;
	opacity: 0.85;
}

.kr-site-header__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
}

.kr-site-header__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 44px;
	margin: 0;
	padding: 0 17px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	background: transparent;
	color: var(--kr-header-text);
	font-size: 14px;
	font-weight: 750;
	line-height: 1;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* Wider search button on desktop */
.kr-site-header__search-toggle {
	min-width: 120px;
}

@media (max-width: 600px) {
	.kr-site-header__search-toggle {
		min-width: 0;
	}
}

.kr-site-header__button:hover,
.kr-site-header__button:focus-visible,
.kr-site-header__button[aria-expanded="true"] {
	border-color: #ffffff;
	background: #ffffff;
	color: var(--kr-header-background-deep);
}

.kr-site-header__button svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.kr-site-header__menu-toggle {
	display: none;
}

.kr-site-header__menu-label,
.kr-site-header__search-label {
	line-height: 1;
}

.kr-site-header__menu-icon,
.kr-site-header__menu-icon::before,
.kr-site-header__menu-icon::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
	content: "";
	transition: transform 160ms ease, opacity 160ms ease;
}

.kr-site-header__menu-icon {
	position: relative;
}

.kr-site-header__menu-icon::before {
	position: absolute;
	top: -6px;
}

.kr-site-header__menu-icon::after {
	position: absolute;
	top: 6px;
}

.kr-site-header.is-menu-open .kr-site-header__menu-icon {
	background: transparent;
}

.kr-site-header.is-menu-open .kr-site-header__menu-icon::before {
	transform: translateY(6px) rotate(45deg);
}

.kr-site-header.is-menu-open .kr-site-header__menu-icon::after {
	transform: translateY(-6px) rotate(-45deg);
}

.kr-site-header__navigation {
	border-top: 1px solid var(--kr-header-border);
	background: var(--kr-header-background-deep);
}

.kr-site-header__navigation .menu {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 2px;
	width: min(calc(100% - 48px), 1400px);
	min-height: 52px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.kr-site-header__navigation .menu-item {
	position: relative;
	margin: 0;
}

.kr-site-header__navigation > .menu > .menu-item {
	display: flex;
	align-items: stretch;
}

.kr-site-header__navigation > .menu > .menu-item > a {
	text-transform: uppercase;
}

.kr-site-header__navigation a {
	display: flex;
	align-items: center;
	padding: 14px clamp(8px, 0.8vw, 15px);
	color: var(--kr-header-text);
	font-size: clamp(11px, 0.82vw, 13px);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.kr-site-header__navigation > .menu > .menu-item > a:hover,
.kr-site-header__navigation > .menu > .menu-item > a:focus,
.kr-site-header__navigation > .menu > .current-menu-item > a,
.kr-site-header__navigation > .menu > .current-menu-ancestor > a {
	background: transparent;
	box-shadow: inset 0 -3px var(--kr-header-accent);
	color: var(--kr-header-text);
}

.kr-site-header__navigation > .menu > .menu-item-has-children > a::after {
	width: 7px;
	height: 7px;
	margin: -4px 0 0 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	content: "";
	transform: rotate(45deg);
}

.kr-site-header__navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	visibility: hidden;
	width: max-content;
	min-width: 230px;
	max-width: 340px;
	margin: 0;
	padding: 8px;
	border-top: 3px solid var(--kr-header-accent-dark);
	border-radius: 0 0 8px 8px;
	background: #ffffff;
	box-shadow: var(--kr-header-shadow);
	list-style: none;
	opacity: 0;
	transform: translateY(7px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.kr-site-header__navigation .sub-menu .sub-menu {
	top: -8px;
	left: calc(100% + 8px);
	border-radius: 8px;
}

.kr-site-header__navigation > .menu > .menu-item:nth-last-child(-n + 3) > .sub-menu {
	right: 0;
	left: auto;
}

.kr-site-header__navigation .menu-item:hover > .sub-menu,
.kr-site-header__navigation .menu-item:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.kr-site-header__navigation .sub-menu a {
	display: block;
	padding: 11px 12px;
	border-radius: 5px;
	color: var(--kr-header-panel-text);
	font-size: 13px;
	font-weight: 650;
	white-space: normal;
}

.kr-site-header__navigation .sub-menu a:hover,
.kr-site-header__navigation .sub-menu a:focus,
.kr-site-header__navigation .sub-menu .current-menu-item > a {
	background: #e6f6f4;
	color: var(--kr-header-accent-dark);
}

.kr-submenu-toggle {
	display: none;
}

.kr-site-header__search-panel {
	position: absolute;
	top: 76px;
	right: max(24px, calc((100% - 1400px) / 2));
	z-index: 30;
	display: block;
	width: min(calc(100% - 48px), 430px);
	padding: 18px;
	border-top: 4px solid var(--kr-header-accent-dark);
	border-radius: 0 0 10px 10px;
	background: #ffffff;
	box-shadow: var(--kr-header-shadow);
}

.kr-site-header__search-panel[hidden] {
	display: none;
}

.kr-site-header__search-panel .search-form {
	display: flex;
	gap: 8px;
	margin: 0;
}

.kr-site-header__search-panel .search-field {
	min-width: 0;
	margin: 0;
	border: 1px solid #8fa69a;
	border-radius: 6px;
	color: var(--kr-header-panel-text);
}

.kr-site-header__search-panel .search-submit {
	margin: 0;
	padding-inline: 18px;
	border: 0;
	border-radius: 6px;
	background: var(--kr-header-accent-dark);
	color: #ffffff;
	font-weight: 750;
}

.kr-site-header__search-panel .search-submit:hover,
.kr-site-header__search-panel .search-submit:focus {
	background: var(--kr-header-background-deep);
}

.kr-site-header__button:focus-visible,
.kr-site-header a:focus-visible,
.kr-site-header input:focus-visible {
	outline: 3px solid var(--kr-header-accent);
	outline-offset: 3px;
}

@media (max-width: 1240px) {
	.kr-site-header__inner {
		width: calc(100% - 32px);
		height: 76px;
		min-height: 76px;
	}

	.kr-site-header__menu-toggle {
		display: inline-flex;
	}

	.kr-site-header__navigation {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: none;
		max-height: calc(100vh - 92px);
		padding: 14px 16px 20px;
		overflow-y: auto;
		border-top: 1px solid var(--kr-header-border);
		border-bottom: 1px solid var(--kr-header-border);
		background: #ffffff;
		box-shadow: var(--kr-header-shadow);
	}

	.kr-site-header.is-menu-open .kr-site-header__navigation {
		display: block;
	}

	.kr-site-header__navigation .menu {
		display: block;
		width: min(100%, 760px);
		min-height: 0;
	}

	.kr-site-header__navigation > .menu > .menu-item {
		display: block;
	}

	.kr-site-header__navigation a,
	.kr-site-header__navigation > .menu > .menu-item > a {
		display: block;
		padding: 12px 11px;
		border-radius: 5px;
		color: var(--kr-header-panel-text);
		font-size: 14px;
	}

	.kr-site-header__navigation > .menu > .menu-item > a:hover,
	.kr-site-header__navigation > .menu > .menu-item > a:focus,
	.kr-site-header__navigation > .menu > .current-menu-item > a,
	.kr-site-header__navigation > .menu > .current-menu-ancestor > a {
		background: transparent;
		box-shadow: inset 0 -3px var(--kr-header-accent-dark);
		color: var(--kr-header-panel-text);
	}

	.kr-site-header__navigation > .menu > .menu-item-has-children > a::after {
		display: none;
	}

	.kr-site-header__navigation .menu-item-has-children {
		position: relative;
	}

	.kr-site-header__navigation .menu-item-has-children > a {
		padding-right: 48px;
	}

	.kr-submenu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 4px;
		background: transparent;
		color: var(--kr-header-panel-text);
		cursor: pointer;
		transition: background-color 150ms ease, color 150ms ease;
	}

	.kr-submenu-toggle:hover,
	.kr-submenu-toggle:focus-visible {
		background: rgba(0, 121, 107, 0.08);
		color: var(--kr-header-accent-dark);
	}

	.kr-submenu-toggle svg {
		width: 18px;
		height: 18px;
		stroke: currentColor;
		fill: none;
		stroke-width: 2.2;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: transform 200ms ease;
	}

	.kr-site-header__navigation .menu-item-has-children.is-open > .kr-submenu-toggle svg {
		transform: rotate(180deg);
	}

	.kr-site-header__navigation .sub-menu {
		display: none;
		position: static;
		visibility: visible;
		width: auto;
		min-width: 0;
		max-width: none;
		margin: 0 0 4px 14px;
		padding: 0 0 0 10px;
		border: 0;
		border-left: 2px solid #d6dbe5;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		transform: none;
	}

	.kr-site-header__navigation > .menu > .menu-item:nth-last-child(-n + 3) > .sub-menu {
		right: auto;
		left: auto;
	}

	.kr-site-header__navigation .menu-item-has-children.is-open > .sub-menu {
		display: block !important;
	}

	.kr-site-header__search-panel {
		top: 76px;
		right: 16px;
	}
}

@media (max-width: 782px) {
	body.admin-bar .kr-site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar .kr-site-header {
		top: 0;
	}

	.kr-site-header__inner {
		gap: 12px;
		width: calc(100% - 24px);
		height: 70px;
		min-height: 70px;
	}

	.kr-site-header__branding {
		gap: 9px;
	}

	.kr-site-header__branding .custom-logo {
		max-width: 40px;
		height: 40px;
	}

	.kr-site-header__title {
		max-width: 176px;
		font-size: 16px;
	}

	.kr-site-header__title-sub {
		font-size: 11px;
	}

	.kr-site-header__button {
		width: 42px;
		height: 42px;
		padding: 0;
	}

	.kr-site-header__menu-label,
	.kr-site-header__search-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.kr-site-header__search-panel {
		top: 70px;
		right: 12px;
		width: calc(100% - 24px);
		padding: 14px;
	}

	.kr-site-header__search-panel .search-form {
		flex-direction: column;
	}

	.kr-site-header__search-panel .search-submit {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kr-site-header *,
	.kr-site-header *::before,
	.kr-site-header *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}


/* ==========================================================================
   Beranda (Homepage) & Elementor Layout Modernization
   ========================================================================== */

/* Container & Main Layout */
/* Neutralize parent theme's site-container padding on mobile to prevent double-padding overflow */
.home .site-content.site-container {
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

.home .site-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 36px;
	width: 100%;
	max-width: 1360px;
	margin: 36px auto;
	align-items: start;
	box-sizing: border-box;
}

.home .content-area {
	width: 100% !important;
	min-width: 0 !important;
	float: none !important;
	padding: 0 !important;
	overflow-x: hidden !important;
}

.home .widget-area {
	width: 100% !important;
	min-width: 0 !important;
	float: none !important;
	padding: 0 !important;
}

@media (max-width: 1024px) {
	.home .site-content {
		grid-template-columns: 1fr;
		gap: 32px;
		width: 100%;
		margin: 24px auto;
	}
}

@media (max-width: 600px) {
	.home .site-content.site-container {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* Section Cards & Visual Polish */
.home .elementor-905 .elementor-section {
	margin-bottom: 28px !important;
}

/* Map Section */
.home .elementor-905 .elementor-element-6497a44 .elementor-custom-embed {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 40, 35, 0.08);
	border: 1px solid #e2e8f0;
	transition: box-shadow 0.25s ease;
}

.home .elementor-905 .elementor-element-6497a44 .elementor-custom-embed:hover {
	box-shadow: 0 10px 28px rgba(0, 40, 35, 0.14);
}

.home .elementor-905 .elementor-element-6497a44 iframe {
	height: 340px !important;
	width: 100%;
	display: block;
}

/* Section Title Headers - Matched to Components (Left-Aligned, No Center Indent) */
.home .elementor-905 .elementor-element-6b8e8d6::before,
.home .elementor-905 .elementor-element-42e4eee::before,
.home .elementor-905 .elementor-element-ab501aa::before,
.home .elementor-905 .elementor-element-5ca4cf5::before,
.home .elementor-905 .elementor-element-6497a44::before {
	display: block;
	margin-bottom: 14px;
	padding-left: 12px;
	border-left: 4px solid var(--kr-header-background);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kr-header-background-deep);
	text-align: left !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.home .elementor-905 .elementor-element-42e4eee,
.home .elementor-905 .elementor-element-ab501aa {
	text-align: left !important;
}

/* Default all Elementor images on Beranda to center-aligned */
.home .elementor-905 .elementor-widget-image {
	text-align: center !important;
}

.home .elementor-905 .elementor-widget-image img {
	margin-left: auto;
	margin-right: auto;
}

/* 1. Infografis: Profil Kesehatan & Jumlah Penduduk */
.home .elementor-905 .elementor-element-6b8e8d6::before {
	content: "Infografis Kependudukan & Profil Kesehatan";
}

/* 2. UMKM Unggulan */
.home .elementor-905 .elementor-element-42e4eee::before {
	content: "UMKM Unggulan Kelurahan Kumpulrejo";
}

/* 3. Banner Statistik RW - Now with unified section title */
.home .elementor-905 .elementor-element-ab501aa {
	margin-top: 28px !important;
}

.home .elementor-905 .elementor-element-ab501aa::before {
	content: "Data Statistik per Wilayah RW (01 - 10)";
	display: block;
	margin-bottom: 14px;
	padding-left: 12px;
	border-left: 4px solid var(--kr-header-background);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kr-header-background-deep);
}

/* 4. Direktori 10 RW - Hide duplicate header */
.home .elementor-905 .elementor-element-5ca4cf5::before {
	display: none !important;
}

/* 5. Peta Lokasi Kantor */
.home .elementor-905 .elementor-element-6497a44::before {
	content: "Peta Lokasi Kantor Kelurahan Kumpulrejo";
}

/* Infografis 2-Column Section */
.home .elementor-905 .elementor-element-6b8e8d6 > .elementor-container {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 20px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.home .elementor-905 .elementor-element-6b8e8d6 .elementor-column {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

.home .elementor-905 .elementor-element-6b8e8d6 .elementor-widget-image {
	background: #ffffff;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 16px rgba(0, 40, 35, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	padding: 12px;
}

.home .elementor-905 .elementor-element-6b8e8d6 .elementor-widget-image:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 40, 35, 0.12);
	border-color: var(--kr-header-background);
}

.home .elementor-905 .elementor-element-6b8e8d6 img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

@media (max-width: 680px) {
	.home .elementor-905 .elementor-element-6b8e8d6 > .elementor-container {
		grid-template-columns: 1fr !important;
	}
}

/* Landscape Photos / Statistik Banner (Cards separated from section titles) */
.home .elementor-905 .elementor-element-89b234f .elementor-widget-image {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-bottom: 28px !important;
}

.home .elementor-905 .elementor-element-89b234f .elementor-widget-container {
	background: #ffffff;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 16px rgba(0, 40, 35, 0.06);
	padding: 10px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home .elementor-905 .elementor-element-89b234f .elementor-widget-container:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 40, 35, 0.1);
}

.home .elementor-905 .elementor-element-89b234f img {
	border-radius: 8px;
	display: block;
	width: 100%;
	height: auto;
}

/* 10 RW Cards Grid (Row 1 & Row 2) */
/* Prevent grid blowout: grid children need min-width:0 to stay inside the track */
.home .elementor-905 .elementor-element-5ca4cf5,
.home .elementor-905 .elementor-element-46fe527 {
	max-width: 100% !important;
	overflow: hidden !important;
}

.home .elementor-905 .elementor-element-5ca4cf5 > .elementor-container,
.home .elementor-905 .elementor-element-46fe527 > .elementor-container {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 14px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.home .elementor-905 .elementor-element-5ca4cf5 .elementor-column,
.home .elementor-905 .elementor-element-46fe527 .elementor-column {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	overflow: hidden !important;
}

.home .elementor-905 figure.wp-caption {
	margin: 0 !important;
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.home .elementor-905 figure.wp-caption:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 24px rgba(0, 121, 107, 0.15);
	border-color: var(--kr-header-background);
}

.home .elementor-905 figure.wp-caption a {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.home .elementor-905 figure.wp-caption img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.home .elementor-905 figure.wp-caption:hover img {
	transform: scale(1.06);
}

.home .elementor-905 .widget-image-caption {
	padding: 10px 6px !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--kr-header-background-deep);
	background: #f0fdf9;
	text-align: center;
	border-top: 1px solid #e2e8f0;
	transition: background-color 0.2s ease, color 0.2s ease;
	margin: 0;
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.home .elementor-905 figure.wp-caption:hover .widget-image-caption {
	background: var(--kr-header-background);
	color: #ffffff;
}

@media (max-width: 900px) {
	.home .elementor-905 .elementor-element-5ca4cf5 > .elementor-container,
	.home .elementor-905 .elementor-element-46fe527 > .elementor-container {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 540px) {
	.home .elementor-905 .elementor-element-5ca4cf5 > .elementor-container,
	.home .elementor-905 .elementor-element-46fe527 > .elementor-container {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
}

/* Sidebar Widgets Modernization */
.home #secondary .widget {
	background: #ffffff;
	border-radius: 14px;
	padding: 22px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.04);
	margin-bottom: 24px;
	transition: box-shadow 0.2s ease;
}

.home #secondary .widget:hover {
	box-shadow: 0 6px 20px rgba(0, 40, 35, 0.08);
}

.home #secondary .widget-title,
.home #secondary h2.widgettitle {
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--kr-header-background-deep);
	border-bottom: 2px solid var(--kr-header-background);
	padding-bottom: 8px;
	margin-bottom: 16px;
}

/* Lurah Widget */
.home #secondary .widget figure {
	margin: 0;
}

.home #secondary .widget figure img {
	border-radius: 10px;
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.home #secondary .widget figure figcaption {
	font-weight: 800;
	font-size: 14px;
	color: #1e293b;
	text-align: center;
	margin-top: 10px;
	letter-spacing: 0.02em;
}

/* Sidebar Search Widget - Unified for All Pages */
#secondary .search-form {
	display: flex;
	gap: 8px;
}

#secondary .search-form .search-field {
	flex: 1;
	min-width: 0;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#secondary .search-form .search-field:focus {
	border-color: var(--kr-header-background);
	box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.15);
}

#secondary .search-form .search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	border: 0;
	border-radius: 8px;
	background: var(--kr-header-background);
	color: #ffffff;
	padding: 0 12px;
	cursor: pointer;
	font-weight: 700;
	transition: background-color 0.18s ease, transform 0.15s ease;
	text-decoration: none;
}

#secondary .search-form .search-submit:hover {
	background: var(--kr-header-background-deep);
	transform: translateY(-1px);
}

#secondary .search-form .search-submit i {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	line-height: 1;
}

/* Sidebar Quick Links */
.home #secondary .widget figure a {
	display: block;
	text-decoration: none;
}

.home #secondary .widget strong {
	display: inline-block;
	font-size: 13px;
	line-height: 1.4;
	color: #334155;
}

.home #secondary .widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.home #secondary .widget ul li {
	padding: 8px 0;
	border-bottom: 1px dashed #e2e8f0;
}

.home #secondary .widget ul li:last-child {
	border-bottom: none;
}

.home #secondary .widget ul li a {
	color: #334155;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.18s ease, padding-left 0.18s ease;
	display: inline-block;
}

.home #secondary .widget ul li a:hover {
	color: var(--kr-header-background);
	padding-left: 4px;
}

/* Hide Unofficial Social Media & Share Buttons (Twitter, Facebook, AddToAny, etc.) */
.addtoany_share_save_container,
.addtoany_list,
.a2a_kit,
.social-links {
	display: none !important;
}

/* ==========================================================================
   Header Image – Improve Mobile Display
   ========================================================================== */

/* ==========================================================================
   Header Image with Left-Aligned Modern Design
   ========================================================================== */

.kr-header-image {
	position: relative;
	min-height: 280px;
	overflow: hidden;
	background: var(--kr-header-background-deep);
}

.kr-header-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover !important;
	object-position: center;
}

.kr-header-image__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	background: linear-gradient(
		to right,
		rgba(0, 86, 76, 0.92) 0%,
		rgba(0, 86, 76, 0.75) 40%,
		rgba(0, 86, 76, 0.35) 70%,
		rgba(0, 86, 76, 0) 100%
	);
	z-index: 2;
}

.kr-header-image__container {
	width: min(calc(100% - 48px), 1400px);
	margin-inline: auto;
}

.kr-header-image__content {
	max-width: 640px;
	padding: 32px 0;
	color: #ffffff;
	text-align: left;
}

.kr-header-image__content h1,
.kr-header-image__content h2,
.kr-header-image__title {
	font-size: clamp(26px, 3.4vw, 42px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin: 0 0 10px 0;
	color: #ffffff;
	text-transform: none;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.kr-header-image__content p,
.kr-header-image__meta {
	font-size: clamp(16px, 1.55vw, 21px);
	font-weight: 400;
	line-height: 1.55;
	margin: 0 0 12px 0;
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.kr-header-image__content p:last-child,
.kr-header-image__meta:last-child {
	margin-bottom: 0;
}

.kr-header-image__content a {
	color: var(--kr-header-accent);
	text-decoration: none;
	font-weight: 600;
	transition: color 120ms ease;
}

.kr-header-image__content a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.kr-header-image__content a.button {
	display: inline-block;
	padding: 12px 28px;
	margin-top: 8px;
	background: var(--kr-header-accent);
	color: var(--kr-header-background-deep);
	font-weight: 600;
	font-size: 16px;
	border-radius: 6px;
	text-decoration: none;
	text-shadow: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: all 150ms ease;
}

.kr-header-image__content a.button:hover {
	background: #ffffff;
	color: var(--kr-header-background-deep);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* Tablet adjustments */
@media (min-width: 601px) {
	.kr-header-image {
		min-height: 340px;
	}
	
	.kr-header-image img {
		min-height: 340px;
	}
	
	.kr-header-image__content {
		padding: 40px 0;
	}
}

/* Desktop adjustments */
@media (min-width: 1025px) {
	.kr-header-image {
		min-height: 420px;
	}
	
	.kr-header-image img {
		min-height: 420px;
	}
	
	.kr-header-image__content {
		max-width: 720px;
		padding: 56px 0;
	}
}

/* Override parent theme's centered overlay styles for our new design */
.kr-header-image .kr-header-image__overlay {
	text-align: left !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Hide parent theme's loading state styles */
.kr-header-image.loading .kr-header-image__overlay {
	opacity: 1 !important;
	visibility: visible !important;
}

/* ==========================================================================
   Accessibility Button – Move to Bottom Right (UserWay)
   ========================================================================== */

/* UserWay Accessibility Widget – Reposition to Bottom Right */
.uwy.userway_p1,
.userway_buttons_wrapper,
iframe.uwif.userway_p1 {
	position: fixed !important;
	top: auto !important;
	right: 20px !important;
	bottom: 20px !important;
	left: auto !important;
	z-index: 9999 !important;
	transform: none !important;
}

/* Adjust for mobile screens */
@media (max-width: 600px) {
	.uwy.userway_p1,
	.userway_buttons_wrapper,
	iframe.uwif.userway_p1 {
		right: 12px !important;
		bottom: 12px !important;
	}
}

/* -------------------------------------------------------------------------
   Section Reordering (CSS Flexbox Layout)
   ------------------------------------------------------------------------- */
.home .elementor-905 {
	display: flex !important;
	flex-direction: column !important;
}

/* 1. Infografis Kependudukan & Profil Kesehatan at the Top */
.home .elementor-905 .elementor-element-6b8e8d6 {
	order: 1 !important;
}

/* 2. UMKM Unggulan & Banner Statistik RW (Directly Preceding RW Directory) */
.home .elementor-905 .elementor-element-89b234f {
	order: 2 !important;
}

/* 3. Hide Empty Elementor Gap Section */
.home .elementor-905 .elementor-element-1b85cce {
	display: none !important;
}

/* 4. 10 RW Statistics Directory (Unified Grid) */
.home .elementor-905 .elementor-element-5ca4cf5 {
	order: 3 !important;
	margin-bottom: 14px !important;
}

.home .elementor-905 .elementor-element-46fe527 {
	order: 4 !important;
}

/* 5. Google Maps Location Section (Moved to Bottom) */
.home .elementor-905 .elementor-element-6497a44 {
	order: 5 !important;
	margin-top: 16px !important;
}

/* 6. Entry Content Wrapper */
.home .entry-content .addtoany_share_save_container {
	display: none !important;
}


/* ==========================================================================
   Global Mobile Overflow Fix
   ========================================================================== */

/* site-content must never exceed viewport */
.site-content,
.site-container {
	max-width: 100%;
	overflow-x: hidden;
}

/* Every Elementor structural element must stay in bounds */
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap,
.elementor-widget-container {
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* iframes (Google Maps, embeds) must never overflow */
iframe {
	max-width: 100% !important;
}

/* Elementor spacers must not carry a fixed width */
.elementor-spacer {
	max-width: 100% !important;
	min-width: 0 !important;
}

/* Google Maps embed -- force fluid */
.elementor-custom-embed,
.elementor-custom-embed iframe {
	width: 100% !important;
	max-width: 100% !important;
}

/* Elementor-905 section guard */
.home .elementor-905 {
	max-width: 100% !important;
	overflow-x: hidden !important;
}

.home .content-area {
	overflow-x: hidden !important;
}

/* Sticky Sidebar on Desktop */
@media (min-width: 1025px) {
	.home #secondary.widget-area {
		position: sticky;
		top: 100px;
	}
}



/* ==========================================================================
   Sebaran UMKM – Page & Sub-page Redesign
   Targets: .page-id-1477 (index), .page .entry-content (tables)
   Matches Beranda design language (card system, teal palette, sidebar widgets)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared: Inner-page layout (UMKM & any standard page with sidebar)
   -------------------------------------------------------------------------- */

/* Mirror Beranda's two-column grid for standard pages with sidebar */
.page:not(.home) .site-content.site-container {
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

.page:not(.home) .site-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 36px;
	width: 100%;
	max-width: 1360px;
	margin: 36px auto;
	align-items: start;
	box-sizing: border-box;
}

.page:not(.home) .content-area {
	width: 100% !important;
	min-width: 0 !important;
	float: none !important;
	padding: 0 !important;
}

.page:not(.home) .widget-area {
	width: 100% !important;
	min-width: 0 !important;
	float: none !important;
	padding: 0 !important;
}

@media (max-width: 1024px) {
	.page:not(.home) .site-content {
		grid-template-columns: 1fr;
		gap: 28px;
		margin: 24px auto;
	}
}

@media (max-width: 600px) {
	.page:not(.home) .site-content.site-container {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* Sticky Sidebar – inner pages */
@media (min-width: 1025px) {
	.page:not(.home) #secondary.widget-area {
		position: sticky;
		top: 100px;
	}
}

/* --------------------------------------------------------------------------
   2. Shared: Sidebar Widgets (inner pages – mirror Beranda)
   -------------------------------------------------------------------------- */

.page:not(.home) #secondary .widget {
	background: #ffffff;
	border-radius: 14px;
	padding: 22px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.04);
	margin-bottom: 24px;
	transition: box-shadow 0.2s ease;
}

.page:not(.home) #secondary .widget:hover {
	box-shadow: 0 6px 20px rgba(0, 40, 35, 0.08);
}

.page:not(.home) #secondary .widget-title,
.page:not(.home) #secondary h2.widgettitle {
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--kr-header-background-deep);
	border-bottom: 2px solid var(--kr-header-background);
	padding-bottom: 8px;
	margin-bottom: 16px;
}

.page:not(.home) #secondary .widget figure {
	margin: 0;
}

.page:not(.home) #secondary .widget figure img {
	border-radius: 10px;
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.page:not(.home) #secondary .widget figure figcaption {
	font-weight: 800;
	font-size: 14px;
	color: #1e293b;
	text-align: center;
	margin-top: 10px;
	letter-spacing: 0.02em;
}

.page:not(.home) #secondary .search-form {
	display: flex;
	gap: 8px;
}

.page:not(.home) #secondary .search-form .search-field {
	flex: 1;
	min-width: 0;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 14px;
	outline: none;
}

.page:not(.home) #secondary .search-form .search-field:focus {
	border-color: var(--kr-header-background);
	box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.15);
}

.page:not(.home) #secondary .search-form .search-submit {
	border: 0;
	border-radius: 8px;
	background: var(--kr-header-background);
	color: #ffffff;
	padding: 0 16px;
	cursor: pointer;
	font-weight: 700;
	transition: background-color 0.18s ease;
}

.page:not(.home) #secondary .search-form .search-submit:hover {
	background: var(--kr-header-background-deep);
}

.page:not(.home) #secondary .widget figure a {
	display: block;
	text-decoration: none;
}

.page:not(.home) #secondary .widget strong {
	display: inline-block;
	font-size: 13px;
	line-height: 1.4;
	color: #334155;
}

.page:not(.home) #secondary .widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.page:not(.home) #secondary .widget ul li {
	padding: 8px 0;
	border-bottom: 1px dashed #e2e8f0;
}

.page:not(.home) #secondary .widget ul li:last-child {
	border-bottom: none;
}

.page:not(.home) #secondary .widget ul li a {
	color: #334155;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.18s ease, padding-left 0.18s ease;
	display: inline-block;
}

.page:not(.home) #secondary .widget ul li a:hover {
	color: var(--kr-header-background);
	padding-left: 4px;
}

/* --------------------------------------------------------------------------
   3. Inner-page Entry Header (page title region)
   -------------------------------------------------------------------------- */

/* Page title bar – styled like the section-header labels on Beranda */
.page:not(.home) .entry-header {
	margin: 0 0 28px;
	padding: 0;
}

.page:not(.home) .entry-header .entry-title {
	display: inline-block;
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--kr-header-background-deep);
	border-left: 5px solid var(--kr-header-background);
	padding-left: 14px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   4. UMKM Index Page – Category Cards
   ========================================================================== */

/* Wrapper for the category list (the <ul> inside .entry-content on index page) */
.page-id-1477 .entry-content > ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
}

.page-id-1477 .entry-content > ul > li {
	margin: 0;
	padding: 0;
}

/* Each category card */
.page-id-1477 .entry-content > ul > li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	border-radius: 12px;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	box-shadow: 0 2px 10px rgba(0, 40, 35, 0.05);
	color: var(--kr-header-background-deep);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.page-id-1477 .entry-content > ul > li a::before {
	content: "";
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--kr-header-background);
	transition: background 0.2s ease, transform 0.2s ease;
}

.page-id-1477 .entry-content > ul > li a:hover {
	background: var(--kr-header-background);
	border-color: var(--kr-header-background);
	box-shadow: 0 6px 20px rgba(0, 121, 107, 0.18);
	color: #ffffff;
	transform: translateY(-3px);
}

.page-id-1477 .entry-content > ul > li a:hover::before {
	background: rgba(255, 255, 255, 0.7);
	transform: scale(1.3);
}

/* Intro paragraph on index page */
.page-id-1477 .entry-content > p {
	font-size: 15px;
	color: #475569;
	line-height: 1.7;
	margin-bottom: 8px;
	background: #f0fdf9;
	border-left: 4px solid var(--kr-header-background);
	border-radius: 0 8px 8px 0;
	padding: 12px 16px;
}

@media (max-width: 540px) {
	.page-id-1477 .entry-content > ul {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   5. UMKM Sub-pages – directory tables
   -------------------------------------------------------------------------- */

/* ============================================================================
   UMKM Directory - RW Filter & Statistics
   -------------------------------------------------------------------------- */

.kr-umkm-filter-container {
	margin: 0 0 32px 0;
	padding: 0;
}

.kr-umkm-filter-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	padding: 20px 24px;
	border: 1.5px solid #dce8e6;
	border-radius: 14px;
	background: linear-gradient(135deg, #f0fdf9 0%, #ffffff 100%);
	box-shadow: 0 4px 18px rgba(0, 86, 76, 0.06);
}

.kr-umkm-filter-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: #00564c;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
}

.kr-umkm-filter-label svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: #00796b;
}

.kr-umkm-rw-select {
	flex: 1;
	min-width: 220px;
	padding: 12px 44px 12px 16px;
	border: 1.5px solid #cbd5e1;
	border-radius: 10px;
	background: #ffffff;
	color: #1e293b;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300796b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
}

.kr-umkm-rw-select:hover {
	border-color: #00796b;
	box-shadow: 0 2px 10px rgba(0, 121, 107, 0.12);
}

.kr-umkm-rw-select:focus {
	border-color: #00796b;
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.15);
}

.kr-umkm-stats {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border-radius: 8px;
	background: #00796b;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.kr-umkm-stats svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	opacity: 0.9;
}

.kr-umkm-stats strong {
	color: #ffffff;
	font-weight: 800;
}

/* RW Group Container */
.kr-umkm-rw-group {
	margin-bottom: 0;
}

.kr-umkm-rw-group[style*="display: none"] {
	display: none !important;
}

/* Adjust spacing when filter is active */
.kr-umkm-filter-container + .kr-umkm-rw-group .kr-umkm-rw-title {
	margin-top: 0 !important;
}

@media (max-width: 768px) {
	.kr-umkm-filter-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 18px 16px;
	}

	.kr-umkm-filter-label {
		font-size: 14px;
	}

	.kr-umkm-rw-select {
		min-width: 100%;
		font-size: 14px;
	}

	.kr-umkm-stats {
		justify-content: center;
		font-size: 13px;
	}
}

/* ============================================================================
   UMKM Directory - Table Styling
   -------------------------------------------------------------------------- */

.kr-umkm-directory .entry-content {
	color: #334155;
}

.kr-umkm-directory .kr-umkm-rw-title {
	position: relative;
	z-index: 1;
	margin: 32px 0 0;
	padding: 14px 18px;
	border-radius: 14px 14px 0 0;
	background: linear-gradient(110deg, var(--kr-header-background-deep), var(--kr-header-background));
	box-shadow: 0 8px 24px rgba(0, 86, 76, 0.16);
	color: #ffffff !important;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kr-umkm-directory .kr-umkm-rw-title strong {
	color: #ffffff !important;
}

.kr-umkm-directory .kr-umkm-rw-title::before {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 10px;
	border: 3px solid rgba(255, 255, 255, 0.52);
	border-radius: 50%;
	background: #ffffff;
	content: "";
	vertical-align: 1px;
}

.kr-umkm-directory .entry-content figure.kr-umkm-table-wrap {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 22px 0 30px !important;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #dce8e6;
	border-top: 4px solid var(--kr-header-background);
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 10px 30px rgba(15, 76, 68, 0.09);
	box-sizing: border-box;
	scrollbar-color: #80cbc4 #edf7f5;
	scrollbar-width: thin;
}

.kr-umkm-directory--split .entry-content figure.kr-umkm-table-wrap {
	margin-top: 0 !important;
	border-top: 0;
	border-radius: 0 0 14px 14px;
}

.kr-umkm-directory .entry-content figure.kr-umkm-table-wrap:focus-visible {
	outline: 3px solid rgba(0, 121, 107, 0.3);
	outline-offset: 3px;
}

.kr-umkm-directory .entry-content figure.kr-umkm-table-wrap::-webkit-scrollbar {
	height: 10px;
}

.kr-umkm-directory .entry-content figure.kr-umkm-table-wrap::-webkit-scrollbar-track {
	background: #edf7f5;
}

.kr-umkm-directory .entry-content figure.kr-umkm-table-wrap::-webkit-scrollbar-thumb {
	border: 2px solid #edf7f5;
	border-radius: 999px;
	background: #80cbc4;
}

.kr-umkm-directory .entry-content table.kr-umkm-table {
	width: 100%;
	min-width: 760px;
	margin: 0 !important;
	border: 0 !important;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: auto;
	font-size: 13.5px;
	line-height: 1.5;
}

.kr-umkm-directory .entry-content .kr-umkm-table th,
.kr-umkm-directory .entry-content .kr-umkm-table td {
	box-sizing: border-box;
}

.kr-umkm-directory .entry-content .kr-umkm-table thead th {
	padding: 13px 14px;
	border: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.13);
	background: var(--kr-header-background-deep);
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.kr-umkm-directory .entry-content .kr-umkm-table thead th:first-child,
.kr-umkm-directory .entry-content .kr-umkm-table thead th:nth-child(2) {
	width: 64px;
	text-align: center;
}

.kr-umkm-directory .entry-content .kr-umkm-table thead th:nth-child(3) {
	width: 22%;
}

.kr-umkm-directory .entry-content .kr-umkm-table thead th:nth-child(4) {
	width: 18%;
}

.kr-umkm-directory .entry-content .kr-umkm-table thead th:nth-child(5) {
	width: 25%;
}

.kr-umkm-directory .entry-content .kr-umkm-table thead th:last-child {
	border-right: 0;
}

.kr-umkm-directory .entry-content .kr-umkm-table tbody td {
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid #e8efee;
	background: #ffffff;
	color: #334155;
	vertical-align: top;
}

.kr-umkm-directory .entry-content .kr-umkm-table tbody tr:nth-child(even) td {
	background: #f7fbfa;
}

.kr-umkm-directory .entry-content .kr-umkm-table tbody tr:last-child td {
	border-bottom: 0;
}

.kr-umkm-directory .entry-content .kr-umkm-table tbody tr:hover td {
	background: #eaf7f5;
}

.kr-umkm-directory .entry-content .kr-umkm-table tbody td[rowspan] {
	border-right: 1px solid #dce8e6;
	background: #eff9f7;
	color: var(--kr-header-background-deep);
	font-weight: 800;
	text-align: center;
	vertical-align: middle;
}

.kr-umkm-directory .entry-content .kr-umkm-table tbody td em {
	color: var(--kr-header-background-deep);
	font-style: normal;
	font-weight: 750;
}

.kr-umkm-directory .entry-content .kr-umkm-table tbody td:last-child {
	color: #52636f;
	font-size: 12px;
	font-weight: 650;
	white-space: nowrap;
}

.kr-umkm-directory .entry-content hr {
	display: none;
}

@media (max-width: 768px) {
	.kr-umkm-directory .entry-header {
		margin-bottom: 20px;
	}

	.kr-umkm-directory .entry-content > .kr-umkm-rw-title {
		margin-top: 24px;
		padding: 12px 14px;
		border-radius: 10px 10px 0 0;
		font-size: 12px;
	}

	.kr-umkm-directory .entry-content figure.kr-umkm-table-wrap {
		margin: 16px 0 24px !important;
		border-radius: 10px;
		box-shadow: 0 6px 20px rgba(15, 76, 68, 0.08);
	}

	.kr-umkm-directory--split .entry-content figure.kr-umkm-table-wrap {
		margin-top: 0 !important;
		border-radius: 0 0 10px 10px;
	}

	.kr-umkm-directory .entry-content table.kr-umkm-table {
		min-width: 700px;
		font-size: 12.5px;
	}

	.kr-umkm-directory .entry-content .kr-umkm-table thead th {
		padding: 11px 12px;
	}

	.kr-umkm-directory .entry-content .kr-umkm-table tbody td {
		padding: 9px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kr-umkm-directory .entry-content figure.kr-umkm-table-wrap {
		scroll-behavior: auto;
	}
}


/* ============================================================================
   Statistik RW Pages
   Per-RW UMKM statistics pages linked from homepage RW cards.
   Inherits kr-umkm-directory + kr-umkm-directory--split table design.
   -------------------------------------------------------------------------- */

/* Hide empty paragraphs and style-only paragraphs */
.kr-statistik-rw .entry-content > p:empty,
.kr-statistik-rw .entry-content > p:has(style:only-child) {
	display: none !important;
}

/* Google Maps embed - responsive and contained */
.kr-statistik-rw .entry-content iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 280px;
	border: 0;
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(0, 86, 76, 0.10);
}

.kr-statistik-rw .entry-content .kr-statistik-map,
.kr-statistik-rw .entry-content > .wp-block-paragraph:has(iframe) {
	margin: 0 0 24px !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
}

/* Real intro paragraph ("RW ... berada di ...") */
.kr-statistik-rw .entry-content .kr-statistik-intro {
	padding: 14px 18px;
	border-left: 4px solid #2dd4bf;
	border-radius: 0 10px 10px 0;
	background: #f0fdf9;
	color: #1e3a38;
	font-size: 14px;
	line-height: 1.75;
	margin: 0 0 28px !important;
}

/* Category section headings (KULINER, JASA, etc.) */
.kr-statistik-rw .kr-umkm-rw-title {
	background: linear-gradient(110deg, #00564c, #00796b);
	color: #ffffff !important;
	font-size: 13px;
	letter-spacing: 0.08em;
}

.kr-statistik-rw .kr-umkm-rw-title strong {
	color: #ffffff !important;
}

.kr-statistik-rw .kr-umkm-rw-title::before {
	content: "▪";
	width: auto;
	height: auto;
	border: none;
	border-radius: 0;
	background: transparent;
	margin-right: 8px;
	font-size: 14px;
	vertical-align: middle;
	opacity: 0.85;
}

/* Suppress centered strong headings that the JS absorbs into titles */
.kr-statistik-rw .entry-content .has-text-align-center:not(.kr-umkm-rw-title) strong {
	font-size: inherit;
}

/* Mobile overrides */
@media (max-width: 768px) {
	.kr-statistik-rw .entry-content iframe {
		height: 220px;
		border-radius: 10px;
	}

	.kr-statistik-rw .entry-content .kr-statistik-intro {
		font-size: 13px;
		padding: 12px 14px;
		margin-bottom: 20px !important;
	}
}

@media (max-width: 480px) {
	.kr-statistik-rw .entry-content iframe {
		height: 180px;
	}
}


/* ==========================================================================
   Profil Sub-pages Modernization
   Follows Beranda visual design language:
   - Modern cards, cohesive teal palette (#00796b, #00564c, #2dd4bf)
   - Left accent bars on section titles
   - Clean spacing, rounded corners (10-14px), subtle shadows
   - Accessible, mobile-first responsive guards
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared Profil Page Typography & Containers
   -------------------------------------------------------------------------- */

.kr-profil-page .entry-content {
	color: #334155;
	font-size: 15px;
	line-height: 1.75;
}

.kr-profil-page .entry-content p {
	margin-bottom: 20px;
}

.kr-profil-page .entry-content p:empty {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Section headers (like MISI, Batas Wilayah, etc.) */
.kr-profil-page .kr-section-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 36px 0 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--kr-header-background);
}

.kr-profil-page .kr-section-header h3 {
	margin: 0;
	color: var(--kr-header-background-deep);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kr-profil-page .kr-section-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #e6f6f4;
	color: var(--kr-header-background);
}

/* Card badges */
.kr-profil-page .kr-card-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	background: var(--kr-header-background);
	color: #ffffff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

/* Intro notice / callout card */
.kr-profil-page .kr-intro-card {
	background: #f0fdf9;
	border: 1px solid #dce8e6;
	border-left: 5px solid var(--kr-header-background);
	border-radius: 0 12px 12px 0;
	padding: 18px 22px;
	color: #1e293b;
	font-size: 15px;
	line-height: 1.75;
	margin-bottom: 26px;
	box-shadow: 0 2px 10px rgba(0, 121, 107, 0.04);
}

/* Images & figures */
.kr-profil-page .wp-block-image {
	margin: 28px auto;
	text-align: center;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}

.kr-profil-page figure.aligncenter,
.kr-profil-page .wp-block-image figure,
.kr-profil-page .wp-block-image:not(:has(figure)) {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 28px auto !important;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 18px rgba(0, 40, 35, 0.06);
	background: #ffffff;
	text-align: center;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.kr-profil-page figure.aligncenter:hover,
.kr-profil-page .wp-block-image figure:hover,
.kr-profil-page .wp-block-image:not(:has(figure)):hover {
	box-shadow: 0 10px 28px rgba(0, 40, 35, 0.12);
	transform: translateY(-2px);
}

.kr-profil-page .wp-block-image img,
.kr-profil-page figure.aligncenter img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.kr-profil-page figcaption,
.kr-profil-page .wp-caption-text {
	padding: 12px 16px;
	background: #f0fdf9;
	color: var(--kr-header-background-deep);
	font-weight: 750;
	font-size: 13px;
	text-align: center;
	border-top: 1px solid #e2e8f0;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   2. VISI DAN MISI
   -------------------------------------------------------------------------- */

.kr-profil-visi-misi .kr-visi-card {
	background: linear-gradient(135deg, #f0fdf9 0%, #e6f6f4 100%);
	border: 1px solid #b2dfdb;
	border-left: 6px solid var(--kr-header-background);
	border-radius: 14px;
	padding: 24px 28px;
	margin: 0 0 32px;
	box-shadow: 0 4px 20px rgba(0, 121, 107, 0.08);
}

.kr-profil-visi-misi .kr-visi-quote {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 18px;
	line-height: 1.65;
	color: #004d40;
	font-weight: 600;
	font-style: normal;
}

.kr-profil-visi-misi .kr-visi-quote strong {
	color: #ffffff;
	background: var(--kr-header-background);
	padding: 2px 10px;
	border-radius: 6px;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.kr-profil-visi-misi .kr-misi-list {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kr-profil-visi-misi .kr-misi-item {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 18px 22px;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 40, 35, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.kr-profil-visi-misi .kr-misi-item:hover {
	transform: translateY(-2px);
	border-color: var(--kr-header-background);
	box-shadow: 0 8px 24px rgba(0, 121, 107, 0.1);
}

.kr-profil-visi-misi .kr-misi-num {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--kr-header-background) 0%, var(--kr-header-background-deep) 100%);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 800;
	box-shadow: 0 3px 10px rgba(0, 121, 107, 0.25);
}

.kr-profil-visi-misi .kr-misi-text {
	flex: 1;
	min-width: 0;
	color: #334155;
	font-size: 14.5px;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   3. STRUKTUR ORGANISASI
   -------------------------------------------------------------------------- */

/* Duties list cards */
.kr-profil-struktur .kr-tugas-list {
	list-style: none;
	margin: 24px 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kr-profil-struktur .kr-tugas-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 20px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-left: 4px solid var(--kr-header-background);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 40, 35, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kr-profil-struktur .kr-tugas-item:hover {
	transform: translateX(4px);
	box-shadow: 0 6px 18px rgba(0, 121, 107, 0.08);
}

.kr-profil-struktur .kr-tugas-badge {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--kr-header-background-deep);
}

.kr-profil-struktur .kr-tugas-desc {
	font-size: 14px;
	line-height: 1.6;
	color: #475569;
}

/* Struktur table */
.kr-profil-struktur figure.kr-table-card,
.kr-profil-struktur .wp-block-table {
	margin: 28px 0;
	border: 1.5px solid #dce8e6 !important;
	border-radius: 12px !important;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: 0 4px 18px rgba(0, 40, 35, 0.06);
	background: #ffffff;
}

.kr-profil-struktur table.kr-struktur-table,
.kr-profil-struktur .wp-block-table table {
	width: 100%;
	min-width: 500px;
	margin: 0 !important;
	border: none !important;
	border-collapse: collapse !important;
	font-size: 14px;
}

.kr-profil-struktur table.kr-struktur-table thead th,
.kr-profil-struktur .wp-block-table th {
	background: var(--kr-header-background-deep) !important;
	color: #ffffff !important;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 14px 20px !important;
	border: none !important;
	border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-bottom: 1.5px solid #004d40 !important;
	text-align: left;
}

.kr-profil-struktur table.kr-struktur-table thead th:last-child,
.kr-profil-struktur .wp-block-table th:last-child {
	border-right: none !important;
}

.kr-profil-struktur table.kr-struktur-table tbody td,
.kr-profil-struktur .wp-block-table td {
	padding: 13px 20px !important;
	border: none !important;
	border-bottom: 1px solid #e2e8f0 !important;
	border-right: 1px solid #e2e8f0 !important;
	color: #334155;
	vertical-align: middle;
}

.kr-profil-struktur table.kr-struktur-table tbody td:last-child,
.kr-profil-struktur .wp-block-table td:last-child {
	border-right: none !important;
}

.kr-profil-struktur table.kr-struktur-table tbody tr:last-child td,
.kr-profil-struktur .wp-block-table tbody tr:last-child td {
	border-bottom: none !important;
}

.kr-profil-struktur table.kr-struktur-table tbody tr:nth-child(even) td,
.kr-profil-struktur .wp-block-table tbody tr:nth-child(even) td {
	background: #f8fffe;
}

.kr-profil-struktur table.kr-struktur-table tbody tr:hover td,
.kr-profil-struktur .wp-block-table tbody tr:hover td {
	background: #e6f6f4;
}

.kr-profil-struktur table.kr-struktur-table tbody td:first-child,
.kr-profil-struktur .wp-block-table tbody td:first-child {
	font-weight: 750;
	color: var(--kr-header-background-deep);
	background: rgba(0, 121, 107, 0.04);
}

.kr-profil-struktur table.kr-struktur-table tbody tr:hover td:first-child,
.kr-profil-struktur .wp-block-table tbody tr:hover td:first-child {
	background: #dcf2ee;
}

/* --------------------------------------------------------------------------
   4. WILAYAH ADMINISTRASI
   -------------------------------------------------------------------------- */

.kr-profil-wilayah .kr-rw-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 14px;
	margin: 24px 0 32px;
}

.kr-profil-wilayah .kr-rw-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 40, 35, 0.04);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.kr-profil-wilayah .kr-rw-card:hover {
	transform: translateY(-3px);
	border-color: var(--kr-header-background);
	box-shadow: 0 8px 22px rgba(0, 121, 107, 0.12);
}

.kr-profil-wilayah .kr-rw-badge {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--kr-header-background) 0%, var(--kr-header-background-deep) 100%);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.03em;
	box-shadow: 0 3px 8px rgba(0, 121, 107, 0.2);
}

.kr-profil-wilayah .kr-rw-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.kr-profil-wilayah .kr-rw-dusun {
	font-size: 14px;
	font-weight: 800;
	color: #1e293b;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.25;
}

.kr-profil-wilayah .kr-rw-sub {
	font-size: 11.5px;
	color: #64748b;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   5. GEOGRAFIS
   -------------------------------------------------------------------------- */

/* Key stats banner */
.kr-profil-geografis .kr-geo-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 0 0 32px;
}

.kr-profil-geografis .kr-stat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 20px 14px;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-top: 4px solid var(--kr-header-background);
	border-radius: 12px;
	box-shadow: 0 3px 12px rgba(0, 40, 35, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kr-profil-geografis .kr-stat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(0, 121, 107, 0.12);
}

.kr-profil-geografis .kr-stat-icon {
	color: var(--kr-header-background);
	margin-bottom: 10px;
}

.kr-profil-geografis .kr-stat-val {
	font-size: 19px;
	font-weight: 900;
	color: var(--kr-header-background-deep);
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-bottom: 4px;
}

.kr-profil-geografis .kr-stat-lbl {
	font-size: 11px;
	font-weight: 750;
	text-transform: uppercase;
	color: #64748b;
	letter-spacing: 0.04em;
}

/* Batas wilayah grid */
.kr-profil-geografis .kr-batas-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 18px 0 30px;
}

.kr-profil-geografis .kr-batas-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 40, 35, 0.04);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.kr-profil-geografis .kr-batas-card:hover {
	transform: translateY(-2px);
	border-color: var(--kr-header-background);
}

.kr-profil-geografis .kr-compass-pill {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 12px;
	background: #e6f6f4;
	color: var(--kr-header-background-deep);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.kr-profil-geografis .kr-batas-desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: #334155;
	margin: 0;
}

/* Dusun chips */
.kr-profil-geografis .kr-dusun-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 16px 0 28px;
}

.kr-profil-geografis .kr-dusun-chip {
	padding: 10px 14px;
	background: #f8fffe;
	border: 1px solid #dce8e6;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 750;
	color: var(--kr-header-background-deep);
	text-align: center;
	transition: background-color 0.18s ease;
}

.kr-profil-geografis .kr-dusun-chip:hover {
	background: #e6f6f4;
}

/* --------------------------------------------------------------------------
   6. DOKUMEN PROFIL KELURAHAN
   -------------------------------------------------------------------------- */

.kr-profil-dokumen .kr-pdf-doc-card {
	display: flex;
	flex-direction: column;
	gap: 22px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 26px;
	box-shadow: 0 4px 22px rgba(0, 40, 35, 0.06);
	margin: 16px 0 32px;
}

.kr-profil-dokumen .kr-doc-header-box {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.kr-profil-dokumen .kr-doc-icon {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: #e6f6f4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kr-profil-dokumen .kr-doc-badge {
	font-size: 11px;
	font-weight: 800;
	color: var(--kr-header-background);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.kr-profil-dokumen .kr-doc-title {
	font-size: 19px;
	font-weight: 800;
	color: #1e293b;
	margin: 0 0 6px;
}

.kr-profil-dokumen .kr-doc-desc {
	font-size: 13.5px;
	color: #64748b;
	margin: 0;
	line-height: 1.5;
}

.kr-profil-dokumen .wp-block-file__button,
.kr-profil-dokumen a[download] {
	background: var(--kr-header-background) !important;
	color: #ffffff !important;
	padding: 12px 24px !important;
	border-radius: 999px !important;
	font-weight: 750 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	align-self: flex-start !important;
	box-shadow: 0 4px 14px rgba(0, 121, 107, 0.25) !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.kr-profil-dokumen .wp-block-file__button:hover,
.kr-profil-dokumen a[download]:hover {
	background: var(--kr-header-background-deep) !important;
	transform: translateY(-2px);
}

.kr-profil-dokumen .wp-block-file__embed {
	border: 1px solid #dce8e6;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
}

/* --------------------------------------------------------------------------
   7. SEJARAH
   -------------------------------------------------------------------------- */

.kr-profil-sejarah .kr-history-lead {
	font-size: 16px;
	line-height: 1.85;
	color: #1e293b;
	background: #f0fdf9;
	border-left: 5px solid var(--kr-header-background);
	padding: 20px 24px;
	border-radius: 0 12px 12px 0;
	margin-bottom: 24px;
	box-shadow: 0 2px 10px rgba(0, 121, 107, 0.04);
}

.kr-profil-sejarah .kr-milestone-box {
	background: #ffffff;
	border: 1.5px solid #dce8e6;
	border-left: 5px solid #f59e0b;
	border-radius: 0 12px 12px 0;
	padding: 18px 22px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
	font-size: 15px;
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   8. Responsive Media Queries (Profil Sub-pages)
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.kr-profil-geografis .kr-geo-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.kr-profil-visi-misi .kr-visi-card {
		padding: 18px 20px;
	}

	.kr-profil-visi-misi .kr-visi-quote {
		font-size: 16px;
	}

	.kr-profil-visi-misi .kr-misi-item {
		gap: 12px;
		padding: 14px 16px;
	}

	.kr-profil-geografis .kr-geo-stats-grid {
		grid-template-columns: 1fr;
	}

	.kr-profil-geografis .kr-batas-grid {
		grid-template-columns: 1fr;
	}

	.kr-profil-wilayah .kr-rw-grid {
		grid-template-columns: 1fr;
	}

	.kr-profil-dokumen .kr-doc-header-box {
		flex-direction: column;
		gap: 12px;
	}
}


/* ==========================================================================
   Berita & Artikel Page & Single Post Modernization
   - Page ID 918 / .kr-berita-artikel
   - Post Query Card Grid (2 cols desktop/tablet, 1 col mobile)
   - Interactive Toolbar (Filter Tabs, Search Bar, Dynamic Counters)
   - Modern Cards with hover lift, aspect-ratio thumbnails, fallback graphics
   - Clean Date & Action Bar ("Baca Selengkapnya")
   - Responsive client-side pagination
   - Single Post (.single-post) & Category Archive (.archive) Polish
   ========================================================================== */

/* Inner-page layout extensions for single posts and archives */
.single .site-content.site-container,
.archive .site-content.site-container {
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

.single .site-content,
.archive .site-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 36px;
	width: 100%;
	max-width: 1360px;
	margin: 36px auto;
	align-items: start;
	box-sizing: border-box;
}

.single .content-area,
.archive .content-area,
.single .widget-area,
.archive .widget-area {
	width: 100% !important;
	min-width: 0 !important;
	float: none !important;
	padding: 0 !important;
}

@media (max-width: 1024px) {
	.single .site-content,
	.archive .site-content {
		grid-template-columns: 1fr;
		gap: 28px;
		margin: 24px auto;
	}
}

@media (max-width: 600px) {
	.single .site-content.site-container,
	.archive .site-content.site-container {
		padding-left: 12px;
		padding-right: 12px;
	}
}

@media (min-width: 1025px) {
	.single #secondary.widget-area,
	.archive #secondary.widget-area {
		position: sticky;
		top: 100px;
	}
}

.single #secondary .widget,
.archive #secondary .widget {
	background: #ffffff;
	border-radius: 14px;
	padding: 22px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.04);
	margin-bottom: 24px;
	transition: box-shadow 0.2s ease;
}

.single #secondary .widget:hover,
.archive #secondary .widget:hover {
	box-shadow: 0 6px 20px rgba(0, 40, 35, 0.08);
}

.single #secondary .widget-title,
.single #secondary h2.widgettitle,
.archive #secondary .widget-title,
.archive #secondary h2.widgettitle {
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--kr-header-background-deep);
	border-bottom: 2px solid var(--kr-header-background);
	padding-bottom: 8px;
	margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   1. Berita & Artikel Page Header (.kr-berita-artikel)
   -------------------------------------------------------------------------- */
.kr-berita-artikel .entry-header {
	margin: 0 0 28px 0 !important;
	padding-bottom: 14px !important;
	border-bottom: 2px solid var(--kr-header-background) !important;
}

.kr-berita-artikel .entry-title {
	font-size: clamp(24px, 3vw, 32px) !important;
	font-weight: 900 !important;
	color: #0f172a !important;
	letter-spacing: -0.02em !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

/* --------------------------------------------------------------------------
   2. Toolbar (Filter Tabs + Realtime Search Bar)
   -------------------------------------------------------------------------- */
.kr-berita-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: 14px;
	padding: 14px 18px;
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(0, 40, 35, 0.03);
}

.kr-filter-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.kr-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	color: #475569;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 15px;
	border-radius: 9999px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.kr-filter-pill:hover {
	background: #e6f6f4;
	color: #00796b;
	border-color: #99f6e4;
}

.kr-filter-pill.is-active {
	background: #00796b;
	color: #ffffff;
	border-color: #00796b;
	box-shadow: 0 2px 8px rgba(0, 121, 107, 0.25);
}

.kr-pill-count {
	font-size: 11px;
	font-weight: 700;
	background: rgba(0, 0, 0, 0.08);
	padding: 2px 7px;
	border-radius: 12px;
}

.kr-filter-pill.is-active .kr-pill-count {
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

.kr-search-box {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 240px;
	flex: 1;
	max-width: 320px;
}

.kr-search-box svg {
	position: absolute;
	left: 12px;
	color: #94a3b8;
	pointer-events: none;
}

.kr-search-box input {
	width: 100%;
	padding: 8px 32px 8px 36px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 13.5px;
	outline: none;
	transition: all 0.2s ease;
	background: #ffffff;
}

.kr-search-box input:focus {
	border-color: #00796b;
	box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.15);
}

#kr-search-clear {
	position: absolute;
	right: 10px;
	background: transparent;
	border: none;
	font-size: 18px;
	color: #94a3b8;
	cursor: pointer;
	line-height: 1;
	padding: 0;
}

#kr-search-clear:hover {
	color: #1e293b;
}

.kr-berita-stats {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: #64748b;
	margin-bottom: 20px;
	padding: 0 4px;
}

.kr-berita-stats strong {
	color: #1e293b;
}

/* --------------------------------------------------------------------------
   3. Post Query Card Grid (.wp-block-post-template)
   -------------------------------------------------------------------------- */
.kr-berita-artikel .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 24px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 36px 0 !important;
}

.kr-berita-artikel li.wp-block-post {
	background: #ffffff !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	box-shadow: 0 2px 10px rgba(0, 40, 35, 0.04) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

.kr-berita-artikel li.wp-block-post:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 10px 24px rgba(0, 121, 107, 0.12) !important;
	border-color: #2dd4bf !important;
}

/* Card Featured Image */
.kr-berita-artikel .wp-block-post-featured-image,
.kr-berita-artikel .wp-block-post-featured-image.alignwide,
.kr-berita-artikel .wp-block-post-featured-image.alignfull,
.kr-berita-artikel .wp-block-post-featured-image.aligncenter,
.kr-berita-artikel .wp-block-post-featured-image.alignnone,
.kr-berita-artikel figure.wp-block-post-featured-image {
	order: -1 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	height: 190px !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	overflow: hidden !important;
	background: #f1f5f9 !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
}

.kr-berita-artikel .wp-block-post-featured-image a {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.kr-berita-artikel .wp-block-post-featured-image img {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	transition: transform 0.4s ease !important;
	margin: 0 !important;
	padding: 0 !important;
}

.kr-berita-artikel li.wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.05) !important;
}

/* Fallback Graphic for posts without image */
.kr-featured-image-fallback .kr-fallback-graphic {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #00796b 0%, #00564c 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	gap: 8px;
}

.kr-featured-image-fallback .kr-fallback-graphic svg {
	opacity: 0.85;
}

.kr-featured-image-fallback .kr-fallback-graphic span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* Category Badge pinned on top-left of image */
.kr-card-cat-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.95);
	color: #00796b;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	backdrop-filter: blur(4px);
}

.kr-card-cat-badge.kr-cat-pkk {
	background: #fef3c7;
	color: #92400e;
}

/* Card Body */
.kr-berita-artikel .kr-card-body {
	padding: 18px 20px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.kr-berita-artikel .wp-block-post-title {
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	margin: 0 0 10px 0 !important;
	letter-spacing: -0.01em !important;
}

.kr-berita-artikel .wp-block-post-title a {
	color: #1e293b !important;
	text-decoration: none !important;
	transition: color 0.18s ease !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.kr-berita-artikel .wp-block-post-title a:hover {
	color: #00796b !important;
}

.kr-berita-artikel .wp-block-post-excerpt {
	margin: 0 0 16px 0 !important;
	flex-grow: 1 !important;
}

.kr-berita-artikel .wp-block-post-excerpt p {
	font-size: 13.5px !important;
	line-height: 1.6 !important;
	color: #64748b !important;
	margin: 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* Hide Default Separator */
.kr-berita-artikel .wp-block-separator {
	display: none !important;
}

/* Meta Bar & Read More */
.kr-berita-artikel .wp-block-post-date {
	margin-top: auto !important;
	padding-top: 12px !important;
	border-top: 1px solid #f1f5f9 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	font-size: 12.5px !important;
	color: #64748b !important;
}

.kr-berita-artikel .kr-date-val {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #64748b;
}

.kr-berita-artikel .kr-read-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #00796b;
	font-weight: 700;
	font-size: 12.5px;
	text-decoration: none;
	transition: all 0.18s ease;
}

.kr-berita-artikel .kr-read-more:hover {
	color: #00564c;
	gap: 7px;
}

/* Hide AddToAny social share buttons on Berita & Artikel directory */
.kr-berita-artikel .addtoany_share_save_container {
	display: none !important;
}

/* --------------------------------------------------------------------------
   4. Empty State
   -------------------------------------------------------------------------- */
.kr-empty-state {
	text-align: center;
	padding: 48px 24px;
	background: #ffffff;
	border: 1.5px dashed #cbd5e1;
	border-radius: 14px;
	margin: 20px 0 36px 0;
}

.kr-empty-state p {
	font-size: 15px;
	color: #64748b;
	margin: 14px 0 18px 0;
}

.kr-reset-btn {
	background: #00796b;
	color: #ffffff;
	border: none;
	padding: 8px 20px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.kr-reset-btn:hover {
	background: #00564c;
}

/* --------------------------------------------------------------------------
   5. Pagination Controls (.kr-pagination)
   -------------------------------------------------------------------------- */
.kr-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 36px 0 24px 0;
}

.kr-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #334155;
	cursor: pointer;
	transition: all 0.18s ease;
}

.kr-page-btn:hover:not(.is-disabled):not(.is-active) {
	background: #e6f6f4;
	color: #00796b;
	border-color: #99f6e4;
}

.kr-page-btn.is-active {
	background: #00796b;
	color: #ffffff;
	border-color: #00796b;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(0, 121, 107, 0.25);
}

.kr-page-btn.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	background: #f8fafc;
}

.kr-page-dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	color: #94a3b8;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. Single Post & Archive Modernization
   -------------------------------------------------------------------------- */
.single-post .entry-header {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1.5px solid #e2e8f0;
}

.single-post .entry-title {
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	margin: 0 0 14px 0;
}

.single-post .entry-meta,
.archive .entry-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13px;
	color: #64748b;
}

.single-post .entry-meta a,
.archive .entry-meta a {
	color: #00796b;
	font-weight: 600;
	text-decoration: none;
}

.single-post .entry-thumbnail,
.single .entry-thumbnail {
	margin: 0 0 28px 0 !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 4px 14px rgba(0, 40, 35, 0.05) !important;
	text-align: center !important;
	background: #f8fafc !important;
	width: 100% !important;
	max-width: 100% !important;
}

.single-post .entry-thumbnail img,
.single .entry-thumbnail img,
.single-post .wp-post-image,
.single .wp-post-image {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: unset !important;
	display: block !important;
	margin: 0 auto !important;
}

.single-post .wp-block-post-featured-image,
.single .wp-block-post-featured-image {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 0 28px 0 !important;
	overflow: hidden !important;
	border-radius: 14px !important;
}

.single-post .wp-block-post-featured-image img,
.single .wp-block-post-featured-image img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: unset !important;
	display: block !important;
}

.single-post .entry-content,
.single .entry-content {
	font-size: 15.5px;
	line-height: 1.8;
	color: #334155;
}

.single-post .entry-content img,
.single .entry-content img {
	max-width: 100% !important;
	height: auto !important;
	object-fit: unset !important;
}

.single-post .entry-content p {
	margin-bottom: 20px;
}

/* Category & Archive Pages */
.archive .page-header {
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 2px solid #00796b;
}

.archive .page-title {
	font-size: clamp(20px, 2.5vw, 28px);
	font-weight: 800;
	color: #0f172a;
	margin: 0;
}

.archive article.blog-post-side-layout {
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: 14px;
	padding: 22px;
	margin-bottom: 24px;
	box-shadow: 0 2px 10px rgba(0, 40, 35, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.archive article.blog-post-side-layout:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 121, 107, 0.1);
	border-color: #2dd4bf;
}

.archive article.blog-post-side-layout h2.entry-title a {
	color: #1e293b;
	text-decoration: none;
	transition: color 0.2s ease;
}

.archive article.blog-post-side-layout h2.entry-title a:hover {
	color: #00796b;
}

/* --------------------------------------------------------------------------
   7. Responsive Media Queries for Berita & Artikel
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.kr-berita-artikel .wp-block-post-template {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}

	.kr-berita-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.kr-search-box {
		max-width: 100%;
		min-width: 0;
	}

	.kr-filter-tabs {
		width: 100%;
	}

	.kr-filter-pill {
		flex: 1;
		justify-content: center;
		padding: 7px 10px;
		font-size: 13px;
	}
}

@media (max-width: 600px) {
	.kr-berita-artikel .entry-title {
		font-size: 22px !important;
	}

	.kr-berita-lead {
		font-size: 13.5px;
	}

	.kr-page-btn {
		min-width: 34px;
		height: 34px;
		padding: 0 8px;
		font-size: 12.5px;
	}
}


.kr-berita-artikel li.wp-block-post.kr-post-hidden {
	display: none !important;
}

/* ==========================================================================
   Single Post Navigation & Comments/Replies Modernization
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Next / Previous Article Navigation (.kr-post-navigation)
   -------------------------------------------------------------------------- */
.kr-post-navigation {
	margin: 40px 0 32px 0 !important;
}

.kr-post-navigation .nav-links {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
	gap: 16px !important;
}

.kr-post-navigation .nav-previous,
.kr-post-navigation .nav-next {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.kr-nav-card {
	display: flex !important;
	flex-direction: column !important;
	background: #ffffff !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 14px !important;
	padding: 18px 22px !important;
	box-shadow: 0 2px 10px rgba(0, 40, 35, 0.04) !important;
	transition: all 0.22s ease !important;
	text-decoration: none !important;
	height: 100% !important;
	box-sizing: border-box !important;
}

.kr-nav-card:hover {
	border-color: #00796b !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 24px rgba(0, 121, 107, 0.12) !important;
}

.kr-nav-direction {
	font-size: 11.5px !important;
	font-weight: 800 !important;
	color: #00796b !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	margin-bottom: 8px !important;
	display: inline-block !important;
}

.nav-next .kr-nav-direction {
	text-align: right !important;
}

.nav-next .kr-nav-card {
	text-align: right !important;
}

.kr-nav-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #1e293b !important;
	line-height: 1.45 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	transition: color 0.18s ease !important;
}

.kr-nav-card:hover .kr-nav-title {
	color: #00796b !important;
}

/* --------------------------------------------------------------------------
   2. Comments & Replies Area (#comments)
   -------------------------------------------------------------------------- */
#comments.comments-area {
	background: #ffffff !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 16px !important;
	padding: 32px 36px !important;
	margin-top: 36px !important;
	margin-bottom: 40px !important;
	box-shadow: 0 2px 12px rgba(0, 40, 35, 0.04) !important;
	box-sizing: border-box !important;
}

#reply-title.comment-reply-title,
.comments-title {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	padding-bottom: 12px !important;
	border-bottom: 2px solid var(--kr-header-background) !important;
	margin: 0 0 18px 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

#reply-title.comment-reply-title small {
	font-size: 12.5px;
	font-weight: 600;
}

#reply-title.comment-reply-title small a {
	color: #ef4444;
	text-decoration: none;
}

#reply-title.comment-reply-title small a:hover {
	text-decoration: underline;
}

/* Super Socializer Comment Tabs */
ul.theChampCommentingTabs {
	display: flex !important;
	gap: 8px !important;
	padding: 0 !important;
	margin: 0 0 22px 0 !important;
	list-style: none !important;
	border-bottom: 1.5px solid #e2e8f0 !important;
	padding-bottom: 10px !important;
}

ul.theChampCommentingTabs li {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: #64748b !important;
	padding: 7px 16px !important;
	border-radius: 20px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	background: #f1f5f9 !important;
	border: none !important;
	display: inline-flex !important;
	align-items: center !important;
}

ul.theChampCommentingTabs li.theChampSelectedTab,
ul.theChampCommentingTabs li:hover {
	background: var(--kr-header-background) !important;
	color: #ffffff !important;
}

.theChampCommentingTabs #theChampScLabel {
	display: none !important;
}

/* Comment Form Notes */
.comment-notes {
	font-size: 13.5px !important;
	color: #64748b !important;
	margin-bottom: 20px !important;
	line-height: 1.5 !important;
}

.required-field-message {
	color: #ef4444 !important;
	font-size: 12.5px !important;
}

/* Comment Form Layout */
#commentform {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

#commentform p {
	margin: 0 !important;
}

#commentform label {
	display: block !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: #334155 !important;
	margin-bottom: 6px !important;
}

#commentform label .required {
	color: #ef4444 !important;
}

#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px 16px !important;
	border: 1.5px solid #cbd5e1 !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	color: #1e293b !important;
	background: #f8fafc !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
	outline: none !important;
	font-family: inherit !important;
}

#commentform textarea:focus,
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform input[type="url"]:focus {
	border-color: var(--kr-header-background) !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.15) !important;
}

#commentform textarea {
	min-height: 120px !important;
	resize: vertical !important;
	line-height: 1.6 !important;
}

/* Submit Button */
#commentform #submit.submit {
	background: var(--kr-header-background) !important;
	color: #ffffff !important;
	border: none !important;
	padding: 12px 28px !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 4px 12px rgba(0, 121, 107, 0.25) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

#commentform #submit.submit:hover {
	background: var(--kr-header-background-deep) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 18px rgba(0, 121, 107, 0.35) !important;
}

/* Existing Comment List */
.comment-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 24px 0 32px 0 !important;
}

.comment-list .comment {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	padding: 18px 20px !important;
	margin-bottom: 16px !important;
}

.comment-list .comment .comment-author {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 8px !important;
}

.comment-list .comment .avatar {
	border-radius: 50% !important;
	width: 44px !important;
	height: 44px !important;
	border: 2px solid #e2e8f0 !important;
}

.comment-list .comment .fn {
	font-weight: 700 !important;
	color: #0f172a !important;
	font-size: 14.5px !important;
}

.comment-list .comment .comment-metadata a {
	font-size: 12px !important;
	color: #94a3b8 !important;
	text-decoration: none !important;
}

.comment-list .comment p {
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: #334155 !important;
	margin: 0 0 10px 0 !important;
}

.comment-list .reply a {
	display: inline-block !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--kr-header-background) !important;
	background: #e6f6f4 !important;
	padding: 4px 12px !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	transition: background 0.18s ease !important;
}

.comment-list .reply a:hover {
	background: #ccebe6 !important;
}

/* Responsive adjustment for Comments & Post Navigation */
@media (max-width: 600px) {
	#comments.comments-area {
		padding: 22px 18px !important;
		border-radius: 14px !important;
	}

	.kr-post-navigation .nav-links {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
   FIX: Override parent theme overflow:hidden on .post-navigation
   panoramic/style.css:826 sets overflow:hidden which clips our cards
   ============================================================ */
.single .site-main .post-navigation.kr-post-navigation,
.single-post .site-main .post-navigation.kr-post-navigation {
    overflow: visible !important;
    margin: 40px 0 32px 0 !important;
}

.single .site-main .post-navigation.kr-post-navigation .nav-links {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 16px !important;
    overflow: visible !important;
    float: none !important;
}

.single .site-main .post-navigation.kr-post-navigation .nav-previous,
.single .site-main .post-navigation.kr-post-navigation .nav-next {
    float: none !important;
    width: 100% !important;
    text-align: left !important;
    overflow: visible !important;
}
/* ==========================================================================
   PKK Page (Page ID 3029 / .kr-pkk-page)
   - Works with Content Views plugin (pt-cv) structure
   - Search functionality and pagination
   ========================================================================== */

/* PKK Page Header */
.kr-pkk-page .entry-header {
	margin: 0 0 28px 0 !important;
	padding-bottom: 14px !important;
	border-bottom: 2px solid var(--kr-header-background) !important;
}

.kr-pkk-page .entry-title {
	font-size: clamp(24px, 3vw, 32px) !important;
	font-weight: 900 !important;
	color: #0f172a !important;
	letter-spacing: -0.02em !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

/* Override Content Views inline styles and default grid */
.kr-pkk-page .pt-cv-page {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 24px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 36px 0 !important;
}

/* Individual post cards */
.kr-pkk-page .pt-cv-content-item {
	background: #ffffff !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	box-shadow: 0 2px 10px rgba(0, 40, 35, 0.04) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

.kr-pkk-page .pt-cv-content-item:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 10px 24px rgba(0, 121, 107, 0.12) !important;
	border-color: #2dd4bf !important;
}

/* Thumbnail/Featured Image */
.kr-pkk-page .pt-cv-thumb-wrapper {
	width: 100% !important;
	height: 190px !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	overflow: hidden !important;
	background: #f1f5f9 !important;
	flex-shrink: 0 !important;
}

.kr-pkk-page .pt-cv-thumb-wrapper a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

.kr-pkk-page .pt-cv-thumbnail {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.4s ease !important;
}

.kr-pkk-page .pt-cv-content-item:hover .pt-cv-thumbnail {
	transform: scale(1.05) !important;
}

/* Fallback Graphic */
.kr-pkk-page .kr-fallback-graphic {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #00796b 0%, #00564c 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	gap: 8px;
}

.kr-pkk-page .kr-fallback-graphic svg {
	opacity: 0.85;
}

.kr-pkk-page .kr-fallback-graphic span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* Category Badge (overlaid on thumbnail) */
.kr-pkk-page .kr-card-cat-badge {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	z-index: 2 !important;
	background: #fef3c7 !important;
	color: #92400e !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	padding: 4px 10px !important;
	border-radius: 20px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
	backdrop-filter: blur(4px) !important;
}

/* Hide default Content Views category display above title */
.kr-pkk-page .pt-cv-taxoterm {
	display: none !important;
}

/* Post Title */
.kr-pkk-page .pt-cv-title {
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	margin: 18px 20px 10px !important;
	letter-spacing: -0.01em !important;
}

.kr-pkk-page .pt-cv-title a {
	color: #1e293b !important;
	text-decoration: none !important;
	transition: color 0.18s ease !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.kr-pkk-page .pt-cv-title a:hover {
	color: #00796b !important;
}

/* Post Excerpt/Content */
.kr-pkk-page .pt-cv-content {
	margin: 0 20px 16px !important;
	flex-grow: 1 !important;
	font-size: 13.5px !important;
	line-height: 1.6 !important;
	color: #64748b !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.kr-pkk-page .pt-cv-content br {
	display: none !important;
}

/* Read More Wrapper */
.kr-pkk-page .pt-cv-rmwrap {
	margin-top: 12px !important;
	padding-top: 12px !important;
	border-top: 1px solid #f1f5f9 !important;
}

/* Updated Read More Button */
.kr-pkk-page .kr-read-more {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	color: #00796b !important;
	font-weight: 700 !important;
	font-size: 12.5px !important;
	text-decoration: none !important;
	transition: all 0.18s ease !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}

.kr-pkk-page .kr-read-more:hover {
	color: #00564c !important;
	gap: 7px !important;
	background: transparent !important;
}

/* Hide default Content Views read more button */
.kr-pkk-page .pt-cv-readmore.btn.btn-success {
	display: none !important;
}

/* Hidden posts during pagination */
.kr-pkk-page .pt-cv-content-item.kr-post-hidden {
	display: none !important;
}

/* Mobile: single column grid */
@media (max-width: 768px) {
	.kr-pkk-page .pt-cv-page {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
}

/* ============================================================
   INFORMASI PELAYANAN — Modern Government Service Guidelines
   ============================================================ */
.kr-pelayanan-page .entry-header {
    display: none !important;
}

.kr-pelayanan-page .entry-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* Service Hero Header Card */
.kr-pelayanan-hero-card {
    background: linear-gradient(135deg, #00564c 0%, #00796b 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: 0 6px 20px rgba(0, 40, 35, 0.1);
    color: #ffffff;
    box-sizing: border-box;
}

.kr-pelayanan-badge-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.kr-pelayanan-badge {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px);
}

.kr-pelayanan-subbadge {
    color: #99f6e4;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kr-pelayanan-hero-title {
    color: #ffffff !important;
    font-size: clamp(22px, 2.4vw, 30px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: -0.01em;
}

.kr-pelayanan-hero-lead {
    color: #e6f6f4 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 0 20px 0 !important;
    max-width: 720px;
}

.kr-pelayanan-meta-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.kr-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #ffffff;
}

.kr-meta-icon {
    color: #2dd4bf;
    flex-shrink: 0;
    margin-top: 2px;
}

.kr-meta-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #99f6e4;
    font-weight: 700;
}

.kr-meta-val {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.35;
}

.kr-meta-free {
    color: #fef08a !important;
    font-weight: 800;
}

/* Enclosed Content Card */
.kr-pelayanan-content-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 40, 35, 0.05);
    padding: 32px;
    margin-bottom: 32px;
    box-sizing: border-box;
}

.kr-pelayanan-intro-p {
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: #334155 !important;
    margin-bottom: 20px !important;
}

/* Notice / Catatan Alert Box */
.kr-pelayanan-note-box {
    background: #fefce8 !important;
    border: 1px solid #fde047 !important;
    border-left: 4px solid #ca8a04 !important;
    border-radius: 10px;
    padding: 14px 18px !important;
    color: #713f12 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0 !important;
    box-sizing: border-box;
}

.kr-note-icon {
    color: #ca8a04;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Service Requirement Step List */
.kr-service-step-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 28px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kr-service-step-item {
    background: #f8fffe;
    border: 1px solid #dce8e6;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
    min-width: 0;
}

.kr-service-step-item:hover {
    border-color: #00796b;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 121, 107, 0.08);
    transform: translateY(-1px);
}

.kr-step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00796b 0%, #00564c 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 2px;
    box-shadow: 0 2px 6px rgba(0, 121, 107, 0.25);
}

.kr-step-content {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #1e293b;
}

/* Action Buttons (Download & External) */
.kr-btn-download {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    background: linear-gradient(135deg, #00796b 0%, #00564c 100%) !important;
    color: #ffffff !important;
    border-radius: 8px;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin: 4px 0 4px 6px;
    vertical-align: middle;
    transition: all 0.18s ease;
    box-shadow: 0 2px 6px rgba(0, 121, 107, 0.2);
}

.kr-btn-download:hover {
    background: #00423a !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 121, 107, 0.3);
    color: #ffffff !important;
}

.kr-btn-external {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    background: #f0fdf9 !important;
    color: #00564c !important;
    border: 1px solid #00796b !important;
    border-radius: 8px;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin: 4px 0 4px 6px;
    vertical-align: middle;
    transition: all 0.18s ease;
}

.kr-btn-external:hover {
    background: #00796b !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Section Headings / Dividers */
.kr-section-banner {
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 32px 0 16px 0;
    box-sizing: border-box;
}

.kr-pelayanan-content-card > .kr-section-banner:first-child {
    margin-top: 0 !important;
}

.kr-pelayanan-subheading {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 16px 0 12px 0 !important;
    line-height: 1.5 !important;
}

.kr-banner-pria {
    background: #e6f6f4;
    color: #00564c;
    border-left: 4px solid #00796b;
}

.kr-banner-wanita {
    background: #fdf2f8;
    color: #9d174d;
    border-left: 4px solid #db2777;
}

/* Verification Callout Box */
.kr-pelayanan-verification-callout {
    background: linear-gradient(135deg, #f0fdf9 0%, #e6f6f4 100%);
    border: 1px solid #99f6e4;
    border-radius: 12px;
    padding: 20px 22px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 32px;
    box-sizing: border-box;
}

.kr-callout-icon {
    flex-shrink: 0;
    color: #00796b;
    margin-top: 2px;
}

.kr-callout-title {
    margin: 0 0 6px 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #00564c !important;
}

.kr-callout-text {
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #134e4a !important;
}

/* Quick Navigation / Related Services Drawer */
.kr-pelayanan-quick-nav {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px dashed #cbd5e1;
}

.kr-quick-nav-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 0 16px 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kr-quick-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kr-quick-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    text-decoration: none !important;
    transition: all 0.18s ease;
}

.kr-quick-pill:hover {
    background: #00796b;
    color: #ffffff !important;
    border-color: #00796b;
    transform: translateY(-1px);
}

.kr-quick-pill--active {
    background: #00564c !important;
    color: #ffffff !important;
    border-color: #00564c !important;
    cursor: default;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kr-pelayanan-hero-card {
        padding: 20px 18px;
    }

    .kr-pelayanan-meta-strip {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kr-pelayanan-content-card {
        padding: 20px 16px;
    }

    .kr-service-step-item {
        padding: 12px 14px;
        gap: 12px;
    }

    .kr-btn-download,
    .kr-btn-external {
        display: flex !important;
        margin: 8px 0 0 0;
        width: fit-content;
    }

    .kr-pelayanan-verification-callout {
        flex-direction: column;
        gap: 10px;
        padding: 16px;
    }
}
/* ============================================================
   PPID SYSTEM — Keterbukaan Informasi Publik (v1.8.0)
   ============================================================ */
.kr-ppid-page .entry-header {
    display: none !important;
}

.kr-ppid-page .entry-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* Hero Header Card */
.kr-ppid-hero-card {
    background: linear-gradient(135deg, #00564c 0%, #00796b 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: 0 6px 20px rgba(0, 40, 35, 0.1);
    color: #ffffff;
}

.kr-ppid-badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.kr-ppid-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e6f6f4;
    color: #00564c;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
}

.kr-ppid-subbadge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.kr-ppid-hero-title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 10px 0;
    color: #ffffff !important;
}

.kr-ppid-hero-lead {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 20px 0;
    max-width: 820px;
}

.kr-ppid-meta-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    background: rgba(0, 40, 35, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 14px 18px;
}

.kr-ppid-hero-card .kr-meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kr-ppid-hero-card .kr-meta-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}

.kr-ppid-hero-card .kr-meta-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kr-ppid-hero-card .kr-meta-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ccebe6;
}

.kr-ppid-hero-card .kr-meta-val {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Structured Content Card Wrapper */
.kr-ppid-content-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 30px 32px;
    box-shadow: 0 2px 12px rgba(0, 40, 35, 0.04);
    margin-bottom: 24px;
}

/* 1. SEJARAH PPID */
.kr-ppid-media-frame {
    border: 1.5px solid #dce8e6;
    border-radius: 12px;
    overflow: hidden;
    max-width: 680px;
    margin: 0 auto 24px;
    box-shadow: 0 4px 14px rgba(0, 40, 35, 0.05);
}

.kr-ppid-media-frame img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.kr-ppid-media-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f0fdf9;
    color: #00564c;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    border-top: 1px solid #dce8e6;
}

.kr-ppid-quote-card {
    display: flex;
    gap: 16px;
    background: #f0fdf9;
    border-left: 4px solid #00796b;
    border-radius: 0 10px 10px 0;
    padding: 18px 22px;
    margin-bottom: 24px;
}

.kr-quote-icon {
    color: #00796b;
    flex-shrink: 0;
    margin-top: 2px;
}

.kr-quote-text {
    font-size: 15px;
    line-height: 1.65;
    font-style: italic;
    color: #0f172a;
    margin: 0 0 6px 0;
}

.kr-quote-author {
    font-size: 13px;
    font-weight: 700;
    color: #00564c;
    display: block;
}

.kr-ppid-prose-block {
    color: #334155;
    font-size: 15px;
    line-height: 1.8;
}

.kr-ppid-prose-block p {
    margin-bottom: 16px;
}

.kr-lead-para {
    font-size: 16px;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.75;
}

.kr-ppid-principles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.kr-principle-card {
    background: #f8fffe;
    border: 1.5px solid #dce8e6;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kr-principle-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 121, 107, 0.08);
    border-color: #00796b;
}

.kr-principle-num {
    font-size: 24px;
    font-weight: 900;
    color: #00796b;
    opacity: 0.5;
    margin-bottom: 8px;
}

.kr-principle-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #00564c;
    margin: 0 0 6px 0;
}

.kr-principle-card p {
    font-size: 13.5px;
    line-height: 1.55;
    color: #475569;
    margin: 0;
}

/* 2. REGULASI DAN SOP */
.kr-ppid-info-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f0fdf9;
    border: 1.5px solid #a7f3d0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.kr-banner-icon {
    color: #00796b;
    flex-shrink: 0;
}

.kr-banner-text {
    font-size: 14px;
    line-height: 1.6;
    color: #064e3b;
}

.kr-ppid-docs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.kr-doc-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.kr-doc-card:hover {
    border-color: #00796b;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 121, 107, 0.08);
}

.kr-doc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.kr-doc-pill {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    background: #e6f6f4;
    color: #00564c;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.kr-doc-code {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
}

.kr-doc-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.45;
    margin: 0 0 8px 0;
}

.kr-doc-card-desc {
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
    margin: 0 0 16px 0;
    flex-grow: 1;
}

.kr-doc-card-footer {
    display: flex;
    align-items: center;
}

.kr-doc-badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* 3. MAKLUMAT PELAYANAN */
.kr-maklumat-certificate-card {
    background: #ffffff;
    border: 2px solid #00564c;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 8px 26px rgba(0, 86, 76, 0.08);
}

.kr-maklumat-inner-border {
    border: 1.5px dashed #00796b;
    border-radius: 10px;
    padding: 32px 28px;
    text-align: center;
    background: #ffffff;
}

.kr-maklumat-emblem {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e6f6f4;
    border: 2px solid #00796b;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.kr-maklumat-institution {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #64748b;
    display: block;
    margin-bottom: 4px;
}

.kr-maklumat-title {
    font-size: 22px;
    font-weight: 900;
    color: #00564c;
    letter-spacing: 0.5px;
    margin: 0 0 6px 0;
}

.kr-maklumat-sub {
    font-size: 12.5px;
    font-weight: 700;
    color: #00796b;
    letter-spacing: 0.5px;
    margin: 0 0 20px 0;
}

.kr-maklumat-statement {
    max-width: 760px;
    margin: 0 auto 28px;
    background: #f8fffe;
    border: 1px solid #dce8e6;
    border-radius: 10px;
    padding: 20px 24px;
}

.kr-maklumat-pledge {
    font-size: 15.5px;
    line-height: 1.75;
    font-style: italic;
    color: #1e293b;
    margin: 0;
}

.kr-maklumat-commitments-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    text-align: left;
    margin-bottom: 28px;
}

.kr-commitment-item {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
}

.kr-com-icon {
    color: #00796b;
    margin-bottom: 8px;
}

.kr-com-title {
    font-size: 13px;
    font-weight: 700;
    color: #00564c;
    margin-bottom: 4px;
}

.kr-com-desc {
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
}

.kr-maklumat-signature-row {
    display: flex;
    justify-content: center;
}

.kr-maklumat-sign-box {
    background: #f0fdf9;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    padding: 14px 28px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.kr-sign-loc {
    font-size: 12px;
    color: #64748b;
}

.kr-sign-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #00564c;
    margin: 4px 0 10px 0;
}

.kr-sign-seal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #00796b;
}

/* 4. INFORMASI BERKALA */
.kr-ppid-jump-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
}

.kr-jump-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-right: 4px;
}

.kr-jump-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #00564c;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kr-jump-pill:hover {
    background: #00796b;
    color: #ffffff;
    border-color: #00796b;
    text-decoration: none;
}

.kr-ppid-section-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.kr-sec-header {
    background: linear-gradient(90deg, #f0fdf9 0%, #ffffff 100%);
    border-bottom: 1.5px solid #dce8e6;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.kr-sec-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kr-sec-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e6f6f4;
    color: #00796b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kr-sec-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #00564c;
    margin: 0;
}

.kr-sec-count {
    font-size: 11.5px;
    font-weight: 700;
    background: #e6f6f4;
    color: #00564c;
    padding: 3px 10px;
    border-radius: 20px;
}

.kr-ppid-item-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kr-ppid-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    gap: 14px;
    transition: background 0.15s ease;
}

.kr-ppid-list-item:last-child {
    border-bottom: none;
}

.kr-ppid-list-item:hover {
    background: #f8fffe;
}

.kr-item-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #1e293b;
    line-height: 1.45;
}

.kr-bullet-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00796b;
    flex-shrink: 0;
}

.kr-btn-download--sm {
    padding: 5px 12px !important;
    font-size: 12px !important;
}

.kr-btn-portal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0284c7;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none !important;
    transition: background 0.15s ease;
}

.kr-btn-portal:hover {
    background: #0369a1;
}

.kr-btn-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    color: #00564c !important;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.kr-btn-view:hover {
    background: #e6f6f4;
    border-color: #00796b;
}

.kr-badge-avail {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 4px;
}

/* 5. INFORMASI SETIAP SAAT */
.kr-ppid-grid-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.kr-ppid-card-item {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.kr-ppid-card-item:hover {
    transform: translateY(-2px);
    border-color: #00796b;
    box-shadow: 0 4px 14px rgba(0, 121, 107, 0.08);
}

.kr-card-item-tag {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #00564c;
    background: #e6f6f4;
    padding: 3px 8px;
    border-radius: 4px;
    width: fit-content;
    margin-bottom: 10px;
}

.kr-card-item-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    margin: 0 0 6px 0;
}

.kr-card-item-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: #64748b;
    margin: 0 0 14px 0;
    flex-grow: 1;
}

.kr-card-avail-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #00796b;
    background: #f0fdf9;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #dce8e6;
}

.kr-ppid-procedure-card {
    background: #f0fdf9;
    border: 1.5px solid #a7f3d0;
    border-radius: 14px;
    padding: 24px 28px;
}

.kr-proc-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    background: #00796b;
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 8px;
}

.kr-proc-title {
    font-size: 18px;
    font-weight: 800;
    color: #00564c;
    margin: 0 0 6px 0;
}

.kr-proc-sub {
    font-size: 13.5px;
    color: #475569;
    margin: 0 0 20px 0;
}

.kr-proc-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.kr-proc-step {
    background: #ffffff;
    border: 1.5px solid #dce8e6;
    border-radius: 10px;
    padding: 16px;
    position: relative;
}

.kr-step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #00796b;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
}

.kr-proc-step h4 {
    font-size: 13.5px;
    font-weight: 700;
    color: #00564c;
    margin: 0 0 6px 0;
}

.kr-proc-step p {
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
    margin: 0;
}

.kr-proc-action-row {
    display: flex;
    justify-content: center;
}

/* 6. INFORMASI SERTA MERTA */
.kr-emergency-alert-card {
    background: #fff7ed;
    border: 2px solid #ea580c;
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 24px;
}

.kr-alert-top {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.kr-alert-icon {
    color: #ea580c;
    flex-shrink: 0;
    margin-top: 2px;
}

.kr-alert-title {
    font-size: 19px;
    font-weight: 800;
    color: #9a3412;
    margin: 0 0 6px 0;
}

.kr-alert-lead {
    font-size: 14px;
    line-height: 1.6;
    color: #7c2d12;
    margin: 0;
}

.kr-alert-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.kr-alert-cat-item {
    background: #ffffff;
    border: 1.5px solid #fed7aa;
    border-radius: 10px;
    padding: 16px;
}

.kr-cat-badge {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #c2410c;
    margin-bottom: 6px;
}

.kr-alert-cat-item h4 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px 0;
}

.kr-alert-cat-item p {
    font-size: 12.5px;
    line-height: 1.45;
    color: #64748b;
    margin: 0;
}

.kr-emergency-contacts-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px 28px;
}

.kr-contacts-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    background: #dc2626;
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 8px;
}

.kr-contacts-header h3 {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
}

.kr-contacts-header p {
    font-size: 13.5px;
    color: #64748b;
    margin: 0 0 20px 0;
}

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

.kr-contact-box {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.kr-contact-box--primary {
    background: #fef2f2;
    border-color: #fca5a5;
}

.kr-contact-num {
    font-size: 22px;
    font-weight: 900;
    color: #dc2626;
    margin-bottom: 4px;
}

.kr-contact-name {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.kr-contact-desc {
    font-size: 11.5px;
    line-height: 1.4;
    color: #64748b;
}

/* 7. INFORMASI DIKECUALIKAN */
.kr-ppid-exempt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kr-exempt-card {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 10px;
    padding: 18px;
}

.kr-exempt-num {
    font-size: 20px;
    font-weight: 900;
    color: #b45309;
    opacity: 0.6;
    margin-bottom: 6px;
}

.kr-exempt-card h4 {
    font-size: 14.5px;
    font-weight: 700;
    color: #92400e;
    margin: 0 0 6px 0;
}

.kr-exempt-card p {
    font-size: 12.5px;
    line-height: 1.5;
    color: #78350f;
    margin: 0;
}

/* PPID DIRECTORY BANNER */
.kr-ppid-directory-box {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px 28px;
    margin-top: 32px;
}

.kr-dir-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #00564c;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}

.kr-dir-title {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.kr-dir-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 18px 0;
}

.kr-dir-links-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.kr-dir-link {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    text-decoration: none !important;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155 !important;
    transition: all 0.15s ease;
    position: relative;
}

.kr-dir-link:hover {
    border-color: #00796b;
    color: #00796b !important;
    background: #f0fdf9;
}

.kr-dir-link--active {
    background: #00796b !important;
    border-color: #00796b !important;
    color: #ffffff !important;
    font-weight: 700;
}

.kr-dir-link--active .kr-dir-icon {
    color: #ffffff;
}

.kr-dir-active-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    margin-left: auto;
}

/* ============================================================
   RESPONSIVE DESIGN FOR PPID (<= 1024px, <= 768px, <= 480px)
   ============================================================ */
@media screen and (max-width: 1024px) {
    .kr-maklumat-commitments-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kr-dir-links-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 768px) {
    .kr-ppid-hero-card {
        padding: 22px 20px;
    }

    .kr-ppid-hero-title {
        font-size: 22px;
    }

    .kr-ppid-meta-strip {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kr-ppid-content-card {
        padding: 20px 16px;
    }

    .kr-ppid-principles-grid,
    .kr-ppid-docs-grid,
    .kr-ppid-grid-cards,
    .kr-proc-steps-grid,
    .kr-alert-categories-grid,
    .kr-contacts-grid,
    .kr-ppid-exempt-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kr-maklumat-commitments-grid {
        grid-template-columns: 1fr;
    }

    .kr-maklumat-inner-border {
        padding: 20px 14px;
    }

    .kr-maklumat-title {
        font-size: 18px;
    }

    .kr-dir-links-grid {
        grid-template-columns: 1fr;
    }

    .kr-ppid-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media screen and (max-width: 480px) {
    .kr-ppid-hero-card {
        padding: 18px 14px;
    }

    .kr-ppid-hero-title {
        font-size: 20px;
    }

    .kr-ppid-content-card {
        padding: 16px 12px;
    }

    .kr-maklumat-certificate-card {
        padding: 12px;
    }

    .kr-maklumat-inner-border {
        padding: 16px 10px;
    }

    .kr-maklumat-statement {
        padding: 14px 12px;
    }

    .kr-contact-num {
        font-size: 20px;
    }
}


/* PPID Empty Notice Card */
.kr-empty-notice-card {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    padding: 48px 24px;
    text-align: center;
    max-width: 640px;
    margin: 24px auto 32px;
}

.kr-empty-notice-card .kr-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e6f6f4;
    color: #00796b;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.kr-empty-notice-card .kr-empty-title {
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px 0;
}

.kr-empty-notice-card .kr-empty-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: #64748b;
    margin: 0 0 20px 0;
}

.kr-empty-notice-card .kr-empty-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #00796b;
    background: #e6f6f4;
    padding: 10px 18px;
    border-radius: 20px;
    line-height: 1.4;
}


/* ========================================================================
   TAUTAN PAGES
   Styling for Tautan (Links) section pages:
   - Main Tautan directory page
   - Organisasi Perangkat Daerah (OPD) directory
   - Kontak Penting emergency contacts
   ======================================================================== */

/* Hero Card - shared across all Tautan pages */
.kr-tautan-hero-card {
    background: linear-gradient(135deg, #00564c, #00796b);
    border-radius: 16px;
    padding: 36px 40px;
    margin-bottom: 32px;
    color: #ffffff;
    box-shadow: 0 6px 24px rgba(0, 121, 107, 0.22);
}

.kr-tautan-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 18px;
}

.kr-tautan-hero-badge svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.kr-tautan-hero-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 14px 0;
}

.kr-tautan-hero-lead {
    font-size: 16px;
    line-height: 1.6;
    color: #e6f6f4;
    margin: 0 0 24px 0;
    max-width: 860px;
}

.kr-tautan-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.kr-tautan-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.kr-tautan-meta-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Section Headers */
.kr-tautan-section {
    margin-bottom: 48px;
}

.kr-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 24px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #e2e8f0;
}

.kr-section-accent {
    display: block;
    width: 5px;
    height: 28px;
    background: var(--kr-header-background);
    border-radius: 3px;
}

/* ======================================
   MAIN TAUTAN PAGE - External Link Cards
   ====================================== */

.kr-tautan-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.kr-tautan-link-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 26px;
    text-decoration: none;
    color: inherit;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    box-shadow: 0 2px 10px rgba(0, 40, 35, 0.04);
}

.kr-tautan-link-card:hover,
.kr-tautan-link-card:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 121, 107, 0.14);
    border-color: #00796b;
    outline: none;
}

.kr-tautan-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}

.kr-tautan-icon-pemkot {
    background: linear-gradient(135deg, #00796b, #00564c);
}

.kr-tautan-icon-kecamatan {
    background: linear-gradient(135deg, #0891b2, #0e7490);
}

.kr-tautan-card-content {
    flex: 1;
    min-width: 0;
}

.kr-tautan-card-title {
    font-size: 19px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.kr-tautan-card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: #64748b;
    margin: 0 0 10px 0;
}

.kr-tautan-card-url {
    font-size: 13px;
    font-weight: 600;
    color: #00796b;
    font-family: 'Courier New', monospace;
}

.kr-tautan-card-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0fdf9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #00796b;
    transition: background 120ms ease, transform 120ms ease;
}

.kr-tautan-link-card:hover .kr-tautan-card-arrow {
    background: #00796b;
    color: #ffffff;
    transform: scale(1.1);
}

/* Internal Navigation Cards */
.kr-tautan-internal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 20px;
}

.kr-tautan-internal-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    border: 2px solid #dce8e6;
    border-radius: 12px;
    padding: 22px 24px;
    text-decoration: none;
    color: inherit;
    transition: all 140ms ease;
    box-shadow: 0 2px 8px rgba(0, 40, 35, 0.03);
}

.kr-tautan-internal-card:hover,
.kr-tautan-internal-card:focus {
    transform: translateX(4px);
    border-color: #00796b;
    box-shadow: 0 6px 20px rgba(0, 121, 107, 0.12);
    outline: none;
}

.kr-tautan-internal-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: #f0fdf9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #00796b;
    transition: all 140ms ease;
}

.kr-tautan-internal-card:hover .kr-tautan-internal-icon {
    background: #00796b;
    color: #ffffff;
}

.kr-tautan-internal-content {
    flex: 1;
    min-width: 0;
}

.kr-tautan-internal-title {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.kr-tautan-internal-desc {
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

.kr-tautan-internal-arrow {
    font-size: 24px;
    font-weight: 700;
    color: #00796b;
    flex-shrink: 0;
    transition: transform 140ms ease;
}

.kr-tautan-internal-card:hover .kr-tautan-internal-arrow {
    transform: translateX(4px);
}

/* ======================================
   OPD PAGE - Directory Cards
   ====================================== */

.kr-opd-hero {
    /* Inherits .kr-tautan-hero-card styles */
}

.kr-opd-hero-stats {
    display: flex;
    gap: 24px;
    margin-top: 20px;
}

.kr-opd-stat {
    text-align: center;
}

.kr-opd-stat-number {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 6px;
}

.kr-opd-stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ccebe6;
}

.kr-opd-directory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 20px;
}

.kr-opd-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 22px 24px;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    box-shadow: 0 2px 8px rgba(0, 40, 35, 0.03);
}

.kr-opd-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 121, 107, 0.10);
    border-color: #00796b;
}

.kr-opd-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.kr-opd-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #f0fdf9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00796b;
}

.kr-opd-card-icon svg {
    width: 24px;
    height: 24px;
}

.kr-opd-card-number {
    font-size: 15px;
    font-weight: 800;
    color: #cbd5e1;
    letter-spacing: 0.5px;
}

.kr-opd-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
    line-height: 1.35;
}

.kr-opd-card-details {
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
    margin: 0 0 12px 0;
}

.kr-opd-card-email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #00796b;
    text-decoration: none;
    padding: 8px 12px;
    background: #f0fdf9;
    border-radius: 6px;
    transition: background 120ms ease, color 120ms ease;
}

.kr-opd-card-email:hover,
.kr-opd-card-email:focus {
    background: #00796b;
    color: #ffffff;
    outline: none;
}

.kr-opd-card-email svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ======================================
   KONTAK PENTING PAGE - Emergency Contacts
   ====================================== */

.kr-kontak-hero {
    /* Inherits .kr-tautan-hero-card styles */
}

.kr-kontak-badge-emergency {
    background: rgba(239, 68, 68, 0.95);
    border-color: rgba(255, 255, 255, 0.35);
    animation: kr-pulse-emergency 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes kr-pulse-emergency {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.02);
    }
}

.kr-kontak-hero-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(245, 158, 11, 0.15);
    border: 1.5px solid rgba(245, 158, 11, 0.35);
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 20px;
    color: #fffbeb;
}

.kr-kontak-hero-alert svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #fbbf24;
}

.kr-kontak-hero-alert strong {
    color: #ffffff;
}

.kr-kontak-hero-alert span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
}

.kr-kontak-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 18px;
    margin-bottom: 32px;
}

.kr-kontak-card {
    position: relative;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    box-shadow: 0 2px 8px rgba(0, 40, 35, 0.03);
}

.kr-kontak-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 121, 107, 0.12);
    border-color: #00796b;
}

.kr-kontak-card.kr-kontak-emergency {
    border-color: #fca5a5;
    background: linear-gradient(135deg, #ffffff, #fef2f2);
}

.kr-kontak-card.kr-kontak-emergency:hover {
    border-color: #ef4444;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.20);
}

.kr-kontak-emergency-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 4px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.kr-kontak-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f0fdf9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #00796b;
    transition: all 120ms ease;
}

.kr-kontak-card:hover .kr-kontak-card-icon {
    background: #00796b;
    color: #ffffff;
    transform: scale(1.08);
}

.kr-kontak-emergency .kr-kontak-card-icon {
    background: #fee2e2;
    color: #dc2626;
}

.kr-kontak-emergency:hover .kr-kontak-card-icon {
    background: #ef4444;
    color: #ffffff;
}

.kr-kontak-card-icon svg {
    width: 30px;
    height: 30px;
}

.kr-kontak-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.kr-kontak-card-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #00796b;
    text-decoration: none;
    padding: 10px 16px;
    background: #f0fdf9;
    border-radius: 8px;
    transition: all 120ms ease;
}

.kr-kontak-card-phone:hover,
.kr-kontak-card-phone:focus {
    background: #00796b;
    color: #ffffff;
    outline: none;
}

.kr-kontak-emergency .kr-kontak-card-phone {
    color: #dc2626;
    background: #fee2e2;
}

.kr-kontak-emergency .kr-kontak-card-phone:hover,
.kr-kontak-emergency .kr-kontak-card-phone:focus {
    background: #ef4444;
    color: #ffffff;
}

.kr-kontak-card-phone svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.kr-kontak-info-card {
    display: flex;
    gap: 18px;
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-left-width: 5px;
    border-radius: 12px;
    padding: 22px 26px;
}

.kr-kontak-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #d97706;
}

.kr-kontak-info-icon svg {
    width: 24px;
    height: 24px;
}

.kr-kontak-info-content {
    flex: 1;
}

.kr-kontak-info-content h3 {
    font-size: 17px;
    font-weight: 700;
    color: #78350f;
    margin: 0 0 8px 0;
}

.kr-kontak-info-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #92400e;
    margin: 0;
}

.kr-kontak-info-content strong {
    font-weight: 700;
    color: #78350f;
}

/* ======================================
   RESPONSIVE - Mobile & Tablet
   ====================================== */

@media (max-width: 768px) {
    .kr-tautan-hero-card {
        padding: 28px 24px;
        border-radius: 12px;
    }

    .kr-tautan-hero-title {
        font-size: 28px;
    }

    .kr-tautan-hero-lead {
        font-size: 15px;
    }

    .kr-tautan-hero-meta {
        gap: 12px;
    }

    .kr-tautan-meta-item {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13px;
        padding: 8px 12px;
    }

    .kr-section-header {
        font-size: 20px;
    }

    .kr-tautan-cards-grid,
    .kr-tautan-internal-grid {
        grid-template-columns: 1fr;
    }

    .kr-tautan-link-card {
        padding: 20px;
    }

    .kr-tautan-card-icon {
        width: 48px;
        height: 48px;
    }

    .kr-tautan-card-title {
        font-size: 17px;
    }

    .kr-opd-directory {
        grid-template-columns: 1fr;
    }

    .kr-opd-hero-stats {
        gap: 18px;
    }

    .kr-opd-stat-number {
        font-size: 28px;
    }

    .kr-kontak-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
        gap: 14px;
    }

    .kr-kontak-card {
        padding: 20px 16px;
    }

    .kr-kontak-card-icon {
        width: 52px;
        height: 52px;
    }

    .kr-kontak-card-title {
        font-size: 15px;
    }

    .kr-kontak-card-phone {
        font-size: 14px;
        padding: 8px 12px;
    }

    .kr-kontak-info-card {
        flex-direction: column;
        padding: 18px 20px;
    }

    .kr-kontak-hero-alert {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .kr-tautan-hero-title {
        font-size: 24px;
    }

    .kr-tautan-hero-meta {
        flex-direction: column;
        gap: 8px;
    }

    .kr-tautan-meta-item {
        width: 100%;
    }

    .kr-tautan-link-card {
        flex-direction: column;
        text-align: center;
    }

    .kr-tautan-card-arrow {
        align-self: center;
    }

    .kr-kontak-cards-grid {
        grid-template-columns: 1fr;
    }

    .kr-opd-hero-stats {
        flex-direction: column;
        gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kr-tautan-link-card,
    .kr-tautan-internal-card,
    .kr-opd-card,
    .kr-kontak-card,
    .kr-tautan-card-arrow,
    .kr-tautan-internal-icon,
    .kr-kontak-card-icon {
        transition: none;
    }

    .kr-kontak-badge-emergency {
        animation: none;
    }
}


/* ========================================================================
   BUKU TAMU (GUEST BOOK) PAGE
   Modern contact hub with multiple communication channels
   ======================================================================== */

/* Hero Card */
.kr-buku-tamu-hero {
    background: linear-gradient(135deg, #00564c, #00796b);
    border-radius: 16px;
    padding: 38px 42px;
    margin-bottom: 32px;
    color: #ffffff;
    box-shadow: 0 6px 24px rgba(0, 121, 107, 0.22);
}

.kr-buku-tamu-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 18px;
}

.kr-buku-tamu-hero-badge svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.kr-buku-tamu-hero-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 16px 0;
}

.kr-buku-tamu-hero-lead {
    font-size: 17px;
    line-height: 1.6;
    color: #e6f6f4;
    margin: 0 0 26px 0;
    max-width: 900px;
}

.kr-buku-tamu-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.kr-buku-tamu-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.kr-buku-tamu-stat svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Section */
.kr-buku-tamu-section {
    margin-bottom: 48px;
}

/* Contact Methods Grid */
.kr-buku-tamu-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 22px;
}

.kr-buku-tamu-contact-card {
    position: relative;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 28px 26px;
    text-decoration: none;
    color: inherit;
    transition: all 140ms ease;
    box-shadow: 0 2px 10px rgba(0, 40, 35, 0.04);
    display: flex;
    flex-direction: column;
}

.kr-buku-tamu-contact-card:hover,
.kr-buku-tamu-contact-card:focus {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0, 121, 107, 0.15);
    border-color: #00796b;
    outline: none;
}

.kr-buku-tamu-contact-card.kr-contact-primary {
    border-color: #00796b;
    border-width: 2px;
    background: linear-gradient(135deg, #ffffff, #f0fdf9);
}

.kr-buku-tamu-contact-card.kr-contact-primary:hover {
    box-shadow: 0 12px 36px rgba(0, 121, 107, 0.25);
    transform: translateY(-5px) scale(1.01);
}

.kr-buku-tamu-contact-card.kr-contact-visit {
    cursor: default;
}

.kr-buku-tamu-contact-card.kr-contact-visit:hover {
    transform: none;
    box-shadow: 0 2px 10px rgba(0, 40, 35, 0.04);
    border-color: #e2e8f0;
}

.kr-contact-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: linear-gradient(135deg, #00796b, #00564c);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 5px 14px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 121, 107, 0.3);
}

.kr-contact-icon {
    width: 68px;
    height: 68px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: all 140ms ease;
}

.kr-contact-whatsapp {
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #ffffff;
}

.kr-contact-email {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    color: #ffffff;
}

.kr-contact-phone {
    background: linear-gradient(135deg, #00796b, #00564c);
    color: #ffffff;
}

.kr-contact-location {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
}

.kr-buku-tamu-contact-card:hover .kr-contact-icon {
    transform: scale(1.08) rotate(-3deg);
}

.kr-contact-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px 0;
}

.kr-contact-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    margin: 0 0 16px 0;
    flex: 1;
}

.kr-contact-number {
    font-size: 17px;
    font-weight: 700;
    color: #00796b;
    margin-bottom: 16px;
    font-family: 'Courier New', monospace;
}

.kr-contact-address {
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
    margin-bottom: 16px;
}

.kr-contact-address strong {
    color: #1e293b;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

.kr-contact-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #00796b;
    padding: 12px 20px;
    background: #f0fdf9;
    border-radius: 8px;
    transition: all 140ms ease;
}

.kr-buku-tamu-contact-card:hover .kr-contact-cta {
    background: #00796b;
    color: #ffffff;
}

.kr-contact-cta svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 140ms ease;
}

.kr-buku-tamu-contact-card:hover .kr-contact-cta svg {
    transform: translateX(3px);
}

/* Info Grid */
.kr-buku-tamu-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 20px;
}

.kr-buku-tamu-info-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 26px;
    box-shadow: 0 2px 8px rgba(0, 40, 35, 0.03);
}

.kr-info-hours {
    border-left-width: 4px;
    border-left-color: #00796b;
}

.kr-info-tips {
    border-left-width: 4px;
    border-left-color: #0891b2;
}

.kr-info-response {
    border-left-width: 4px;
    border-left-color: #f59e0b;
}

.kr-info-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #f0fdf9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00796b;
    margin-bottom: 16px;
}

.kr-info-tips .kr-info-icon {
    background: #ecfeff;
    color: #0891b2;
}

.kr-info-response .kr-info-icon {
    background: #fffbeb;
    color: #f59e0b;
}

.kr-info-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px 0;
}

.kr-info-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kr-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.kr-info-row:last-child {
    border-bottom: none;
}

.kr-info-label {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.kr-info-value {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

.kr-info-value.kr-info-fast {
    color: #00796b;
}

.kr-info-row.kr-info-closed {
    opacity: 0.6;
}

.kr-info-row.kr-info-closed .kr-info-value {
    color: #94a3b8;
}

.kr-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kr-info-list li {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    padding-left: 24px;
    position: relative;
}

.kr-info-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: #00796b;
}

/* Privacy Notice */
.kr-buku-tamu-privacy {
    display: flex;
    gap: 16px;
    background: #f0fdf9;
    border: 1.5px solid #ccebe6;
    border-left-width: 5px;
    border-left-color: #00796b;
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 32px;
}

.kr-buku-tamu-privacy svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #00796b;
    margin-top: 2px;
}

.kr-buku-tamu-privacy strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #00564c;
    margin-bottom: 6px;
}

.kr-buku-tamu-privacy p {
    font-size: 14px;
    line-height: 1.6;
    color: #0f766e;
    margin: 0;
}

/* ======================================
   RESPONSIVE - Mobile & Tablet
   ====================================== */

@media (max-width: 768px) {
    .kr-buku-tamu-hero {
        padding: 30px 26px;
        border-radius: 12px;
    }

    .kr-buku-tamu-hero-title {
        font-size: 30px;
    }

    .kr-buku-tamu-hero-lead {
        font-size: 16px;
    }

    .kr-buku-tamu-hero-stats {
        gap: 12px;
    }

    .kr-buku-tamu-stat {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        padding: 8px 14px;
    }

    .kr-buku-tamu-contact-grid {
        grid-template-columns: 1fr;
    }

    .kr-buku-tamu-info-grid {
        grid-template-columns: 1fr;
    }

    .kr-contact-icon {
        width: 60px;
        height: 60px;
    }

    .kr-contact-title {
        font-size: 18px;
    }

    .kr-info-icon {
        width: 48px;
        height: 48px;
    }

    .kr-buku-tamu-privacy {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .kr-buku-tamu-hero-title {
        font-size: 26px;
    }

    .kr-buku-tamu-hero-stats {
        flex-direction: column;
        gap: 8px;
    }

    .kr-buku-tamu-stat {
        width: 100%;
    }

    .kr-contact-badge {
        right: 10px;
    }

    .kr-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kr-buku-tamu-contact-card,
    .kr-contact-icon,
    .kr-contact-cta,
    .kr-contact-cta svg {
        transition: none;
    }
}


/* ==========================================================================
   FOOTER MODERNIZATION
   - Teal gradient background matching header
   - Organized widget and menu layout
   - Better typography and spacing
   - Responsive design
   ========================================================================== */

/* Footer Widget Area */
.site-footer-widgets {
	background: linear-gradient(180deg, #00564c 0%, #004139 100%);
	padding: 48px 16px 32px;
	color: #ffffff;
}

.site-footer-widgets .site-container {
	max-width: 1280px;
	margin: 0 auto;
}

.site-footer-widgets ul {
	display: flex;
	justify-content: center;
	gap: 0;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Archive Widget Styling */
.site-footer-widgets .widget {
	text-align: center;
	padding: 0;
	margin: 0;
}

.site-footer-widgets .widgettitle {
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #2dd4bf;
	margin-bottom: 16px;
	opacity: 1;
}

/* Ensure footer widget titles are visible everywhere - ultra specific selectors */
.site-footer .widgettitle,
#colophon .widgettitle,
.site-footer-widgets #archives-2 .widgettitle,
#colophon #archives-2 h2.widgettitle {
	color: #2dd4bf !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	opacity: 1 !important;
}

.site-footer-widgets select {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	color: #ffffff;
	padding: 10px 36px 10px 14px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	min-width: 200px;
}

.site-footer-widgets select:hover,
.site-footer-widgets select:focus {
	background-color: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.45);
	outline: none;
}

.site-footer-widgets select option {
	background: #00564c;
	color: #ffffff;
	padding: 8px;
}

/* Footer Info Bar (Copyright & Menu) */
.site-info {
	background: #003831;
	padding: 28px 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-info-wrapper {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

/* Copyright Text */
.site-info-text {
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

.site-info-text a {
	color: #2dd4bf;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.site-info-text a:hover {
	color: #5eead4;
	text-decoration: underline;
}

/* Footer Menu */
.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-menu li {
	margin: 0;
	padding: 0;
}

.footer-menu a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: color 0.2s ease;
	position: relative;
}

.footer-menu a:hover,
.footer-menu a:focus {
	color: #2dd4bf;
}

.footer-menu a:hover::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 1px;
	background: #2dd4bf;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.site-footer-widgets {
		padding: 36px 16px 24px;
	}

	.site-info {
		padding: 24px 16px;
	}

	.site-info-wrapper {
		flex-direction: column;
		text-align: center;
		gap: 16px;
	}

	.footer-menu {
		justify-content: center;
		gap: 12px 20px;
	}

	.site-footer-widgets select {
		min-width: 280px;
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.site-footer-widgets {
		padding: 28px 12px 20px;
	}

	.site-info {
		padding: 20px 12px;
	}

	.site-info-text {
		font-size: 13px;
	}

	.footer-menu {
		gap: 10px 16px;
	}

	.footer-menu a {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-footer-widgets select,
	.site-info-text a,
	.footer-menu a {
		transition: none;
	}
}