:root{
  --army-900:#1F3434;
  --army-800:#243E3F;
  --army-700:#2E4B4B;
  --army-600:#3A5D5D;
  --army-500:#4D7575;
  --army-400:#6B8F8F;
  --army-300:#9FBABA;
  --army-200:#CBDCDC;
  --army-100:#E2EBEB;
  --army-50:#F2F7F7;
  --accent-700:#699634;
  --accent-600:#78A943;
  --accent-100:#E8F0DD;

  --primary:var(--army-700);
  --primary-dark:var(--army-800);
  --primary-soft:var(--army-100);
  --primary-30:var(--army-400);
  --primary-50:var(--army-300);
  --ink:#122017;
  --muted:#4f5f55;
  --line:#d6e0d8;
  --card:#ffffff;
  --soft:#f7faf7;
  --sale-red:#dc2626;
  --wa:#25D366;
  --wa-dark:#1ebe5d;
}

html{scroll-behavior:smooth}
body{background:var(--army-50);color:var(--ink)}

.shadow-card{box-shadow:0 6px 18px rgba(15,23,42,.05)}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

.hero-pattern{
  background:
    radial-gradient(circle at top right, rgba(66,104,79,.2), transparent 36%),
    linear-gradient(180deg, #f3f7f4 0%, #eaf1ec 100%);
}

.hero-mobile{
  background:#ffffff;
  border-bottom:1px solid var(--line);
  padding-bottom:.35rem;
  margin-top:0;
}

.hero-mobile-copy{
  min-height:calc(84svh - 92px);
  display:flex;
  align-items:flex-start;
}

.hero-mobile-inner{
  width:100%;
  padding-top:0rem;
  padding-bottom:1.25rem;
}

.hero-mobile-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border:1px solid #b6c8bd;
  background:#e5eee8;
  color:var(--army-800);
  padding:.45rem .78rem;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.02em;
}

.hero-mobile-title{
  margin-top:.7rem;
  max-width:18.5rem;
  font-size:2.28rem;
  line-height:1.03;
  letter-spacing:-.035em;
  font-weight:900;
  color:#0f172a;
}

.hero-mobile-title .accent{
  color:#2E4B4B;
}

.hero-mobile-lead{
  margin-top:.82rem;
  max-width:20rem;
  font-size:.84rem;
  line-height:1.54;
  color:#3f4f47;
}

.hero-mobile-cta{
  margin-top:.88rem;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem;
}

.hero-mobile-cta .hero-action-btn{
  min-height:48px;
  border-radius:10px;
  font-size:.72rem;
  box-shadow:
    0 8px 18px rgba(15,23,42,.10),
    0 2px 4px rgba(15,23,42,.06);
}

.hero-mobile-proof{
  margin-top:.83rem;
  display:flex;
  flex-wrap:nowrap;
  gap:.45rem;
  overflow-x:auto;
  -ms-overflow-style:none;
  scrollbar-width:none;
  padding-bottom:.08rem;
}

.hero-mobile-proof::-webkit-scrollbar{
  display:none;
}

.hero-mobile-proof span{
  flex:0 0 auto;
  border-radius:999px;
  padding:.4rem .62rem;
  background:#f5faf6;
  border:1px solid #c0d2c8;
  color:#2f4539;
  font-size:.73rem;
  font-weight:800;
}

.hero-mobile-trust{
  margin-top:.46rem;
  max-width:21rem;
  font-size:.72rem;
  line-height:1.45;
  color:#53645a;
}

.hero-mobile-trust a{
  color:#2E4B4B;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
}

.hero-mobile-visual{
  padding:0 0 .65rem;
}

.hero-mobile-visual-wrap{
  position:relative;
  border:1px solid #c9d8cf;
  border-radius:20px;
  overflow:hidden;
  background:#dbe7de;
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.hero-mobile-visual-img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center;
  display:block;
}

.hero-mobile-visual-badge{
  position:absolute;
  left:.75rem;
  bottom:.75rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.9);
  background:rgba(245,250,246,.94);
  color:#1f3329;
  padding:.42rem .74rem;
  font-size:.74rem;
  font-weight:900;
  box-shadow:0 10px 24px rgba(15,23,42,.14);
}

.hero-mobile-visual-badge::before{
  content:"";
  width:.5rem;
  height:.5rem;
  border-radius:999px;
  background:#6ea239;
  box-shadow:0 0 0 3px rgba(110,162,57,.2);
}

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border-radius:999px;
  background:#E2EBEB;
  color:#2E4B4B;
  padding:.44rem .82rem;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.03em;
}

.card-link{transition:.2s ease}
.card-link:hover{transform:translateY(-2px)}
.article-card img{transition:transform .3s ease}
.article-card:hover img{transform:scale(1.03)}

.section-spacing{
  padding-top:2.5rem;
  padding-bottom:2.5rem;
}

.hero-shell{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--soft);
  box-shadow:0 14px 34px rgba(30,58,138,.16);
}

.hero-main-stack{
  display:grid;
  gap:.72rem;
}

.hero-ig-inline-desktop{
  display:none;
}

.hero-side-stack{
  display:flex;
  flex-direction:column;
  gap:.72rem;
}

.hero-after-trust{
  margin-top:.9rem;
  padding:0;
}

.hero-after-trust-card{
  display:grid;
  gap:.72rem;
  border:1px solid rgba(184,204,189,.92);
  border-radius:22px;
  background:linear-gradient(168deg,#ffffff 0%, #f0f7f1 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 24px rgba(15,23,42,.06);
  padding:.9rem;
}

.hero-ig-inline-card{
  border:1px solid rgba(195,213,202,.82);
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.65);
  display:flex;
  align-items:stretch;
}

