/*
Theme Name: BSD Homes
Template: astra
Description: Child theme bsdhomes.id (Fase 2). Sumber kebenaran: repo procuan, web/bsdhomes/theme/. Jangan sunting di server.
Version: 0.2.0
Text Domain: bsdhomes
*/

/*
 * Semua aturan di-scope ke body.bsd (halaman yang dirender tema). Halaman Elementor Canvas
 * tidak memuat file ini sama sekali. Warna hanya dari token.css. Teks isi minimal 17px
 * (CLAUDE.md §9), tidak ada teks abu-abu, tidak ada opacity pada teks.
 */

body.bsd {
	margin: 0;
	background: var(--ivory);
	color: var(--ink);
	font-family: var(--font-teks);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
body.bsd *,
body.bsd *::before,
body.bsd *::after { box-sizing: border-box; }
body.bsd img { max-width: 100%; height: auto; display: block; }
body.bsd a { color: inherit; }
body.bsd h1, body.bsd h2, body.bsd h3 {
	font-family: var(--font-judul);
	font-weight: 500;
	color: inherit;
	margin: 0;
	letter-spacing: -0.015em;
	text-transform: none;
}
body.bsd h1 { font-size: clamp(38px, 5vw, 62px); line-height: 1.04; letter-spacing: -0.02em; }
body.bsd h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; }
body.bsd h3 { font-size: 24px; line-height: 1.2; }
body.bsd .bsd-h3 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; }
body.bsd p { margin: 0; }
body.bsd ul { margin: 0; padding-left: 1.1em; }
body.bsd li + li { margin-top: 6px; }

.bsd .bsd-wadah { width: 100%; max-width: calc(var(--lebar) + 2 * var(--tepi)); margin: 0 auto; padding: 0 var(--tepi); }
.bsd .bsd-wadah--sempit { max-width: calc(980px + 2 * var(--tepi)); }
.bsd .bsd-lewati { position: absolute; left: -9999px; }
.bsd .bsd-lewati:focus { left: 16px; top: 16px; z-index: 100; background: var(--white); padding: 8px 12px; }

/* ---------- Label, teks kecil, catatan ---------- */
.bsd .bsd-label {
	font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--brass); line-height: 1.5;
}
.bsd .bsd-kecil { font-size: 15px; line-height: 1.55; }
.bsd .bsd-catatan { font-size: 15px; line-height: 1.55; margin-top: 20px; }
.bsd .bsd-catatan a { text-decoration: underline; }
.bsd .bsd-sorot { background: var(--sand); border-radius: 16px; padding: 16px 20px; font-size: 16px; margin-top: 18px; }
.bsd .bsd-sorot--putih { background: var(--white); }
.bsd .bsd-tautan { font-weight: 700; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; color: var(--ink); }

