/* =============================================================================
   AKSES CEPAT: papan PIN & sandi pola (2026-10)
   Dipakai di halaman login siswa/wali, login pegawai, dan halaman pengaturan.
   Warna mengikuti variabel --ac-warna (bawaan teal SANDIK).
   ============================================================================= */
.ac-pad { --ac-warna: #028A81; --ac-warna-muda: rgba(2, 138, 129, .12); --ac-teks: #1e293b; --ac-redup: #94a3b8; --ac-galat: #dc2626;
    font-family: inherit; color: var(--ac-teks); user-select: none; -webkit-user-select: none; }

/* ---- titik PIN ---- */
.ac-titik { display: flex; justify-content: center; gap: 14px; margin: 6px 0 18px; }
.ac-titik i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ac-redup); transition: background .12s, box-shadow .12s, transform .12s; }
.ac-titik i.isi { background: var(--ac-warna); box-shadow: inset 0 0 0 2px var(--ac-warna); transform: scale(1.08); }
.ac-pad.galat .ac-titik i { box-shadow: inset 0 0 0 2px var(--ac-galat); }
.ac-pad.galat .ac-titik i.isi { background: var(--ac-galat); }
.ac-pad.galat .ac-titik, .ac-pad.galat .ac-pola-kotak { animation: ac-getar .4s; }
@keyframes ac-getar { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* ---- papan angka ---- */
.ac-angka { display: grid; grid-template-columns: repeat(3, 64px); justify-content: center; gap: 12px 22px; }
.ac-angka button { width: 64px; height: 64px; border: 0; border-radius: 50%; background: #f1f5f9; color: var(--ac-teks);
    font-family: inherit; font-weight: 600; font-size: 24px; line-height: 1; cursor: pointer; transition: background .12s, transform .08s; -webkit-tap-highlight-color: transparent; }
.ac-angka button:hover { background: var(--ac-warna-muda); }
.ac-angka button:active { transform: scale(.94); background: var(--ac-warna-muda); }
.ac-angka button:focus-visible { outline: 2px solid var(--ac-warna); outline-offset: 2px; }
.ac-angka button.ac-polos { background: transparent; font-size: 18px; color: #64748b; }
.ac-angka button.ac-polos:hover { background: #f1f5f9; }
.ac-angka button[disabled] { opacity: .45; cursor: default; }

/* ---- sandi pola ---- */
.ac-pola-kotak { position: relative; width: 240px; height: 240px; margin: 0 auto; touch-action: none; }
.ac-pola-kotak svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ac-pola-kotak .ac-garis { stroke: var(--ac-warna); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: .75; }
.ac-pad.galat .ac-pola-kotak .ac-garis { stroke: var(--ac-galat); }
.ac-pola-kotak .ac-bulat { fill: #cbd5e1; transition: r .12s, fill .12s; }
.ac-pola-kotak .ac-bulat.aktif { fill: var(--ac-warna); }
.ac-pola-kotak .ac-cincin { fill: transparent; stroke: transparent; stroke-width: 2; transition: stroke .12s; }
.ac-pola-kotak .ac-cincin.aktif { stroke: var(--ac-warna); fill: var(--ac-warna-muda); }
.ac-pad.galat .ac-pola-kotak .ac-bulat.aktif { fill: var(--ac-galat); }
.ac-pad.galat .ac-pola-kotak .ac-cincin.aktif { stroke: var(--ac-galat); fill: rgba(220, 38, 38, .08); }
.ac-pad.mati .ac-pola-kotak, .ac-pad.mati .ac-angka { opacity: .5; pointer-events: none; }

.ac-pesan { min-height: 20px; margin: 10px 0 0; text-align: center; font-size: 13px; color: #64748b; }
.ac-pad.galat .ac-pesan { color: var(--ac-galat); font-weight: 600; }

@media (max-width: 380px) {
    .ac-angka { grid-template-columns: repeat(3, 58px); gap: 10px 18px; }
    .ac-angka button { width: 58px; height: 58px; font-size: 22px; }
    .ac-pola-kotak { width: 220px; height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
    .ac-pad.galat .ac-titik, .ac-pad.galat .ac-pola-kotak { animation: none; }
}