.hero-ig-inline-embed{
  width:100%;
  min-height:580px;
  border:0;
  background:transparent;
}

.ig-lazy-panel{
  width:100%;
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  padding:1rem;
  text-align:center;
  background:linear-gradient(180deg,#f8fafc 0%, #eef5f1 100%);
}

.hero-ig-inline-card .ig-lazy-panel{
  min-height:360px;
}

.ig-lazy-title{
  margin:0;
  color:#0f172a;
  font-size:1rem;
  line-height:1.25;
  font-weight:900;
}

.ig-lazy-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:850;
}

.ig-lazy-link{
  color:#334155;
  text-decoration:none;
}

.hero-body{
  display:grid;
  gap:.7rem;
  padding:.8rem;
}

.hero-media{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  min-height:300px;
  border:1px solid rgba(159,178,222,.7);
  background:#0f172a;
}

.hero-media-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:68% center;
}

.hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(102deg, rgba(4,10,16,.62) 0%, rgba(4,10,16,.3) 44%, rgba(4,10,16,.1) 72%, rgba(4,10,16,.03) 100%);
}

.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 12%, rgba(189,214,240,.18), transparent 40%),
    radial-gradient(circle at 14% 88%, rgba(8,18,24,.18), transparent 52%);
}

.hero-media-content{
  position:relative;
  z-index:1;
  padding:1.05rem 1rem 1rem;
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:.38rem .7rem;
  background:rgba(222,232,224,.95);
  color:var(--army-800);
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.05em;
}

.hero-title{
  margin-top:.52rem;
  max-width:17.4rem;
  font-size:1.58rem;
  line-height:1.07;
  letter-spacing:-.03em;
  font-weight:900;
  color:#fff;
}

.hero-lead{
  margin-top:.58rem;
  max-width:18.5rem;
  font-size:.82rem;
  line-height:1.52;
  color:rgba(226,232,240,.95);
}

.hero-service-strip{
  margin-top:.95rem;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.45rem;
}

.hero-service-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border-radius:11px;
  border:1px solid rgba(190,209,196,.5);
  background:rgba(31,52,52,.78);
  color:#ffffff;
  box-shadow:0 10px 24px rgba(31,52,52,.24);
  backdrop-filter:blur(10px);
  font-size:.66rem;
  font-weight:800;
  text-align:center;
  transition:.2s ease;
}
.hero-service-pill:hover{transform:translateY(-1px)}

.hero-lower{
  padding:.1rem .1rem 0;
}

.hero-primary-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem;
}

.hero-action-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border-radius:10px;
  border:1.5px solid transparent;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.01em;
  transition:.2s ease;
}

.hero-action-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 12px 24px rgba(15,23,42,.14),
    0 4px 10px rgba(15,23,42,.08);
}

.hero-action-btn.is-main{
  background:rgba(58,93,93,.94);
  color:#fff;
  border-color:rgba(255,255,255,.20);
  box-shadow:0 6px 12px rgba(30,58,138,.12);
}
.hero-action-btn.is-main:hover{background:var(--army-700)}

.hero-action-btn.is-primary{
  background:var(--army-700);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 10px 20px rgba(31,52,52,.22);
}
.hero-action-btn.is-primary:hover{background:var(--army-800)}

