/* ========== THEME ========== */
:root {
	--kuagreen: #13b57c;
	--kuadark: #0f7856;
	--soft: #f5f7fb;
	--nav-h: 64px;
}

html {
	scroll-behavior: smooth;
}

/* 1) Matikan scroll horizontal global (ban serep) */
html, body { max-width: 100%; overflow-x: hidden; }

/* 2) Pastikan gambar & kartu tidak melebar */
img { max-width: 100%; height: auto; }
.service-card { width: 100%; }

/* 3) Kurangi risiko gutter Bootstrap bikin “tumpah” di layar XS */
@media (max-width: 576px){
  .container { padding-left: 12px; padding-right: 12px; }
  .row { --bs-gutter-x: 1rem; }  /* default 1.5rem → sedikit dipersempit */
}


/* Navbar gradient: putih → hijau (kiri → kanan) */
/* putih → #c6f8e2 (kiri → kanan) */
.navbar-gradient {
	background: linear-gradient(90deg, #ffffff 0%, #defef0 40%, #c6f8e2 100%);
}

.navbar-gradient .nav-link {
	color: #0f2d25;
}

/* teks tetap kontras di atas gradien lembut */
.navbar-gradient .navbar-brand {
	color: #0f2d25;
}

/* opsional: buat garis bawah lebih halus */

/* warna default & hover ke kuagreen */
.navbar-gradient .nav-link {
	color: #0f2d25;
	transition: color 0.2s ease;
}
.navbar-gradient .nav-link:hover,
.navbar-gradient .nav-link:focus {
	color: var(--kuagreen);
}

/* Responsif: di layar kecil, buat transisi lebih lembut */
@media (max-width: 576px) {
	.navbar-gradient {
		background: linear-gradient(
			90deg,
			#ffffff 0%,
			#7fc6a5 55%,
			var(--kuagreen) 100%
		);
	}
}

body {
	font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Buat kolom angka fix 2.5ch, teks di kolom kedua */
.ol-align {
	counter-reset: item;
	padding-left: 5%;
	margin-left: 0;
	list-style: none; /* kita atur nomor sendiri */
	font-variant-numeric: tabular-nums; /* angka monospasi supaya rapi */
}
.ol-align > li {
	list-style: none;
	display: grid;
	grid-template-columns: 2.5ch 1fr; /* lebar kolom angka */
	gap: 0.5ch;
	align-items: start;
	font-size: 16px;
}
.ol-align > li::before {
	counter-increment: item;
	content: counter(item) '.';
	text-align: right; /* angka rata kanan di kolomnya */
	font-variant-numeric: tabular-nums;
	color: inherit; /* ikut warna teks */
}

/* seluruh isi li (teks + <strong> + <a>...) jadi satu grid item */
.ol-align > li .li-body {
	grid-column: 2;
	min-width: 0; /* biar wrapping teks bagus */
}

/* gaya tautan: warna sama, hover jadi hijau */
.ol-align a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: rgba(0, 0, 0, 0.25);
}
.ol-align a:hover,
.ol-align a:focus {
	color: var(--kuagreen);
	text-decoration-color: currentColor;
}

/* angka seragam (tabular) khusus list */
.digits-tabular {
	font-family: Inter, Poppins, system-ui, sans-serif;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ===== Steps (OL) dengan judul & deskripsi ===== */
.steps {
	counter-reset: step;
	list-style: none;
	padding-left: 0;
	margin: 0;
	font-variant-numeric: tabular-nums; /* angka rapi */
}
.steps > li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 3.5ch 1fr; /* kolom angka + isi */
	gap: 0.75rem;
	margin: 0 0 1.25rem 0; /* jarak antar item */
}
.steps > li::before {
	content: counter(step) '.';
	text-align: right;
	color: inherit;
}
.step-title {
	font-weight: 700;
}
.step-desc {
	margin: 0.25rem 0 0 0; /* deskripsi agak turun dari judul */
	color: #5b6b6b; /* abu-abu lembut */
}

/* ===== Bullets dengan lead tebal di awal ===== */
.bullets {
	padding-left: 2rem;
	margin: 0.75rem 0 0 0;
}
.bullets > li {
	margin: 0 0 0.6rem 0;
}
.bullets .lead-strong {
	font-weight: 700;
}

.link-soft {
	color: inherit;
	text-decoration: underline; /* atau none jika tak mau garis */
	text-underline-offset: 2px; /* opsional: jarak underline */
	text-decoration-color: rgba(0, 0, 0, 0.25); /* opsional: lembut */
}

.link-soft:hover,
.link-soft:focus {
	color: var(--kuagreen); /* hijau saat hover/fokus */
	text-decoration-color: currentColor; /* underline ikut hijau */
}

/* NAVBAR */
.navbar-brand img {
	height: 34px;
	width: auto;
}

/* HERO */
.hero {
	position: relative;
	background: radial-gradient(
			1200px 600px at 70% 10%,
			rgba(19, 181, 124, 0.15),
			transparent 70%
		),
		linear-gradient(180deg, #e9fff5 0%, #c6f8e2 60%);
	padding-top: 6rem;
	padding-bottom: 6rem;
	overflow: hidden;
	min-height: calc(100svh - var(--nav-h)); /* penuh 1 layar minus navbar */
	display: grid;
	place-items: center; /* center horizontal & vertical */
	padding-block: clamp(2rem, 6vh, 6rem); /* optional: ruang aman */
}

#particles-js {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none; /* agar klik di tombol tetap tembus */
}

.hero .content {
	position: relative;
	z-index: 1;
}
.hero h1 {
	font-weight: 700;
	letter-spacing: 0.2px;
}
.hero p.lead {
	color: #5b6b6b;
	max-width: 720px;
}
.btn-cta {
	background: var(--kuagreen);
	border: none;
}
.btn-cta:hover {
	background: var(--kuadark);
}

/* ===== Background image + overlay gelap ===== */
.hero.hero-img {
	--hero-dim: 0.45; /* tingkat kegelapan overlay: 0.35–0.6 */
	background-image: url('../img/kantor-kua.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero.hero-img::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* overlay gelap; bisa diganti gradient kalau mau */
	/* background: rgba(0, 0, 0, var(--hero-dim)); */

	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, calc(var(--hero-dim) + 0.15)) 0%,
		rgba(0, 0, 0, var(--hero-dim)) 40%,
		rgba(0, 0, 0, calc(var(--hero-dim) - 0.1)) 100%
	);
}

