/* =========================================================================
   Halaman autentikasi (masuk, daftar, lupa & atur ulang kata sandi, PIN)

   Bahasa rupanya sengaja disamakan dengan dasbor: huruf Inter, kartu kaca
   bersudut 24px, bayangan lembut, aksen indigo-ungu, label huruf kapital
   kecil, dan ikon bulat berwarna. CSS ini berdiri sendiri -- tidak memakai
   Bootstrap milik layout admin supaya keduanya tidak saling menimpa.
   ========================================================================= */

:root {
    /* --- selaras dengan dasbor --- */
    --tinta-900: #0f172a;
    --tinta-800: #1e293b;
    --tinta-600: #475569;
    --tinta-500: #64748b;
    --tinta-400: #94a3b8;
    --tinta-300: #cbd5e1;
    --tinta-200: #e2e8f0;
    --tinta-100: #f1f5f9;
    --tinta-50: #f8fafc;
    --putih: #ffffff;
    --latar: #f4f7ff;

    --merah: #e11d48;
    --hijau: #059669;
    --kuning: #d97706;

    /* aksen utama: sama dengan tombol & judul di dasbor */
    --aksen: #6366f1;
    --aksen-terang: #818cf8;
    --aksen-tua: #4f46e5;
    --gradien: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);

    /* medali ikon di kepala kartu; tiap halaman menimpanya */
    --medali: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --medali-bayang: rgba(99, 102, 241, .35);

    /* warna panel kiri */
    --merek-1: #4f46e5;
    --merek-2: #7c3aed;
    --merek-3: #a855f7;

    --radius: 24px;
    --radius-md: 16px;
    --radius-sm: 14px;
    --bayang: 0 20px 40px rgba(15, 23, 42, .06);
    --bayang-kartu: 0 24px 60px -24px rgba(15, 23, 42, .25);
    --bayang-tombol: 0 10px 20px rgba(99, 102, 241, .22);
    --transisi: .3s cubic-bezier(.4, 0, .2, 1);
}

/* Tiap halaman hanya mengganti warna medali & panel kiri, supaya keluarga
   warnanya tetap satu dengan dasbor. */
body.halaman-masuk {
    --medali: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    --medali-bayang: rgba(14, 165, 233, .35);
    --merek-1: #0f172a;
    --merek-2: #3730a3;
    --merek-3: #6366f1;
}

body.halaman-daftar {
    --medali: linear-gradient(135deg, #10b981 0%, #0ea5e9 100%);
    --medali-bayang: rgba(16, 185, 129, .32);
    --merek-1: #064e3b;
    --merek-2: #0f766e;
    --merek-3: #0ea5e9;
}

body.halaman-lupa {
    --medali: linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%);
    --medali-bayang: rgba(245, 158, 11, .32);
    --merek-1: #7c2d12;
    --merek-2: #be123c;
    --merek-3: #f59e0b;
}

body.halaman-atur-ulang {
    --medali: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    --medali-bayang: rgba(139, 92, 246, .32);
    --merek-1: #4c1d95;
    --merek-2: #7e22ce;
    --merek-3: #ec4899;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--tinta-600);
    background: var(--latar);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

/* =============================================================== rangka === */

.kerangka {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---------------------------------------------------------- panel merek === */

.panel-merek {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 46px 52px;
    color: var(--putih);
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(255, 255, 255, .18), transparent 60%),
        linear-gradient(150deg, var(--merek-1) 0%, var(--merek-2) 52%, var(--merek-3) 100%);
}

/* titik-titik halus */
.panel-merek::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .5;
    pointer-events: none;
}

/* potongan ikon sebagai cap air */
.merek-latar {
    position: absolute;
    right: -54px;
    bottom: -48px;
    width: 340px;
    opacity: .12;
    transform: rotate(-8deg);
    pointer-events: none;
    filter: brightness(0) invert(1);
}