.hero-action-btn.is-sub{
  background:#d4e3be;
  color:#1f3521;
  border-color:#a7c289;
  box-shadow:0 6px 12px rgba(15,23,42,.08);
}
.hero-action-btn.is-sub:hover{background:#cdddb5}

.hero-action-btn.is-wa{
  background:#deead0;
  color:#213a23;
  border-color:#b8cda3;
  box-shadow:0 6px 12px rgba(15,23,42,.08);
}
.hero-action-btn.is-wa:hover{background:#d4e3c1}

.hero-lower-ornament{
  margin-top:.72rem;
  padding-top:.7rem;
  border-top:1px dashed rgba(176,198,185,.82);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}

.hero-lower-ornament::before{
  content:"";
  width:44px;
  height:7px;
  border-radius:999px;
  background:linear-gradient(90deg,#7fa28f 0%, #bad1bd 100%);
  opacity:.78;
  flex:0 0 auto;
}

.hero-lower-faq{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  font-size:.8rem;
  font-weight:800;
  color:#35544a;
  text-decoration:underline;
  text-underline-offset:2px;
}

.hero-proof{
  margin-top:.55rem;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.35rem;
}

.hero-proof span{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:999px;
  padding:.28rem .52rem;
  background:rgba(239,244,240,.94);
  border:1px solid var(--army-300);
  color:var(--army-700);
  font-size:.62rem;
  font-weight:800;
}

.hero-lower-kpis{
  margin-top:.56rem;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.42rem;
}

.hero-lower-kpi{
  border:1px solid #b8cdbd;
  background:#f4f9f4;
  border-radius:12px;
  padding:.45rem .52rem;
}

.hero-lower-kpi strong{
  display:block;
  font-size:.86rem;
  line-height:1;
  color:#1f3521;
  font-weight:900;
}

.hero-lower-kpi span{
  display:block;
  margin-top:.2rem;
  font-size:.66rem;
  line-height:1.2;
  color:#476050;
  font-weight:800;
}

.hero-lower-footer{
  margin-top:.62rem;
  border-top:1px dashed rgba(176,198,185,.72);
  padding-top:.6rem;
}

.hero-lower-note{
  font-size:.72rem;
  line-height:1.45;
  color:#4a6152;
}

.hero-lower-links{
  margin-top:.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:.42rem;
}

.hero-lower-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  border-radius:999px;
  border:1px solid #b8cdbd;
  background:#f3f8f3;
  color:#2b4536;
  padding:0 .72rem;
  font-size:.72rem;
  font-weight:800;
}

.hero-trustline{
  margin-top:.48rem;
  font-size:.69rem;
  line-height:1.4;
  color:rgba(91,107,97,.94);
}

.hero-trustline a{
  color:var(--army-700);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
}

.hero-highlight-head{
  margin-top:.9rem;
  font-size:.74rem;
  font-weight:900;
  color:#0f172a;
  letter-spacing:.03em;
}

.hero-highlight-list{
  margin-top:.5rem;
  display:grid;
  gap:.48rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.hero-highlight-card{
  display:flex;
  gap:.44rem;
  border:1px solid #cdd9ef;
  border-radius:10px;
  background:#fff;
  padding:.35rem;
  transition:.2s ease;
}

.hero-highlight-card:hover{
  transform:translateY(-1px);
  border-color:#6B8F8F;
}

.hero-highlight-thumb{
  width:120px;
  height:120px;
  border-radius:9px;
  object-fit:cover;
  background:#f1f5f9;
  flex:0 0 auto;
}

.hero-highlight-meta{
  min-width:0;
  align-self:center;
}

.hero-highlight-brand{
  font-size:.52rem;
  font-weight:800;
  line-height:1;
  color:#64748b;
}

.hero-highlight-name{
  margin-top:.15rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:.66rem;
  line-height:.86rem;
  font-weight:800;
  color:#0f172a;
}

.hero-highlight-price{
  margin-top:.2rem;
  font-size:.73rem;
  line-height:1;
  color:#2E4B4B;
  font-weight:900;
}

.hero-after-trust .hero-trustline{
  margin-top:.78rem;
  font-size:1.04rem;
  line-height:1.5;
}

.hero-after-trust .hero-highlight-head{
  margin-top:0;
  margin-bottom:.45rem;
}

.hero-after-trust .hero-highlight-list{
  margin-top:0;
  display:flex;
  flex-wrap:wrap;
  gap:.62rem;
}

.hero-after-trust .hero-highlight-card{
  flex:1 1 440px;
  max-width:680px;
  min-height:146px;
  padding:.68rem .78rem;
  align-items:center;
  gap:.82rem;
}

.hero-after-trust .hero-highlight-meta{
  align-self:center;
}

.hero-after-trust .hero-highlight-brand{
  font-size:1rem;
  line-height:1.05;
}

.hero-after-trust .hero-highlight-name{
  margin-top:.28rem;
  font-size:1.3rem;
  line-height:1.22;
  -webkit-line-clamp:2;
}

.hero-after-trust .hero-highlight-price{
  margin-top:.36rem;
  font-size:1.35rem;
  line-height:1.1;
}

.ig-reel-section{
  margin-top:1.1rem;
}

.ig-reel-card{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding:0;
}

.ig-reel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.7rem;
}

.ig-reel-title{
  font-size:1.12rem;
  line-height:1.3;
  font-weight:900;
  color:#0f172a;
}

.ig-reel-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 .9rem;
  border-radius:999px;
  border:1px solid #cbd5e1;
  background:#f8fafc;
  color:#334155;
  font-size:.78rem;
  font-weight:800;
}

.ig-reel-embed-wrap{
  width:100%;
  max-width:560px;
  margin:0 auto;
}

.ig-reel-embed{
  width:100%;
  min-height:720px;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:transparent;
}

.quick-chip{
  white-space:nowrap;
  transition:.2s ease;
  scroll-snap-align:start;
  flex:0 0 auto;
  font-size:.78rem;
  line-height:1;
  padding:.72rem .88rem;
  border-radius:12px !important;
}
.quick-chip:hover{transform:translateY(-1px);border-color:var(--army-400)}
.quick-chip.is-active{
  background:var(--army-800);
  color:#ffffff;
  border-color:var(--army-800);
  display:inline-flex;
  align-items:center;
  gap:.3rem;
}
.quick-chip.is-active::before{
  content:"";
  width:.4rem;
  height:.4rem;
  border-radius:999px;
  background:#ffffff;
  opacity:.92;
  flex:0 0 auto;
}

.quick-filter-sticky{
  position:static;
  background:var(--soft);
}

  .quick-filter-shell{
    position:relative;
    border:1px solid var(--line);
    background:rgba(255,255,255,.96);
    border-radius:.82rem;
    padding:.7rem;
    box-shadow:0 6px 16px rgba(15,23,42,.04);
  }
  .quick-filter-shell::after{
    content:"";
    position:absolute;
    top:.6rem;
    right:.35rem;
    bottom:.6rem;
    width:24px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(247,250,247,.96) 75%);
    pointer-events:none;
  }

.quick-filter-row{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding-bottom:.1rem;
  scroll-snap-type:x proximity;
}
.quick-filter-row + .quick-filter-row{margin-top:.5rem}

.mobile-filter-cta{
  display:none;
}

.product-card{
  position:relative;
  overflow:hidden;
  border-radius:.86rem;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 4px 12px rgba(15,23,42,.04);
}

.product-card-media{
  aspect-ratio:4 / 4;
  overflow:hidden;
  position:relative;
}

