/* ============================================================
   Halaman Auth — kartu putih di atas foto RS UNRAM + overlay ink.
   Identitas mengikuti situs publik (landing.css / brand.css).
   ============================================================ */

body { background: var(--brand-ink, #0e1430) !important; margin: 0; font-family: var(--brand-font-body, 'Public Sans', sans-serif); }

/* Wrapper untuk halaman lama (tracking, dll) */
.auth-page-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        linear-gradient(80deg, rgba(10,15,38,.93) 0%, rgba(10,15,38,.86) 55%, rgba(10,15,38,.78) 100%),
        url('/img/bg-rsunram.jpeg') center/cover no-repeat fixed;
}
.auth-page-wrap:has(.auth-page),
.auth-page-wrap:has(.reg-page) { padding: 0; display: block; background: none; }

/* ---- Kerangka halaman ---- */
.auth-page {
    display: flex;
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: url('/img/bg-rsunram.jpeg') center/cover no-repeat;
}
.auth-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(80deg, rgba(10,15,38,.92) 0%, rgba(10,15,38,.84) 50%, rgba(10,15,38,.72) 100%);
    pointer-events: none;
}
.auth-grid-bg { display: none; }

/* ---- Kartu putih ---- */
.auth-box {
    position: relative;
    z-index: 2;
    background: #fff;
    border: 1px solid var(--brand-line, #e6e9f2);
    border-radius: 1.1rem;
    padding: 2.75rem 2.5rem;
    width: 100%;
    max-width: 440px;
    margin: 2rem 1.25rem;
    box-shadow: 0 30px 80px rgba(6,10,30,.45);
}

/* ---- Split login: kartu form + panel foto ---- */
.auth-split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 900px;
    margin: 2rem 1.25rem;
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(6,10,30,.5);
}
.auth-split .auth-box { max-width: none; margin: 0; border-radius: 0; border: none; box-shadow: none; }
.auth-photo-panel {
    position: relative;
    background: url('/img/galeri-rsunram/igd-1.jpg') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.5rem 2.25rem;
    min-height: 100%;
}
.auth-photo-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(10,15,38,.25) 0%, rgba(10,15,38,.88) 78%);
}
.auth-photo-panel > * { position: relative; z-index: 1; }
.auth-photo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #b7c4ff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}
.auth-photo-title {
    font-family: var(--brand-font-display, 'Plus Jakarta Sans', sans-serif);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 1.25rem;
    letter-spacing: -.01em;
}
.auth-photo-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.auth-photo-points li {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: rgba(255,255,255,.82);
    font-size: .84rem;
}
.auth-photo-points i { color: #9fb2ff; font-size: 1.05rem; flex-shrink: 0; }

/* ---- Brand ---- */
.auth-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 2rem;
    text-decoration: none;
    justify-content: center;
}
.auth-brand img { width: var(--brand-logo-size); height: var(--brand-logo-size); object-fit: contain; }
.auth-brand span { font-family: var(--brand-font-display, 'Plus Jakarta Sans', sans-serif); font-size: 1.2rem; font-weight: 800; color: var(--brand-ink, #0e1430); letter-spacing: -.5px; }
.auth-split .auth-brand { justify-content: flex-start; }

/* ---- Tipografi ---- */
.auth-title { font-family: var(--brand-font-display, 'Plus Jakarta Sans', sans-serif); font-size: 1.5rem; font-weight: 800; color: var(--brand-ink, #0e1430); margin: 0 0 .35rem; text-align: center; letter-spacing: -.01em; }
.auth-subtitle { color: var(--brand-muted, #697a8d); font-size: .875rem; margin: 0 0 2rem; text-align: center; line-height: 1.6; }
.auth-split .auth-title, .auth-split .auth-subtitle { text-align: left; }

/* ---- Kontrol form ---- */
.auth-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: #384357;
    margin-bottom: .4rem;
    letter-spacing: .02em;
}
.auth-input {
    width: 100%;
    background: #fff !important;
    border: 1px solid #d9dee3 !important;
    border-radius: .6rem !important;
    color: #1a1a2e !important;
    font-size: .9rem;
    padding: .7rem 1rem;
    transition: border-color .2s, background .2s, box-shadow .2s;
    outline: none;
}
.auth-input::placeholder { color: #a8b1bd !important; }
.auth-input:focus {
    border-color: var(--brand-primary, #696cff) !important;
    box-shadow: 0 0 0 3px rgba(105,108,255,.16) !important;
    color: #1a1a2e !important;
}
.auth-input.is-invalid { border-color: #ef4444 !important; }
.auth-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important; }
.auth-invalid { color: #dc2626; font-size: .78rem; margin-top: .3rem; }

/* ---- Autofill: pertahankan teks gelap di kartu putih ---- */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:-webkit-autofill:active,
.reg-input:-webkit-autofill,
.reg-input:-webkit-autofill:hover,
.reg-input:-webkit-autofill:focus,
.reg-input:-webkit-autofill:active {
    -webkit-text-fill-color: #1a1a2e !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    border-color: #d9dee3 !important;
    caret-color: #1a1a2e;
    transition: background-color 5000s ease-in-out 0s;
}

/* ---- Toggle kata sandi ---- */
.auth-pw-wrap { position: relative; }
.auth-pw-wrap .auth-input { padding-right: 2.8rem; }
.auth-pw-toggle {
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #a8b1bd;
    cursor: pointer;
    font-size: 1.1rem;
    transition: color .2s;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}
.auth-pw-toggle:hover { color: #566a7f; }

/* ---- Tombol ---- */
.auth-btn-primary {
    width: 100%;
    background: var(--brand-primary, #696cff);
    border: none;
    border-radius: .6rem;
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    padding: .75rem 1.5rem;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    box-shadow: 0 4px 16px rgba(105,108,255,.35);
}
.auth-btn-primary:hover {
    background: var(--brand-primary-dark, #5f61e6);
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(105,108,255,.45);
    color: #fff;
}

/* ---- Tautan ---- */
.auth-link { color: var(--brand-primary, #696cff); text-decoration: none; font-size: .875rem; transition: color .2s; }
.auth-link:hover { color: var(--brand-primary-dark, #5f61e6); text-decoration: underline; }
.auth-text-muted { color: var(--brand-muted, #697a8d); font-size: .875rem; }

/* ---- Alert ---- */
.auth-alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: .75rem;
    padding: .75rem 1rem;
    color: #b91c1c;
    font-size: .875rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.auth-alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: .75rem;
    padding: .75rem 1rem;
    color: #15803d;
    font-size: .875rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* ---- Checkbox ---- */
.auth-check-wrap { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.auth-check-wrap input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand-primary, #696cff); cursor: pointer; }
.auth-check-wrap label { color: #566a7f; font-size: .85rem; cursor: pointer; margin: 0; }

/* ---- Pembatas ---- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0;
    color: #a8b1bd;
    font-size: .75rem;
}
.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--brand-line, #e6e9f2);
}

/* ============================================================
   Halaman register — dua kolom (form putih + info di atas foto)
   ============================================================ */
.reg-page {
    display: flex;
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: url('/img/bg-rsunram.jpeg') center/cover no-repeat;
}
.reg-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(80deg, rgba(10,15,38,.93) 0%, rgba(10,15,38,.85) 50%, rgba(10,15,38,.75) 100%);
    pointer-events: none;
}
.reg-grid-bg { display: none; }

/* Kiri: kolom form — dipadatkan agar form "Daftar Baru" muat tanpa scroll */
.reg-form-col {
    position: relative;
    z-index: 2;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 3.5rem;
    min-height: 100vh;
}
.reg-form-box {
    background: #fff;
    border: 1px solid var(--brand-line, #e6e9f2);
    border-radius: 1.1rem;
    padding: 1.75rem 2rem;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 30px 80px rgba(6,10,30,.45);
}
.reg-form-box .mb-3 { margin-bottom: .8rem !important; }
.reg-form-box .mb-4 { margin-bottom: 1rem !important; }
.reg-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.reg-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.1rem;
    text-decoration: none;
}
.reg-brand img { width: var(--brand-logo-size); height: var(--brand-logo-size); object-fit: contain; }
.reg-brand span { font-family: var(--brand-font-display, 'Plus Jakarta Sans', sans-serif); font-size: 1.2rem; font-weight: 800; color: var(--brand-ink, #0e1430); letter-spacing: -.5px; }
.reg-title { font-family: var(--brand-font-display, 'Plus Jakarta Sans', sans-serif); font-size: 1.4rem; font-weight: 800; color: var(--brand-ink, #0e1430); margin: 0 0 .35rem; letter-spacing: -.01em; }
.reg-subtitle { color: var(--brand-muted, #697a8d); font-size: .875rem; margin: 0 0 1.1rem; }

/* Kontrol form */
.reg-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: #384357;
    margin-bottom: .3rem;
    letter-spacing: .02em;
}
.reg-label .opt { font-weight: 400; color: #a8b1bd; font-size: .75rem; }
.reg-input {
    width: 100%;
    background: #fff !important;
    border: 1px solid #d9dee3 !important;
    border-radius: .6rem !important;
    color: #1a1a2e !important;
    font-size: .9rem;
    padding: .6rem .9rem;
    transition: border-color .2s, background .2s, box-shadow .2s;
    outline: none;
}
.reg-input::placeholder { color: #a8b1bd !important; }
.reg-input:focus {
    border-color: var(--brand-primary, #696cff) !important;
    box-shadow: 0 0 0 3px rgba(105,108,255,.16) !important;
    color: #1a1a2e !important;
}
.reg-input.is-invalid { border-color: #ef4444 !important; }
.reg-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important; }
.reg-invalid { color: #dc2626; font-size: .78rem; margin-top: .3rem; }

.reg-pw-wrap { position: relative; }
.reg-pw-wrap .reg-input { padding-right: 2.8rem; }
.reg-pw-toggle {
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #a8b1bd;
    cursor: pointer;
    font-size: 1.1rem;
    transition: color .2s;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}
.reg-pw-toggle:hover { color: #566a7f; }

.reg-btn-primary {
    width: 100%;
    background: var(--brand-primary, #696cff);
    border: none;
    border-radius: .6rem;
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    padding: .75rem 1.5rem;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(105,108,255,.35);
}
.reg-btn-primary:hover {
    background: var(--brand-primary-dark, #5f61e6);
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(105,108,255,.45);
    color: #fff;
}
.reg-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.reg-alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: .75rem;
    padding: .85rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.25rem;
    color: #15803d;
    font-size: .875rem;
}
.reg-alert-success i { font-size: 1.2rem; flex-shrink: 0; margin-top: .05rem; }

.reg-data-display {
    background: var(--brand-paper, #f6f7fb);
    border: 1px solid var(--brand-line, #e6e9f2);
    border-radius: .6rem;
    padding: .7rem 1rem;
    color: #384357;
    font-size: .9rem;
}

.reg-link { color: var(--brand-primary, #696cff); text-decoration: none; font-size: .875rem; transition: color .2s; }
.reg-link:hover { color: var(--brand-primary-dark, #5f61e6); text-decoration: underline; }
.reg-text-muted { color: var(--brand-muted, #697a8d); font-size: .875rem; }

/* Tab switcher */
.reg-tabs {
    display: flex;
    background: var(--brand-paper, #f6f7fb);
    border: 1px solid var(--brand-line, #e6e9f2);
    border-radius: .75rem;
    padding: .25rem;
    margin-bottom: 1.1rem;
    gap: .25rem;
}
.reg-tab {
    flex: 1;
    padding: .55rem .75rem;
    border-radius: .55rem;
    border: none;
    background: transparent;
    color: #697a8d;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
}
.reg-tab.active {
    background: #fff;
    border: 1px solid rgba(105,108,255,.35);
    color: var(--brand-primary, #696cff);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(14,20,48,.08);
}
.reg-tab:hover:not(.active) { color: #384357; background: rgba(255,255,255,.7); }

/* Kanan: kolom info (di atas foto + overlay ink, tetap terang) */
.reg-info-col {
    position: relative;
    z-index: 2;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 3.5rem 3rem 2rem;
}
.reg-info-inner { max-width: 420px; }
.reg-info-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(105,108,255,.2);
    border: 1px solid rgba(159,178,255,.45);
    color: #b7c4ff;
    border-radius: 50px;
    padding: .3rem .9rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.reg-info-title { font-family: var(--brand-font-display, 'Plus Jakarta Sans', sans-serif); font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 800; color: #fff; line-height: 1.2; margin: 0 0 1rem; letter-spacing: -.02em; }
.reg-info-title .accent { color: #9fb2ff; }
.reg-info-desc { color: rgba(255,255,255,.75); font-size: .95rem; line-height: 1.7; margin: 0 0 2rem; }

.reg-feature-list { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.reg-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.reg-feature-list li:last-child { border-bottom: none; }
.reg-feature-icon {
    width: 38px;
    height: 38px;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.reg-feature-text strong { display: block; color: #fff; font-size: .875rem; font-weight: 600; margin-bottom: .2rem; }
.reg-feature-text span { color: rgba(255,255,255,.65); font-size: .8rem; line-height: 1.5; }

.reg-login-hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.25rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: .75rem;
    font-size: .875rem;
    color: rgba(255,255,255,.65);
}
.reg-login-hint a { color: #b7c4ff; text-decoration: none; font-weight: 600; }
.reg-login-hint a:hover { color: #fff; }

/* ---- Responsif ---- */
@media (max-width: 991.98px) {
    .auth-split { grid-template-columns: 1fr; max-width: 480px; }
    .auth-photo-panel { display: none; }
    .reg-page { flex-direction: column; }
    .reg-form-col, .reg-info-col { width: 100%; min-height: auto; padding: 2.5rem 1.5rem; }
    .reg-form-col { padding-bottom: 1.5rem; }
    .reg-info-col { padding-top: 0; padding-bottom: 3rem; }
    .reg-form-box { max-width: 100%; }
    .reg-info-inner { max-width: 100%; }
    /* Di HP/tablet form boleh discroll — pasangan field kembali bertumpuk agar input lega */
    .reg-field-pair { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .reg-form-col, .reg-info-col { padding: 1.75rem 1.25rem; }
    .reg-form-box { padding: 1.75rem 1.25rem; }
    .auth-box { padding: 2rem 1.5rem; margin: 1.5rem 1rem; }
    .auth-split { margin: 1.5rem 1rem; }
}