/* =====================================================================
   BX3 SEBARAN STORE (bx3-reach, 3.6.0) - widget kecil untuk Kemitraan / Menu.
   Tampilan "Peta": teks + angka + cari store di kiri, peta titik Indonesia di kanan (lingkaran oranye = store per kota,
   besar lingkaran = jumlah store; sentuh/hover = nama kota + jumlah; klik = daftar store kota itu di halaman Lokasi Store).
   Tampilan "Ringkas": satu pita: angka besar + judul + cari store (untuk halaman Menu).
   Jumlah store = teks manual (Pengaturan, mis. 550+); kota & provinsi dihitung dari data. HP: angka di tengah.
   Peta titik = SVG ringan (tanpa layanan peta / API key), dari koordinat store.
   ===================================================================== */

.bx3.bx3-reach{--bx3-max:var(--bx3-wide);display:block;background:var(--bx3-white);padding:var(--bx3-sec-y) var(--bx3-pad-x)}
.bx3.bx3-reach--cream{background:var(--bx3-cream)}
.bx3 .bx3-reach__in{max-width:var(--bx3-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,5vw,96px);align-items:center}

/* Statistik */
.bx3 .bx3-reach__stats{display:flex;gap:clamp(24px,3vw,48px);margin:clamp(28px,3vw,44px) 0 0;padding:clamp(20px,2vw,28px) 0 0;border-top:1px solid var(--bx3-line)}
.bx3 .bx3-reach__stats div{margin:0}
.bx3 .bx3-reach__stats dt{order:2;margin-top:6px;font-size:var(--bx3-fs-xs);line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--bx3-ink-soft)}
.bx3 .bx3-reach__stats div{display:flex;flex-direction:column}
.bx3 .bx3-reach__stats dd{order:1;margin:0;font-size:clamp(2rem,3vw,3rem);font-weight:700;line-height:1;color:var(--bx3-ink);font-variant-numeric:tabular-nums}

