/* M1 RINGAN v3 (m1r3) — JE Creator, 22 Sep 2026. Hanya berlaku ≤920 px. Desktop tidak disentuh. */
:root{--m1-tinggi:58px;--m1-tema:#1d2233;--m1-latar:#ffffff;--m1-teks:#4b5160;--m1-aktif:#1d2233;--m1-garis:rgba(0,0,0,.08)}
.m1-tabbar{display:none}
@media (max-width:920px){
  html{-webkit-text-size-adjust:100%}
  html,body{overflow-x:clip}   /* UJI 22 Sep: kurung lapisan hiasan yang bikin halaman mengecil di HP */
  body{padding-bottom:calc(var(--m1-tinggi) + env(safe-area-inset-bottom,0px)) !important;overscroll-behavior-y:contain}
  .m1-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1500;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
    height:calc(var(--m1-tinggi) + env(safe-area-inset-bottom,0px));padding:0 0 env(safe-area-inset-bottom,0px);
    background:var(--m1-latar);border-top:1px solid var(--m1-garis);box-shadow:0 -6px 24px rgba(0,0,0,.08);
    transform:translateY(0);transition:transform .28s ease,opacity .2s}
  .m1-tabbar a,.m1-tabbar button{appearance:none;background:none;border:0;margin:0;padding:6px 2px 7px;height:var(--m1-tinggi);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--m1-teks);text-decoration:none;
    font:600 11px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.01em;-webkit-tap-highlight-color:transparent;cursor:pointer}
  .m1-tabbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .m1-tabbar [aria-current="page"],.m1-tabbar .m1-aktif{color:var(--m1-aktif)}
  .m1-tabbar [aria-current="page"] svg,.m1-tabbar .m1-aktif svg{stroke-width:2.4}
  .m1-tabbar .m1-tengah{position:relative;color:#fff}
  .m1-tabbar .m1-tengah .m1-bulat{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;
    background:var(--m1-tema);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -6px rgba(0,0,0,.45);border:4px solid var(--m1-latar)}
  .m1-tabbar .m1-tengah .m1-bulat svg{width:26px;height:26px;stroke:#fff}
  .m1-tabbar .m1-tengah .m1-lbl{color:var(--m1-aktif);margin-top:26px}
  html.m1-open .m1-tabbar,html.m1-kb .m1-tabbar{transform:translateY(110%);opacity:0;pointer-events:none}
  .m1-sembunyi-hp{display:none !important}
  /* dock/panel yang disembunyikan di HP tapi wajib muncul lagi saat asisten dibuka */
  html.m1-open .m1-sembunyi-hp.m1-tampil-buka{display:revert !important}
  /* tombol melayang yang dinaikkan di atas bar; ikut turun saat bar sembunyi */
  .m1-naik-hp{bottom:calc(var(--m1-tinggi) + env(safe-area-inset-bottom,0px) + 12px) !important}
  html.m1-open .m1-naik-hp,html.m1-kb .m1-naik-hp{bottom:12px !important}
  /* lembar: panel asisten yang ada dijadikan lembar dari bawah (opsional, aktif kalau config lembar=true) */
  html.m1-lembar.m1-open .m1-panel{left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;width:100% !important;max-width:none !important;
    height:88dvh !important;max-height:88dvh !important;border-radius:22px 22px 0 0 !important;margin:0 !important}
}
/* elemen yang hanya disembunyikan di layar SEMPIT (<=480 px) — mis. tombol header yang kepotong;
   dipakai kalau penggantinya sudah ada di tempat lain (hero/menu burger/footer) */
@media (max-width:480px){ .m1-sembunyi-kecil{display:none !important} }
@media (max-width:920px) and (display-mode: standalone){body{overscroll-behavior-y:none}}
@media (max-width:920px) and (prefers-reduced-motion: no-preference){@view-transition{navigation:auto}}