.product-card-body{padding:.34rem .48rem .42rem}

.product-brand{
  font-size:.5rem;
  line-height:1;
  letter-spacing:.05em;
  margin-bottom:.12rem;
}

.product-title{
  font-size:.75rem;
  line-height:.94rem;
  font-weight:800;
  color:#0f172a;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:1.88rem;
  margin:0;
}

.product-price-wrap{margin-top:.12rem}

.product-old-price{
  position:relative;
  display:inline-block;
  font-size:.73rem;
  color:#94a3b8;
  line-height:1;
}

.product-old-price::before,
.product-old-price::after{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  top:50%;
  height:1.2px;
  background:var(--sale-red);
  border-radius:999px;
  transform-origin:center;
}
.product-old-price::before{transform:translateY(-50%) rotate(8deg)}
.product-old-price::after{transform:translateY(-50%) rotate(-8deg)}

.product-price{
  display:block;
  margin-top:.05rem;
  font-size:1.08rem;
  line-height:1;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--primary);
}

.product-specs{
  margin-top:.14rem;
  display:grid;
  gap:.02rem;
  font-size:.55rem;
  line-height:.74rem;
  color:#64748b;
}

.product-specs div{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.home-product-grid{gap:.5rem}
.article-card{border-radius:1.5rem}
.article-card{box-shadow:0 6px 16px rgba(15,23,42,.04)}

.home-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:.26rem .52rem;
  font-size:.58rem;
  font-weight:800;
  line-height:1;
  box-shadow:0 4px 10px rgba(15,23,42,.06);
}
.home-badge-ready{background:var(--army-100);color:var(--army-700)}
.home-badge-promo{background:#fff7ed;color:#c2410c}
.home-badge-sold{background:#f1f5f9;color:#475569}

.home-products-section{
  padding-top:3rem;
}

.product-section-lead{
  margin-top:.45rem;
  font-size:.92rem;
  line-height:1.55;
  color:#64748b;
}

.service-copy,
.tradein-copy,
.location-copy{max-width:40rem}

.info-slab{
  border:1px solid #e5e7eb;
  background:rgba(255,255,255,.94);
  border-radius:1.5rem;
}
.desktop-seo-copy{max-width:60rem}

@media (max-width:768px){
  .floating-mobile-space{padding-bottom:5.7rem}
}

@media (max-width:640px){
  .hero-mobile-title{
    font-size:2.08rem;
    max-width:16.5rem;
  }

  .hero-mobile-lead{
    font-size:.95rem;
    max-width:18.4rem;
  }

  .hero-mobile-cta .hero-action-btn{
    min-height:45px;
    font-size:.82rem;
  }

  .hero-mobile-proof span{
    font-size:.67rem;
  }

  .section-spacing{
    padding-top:1.85rem;
    padding-bottom:1.85rem;
  }

  .hero-pattern{
    min-height:86svh;
  }

  .hero-pattern > .mx-auto{
    max-width:none;
    height:86svh;
    display:block;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    padding-bottom:0;
  }

  #produk-pilihan{padding-bottom:5.3rem}

  .hero-shell{
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    height:100%;
  }

  .hero-body{
    padding:0;
    gap:0;
    height:100%;
    position:relative;
  }

  .hero-media{
    min-height:100%;
    height:100%;
    border:0;
    border-radius:0;
  }

  .hero-media-bg{
    object-position:70% 56%;
  }

  .hero-media-content{
    max-width:17.7rem;
    margin-top:.22rem;
    margin-left:.55rem;
    padding:.84rem .82rem .68rem;
    border-radius:10px;
    border:1px solid rgba(236,246,255,.24);
    background:linear-gradient(180deg, rgba(6,16,28,.34) 0%, rgba(6,16,28,.14) 100%);
    backdrop-filter:blur(2px);
  }

  .hero-media::before{
    background:linear-gradient(180deg, rgba(3,10,20,.34) 0%, rgba(3,10,20,.72) 100%);
  }

  .hero-service-strip{
    display:none;
  }

  .hero-lower{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    padding:0 1rem calc(env(safe-area-inset-bottom) + 2.45rem);
  }

  .hero-trustline{
    color:rgba(226,232,240,.98);
    font-size:.69rem;
    line-height:1.35;
    max-width:18rem;
  }

  .hero-trustline a{
    color:#d9e5db;
  }

  .hero-proof{
    margin-top:.5rem;
    gap:.3rem;
  }

  .hero-proof span{
    font-size:.6rem;
    padding:.26rem .48rem;
  }

  .hero-proof span:last-child{
    display:none;
  }

  .hero-highlight-head,
  .hero-highlight-list{
    display:none;
  }

  .quick-filter-sticky{
    margin-left:-1rem;
    margin-right:-1rem;
    padding-left:1rem;
    padding-right:1rem;
    border-top:1px solid #eef2f7;
    border-bottom:1px solid #eef2f7;
  }

  .quick-filter-shell{
    border:none;
    border-radius:0;
    padding:.65rem 0;
    box-shadow:none;
    background:transparent;
  }
  .quick-filter-shell::after{display:none}

  .product-card{border-radius:.8rem}
  .product-card-media{aspect-ratio:1 / 1}
  .product-card-body{padding:.38rem .44rem .46rem}
  .product-brand{font-size:.58rem;margin-bottom:.16rem}

  .product-title{
    font-size:.79rem;
    line-height:1rem;
    min-height:2rem;
  }

  .product-price-wrap{margin-top:.16rem}
  .product-old-price{font-size:.68rem}
  .product-price{font-size:1.08rem}

  .product-specs{
    margin-top:.26rem;
    font-size:.66rem;
    line-height:.82rem;
  }

  .home-badge{
    padding:.24rem .46rem;
    font-size:.6rem;
  }

  .product-section-lead{
    font-size:.72rem
;
    line-height:1.5;
  }

  .service-copy,
  .tradein-copy,
  .location-copy{
    font-size:.95rem;
    line-height:1.65;
  }

  .produk-kicker{
    display:none;
  }

  .product-section-lead{
    display:none;
  }

  .quick-filter-row.filter-secondary{
    display:none;
  }

  .mobile-filter-cta{
    display:block;
    margin-top:.5rem;
    font-size:.73rem;
    font-weight:700;
    color:#2E4B4B;
    text-align:center;
  }

  .home-products-section{
    padding-top:1.25rem;
  }

  #produk-pilihan .section-kicker{
    margin-top:.15rem;
  }

  #produk-pilihan h2{
    margin-top:.62rem;
  }
}

