@font-face {
            font-family: 'TwitterChirp';
            src: url('../fonts/Chirp-Heavy.eot');
            src: url('../fonts/Chirp-Heavy.eot?#iefix') format('embedded-opentype'),
            url('../fonts/Chirp-Heavy.woff2') format('woff2'),
            url('../fonts/Chirp-Heavy.ttf') format('truetype');
            font-weight: 900;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'TwitterChirp';
            src: url('../fonts/Chirp-Bold.eot');
            src: url('../fonts/Chirp-Bold.eot?#iefix') format('embedded-opentype'),
            url('../fonts/Chirp-Bold.woff2') format('woff2'),
            url('../fonts/Chirp-Bold.ttf') format('truetype');
            font-weight: bold;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'TwitterChirp';
            src: url('../fonts/Chirp-Regular.eot');
            src: url('../fonts/Chirp-Regular.eot?#iefix') format('embedded-opentype'),
            url('../fonts/Chirp-Regular.woff2') format('woff2'),
            url('../fonts/Chirp-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'TwitterChirp';
            src: url('../fonts/Chirp-Medium.eot');
            src: url('../fonts/Chirp-Medium.eot?#iefix') format('embedded-opentype'),
            url('../fonts/Chirp-Medium.woff2') format('woff2'),
            url('../fonts/Chirp-Medium.ttf') format('truetype');
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }

        #loginModal {
            --bs-modal-width: 600px;
            background-color: rgb(36, 45, 53, 0.7);
            font-family: TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        .text-x-gray { 
            color: #6c757d!important; 
            font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        .login-card {
            font-family: TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            position: relative;
            background-color: #000000;
            border-radius: 16px;
            margin: 0 auto;
            display: flex;
            align-content: center;
            flex-direction: column;
            min-height: 650px;
        }
        .login-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            padding: 10px;
            border: unset!important;
        }
        .center-logo {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        .close-btn {
            background: transparent;
            border: none;
            border-radius: 100px;
            width: 36px;
            height: 36px;
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            margin-right: auto;
        }
        .close-btn:hover {
            background-color: #171818;
        }
        .login-card-header svg { 
            fill: #fff;
            width: 32px;
            height: 53px;
        }
        .login-card-body {
            margin: 0 auto;
            min-height: 468px;
            padding-left: 80px;
            padding-right: 80px;
            padding-bottom: 25px;
            width: 100%;
        }
        .login-card h1 {
            font-family: TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: white;
            font-size: 31px;
        }

        /*
        .login-card-body .input {
            width: 100%;
            font-size: 17px;
            font-weight: 400;
            line-height: 24px;
            padding-left: 8px;
            padding-right: 8px;
            border-radius: 4px;
            padding-top: 10px;
            height: 56px;
            background-color: #000000;
            border: 1px solid gray;
            color: white;
        }
        .form-input {
            position: relative;
            color: #71767b;
        }
        .form-input label {
            color: #71767b;
            position: absolute;
            top: 25%;
            left: 3%;
        }
        .form-input input {
            outline: 0;
        }
        .form-input-active label {
            color: rgb(29, 155, 240)!important;
            top: 5%;
            font-size: small;
        }
        .form-input-active input:active, .form-input-active input:focus {
            box-shadow: rgb(29, 155, 240) 0px 0px 0px 1px;
            border-color: rgb(29, 155, 240);
        }
        */
        .form-floating input.form-control {
            padding: 1rem 0.50rem;
            background-color: #000000;
            height: 60px;
            border-radius: 4px!important;
            font: 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            border-color: rgb(51, 54, 57);
            padding-left: 10px;
            color: #FFF;
        }
        form textarea {
            padding: 1rem 0.50rem;
            background-color: #000000;
            border-radius: 4px!important;
            font: 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        .form-floating input.form-control:focus, form textarea:focus {
            color: #fff;
            background-color: transparent;
            border: 1px solid #1e96e8!important;
            box-shadow: none!important;
            outline: 0;
        }
        .form-floating>label { padding: 1rem .5rem; }
        .form-floating label {
            color: #6c757d;
            background-color: transparent;
            font: 17px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        .form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after {
            position: absolute;
            inset: 0.50rem 0.375rem;
            z-index: -1;
            height: 1.5em;
            content: "";
            background-color: transparent;
            border-radius: 4px;
        }

        .form-floating > .form-control:focus ~ label,
        .form-floating > .form-control:not(:placeholder-shown) ~ label {
            font-size: 16px;
            color: #1e96e8;
            transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
        }


        .login-card-body .input-username { 
            background-color: #111214;
        }
        .login-card-body input.form-control label {
            padding: 0.9rem .50rem;
            font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        .login-card-body input.form-control input:disabled + label {
            color: #393b3d !important;
        }
        .login-card-body .input-username input:disabled { 
            background: #111214 !important;
            border: 1px solid #111214;
            border-radius: 4px;
        }
        .login-card-body input.form-control input:focus {
            border: 1px solid #1e96e8!important;
            box-shadow: none;
        }
        .login-card-body input.form-control input:not(:focus) {
            border: 1px solid #cfd9de!important;
        }

        .login-card-body button {
            height: 52px;
        }

        .close-btn svg {
            fill: rgb(239, 243, 244); 
            color: rgb(239, 243, 244);
        }

        #togglePassword {
            cursor: pointer;
            position: absolute;
            right: 17px;
            bottom: 17px;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        .loader_box {
            text-align: center;
            font-size: 0.85rem;
        }
        .loader_box .loader_icon {
            display:block;
            text-align:center;
            width: 40px;
            margin: 20px auto;
            position:relative;
        }
        .loader_box .loader_icon svg {
            width: 24px;
            height: 24px;
            animation: rotate 750ms linear infinite;
        }

        /* Gerçek dosya input'unu gizleyelim */
        .input-file {
            display: none;
        }

        /* Özel görünüme sahip dosya yükleme butonu */
        .custom-file-upload {
            display: inline-block;
            background-color: white;
            color: #000;
            padding: 10px 15px;
            border: 2px solid #ccc;
            border-radius: 100px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            width: fit-content;
            user-select: none; /* Seçilemeyi engeller */
            transition: background-color 0.3s ease;
        }

        /* Hover efekti */
        .custom-file-upload:hover {
            background-color: #f0f0f0;
        }

        .block_h1 {
          font-weight: 700;font-size: 22px;margin-top: 15px;
      }
      .block_p {
          font-size: 15px; margin-top: 10px;
          color: rgb(113, 118, 123);
      }


      .isvalid { border-color: rgb(29, 155, 240)!important; }
      .invalid { border-color: rgb(244, 33, 46)!important; }

    /* Light mode */
    body.light-mode .close-btn:hover { background-color: #f7f9f9; }
    body.light-mode .login-card-header .center-logo svg { fill: #0f141a; }
    body.light-mode .login-card {
        background-color: #fff;
    }
    body.light-mode .login-card h1 {
        color: #000;
    }
    body.light-mode .form-floating input.form-control {
        background-color: #fff;
        color: #000;
        padding-right: 35px;
    }
    body.light-mode #loginModal {
        background-color: #242d3582;
    }
    body.light-mode .close-btn svg {
        color: #0f141a;
        fill: #0f141a ;
    }
    .alert{
        font-size: 13px!important;
    }
    #loginForm{
        margin-top: 20px
    }

    .form-control.user{
        background-color: rgb(32, 35, 39) !important;
        color: rgb(113, 118, 123) !important;
    }
    .input-username label{
        color: rgb(113, 118, 123) !important;
    }
    @media (max-width: 500px) {
        .login-card-body{
            padding-right: 40px;
            padding-left: 40px;
        }
    }

    .verified-icon { margin-left: 2px; }
.verified-icon svg {
    width: 18.75px;
    height: 18.75px;
}
.fill-blue-600 {
    fill: #2563eb;
}