:root{
  --yellow:#f7c313;
  --yellow-soft:#ffe584;
  --red:#d52b21;
  --green:#2e6038;
  --paper:#fffdf9;
  --cream:#fff5df;
  --ink:#342319;
  --muted:#796c61;
  --line:rgba(52,35,25,.12);
  --shadow:0 24px 70px rgba(119,79,10,.15);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",sans-serif;
  line-height:1.55;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button,a{font:inherit}
.container{width:min(1160px,calc(100% - 34px));margin:auto}

.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,253,249,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  display:flex;align-items:center;gap:12px;
  border:0;background:none;padding:0;cursor:pointer;color:var(--ink);
}
.brand-mark{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff4c6;border:2px solid var(--green);color:var(--green);
  font-weight:800;font-size:13px;
}
.brand-copy{display:grid;line-height:1}
.brand-copy strong{
  font:800 17px/1 "Playfair Display",serif;color:var(--red);
}
.brand-copy b{
  font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--red);margin-top:4px;
}
.brand-copy small{
  font-size:10px;color:var(--muted);margin-top:3px;
}
.desktop-nav{
  display:flex;gap:24px;align-items:center;margin-left:auto;
}
.desktop-nav a{font-size:14px;color:#55473c}
.header-cta{
  border:0;background:#1b1b1b;color:#fff;
  padding:11px 18px;border-radius:999px;font-weight:700;cursor:pointer;
}

.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,232,116,.88), transparent 28%),
    linear-gradient(135deg, #fff8de 0%, #ffd94d 100%);
  padding:56px 0 28px;
}
.hero-glow{
  position:absolute;border-radius:50%;filter:blur(10px);opacity:.38;
}
.glow-a{width:320px;height:320px;background:#fff;right:6%;top:8%}
.glow-b{width:220px;height:220px;background:#fff6c1;left:4%;bottom:12%}
.hero-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:28px;position:relative;z-index:2;
}
.pill{
  display:inline-flex;padding:8px 13px;border-radius:999px;
  background:var(--red);color:#fff;font-size:12px;font-weight:800;
}
.hero h1{
  margin:18px 0 18px;
  color:var(--red);
  font:800 clamp(58px,8vw,102px)/.84 "Playfair Display",serif;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
.hero h1 small{
  display:block;
  width:max-content;
  margin-bottom:12px;
  padding:7px 12px;
  border-radius:11px;
  background:var(--red);
  color:#fff;
  font:800 20px/1.1 "DM Sans",sans-serif;
  text-transform:none;
  letter-spacing:0;
}
.hero-lead{
  max-width:560px;
  color:#634f42;
  font-size:17px;
}
.quick-points{
  display:grid;gap:10px;margin:22px 0 28px;
}
.quick-points div{
  display:flex;align-items:center;gap:10px;font-weight:700;
}
.quick-points i{
  font-style:normal;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--red);color:#fff;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  min-height:52px;padding:0 22px;border-radius:999px;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;cursor:pointer;
}
.btn-primary{background:#1b1b1b;color:#fff}
.btn-secondary{background:#fff;border-color:rgba(0,0,0,.12)}
.btn-light{background:#fff;color:#2e5637}

.hero-visual{
  position:relative;min-height:560px;display:grid;place-items:center;
}
.product-stage{
  width:min(700px,100%);
  position:relative;z-index:2;
}
.product-stage img{
  width:100%;
  border-radius:28px;
  box-shadow:var(--shadow);
}
.float-card{
  position:absolute;z-index:3;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.07);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  display:grid;line-height:1.05;
}
.float-card strong{font-size:18px;color:var(--red)}
.float-card small{font-size:11px;color:var(--muted);margin-top:6px}
.fc-one{left:0;bottom:80px}
.fc-two{right:10px;top:90px}

.price-section{
  padding:12px 0 72px;
  background:linear-gradient(180deg, #ffe27a 0%, #fff5d8 100%);
}
.price-card{
  background:#fffaf0;
  border-radius:32px;
  padding:30px;
  box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
}
.eyebrow{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#a47600;
}
.price-left h2,
.product-copy h2,
.spotlight-copy h2,
.faq-intro h2,
.closing h2{
  font:800 clamp(34px,5vw,52px)/1.04 "Playfair Display",serif;
  letter-spacing:-.035em;
  margin:8px 0 0;
  color:var(--red);
}
.mini-specs{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;
}
.mini-specs div{
  min-width:150px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:13px 14px;
}
.mini-specs span{display:block;color:var(--muted);font-size:12px}
.mini-specs b{display:block;margin-top:4px}
.price-right{
  min-width:320px;
  display:grid;gap:14px;
}
.price-box{
  text-align:center;
  background:linear-gradient(135deg,#ef4a24,#dc251f);
  color:#fff;border-radius:24px;padding:22px 18px;
}
.price-box small{
  display:block;font-size:12px;text-transform:uppercase;letter-spacing:.14em;
}
.price-box strong{
  display:block;
  font:800 clamp(42px,6vw,68px)/1 "Playfair Display",serif;
  margin:8px 0;
}
.order-btn{
  border:0;cursor:pointer;
  background:linear-gradient(90deg,#ffbf00,#ffdb20);
  border-radius:18px;padding:18px 22px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-weight:900;font-size:18px;
  box-shadow:0 10px 24px rgba(202,147,0,.24);
}
.order-btn b{font-size:24px}
.channel-row{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px;
}
.ch{
  border:0;color:#fff;padding:11px 16px;border-radius:12px;font-weight:700;cursor:pointer;
}
.wa{background:#19a653}
.shopee{background:#ef522d}
.tokopedia{background:#44a244}
.instagram{background:linear-gradient(90deg,#d94384,#7e41b5)}
.tiktok{background:#1d1d1d}
.reseller{background:#ad7243}

.why-section{
  padding:78px 0 24px;background:#fff;
}
.why-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.why-card{
  background:#fff8eb;
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
}
.why-icon{
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff0ba;font-size:25px;margin-bottom:16px;
}
.why-card h3{
  margin:0 0 10px;
  font:700 24px/1.1 "Playfair Display",serif;
  color:var(--red);
}
.why-card p{margin:0;color:var(--muted)}

.product-section{
  padding:66px 0;background:#f8efe1;
}
.product-grid{
  display:grid;grid-template-columns:1.04fr .96fr;gap:40px;align-items:center;
}
.product-photo{
  border-radius:28px;overflow:hidden;background:#fff;box-shadow:var(--shadow);
}
.facts{margin-top:24px}
.facts div{
  display:flex;justify-content:space-between;gap:24px;
  padding:15px 0;border-top:1px solid var(--line);
}
.facts span{color:var(--muted);font-size:13px}
.facts b{text-align:right;font-size:14px}

.spotlight{
  padding:0 0 84px;background:#f8efe1;
}
.spotlight-card{
  background:#2f6038;
  color:#fff;
  border-radius:30px;
  padding:34px;
  display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:center;
}
.spotlight-copy h2{color:#fff}
.eyebrow.light{color:#ffe58b}
.spotlight-copy p{color:rgba(255,255,255,.78)}
.spotlight-photo{
  background:rgba(255,255,255,.08);
  border-radius:24px;padding:14px;
}
.spotlight-photo img{border-radius:18px}

.faq-section{
  padding:82px 0;background:#fff;
}
.faq-grid{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;
}
.faq-list details{
  border-bottom:1px solid var(--line);padding:20px 0;
}
.faq-list summary{
  cursor:pointer;font-weight:800;list-style:none;
}
.faq-list p{color:var(--muted);margin:10px 0 0}

.closing{
  background:#213e29;color:#fff;padding:70px 0;
}
.closing-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.closing h2{color:#fff;margin-bottom:0}

footer{
  background:#17291c;color:#fff;padding:28px 0;
}
.footer-grid{
  display:grid;grid-template-columns:1fr 1fr auto;gap:22px;align-items:center;
}
.footer-brand{display:grid}
.footer-brand small,.footer-grid p,.footer-grid span{
  font-size:12px;color:rgba(255,255,255,.68);
}

.platform-modal{
  position:fixed;inset:0;z-index:100;
  background:rgba(30,20,10,.52);
  display:grid;place-items:center;padding:18px;
  opacity:0;visibility:hidden;transition:.2s;
}
.platform-modal.show{opacity:1;visibility:visible}
.platform-card{
  position:relative;width:min(560px,100%);
  background:#fff;border-radius:28px;padding:28px;
  box-shadow:0 30px 100px rgba(0,0,0,.23);
}
.modal-close{
  position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:50%;
  border:0;background:#f3ece0;font-size:24px;cursor:pointer;
}
.platform-card h3{
  font:800 32px/1.1 "Playfair Display",serif;margin:7px 0 20px;
}
.platform-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.platform-grid a{
  display:flex;justify-content:space-between;
  padding:15px;border:1px solid var(--line);border-radius:16px;font-weight:700;
}
.modal-note{display:block;margin-top:16px;color:var(--muted)}

@media (max-width:900px){
  .desktop-nav{display:none}
  .hero-grid,.product-grid,.faq-grid{grid-template-columns:1fr}
  .hero-copy{text-align:center}
  .hero h1 small{margin-inline:auto}
  .hero-lead{margin-inline:auto}
  .quick-points{
    width:max-content;max-width:100%;margin-inline:auto;text-align:left;
  }
  .hero-actions{justify-content:center}
  .hero-visual{min-height:420px}
  .price-card{grid-template-columns:1fr}
  .price-right{min-width:0}
  .why-grid{grid-template-columns:1fr}
  .spotlight-card{grid-template-columns:1fr}
  .spotlight-photo{max-width:360px;margin:auto}
  .closing-inner{display:block}
  .closing .btn{margin-top:20px}
  .footer-grid{grid-template-columns:1fr}
}

@media (max-width:600px){
  .nav{height:68px}
  .brand-mark{width:38px;height:38px}
  .header-cta{display:none}
  .hero{
    padding:30px 0 18px;
  }
  .hero h1{
    font-size:56px;
  }
  .hero-visual{
    min-height:0;
    margin-top:8px;
    order:-1;
  }
  .product-stage{
    width:100%;
  }
  .product-stage img{
    border-radius:20px;
  }
  .fc-one{
    left:8px;bottom:16px;
  }
  .fc-two{
    right:8px;top:12px;
  }
  .hero-actions{
    flex-direction:column;
  }
  .btn{
    width:100%;
  }
  .price-section{
    padding:8px 0 58px;
  }
  .price-card{
    padding:22px;border-radius:24px;
  }
  .price-left h2{
    font-size:39px;
  }
  .mini-specs{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
  }
  .price-box strong{
    font-size:52px;
  }
  .channel-row{
    display:grid;grid-template-columns:1fr 1fr;
  }
  .ch{
    width:100%;
  }
  .facts div{
    display:grid;gap:4px;
  }
  .facts b{
    text-align:left;
  }
  .product-section,.faq-section{
    padding:68px 0;
  }
  .platform-grid{
    grid-template-columns:1fr;
  }
}


/* =========================
   V8 FINAL POLISH
   ========================= */

.trust-bar{
  background:#fff7d7;
  border-bottom:1px solid rgba(52,35,25,.08);
}
.trust-bar-inner{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6a4c1a;
  white-space:nowrap;
  overflow:auto;
}
.trust-bar-inner i{
  color:var(--red);
  font-style:normal;
}

.highlight-strip{
  background:#fff;
  padding:0 0 18px;
}
.highlight-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.highlight-grid>div{
  background:#fff8e8;
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:12px;
}
.highlight-grid strong{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:#ffe28a;color:#8b5600;
  font-size:12px;
}
.highlight-grid span{
  font-size:13px;
  font-weight:700;
}

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

@media (min-width: 901px){
  .hero{
    padding-top:48px;
    padding-bottom:38px;
  }
  .hero-copy{
    padding-right:10px;
  }
  .product-stage img{
    transform:scale(1.01);
  }
  .price-card{
    margin-top:-6px;
  }
}

@media (max-width: 900px){
  .highlight-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 600px){
  body{
    padding-bottom:74px;
  }

  .trust-bar-inner{
    justify-content:flex-start;
    padding:0 14px;
  }

  .hero{
    padding-top:18px;
    padding-bottom:16px;
  }

  .hero-grid{
    gap:14px;
  }

  .hero-visual{
    margin-top:0;
  }

  .product-stage{
    width:calc(100% + 10px);
    margin-left:-5px;
  }

  .product-stage img{
    border-radius:16px;
    box-shadow:0 18px 44px rgba(119,79,10,.18);
  }

  .float-card{
    padding:10px 12px;
    border-radius:14px;
  }

  .float-card strong{
    font-size:15px;
  }

  .float-card small{
    font-size:10px;
  }

  .fc-one{
    left:6px;
    bottom:10px;
  }

  .fc-two{
    right:6px;
    top:8px;
  }

  .hero-copy{
    margin-top:4px;
  }

  .hero h1{
    font-size:52px;
    margin-top:12px;
    margin-bottom:14px;
  }

  .hero h1 small{
    font-size:15px;
    margin-bottom:8px;
  }

  .hero-lead{
    font-size:15px;
    margin:0 auto 14px;
  }

  .quick-points{
    margin-top:14px;
    margin-bottom:18px;
    gap:8px;
  }

  .quick-points div{
    font-size:14px;
  }

  .quick-points i{
    width:27px;height:27px;
  }

  .hero-actions{
    display:none;
  }

  .price-section{
    padding-top:0;
  }

  .price-card{
    border-radius:22px;
    padding:19px;
    gap:16px;
  }

  .price-left h2{
    font-size:36px;
  }

  .mini-specs{
    margin-top:14px;
  }

  .price-box{
    border-radius:20px;
    padding:18px 14px;
  }

  .price-box strong{
    font-size:48px;
  }

  .order-btn{
    display:none;
  }

  .channel-row{
    margin-top:10px;
    gap:8px;
  }

  .ch{
    padding:10px 8px;
    font-size:12px;
  }

  .highlight-strip{
    padding-bottom:8px;
  }

  .highlight-grid{
    gap:8px;
  }

  .highlight-grid>div{
    padding:13px 14px;
    border-radius:16px;
  }

  .why-section{
    padding-top:54px;
  }

  .why-card{
    padding:20px;
  }

  .product-section{
    padding-top:58px;
    padding-bottom:58px;
  }

  .spotlight{
    padding-bottom:64px;
  }

  .spotlight-card{
    padding:24px;
    border-radius:24px;
  }

  .faq-section{
    padding-top:58px;
    padding-bottom:58px;
  }

  .closing{
    display:none;
  }

  footer{
    padding-bottom:22px;
  }

  .mobile-sticky-cta{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:70;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,253,249,.96);
    backdrop-filter:blur(14px);
    border-top:1px solid rgba(52,35,25,.12);
    box-shadow:0 -10px 28px rgba(0,0,0,.08);
  }

  .mobile-sticky-cta a,
  .mobile-sticky-cta button{
    min-height:48px;
    border-radius:14px;
    border:0;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .mobile-sticky-cta a{
    background:#fff3bd;
    color:#614100;
  }

  .mobile-sticky-cta button{
    background:linear-gradient(90deg,#ffbf00,#ffdb20);
    color:#2b230e;
    cursor:pointer;
  }
}


/* V9.3 - Logo Attaubah menggantikan icon MK di header */
.brand-mark{
  overflow:hidden;
  padding:2px;
  background:#fff;
  border-color:#2f6b3a;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-mark img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  border-radius:50%;
}


/* V9.7 - Perbesar logo header sesuai revisi user */
.nav{
  min-height: 92px;
}
.brand{
  gap: 14px;
}
.brand-mark{
  width: 72px !important;
  height: 72px !important;
  padding: 4px !important;
  border-width: 2px !important;
}

@media (max-width:600px){
  .nav{
    min-height: 82px;
  }
  .brand{
    gap: 10px;
  }
  .brand-mark{
    width: 58px !important;
    height: 58px !important;
    padding: 3px !important;
  }
}


/* V9.8 - Maksimalkan logo header */
.nav{
  min-height: 108px !important;
}
.brand{
  gap: 16px !important;
}
.brand-mark{
  width: 92px !important;
  height: 92px !important;
  padding: 4px !important;
  border-width: 2px !important;
  flex: 0 0 92px !important;
}

@media (max-width:600px){
  .nav{
    min-height: 92px !important;
  }
  .brand{
    gap: 10px !important;
  }
  .brand-mark{
    width: 72px !important;
    height: 72px !important;
    padding: 3px !important;
    flex: 0 0 72px !important;
  }
}


/* V9.9 - Agen Resmi */
.agent-section{
  padding:72px 0;
  background:#fff;
}
.agent-heading{
  max-width:720px;
  margin:0 auto 30px;
  text-align:center;
}
.agent-heading h2{
  margin:6px 0 10px;
  font:800 38px/1.12 "Playfair Display",serif;
  color:var(--red);
}
.agent-heading > p:last-child{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}
.agent-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.agent-card{
  display:flex;
  flex-direction:column;
  min-height:270px;
  padding:28px;
  border:1px solid #e7dbc6;
  border-radius:28px;
  background:#fff9ef;
  box-shadow:0 12px 32px rgba(70,46,13,.05);
}
.agent-icon{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#ffecaa;
  color:var(--red);
  font-weight:800;
  font-size:27px;
  margin-bottom:22px;
}
.agent-card h3{
  margin:0 0 8px;
  font:800 25px/1.15 "Playfair Display",serif;
  color:var(--red);
}
.agent-area,
.agent-phone,
.agent-notes{
  margin:5px 0;
  color:#775b3c;
  line-height:1.55;
}
.agent-phone{
  font-weight:700;
}
.agent-notes{
  font-size:14px;
}
.agent-wa{
  margin-top:auto;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-decoration:none;
  color:#176b39;
  font-weight:800;
  border-top:1px solid #eadbc1;
}
.agent-wa:hover{
  color:#0e4c28;
}
.agent-empty{
  padding:26px;
  border:1px dashed #d9c7a7;
  border-radius:20px;
  text-align:center;
  background:#fff9ef;
  color:var(--muted);
}
@media (max-width:900px){
  .agent-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:600px){
  .agent-section{
    padding:48px 0;
  }
  .agent-heading{
    margin-bottom:22px;
  }
  .agent-heading h2{
    font-size:32px;
  }
  .agent-grid{
    grid-template-columns:1fr;
  }
  .agent-card{
    min-height:0;
    padding:22px;
    border-radius:22px;
  }
}


/* V10 - Distributor & Agen model direktori */
.agent-section{
  padding:76px 0;
}
.agent-heading{
  max-width:780px;
}
.agent-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:26px 0 22px;
}
.agent-stat{
  padding:22px 18px;
  text-align:center;
  border:1px solid #eadbc1;
  border-radius:22px;
  background:#fff9ef;
}
.agent-stat strong{
  display:block;
  font:800 34px/1 "Playfair Display",serif;
  color:var(--red);
}
.agent-stat span{
  display:block;
  margin-top:7px;
  font-size:13px;
  color:var(--muted);
}
.agent-tools{
  margin-bottom:24px;
}
.agent-location-btn{
  appearance:none;
  border:0;
  border-radius:14px;
  background:var(--green);
  color:#fff;
  font-weight:800;
  padding:13px 17px;
  cursor:pointer;
  margin-bottom:12px;
}
.agent-location-btn:hover{
  filter:brightness(.95);
}
.agent-search-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:10px;
}
.agent-search{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  min-height:48px;
  border:1px solid #ddcfb7;
  border-radius:14px;
  background:#fff;
}
.agent-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font:inherit;
}
.agent-search-wrap select{
  min-height:48px;
  border:1px solid #ddcfb7;
  border-radius:14px;
  background:#fff;
  padding:0 12px;
  font:inherit;
}
.agent-location-status{
  margin:10px 0 0;
  color:var(--muted);
  font-size:13px;
}
.agent-accordion{
  display:grid;
  gap:12px;
}
.agent-province{
  border:1px solid #e7dbc6;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
}
.agent-province[hidden]{
  display:none !important;
}
.agent-province-toggle{
  width:100%;
  border:0;
  background:#fff9ef;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  cursor:pointer;
  color:var(--ink);
}
.agent-province-toggle strong{
  display:block;
  font-size:17px;
}
.agent-province-toggle small{
  display:block;
  margin-top:4px;
  color:var(--muted);
}
.agent-chevron{
  font-size:24px;
  transition:transform .2s ease;
}
.agent-province-toggle[aria-expanded="true"] .agent-chevron{
  transform:rotate(180deg);
}
.agent-province-content{
  padding:14px;
}
.agent-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.agent-card{
  min-height:100%;
  padding:22px;
  border-radius:20px;
  background:#fff;
}
.agent-card[hidden]{
  display:none !important;
}
.agent-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.agent-icon{
  width:54px;
  height:54px;
  margin:0;
  font-size:21px;
}
.agent-type-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  background:#f4ead8;
  color:#805926;
  font-size:12px;
  font-weight:800;
}
.agent-card-body{
  margin-top:16px;
}
.agent-card h3{
  font-size:22px;
}
.agent-address{
  margin:5px 0;
  color:#775b3c;
  line-height:1.55;
  font-size:14px;
}
.agent-distance{
  margin:10px 0 0;
  color:var(--green);
  font-weight:800;
  font-size:13px;
}
.agent-empty{
  margin-top:14px;
}

@media (max-width:760px){
  .agent-list{
    grid-template-columns:1fr;
  }
}

@media (max-width:600px){
  .agent-stats{
    grid-template-columns:1fr;
  }
  .agent-search-wrap{
    grid-template-columns:1fr;
  }
  .agent-stat{
    padding:16px;
  }
  .agent-stat strong{
    font-size:30px;
  }
  .agent-province-toggle{
    padding:16px;
  }
  .agent-province-content{
    padding:10px;
  }
}


/* V10.2 - Perbesar tulisan "AGEN & RESELLER RESMI" */
.agent-heading .eyebrow{
  font-size: 28px !important;
  line-height: 1.15 !important;
  letter-spacing: .12em !important;
  font-weight: 800 !important;
}

@media (max-width:600px){
  .agent-heading .eyebrow{
    font-size: 22px !important;
  }
}


/* V10.3 - Perbesar lagi tulisan "AGEN & RESELLER RESMI" */
.agent-heading .eyebrow{
  font-size: 44px !important;
  line-height: 1.05 !important;
  letter-spacing: .08em !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
}

@media (max-width:900px){
  .agent-heading .eyebrow{
    font-size: 36px !important;
  }
}

@media (max-width:600px){
  .agent-heading .eyebrow{
    font-size: 30px !important;
    letter-spacing: .06em !important;
  }
}


/* V10.4 - Paksa ukuran judul utama Distributor & Agen */
.agent-section .agent-heading .agent-title-main{
  display:block !important;
  font-size:56px !important;
  line-height:1.05 !important;
  letter-spacing:.05em !important;
  font-weight:900 !important;
  margin:0 0 16px !important;
  color:#a47600 !important;
}

@media (max-width:900px){
  .agent-section .agent-heading .agent-title-main{
    font-size:46px !important;
  }
}

@media (max-width:600px){
  .agent-section .agent-heading .agent-title-main{
    font-size:36px !important;
    letter-spacing:.035em !important;
  }
}


/* V10.5 - Internal scroll daftar Distributor & Agen */
.agent-tools{
  position:sticky;
  top:0;
  z-index:12;
  padding:14px 0 12px;
  background:linear-gradient(to bottom,#fff 88%,rgba(255,255,255,.92));
}

.agent-accordion{
  max-height:680px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:8px;
  scrollbar-gutter:stable;
  scroll-behavior:smooth;
}

/* scrollbar desktop */
.agent-accordion::-webkit-scrollbar{
  width:10px;
}
.agent-accordion::-webkit-scrollbar-track{
  background:#f6efe3;
  border-radius:999px;
}
.agent-accordion::-webkit-scrollbar-thumb{
  background:#d6ba7c;
  border-radius:999px;
  border:2px solid #f6efe3;
}
.agent-accordion::-webkit-scrollbar-thumb:hover{
  background:#bf9b4f;
}

/* Firefox */
.agent-accordion{
  scrollbar-width:thin;
  scrollbar-color:#d6ba7c #f6efe3;
}

@media (max-width:900px){
  .agent-accordion{
    max-height:620px;
  }
}

@media (max-width:600px){
  .agent-tools{
    position:sticky;
    top:0;
    padding:10px 0 10px;
  }

  .agent-accordion{
    max-height:560px;
    padding-right:4px;
  }

  .agent-accordion::-webkit-scrollbar{
    width:7px;
  }
}

/* V10.9 - Gaya animasi terinspirasi Herbalis: reveal saat scroll, objek melayang, hover lembut */
main h1,
main h2,
.platform-card h3,
.agent-section .agent-heading .agent-title-main{
  transform-origin:center bottom;
  text-shadow:0 1px 0 rgba(255,255,255,.62),
             0 2px 0 rgba(100,67,0,.08),
             0 6px 14px rgba(75,45,15,.13);
}

.agent-section .agent-heading .agent-title-main{
  position:relative;
  display:inline-block !important;
}

@keyframes mkslRevealUp{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes mkslProductFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

.motion-reveal{
  animation:mkslRevealUp 1.05s cubic-bezier(.2,.65,.25,1) var(--reveal-delay,0ms) backwards;
}
.motion-reveal:focus-within{animation:none;}

/* Gambar produk utama bergerak perlahan tanpa mengubah layout produk. */
.product-stage{
  transform-origin:center center;
  animation:mkslProductFloat 7s ease-in-out 1s infinite;
}

/* Kartu terasa terangkat seperti contoh referensi, hanya pada perangkat dengan hover. */
.price-card,
.agent-stat,
.agent-card,
.product-photo,
.spotlight-card,
.platform-card,
.float-card{
  transition:transform .4s ease,box-shadow .4s ease,background-color .4s ease;
}

@media (hover:hover) and (pointer:fine){
  .price-card:hover,
  .agent-stat:hover,
  .agent-card:hover,
  .product-photo:hover,
  .spotlight-card:hover,
  .platform-card:hover,
  .float-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 34px rgba(70,46,13,.12);
  }
  .btn{
    transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease;
  }
  .btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(70,46,13,.14);
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .motion-reveal,
  .product-stage{animation:none !important;}
  .price-card,
  .agent-stat,
  .agent-card,
  .product-photo,
  .spotlight-card,
  .platform-card,
  .float-card,
  .btn{transition:none !important;}
}

/* V10.11 - Reserve image box and keep responsive picture dimensions stable. */
.brand-mark picture,
.product-stage picture,
.product-photo picture,
.spotlight-photo picture { display:block; width:100%; }
.brand-mark picture { height:100%; }
.product-stage img,
.product-photo img,
.spotlight-photo img { display:block; width:100%; height:auto; }