@media (min-width:768px){
  .hero-main-stack{
    display:grid;
    gap:.95rem;
  }

  .hero-body{
    grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);
    align-items:start;
    gap:1.1rem;
    padding:1rem;
  }

  .hero-media{
    min-height:100%;
  }

  .hero-media-bg{
    object-position:74% center;
  }

  .hero-media-content{
    padding:1.25rem 1.3rem;
  }

  .hero-title{
    max-width:27rem;
    font-size:2.15rem;
  }

  .hero-lead{
    max-width:23rem;
    font-size:.93rem;
  }

  .hero-service-strip{
    max-width:24rem;
  }

  .hero-lower{
    padding:1.05rem;
    border:1px solid rgba(184,204,189,.9);
    border-radius:20px;
    background:linear-gradient(168deg,#ffffff 0%, #f0f7f1 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 10px 24px rgba(15,23,42,.06);
  }

  .hero-primary-actions{
    gap:.48rem;
  }

  .hero-proof{
    margin-top:.72rem;
    gap:.4rem;
  }

  .hero-trustline{
    margin-top:.62rem;
  }

  .hero-highlight-head{
    margin-top:.78rem;
  }

  .hero-action-btn{
    min-height:50px;
    font-size:.8rem;
  }

  .hero-proof span{
    font-size:.66rem;
  }

  .hero-highlight-head{
    margin-top:.7rem;
    font-size:.8rem;
  }

  .hero-highlight-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hero-highlight-thumb{
    width:120px;
    height:120px;
  }

  .hero-highlight-name{
    font-size:.74rem;
    line-height:.98rem;
  }

  .hero-highlight-price{
    font-size:.82rem;
  }

  .ig-reel-section{
    margin-top:.85rem;
  }

  .ig-reel-card{
    border-radius:0;
    padding:0;
  }

  .ig-reel-head{
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:.6rem;
  }

  .ig-reel-title{
    font-size:.84rem;
  }

  .ig-reel-embed{
    min-height:690px;
    border-radius:0;
  }
}

@media (min-width:768px){
  .hero-ig-inline-desktop{
    display:block;
  }

  .hero-ig-inline-card{
    height:100%;
    border-radius:20px;
  }

  .hero-ig-inline-embed{
    min-height:560px;
  }
}

