:root{
  --musi-blue:#123B82; --musi-blue-dark:#050B24; --musi-blue-light:#E7EDFA;
  --musi-green:#B8860B; --musi-green-light:#FBF1DC; --musi-green-dark:#8A6A1F;
  --musi-gold:#D4AF37; --musi-gold-light:#FBF1DC;
  --musi-gold-2:#F2D375; --musi-blue-2:#1E4FA0;
  --ink:#0E2233; --ink-soft:#3D5468; --muted:#6B8194;
  --bg:#E7EDF2; --surface:#FFFFFF; --surface-2:#EAF0F4;
  --line:#D3DFE7; --line-strong:#B9CAD5;
  --danger:#C4453B; --danger-bg:#FBEAE8;
  --shadow: 0 1px 3px rgba(11,95,168,.08), 0 1px 2px rgba(11,95,168,.06);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1100px 700px at 102% -8%, rgba(212,175,55,.14) 0%, transparent 58%),
    radial-gradient(900px 600px at -8% 8%, rgba(18,59,130,.14) 0%, transparent 55%),
    radial-gradient(700px 500px at 50% 105%, rgba(11,42,107,.10) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(18,59,130,.035) 0px, rgba(18,59,130,.035) 2px, transparent 2px, transparent 26px),
    var(--bg);
  background-attachment: fixed;
  color:var(--ink); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.jakarta{ font-family:'Plus Jakarta Sans',sans-serif; }
.mono{font-family:'IBM Plex Mono',monospace;}
a{ color:inherit; }
button{ font-family:inherit; }

