/* ══════════════════════════
       PAGE HERO
    ══════════════════════════ */
    .page-hero {
      position: relative;
      min-height: 100svh; display: flex; align-items: flex-end;
      background: var(--navy); overflow: hidden;
    }
    .page-hero-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
      object-position: center 35%; opacity: .3;
    }
    .page-hero::before {
      content: ''; position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(160deg, oklch(11% 0.08 282 / .97) 0%, oklch(11% 0.08 282 / .65) 60%, oklch(11% 0.08 282 / .3) 100%);
    }
    .page-hero::after {
      content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background-image: linear-gradient(oklch(99% 0.005 88 / .018) 1px, transparent 1px), linear-gradient(90deg, oklch(99% 0.005 88 / .018) 1px, transparent 1px);
      background-size: 80px 80px;
    }
    .page-hero-inner {
      position: relative; z-index: 2;
      padding: clamp(110px, 13vw, 160px) 0 clamp(60px, 7vw, 96px);
      display: flex; flex-direction: column; gap: 18px;
    }
    .page-hero-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); display: flex; align-items: center; gap: 12px; }
    .page-hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--orange); flex-shrink: 0; }
    .page-hero-h { font-family: var(--ff-d); font-weight: 900; font-size: clamp(42px, 7vw, 96px); letter-spacing: -0.04em; line-height: 0.92; color: var(--ink); }
    .page-hero-h em { font-style: normal; color: var(--orange); }
    .page-hero-sub { font-size: clamp(14px, 1.5vw, 17px); color: oklch(99% 0.005 88 / .55); line-height: 1.65; max-width: 52ch; }
    .page-hero-tagline {
      font-family: var(--ff-d); font-size: clamp(11px, 1.2vw, 13px); font-weight: 600;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--lime); margin-top: 4px;
      display: flex; align-items: center; gap: 10px;
    }
    .page-hero-tagline::before { content: ''; width: 20px; height: 1px; background: var(--lime); flex-shrink: 0; }
    .page-hero-breadcrumb {
      position: absolute; bottom: 28px; right: clamp(20px, 4vw, 40px); z-index: 2;
      display: flex; align-items: center; gap: 10px;
      font-size: 11px; color: oklch(99% 0.005 88 / .35); letter-spacing: .04em;
    }
    .page-hero-breadcrumb a { color: oklch(99% 0.005 88 / .45); transition: color .2s; }
    .page-hero-breadcrumb a:hover { color: var(--orange); }
    .page-hero-breadcrumb > span { color: var(--orange); font-weight: 600; }

    /* ══════════════════════════
       STATS STRIP
    ══════════════════════════ */
    .stats-strip { background: var(--navy); border-top: 1px solid oklch(99% 0.005 88 / .08); }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
    .stat-cell {
      padding: clamp(28px, 4vw, 44px) clamp(20px, 2.5vw, 36px);
      border-right: 1px solid oklch(99% 0.005 88 / .07);
      display: flex; flex-direction: column; gap: 4px;
    }
    .stat-cell:last-child { border-right: none; }
    .stat-n { font-family: var(--ff-d); font-weight: 900; font-size: clamp(30px, 4.5vw, 54px); letter-spacing: -0.045em; line-height: 1; }
    .stat-n sup { font-size: .45em; vertical-align: .3em; }
    .stat-n.c-orange { color: var(--orange); }
    .stat-n.c-lime   { color: var(--lime); }
    .stat-l { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: oklch(99% 0.005 88 / .5); }
    .stat-s { font-size: 10px; color: oklch(99% 0.005 88 / .28); margin-top: 2px; }

    /* ══════════════════════════
       MAP SECTION
    ══════════════════════════ */
    .map-section { background: var(--bg); }

    .map-filter-bar {
      background: var(--ink); border-bottom: 1px solid oklch(22% 0.093 282 / .08);
      position: sticky; top: 0; z-index: 100;
    }
    .map-filter-inner {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      padding: 14px clamp(20px, 4vw, 40px);
      max-width: 1400px; margin: 0 auto;
    }
    .filter-label {
      font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
      color: var(--muted); margin-right: 4px; white-space: nowrap;
    }
    .filter-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px; border-radius: 20px; cursor: pointer; border: none;
      font-family: var(--ff-b); font-size: 12px; font-weight: 600;
      background: oklch(22% 0.093 282 / .07); color: oklch(22% 0.093 282 / .55);
      border: 1.5px solid oklch(22% 0.093 282 / .1);
      transition: all .18s; white-space: nowrap;
    }
    .filter-pill .pill-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    }
    .filter-pill.active {
      color: var(--ink); border-color: transparent;
    }
    .filter-pill.active.cat-all        { background: var(--forest); }
    .filter-pill.active.cat-stasiun    { background: var(--c-stasiun); }
    .filter-pill.active.cat-bandara    { background: var(--c-bandara); }
    .filter-pill.active.cat-rsud       { background: var(--c-rsud); }
    .filter-pill.active.cat-kementerian{ background: var(--c-kementerian); }
    .filter-pill.active.cat-kominfo    { background: var(--c-kominfo); }
    .filter-pill.active.cat-dukcapil   { background: var(--c-dukcapil); color: var(--forest); }
    .filter-pill.active.cat-lainnya    { background: var(--c-lainnya); }
    .filter-count {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 18px; height: 18px; padding: 0 5px;
      border-radius: 9px; font-size: 10px; font-weight: 700;
      background: oklch(22% 0.093 282 / .12); color: var(--muted);
      transition: background .18s, color .18s;
    }
    .filter-pill.active .filter-count { background: oklch(99% 0.005 88 / .25); color: var(--ink); }
    .filter-pill.active.cat-dukcapil .filter-count { color: var(--forest); }

    .map-container {
      position: relative;
      width: 100%;
    }
    #map {
      width: 100%;
      height: min(78vh, 720px);
    }

    /* Custom numbered marker */
    .marker-icon {
      width: 28px; height: 28px;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      border: 2px solid oklch(99% 0.005 88 / .9);
      box-shadow: 0 2px 8px oklch(0% 0 0 / .28);
      display: flex; align-items: center; justify-content: center;
    }
    .marker-inner {
      transform: rotate(45deg);
      font-family: 'Poppins', sans-serif;
      font-size: 9px; font-weight: 700;
      color: #fff; line-height: 1;
    }

    /* Override Leaflet cluster colors */
    .marker-cluster-small  { background-color: rgba(232, 132, 28, .22); }
    .marker-cluster-small  div { background-color: rgba(232, 132, 28, .72); color: #fff; }
    .marker-cluster-medium { background-color: rgba(139, 92, 246, .22); }
    .marker-cluster-medium div { background-color: rgba(139, 92, 246, .72); color: #fff; }
    .marker-cluster-large  { background-color: rgba(59, 130, 246, .22); }
    .marker-cluster-large  div { background-color: rgba(59, 130, 246, .72); color: #fff; }

    /* Leaflet popup */
    .leaflet-popup-content-wrapper {
      border-radius: 6px;
      box-shadow: 0 8px 32px oklch(22% 0.093 282 / .18);
    }
    .popup-inner { min-width: 200px; }
    .popup-no {
      font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 4px;
    }
    .popup-name { font-size: 14px; font-weight: 700; color: var(--forest); line-height: 1.3; margin-bottom: 6px; }
    .popup-cat {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 10px; border-radius: 12px;
      font-size: 11px; font-weight: 600;
      margin-bottom: 6px;
    }
    .popup-cat svg { width: 12px; height: 12px; flex-shrink: 0; }
    .popup-addr { font-size: 12px; color: var(--muted); line-height: 1.5; }

    /* Map loading state */
    .map-loading {
      position: absolute; inset: 0; z-index: 500;
      background: oklch(95% 0.004 282);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 16px;
    }
    .map-loading-ring {
      width: 40px; height: 40px; border-radius: 50%;
      border: 3px solid oklch(22% 0.093 282 / .12);
      border-top-color: var(--orange);
      animation: spin .8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .map-loading-txt { font-size: 13px; color: var(--muted); font-weight: 500; }

    /* ══════════════════════════
       COVERAGE SUMMARY
    ══════════════════════════ */
    .cov-summary { background: #F3F2ED; }
    .cov-inner { padding: clamp(56px, 7vw, 88px) 0; }
    .cov-hdr { margin-bottom: 48px; }
    .cov-hdr .lbl { color: var(--orange); margin-bottom: 16px; }
    .cov-hdr h2 { font-family: var(--ff-d); font-weight: 700; font-size: clamp(24px, 3vw, 40px); letter-spacing: -0.03em; color: var(--forest); }

    .cov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
    .cov-card {
      background: var(--ink); border-radius: 8px;
      padding: 24px 22px; display: flex; flex-direction: column; gap: 8px;
      border: 1px solid oklch(22% 0.093 282 / .07);
      transition: box-shadow .2s, transform .2s;
      cursor: default;
    }
    .cov-card:hover { box-shadow: 0 8px 32px oklch(22% 0.093 282 / .1); transform: translateY(-2px); }
    .cov-card-ico {
      width: 44px; height: 44px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; margin-bottom: 4px;
    }
    .cov-card-ico svg { display: block; width: 1em; height: 1em; }
    .cov-card-n { font-family: var(--ff-d); font-weight: 900; font-size: 36px; letter-spacing: -0.045em; line-height: 1; }
    .cov-card-l { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
    .cov-card-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 4px; }