/* =====================================================================
   SI-BIMSAT — Gaya Sisi Publik
   Navbar, hero, kartu menu utama, stepper 4 tahap, dan footer.
   Mengikuti rujukan visual infografis resmi SI-BIMSAT.
   ===================================================================== */

/* =====================================================================
   Navbar publik
   ===================================================================== */

.navbar-publik {
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	box-shadow: var(--shadow-sm);
	padding: .5rem 0;
	min-height: var(--tinggi-navbar);
}
.navbar-publik .navbar-brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: 0;
}
.navbar-publik .navbar-brand img {
	height: 44px;
	width: auto;
}
.merek-teks__nama {
	display: block;
	font-family: var(--font-judul);
	font-weight: 900;
	font-size: 1.25rem;
	line-height: 1.1;
	color: var(--biru-tua);
	letter-spacing: .5px;
}
.merek-teks__ket {
	display: block;
	font-size: .68rem;
	color: var(--abu-500);
	line-height: 1.2;
	max-width: 230px;
}
.navbar-publik .nav-link {
	font-weight: 600;
	font-size: .92rem;
	color: var(--abu-700);
	padding: .5rem .8rem !important;
	border-radius: var(--radius-pill);
	transition: all .18s ease;
}
.navbar-publik .nav-link:hover,
.navbar-publik .nav-link.aktif {
	color: var(--biru-primer);
	background: var(--biru-muda-bg);
	text-decoration: none;
}

/* =====================================================================
   Hero
   ===================================================================== */

.hero {
	position: relative;
	background: var(--grad-hero);
	padding: clamp(2.5rem, 2rem + 4vw, 5rem) 0 clamp(5rem, 4rem + 6vw, 8rem);
	overflow: hidden;
}

/* ---------------------------------------------------------------------
   Hero berlatar foto apel Satlinmas.

   Fotonya potret (1000x1500) sedangkan hero melebar, jadi dipasang
   `cover` dengan titik fokus di atas-tengah supaya wajah petugas tidak
   ikut terpotong saat layar melebar. Di atasnya diberi lapisan gelap
   miring: tanpa itu teks biru tua bawaan hero tenggelam di dalam foto
   yang terang dan ramai.
   --------------------------------------------------------------------- */

.hero--foto { background: var(--biru-tua); }

.hero--foto .hero__latar {
	position: absolute;
	inset: 0;
	background-image: url("../img/hero/latar-linmas.jpg");
	background-size: cover;
	background-position: center 18%;
	background-repeat: no-repeat;
}

/* Lapisan gelap: pekat di kiri (tempat teks) dan menipis ke kanan
   (tempat logo), sehingga foto tetap terlihat tanpa mengorbankan
   keterbacaan. */
.hero--foto .hero__latar::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg,
			rgba(6, 32, 76, .94) 0%,
			rgba(8, 42, 99, .90) 38%,
			rgba(8, 40, 96, .82) 68%,
			rgba(7, 36, 88, .78) 100%);
}

