/* Semesta EV HRIS: layar masuk dan panel Akun & akses. Warna mengikuti token aplikasi (brand SEMESTA.EV). */
html.hg-open, html.hp-open { overflow: hidden; }
.hg { position: fixed; inset: 0; z-index: 200; background: #0A0A0A; display: flex; align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.hg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0, 209, 193, .14), transparent 70%); pointer-events: none; }
.hg-card { position: relative; width: min(420px, 100%); background: #FFFFFF; color: #0A0A0A; border-radius: 16px; padding: 28px 24px 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.hg-logo { width: 200px; height: auto; display: block; }
.hg-app { font: 700 11.5px/1 var(--f-ui); letter-spacing: .22em; color: #00756D; margin-top: -4px; }
.hg-card h1 { font: 700 22px/1.25 var(--f-title); margin: 8px 0 0; letter-spacing: -.01em; }
.hg-sub { margin: 0; color: #5E5E5E; font-size: 14px; line-height: 1.5; }
.hg-google { width: 100%; min-height: 46px; gap: 10px; font-size: 15px; }
.hg-or { display: flex; align-items: center; gap: 10px; color: #6B6B6B; font-size: 12.5px; }
.hg-or::before, .hg-or::after { content: ""; flex: 1; border-top: 1px solid #E3E7E7; }
.hg-form { display: flex; flex-direction: column; gap: 10px; }
.hg-form .inp { font-size: 16px; min-height: 44px; }
.hg-wide { width: 100%; min-height: 46px; font-size: 15px; }
.hg-links { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hg-links button { all: unset; cursor: pointer; color: #00756D; font-size: 13.5px; font-weight: 600; padding: 6px 0; }
.hg-links button:focus-visible { outline: 2px solid #00756D; outline-offset: 2px; border-radius: 4px; }
.hg-msg { margin: 0; min-height: 1.2em; font-size: 13.5px; color: #00756D; }
.hg-msg.bad { color: #B33524; }
.hg-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: #F1F5F5; color: #3D4646; font-size: 12.5px; line-height: 1.5; }
.hg-uji, .hris-uji { position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 210; background: #F59E0B; color: #0A0A0A; font: 800 11px/1 var(--f-ui); letter-spacing: .12em; padding: 6px 9px; border-radius: 6px; pointer-events: none; }
.hp { z-index: 120; }
.hp .modal-b h2 { font-family: var(--f-ui); }
.hp hr.sep { margin: 2px 0; }
.hp a.btn { text-decoration: none; }
.who-link { display: flex; gap: 10px; align-items: center; min-width: 0; width: 100%; color: inherit; text-decoration: none; border-radius: 8px; }
.who-link:hover .who b { text-decoration: underline; }
.m-user .who-link { gap: 8px; width: auto; color: inherit; }
@media (max-width: 640px) { .hp .fgrid { grid-template-columns: minmax(0, 1fr) !important; } }