/* ============================================================
   LAMAN STATISTIK TRACER STUDY
   Seluruh nilai sudah tertulis di HTML. Animasi hanya aktif
   bila statistik.js menambahkan kelas .st-gerak pada <html>,
   sehingga tanpa JavaScript angka dan batang tetap terlihat.
   ============================================================ */

/* ---------- Pita judul dan saringan ---------- */
.st-sorot{background:linear-gradient(135deg,var(--indigo-gelap),var(--indigo-2) 60%,#3949ab);color:#fff;padding:46px 0 38px;position:relative;overflow:hidden}
.st-sorot::before{content:"";position:absolute;inset:0;background:url('../img/ornamen/anyaman.svg') repeat center/132px 132px;opacity:.55;pointer-events:none}
.st-sorot::after{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.28),transparent 65%);pointer-events:none}
.st-sorot .bungkus{position:relative;z-index:1}
.st-label{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--emas-muda);font-weight:700}
.st-sorot h1{font-family:var(--judul);color:#fff;font-size:clamp(1.7rem,3.4vw,2.35rem);line-height:1.2;margin:8px 0 10px}
.st-sorot p{color:#d7dbf0;max-width:62ch}
.st-saring{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:24px}
.st-saring label{display:flex;flex-direction:column;gap:5px;font-size:.76rem;color:var(--indigo-5);letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.st-saring select{min-width:240px;padding:10px 38px 10px 13px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.35);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a237e' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 13px center;-webkit-appearance:none;appearance:none;font:inherit;font-size:.93rem;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:600;cursor:pointer}
.st-saring select:focus{outline:3px solid var(--emas);outline-offset:1px}
.st-info{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-size:.84rem;color:var(--indigo-5)}
.st-info i{color:var(--emas-muda);margin-right:5px}

/* ---------- Kartu indikator ---------- */
.st-utama{padding-top:0;margin-top:-1px}
.st-utama .bungkus{position:relative;top:-22px}
.st-kisi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.st-kartu{background:var(--putih);border-radius:10px;padding:20px 20px 18px;box-shadow:var(--bayang-2);border-top:4px solid var(--emas);position:relative;transition:transform .2s ease,box-shadow .2s ease}
.st-kartu:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(26,35,126,.18)}
.st-kartu-atas{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.st-ikon{width:42px;height:42px;border-radius:10px;background:var(--indigo-4);color:var(--indigo-2);display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.st-cincin{width:46px;height:46px;transform:rotate(-90deg)}
.st-cincin circle{fill:none;stroke-width:6}
.st-cincin .alur{stroke:var(--indigo-4)}
.st-cincin .isi{stroke:var(--emas);stroke-linecap:round;transition:stroke-dasharray 1.2s cubic-bezier(.2,.7,.2,1)}
.st-nilai{font-family:var(--judul);font-size:2.5rem;font-weight:700;line-height:1;color:var(--indigo);font-variant-numeric:tabular-nums;background:none;padding:0;text-align:left}
.st-nilai small{font-size:1.05rem;color:var(--abu);font-weight:600;margin-left:3px}
.st-nilai.kosong{font-size:1.1rem;color:var(--abu-muda);padding:6px 0}
.st-nama{font-weight:700;color:var(--ink);margin-top:8px;font-size:.95rem;line-height:1.35}
.st-ket{font-size:.8rem;color:var(--abu);margin-top:4px;line-height:1.4}
.st-ket b{color:var(--indigo-2)}

/* ---------- Panel ---------- */
.st-dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.st-panel{background:var(--putih);border-radius:10px;padding:24px;box-shadow:var(--bayang);border:1px solid var(--garis)}
.st-panel h3,.st-h3{font-family:var(--judul);font-size:1.18rem;color:var(--indigo);display:flex;align-items:center;gap:9px}
.st-panel h3 i,.st-h3 i{color:var(--emas);font-size:.95rem}
.st-sub{font-size:.83rem;color:var(--abu);margin:3px 0 16px}
.st-hampa{color:var(--abu);font-size:.9rem}
.st-h3{margin:34px 0 14px}

/* ---------- Batang ---------- */
.st-batang{margin-bottom:13px;cursor:default}
.st-batang-atas{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;margin-bottom:5px}
.st-batang-atas i{color:var(--emas);width:18px;text-align:center;margin-right:7px}
.st-batang-atas b{color:var(--indigo-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.st-batang-atas b em{font-style:normal;font-weight:400;color:var(--abu);font-size:.8rem;margin-left:7px}
.st-batang-atas b em::before{content:"("}.st-batang-atas b em::after{content:")"}
.st-alur{height:10px;background:#eef0f7;border-radius:99px;overflow:hidden;position:relative}
.st-isi{height:100%;width:var(--lebar);background:#3949ab;border-radius:99px;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.st-batang:hover .st-isi,.st-alur:hover .st-isi{filter:brightness(1.12)}

/* ---------- Donat ---------- */
.st-duo{display:flex;gap:42px;align-items:center;flex-wrap:wrap;justify-content:center}
.st-donat{width:250px;height:250px;max-width:100%;flex-shrink:0}
.st-donat .seg{cursor:pointer;transition:stroke-width .2s ease,opacity .2s ease}
.st-donat.fokus .seg{opacity:.28}
.st-donat.fokus .seg.aktif{opacity:1;stroke-width:36}
.st-donat .d-angka{font-family:var(--judul);font-size:34px;font-weight:700;fill:var(--indigo)}
.st-donat .d-ket{font-size:11.5px;fill:var(--abu)}
.st-legenda{list-style:none;flex:1;min-width:280px;max-width:520px;margin:0;padding:0}
.st-legenda li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:8px;cursor:pointer;transition:background .15s ease}
.st-legenda li+li{border-top:1px solid var(--garis)}
.st-legenda li:hover,.st-legenda li.aktif,.st-legenda li:focus-visible{background:var(--putih)}
.st-legenda i{width:14px;height:14px;border-radius:4px;flex-shrink:0}
.st-legenda span{flex:1;font-size:.93rem}
.st-legenda b{color:var(--indigo-2);font-variant-numeric:tabular-nums}
.st-legenda em{font-style:normal;color:var(--abu);font-size:.82rem;width:42px;text-align:right}

/* ---------- Batang tumpuk 100% ---------- */
.st-tumpuk{display:flex;height:38px;border-radius:8px;overflow:hidden;gap:2px;background:var(--putih)}
.st-tumpuk .seg{flex:0 0 var(--lebar);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:700;cursor:default;transition:flex-basis 1.1s cubic-bezier(.2,.7,.2,1),filter .15s}
.st-tumpuk .seg:hover{filter:brightness(1.1)}
.st-legenda-kecil{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;padding:0;font-size:.84rem;color:var(--ink)}
.st-legenda-kecil li{display:flex;align-items:center;gap:6px}
.st-legenda-kecil i{width:11px;height:11px;border-radius:3px;display:inline-block}
.st-legenda-kecil b{color:var(--indigo-2)}
.st-legenda-kecil em{font-style:normal;color:var(--abu)}
.st-catatan{margin-top:22px;background:var(--emas-pucat);border-left:3px solid var(--emas);padding:11px 14px;border-radius:6px;font-size:.88rem}
.st-catatan i{color:var(--tanah);margin-right:6px}

/* ---------- Wilayah ---------- */
.st-wilayah{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.st-wil{border:1px solid var(--garis);border-radius:10px;padding:16px 12px;text-align:center;background:var(--bg);transition:transform .2s ease}
.st-wil:hover{transform:translateY(-2px)}
.st-wil i{font-size:1.3rem;color:var(--indigo-3)}
.st-wil b{display:block;font-family:var(--judul);font-size:1.75rem;color:var(--indigo);margin:6px 0 2px;font-variant-numeric:tabular-nums}
.st-wil span{display:block;font-size:.8rem;line-height:1.3;color:var(--ink)}
.st-wil em{display:block;font-style:normal;font-size:.75rem;color:var(--abu);margin-top:3px}
.st-wil.utama{background:linear-gradient(160deg,var(--indigo-2),var(--indigo));border-color:transparent}
.st-wil.utama i{color:var(--emas-muda)}
.st-wil.utama b{color:#fff}
.st-wil.utama span{color:#e8eaf6}
.st-wil.utama em{color:var(--indigo-5)}

/* ---------- Tujuh aspek ---------- */
.st-rata{display:flex;gap:12px;flex-wrap:wrap}
.st-rata div{background:var(--indigo);color:#fff;border-radius:10px;padding:12px 18px;min-width:150px}
.st-rata div.emas{background:var(--emas);color:#3d2f00}
.st-rata small{display:block;font-size:.74rem;opacity:.85}
.st-rata b{font-family:var(--judul);font-size:1.8rem;line-height:1.1}
.st-aspek{background:var(--putih);border:1px solid var(--garis);border-radius:10px;padding:18px 22px 10px;box-shadow:var(--bayang)}
.st-aspek-baris{display:grid;grid-template-columns:230px 1fr 92px;gap:16px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--garis)}
.st-aspek-baris .nm{font-size:.92rem;font-weight:600}
.st-pasang{display:flex;flex-direction:column;gap:5px}
.st-pasang .st-alur{height:9px}
.st-aspek-baris .nl{text-align:right;font-variant-numeric:tabular-nums}
.st-aspek-baris .nl b{color:#3949ab;display:block;line-height:1.2}
.st-aspek-baris .nl em{font-style:normal;font-weight:700;color:var(--tanah);display:block;line-height:1.2}
.st-skala{display:grid;grid-template-columns:230px repeat(5,1fr) 92px;gap:0 16px;font-size:.72rem;color:var(--abu);padding:6px 0 4px}
.st-skala span:not(:first-child):not(:last-child){text-align:right}

/* ---------- Tabel perbandingan ---------- */
.st-tabel-gulir{overflow-x:auto;background:var(--putih);border-radius:10px;border:1px solid var(--garis);box-shadow:var(--bayang)}
.st-tabel{width:100%;border-collapse:collapse;font-size:.9rem;min-width:720px}
.st-tabel th{background:var(--indigo);color:#fff;text-align:left;padding:11px 14px;font-weight:600;font-size:.82rem;letter-spacing:.02em}
.st-tabel td{padding:11px 14px;border-top:1px solid var(--garis);white-space:nowrap;font-variant-numeric:tabular-nums}
.st-tabel tr:hover td{background:var(--indigo-4)}
.st-tabel small{color:var(--abu)}
.st-tabel .mini{display:inline-block;width:56px;height:7px;background:#eef0f7;border-radius:9px;margin-right:8px;vertical-align:middle;overflow:hidden}
.st-tabel .mini i{display:block;height:100%;background:#3949ab;border-radius:9px}

/* ---------- Per tahun ---------- */
.st-tahun{background:var(--putih);border:1px solid var(--garis);border-radius:10px;padding:16px 22px;box-shadow:var(--bayang)}
.st-tahun-baris{display:grid;grid-template-columns:60px 1fr 170px;gap:14px;align-items:center;padding:7px 0}
.st-tahun-baris .th{font-family:var(--judul);font-weight:700;color:var(--indigo)}
.st-alur.lebar{height:16px;border-radius:6px;background:transparent}
.st-alur.lebar .st-isi{position:absolute;left:0;top:0;border-radius:6px}
.st-alur.lebar .st-isi.latar{background:#dfe3f3}
.st-tahun-baris .nl{font-size:.86rem;color:var(--abu)}
.st-tahun-baris .nl b{color:var(--indigo-2);font-size:1rem}
.st-tahun-baris .nl em{font-style:normal}

/* ---------- Ajakan ---------- */
.st-ajak{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:linear-gradient(120deg,var(--emas-pucat),#fff);border:1px solid #efe1b0;border-radius:12px;padding:20px 24px}
.st-ajak b{display:block;font-family:var(--judul);font-size:1.2rem;color:var(--indigo)}
.st-ajak span{font-size:.9rem;color:var(--abu)}

/* ---------- Tooltip ---------- */
.st-tip{position:fixed;z-index:50;background:var(--indigo-gelap);color:#fff;font-size:.8rem;padding:7px 11px;border-radius:7px;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.2);max-width:260px;line-height:1.35}
[data-tip]{cursor:default}

/* ---------- Animasi masuk (hanya bila .st-gerak) ---------- */
.st-gerak .st-isi{width:0}
.st-gerak .tampak .st-isi{width:var(--lebar)}
.st-gerak .st-tumpuk .seg{flex-basis:0}
.st-gerak .st-tumpuk.tampak .seg{flex-basis:var(--lebar)}
.st-gerak .st-kartu,.st-gerak .st-panel,.st-gerak .st-wil{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease,box-shadow .2s ease}
.st-gerak .st-kartu.tampak,.st-gerak .st-panel.tampak,.st-gerak .st-wil.tampak{opacity:1;transform:none}
.st-donat .seg{transition:stroke-dasharray 1.3s cubic-bezier(.2,.7,.2,1),stroke-width .2s ease,opacity .2s ease}
.st-gerak .st-donat:not(.tampak) .seg{stroke-dasharray:0 1000}
.st-gerak .st-kartu:not(.tampak) .st-cincin .isi{stroke-dasharray:0 200}

@media (prefers-reduced-motion: reduce){
  .st-isi,.st-tumpuk .seg,.st-cincin .isi,.st-kartu{transition:none}
}

/* ---------- Layar kecil ---------- */
@media (max-width:980px){
  .st-kisi{grid-template-columns:1fr 1fr}
  .st-dua-kolom{grid-template-columns:1fr}
  .st-aspek-baris{grid-template-columns:1fr 70px}
  .st-aspek-baris .st-pasang{grid-column:1/-1;order:3}
  .st-skala{display:none}
}
@media (max-width:600px){
  .st-kisi{grid-template-columns:1fr}
  .st-saring label,.st-saring select{width:100%;min-width:0}
  .st-wilayah{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .st-wil b{font-size:1.35rem}
  .st-tahun-baris{grid-template-columns:48px 1fr;}
  .st-tahun-baris .nl{grid-column:2}
  .st-donat{width:210px;height:210px}
}

/* ---------- Cetak ---------- */
@media print{
  .st-sorot{background:#fff;color:#000;padding:10px 0}
  .st-sorot h1{color:var(--indigo)}
  .st-saring,.st-ajak,.st-tip{display:none}
  .st-gerak .st-kartu,.st-gerak .st-panel,.st-gerak .st-wil{opacity:1;transform:none}
  .st-gerak .st-isi{width:var(--lebar)}
}

/* Angka berhitung: nama kelas khusus agar tidak bertabrakan dengan .hitung di tracer.css */
.st-hitung{font:inherit;color:inherit;margin:0}
.st-wil b .st-hitung{display:inline;font-size:inherit;color:inherit}
.st-donat text{pointer-events:none}