/* ---------- Tombol ---------- */
.bsd .bsd-tombol {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: var(--sentuh); padding: 14px 26px; border-radius: var(--radius-pil);
	font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none; border: 2px solid transparent;
}
.bsd .bsd-tombol--wa { background: var(--cta); color: var(--white); }
.bsd .bsd-tombol--wa:hover { background: var(--cta-hover); }
.bsd .bsd-tombol--garis { background: transparent; color: var(--ink); border-color: var(--ink); }
.bsd .bsd-tombol--terang { background: var(--ivory); color: var(--ink); }
.bsd .bsd-tombol--terang:hover { background: var(--white); }
.bsd .bsd-tombol--kecil { padding: 10px 18px; font-size: 15px; min-height: var(--sentuh); }
.bsd .bsd-tautan-wa { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--tautan); text-decoration: none; min-height: var(--sentuh); }
.bsd .bsd-tautan-wa:hover { color: var(--tautan-hover); text-decoration: underline; }
.bsd .bsd-baris-tombol { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Chip ---------- */
.bsd .bsd-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bsd .bsd-chips__label { font-size: 15px; font-weight: 700; margin-right: 4px; }
.bsd .bsd-chip {
	display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px; border-radius: var(--radius-pil);
	background: var(--chip); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; border: 0; font-family: inherit; cursor: pointer;
}
.bsd a.bsd-chip:hover { background: var(--sand); }
.bsd .bsd-chip.is-aktif { background: var(--ink); color: var(--ivory); }
.bsd .bsd-chips--kecil .bsd-chip { font-size: 14px; min-height: 32px; padding: 6px 12px; cursor: default; }

/* ---------- Header ---------- */
.bsd .bsd-header { position: sticky; top: 0; z-index: 50; background: var(--ivory); border-bottom: 1px solid var(--line); }
.bsd .bsd-header__isi { display: flex; align-items: center; gap: 32px; min-height: 76px; }
.bsd .bsd-logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }
.bsd .bsd-logo__nama { font-family: var(--font-judul); font-size: 26px; font-weight: 600; }
.bsd .bsd-logo__oleh { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.bsd .bsd-nav { margin-left: auto; }
.bsd .bsd-nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.bsd .bsd-nav li + li { margin-top: 0; }
.bsd .bsd-nav a { text-decoration: none; font-size: 15px; font-weight: 600; }
.bsd .bsd-nav a:hover { text-decoration: underline; }
.bsd .bsd-nav-tombol { display: none; }

/* ---------- Remah roti ---------- */
.bsd .bsd-remah { padding-top: 18px; }
.bsd .bsd-remah ol { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; font-size: 15px; }
.bsd .bsd-remah li + li { margin-top: 0; }
.bsd .bsd-remah li + li::before { content: "›"; margin-right: 10px; }
.bsd .bsd-remah a { text-decoration: underline; }

/* ---------- Hero ---------- */
.bsd .bsd-hero { padding: 56px 0 72px; }
.bsd .bsd-hero__isi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.bsd .bsd-hero__isi--tunggal { grid-template-columns: minmax(0, 860px); }
.bsd .bsd-hero__teks { display: flex; flex-direction: column; gap: 22px; }
.bsd .bsd-hook { font-family: var(--font-judul); font-style: italic; font-size: 22px; line-height: 1.35; }
.bsd .bsd-lede { font-family: var(--font-judul); font-style: italic; font-size: 24px; line-height: 1.35; color: var(--arang); }
.bsd .bsd-hero__jawaban { font-size: 17px; }
.bsd .bsd-otoritas { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.bsd .bsd-otoritas > span:last-child { display: flex; flex-direction: column; }
.bsd .bsd-monogram {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--arang); color: var(--ivory); font-family: var(--font-judul); font-weight: 600; font-size: 17px;
}
.bsd .bsd-monogram--besar { width: 88px; height: 88px; font-size: 32px; background: transparent; border: 2px solid var(--brass-light); color: var(--brass-light); }

.bsd .bsd-gambar { position: relative; margin: 0; border-radius: var(--radius-besar); overflow: hidden; background: var(--sand); }
.bsd .bsd-gambar img { width: 100%; height: 100%; object-fit: cover; }
.bsd .bsd-gambar figcaption {
	position: absolute; left: 16px; bottom: 16px; background: var(--ink); color: var(--ivory);
	font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-pil); line-height: 1.3;
}
.bsd .bsd-gambar--hero { aspect-ratio: 4 / 3.3; }
.bsd .bsd-gambar--lebar { aspect-ratio: 16 / 6; margin-top: 44px; }
.bsd .bsd-gambar--tinggi { aspect-ratio: 4 / 4.2; }
.bsd .bsd-hero__kolase { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 560px; }
.bsd .bsd-hero__kolase .bsd-gambar { height: 100%; }
.bsd .bsd-hero__kolase .bsd-gambar:first-child { grid-row: 1 / 3; aspect-ratio: auto; }
.bsd .bsd-hero__panel {
	background: var(--arang); color: var(--ivory); border-radius: var(--radius-besar); min-height: 420px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; font-family: var(--font-judul); font-size: 24px;
}

/* ---------- Section ---------- */
.bsd .bsd-seksi { padding: var(--jarak-seksi) 0; }
.bsd .bsd-seksi--putih { background: var(--white); }
.bsd .bsd-seksi--pasir { background: var(--sand); }
.bsd .bsd-seksi--gelap { background: var(--arang); color: var(--ivory); }
.bsd .bsd-seksi--gelap .bsd-label { color: var(--brass-light); }
.bsd .bsd-seksi--gelap a:not(.bsd-tombol) { color: var(--ivory); }
.bsd .bsd-seksi__kepala { margin-bottom: 40px; max-width: 760px; }
.bsd .bsd-seksi__kepala .bsd-label { margin-bottom: 14px; }
.bsd .bsd-seksi__kepala--dua { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; max-width: none; }
.bsd .bsd-seksi__pengantar { font-size: 17px; }

