/* =========================================================
   GLOBAL RESET & TYPOGRAPHY
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    overflow: hidden;
}

body {
    overflow: hidden;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =========================================================
   SASADU LOGIN
========================================================= */

:root {
    --sasadu-navy: #092b55;
    --sasadu-navy-dark: #061f40;
    --sasadu-blue: #1264d6;
    --sasadu-blue-light: #2f7de1;
    --sasadu-yellow: #f7c928;

    --sasadu-text: #18324f;
    --sasadu-muted: #8190a5;

    --sasadu-border: #d9e1eb;
    --sasadu-bg: #f4f7fb;
}


/* =========================================================
   PAGE
========================================================= */

.sasadu-login-page {

    width: 100%;
    height: 100vh;
    min-height: 0;

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

    padding: 24px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(40, 106, 190, .18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #071f3d 0%,
            #0c315d 50%,
            #eaf1f8 50%
        );
}


/* =========================================================
   MAIN CARD
========================================================= */

.sasadu-login-card {

    width: 100%;
    max-width: 1040px;

    height: min(610px, calc(100vh - 48px));

    display: grid;
    grid-template-columns: 45% 55%;

    overflow: hidden;

    border-radius: 24px;

    background: #ffffff;

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


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

.sasadu-login-brand {

    position: relative;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(4, 32, 65, .98),
            rgba(15, 66, 122, .96)
        );
}


.sasadu-login-brand::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(63, 132, 218, .30),
            transparent 35%
        );

    pointer-events: none;
}


.sasadu-login-brand::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -180px;
    bottom: -200px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 0 0 60px rgba(255,255,255,.025),
        0 0 0 120px rgba(255,255,255,.02);

}


/* =========================================================
   BRAND CONTENT
========================================================= */

.sasadu-brand-content {

    position: relative;
    z-index: 5;

    height: 100%;

    padding: 45px 42px;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   GOVERNMENT HEADER
========================================================= */

.sasadu-brand-header {

    display: flex;
    align-items: center;

    gap: 15px;
}


.sasadu-brand-logo {
    width: 58px;
    height: 58px;

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

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.25);

    overflow: hidden;
}

.sasadu-brand-logo img {
    width: 42px;
    height: 42px;

    object-fit: contain;
    display: block;
}


.sasadu-brand-government {

    display: flex;
    flex-direction: column;

    line-height: 1.25;

    font-size: 13px;

    letter-spacing: .3px;
}


.sasadu-brand-government span {

    font-weight: 400;
}


.sasadu-brand-government strong {

    font-weight: 700;
}


/* =========================================================
   BRAND TITLE
========================================================= */

.sasadu-brand-title {

    margin-top: 55px;
}


.sasadu-brand-title h1 {
    font-family: 'Playfair Display', Georgia, serif;

    margin: 0;

    font-size: 54px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: 2px;
}


.sasadu-title-line {

    display: flex;

    margin-top: 18px;
    margin-bottom: 22px;

    height: 6px;
}


.sasadu-title-line span:first-child {

    width: 70px;

    background: var(--sasadu-yellow);

    border-radius: 5px 0 0 5px;
}


.sasadu-title-line span:last-child {

    width: 65px;

    background: #3c8ce7;

    border-radius: 0 5px 5px 0;
}


.sasadu-brand-title p {

    margin: 0;

    color: rgba(255,255,255,.93);

    font-size: 18px;

    line-height: 1.45;

    font-weight: 400;
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.sasadu-dots {

    position: absolute;

    display: grid;

    grid-template-columns: repeat(6, 8px);

    gap: 13px;

    opacity: .65;
}


.sasadu-dots-top {

    top: 45px;
    right: 45px;
}


.sasadu-dots span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: rgba(93, 166, 239, .55);
}


/* =========================================================
   FEATURES
========================================================= */

