:root {
            color-scheme: light;
            --sapa-navy: #082246;
            --sapa-deep: #061934;
            --sapa-blue: #0664cf;
            --sapa-cyan: #33c9f9;
            --sapa-gold: #d6a64b;
            --sapa-text: #182b43;
            --sapa-muted: #78869b;
            --sapa-border: #dae3ed;
            --sapa-white: #fff;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { min-height: 100%; }
        body {
            min-height: 100vh;
            min-height: 100svh;
            margin: 0;
            padding: 30px;
            display: grid;
            place-items: center;
            background:
                radial-gradient(circle at 8% 12%, rgba(61, 167, 239, .19), transparent 30%),
                radial-gradient(circle at 94% 95%, rgba(227, 185, 96, .13), transparent 27%),
                #eef3f9;
            color: var(--sapa-text);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                         "Segoe UI", sans-serif;
            -webkit-font-smoothing: antialiased;
        }
        button, input, select { font: inherit; }
        button { cursor: pointer; }
        a { color: inherit; }

        .login-shell {
            width: min(1180px, 100%);
            min-height: 690px;
            display: grid;
            grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
            overflow: hidden;
            border: 1px solid rgba(219, 229, 240, .9);
            border-radius: 28px;
            background: #fff;
            box-shadow: 0 35px 95px rgba(13, 42, 77, .16),
                        0 5px 18px rgba(13, 42, 77, .04);
        }

        /* ============================================================
           PANEL KIRI — IDENTITAS DAN ANIMASI PENYATUAN LOGO
           ============================================================ */
        .brand-panel {
            position: relative;
            z-index: 0;
            isolation: isolate;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 24px;
            overflow: hidden;
            padding: 38px clamp(30px, 4vw, 58px) 35px;
            color: #fff;
            background: linear-gradient(149deg, #0d376b 0%, #061d41 55%, #06152e 100%);
        }
        .brand-panel::before {
            position: absolute;
            inset: -20%;
            z-index: -2;
            content: "";
            background:
                radial-gradient(circle at 66% 28%, rgba(1, 150, 255, .31), transparent 26%),
                radial-gradient(circle at 8% 80%, rgba(32, 201, 240, .14), transparent 24%),
                radial-gradient(circle at 92% 90%, rgba(238, 169, 69, .09), transparent 23%);
            pointer-events: none;
        }
        .brand-panel::after {
            position: absolute;
            inset: 0;
            z-index: -1;
            content: "";
            background-image:
                linear-gradient(rgba(89, 165, 222, .065) 1px, transparent 1px),
                linear-gradient(90deg, rgba(89, 165, 222, .065) 1px, transparent 1px);
            background-size: 37px 37px;
            -webkit-mask-image: linear-gradient(130deg, transparent 8%, #000 55%, transparent 100%);
            mask-image: linear-gradient(130deg, transparent 8%, #000 55%, transparent 100%);
            pointer-events: none;
        }
        .brand-header, .brand-center, .brand-footer { position: relative; z-index: 1; }
        .brand-header { display: flex; align-items: center; gap: 12px; }
        .header-symbol {
            width: 40px;
            height: 40px;
            flex: none;
            display: grid;
            grid-template-columns: repeat(2, 8px);
            grid-template-rows: repeat(2, 8px);
            align-content: center;
            justify-content: center;
            gap: 4px;
            border: 1px solid rgba(123, 211, 255, .27);
            border-radius: 12px;
            background: rgba(255, 255, 255, .06);
            box-shadow: inset 0 1px rgba(255, 255, 255, .09);
        }
        .header-symbol i { width: 8px; height: 8px; background: #4dd4ff; border-radius: 2px; }
        .header-symbol i:nth-child(2) { background: #eabf73; }
        .header-symbol i:nth-child(3) { background: #3388e8; }
        .header-symbol i:nth-child(4) { background: #b8e8ff; }
        .brand-header-title { font-size: 13px; font-weight: 800; letter-spacing: .13em; }
        .brand-header-sub { margin-top: 3px; color: #a1bbdc; font-size: 11px; letter-spacing: .04em; }

        .brand-center { margin: 5px 0 0; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 13px;
            color: #97dfff;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
        }
        .eyebrow::before { content: ""; width: 17px; height: 2px; background: #e3b562; }
        .brand-center h1 {
            margin: 0;
            font-size: clamp(26px, 3vw, 36px);
            font-weight: 800;
            line-height: 1.22;
            letter-spacing: -.045em;
        }
        .brand-center h1 span { color: #f2c879; }
        .brand-copy {
            max-width: 415px;
            margin: 14px 0 0;
            color: #b7cbe4;
            font-size: 13px;
            line-height: 1.75;
        }
        .logo-stage {
            position: relative;
            display: grid;
            place-items: center;
            width: 100%;
            min-height: 235px;
            margin-top: 25px;
            padding: 25px 20px;
            overflow: hidden;
            border: 1px solid rgba(170, 219, 251, .27);
            border-radius: 23px;
            background: radial-gradient(ellipse at 50% 50%, #fff 18%, #f5faff 66%, #e5f4ff 100%);
            box-shadow: 0 22px 48px rgba(2, 15, 34, .28), inset 0 1px 0 #fff;
        }
        .logo-stage::before {
            position: absolute;
            inset: 12px;
            content: "";
            border: 1px dashed rgba(22, 106, 190, .19);
            border-radius: 15px;
            pointer-events: none;
        }
        .logo-stage::after {
            position: absolute;
            top: -50%;
            left: -35%;
            width: 25%;
            height: 200%;
            content: "";
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
            transform: translateX(-320%) rotate(24deg);
            pointer-events: none;
        }
        .brand-panel.is-playing .logo-stage::after { animation: logo-glint 1.1s ease 3.23s both; }
        .logo-orbit {
            position: absolute;
            width: 310px;
            height: 185px;
            border: 1px solid rgba(35, 151, 225, .12);
            border-radius: 50%;
            transform: rotate(-14deg);
            pointer-events: none;
        }
        .logo-orbit.orbit-two { width: 390px; height: 220px; transform: rotate(11deg); }
        .logo-assembly {
            position: relative;
            z-index: 2;
            width: min(100%, 420px);
            aspect-ratio: 696 / 366;
            isolation: isolate;
        }
        .logo-tiles {
            position: absolute;
            inset: 0;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-template-rows: repeat(3, minmax(0, 1fr));
            width: 100%;
            height: 100%;
        }
        .logo-tile {
            display: block;
            min-width: 0;
            min-height: 0;
            width: 100%;
            height: 100%;
            object-fit: fill;
            opacity: 0;
            transform: translate3d(var(--dx),var(--dy),0) rotate(var(--rotation)) scale(.78);
            will-change: transform, opacity;
            backface-visibility: hidden;
        }
        .logo-complete {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            opacity: 0;
        }
        /* Memulai animasi langsung dari CSS. Tidak bergantung pada JS onload. */
        .brand-panel.is-playing .logo-tile {
            animation: tile-arrive 2.40s cubic-bezier(.32,.57,.36,1) var(--delay) both,
                       tile-retire .28s ease 3.34s forwards;
        }
        .brand-panel.is-playing .logo-complete {
            animation: complete-reveal .45s ease 3.28s forwards;
        }
        .brand-panel.is-playing .logo-orbit { animation: orbit-breathe 3.5s ease-in-out infinite; }
        .brand-panel.is-playing .logo-orbit.orbit-two { animation: orbit-breathe-alt 4.2s ease-in-out infinite; }
        .stage-corner {
            position: absolute;
            width: 15px;
            height: 15px;
            border-color: #40a6ed;
            opacity: .75;
        }
        .stage-corner.c1 { top: 17px; left: 17px; border-top: 2px solid; border-left: 2px solid; }
        .stage-corner.c2 { top: 17px; right: 17px; border-top: 2px solid; border-right: 2px solid; }
        .stage-corner.c3 { bottom: 17px; left: 17px; border-bottom: 2px solid; border-left: 2px solid; }
        .stage-corner.c4 { bottom: 17px; right: 17px; border-bottom: 2px solid; border-right: 2px solid; }
        .logo-stage-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 10px;
            color: #b8d0ea;
            font-size: 10px;
            letter-spacing: .07em;
        }
        .logo-stage-label span { display: inline-flex; align-items: center; gap: 7px; }
        .status-dot {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #55e2b6;
            box-shadow: 0 0 0 4px rgba(85, 226, 182, .09);
        }
        .replay-button {
            padding: 5px 0 5px 8px;
            border: 0;
            background: transparent;
            color: #8bd5ff;
            font-size: 10px;
            font-weight: 700;
        }
        .replay-button:hover { color: #fff; }
        .replay-button:focus-visible { outline: 2px solid #9fdcff; outline-offset: 4px; border-radius: 3px; }
        .brand-footer {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            padding-top: 22px;
            border-top: 1px solid rgba(170, 202, 244, .16);
            color: #96b4d4;
            font-size: 11px;
        }
        .brand-features { display: flex; flex-wrap: wrap; gap: 12px; }
        .brand-features span { display: inline-flex; align-items: center; gap: 6px; }
        .brand-features svg { width: 13px; height: 13px; stroke: #5bd0ff; }
        .version-mark { color: #edc27a; font-weight: 800; }

        /* ============================================================
           PANEL KANAN — FORM LOGIN
           ============================================================ */
        .form-panel {
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 40px clamp(28px, 4.6vw, 64px);
            background: #fff;
        }
        .form-inner { width: 100%; max-width: 405px; margin: auto; }
        .form-topline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 22px;
        }
        .portal-label {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .11em;
            text-transform: uppercase;
            color: #4073ad;
        }
        .version-pill {
            display: inline-block;
            padding: 6px 10px;
            border: 1px solid #dce9f6;
            border-radius: 99px;
            background: #f1f7fe;
            color: #37649a;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .05em;
        }
        .form-title { margin: 0; color: #14283f; font-size: clamp(26px, 2.7vw, 33px); line-height: 1.22; font-weight: 800; letter-spacing: -.04em; }
        .form-subtitle { margin: 9px 0 26px; color: #7a899b; font-size: 13px; line-height: 1.65; }
        .form-label {
            display: block;
            margin: 0 0 8px;
            color: #30455f;
            font-size: 12px;
            font-weight: 750;
        }
        .field { margin-bottom: 17px; }
        .input-wrap { position: relative; }
        .field-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            width: 18px;
            height: 18px;
            transform: translateY(-50%);
            color: #92a4b9;
            pointer-events: none;
        }
        .input-control, .select-control {
            display: block;
            width: 100%;
            min-height: 47px;
            padding: 10px 13px 10px 44px;
            border: 1px solid var(--sapa-border);
            border-radius: 11px;
            outline: none;
            color: #1b314a;
            background: #fff;
            font-size: 13px;
            line-height: 1.4;
            transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .input-control::placeholder { color: #a0aec0; }
        .input-control:hover, .select-control:hover { border-color: #b5c5d7; }
        .input-control:focus, .select-control:focus {
            border-color: #2a82dc;
            box-shadow: 0 0 0 4px rgba(42, 130, 220, .11);
        }
        .input-control.input-error, .select-control.input-error { border-color: #dc6471; }
        .password-input { padding-right: 105px; }
        .password-toggle {
            position: absolute;
            top: 50%;
            right: 8px;
            transform: translateY(-50%);
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 7px 9px;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: #53729a;
            font-size: 11px;
            font-weight: 750;
        }
        .password-toggle:hover, .password-toggle:focus-visible { background: #edf5fd; color: #146dc0; outline: none; }
        .password-toggle svg { width: 16px; height: 16px; }
        .password-toggle svg.is-hidden { display: none !important; }
        .select-control {
            appearance: none;
            -webkit-appearance: none;
            padding: 10px 35px 10px 12px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23677d97' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            background-position: right 12px center;
            background-repeat: no-repeat;
        }
        .period-box {
            margin: 8px 0 19px;
            padding: 16px;
            border: 1px solid #dfe9f3;
            border-radius: 15px;
            background: #f7fafd;
            transition: background .2s ease;
        }
        .period-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .period-title { display: flex; align-items: center; gap: 8px; color: #24496d; font-size: 12px; font-weight: 800; }
        .period-title svg { width: 17px; height: 17px; stroke: #3276bf; }
        .skip-period { display: inline-flex; align-items: center; gap: 7px; color: #6b7e95; font-size: 11px; cursor: pointer; user-select: none; }
        .skip-period input { width: 14px; height: 14px; accent-color: #166fc0; cursor: pointer; }
        .period-help { margin: 8px 0 13px; color: #8293a7; font-size: 11px; line-height: 1.6; }
        .period-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
        .period-grid .form-label { font-size: 11px; }
        .period-grid .select-control { min-height: 43px; font-size: 12px; }
        .period-box.is-collapsed .period-grid { display: none; }
        .period-box.is-collapsed .period-help { margin-bottom: 0; }
        .captcha-box {
            display: flex;
            align-items: center;
            gap: 13px;
            margin-bottom: 20px;
            padding: 12px;
            border: 1px solid #f1e4c9;
            border-radius: 12px;
            background: #fffcf6;
        }
        .captcha-icon {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            flex: none;
            border-radius: 10px;
            background: #fff0d5;
            color: #a5732e;
        }
        .captcha-icon svg { width: 19px; height: 19px; }
        .captcha-caption { flex: 1; min-width: 0; }
        .captcha-caption label { display: block; margin-bottom: 4px; color: #876739; font-size: 10px; font-weight: 750; }
        .captcha-caption strong { display: block; color: #574027; font-size: 15px; font-weight: 850; }
        .captcha-input { flex: 0 0 84px; width: 84px; min-height: 39px; padding: 7px; text-align: center; font-size: 14px; font-weight: 750; border-radius: 9px; }
        .primary-button {
            width: 100%;
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 10px 16px;
            border: 1px solid #1265bf;
            border-radius: 11px;
            color: #fff;
            background: linear-gradient(104deg, #0765cf, #0a4eab);
            box-shadow: 0 9px 22px rgba(10, 100, 200, .2);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .02em;
            transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
        }
        .primary-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 13px 24px rgba(10, 100, 200, .25); filter: brightness(1.04); }
        .primary-button:focus-visible { outline: 3px solid #9fcffb; outline-offset: 3px; }
        .primary-button:disabled { opacity: .78; cursor: progress; }
        .primary-button svg { width: 17px; height: 17px; }
        .loading-spinner { display: none; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .65s linear infinite; }
        .primary-button.is-loading .loading-spinner { display: inline-block; }
        .primary-button.is-loading .button-arrow { display: none; }
        .form-footnote { margin: 20px 0 0; text-align: center; color: #9aa7b6; font-size: 11px; line-height: 1.5; }
        .notice { margin: 0 0 17px; padding: 12px 14px; border-radius: 11px; font-size: 12px; line-height: 1.6; }
        .notice-error { border: 1px solid #f5c6cc; background: #fff4f5; color: #a62d40; }
        .notice-success { border: 1px solid #bbebd3; background: #eefcf5; color: #176942; }
        .notice ul { margin: 4px 0 0; padding-left: 17px; }
        .notice ul li + li { margin-top: 3px; }
        .field-error { margin: 5px 0 0; color: #bc3c53; font-size: 11px; }
        @keyframes tile-arrive {
            0%   { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rotation)) scale(.70); filter: blur(2px); }
            12%  { opacity: .92; filter: blur(0); }
            30%  { opacity: 1; transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rotation)) scale(.78); }
            78%  { opacity: 1; }
            100% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); filter: blur(0); }
        }
        @keyframes tile-retire { from { opacity: 1; } to { opacity: 0; } }
        @keyframes complete-reveal { from { opacity: 0; } to { opacity: 1; } }
        @keyframes orbit-breathe { 0%,100% { opacity:.32; transform:rotate(-14deg) scale(.9); } 50% {opacity: .9; transform:rotate(-14deg) scale(1.06); } }
        @keyframes orbit-breathe-alt { 0%,100% {opacity:.4; transform:rotate(11deg) scale(1);} 50% {opacity:.85; transform:rotate(11deg) scale(1.05);} }
        @keyframes logo-glint { 0% { transform: translateX(-320%) rotate(24deg); } 100% { transform: translateX(1150%) rotate(24deg); } }
        @keyframes spin { to { transform: rotate(360deg); } }

        @media (max-width: 1000px) {
            body { padding: 18px; }
            .login-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
            .brand-panel { padding: 30px; }
            .form-panel { padding: 30px; }
            .brand-center h1 { font-size: 29px; }
        }
        @media (max-width: 760px) {
            body { padding: 13px; align-items: start; }
            .login-shell { grid-template-columns: 1fr; min-height: 0; border-radius: 21px; }
            .brand-panel { padding: 23px 24px 24px; gap: 12px; }
            .brand-header-title { font-size: 11px; }
            .brand-center { display: flex; flex-wrap: wrap; align-items: center; column-gap: 18px; }
            .eyebrow { width: 100%; font-size: 9px; }
            .brand-center h1 { flex: 1 1 210px; font-size: 23px; }
            .brand-copy { display: none; }
            .logo-stage { flex: 1 1 205px; min-height: 150px; margin: 7px 0 0; padding: 8px 14px; border-radius: 17px; }
            .logo-assembly { max-width: 235px; }
            .logo-stage-label { display: flex; font-size: 9px; }
            .brand-footer { display: none; }
            .form-panel { padding: 30px 24px 27px; }
            .form-inner { max-width: 480px; }
        }
        @media (max-width: 420px) {
            body { padding: 8px; }
            .brand-panel { padding: 18px 20px; }
            .brand-center h1 { font-size: 21px; }
            .logo-stage { min-height: 130px; }
            .form-panel { padding: 26px 19px; }
            .form-title { font-size: 26px; }
            .period-grid { grid-template-columns: 1fr; }
            .captcha-input { flex-basis: 72px; width: 72px; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
            .logo-tiles { display: none !important; }
            .logo-complete { opacity: 1 !important; }
        }
    
        .brand-center .eyebrow { color: #8fdfff; }
        .brand-center h1.sapa-welcome { font-size: clamp(26px, 2.85vw, 37px); letter-spacing: -.035em; line-height: 1.20; }
        .brand-center h1.sapa-welcome span { color: #f3c46e; }
        .brand-copy.sapa-slogan { margin-top: 15px; color: #ecf7ff; font-size: clamp(14px,1.25vw,17px); font-weight: 800; letter-spacing: .05em; line-height: 1.55; }
        .brand-values { max-width: 420px; margin: 10px 0 0; font-size: 11px; font-weight: 650; letter-spacing: .075em; line-height: 1.7; color: #b0d6fa; }
        .logo-tile:nth-child(4n+1) { filter: drop-shadow(0 0 9px rgba(22,132,242,.15)); }
        @media (max-width: 760px) {
            .brand-center h1.sapa-welcome { font-size: 23px; }
            .brand-copy.sapa-slogan { display: block; flex: 1 1 100%; margin: 2px 0 0; font-size: 11px; }
            .brand-values { display: block; margin: 0; font-size: 9px; }
        }
        @media (max-width: 420px) {
            .brand-center h1.sapa-welcome { font-size: 21px; }
        }