.cahaya {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.cahaya-1 {
    width: 320px;
    height: 320px;
    top: -90px;
    left: -70px;
    background: rgba(255, 255, 255, .22);
}

.cahaya-2 {
    width: 260px;
    height: 260px;
    bottom: 10%;
    right: -60px;
    background: rgba(255, 255, 255, .14);
}

.merek-atas,
.merek-isi,
.merek-bawah {
    position: relative;
    z-index: 1;
}

.merek-isi {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.merek-logo {
    width: 178px;
    max-width: 62%;
    height: auto;
}

.merek-judul {
    margin: 0;
    font-size: clamp(2rem, 3.1vw, 2.9rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.merek-teks {
    margin: 0;
    max-width: 44ch;
    font-size: 1.02rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .84);
}

/* tiga poin dengan ikon berwarna: mengisi ruang tengah yang dulu kosong */
.merek-poin {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
    max-width: 46ch;
}

.merek-poin li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: .93rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
}

.poin-ikon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
}

.poin-ikon svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* tiap poin diberi warnanya sendiri, seperti ikon bulat di dasbor */
.merek-poin li:nth-child(1) .poin-ikon {
    color: #7dd3fc;
    background: rgba(56, 189, 248, .18);
    border-color: rgba(125, 211, 252, .45);
}

.merek-poin li:nth-child(2) .poin-ikon {
    color: #6ee7b7;
    background: rgba(52, 211, 153, .18);
    border-color: rgba(110, 231, 183, .45);
}

.merek-poin li:nth-child(3) .poin-ikon {
    color: #fcd34d;
    background: rgba(251, 191, 36, .18);
    border-color: rgba(252, 211, 77, .45);
}

.merek-poin strong {
    display: block;
    font-weight: 700;
    color: var(--putih);
}

.merek-kaki {
    margin: 0;
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

/* ---------------------------------------------------------- panel form === */

.panel-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 46px 52px;
    background: var(--latar);
}

.isi-form {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------- kartu === */

.kartu {
    position: relative;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: var(--radius);
    box-shadow: var(--bayang);
    padding: 34px 32px 30px;
}

.kartu-lebar {
    max-width: none;
}

/* medali ikon berwarna di kepala kartu */
.lencana-ikon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 19px;
    background: var(--medali);
    box-shadow: 0 12px 24px -8px var(--medali-bayang);
}

.lencana-ikon svg {
    width: 26px;
    height: 26px;
    stroke: var(--putih);
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* penyeimbang optis, lihat catatan di bawah */
    transform: translate(var(--imbang-x, 0px), var(--imbang-y, 0px));
}

/*
 * Menengahkan kotak ikon tidak selalu membuatnya TERLIHAT di tengah.
 * place-items: center menyamakan kotak pembatas, padahal mata membaca titik
 * berat tintanya. Keduanya berbeda jauh kalau ikonnya punya bagian kecil
 * yang terpisah: tanda tambah pada ikon "tambah orang" melebarkan kotak ke
 * kanan, sehingga sosok orangnya — yang justru dibaca mata — terdorong ke
 * kiri.
 *
 * Angkanya bukan kira-kira. Tiap ikon dipotret pada 2x, piksel putihnya
 * dihitung, lalu titik beratnya dibandingkan dengan titik tengah kotak.
 * Hasilnya, dalam px CSS pada lencana 58px:
 *
 *   orang+tambah  -0,95 / -0,61   <- dikoreksi
 *   panah masuk   +2,93 / -0,25
 *   gembok        -0,52 / +1,08
 *   surat+panah   +0,47 / -1,15
 *
 * Hanya yang pertama yang dikoreksi. Tiga sisanya sudah dibandingkan
 * berdampingan pada perbesaran 6x — nol, separuh, dan penuh — dan
 * koreksinya tidak terlihat memperbaiki apa pun; pada panah masuk, koreksi
 * penuh malah membuat ikonnya jelas terdorong ke kiri karena batang
 * panahnya yang panjang tetapi tipis menarik titik berat ke kanan.
 * Jangan menambah koreksi baru tanpa membandingkan seperti itu dulu.
 */
.lencana-ikon.imbang-orang-tambah {
    --imbang-x: .95px;
    --imbang-y: .6px;
}

.judul-form {
    margin: 0 0 6px;
    text-align: center;
    font-size: 1.62rem;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.2;
    background: linear-gradient(to right, #1e293b 0%, var(--aksen) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--tinta-900);
}

.teks-bantu {
    margin: 0 0 24px;
    text-align: center;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--tinta-500);
}

/* ---------------------------------------------------------------- medan === */

.medan {
    margin-bottom: 18px;
}

.medan label {
    display: block;
    margin-bottom: 8px;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-500);
}

