body{ --canvas-h: 700; }

.t-eyebrow  { font: 400 10.9px/13px var(--f-serif); color: var(--paper); white-space: nowrap; }
.t-h1a      { font: 400 39.2px/46px var(--f-serif); color: var(--paper); white-space: nowrap; }
.t-h1b      { font: 400 35.9px/43px var(--f-serif); white-space: nowrap; }
.t-body     { font: 400  8.7px/12px var(--f-body);  color: var(--paper); }
.t-seclabel { font: 700   10px/13px var(--f-body);  color: var(--paper); white-space: nowrap; }

.t-statvalue{ font: 700 12.5px/16px  var(--f-body); color: var(--gold); }
.t-statlabel{ font: 700  5.6px/7.5px var(--f-body); color: var(--gold); }
.t-statsub  { font: 400  5.6px/7.7px var(--f-body); color: var(--gold); }

.t-komtitle { font: 700  9.6px/13px  var(--f-body); color: var(--gold); }
.t-komlead  { font: 700  7.2px/9px   var(--f-body); color: var(--gold); }
.t-komsub   { font: 400  6.4px/8.6px var(--f-body); color: var(--gold); }
.slot--round{ border-radius: 11px; }

.e-testimoni-soka-oil{ left:80px; top:97px; }
.e-dipercaya-amp-dicintai{ left:80px; top:112px; }
.e-terbukti-memberi-manfaat-nyata{ left:82px; top:153px; }
.e-t-body-3{ left:82px; top:191px; width:325px; }
.e-apa-kata-mereka{ left:80px; top:332px; }

.e-bar-stats{ left:80px; top:236px; width:507.5px; height:77.5px; }
.e-icon-stat-1{ left:10px;  top:21px; width:22px; height:22px; border:none; background:url('/jemassets/frontend/img/soka-oil/testi1.png') center/contain no-repeat; }
.e-icon-stat-2{ left:140px; top:21px; width:22px; height:22px; border:none; background:url('/jemassets/frontend/img/soka-oil/testi2.png') center/contain no-repeat; }
.e-icon-stat-3{ left:248px; top:21px; width:22px; height:22px; border:none; background:url('/jemassets/frontend/img/soka-oil/testi3.png') center/contain no-repeat; }
.e-icon-stat-4{ left:378px; top:21px; width:22px; height:22px; border:none; background:url('/jemassets/frontend/img/soka-oil/testi4.png') center/contain no-repeat; }
.e-10-000{ left:38px;  top:16px; width:110px; }
.e-4-9-5{ left:168px; top:16px; width:110px; }
.e-2000{ left:276px; top:16px; width:110px; }
.e-100pct{ left:406px; top:16px; width:110px; }
.e-pelanggan-puas{ left:38px;  top:31px; width:110px; }
.e-rata-rata-rating{ left:168px; top:31px; width:110px; }
.e-testimoni-positif{ left:276px; top:31px; width:110px; }
.e-alami-amp-aman{ left:406px; top:31px; width:110px; }
.e-bar-stats-t-statsub-1{ left:38px;  top:41px; width:110px; }
.e-stars-rating{ left:168px; top:41px; width:110px; }
.e-bar-stats-t-statsub-2{ left:276px; top:41px; width:110px; }
.e-bar-stats-t-statsub-3{ left:406px; top:41px; width:110px; }
.e-bar-stats-rule-1{ left:130px; top:14px; width:1px; height:48px; }
.e-bar-stats-rule-2{ left:238px; top:14px; width:1px; height:48px; }
.e-bar-stats-rule-3{ left:368px; top:14px; width:1px; height:48px; }

.e-botanicals-plate{ left:508px; top:159px; width:526px; height:351px; }

.e-testi-gallery{ left:80px; top:353px; width:428px; }

.testi-gallery__nav{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
}
.testi-nav-btn{
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), .7);
  background: transparent;
  color: var(--gold-text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, opacity .18s ease;
}
.testi-nav-btn:hover:not(:disabled){
  background: rgba(var(--gold-rgb), .12);
  border-color: var(--gold-text);
}
.testi-nav-btn:disabled{ opacity: .35; cursor: default; }

