/* =========================================================
   AUTH (LOGIN + REGISTER) — DARK FINTECH
========================================================= */

.pg-auth,
.pg-auth * {
    box-sizing: border-box;
}

.pg-auth {
    --auth-bg: var(--c-bg);
    --auth-card: var(--c-card);
    --auth-card-2: var(--c-card-2);
    --auth-border: rgba(var(--rgb-fg), .08);
    --auth-green: #25df91;
    --auth-green-light: #72eab4;
    --auth-white: var(--c-strong);
    --auth-text: var(--c-text);
    --auth-muted: var(--c-muted);
    --auth-muted-2: var(--c-muted-2);
    --auth-danger: var(--c-danger);

    min-height: 100vh;

    min-height: 100dvh;

    display: grid;
    grid-template-columns: 1.05fr .95fr;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(37,223,145,.09),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(37,223,145,.055),
            transparent 30%
        ),
        var(--auth-bg);

    color: var(--auth-text);
}


/* =========================================================
   LEFT PANEL
========================================================= */

.pg-auth-left {
    position: relative;

    min-height: 100vh;

    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding: 42px 8%;

    overflow: hidden;

    border-right: 1px solid var(--auth-border);
}

.pg-auth-left::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -160px;
    bottom: -180px;

    border-radius: 50%;

    background: rgba(37,223,145,.07);

    filter: blur(80px);

    pointer-events: none;
}


/* LOGO */

.pg-auth-brand {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 11px;

    width: fit-content;

    color: var(--auth-white) !important;

    font-size: 1rem;
    font-weight: 850;

    text-decoration: none;
}

.pg-auth-logo {
    position: relative;

    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
}

.pg-auth-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}



/* LEFT CONTENT */

.pg-auth-content {
    position: relative;

    max-width: 600px;

    margin: auto 0;
}

.pg-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 22px;

    padding: 7px 11px;

    border-radius: 999px;

    color: var(--c-green-text);

    background: rgba(37,223,145,.06);

    border: 1px solid rgba(37,223,145,.14);

    font-size: .7rem;
    font-weight: 750;
}

.pg-auth-badge-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--auth-green);

    box-shadow: 0 0 10px rgba(37,223,145,.8);
}

.pg-auth-content h1 {
    margin: 0;

    color: var(--auth-white) !important;

    font-size: clamp(
        2.7rem,
        5vw,
        5rem
    );

    line-height: 1.02;

    letter-spacing: -.055em;

    font-weight: 900;
}

.pg-auth-highlight {
    color: var(--c-green-text) !important;
}

.pg-auth-content > p {
    max-width: 510px;

    margin: 22px 0 0;

    color: var(--auth-muted) !important;

    font-size: .95rem;

    line-height: 1.75;
}


/* MINI FEATURES */

.pg-auth-features {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 28px;
}

.pg-auth-feature {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 10px;

    border-radius: 8px;

    color: var(--c-text-2);

    background: rgba(var(--rgb-fg), .025);

    border: 1px solid var(--auth-border);

    font-size: .68rem;
}

.pg-auth-feature-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--auth-green);
}


/* COPYRIGHT */

.pg-auth-copy {
    position: relative;

    color: var(--auth-muted-2);

    font-size: .68rem;
}


/* =========================================================
   RIGHT PANEL
========================================================= */

.pg-auth-right {
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 35px 7%;
}

.pg-auth-form-wrap {
    width: 100%;
    max-width: 430px;
}

.pg-auth-form {
    padding: 32px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(var(--rgb-fg), .045),
            rgba(var(--rgb-fg), .018)
        );

    border: 1px solid var(--auth-border);

    box-shadow:
        0 30px 80px rgba(0,0,0,.25);
}


/* FORM HEADER */

.pg-auth-form-header {
    margin-bottom: 27px;
}

.pg-auth-form-header h2 {
    margin: 0 0 7px;

    color: var(--auth-white) !important;

    font-size: 1.65rem;

    letter-spacing: -.035em;

    font-weight: 850;
}

.pg-auth-form-header p {
    margin: 0;

    color: var(--auth-muted) !important;

    font-size: .82rem;
}


/* ALERT */

.pg-auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin-bottom: 19px;

    padding: 11px 12px;

    border-radius: 10px;

    color: var(--c-danger) !important;

    background: rgba(255,80,105,.07);

    border: 1px solid rgba(255,80,105,.16);

    font-size: .76rem;

    line-height: 1.5;
}

.pg-auth-alert-icon {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--c-danger);

    border: 1px solid rgba(255,120,140,.4);

    font-size: .65rem;
    font-weight: 900;
}


/* FORM GROUP */

.pg-auth-group {
    margin-bottom: 17px;
}

.pg-auth-label {
    display: block;

    margin-bottom: 7px;

    color: var(--c-text-2) !important;

    font-size: .74rem;
    font-weight: 700;
}


/* INPUT */

