/*
 * Pages — beranda & halaman statis (dimuat hanya untuk halaman).
 */

/* -------------------------------------------------------------------------
 * Beranda: hero
 * ---------------------------------------------------------------------- */
.home-hero {
	background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.home-hero__inner {
	display: grid;
	gap: var(--space-8);
	padding-block: var(--space-16) var(--space-12);
	flex: 0 0 auto;
}
/* Grid child tak boleh mendorong kolom (foto poster punya min-content besar). */
.home-hero__inner > * { min-width: 0; }
.home-hero__content { display: flex; flex-direction: column; }

/* Hero ±1 layar penuh (hero + trust bar = 100svh - header). Dibatasi layar
 * cukup tinggi & desktop agar tidak memaksa scroll di laptop pendek. */
@media (min-width: 1024px) and (min-height: 720px) {
	/* Hero tetap ±1 layar penuh; trust bar dinaikkan di dalamnya (lihat
	 * .home-hero__inner flex + justify-content center). */
	.home-hero { min-height: calc(100svh - var(--header-h)); }
}
.home-hero__eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: #bfdbfe;
	margin: 0;
}
.home-hero__title {
	color: #fff;
	font-size: clamp(1.8rem, 4vw, 2.75rem);
	max-width: 38rem;
	margin: 0;
}
.home-hero__sub { color: #dbeafe; max-width: 34rem; margin: 0; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* Jarak vertikal antar blok teks hero — satu nilai konsisten (24px). */
.home-hero__content { gap: var(--space-6); }

.home-hero__stats {
	list-style: none;
	margin: 0;
	padding: var(--space-6);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius);
	display: grid;
	gap: var(--space-6);
}
.home-hero__stats strong { display: block; color: #fff; font-size: var(--fs-md); }
.home-hero__stats span { color: #dbeafe; font-size: var(--fs-sm); }

@media (min-width: 900px) {
	/* 2/3 teks — 1/3 poster. Tinggi baris = tinggi poster; teks menyesuaikan
	 * setinggi poster (spread merata, tidak melebihi poster). */
	.home-hero__inner {
		grid-template-columns: 2fr 1fr;
		align-items: stretch;
		align-content: center;
		gap: var(--space-12);
	}
	/* Sedikit lebih rapat dari tinggi poster (90%), tetap rata & konsisten. */
	.home-hero__content { height: 90%; align-self: center; justify-content: space-between; }
	.home-hero__visual { align-self: center; }
}

/* -------------------------------------------------------------------------
 * Beranda: section umum & kategori
 * ---------------------------------------------------------------------- */
.home-section { padding-block: var(--space-12); }
.home-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}
.home-section__head .section-title { margin-bottom: 0; }
.home-section__link { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }

.cat-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
}
.cat-tile {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	height: 100%;
	min-width: 0;
	padding: var(--space-4) var(--space-3);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.cat-tile:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--shadow);
	border-color: var(--color-primary);
}
.cat-tile__name {
	font-weight: 800;
	font-size: var(--fs-sm);
	line-height: 1.3;
	min-height: 2.6em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: break-word;
}
.cat-tile__meta { font-size: var(--fs-xs); color: #475569; }

@media (min-width: 700px) {
	.cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
 * Beranda: trust
 * ---------------------------------------------------------------------- */
.home-trust { background: var(--color-bg-soft); padding-block: var(--space-16); }
.home-trust__grid {
	list-style: none;
	margin: 0 0 var(--space-12);
	padding: 0;
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(2, 1fr);
}
.home-trust__item {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-6);
}
.home-trust__item strong { display: block; margin-bottom: var(--space-2); font-size: var(--fs-md); }
.home-trust__item span { color: var(--color-text-muted); font-size: var(--fs-sm); }
.home-trust__cta { margin-top: var(--space-8); }
@media (min-width: 800px) {
	.home-trust__grid { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------------------
 * Halaman kontak / warranty / about — panel konten
 * ---------------------------------------------------------------------- */
.lbj-page__grid {
	display: grid;
	gap: var(--block-gap);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.lbj-page__grid--split { grid-template-columns: 1fr 1fr; align-items: start; }
}
.lbj-panel { background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-6); }

.lbj-contact__map iframe { width: 100%; border: 0; border-radius: var(--radius); min-height: 320px; }

/* Info kontak baris. */
.lbj-contact__row { display: flex; gap: var(--space-2); padding: var(--space-2) 0; }
.lbj-contact__row strong { min-width: 7.5rem; }

/* Form bawaan tema (selain CF7): pakai .lbj-form. CF7 sudah digayakan di
   components.css lewat .wpcf7-form. */
.lbj-form { max-width: 40rem; }

/* -------------------------------------------------------------------------
 * Accordion FAQ
 * ---------------------------------------------------------------------- */
.lbj-faq { max-width: 52rem; margin-inline: auto; }
.lbj-faq__intro { text-align: center; margin-bottom: var(--space-8); }
.lbj-faq__contact-hint { text-align: center; margin-top: var(--space-8); }

/* -------------------------------------------------------------------------
 * Solution (persona landing)
 * ---------------------------------------------------------------------- */
.lbj-solution__hero {
	background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
	color: #fff;
	padding-block: var(--space-12);
}
.lbj-solution__hero a { color: #fff; }
.lbj-solution__term {
	display: inline-block;
	background: rgba(255, 255, 255, 0.16);
	padding: var(--space-1) var(--space-3);
	border-radius: 999px;
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 var(--space-4);
}
.lbj-solution__title { color: #fff; font-size: clamp(1.7rem, 3.5vw, 2.4rem); max-width: 40rem; }
.lbj-solution__intro { color: #dbeafe; max-width: 36rem; font-size: var(--fs-md); margin-bottom: var(--space-6); }
.lbj-solution-archive__header { margin-bottom: var(--space-8); }

/* -------------------------------------------------------------------------
 * Home v1.1.2: hero visual + solution cards
 * ---------------------------------------------------------------------- */
.home-hero__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-12);
}
.home-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
}
.home-hero__stats li { display: flex; flex-direction: column; justify-content: center; }
.home-hero__stats strong { font-size: var(--fs-sm); }
.home-hero__stats span { font-size: var(--fs-xs); color: #dbeafe; }

/* Visual kanan: frame berisi gambar produk atau placeholder. */
.home-hero__visual { display: block; }
.home-hero__frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: var(--space-6);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.home-hero__frame > img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.home-hero__placeholder { display: grid; place-items: center; gap: var(--space-3); color: #dbeafe; text-align: center; }
.home-hero__chip {
  position: absolute;
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
  box-shadow: var(--shadow);
}
.chip--grade { top: var(--space-4); left: var(--space-4); background: var(--color-success); }
.chip--wa { bottom: var(--space-4); right: var(--space-4); background: var(--color-whatsapp-dark); }

/* Solusi cards */
.sol-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.sol-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.sol-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity 0.14s ease;
}
.sol-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(14, 77, 146, 0.35);
}
.sol-card:hover::before { opacity: 1; }
.sol-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: rgba(14, 77, 146, 0.1);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  transition: background 0.14s ease, color 0.14s ease;
}
.sol-card:hover .sol-card__icon { background: var(--color-primary); color: #fff; }
.sol-card__name { font-weight: 700; font-family: var(--font-heading); }
.sol-card__meta { font-size: var(--fs-sm); color: var(--color-text-muted); }
.sol-card__arrow {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-primary);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.sol-card:hover .sol-card__arrow { opacity: 1; transform: translateX(0); }

.sol-cards__empty {
  padding: var(--space-8);
  background: var(--color-bg-soft);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  text-align: center;
  display: grid;
  place-items: center;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .sol-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .sol-cards { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------------------
 * Layanan (Service) — grid kartu
 * ---------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.svc-card {
  position: relative;
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.svc-card__num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: rgba(14, 77, 146, 0.15);
  line-height: 1;
}
.svc-card__title { font-size: var(--fs-md); margin: 0; }
.svc-card__body { color: var(--color-text-muted); }
.svc-card__body p { margin: 0; }
.svc-card__media img { width: 100%; border-radius: var(--radius-sm); }
@media (min-width: 700px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
 * Solution cards — beauty pass v1.2.0
 * ---------------------------------------------------------------------- */
.sol-card {
  background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%);
  border: 1px solid #e6edf7;
  border-radius: 14px;
  padding: var(--space-6);
  gap: var(--space-3);
}
.sol-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  box-shadow: 0 6px 16px rgba(14, 77, 146, 0.28);
}
.sol-card__name { font-size: var(--fs-md); }
.sol-card__meta { color: #5b6b83; }
.sol-card:hover .sol-card__icon { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); color: #fff; }
.sol-card .sol-card__arrow { margin-top: auto; }

/* -------------------------------------------------------------------------
 * v1.3.0 — baris produk scroll horizontal (home)
 * ---------------------------------------------------------------------- */
.l-row__wrap { margin-inline: 0; }
.l-row__track {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2);
  display: flex;
  gap: var(--gap-card);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.l-row__track::-webkit-scrollbar { height: 8px; }
.l-row__track::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
.l-row__track::-webkit-scrollbar-track { background: transparent; }

.l-row__item {
  flex: 0 0 min(272px, 78vw);
  min-width: 0;
  scroll-snap-align: start;
}
.l-row__item .card { height: 100%; }

/* Tambahan padding kiri/kanan agar track tidak terpotong kartu. */
.l-row { padding-block: var(--space-10); }
.l-row + .l-row,
.l-row.hidden { border-top: 1px solid var(--color-border); }

/* -------------------------------------------------------------------------
 * Laptop Finder — quiz
 * ---------------------------------------------------------------------- */
.lbj-finder__head { text-align: center; max-width: 44rem; margin-inline: auto; }
.lbj-finder__eyebrow {
  display: inline-block; margin-bottom: var(--space-2);
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-primary);
}
.finder { max-width: 46rem; margin-inline: auto; margin-top: var(--space-8); }
.finder__progress { height: 6px; border-radius: 999px; background: var(--color-bg-soft); overflow: hidden; }
.finder__bar { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-whatsapp)); transition: width .3s ease; }
.finder__count { text-align: center; color: var(--color-text-muted); font-size: var(--fs-xs); margin: var(--space-3) 0 0; }
.finder__question { text-align: center; font-size: var(--fs-xl); margin: var(--space-4) 0 var(--space-1); }
.finder__hint { text-align: center; color: var(--color-text-muted); margin: 0 0 var(--space-6); }
.finder__options {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
}
.finder__option {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-3);
  background: var(--color-bg); border: 1.5px solid var(--color-border);
  border-radius: 14px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--color-text);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.finder__option:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.finder__option.is-selected {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(14,77,146,.15), var(--shadow);
}
.finder__option-icon { color: var(--color-primary); display: grid; place-items: center; }
.finder__nav {
  display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap;
}
.finder__done { text-align: center; padding: var(--space-12) 0; }
@media (min-width: 700px) {
  .finder__options { grid-template-columns: repeat(3, 1fr); }
  .finder__options[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
}

/* Hero: CTA sekunder = WhatsApp hijau (konsisten dgn tombol WA), tetap sekunder. */
.home-hero__secondary {
  background: rgba(37, 211, 102, 0.12);
  color: var(--color-whatsapp);
  border: 1px solid rgba(37, 211, 102, 0.6);
}
.home-hero__secondary:hover { background: rgba(37, 211, 102, 0.28); color: #fff; }
.chip--sold { top: auto; bottom: var(--space-4); left: var(--space-4); background: var(--color-primary); }

/* =========================================================================
 * R3-3 Beautification — QC timeline & testimonials
 * ======================================================================== */
.home-trust__lede { max-width: 46rem; }
.home-trust__head .section-title { margin-bottom: 0; }

.home-qc {
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
  display: grid; gap: var(--space-4); grid-template-columns: 1fr;
}
.home-qc__step {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 2rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.home-qc__num {
  position: absolute; top: var(--space-6); left: var(--space-4);
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-primary); color: #fff; font-weight: 700; font-size: var(--fs-sm);
}
.home-qc__title { font-size: var(--fs-md); margin: 0 0 var(--space-1); }
.home-qc__step p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Testimoni */
.home-testi__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.home-testi__card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  background: linear-gradient(180deg, #fff, #f7f9fc);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.home-testi__stars { color: var(--color-accent); letter-spacing: 2px; font-size: var(--fs-sm); }
.home-testi__card blockquote { margin: 0; color: var(--color-text); font-style: italic; }
.home-testi__who { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.home-testi__avatar {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-bg-dark); color: #fff; font-weight: 700;
}
.home-testi__who strong { display: block; }
.home-testi__who .text-muted { font-size: var(--fs-xs); }

@media (min-width: 600px) {
  .home-qc { grid-template-columns: repeat(2, 1fr); }
  .home-testi__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .home-qc { grid-template-columns: repeat(5, 1fr); }
  .home-qc__step { padding-left: var(--space-5); padding-top: calc(var(--space-6) + 2.2rem); }
  .home-qc__num { top: var(--space-5); left: var(--space-5); }
}

/* =========================================================================
 * R3-3 polish — hero depth/texture, spacing desktop, judul
 * ======================================================================== */
.home-hero {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
}
.home-hero__title { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -0.02em; }
.home-hero__frame { transform: rotate(-1.6deg); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28); transition: transform .25s ease; }
.home-hero:hover .home-hero__frame { transform: rotate(0deg); }

/* Jarak antar section lebih lega di desktop (hindari kesan padat). */
.lbj-page__title { font-size: clamp(1.8rem, 3vw, 2.4rem); }
@media (min-width: 900px) {
  .home-section { padding-block: var(--space-16); }
  .home-trust { padding-block: var(--space-16); }
}

/* Beranda micro-pass v1.4.0: header baris sejajar, kartu row konsisten. */
.l-row .home-section__head { align-items: baseline; }
.l-row__item { scroll-padding-left: var(--space-4); }
@media (min-width: 1100px) {
  .l-row__item { flex-basis: 288px; }
}

/* =========================================================================
 * B3 — Keranjang (WA composer)
 * ======================================================================== */
.wa-cart { max-width: 46rem; margin-top: var(--space-8); }
.wa-cart__items { border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.wa-cart__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto auto;
  grid-template-areas: "img info qty sub del";
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.wa-cart__row:last-child { border-bottom: 0; }
.wa-cart__img { grid-area: img; width: 64px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-bg-soft); }
@media (max-width: 560px) {
  .wa-cart__row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "img info del"
      "img qty sub";
  }
  .wa-cart__del { align-self: start; justify-self: end; }
}
.wa-cart__img--ph { display: block; background: var(--color-bg-soft); }
.wa-cart__info { grid-area: info; min-width: 0; }
.wa-cart__name { display: block; font-weight: 600; color: var(--color-text); text-decoration: none; font-size: var(--fs-sm); }
.wa-cart__name:hover { color: var(--color-primary); }
.wa-cart__price { font-size: var(--fs-xs); color: var(--color-text-muted); }
.wa-cart__qty { grid-area: qty; display: flex; align-items: center; gap: var(--space-2); }
.wa-cart__qbtn {
  width: 28px; height: 28px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-bg); cursor: pointer; font-size: var(--fs-md); line-height: 1;
}
.wa-cart__qbtn:hover { border-color: var(--color-primary); }
.wa-cart__qtyval { min-width: 1.4rem; text-align: center; font-weight: 700; }
.wa-cart__sub { grid-area: sub; font-weight: 700; }
.wa-cart__del { grid-area: del; justify-self: end; border: 0; background: none; color: var(--color-text-muted); cursor: pointer; font-size: var(--fs-lg); line-height: 1; }
.wa-cart__del:hover { color: var(--color-danger); }
.wa-cart__note { margin-top: var(--space-4); }
.wa-cart__note label { font-weight: 600; display: block; margin-bottom: var(--space-1); }
.wa-cart__note textarea { width: 100%; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.wa-cart__total { text-align: right; font-size: var(--fs-md); margin: var(--space-4) 0; }
.wa-cart__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.wa-cart__hint { text-align: center; font-size: var(--fs-xs); }
.wa-cart__empty { text-align: center; padding: var(--space-12) 0; }
.wa-cart__empty .btn { margin-top: var(--space-4); }

/* =========================================================================
 * B4 — halaman informasional (Cara Beli, Tukar Tambah, Privasi)
 * ======================================================================== */
.lbj-prose-page { margin-inline: auto; }
.lbj-section-h { font-size: var(--fs-lg); margin-top: var(--section-gap); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.lbj-lead { font-size: var(--fs-md); color: var(--color-text-muted); max-width: 44rem; }
.lbj-ordered { margin: 0 0 var(--space-4); padding-left: 1.35rem; }
.lbj-ordered li { margin-bottom: var(--space-2); }
.lbj-grid16 { display: grid; grid-template-columns: 1fr; gap: var(--space-2) var(--space-4); padding-left: 1.25rem; }
@media (min-width: 640px) { .lbj-grid16 { grid-template-columns: repeat(2, 1fr); } }
.lbj-note { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: var(--radius); padding: var(--space-3) var(--space-4); }

.lbj-table-wrap { overflow-x: auto; }
.lbj-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.lbj-table th, .lbj-table td { border: 1px solid var(--color-border); padding: var(--space-3); text-align: left; vertical-align: top; }
.lbj-table thead th { background: var(--color-bg-soft); }
.lbj-table th:first-child { white-space: nowrap; }

.lbj-3step { list-style: none; padding: 0; margin: var(--space-6) 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); counter-reset: step; }
.lbj-3step li { counter-increment: step; position: relative; padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 2.4rem); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 14px; }
.lbj-3step li::before { content: counter(step); position: absolute; left: var(--space-4); top: var(--space-4); width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; font-weight: 700; }
@media (min-width: 700px) { .lbj-3step { grid-template-columns: repeat(3, 1fr); } .lbj-3step li { padding-left: var(--space-4); padding-top: calc(var(--space-5) + 2.2rem); } .lbj-3step li::before { top: var(--space-4); left: var(--space-4); } }

