.jk{padding-top:56px}
.jk-card{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:clamp(20px,3.2vw,40px);border-radius:24px;background:#fff;border:1px solid var(--steel);overflow:hidden}
.jk-info{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:20px 40px;align-items:end}
.jk-info>.jk-lead{grid-column:1;align-self:center}
.jk-info>.jk-stats{grid-column:2}
.jk-info>.jk-chips,.jk-info>.jk-cta{grid-column:1/-1}
.jk-info>.jk-cta{justify-self:start}
.jk-lead{margin:0;max-width:60ch;color:var(--slate);line-height:1.75}
.jk-stats{display:flex;flex-wrap:wrap;gap:12px 32px;list-style:none;margin:0;padding:0}
.jk-stats li{display:grid;gap:2px}
.jk-stats b{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;line-height:1.1;letter-spacing:-.01em;color:var(--blue)}
.jk-stats span{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.jk-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.jk-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:0;border-radius:99px;background:var(--mist);font:500 .84rem var(--sans);color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.jk-chip i{width:7px;height:7px;border-radius:50%;background:var(--blue);transition:background .2s}
.jk-chip:hover,.jk-chip:focus-visible,.jk-chip.on{background:var(--ink);color:#fff}
.jk-chip:hover i,.jk-chip:focus-visible i,.jk-chip.on i{background:var(--sky)}
.jk-cta{margin-top:4px}

.jk-map{position:relative;min-width:0}
.jk-map svg{display:block;width:100%;height:auto;overflow:visible}
.jk-dots{fill:none;stroke:var(--steel);stroke-width:3.6;stroke-linecap:round}
.jk-dots-lain{stroke:var(--mist)}

.jk-g{transition:opacity .25s}
.jk-map.has-on .jk-g:not(.on){opacity:.16}
.jk-arc{fill:none;stroke:var(--blue);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.6;transition:stroke-width .2s,opacity .2s}
.jk-g.on .jk-arc{stroke-width:2.2;opacity:1}
.jk-pkt{fill:#fff;stroke:var(--blue);stroke-width:1.6}
.jk-dot{fill:var(--blue);transform-box:fill-box;transform-origin:center;transition:fill .2s}
.jk-g.on .jk-dot{fill:var(--ink)}
.jk-ring{fill:none;stroke:var(--blue);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.jk-hit{fill:transparent;cursor:pointer}

.js .jk-map:not(.go) .jk-arc{stroke-dashoffset:1}
.js .jk-map:not(.go) .jk-dot{opacity:0}
.jk-map.go .jk-arc{animation:jkdraw 1.5s var(--d) cubic-bezier(.45,0,.2,1) backwards}
.jk-map.go .jk-dot{animation:jkpop .55s calc(var(--d) + 1.3s) cubic-bezier(.3,1.6,.5,1) backwards}
.jk-map.go .jk-ring{animation:jkring 2.8s calc(var(--d) + 1.6s) infinite ease-out}

.jk-o-dot{fill:var(--ink)}
.jk-o-ring{fill:none;stroke:var(--ink);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center;animation:jkring 2.4s infinite ease-out}
.jk-o-ring2{animation-delay:1.2s}

.jk-tag,.jk-tip{position:absolute;white-space:nowrap;pointer-events:none;font-size:.78rem;font-weight:600;line-height:1;border-radius:99px}
.jk-tag{transform:translate(-50%,calc(-100% - 16px));padding:7px 12px;background:var(--ink);color:#fff;box-shadow:0 6px 18px rgba(11,14,19,.22)}
.jk-tip{transform:translate(-50%,calc(-100% - 14px));padding:6px 11px;background:#fff;color:var(--ink);box-shadow:0 6px 18px rgba(11,14,19,.2),inset 0 0 0 1px var(--steel);opacity:0;transition:opacity .2s}
.jk-tip.show{opacity:1}

@keyframes jkdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes jkpop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes jkring{0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(2.8)}}

@media(max-width:900px){
  .jk-info{grid-template-columns:minmax(0,1fr)}
  .jk-info>.jk-lead,.jk-info>.jk-stats{grid-column:1}
}
@media(max-width:560px){
  .jk{padding-top:40px}
  .jk-cta{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .jk-map .jk-arc,.jk-map .jk-dot,.jk-map .jk-ring,.jk-o-ring{animation:none!important}
  .js .jk-map:not(.go) .jk-arc{stroke-dashoffset:0}
  .js .jk-map:not(.go) .jk-dot{opacity:1}
  .jk-pkt,.jk-o-ring{display:none}
}

/* ===== Peta lebih besar di mobile (geser horizontal, mulai dari Pulau Jawa) ===== */
.jk-scroll{min-width:0}
.jk-geser{display:none}
@media(max-width:700px){
  .jk-card{padding-inline:0}
  .jk-info{padding-inline:20px}
  .jk-geser{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
  .jk-geser::before,.jk-geser::after{content:"";width:18px;height:2px;border-radius:2px;background:var(--steel)}
  .jk-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;padding-top:34px}
  .jk-scroll::-webkit-scrollbar{display:none}
  .jk-map{width:235%}
  .jk-tag{font-size:.9rem;padding:8px 14px}
  .jk-tip{font-size:.88rem;padding:8px 13px}
}