/* BILINGKU_ACS_LOGIN_LOGO_PALETTE_V1 */

/*
 * Palet diambil dari karakter warna logo:
 * navy, royal blue, electric blue, dan cyan.
 */

:root {
    --acs-logo-navy-950: #03122f;
    --acs-logo-navy-900: #061a48;
    --acs-logo-navy-800: #08265c;
    --acs-logo-navy-700: #0a3472;

    --acs-logo-blue-700: #074bc4;
    --acs-logo-blue-600: #0864eb;
    --acs-logo-blue-500: #0787f5;

    --acs-logo-cyan-500: #08b9ed;
    --acs-logo-cyan-400: #19d0ec;
    --acs-logo-cyan-300: #62e4f3;

    --acs-logo-white: #f7fbff;
    --acs-logo-muted: #9bb2d1;
}

/* Fondasi halaman. */
html,
body {
    background:
        linear-gradient(
            135deg,
            var(--acs-logo-navy-950),
            #041838 52%,
            #062351
        ) !important;
}

.acs-auth-container {
    background:
        linear-gradient(
            90deg,
            var(--acs-logo-navy-900) 0%,
            #072253 55%,
            var(--acs-logo-navy-950) 55%,
            #04132f 100%
        ) !important;
}

/* Panel kiri — mengikuti biru logo. */
.acs-auth-showcase {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 14%,
            rgba(8, 135, 245, .22),
            transparent 34%
        ),
        radial-gradient(
            circle at 18% 92%,
            rgba(8, 185, 237, .16),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #061a48 0%,
            #082a66 56%,
            #07528d 100%
        ) !important;
    border-right:
        1px solid rgba(25, 208, 236, .18) !important;
}

.acs-auth-showcase::before {
    background:
        radial-gradient(
            circle,
            rgba(8, 135, 245, .20),
            transparent 68%
        ) !important;
}

.acs-auth-showcase::after {
    border-color:
        rgba(25, 208, 236, .16) !important;
    background:
        linear-gradient(
            145deg,
            rgba(8, 100, 235, .13),
            rgba(8, 185, 237, .08)
        ) !important;
}

/*
 * Latar tipis di belakang logo membuat tulisan navy
 * dalam PNG tetap terbaca pada panel gelap.
 */
.acs-auth-brand.acs-official-login-desktop {
    width: fit-content;
    padding: 10px 16px !important;
    position: relative;
    isolation: isolate;
    border:
        1px solid rgba(8, 135, 245, .30) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(
            145deg,
            rgba(247, 251, 255, .97),
            rgba(218, 239, 255, .91)
        ) !important;
    box-shadow:
        0 13px 35px rgba(0, 20, 65, .22),
        inset 0 1px 0 rgba(255, 255, 255, .76) !important;
}

.acs-official-logo-login-desktop {
    filter:
        drop-shadow(
            0 5px 10px rgba(6, 74, 196, .13)
        ) !important;
}

/* Label, judul, dan deskripsi panel kiri. */
.acs-auth-showcase [class*="eyebrow"],
.acs-auth-showcase [class*="badge"],
.acs-auth-showcase [class*="label"] {
    color:
        var(--acs-logo-cyan-300) !important;
    border-color:
        rgba(25, 208, 236, .28) !important;
    background:
        rgba(5, 42, 92, .74) !important;
}

.acs-auth-showcase h1,
.acs-auth-showcase h2 {
    color:
        var(--acs-logo-white) !important;
}