.lbj-trade { max-width: 34rem; margin: var(--space-6) 0; display: grid; gap: var(--space-2); }
.lbj-trade .btn { margin-top: var(--space-2); }
.lbj-trade__hint { font-size: var(--fs-xs); }

/* B6 — home: finder banner, google slot, trade-in banner */
.home-finder { padding-top: var(--space-8); }
.home-finder__card {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding: var(--space-5);
  background: linear-gradient(120deg, #f0f6ff, #ffffff);
  border: 1px solid #dbe7f5;
  border-radius: 16px;
  text-decoration: none; color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.home-finder__card:hover { box-shadow: var(--shadow-lg); border-color: var(--color-primary); }
.home-finder__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--color-primary); color: #fff; flex-shrink: 0; }
.home-finder__txt { flex: 1; min-width: 220px; }
.home-finder__txt strong { display: block; }
.home-finder__txt span { font-size: var(--fs-sm); color: var(--color-text-muted); }

.home-google__box { display: flex; align-items: center; gap: var(--space-2); justify-content: center; padding: var(--space-4); background: var(--color-bg-soft); border-radius: 14px; }
.home-google__stars { color: var(--color-accent-dark); font-weight: 800; }

.home-tradein { padding-block: var(--space-12); }
.home-tradein__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-8); background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); color: #fff; border-radius: 16px; }
.home-tradein .section-title { color: #fff; }
.home-tradein .text-muted { color: #dbeafe; }

/* Banner layanan (home) — sejajar gaya banner tukar tambah */
.home-promo { padding-block: var(--space-10); }
.home-promo__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-8); border-radius: 16px; }
.home-promo__inner--servis { background: linear-gradient(135deg, #fff1dd, #fffaf0); border: 1px solid #fed7aa; }
.home-promo__inner--servis .section-title { color: #7c2d12; }
.home-promo__inner--servis .text-muted { color: #7c5a3a; }
.home-tradein { padding-top: 0; }

/* Kontak: tombol WA berbaris */
.lbj-contact__actions { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; }
@media (min-width: 520px) { .lbj-contact__actions { flex-direction: row; flex-wrap: wrap; } .lbj-contact__actions .btn { flex: 1; } }

/* Baris produk scroll horizontal: pastikan track tidak bocor ke lebar halaman. */
.l-row__wrap { overflow: hidden; }

/* Pencarian: empty state */
.lbj-search-empty { background: var(--color-bg-soft); border: 1px dashed var(--color-border); border-radius: 14px; padding: var(--space-8); }
.lbj-search-empty .cat-tiles { margin-bottom: var(--space-6); }
.lbj-search-empty__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Keranjang: catatan & rekening */
.wa-cart__bank { font-size: var(--fs-xs); text-align: center; margin-top: var(--space-3); color: var(--color-text-muted); }
.wa-cart__row { background: var(--color-bg); }
.wa-cart__row:hover { background: var(--color-bg-soft); }
.wa-cart__name { line-height: 1.3; }

/* Beranda: trust bar (band card) & 4 alasan */
.home-hero__trustbar { margin-top: var(--space-6); padding-bottom: var(--space-6); }
.home-hero__trust {
  list-style: none; margin: 0; padding: var(--space-3);
  display: grid; grid-template-columns: 1fr; gap: var(--space-2);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
}
.home-hero__trust li {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); text-align: center;
  color: #fff; font-weight: 600; font-size: var(--fs-sm);
  background: rgba(255, 255, 255, 0.06); border-radius: 10px;
}
.home-hero__trust li::before {
  content: "✓"; flex: 0 0 auto;
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--color-whatsapp); color: #fff;
  font-size: 0.85rem; font-weight: 800;
}
@media (min-width: 560px) { .home-hero__trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .home-hero__trust { grid-template-columns: repeat(4, 1fr); } }

.home-reason { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.home-reason__item {
  position: relative;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 16px; padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home-reason__item::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 4px; border-radius: 16px 16px 0 0;
  background: var(--color-primary);
}
.home-reason__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.home-reason__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: rgba(14, 77, 146, 0.09); color: var(--color-primary);
}
.home-reason__icon svg { width: 24px; height: 24px; }
.home-reason__item h3 { font-size: var(--fs-md); margin: 0 0 var(--space-2); }
.home-reason__item p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
@media (min-width: 700px) { .home-reason { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .home-reason { grid-template-columns: repeat(4, 1fr); } }

/* Cara Beli & Garansi — polish trust */
.lbj-bank { background: #fff7ed; border-color: #fed7aa; color: #7c2d12; }
.lbj-bank strong { color: #9a3412; }
.lbj-ordered > li { margin-bottom: var(--space-3); }
.lbj-grid16 { margin-top: var(--space-4); }

/* Cara Beli & Garansi — beautify v1.5.25: garansi, 16 titik, callout */
.lbj-callout {
  background: #eef6ff; border: 1px solid #cfe3fb; color: #0c4a6e;
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm); margin-top: var(--space-4);
}

.lbj-warranty { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--gap-card); }
.lbj-warranty__card {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 14px;
  padding: var(--space-5); display: flex; flex-direction: column;
}
.lbj-warranty__card h3 { margin: 0 0 var(--space-2); }
.lbj-warranty__card p { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--fs-sm); }
.lbj-warranty__term {
  margin-top: auto; align-self: flex-start;
  background: rgba(14, 77, 146, 0.08); color: var(--color-primary);
  border: 1px solid rgba(14, 77, 146, 0.18); border-radius: 999px;
  padding: 0.3rem 0.9rem; font-weight: 800; font-size: var(--fs-xs);
}
@media (min-width: 760px) { .lbj-warranty { grid-template-columns: repeat(3, 1fr); } }

.lbj-check16 { list-style: none; counter-reset: chk; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3) var(--gap-card); }
.lbj-check16 > li { counter-increment: chk; position: relative; padding-left: 1.9rem; font-size: var(--fs-sm); }
.lbj-check16 > li::before {
  content: counter(chk); position: absolute; left: 0; top: -0.05rem;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--color-bg-soft); border: 1px solid var(--color-border);
  color: var(--color-primary); display: grid; place-items: center;
  font-size: 0.68rem; font-weight: 800;
}
@media (min-width: 640px) { .lbj-check16 { grid-template-columns: repeat(2, 1fr); } }