.bsd .bsd-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bsd .bsd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bsd .bsd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bsd .bsd-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.bsd .bsd-kartu { background: var(--white); border-radius: var(--radius-kartu); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.bsd .bsd-kartu--lapang { padding: 32px 36px; }
.bsd .bsd-kartu--gelap { background: var(--arang-gelap); color: var(--ivory); }
.bsd .bsd-kartu--gelap .bsd-label { color: var(--brass-light); }
.bsd .bsd-kartu h3 { font-size: 22px; }
.bsd .bsd-kartu ul { font-size: 16px; }

/* Alasan (kenapa memilih) */
.bsd .bsd-alasan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.bsd .bsd-alasan__butir { border-top: 2px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }

/* Fakta + tipe */
.bsd .bsd-fakta-tipe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 56px; align-items: start; }
.bsd .bsd-fakta-tipe h2 { margin-bottom: 24px; }
.bsd .bsd-fakta { margin: 0; }
.bsd .bsd-fakta > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bsd .bsd-fakta dt { font-weight: 700; font-size: 15px; }
.bsd .bsd-fakta dd { margin: 0; font-size: 16px; }
.bsd .bsd-tipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.bsd .bsd-tipe__kartu { border: 1px solid var(--line); }
.bsd .bsd-seksi--putih .bsd-tipe__kartu { background: var(--ivory); }
.bsd .bsd-tipe__ukuran { font-weight: 700; font-size: 15px; white-space: nowrap; }

/* Waktu tempuh */
.bsd .bsd-waktu__menit { font-family: var(--font-judul); font-size: 30px; }

/* Bukti */
.bsd .bsd-bukti__judul { margin-bottom: 24px; }
.bsd .bsd-bukti { gap: 8px; font-size: 16px; }
.bsd .bsd-bukti__nilai { font-family: var(--font-judul); font-size: 34px; line-height: 1.1; white-space: nowrap; }
.bsd .bsd-bukti__nilai a { text-decoration: none; }
.bsd .bsd-bukti blockquote { margin: 0; padding: 0; border: 0; background: none; color: inherit; opacity: 1; font-family: var(--font-judul); font-style: italic; font-size: 20px; }

/* FAQ */
.bsd .bsd-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 64px; align-items: start; }
.bsd .bsd-faq__kiri { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.bsd .bsd-faq__daftar details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.bsd .bsd-faq__daftar summary {
	cursor: pointer; font-family: var(--font-judul); font-size: 21px; font-weight: 500; list-style: none;
	display: flex; gap: 12px; align-items: baseline;
}
.bsd .bsd-faq__daftar summary::-webkit-details-marker { display: none; }
.bsd .bsd-faq__daftar summary::before { content: "▸"; font-size: 16px; flex: none; }
.bsd .bsd-faq__daftar details[open] summary::before { content: "▾"; }
.bsd .bsd-faq__daftar details p { margin-top: 10px; padding-left: 28px; font-size: 17px; }

/* Cluster (kawasan) */
.bsd .bsd-cluster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.bsd .bsd-cluster:not(:has(.bsd-cluster__gambar)) { grid-template-columns: minmax(0, 980px); }
.bsd .bsd-cluster__teks { display: flex; flex-direction: column; gap: 20px; }
.bsd .bsd-cluster__gambar { aspect-ratio: 4 / 3.2; }

/* Tabel */
.bsd .bsd-tabel-gulir { overflow-x: auto; }
.bsd .bsd-tabel { width: 100%; border-collapse: collapse; font-size: 16px; background: var(--white); border-radius: 16px; overflow: hidden; }
.bsd .bsd-tabel th, .bsd .bsd-tabel td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bsd .bsd-tabel thead th { background: var(--chip); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.bsd .bsd-tabel td { white-space: nowrap; }
.bsd .bsd-tabel td:last-child { white-space: normal; }
.bsd .bsd-tabel--kartu td { white-space: normal; min-width: 120px; }
.bsd .bsd-tabel__wa { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--tautan); text-decoration: underline; }
.bsd .bsd-tabel__wa:hover { color: var(--tautan-hover); }
/* Ponsel: tabel hub jadi kartu bertumpuk, tanpa gulir ke samping. */
@media (max-width: 720px) {
	.bsd .bsd-tabel-gulir { overflow-x: visible; }
	.bsd .bsd-tabel--kartu, .bsd .bsd-tabel--kartu tbody, .bsd .bsd-tabel--kartu tr, .bsd .bsd-tabel--kartu th, .bsd .bsd-tabel--kartu td { display: block; width: 100%; }
	.bsd .bsd-tabel--kartu { background: transparent; border-radius: 0; }
	.bsd .bsd-tabel--kartu thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.bsd .bsd-tabel--kartu tr { background: var(--white); border: 1px solid var(--line); border-radius: 16px; margin: 0 0 14px; padding: 6px 0; }
	.bsd .bsd-tabel--kartu th[scope="row"] { font-family: "Fraunces", serif; font-size: 20px; border-bottom: 1px solid var(--line); padding: 12px 16px; }
	.bsd .bsd-tabel--kartu td { border-bottom: 0; padding: 8px 16px; font-size: 17px; min-width: 0; }
	.bsd .bsd-tabel--kartu td::before { content: attr(data-label); display: block; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--brass); margin-bottom: 2px; }
}

