/* =========================================================================
   Halaman login - tema Spike
   -------------------------------------------------------------------------
   Berkas ini menumpang di atas theme.css, bukan menggantikannya. Reset,
   tipografi, tombol, dan gaya isian semuanya datang dari sana, sehingga
   halaman login memakai komponen yang sama persis dengan bagian dalam
   aplikasi - itu yang membuat keduanya terasa satu produk.

   Yang ditulis di sini hanya dua hal yang tidak ada di Spike:
   latar aurora dan label mengambang.

   Nilai warna di bawah diambil dari palet Spike:
     #0085db  primer          #46caeb  sekunder
     #4bd08b  sukses          #f0f5f9  permukaan
     #111c2d  teks utama      #e6ecf1  garis
   Ditulis sebagai nilai harfiah karena berkas ini tidak melewati Tailwind.
   ========================================================================= */

.auth-page {
    min-height: 100dvh;
    margin: 0;
    background: #f0f5f9;
    color: #111c2d;
    overflow-x: hidden;
}
@supports not (height: 100dvh) {
    .auth-page { min-height: 100vh; }
}

/* -------------------------------------------------------------------------
   Latar
   Sapuan gradien lembut dalam warna Spike. Dibuat jauh lebih tenang
   daripada versi gelap sebelumnya: halaman ini adalah pintu masuk ke
   antarmuka terang, dan latar yang ramai akan terasa seperti aplikasi lain.
   ------------------------------------------------------------------------- */
.auth-aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, #ffffff 0%, #f0f5f9 45%, #e6eef6 100%);
}

.auth-aurora__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
}
.auth-aurora__blob--1 {
    width: 44vmax; height: 44vmax;
    top: -16vmax; left: -12vmax;
    background: #0085db;
    opacity: .16;
    animation: auth-drift-1 30s ease-in-out infinite alternate;
}
.auth-aurora__blob--2 {
    width: 38vmax; height: 38vmax;
    top: -6vmax; right: -12vmax;
    background: #46caeb;
    opacity: .20;
    animation: auth-drift-2 34s ease-in-out infinite alternate;
}
.auth-aurora__blob--3 {
    width: 34vmax; height: 34vmax;
    bottom: -14vmax; left: 20vmax;
    background: #4bd08b;
    opacity: .13;
    animation: auth-drift-3 28s ease-in-out infinite alternate;
}

@keyframes auth-drift-1 {
    from { transform: translate3d(0, 0, 0)          scale(1); }
    to   { transform: translate3d(7vmax, 5vmax, 0)  scale(1.15); }
}
@keyframes auth-drift-2 {
    from { transform: translate3d(0, 0, 0)          scale(1.1); }
    to   { transform: translate3d(-8vmax, 7vmax, 0) scale(.92); }
}
@keyframes auth-drift-3 {
    from { transform: translate3d(0, 0, 0)          scale(.95); }
    to   { transform: translate3d(9vmax, -6vmax, 0) scale(1.18); }
}

/* -------------------------------------------------------------------------
   Kerangka
   ------------------------------------------------------------------------- */
.auth-shell {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 32px 20px;
}
@supports not (height: 100dvh) {
    .auth-shell { min-height: 100vh; }
}

.auth-card {
    width: 100%;
    max-width: 430px;
    animation: auth-card-in .5s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 26px;
}
.auth-brand__logo {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    padding: 11px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(37, 83, 185, .18);
}
.auth-brand__logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.auth-brand__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #111c2d;
}
.auth-brand__subtitle {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: #707a82;
}

/* -------------------------------------------------------------------------
   Isian dengan label mengambang
   Ukuran dan radius mengikuti .form-control milik theme.css supaya sebaris
   dengan form di dalam aplikasi.
   ------------------------------------------------------------------------- */
.auth-field {
    position: relative;
    margin-bottom: 16px;
}