.sasadu-features {

    margin-top: auto;

    padding: 18px 20px;

    border-radius: 18px;

    background: rgba(255,255,255,.065);

    border: 1px solid rgba(255,255,255,.14);

    backdrop-filter: blur(10px);
}


.sasadu-feature {

    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 14px;
}


.sasadu-feature:last-child {

    margin-bottom: 0;
}


.sasadu-feature-icon {

    flex: 0 0 40px;

    width: 40px;
    height: 40px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #1264d6,
            #3284e4
        );

    color: #ffffff;

    font-size: 17px;
}


.sasadu-feature strong {

    display: block;

    margin-bottom: 3px;

    font-size: 14px;
}


.sasadu-feature span {

    display: block;

    color: rgba(255,255,255,.70);

    font-size: 11px;
}


/* =========================================================
   BRAND FOOTER
========================================================= */

.sasadu-brand-footer {

    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 20px;
}


.sasadu-footer-line {

    width: 5px;
    height: 43px;

    border-radius: 5px;

    background: var(--sasadu-yellow);
}


.sasadu-brand-footer span,
.sasadu-brand-footer strong {

    display: block;

    font-size: 11px;

    letter-spacing: .5px;
}


.sasadu-brand-footer strong {

    margin-top: 3px;

    font-size: 13px;
}


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

.sasadu-login-form-panel {

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

    background: #ffffff;
}


.sasadu-form-container {

    width: 100%;
    max-width: 430px;

    padding: 45px 35px;
}


/* =========================================================
   FORM HEADER
========================================================= */

.sasadu-form-header {

    margin-bottom: 28px;

    text-align: center;
}


.sasadu-form-header h2 {
    font-family: 'Playfair Display', Georgia, serif;

    margin: 0 0 10px;

    color: var(--sasadu-navy);

    font-size: 29px;
    font-weight: 800;

    letter-spacing: -.5px;
}


.sasadu-form-header p {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;

    margin: 0;

    color: var(--sasadu-muted);

    font-size: 14px;
}


/* =========================================================
   ALERT
========================================================= */

.sasadu-alert {

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px 15px;

    margin-bottom: 14px;

    border-radius: 10px;

    font-size: 13px;
}


.sasadu-alert-danger {

    color: #b42318;

    background: #fff1f0;

    border: 1px solid #ffd5d2;
}


.sasadu-alert-success {

    color: #087443;

    background: #ecfdf3;

    border: 1px solid #b7ebcd;
}


/* =========================================================
   FORM GROUP
========================================================= */

.sasadu-form-group {

    margin-bottom: 22px;
}


