/* ====================================================================
   assets/auth-theme.css
   Tema khusus halaman Login & Register — PERKASA HOSTING INDONESIA.
   Standalone, tidak bergantung pada includes/style.php (tema neumorphism
   gelap situs utama). Mobile-first, clean, premium, ringan.
   ==================================================================== */

.pha-body{
    --pha-primary:#155EEF;
    --pha-primary-dark:#0B3FB0;
    --pha-primary-soft:#EAF1FF;
    --pha-ink:#12141A;
    --pha-ink-soft:#6B7280;
    --pha-border:#E6E8EE;
    --pha-surface:#FFFFFF;
    --pha-bg:#F5F7FB;
    --pha-danger:#E0393E;
    --pha-danger-soft:#FDEBEC;
    --pha-success:#17A34A;
    --pha-success-soft:#EAFBF1;
    --pha-radius-card:22px;
    --pha-radius-input:13px;
    --pha-radius-btn:14px;

    margin:0;
    min-height:100%;
    background:
        radial-gradient(680px 420px at 50% -8%, rgba(21,94,239,.07), rgba(21,94,239,0) 70%),
        var(--pha-bg);
    font-family:'Barlow Condensed', sans-serif;
    color:var(--pha-ink);
    -webkit-font-smoothing:antialiased;
}

.pha-body *{ box-sizing:border-box; }

.pha-page{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:36px 20px 40px;
}

.pha-flash-wrap{
    width:100%;
    max-width:400px;
    margin:0 auto 4px;
    padding:14px 20px 0;
}

.pha-container{
    width:100%;
    max-width:400px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* ---------- Logo ---------- */
.pha-logo-wrap{
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:18px;
    animation:phaFadeSlideDown .5s cubic-bezier(.22,.61,.36,1) both;
}
.pha-logo-wrap img{
    width:100%;
    max-width:220px;
    height:auto;
    object-fit:contain;
    display:block;
}

/* ---------- Hero image (loginmse.jpg) ---------- */
.pha-hero-wrap{
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:22px;
    animation:phaFadeIn .55s ease-out .12s both;
}
.pha-hero-wrap img{
    width:100%;
    max-width:320px;
    height:auto;
    object-fit:contain;
    display:block;
}

/* ---------- Card ---------- */
.pha-card{
    width:100%;
    background:transparent;
    border:none;
    box-shadow:none;
    padding:2px 4px 0;
    animation:phaFadeSlideUp .55s cubic-bezier(.22,.61,.36,1) .2s both;
}
.pha-card.pha-shake{
    animation:phaFadeSlideUp .55s cubic-bezier(.22,.61,.36,1) .2s both,
              phaShake .45s ease-in-out .68s 1;
}

/* ---------- Alerts ---------- */
.pha-alert{
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:11px 13px;
    border-radius:12px;
    font-size:12.5px;
    font-weight:600;
    line-height:1.4;
    margin-bottom:14px;
    animation:phaFadeIn .35s ease-out;
}
.pha-alert svg{ width:17px; height:17px; flex-shrink:0; margin-top:1px; }
.pha-alert-error{ background:var(--pha-danger-soft); color:var(--pha-danger); }
.pha-alert-success{ background:var(--pha-success-soft); color:var(--pha-success); }

/* ---------- Form ---------- */
.pha-form{ display:flex; flex-direction:column; gap:15px; }

.pha-field label{
    display:block;
    font-size:12px;
    font-weight:700;
    letter-spacing:.01em;
    color:var(--pha-ink);
    margin-bottom:6px;
}
.pha-field-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
}
.pha-field-row label{ margin-bottom:0; }
.pha-link-sm{
    font-size:12px;
    font-weight:700;
    color:var(--pha-primary);
    text-decoration:none;
}
.pha-link-sm:hover{ text-decoration:underline; }

.pha-input-wrap{ position:relative; }

