/* LOGIN CSS */
section.user-login{ display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 50px 10px; background-color: #fafafa;}
section.user-login > .txt{ width: 100%; max-width: 450px; text-align: center; margin-bottom: 20px;}
section.user-login > .txt h3{ font-size: 32px; font-weight: 600; margin-bottom: 5px;}
section.user-login > .txt p{ text-align: center; font-size: 15px;}
section.user-login > .txt p span{ color: #000; font-weight: 500;}
section.user-login > .buttons{ position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 60px; width: 100%; max-width: 450px;}
section.user-login > .buttons a{ background-color: #efefef; text-decoration: none; width: 100%; height: 100%; border: none; font-weight: 500; color: #555; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px;}
section.user-login.login > .buttons a.login{     font-size: 19px; background-color: white; border: 1px solid #d3d3d3; border-bottom: none; color: #000; pointer-events: none; box-shadow: 0 1px 0 0 white;}
section.user-login.login > .forms form.login-form{ display: flex;}
section.user-login.register > .buttons a.register{ background-color: white; border: 1px solid #d3d3d3; border-bottom: none; color: #000; pointer-events: none; box-shadow: 0 1px 0 0 white;}
section.user-login.register > .forms form.register-form{ display: flex;}
section.user-login > .forms{ padding-top: 20px; width: 100%; max-width: 450px; padding-bottom: 20px; border-radius: 0 0 3px 3px; background-color: white; border: 1px solid #d3d3d3;}
section.user-login > .forms h1{ text-align: center; font-weight: 600; font-size: 28px; margin: 20px 0 20px; color: #000;}
section.user-login > .forms form{ display: none; padding: 0 30px; align-items: center; justify-content: center; flex-direction: column;}
section.user-login > .forms form.reset-password{ display: flex;}
section.user-login > .forms form input:not([type='checkbox']):not([type='radio']){ transition: all .2s ease; width: 100%; height: 40px; font-size: 14px; margin-bottom: 12px; /*background-color: #f9f9f9; border: 1px solid #cecece;*/ background-color: #f4f4f4; border: 1px solid #bcbcbc; border-radius: 3px; padding: 0 10px;}
section.user-login > .forms form input:not([type='checkbox']):not([type='radio'])::placeholder{ opacity: .6;}
section.user-login > .forms form input.register-password{ margin-bottom: 0px !important;}
section.user-login > .forms form input:not([type='checkbox']):not([type='radio']):focus-visible{ box-shadow: 0 0 0 1px #bdbdbd; outline: none; border-color: #2b2b2b; background-color: white;}
section.user-login > .forms form input[type="checkbox"]{ position: absolute; cursor: pointer; height: 1px; width: 16px; transform: translateY(13px) !important;}
section.user-login > .forms form input[type="checkbox"]#remember{ transform: translateY(10px) !important;}
section.user-login > .forms form input[type="checkbox"]::before{ content: ''; position: absolute; left: 0; top: 50%; transform: translateY(calc(-50% + 0px)) !important; display: inline-block; border: 1px solid #000; width: 15px; height: 15px; border-radius: 3px;}
section.user-login > .forms form input[type="checkbox"]:checked::before{ content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; color: white; background-color: #000; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; border: 1px solid #000; width: 15px; height: 15px;}
section.user-login > .forms form .password-control{ width: 100%;}
section.user-login > .forms form .password-control:not(.new){ margin-bottom: 15px;}
section.user-login > .forms form .password-control small{ font-size: 11px; color: #333;}
section.user-login > .forms form .password-control > div{ display: none; align-items: center; justify-content: space-between; margin-top: 8px;}
section.user-login > .forms form .password-control.active > div{ display: flex;}
section.user-login > .forms form .password-control > div span{ display: none; width: 40px; font-size: 12px; font-weight: 700;}
section.user-login > .forms form .password-control.low > div span.low-txt{ display: inline-block; color: #101010;}
section.user-login > .forms form .password-control.mid > div span.mid-txt{ display: inline-block; color: #a66306;}
section.user-login > .forms form .password-control.high > div span.high-txt{ display: inline-block; color: #019301;}
section.user-login > .forms form .password-control > div .bar{ position: relative; width: 85%; height: 6px; background-color: #ececec; border-radius: 10px;}
section.user-login > .forms form .password-control > div .bar::before{ content: ''; transition: all .35s linear; position: absolute; left: 0; top: 0; width: 0; z-index: 2; height: 6px; border-radius: 10px;}
section.user-login > .forms form .password-control.low > div .bar::before{ width: 20%; background-color: #0f0f0f;}
section.user-login > .forms form .password-control.mid > div .bar::before{ width: 50%; background-color: #c29c02;}
section.user-login > .forms form .password-control.high > div .bar::before{ width: 100%; background-color: #1fc202;}

section.user-login > .forms form > div{ width: 100%; position: relative;}
section.user-login > .forms form > div > input[type="password"]{ padding-right: 40px !important;}
section.user-login > .forms form > div > input.white{ background-color: white !important;}
section.user-login > .forms form > div > input + i{ position: absolute; right: 12px; top: 12px; cursor: pointer; color: #666;}
section.user-login > .forms form > div > i.fa-eye ~ input { background-color: black !important;}
section.user-login > .forms form > div > input#new-pass{ margin-bottom: 25px;}
section.user-login > .forms form > div.miss > input{ border-color: #2a2a2a !important; background-color: #fffcfc !important; color: red !important;}
section.user-login > .forms form > div.miss > input::placeholder{ color: rgb(0, 0, 0); opacity: .5 !important;}
section.user-login > .forms form > div.miss::after{ margin-left: 1px; font-weight: 500; display: inline-block; position: absolute; left: 0; bottom: 8px; font-size: 12px; color: red;}
section.user-login > .forms form > div.miss.txt::after{ content: 'Şifrede Harf Kullanmak Zorunludur';}
section.user-login > .forms form > div.miss.num::after{ content: 'Şifrede Rakam Kullanmak Zorunludur';}
section.user-login > .forms form > div.miss.char::after{ content: 'Şifreniz En Az 7 Karakter Olmalıdır';}
section.user-login > .forms form > div.not-match > input{ border-color: #1e1e1e !important; background-color: #fffcfc !important;}
section.user-login > .forms form > div.not-match > input::placeholder{ color: rgb(0, 0, 0); opacity: .5 !important;}
section.user-login > .forms form > div.not-match::after{ content: 'Girilen ÅŸifreler UyuÅŸmuyor'; margin-left: 1px; font-weight: 500; display: inline-block; position: absolute; left: 0; bottom: -5px; font-size: 12px; color: red;}

section.user-login > .forms form p{ font-size: 12px; color: #222; font-weight: 400; text-align: left; width: 100%; margin-bottom: 3px;}
section.user-login > .forms form p b{ font-size: 12px; color: #222; font-weight: 400; text-decoration: underline; cursor: pointer;}
section.user-login > .forms form > .genders{ display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 35px; outline: 1px solid #cecece; border-radius: 3px;}
section.user-login > .forms form > .genders input{ width: 0px; height: 0px; opacity: 0; position: absolute;}
section.user-login > .forms form > .genders input#gender-man:checked + label{ background-color: white; color: #000; outline: 2px solid #000; border-radius: 3px; position: relative; z-index: 2;}
section.user-login > .forms form > .genders input#gender-woman:checked + label{ background-color: white; color: #000; outline: 2px solid #000; border-radius: 3px; position: relative; z-index: 2;}
section.user-login > .forms form > .genders label{ transition: all 0s ease; cursor: pointer; display: inline-block; font-size: 13px; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #f9f9f9;}
section.user-login > .forms form > .genders label:last-child{ border-left: 1px solid #cecece;}
section.user-login > .forms form > .little-buttons{ display: flex; width: 100%; margin: 3px 0; gap: 3px;}
section.user-login > .forms form > .little-buttons > a{ font-size: 13px; color: black; text-decoration: none;}
section.user-login > .forms form > .little-buttons > a:hover{ text-decoration: underline;}
section.user-login > .forms form > .little-buttons > input{ transform: translateY(3.5px);}
section.user-login > .forms form > .little-buttons > label{ font-size: 12px; user-select: none; color: #333; padding-left: 22px;}
section.user-login > .forms form > .little-buttons > label a{ color: #333;}
section.user-login > .forms form > .forget-buttons{ display: flex; justify-content: space-between; width: 100%; margin: 10px 0; gap: 3px;}
section.user-login > .forms form > .forget-buttons > div{ font-size: 13px;}
section.user-login > .forms form > .forget-buttons > a{ font-size: 13px; color: black; text-decoration: none;}
section.user-login > .forms form > .forget-buttons > a:hover{ text-decoration: underline;}
section.user-login > .forms form > .forget-buttons > div > input{ transform: translateY(3.5px);}
section.user-login > .forms form > .forget-buttons > div > input[type="checkbox"]::before{ transform: translateY(calc(-50% + 5px)); font-size: 10px; width: 12px; height: 12px;}
section.user-login > .forms form > .forget-buttons > div > label{ font-size: 15px; user-select: none; color: #333; padding-left: 18px; user-select: none;}
section.user-login > .forms form > .forget-buttons > div > label a{ color: #333;}
section.user-login > .forms form > .comment{ width: 100%; margin-bottom: 10px;}
section.user-login > .forms form > .comment h5{ font-size: 13px; margin-bottom: 10px;}
section.user-login > .forms form > .comment ul{ list-style: none;}
section.user-login > .forms form > .comment ul li{ font-size: 13px; display: flex; align-items: center; gap: 5px; margin-bottom: 3px;}
section.user-login > .forms form > .comment ul li::before{ content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: #0b0b0b;}
section.user-login > .forms form .login-btn{ margin-bottom: 5px; transition: all .2s ease; width: 100%; height: 50px; background-color: #070707; color: white; font-weight: 900; font-size: 18px; margin-top: 15px; border-radius: 13px; border: none;}
section.user-login > .forms form .login-btn:hover{ background-color: #242424; cursor: pointer; box-shadow: -2px 2px 5px 1px #ddd;}
section.user-login > .forms form b{ font-weight: 700; color: #8c8c8c; margin: 10px 0;}
section.user-login > .forms form .social-btn{ text-decoration: none; font-size: 14px; display: inline-block; width: 100%; font-weight: 600; overflow: hidden; position: relative; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 3px;}
section.user-login > .forms form .facebook{ background-color: #0b5cd6; color: white; margin-bottom: 10px; margin-top: 10px;}
section.user-login > .forms form .facebook i{ width: 40px; height: 40px; position: absolute; left: 0; top: 0; color: white; background-color: #074eb8; font-size: 19px; display: flex; align-items: center; justify-content: center;}
section.user-login > .forms form .google{ color: black; background-color: #f1f1f1; border: 1px solid #e4e4e4;}
section.user-login > .forms form .google .icon{ width: 40px; height: 40px; position: absolute; left: 0; top: 0; color: white; background-color: #e4e4e4; font-size: 19px; display: flex; align-items: center; justify-content: center;}
section.user-login > .forms form .google .icon img{ height: 20px;}
section.user-login > .forms form .back{ transition: all .2s ease; border: 1px solid black; color: black; margin-top: 5px;}
section.user-login > .forms form .back:hover{ border-color: #000; color: #000; }
section.user-login > .forms form .send-again{ background-color: #e8e8e8; color: white; color: #555; border: 1px solid #999; pointer-events: none; margin-top: 5px;}
section.user-login > .forms form .send-again > span{ margin-left: 5px;}
section.user-login > .forms form .send-again.active{ cursor: pointer; transition: all .2s ease; border: 1px solid #000; background-color: white; pointer-events: all; color: #000;}
section.user-login > .forms form .send-again.active:hover{ background-color: #000; color: white; }
section.user-login > .forms form .send-again.active > span{ display: none;}
section.user-login > .forms form .line{ width: 100%; height: .5px; background-color: #888; margin: 10px 0 5px;}
section.user-login > .forms form > span{ font-size: 13px; margin-top: 20px;}
section.user-login > .forms form > span a{ text-decoration: none; color: #000; font-weight: 600; cursor: pointer;}
section.user-login > .forms form > span a:hover{ text-decoration: underline;}
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
  }

  .alert h4 {
    margin-top: 0;
    color: inherit;
  }

  .alert .alert-link {
    font-weight: bold;
  }

  .alert > p,
  .alert > ul {
    margin-bottom: 0;
  }

  .alert > p + p {
    margin-top: 5px;
  }

  .alert-dismissable,
  .alert-dismissible {
    padding-right: 35px;
  }

  .alert-dismissable .close,
  .alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
  }

  .alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
  }

  .alert-success hr {
    border-top-color: #c9e2b3;
  }

  .alert-success .alert-link {
    color: #2b542c;
  }

  .alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
  }

  .alert-info hr {
    border-top-color: #a6e1ec;
  }

  .alert-info .alert-link {
    color: #245269;
  }

  .alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
  }

  .alert-warning hr {
    border-top-color: #f7e1b5;
  }

  .alert-warning .alert-link {
    color: #66512c;
  }

  .alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #626262;
  }

  .alert-danger hr {
    border-top-color: #c9c9c9;
  }

  .alert-danger .alert-link {
    color: #843534;
  }