.acs-auth-showcase h1 span,
.acs-auth-showcase h2 span,
.acs-auth-showcase .accent {
    color:
        var(--acs-logo-cyan-300) !important;
    background:
        linear-gradient(
            90deg,
            #76ecf5,
            #20ccec,
            #0b8bf5
        );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.acs-auth-showcase p {
    color: #b7c9e3 !important;
}

/* Tiga kartu manfaat. */
.acs-auth-showcase [class*="feature"] {
    border-color:
        rgba(8, 135, 245, .25) !important;
    background:
        linear-gradient(
            155deg,
            rgba(3, 18, 47, .68),
            rgba(5, 43, 92, .62)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.acs-auth-showcase [class*="feature"]:hover {
    border-color:
        rgba(25, 208, 236, .45) !important;
    background:
        linear-gradient(
            155deg,
            rgba(5, 31, 72, .82),
            rgba(6, 60, 117, .72)
        ) !important;
}

.acs-auth-showcase [class*="feature"] svg,
.acs-auth-showcase [class*="feature"] i {
    color:
        var(--acs-logo-cyan-400) !important;
    stroke:
        var(--acs-logo-cyan-400) !important;
}

.acs-auth-showcase [class*="feature"] strong {
    color:
        var(--acs-logo-white) !important;
}

.acs-auth-showcase [class*="feature"] small,
.acs-auth-showcase [class*="feature"] p {
    color: #9eb5d2 !important;
}

/* Area kanan. */
.acs-auth-login-area {
    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(8, 100, 235, .13),
            transparent 31%
        ),
        linear-gradient(
            165deg,
            #03122f,
            #061a40 58%,
            #082756
        ) !important;
}

/* Kartu login. */
.acs-auth-card {
    border:
        1px solid rgba(8, 135, 245, .28) !important;
    background:
        linear-gradient(
            155deg,
            rgba(8, 38, 82, .97),
            rgba(4, 24, 57, .98)
        ) !important;
    box-shadow:
        0 28px 80px rgba(0, 10, 35, .42),
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.acs-auth-card::before {
    background:
        linear-gradient(
            90deg,
            var(--acs-logo-blue-600),
            var(--acs-logo-cyan-500)
        ) !important;
}

/* Teks kartu login. */
.acs-auth-card [class*="eyebrow"],
.acs-auth-card [class*="kicker"],
.acs-auth-card [class*="label"] {
    color:
        var(--acs-logo-cyan-300) !important;
}

.acs-auth-card h1,
.acs-auth-card h2,
.acs-auth-card h3,
.acs-auth-card strong,
.acs-auth-card label {
    color:
        var(--acs-logo-white) !important;
}

.acs-auth-card p,
.acs-auth-card small {
    color:
        var(--acs-logo-muted) !important;
}

/* Input email dan kata sandi. */
.acs-auth-card
input:not([type="checkbox"]):not([type="radio"]),
.acs-auth-card select,
.acs-auth-card textarea {
    color:
        var(--acs-logo-white) !important;
    border-color:
        rgba(64, 132, 210, .48) !important;
    background:
        linear-gradient(
            180deg,
            rgba(15, 51, 101, .96),
            rgba(10, 39, 82, .96)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.acs-auth-card
input::placeholder,
.acs-auth-card
textarea::placeholder {
    color: #829abb !important;
}

.acs-auth-card
input:focus,
.acs-auth-card
select:focus,
.acs-auth-card
textarea:focus {
    border-color:
        var(--acs-logo-cyan-500) !important;
    background:
        #0b2d60 !important;
    box-shadow:
        0 0 0 3px rgba(8, 185, 237, .15),
        0 9px 22px rgba(2, 42, 100, .18) !important;
    outline: none !important;
}

/* Ikon di dalam input. */
.acs-auth-card input + svg,
.acs-auth-card [class*="input"] svg,
.acs-auth-card [class*="field"] svg {
    color: #75a5d5 !important;
    stroke: #75a5d5 !important;
}

/* Checkbox. */
.acs-auth-card input[type="checkbox"] {
    accent-color:
        var(--acs-logo-blue-600) !important;
    border-color:
        rgba(82, 142, 210, .55) !important;
}

/* Tautan. */
.acs-auth-card a {
    color:
        var(--acs-logo-cyan-300) !important;
}

.acs-auth-card a:hover {
    color: #a0f2fa !important;
}

/* Tombol masuk sesuai gradasi logo. */
.acs-auth-card button[type="submit"],
.acs-auth-card
input[type="submit"],
#acsLoginSubmit {
    color: #ffffff !important;
    border: 0 !important;
    background:
        linear-gradient(
            110deg,
            var(--acs-logo-blue-700) 0%,
            var(--acs-logo-blue-600) 38%,
            var(--acs-logo-blue-500) 67%,
            var(--acs-logo-cyan-500) 100%
        ) !important;
    box-shadow:
        0 13px 30px rgba(8, 100, 235, .25) !important;
}

.acs-auth-card button[type="submit"]:hover,
.acs-auth-card
input[type="submit"]:hover,
#acsLoginSubmit:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow:
        0 16px 35px rgba(8, 135, 245, .31) !important;
}

/* Kotak pendaftaran di bawah formulir. */
.acs-auth-card [class*="register"],
.acs-auth-card [class*="signup"],
.acs-auth-card [class*="service-card"] {
    border-color:
        rgba(8, 135, 245, .24) !important;
    background:
        linear-gradient(
            145deg,
            rgba(8, 43, 91, .72),
            rgba(5, 31, 71, .76)
        ) !important;
}

/* Garis pemisah. */
.acs-auth-card hr,
.acs-auth-card [class*="divider"]::before,
.acs-auth-card [class*="divider"]::after {
    border-color:
        rgba(82, 142, 210, .20) !important;
    background:
        rgba(82, 142, 210, .20) !important;
}

/* Logo mobile — sama dengan logo desktop. */
.acs-auth-mobile-brand.acs-official-login-mobile {
    padding: 9px 14px !important;
    border:
        1px solid rgba(8, 135, 245, .27) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(
            145deg,
            rgba(247, 251, 255, .97),
            rgba(218, 239, 255, .91)
        ) !important;
    box-shadow:
        0 10px 28px rgba(0, 20, 65, .18) !important;
}

.acs-official-logo-login-mobile {
    filter:
        drop-shadow(
            0 4px 8px rgba(6, 74, 196, .12)
        ) !important;
}

/* Tablet dan HP. */
@media (max-width: 980px) {
    .acs-auth-container {
        background:
            linear-gradient(
                155deg,
                #03122f,
                #06204b 58%,
                #073b74
            ) !important;
    }

    .acs-auth-login-area {
        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(8, 135, 245, .16),
                transparent 32%
            ),
            linear-gradient(
                155deg,
                #03122f,
                #061d47
            ) !important;
    }
}

@media (max-width: 620px) {
    .acs-auth-card {
        border-color:
            rgba(8, 135, 245, .24) !important;
        box-shadow:
            0 18px 48px rgba(0, 10, 35, .32) !important;
    }
}