.wajib {
    color: var(--merah);
}

.kotak-isian {
    position: relative;
    display: flex;
    align-items: center;
}

.kotak-isian svg.ikon-medan {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    stroke: var(--tinta-400);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: stroke var(--transisi);
}

.kotak-isian input {
    width: 100%;
    padding: 14px 16px 14px 46px;
    font-family: inherit;
    font-size: .94rem;
    font-weight: 600;
    color: var(--tinta-800);
    background: rgba(248, 250, 252, .85);
    border: 1.5px solid var(--tinta-200);
    border-radius: var(--radius-sm);
    transition: border-color var(--transisi), box-shadow var(--transisi), background var(--transisi);
}

.kotak-isian input::placeholder {
    color: var(--tinta-400);
    font-weight: 500;
}

.kotak-isian input:focus {
    outline: none;
    background: var(--putih);
    border-color: var(--aksen);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
}

.kotak-isian input:focus~svg.ikon-medan {
    stroke: var(--aksen);
}

.kotak-isian input.salah {
    border-color: #fca5a5;
    background: #fff5f5;
}

.kotak-isian input.salah:focus {
    border-color: var(--merah);
    box-shadow: 0 0 0 4px rgba(225, 29, 72, .12);
}

.tombol-mata {
    position: absolute;
    right: 10px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--tinta-400);
    cursor: pointer;
    transition: background var(--transisi), color var(--transisi);
}

.tombol-mata:hover {
    background: var(--tinta-100);
    color: var(--tinta-600);
}

.tombol-mata svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pesan-salah {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 8px 0 0;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--merah);
}

.pesan-salah svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 2px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.petunjuk {
    margin-top: 8px;
    font-size: .79rem;
    line-height: 1.55;
    color: var(--tinta-500);
}

/* dua kolom pada layar lebar */
.baris-medan {
    display: grid;
    gap: 0 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

/* baris kata sandi sengaja satu kolom: daftar syarat dan meteran kekuatan
   berada di bawah isiannya, sehingga dua kolom membuat tingginya timpang. */
.baris-sandi {
    grid-template-columns: 1fr;
}

/* isian yang punya tombol mata butuh ruang di kanan */
.kotak-isian:has(.tombol-mata) input {
    padding-right: 50px;
}

/* -------------------------------------------------------- kekuatan sandi === */

.bar-kekuatan {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.bar-kekuatan i {
    height: 5px;
    flex: 1;
    border-radius: 99px;
    background: var(--tinta-200);
    transition: background var(--transisi);
}

.bar-kekuatan i.aktif-1 {
    background: #f43f5e;
}

.bar-kekuatan i.aktif-2 {
    background: #f59e0b;
}

.bar-kekuatan i.aktif-3 {
    background: #10b981;
}

.bar-kekuatan i.aktif-4 {
    background: #059669;
}

.label-kekuatan {
    margin-top: 7px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--tinta-500);
}

/* syarat kata sandi */
.syarat-sandi {
    list-style: none;
    margin: 12px 0 0;
    padding: 12px 14px;
    display: grid;
    gap: 7px;
    background: var(--tinta-50);
    border: 1px solid var(--tinta-200);
    border-radius: var(--radius-sm);
}

.syarat-sandi li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--tinta-500);
    transition: color var(--transisi);
}

