/* =========================================================
   HASIL AKUN EA — kalender profit & statistik (v4.43)
   Dipakai: hasil.php, beranda (includes/hasil-ea-beranda.php), produk.php
   ========================================================= */
:root{
  --hk-u1:#e6f5ec;--hk-u2:#c4e9d3;--hk-u3:#93d4ad;
  --hk-d1:#fdeeee;--hk-d2:#f8d0d1;--hk-d3:#f0a6a8;
  --hk-netral:#f1f4f8;--hk-garis:#e2e8f0;--hk-ink:#0d2b45;--hk-redup:#6b7a8d;
  --hk-hijau:#128a5a;--hk-merah:#d93a3f;--hk-oranye:#a3530a;--hk-biru:#1a6ff0;--hk-kabut:#e6f0ff;
}
.hasil-ea .angka,.hasil-ea .hk-sel{font-variant-numeric:tabular-nums}

/* ---------- kepala & status ---------- */
.he-status{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;background:#fff;border:1px solid var(--hk-garis);padding:7px 12px;border-radius:999px;color:var(--hk-redup);white-space:nowrap;max-width:100%}
.he-status i{width:8px;height:8px;border-radius:50%;background:#9aa7b6;flex:none}
.he-status.hidup{color:var(--hk-hijau)} .he-status.hidup i{background:var(--hk-hijau);box-shadow:0 0 0 4px #e4f5ec}
.he-status.lama{color:var(--hk-oranye)} .he-status.lama i{background:var(--hk-oranye)}
.he-lencana{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--hk-kabut);color:var(--hk-biru)}
.he-lencana.real{background:#e4f5ec;color:var(--hk-hijau)}
.he-lencana.demo{background:#fff6d6;color:#7a5b00}

.he-akun{display:flex;flex-wrap:wrap;gap:8px 22px;background:#fff;border:1px solid var(--hk-garis);border-radius:14px;padding:13px 18px;font-size:.88rem;margin:0 0 16px}
.he-akun div{display:flex;gap:6px;align-items:baseline;min-width:0}
.he-akun span{color:var(--hk-redup)}
.he-akun strong{color:var(--hk-ink);font-weight:600;overflow-wrap:anywhere}

/* ---------- bagikan ---------- */
.he-bagikan{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid var(--hk-garis);border-radius:14px;padding:10px 12px;margin:0 0 18px}
.he-bagikan .he-link{flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:8px;background:#f6f8fb;border:1px solid var(--hk-garis);border-radius:10px;padding:8px 10px;font-size:.85rem;color:var(--hk-ink);overflow:hidden}
.he-bagikan .he-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.he-bagikan .btn{min-height:40px;padding:8px 14px;font-size:.88rem}
.he-salin.tersalin{background:var(--hk-hijau)!important;border-color:var(--hk-hijau)!important;color:#fff!important}

/* ---------- kotak angka ---------- */
.he-kpi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 20px}
.he-kpi div{background:#fff;border:1px solid var(--hk-garis);border-radius:14px;padding:14px 16px;min-width:0}
.he-kpi span{display:block;font-size:.75rem;color:var(--hk-redup);font-weight:600;margin-bottom:5px}
.he-kpi strong{display:block;font-family:var(--huruf-judul,inherit);font-size:1.45rem;letter-spacing:-.03em;line-height:1.1;color:var(--hk-ink);overflow-wrap:anywhere}
.he-kpi small{display:block;font-size:.72rem;color:var(--hk-redup);margin-top:4px}
.he-naik{color:var(--hk-hijau)!important} .he-turun{color:var(--hk-merah)!important} .he-oranye{color:var(--hk-oranye)!important}

/* ---------- tab ---------- */
.he-panel{background:#fff;border:1px solid var(--hk-garis);border-radius:18px;overflow:hidden}
.he-tab{display:flex;gap:2px;border-bottom:1px solid var(--hk-garis);padding:0 10px;overflow-x:auto;scrollbar-width:none}
.he-tab::-webkit-scrollbar{display:none}
.he-tab button{font:inherit;font-size:.92rem;font-weight:600;background:none;border:0;border-bottom:3px solid transparent;padding:14px 14px 11px;color:var(--hk-redup);cursor:pointer;white-space:nowrap}
.he-tab button[aria-selected=true]{color:var(--hk-ink);border-bottom-color:var(--hk-biru)}
.he-isi{padding:18px}
.he-isi[hidden]{display:none}
.he-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.he-navbulan{display:flex;align-items:center;gap:8px}
.he-navbulan h3{margin:0;font-size:1.1rem;color:var(--hk-ink);min-width:132px;text-align:center}
.he-navbulan a,.he-navbulan span.mati{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--hk-garis);background:#fff;color:var(--hk-ink);font-size:1.05rem;text-decoration:none}
.he-navbulan span.mati{opacity:.35}
.he-mode{display:inline-flex;background:#f4f7fb;border:1px solid var(--hk-garis);border-radius:10px;padding:3px}
.he-mode button{font:inherit;font-size:.82rem;font-weight:600;border:0;background:transparent;color:var(--hk-redup);padding:6px 14px;border-radius:8px;cursor:pointer}
.he-mode button[aria-pressed=true]{background:#fff;color:var(--hk-ink);box-shadow:0 1px 2px rgba(13,43,69,.12)}
.he-bulan-ringkas{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.86rem;color:var(--hk-redup);margin:0 0 12px}
.he-bulan-ringkas strong{color:var(--hk-ink)}

/* ---------- kalender ---------- */
.hk-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.05fr);gap:6px}
.hk-kepala{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hk-redup);text-align:center;padding:2px 0 4px}
.hk-kepala.hk-pk{color:var(--hk-ink)}
.hk-sel{position:relative;min-height:84px;border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;font:inherit;border:2px solid transparent;background:var(--hk-netral);color:var(--hk-ink);text-decoration:none;min-width:0}
.hk-sel .hk-tgl{font-size:.78rem;font-weight:600;color:var(--hk-redup);display:flex;align-items:center;gap:5px}
.hk-sel .hk-p{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;margin-top:auto;white-space:nowrap}
.hk-sel .hk-u{font-size:.76rem;color:#3d4850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk-luar{background:transparent;border:1px dashed var(--hk-garis)} .hk-luar .hk-tgl{opacity:.5}
.hk-kosong{background:#fafbfd;border:1px solid var(--hk-garis)}
.hk-nol{color:var(--hk-redup);font-size:.8rem;margin-top:auto}
button.hk-sel,a.hk-sel{cursor:pointer;transition:transform .12s,box-shadow .12s}
button.hk-sel:hover,a.hk-sel:hover{transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(13,43,69,.35);text-decoration:none}
button.hk-sel:focus-visible,a.hk-sel:focus-visible{outline:3px solid #a9cdf7;outline-offset:2px}
button.hk-sel[aria-pressed=true]{border-color:var(--hk-ink)}
.hk-u1{background:var(--hk-u1)} .hk-u2{background:var(--hk-u2)} .hk-u3{background:var(--hk-u3)}
.hk-d1{background:var(--hk-d1)} .hk-d2{background:var(--hk-d2)} .hk-d3{background:var(--hk-d3)}
.hk-n{background:var(--hk-netral)}

.hk-titik{width:7px;height:7px;border-radius:50%;background:var(--hk-biru);display:inline-block}
.hk-pekan{background:#fff;border:1px solid var(--hk-garis)}
.hk-pekan .hk-tgl{color:var(--hk-ink)}
.hk-pekan.naik .hk-p{color:var(--hk-hijau)} .hk-pekan.turun .hk-p{color:var(--hk-merah)}
.hk-ringkas .hk-sel{min-height:72px}

.hk-legenda{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 0 2px;font-size:.76rem;color:var(--hk-redup)}
.hk-skala{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hk-skala i{width:18px;height:12px;border-radius:3px;display:inline-block}
.hk-skala i.hk-n{background:var(--hk-netral)}
.hk-tingkat{margin-left:4px;white-space:nowrap}
.hk-lain{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hk-lain span{display:inline-flex;align-items:center;gap:6px}
.hk-contoh-jalan{width:18px;height:12px;border-radius:3px;background:var(--hk-u1);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.7) 0 3px,transparent 3px 6px);display:inline-block}

.hk-detail{margin-top:14px;border:1px solid var(--hk-garis);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:12px;align-items:center;background:#fbfcfe}
.hk-detail:empty{display:none}
.hk-detail h4{margin:0;font-size:.95rem;color:var(--hk-ink)}
.hk-detail .ket{font-size:.76rem;color:var(--hk-redup);margin-top:2px}
.hk-detail .ket.dep{color:#155fd6}
.hk-detail dl{margin:0} .hk-detail dt{font-size:.72rem;color:var(--hk-redup);font-weight:600} .hk-detail dd{margin:0;font-weight:700;color:var(--hk-ink)}
.hk-detail dd.naik{color:var(--hk-hijau)} .hk-detail dd.turun{color:var(--hk-merah)} .hk-detail dd.ddt{color:var(--hk-oranye)}
.he-jalan-label{font-size:.68rem;font-weight:700;color:var(--hk-biru);background:var(--hk-kabut);padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:1px}

.he-tabel-hari{display:none}
.tampil-tabel .he-kal-wrap{display:none}
.tampil-tabel .he-tabel-hari{display:block}

/* ---------- tabel umum ---------- */
.he-tabel{overflow-x:auto;border:1px solid var(--hk-garis);border-radius:12px}
.he-tabel table{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
.he-tabel th{text-align:right;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hk-redup);padding:10px 12px;background:#fafcff;border-bottom:1px solid var(--hk-garis);white-space:nowrap}
.he-tabel th:first-child,.he-tabel td:first-child{text-align:left}
.he-tabel td{padding:10px 12px;border-bottom:1px solid #eef2f7;text-align:right;color:var(--hk-ink);white-space:nowrap}
.he-tabel tr:last-child td{border-bottom:0}
.he-tabel td.naik{color:var(--hk-hijau);font-weight:600} .he-tabel td.turun{color:var(--hk-merah);font-weight:600} .he-tabel td.ddt{color:var(--hk-oranye);font-weight:700}
.he-tabel td.he-k0{color:#b3bdc9}
.he-tabel .dep{display:block;font-size:.74rem;color:#155fd6}

/* ---------- daftar statistik (dua kolom) ---------- */
.he-stat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.he-stat dl{margin:0}
.he-stat .baris{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid #eef2f7;font-size:.9rem}
.he-stat dt{color:var(--hk-redup)}
.he-stat dd{margin:0;font-weight:600;color:var(--hk-ink);text-align:right;font-variant-numeric:tabular-nums}
.he-judul-kecil{font-size:.95rem;color:var(--hk-ink);margin:22px 0 10px}
.he-judul-kecil:first-child{margin-top:0}

/* ---------- grafik pertumbuhan ---------- */
.he-grafik{position:relative}
.he-grafik svg{display:block;width:100%;height:auto}
.he-grafik-hp{display:none}
.he-grafik .garis-grid{stroke:#eef2f7;stroke-width:1}
.he-grafik .garis-nol{stroke:#cfd6df;stroke-width:1}
.he-grafik .label-sumbu{fill:var(--hk-redup);font-size:11px}
.he-grafik .garis-data{fill:none;stroke:var(--hk-biru);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}

.he-grafik .kursor{stroke:#9aa7b6;stroke-width:1;stroke-dasharray:3 3}
.he-grafik .titik{fill:#fff;stroke:var(--hk-biru);stroke-width:2}
.he-tip{position:absolute;pointer-events:none;background:var(--hk-ink);color:#fff;font-size:.78rem;padding:6px 9px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-115%);box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.he-tip[hidden]{display:none}
.he-tip b{display:block;font-size:.9rem}

.he-catatan{margin-top:16px;display:grid;gap:10px}
.he-catatan p{margin:0;font-size:.82rem;color:var(--hk-redup);display:flex;gap:10px;align-items:flex-start}
.he-catatan svg{flex:none;margin-top:2px;color:var(--hk-biru)}
.he-risiko{background:#fff;border:1px solid var(--hk-garis);border-left:3px solid var(--hk-oranye);border-radius:10px;padding:12px 14px}
.he-kosong-data{text-align:center;padding:36px 16px;color:var(--hk-redup)}

/* ---------- beranda & produk ---------- */
.he-beranda .he-kartu{background:#fff;border:1px solid var(--hk-garis);border-radius:18px;padding:18px}
.he-beranda-kepala{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.he-beranda-kepala h3{margin:0;font-size:1.1rem;color:var(--hk-ink)}
.he-beranda-kepala .ket{font-size:.82rem;color:var(--hk-redup)}
.he-beranda-kaki{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.he-produk{border:1px solid var(--hk-garis);border-radius:16px;padding:16px 18px;background:#fff;margin:0 0 30px}
.he-produk-atas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.he-produk-atas strong{color:var(--hk-ink);font-size:1rem}
.he-produk-angka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.he-produk-angka div{background:#f8fafc;border-radius:10px;padding:10px 12px;min-width:0}
.he-produk-angka span{display:block;font-size:.72rem;color:var(--hk-redup);font-weight:600}
.he-produk-angka b{display:block;font-size:1.05rem;color:var(--hk-ink);font-variant-numeric:tabular-nums}
.he-strip{display:flex;gap:4px;margin-bottom:12px}
.he-strip i{flex:1 1 0;height:26px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:.68rem;font-weight:700;color:var(--hk-ink)}
.he-produk-tombol{display:flex;flex-wrap:wrap;gap:8px}

@media (max-width:1000px){ .he-kpi{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:860px){
  .hk-detail{grid-template-columns:repeat(2,minmax(0,1fr))} .hk-detail .judul{grid-column:1/-1}
  .he-stat{grid-template-columns:1fr}
  .he-produk-angka{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .he-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .he-kpi strong{font-size:1.2rem}
  .he-isi{padding:12px 10px}
  .hk-grid{gap:4px;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.15fr)}
  .hk-kepala{font-size:.62rem;letter-spacing:.02em}
  .hk-sel,.hk-ringkas .hk-sel{min-height:58px;padding:5px;border-radius:9px}
  .hk-sel .hk-tgl{font-size:.68rem}
  .hk-sel .hk-p{font-size:.72rem;letter-spacing:-.02em}
  .hk-sel .hk-u{display:none}
  .hk-pekan .hk-tgl{font-size:.6rem}
  .he-navbulan h3{min-width:0;font-size:1rem}
  .he-beranda .he-kartu{padding:12px 10px}
  .he-strip i{font-size:0}
  .he-grafik-lebar{display:none} .he-grafik-hp{display:block}
}

/* ---------- v4.43.2: beranda — angka besar, kotak hanya persen ---------- */
.he-angka-besar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}
.he-angka-besar div{background:#f8fafc;border:1px solid #edf1f6;border-radius:14px;padding:14px 16px;min-width:0}
.he-angka-besar span{display:block;font-size:.76rem;font-weight:600;color:var(--hk-redup);margin-bottom:4px}
.he-angka-besar strong{display:block;font-family:var(--huruf-judul,inherit);font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.03em;line-height:1.05;color:var(--hk-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.he-angka-besar strong b{font-weight:inherit}
.he-angka-besar strong em{font-style:normal;color:#b3bdc9;font-weight:600}
.he-angka-besar small{display:block;font-size:.72rem;color:var(--hk-redup);margin-top:4px}
.hk-ringkas .hk-sel{min-height:64px}
.hk-ringkas .hk-sel .hk-p{font-size:1.08rem}
/* kotak bulan lain: lebih samar, tanpa garis putus-putus */
.hk-luar{border:0;background:transparent} .hk-luar .hk-tgl{opacity:.35}
@media (max-width:860px){ .he-angka-besar{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .he-angka-besar{gap:8px} .he-angka-besar div{padding:11px 12px}
  .he-angka-besar strong{font-size:1.35rem}
  .hk-ringkas .hk-sel{min-height:52px} .hk-ringkas .hk-sel .hk-p{font-size:.74rem}
}
/* v4.43.3: hari berjalan tanpa arsiran — garis tepi tipis + titik "live" berdenyut di pojok */
.hk-jalan{box-shadow:inset 0 0 0 1.5px rgba(18,138,90,.55)}
.hk-jalan::after{content:"";position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--hk-hijau);box-shadow:0 0 0 0 rgba(18,138,90,.45);animation:hk-denyut 1.8s ease-out infinite}
@keyframes hk-denyut{0%{box-shadow:0 0 0 0 rgba(18,138,90,.45)}70%{box-shadow:0 0 0 7px rgba(18,138,90,0)}100%{box-shadow:0 0 0 0 rgba(18,138,90,0)}}
@media (prefers-reduced-motion:reduce){.hk-jalan::after{animation:none}}
button.hk-sel.hk-jalan[aria-pressed=true]{box-shadow:none}
.hk-contoh-jalan{position:relative;background:var(--hk-u1)!important;background-image:none!important;box-shadow:inset 0 0 0 1.5px rgba(18,138,90,.55)}
.hk-contoh-jalan::after{content:"";position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:var(--hk-hijau)}
@media (max-width:640px){.hk-jalan::after{top:6px;right:6px;width:6px;height:6px}}

/* ---------- v4.43.4: angka di kotak kalender otomatis menyesuaikan lebar kotak ----------
   Tiap kotak jadi "container": ukuran huruf dihitung dari lebar kotak itu sendiri (cqi),
   angka diletakkan di tengah. Kotak lebar (desktop) -> angka besar & tidak mepet kiri;
   kotak sempit (HP) -> angka mengecil sehingga tetap ada jarak dari tepi. */
.hasil-ea .hk-sel{container-type:inline-size;padding:8px;justify-content:flex-start}
.hasil-ea .hk-sel .hk-tgl{font-size:.74rem;font-size:clamp(.6rem,8cqi,.8rem);line-height:1.2}
.hasil-ea .hk-sel .hk-p{
  font-size:1rem;font-size:clamp(.6rem,19cqi,1.5rem);
  letter-spacing:-.02em;text-align:center;margin:auto 0;line-height:1.1;
}
.hasil-ea .hk-sel .hk-u{font-size:.76rem;font-size:clamp(.6rem,8.5cqi,.85rem);text-align:center;margin-top:-2px}
.hasil-ea .hk-pekan .hk-tgl{font-size:clamp(.56rem,8cqi,.8rem)}
.hasil-ea .hk-sel .hk-nol{text-align:center;margin:auto 0}
@media (max-width:640px){
  .hasil-ea .hk-sel{padding:4px 3px}
  .hasil-ea .hk-sel .hk-tgl{padding-left:2px}
}
/* kotak sangat sempit (HP): tanda % disembunyikan, angka dibuat sedikit lebih besar */
@container (max-width:54px){
  .hasil-ea .hk-sel .hk-pp{display:none}
  .hasil-ea .hk-sel .hk-p{font-size:clamp(.6rem,29cqi,.95rem);letter-spacing:-.03em}
}

/* ---------- v4.43.5 ---------- */
/* kolom Pekan selebar kolom hari, supaya ukuran angka sama */
.hasil-ea .hk-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.hasil-ea .hk-pekan .hk-tgl{color:var(--hk-biru);font-weight:700}
/* lencana verifikasi pihak ketiga */
.he-verif{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:#155fd6;background:#fff;border:1px solid #bcd2f2;padding:7px 12px;border-radius:999px;text-decoration:none;white-space:nowrap}
.he-verif:hover{border-color:var(--hk-biru);text-decoration:none}
.he-verif-link{color:#155fd6;font-weight:600;white-space:nowrap}