/*
 * 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;
}
.home-hero__inner {
	display: grid;
	gap: var(--space-8);
	padding-block: var(--space-16) var(--space-12);
}
.home-hero__eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--text-on-dark-muted);
	margin: 0 0 var(--space-4);
}
.home-hero__title {
	color: #fff;
	font-size: var(--text-hero);
	max-width: 38rem;
	margin-bottom: var(--space-6);
}
.home-hero__sub { color: var(--text-on-dark-muted); max-width: 34rem; margin: 0 0 var(--space-8); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.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: var(--text-on-dark-muted); font-size: var(--fs-sm); }

@media (min-width: 900px) {
	.home-hero__inner { grid-template-columns: 1.4fr 1fr; align-items: center; gap: var(--space-12); }
}

/* Sewa Laptop band (lini kedua) — kartu graphite, aksen emerald. */
.home-sewa { padding-block: var(--space-10); }
.home-sewa__card {
	display: grid;
	gap: var(--space-6);
	padding: var(--space-8);
	border-radius: var(--radius);
	background: var(--color-bg-dark);
	color: #fff;
}
.home-sewa__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-marigold);
	margin: 0 0 var(--space-3);
}
.home-sewa__card .section-title { color: #fff; }
.home-sewa__card .text-muted { color: var(--text-on-dark-muted); }
.home-sewa__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 900px) {
	.home-sewa__card { grid-template-columns: 1.6fr 1fr; align-items: center; }
	.home-sewa__actions { justify-content: flex-end; }
}

/* Halaman Sewa (/sewa/). */
.lbj-sewa-page .sewa-hero { padding-block: var(--space-10) var(--space-8); }
.sewa-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-primary);
	margin: 0 0 var(--space-3);
}
.sewa-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.lbj-sewa-page .products.lbj-grid { margin-block: var(--space-8); }
.sewa-steps { padding-block: var(--space-10); border-top: 1px solid var(--color-border); }
.lbj-empty {
	display: grid;
	gap: var(--space-3);
	justify-items: start;
	padding: var(--space-8);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg-soft);
	margin-block: var(--space-8);
}

/* -------------------------------------------------------------------------
 * 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: var(--text-tertiary); }

@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(--space-8);
	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: var(--text-h2); max-width: 40rem; }
.lbj-solution__intro { color: var(--text-on-dark-muted); 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: var(--text-on-dark-muted); }

/* Visual kanan: frame berisi gambar produk atau placeholder. */
.home-hero__visual { display: none; }
.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: var(--text-on-dark-muted); 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: hsla(225, 45%, 16%, 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: hsla(225, 45%, 16%, 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); }
}
@media (min-width: 1000px) {
  .home-hero__inner { grid-template-columns: 1.3fr 0.9fr; }
  .home-hero__visual { display: block; }
}

/* -------------------------------------------------------------------------
 * 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: hsla(225, 45%, 16%, 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: var(--radius);
  padding: var(--space-6);
  gap: var(--space-3);
}
.sol-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  box-shadow: var(--elev-3);
}
.sol-card__name { font-size: var(--fs-md); }
.sol-card__meta { color: var(--text-tertiary); }
.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: calc(var(--space-4) * -1); }
.l-row__track {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-4) 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: var(--radius); 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 hsla(225, 45%, 16%, .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: hsla(150, 40%, 30%, 0.12);
  color: var(--color-whatsapp);
  border: 1px solid hsla(150, 40%, 30%, 0.6);
}
.home-hero__secondary:hover { background: hsla(150, 40%, 30%, 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: var(--radius);
  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: var(--radius);
}
.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: var(--text-hero); letter-spacing: -0.02em; }
.home-hero__frame { box-shadow: var(--elev-5); }
.home-hero:hover .home-hero__frame { transform: rotate(0deg); }

/* Jarak antar section lebih lega di desktop (hindari kesan padat). */
.lbj-page__title { font-size: var(--text-h2); }
@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: var(--radius); 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 { max-width: 52rem; }
.lbj-prose-block { margin-top: var(--space-10); }
.lbj-check-list { list-style: none; padding: 0; margin: var(--space-5) 0; display: grid; gap: var(--space-3); }
.lbj-check-list li { position: relative; padding-left: 1.9rem; }
.lbj-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-primary);
	font-weight: 700;
}
.sewa-cta { padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
.lbj-section-h { font-size: var(--fs-lg); margin-top: var(--space-12); 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: var(--marigold-800); 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: var(--radius); }
.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: var(--radius);
  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: var(--radius); 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: var(--radius); }
.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: var(--radius); }
.home-tradein .section-title { color: #fff; }
.home-tradein .text-muted { color: var(--text-on-dark-muted); }

/* 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: var(--radius); }
.home-promo__inner--servis { background: linear-gradient(135deg, #fff1dd, #fffaf0); border: 1px solid #fed7aa; }
.home-promo__inner--servis .section-title { color: var(--color-marigold-ink); }
.home-promo__inner--servis .text-muted { color: var(--text-secondary); }
.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: var(--radius); 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__trust {
  list-style: none; margin: var(--space-8) 0 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: var(--radius);
}
.home-hero__trust li {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); text-align: center;
  color: #fff; font-weight: 600; font-size: var(--fs-sm);
  background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-sm);
}
.home-hero__trust li::before {
  content: "✓"; flex: 0 0 auto;
  display: grid; place-items: center;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--color-whatsapp); color: #fff;
  font-size: var(--text-xs); 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: var(--radius); 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: var(--radius) var(--radius) 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: var(--radius-sm);
  background: hsla(225, 45%, 16%, 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: var(--color-marigold-ink); }
.lbj-bank strong { color: var(--marigold-800); }
.lbj-ordered > li { margin-bottom: var(--space-3); }
.lbj-grid16 { margin-top: var(--space-4); }

/* Cara Beli & Garansi — beautify v1.5.25: kartu langkah, garansi, 16 titik, alur klaim */
.lbj-howto { list-style: none; counter-reset: beli; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.lbj-howto > li {
  counter-increment: beli;
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-4) var(--space-5);
}
.lbj-howto__num::before {
  content: counter(beli); display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  font-weight: 800; font-size: var(--fs-sm); margin-top: var(--space-1);
}
.lbj-howto__body h3 { margin: 0 0 var(--space-1); font-size: var(--fs-md); }
.lbj-howto__body p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.lbj-callout {
  background: #eef6ff; border: 1px solid #cfe3fb; color: var(--color-ink);
  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(--space-3); }
.lbj-warranty__card {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius);
  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: hsla(225, 45%, 16%, 0.08); color: var(--color-primary);
  border: 1px solid hsla(225, 45%, 16%, 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-2) var(--space-6); }
