/* =================================================================
   FITUR: beranda siswa + Kabar — desain krem 26 Okt 2026
   Arah: dokumen/produk/PREVIEW_DASHBOARD_BARU.html. Token & komponen bersama dari style.css
   (.card .card-h .tag .bar .badge .btn). File ini hanya tata letak beranda + lembar Kabar.
   Gerak: hanya transform/opacity; masuk berurutan lewat .view.enter (diatur app.js: animateView),
   garis Jalurmu terisi sekali; tidak ada animasi yang berulang.
   ================================================================= */
.hm{display:contents}
.hm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- sapaan + tenggat terdekat ---------- */
.hm-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;padding:30px 0 0}
.hm-hero .eyebrow{margin-bottom:10px;font-size:13px}
.hm-hero h1{font-size:clamp(3.4rem,7.6vw,6.25rem);overflow-wrap:anywhere}
.hm-hero .lead{color:var(--muted);margin-top:18px;max-width:46ch;font-size:16px;line-height:1.55}
.hm-dl{display:flex;flex-direction:column;gap:6px;min-width:230px;max-width:300px;padding:22px 24px;border:0;border-radius:26px 26px 26px 120px;
  background:var(--api);color:var(--on-api);font:inherit;text-align:left;cursor:pointer;
  transition:transform .25s var(--ease-kuat)}
.hm-dl:hover{transform:translateY(-3px) rotate(-.8deg)}
.hm-dl:active{transform:scale(.97);transition-duration:.1s}
.hm-dl:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:26px 26px 26px 120px}
.hm-dl .k{font:600 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.92}
.hm-dl .n{font-family:var(--f-display);font-size:104px;line-height:.9;display:flex;align-items:flex-end;gap:10px;font-variant-numeric:tabular-nums}
.hm-dl .n small{font:600 13px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding-bottom:10px;color:inherit}
.hm-dl .w{font-weight:700;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.hm-dl .go{font:600 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;margin-top:6px;opacity:.92}

/* ---------- kerangka kartu ---------- */
.hm-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:22px;margin-top:18px}
.hm-side{display:flex;flex-direction:column;gap:22px;min-width:0}
.hm-side > .hm-kabar{flex:1}   /* mengisi kolom kalau kartu pemerataan tidak tampil */
.hm-pm-slot:empty{display:none}
.hm-trio{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hm-kosong-k{font-size:14px;line-height:1.5}

/* ---------- Jalurmu ---------- */
.hm-path{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px;align-items:center}
.hm-path-k h2{font-size:2.1rem;line-height:1}
.hm-path-s{color:var(--muted);margin:10px 0 14px;font-size:14.5px;line-height:1.5;max-width:42ch}
.hm-path-s b{color:var(--ink)}
.hm-path-s .linkbtn{font-size:inherit}
.hm-steps{position:relative}
.hm-track{position:absolute;left:16.667%;right:16.667%;top:19px;height:2px;border-radius:2px;background:var(--line)}
.hm-fill{display:block;height:100%;border-radius:2px;background:var(--api);transform-origin:left;transform:scaleX(var(--p,0));
  transition:transform .8s var(--ease-kuat)}
.hm-stops{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.hm-stops li{display:grid;justify-items:center;align-content:start;text-align:center}
.hm-stops li > i{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border-radius:50%;
  background:var(--card);border:2px solid var(--line-strong);font:600 14px var(--f-mono);font-style:normal;color:var(--muted)}
.hm-stops li > i svg{width:16px;height:16px}
.hm-stops li.done > i{background:var(--sun);border-color:var(--sun);color:var(--on-sun)}
.hm-stops li.now > i{background:var(--api);border-color:var(--api);color:var(--on-api);box-shadow:0 0 0 6px var(--api-soft)}
.hm-stops b{font-size:14px}
.hm-stops span{margin-top:2px;font-size:12px;line-height:1.4;color:var(--muted);max-width:19ch}

/* ---------- Opportunity Radar mini ---------- */
.hm-radar{min-width:0;display:flex;flex-direction:column}
.hm-opps{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.hm-opp{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--bg);
  transition:transform .2s var(--ease-kuat),border-color .2s var(--ease)}
.hm-opp:hover{transform:translateY(-3px);border-color:var(--ink)}
.hm-opp-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hm-opp h3{font-size:16px;line-height:1.25;min-height:2.5em}
.hm-opp-judul{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s}
.hm-opp-judul:hover{text-decoration-color:var(--api)}
.hm-meta{display:flex;justify-content:space-between;gap:8px;font:400 11px var(--f-mono);letter-spacing:.04em;color:var(--muted)}
.hm-meta b{display:block;margin-top:3px;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:0}
.hm-meta b.mepet{color:var(--api-text)}
.hm-meta span:last-child{text-align:right}
.hm-opp .bar.mepet i{background:var(--api)}
.hm-opp .btn{margin-top:auto;align-self:stretch}
.hm-opp .btn.primary{justify-content:flex-start;padding-left:18px}

/* ---------- Kabar + angka pemerataan ---------- */
.hm-note{display:flex;gap:12px;width:100%;padding:12px 0;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;
  color:inherit;font:inherit;font-size:14px;line-height:1.4;text-align:left;cursor:pointer;transition:transform .2s var(--ease-kuat)}
.hm-note:first-child{border-top:0;padding-top:0}
.hm-note:hover{transform:translateX(3px)}
.hm-note b{display:block;font-weight:600}
.hm-note small{display:block;margin-top:3px;font:400 11px/1.4 var(--f-mono);color:var(--muted);letter-spacing:.02em}
.hm-dot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--line-strong)}
.baru > .hm-dot{background:var(--api)}
.hm-pm-n{font-family:var(--f-display);font-size:54px;line-height:1;color:var(--api);font-variant-numeric:tabular-nums}
.hm-pm p{margin:8px 0 12px;color:var(--muted);font-size:14px;line-height:1.5}

