/* =====================================================
   LOGIN PAGE – PERDAMI JAWA TENGAH (Mata Jawa Tengah Terbuka)
   Terang klinis + iris ngikutin mouse + siluet Lawang Sewu.
   Tanpa font/asset eksternal (offline-safe).
   ===================================================== */
/* ui-ux-pro-max #16 Corporate Trust: Lexend (display) + Source Sans 3 (teks).
   Self-hosted (backend/web/fonts) — offline-safe, tanpa DNS Google Fonts. */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/lexend-700.woff2) format('woff2');
}
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/lexend-800.woff2) format('woff2');
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/sourcesans3-400.woff2) format('woff2');
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/sourcesans3-600.woff2) format('woff2');
}
:root {
    --pd-brand: #0E7F8E;
    --pd-brand-dark: #083F4D;
    --pd-accent: #C9A86A;
    --pd-surface: #ffffff;
    --pd-bg: #F6F9FB;
    --pd-text: #1f2a33;
    --pd-muted: #6b7c88;
    --pd-line: #dbe5ea;
    --pd-radius: 10px;
}

body.login-page {
    background: var(--pd-bg) !important;
}

body.login-page .pd-wrap {
    display: flex;
    min-height: 100vh;
    width: 100%;
    font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    color: var(--pd-text);
}

/* ===== Panel kiri: sunrise + mata + Lawang Sewu ===== */
body.login-page .pd-brand {
    flex: 1.15;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(160deg, rgba(8, 63, 77, .78) 0%, rgba(14, 127, 142, .55) 45%, rgba(14, 127, 142, .38) 70%, rgba(8, 63, 77, .62) 100%),
        url(../images/kota-semarang.jpg?v=1) center/cover no-repeat;
    color: #fff;
    padding: 48px 32px;
}
body.login-page .pd-brand-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 560px;
    text-shadow: 0 2px 14px rgba(4, 32, 40, .65), 0 1px 3px rgba(4, 32, 40, .8);
}
body.login-page .pd-eyebrow {
    letter-spacing: 3px;
    font-size: 12px;
    opacity: .85;
    margin-bottom: 10px;
}
body.login-page .pd-eyes {
    width: min(560px, 96%);
    margin: 6px auto 14px;
    filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .35));
}
body.login-page .pd-eye-stack { position: relative; width: 100%; aspect-ratio: 1675/939; }
body.login-page .pd-eye-stack img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.login-page .pd-eye-masked {
    position: absolute; inset: 0;
    -webkit-mask-image: url(../images/eye-login-mask.png?v=1);
    mask-image: url(../images/eye-login-mask.png?v=1);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    mask-mode: luminance; -webkit-mask-mode: luminance;
}
body.login-page .pd-eye-glintwrap { position: absolute; inset: 0; }
body.login-page .pd-eye-ball, body.login-page .pd-eye-glint { will-change: transform; }
body.login-page #pdEyeWhole { transform-box: fill-box; transform-origin: center; }
body.login-page #pdEyeWhole.pd-blink { animation: pd-blink .22s ease; }
@keyframes pd-blink {
    0% { transform: scaleY(1); }
    45% { transform: scaleY(.07); }
    100% { transform: scaleY(1); }
}
body.login-page .pd-brand h1 {
    font-family: 'Lexend', 'Segoe UI', system-ui, sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 8px 0;
    color: #fff;
}
body.login-page .pd-brand p {
    display: inline-block;
    opacity: 1;
    margin: 0 0 6px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    background: rgba(8, 63, 77, .55);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 10px 18px;
    border-radius: 12px;
}
body.login-page .pd-tag {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    font-size: 13px;
    background: rgba(8, 63, 77, .45);
    color: #fff;
}
/* ===== Panel kanan: form ===== */
body.login-page .pd-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    background: var(--pd-surface);
}
body.login-page .pd-card { width: 100%; max-width: 380px; }
body.login-page .pd-logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
body.login-page .pd-logo-img {
    height: 52px;
    width: auto;
    flex: none;
}
body.login-page .pd-card h2 {
    font-family: 'Lexend', 'Segoe UI', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0;
    color: var(--pd-brand-dark);
}
body.login-page .pd-field { margin-bottom: 14px; }
body.login-page .pd-field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--pd-text); }
body.login-page .pd-input { position: relative; }
body.login-page .pd-input input {
    width: 100%; height: 48px;
    border-radius: var(--pd-radius);
    border: 1.5px solid var(--pd-line);
    padding: 0 44px 0 14px;
    font-size: 15px;
    background: #fbfdff;
    color: var(--pd-text);
    box-sizing: border-box;
}
body.login-page .pd-input input:focus {
    outline: none;
    border-color: var(--pd-brand);
    box-shadow: 0 0 0 3px rgba(14, 127, 142, .18);
    background: #fff;
}
body.login-page .pd-eye-btn {
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    border: none; background: none;
    font-size: 18px; cursor: pointer;
    width: 36px; height: 36px; border-radius: 8px;
    color: var(--pd-muted);
}
body.login-page .pd-eye-btn:hover { background: #eef5f6; }
body.login-page .pd-captcha-row { display: flex; gap: 10px; align-items: stretch; }
body.login-page .pd-captcha-row .pd-captcha-img { flex: 1 1 0; min-width: 150px; min-height: 50px; cursor: pointer; }
body.login-page .pd-captcha-row .pd-captcha-img img {
    width: 100%; height: 48px; border-radius: var(--pd-radius); display: block;
    background: #0B2B33; cursor: pointer;
}
body.login-page .pd-captcha-row .pd-input { flex: 1; }
body.login-page .pd-btn {
    width: 100%; height: 50px;
    border: none; border-radius: var(--pd-radius);
    background: var(--pd-brand); color: #fff;
    font-weight: 800; letter-spacing: 2px; font-size: 15px;
    cursor: pointer; margin-top: 6px;
}
body.login-page .pd-btn:hover { background: #0b6b7a; }
body.login-page .pd-err {
    background: #fdecec; color: #a94442;
    border: 1px solid #f5c6c6; border-radius: var(--pd-radius);
    padding: 10px; text-align: center; font-size: 13px; margin-bottom: 14px;
}
body.login-page .pd-locked {
    background: #fff; border-radius: 14px;
    padding: 32px 28px; text-align: center;
    box-shadow: 0 12px 40px rgba(8, 63, 77, .12);
}
body.login-page .pd-locked img { width: 220px; max-width: 80%; }
body.login-page .pd-locked p { color: #a94442; margin-top: 12px; }
body.login-page .pd-foot { margin-top: 18px; text-align: center; color: var(--pd-muted); font-size: 12px; line-height: 1.6; }
body.login-page .pd-foot a { color: var(--pd-brand); text-decoration: none; }
body.login-page .pd-back {
    display: inline-block;
    margin-top: 8px;
    background: #1a1a2e;
    color: #fff !important;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
body.login-page .pd-back:hover { background: #2a2a44; color: #fff !important; }
body.login-page .help-block { color: #a94442; font-size: 12px; }

/* Validasi Yii ikut gaya */
body.login-page .pd-field.has-error input { border-color: #a94442; }

@media (max-width: 900px) {
    body.login-page .pd-wrap { flex-direction: column; }
    body.login-page .pd-brand { min-height: 520px; padding: 32px 20px; }
    body.login-page .pd-brand h1 { font-size: 22px; }
    body.login-page .pd-panel { padding: 28px 18px 40px; }
}