.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: var(--text-xs); font-weight: 800;
}
@media (min-width: 640px) { .lbj-check16 { grid-template-columns: repeat(2, 1fr); } }

.lbj-process { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.lbj-process > li {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-5);
}
.lbj-process__num {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-accent-dark); color: #fff; font-weight: 800;
  font-size: var(--fs-sm); margin-bottom: var(--space-3);
}
.lbj-process h3 { margin: 0 0 var(--space-1); font-size: var(--fs-md); }
.lbj-process p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
@media (min-width: 720px) { .lbj-process { 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: var(--radius); 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: var(--text-on-dark-muted); 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: var(--radius); 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: var(--radius); 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: var(--color-marigold); 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: var(--radius);
}
.svc-hero h2 { color: #fff; margin: 0 0 var(--space-2); }
.svc-hero p { color: var(--text-on-dark-muted); margin: 0; max-width: 34rem; }
.svc-hero .text-muted { color: var(--text-on-dark-muted); }

/* 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;
}
.hero-photo__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-photo__slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
}
.hero-photo__slide a { display: flex; height: 100%; }
.hero-photo__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.92);
}
/* 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: var(--radius);
}
.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); }

/* Hero: lebih ramping + foto tak dominan. */
.home-hero__inner { padding-block: var(--space-12) var(--space-10); }
.home-hero__title { font-size: var(--text-hero); }
.home-hero__sub { max-width: 30rem; }
@media (min-width: 1000px) {
  .home-hero__inner { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-10); }
}

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

/* 4 Alasan: band lebih dalam supaya beda dari soft. */
.home-trust { background: #eef2f7; padding-block: 2.5rem; }
@media (min-width: 900px) {
  .home-trust { padding-block: 3rem; }
}
.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.
   Badge/pill produk disembunyikan di mobile (desktop tidak disentuh). */
@media (max-width: 640px) {
  .home-section.l-row .product-card__overlay { display: none; }
  .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(--text-xs); }
.home-hero__title { font-size: var(--text-hero); }
.home-hero__sub { font-size: var(--text-base); }
.home-hero__trust li { font-size: var(--text-sm); }

.section-title { font-size: var(--text-xl); }
.home-section__link { font-size: var(--text-sm); }

/* Kartu & kategori lebih ramping secara teks. */
.product-card__title { font-size: var(--text-base); }
.product-card__price { font-size: var(--text-base); }
.product-card__meta { font-size: var(--text-xs); }
.product-card__actions .btn { font-size: var(--text-sm); }
.cat-tile__name { font-size: var(--text-sm); }
.cat-tile__meta { font-size: var(--text-xs); }

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

/* =========================================================================
 * Fase 2 — ritme antar-section konsisten (masing sisi ~4vh → gap antar blok
 * ±8vh = 7–10% tinggi viewport)
 * ========================================================================= */
:root { --sec-pad: clamp(1.25rem, 4vh, 2.25rem); }
.home-hero__inner,
.home-section,
.home-trust,
.home-finder,
.l-row,
.home-tradein { padding-block: var(--sec-pad); }

/* =========================================================================
 * v3 "LAPAK JOGJA" — hero search-forward, rak, budget, kunjungi toko.
 * Blok ini sengaja di akhir untuk meng-override aturan v2 di atasnya.
 * Ref: REDESIGN-PLAN.md.
 * ========================================================================= */

/* ---- Hero: kertas terang (bukan gradient gelap) ---- */
.home-hero {
	background: var(--color-paper);
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
}
.home-hero__inner { display: grid; gap: var(--space-8); padding-block: var(--space-12) var(--space-10); }
.home-hero__eyebrow {
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-ink-soft);
	margin: 0 0 var(--space-3);
}
.home-hero__title {
	color: var(--color-ink);
	font-size: var(--text-hero);
	font-weight: 800;
	max-width: 32rem;
	margin-bottom: var(--space-4);
}
.home-hero__sub { color: var(--color-text-muted); max-width: 33rem; margin: 0 0 var(--space-6); }

.hero-search { display: flex; gap: var(--space-2); max-width: 34rem; margin-bottom: var(--space-5); }
.hero-search input {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--space-3) var(--space-4);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg);
}
.hero-search input:focus { border-color: var(--color-ink); outline: none; box-shadow: 0 0 0 3px hsla(225, 45%, 16%, 0.15); }

