/* Family Safety Beranda 1.0.0 — warna: Panduan Navy Terang */

@font-face {
	font-family: "Baloo 2";
	src: url("../fonts/baloo2-800-latin.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Nunito Sans";
	src: url("../fonts/nunito-sans-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

html {
	scroll-padding-top: 88px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body.fsb-halaman {
	margin: 0;
	padding: 0;
	background: #FFFFFF;
}

.fsb {
	font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 400;
	color: #2A2D4A;
	background: #FFFFFF;
	line-height: normal;
	overflow-x: clip;
}
.fsb *,
.fsb *::before,
.fsb *::after { box-sizing: border-box; }
.fsb h1, .fsb h2, .fsb p { margin: 0; }
.fsb img { max-width: 100%; }
.fsb a { color: #A66910; }
.fsb a:hover { color: #0E1A4F; }
.fsb a:focus-visible { outline: 3px solid #A66910; outline-offset: 3px; }
.fsb .fsb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fsb .fsb-sorot { color: #A66910; }
.fsb h1, .fsb h2, .fsb p, .fsb a { overflow-wrap: anywhere; }
.fsb svg { flex: none; }

/* ===== Kepala halaman ===== */
.fsb-kepala {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.94);
	border-bottom: 1px solid #F2E2B0;
}
body.admin-bar .fsb-kepala { top: 32px; }
.fsb-kepala-isi {
	max-width: 1264px;
	margin: 0 auto;
	padding: 14px 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.fsb .fsb-merek {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.fsb-logo { width: 52px; height: 52px; display: block; }
.fsb-merek-teks { display: flex; flex-direction: column; }
.fsb-merek-nama {
	font-family: "Baloo 2", system-ui, sans-serif;
	font-weight: 800;
	font-size: 26px;
	line-height: 1;
	color: #0E1A4F;
}
.fsb-merek-oleh {
	font-weight: 700;
	font-size: 13px;
	color: #A66910;
	margin-top: 3px;
}
.fsb .fsb-tombol-kepala {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 24px;
	border-radius: 999px;
	background: linear-gradient(90deg, #DFBA47, #F0D27A);
	color: #0E1A4F;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}
.fsb .fsb-tombol-kepala:hover { color: #0E1A4F; filter: brightness(1.04); }
.fsb-pendek { display: none; }

/* ===== Pembuka ===== */
.fsb-pembuka {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #FFFFFF 0%, #FFF7E6 50%, #E8EEFB 100%);
}
.fsb-lingkaran { position: absolute; border-radius: 50%; }
.fsb-lingkaran-1 { width: 420px; height: 420px; background: #FFF4D9; top: -160px; left: -140px; }
.fsb-lingkaran-2 { width: 360px; height: 360px; background: #E3EAFB; bottom: -180px; right: -120px; }
.fsb-pembuka-isi {
	position: relative;
	max-width: 1264px;
	margin: 0 auto;
	padding: 88px 32px 96px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 56px;
}
.fsb-pembuka-teks {
	flex: 999 1 460px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.fsb-bintang { display: block; }
.fsb-bintang-judul { width: 26px; height: 26px; fill: #DFBA47; }
.fsb-judul {
	font-family: "Baloo 2", system-ui, sans-serif;
	font-weight: 800;
	font-size: 64px;
	line-height: 1.05;
	color: #0E1A4F;
}
.fsb-kalimat {
	font-size: 20px;
	line-height: 1.6;
	color: #2A2D4A;
	max-width: 560px;
}
.fsb-ajakan {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}
.fsb-ajakan-teks {
	font-weight: 700;
	font-size: 17px;
	color: #0E1A4F;
}
.fsb .fsb-tombol-utama {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 32px;
	border-radius: 999px;
	background: linear-gradient(90deg, #0E1A4F, #1B2E7A);
	color: #FFFFFF;
	font-weight: 800;
	font-size: 17px;
	text-decoration: none;
}
.fsb .fsb-tombol-utama:hover { color: #FFFFFF; filter: brightness(1.15); }
.fsb-tombol-utama svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #F0D27A;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.fsb-pembuka-gambar {
	flex: 1 1 460px;
	display: flex;
	justify-content: center;
	margin-top: 56px;
}
.fsb-gambar-bingkai {
	position: relative;
	width: 100%;
	max-width: 540px;
}
.fsb-bintang-gambar {
	position: absolute;
	top: -14px;
	right: -10px;
	z-index: 1;
	width: 30px;
	height: 30px;
	fill: #A66910;
}
.fsb-gambar-bingkai picture { display: block; }
.fsb-ebook { display: block; width: 100%; height: auto; }

/* ===== Tentang Fiqa ===== */
.fsb-tentang { background: #FFFFFF; }
.fsb-tentang-isi {
	max-width: 1164px;
	margin: 0 auto;
	padding: 96px 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 64px;
}
.fsb-foto-kolom {
	flex: 1 1 280px;
	display: flex;
	justify-content: center;
}
.fsb-foto-bingkai { position: relative; }
.fsb-foto-bingkai::before {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	background: linear-gradient(90deg, #DFBA47, #F0D27A);
}
.fsb .fsb-foto {
	position: relative;
	display: block;
	width: 300px;
	height: 300px;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	border: 8px solid #FFFFFF;
}
.fsb-tentang-teks {
	flex: 999 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.fsb-tentang-judul {
	font-family: "Baloo 2", system-ui, sans-serif;
	font-weight: 800;
	font-size: 40px;
	line-height: 1.15;
	color: #0E1A4F;
}
.fsb-tentang-paragraf {
	font-size: 18px;
	line-height: 1.75;
	color: #2A2D4A;
}
.fsb-tentang-paragraf .fsb-sorot { font-weight: 700; }

/* ===== Media sosial ===== */
.fsb-sosial { background: #FFFFFF; padding: 0 32px 96px; }
.fsb-sosial-kotak {
	position: relative;
	overflow: hidden;
	max-width: 1136px;
	margin: 0 auto;
	border-radius: 24px;
	background: linear-gradient(160deg, #0E1A4F 0%, #142463 55%, #1B2E7A 100%);
	padding: 64px 40px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
.fsb-sosial-lingkaran {
	position: absolute;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: rgba(223, 186, 71, 0.15);
	top: -120px;
	right: -80px;
}
.fsb-bintang-sosial { position: relative; width: 28px; height: 28px; fill: #F0D27A; }
.fsb .fsb-sosial-judul {
	position: relative;
	margin: -12px 0 0;
	font-family: "Baloo 2", system-ui, sans-serif;
	font-weight: 800;
	font-size: 40px;
	line-height: 1.15;
	color: #FFFFFF;
	max-width: 720px;
}
.fsb-sosial-judul .fsb-sorot { color: #F0D27A; }
.fsb-sosial-tombol {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.fsb .fsb-tombol-sosial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 26px;
	border-radius: 999px;
	background: #FFF9EC;
	color: #0E1A4F;
	font-weight: 800;
	font-size: 16px;
	text-decoration: none;
}
.fsb .fsb-tombol-sosial:hover { color: #0E1A4F; background: #FFF4D9; }
.fsb-tombol-sosial svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: #A66910;
	stroke-width: 2;
	stroke-linecap: round;
}
.fsb-tombol-sosial svg .fsb-isi { fill: #A66910; stroke: none; }

/* ===== Bilah admin WordPress (hanya saat login) ===== */
@media (max-width: 782px) {
	body.admin-bar .fsb-kepala { top: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar .fsb-kepala { top: 0; }
}

/* ===== HP ===== */
@media (max-width: 767px) {
	html { scroll-padding-top: 72px; }

	.fsb-kepala { background: #FFFFFF; }
	.fsb-kepala-isi {
		padding: 10px 16px;
		flex-wrap: nowrap;
		gap: 10px;
	}
	.fsb .fsb-merek { gap: 8px; min-width: 0; }
	.fsb-logo { width: 40px; height: 40px; }
	.fsb-merek-nama { font-size: 20px; }
	.fsb-merek-oleh { font-size: 11px; margin-top: 2px; }
	.fsb .fsb-tombol-kepala {
		min-height: 44px;
		padding: 0 14px;
		font-size: 13px;
	}
	.fsb-panjang { display: none; }
	.fsb-pendek { display: inline; }

	.fsb-lingkaran-1 { width: 240px; height: 240px; top: -110px; left: -100px; }
	.fsb-lingkaran-2 { width: 220px; height: 220px; bottom: -100px; right: -90px; }
	.fsb-pembuka-isi {
		padding: 40px 24px 48px;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 18px;
	}
	/* Gambar ebook pindah ke antara kalimat dan ajakan. */
	.fsb-pembuka-teks { display: contents; }
	.fsb-bintang-judul { order: 1; width: 22px; height: 22px; }
	.fsb-judul { order: 2; font-size: 38px; line-height: 1.1; }
	.fsb-kalimat { order: 3; font-size: 16px; max-width: none; }
	.fsb-pembuka-gambar { order: 4; margin-top: 0; flex: none; display: block; }
	.fsb-ajakan { order: 5; margin-top: 10px; align-items: stretch; gap: 18px; }
	.fsb-gambar-bingkai { max-width: none; }
	.fsb-bintang-gambar { display: none; }
	.fsb-ebook { margin: 0 auto; aspect-ratio: 4 / 5; object-fit: contain; }
	.fsb-ajakan-teks { font-size: 15px; line-height: 1.5; text-align: center; }
	.fsb .fsb-tombol-utama {
		display: flex;
		justify-content: center;
		min-height: 54px;
		padding: 0 20px;
		font-size: 16px;
	}

	.fsb-tentang-isi {
		padding: 56px 24px;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		gap: 22px;
	}
	.fsb-foto-kolom { flex: none; margin: 10px 0; }
	.fsb-foto-bingkai::before { inset: -10px; }
	.fsb .fsb-foto { width: 200px; height: 200px; border-width: 6px; }
	.fsb-tentang-teks { flex: none; width: 100%; display: contents; }
	.fsb-tentang-judul { font-size: 26px; line-height: 1.2; text-align: center; }
	.fsb-tentang-paragraf { font-size: 16px; line-height: 1.7; width: 100%; }

	.fsb-sosial { padding: 0 16px 56px; }
	.fsb-sosial-kotak { padding: 44px 20px; gap: 22px; }
	.fsb-sosial-lingkaran { width: 180px; height: 180px; top: -80px; right: -60px; }
	.fsb-bintang-sosial { width: 24px; height: 24px; }
	.fsb .fsb-sosial-judul { margin-top: -6px; font-size: 26px; line-height: 1.2; }
	.fsb-sosial-tombol { width: 100%; flex-direction: column; flex-wrap: nowrap; gap: 12px; }
	.fsb .fsb-tombol-sosial { display: flex; min-height: 54px; padding: 0 20px; }
}

/* HP sempit (320–359 px): kepala halaman tetap satu baris. */
@media (max-width: 359px) {
	.fsb-kepala-isi { gap: 8px; }
	.fsb .fsb-tombol-kepala { padding: 0 12px; }
}