.testi-gallery__viewport{
  width: 427px;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.testi-gallery__viewport:active{ cursor: grabbing; }
.testi-track{
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .35s ease;
}
.testi-track > li{ flex: 0 0 100px; }

.testi-shot{
  position: relative;
  display: block;
  width: 100px; height: 176px;
  padding: 0;
  border: 1px solid rgba(var(--gold-rgb), .6);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink);
  cursor: zoom-in;
}
.testi-shot img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.testi-shot__play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.8);
  color: #fff;
  font-size: 12px;
  padding-left: 2px;
}

.testi-lightbox{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.85);
}
.testi-lightbox[hidden]{ display: none; }
.testi-lightbox__img,
.testi-lightbox__video{
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}
.testi-lightbox__img[hidden],
.testi-lightbox__video[hidden]{ display: none; }
.testi-lightbox__close{
  position: absolute;
  top: 20px; right: 24px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.e-bar-komitmen-kami{ left:39px; top:590px; width:882px; height:52px; }
.e-icon-shield{ left:30px;  top:13px; width:24px; height:24px; border:none; background:url('/jemassets/frontend/img/soka-oil/testi5.png') center/contain no-repeat; }
.e-icon-commit-1{ left:375px; top:13px; width:22px; height:22px; border:none; background:url('/jemassets/frontend/img/soka-oil/testi6.png') center/contain no-repeat; }
.e-icon-commit-2{ left:486px; top:13px; width:22px; height:22px; border:none; background:url('/jemassets/frontend/img/soka-oil/testi7.png') center/contain no-repeat; }
.e-icon-commit-3{ left:610px; top:13px; width:22px; height:22px; border:none; background:url('/jemassets/frontend/img/soka-oil/testi8.png') center/contain no-repeat; }
.e-icon-commit-4{ left:752px; top:13px; width:22px; height:22px; border:none; background:url('/jemassets/frontend/img/soka-oil/testi9.png') center/contain no-repeat; }
.e-bar-komitmen-kami-t-komtitle-1{ left:53px;  top:10px; width:70px; }
.e-bar-komitmen-kami-t-komlead-1{ left:136px; top:10px; width:215px; }
.e-bar-komitmen-kami-t-komsub-1{ left:136px; top:20px; width:215px; }
.e-100pct-alami{ left:400px; top:10px; width:68px; }
.e-tanpa-bahan-kimia-berbahaya{ left:400px; top:20px; width:68px; }
.e-aman-digunakan{ left:511px; top:10px; width:80px; }
.e-bar-komitmen-kami-t-komsub-2{ left:511px; top:20px; width:80px; }
.e-bebas-bahan-berbahaya{ left:635px; top:10px; width:95px; }
.e-bar-komitmen-kami-t-komsub-3{ left:635px; top:20px; width:95px; }
.e-garansi-uang-kembali{ left:777px; top:10px; width:75px; }
.e-jika-tidak-puas-dalam-30-hari{ left:777px; top:20px; width:75px; }
.e-bar-komitmen-kami-rule-1{ left:358px; top:8px;  width:1px; height:34px; }

@media (max-width: 767px){
  .t-eyebrow  { font-size: 12px; }
  .t-h1a      { font-size: 30px; line-height: 36px; white-space: normal !important; }
  .t-h1b      { font-size: 27px; line-height: 33px; white-space: normal !important; }
  .t-body     { font-size: 15px; line-height: 22px; }
  .t-seclabel { font-size: 13px; }
  .t-statvalue{ font-size: 20px; line-height: 24px; }
  .t-statlabel{ font-size: 12px; line-height: 15px; }
  .t-statsub  { font-size: 11px; line-height: 15px; }
  .t-komtitle { font-size: 16px; line-height: 20px; }
  .t-komlead  { font-size: 14px; line-height: 17px; }
  .t-komsub   { font-size: 12px; line-height: 16px; }

    .e-bar-stats .group{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
  }
  .e-bar-stats .group > li{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }

    .testi-gallery__viewport{
    width: 100%;
  }
  .testi-track > li{ flex: 0 0 130px; }
  .testi-shot{ width: 130px; height: 230px; }
  .testi-gallery__nav{ margin-bottom: 28px; }

    .e-bar-komitmen-kami > .n{ text-align: center; }
  .e-bar-komitmen-kami > .e-icon-shield{ margin: 0 auto 8px !important; }
  .e-bar-komitmen-kami .group{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .e-bar-komitmen-kami .group > li{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }
}