.lbj-syarat h3 { margin: 0 0 var(--space-2); font-size: var(--fs-md); }
.lbj-syarat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lbj-syarat li { position: relative; padding-left: 1.5rem; font-size: var(--fs-sm); }
.lbj-syarat li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: 800; }

.lbj-bank h3 { margin: 0 0 var(--space-2); font-size: var(--fs-md); }
.lbj-bank p { margin: var(--space-2) 0 0; font-size: var(--fs-sm); }
.lbj-bank__phones { font-size: var(--fs-md); margin-top: var(--space-3); }

/* 06–09 QA — Tukar Tambah, Tentang & Kontak, legal (Privasi/Syarat) */
.lbj-trade__hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-6); padding: var(--space-8);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff; border-radius: 16px; margin: var(--space-6) 0 var(--space-4);
}
.lbj-trade__hero h2 { color: #fff; margin: 0 0 var(--space-2); }
.lbj-trade__hero p { color: #dbeafe; margin: 0; max-width: 36rem; }
.lbj-trade { display: grid; gap: var(--space-4); max-width: 40rem; margin: var(--space-6) 0; }
.lbj-trade label { font-weight: 600; display: block; margin-bottom: var(--space-1); }
.lbj-trade label span { color: var(--color-danger); }
.lbj-trade input,
.lbj-trade select,
.lbj-trade textarea {
  width: 100%; padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text);
}
.lbj-trade__error { color: var(--color-danger); font-weight: 600; font-size: var(--fs-sm); margin: 0; }
.lbj-trade__hint { font-size: var(--fs-xs); margin-top: 0; }

.lbj-tk__story h2 { margin-top: 0; }
.lbj-tk__story p { color: var(--color-text-muted); }
.lbj-tk__story .lbj-tk__legal { color: var(--color-text); font-weight: 700; margin-bottom: 0; }

.lbj-doc { max-width: 52rem; }
.lbj-doc__head { margin-bottom: var(--space-6); }
.lbj-doc__head .lbj-page__title { margin-bottom: var(--space-1); }
.lbj-doc__list { display: grid; gap: var(--space-3); margin: var(--space-6) 0; }
.lbj-doc__item {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 14px; padding: var(--space-5) var(--space-6);
}
.lbj-doc__item h2 { margin: 0 0 var(--space-2); font-size: var(--fs-md); }
.lbj-doc__item p { margin: 0; color: var(--color-text-muted); }
.lbj-doc__list-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); color: var(--color-text-muted); }
.lbj-doc__list-ul li { padding-left: 1.25rem; position: relative; }
.lbj-doc__list-ul li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }

/* Revisi klien — kartu rating Google, grid unggulan, hero service */
.home-google__card {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 16px; box-shadow: var(--shadow-sm);
}
.home-google__logo { flex: 0 0 auto; display: grid; place-items: center; }
.home-google__main { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.home-google__rating { font-size: var(--fs-xl); font-weight: 800; }
.home-google__stars { color: #f59e0b; letter-spacing: 2px; font-size: var(--fs-md); }
.home-google__meta { color: var(--color-text-muted); font-size: var(--fs-sm); }
.home-google__cta { margin-left: auto; }
@media (max-width: 640px) {
  .home-google__card { justify-content: flex-start; }
  .home-google__cta { margin-left: 0; }
}

/* Unggulan: GRID WooCommerce 8 item, 2 kolom di semua lebar (blueprint). */
.home-featured .lbj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Hero halaman Service (revisi: CTA 'Service yuk' pindah dari home ke sini). */
.svc-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-6); padding: var(--space-8);
  margin: var(--space-6) 0 var(--space-8);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff; border-radius: 16px;
}
.svc-hero h2 { color: #fff; margin: 0 0 var(--space-2); }
.svc-hero p { color: #dbeafe; margin: 0; max-width: 34rem; }
.svc-hero .text-muted { color: #dbeafe; }

/* Grid produk — base wajib (shop.css hanya dimuat di katalog; home juga
 * pakai .lbj-grid utk Produk Unggulan & pencarian). */
.lbj-grid {
  list-style: none; margin: 0 0 var(--space-6); padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-card);
}
.lbj-grid__item { min-width: 0; display: flex; }
.lbj-grid__item .product-card { width: 100%; height: 100%; }
.lbj-grid__item .product-card__placeholder { display: block; }

/* Mobile: nominal harga jangan terpotong di kartu kecil (wrap + ukuran pas). */
.product-card__price { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .product-card__price { font-size: var(--fs-sm); }
  .product-card__price del { font-size: var(--fs-xs); }
}

/* -------------------------------------------------------------------------
 * Hero — slider FOTO produk (teks, tombol & trust tetap; hanya foto berotasi).
 * Teks & CTA pakai layout .home-hero__inner lama; bagian ini hanya visual.
 * ---------------------------------------------------------------------- */
.home-hero__visual[data-hero-slider] { position: relative; }
.home-hero__visual[data-hero-slider] .home-hero__frame {
  display: block;
  padding: 0;
  aspect-ratio: auto;
  height: auto;
  background: transparent;
  border: 0;
}
.hero-photo__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  height: auto;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-photo__slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: auto;
}
.hero-photo__slide a { display: block; height: auto; }
.hero-photo__slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  object-fit: contain;
  background: transparent;
}
/* Chip trust tetap di atas foto. */
.home-hero__visual .home-hero__chip { z-index: 4; }

