/* garis loading di atas layar */
.muat-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2147483000; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, #930b32, #e0245e, #f4a300); box-shadow: 0 0 8px rgba(224, 36, 94, .55); }
.muat-bar.on { opacity: 1; animation: muat-jalan 8s cubic-bezier(.08, .7, .2, 1) forwards; }
.muat-bar.done { width: 100% !important; animation: none; opacity: 0; transition: width .2s ease, opacity .3s ease .15s; }
@keyframes muat-jalan { 0% { width: 0 } 15% { width: 35% } 40% { width: 62% } 100% { width: 92% } }
html.is-muat, html.is-muat * { cursor: progress; }

/* tombol saat formulir diproses */
.muat-spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; animation: muat-putar .7s linear infinite; }
.is-proses { opacity: .75; cursor: progress !important; }
@keyframes muat-putar { to { transform: rotate(360deg) } }

/* pemberitahuan koneksi */
.muat-net { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate(-50%, 140%); z-index: 2147483001;
  display: flex; align-items: center; gap: 9px; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px;
  font: 600 13.5px/1.3 Inter, system-ui, sans-serif; color: #fff; background: #14213d; box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  opacity: 0; transition: transform .3s ease, opacity .3s ease; pointer-events: none; }
.muat-net.muat-on { transform: translate(-50%, 0); opacity: 1; }
.muat-net i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }
.muat-net.muat-off { background: #b4232c; }
.muat-net.muat-off i { background: #fff; animation: muat-kedip 1.2s ease-in-out infinite; }
@keyframes muat-kedip { 50% { opacity: .3 } }
/* di admin & situs HP ada menu bawah: naikkan sedikit */
@media (max-width: 860px) { .muat-net { bottom: calc(86px + env(safe-area-inset-bottom)); } }

/* penanda di bilah atas admin */
.muat-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 4px 10px; border-radius: 999px;
  font: 600 12px/1 Inter, system-ui, sans-serif; white-space: nowrap; }
.muat-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.muat-pill.muat-ok { color: #1f8a4c; background: #e8f6ee; }
.muat-pill.muat-off { color: #b4232c; background: #fdecec; }
.muat-pill.muat-off i { animation: muat-kedip 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .muat-bar.on { animation-duration: .01s; width: 70%; } .muat-spin, .muat-net.muat-off i, .muat-pill.muat-off i { animation: none; } }
.bar .muat-pill { margin-right: auto; margin-left: 12px; }