.pg-auth-input {
    width: 100%;

    min-height: 48px;

    padding: 0 14px;

    outline: none;

    border-radius: 10px;

    color: var(--auth-white) !important;

    background: var(--c-card) !important;

    border: 1px solid rgba(var(--rgb-fg), .09);

    font-family: inherit;
    font-size: .85rem;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.pg-auth-input::placeholder {
    color: var(--c-muted-2) !important;
}

.pg-auth-input:hover {
    border-color: rgba(var(--rgb-fg), .14);
}

.pg-auth-input:focus {
    background: var(--c-card) !important;

    border-color: rgba(37,223,145,.45);

    box-shadow:
        0 0 0 3px rgba(37,223,145,.07);
}


/* PASSWORD */

.pg-auth-password {
    position: relative;
}

.pg-auth-password .pg-auth-input {
    padding-right: 45px;
}

.pg-auth-password-toggle {
    position: absolute;

    right: 12px;
    top: 50%;

    transform: translateY(-50%);

    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--auth-muted-2);

    background: transparent;

    border: 0;

    cursor: pointer;
}

.pg-auth-password-toggle:hover {
    color: var(--c-green-text);
}

.pg-auth-password-toggle svg {
    width: 17px;
    height: 17px;

    stroke: currentColor;

    fill: none;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* SUBMIT */

.pg-auth-submit {
    width: 100%;

    min-height: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 7px;

    border: 0;
    border-radius: 10px;

    color: #04100b !important;

    background: var(--auth-green);

    font-family: inherit;

    font-size: .85rem;
    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 12px 30px rgba(37,223,145,.12);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.pg-auth-submit:hover {
    transform: translateY(-2px);

    background: #3be99f;

    box-shadow:
        0 16px 35px rgba(37,223,145,.2);
}

.pg-auth-submit:active {
    transform: translateY(0);
}


/* FOOTER LINK */

.pg-auth-switch {
    margin: 20px 0 0;

    text-align: center;

    color: var(--auth-muted) !important;

    font-size: .76rem;
}

.pg-auth-switch a {
    color: var(--c-green-text) !important;

    font-weight: 750;

    text-decoration: none;
}

.pg-auth-switch a:hover {
    color: var(--c-green-text) !important;
}


/* SECURITY NOTE */

.pg-auth-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: 22px;

    color: var(--auth-muted-2);

    font-size: .65rem;
}

.pg-auth-security svg {
    width: 14px;
    height: 14px;

    stroke: var(--c-green-text);

    fill: none;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Brand kecil di atas form — hanya tampil di mobile */
.pg-auth-mobile-brand {
    display: none;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

    .pg-auth {
        display: block;
    }

    /* Mobile: hanya form. Panel promosi di kiri disembunyikan. */
    .pg-auth-left {
        display: none;
    }

    .pg-auth-right {
        min-height: 100vh;
        min-height: 100dvh;

        align-items: flex-start;

        padding: 28px 16px 40px;
    }

    .pg-auth-form-wrap {
        margin: 0 auto;
    }

    .pg-auth-mobile-brand {
        display: inline-flex;

        margin: 0 0 22px 4px;
    }
}


@media (max-width: 480px) {

    .pg-auth-form {
        padding: 23px 18px;
        border-radius: 15px;
    }

    .pg-auth-form-header h2 {
        font-size: 1.5rem;
    }
}


/* =========================================================
   TAMBAHAN: captcha kecil, lupa password, kode 6 digit
========================================================= */

/* Captcha ringkas (register) */
.pg-auth-captcha {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pg-auth-captcha-q {
    display: inline-flex;
    align-items: center;

    height: 36px;
    padding: 0 12px;

    border-radius: 8px;

    color: var(--c-green-text);
    background: var(--c-card);
    border: 1px dashed rgba(37,223,145,.3);

    font-family: "JetBrains Mono", monospace;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.pg-auth-input.pg-auth-captcha-input {
    width: 76px;
    min-height: 36px;
    height: 36px;
    padding: 0 8px;

    text-align: center;
    font-size: .85rem;
}

/* Link "Lupa password?" */
.pg-auth-forgot {
    margin-top: 8px;
    text-align: right;
    font-size: .74rem;
}

.pg-auth-forgot a {
    color: var(--c-green-text) !important;
    text-decoration: none;
    font-weight: 600;
}

.pg-auth-forgot a:hover {
    text-decoration: underline;
}

/* Input kode verifikasi 6 digit */
.pg-auth-input.pg-auth-code {
    text-align: center;
    letter-spacing: .55em;
    padding-left: calc(14px + .55em);

    font-family: "JetBrains Mono", monospace;
    font-size: 1.4rem;
    font-weight: 700;
}

/* Tombol berbentuk link (kirim ulang kode) */
.pg-auth-link-btn {
    display: block;
    width: 100%;

    padding: 8px;

    color: var(--c-green-text);
    background: transparent;
    border: 0;

    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.pg-auth-link-btn:hover:not(:disabled) {
    text-decoration: underline;
}

.pg-auth-link-btn:disabled {
    color: var(--c-muted-2);
    cursor: not-allowed;
}