/* Teks putih agar kontras di atas foto */
.hero.hero-img .content,
.hero.hero-img .content h1 {
	color: #fff;
}

.hero.hero-img .content p {
	color: #d2cdcd;
}

/* (opsional) tombol saat hover tetap terang */
.hero.hero-img .btn-cta:hover {
	filter: brightness(1.05);
}

/* (opsional) parallax ringan di desktop */
@media (min-width: 992px) {
	.hero.hero-img {
		background-attachment: fixed;
	}
}

/* SERVICES */
.services {
	background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
	padding: 4rem 0;
}
.section-title {
	font-weight: 700;
	letter-spacing: 0.3px;
}

.service-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid #e9eef5;
	background: #fff;
	border-radius: 18px;
	padding: 1.25rem;
	height: 100%;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
	border-color: rgba(19, 181, 124, 0.35);
}
.service-icon {
	width: 100px;
	height: 100px;
	display: grid;
	place-items: center;
	border-radius: 15px;
	background: #f0fff8;
	color: var(--kuagreen);
	font-size: 28px;
	margin-bottom: 0.75rem;
}
.service-title {
	font-weight: 600;
	font-size: 1.05rem;
}
.external-badge {
	font-size: 0.8rem;
	color: #94a3b8;
}

/* CTA BAND */
.cta-band {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--kuagreen), #27d19a);
	color: #fff;
	border-radius: 24px;
}

