/* =====================================================================================================================
   HALAMAN MASUK BERFOTO — login & halaman sandi Panel Admin, Panel Mitra, Panel Klien (pratinjau 21 Okt 2026, CARA-BAKU 103).
   Dimuat SESUDAH <style> bawaan halaman (admin/login.php, sales/login.php, sales/lupa-password.php, sales/atur-password.php,
   sales/ganti-password.php) dan sesudah portal.css + panel-berfoto.css (public/klien/login.php, lupa-password.php, set-password.php).
   Hanya tampilan: formulir, CSRF, batas percobaan, dan pesan tidak diubah.
   <body class="masuk-berfoto masuk-admin|masuk-mitra|masuk-klien" data-sapa="kalimat di atas foto">
   Laptop: foto suasana kiri (body::before) + kalimat sapa (body::after) | formulir di kartu putih kanan.
   HP (≤ 900 px): foto jadi pita 210 px di atas, formulir di bawahnya. Selalu TERANG (gading) seperti halaman berfoto situs.
   ===================================================================================================================== */
body.masuk-berfoto {
    --m-gading: #F7F4EE; --m-gading2: #EFEADF; --m-putih: #FFFFFF; --m-tinta: #0B1730; --m-tinta2: #22304D; --m-redup: #545D72;
    --m-garis: #E3DDD0; --m-garis-isian: #D9D1C1; --m-emas: #C9A227; --m-emas-tua: #7A5E0B; --m-emas-lembut: #F5ECD2;
    --m-kurva: cubic-bezier(.2, .8, .2, 1);
    /* token halaman lama & portal.css dipaksa terang (halaman masuk tidak punya tombol tema) */
    --bg-dark: #F7F4EE; --bg-card: #FFFFFF; --text-primary: #0B1730; --text-secondary: #22304D; --text-muted: #545D72;
    --border: #E3DDD0; --accent: #C9A227; --accent-text: #7A5E0B; --danger: #B42318; --success: #15733A;
    --p-bg: #F7F4EE; --p-card: #FFFFFF; --p-input: #FFFFFF; --p-border: #E3DDD0; --p-border-soft: #D9D1C1; --p-text: #0B1730;
    --p-text-soft: #22304D; --p-text-dim: #545D72; --p-accent: #C9A227; --p-accent-text: #7A5E0B; --p-on-accent: #0B1730;
    --p-success: #15733A; --p-danger: #B42318; --p-success-bg: #E7F3EB; --p-danger-bg: #FCE9E6;
    --p-success-bd: rgba(21, 115, 58, .28); --p-danger-bd: rgba(180, 35, 24, .3);
    --pb-gading: #F7F4EE; --pb-gading2: #EFEADF; --pb-putih: #FFFFFF; --pb-tinta: #0B1730; --pb-tinta2: #22304D; --pb-redup: #545D72;
    --pb-garis: #E3DDD0; --pb-emas-tua: #7A5E0B; --pb-emas-lembut: #F5ECD2; --p-hover: rgba(122, 94, 11, .06);
    color-scheme: light;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(100vh, auto);
    align-items: center; justify-content: stretch; min-height: 100vh; margin: 0; padding: 0;
    background: var(--m-gading); color: var(--m-tinta); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
/* foto suasana (dekoratif) */
body.masuk-berfoto::before {
    content: ""; grid-area: 1 / 1; align-self: stretch; min-height: 100%;
    background-color: #D9CBB4; background-repeat: no-repeat; background-size: cover; background-position: center;
}
body.masuk-admin::before {
    background-image: linear-gradient(180deg, rgba(11, 23, 48, 0) 45%, rgba(11, 23, 48, .82) 100%),
        image-set(url("../images/suasana/penutup-mulai-900.webp") type("image/webp"), url("../images/suasana/penutup-mulai-900.jpg") type("image/jpeg"));
    background-position: 0 0, 60% 50%;
}
body.masuk-mitra::before {
    background-image: linear-gradient(180deg, rgba(11, 23, 48, 0) 45%, rgba(11, 23, 48, .82) 100%),
        image-set(url("../images/suasana/karir-hero-800.webp") type("image/webp"), url("../images/suasana/karir-hero-800.jpg") type("image/jpeg"));
    background-position: 0 0, 30% 50%;
}
body.masuk-klien::before {
    background-image: linear-gradient(180deg, rgba(11, 23, 48, 0) 45%, rgba(11, 23, 48, .82) 100%),
        image-set(url("../images/suasana/layanan-hero-900.webp") type("image/webp"), url("../images/suasana/layanan-hero-900.jpg") type("image/jpeg"));
    background-position: 0 0, 35% 50%;
}
/* kalimat sapa di atas foto: garis emas + judul putih */
body.masuk-berfoto::after {
    content: attr(data-sapa); grid-area: 1 / 1; align-self: end; justify-self: start; max-width: 30rem;
    margin: 0 0 clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem); padding-top: 1.1rem;
    background: linear-gradient(#C9A227, #C9A227) no-repeat 0 0 / 40px 3px;
    font: 800 clamp(1.5rem, 2.6vw, 2.25rem)/1.15 'Figtree', 'Segoe UI', system-ui, sans-serif; letter-spacing: -.02em; color: #FFFFFF;
    text-shadow: 0 2px 18px rgba(11, 23, 48, .45);
}

/* panel formulir */
body.masuk-berfoto .login-container, body.masuk-berfoto > .box, body.masuk-berfoto .portal-auth-wrap {
    grid-area: 1 / 2; justify-self: center; width: 100%; max-width: 460px; padding: 2.5rem 1.5rem;
}
body.masuk-berfoto .portal-auth-wrap { min-height: 0; background: transparent; display: block; }
body.masuk-berfoto .login-header, body.masuk-berfoto .portal-auth-logo { text-align: left; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; }
body.masuk-berfoto .login-header img, body.masuk-berfoto .portal-auth-logo img { height: 44px !important; width: auto; margin: 0 !important; }
body.masuk-berfoto .login-header p, body.masuk-berfoto .login-badge {
    margin: 0; background: none; padding: 0; border-radius: 0;
    font: 600 .8125rem/1.4 'Inter', 'Segoe UI', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--m-emas-tua);
    display: inline-flex; align-items: center; gap: .55rem;
}
body.masuk-berfoto .login-header p::before, body.masuk-berfoto .login-badge::before { content: ""; width: 22px; height: 2px; background: var(--m-emas); }
body.masuk-berfoto .login-card, body.masuk-berfoto > .box > .card, body.masuk-berfoto .portal-auth-card {
    background: var(--m-putih); border: 1px solid var(--m-garis); border-radius: 20px; padding: 2rem 2rem 2.1rem;
    box-shadow: 0 1px 0 rgba(11, 23, 48, .04), 0 26px 50px -30px rgba(11, 23, 48, .45); -webkit-backdrop-filter: none; backdrop-filter: none;
    max-width: none;
}
body.masuk-berfoto h1, body.masuk-berfoto .masuk-judul {
    font: 800 1.625rem/1.2 'Figtree', 'Segoe UI', system-ui, sans-serif; letter-spacing: -.02em; color: var(--m-tinta); margin: 0 0 .4rem; text-align: left;
}
body.masuk-berfoto .masuk-sub, body.masuk-berfoto .login-card .sub, body.masuk-berfoto p.sub, body.masuk-berfoto .portal-auth-card .sub {
    color: var(--m-redup); font-size: .9375rem; line-height: 1.6; margin: 0 0 1.4rem; text-align: left;
}
body.masuk-berfoto .form-label, body.masuk-berfoto > .box label, body.masuk-berfoto .portal-label {
    font-size: .875rem; font-weight: 600; color: var(--m-tinta2); margin-bottom: .45rem;
}
body.masuk-berfoto .form-input, body.masuk-berfoto > .box input:not([type="hidden"]), body.masuk-berfoto .portal-input {
    background: var(--m-putih); border: 1px solid var(--m-garis-isian); border-radius: 12px; color: var(--m-tinta);
    font-size: 1rem; min-height: 48px; transition: border-color .2s, box-shadow .2s;
}
body.masuk-berfoto .form-input::placeholder, body.masuk-berfoto > .box input::placeholder, body.masuk-berfoto .portal-input::placeholder { color: #6B7385; }
body.masuk-berfoto .form-input:focus, body.masuk-berfoto > .box input:focus, body.masuk-berfoto .portal-input:focus {
    outline: none; border-color: var(--m-emas); box-shadow: 0 0 0 3px rgba(201, 162, 39, .25);
}
body.masuk-berfoto .input-icon { color: var(--m-redup); }
/* tombol emas bulat timbul */
body.masuk-berfoto .btn-login, body.masuk-berfoto > .box .btn, body.masuk-berfoto .portal-btn-primary {
    display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 50px;
    background: var(--m-emas); color: #0B1730; border: 0; border-radius: 999px; letter-spacing: .01em;
    font: 700 1rem/1 'Figtree', 'Segoe UI', system-ui, sans-serif; text-decoration: none; cursor: pointer;
    box-shadow: 0 10px 22px -10px rgba(201, 162, 39, .85); transition: transform .2s var(--m-kurva), box-shadow .2s, background .2s;
}
body.masuk-berfoto .btn-login:hover, body.masuk-berfoto > .box .btn:hover, body.masuk-berfoto .portal-btn-primary:hover {
    background: #D6B03A; color: #0B1730; transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(201, 162, 39, .9);
}
body.masuk-berfoto .btn-login:active, body.masuk-berfoto > .box .btn:active, body.masuk-berfoto .portal-btn-primary:active { transform: translateY(1px); box-shadow: none; }
body.masuk-berfoto :is(a, button, input):focus-visible { outline: 2px solid var(--m-emas); outline-offset: 3px; }
/* pesan */
body.masuk-berfoto .error-msg, body.masuk-berfoto > .box .alert {
    background: #FCE9E6; border: 1px solid rgba(180, 35, 24, .3); color: #B42318; border-radius: 12px; text-align: left; font-size: .9375rem; line-height: 1.55;
}
body.masuk-berfoto .ok-msg { background: #E7F3EB; border: 1px solid rgba(21, 115, 58, .28); color: #15733A; border-radius: 12px; text-align: left; font-size: .9375rem; line-height: 1.6; }
/* tautan */
body.masuk-berfoto .lupa a, body.masuk-berfoto .login-footer a, body.masuk-berfoto > .box .note a, body.masuk-berfoto .portal-auth-card a:not(.portal-btn) {
    color: var(--m-emas-tua); text-decoration: underline; text-underline-offset: 3px; font-weight: 600;
}
body.masuk-berfoto .login-footer, body.masuk-berfoto > .box .note { color: var(--m-redup); font-size: .9375rem; line-height: 1.7; text-align: left; margin-top: 1.25rem; }
body.masuk-berfoto .portal-auth-card [style*="border-top"] { border-top-color: var(--m-garis) !important; color: var(--m-redup) !important; }
body.masuk-berfoto .portal-alert { border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
    body.masuk-berfoto .btn-login, body.masuk-berfoto > .box .btn, body.masuk-berfoto .portal-btn-primary { transition: none; }
    body.masuk-berfoto .btn-login:hover, body.masuk-berfoto > .box .btn:hover, body.masuk-berfoto .portal-btn-primary:hover { transform: none; }
}

/* ---------- HP & tablet: foto jadi pita di atas ---------- */
@media (max-width: 900px) {
    body.masuk-berfoto { grid-template-columns: minmax(0, 1fr); grid-template-rows: 210px auto; align-items: start; }
    body.masuk-berfoto::before { grid-area: 1 / 1; min-height: 210px; }
    body.masuk-berfoto::after { grid-area: 1 / 1; margin: 0 1.25rem 1.1rem; font-size: 1.3125rem; max-width: 22rem; padding-top: .85rem; }
    body.masuk-berfoto .login-container, body.masuk-berfoto > .box, body.masuk-berfoto .portal-auth-wrap {
        grid-area: 2 / 1; padding: 1.5rem 1rem 2.5rem; max-width: 520px;
    }
    body.masuk-berfoto .login-card, body.masuk-berfoto > .box > .card, body.masuk-berfoto .portal-auth-card { padding: 1.5rem 1.25rem 1.6rem; }
    body.masuk-berfoto h1, body.masuk-berfoto .masuk-judul { font-size: 1.4375rem; }
}