/* ===== TOP BAR ===== */
/* ===== TOP BAR (ramping, hanya brand) ===== */
.topbar{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(100deg, var(--musi-blue-dark) 0%, var(--musi-blue) 60%, var(--musi-blue-2) 100%);
  color:#fff; padding:0 20px;
  box-shadow:0 4px 16px rgba(5,11,36,.35), inset 0 1px 0 rgba(255,255,255,.08);
  border-bottom:1px solid rgba(212,175,55,.3);
}
.topbar-inner{ display:flex; align-items:center; gap:14px; height:60px; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; cursor:pointer; }
.brand-mark{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; }
.brand-mark img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 1px 3px rgba(0,0,0,.25)); }
.brand-text .b-name{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:17px; letter-spacing:.02em; line-height:1.1; }
.brand-text .b-tag{ font-size:9.5px; color:#CFE7F5; letter-spacing:.02em; }

.hamburger{ display:none; background:rgba(255,255,255,.14); border:none; color:#fff; font-size:18px; cursor:pointer; width:36px; height:36px; border-radius:8px; margin-left:auto; }

/* ===== APP SHELL: SIDEBAR + MAIN ===== */
.app-shell{ display:flex; align-items:flex-start; max-width:1500px; margin:0 auto; }
.sidebar{ width:250px; flex-shrink:0; position:sticky; top:60px; height:calc(100vh - 60px); overflow-y:auto;
  background:var(--surface); border-right:1px solid var(--line); padding:14px 10px 40px; }
/* ===== SIDEBAR: kesan 3D minimalis modern ===== */
.sidebar-group{ margin-bottom:4px; }
.sidebar-group-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid transparent;
  padding:11px 12px; border-radius:10px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700;
  color:var(--ink-soft); cursor:pointer; text-align:left; transition:all .15s ease; box-shadow:0 1px 2px rgba(11,42,107,.05); }
.sidebar-group-btn:hover{ background:var(--musi-blue-light); color:var(--musi-blue-dark); transform:translateX(2px);
  box-shadow:0 3px 8px rgba(11,42,107,.12); }
.sidebar-group-btn .sg-car{ font-size:9px; transition:transform .18s; color:var(--muted); }
.sidebar-group.open .sidebar-group-btn .sg-car{ transform:rotate(180deg); }
.sidebar-group.open .sidebar-group-btn{ color:var(--musi-blue-dark); background:var(--musi-blue-light);
  box-shadow:inset 0 1px 3px rgba(11,42,107,.1); border-color:var(--line); }
.sidebar-sub{ display:none; padding-left:14px; margin:4px 0 8px; border-left:2px solid var(--line); margin-left:22px; }
.sidebar-group.open .sidebar-sub{ display:block; animation:sidebarDrop .18s ease; }
@keyframes sidebarDrop{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.sidebar-link{ display:block; width:100%; text-align:left; background:none; border:none; padding:9px 14px; font-size:12.5px;
  color:var(--muted); cursor:pointer; border-radius:0 8px 8px 0; font-family:'Inter',sans-serif; transition:all .15s ease; margin-bottom:1px; }
.sidebar-link:hover{ background:var(--musi-blue-light); color:var(--musi-blue-dark); transform:translateX(3px); }
.sidebar-link.active{ background:linear-gradient(100deg, var(--musi-gold-light), #fff); color:var(--musi-green-dark); font-weight:700;
  border-left:3px solid var(--musi-gold); margin-left:-2px; padding-left:15px; box-shadow:0 2px 6px rgba(212,175,55,.25); }
.sidebar-single{ display:block; width:100%; text-align:left; background:var(--surface); border:1px solid transparent; padding:11px 12px; border-radius:10px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700; color:var(--ink-soft); cursor:pointer; margin-bottom:4px;
  transition:all .15s ease; box-shadow:0 1px 2px rgba(11,42,107,.05); }
.sidebar-single:hover{ background:var(--musi-blue-light); color:var(--musi-blue-dark); transform:translateX(2px); box-shadow:0 3px 8px rgba(11,42,107,.12); }
.sidebar-single.active{ background:linear-gradient(100deg, var(--musi-blue), var(--musi-blue-2)); color:#fff;
  box-shadow:0 4px 12px rgba(18,59,130,.35); border-color:var(--musi-blue); }
.sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(8,30,50,.5); z-index:150; }
.sidebar{ box-shadow:2px 0 12px rgba(11,42,107,.06); }

main{ flex:1; min-width:0; max-width:1250px; margin:0; padding:0 28px 80px; }

.view{ display:none; padding-top:26px; }
.view.active{ display:block; }
.subview{ display:none; }
.subview.active{ display:block; }

.section-title{ font-size:21px; font-weight:800; margin:0 0 4px; color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif; }
.section-sub{ font-size:13px; color:var(--muted); margin:0 0 20px; max-width:760px; }
.subsection-title{ font-size:15px; font-weight:800; margin:24px 0 4px; }
.subsection-sub{ font-size:12.5px; color:var(--muted); margin:0 0 14px; }

/* ===== SUBTABS ===== */
.subtabs{ display:flex; gap:4px; margin-bottom:22px; border-bottom:2px solid var(--line); flex-wrap:wrap; }
.subtab-btn{ background:none; border:none; padding:10px 16px; font-size:13px; font-weight:700; color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-2px; font-family:'Plus Jakarta Sans',sans-serif; transition:all .15s ease; border-radius:6px 6px 0 0; }
.subtab-btn:hover{ color:var(--musi-blue); background:var(--musi-blue-light); }
.subtab-btn.active{ color:var(--musi-blue); border-bottom-color:var(--musi-gold); background:var(--musi-blue-light); }

/* ===== HERO ===== */
.hero{ background:
    repeating-linear-gradient(115deg, rgba(212,175,55,0) 0px, rgba(212,175,55,0) 46px, rgba(242,211,117,.16) 48px, rgba(212,175,55,0) 50px, rgba(212,175,55,0) 130px),
    radial-gradient(ellipse 520px 420px at 85% 12%, rgba(212,175,55,.55) 0%, transparent 65%),
    radial-gradient(ellipse 420px 340px at 98% 60%, rgba(242,211,117,.45) 0%, transparent 65%),
    radial-gradient(ellipse 380px 300px at 8% 92%, rgba(212,175,55,.4) 0%, transparent 68%),
    radial-gradient(ellipse 300px 260px at 40% 100%, rgba(212,175,55,.25) 0%, transparent 70%),
    linear-gradient(125deg,var(--musi-blue-dark) 0%, var(--musi-blue) 50%, var(--musi-blue-2) 100%);
  border-radius:18px; padding:44px 44px; color:#fff; margin:22px 0 28px; position:relative; overflow:hidden;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap; border:1px solid rgba(212,175,55,.4);
  box-shadow: inset 0 0 60px rgba(212,175,55,.08); }
.hero::after{ content:''; position:absolute; right:-60px; bottom:-80px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.3) 0%, transparent 70%); }
.hero::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(2.4px 2.4px at 12% 20%, rgba(255,255,255,.7) 0%, transparent 60%),
    radial-gradient(2px 2px at 25% 55%, rgba(242,211,117,.9) 0%, transparent 60%),
    radial-gradient(2.6px 2.6px at 42% 15%, rgba(255,255,255,.6) 0%, transparent 60%),
    radial-gradient(2px 2px at 58% 70%, rgba(242,211,117,.85) 0%, transparent 60%),
    radial-gradient(2.4px 2.4px at 75% 35%, rgba(255,255,255,.65) 0%, transparent 60%),
    radial-gradient(2px 2px at 88% 80%, rgba(242,211,117,.8) 0%, transparent 60%),
    radial-gradient(2.2px 2.2px at 15% 85%, rgba(242,211,117,.75) 0%, transparent 60%),
    radial-gradient(1.8px 1.8px at 65% 92%, rgba(255,255,255,.55) 0%, transparent 60%),
    radial-gradient(2px 2px at 95% 10%, rgba(242,211,117,.7) 0%, transparent 60%),
    radial-gradient(1.8px 1.8px at 35% 40%, rgba(255,255,255,.5) 0%, transparent 60%);
  opacity:1; }