.syarat-sandi li::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border-radius: 50%;
    border: 1.5px solid var(--tinta-300);
    background: var(--putih);
    transition: all var(--transisi);
}

.syarat-sandi li.oke {
    color: var(--hijau);
}

.syarat-sandi li.oke::before {
    border-color: var(--hijau);
    background: var(--hijau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}

.syarat-sandi li.gagal {
    color: var(--merah);
}

.syarat-sandi li.gagal::before {
    border-color: var(--merah);
    background: var(--merah) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center/9px no-repeat;
}

.syarat-sandi li.periksa::before {
    border-color: var(--aksen);
    border-right-color: transparent;
    animation: putar .7s linear infinite;
}

/* ---------------------------------------------------- baris & centang === */

.baris-sela {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0 20px;
}

.medan label.centang,
.centang {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: .85rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tinta-600);
    line-height: 1.45;
    cursor: pointer;
    user-select: none;
}

.centang input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--aksen);
    cursor: pointer;
    flex: 0 0 auto;
}

.tautan {
    font-size: .85rem;
    font-weight: 700;
    color: var(--aksen);
    text-decoration: none;
    transition: color var(--transisi);
}

.tautan:hover {
    color: var(--aksen-tua);
    text-decoration: underline;
}

/* --------------------------------------------------------------- tombol === */

.tombol-utama {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 28px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: var(--putih);
    background: var(--gradien);
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--bayang-tombol);
    cursor: pointer;
    transition: transform var(--transisi), box-shadow var(--transisi), filter var(--transisi);
}

.tombol-utama:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(99, 102, 241, .3);
}

.tombol-utama:disabled {
    opacity: .68;
    cursor: not-allowed;
    transform: none;
}

.tombol-utama svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tombol-kedua {
    color: var(--tinta-600);
    background: var(--putih);
    border: 1.5px solid var(--tinta-200);
    box-shadow: none;
}

.tombol-kedua:hover:not(:disabled) {
    color: var(--aksen);
    border-color: var(--aksen-terang);
    box-shadow: 0 10px 20px rgba(99, 102, 241, .12);
}

.pemutar {
    width: 17px;
    height: 17px;
    border: 2.5px solid rgba(255, 255, 255, .45);
    border-top-color: var(--putih);
    border-radius: 50%;
    animation: putar .7s linear infinite;
}

@keyframes putar {
    to {
        transform: rotate(360deg);
    }
}

.kaki-kartu {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--tinta-200);
    text-align: center;
    font-size: .86rem;
    color: var(--tinta-500);
}

/* ------------------------------------------------------------- kabar === */

.kabar {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
    font-size: .86rem;
    line-height: 1.55;
    font-weight: 600;
    border: 1px solid transparent;
}

.kabar svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    margin-top: 1px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kabar-sukses {
    color: #065f46;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.kabar-galat {
    color: #9f1239;
    background: #fff1f2;
    border-color: #fecdd3;
}

.kabar-info {
    color: var(--aksen-tua);
    background: #eef2ff;
    border-color: #c7d2fe;
}

.ringkasan-galat {
    margin: 0 0 18px;
    padding: 13px 15px 13px 34px;
    border-radius: var(--radius-sm);
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.6;
}

.tautan-galat {
    color: inherit;
    text-decoration: underline;
}

.ikon-keadaan {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 19px;
    background: var(--medali);
    box-shadow: 0 12px 24px -8px var(--medali-bayang);
}

.ikon-keadaan svg {
    width: 26px;
    height: 26px;
    stroke: var(--putih);
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------------------------- pemilih cara masuk === */

.pemilih-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
    margin-bottom: 22px;
    background: var(--tinta-100);
    border: 1px solid var(--tinta-200);
    border-radius: var(--radius-md);
}

.pemilih-mode button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    color: var(--tinta-500);
    cursor: pointer;
    transition: background var(--transisi), color var(--transisi), box-shadow var(--transisi);
}

