/* ////////////////////////////////////////////////// */
/* #region Desktop — 1920px ve üzeri */
/* #region Genel Sayfa Stilleri */

button {
    border: none;
    outline: none;
    font-family: 'Euclid Circular B';
}

.container-login {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.sol-alan {
    width: 60%;
    position: relative;
}

.sag-alan {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
}

.gorsel-alan {
    position: relative;
    width: 100%;
    height: 100%;
}

.image-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-wrapper .black-mask {
    position: absolute;
    inset: 0;
    background-color: var(--img-mask);
    z-index: 2;
}

.gorsel-yazi {
    position: relative;
    z-index: 3;
    height: 100%;
    color: var(--white);
    padding: 150px 100px 24px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.gorsel-yazi .ust-yazi {
    font-size: 24px;
    font-weight: 300;
    width: 70%;
    color: var(--login-text);
}

.gorsel-yazi .ust-yazi span {
    font-weight: 500;
}

/* ----------------------
----------------------
Video Alan
----------------------
---------------------- */
/* .sol-alan .video-alan {
    width: 100%;
}
.sol-alan video {
    height: 100%;
    object-fit: cover;
    width: 100%;
    object-position: center;
}
.sol-alan .video-yazi {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 9999;
}
.sol-alan .video-yazi .ust-yazi {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 150px;
    left: 50px;
    color: var(--login-text);
    font-size: 24px;
    font-weight: 300;
}
.sol-alan .video-yazi span {
    font-weight: 500;
} */
/* ----------------------
----------------------
Video Alan
----------------------
---------------------- */
.sol-alan .alt-yazi {
    color: var(--login-text);
    font-size: 12px;
    font-weight: 300;
}

.sag-alan {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.form-alan {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.form-alan .input-alan {
    display: flex;
    flex-direction: column;
    padding: 36px;
    border-radius: 10px;
    gap: 16px;
    width: 420px;
    /* width: 100%; */
    background-color: var(--login-form-bg);
}

.form-alan .input-alan .logo {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 150px;
}

.baslik {
    display: flex;
    flex-direction: column;
    font-size: 24px;
    font-weight: 500;
    padding: 20px 0;
    color: var(--ana-renk);
}

.baslik span {
    font-size: 14px;
    font-weight: 400;
    padding-top: 10px;
}

.input-alan .input-label {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    color: var(--ana-renk);
}

.input-label input {
    height: 48px;
    width: 100%;
    border: 1px solid var(--auto-color-35-8376cd);
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    padding: 0 14px 0 40px;
    text-align: left;
}

.input-label input:hover {
    border: 1px solid var(--auto-color-35-8376cd);
}
.input-label input:focus {
    color: var(--ana-renk);
}

.input-field {
    width: 100%;
    padding: 10px;
    text-align: center;
}

.input-label i {
    position: absolute;
    left: 16px;
    top: 58%;
    z-index: 9999;
    color: var(--ana-renk);
}

.input-alan input:focus-visible {
    outline: none;
    border: 1px solid var(--highlight-button-pink);
}

.input-alan label {
    font-size: 13px;
}

.input-alan #btn-veya-giris-yap {
    margin: 0;
    background-color: transparent;
    color: var(--ana-renk);
    padding: 0;
    height: 0;
    font-size: 14px;
}

.input-alan button {
    height: 48px;
    border-radius: 5px;
    background-color: var(--karttur-bg-organizasyon-text);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    margin-top: 24px;
    cursor: pointer;
    font-family: 'Euclid Circular B' !important;
}

.input-alan button:hover {
    opacity: .9;
}

.sifremi-unuttum {
    position: absolute;
    top: 67%;
    transform: translateY(-50%);
    right: 16px;
    font-size: 12px;
    color: var(--mavi-renk);
}

.sifremi-unuttum:hover {
    opacity: .9;
    text-decoration: underline;
}

.input-sifre-wrapper {
    position: relative;
}

.mobile-icon {
    display: none;
}

.web-link {
    display: block;
    font-size: 13px;
    text-align: right;
}

.alt-band {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 300;
    color: var(--gri70);
}

.alt-band img {
    padding-top: 4px;
}

.gecis-efekti {
    transition: transform 0.5s ease-in-out;
}

#loading {
    display: none;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg-black);
    z-index: 9999;
    text-align: center;
    
}

.loading-icon {
    width: 48px;
    height: 48px;
    border: 4px solid var(--box-shadow-light);
    border-top: 4px solid var(--karttur-bg-organizasyon-text);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.text-yukleniyor {
    color: var(--white) !important;
}

.yardim-butonu {
    display: flex;
    align-self: flex-end;
    justify-self: flex-start;
    padding: 20px 20px 0 0;
}

.btn-yardim {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--auto-color-38-a2437e);
    font-size: 12px;
    font-weight: 500;
    padding: 10px;
    border-radius: 10px;
    gap: 5px;
    cursor: pointer;
    color: var(--ana-renk);
}

.btn-yardim i {
    font-size: 16px;
}

.btn-yardim a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn-yardim:hover {
    opacity: .85;
}

/* #endregion Genel Sayfa Stilleri */

/* #endregion Desktop — 1920px ve üzeri */
/* ////////////////////////////////////////////////// */


/* ////////////////////////////////////////////////// */
/* #region Large Laptop — 1366px ~ 1440px */

@media (min-width: 1366px) and (max-width: 1440px) {
    .sol-alan {
    width: 80%;
}
.gorsel-yazi .ust-yazi {
    width: 100%;
}


}


/* #endregion Large Laptop — 1366px ~ 1440px */
/* ////////////////////////////////////////////////// */


/* ////////////////////////////////////////////////// */
/* #region Medium Laptop — 1200px ~ 1365px */

@media (min-width: 1200px) and (max-width: 1365px) {
    .sol-alan {
    width: 80%;
}
.gorsel-yazi .ust-yazi {
    width: 100%;
}


}
/* #endregion Medium Laptop — 1200px ~ 1365px */
/* ////////////////////////////////////////////////// */


/* ////////////////////////////////////////////////// */
/* #region Tablet (Landscape) — 1024px ~ 1199px */

@media (min-width: 1024px) and (max-width: 1199px) {

    .sol-alan {
    width: 80%;
}
.gorsel-yazi .ust-yazi {
    width: 100%;
}

.form-alan .input-alan {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 10px;
    gap: 16px;
    width: 370px;
    background-color: var(--login-form-bg);
}

.input-label input {
    height: 44px;
    width: 100%;
    border: 1px solid var(--auto-color-35-8376cd);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    padding: 0 14px 0 40px;
    text-align: left;
}


.input-alan #btn-veya-giris-yap {
    margin: 0;
    background-color: transparent;
    color: var(--ana-renk);
    padding: 0;
    height: auto;
    font-size: 14px;
}

}

