/* UP ProDev — LOGIN, gaya khas halaman ini saja.
 *
 * Token & komponen dari prodev_tokens.css + prodev_shell.css: .up-input,
 * .up-label, .up-btn--primary, .up-ic. Yang ada DI SINI hanya tata letak dua
 * panel dan hiasan panel kiri.
 *
 * TANPA hex — semua dari var(--up-*).
 */

.pl-body {
    margin: 0;
    min-height: 100vh;
    background: var(--up-bg-app);
}

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

/* ── KIRI: identitas ──────────────────────────────────────────────────── */
/* Latar rose lembut. SATU aksen kuat saja di seluruh halaman (Pasal 63:
   dilarang lebih dari 1 aksen kuat dalam satu komponen) — panel kanan dibiarkan
   putih bersih supaya formulirnya yang jadi pusat perhatian. */
.pl-brand {
    background: var(--up-primary-light);
    padding: var(--up-sp-12) var(--up-sp-8);
    display: flex;
    flex-direction: column;
    gap: var(--up-sp-8);
    border-right: 1px solid var(--up-border);
}

.pl-brand__top { display: flex; align-items: center; gap: var(--up-sp-3); }
.pl-brand__mark {
    width: 40px;
    height: 40px;
    border-radius: var(--up-radius-md);
    background: var(--up-bg-card);
    color: var(--up-primary);
    display: grid;
    place-items: center;
    flex: none;
}
.pl-brand__name {
    font-size: var(--up-fs-section);
    font-weight: var(--up-fw-semi);
    color: var(--up-text-primary);
    letter-spacing: -0.01em;
}

.pl-brand__copy { margin-top: auto; }
.pl-brand__copy h1 {
    font-size: var(--up-fs-title);
    line-height: var(--up-lh-title);
    font-weight: var(--up-fw-bold);
    letter-spacing: -0.5px;
    color: var(--up-text-primary);
    margin: 0 0 var(--up-sp-2);
}
.pl-brand__copy p {
    font-size: var(--up-fs-subtitle);
    line-height: var(--up-lh-subtitle);
    color: var(--up-text-secondary);
    margin: 0;
    max-width: 36ch;
}

.pl-brand__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--up-sp-3);
}
.pl-brand__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--up-sp-2);
    font-size: var(--up-fs-meta);
    color: var(--up-text-secondary);
    line-height: 1.45;
}
.pl-brand__list .up-ic { color: var(--up-primary); margin-top: 1px; }

.pl-brand__foot {
    margin-top: auto;
    font-size: var(--up-fs-small);
    color: var(--up-text-muted);
}

/* ── KANAN: formulir ──────────────────────────────────────────────────── */
.pl-panel {
    display: grid;
    place-items: center;
    padding: var(--up-sp-8) var(--up-sp-5);
    background: var(--up-bg-card);
}
.pl-card { width: 100%; max-width: 360px; }

.pl-card__title {
    font-size: var(--up-fs-kpi);
    line-height: var(--up-lh-kpi);
    font-weight: var(--up-fw-bold);
    letter-spacing: -0.02em;
    color: var(--up-text-primary);
    margin: 0;
}
.pl-card__lead {
    font-size: var(--up-fs-meta);
    color: var(--up-text-secondary);
    margin: var(--up-sp-1) 0 var(--up-sp-6);
}

.pl-msgs { display: flex; flex-direction: column; gap: var(--up-sp-2); margin-bottom: var(--up-sp-4); }
.pl-msg {
    display: flex;
    align-items: flex-start;
    gap: var(--up-sp-2);
    padding: var(--up-sp-2) var(--up-sp-3);
    border-radius: var(--up-radius-md);
    font-size: var(--up-fs-meta);
    line-height: 1.4;
}
.pl-msg--bad  { background: var(--up-danger-light);  color: var(--up-st-delayed-tx); }
.pl-msg--info { background: var(--up-success-light); color: var(--up-st-ontrack-tx); }

.pl-form { display: flex; flex-direction: column; gap: var(--up-sp-4); }
.pl-field { display: flex; flex-direction: column; }

/* Tombol mata di dalam kolom password. */
.pl-pass { position: relative; display: flex; align-items: center; }
.pl-pass .up-input { padding-right: 40px; }
.pl-eye {
    position: absolute;
    right: var(--up-sp-1);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    border-radius: var(--up-radius-sm);
    color: var(--up-text-muted);
    cursor: pointer;
    transition: background var(--up-transition), color var(--up-transition);
}
.pl-eye:hover { background: var(--up-hover-soft); color: var(--up-text-secondary); }
.pl-eye:focus-visible { outline: none; box-shadow: var(--up-focus-ring); }

.pl-submit { width: 100%; margin-top: var(--up-sp-1); }
.pl-submit:disabled { opacity: 0.6; cursor: default; }

.pl-back {
    display: inline-flex;
    align-items: center;
    gap: var(--up-sp-1);
    margin-top: var(--up-sp-6);
    font-size: var(--up-fs-meta);
    font-weight: var(--up-fw-med);
    color: var(--up-text-secondary);
    text-decoration: none;
}
.pl-back:hover { color: var(--up-primary); }

/* ── RESPONSIF ────────────────────────────────────────────────────────── */
/* Di bawah 900px panel kiri tidak lagi berguna sebagai kolom — ia jadi kepala
   ringkas di atas formulir, dan daftar tiga barisnya dibuang supaya layar kecil
   tidak dipaksa menggulir sebelum bisa mengetik. */
@media (max-width: 900px) {
    .pl-shell { grid-template-columns: 1fr; }
    .pl-brand {
        padding: var(--up-sp-5);
        gap: var(--up-sp-4);
        border-right: none;
        border-bottom: 1px solid var(--up-border);
    }
    .pl-brand__copy { margin-top: 0; }
    .pl-brand__copy h1 { font-size: var(--up-fs-kpi); line-height: var(--up-lh-kpi); }
    .pl-brand__list,
    .pl-brand__foot { display: none; }
    .pl-panel { padding: var(--up-sp-6) var(--up-sp-4) var(--up-sp-12); place-items: start center; }
}