.hero-text{ flex:1 1 460px; min-width:280px; position:relative; z-index:1; }
.hero-logo{ flex:0 0 auto; width:250px; max-width:38%; position:relative; z-index:1; display:flex; justify-content:center; }
.songket-ornament{ width:100%; height:auto; filter:drop-shadow(0 0 14px rgba(255,255,255,.35)); animation:songketGlow 4s ease-in-out infinite; }
@keyframes songketGlow{
  0%,100%{ filter:drop-shadow(0 0 10px rgba(255,255,255,.28)); }
  50%{ filter:drop-shadow(0 0 20px rgba(212,175,55,.55)); }
}
.hero h1{ font-size:32px; font-weight:800; line-height:1.25; margin:0 0 14px; position:relative; }
.hero p.sub{ font-size:14.5px; color:#DCEFF6; max-width:560px; line-height:1.6; margin:0 0 24px; position:relative; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; position:relative; }
.btn-cta{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:13px; padding:12px 22px; border-radius:9px; border:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease; }
.btn-cta:hover{ transform:translateY(-2px); }
.btn-cta.primary{ box-shadow:0 4px 14px rgba(0,0,0,.2); }
.btn-cta.primary:hover{ box-shadow:0 8px 20px rgba(212,175,55,.35); }
.btn-cta.primary{ background:#fff; color:var(--musi-blue-dark); }
.btn-cta.ghost{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4); }
.hero-tagline{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,.16); padding:5px 12px; border-radius:20px; margin-bottom:16px; position:relative; }
@media (max-width:760px){ .hero-logo{ display:none; } }

