:root{
  --bg1:#0b1020;
  --bg2:#101a3a;
  --card:rgba(255,255,255,0.06);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,0.72);
  --line:rgba(255,255,255,0.10);
  --accent:#7c5cff;
  --accent-2:#22c55e;
  --accent-3:#60a5fa;
  --accent-soft:rgba(124,92,255,0.18);
  --accent-2-soft:rgba(34,197,94,0.18);
  --accent-3-soft:rgba(96,165,250,0.18);
  --shadow: 0 18px 60px rgba(0,0,0,0.45);
  --radius:22px;
  --radius2:16px;
  --card-gap:20px;
  --section-gap:var(--card-gap);
  --title-gap:18px;
  --card-pad:22px;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  line-height:1.55;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(124,92,255,0.25), transparent 55%),
    radial-gradient(900px 500px at 80% 20%, rgba(34,197,94,0.18), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}
.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(700px 400px at 30% 30%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(700px 400px at 70% 70%, rgba(255,255,255,0.04), transparent 60%);
  pointer-events:none;
  mix-blend-mode:screen;
}
.bg::before,
.bg::after{
  content:"";
  display:none;
}
.container{
  width:min(980px, calc(100% - 40px));
  margin:0 auto;
  padding:40px 0 24px;
  position:relative;
  z-index:1;
}
.container.wide{ width:min(1100px, calc(100% - 40px)); }
.hero{
  padding:22px 0 18px;
  margin-bottom:var(--section-gap);
}
.badge{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.02em;
  text-transform:none;
  color:var(--text);
}
.badge.soft{
  text-transform:none;
  letter-spacing:0.02em;
  font-size:12px;
  color:var(--muted);
}
h1{
  margin:12px 0 8px;
  font-size:44px;
  line-height:1.05;
  font-family:inherit;
  letter-spacing:-0.01em;
}
.sub{ margin:0; color:var(--muted); font-size:17px; max-width:680px; }
.home{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--section-gap);
}
.home .topbar{ margin-bottom:0; }
.home .hero-simple{ margin-bottom:0; }
.home .section{ margin-top:0; }
.home .footer{ margin-top:0; }
.hero-simple{
  display:grid;
  gap:12px;
  max-width:760px;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:4px;
}
.ghost-link{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:11px;
  background:rgba(255,255,255,0.06);
}
.hero-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
  max-width:680px;
}
.hero-list li{
  position:relative;
  padding-left:20px;
  color:var(--muted);
}
.hero-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.7em;
  width:8px;
  height:8px;
  border-radius:3px;
  transform:translateY(-50%);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
}
.section-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin-bottom:var(--card-gap);
}
.section-title{
  margin:0;
  font-size:26px;
  font-family:inherit;
  letter-spacing:0;
}
.section-sub{
  margin:0;
  max-width:720px;
  color:var(--muted);
  font-size:14px;
}
.eyebrow{
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
}
.content-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap:var(--card-gap);
  align-items:start;
}
.stack{
  display:grid;
  gap:var(--card-gap);
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--card-pad);
  backdrop-filter: blur(10px);
}
h2{
  margin:0 0 12px;
  font-size:18px;
  font-family:inherit;
  letter-spacing:0;
}
.muted{ color:var(--muted); }
.small{ font-size:12px; }
small{ color:var(--muted); }
code{
  font-family:inherit;
  font-size:12px;
  padding:2px 6px;
  border-radius:8px;
  background:rgba(255,255,255,0.08);
  border:1px solid var(--line);
}
.form{ display:grid; gap:14px; }
.field{ display:grid; gap:8px; }
.field span{ font-weight:600; font-size:13px; }
.field input[type="file"], .field input[type="number"]{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,0.25);
  color:var(--text);
  outline:none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
