:root{
  --hijau:#2F4F43; --hijau-tua:#233D33; --kayu:#8A5A34; --kayu-muda:#EDE0D0; --krem:#E3C78F;
  --latar:#F3F4F1; --tinta:#1F2B27; --abu:#5B6862; --garis:#D9DED8;
  --bs-body-color:#1F2B27; --bs-body-bg:#F3F4F1;
  --bs-link-color:#2F4F43; --bs-link-color-rgb:47,79,67; --bs-link-hover-color:#8A5A34; --bs-link-hover-color-rgb:138,90,52;
  --bs-body-font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
h1,h2,h3,.judul{letter-spacing:-.01em;font-weight:700}
:focus-visible{outline:3px solid var(--krem);outline-offset:2px}
.btn-hijau{--bs-btn-color:#fff;--bs-btn-bg:#2F4F43;--bs-btn-border-color:#2F4F43;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#233D33;--bs-btn-hover-border-color:#233D33;--bs-btn-active-bg:#233D33;--bs-btn-active-color:#fff}
.btn-krem{--bs-btn-color:#1F2B27;--bs-btn-bg:#E3C78F;--bs-btn-border-color:#E3C78F;--bs-btn-hover-color:#1F2B27;--bs-btn-hover-bg:#D6B676;--bs-btn-hover-border-color:#D6B676;--bs-btn-active-bg:#D6B676}
.btn-garis-hijau{--bs-btn-color:#2F4F43;--bs-btn-border-color:#2F4F43;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#2F4F43;--bs-btn-hover-border-color:#2F4F43;--bs-btn-active-bg:#233D33;--bs-btn-active-color:#fff}
.btn-wa{--bs-btn-color:#fff;--bs-btn-bg:#1F8F4E;--bs-btn-border-color:#1F8F4E;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#17733E;--bs-btn-hover-border-color:#17733E;--bs-btn-active-bg:#17733E;--bs-btn-active-color:#fff}
.form-control:focus,.form-select:focus{border-color:var(--hijau);box-shadow:0 0 0 .2rem rgba(47,79,67,.2)}

/* header */
.kepala{background:#fff;border-bottom:1px solid var(--garis)}
.kepala .navbar-brand img{width:44px;height:44px;object-fit:contain}
.kepala .merek{line-height:1.15}
.kepala .merek strong{font-size:1.1rem}
.kepala .merek small{color:var(--abu);font-size:.8rem}
.kepala .nav-link{color:var(--tinta);font-weight:500}
.kepala .nav-link:hover{color:var(--kayu)}
.kepala .nav-link.active{color:var(--hijau);font-weight:700;box-shadow:inset 0 -3px 0 var(--krem)}

/* banner */
.banner{background:var(--hijau-tua);color:#fff}
.banner .carousel-item{min-height:460px}
.banner .gambar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner .lapis{position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,40,33,.92) 0%,rgba(23,40,33,.75) 45%,rgba(23,40,33,.15) 100%)}
.banner .isi{position:relative;z-index:2;min-height:460px;display:flex;flex-direction:column;justify-content:center;padding-top:3rem;padding-bottom:3rem}
.banner h1,.banner h2{font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.1;max-width:15ch}
.banner p{color:#DCE6E0;font-size:1.1rem;max-width:46ch}
.banner .carousel-indicators{justify-content:flex-start;margin-left:max(1rem,calc((100vw - 1296px)/2 + .75rem));margin-bottom:1.5rem}
.banner .carousel-indicators [data-bs-target]{width:28px;height:6px;border-radius:99px;background:var(--krem)}
.banner .carousel-control-prev,.banner .carousel-control-next{width:6%}
.tanpa-banner{background:var(--hijau-tua);color:#fff;padding:4.5rem 0}

/* kategori */
.ubin-kategori{display:flex;flex-direction:column;background:#fff;border:1px solid var(--garis);border-bottom:4px solid var(--kayu);border-radius:8px;padding:1rem 1.15rem;text-decoration:none;color:var(--tinta);height:100%}
.ubin-kategori:hover{border-color:var(--kayu);color:var(--tinta)}
.ubin-kategori.aktif{background:var(--hijau);color:#fff;border-color:var(--hijau)}
.ubin-kategori small{color:var(--abu)} .ubin-kategori.aktif small{color:#D2DED7}

/* kartu produk dengan label harga hang-tag */
.kartu-produk{background:#fff;border:1px solid var(--garis);border-radius:8px;overflow:hidden;height:100%;display:flex;flex-direction:column;transition:box-shadow .2s}
.kartu-produk:hover{box-shadow:0 6px 18px rgba(31,43,39,.12)}
.kartu-produk .foto{display:block;aspect-ratio:4/3;background:var(--kayu-muda);overflow:hidden}
.kartu-produk .foto img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.kartu-produk:hover .foto img{transform:scale(1.03)}
.kartu-produk .badan{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.2rem;flex:1}
.kartu-produk .kat{color:var(--kayu);font-size:.82rem;font-weight:600}
.kartu-produk h3{font-size:1.08rem;margin:0}
.kartu-produk h3 a{color:var(--tinta);text-decoration:none}
.kartu-produk h3 a::after{content:"";position:absolute;inset:0}
.kartu-produk{position:relative}
.kartu-produk .bahan{color:var(--abu);font-size:.9rem;flex:1;margin-bottom:.75rem}
.label-harga{align-self:flex-start;background:var(--kayu-muda);font-weight:700;padding:.3rem .9rem .3rem 1.45rem;position:relative;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%)}
.label-harga::before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff}
.label-harga small{font-weight:400;font-size:.75rem;color:var(--abu)}
.lencana-unggulan{position:absolute;top:.6rem;left:.6rem;z-index:2;background:var(--krem);color:var(--tinta);font-size:.75rem;font-weight:700;padding:.15rem .55rem;border-radius:99px}

/* langkah */
.langkah{background:#fff;border:1px solid var(--garis);border-radius:8px;padding:1.25rem;height:100%}
.langkah .nomor{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--hijau);color:#fff;display:grid;place-items:center;font-weight:700;margin-bottom:.75rem}

/* testimoni dan mitra */
.testimoni{background:var(--latar);border-radius:10px;padding:1.6rem;height:100%;display:flex;flex-direction:column;gap:1rem;margin:0}
.testimoni blockquote{margin:0;font-size:1.05rem}
.testimoni .bintang{color:#B98A2F}
.testimoni .avatar{width:44px;height:44px;border-radius:50%;background:var(--hijau);color:#fff;display:grid;place-items:center;font-weight:700;flex:none;overflow:hidden}
.testimoni .avatar img{width:100%;height:100%;object-fit:contain;background:#fff}
.logo-mitra{height:96px;background:#fff;border:1px solid var(--garis);border-radius:8px;display:grid;place-items:center;padding:.75rem}
.logo-mitra img{max-height:64px;max-width:100%;object-fit:contain}

/* detail produk */
.galeri-utama{aspect-ratio:4/3;background:#fff;border:1px solid var(--garis);border-radius:8px;overflow:hidden;cursor:zoom-in}
.galeri-utama img{width:100%;height:100%;object-fit:cover}
.galeri-kecil button{border:2px solid transparent;border-radius:6px;padding:0;overflow:hidden;background:none}
.galeri-kecil button[aria-pressed="true"]{border-color:var(--kayu)}
.galeri-kecil img{width:84px;height:63px;object-fit:cover;display:block}
.spesifikasi dt{color:var(--abu);font-weight:400}
.spesifikasi>div{display:grid;grid-template-columns:150px 1fr;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--garis)}
.spesifikasi dd{margin:0;font-weight:500}
.harga-besar{font-size:1.9rem;font-weight:700;color:var(--kayu)}

/* umum */
.bagian{padding-top:3.5rem;padding-bottom:3.5rem}
.bagian-putih{background:#fff;border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.subjudul{color:var(--abu)}
.kotak{background:#fff;border:1px solid var(--garis);border-radius:8px}
.remah{font-size:.9rem;--bs-breadcrumb-divider-color:var(--abu)}
.pagination{--bs-pagination-active-bg:#2F4F43;--bs-pagination-active-border-color:#2F4F43;--bs-pagination-color:#2F4F43}

/* footer */
.kaki{background:var(--hijau-tua);color:#CFDBD4}
.kaki a{color:#fff}
.kaki h2{font-size:1rem;color:#fff}
.kaki .hak{border-top:1px solid #3B5A4D}

/* ikon whatsapp melayang */
.wa-melayang{position:fixed;bottom:1.25rem;z-index:1030;width:60px;height:60px;border-radius:50%;background:#1F8F4E;color:#fff;display:grid;place-items:center;font-size:1.8rem;box-shadow:0 6px 18px rgba(0,0,0,.25);text-decoration:none}
.wa-melayang:hover{background:#17733E;color:#fff}
.wa-melayang.kanan{right:1.25rem} .wa-melayang.kiri{left:1.25rem}

@media (max-width:767.98px){
  .banner .carousel-item,.banner .isi{min-height:420px}
  .banner .lapis{background:linear-gradient(180deg,rgba(23,40,33,.55) 0%,rgba(23,40,33,.9) 60%)}
  .banner .isi{justify-content:flex-end;padding-bottom:3.5rem;padding-left:1.25rem;padding-right:1.25rem}
  .spesifikasi>div{grid-template-columns:120px 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}