/**
 * TUNTAS BPK · Pemerintah Kota Bekasi
 * Lapisan gaya frontend: permukaan terang, aksen hijau hutan.
 * Dimuat setelah style.css & responsive.css bawaan tema.
 */
:root
{
	--tf-ink: #16241F;
	--tf-ink-2: #33403B;
	--tf-muted: #5F6E68;
	--tf-line: #E3E8E5;
	--tf-line-strong: #CAD3CE;
	--tf-bg: #F6F8F7;
	--tf-subtle: #EEF2F0;
	--tf-brand: #1F6F5C;
	--tf-brand-dark: #17594A;
	--tf-brand-tint: #EAF4F0;
	--tf-brand-line: #C5E3D8;
	--tf-panel: #1E4D43;
	--tf-panel-2: #2A5C51;
	--tf-panel-muted: #B3CFC6;
	--tf-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif
}

body.tf-body
{
	background: var(--tf-bg);
	color: var(--tf-ink);
	font-family: var(--tf-font)
}
.tf-body h1, .tf-body h2, .tf-body h3, .tf-body h4, .tf-body h5, .tf-body h6
{
	font-family: var(--tf-font);
	color: var(--tf-ink)
}
.tf-body a
{
	color: var(--tf-brand)
}
.tf-body a:hover
{
	color: var(--tf-brand-dark)
}
.tf-body .shapes
{
	display: none !important
}

/* konten modul lain yang ditulis untuk latar gelap */
.tf-body #content-placeholder
{
	padding: 40px 0 72px
}
.tf-body #content-placeholder .text-white:not(.tf-on-dark),
.tf-body #content-placeholder .text-light:not(.tf-on-dark)
{
	color: var(--tf-ink) !important
}
.tf-body #content-placeholder .tf-on-dark,
.tf-body #content-placeholder .tf-on-dark h1,
.tf-body #content-placeholder .tf-on-dark h2,
.tf-body #content-placeholder .tf-on-dark p
{
	color: #FFFFFF
}

/* =============== header =============== */
.tf-header
{
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid var(--tf-line);
	backdrop-filter: saturate(140%) blur(6px)
}
.tf-header .tf-header-inner
{
	max-width: 1240px;
	margin: 0 auto;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	gap: 16px
}
.tf-brand
{
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--tf-ink);
	margin-right: auto
}
.tf-brand img
{
	width: 40px;
	height: 44px;
	object-fit: contain;
	flex: none
}
.tf-brand strong
{
	display: block;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.15;
	color: var(--tf-ink)
}
.tf-brand small
{
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--tf-brand-dark);
	line-height: 1.3
}
.tf-header .navbar
{
	padding: 0
}
.tf-header .navbar-nav .nav-link
{
	color: var(--tf-ink-2) !important;
	font-size: 15px;
	font-weight: 600;
	padding: 10px 14px !important;
	border-radius: 8px
}
.tf-header .navbar-nav .nav-link:hover,
.tf-header .navbar-nav .nav-item.active > .nav-link
{
	color: var(--tf-brand-dark) !important;
	background: var(--tf-brand-tint);
	text-decoration: none
}
.tf-header .dropdown-menu
{
	border: 1px solid var(--tf-line);
	border-radius: 12px;
	box-shadow: 0 16px 40px -12px rgba(22, 36, 31, .2);
	padding: 6px
}
.tf-header .dropdown-item
{
	border-radius: 6px;
	font-size: 14px;
	padding: 8px 12px;
	color: var(--tf-ink-2)
}
.tf-header .dropdown-item:hover
{
	background: var(--tf-brand-tint);
	color: var(--tf-brand-dark)
}
.tf-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 10px;
	border: 1px solid var(--tf-brand);
	background: var(--tf-brand);
	color: #FFFFFF !important;
	font-family: var(--tf-font);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s ease
}
.tf-btn:hover
{
	background: var(--tf-brand-dark);
	border-color: var(--tf-brand-dark);
	color: #FFFFFF !important
}
.tf-btn.tf-btn-ghost
{
	background: #FFFFFF;
	border-color: var(--tf-line-strong);
	color: var(--tf-ink) !important
}
.tf-btn.tf-btn-ghost:hover
{
	border-color: var(--tf-brand);
	color: var(--tf-brand-dark) !important;
	background: #FFFFFF
}
.tf-btn.tf-btn-light
{
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--tf-brand-dark) !important
}
.tf-btn.tf-btn-light:hover
{
	background: var(--tf-brand-tint);
	border-color: var(--tf-brand-tint)
}
.tf-toggler
{
	width: 44px;
	height: 44px;
	border: 1px solid var(--tf-line);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--tf-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center
}
@media (max-width: 991.98px)
{
	.tf-header .tf-header-inner
	{
		flex-wrap: wrap
	}
	.tf-header .navbar
	{
		order: 3;
		width: 100%
	}
	.tf-header .navbar-collapse
	{
		padding: 8px 0 12px;
		border-top: 1px solid var(--tf-line);
		margin-top: 8px
	}
}

