/* Pasang Aplikasi (PWA): kartu di halaman login, banner otomatis di beranda HP, tombol di menu akun/sidebar, dan dialog petunjuk. Berdiri sendiri (dipakai login, portal guru, portal karyawan). */
[data-pwa-kartu][hidden], [data-pwa-pasang][hidden], #pwa-dialog [hidden], .pwa-banner[hidden], .pwa-toast[hidden] { display: none !important; }

.pwa-kartu { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border: 1.5px dashed #9DB9EA; border-radius: 18px; background: #F2F7FF; }
.pwa-kartu-ikon { flex: none; width: 46px; height: 46px; border-radius: 12px; object-fit: contain; background: #fff; box-shadow: 0 2px 8px rgba(19, 60, 140, .12); }
.pwa-kartu-teks { flex: 1; min-width: 0; }
.pwa-kartu-teks strong { display: block; font: 700 14.5px/1.3 'Poppins', system-ui, sans-serif; color: #072268; }
.pwa-kartu-teks span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #4A5B7A; }
.pwa-tombol { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #1356E6; color: #fff; font: 700 13.5px 'Poppins', system-ui, sans-serif; cursor: pointer; }
.pwa-tombol:hover { background: #0A3DB8; }
.pwa-tombol:focus-visible { outline: 3px solid #072268; outline-offset: 3px; }
@media (max-width: 420px) { .pwa-kartu { flex-wrap: wrap; } .pwa-tombol { width: 100%; } }

/* Tombol di menu akun portal guru (g-pop-menu) dan sidebar portal karyawan (nav-item) */
button.g-pop-menu[data-pwa-pasang], button.nav-item[data-pwa-pasang] { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }

.pwa-dialog { width: min(92vw, 440px); max-height: 88dvh; padding: 0; border: 0; border-radius: 22px; background: #fff; color: #14233F; box-shadow: 0 24px 60px rgba(7, 34, 104, .35); overflow: auto; }
.pwa-dialog::backdrop { background: rgba(7, 34, 104, .5); }
.pwa-dialog-isi { display: grid; gap: 12px; padding: 22px 22px 20px; font-family: 'Poppins', system-ui, sans-serif; }
.pwa-dialog h2 { margin: 0; font: 800 20px/1.2 'Baloo 2', 'Poppins', sans-serif; color: #072268; }
.pwa-dialog p { margin: 0; font-size: 14px; line-height: 1.6; color: #3B4A68; }
.pwa-dialog ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.55; color: #14233F; }
.pwa-dialog .pwa-catatan { padding: 10px 12px; border-radius: 12px; background: #FFF4D6; color: #6B4300; font-size: 13px; }
.pwa-dialog .pwa-tombol { justify-self: end; }
.pwa-dialog .pwa-dialog-kepala { display: flex; align-items: center; gap: 14px; }
.pwa-dialog .pwa-dialog-kepala img { flex: none; width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 4px 14px rgba(19, 60, 140, .28); }
.pwa-dialog .pwa-kecil { font-size: 12.5px; line-height: 1.5; color: #5D6F8D; }

/* Langkah bernomor (dialog petunjuk) */
.pwa-dialog ol.pwa-langkah { padding: 0; list-style: none; counter-reset: langkah; gap: 10px; }
.pwa-dialog ol.pwa-langkah > li { position: relative; min-height: 26px; padding-left: 38px; counter-increment: langkah; }
.pwa-dialog ol.pwa-langkah > li::before {
    content: counter(langkah); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: #1356E6; color: #fff; font: 700 13px/1 'Poppins', system-ui, sans-serif;
}
.pwa-dialog .pwa-ikon { display: inline-block; width: 20px; height: 20px; margin: 0 2px; vertical-align: -4px; fill: none; stroke: #1356E6; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pwa-dialog .pwa-tombol-lebar, .pwa-banner .pwa-tombol-lebar { width: 100%; justify-self: stretch; }
a.pwa-tombol { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Banner pasang otomatis: kartu melayang di bawah layar (di atas tab bawah portal guru lewat --pwa-bawah) */
.pwa-banner {
    position: fixed; left: 12px; right: 12px; bottom: calc(var(--pwa-bawah, 0px) + 12px + env(safe-area-inset-bottom)); z-index: 90;
    display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto; padding: 12px 8px 12px 12px;
    border: 1px solid #D5E2F7; border-radius: 20px; background: #fff; color: #14233F; box-shadow: 0 16px 40px rgba(7, 34, 104, .28);
    font-family: 'Poppins', system-ui, sans-serif; opacity: 0; transform: translateY(24px); transition: opacity .3s ease, transform .3s ease;
}
.pwa-banner.is-tampil { opacity: 1; transform: none; }
.pwa-banner .pwa-banner-ikon { flex: none; width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 3px 10px rgba(19, 60, 140, .3); }
.pwa-banner .pwa-banner-teks { flex: 1; min-width: 0; }
.pwa-banner .pwa-banner-teks strong { display: block; font: 700 14px/1.3 'Poppins', system-ui, sans-serif; color: #072268; }
.pwa-banner .pwa-banner-teks span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: #4A5B7A; }
.pwa-banner .pwa-tombol { width: auto; min-height: 42px; padding: 0 16px; font-size: 13.5px; }
.pwa-banner .pwa-banner-tutup {
    flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: #5D6F8D;
    font: 400 24px/1 system-ui, sans-serif; cursor: pointer;
}
.pwa-banner .pwa-banner-tutup:hover { background: #EEF3FC; }
.pwa-banner .pwa-banner-tutup:focus-visible { outline: 3px solid #072268; outline-offset: 2px; }

.pwa-toast {
    position: fixed; left: 50%; bottom: calc(var(--pwa-bawah, 0px) + 16px + env(safe-area-inset-bottom)); z-index: 95; width: max-content; max-width: calc(100vw - 32px);
    transform: translateX(-50%); padding: 12px 18px; border-radius: 14px; background: #072268; color: #fff;
    font: 600 13.5px/1.4 'Poppins', system-ui, sans-serif; box-shadow: 0 10px 30px rgba(7, 34, 104, .4);
}
@media (prefers-reduced-motion: reduce) { .pwa-banner { transition: none; transform: none; } }