/* Warna teks hero dibalik menjadi terang khusus varian berfoto. */
.hero--foto .hero__judul { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.hero--foto .hero__judul .singkatan { color: #9FE870; }
.hero--foto .hero__subjudul { color: #DCEBFF; }
.hero--foto .hero__tagline { color: #F1F7FF; }

@media (max-width: 991.98px) {
	/* Pada layar sempit logo turun ke bawah teks, jadi lapisan gelapnya
	   dibuat rata agar seluruh kolom tetap terbaca. */
	.hero--foto .hero__latar::after {
		background: linear-gradient(180deg,
			rgba(6, 32, 76, .93) 0%,
			rgba(8, 42, 99, .90) 100%);
	}

	/* Tanpa batas ini logo melebar sepenuh kolom dan bertabrakan dengan
	   perisai pada foto latar. */
	.hero--foto .hero__ilustrasi {
		max-width: 340px;
		margin-inline: auto;
	}
}
.hero__judul {
	font-size: clamp(2.4rem, 1.6rem + 4vw, 4.25rem);
	font-weight: 900;
	color: var(--biru-tua);
	line-height: 1.05;
	margin-bottom: .5rem;
	letter-spacing: .5px;
}
.hero__judul .singkatan { color: var(--hijau); }
.hero__subjudul {
	font-family: var(--font-judul);
	font-size: clamp(1rem, .9rem + .6vw, 1.4rem);
	font-weight: 700;
	color: var(--biru-primer);
	margin-bottom: .5rem;
}
.hero__tagline {
	font-style: italic;
	font-weight: 500;
	color: var(--biru-tua);
	font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
	max-width: 34rem;
	margin-bottom: 1.75rem;
}
.hero__aksi { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__ilustrasi {
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 18px 34px rgba(11, 60, 141, .22));
}

/* Motif gelombang putih & kuning di dasar hero. */
.hero__gelombang {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	line-height: 0;
	pointer-events: none;
}
.hero__gelombang svg { width: 100%; height: auto; display: block; }

/* =====================================================================
   Statistik ringkas (counter animasi)
   ===================================================================== */

.pita-statistik {
	position: relative;
	z-index: 3;
	margin-top: -3.25rem;
}
.pita-statistik .kartu-statistik { flex-direction: column; text-align: center; gap: .5rem; }
.pita-statistik .kartu-statistik__ikon { width: 56px; height: 56px; font-size: 1.55rem; }

/* =====================================================================
   Kartu menu utama (6 kartu)
   ===================================================================== */

.panel-menu-utama {
	background: var(--putih);
	border: 2px solid #C7DDFB;
	border-radius: var(--radius-lg);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
	box-shadow: var(--shadow-md);
}

.kartu-menu {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.25rem 1.25rem;
	color: var(--putih);
	text-decoration: none;
	box-shadow: var(--shadow-md);
	transition: transform .25s ease, box-shadow .25s ease;
	overflow: hidden;
	background: var(--grad-biru);
}
.kartu-menu:hover,
.kartu-menu:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
	color: var(--putih);
	text-decoration: none;
}

/* Badge nomor bulat putih di pojok kiri atas. */
.kartu-menu__nomor {
	position: absolute;
	top: 14px; left: 14px;
	width: 36px; height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--putih);
	font-family: var(--font-judul);
	font-weight: 900;
	font-size: 1.05rem;
	box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
}

.kartu-menu__ikon {
	display: grid;
	place-items: center;
	width: 66px; height: 66px;
	margin: .5rem 0 1rem auto;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, .22);
	font-size: 1.9rem;
	color: var(--putih);
}
.kartu-menu__judul {
	font-family: var(--font-judul);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--putih);
	margin-bottom: .5rem;
	min-height: 3.9em;
}
.kartu-menu__ket {
	font-size: .84rem;
	color: rgba(255, 255, 255, .92);
	margin-bottom: 1rem;
	flex-grow: 1;
}
.kartu-menu__gambar {
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, .16);
	padding: .5rem;
	margin-top: auto;
}
.kartu-menu__gambar img,
.kartu-menu__gambar svg {
	width: 100%;
	height: 92px;
	object-fit: contain;
	display: block;
}
.kartu-menu__lanjut {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .85rem;
	font-weight: 700;
	font-size: .85rem;
	color: var(--putih);
}