.pemilih-mode button svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pemilih-mode button:hover:not(:disabled) {
    color: var(--aksen);
}

.pemilih-mode button.aktif {
    background: var(--putih);
    color: var(--aksen);
    box-shadow: 0 6px 14px -6px rgba(15, 23, 42, .3);
}

.pemilih-mode button.mati,
.pemilih-mode button:disabled {
    color: var(--tinta-300);
    cursor: not-allowed;
}

.label-mati {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tinta-500);
    background: var(--putih);
    border: 1px solid var(--tinta-200);
    border-radius: 7px;
    padding: 2px 6px;
}

/* --------------------------------------- akun yang diingat perangkat === */

.akun-perangkat {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    margin-bottom: 20px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: var(--radius-sm);
}

.akun-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 13px;
    background: var(--gradien);
    color: var(--putih);
    font-size: 1.02rem;
    font-weight: 800;
    box-shadow: 0 8px 16px -8px rgba(99, 102, 241, .6);
}

.akun-teks {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.akun-teks small {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aksen);
}

.akun-teks strong {
    font-size: .95rem;
    font-weight: 700;
    color: var(--tinta-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* tombol kecil di sisi kanan label */
.label-kanan {
    float: right;
    font-size: .68rem;
    letter-spacing: 0;
    text-transform: none;
}

.petunjuk-ingat,
.petunjuk-pin-mati {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.55;
}

.petunjuk-ingat {
    margin: -12px 0 20px;
}

.petunjuk-pin-mati {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--tinta-200);
}

.petunjuk-ingat svg,
.petunjuk-pin-mati svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 2px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------- kode & PIN === */

.kotak-kode input {
    padding-left: 16px;
    padding-right: 48px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .5em;
    text-indent: .5em;
    color: var(--tinta-900);
}

.kotak-kode input::placeholder {
    font-size: 1.05rem;
    letter-spacing: .35em;
    font-weight: 600;
}

.hitung-mundur {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--aksen);
}

.tombol-teks {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    color: var(--aksen);
    cursor: pointer;
    transition: color var(--transisi);
}

.tombol-teks:hover:not(:disabled) {
    color: var(--aksen-tua);
    text-decoration: underline;
}

.tombol-teks:disabled {
    color: var(--tinta-400);
    cursor: not-allowed;
}

.tombol-teks-lembut {
    color: var(--tinta-500);
    font-weight: 600;
}

.tombol-teks-lembut:hover:not(:disabled) {
    color: var(--merah);
}

.peringatan-caps {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--kuning);
}

.peringatan-caps svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------------------------------- tiga langkah === */

.langkah {
    list-style: none;
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px dashed var(--tinta-200);
    display: grid;
    gap: 15px;
}

.langkah li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.langkah-nomor {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 11px;
    background: var(--medali);
    color: var(--putih);
    font-size: .8rem;
    font-weight: 800;
    box-shadow: 0 8px 16px -10px var(--medali-bayang);
}

.langkah li span:last-child {
    display: block;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--tinta-500);
}

.langkah li strong {
    display: block;
    font-size: .87rem;
    font-weight: 700;
    color: var(--tinta-800);
}

/* ------------------------------------------------------- kaki halaman === */

.kaki-halaman {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding-top: 18px;
    font-size: .8rem;
    color: var(--tinta-400);
}

.kaki-halaman a {
    color: var(--tinta-400);
    text-decoration: none;
    transition: color var(--transisi);
}

.kaki-halaman a:hover {
    color: var(--aksen);
}

/* ------------------------------------------------------------- naskah === */

.naskah h3 {
    margin: 22px 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tinta-800);
}

.naskah p,
.naskah li {
    font-size: .88rem;
    line-height: 1.75;
    color: var(--tinta-600);
}

.naskah ul {
    padding-left: 20px;
    margin: 8px 0;
}