.pha-input{
    width:100%;
    height:48px;
    padding:0 14px;
    font-family:inherit;
    font-size:14.5px;
    font-weight:500;
    color:var(--pha-ink);
    background:var(--pha-surface);
    border:1.5px solid var(--pha-border);
    border-radius:var(--pha-radius-input);
    outline:none;
    transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
    -webkit-appearance:none;
    appearance:none;
}
.pha-input::placeholder{ color:#A3A9B7; font-weight:400; }
.pha-input:focus{
    border-color:var(--pha-primary);
    background:var(--pha-surface);
    box-shadow:0 0 0 4px var(--pha-primary-soft);
}
.pha-input.has-toggle{ padding-right:44px; }

.pha-field-hint{ margin-top:6px; font-size:11px; color:var(--pha-ink-soft); }

.pha-eye-toggle{
    position:absolute;
    right:4px;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    color:#9AA1B1;
    cursor:pointer;
    border-radius:9px;
    transition:color .18s ease, background .18s ease;
}
.pha-eye-toggle:hover{ color:var(--pha-primary); background:var(--pha-primary-soft); }
.pha-eye-toggle svg{ width:19px; height:19px; }

.pha-remember{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:600;
    color:var(--pha-ink-soft);
    cursor:pointer;
    user-select:none;
}
.pha-remember input{ width:16px; height:16px; accent-color:var(--pha-primary); cursor:pointer; }

/* ---------- Button ---------- */
.pha-btn{
    width:100%;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:none;
    border-radius:var(--pha-radius-btn);
    background:linear-gradient(180deg, var(--pha-primary), var(--pha-primary-dark));
    color:#fff;
    font-family:'Barlow Condensed', sans-serif;
    font-size:15.5px;
    font-weight:700;
    letter-spacing:.01em;
    cursor:pointer;
    box-shadow:0 10px 22px -8px rgba(21,94,239,.55);
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    margin-top:4px;
    animation:phaFadeIn .4s ease-out .45s both;
}
.pha-btn svg{ width:18px; height:18px; }
.pha-btn:active{ transform:translateY(1px) scale(.99); }
.pha-btn:hover{ box-shadow:0 12px 26px -8px rgba(21,94,239,.62); }
.pha-btn:disabled{ opacity:.85; cursor:not-allowed; transform:none; }
.pha-btn.is-loading{ opacity:.9; }

.pha-spinner{
    width:17px;
    height:17px;
    border-radius:50%;
    border:2.5px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    display:inline-block;
    animation:phaSpin .7s linear infinite;
    flex-shrink:0;
}

/* ---------- Divider "atau" (di antara form biasa & Login Google) ---------- */
.pha-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:18px 0;
    color:var(--pha-ink-soft);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.pha-divider::before,
.pha-divider::after{
    content:'';
    flex:1;
    height:1px;
    background:var(--pha-border);
}

/* ---------- Tombol Lanjutkan dengan Google ---------- */
.pha-btn-google{
    width:100%;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1.5px solid var(--pha-border);
    border-radius:var(--pha-radius-btn);
    background:var(--pha-surface);
    color:var(--pha-ink);
    font-family:'Barlow Condensed', sans-serif;
    font-size:15.5px;
    font-weight:700;
    letter-spacing:.01em;
    text-decoration:none;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pha-btn-google svg{ width:19px; height:19px; flex-shrink:0; }
.pha-btn-google:hover{ border-color:var(--pha-primary); box-shadow:0 8px 20px -10px rgba(18,20,26,.25); }
.pha-btn-google:active{ transform:translateY(1px) scale(.99); }

/* ---------- Footer links ---------- */
.pha-card-foot{
    text-align:center;
    margin:18px 0 0;
    font-size:13px;
    color:var(--pha-ink-soft);
}
.pha-card-foot a{
    color:var(--pha-primary);
    font-weight:700;
    text-decoration:none;
}
.pha-card-foot a:hover{ text-decoration:underline; }

.pha-legal{
    margin-top:20px;
    text-align:center;
    font-size:11px;
    line-height:1.6;
    color:#9AA1B1;
    max-width:340px;
}
.pha-legal a{ color:#6B7280; font-weight:600; text-decoration:underline; }

/* ---------- Ref code badge (register only) ---------- */
.pha-ref-badge{ margin-bottom:14px; }

/* ---------- Animations ---------- */
@keyframes phaFadeSlideDown{
    from{ opacity:0; transform:translateY(-14px); }
    to{ opacity:1; transform:translateY(0); }
}
@keyframes phaFadeSlideUp{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
}
@keyframes phaFadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
}
@keyframes phaSpin{
    to{ transform:rotate(360deg); }
}
@keyframes phaShake{
    0%, 100%{ transform:translateX(0); }
    20%{ transform:translateX(-9px); }
    40%{ transform:translateX(8px); }
    60%{ transform:translateX(-6px); }
    80%{ transform:translateX(5px); }
}

@media (prefers-reduced-motion: reduce){
    .pha-logo-wrap, .pha-hero-wrap, .pha-card, .pha-btn, .pha-alert{ animation:none !important; }
}

/* ---------- Desktop ---------- */
@media (min-width:640px){
    .pha-page{ padding:56px 20px; }
    .pha-container{ max-width:420px; }
    .pha-card{ padding:8px 4px 0; }
    .pha-hero-wrap img{ max-width:340px; }
}