/* =============== beranda =============== */
.tf-home
{
	margin: -40px 0 -72px
}
.tf-container
{
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px
}
.tf-section
{
	padding: 88px 0
}
.tf-eyebrow
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tf-brand-dark)
}
.tf-eyebrow i
{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #10B981;
	box-shadow: 0 0 0 4px rgba(16, 185, 129, .18)
}
.tf-hero
{
	padding: 72px 0 88px;
	background-color: #FFFFFF;
	background-image: linear-gradient(var(--tf-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--tf-subtle) 1px, transparent 1px);
	background-size: 40px 40px;
	border-bottom: 1px solid var(--tf-line)
}
.tf-hero-grid
{
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 56px;
	align-items: center
}
.tf-hero h1
{
	margin: 18px 0 18px;
	font-size: 54px;
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -.03em
}
.tf-hero h1 span
{
	color: var(--tf-brand)
}
.tf-hero .tf-lede
{
	margin: 0 0 32px;
	font-size: 18px;
	line-height: 1.65;
	color: var(--tf-muted);
	max-width: 560px
}
.tf-actions
{
	display: flex;
	flex-wrap: wrap;
	gap: 12px
}
.tf-hero-card
{
	background: #FFFFFF;
	border: 1px solid var(--tf-line);
	border-radius: 20px;
	padding: 28px;
	box-shadow: 0 1px 2px rgba(22, 36, 31, .04), 0 24px 48px -24px rgba(22, 36, 31, .22)
}
.tf-hero-card .tf-identity
{
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--tf-line)
}
.tf-hero-card .tf-identity img
{
	width: 56px;
	height: 62px;
	object-fit: contain
}
.tf-hero-card .tf-identity strong
{
	display: block;
	font-size: 16px;
	font-weight: 800
}
.tf-hero-card .tf-identity span
{
	font-size: 13px;
	color: var(--tf-muted)
}
.tf-flow
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px
}
.tf-flow li
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--tf-bg);
	border: 1px solid var(--tf-line);
	font-size: 14px;
	font-weight: 600;
	color: var(--tf-ink-2)
}
.tf-flow li b
{
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 8px;
	background: var(--tf-brand-tint);
	color: var(--tf-brand-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px
}
.tf-flow li small
{
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--tf-muted)
}
.tf-head
{
	max-width: 640px;
	margin-bottom: 40px
}
.tf-head h2
{
	margin: 12px 0 10px;
	font-size: 36px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.02em
}
.tf-head p
{
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--tf-muted)
}
.tf-cards
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px
}
.tf-card
{
	background: #FFFFFF;
	border: 1px solid var(--tf-line);
	border-radius: 16px;
	padding: 28px
}
.tf-card .tf-icon
{
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--tf-brand-tint);
	color: var(--tf-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 18px
}
.tf-card h3
{
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700
}
.tf-card p
{
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tf-muted)
}
.tf-modules
{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px
}
.tf-module
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-radius: 12px;
	background: #FFFFFF;
	border: 1px solid var(--tf-line);
	font-size: 15px;
	font-weight: 700;
	color: var(--tf-ink)
}
.tf-module i
{
	font-size: 22px;
	color: var(--tf-brand)
}
.tf-module small
{
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--tf-muted)
}
.tf-posts
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px
}
.tf-post
{
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid var(--tf-line);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: var(--tf-ink)
}
.tf-post:hover
{
	border-color: var(--tf-brand-line)
}
.tf-post img
{
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--tf-subtle)
}
.tf-post div
{
	padding: 18px 20px 22px
}
.tf-post small
{
	font-size: 12px;
	font-weight: 700;
	color: var(--tf-brand-dark);
	text-transform: uppercase;
	letter-spacing: .06em
}
.tf-post h3
{
	margin: 8px 0 0;
	font-size: 17px;
	line-height: 1.4;
	font-weight: 700
}
.tf-cta
{
	padding: 0 0 88px
}
.tf-cta-box
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 44px 48px;
	border-radius: 24px;
	background-color: var(--tf-panel);
	background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 32px 32px
}
.tf-cta-box h2
{
	margin: 0 0 8px;
	font-size: 30px;
	font-weight: 800;
	color: #FFFFFF !important
}
.tf-cta-box p
{
	margin: 0;
	font-size: 16px;
	color: var(--tf-panel-muted)
}

/* =============== footer =============== */
.tf-footer
{
	background: #FFFFFF;
	border-top: 1px solid var(--tf-line);
	color: var(--tf-muted);
	font-size: 14px
}
.tf-footer .tf-footer-grid
{
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	gap: 40px;
	padding: 56px 0 40px
}
.tf-footer h4
{
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tf-ink)
}
.tf-footer ul
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px
}
.tf-footer a
{
	color: var(--tf-ink-2);
	text-decoration: none
}
.tf-footer a:hover
{
	color: var(--tf-brand-dark);
	text-decoration: underline
}
.tf-footer address
{
	font-style: normal;
	line-height: 1.7;
	margin: 14px 0 0;
	max-width: 380px
}
.tf-footer .tf-footer-bottom
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	padding: 18px 0 28px;
	border-top: 1px solid var(--tf-line);
	font-size: 13px
}

@media (max-width: 991.98px)
{
	.tf-hero-grid,
	.tf-footer .tf-footer-grid
	{
		grid-template-columns: minmax(0, 1fr)
	}
	.tf-cards,
	.tf-posts
	{
		grid-template-columns: minmax(0, 1fr)
	}
	.tf-modules
	{
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}
	.tf-hero h1
	{
		font-size: 40px
	}
}
@media (max-width: 575.98px)
{
	.tf-container,
	.tf-header .tf-header-inner
	{
		padding-left: 16px;
		padding-right: 16px
	}
	.tf-section
	{
		padding: 64px 0
	}
	.tf-hero
	{
		padding: 48px 0 64px
	}
	.tf-hero h1
	{
		font-size: 34px
	}
	.tf-head h2
	{
		font-size: 28px
	}
	.tf-modules
	{
		grid-template-columns: minmax(0, 1fr)
	}
	.tf-cta-box
	{
		padding: 32px 24px
	}
	.tf-brand small
	{
		display: none
	}
}