/* SPPD Anti-Tekor · gaya "Rapi Kantor" (Pilihan 3) */
:root {
  --latar: #f4f6fb; --kartu: #ffffff; --garis: #e4e8f1; --teks: #1b2433; --redup: #6b7488;
  --utama: #2f5bd3; --utama2: #4b77ea; --aksen: #f08a3a; --lembut: #eef2fb;
  --ok: #1f9466; --bahaya: #d64a41; --radius: 16px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  background: var(--latar); color: var(--teks); font-size: 16px; line-height: 1.45;
  min-height: 100vh; min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; }
h2 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
label { display: block; font-size: 14px; font-weight: 600; margin: 4px 0 6px; }
.redup { color: var(--redup); }
.kecil { font-size: 13px; }
.tengah { text-align: center; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { padding: 24px; text-align: center; }

/* layar */
.layar { display: none; padding: 16px 18px 28px; max-width: 1040px; margin: 0 auto; }
.layar.aktif { display: block; }
.memuat { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 60vh; color: var(--redup); }
.putar { width: 20px; height: 20px; border: 3px solid var(--garis); border-top-color: var(--utama); border-radius: 50%; animation: putar .8s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }

.dua-kolom { display: flex; flex-direction: column; gap: 16px; }
.kolom-isi { display: flex; flex-direction: column; gap: 14px; }
.kepala { text-align: center; }
.kepala p { margin-top: 2px; }
.sempit { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

/* kartu */
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 4px 16px rgba(27, 36, 51, .05); }

/* isian */
.isian { width: 100%; font: inherit; font-size: 16px; color: var(--teks); background: #fff; border: 1px solid var(--garis); border-radius: 12px; padding: 12px 14px; min-height: 48px; outline: none; transition: border-color .15s, box-shadow .15s; }
.isian:focus { border-color: var(--utama); box-shadow: 0 0 0 3px rgba(47, 91, 211, .15); }
.isian.kode { text-align: center; font-size: 24px; letter-spacing: 10px; font-weight: 700; }
.isian-sandi { position: relative; }
.isian-sandi .isian { padding-right: 52px; }
.lihat { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 40px; border: 0; background: transparent; font-size: 18px; cursor: pointer; border-radius: 10px; }
.status-isian { min-height: 18px; margin-top: -4px; color: var(--redup); }
.status-isian.ok { color: var(--ok); font-weight: 600; }
.status-isian.salah { color: var(--bahaya); font-weight: 600; }

/* tombol */
.tombol { display: block; width: 100%; font: inherit; font-weight: 700; font-size: 16px; text-align: center; text-decoration: none; border-radius: 14px; padding: 13px 14px; min-height: 50px; cursor: pointer; border: 1px solid transparent; transition: filter .15s, opacity .15s; -webkit-tap-highlight-color: transparent; }
.tombol.utama { background: linear-gradient(135deg, var(--utama), var(--utama2)); color: #fff; box-shadow: 0 6px 16px rgba(47, 91, 211, .28); }
.tombol.kedua { background: var(--lembut); color: var(--teks); border-color: var(--garis); }
.tombol.bahaya { background: #fff; color: var(--bahaya); border-color: #f1c9c5; }
.tombol:active { filter: brightness(.95); }
.tombol[disabled] { opacity: .5; cursor: not-allowed; }
.tombol.sibuk { opacity: .7; pointer-events: none; }
.tautan { background: none; border: 0; color: var(--utama); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; padding: 8px; align-self: center; }
.baris-tombol { display: flex; gap: 8px; }
.pemisah { display: flex; align-items: center; gap: 10px; color: var(--redup); font-size: 13px; }
.pemisah::before, .pemisah::after { content: ""; flex: 1; height: 1px; background: var(--garis); }
.kotak-kode { display: flex; flex-direction: column; gap: 8px; }
.kotak-kode[hidden], form[hidden], [hidden] { display: none !important; }

/* pesan */
.pesan { border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; background: #fdecea; color: #8f2c25; border: 1px solid #f5c6c1; }
.pesan.ok { background: #e7f6ef; color: #17694a; border-color: #bfe6d4; }
.pesan.info { background: var(--lembut); color: var(--teks); border-color: var(--garis); }
.kaki { margin-top: 2px; }

/* Jaka & Dea */
.pinguin { position: relative; display: block; width: 100%; border: 2px solid var(--garis); border-radius: 20px; overflow: hidden; background: #dfe5f0; padding: 0; cursor: pointer; box-shadow: 0 8px 22px rgba(27, 36, 51, .12); -webkit-tap-highlight-color: transparent; }
.pinguin-besar { height: 200px; }
.pinguin-kecil { width: 76px; height: 76px; flex: none; border-radius: 18px; }
.pinguin-poster, .pinguin-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.pinguin-video { opacity: 0; transition: opacity .25s; pointer-events: none; }
.pinguin.main .pinguin-video { opacity: 1; }
.ketuk-label { position: absolute; right: 8px; bottom: 8px; background: rgba(255, 255, 255, .88); color: var(--teks); font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 20px; }
.pinguin.diam .ketuk-label { display: none; }

/* akun */
.kepala-akun { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding-top: 6px; }
.saklar { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.saklar input { width: 22px; height: 22px; accent-color: var(--utama); }

/* laptop */
@media (min-width: 900px) {
  .layar { padding: 48px 32px; }
  .dua-kolom { flex-direction: row; align-items: stretch; gap: 32px; min-height: 560px; }
  .dua-kolom > .pinguin-besar { flex: 1.1; height: auto; min-height: 520px; }
  .dua-kolom > .kolom-isi { flex: 1; justify-content: center; max-width: 440px; }
  .kepala { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .putar { animation-duration: 2s; }
  .pinguin-video { transition: none; }
}