/* ===== KPI ===== */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:22px; }
.kpi-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease; }
.kpi-card:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(11,42,107,.14); }
.kpi-card .k-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; margin-bottom:8px;}
.kpi-card .k-val{ font-family:'Plus Jakarta Sans',sans-serif; font-size:25px; font-weight:800; color:var(--musi-blue); }
.kpi-card .k-sub{ font-size:11px; color:var(--muted); margin-top:4px;}
.kpi-card.green .k-val{ color:var(--musi-green); }
.kpi-card.gold .k-val{ color:#8a6a1f; }
.kpi-card.small{ padding:14px 16px; } .kpi-card.small .k-val{ font-size:19px; }

.grid-2{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-bottom:20px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
@media (max-width:980px){ .grid-2{grid-template-columns:1fr;} .grid-3{grid-template-columns:1fr;} }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px; box-shadow:var(--shadow); margin-bottom:18px;
  transition:box-shadow .18s ease, transform .18s ease; }
.card:hover{ box-shadow:0 6px 18px rgba(11,42,107,.1); }
.card h3{ font-size:14.5px; margin:0 0 4px; }
.card .card-sub{ font-size:12px; color:var(--muted); margin:0 0 14px; }

.pill{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:10.5px; font-weight:700; }
.pill.blue{ background:var(--musi-blue-light); color:var(--musi-blue); }
.pill.green{ background:var(--musi-green-light); color:var(--musi-green-dark); }
.pill.gold{ background:var(--musi-gold-light); color:#8a6a1f; }
.pill.gray{ background:var(--surface-2); color:var(--muted); border:1px solid var(--line-strong); }

table.simple{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.simple thead th{ text-align:left; padding:9px 10px; background:var(--surface-2); color:var(--ink-soft); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line-strong); position:sticky; top:0; }
table.simple tbody td{ padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
table.simple tbody tr:hover{ background:var(--musi-blue-light); }
td.num{ font-family:'IBM Plex Mono',monospace; text-align:right; white-space:nowrap; }

/* ===== NOT AVAILABLE ===== */
.data-unavailable{ background:var(--surface-2); border:1px dashed var(--line-strong); border-radius:10px; padding:22px;
  text-align:center; color:var(--muted); font-size:12.5px; }
.data-unavailable .du-title{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:13.5px; color:var(--ink-soft); margin-bottom:6px;}
.field-na{ color:var(--muted); font-style:italic; font-size:12px; }

.caveat-box{ background:var(--danger-bg); border:1px solid #F0C7C2; border-radius:8px; padding:14px 16px; margin-top:14px; }
.caveat-box .cb-title{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:12.5px; color:var(--danger); margin:0 0 6px; }
.caveat-box ul{ margin:0; padding-left:18px; font-size:12px; color:var(--ink-soft); line-height:1.6;}
.note-box{ background:var(--musi-blue-light); border:1px solid #C9E0F3; border-radius:8px; padding:12px 15px; font-size:12px; color:var(--ink-soft); margin-top:12px; }

/* ===== DIREKTORI ===== */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.filter-bar select, .filter-bar input{ height:38px; border:1px solid var(--line-strong); border-radius:8px; padding:0 12px;
  font-size:12.5px; background:var(--surface); color:var(--ink); font-family:'Inter',sans-serif; }
.filter-bar input[type=text]{ flex:1; min-width:220px; }
.umkm-card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.umkm-card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px; box-shadow:var(--shadow); cursor:pointer; }
.umkm-card:hover{ border-color:var(--musi-blue); }
.umkm-card .uc-name{ font-weight:700; font-size:13px; margin:0 0 4px; }
.uc-name .skala-tag{ margin-left:6px; }
.umkm-card .uc-desc{ font-size:11.5px; color:var(--muted); margin:0 0 8px; }
.umkm-card .uc-foot{ display:flex; justify-content:space-between; align-items:center; font-size:11px; }
.skala-tag{ font-size:9px; font-weight:700; padding:2px 7px; border-radius:20px; text-transform:uppercase; }
.skala-tag.mikro{ background:var(--musi-green-light); color:var(--musi-green-dark);}
.skala-tag.kecil{ background:#e8ecf6; color:#3a4f8a;}
.skala-tag.menengah{ background:var(--musi-gold-light); color:#8a6a1f;}

.pagination{ display:flex; justify-content:center; align-items:center; gap:14px; padding:18px 0 4px; font-size:12.5px; color:var(--muted); }
.pagination button{ border:1px solid var(--line-strong); background:var(--surface); border-radius:6px; padding:6px 14px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.pagination button:disabled{ opacity:.4; cursor:not-allowed; }
.pagination .pg-info{ font-family:'IBM Plex Mono',monospace; }

/* ===== MODAL ===== */
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(8,30,50,.55); z-index:500; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal-box{ background:#fff; border-radius:14px; max-width:560px; width:100%; max-height:85vh; overflow-y:auto; padding:28px; position:relative; }
.modal-close{ position:absolute; top:16px; right:16px; background:var(--surface-2); border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:15px; color:var(--muted); }
.modal-box h2{ font-size:19px; margin:0 0 4px; }
.detail-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-top:1px solid var(--line); font-size:12.5px; }
.detail-row:first-of-type{ border-top:none; }
.detail-row .dr-label{ color:var(--muted); }
.detail-row .dr-val{ font-weight:600; text-align:right; }
.modal-actions{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.modal-actions button{ flex:1; min-width:100px; padding:10px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface-2); font-size:12px; font-weight:700; cursor:pointer; color:var(--ink-soft); }
.modal-actions button.primary{ background:var(--musi-blue); color:#fff; border-color:var(--musi-blue); }

/* ===== AI ===== */
.ai-shell{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.ai-header{ background:linear-gradient(100deg,var(--musi-blue-dark),var(--musi-blue-2)); color:#fff; padding:16px 20px; display:flex; align-items:center; gap:10px; }
.ai-body{ padding:20px; min-height:280px; max-height:440px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.ai-msg{ max-width:80%; padding:11px 14px; border-radius:12px; font-size:13px; line-height:1.55; }
.ai-msg.bot{ background:var(--surface-2); align-self:flex-start; border-bottom-left-radius:2px; }
.ai-msg.user{ background:var(--musi-blue); color:#fff; align-self:flex-end; border-bottom-right-radius:2px; }
.ai-suggest{ display:flex; flex-wrap:wrap; gap:6px; padding:0 20px 14px; }
.ai-suggest button{ font-size:11.5px; padding:6px 12px; border-radius:20px; border:1px solid var(--line-strong); background:var(--surface-2); cursor:pointer; color:var(--ink-soft); }
.ai-input-bar{ display:flex; gap:8px; padding:14px 20px; border-top:1px solid var(--line); }
.ai-input-bar input{ flex:1; height:40px; border:1px solid var(--line-strong); border-radius:20px; padding:0 16px; font-size:13px; }
.ai-input-bar button{ background:var(--musi-blue); color:#fff; border:none; width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:15px; }

.cat-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.cat-tab{ font-size:11.5px; padding:6px 12px; border-radius:20px; border:1px solid var(--line-strong); background:var(--surface-2); cursor:pointer; font-weight:600; color:var(--ink-soft); }
.cat-tab.active{ background:var(--musi-blue); color:#fff; border-color:var(--musi-blue); }
.cat-tab .ct-count{ opacity:.75; margin-left:4px; }

.footer-musi{ display:flex; justify-content:flex-end; padding:26px 28px; color:var(--muted); font-size:11.5px; border-top:1px solid var(--line); margin-top:30px; }
.footer-credit{ font-weight:600; color:var(--ink-soft); }

@media (max-width:900px){
  main{ padding:0 14px 60px; }
  .sidebar{ position:fixed; left:0; top:60px; height:calc(100vh - 60px); z-index:200; transform:translateX(-100%);
    transition:transform .2s; box-shadow:6px 0 20px rgba(8,30,50,.2); }
  .sidebar.mobile-open{ transform:translateX(0); }
  .sidebar-overlay.show{ display:block; }
  .hamburger{ display:block; }
  .hero{ padding:30px 22px; }
  .hero h1{ font-size:24px; }
}

#petaLeaflet{ background:#dfe4e8; }
.leaflet-control-zoom a{ color:var(--musi-blue) !important; font-weight:700; }
.leaflet-popup-content-wrapper{ border-radius:8px; }

.hero-banner{ margin:22px 0 28px; border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(5,11,36,.25); border:1px solid rgba(212,175,55,.3); }
.hero-banner-media{ position:relative; width:100%; aspect-ratio:2.7/1; overflow:hidden; background:#05122b; }
.hero-banner-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero-banner img{ width:100%; height:auto; display:block; }
@media (max-width:600px){ .hero-banner-media{ aspect-ratio:16/9; } }
.hero-banner-cta{ display:flex; gap:12px; flex-wrap:wrap; padding:18px 24px; background:linear-gradient(100deg, var(--musi-blue-dark), var(--musi-blue)); }
.btn-cta.ghost-dark{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(212,175,55,.5); }
.btn-cta.ghost-dark:hover{ background:rgba(212,175,55,.18); }
@media (max-width:600px){ .hero-banner-cta{ padding:14px 16px; } }