.auth-field__input {
    width: 100%;
    height: 56px;
    /* 16px wajib: di bawah itu iOS Safari memperbesar halaman saat fokus */
    font-size: 16px;
    font-family: inherit;
    color: #111c2d;
    padding: 21px 15px 7px;
    border: 1px solid #e6ecf1;
    border-radius: 7px;
    background: #ffffff;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
    -webkit-appearance: none;
    appearance: none;
}
.auth-field--password .auth-field__input { padding-right: 52px; }

.auth-field__input::placeholder { color: transparent; }
.auth-field__input:hover { border-color: #c4c9cc; }
.auth-field__input:focus {
    border-color: #0085db;
    box-shadow: 0 0 0 3px rgba(0, 133, 219, .16);
}

.auth-field__label {
    position: absolute;
    top: 17px;
    left: 16px;
    font-size: 15px;
    color: #707a82;
    pointer-events: none;
    transform-origin: left top;
    transition: transform .16s ease, color .16s ease;
}
.auth-field__input:focus ~ .auth-field__label,
.auth-field__input:not(:placeholder-shown) ~ .auth-field__label {
    transform: translateY(-11px) scale(.78);
    color: #0085db;
}
.auth-field__input:not(:focus):not(:placeholder-shown) ~ .auth-field__label {
    color: #707a82;
}

/* Autofill Chrome memaksa latar kuning pucat; inset shadow tebal adalah
   satu-satunya cara menimpanya. */
.auth-field__input:-webkit-autofill,
.auth-field__input:-webkit-autofill:hover,
.auth-field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111c2d;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    caret-color: #111c2d;
    transition: background-color 9999s ease-out 0s;
}

.auth-field__toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #707a82;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.auth-field__toggle:hover { color: #111c2d; background: #f0f5f9; }
.auth-field__toggle:focus-visible {
    outline: 2px solid #0085db;
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Tombol kirim
   Bentuknya mengikuti .btn milik Spike; yang ditambahkan hanya keadaan
   sedang-memproses.
   ------------------------------------------------------------------------- */
.auth-submit {
    width: 100%;
    height: 50px;
    margin-top: 4px;
    position: relative;
}
.auth-submit[data-loading="true"] {
    pointer-events: none;
    color: transparent;
}
.auth-submit[data-loading="true"]::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: auth-spin .6s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------------
   Baris bawah dan footer
   ------------------------------------------------------------------------- */
.auth-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e6ecf1;
    font-size: 13px;
    color: #707a82;
}
.auth-meta a { color: #0085db; text-decoration: none; font-weight: 600; }
.auth-meta a:hover { text-decoration: underline; }

.auth-footer {
    position: relative;
    z-index: 1;
    max-width: 430px;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: #707a82;
}
.auth-footer a { color: #707a82; text-decoration: none; }
.auth-footer a:hover { color: #111c2d; text-decoration: underline; }

/* -------------------------------------------------------------------------
   Responsif dan preferensi pengguna
   ------------------------------------------------------------------------- */
@media (max-width: 520px) {
    .auth-shell { padding: 24px 16px; }
    .auth-brand__logo { width: 62px; height: 62px; border-radius: 16px; }
    .auth-brand__title { font-size: 20px; }
    .auth-aurora__blob { filter: blur(60px); }
}

@media (max-height: 620px) and (orientation: landscape) {
    .auth-shell { justify-content: flex-start; padding-top: 22px; }
    .auth-brand { margin-bottom: 18px; }
    .auth-brand__logo { width: 52px; height: 52px; margin-bottom: 10px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page *,
    .auth-page *::before,
    .auth-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    /* spinner tetap berputar: ia satu-satunya penanda proses berjalan */
    .auth-submit[data-loading="true"]::after {
        animation: auth-spin 1s linear infinite !important;
    }
}

@media (prefers-contrast: more) {
    .auth-field__input { border-color: #707a82; }
    .auth-brand__subtitle,
    .auth-meta,
    .auth-footer { color: #5f686f; }
}