.field input[type="file"]::file-selector-button{
  border:0;
  padding:8px 12px;
  margin-right:10px;
  border-radius:10px;
  background:rgba(255,255,255,0.08);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
}
.field input[type="file"]:focus, .field input[type="number"]:focus{
  border-color:rgba(124,92,255,0.7);
  box-shadow: 0 0 0 3px rgba(124,92,255,0.2);
}
.btn{
  border:0;
  border-radius:16px;
  padding:12px 16px;
  background: linear-gradient(90deg, var(--accent), rgba(124,92,255,0.7));
  color:white;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size:12px;
  box-shadow: 0 16px 30px rgba(0,0,0,0.35);
  cursor:pointer;
}
.hint{
  margin-top:16px;
  padding:16px;
  border-radius:var(--radius2);
  border:1px dashed var(--line);
  background:rgba(255,255,255,0.03);
}
.hint ul{
  margin:8px 0 0;
  padding-left:18px;
  color:var(--muted);
}
.hint li{ margin:4px 0; }
.hint-title{
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:8px;
  color:var(--accent);
}
.footer{
  margin-top:var(--section-gap);
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
  padding:12px 2px 0;
  border-top:1px solid var(--line);
}
.alert{
  margin:16px 0;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,77,109,0.35);
  background:rgba(255,77,109,0.10);
  color:#ffd1dc;
}
.alert strong{ color:#ff8aa5; }
.topbar{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:var(--section-gap);
  align-items:flex-start;
  flex-wrap:wrap;
}
.topbar.nav{ align-items:center; }
.brand{
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:12px;
  font-family:inherit;
  color:var(--muted);
}
.nav-links{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.link{
  display:inline-flex;
  align-items:center;
  color:rgba(234,240,255,0.85);
  text-decoration:none;
  font-weight:700;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.04);
  box-shadow: 0 12px 24px rgba(0,0,0,0.28);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:11px;
}
.link.active{
  border-color:rgba(124,92,255,0.6);
  color:var(--text);
  background:rgba(124,92,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(124,92,255,0.28);
}
.prose{ line-height:1.6; }
.prose p{
  margin:0 0 12px;
  color:var(--muted);
}
.dropdown{
  position:relative;
  border-radius:var(--radius);
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
  padding:16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  overflow:hidden;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.dropdown::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
  opacity:0;
  border-radius:var(--radius) var(--radius) 0 0;
  transition: opacity 0.35s ease;
  pointer-events:none;
}
.dropdown[open]{
  border-color:rgba(124,92,255,0.35);
  box-shadow: 0 22px 50px rgba(0,0,0,0.32);
}
.dropdown[open]::before{ opacity:0.8; }
.dropdown > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  width:100%;
  user-select:none;
}
.dropdown > summary::-webkit-details-marker{ display:none; }
.dropdown > summary::after{
  content:"+";
  font-weight:700;
  color:var(--muted);
  margin-top:4px;
}
.dropdown[open] > summary::after{ content:"-"; }
.dropdown[open] > summary{
  padding-bottom:var(--card-gap);
  border-bottom:1px solid var(--line);
}
.dropdown > summary:hover::after{ color:var(--accent); }
.dropdown summary .section-head{ margin-bottom:0; }
.dropdown > summary ~ *{ display:block; }
.dropdown-body{
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  overflow:hidden;
  padding-top:0;
  transition:
    max-height 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.35s ease,
    transform 0.45s ease,
    padding-top 0.4s ease;
  will-change:max-height, opacity, transform, padding-top;
}
.dropdown[open] .dropdown-body{
  max-height:6000px;
  opacity:1;
  transform:translateY(0);
  padding-top:var(--card-gap);
  pointer-events:auto;
}
.dropdown:not([open]) .dropdown-body{
  pointer-events:none;
}
.dropdown[open] .dropdown-body > *{
  animation: dropdownReveal 0.65s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.dropdown[open] .dropdown-body > *:nth-child(1){ animation-delay:0.05s; }
.dropdown[open] .dropdown-body > *:nth-child(2){ animation-delay:0.12s; }
.dropdown[open] .dropdown-body > *:nth-child(3){ animation-delay:0.19s; }
.dropdown[open] .dropdown-body > *:nth-child(4){ animation-delay:0.26s; }
.dropdown[open] .dropdown-body > *:nth-child(5){ animation-delay:0.33s; }
.dropdown[open] .dropdown-body > *:nth-child(6){ animation-delay:0.4s; }
.dropdown[open] .dropdown-body > *:nth-child(7){ animation-delay:0.47s; }
.dropdown[open] .dropdown-body > *:nth-child(8){ animation-delay:0.54s; }
.text-link{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px dashed rgba(124,92,255,0.5);
}
.text-link:hover{
  color:var(--text);
  border-bottom-color:rgba(124,92,255,0.9);
}
.prose p:last-child{ margin-bottom:0; }
.detail-list{
  margin:8px 0 12px;
  padding-left:20px;
  display:grid;
  gap:10px;
}
.detail-list li{ line-height:1.5; }
.card-stack{
  display:block;
  margin-top:0;
}
.card-block{
  display:block;
}
.card-title{
  margin:0 0 var(--title-gap);
  font-size:18px;
  font-family:inherit;
  letter-spacing:0;
}
.card-stack > *{
  margin-bottom:var(--card-gap);
}
.card-stack > *:last-child{
  margin-bottom:0;
}
.section-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:var(--card-gap);
  margin-top:0;
}
.dataset-visuals{
  margin-top:var(--card-gap);
}
.dataset-media{
  padding:0;
  overflow:hidden;
}
.dataset-title{
  padding:12px 16px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--muted);
  border-bottom:1px solid var(--line);
}
.dataset-image{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius);
}
.dataset-caption{
  padding:12px 16px;
  color:var(--muted);
  font-size:12px;
  border-top:1px solid var(--line);
}
.panel{
  position:relative;
  overflow:hidden;
}
.card.panel{
  padding:16px;
}
.panel::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
  opacity:0.6;
  border-radius:var(--radius) var(--radius) 0 0;
}
.key-list{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}
.key-list li{
  position:relative;
  padding-left:18px;
  color:var(--muted);
}
.key-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.65em;
  width:8px;
  height:8px;
  border-radius:3px;
  transform:translateY(-50%);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
}
.title{
  text-align:right;
}
.title h1{
  margin:6px 0 0;
  font-size:34px;
}
.title .badge{ margin-bottom:6px; }
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--card-gap);
  margin-bottom:var(--section-gap);
}
@media (max-width: 980px){
  .content-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }
  .section-grid{ grid-template-columns: 1fr; }
  h1{ font-size:36px; }
  .topbar{
    flex-direction:column;
    align-items:flex-start;
  }
  .topbar.nav{
    flex-direction:column;
    align-items:flex-start;
  }
  .topbar .nav-links{ margin-bottom:8px; }
  .title{ text-align:left; }
  .row{
    flex-direction:column;
    align-items:flex-start;
  }
}
.kpi{
  position:relative;
  overflow:hidden;
}
.kpi::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
  border-radius:var(--radius) var(--radius) 0 0;
}
.kpi-label{ color:var(--muted); font-weight:700; font-size:13px; }
.kpi-value{ font-size:32px; font-weight:900; margin:8px 0 4px; font-family:inherit; }
.unit{ font-size:14px; color:var(--muted); font-weight:700; }
.kpi-sub{ font-weight:800; color:var(--accent-2); }
.kpi-foot{ margin-top:8px; color:var(--muted); font-size:12px; }
.info-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.info-item{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.03);
}
.info-title{
  font-size:11px;
  color:var(--muted);
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.info-val{ margin-top:6px; font-size:14px; font-weight:800; }
.chips{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.03);
  font-size:12px;
}
.row{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.reveal{
  opacity:0;
  transform:translateY(12px);
  animation:fadeUp 720ms ease forwards;
}
.reveal.delay-1{ animation-delay:120ms; }
.reveal.delay-2{ animation-delay:240ms; }
.reveal.delay-3{ animation-delay:360ms; }


/* FIX Chart sizing */
.chart-wrap{
  position: relative;
  height: 360px;   /* ubah kalau mau lebih tinggi */
  width: 100%;
  margin-top: 10px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(0,0,0,0.25);
}
.chart-wrap canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
  border-radius:14px;
}
@media (max-width: 860px){
  .chart-wrap{ height: 300px; }
}
@media (prefers-reduced-motion: reduce){
  .reveal{
    animation:none;
    opacity:1;
    transform:none;
  }
  .dropdown-body{
    transition:none;
  }
  .dropdown[open] .dropdown-body > *{
    animation:none;
  }
}
@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes dropdownReveal{
  0%{
    opacity:0;
    transform:translateY(10px) scale(0.98);
  }
  60%{
    opacity:1;
    transform:translateY(-2px) scale(1);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}