/* Linimasa */
.bsd .bsd-linimasa { list-style: none; margin: 0; padding: 0; }
.bsd .bsd-linimasa li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(233, 221, 200, 0.35); font-size: 16px; margin: 0; }
.bsd .bsd-linimasa__waktu { font-family: var(--font-judul); font-size: 18px; color: var(--brass-light); }
.bsd .bsd-seksi:not(.bsd-seksi--gelap) .bsd-linimasa__waktu { color: var(--brass); }

/* Langkah */
.bsd .bsd-langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bsd .bsd-langkah li { border-top: 2px solid var(--ink); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.bsd .bsd-langkah__no { font-family: var(--font-judul); font-size: 24px; color: var(--brass); }
.bsd .bsd-langkah h3 { font-size: 20px; font-family: var(--font-teks); font-weight: 700; letter-spacing: 0; }
.bsd .bsd-langkah p { font-size: 16px; }

/* Prosa */
.bsd .bsd-prosa { max-width: calc(820px + 2 * var(--tepi)); }
.bsd .bsd-prosa h2 { margin-bottom: 20px; }
.bsd .bsd-prosa h3 { margin: 28px 0 10px; }
.bsd .bsd-prosa p + p, .bsd .bsd-prosa ul + p, .bsd .bsd-prosa p + ul { margin-top: 14px; }
.bsd .bsd-prosa a { text-decoration: underline; }

/* Angka (pita gelap) */
.bsd .bsd-angka-pita__kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.bsd .bsd-angka-pita__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.bsd .bsd-angka { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; }
.bsd .bsd-angka__nilai { font-family: var(--font-judul); font-size: clamp(34px, 3.4vw, 46px); line-height: 1; white-space: nowrap; }

/* Segmen */
.bsd .bsd-segmen { display: flex; flex-direction: column; gap: 20px; }
.bsd .bsd-segmen__kartu {
	background: var(--white); border-radius: var(--radius-kartu); padding: 36px 40px;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 0.95fr); gap: 36px;
}
.bsd .bsd-segmen__kartu.is-gelap { background: var(--arang-gelap); color: var(--ivory); }
.bsd .bsd-segmen__kartu.is-gelap .bsd-label { color: var(--brass-light); }
.bsd .bsd-segmen__kartu.is-gelap .bsd-chip { background: transparent; color: var(--ivory); border: 1px solid var(--ivory); }
.bsd .bsd-segmen__suara { display: flex; flex-direction: column; gap: 12px; }
.bsd .bsd-segmen__hook { font-family: var(--font-judul); font-style: italic; font-size: 26px; line-height: 1.25; }
.bsd .bsd-segmen__isi { display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.bsd .bsd-segmen__pilih { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bsd .bsd-segmen__pilih .bsd-tombol { margin-top: auto; }

/* Kawasan */
.bsd .bsd-kawasan__isi { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.bsd .bsd-kawasan__isi--terang { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.bsd .bsd-kawasan__teks { display: flex; flex-direction: column; gap: 18px; }
.bsd .bsd-kawasan__nama { font-size: clamp(48px, 6vw, 72px); line-height: 1; }
.bsd .bsd-kawasan__tagline { font-family: var(--font-judul); font-style: italic; font-size: 26px; margin-top: -8px; }
.bsd .bsd-kawasan__lede { font-family: var(--font-judul); font-size: 24px; line-height: 1.35; }
.bsd .bsd-kawasan__angka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin: 8px 0; }
.bsd .bsd-kawasan__angka > div { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid currentColor; }
.bsd .bsd-kawasan__nilai { font-family: var(--font-judul); font-size: 30px; line-height: 1.1; }
.bsd .bsd-kawasan__lini { background: var(--arang-gelap); border-radius: var(--radius-kartu); padding: 32px; }
.bsd .bsd-kawasan__lini h3 { margin-bottom: 16px; }
.bsd .bsd-kawasan__gambar { display: flex; flex-direction: column; gap: 16px; }
.bsd .bsd-seksi--gelap .bsd-tautan { color: var(--ivory); }

/* Kartu produk */
.bsd .bsd-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: -12px 0 28px; }
.bsd .bsd-filter .bsd-chip { background: transparent; border: 1px solid var(--ink); min-height: var(--sentuh); padding: 8px 18px; }
.bsd .bsd-filter .bsd-chip.is-aktif { background: var(--ink); color: var(--ivory); }
.bsd .bsd-produk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.bsd .bsd-produk__kartu { background: var(--white); border-radius: var(--radius-kartu); overflow: hidden; display: flex; flex-direction: column; }
.bsd .bsd-produk__kartu[hidden] { display: none; }
.bsd .bsd-produk__gambar { position: relative; margin: 0; aspect-ratio: 4 / 3; }
.bsd .bsd-produk__gambar img { width: 100%; height: 100%; object-fit: cover; }
.bsd .bsd-produk__kartu[hidden] { display: none; } /* filter chip: jangan dikalahkan display:flex */
.bsd .bsd-produk__gambar figcaption { position: absolute; left: 12px; bottom: 12px; background: var(--ink); color: var(--ivory); font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pil); }
.bsd .bsd-produk__gambar--kosong.is-arang { background: var(--arang); }
.bsd .bsd-produk__gambar--kosong.is-brass { background: var(--brass); }
.bsd .bsd-produk__gambar--kosong.is-arang-gelap { background: var(--arang-gelap); }
.bsd .bsd-produk__isi { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; font-size: 16px; }
.bsd .bsd-produk__isi .bsd-label { font-size: 12px; }
.bsd .bsd-produk__isi h3 { font-size: 24px; }
.bsd .bsd-produk__tanggal { font-weight: 700; font-size: 15px; }
.bsd .bsd-produk__kaki { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bsd .bsd-produk__bawah { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; margin-top: 28px; }
.bsd .bsd-produk__bawah .bsd-kartu { padding: 28px 32px; }
.bsd .bsd-produk__bawah .bsd-tombol { align-self: flex-start; }
.bsd .bsd-daftar-tautan { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 32px; font-size: 16px; }
.bsd .bsd-daftar-tautan li { break-inside: avoid; margin: 0 0 8px; }
.bsd .bsd-daftar-tautan a { color: var(--tautan); text-decoration: underline; }
.bsd .bsd-daftar-tautan a:hover { color: var(--tautan-hover); }

/* Hidup sehari-hari */
.bsd .bsd-rencana { margin-top: 24px; background: var(--arang); color: var(--ivory); border-radius: var(--radius-kartu); padding: 22px 32px; display: flex; gap: 32px; align-items: center; }
.bsd .bsd-rencana span { font-family: var(--font-judul); font-size: 22px; flex: none; }
.bsd .bsd-rencana p { font-size: 16px; }

/* Tentang */
.bsd .bsd-tentang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: stretch; }
.bsd .bsd-tentang__panel { background: var(--arang); color: var(--ivory); border-radius: var(--radius-besar); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 440px; }
.bsd .bsd-tentang__panel blockquote { margin: 0; padding: 0; border: 0; background: none; color: #F6F1E7; opacity: 1; font-family: var(--font-judul); font-style: italic; font-size: 28px; line-height: 1.3; }
/* Astra memberi blockquote warna abu-abu + garis kiri; di panel gelap semua teks ivory penuh (§9). */
.bsd .bsd-tentang__panel p, .bsd .bsd-tentang__panel blockquote p, .bsd .bsd-tentang__panel cite { color: #F6F1E7; opacity: 1; }
.bsd .bsd-tentang__teks { display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.bsd .bsd-langkah--ringkas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bsd .bsd-langkah--ringkas h3 { font-size: 17px; }
.bsd .bsd-langkah--ringkas p { font-size: 15px; }

/* Penutup */
.bsd .bsd-penutup { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.bsd .bsd-penutup__teks { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.bsd .bsd-penutup--tengah { grid-template-columns: minmax(0, 880px); justify-content: center; text-align: center; }
.bsd .bsd-penutup--tengah .bsd-penutup__teks { align-items: center; }
.bsd .bsd-penutup-seksi h2 { font-size: clamp(32px, 3.8vw, 48px); }
.bsd .bsd-banding { display: flex; flex-direction: column; gap: 12px; }
.bsd .bsd-banding a { display: flex; justify-content: space-between; background: var(--arang-gelap); border-radius: 16px; padding: 16px 20px; text-decoration: none; font-weight: 700; }
.bsd .bsd-banding a:hover { background: var(--ink); }

/* ---------- Footer ---------- */
.bsd .bsd-footer { background: var(--ink); color: var(--ivory); padding: 64px 0 120px; font-size: 16px; }
.bsd .bsd-footer a { color: var(--ivory); }
.bsd .bsd-footer__isi { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.bsd .bsd-footer__merek { display: flex; flex-direction: column; gap: 12px; }
.bsd .bsd-footer__nama { font-family: var(--font-judul); font-size: 28px; }
.bsd .bsd-footer__kolom h2 { font-family: var(--font-teks); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.bsd .bsd-footer__kolom ul { list-style: none; padding: 0; margin: 0; }
.bsd .bsd-footer__kolom li { margin: 0 0 8px; }
.bsd .bsd-footer__bawah { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(246, 241, 231, 0.3); font-size: 15px; }

/* ---------- Bar WhatsApp ponsel ---------- */
.bsd .bsd-bar { display: none; }

/* ---------- Responsif ---------- */
@media (max-width: 1100px) {
	.bsd .bsd-produk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsd .bsd-angka-pita__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bsd .bsd-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bsd .bsd-footer__isi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bsd .bsd-footer__merek { grid-column: 1 / -1; }
	.bsd .bsd-nav ul { gap: 18px; }
}
@media (max-width: 900px) {
	.bsd .bsd-nav-tombol {
		display: inline-flex; align-items: center; margin-left: auto; min-height: var(--sentuh); padding: 8px 18px;
		border: 2px solid var(--ink); border-radius: var(--radius-pil); background: transparent; font: 700 15px var(--font-teks); color: var(--ink);
	}
	.bsd .bsd-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ivory); border-bottom: 1px solid var(--line); padding: 12px var(--tepi) 20px; }
	.bsd .bsd-nav.is-terbuka { display: block; }
	.bsd .bsd-nav ul { flex-direction: column; gap: 0; }
	.bsd .bsd-nav a { display: block; padding: 12px 0; font-size: 17px; }
	.bsd .bsd-header__cta { display: none; }
	.bsd .bsd-hero__isi, .bsd .bsd-fakta-tipe, .bsd .bsd-faq, .bsd .bsd-cluster, .bsd .bsd-kawasan__isi,
	.bsd .bsd-kawasan__isi--terang, .bsd .bsd-tentang, .bsd .bsd-penutup, .bsd .bsd-produk__bawah,
	.bsd .bsd-seksi__kepala--dua, .bsd .bsd-alasan, .bsd .bsd-grid--2, .bsd .bsd-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.bsd .bsd-seksi__kepala--dua { gap: 16px; }
	.bsd .bsd-segmen__kartu { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; gap: 20px; }
	.bsd .bsd-hero { padding: 32px 0 48px; }
	.bsd .bsd-hero__kolase { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
	.bsd .bsd-hero__kolase .bsd-gambar:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
	.bsd .bsd-hero__kolase .bsd-gambar:not(:first-child) { aspect-ratio: 1 / 1; }
	.bsd .bsd-kawasan__gambar { order: 2; }
	.bsd .bsd-langkah--ringkas { grid-template-columns: minmax(0, 1fr); }
	.bsd .bsd-rencana { flex-direction: column; align-items: flex-start; gap: 10px; }
	.bsd .bsd-tentang__panel { min-height: 0; }
	.bsd .bsd-penutup--tengah { text-align: left; }
	.bsd .bsd-penutup--tengah .bsd-penutup__teks { align-items: flex-start; }
	.bsd .bsd-bar {
		display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--ivory); border-top: 1px solid var(--line);
	}
	.bsd .bsd-bar .bsd-tombol--wa { flex: 1; }
	.bsd .bsd-bar .bsd-tombol--garis { background: var(--ivory); }
}
@media (max-width: 640px) {
	.bsd .bsd-produk, .bsd .bsd-angka-pita__grid, .bsd .bsd-grid--5, .bsd .bsd-kawasan__angka { grid-template-columns: minmax(0, 1fr); }
	.bsd .bsd-angka-pita__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsd .bsd-footer__isi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsd .bsd-fakta > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.bsd .bsd-daftar-tautan { columns: 1; }
	.bsd .bsd-gambar--lebar { aspect-ratio: 4 / 3; }
	.bsd .bsd-lede, .bsd .bsd-kawasan__lede { font-size: 21px; }
	.bsd .bsd-segmen__hook { font-size: 23px; }
	.bsd .bsd-tentang__panel blockquote { font-size: 23px; }
	.bsd .bsd-tabel td { white-space: normal; }
}

/* Gambar tanpa modifier rasio: jangan kolaps (gambar kedua kawasan, cluster). */
.bsd .bsd-kawasan__gambar .bsd-gambar:not(.bsd-gambar--tinggi) { aspect-ratio: 16 / 9; }

/* Ponsel (mockup Mobile-1): gambar hero di atas teks, kolase jadi satu gambar. */
@media (max-width: 900px) {
	.bsd .bsd-hero__isi > .bsd-gambar,
	.bsd .bsd-hero__kolase,
	.bsd .bsd-hero__panel { order: -1; }
	.bsd .bsd-hero__isi { gap: 28px; }
}
@media (max-width: 640px) {
	.bsd .bsd-hero__kolase { display: block; }
	.bsd .bsd-hero__kolase .bsd-gambar:not(:first-child) { display: none; }
	.bsd .bsd-hero__panel { min-height: 220px; }
	.bsd { --jarak-seksi: 56px; }
}

/* Halaman bawaan Astra di dalam header/footer tema (kontak lama, blog, artikel, arsip, 404). */
.bsd .content-area.primary { max-width: calc(820px + 2 * var(--tepi)); margin: 0 auto; padding: 48px var(--tepi) 88px; float: none; width: auto; }
.bsd .content-area .entry-title { font-size: clamp(32px, 4vw, 44px); margin-bottom: 12px; }
.bsd .content-area .entry-content h1 { font-size: clamp(32px, 4vw, 42px); margin: 0 0 20px; }
.bsd .content-area .entry-content h2 { font-size: clamp(26px, 3vw, 32px); margin: 44px 0 14px; }
.bsd .content-area .entry-content h3 { font-size: 22px; margin: 28px 0 10px; }
.bsd .content-area .entry-content p,
.bsd .content-area .entry-content li { font-size: 17px; line-height: 1.7; }
.bsd .content-area .entry-content p { margin: 0 0 14px; }
.bsd .content-area .entry-content ul,
.bsd .content-area .entry-content ol { margin: 0 0 18px; padding-left: 1.3em; }
.bsd .content-area .entry-content a { text-decoration: underline; }
.bsd .content-area .post-thumb img,
.bsd .content-area .wp-post-image { border-radius: var(--radius-kartu); margin-bottom: 24px; }
.bsd .content-area .entry-meta { font-size: 15px; margin-bottom: 24px; }
.bsd .error-404 { text-align: left; }
.bsd .error-404 .page-title { font-size: clamp(32px, 4vw, 44px); }
.bsd .bsd-tabel a { text-decoration: underline; text-underline-offset: 3px; color: var(--arang); }

/* Revisi Chris 1 Okt 2026: fact band 7 kartu (4 + 3) dan "Hidup sehari-hari" 5 kolom (3 + 2). */
.bsd .bsd-angka-pita__grid--7 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bsd .bsd-angka-pita__grid--7 > * { grid-column: span 3; }
.bsd .bsd-angka-pita__grid--7 > :nth-child(n+5) { grid-column: span 4; }
.bsd .bsd-grid--hidup { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bsd .bsd-grid--hidup > * { grid-column: span 2; min-width: 0; }
.bsd .bsd-grid--hidup > :nth-child(n+4) { grid-column: span 3; }
@media (max-width: 1100px) {
	.bsd .bsd-angka-pita__grid--7 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.bsd .bsd-grid--hidup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsd .bsd-grid--hidup > *, .bsd .bsd-grid--hidup > :nth-child(n+4) { grid-column: auto; }
	.bsd .bsd-angka-pita__grid--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsd .bsd-angka-pita__grid--7 > *, .bsd .bsd-angka-pita__grid--7 > :nth-child(n+5) { grid-column: auto; }
}
@media (max-width: 640px) {
	.bsd .bsd-grid--hidup, .bsd .bsd-angka-pita__grid--7 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
 * Artikel Fase 3 (template-artikel.php): tabel di prosa, "Dari pengalaman saya",
 * kotak penulis, baris tautan teks. Teks tetap ink penuh (CLAUDE.md §9).
 * ------------------------------------------------------------------------- */
.bsd .bsd-artikel .bsd-seksi--rapat { padding: 28px 0; }
.bsd .bsd-artikel .bsd-prosa ol, .bsd .bsd-artikel .bsd-prosa ul { padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.bsd .bsd-artikel .bsd-prosa h2 + ol, .bsd .bsd-artikel .bsd-prosa h2 + ul, .bsd .bsd-artikel .bsd-prosa h2 + .bsd-tabel-gulir { margin-top: 0; }
.bsd .bsd-artikel .bsd-prosa ol + p, .bsd .bsd-artikel .bsd-prosa p + ol, .bsd .bsd-artikel .bsd-prosa .bsd-tabel-gulir + p, .bsd .bsd-artikel .bsd-prosa p + .bsd-tabel-gulir { margin-top: 14px; }
.bsd .bsd-artikel .bsd-tabel-gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-kartu); background: var(--white); }
.bsd .bsd-artikel .bsd-prosa table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; color: var(--ink); }
.bsd .bsd-artikel .bsd-prosa th, .bsd .bsd-artikel .bsd-prosa td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bsd .bsd-artikel .bsd-prosa thead th { background: var(--sand); font-weight: 700; white-space: nowrap; }
.bsd .bsd-artikel .bsd-prosa tbody tr:last-child td { border-bottom: 0; }
.bsd .bsd-artikel .bsd-prosa table.bsd-tabel--lebar { min-width: 720px; }
.bsd .bsd-artikel .bsd-pengalaman { border-left: 4px solid var(--cta); padding: 6px 0 6px 22px; }
.bsd .bsd-artikel .bsd-pengalaman h2 { margin-bottom: 12px; }
.bsd .bsd-artikel .bsd-pengalaman--isi { background: #FFE8A3; border: 3px dashed var(--cta); border-radius: var(--radius-kartu); padding: 22px 26px; }
.bsd .bsd-artikel .bsd-pengalaman__tanda { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.bsd .bsd-artikel .bsd-penulis { display: flex; align-items: center; gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 17px; }
.bsd .bsd-artikel .bsd-penulis a { text-decoration: underline; }
.bsd .bsd-artikel__tautan { font-size: 17px; }
.bsd .bsd-artikel__tautan a { font-weight: 600; }
/* Hero artikel dengan dua foto berdampingan (Fase 3 artikel 05): foto kedua setinggi foto pertama. */
.bsd .bsd-artikel .bsd-hero__kolase .bsd-gambar:nth-child(2):last-child { grid-row: 1 / 3; }
@media (max-width: 900px) {
	.bsd .bsd-artikel .bsd-hero__kolase .bsd-gambar:nth-child(2):last-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}