/* =========================================================
   Tampilan Autentikasi (Shield) — Toko Adie
   Melengkapi publik.css; memakai variabel warna yang sama.
   ========================================================= */

.halaman-auth { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(900px 500px at 100% 0%, #e8f0ff 0%, transparent 60%), var(--latar); }
.halaman-auth main { flex: 1; display: flex; align-items: center; }

/* ---------- Kepala & kaki ringkas ---------- */
.kepala-auth { padding: 1rem 0; background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--garis); }
.tautan-kembali { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: #334155; padding: .5rem .9rem; border-radius: 999px; transition: background .2s ease, color .2s ease; }
.tautan-kembali:hover { background: #eef2f7; color: var(--merek); }
.kaki-auth { color: var(--redup); border-top: 1px solid var(--garis); background: var(--permukaan); }
.kaki-auth a { color: var(--redup); }
.kaki-auth a:hover { color: var(--merek); }

/* ---------- Bingkai dua panel ---------- */
.bingkai-auth { width: 100%; max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1fr; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 28px; box-shadow: var(--bayangan-sedang); overflow: hidden; animation: naikPudar .7s cubic-bezier(.2,.8,.2,1) both; }
@media (min-width: 992px) { .bingkai-auth { grid-template-columns: 1fr 1fr; } }

.panel-merek { position: relative; overflow: hidden; color: #fff; padding: 56px 48px; align-items: center; background: radial-gradient(800px 500px at 90% -10%, #24508f 0%, transparent 60%), linear-gradient(135deg, #0b1f3a 0%, #102a4f 55%, #0b1f3a 100%); }
.panel-merek::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 90%); mask-image: linear-gradient(to bottom, #000 30%, transparent 90%); pointer-events: none; }
.panel-merek .isi-panel { position: relative; z-index: 1; }
.panel-merek h2 { font-weight: 800; letter-spacing: -.03em; line-height: 1.12; font-size: 2.2rem; }
.panel-merek .gumpalan-1 { width: 240px; height: 240px; right: -70px; bottom: -70px; top: auto; opacity: .55; }
.panel-merek .gumpalan-2 { width: 90px; height: 90px; right: 150px; bottom: 60px; opacity: .45; }
.teks-panel { color: #cbd5e1; max-width: 420px; }
.daftar-keunggulan li { display: flex; align-items: center; gap: .75rem; color: #e2e8f0; font-weight: 500; }
.ikon-keunggulan { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: var(--aksen); }

.panel-form { padding: 44px 24px; }
@media (min-width: 576px) { .panel-form { padding: 52px 56px; } }

/* ---------- Kepala formulir ---------- */
.kepala-form { margin-bottom: 1.75rem; }
.ikon-form { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.45rem; color: var(--merek-2); background: #eef4ff; margin-bottom: 1rem; }
.ikon-form-besar { width: 72px; height: 72px; border-radius: 22px; font-size: 2rem; }
.ikon-form-sukses { background: #dcfce7; color: #15803d; }
.judul-form { font-weight: 800; letter-spacing: -.02em; font-size: 1.65rem; margin-bottom: .4rem; }

/* ---------- Kolom input ---------- */
.form-auth .form-label { font-weight: 600; font-size: .9rem; color: #334155; }
.grup-input { position: relative; }
.grup-input > .bi { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--redup); pointer-events: none; transition: color .2s ease; }
.grup-input .form-control { padding: .8rem 1rem .8rem 2.75rem; }
.grup-input:has(.tombol-lihat-sandi) .form-control { padding-right: 3rem; }
.grup-input:focus-within > .bi { color: var(--merek-2); }
.form-auth .form-control { border-radius: 14px; border: 1px solid var(--garis); background: #f8fafc; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.form-auth .form-control:focus { background: #fff; border-color: var(--merek-2); box-shadow: 0 0 0 .25rem rgba(22,52,95,.12); }
.form-auth .form-control::placeholder { color: #94a3b8; }
.form-auth.was-validated .form-control:invalid { border-color: #ef4444; background-image: none; }
.form-auth.was-validated .form-control:valid { border-color: var(--garis); background-image: none; }
.form-auth.was-validated .form-control:invalid:focus { box-shadow: 0 0 0 .25rem rgba(239,68,68,.15); }
.form-auth .form-check-input:checked { background-color: var(--merek); border-color: var(--merek); }
.form-auth .form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(22,52,95,.12); }

.tombol-lihat-sandi { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--redup); display: grid; place-items: center; }
.tombol-lihat-sandi:hover { background: #eef2f7; color: var(--merek); }

.input-kode { text-align: center; font-size: 1.75rem; font-weight: 800; letter-spacing: .6em; padding: .8rem 0 .8rem .6em !important; font-variant-numeric: tabular-nums; }

/* ---------- Kekuatan kata sandi ---------- */
.kekuatan-sandi .bilah { height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; margin-bottom: .4rem; }
.kekuatan-sandi .bilah span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .3s ease, background .3s ease; }
.kekuatan-sandi[data-tingkat="1"] .bilah span { width: 25%; background: #ef4444; }
.kekuatan-sandi[data-tingkat="2"] .bilah span { width: 50%; background: #f59e0b; }
.kekuatan-sandi[data-tingkat="3"] .bilah span { width: 75%; background: #3b82f6; }
.kekuatan-sandi[data-tingkat="4"] .bilah span { width: 100%; background: #10b981; }

/* ---------- Tombol tambahan ---------- */
.tombol-utama, .tombol-aksen, .tombol-garis { padding-top: .85rem; padding-bottom: .85rem; }
.tombol-garis { border-radius: 999px; font-weight: 700; border: 1px solid var(--garis); color: var(--merek); background: #fff; transition: all .2s ease; }
.tombol-garis:hover { border-color: var(--merek); color: var(--merek); background: #f8fafc; }
.btn.sedang-proses { pointer-events: none; opacity: .85; }

/* ---------- Pesan & info ---------- */
.pesan-auth { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 14px; margin-bottom: 1.25rem; font-size: .92rem; animation: naikPudar .4s ease both; }
.pesan-auth > .bi { font-size: 1.1rem; line-height: 1.3; }
.pesan-galat { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.pesan-sukses { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.kotak-info { display: flex; gap: .75rem; padding: .9rem 1rem; border-radius: 14px; background: #f8fafc; border: 1px dashed var(--garis); color: #475569; font-size: .9rem; }
.kotak-info > .bi { color: var(--merek-2); font-size: 1.1rem; }

.pemisah-auth { display: flex; align-items: center; gap: 1rem; margin: 1.75rem 0 1.25rem; color: #94a3b8; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }
.pemisah-auth::before, .pemisah-auth::after { content: ""; flex: 1; height: 1px; background: var(--garis); }

@media (max-width: 575.98px) {
  .bingkai-auth { border-radius: 20px; }
  .judul-form { font-size: 1.4rem; }
}