/* ---------- tiga kartu mini ---------- */
.hm-mini{display:flex;flex-direction:column;align-items:flex-start;transition:transform .2s var(--ease-kuat),border-color .2s var(--ease)}
.hm-mini:hover{border-color:var(--ink);transform:translateY(-2px)}
.hm-mini h3{margin-bottom:8px;font-family:var(--f-display);font-size:1.4rem;font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.hm-mini p{flex:1;margin-bottom:16px;color:var(--muted);font-size:14px;line-height:1.5}
.hm-mini p b{color:var(--ink)}
.hm-link{padding:0 0 3px;border:0;border-bottom:2px solid var(--api);background:none;color:var(--ink);cursor:pointer;
  font:600 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;transition:color .15s var(--ease)}
.hm-link:hover{color:var(--api-text)}

/* ---------- lembar Kabar (lonceng) ---------- */
.hm-kb-list{display:grid;margin:0;padding:0;list-style:none}
.hm-kb{display:flex;align-items:flex-start;gap:12px;width:100%;margin:0;padding:14px 8px;border:0;border-top:1px solid var(--line);border-radius:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .15s var(--ease)}
.hm-kb-list li:first-child .hm-kb{border-top:0}
.hm-kb:hover{background:var(--brand-soft)}
.hm-kb-t{flex:1;min-width:0}
.hm-kb-t b{display:block;font-size:14.5px;line-height:1.35}
.hm-kb:not(.baru) .hm-kb-t b{font-weight:600}
.hm-kb-t small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.hm-kb-go{flex:none;margin-top:2px;color:var(--muted);transition:transform .2s var(--ease-kuat)}
.hm-kb-go svg{display:block;width:18px;height:18px}
.hm-kb:hover .hm-kb-go{transform:translateX(3px);color:var(--ink)}
.hm-kosong{padding:24px 8px;text-align:center}
.hm-kosong p{margin-top:6px;font-size:14px}
.hm-kb-cat{margin-top:12px}
/* titik di lonceng muncul sekali saat ada kabar baru */
.tb-btn.bell .titik:not([hidden]){animation:hmTitik .35s var(--ease-kuat) both}

/* ---------- gerak masuk (hanya saat halaman dibuka lewat menu; app.js memasang .enter) ---------- */
@keyframes hmMasuk{from{opacity:0;transform:translateY(14px)}}
@keyframes hmMasukKecil{from{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes hmStop{from{opacity:.35;transform:scale(.6)}}
@keyframes hmTitik{from{opacity:0;transform:scale(0)}}
.view.enter :is(.hm-hero,.hm-path,.hm-radar,.hm-kabar,.hm-pm-slot > *,.hm-mini){animation:hmMasuk .42s var(--ease-kuat) both;animation-delay:calc(var(--k,0) * 60ms)}
.view.enter .hm-opp{animation:hmMasukKecil .4s var(--ease-kuat) both;animation-delay:calc(200ms + var(--k,0) * 60ms)}
.view.enter .hm-fill{animation:grow .85s .4s var(--ease-kuat) both}
.hm-stops li.baru > i{animation:hmStop .35s .85s var(--ease-kuat) both}
.view.enter .hm-stops li.baru > i{animation-delay:1.3s}
/* angka pemerataan yang datang belakangan (setelah halaman tergambar) */
.hm-pm-slot.masuk > *{animation:hmMasuk .4s var(--ease-kuat) both}

/* ---------- layar sedang & HP ---------- */
@media (max-width:1100px){
  .hm-grid{grid-template-columns:minmax(0,1fr)}
  .hm-trio{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
@media (max-width:860px){
  .hm-hero{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:24px}
  .hm-hero h1{font-size:clamp(2.9rem,14vw,4.75rem)}
  .hm-dl{max-width:none;min-width:0;border-radius:26px 26px 26px 80px}
  .hm-dl .n{font-size:84px}
  .hm-path{grid-template-columns:minmax(0,1fr);gap:22px}
  .hm-path-k h2{font-size:1.9rem}
}
@media (max-width:520px){
  .hm-stops span{font-size:11.5px}
  .hm-stops b{font-size:13px}
}