@media (min-width:1024px){
  .hero-ig-inline-embed{
    min-height:560px;
    height:100%;
  }

  .hero-pattern{
    background:
      radial-gradient(circle at 84% 10%, rgba(108,154,92,.22), transparent 32%),
      radial-gradient(circle at 8% 86%, rgba(29,63,63,.18), transparent 38%),
      linear-gradient(180deg, #edf4ef 0%, #e1ebe3 100%);
  }

  .hero-pattern > .mx-auto{
    max-width:84rem;
    padding-top:.7rem;
    padding-bottom:2.1rem;
  }

  .hero-shell{
    border:1px solid rgba(176,198,185,.92);
    border-radius:34px;
    background:linear-gradient(160deg, rgba(255,255,255,.98), rgba(241,248,242,.94));
    box-shadow:
      0 34px 70px rgba(17,24,39,.11),
      inset 0 1px 0 rgba(255,255,255,.96);
  }

  .hero-body{
    grid-template-columns:minmax(0,1.62fr) minmax(290px,.38fr);
    gap:1.1rem;
    padding:1.12rem;
  }

  .hero-after-trust{
    padding:0;
  }

  .hero-media{
    min-height:540px;
    border-radius:24px;
    border:1px solid rgba(188,211,195,.66);
    box-shadow:0 20px 38px rgba(15,23,42,.13);
  }

  .hero-media-bg{
    object-position:center;
    transform:scale(1.02);
  }

  .hero-media::before{
    background:
      linear-gradient(100deg, rgba(3,10,12,.64) 0%, rgba(3,10,12,.26) 46%, rgba(3,10,12,.1) 72%, rgba(3,10,12,.05) 100%),
      linear-gradient(165deg, rgba(6,24,22,.18) 0%, rgba(6,24,22,.46) 74%);
  }

  .hero-media-content{
    padding:1.8rem 1.9rem 1.55rem;
    max-width:39rem;
    border-radius:20px;
    border:1px solid rgba(228,241,234,.22);
    background:linear-gradient(135deg, rgba(7,19,20,.38) 0%, rgba(7,19,20,.16) 100%);
    backdrop-filter:blur(2px);
    box-shadow:0 12px 24px rgba(3,10,10,.18);
  }

  .hero-kicker{
    padding:.5rem .86rem;
    font-size:.72rem;
    letter-spacing:.08em;
  }

  .hero-title{
    margin-top:.7rem;
    max-width:27rem;
    font-size:2.88rem;
    line-height:1.02;
    letter-spacing:-.038em;
    text-wrap:balance;
    text-shadow:0 5px 14px rgba(2,8,8,.46);
  }

  .hero-lead{
    margin-top:.7rem;
    max-width:25.5rem;
    font-size:1.02rem;
    line-height:1.62;
    color:rgba(241,249,245,.98);
    text-shadow:0 3px 10px rgba(2,8,8,.38);
  }

  .hero-desktop-metrics{
    margin-top:.7rem;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.45rem;
    max-width:32rem;
  }

  .hero-metric{
    display:flex;
    flex-direction:column;
    border-radius:12px;
    border:1px solid #c7d7cb;
    background:linear-gradient(180deg,#f7fbf6 0%, #eef5ed 100%);
    padding:.52rem .62rem;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  }

  .hero-metric-value{
    font-size:.96rem;
    line-height:1;
    font-weight:900;
    color:#1f3521;
    letter-spacing:-.02em;
  }

  .hero-metric-label{
    margin-top:.24rem;
    font-size:.62rem;
    font-weight:800;
    color:#56705a;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  .hero-service-strip{
    margin-top:1.1rem;
    max-width:32rem;
    gap:.6rem;
  }

  .hero-service-pill{
    min-height:42px;
    border-radius:13px;
    font-size:.8rem;
    background:rgba(31,52,52,.82);
    border-color:rgba(190,209,196,.52);
  }

  .hero-lower{
    align-self:stretch;
    border:1px solid rgba(184,204,189,.92);
    border-radius:22px;
    background:linear-gradient(168deg,#ffffff 0%, #f0f7f1 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 10px 24px rgba(15,23,42,.06);
    padding:.9rem;
    display:flex;
    flex-direction:column;
  }

  .hero-primary-actions{
    gap:.56rem;
  }

  .hero-action-btn{
    min-height:52px;
    border-radius:12px;
    font-size:.92rem;
  }

  .hero-action-btn.is-main{
    background:linear-gradient(140deg,#274242 0%,#375656 100%);
  }

  .hero-action-btn.is-wa{
    background:linear-gradient(140deg,#ddeccd,#cfe2bc);
  }

  .hero-proof{
    margin-top:.62rem;
    gap:.36rem;
  }

  .hero-proof span{
    font-size:.72rem;
    padding:.32rem .58rem;
    border-color:#b9cdbd;
    background:#f2f8f2;
    color:#2c4634;
  }

  .hero-trustline{
    margin-top:.52rem;
    font-size:.8rem;
    line-height:1.5;
    color:#4a6152;
  }

  .hero-highlight-head{
    margin-top:.78rem;
    font-size:.8rem;
    letter-spacing:.07em;
    color:#1a2c1f;
  }

  .hero-highlight-list{
    margin-top:.48rem;
    gap:.48rem;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hero-highlight-card{
    border-radius:12px;
    padding:.42rem;
    border-color:#c4d5c8;
    box-shadow:0 8px 18px rgba(15,23,42,.06);
  }

  .hero-highlight-thumb{
    width:120px;
    height:120px;
    border-radius:10px;
  }

  .hero-highlight-brand{
    font-size:.56rem;
  }

  .hero-highlight-name{
    margin-top:.14rem;
    font-size:.72rem;
    line-height:.94rem;
  }

  .hero-highlight-price{
    margin-top:.24rem;
    font-size:.84rem;
  }

  #produk-pilihan{
    padding-top:4.1rem;
  }

  .desktop-products-head{
    margin-bottom:.9rem;
    align-items:flex-end;
  }

  .desktop-products-copy h2{
    font-size:3rem;
    line-height:1.04;
    letter-spacing:-.045em;
    max-width:34rem;
    text-wrap:balance;
  }

  .product-section-lead{
    margin-top:.92rem;
    font-size:1.02rem;
    max-width:42rem;
    color:#4f6158;
  }

  .desktop-products-cta{
    min-height:48px;
    padding:0 1.2rem;
    border-radius:14px;
    font-size:.9rem;
    border-color:#bfcfc5;
    box-shadow:0 12px 24px rgba(15,23,42,.06);
  }

  .quick-filter-sticky{
    margin-top:1rem;
  }

  .quick-filter-shell{
    border-radius:18px;
    border:1px solid #cad8cf;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);
    padding:.88rem;
    box-shadow:0 14px 30px rgba(15,23,42,.07);
  }

  .quick-filter-row{
    gap:.58rem;
  }

  .quick-chip{
    min-height:42px;
    padding:0 .96rem;
    border-radius:13px !important;
    font-size:.84rem;
    display:inline-flex;
    align-items:center;
    border-color:#cedcd2 !important;
  }

  .home-product-grid{
    margin-top:1.25rem;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:1rem !important;
  }

  .product-card{
    border-radius:18px;
    border:1px solid #cddace;
    box-shadow:0 16px 34px rgba(15,23,42,.08);
  }

  .product-card-media{
    aspect-ratio:4 / 3;
  }

  .product-card-body{
    padding:.88rem .94rem 1rem;
  }

  .product-brand{
    font-size:.62rem;
  }

  .product-title{
    margin-top:.26rem;
    min-height:2.42rem;
    font-size:1rem;
    line-height:1.2rem;
  }

  .product-old-price{
    font-size:.82rem;
  }

  .product-price{
    margin-top:.24rem;
    font-size:1.36rem;
  }

  .product-specs{
    margin-top:.42rem;
    font-size:.73rem;
    line-height:.95rem;
    gap:.15rem;
  }

  #servis .rounded-\[20px\],
  #lokasi .rounded-\[20px\],
  #akses-cepat .rounded-\[20px\],
  #faq .rounded-\[20px\]{
    border-radius:24px;
    border:1px solid #cbd9d0;
    box-shadow:0 18px 34px rgba(15,23,42,.07);
  }

  #servis h2,
  #lokasi h2,
  #akses-cepat h2,
  #faq h2{
    font-size:2.3rem;
    line-height:1.08;
    letter-spacing:-.04em;
    text-wrap:balance;
  }

  .article-card{
    border-radius:20px;
    border-color:#cddace;
    box-shadow:0 16px 30px rgba(15,23,42,.08);
  }

  .article-card h3{
    font-size:1.2rem;
    line-height:1.42rem;
  }
}

@media (min-width:1280px){
  .hero-pattern > .mx-auto{
    max-width:90rem;
  }

  .hero-body{
    grid-template-columns:minmax(0,1.66fr) minmax(300px,.34fr);
  }

  .hero-ig-inline-embed{
    min-height:610px;
  }

  .hero-title{
    max-width:36rem;
    font-size:3.35rem;
  }

  .desktop-products-copy h2{
    font-size:3.2rem;
  }
}

html[data-theme="dark"] body{
  background:#0f1716 !important;
  color:#e6efe9 !important;
}

html[data-theme="dark"] .hero-mobile{
  background:#101a19;
  border-bottom-color:#2e4742;
}

html[data-theme="dark"] .hero-mobile-badge{
  background:#20312f;
  border-color:#3a5752;
  color:#c7dad2;
}

html[data-theme="dark"] .hero-mobile-title{
  color:#f3f9f6;
}

html[data-theme="dark"] .hero-mobile-title .accent{
  color:#9fcb63;
}

html[data-theme="dark"] .hero-mobile-lead,
html[data-theme="dark"] .hero-mobile-trust{
  color:#b7cac3;
}

html[data-theme="dark"] .hero-mobile-trust a{
  color:#d5e6dd;
}

html[data-theme="dark"] .hero-mobile-proof span{
  background:#1d2d2b;
  border-color:#36524b;
  color:#d3e3dc;
}

html[data-theme="dark"] .hero-mobile-visual-wrap{
  border-color:#36524b;
  background:#152321;
  box-shadow:0 16px 34px rgba(0,0,0,.35);
}

html[data-theme="dark"] .hero-pattern{
  background:
    radial-gradient(circle at 84% 10%, rgba(96,132,83,.2), transparent 34%),
    radial-gradient(circle at 8% 86%, rgba(20,42,42,.32), transparent 40%),
    linear-gradient(180deg, #0f1716 0%, #101d1b 100%);
}

html[data-theme="dark"] .hero-shell{
  background:linear-gradient(160deg, rgba(19,33,31,.96), rgba(18,30,29,.94));
  border-color:#35524d;
  box-shadow:0 30px 62px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-theme="dark"] .hero-ig-inline-card{
  background:linear-gradient(160deg, rgba(19,33,31,.96), rgba(18,30,29,.94));
  border-color:#35524d;
}

html[data-theme="dark"] .hero-lower{
  background:linear-gradient(168deg, #182825 0%, #162321 100%);
  border-color:#35524d;
}

html[data-theme="dark"] .hero-after-trust-card{
  background:linear-gradient(168deg, #182825 0%, #162321 100%);
  border-color:#35524d;
}

html[data-theme="dark"] .hero-proof span{
  background:#1d302d;
  border-color:#42655d;
  color:#d1e2dc;
}

html[data-theme="dark"] .hero-lower-kpi{
  background:#1d302d;
  border-color:#42655d;
}

html[data-theme="dark"] .hero-lower-kpi strong{
  color:#edf8f2;
}

html[data-theme="dark"] .hero-lower-kpi span{
  color:#b9cec6;
}

html[data-theme="dark"] .hero-lower-footer{
  border-top-color:#3b5a53;
}

html[data-theme="dark"] .hero-lower-note{
  color:#c2d4cd;
}

html[data-theme="dark"] .hero-lower-link{
  background:#1d302d;
  border-color:#42655d;
  color:#d8e8e1;
}

html[data-theme="dark"] .hero-lower-ornament{
  border-top-color:#3b5a53;
}

html[data-theme="dark"] .hero-lower-ornament::before{
  background:linear-gradient(90deg,#507a69 0%, #6e9985 100%);
}

html[data-theme="dark"] .hero-lower-faq{
  color:#d7e9e1;
}

html[data-theme="dark"] .hero-trustline{
  color:#b7cac3;
}

html[data-theme="dark"] .hero-trustline a{
  color:#e1efe8;
}

html[data-theme="dark"] .hero-metric{
  background:linear-gradient(180deg,#1d302d 0%, #192926 100%);
  border-color:#3d5d56;
}

html[data-theme="dark"] .hero-metric-value{
  color:#ecf6f1;
}

html[data-theme="dark"] .hero-metric-label{
  color:#acc3ba;
}

html[data-theme="dark"] .hero-highlight-head{
  color:#e8f3ee;
}

html[data-theme="dark"] .hero-highlight-card{
  background:#182825;
  border-color:#3a5852;
}

html[data-theme="dark"] .hero-highlight-brand{
  color:#9fb7af;
}

html[data-theme="dark"] .hero-highlight-name{
  color:#edf7f2;
}

html[data-theme="dark"] .hero-highlight-price{
  color:#cce6db;
}

html[data-theme="dark"] .ig-reel-card{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}

html[data-theme="dark"] .ig-reel-title{
  color:#ecf6f1;
}

html[data-theme="dark"] .ig-reel-link{
  background:#1d2f2d;
  border-color:#3d5953;
  color:#c9d9d3;
}

html[data-theme="dark"] .ig-reel-embed{
  background:transparent;
}

html[data-theme="dark"] .section-kicker{
  background:#20312f;
  color:#caddd5;
}

html[data-theme="dark"] .quick-filter-sticky{
  background:#111b1a;
  border-color:#2e4742;
}

html[data-theme="dark"] .quick-filter-shell{
  background:#162221;
  border-color:#35524d;
  box-shadow:0 14px 30px rgba(0,0,0,.36);
}

html[data-theme="dark"] .quick-chip{
  background:#1d2f2d;
  border-color:#3d5953 !important;
  color:#c9d9d3;
}

html[data-theme="dark"] .quick-chip.is-active{
  background:#2e4b4b;
  border-color:#4f7469 !important;
  color:#ffffff;
}

html[data-theme="dark"] .product-card,
html[data-theme="dark"] .article-card{
  background:#152321;
  border-color:#37524d;
  box-shadow:0 16px 30px rgba(0,0,0,.34);
}

html[data-theme="dark"] .product-title,
html[data-theme="dark"] .article-card h3{
  color:#eef6f2;
}

html[data-theme="dark"] .product-specs,
html[data-theme="dark"] .product-brand,
html[data-theme="dark"] .product-section-lead{
  color:#b4c6bf;
}

html[data-theme="dark"] #servis .rounded-\[20px\],
html[data-theme="dark"] #lokasi .rounded-\[20px\],
html[data-theme="dark"] #akses-cepat .rounded-\[20px\],
html[data-theme="dark"] #faq .rounded-\[20px\]{
  background:#162422;
  border-color:#36524b;
}

/* Final desktop lock for hero + IG layout */
@media (min-width:1024px){
  .hero-body{
    --hero-top-height:560px;
    --hero-bottom-height:240px;
  }

  .hero-body{
    grid-template-columns:minmax(0,1fr) 390px !important;
    gap:1rem !important;
    padding:1rem !important;
    align-items:stretch !important;
  }

  .hero-main-stack{
    display:grid !important;
    grid-template-rows:var(--hero-top-height) var(--hero-bottom-height) !important;
    gap:.9rem !important;
  }

  .hero-media{
    min-height:var(--hero-top-height) !important;
    height:var(--hero-top-height) !important;
  }

  .hero-lower{
    padding:1rem !important;
    min-height:var(--hero-bottom-height) !important;
    height:var(--hero-bottom-height) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
  }

  .hero-side-stack{
    gap:.9rem !important;
    height:auto !important;
    display:grid !important;
    grid-template-rows:var(--hero-top-height) var(--hero-bottom-height) !important;
    align-items:stretch !important;
  }

  .hero-ig-inline-desktop{
    min-height:var(--hero-top-height) !important;
    height:var(--hero-top-height) !important;
  }

  .hero-ig-inline-card{
    border-radius:16px !important;
    height:100% !important;
  }

  .hero-ig-inline-embed{
    min-height:var(--hero-top-height) !important;
    height:100% !important;
  }

  .hero-primary-actions{
    gap:.62rem !important;
  }

  .hero-action-btn{
    min-height:56px !important;
    font-size:.98rem !important;
  }

  .hero-lower-ornament{
    margin-top:.72rem !important;
    padding-top:.8rem !important;
  }

  .hero-lower-faq{
    font-size:.86rem !important;
  }

  .hero-after-trust{
    margin-top:0 !important;
    min-height:var(--hero-bottom-height) !important;
    height:var(--hero-bottom-height) !important;
  }

  .hero-after-trust-card{
    grid-template-columns:1fr !important;
    gap:.52rem !important;
    padding:1rem !important;
    height:100% !important;
  }

  .hero-after-trust .hero-trustline{
    margin-top:.72rem !important;
    font-size:1.08rem !important;
    line-height:1.48 !important;
  }

  .hero-lower .hero-desktop-metrics{
    margin-top:.42rem !important;
    max-width:none !important;
    gap:.35rem !important;
  }

  .hero-lower .hero-metric{
    padding:.48rem .55rem !important;
  }

  .hero-lower .hero-metric-value{
    font-size:.9rem !important;
  }

  .hero-lower .hero-metric-label{
    margin-top:.2rem !important;
    font-size:.64rem !important;
  }

  .hero-after-trust .hero-highlight-head{
    margin-top:0 !important;
    margin-bottom:.4rem !important;
    font-size:.8rem !important;
  }

  .hero-after-trust .hero-highlight-list{
    margin-top:0 !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:.56rem !important;
  }

  .hero-after-trust .hero-highlight-card{
    flex:1 1 420px !important;
    max-width:640px !important;
    min-height:140px !important;
    padding:.58rem .7rem !important;
    align-items:center !important;
    gap:.76rem !important;
  }
}