.sasadu-form-group > label {

    display: block;

    margin-bottom: 9px;

    color: #233b56;

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   INPUT
========================================================= */

.sasadu-input-wrapper {

    position: relative;
}


.sasadu-input-wrapper > i {

    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: #8291a5;

    font-size: 18px;

    pointer-events: none;
}


.sasadu-input-wrapper input {

    width: 100%;

    height: 49px;

    padding: 0 48px;

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

    border-radius: 10px;

    outline: none;

    color: #233b56;

    background: #f8fafc;

    font-size: 14px;

    transition: all .2s ease;
}


.sasadu-input-wrapper input::placeholder {

    color: #a6b1bf;
}


.sasadu-input-wrapper input:focus {

    background: #ffffff;

    border-color: var(--sasadu-blue);

    box-shadow:
        0 0 0 3px rgba(18,100,214,.10);
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.sasadu-password-toggle {

    position: absolute;

    right: 13px;
    top: 50%;

    transform: translateY(-50%);

    width: 32px;
    height: 32px;

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

    border: none;

    background: transparent;

    color: #8291a5;

    cursor: pointer;

    font-size: 17px;
}


.sasadu-password-toggle:hover {

    color: var(--sasadu-blue);
}


/* =========================================================
   OPTIONS
========================================================= */

.sasadu-login-options {

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

    margin: 5px 0 25px;

    font-size: 13px;
}


.sasadu-remember {

    display: flex;
    align-items: center;

    gap: 8px;

    color: #718096;

    cursor: pointer;
}


.sasadu-remember input {

    width: 16px;
    height: 16px;

    accent-color: var(--sasadu-blue);

    cursor: pointer;
}


.sasadu-forgot-password {

    color: var(--sasadu-blue);

    font-weight: 600;

    cursor: default;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.sasadu-login-button {

    width: 100%;

    height: 49px;

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

    gap: 10px;

    border: none;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #115bc5,
            #126fe2
        );

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(18,100,214,.22);

    transition: all .2s ease;
}


.sasadu-login-button:hover {

    transform: translateY(-1px);

    box-shadow:
        0 12px 24px rgba(18,100,214,.30);
}


.sasadu-login-button:active {

    transform: translateY(0);
}


/* =========================================================
   ADMIN NOTICE
========================================================= */

.sasadu-admin-notice {

    display: flex;

    gap: 12px;

    margin-top: 20px;

    padding: 15px;

    border-radius: 11px;

    background: #eef6ff;

    border: 1px solid #d4e8ff;

    color: #183b68;
}


.sasadu-notice-icon {

    flex: 0 0 25px;

    color: #1264d6;

    font-size: 18px;
}


.sasadu-admin-notice strong {

    display: block;

    margin-bottom: 4px;

    font-size: 11px;
}


.sasadu-admin-notice p {

    margin: 0;

    color: #60758e;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.sasadu-login-copyright {

    margin-top: 28px;

    text-align: center;

    color: #a0acba;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .sasadu-login-page {

        padding: 20px;

        background:
            linear-gradient(
                135deg,
                #071f3d,
                #0c315d
            );
    }


    .sasadu-login-card {

        grid-template-columns: 1fr;

        max-width: 600px;

        min-height: auto;
    }


    .sasadu-login-brand {

        min-height: 420px;
    }


    .sasadu-brand-content {

        padding: 45px;
    }


    .sasadu-brand-title {

        margin-top: 40px;
    }


    .sasadu-brand-title h1 {
    font-family: 'Playfair Display', Georgia, serif;

        font-size: 48px;
    }


    .sasadu-features {

        margin-top: 45px;
    }

}


@media (max-width: 600px) {

    .sasadu-login-page {

        padding: 0;
    }


    .sasadu-login-card {

        min-height: 100vh;

        border-radius: 0;
    }


    .sasadu-login-brand {

        min-height: 380px;
    }


    .sasadu-brand-content {

        padding: 35px 28px;
    }


    .sasadu-brand-title {

        margin-top: 35px;
    }


    .sasadu-brand-title h1 {
    font-family: 'Playfair Display', Georgia, serif;

        font-size: 42px;
    }


    .sasadu-brand-title p {

        font-size: 18px;
    }


    .sasadu-features {

        display: none;
    }


    .sasadu-brand-footer {

        margin-top: auto;
    }


    .sasadu-form-container {

        padding: 45px 28px;
    }


    .sasadu-form-header h2 {
    font-family: 'Playfair Display', Georgia, serif;

        font-size: 27px;
    }

}

/* =========================================================
   DESKTOP VIEWPORT FIT
========================================================= */

@media (min-width: 1001px) {
    .sasadu-login-card {
        overflow: hidden;
    }

    .sasadu-login-brand,
    .sasadu-login-form-panel {
        min-height: 0;
        height: 100%;
    }

    .sasadu-brand-content {
        min-height: 0;
        overflow: hidden;
    }

    .sasadu-form-container {
        max-height: 100%;
        overflow: hidden;
    }
}


@media (max-width: 600px) {
    html {
        overflow-y: auto;
    }

    body {
        overflow-y: auto;
    }

    .sasadu-login-page {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .sasadu-login-card {
        height: auto;
        min-height: 100vh;
    }
}