.hero-seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; margin-bottom: var(--space-6); }
.hero-seg__item { padding: var(--space-2) var(--space-5); border-radius: 999px; font-weight: 600; font-size: var(--fs-sm); color: var(--color-ink); }
.hero-seg__item:hover { text-decoration: none; background: var(--color-paper-soft); }
.hero-seg__item.is-active { background: var(--color-ink); color: #fff; }

.home-hero__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.home-hero__trust li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.home-hero__trust li::before { content: "✓"; color: var(--color-verified); font-weight: 800; }

/* ---- Hero shelf (slider) ---- */
.home-hero__visual { display: none; overflow: hidden; }
.home-hero__visual--empty {
	display: grid; place-items: center;
	min-height: 260px; border: 1px dashed var(--color-border);
	border-radius: var(--radius); color: var(--color-text-muted);
	background: var(--color-bg);
}
.hero-shelf { list-style: none; margin: 0; padding: 0; display: flex; transition: transform .5s ease; }
.hero-shelf__item { flex: 0 0 100%; position: relative; }
.hero-shelf__item > a { position: relative; display: block; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.hero-shelf__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-shelf__name { display: block; padding: var(--space-3) var(--space-4); font-family: var(--font-heading); font-weight: 700; color: var(--color-ink); }
.hero-shelf__controls { display: flex; gap: 6px; justify-content: center; margin-top: var(--space-3); }
.hero-shelf__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: var(--color-border); cursor: pointer; }
.hero-shelf__dot.is-active { background: var(--color-ink); width: 22px; }

/* ---- Label harga (signature) ---- */
.ptag {
	position: absolute; top: var(--space-3); right: var(--space-3);
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px var(--space-3) 4px var(--space-4);
	background: var(--color-marigold); color: var(--color-marigold-ink);
	border-radius: var(--radius-tag);
	font-size: var(--fs-xs); font-weight: 800;
	transform: rotate(3deg);
	box-shadow: var(--shadow-sm);
}
.ptag__hole { width: 7px; height: 7px; border-radius: 999px; background: var(--color-paper); box-shadow: inset 0 0 0 1.5px rgba(58, 42, 0, 0.35); }

@media (min-width: 1000px) {
	.home-hero__inner { grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: var(--space-12); }
	.home-hero__visual { display: block; }
}

/* ---- Cari cepat: budget + kategori ---- */
.quick-label { font-size: var(--fs-sm); font-weight: 700; color: var(--color-ink-soft); margin: var(--space-5) 0 var(--space-3); }
.budget-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.budget-chip {
	display: inline-block; padding: var(--space-3) var(--space-5);
	background: var(--color-bg); border: 1.5px solid var(--color-ink);
	border-radius: var(--radius-tag);
	font-weight: 700; color: var(--color-ink);
	font-variant-numeric: tabular-nums;
}
.budget-chip:hover { background: var(--color-ink); color: #fff; text-decoration: none; }
.quick-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.quick-chip { display: inline-flex; align-items: center; gap: 8px; padding: var(--space-2) var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-ink); font-size: var(--fs-sm); }
.quick-chip:hover { text-decoration: none; border-color: var(--color-ink); }
.quick-chip span { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---- Cek 16 titik: strip ledger ---- */
.cek-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.cek-strip li { display: flex; align-items: baseline; gap: var(--space-4); padding-top: var(--space-4); border-top: 2px solid var(--color-ink); }
.cek-strip__no { flex: 0 0 auto; font-family: var(--font-heading); font-weight: 800; font-size: var(--text-3xl); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.cek-strip__txt { color: var(--color-text-muted); font-size: var(--fs-sm); }
@media (min-width: 800px) { .cek-strip { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }

/* ---- Band Sewa: aksen hangat di atas ink ---- */
.home-sewa__eyebrow { color: var(--color-marigold); }
.home-sewa__rates { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.home-sewa__rates li { padding: 4px var(--space-4); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; font-size: var(--fs-xs); color: var(--text-on-dark-muted); }

/* ---- Tukar tambah: teks hangat di band ink ---- */
.home-tradein .text-muted { color: var(--text-on-dark-muted); }

/* ---- Kunjungi toko ---- */
.visit-shop__inner { display: grid; gap: var(--space-8); }
.visit-shop__facts { margin: var(--space-6) 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); }
.visit-shop__facts dt { font-weight: 700; color: var(--color-ink); }
.visit-shop__facts dd { margin: 0; color: var(--color-text); }
.visit-shop__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.visit-shop__map iframe { width: 100%; min-height: 300px; border: 1px solid var(--color-border); border-radius: var(--radius); }
@media (min-width: 900px) { .visit-shop__inner { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---- Kartu produk: harga jadi label (CSS-only, tanpa ubah PHP) ---- */
.product-card { border: 1px solid var(--color-border); }
.product-card:hover { border-color: var(--color-ink); }
.product-card__price {
	align-self: flex-start;
	padding: 3px var(--space-3);
	background: var(--color-marigold);
	color: var(--color-marigold-ink);
	border-radius: var(--radius-tag);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.product-card__price del { color: rgba(58, 42, 0, 0.6); }
.qc-stamp { color: var(--color-verified); border-color: var(--color-verified); }

/* =========================================================================
 * v4 "DUA LINI SETARA" — hero ganda, trust band, blok Jual & Sewa.
 * ========================================================================= */

/* ---- Hero dua lini ---- */
.home-hero--dual .home-hero__inner { display: block; }
.home-hero--dual .home-hero__title { max-width: 40rem; }
.home-hero__intro { max-width: 44rem; margin-bottom: var(--space-8); }

.lane-pick { display: grid; gap: var(--space-4); }
.lane-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-top: 4px solid var(--lane-accent, var(--color-ink));
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
.lane-card__title { font-size: var(--fs-lg); margin: 0; color: var(--color-ink); }
.lane-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lane-card__list li { position: relative; padding-left: 1.4rem; color: var(--color-text-muted); font-size: var(--fs-sm); }
.lane-card__list li::before { content: "✓"; position: absolute; left: 0; color: var(--lane-accent, var(--color-ink)); font-weight: 800; }
.lane-card__actions { margin-top: auto; display: grid; gap: var(--space-2); }
@media (min-width: 760px) {
	.lane-pick { grid-template-columns: 1fr 1fr; }
}

/* Tombol lini Sewa. */
.btn--rent { background: var(--color-rental); color: #fff; }
.btn--rent:hover { background: var(--color-rental-dark); color: #fff; }

/* ---- Trust band bersama ---- */
.trust-band { background: var(--color-ink); color: #fff; padding-block: var(--space-8); }
.trust-band__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.trust-band__list li { display: grid; gap: 4px; }
.trust-band__list strong { font-family: var(--font-heading); font-size: var(--fs-md); }
.trust-band__list span { color: rgba(255, 255, 255, 0.72); font-size: var(--fs-sm); }
@media (min-width: 760px) { .trust-band__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }

/* ---- Blok lini ---- */
.lane-block__head { margin-bottom: var(--space-6); }
.lane-block__head .lane-label { margin-bottom: var(--space-3); }
.lane-block__head .section-title { margin-bottom: var(--space-2); }
.lane-block__lede { max-width: 46rem; margin: 0; }
.band--rent { background: var(--color-lane-rent-soft); }

/* ---- Klien + use case (sewa) ---- */
.client-badges { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.client-badges li { padding: var(--space-2) var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-tag); font-weight: 700; color: var(--color-ink-soft); font-size: var(--fs-sm); }

.usecase-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.usecase-card { padding: var(--space-5); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); display: grid; gap: var(--space-1); }
.usecase-card strong { font-family: var(--font-heading); color: var(--color-ink); }
.usecase-card span { color: var(--color-text-muted); font-size: var(--fs-sm); }
@media (min-width: 760px) { .usecase-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Sewa: pricelist + FAQ ---- */
.sewa-info { display: grid; gap: var(--space-10); }
.sewa-info__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.sewa-info__more { margin-top: var(--space-4); }
@media (min-width: 900px) { .sewa-info { grid-template-columns: 1fr 1fr; align-items: start; } }

.pricelist { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); }
.pricelist th, .pricelist td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.pricelist thead th { font-family: var(--font-heading); color: var(--color-ink); border-bottom: 2px solid var(--color-rental); }
.pricelist tbody th { color: var(--color-ink); font-weight: 700; }

/* ---- Testimoni dua lini ---- */
.testi-lanes { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-4); }
.testi-lanes li { padding: var(--space-5); background: var(--color-bg); border: 1px solid var(--color-border); border-left: 4px solid var(--lane-accent, var(--color-ink)); border-radius: var(--radius); }
.testi-lanes p { margin: var(--space-2) 0 0; color: var(--color-text); }
@media (min-width: 760px) { .testi-lanes { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
 * v5 — Homepage B2C fokus jual + 1 CTA sewa.
 * ========================================================================= */

/* Hero: foto mini bertumpuk (statis) di sisi kanan. */
.hero-shelf--static { display: grid; gap: var(--space-3); }
.hero-shelf--static .hero-shelf__item {
	position: relative;
	display: block;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.home-hero__visual--empty {
	display: grid;
	place-items: center;
	min-height: 240px;
	border: 1px dashed var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg);
}
.home-hero__visual--empty svg { color: var(--color-border); }

/* Section band lembut. */
.home-section--soft { background: var(--color-paper-soft); }

/* Trust badges: ikon + teks. */
.trust-band__list li { grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: start; }
.trust-band__list li > svg { grid-row: span 2; color: var(--color-marigold); margin-top: 2px; }

/* CTA Sewa ringkas di homepage. */
.home-sewa-cta { padding-block: var(--space-10); }
.sewa-cta {
	display: grid;
	gap: var(--space-5);
	align-items: center;
	padding: var(--space-6);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-left: 5px solid var(--color-rental);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
.sewa-cta__visual {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: var(--radius);
	background: var(--color-lane-rent-soft);
	color: var(--color-rental);
}
.sewa-cta__title { font-size: var(--fs-xl); margin: var(--space-2) 0 var(--space-1); }
.sewa-cta__sub { color: var(--color-text-muted); margin: 0; }
.sewa-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 820px) {
	.sewa-cta { grid-template-columns: auto 1fr auto; gap: var(--space-6); }
	.sewa-cta__actions { justify-content: flex-end; }
}

/* =========================================================================
 * v5 — Landing sewa (B2B).
 * ========================================================================= */
.sewa-hero__lede { max-width: 46rem; }
.sewa-clients, .sewa-usecase, .sewa-units, .sewa-pricelist, .sewa-faq { padding-block: var(--space-10); }
.sewa-clients { border-bottom: 1px solid var(--color-border); }

.client-badges--logos li { display: grid; place-items: center; min-height: 64px; }
.client-badges--logos img { max-height: 44px; width: auto; object-fit: contain; }
.client-badges__text { font-weight: 700; color: var(--color-ink-soft); }

.usecase-card__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-lane-rent-soft); color: var(--color-rental); margin-bottom: var(--space-2); }

.sewa-units .products { margin-top: var(--space-6); }

.sewa-faq .lbj-accordion { max-width: 52rem; }

.sewa-cta-final {
	margin-block: var(--space-12);
	padding: var(--space-8);
	background: var(--color-lane-rent-soft);
	border-left: 5px solid var(--color-rental);
	border-radius: var(--radius);
}
.sewa-cta-final .section-title { margin-bottom: var(--space-2); }
.sewa-cta-final .sewa-hero__actions { margin-top: var(--space-5); }

/* Landing sewa: samakan bahasa visual tombol primer di dalam halaman. */
.lbj-sewa-page .btn--ghost { border-color: var(--color-rental); color: var(--color-rental); }

/* =========================================================================
 * v5.1 — Hero slider (gaya gocomputer) di hero terang.
 * Bersihkan sisa styling hero gelap (rotasi + frame translucent).
 * ========================================================================= */
.home-hero__visual { display: none; }
@media (min-width: 760px) { .home-hero__visual { display: block; } }

.home-hero__visual[data-hero-slider] .home-hero__frame {
	display: block;
	padding: var(--space-4);
	aspect-ratio: 4 / 3;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	transform: none;
	overflow: hidden;
}
.home-hero:hover .home-hero__frame { transform: none; }

.hero-photo__track { height: 100%; }
.hero-photo__slide { height: 100%; }
.hero-photo__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--color-bg);
	border-radius: var(--radius-sm);
}

.hero-photo__arrow {
	background: var(--color-ink);
	border: 0;
	color: #fff;
	box-shadow: var(--shadow-sm);
}
.hero-photo__arrow:hover { background: var(--color-ink-soft); }
.hero-photo__dot {
	border: 1px solid var(--color-border);
	background: var(--color-border);
}
.hero-photo__dot.is-active { background: var(--color-ink); border-color: var(--color-ink); }

/* =========================================================================
 * v5.1 — Hero full slider + struktur section (2 warna: paper & paper-soft).
 * ========================================================================= */

/* ---- Hero full slider (gambar full-bleed + konten overlay statis) ---- */
.home-hero--full {
	position: relative;
	isolation: isolate;
	min-height: clamp(440px, 64vh, 660px);
	display: grid;
	align-items: center;
	overflow: hidden;
	background: var(--color-ink);
	color: #fff;
	border-bottom: 0;
}
.home-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg__track {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-bg__slide { flex: 0 0 100%; min-width: 100%; height: 100%; }
.hero-bg__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero--full::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(10, 14, 26, 0.5) 0%, rgba(10, 14, 26, 0.78) 100%);
}
.home-hero--full .home-hero__inner {
	position: relative;
	z-index: 2;
	display: block;
	padding-block: var(--space-16);
}
.home-hero--full .home-hero__content { max-width: 40rem; }
.home-hero--full .home-hero__eyebrow,
.home-hero--full .home-hero__title { color: #fff; }
.home-hero--full .home-hero__sub { color: var(--text-on-dark-muted); }
.home-hero--full .home-hero__trust li { color: var(--text-on-dark-muted); }
.home-hero--full .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.home-hero--full .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* Kontrol slider: panah terang di atas foto gelap. */
.home-hero--full .hero-photo__controls { bottom: var(--space-5); }
.home-hero--full .hero-photo__arrow {
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: #fff;
}
.home-hero--full .hero-photo__arrow:hover { background: var(--color-marigold); color: var(--color-marigold-ink); border-color: transparent; }
.home-hero--full .hero-photo__dot { border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.4); }
.home-hero--full .hero-photo__dot.is-active { background: var(--color-marigold); border-color: var(--color-marigold); }

/* ---- Claim & promise: band lembut (bukan ink) ---- */
.trust-band--soft { background: var(--color-paper-soft); color: var(--color-text); }
.trust-band--soft .trust-band__list strong { color: var(--color-ink); }
.trust-band--soft .trust-band__list span { color: var(--color-text-muted); }

/* ---- Tukar tambah: kartu terang (hindari band gelap; jaga 2 warna) ---- */
.home-tradein__inner {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-left: 5px solid var(--color-marigold);
	color: var(--color-text);
}
.home-tradein .section-title { color: var(--color-ink); }
.home-tradein .text-muted { color: var(--color-text-muted); }

/* ---- Ritme section konsisten (semua band pakai --sec-pad) ---- */
.home-section,
.trust-band,
.home-sewa-cta,
.l-row { padding-block: var(--sec-pad); }

/* ---- Mobile: scroller produk unggulan tampilkan 2 kartu ---- */
@media (max-width: 768px) {
	.l-row__item { flex: 0 0 calc((100% - var(--gap-card)) / 2); }
	.l-row__track { scroll-snap-type: x proximity; }
}

/* =========================================================================
 * v5.2 — Home: hierarki & detail (3 warna teks, aksen konsisten).
 * ========================================================================= */
.home-hero--full .home-hero__eyebrow { color: var(--color-marigold); font-weight: 700; }
.home-hero--full .home-hero__title { color: var(--text-on-dark); }
.home-hero--full .home-hero__trust li::before { color: var(--color-marigold); }

/* Label section: satu warna, satu ukuran; link pakai warna aksen. */
.home-section__link { color: var(--color-ink); font-weight: 600; }
.home-section__link:hover { color: var(--color-marigold-600); }

/* Kategori: border dekoratif pakai role; hover aksen, bukan border gelap. */
.cat-tile { border: var(--border-width) solid var(--border); background: var(--surface-raised); }
.cat-tile:hover { border-color: var(--color-marigold); }
.cat-tile__meta { color: var(--text-tertiary); }

/* Trust band lembut: ikon aksen, judul kuat, deskripsi sekunder. */
.trust-band--soft { background: var(--surface-sunken); }
.trust-band__list li > svg { color: var(--color-marigold-600); }

/* Rating fallback: kartu tenang. */
.home-google__box { background: var(--surface-raised); border: var(--border-width) solid var(--border); }
.home-google__stars { color: var(--color-marigold-600); }

/* Tukar tambah: satu aksi primer, aksen kiri marigold. */
.home-tradein__inner { border-left: 4px solid var(--color-marigold); }

/* Sewa CTA: aksen lini teal tetap, tapi tombol primer tetap marigold. */
.sewa-cta { border-left: 4px solid var(--color-rental); }

/* =========================================================================
 * v6 — "Editorial Rak": primitif layout baru (bukan card-kit seragam).
 * ========================================================================= */

/* ---- 01 Hero editorial (asimetris, kiri-bawah) ---- */
.home-hero--full { align-items: end; }
.home-hero--full::after { background: linear-gradient(180deg, hsla(225, 45%, 10%, .30) 0%, hsla(225, 45%, 10%, .82) 100%); }
.hero-editorial { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: start; gap: var(--space-5); padding-block: var(--space-16) var(--space-12); }
.hero-editorial__eyebrow { margin: 0; font-size: var(--text-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-marigold); }
.hero-editorial__title { margin: 0; max-width: 18ch; font-size: var(--text-hero); font-weight: 800; line-height: 1.02; color: var(--text-on-dark); }
.hero-editorial__sub { margin: 0; max-width: 54ch; font-size: var(--text-lg); line-height: 1.5; color: var(--text-on-dark-muted); }
.hero-editorial__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; width: 100%; }
.hero-editorial__search { flex: 1 1 320px; max-width: 26rem; display: flex; }
.hero-editorial__search input { width: 100%; padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-sm); background: var(--surface-raised); font-size: var(--text-base); }
.hero-editorial__strip { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); }
.hero-editorial__strip li { position: relative; padding-left: var(--space-5); font-size: var(--text-sm); color: var(--text-on-dark-muted); }
.hero-editorial__strip li::before { content: "—"; position: absolute; left: 0; color: var(--color-marigold); }
.home-hero--full .hero-photo__controls { justify-content: flex-end; right: var(--space-8); bottom: var(--space-6); }

/* ---- 02 Trust strip ---- */
.trust-strip { background: var(--surface-raised); border-bottom: var(--border-width) solid var(--border); }
.trust-strip__list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-block: var(--space-5); }
.trust-strip__list span { font-size: var(--text-sm); font-weight: 600; letter-spacing: .04em; color: var(--color-ink); }

/* ---- Label rail (pengganti judul + panah) ---- */
.rail { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.rail__label { font-size: var(--text-sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink); white-space: nowrap; }
.rail__rule { flex: 1 1 auto; height: 1px; background: var(--border); }
.rail__link { font-size: var(--text-sm); color: var(--text-tertiary); white-space: nowrap; }
.rail__link:hover { color: var(--color-ink); }

/* ---- 03 Picker + Shelf ---- */
.home-pick { padding-block: var(--sec-pad); }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.seg__chip { display: inline-flex; align-items: center; height: 40px; padding-inline: var(--space-5); border: var(--border-width) solid var(--border); border-radius: var(--radius-full); background: var(--surface-raised); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.seg__chip:hover { border-color: var(--color-ink); text-decoration: none; }
.seg__chip.is-active { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }

.shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.shelf__card { display: flex; flex-direction: column; gap: var(--space-3); }
.shelf__media { display: block; background: var(--surface-raised); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.shelf__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shelf__body { display: flex; flex-direction: column; gap: var(--space-1); }
.shelf__name { margin: 0; font-size: var(--text-lg); }
.shelf__name a { color: var(--text-primary); }
.shelf__spec { margin: 0; font-size: var(--text-sm); color: var(--text-tertiary); }
.price-tag { align-self: start; margin-top: var(--space-2); padding: 4px var(--space-3); background: var(--color-marigold); color: var(--color-marigold-ink); font-weight: 800; font-variant-numeric: tabular-nums; border-radius: var(--radius-tag); }
.price-tag del { opacity: .6; }
.lbj-empty-row { padding: var(--space-6); border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--text-tertiary); }
@media (min-width: 760px) {
  .shelf { grid-template-columns: repeat(3, 1fr); }
  .shelf__card--wide { grid-column: span 3; flex-direction: row; align-items: center; gap: var(--space-6); }
  .shelf__card--wide .shelf__media { flex: 0 0 46%; }
  .shelf__card--wide .shelf__media img { aspect-ratio: 16 / 10; }
}

/* ---- 04 Cara beli: timeline ---- */
.home-flow { padding-block: var(--sec-pad); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.timeline li { display: grid; gap: var(--space-1); padding-top: var(--space-4); border-top: var(--border-width-thick) solid var(--color-ink); }
.timeline__num { font-size: var(--text-sm); font-weight: 800; letter-spacing: .1em; color: var(--color-marigold-600); }
.timeline strong { font-size: var(--text-lg); color: var(--color-ink); }
.timeline li > span:last-child { font-size: var(--text-sm); color: var(--text-tertiary); }
@media (min-width: 760px) { .timeline { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }

/* ---- 05 Stok terbaru: index rows ---- */
.home-index { padding-block: var(--sec-pad); background: var(--surface-raised); }
.index-rows { list-style: none; margin: 0; padding: 0; }
.index-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: baseline; padding-block: var(--space-4); border-bottom: var(--border-width) solid var(--border); }
.index-row__name { font-weight: 600; font-size: var(--text-lg); color: var(--text-primary); }
.index-row__spec { font-size: var(--text-sm); color: var(--text-tertiary); }
.index-row__grade { font-size: var(--text-sm); color: var(--text-tertiary); }
.index-row__price { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.index-row__wa { font-size: var(--text-sm); font-weight: 700; color: var(--color-rental); }
@media (min-width: 760px) {
  .index-row { grid-template-columns: 2fr 2fr 1fr 1fr auto; }
  .index-row > * { min-width: 0; }
}

/* ---- 06 Tukar tambah: split ---- */
.trade-split { padding-block: var(--sec-pad); background: var(--surface-sunken); border-left: 4px solid var(--color-marigold); }
.trade-split__inner { display: grid; gap: var(--space-8); }
.trade-split__title { font-size: var(--text-h2); margin: var(--space-3) 0 var(--space-2); max-width: 24ch; }
.trade-split__right { display: flex; flex-direction: column; align-items: start; gap: var(--space-2); }
.trade-split__big { font-size: var(--text-5xl); font-weight: 800; line-height: 1; color: var(--color-marigold-600); }
.trade-split__caption { font-size: var(--text-sm); color: var(--text-tertiary); margin-bottom: var(--space-3); }
@media (min-width: 900px) { .trade-split__inner { grid-template-columns: 1.6fr 1fr; align-items: center; } }

/* ---- 07 Sewa band ---- */
.sewa-band { padding-block: var(--sec-pad); background: var(--color-ink); color: #fff; }
.sewa-band__label { display: block; font-size: var(--text-sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-rental); }
.sewa-band__title { margin: var(--space-3) 0 var(--space-2); max-width: 26ch; font-size: var(--text-h2); color: #fff; }
.sewa-band__sub { margin: 0 0 var(--space-5); max-width: 54ch; color: var(--text-on-dark-muted); }
.sewa-band__chips { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sewa-band__chips li { padding: var(--space-2) var(--space-4); border: 1px solid hsla(225, 30%, 62%, .5); border-radius: var(--radius-full); font-size: var(--text-sm); color: var(--text-on-dark-muted); }
.sewa-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.sewa-band__link { font-weight: 600; color: var(--color-rental); }

/* =========================================================================
 * v7 — "Highly-Converter": hero split + rating + why-safe + social proof.
 * ========================================================================= */

/* ---- 01 Hero split (teks kiri + promo/slider kanan) ---- */
.home-hero--split { background: var(--surface); color: var(--text-primary); border-bottom: var(--border-width) solid var(--border); }
.home-hero--split .home-hero__inner { display: grid; gap: var(--space-10); align-items: center; padding-block: var(--space-12); }
.home-hero--split .home-hero__visual { display: block; }

.home-hero--split .hero-editorial { gap: var(--space-4); }
.home-hero--split .hero-editorial__eyebrow { color: var(--text-tertiary); font-weight: 600; letter-spacing: 0; text-transform: none; }
.home-hero--split .hero-editorial__title { color: var(--color-ink); }
.home-hero--split .hero-editorial__sub { color: var(--text-secondary); }

/* Rating strip (social proof di atas lipatan). */
.rating-strip { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.rating-strip__stars { color: var(--color-marigold-600); letter-spacing: 1px; font-size: var(--text-lg); }
.rating-strip__value { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-ink); font-size: var(--text-lg); }
.rating-strip__meta { color: var(--text-tertiary); font-size: var(--text-sm); }
.rating-strip:hover { text-decoration: none; }

/* Promo banner (kanan hero, bisa di-klik). */
.home-promo-banner { border-radius: var(--radius); overflow: hidden; box-shadow: var(--elev-4); }
.home-promo-banner a { display: block; }
.home-promo-banner img { display: block; width: 100%; height: auto; }

@media (min-width: 900px) {
  .home-hero--split .home-hero__inner { grid-template-columns: 1.15fr 0.85fr; }
}

/* ---- 02 Social proof ---- */
.home-social { padding-block: var(--sec-pad); }
.home-social .home-google__box { background: var(--surface-raised); border: var(--border-width) solid var(--border); border-radius: var(--radius); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5); }
.home-google__stars { color: var(--color-marigold-600); }

/* ---- 04 Kenapa aman (satu blok compact, tanpa kartu) ---- */
.why-safe { padding-block: var(--sec-pad); }
.why-safe__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.why-safe__list li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: start; }
.why-safe__list li > svg { grid-row: span 2; color: var(--color-marigold-600); margin-top: 2px; }
.why-safe__list strong { font-size: var(--text-lg); color: var(--color-ink); }
.why-safe__list span { font-size: var(--text-sm); color: var(--text-tertiary); }
@media (min-width: 760px) { .why-safe__list { grid-template-columns: repeat(3, 1fr); } }

/* v7.3 — "Laptop Pilihan" jadi slider horizontal (semua kartu seragam). */
.shelf {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin: 0;
  padding: 0 0 var(--space-2);
  list-style: none;
  -webkit-overflow-scrolling: touch;
}
.shelf__card { flex: 0 0 280px; max-width: 280px; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-3); }
.shelf__card--wide { flex: 0 0 280px; max-width: 280px; flex-direction: column; align-items: stretch; gap: var(--space-3); }
.shelf__card--wide .shelf__media { flex: 0 0 auto; }
.shelf__card--wide .shelf__media img { aspect-ratio: 4 / 3; }
.shelf::-webkit-scrollbar { height: 8px; }
.shelf::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
.shelf::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 768px) {
  .shelf__card, .shelf__card--wide { flex: 0 0 calc((100% - var(--space-4)) / 2); max-width: none; }
}

/* v7.4 — Laptop Pilihan: pakai kartu katalog di dalam slider. */
.shelf { align-items: stretch; }
.shelf__card { display: flex; }
.shelf__card .product-card { width: 100%; height: 100%; }
.shelf__card .card { width: 100%; }

/* =========================================================================
 * v8 — Band-section: satu background per grup section.
 * ========================================================================= */
.hp-band--a { background: var(--surface); }
.hp-band--b { background: var(--surface-sunken); }

/* Hero menyatu dengan band: hilangkan garis bawah. */
.hp-band .home-hero--split { border-bottom: 0; }

/* Section di dalam band: tanpa background sendiri. */
.hp-band .home-social,
.hp-band .home-pick,
.hp-band .why-safe,
.hp-band .trade-split { background: transparent; }
.hp-band .trade-split { border-left: 0; }

/* Sewa jadi kartu gelap di dalam band (bukan band full-bleed). */
.home-sewa-wrap { padding-block: var(--sec-pad); }
.sewa-band {
	padding: var(--space-10);
	background: var(--color-ink);
	border-radius: var(--radius);
	color: #fff;
}

/* =========================================================================
 * v8.1 — Banded content + flow stepper + quickfacts (dari pola gocomputer).
 * ========================================================================= */
.lbj-bands { display: block; }
.lbj-band { padding-block: var(--sec-pad); }
.lbj-band--soft { background: var(--color-band); }
.lbj-band .lbj-section-h:first-child { margin-top: 0; }
.lbj-band .lbj-flow + .lbj-panel,
.lbj-band .lbj-warranty + .lbj-panel { margin-top: var(--space-8); }
.lbj-band .lbj-panel + .lbj-note { margin-top: var(--space-8); }
.lbj-band .lbj-section-h + .lbj-table-wrap,
.lbj-band .lbj-section-h + .lbj-form { margin-top: var(--space-5); }

/* Flow stepper: 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: var(--radius-full); background: var(--color-ink); color: #fff; font-weight: 800; font-size: var(--fs-sm); }
.lbj-flow__num::before { content: counter(lbjflow); }
.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(--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(--text-tertiary); 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; }
  .lbj-flow__step:not(:last-child)::before { left: calc(50% + 26px); right: calc(-50% + 26px); top: 20px; bottom: auto; width: auto; height: 2px; }
}

/* Ringkasan cepat: 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(--surface-raised); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); 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-marigold-600); }
@media (min-width: 640px) { .lbj-quickfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* v8.3 — Sewa: jarak antar blok di band. */
.lbj-quickfacts + .client-badges { margin-top: var(--space-8); }
.lbj-band .lbj-accordion + .lbj-panel { margin-top: var(--space-10); }

/* v8.4 — Sewa: panel CTA ditegaskan (kartu gelap + aksen teal + tombol marigold). */
.lbj-sewa-cta {
	background: var(--color-ink);
	color: #fff;
	border: 0;
	border-left: 4px solid var(--color-rental);
	border-radius: var(--radius);
	padding: var(--space-10);
}
.lbj-sewa-cta h3 { color: #fff; }
.lbj-sewa-cta .text-muted { color: var(--text-on-dark-muted); }
.lbj-sewa-cta .btn--ghost { color: #fff; border-color: hsla(0, 0%, 100%, .55); }
.lbj-sewa-cta .btn--ghost:hover { background: hsla(0, 0%, 100%, .12); color: #fff; }
.lbj-sewa-cta .sewa-hero__actions { margin-top: var(--space-5); }

/* v8.8 — Halaman banded: container tetap 68rem (selaras homepage),
   jangan diperkecil oleh --prose-page (52rem). */
.lbj-container.lbj-prose-page { max-width: var(--container); }

/* v8.13 — Sorot blok "Kenapa aman" & "Cara beli" (tint hangat, tetap senada). */
.why-safe > .lbj-container,
.home-flow > .lbj-container {
  background: var(--marigold-100);
  border-left: 4px solid var(--color-marigold);
  border-radius: var(--radius);
  padding: var(--space-8);
}

/* v8.13 — Home Sewa: label & link pakai aksen oranye (marigold). */
.sewa-band__label,
.sewa-band__link { color: var(--color-marigold); }

/* v8.14 — Tukar tambah: sorotan sama seperti Kenapa aman & Cara beli. */
.trade-split > .lbj-container {
  background: var(--marigold-100);
  border-left: 4px solid var(--color-marigold);
  border-radius: var(--radius);
  padding: var(--space-8);
}

/* v8.14 — Rapatkan hero agar hero + "Kata mereka" muat 1 layar. */
.home-hero--split .home-hero__inner { padding-block: var(--space-5) var(--space-6); }
.home-hero--split .home-hero__frame,
.home-hero--split .home-promo-banner img { max-height: 260px; }
.home-hero--split .hero-photo__slide img { max-height: 260px; object-fit: contain; }
.home-hero--split .hero-editorial { gap: var(--space-3); }
.home-hero--split .hero-editorial__title { font-size: clamp(1.9rem, 4vw, 2.5rem); }
.home-social { padding-block: var(--space-5); }
.home-social .home-google__reviews { min-height: 200px; }

/* =========================================================================
 * Hero kanan v2 (10 Okt 2026): panel "Cari sesuai budget" + strip foto unit
 * ready, menggantikan slider foto. Versi hero terang (krem). Jumlah unit
 * dibaca live dari WooCommerce.
 * ======================================================================== */
.hero-budget {
	overflow: visible;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 18px;
	padding: var(--space-6);
	box-shadow: 0 18px 40px rgba(22, 32, 58, 0.1);
}
.hero-budget__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}
.hero-budget__strip { display: flex; padding: 6px 0 0 6px; }
.hero-budget__photo {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 104px;
	height: 104px;
	border-radius: 12px;
	overflow: hidden;
	border: 3px solid #fff;
	background: #fff;
	box-shadow: 0 10px 22px rgba(22, 32, 58, 0.22);
	transition: transform 0.2s ease;
}
.hero-budget__photo + .hero-budget__photo { margin-left: -20px; }
.hero-budget__photo:nth-child(1) { transform: rotate(-6deg); }
.hero-budget__photo:nth-child(2) { transform: rotate(3deg) translateY(-6px); z-index: 2; }
.hero-budget__photo:nth-child(3) { transform: rotate(-2deg); }
.hero-budget__photo:hover { transform: rotate(0deg) translateY(-4px); z-index: 3; }
.hero-budget__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-budget__stock { margin: 0; text-align: right; color: var(--color-primary); }
.hero-budget__stock strong {
	display: block;
	font-family: var(--font-heading);
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1;
}
.hero-budget__stock span { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.3; }
.hero-budget__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--color-primary);
}
.hero-budget__tiers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}
.hero-budget__tier {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: 11px 13px;
	border-radius: 10px;
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.hero-budget__tier:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--color-accent); box-shadow: 0 8px 18px rgba(22, 32, 58, 0.12); }
.hero-budget__label { white-space: nowrap; }
.hero-budget__count {
	flex: 0 0 auto;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-primary);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 3px 9px;
	white-space: nowrap;
}
.hero-budget__tier.is-top { background: var(--color-accent); border-color: var(--color-accent); color: #3a2a00; }
.hero-budget__tier.is-top .hero-budget__count { background: rgba(255, 255, 255, 0.65); border-color: transparent; color: #3a2a00; }
.hero-budget__tier.is-empty { opacity: 0.6; }
@media (max-width: 899px) {
	.hero-budget { padding: var(--space-5); }
	.hero-budget__photo { width: 88px; height: 88px; }
	.hero-budget__tier { padding: 10px 11px; font-size: 0.9rem; }
	.hero-budget__count { padding: 3px 7px; }
}

/* =========================================================================
 * Cara Beli & Garansi — ilustrasi grafis per langkah/kartu (10 Okt 2026)
 * ======================================================================== */
.lbj-flow__art { display: block; margin: 0 0 var(--space-2); line-height: 0; }
.lbj-flow__art svg { width: 96px; height: auto; }
@media (min-width: 900px) {
	.lbj-flow__art { margin: var(--space-1) auto var(--space-3); }
	.lbj-flow__art svg { width: 120px; }
}
.lbj-warranty__art {
	display: grid;
	place-items: center;
	line-height: 0;
	margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
	padding: var(--space-4) 0 var(--space-2);
	background: linear-gradient(180deg, #fbf6ec, #ffffff);
	border-bottom: 1px solid var(--color-border);
	border-radius: var(--radius) var(--radius) 0 0;
}
.lbj-warranty__art svg { width: 132px; height: auto; }
.lbj-check16 > li.has-ic { display: flex; align-items: center; gap: var(--space-3); padding-left: 0; }
.lbj-check16 > li.has-ic::before { display: none; }
.lbj-check16__ic {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(22, 32, 58, 0.07);
	color: var(--color-primary);
}
@media (min-width: 900px) { .lbj-flow__step { align-content: start; } }

/* =========================================================================
 * Tukar Tambah — ilustrasi grafis (10 Okt 2026)
 * ======================================================================== */
.lbj-trade__art { flex: 0 0 auto; line-height: 0; }
.lbj-trade__art svg { display: block; width: 210px; height: auto; }
.lbj-trade__hero > div { flex: 1 1 20rem; }
@media (max-width: 639px) { .lbj-trade__art svg { width: 180px; } }
.lbj-trade__wrap { display: grid; gap: var(--space-6); margin: var(--space-6) 0; }
.lbj-trade__wrap > .lbj-trade { margin: 0; max-width: none; }
@media (min-width: 900px) { .lbj-trade__wrap { grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); align-items: start; } }
.lbj-trade__aside { background: #ffffff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-6); }
.lbj-trade__aside-art { display: grid; place-items: center; line-height: 0; margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5); padding: var(--space-5) 0 var(--space-3); background: linear-gradient(180deg, #fbf6ec, #ffffff); border-bottom: 1px solid var(--color-border); border-radius: var(--radius) var(--radius) 0 0; }
.lbj-trade__aside-art svg { width: 150px; height: auto; }
.lbj-trade__aside h3 { margin: 0 0 var(--space-3); font-size: var(--fs-md); }
.lbj-trade__shots { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); }
.lbj-trade__shots li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.lbj-trade__shots .lbj-check16__ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(22, 32, 58, 0.07); color: var(--color-primary); }
.lbj-trade__aside p { margin: 0; font-size: var(--fs-xs); }
.lbj-table th .lbj-table__ic { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: var(--space-2); border-radius: 8px; background: rgba(22, 32, 58, 0.07); color: var(--color-primary); vertical-align: middle; }
.lbj-table th .lbj-table__ic svg { width: 18px; height: 18px; }

/* =========================================================================
 * Home — ilustrasi grafis (11 Okt 2026)
 * ======================================================================== */
.why-safe__list li > .why-safe__art { grid-row: span 2; line-height: 0; align-self: center; }
.why-safe__art svg { width: 72px; height: auto; }
.timeline li.has-art { position: relative; padding-right: 96px; }
.timeline__art { position: absolute; right: 0; top: var(--space-3); line-height: 0; }
.timeline__art svg { width: 84px; height: auto; }
.trade-split__art { line-height: 0; margin-bottom: var(--space-2); }
.trade-split__art svg { width: 220px; height: auto; }

/* =========================================================================
 * Servis Laptop — ilustrasi grafis (11 Okt 2026)
 * ======================================================================== */
.svc-hero__art { flex: 0 0 auto; line-height: 0; }
.svc-hero__art svg { display: block; width: 210px; height: auto; }
.svc-hero > div { flex: 1 1 20rem; }
@media (max-width: 639px) { .svc-hero__art svg { width: 180px; } }
.svc-card.has-art { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--space-5); row-gap: var(--space-2); align-content: start; }
.svc-card.has-art .svc-card__art { grid-row: 1 / span 3; line-height: 0; }
.svc-card__art svg { width: 104px; height: auto; }
.svc-card.has-art .svc-card__num { position: absolute; top: var(--space-4); right: var(--space-5); }
.svc-card.has-art .svc-card__title { padding-right: 2.5rem; }
@media (max-width: 479px) { .svc-card.has-art { grid-template-columns: minmax(0, 1fr); } .svc-card.has-art .svc-card__art { grid-row: auto; } .svc-card__art svg { width: 96px; } }

/* =========================================================================
 * Tentang & Kontak — ilustrasi grafis (11 Okt 2026)
 * ======================================================================== */
.lbj-tk__story.has-art { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-8); align-items: center; }
.lbj-tk__story.has-art > * { grid-column: 1; }
.lbj-tk__story.has-art > :not(.lbj-tk__art) { margin-top: 0; margin-bottom: var(--space-3); }
.lbj-tk__story.has-art > :last-child { margin-bottom: 0; }
.lbj-tk__story.has-art > .lbj-tk__art { grid-column: 2; grid-row: 1 / span 6; line-height: 0; }
.lbj-tk__art svg { width: 230px; height: auto; }
@media (max-width: 799px) { .lbj-tk__story.has-art { display: flex; flex-direction: column; align-items: stretch; } .lbj-tk__story.has-art > .lbj-tk__art { order: -1; align-self: center; margin-bottom: var(--space-3); } .lbj-tk__art svg { width: 190px; } }
.lbj-tk__ic { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: var(--space-2); border-radius: 9px; vertical-align: -6px; line-height: 0; }
.lbj-tk__ic--pin { background: var(--color-primary); }
.lbj-tk__ic--wa { background: #25d366; }
.lbj-tk__ic--bank { background: #16203a; }
.lbj-tk__ic--ig { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); }
.lbj-tk__ic--star { background: #f0a62b; }

/* Kontak: jarak panel Cerita Kami ke grid di bawahnya — 11 Okt 2026 */
.lbj-page__content > .lbj-tk__story + .lbj-page__grid { margin-top: var(--block-gap, var(--space-8)); }