/* Warna per kartu sesuai spesifikasi. */
.kartu-menu--1 { background: var(--grad-hijau); }
.kartu-menu--1 .kartu-menu__nomor { color: var(--hijau-tua); }
.kartu-menu--2 { background: linear-gradient(135deg, #0F7FCB 0%, #1D9BF0 100%); }
.kartu-menu--2 .kartu-menu__nomor { color: #0F7FCB; }
.kartu-menu--3 { background: var(--grad-oranye); }
.kartu-menu--3 .kartu-menu__nomor { color: #C2410C; }
.kartu-menu--4 { background: var(--grad-ungu); }
.kartu-menu--4 .kartu-menu__nomor { color: #5B21B6; }
.kartu-menu--5 { background: var(--grad-merah); }
.kartu-menu--5 .kartu-menu__nomor { color: #9F1239; }
.kartu-menu--6 { background: var(--grad-link); }
.kartu-menu--6 .kartu-menu__nomor { color: #1B6FC4; }

/* =====================================================================
   Pita ajakan "Masuk ke Menu Data Linmas Desa"
   ===================================================================== */

.pita-ajakan {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	padding: 1.1rem 1.75rem;
	border-radius: var(--radius-lg);
	background: var(--grad-biru);
	color: var(--putih);
	box-shadow: var(--shadow-md);
}
.pita-ajakan__ikon {
	display: grid;
	place-items: center;
	width: 54px; height: 54px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	font-size: 1.6rem;
	flex: 0 0 auto;
}
.pita-ajakan__teks {
	font-family: var(--font-judul);
	font-weight: 800;
	font-size: clamp(.95rem, .85rem + .5vw, 1.3rem);
	text-transform: uppercase;
	letter-spacing: .5px;
	margin: 0;
}

/* =====================================================================
   Stepper 4 tahap
   ===================================================================== */

.stepper { display: flex; align-items: stretch; gap: .5rem; flex-wrap: nowrap; }
.stepper__item { flex: 1 1 0; min-width: 0; }
.stepper__panah {
	display: flex;
	align-items: center;
	color: var(--biru-cerah);
	font-size: 1.9rem;
	flex: 0 0 auto;
	padding: 0 .15rem;
}

.kartu-tahap {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--putih);
	border: 2px solid var(--biru-primer);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform .22s ease, box-shadow .22s ease;
}
.kartu-tahap:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.kartu-tahap__nomor {
	position: absolute;
	top: 12px; left: 12px;
	width: 42px; height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--biru-primer);
	color: var(--putih);
	font-family: var(--font-judul);
	font-weight: 900;
	font-size: 1.2rem;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}
.kartu-tahap__kepala {
	padding: 1rem 1rem .5rem 4.1rem;
	min-height: 66px;
	display: flex;
	align-items: center;
}
.kartu-tahap__judul {
	font-family: var(--font-judul);
	font-weight: 800;
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--biru-tua);
	margin: 0;
	line-height: 1.25;
}
.kartu-tahap__ilustrasi {
	padding: 0 1rem;
	text-align: center;
}
.kartu-tahap__ilustrasi svg,
.kartu-tahap__ilustrasi img { width: 100%; max-width: 170px; height: 96px; object-fit: contain; }
.kartu-tahap__isi {
	padding: .75rem 1rem 1rem;
	flex-grow: 1;
}
.kartu-tahap__isi ul {
	margin: 0;
	padding-left: 1.05rem;
	font-size: .85rem;
	color: var(--abu-700);
}
.kartu-tahap__isi li { margin-bottom: .3rem; }
.kartu-tahap__kaki {
	padding: .7rem 1rem;
	background: var(--biru-primer);
	color: var(--putih);
	font-size: .82rem;
	font-weight: 600;
	text-align: center;
}

/* Warna per tahap: biru, hijau, oranye, ungu. */
.kartu-tahap--1 { border-color: var(--biru-primer); }
.kartu-tahap--1 .kartu-tahap__nomor,
.kartu-tahap--1 .kartu-tahap__kaki { background: var(--biru-primer); }
.kartu-tahap--2 { border-color: var(--hijau); }
.kartu-tahap--2 .kartu-tahap__nomor,
.kartu-tahap--2 .kartu-tahap__kaki { background: var(--hijau); }
.kartu-tahap--2 .kartu-tahap__judul { color: var(--hijau-tua); }
.kartu-tahap--3 { border-color: var(--oranye); }
.kartu-tahap--3 .kartu-tahap__nomor,
.kartu-tahap--3 .kartu-tahap__kaki { background: var(--oranye); }
.kartu-tahap--3 .kartu-tahap__judul { color: #C2410C; }
.kartu-tahap--4 { border-color: var(--ungu); }
.kartu-tahap--4 .kartu-tahap__nomor,
.kartu-tahap--4 .kartu-tahap__kaki { background: var(--ungu); }
.kartu-tahap--4 .kartu-tahap__judul { color: #5B21B6; }

/* =====================================================================
   Kartu konten publik (kegiatan, bimtek, berita, album)
   ===================================================================== */

.kartu-konten {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--putih);
	border: 1px solid var(--abu-200);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform .22s ease, box-shadow .22s ease;
}
.kartu-konten:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.kartu-konten__gambar {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--abu-100);
	overflow: hidden;
}
.kartu-konten__gambar img,
.kartu-konten__gambar svg {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.kartu-konten:hover .kartu-konten__gambar img { transform: scale(1.05); }
.kartu-konten__badge {
	position: absolute;
	top: .65rem; left: .65rem;
	padding: .25rem .7rem;
	border-radius: var(--radius-pill);
	font-size: .72rem;
	font-weight: 700;
	color: var(--putih);
	background: var(--biru-primer);
	box-shadow: var(--shadow-sm);
}
.kartu-konten__isi {
	padding: 1rem 1.1rem 1.15rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.kartu-konten__judul {
	font-family: var(--font-judul);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--biru-tua);
	margin-bottom: .5rem;
}
.kartu-konten__judul a { color: inherit; }
.kartu-konten__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1rem;
	font-size: .8rem;
	color: var(--abu-500);
	margin-bottom: .6rem;
}
.kartu-konten__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.kartu-konten__ringkas {
	font-size: .87rem;
	color: var(--abu-700);
	flex-grow: 1;
	margin-bottom: .9rem;
}

/* Kartu rekap kecamatan pada halaman Data Linmas publik. */
.kartu-wilayah {
	display: block;
	height: 100%;
	padding: 1.25rem;
	border-radius: var(--radius-md);
	background: var(--putih);
	border: 1px solid var(--abu-200);
	border-top: 4px solid var(--hijau);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	transition: transform .22s ease, box-shadow .22s ease;
}
.kartu-wilayah:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.kartu-wilayah__nama {
	font-family: var(--font-judul);
	font-weight: 800;
	color: var(--biru-tua);
	font-size: 1.05rem;
	margin-bottom: .75rem;
}
.kartu-wilayah__angka {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}
.kartu-wilayah__angka div { line-height: 1.2; }
.kartu-wilayah__angka strong {
	display: block;
	font-family: var(--font-judul);
	font-size: 1.4rem;
	color: var(--hijau-tua);
}
.kartu-wilayah__angka span { font-size: .78rem; color: var(--abu-500); }

/* =====================================================================
   Galeri masonry
   ===================================================================== */

.grid-masonry {
	column-count: 3;
	column-gap: 1rem;
}
.grid-masonry__item {
	break-inside: avoid;
	margin-bottom: 1rem;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	display: block;
	background: var(--abu-100);
}
.grid-masonry__item img,
.grid-masonry__item svg {
	width: 100%;
	display: block;
	transition: transform .35s ease;
}
.grid-masonry__item:hover img { transform: scale(1.04); }

/* =====================================================================
   Footer
   ===================================================================== */

.footer-publik {
	position: relative;
	background: var(--biru-tua);
	color: rgba(255, 255, 255, .82);
	padding-top: 3rem;
	margin-top: 4rem;
}
.footer-publik::before {
	content: '';
	display: block;
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--kuning) 0%, var(--emas) 50%, var(--kuning) 100%);
}
.footer-publik h5 {
	color: var(--putih);
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.footer-publik a { color: rgba(255, 255, 255, .82); }
.footer-publik a:hover { color: var(--kuning); text-decoration: none; }
.footer-publik ul { list-style: none; padding: 0; margin: 0; }
.footer-publik ul li { margin-bottom: .5rem; font-size: .9rem; }

.footer-tagline {
	text-align: center;
	font-style: italic;
	font-weight: 600;
	font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
	color: var(--putih);
	padding: 1.25rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	margin-bottom: 2rem;
}
.footer-hakcipta {
	margin-top: 2rem;
	padding: 1rem 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: .82rem;
	text-align: center;
}
.footer-sosial {
	display: flex;
	gap: .6rem;
	margin-top: .85rem;
}
.footer-sosial a {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: var(--putih);
	font-size: 1.05rem;
	transition: all .2s ease;
}
.footer-sosial a:hover { background: var(--kuning); color: var(--biru-tua); }

/* =====================================================================
   Responsif
   ===================================================================== */

@media (max-width: 1399.98px) {
	.kartu-menu__judul { min-height: 4.5em; }
}

@media (max-width: 991.98px) {
	.grid-masonry { column-count: 2; }

	/* Stepper menjadi vertikal dengan panah menghadap ke bawah. */
	.stepper { flex-direction: column; }
	.stepper__panah {
		justify-content: center;
		padding: .25rem 0;
		transform: rotate(90deg);
	}
	.kartu-menu__judul { min-height: auto; }
}

@media (max-width: 575.98px) {
	.grid-masonry { column-count: 1; }
	.pita-statistik { margin-top: -2rem; }
	.hero { padding-bottom: 4rem; }
	.pita-ajakan { padding: 1rem; }
	.merek-teks__ket { display: none; }
}

/* =====================================================================
   Navigasi bawah untuk ponsel (operator desa)
   ===================================================================== */

.nav-bawah {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 1040;
	background: var(--putih);
	border-top: 1px solid var(--abu-200);
	box-shadow: 0 -4px 16px rgba(11, 60, 141, .1);
	padding-bottom: env(safe-area-inset-bottom);
}
.nav-bawah__daftar {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}
.nav-bawah__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .15rem;
	min-height: 58px;
	padding: .35rem .2rem;
	font-size: .68rem;
	font-weight: 600;
	color: var(--abu-500);
	text-decoration: none;
}
.nav-bawah__item i { font-size: 1.25rem; }
.nav-bawah__item.aktif { color: var(--biru-primer); }
.nav-bawah__item:hover { text-decoration: none; color: var(--biru-primer); }

@media (max-width: 991.98px) {
	.nav-bawah { display: block; }
	body.ada-nav-bawah { padding-bottom: 64px; }
}

/* =====================================================================
   Kotak penyaring pada halaman publik (kegiatan, bimtek, galeri, berita)
   ===================================================================== */

.saring-publik {
	background: var(--putih);
	border: 1px solid var(--abu-200);
	border-radius: var(--radius-md);
	padding: 1rem 1.15rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--shadow-sm);
}
.saring-publik .label-sb { font-size: .8rem; margin-bottom: .25rem; }

/* Hitung mundur bimtek yang akan datang. */
.hitung-mundur {
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
}
.hitung-mundur__kotak {
	min-width: 64px;
	padding: .5rem .35rem;
	border-radius: var(--radius-sm);
	background: var(--biru-muda-bg);
	border: 1px solid #BFE0FF;
	text-align: center;
}
.hitung-mundur__angka {
	display: block;
	font-family: var(--font-judul);
	font-weight: 800;
	font-size: 1.35rem;
	line-height: 1.1;
	color: var(--biru-tua);
}
.hitung-mundur__label {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--abu-500);
}

/* Bar sisa kuota peserta bimtek. */
.kuota-bar { height: 10px; border-radius: 999px; background: var(--abu-200); overflow: hidden; }
.kuota-bar__isi { height: 100%; border-radius: 999px; background: var(--grad-biru); }

/* Keterangan foto pada grid masonry galeri. */
.grid-masonry__item { position: relative; }
.grid-masonry__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.6rem .7rem .55rem;
	font-size: .78rem;
	line-height: 1.4;
	color: var(--putih);
	background: linear-gradient(to top, rgba(11, 60, 141, .82), rgba(11, 60, 141, 0));
	opacity: 0;
	transition: opacity .22s ease;
}
.grid-masonry__item:hover .grid-masonry__caption,
.grid-masonry__item:focus-visible .grid-masonry__caption { opacity: 1; }

@media (max-width: 991.98px) { .grid-masonry { column-count: 2; } }
@media (max-width: 575.98px) { .grid-masonry { column-count: 1; } }