.pemisah-naskah {
    margin: 28px 0 22px;
    border: 0;
    border-top: 1px solid var(--tinta-200);
}

/* =============================== TABLET ================================= */

@media (max-width: 1023.98px) {
    .kerangka {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .panel-merek {
        gap: 18px;
        padding: 30px 32px 34px;
        border-radius: 0 0 30px 30px;
    }

    /*
     * Di bawah 1024px panel ini berubah jadi hero yang melebar penuh.
     * Logo yang tetap menempel di kiri meninggalkan pita kosong panjang
     * di sebelah kanannya, jadi di sini ia ditengahkan.
     */
    .merek-atas {
        text-align: center;
    }

    .merek-logo {
        width: 150px;
        /* text-align saja tidak cukup: gambar di sini display:block,
           jadi ia tetap menempel di kiri. */
        margin-inline: auto;
    }

    .merek-judul {
        font-size: clamp(1.6rem, 4.4vw, 2.1rem);
    }

    .merek-teks {
        font-size: .95rem;
    }

    /* poin dijejer mendatar supaya tidak memanjangkan hero */
    .merek-poin {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: none;
        gap: 12px;
    }

    .merek-poin li {
        flex-direction: column;
        gap: 9px;
        font-size: .82rem;
    }

    .merek-bawah {
        display: none;
    }

    .merek-latar {
        width: 260px;
        right: -70px;
        bottom: -60px;
    }

    .panel-form {
        padding: 30px 32px 34px;
    }

    .isi-form,
    .kaki-halaman {
        max-width: 560px;
    }
}

/* =============================== PONSEL ================================= */

@media (max-width: 639.98px) {
    .panel-merek {
        gap: 14px;
        padding: 24px 20px 26px;
        border-radius: 0 0 26px 26px;
    }

    .merek-logo {
        width: 128px;
    }

    .merek-judul {
        font-size: 1.5rem;
    }

    .merek-teks {
        font-size: .88rem;
        line-height: 1.6;
    }

    /* di ponsel poin ditumpuk lagi, tetapi ringkas */
    .merek-poin {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .merek-poin li {
        flex-direction: row;
        align-items: center;
        gap: 11px;
        font-size: .82rem;
    }

    .poin-ikon {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 11px;
    }

    .poin-ikon svg {
        width: 16px;
        height: 16px;
    }

    .panel-form {
        padding: 22px 16px 26px;
    }

    .kartu {
        padding: 26px 20px 24px;
        border-radius: 22px;
    }

    .judul-form {
        font-size: 1.38rem;
    }

    .teks-bantu {
        font-size: .86rem;
        margin-bottom: 20px;
    }

    .baris-medan {
        grid-template-columns: 1fr;
    }

    .pemilih-mode button {
        gap: 6px;
        padding: 10px 6px;
        font-size: .8rem;
    }

    .label-mati {
        font-size: .56rem;
        padding: 1px 4px;
    }

    .kotak-kode input {
        font-size: 1.3rem;
        letter-spacing: .38em;
        text-indent: .38em;
    }

    .kaki-halaman {
        justify-content: center;
        text-align: center;
        font-size: .76rem;
    }
}

/* layar pendek & mendatar: hero dipadatkan supaya formulir tetap terlihat */
@media (max-height: 560px) and (max-width: 1023.98px) {
    .merek-isi,
    .merek-poin {
        display: none;
    }

    .panel-merek {
        padding: 16px 20px;
    }
}

/* ============================ AKSESIBILITAS ============================= */

.tombol-utama:focus-visible,
.tombol-kedua:focus-visible,
.tombol-teks:focus-visible,
.tombol-mata:focus-visible,
.pemilih-mode button:focus-visible,
.tautan:focus-visible,
.kaki-halaman a:focus-visible {
    outline: 3px solid rgba(99, 102, 241, .45);
    outline-offset: 2px;
    border-radius: 8px;
}

.kotak-isian input:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

[x-cloak] {
    display: none !important;
}