/* FOOTER */
.footer-dark .social-link {
	font-size: 1.75rem; /* naikkan ukuran ikon */
	color: #cfe6df;
	transition: color 0.2s ease, transform 0.15s ease;
	display: inline-flex; /* biar area klik rapi */
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem; /* target sentuh lebih besar */
	border-radius: 50%;
}
.footer-dark .social-link:hover,
.footer-dark .social-link:focus {
	color: var(--kuagreen);
	transform: translateY(-1px);
}

/* (opsional) lebih besar di layar lebar */
@media (min-width: 992px) {
	.footer-dark .social-link {
		font-size: 2rem;
		width: 2.75rem;
		height: 2.75rem;
	}
}

footer {
	font-size: 0.92rem;
	color: #6b7a86;
}
footer a {
	color: #5b9f87;
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline;
}

/* One-time hover wipe */
/* One-time hover wipe — base (untuk tombol GELAP atau band hijau) */
/* === Wipe setiap hover (untuk tombol/elemen gelap) === */
.hover-wipe {
	position: relative;
	overflow: hidden;
}
.hover-wipe::before {
	content: '';
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.35) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
	transition: transform 600ms ease; /* kunci: pakai transition, bukan animation */
}
.hover-wipe:hover::before {
	transform: translateX(100%);
}

/* Varian untuk elemen TERANG (mis. .btn-light) → gunakan kilau gelap */
.hover-wipe--dark::before {
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.12) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* Aksesibilitas: nonaktifkan animasi bila user minta reduce motion */
@media (prefers-reduced-motion: reduce) {
	.hover-wipe::before {
		transition: none;
		transform: none !important;
	}
	.hover-wipe:hover::before {
		transform: none !important;
	}
}

/* Detail page */
.badge-soft {
	background: #e8fff6;
	color: var(--kuagreen);
	border: 1px solid #c7f5e6;
}

/* ===== Detail Page Enhancements ===== */

