@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

html { scroll-behavior: smooth; } 
html, body { height: 100%; width: 100%; color:#505050; margin: 0; padding: 0; font-size:14px; font-weight: 300; line-height: normal; font-family: 'Poppins', sans-serif; } 
body { min-height: 100%; font-family: 'Poppins', sans-serif;}
          .wrapper{position: relative; min-height:100%; z-index: 1; overflow: hidden;}
a { text-decoration: none; outline: 0; border: none; -webkit- transition: all ease 300ms; transition: all ease 300ms;} 
    
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
i { text-rendering: optimizeLegibility !important; } 
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 
:root {--main_color:#32B1BF; --color2:#004F7C; --color3:#00C252; --color4:#FF7675; --color5:#E475FF; } 
        .txt_yesil{color:var(--main_color); }
        .bg_yesil{background: var(--main_color);}
        .bg_koyu{background: var(--color2);}
        .bg_acikYesil{background: var(--color3);}
        .bg_kirmizi{background: var(--color4);}
        .bg_mor{background: var(--color5);}
        .txt_beyaz{color:#fff;}

.bg_giris{position: absolute; right:0;  bottom:0; width:700px; height:789px; background:url("../img/ArkaPlanResim.png") no-repeat right; background-size:cover; }
     
       .login_screen_container{height: 100vh; background: rgb(12,74,173); background: linear-gradient(180deg, rgba(12,74,173,1) 0%, rgba(21,191,222,1) 100%); z-index: 1;}
       .circle_container{position: absolute; left:50%; top:50%; -webkit-transform: translate(-50%,-50%);  transform:translate(-50%,-50%); width:500px; height:500px; display: flex; align-items: center; justify-content: center; z-index: 1;}
       .circle{position: absolute; inset:0; border:1px solid #fff; border-radius: 50%; opacity: 0; animation: scaleIn 6s infinite cubic-bezier(.36, .11, .89, .32);}

    @keyframes scaleIn {
      from {
    transform: scale(.5, .5);
    opacity: .1;
      }
  to {
    transform: scale(2.5, 2.5);
    opacity: 0;
      }
    }
        .loginForm{display: block; width:360px; position: absolute; left:50%; top:50%;  -webkit-transform:translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 1;}
        .logo_login{display: block; width:260px; margin:auto auto 20px auto;}
        .logo_login img{display: block; width: 100%;}
        .login_input_container{border-radius:20px; background: rgba(255,255,255,0.2); padding:30px;}
       
         input{border:1px solid var(--main_color)!important; border-radius: 10px!important;}
        .form-control{border:none; line-height:35px; font-size: 12px; outline: none;}
        .login_input_container input{padding-left:50px;}
        .kAdi:before,.pas:before{content:""; position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 900; line-height: 25px; left:6px; font-size: 18px; text-align: center; color:var(--main_color); top:10px; bottom:10px; width:35px;  z-index: 1; border-right: 1px solid var(--main_color);}
        .kAdi:before{content:"\f007";}
        .pas:before{content:"\f084";}
        .loginForm .link{font-size: 12px;}
        .loginForm .link:hover{color:#fff; text-decoration: underline;}
        .submit .btn-primary{display: block; width:120px; border-radius: 10px; line-height:30px; margin:auto 0 auto auto; background: #fff; font-size: 12px; color:var(--main_color); border:none;}
        .submit .btn-primary:hover{background:rgba(255,255,255,0.8);}