:root {
            --primary: #0275d8;
            --primary-dark: #025fae;
            --primary-darker: #014d8f;
            --primary-light: #e7f3ff;

            --text-dark: #16263b;
            --text-normal: #34445a;
            --text-light: #97a1b1;

            --border: #d7dee8;
            --background: #f8fbff;
            --white: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            min-height: 100%;
        }

        body {
            min-height: 100vh;

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

            padding: 20px;

            font-family: "Inter", Arial, sans-serif;

            color: var(--text-dark);

            background:
                radial-gradient(
                    circle at center,
                    rgba(2, 117, 216, 0.025),
                    transparent 40%
                ),
                linear-gradient(
                    135deg,
                    #f8fbff 0%,
                    #ffffff 50%,
                    #f5f9fd 100%
                );
        }

        /* Ana kart */

        .login-card {
            width: 500px;
            height: auto;
            max-width: 100%;

            padding: 32px 42px 44px;

            background: rgba(255, 255, 255, 0.98);

            border: 1px solid rgba(22, 38, 59, 0.09);
            border-radius: 20px;

            box-shadow:
                0 18px 55px rgba(38, 64, 94, 0.11),
                0 4px 12px rgba(38, 64, 94, 0.05);
        }

        /* Üst görsel / Logo */

        .illustration {
            width: 100%;
            height: auto;

            margin: 6px auto 26px;

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

        .illustration::after {
            display: none;
        }

        .illustration img,
        .ydyo-giris-logo {
            width: 160px;
            height: 160px;
            max-width: 205px;
            max-height: 205px;
            object-fit: contain;
            display: block;
            filter: drop-shadow(0 8px 20px rgba(2, 117, 216, 0.16));
            transition: transform 0.3s ease;
        }

        .illustration img:hover {
            transform: scale(1.025);
        }

        /* Başlık */

        .university-title {
            margin: 0 auto 14px;

            text-align: center;

            font-size: 26px;
            line-height: 1.08;
            font-weight: 800;
            letter-spacing: -0.8px;

            color: var(--primary);
        }

        .system-title {
            width: 100%;

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

            gap: 18px;

            margin-bottom: 18px;

            color: var(--primary);

            font-size: 15px;
            line-height: 21px;
            font-weight: 500;

            white-space: nowrap;
        }

        .system-title::before,
        .system-title::after {
            content: "";

            flex: 1;

            height: 1px;

            background: rgba(2, 117, 216, 0.36);
        }

        .description {
            margin-bottom: 24px;

            text-align: center;

            color: var(--text-normal);

            font-size: 13px;
            line-height: 20px;
            font-weight: 400;
        }

        /* Form alanları */

        .form-group {
            margin-bottom: 14px;
        }

        .form-label {
            display: block;

            margin-bottom: 7px;

            color: var(--text-dark);

            font-size: 12px;
            line-height: 15px;
            font-weight: 700;
        }

        .input-container {
            position: relative;
        }

        .input-icon {
            position: absolute;
            top: 50%;
            left: 16px;

            transform: translateY(-50%);

            color: var(--primary);

            font-size: 18px;

            pointer-events: none;
        }

        .form-input {
            width: 100%;
            height: 50px;

            padding: 0 48px 0 49px;

            font-family: inherit;

            color: var(--text-dark);

            font-size: 12px;
            font-weight: 400;

            background: var(--white);

            border: 1.5px solid var(--border);
            border-radius: 9px;

            outline: none;

            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease;
        }

        .form-input::placeholder {
            color: #a4acb9;
        }

        .form-input:hover {
            border-color: #bac6d4;
        }

        .form-input:focus {
            border-color: var(--primary);

            box-shadow:
                0 0 0 3px rgba(2, 117, 216, 0.1);
        }

        .password-button {
            position: absolute;
            top: 50%;
            right: 10px;

            width: 36px;
            height: 36px;

            transform: translateY(-50%);

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

            color: #415a76;

            font-size: 15px;

            background: transparent;

            border: none;
            border-radius: 50%;

            cursor: pointer;

            transition:
                color 0.2s ease,
                background-color 0.2s ease;
        }

        .password-button:hover {
            color: var(--primary);
            background: var(--primary-light);
        }

        /* Beni hatırla ve şifremi unuttum */

        .form-options {
            min-height: 26px;

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

            gap: 15px;

            margin-bottom: 24px;
        }

        .remember-label {
            display: inline-flex;
            align-items: center;

            gap: 9px;

            color: var(--text-dark);

            font-size: 11px;
            font-weight: 600;

            cursor: pointer;
            user-select: none;
        }

        .remember-label input {
            position: absolute;

            opacity: 0;
            pointer-events: none;
        }

        .checkbox {
            position: relative;

            width: 20px;
            height: 20px;

            flex-shrink: 0;

            background: #ffffff;

            border: 1.5px solid #aeb8c5;
            border-radius: 4px;

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

        .remember-label input:checked + .checkbox {
            background: var(--primary);
            border-color: var(--primary);
        }

        .remember-label input:checked + .checkbox::after {
            content: "";

            position: absolute;

            left: 6px;
            top: 2px;

            width: 5px;
            height: 10px;

            border: solid #ffffff;
            border-width: 0 2px 2px 0;

            transform: rotate(45deg);
        }

        .remember-label input:focus-visible + .checkbox {
            box-shadow:
                0 0 0 3px rgba(2, 117, 216, 0.14);
        }

        .forgot-password {
            color: var(--primary);

            font-size: 11px;
            font-weight: 700;

            text-decoration: none;
        }

        .forgot-password:hover {
            color: var(--primary-dark);
            text-decoration: underline;
        }

        /* Giriş butonu */

        .login-button {
            width: 100%;
            height: 54px;

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

            gap: 12px;
            padding: 0 20px;
            line-height: 1;

            color: #ffffff;

            font-family: inherit;
            font-size: 15px;
            font-weight: 800;

            background:
                linear-gradient(
                    135deg,
                    #087bdd 0%,
                    #176fc9 55%,
                    #245fb5 100%
                );

            border: none;
            border-radius: 9px;

            cursor: pointer;

            box-shadow:
                0 9px 18px rgba(2, 117, 216, 0.21);

            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease,
                filter 0.2s ease;
        }

        .login-button i,
        .login-button span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            transform: none;
        }

        .login-button i {
            width: 22px;
            height: 22px;
            flex: 0 0 22px;
            font-size: 20px;
        }

        .login-button span {
            min-height: 22px;
        }

        .login-button:hover {
            transform: translateY(-1px);

            filter: brightness(1.04);

            box-shadow:
                0 11px 23px rgba(2, 117, 216, 0.26);
        }

        .login-button:active {
            transform: translateY(0);
        }

        .login-button:focus-visible {
            outline: 3px solid rgba(2, 117, 216, 0.2);
            outline-offset: 3px;
        }

        /* Mobil ekran */

        @media (max-width: 560px) {
            body {
                align-items: flex-start;

                padding: 12px;
            }

            .login-card {
                width: 100%;
                height: auto;
                min-height: 0;

                padding: 27px 22px 28px;

                border-radius: 15px;
            }

            .illustration {
                width: 100%;
                height: 180px;

                margin-bottom: 20px;
            }

            .illustration svg {
                width: 300px;
                height: 165px;
            }

            .university-title {
                font-size: 23px;
            }

            .system-title {
                gap: 11px;

                font-size: 13px;
            }

            .description {
                font-size: 12px;
            }
        }

        @media (max-width: 360px) {
            .login-card {
                padding-left: 17px;
                padding-right: 17px;
            }

            .university-title {
                font-size: 20px;
            }

            .system-title {
                gap: 7px;

                font-size: 12px;
            }

            .form-options {
                align-items: flex-start;
            }
        }

/* Sistem mesajları */
.giris-mesaji {
    width: 100%;
    margin: -8px 0 14px;
    padding: 10px 13px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 12px;
    line-height: 18px;
}

.giris-mesaji.hatali {
    color: #a8252b;
    background: #fff0f1;
    border-color: #f3c2c5;
}

.giris-mesaji.basarili {
    color: #176e33;
    background: #e9f9ed;
    border-color: #bde8c8;
}


.login-button:disabled {
    cursor: wait;
    opacity: 0.75;
    transform: none;
}



/* Çıkış/başarı mesajı bulunduğunda kart ve buton hizasını korur. */
.login-card {
    overflow: visible;
}

.login-button {
    min-height: 54px;
    flex-shrink: 0;
    vertical-align: middle;
}

.login-button i::before {
    display: block;
    line-height: 1;
}

/* DPÜ SSO Giriş Alanı */
.sso-giris-alani {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sso-login-button {
    text-decoration: none;
    letter-spacing: 0.5px;
    box-sizing: border-box;
}

.sso-login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(2, 117, 216, 0.32);
    filter: brightness(1.05);
    color: #ffffff;
}

.sso-bilgi-notu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted, #718096);
    text-align: center;
    margin: 0;
    padding: 10px 14px;
    background: #f4f7fb;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.sso-bilgi-notu i {
    color: var(--primary, #087bdd);
    font-size: 14px;
    flex-shrink: 0;
}