.band-full {
	background: linear-gradient(135deg, var(--kuadark), var(--kuagreen));
	color: #fff;
	padding: 64px 16px; /* tinggi band */
}
.band-full .btn {
	/* tombol di atas band */
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* dotted background like mock */
.bg-dots {
	background-image: radial-gradient(#cfd8dc 1px, transparent 1px);
	background-size: 16px 16px; /* jarak titik */
	background-position: 0 0;
}

/* badge “Nikah” with green gradient + white text */
.badge-gradient {
	background: linear-gradient(200deg, var(--kuadark), var(--kuagreen));
	color: #fff;
	border: 0;
}

.badge-lg {
	font-size: 1.25rem;
	padding: 0.7rem 1.25rem;
}

/* ===== Footer gelap senada ===== */
.footer-dark {
	background: #0e2620; /* gelap kehijauan */
	color: #cfe6df;
}
.footer-dark a {
	color: #a7d9cc;
	text-decoration: none;
}
.footer-dark a:hover {
	text-decoration: underline;
}

/* ===== Badge judul (“Nikah”) lebih besar + gradien ===== */
.badge-gradient {
	background: linear-gradient(135deg, var(--kuadark), var(--kuagreen));
	color: #fff;
	border: 0;
	padding: 0.6rem 1.1rem; /* lebih besar */
	font-weight: 600;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* ===== Card info & strip gradien lebih tebal ===== */
.card-info {
	border: 0;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-info:hover {
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.card-gradient-strip {
	height: 40px; /* tadinya 12px → dibesarkan */
	background: linear-gradient(90deg, var(--kuadark), var(--kuagreen));
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}

/* Mobile adaptive */
/* Judul & keterangan kartu: selalu rapi dan sejajar */
/* ===== Spasi default (tablet/desktop) ===== */
/* ===== ukuran & clamp default (desktop/tablet) ===== */
:root {
	--title-lines: 1;
	--badge-lines: 1;
	--lh: 1.25; /* line-height dasar untuk perhitungan */
}

/* kontainer judul/badge: FLEX agar konten di tengah vertikal */
.service-title,
.external-badge {
	display: flex;
	align-items: center; /* <— center vertikal */
	justify-content: center; /* center horizontal */
	text-align: center;
	line-height: var(--lh);
	min-height: calc(var(--lh) * 1em * var(--title-lines));
}

/* teks judul/badge: di-wrap untuk clamp */
.service-title .title-text,
.external-badge .badge-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* clamp per elemen */
.service-title .title-text {
	-webkit-line-clamp: var(--title-lines);
}
.external-badge .badge-text {
	-webkit-line-clamp: var(--badge-lines);
	color: #8aa7a1;
}

/* jarak antar elemen di card */
.service-icon {
	margin-bottom: 0.85rem;
}
.service-title {
	margin-bottom: 0.45rem;
}
.external-badge {
	margin-top: 0;
}

/* ===== Mobile (≤576px): izinkan 2 baris & tetap center ===== */
@media (max-width: 576px) {
	:root {
		--title-lines: 2;
		--badge-lines: 2;
	}
	.service-icon {
		margin-bottom: 1rem;
	}
	.service-title {
		margin-bottom: 0.25rem;
	}
	.external-badge .badge-text {
		font-size: 0.9rem;
	}
}

@media (min-width: 992px) {
	.service-icon {
		margin-bottom: 1.25rem;
	}
}

/* Page Profile */
/* ====== Profil page additions (ringan, bisa dipindah ke style.css) ====== */

/* Sub-hero (bukan full screen): foto + overlay supaya kontras */
.subhero {
	position: relative;
	background-image: url('../img/profile-page.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 50svh;
	display: grid;
	place-items: center;
}
.subhero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
	pointer-events: none;
}
.subhero .content {
	position: relative;
	z-index: 1;
	color: #fff;
	text-align: center;
	padding-block: clamp(2rem, 6vh, 4rem);
}

/* Lencana “Profil” */
.badge-gradient.profile {
	background: linear-gradient(90deg, var(--kuagreen), #27d19a);
	color: #fff;
	font-weight: 600;
}

/* Kartu profil */
.card-profile .card-body {
	padding: 1.5rem 1.5rem 1.25rem;
}
@media (min-width: 992px) {
	.card-profile .card-body {
		padding: 2rem 2rem 1.5rem;
	}
}

/* Heading kecil abu-abu */
.eyebrow {
	letter-spacing: 0.08em;
	font-weight: 700;
	color: #6c757d;
}

/* Numbering rapi (pakai tabular) – reuse pola kamu */
.digits-tabular {
	font-family: Inter, Poppins, system-ui, sans-serif;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.ol-align {
	counter-reset: item;
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}
.ol-align > li {
	display: grid;
	grid-template-columns: 3.5ch 1fr;
	gap: 0.75rem;
	align-items: start;
	margin: 0 0 0.7rem 0;
}
.ol-align > li::before {
	counter-increment: item;
	content: counter(item) '.';
	text-align: right;
	color: inherit;
}

/* Separator dekoratif di dalam card (opsional) */
.sep-soft {
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(0, 0, 0, 0.08),
		transparent
	);
	margin: 0.8rem 0 1.2rem;
}

/* Back button spacing */
.back-wrap {
	margin-top: 1rem;
}

/* Default (tablet/desktop) */
.pdf-embed {
	/* 480–900px, tapi fleks 62% tinggi layar */
	height: clamp(480px, 62vh, 900px);
	background: #fff;
	border-radius: 0.75rem;
	overflow: hidden;
}
.pdf-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Mobile portrait (≤576px): jauh lebih pendek */
@media (max-width: 576px) {
	.pdf-embed {
		height: clamp(
			220px,
			38svh,
			320px
		); /* ↓ dulu 50svh; sekarang 38svh max 320px */
	}
}

/* Mobile landscape: layar melebar tapi tinggi pendek */
@media (max-width: 576px) and (orientation: landscape) {
	.pdf-embed {
		height: clamp(200px, 50svh, 300px);
	}
}