:root{--biru: #16507a;--biru-muda: #e8f1f8;--abu: #5b6b7a;--abu-muda: #f4f6f8;--garis: #dde3e9;--teks: #1c2833;--putih: #ffffff;--baik: #2e9e5b;--sedang: #d9a021;--buruk: #d8722c;--sangat-buruk: #b23a3a;--gagal: #c62828;--bayang: 0 1px 3px rgba(28, 40, 51, .08), 0 1px 2px rgba(28, 40, 51, .04)}*{box-sizing:border-box}html,body,#akar{height:100%;margin:0}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:var(--teks);background:var(--abu-muda);font-size:15px}a{color:var(--biru)}h1{font-size:1.5rem;margin:0 0 .25rem}h2{font-size:1.15rem;margin:1.75rem 0 .75rem}h3{font-size:1rem;margin:0 0 .5rem}p{line-height:1.6}.bingkai{display:flex;min-height:100vh}.sisi{width:246px;flex:0 0 246px;background:var(--biru);color:#fff;display:flex;flex-direction:column;padding:1.1rem 0;position:sticky;top:0;height:100vh;align-self:flex-start}.sisi .judul{padding:0 1.1rem 1rem;border-bottom:1px solid rgba(255,255,255,.15)}.sisi a.merek{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem;padding:.15rem 0;border-left:0;color:#fff;border-radius:6px}.sisi a.merek:hover{background:none;opacity:.85}.sisi a.merek:focus-visible{outline:2px solid #fff;outline-offset:3px}.merek-logo{width:48px;height:48px;flex:0 0 48px;object-fit:contain;display:block}.merek-nama{font-size:1.55rem;line-height:1;letter-spacing:.055em;font-weight:400}.merek-nama b{font-weight:700}.sisi nav{padding:.75rem 0;flex:1;overflow-y:auto;min-height:0}.sisi .kelompok{padding:.9rem 1.1rem .35rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6}.sisi a{display:block;padding:.55rem 1.1rem;color:#dce8f1;text-decoration:none;border-left:3px solid transparent;font-size:.92rem}.sisi a:hover{background:#ffffff12;color:#fff}.sisi a.aktif{background:#ffffff1f;color:#fff;border-left-color:#fff}.sisi .kaki{padding:.9rem 1.1rem 0;border-top:1px solid rgba(255,255,255,.15);font-size:.8rem}.sisi .kaki button{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;padding:.35rem .7rem;border-radius:4px;cursor:pointer;margin-top:.5rem;font-size:.8rem}.sisi .kaki button.tombol-keluar{transition:background-color .15s,border-color .15s}.sisi .kaki button.tombol-keluar:hover,.sisi .kaki button.tombol-keluar:focus-visible{background:var(--gagal);border-color:var(--gagal);color:#fff}.isi{flex:1;padding:1.6rem 2rem 3rem;overflow-x:auto}.kepala{margin-bottom:1.25rem}.kepala p{margin:0;color:var(--abu);font-size:.92rem}.kartu{background:var(--putih);border:1px solid var(--garis);border-radius:8px;padding:1.1rem 1.25rem;box-shadow:var(--bayang);margin-bottom:1rem}.petak{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr))}.sel-kartu{cursor:pointer;transition:border-color .12s,transform .12s}.sel-kartu:hover{border-color:var(--biru);transform:translateY(-1px)}.sel-kartu .kode{font-size:.74rem;color:var(--abu);letter-spacing:.06em}.sel-kartu .nama{font-weight:600;margin:.1rem 0 .55rem}.sel-kartu .nilai{font-size:1.9rem;font-weight:600;line-height:1}.sel-kartu .satuan{font-size:.8rem;color:var(--abu);margin-left:.2rem;font-weight:400}.sel-kartu .jam{font-size:.78rem;color:var(--abu);margin-top:.5rem}.lencana{display:inline-block;padding:.16rem .55rem;border-radius:999px;font-size:.76rem;font-weight:600;color:#fff}.lencana.baik{background:var(--baik)}.lencana.sedang{background:var(--sedang)}.lencana.buruk{background:var(--buruk)}.lencana.sangat-buruk{background:var(--sangat-buruk)}.lencana.abu{background:var(--abu)}.lencana.gagal{background:var(--gagal)}.sorot{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}.sorot .angka{font-size:3rem;font-weight:600;line-height:1}table{width:100%;border-collapse:collapse;font-size:.88rem}th,td{padding:.5rem .6rem;border-bottom:1px solid var(--garis);text-align:left}th{background:var(--abu-muda);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--abu)}tbody tr:hover{background:#fafbfc}td.angka,th.angka{text-align:right;font-variant-numeric:tabular-nums}select,input,button,textarea{font-family:inherit;font-size:.9rem;padding:.45rem .6rem;border:1px solid var(--garis);border-radius:5px;background:#fff;color:var(--teks)}button{cursor:pointer}button.utama{background:var(--biru);color:#fff;border-color:var(--biru);font-weight:500}button.utama:disabled{opacity:.55;cursor:not-allowed}button.kecil{padding:.25rem .5rem;font-size:.8rem}.baris-kendali{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}.baris-kendali button,td button.kecil{transition:background .15s ease,color .15s ease,border-color .15s ease}.baris-kendali button:hover:not(:disabled):not(.aktif),td button.kecil:hover:not(:disabled):not(.aktif){background:var(--biru);border-color:var(--biru);color:#fff}.baris-kendali button:active:not(:disabled):not(.aktif),td button.kecil:active:not(:disabled):not(.aktif){background:#0f3b5c;border-color:#0f3b5c;color:#fff}.baris-monitoring{justify-content:space-between}.tab-monitoring{display:flex;flex-wrap:wrap;gap:.6rem}.baris-kendali button.sinkron{background:#2e7d4f;border-color:#2e7d4f;color:#fff;font-weight:600}.baris-kendali button.sinkron:hover:not(:disabled),.baris-kendali button.sinkron:active:not(:disabled){background:#1f5e39;border-color:#1f5e39;color:#fff}.baris-kendali button.sinkron:disabled{opacity:.55;cursor:not-allowed}td button.kecil:focus-visible{outline:2px solid var(--biru);outline-offset:2px}label.medan{display:block;margin-bottom:.75rem}label.medan span{display:block;font-size:.82rem;color:var(--abu);margin-bottom:.25rem}label.medan input,label.medan select{width:100%}.catatan{padding:.7rem .9rem;border-radius:6px;font-size:.87rem;line-height:1.5}.catatan.info{background:var(--biru-muda);border:1px solid #c5dced}.catatan.ingat{background:#fdf4e3;border:1px solid #f0dcb4}.catatan.galat{background:#fbeaea;border:1px solid #f0c9c9}.kecil{font-size:.82rem;color:var(--abu)}.tengah{text-align:center;padding:2.5rem 1rem;color:var(--abu)}.masuk-bingkai{min-height:100vh;display:grid;place-items:center;background:var(--biru)}.masuk-kotak{width:100%;max-width:340px;background:#fff;border-radius:10px;padding:1.75rem}.halaman{display:flex;justify-content:center;align-items:center;gap:.35rem;margin-top:1rem}.halaman button,.halaman .elipsis{min-width:2rem;height:2rem;padding:0 .5rem;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:.85rem}.halaman button{background:var(--putih);color:var(--teks);border:1px solid var(--garis);border-radius:6px;cursor:pointer;transition:background .12s,border-color .12s}.halaman button:hover:not(:disabled):not(.aktif){background:var(--abu-muda);border-color:#c3ccd5}.halaman button:focus-visible{outline:2px solid var(--biru);outline-offset:2px}.halaman button.aktif{background:var(--biru);border-color:var(--biru);color:#fff;font-weight:600;cursor:default}.halaman button:disabled{color:#a9b4be;background:var(--abu-muda);cursor:not-allowed}.halaman .elipsis{color:var(--abu);min-width:1.4rem;padding:0}button.tautan{background:none;border:none;padding:0;font:inherit;color:var(--biru);text-decoration:underline;cursor:pointer}button.tautan:hover{opacity:.8}.sorot-tirai{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;background:#1c283373;padding:1rem;animation:sorot-masuk .15s ease-out}.sorot-kotak{width:100%;max-width:380px;background:var(--putih);border-radius:10px;padding:1.75rem 1.5rem 1.4rem;text-align:center;box-shadow:0 12px 32px #1c283338;animation:sorot-naik .18s ease-out}.sorot-kotak h2{font-size:1.15rem;margin:0 0 .4rem}.sorot-kotak p{font-size:.88rem;color:var(--abu);line-height:1.5;margin:0 0 1.1rem}.sorot-kotak button{min-width:7rem}.sorot-ikon{width:68px;height:68px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;font-size:2.1rem;font-weight:700;line-height:1}.sorot-ikon.memuat{border:4px solid var(--abu-muda)}.sorot-ikon.berhasil{border:4px solid var(--baik);color:var(--baik)}.sorot-ikon.galat{border:4px solid var(--sangat-buruk);color:var(--sangat-buruk)}.sorot-putar{width:36px;height:36px;border-radius:50%;border:4px solid var(--garis);border-top-color:var(--biru);animation:sorot-berputar .8s linear infinite}@keyframes sorot-berputar{to{transform:rotate(360deg)}}@keyframes sorot-masuk{0%{opacity:0}}@keyframes sorot-naik{0%{transform:translateY(12px) scale(.96)}}@media(prefers-reduced-motion:reduce){.sorot-tirai,.sorot-kotak{animation:none}.sorot-putar{animation-duration:2s}}.sisi .kaki button.profil-pemicu{display:flex;align-items:center;gap:.55rem;width:100%;margin-top:0;padding:.4rem .45rem;text-align:left;background:none;border:1px solid transparent;border-radius:6px;color:#fff;font:inherit;font-size:.8rem;cursor:pointer}.sisi .kaki button.profil-pemicu:hover{background:#ffffff1a}.sisi .kaki button.profil-pemicu:focus-visible{outline:2px solid #fff;outline-offset:1px}.profil-pemicu-teks{display:block;min-width:0}.profil-pemicu-teks .nama{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profil-pemicu-teks .peran{display:block;font-size:.74rem;opacity:.7;text-transform:capitalize}.profil-awalan{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--biru-muda);color:var(--biru);font-size:1.25rem;font-weight:600;line-height:1}.profil-awalan.kecil-awalan{width:28px;height:28px;font-size:.85rem;background:#ffffff2e;color:#fff}.profil-kotak{position:relative;width:100%;max-width:420px;background:var(--putih);color:var(--teks);border-radius:10px;padding:1.5rem 1.5rem 1.35rem;box-shadow:0 12px 32px #1c283338;animation:sorot-naik .18s ease-out;max-height:calc(100vh - 2rem);overflow-y:auto}.profil-tutup{position:absolute;top:.55rem;right:.65rem;width:1.9rem;height:1.9rem;display:grid;place-items:center;background:none;border:0;border-radius:50%;color:var(--abu);font-size:1.35rem;line-height:1;cursor:pointer}.profil-tutup:hover{background:var(--abu-muda);color:var(--teks)}.profil-kepala{display:flex;align-items:center;gap:.85rem;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--garis)}.profil-kepala h2{font-size:1.1rem;margin:0 0 .15rem}.profil-kepala p{margin:0}.profil-rincian{margin:0;display:grid;gap:.7rem}.profil-rincian dt{font-size:.78rem;color:var(--abu);margin-bottom:.1rem}.profil-rincian dd{margin:0;font-size:.9rem;color:var(--teks)}.profil-borang h3{margin:0 0 .9rem}.profil-borang label.medan small{display:block;margin-top:.25rem}.profil-borang .catatan{margin-bottom:.9rem}.profil-aksi{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}.profil-aksi button{padding:.45rem .9rem}.profil-aksi.tegak{flex-direction:column;align-items:stretch;gap:.5rem}.profil-aksi.tegak button{width:100%;text-align:center}@media(prefers-reduced-motion:reduce){.profil-kotak{animation:none}}.menu-pemicu,.sisi-tirai{display:none}.sisi-panel{display:contents}@media(max-width:860px){:root{--tinggi-bilah: 60px}.bingkai{flex-direction:column}.sisi{width:100%;flex:none;height:auto;padding:0;align-self:stretch;z-index:40;box-shadow:0 2px 10px #0f283d38}.sisi .judul{position:relative;z-index:3;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:var(--tinggi-bilah);padding:0 .6rem;background:var(--biru);border-bottom:0}.sisi a.merek{grid-column:2;justify-self:center;gap:.5rem;margin:0;padding:.2rem .4rem}.merek-logo{width:34px;height:34px;flex-basis:34px}.merek-nama{font-size:1.22rem}.sisi .judul button.menu-pemicu{grid-column:1;grid-row:1;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;padding:0;background:none;border:0;border-radius:8px;color:#fff;-webkit-tap-highlight-color:transparent}.menu-pemicu:hover,.menu-pemicu:active{background:#ffffff1a}.menu-pemicu:focus-visible{outline:2px solid #fff;outline-offset:0}.menu-pemicu span{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}.menu-pemicu[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-pemicu[aria-expanded=true] span:nth-child(2){opacity:0}.menu-pemicu[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.sisi-panel{position:absolute;top:100%;left:0;right:0;z-index:2;display:flex;flex-direction:column;max-height:calc(100vh - var(--tinggi-bilah));max-height:calc(100dvh - var(--tinggi-bilah));background:var(--biru);border-top:1px solid rgba(255,255,255,.12);border-radius:0 0 14px 14px;box-shadow:0 14px 32px #0f283d4d;overflow:hidden;transform:translateY(calc(-100% - var(--tinggi-bilah)));visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s}.menu-terbuka .sisi-panel{transform:translateY(0);visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s}.sisi nav{padding:.5rem 0}.sisi nav a{padding:.85rem 1.25rem;font-size:.98rem}.sisi .kelompok{padding:1rem 1.25rem .4rem}.sisi .kaki{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom));font-size:.88rem}.sisi .kaki button.profil-pemicu{flex:1;min-width:0;font-size:.88rem}.sisi .kaki>button:not(.profil-pemicu){margin-top:0;padding:.5rem 1rem;font-size:.85rem}.sisi-tirai{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;background:#0f1e2d73;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}.menu-terbuka .sisi-tirai{opacity:1;visibility:visible;transition:opacity .3s ease}.isi{padding:1.15rem 1rem 2.5rem;min-width:0}h1{font-size:1.3rem}h2{font-size:1.08rem;margin-top:1.4rem}.kartu{padding:1rem;border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}th,td{padding:.55rem .5rem}.sorot .angka{font-size:2.4rem}.sel-kartu:hover{transform:none}select,input,textarea{font-size:16px;min-height:42px}button{min-height:40px}button.kecil,button.tautan,.halaman button,.profil-tutup,input[type=checkbox],input[type=radio]{min-height:0}.baris-kendali>span:empty{display:none}.baris-kendali select,.baris-kendali input:not([type=checkbox]):not([type=radio]){flex:1 1 160px;min-width:0}.tab-monitoring{display:grid;grid-template-columns:1fr 1fr;width:100%}.tab-monitoring button{width:100%}.baris-kendali button.sinkron{width:100%;margin-top:.25rem}.sorot-kotak,.profil-kotak{padding:1.4rem 1.15rem 1.2rem}}@media(max-width:400px){.merek-nama{font-size:1.1rem}.isi{padding-left:.85rem;padding-right:.85rem}}@media(max-width:860px)and (prefers-reduced-motion:reduce){.sisi-panel,.menu-terbuka .sisi-panel,.sisi-tirai,.menu-terbuka .sisi-tirai,.menu-pemicu span{transition:none}}.swal2-popup.swal-ringkas{padding:1.4rem 1.4rem 1.2rem;border-radius:10px;font-size:.9rem;color:var(--teks)}.swal-ringkas .swal-ringkas-ikon{width:3.5rem;height:3.5rem;margin:0 auto .9rem;font-size:.75rem}.swal-ringkas .swal-ringkas-judul{padding:0;font-size:1.1rem;font-weight:700;color:var(--teks)}.swal-ringkas .swal-ringkas-teks{margin:.5rem 0 0;padding:0;font-size:.88rem;line-height:1.5;color:var(--abu)}.swal-ringkas .swal-ringkas-aksi{margin:1.2rem 0 0;gap:.6rem}.swal-ringkas .swal-ringkas-tombol{margin:0;padding:.5rem 1.1rem;font-size:.85rem;border-radius:6px}