/* Kontrol slider kecil, melayang di dalam frame foto. */
.hero-photo__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  z-index: 5;
  pointer-events: none;
}
.hero-photo__controls > * { pointer-events: auto; }
.hero-photo__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(10, 58, 110, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.15s ease;
}
.hero-photo__arrow:hover { background: var(--color-primary); }
.hero-photo__dots { display: flex; gap: 6px; }
.hero-photo__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.2s ease;
}
.hero-photo__dot.is-active { background: #fff; }
@media (max-width: 1249px) {
  .hero-photo__arrow { display: none; }
}

/* CTA ganda bawah (#10): tumpuk di mobile, sejajar di layar lebar. */
.home-tradein__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.home-tradein__actions .btn--ghost {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* Hover: berubah hijau (WA). */
.home-tradein__actions .btn--ghost:hover {
  background: var(--color-whatsapp);
  border-color: var(--color-whatsapp);
  color: #fff;
}
.home-tradein__inner { align-items: center; }

/* Hero: tombol sekunder ghost harus terlihat di atas gradien biru. */
.home-hero .home-hero__actions .btn--ghost {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.85);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* Hover: berubah hijau (WA), sama seperti CTA Konsultasi di #10. */
.home-hero .home-hero__actions .btn--ghost:hover {
  background: var(--color-whatsapp);
  border-color: var(--color-whatsapp);
  color: #fff;
}

/* Testimoni Google live menyatu di section rating (#2). */
.home-google__reviews { margin-top: var(--space-6); }
.home-google__reviews > pre.ti-widget,
.home-google__reviews .ti-widget { margin: 0; }
/* Sisakan ruang estimasi: widget diaktifkan belakangan — kurangi CLS. */
.home-google__reviews { min-height: 340px; }
/* Neutralkan margin yang ditulis loader sesudah paint (sumber CLS). */
.home-google__reviews .ti-footer,
.home-google__reviews .ti-footer.source-Google { margin-top: 0 !important; }
.home-google__reviews.is-loading {
  display: grid;
  place-items: center;
  background: var(--color-bg-soft);
  border: 1px dashed var(--color-border);
  border-radius: 14px;
}
.home-testi__hint { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* =========================================================================
 * Compact sizing + rhythm latar section (feedback klien, fase 1 homepage)
 * ========================================================================= */

/* Banding latar selang-seling (full-bleed; konten memakai .lbj-container). */
.band--soft { background: var(--color-band); }

/* Spasi antar section dikecilkan. */
.home-section { padding-block: 2.25rem; }
@media (min-width: 900px) {
  .home-section { padding-block: 3rem; }
}

/* 4 Alasan: netral — banding ditentukan di level chapter (v1.6.0). */
.home-reason { margin-top: var(--space-6); gap: var(--space-3); }
.home-trust__cta { margin-top: var(--space-6); }

/* Baris produk: kartu lebih kecil (foto & teks menyusut). */
.l-row { padding-block: var(--space-8); }
.l-row__item { flex: 0 0 min(248px, 74vw); }
@media (min-width: 1100px) {
  .l-row__item { flex-basis: 248px; }
}

/* Kategori cepat lebih kompak. */
.cat-tiles { gap: var(--space-2); }
.cat-tile { padding: var(--space-3) var(--space-3); }
.cat-tile__name { font-size: var(--fs-sm); }

/* Keseragaman gap ringan antar modul band. */
.home-google__reviews { margin-top: var(--space-5); }

/* Mobile home rows: 2 kartu laptop muat dalam satu layar. */
@media (max-width: 640px) {
  .l-row__item { flex: 0 0 calc((100% - var(--gap-card)) / 2); }
  .l-row__track { scroll-snap-type: x proximity; }
}

/* =========================================================================
 * Tekstur kedua — teks sedikit lebih kecil + napas antar section (home)
 * ========================================================================= */
.home-hero__eyebrow { font-size: var(--fs-sm); }
.home-hero__title { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.12; }
.home-hero__sub { font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-width: 36rem; }
.home-hero__trust li { font-size: 1rem; }

.section-title { font-size: 1.35rem; }
.home-section__link { font-size: 0.875rem; }

/* Kartu & kategori lebih ramping secara teks. */
.product-card__title { font-size: 0.95rem; }
.product-card__price { font-size: 0.95rem; }
.product-card__meta { font-size: 0.72rem; }
.product-card__actions .btn { font-size: 0.8125rem; }
.cat-tile__name { font-size: 0.8125rem; }
.cat-tile__meta { font-size: 0.7rem; }

/* Napas vertikal ekstra di titik yang diminta. */
.home-hero__inner { padding-block: var(--space-12) var(--space-8); }
.home-tradein { padding-top: 2.5rem; }

/* =========================================================================
 * v1.6.0 — Chapter system: satu banding + satu ritme per pasangan section.
 * Satu sumber jarak (--section-gap antar chapter, --block-gap antar blok).
 * ========================================================================= */

/* Blok di dalam chapter tidak lagi punya padding sendiri (dineutralkan dulu,
 * lalu chapter hero mengembalikan padding khusus untuk bagian testimoninya). */
.home-chapter .home-section,
.home-chapter .home-steps,
.home-chapter .home-google,
.home-chapter .home-finder,
.home-chapter .home-trust,
.home-chapter .l-row,
.home-chapter .home-tradein { padding-block: 0; }

.home-chapter {
	display: grid;
	gap: var(--block-gap);
	padding-block: var(--section-gap);
	background: var(--color-bg);
}
.home-chapter--soft { background: var(--color-band); }

/* Grid child tidak boleh mendorong lebar (cegah overflow di mobile). */
.home-chapter > * { min-width: 0; }

/* Chapter 1: hero (dark, full-bleed) tanpa jarak. */
.home-chapter--hero { padding-block: 0; gap: 0; }

/* 4 Alasan: normal transparan; versi highlight diberi warna sendiri. */
.home-chapter .home-trust:not(.home-highlight) { background: transparent; }

/* Chapter 2: Kata Mereka + Finder + Kategori Cepat — satu background section.
 * Warna dibedakan dari chapter lain (biru muda, bukan abu --color-band).
 * Jarak antar sub-section 64px (--space-16); heading→konten 24px.
 * Cukup satu layar di desktop (konten di-center). */
.home-chapter--community { background: #e9f1fb; padding-block: var(--space-12); }
/* Antar sub-section (Kata Mereka → Finder → Kategori) = 48px (lebih rapat). */
.home-chapter--community > .lbj-container { display: grid; gap: var(--space-12); }
@media (min-width: 1024px) and (min-height: 720px) {
  .home-chapter--community { min-height: calc(100svh - var(--header-h)); align-content: center; }
}
.home-chapter--community .home-finder__card {
  margin: 0;
  background: linear-gradient(120deg, #dbeafe, #ffffff);
  /* Aksen: border lebih tebal, bentuk tetap ikut sistem kartu. */
  border: 2px solid var(--color-primary);
}
/* Jarak antar blok konsisten: heading sudah punya margin-bottom, jadi widget
 * review tak perlu margin atas tambahan. */
.home-chapter--community .home-google__reviews { margin-top: 0; min-height: 300px; }
/* Kartu Kategori Cepat disamakan dengan nuansa biru banner Finder. */
.home-chapter--community .cat-tile {
  background: linear-gradient(120deg, #eaf2ff, #ffffff);
  border-color: #cfe0f5;
}

/* Sistem kartu home: radius/border/shadow seragam (termasuk kartu Trustindex). */
.home-chapter .cat-tile,
.home-chapter .home-finder__card,
.home-chapter .home-testi__card,
.home-chapter .card,
.home-google__reviews .ti-widget .ti-inner {
  border-radius: var(--card-radius);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
}
.home-google__reviews .ti-widget .ti-inner { background: var(--color-bg); }
/* Finder tetap dibedakan: aksen border lebih tebal (bentuk ikut sistem kartu). */
.home-chapter--community .home-finder__card { border: 2px solid var(--color-primary); }

/* Section highlight (Cara Beli Gampang & 4 Alasan) — background penuh, bukan card. */
.home-highlight {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
}
.home-chapter .home-highlight { padding-block: var(--space-12); }
.home-highlight .section-title { color: #fff; }
.home-highlight .home-section__link { color: #dbeafe; }
/* Kartu di dalam highlight tetap putih → teksnya harus gelap agar terbaca,
 * bentuknya ikut sistem kartu. */
.home-highlight .lbj-3step li,
.home-highlight .home-reason__item {
  color: var(--color-text);
  border-radius: var(--card-radius);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
}
.home-highlight .lbj-3step li strong,
.home-highlight .home-reason__item h3 { color: var(--color-text); }

/* Highlight jadi anak terakhir chapter: rapatkan ke tepi bawah agar tak ada
 * strip warna chapter yang tersisa di bawah banner (dead section). */
.home-chapter:has(> .home-highlight:last-child) { padding-bottom: 0; }

/* Mobile: jarak antar chapter lebih rapat agar tiap blok muat di layar. */
@media (max-width: 639px) {
	:root {
		--section-gap: clamp(1.75rem, 5vh, 2.5rem);
		--block-gap: var(--space-6);
	}
	/* Finder: tumpuk rapi (ikon + teks di tengah, tombol full-width). */
	.home-finder__card {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-3);
	}
	.home-finder__txt { min-width: 0; text-align: center; }
	.home-finder__txt strong { display: block; }
	.home-finder__card .btn { width: 100%; justify-content: center; }
}

/* =========================================================================
 * v1.6.2 — Flow stepper (alur beli & klaim): vertikal mobile, horizontal desktop
 * ========================================================================= */
.lbj-flow {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: grid;
	gap: var(--gap-card);
	counter-reset: lbjflow;
}
.lbj-flow__step {
	counter-increment: lbjflow;
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-4);
	align-items: start;
}
.lbj-flow__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-weight: 800;
	font-size: var(--fs-sm);
}
.lbj-flow__num::before { content: counter(lbjflow); }
/* Konektor vertikal (mobile). */
.lbj-flow__step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 44px;
	bottom: calc(var(--gap-card) * -1 - 2px);
	width: 2px;
	background: var(--color-border);
	z-index: 0;
}
.lbj-flow__body h3 { margin: 0 0 var(--space-1); font-size: var(--fs-md); }
.lbj-flow__body p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }

@media (min-width: 900px) {
	.lbj-flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lbj-flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.lbj-flow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.lbj-flow__step {
		grid-template-columns: 1fr;
		gap: var(--space-3);
		text-align: center;
		justify-items: center;
	}
	/* Konektor horizontal (desktop). */
	.lbj-flow__step:not(:last-child)::before {
		left: calc(50% + 26px);
		right: calc(-50% + 26px);
		top: 20px;
		bottom: auto;
		width: auto;
		height: 2px;
	}
}

/* =========================================================================
 * v1.6.4 — Banded content: section full-bleed dengan warna selang-seling.
 * ========================================================================= */
.lbj-band { padding-block: var(--section-gap); }
.lbj-band--soft { background: var(--color-band); }
/* Judul pertama di dalam band tidak perlu jarak atas ganda. */
.lbj-band .lbj-section-h:first-child { margin-top: 0; }
/* Jarak konsisten antar blok di dalam band (stelah list/panel). */
.lbj-band .lbj-flow + .lbj-panel,
.lbj-band .lbj-warranty + .lbj-panel { margin-top: var(--block-gap); }
.lbj-band .lbj-panel + .lbj-note { margin-top: var(--block-gap); }
.lbj-band .lbj-section-h + .lbj-table-wrap,
.lbj-band .lbj-section-h + .lbj-form { margin-top: var(--space-5); }

/* Home: chapter terakhir sudah soft — jangan ada celah putih sebelum footer. */
.home .site-footer { margin-top: 0; }

/* Banner promo hero (kanan). Muncul juga di mobile (di bawah teks hero). */
.home-promo-banner { display: block; }
.home-promo-banner a {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
	transition: transform 0.25s ease;
}
.home-promo-banner a:hover { transform: translateY(-2px); }
.home-promo-banner img { width: 100%; height: auto; display: block; }

/* Ringkasan cepat (Cara Beli): 3 kartu fakta. */
.lbj-quickfacts {
	list-style: none;
	margin: var(--space-5) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap-card);
}
.lbj-quickfacts li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: var(--space-3) var(--space-4);
	font-weight: 600;
	font-size: var(--fs-sm);
}
.lbj-quickfacts svg { flex: 0 0 auto; color: var(--color-primary); }
@media (min-width: 640px) { .lbj-quickfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Tentang & Kontak: tiap kolom split jadi stack berjarak konsisten. */
.lbj-page__grid--split > section { display: grid; gap: var(--block-gap); align-content: start; }
.lbj-page__content > .lbj-page__grid { margin-top: var(--block-gap); }