/* HOLDERVEST - halaman registrasi multi-langkah.
   Dimuat setelah landing-holdervest.css (token warna, .hv-btn, .hv-icon, .hv-alert). */

body.hv-auth {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background: #8f2f04 url('../holdervest/bg-global.jpg') center / cover fixed no-repeat;
}

.hv-reg {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: max(18px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom));
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, rgba(214, 78, 6, .3), rgba(128, 34, 0, .52)), url('../holdervest/bg-global.jpg') center / cover no-repeat;
}

/* ── Dekorasi: cahaya, bara api, batu melayang ─────────────────────── */
.hv-reg__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.hv-reg__glow {
    position: absolute;
    left: 50%;
    top: 22%;
    width: 130%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 170, 90, .34), rgba(255, 120, 30, .12) 42%, transparent 66%);
    animation: hv-breathe 7s ease-in-out infinite;
}

.hv-embers i {
    position: absolute;
    left: var(--x);
    bottom: -12px;
    width: var(--z);
    height: var(--z);
    border-radius: 50%;
    background: radial-gradient(circle, #fff3d6, #ffb347 45%, rgba(255, 110, 20, 0) 72%);
    opacity: 0;
    animation: hv-ember var(--t) linear var(--d) infinite;
}

.hv-reg__rock { position: absolute; width: 46%; filter: drop-shadow(0 14px 18px rgba(70, 18, 0, .5)); opacity: .96; }
.hv-reg__rock--left { left: -17%; bottom: -5%; animation: hv-drift 9s ease-in-out infinite; }
.hv-reg__rock--right { right: -22%; bottom: 40%; width: 38%; transform: scaleX(-1); animation: hv-drift-flip 11s ease-in-out -3s infinite; }

.hv-reg[data-view="login"] .hv-reg__rock--right,
.hv-reg[data-view="forgot"] .hv-reg__rock--right,
.hv-reg[data-view="verify"] .hv-reg__rock--right,
.hv-reg[data-view="1"] .hv-reg__rock--right,
.hv-reg[data-view="2"] .hv-reg__rock--right,
.hv-reg[data-view="3"] .hv-reg__rock--right { opacity: 0; }
.hv-reg[data-view="1"] .hv-reg__rock--left,
.hv-reg[data-view="2"] .hv-reg__rock--left,
.hv-reg[data-view="3"] .hv-reg__rock--left { opacity: .5; bottom: -9%; }
.hv-reg__rock { transition: opacity .6s ease, bottom .6s ease; }

/* ── Bar atas & stepper ────────────────────────────────────────────── */
.hv-reg__bar { display: flex; align-items: center; gap: 14px; min-height: 44px; }

.hv-reg__back {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: -10px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}

.hv-reg__back:hover { background: rgba(255, 255, 255, .14); transform: translateX(-2px); }
.hv-reg__back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.hv-reg__brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.hv-reg__brand img { width: 40px; filter: drop-shadow(0 3px 6px rgba(80, 22, 0, .5)); }
.hv-reg__brand span { font-size: 14.5px; font-weight: 600; letter-spacing: .12em; color: #f3f5f7; }

.hv-reg[data-view="intro"] .hv-reg__brand,
.hv-reg[data-view="intro"] .hv-stepper,
.hv-reg[data-view="success"] .hv-reg__bar,
.hv-reg[data-view="success"] .hv-stepper,
.hv-reg[data-view="welcome"] .hv-reg__bar,
.hv-reg[data-view="welcome"] .hv-stepper { display: none; }

.hv-stepper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 22px -6px 0;
    list-style: none;
    animation: hv-rise .5s ease both;
}

.hv-stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 12px; color: rgba(255, 255, 255, .78); transition: color .3s ease; }
.hv-stepper li.is-current, .hv-stepper li.is-done { color: #fff; }
.hv-stepper li.is-current { font-weight: 500; }

.hv-stepper li + li::before,
.hv-stepper li + li::after {
    content: '';
    position: absolute;
    top: 17px;
    left: calc(-50% + 24px);
    width: calc(100% - 48px);
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 224, 200, .34);
}