/* Cari */
.bx3 .bx3-reach__form{position:relative;display:flex;align-items:center;width:100%;max-width:440px;margin-top:clamp(28px,3vw,40px)}
.bx3 .bx3-reach__icon{position:absolute;left:18px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--bx3-ink-soft);pointer-events:none}
.bx3 .bx3-reach__icon svg{display:block;width:100%;height:100%}
.bx3 .bx3-reach__form input[type="search"]{width:100%;height:52px;margin:0;padding:0 96px 0 46px;border:1px solid var(--bx3-line-btn);border-radius:999px;background:var(--bx3-white);font-family:var(--bx3-font);font-size:16px;line-height:1.2;color:var(--bx3-ink);box-shadow:none;outline:none;-webkit-appearance:none;appearance:none;transition:border-color var(--bx3-t) var(--bx3-ease)}
.bx3 .bx3-reach__form input[type="search"]::placeholder{color:var(--bx3-ink-soft);opacity:.8}
.bx3 .bx3-reach__form input[type="search"]:focus{border-color:var(--bx3-choc)}
.bx3 .bx3-reach__form input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.bx3 .bx3-reach__form button[type="submit"]{position:absolute;right:6px;top:6px;bottom:6px;margin:0;padding:0 22px;border:0;border-radius:999px;background:var(--bx3-choc);font-family:var(--bx3-font);font-size:var(--bx3-fs-sm);font-weight:400;line-height:1;color:var(--bx3-white);text-transform:none;letter-spacing:0;cursor:pointer;transition:background-color var(--bx3-t) var(--bx3-ease)}
.bx3 .bx3-reach__form button[type="submit"]:is(:hover,:focus-visible){background:#4E2D19;color:var(--bx3-white)}
.bx3 .bx3-reach__form button[type="submit"]:active{transform:scale(.98)}
.bx3 .bx3-reach__links{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:16px;font-size:var(--bx3-fs-sm);line-height:1.4}
.bx3 .bx3-reach__links a[href]{display:inline-flex;align-items:center;gap:6px;color:var(--bx3-ink);text-decoration:underline;text-decoration-color:var(--bx3-line-btn);text-underline-offset:5px;transition:text-decoration-color var(--bx3-t) var(--bx3-ease)}
.bx3 .bx3-reach__links a[href]:is(:hover,:focus-visible){color:var(--bx3-ink);text-decoration:underline;text-decoration-color:currentColor}
.bx3 .bx3-reach__links svg{width:16px;height:16px;color:var(--bx3-orange)}

/* Peta titik */
.bx3 .bx3-reach__map{position:relative;margin:0}
.bx3 .bx3-reach__svg{display:block;width:100%;height:auto;overflow:visible}
.bx3 .bx3-reach__land{fill:none;stroke:#E0CAA6;stroke-width:4.2;stroke-linecap:round}
.bx3.bx3-reach--cream .bx3-reach__land{stroke:#E2C69B}
.bx3 a.bx3-reach__city[href]{cursor:pointer;outline:none}
.bx3 .bx3-reach__city circle{fill:var(--bx3-orange);fill-opacity:.72;stroke:var(--bx3-white);stroke-width:1.2;transform-box:fill-box;transform-origin:center;transition:fill-opacity var(--bx3-t) var(--bx3-ease),transform var(--bx3-t) var(--bx3-ease)}
.bx3.bx3-reach--cream .bx3-reach__city circle{stroke:var(--bx3-cream)}
.bx3 a.bx3-reach__city[href]:is(:hover,:focus-visible,.is-hot) circle{fill-opacity:1;transform:scale(1.18)}
.bx3 a.bx3-reach__city[href]:focus-visible circle{stroke:var(--bx3-choc);stroke-width:2.4}
/* muncul: daratan memudar, lalu lingkaran tumbuh dari barat ke timur */
.bx3-js .bx3 .bx3-reach__land{opacity:0;transition:opacity 1s var(--bx3-ease)}
.bx3-js .bx3 .bx3-reach__city circle{transform:scale(0);transition:transform .7s var(--bx3-ease) calc(var(--d,0ms) + 350ms),fill-opacity var(--bx3-t) var(--bx3-ease)}
.bx3-js .bx3 .bx3-reach__map.is-in .bx3-reach__land{opacity:1}
.bx3-js .bx3 .bx3-reach__map.is-in .bx3-reach__city circle{transform:scale(1)}
.bx3-js .bx3 .bx3-reach__map.is-in a.bx3-reach__city[href]:is(:hover,:focus-visible,.is-hot) circle{transform:scale(1.18);transition-delay:0ms}

.bx3 .bx3-reach__tip{position:absolute;left:0;top:0;z-index:2;padding:9px 14px;border-radius:10px;background:var(--bx3-white);box-shadow:0 10px 28px -10px rgba(40,22,12,.4),0 0 0 1px var(--bx3-line);pointer-events:none;white-space:nowrap;opacity:0;transform:translate3d(var(--tx,0),calc(var(--ty,0) + 6px),0);transition:opacity .2s var(--bx3-ease),transform .2s var(--bx3-ease)}
.bx3 .bx3-reach__map.is-tip .bx3-reach__tip{opacity:1;transform:translate3d(var(--tx,0),var(--ty,0),0)}
.bx3 .bx3-reach__tip b{display:block;font-size:var(--bx3-fs-sm);font-weight:700;line-height:1.3;color:var(--bx3-ink)}
.bx3 .bx3-reach__tip span{display:block;font-size:var(--bx3-fs-xs);line-height:1.4;color:var(--bx3-ink-soft)}

/* ---------- Tampilan Ringkas (pita) ---------- */
.bx3.bx3-reach--band{padding-top:clamp(56px,6vw,104px);padding-bottom:clamp(56px,6vw,104px)}
.bx3.bx3-reach--band .bx3-reach__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}
.bx3 .bx3-reach__big{font-size:clamp(4.5rem,9vw,8.5rem);font-weight:700;line-height:.9;letter-spacing:-.02em;color:var(--bx3-orange);font-variant-numeric:tabular-nums}
.bx3 .bx3-reach__cap{margin-top:14px;font-size:var(--bx3-fs-xs);line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--bx3-ink-soft)}
.bx3.bx3-reach--band .bx3-reach__form{max-width:520px}
.bx3.bx3-reach--band .bx3-reach__body{padding-bottom:4px}

@media (max-width:899px){
  .bx3 .bx3-reach__in,.bx3.bx3-reach--band .bx3-reach__in{grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
  .bx3 .bx3-reach__map{order:-1;margin:0 calc(var(--bx3-pad-x) * -.5)}
  .bx3 .bx3-reach__form{max-width:none}
  /* angka di tengah; judul, kalimat, cari tetap rata kiri */
  .bx3 .bx3-reach__stats{justify-content:center;text-align:center}
  .bx3 .bx3-reach__stats div{align-items:center}
  .bx3.bx3-reach--band .bx3-reach__lead{text-align:center}
}
@media (max-width:599px){
  .bx3 .bx3-reach__stats{gap:24px}
  .bx3 .bx3-reach__land{stroke-width:4.8}
}
@media (prefers-reduced-motion:reduce){
  .bx3-js .bx3 .bx3-reach__land,.bx3-js .bx3 .bx3-reach__city circle{opacity:1;transform:none;transition:none}
}