/* #endregion Tablet (Landscape) — 1024px ~ 1199px */
/* ////////////////////////////////////////////////// */


/* ////////////////////////////////////////////////// */
/* #region Mobile — 600px ve altı */

@media only screen and (max-width: 600px) {

    /* #region Root and Body /// Fixed Styles /// Customize CSS */
  
    * {
      -webkit-tap-highlight-color: transparent;
    }
  
    body {
      overscroll-behavior: none;
      -webkit-overflow-scrolling: auto;
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      touch-action: none;
    }
  
    /* #endregion Root and Body /// Fixed Styles /// Customize CSS */
  
  
    /* #region Genel Sayfa Stilleri */
    .container-login {
      position: relative;
      width: 100%;
      height: 100%;
      height: 100dvh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  
    .sol-alan {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
    }
  
    .image-wrapper {
      position: absolute;
      inset: 0;
      z-index: 1;
    }
  
    .image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  
    .black-mask {
      position: absolute;
      inset: 0;
      background-color: var(--black-alpha-25);
      z-index: 2;
    }
  
    .gorsel-yazi {
      position: relative;
      z-index: 3;
      color: var(--white);
      padding: 100px 20px 60px 20px;
      text-align: center;
    }
  
    .gorsel-yazi .ust-yazi {
      font-size: 20px;
      font-weight: 300;
      line-height: 1.5;
      width: 100%;
    }
  
    .alt-yazi {
      font-size: 12px;
      margin-top: 20px;
      opacity: 0.8;
    }
  
    .sag-alan {
      position: relative;
      z-index: 4;
      width: 100%;
      box-sizing: border-box;
      border-radius: 16px 16px 0 0;
      background-color: transparent;
      ;
    }
  
    .form-alan {
      display: block;
      background-color: transparent;
      height: fit-content;
      padding: 0 24px;
      overflow: hidden;
      width: 100%;
  }
  
    .yardim-butonu {
      display: none;
    }
  
    .form-alan .input-alan {
      margin: 0 auto;
      width: 100%;
    }
  
    .input-label input {
      font-size: 15px;
  }
  
    .mobile-icon {
      display: inline-block;
      position: absolute;
      top: 68%;
      right: 12px;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      background-color: var(--mavi-renk);
      color: var(--white);
      font-size: 14px;
      border-radius: 50%;
      text-align: center;
      line-height: 22px;
      text-decoration: none;
      z-index: 10;
    }
  
    .web-link {
      display: none;
    }
  
  /* #endregion Genel Sayfa Stilleri */
}

/* #endregion Mobile — 600px ve altı */

/* Beni Hatırla Checkbox Stilleri */
.beni-hatirla-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    /* margin: 15px 0; */
}

.beni-hatirla-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.beni-hatirla-wrapper label {
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: var(--text-color);
    font-family: 'Euclid Circular B', sans-serif;
}

.beni-hatirla-wrapper label:hover {
    color: var(--primary-color);
}

.beni-hatirla-wrapper input[type="checkbox"]:checked+label {
    color: var(--mavi-renk);
    cursor: pointer;
    font-weight: 500;
}



/* ////////////////////////////////////////////////// */