.hv-stepper li + li::after {
    background: linear-gradient(90deg, #ffd9b0, #fff);
    box-shadow: 0 0 10px rgba(255, 190, 120, .9);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}

.hv-stepper li.is-done + li::after { transform: scaleX(1); }

.hv-stepper__dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(255, 230, 210, .7);
    border-radius: 50%;
    background: rgba(130, 36, 0, .3);
    font-size: 15px;
    font-weight: 500;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.hv-stepper__dot .hv-icon { position: absolute; font-size: 20px; opacity: 0; transform: scale(.3) rotate(-30deg); transition: opacity .25s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.hv-stepper li.is-current .hv-stepper__dot { border-color: #fff; background: #fff; color: #ea580c; font-weight: 600; animation: hv-ring 2.2s ease-out infinite; }
.hv-stepper li.is-done .hv-stepper__dot { border-color: #ffd9b8; background: linear-gradient(150deg, #ff9345, #ea580c); box-shadow: 0 0 16px rgba(255, 150, 70, .7); color: transparent; }
.hv-stepper li.is-done .hv-stepper__dot .hv-icon { color: #fff; opacity: 1; transform: none; }

/* ── Layar & transisi ──────────────────────────────────────────────── */
.hv-reg__form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.hv-reg[data-view="success"] .hv-reg__form,
.hv-reg[data-view="welcome"] .hv-reg__form { display: none; }
.hv-screen { display: none; flex: 1; flex-direction: column; min-height: 0; }
.hv-screen.is-active { display: flex; animation: hv-in-next .46s cubic-bezier(.2, .8, .2, 1) both; }
.hv-reg[data-dir="back"] .hv-screen.is-active { animation-name: hv-in-back; }

.hv-screen__body { display: flex; flex-direction: column; gap: 18px; padding-top: 26px; }
.hv-screen__foot { margin-top: auto; padding-top: 28px; }

.hv-screen.is-active .hv-screen__body > *,
.hv-screen.is-active .hv-screen__foot { animation: hv-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.hv-screen.is-active .hv-screen__body > :nth-child(2) { animation-delay: .05s; }
.hv-screen.is-active .hv-screen__body > :nth-child(3) { animation-delay: .1s; }
.hv-screen.is-active .hv-screen__body > :nth-child(4) { animation-delay: .15s; }
.hv-screen.is-active .hv-screen__body > :nth-child(5) { animation-delay: .2s; }
.hv-screen.is-active .hv-screen__body > :nth-child(6) { animation-delay: .25s; }
.hv-screen.is-active .hv-screen__body > :nth-child(n+7) { animation-delay: .3s; }
.hv-screen.is-active .hv-screen__foot { animation-delay: .32s; }

.hv-screen__title { font-size: 27px; font-weight: 500; line-height: 1.15; }
.hv-screen__lead { margin-top: -6px; font-size: 14.5px; line-height: 1.45; color: var(--hv-soft); }

/* ── Field ─────────────────────────────────────────────────────────── */
.hv-f__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 14.5px; }
.hv-f__badge { font-size: 12px; font-weight: 600; }

.hv-f__box {
    position: relative;
    display: flex;
    align-items: center;
    height: 54px;
    border: 1px solid rgba(255, 214, 180, .5);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(118, 32, 0, .36), rgba(150, 44, 0, .24));
    box-shadow: inset 0 1px 0 rgba(255, 226, 200, .12);
    transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}

.hv-f__box:focus-within { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15), 0 0 24px rgba(255, 150, 70, .5); transform: translateY(-1px); }
.hv-f__icon { display: grid; place-items: center; flex: none; width: 52px; font-size: 22px; color: #fff; }
.hv-f__icon .hv-icon--stroke { stroke-width: 1.6; }

.hv-f__box input,
.hv-f__box select {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 14px 0 0;
    border: 0;
    outline: 0;
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    letter-spacing: .01em;
}

.hv-f__box input::placeholder { color: rgba(255, 232, 214, .55); }
.hv-f__box input:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff; transition: background-color 9999s ease-out; }
.hv-f__box input.is-upper { text-transform: uppercase; }
.hv-f__box input.is-upper::placeholder { text-transform: none; }
.hv-f__box select { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer; }
.hv-f__box select option { background: #7a2503; color: #fff; }
.hv-f__chevron { position: absolute; right: 16px; font-size: 20px; pointer-events: none; }
.hv-f__logo { width: 30px; height: 30px; padding: 3px; border-radius: 8px; background: #fff; object-fit: contain; }

.hv-f__toggle { display: grid; place-items: center; flex: none; width: 50px; height: 100%; border: 0; background: none; color: #fff; font-size: 21px; cursor: pointer; }
.hv-f__toggle .hv-icon--stroke { stroke-width: 1.6; }

.hv-f__error { display: none; margin-top: 7px; font-size: 12.5px; color: #ffd9d9; }
.hv-f.is-invalid .hv-f__error { display: block; animation: hv-rise .3s ease both; }
.hv-f.is-invalid .hv-f__box { border-color: #ffb0b0; box-shadow: 0 0 0 3px rgba(255, 140, 140, .2); animation: hv-shake .42s ease; }
.hv-f.is-valid .hv-f__box { border-color: #a6f7c8; box-shadow: 0 0 0 3px rgba(120, 240, 170, .18); }

/* Kotak catatan (ikon "!" oranye) */
.hv-note {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 214, 180, .5);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(118, 32, 0, .36), rgba(150, 44, 0, .24));
    font-size: 13px;
    line-height: 1.4;
}

.hv-note__icon { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #f2620f; font-size: 28px; box-shadow: 0 0 14px rgba(255, 150, 70, .8); animation: hv-breathe 2.6s ease-in-out infinite; }
.hv-note.is-valid { border-color: #a6f7c8; }
.hv-note.is-valid .hv-note__icon { color: #17a55a; box-shadow: 0 0 14px rgba(120, 240, 170, .8); }
.hv-note.is-invalid { border-color: #ffb0b0; }
.hv-note.is-invalid .hv-note__icon { color: #dc2626; box-shadow: 0 0 14px rgba(255, 130, 130, .8); }

/* Pilih metode: Bank / E-Wallet */
.hv-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hv-seg input { position: absolute; opacity: 0; pointer-events: none; }
.hv-seg span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 46px;
    border: 1px solid rgba(255, 214, 180, .5);
    border-radius: 11px;
    background: rgba(118, 32, 0, .3);
    font-size: 14.5px;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
}

.hv-seg span .hv-icon { font-size: 20px; stroke-width: 1.6; }
.hv-seg span:hover { transform: translateY(-1px); }
.hv-seg input:checked + span { border-color: #fff; background: linear-gradient(180deg, #fff, #ffe7d4); color: #ea580c; font-weight: 600; box-shadow: 0 0 0 3px rgba(255, 190, 130, .35), 0 8px 22px rgba(255, 130, 40, .5); }
.hv-seg input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

.hv-terms { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--hv-soft); cursor: pointer; }
.hv-terms input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: #ea580c; }
.hv-terms a { color: #fff; }
.hv-terms.is-invalid { color: #ffd9d9; animation: hv-shake .42s ease; }
.hv-hp { display: none; }

/* ── Tombol api ────────────────────────────────────────────────────── */
.hv-auth .hv-btn { width: 100%; height: 56px; font-size: 16.5px; }
.hv-auth .hv-btn > span:first-child { flex: 1; text-align: center; }

.hv-auth .hv-btn--solid { padding-left: 46px; }
.hv-auth .hv-btn--solid .hv-btn__dot { width: 38px; height: 38px; font-size: 19px; }

.hv-reg__alert { margin-top: 18px; }

/* ── Layar pembuka ─────────────────────────────────────────────────── */
.hv-intro { align-items: center; text-align: center; }
.hv-intro__logo { width: 62%; margin-top: 6px; filter: drop-shadow(0 10px 18px rgba(84, 22, 0, .55)); animation: hv-zoom .7s cubic-bezier(.2, 1.3, .4, 1) both; }

.hv-intro__art { position: relative; display: grid; place-items: center; flex: 1; width: 100%; min-height: 230px; margin: 6px 0; }
.hv-intro__ring { position: absolute; width: 62%; aspect-ratio: 1; border: 3px solid rgba(255, 196, 130, .85); border-radius: 50%; box-shadow: 0 0 28px rgba(255, 150, 60, .9), inset 0 0 28px rgba(255, 150, 60, .55); animation: hv-spin-slow 16s linear infinite, hv-breathe 4s ease-in-out infinite; }
.hv-intro__ring::after { content: ''; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px 6px rgba(255, 200, 130, .95); }
.hv-intro__tower { position: relative; width: 60%; filter: drop-shadow(0 18px 22px rgba(70, 18, 0, .55)); animation: hv-float 6s ease-in-out infinite; }

.hv-intro h1 { font-size: 27px; font-weight: 500; line-height: 1.15; }
.hv-intro p { margin-top: 12px; font-size: 15px; line-height: 1.45; color: #fff; }
.hv-intro .hv-btn { margin-top: 30px; }
.hv-intro__login { margin-top: 24px; margin-bottom: 26px; font-size: 14.5px; color: var(--hv-soft); }
.hv-intro__login a { font-weight: 600; color: #fff; text-decoration: none; }
.hv-intro__login a:hover { text-decoration: underline; }
.hv-intro > * { animation: hv-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.hv-intro > :nth-child(3) { animation-delay: .12s; }
.hv-intro > :nth-child(4) { animation-delay: .18s; }
.hv-intro > :nth-child(5) { animation-delay: .26s; }
.hv-intro > :nth-child(6) { animation-delay: .34s; }

/* ── Layar berhasil ────────────────────────────────────────────────── */
.hv-done { align-items: center; text-align: center; }
.hv-done__art { position: relative; display: grid; place-items: center; width: 100%; margin-top: 34px; }
.hv-done__art img { position: relative; width: 78%; filter: drop-shadow(0 18px 22px rgba(70, 18, 0, .55)); animation: hv-zoom .8s cubic-bezier(.2, 1.4, .4, 1) both; }
.hv-done__art i { position: absolute; top: 44%; left: 50%; width: 44%; aspect-ratio: 1; border: 2px solid rgba(255, 214, 160, .9); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.6); animation: hv-burst 2.2s ease-out infinite; }
.hv-done__art i:nth-child(2) { animation-delay: .7s; }
.hv-done__art i:nth-child(3) { animation-delay: 1.4s; }

.hv-done h1 { margin-top: 22px; font-size: 25px; font-weight: 500; }
.hv-done > p { margin-top: 12px; font-size: 14.5px; line-height: 1.45; }

.hv-done__list { display: grid; gap: 4px; width: 100%; margin-top: 22px; padding: 10px 14px; border: 1px solid rgba(255, 214, 180, .5); border-radius: 14px; background: linear-gradient(180deg, rgba(118, 32, 0, .4), rgba(150, 44, 0, .26)); list-style: none; text-align: left; }
.hv-done__list li { display: flex; align-items: center; gap: 14px; padding: 7px 0; font-size: 14px; opacity: 0; animation: hv-rise .5s ease both; }
.hv-done__list li:nth-child(1) { animation-delay: .5s; }
.hv-done__list li:nth-child(2) { animation-delay: .85s; }
.hv-done__list li:nth-child(3) { animation-delay: 1.2s; }
.hv-done__list li > span:first-child { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid rgba(255, 226, 200, .7); border-radius: 8px; background: linear-gradient(150deg, #ff9a4d, #ea580c); font-size: 16px; }
.hv-done__list li > span:nth-child(2) { flex: 1; }
.hv-done__list li > .hv-icon { font-size: 19px; stroke-dasharray: 26; stroke-dashoffset: 26; animation: hv-draw .45s ease forwards; }
.hv-done__list li:nth-child(1) > .hv-icon { animation-delay: .8s; }
.hv-done__list li:nth-child(2) > .hv-icon { animation-delay: 1.15s; }
.hv-done__list li:nth-child(3) > .hv-icon { animation-delay: 1.5s; }
.hv-done__list li.is-skipped > .hv-icon { display: none; }

.hv-count { position: relative; display: grid; place-items: center; width: 74px; height: 74px; margin-top: 30px; font-size: 26px; }
.hv-count svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hv-count circle { fill: none; stroke-width: 2.5; }
.hv-count circle:first-child { stroke: rgba(255, 224, 200, .28); }
.hv-count circle:last-child { stroke: #fff; stroke-linecap: round; stroke-dasharray: 214; stroke-dashoffset: 0; filter: drop-shadow(0 0 5px rgba(255, 190, 120, .95)); }
.hv-count.is-running circle:last-child { animation: hv-countdown 3s linear forwards; }
.hv-count b { font-weight: 500; }
.hv-count b.is-tick { animation: hv-zoom .35s ease both; }
.hv-done__hint { margin: 16px 0 24px; font-size: 13.5px; color: var(--hv-soft); }

/* ── Layar selamat datang ──────────────────────────────────────────── */
.hv-welcome { align-items: center; justify-content: center; text-align: center; }
.hv-welcome img { width: 62%; filter: drop-shadow(0 12px 20px rgba(84, 22, 0, .6)); animation: hv-zoom .8s cubic-bezier(.2, 1.3, .4, 1) both; }
.hv-welcome h1 { margin-top: 62px; font-size: 25px; font-weight: 500; line-height: 1.25; animation: hv-rise .6s ease .25s both; }
.hv-welcome p { margin-top: 18px; font-size: 14px; color: var(--hv-soft); animation: hv-rise .6s ease .4s both; }
.hv-welcome__bar { width: 46%; height: 3px; margin-top: 22px; border-radius: 3px; background: rgba(255, 224, 200, .3); overflow: hidden; }
.hv-welcome__bar i { display: block; height: 100%; border-radius: 3px; background: #fff; box-shadow: 0 0 10px rgba(255, 200, 140, .95); transform: scaleX(0); transform-origin: left; }
.hv-welcome.is-active .hv-welcome__bar i { animation: hv-fill 1.6s cubic-bezier(.4, 0, .2, 1) .2s forwards; }

/* ── Halaman masuk & lupa password ─────────────────────────────────── */
.hv-reg__form[hidden] { display: none; }
.hv-intro__logo + h1 { margin-top: 20px; }
.hv-auth__logo { width: 46%; margin: -6px auto 0; filter: drop-shadow(0 8px 14px rgba(84, 22, 0, .55)); }
.hv-screen.is-active .hv-screen__body > .hv-auth__logo { animation-name: hv-zoom; }
.hv-auth__logo + .hv-screen__title { margin-top: 14px; }
.hv-screen__body > .hv-btn { margin-top: 6px; }

.hv-f__prefix { display: flex; align-items: center; align-self: stretch; margin: 10px 16px 10px 0; padding: 0 16px 0 14px; border-left: 1px solid rgba(255, 220, 190, .4); border-right: 1px solid rgba(255, 220, 190, .4); font-size: 16px; }

.hv-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -2px; font-size: 14px; }
.hv-auth__row a { color: #fff; }
.hv-remember { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.hv-remember input { position: absolute; opacity: 0; pointer-events: none; }
.hv-remember i { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid rgba(255, 226, 200, .8); border-radius: 6px; background: rgba(118, 32, 0, .3); font-size: 17px; color: transparent; transition: background-color .2s ease, color .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.hv-remember input:checked + i { border-color: #ffd9b8; background: linear-gradient(150deg, #ff9345, #ea580c); color: #fff; transform: scale(1.06); }
.hv-remember input:focus-visible + i { outline: 2px solid #fff; outline-offset: 2px; }

.hv-auth__switch { margin-top: 10px; font-size: 14.5px; text-align: center; color: var(--hv-soft); }
.hv-auth__switch a { font-weight: 600; color: #fff; }

.hv-auth__art { position: relative; display: grid; place-items: center; flex: 1; min-height: 220px; margin-top: 18px; }
.hv-auth__art img { width: 78%; transform: rotate(-20deg); filter: drop-shadow(0 22px 26px rgba(70, 18, 0, .55)); animation: hv-phone-float 6s ease-in-out infinite; }

.hv-code { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hv-code input {
    width: 100%;
    height: 66px;
    border: 1px solid rgba(255, 214, 180, .55);
    border-radius: 13px;
    outline: 0;
    background: linear-gradient(180deg, rgba(118, 32, 0, .4), rgba(150, 44, 0, .26));
    color: #fff;
    font-family: inherit;
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    caret-color: #fff;
    transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}

.hv-code input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15), 0 0 24px rgba(255, 150, 70, .55); transform: translateY(-2px); }
.hv-code input.is-filled { border-color: #ffd9b8; animation: hv-key .28s cubic-bezier(.3, 1.6, .5, 1); }
.hv-f.is-invalid .hv-code { animation: hv-shake .42s ease; }
.hv-f.is-invalid .hv-code input { border-color: #ffb0b0; }
.hv-code__hint { margin-top: 12px; font-size: 13px; line-height: 1.4; text-align: center; color: var(--hv-soft); }

.hv-divider { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--hv-soft); }
.hv-divider::before, .hv-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255, 224, 200, .45); }
.hv-screen__subtitle { font-size: 21px; font-weight: 500; }

@keyframes hv-key { from { transform: scale(.86); } to { transform: none; } }
@keyframes hv-phone-float { 0%, 100% { transform: rotate(-20deg) translateY(0); } 50% { transform: rotate(-18deg) translateY(-9px); } }
/* ── Desktop: tampil sebagai satu layar ponsel di tengah ───────────── */
@media (min-width: 720px) {
    body.hv-auth { align-items: center; padding: 28px 0; }
    body.hv-auth::before { content: ''; position: fixed; inset: 0; background: rgba(84, 20, 0, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    .hv-reg { min-height: min(880px, calc(100vh - 56px)); border: 1px solid rgba(255, 220, 190, .5); border-radius: 40px; box-shadow: 0 40px 100px rgba(40, 8, 0, .6), inset 0 1px 0 rgba(255, 230, 205, .3); padding: 28px 26px 26px; }
}

@keyframes hv-in-next { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes hv-in-back { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes hv-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hv-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes hv-breathe { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes hv-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55), 0 0 18px rgba(255, 170, 90, .9); } 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0), 0 0 18px rgba(255, 170, 90, .9); } }
@keyframes hv-ember { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 12% { opacity: .95; } 70% { opacity: .6; } 100% { opacity: 0; transform: translate(var(--w), -92vh) scale(1.15); } }
@keyframes hv-drift { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(2.5deg); } }
@keyframes hv-drift-flip { 0%, 100% { transform: scaleX(-1) translateY(0) rotate(0); } 50% { transform: scaleX(-1) translateY(-14px) rotate(-3deg); } }
@keyframes hv-spin-slow { to { transform: rotate(360deg); } }
@keyframes hv-burst { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); } }
@keyframes hv-draw { to { stroke-dashoffset: 0; } }
@keyframes hv-countdown { to { stroke-dashoffset: 214; } }
@keyframes hv-fill { to { transform: scaleX(1); } }
@keyframes hv-zoom { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .hv-done__list li { opacity: 1; }
    .hv-done__list li > .hv-icon { stroke-dashoffset: 0; }
    .hv-welcome__bar i { transform: none; }
    .hv-embers { display: none; }
}