@media (max-width:320px){

  .fs36{font-size: 36px}
  .fs22{font-size: 22px}
  .fw6{font-weight: 600;}
  
  .yukaribosluk{padding-top: 50px;}
  
  .gonder{color: white; background-color: #585858; height: 55px; width: 88%; line-height: 20px; font-size: 20px;}
  .gonder:hover {background-color: #999999;}
  
  .login-box {position: relative; padding: 0 40px;}
  .login-box .user-box {position: relative;}
  .login-box .user-box input {width: 100%;padding: 10px 0;font-size: 16px;color: #000;margin-bottom: 10px; border: none;border-bottom: 1px solid #000;outline: none;background: transparent;}
  .login-box .user-box label {position: absolute; top:0;left: 0; padding: 10px 0;font-size: 16px;color: #000;pointer-events: none; transition: .5s;}
  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {top: -20px; left: 0;color: #474747;font-size: 12px;}
}
@media (min-width:321px){

  .fs36{font-size: 36px}
  .fs22{font-size: 22px}
  .fw6{font-weight: 600;}
  
  .yukaribosluk{padding-top: 50px;}
  
  .gonder{color: white; background-color: #585858; height: 55px; width: 88%; line-height: 20px; font-size: 20px;}
  .gonder:hover {background-color: #999999;}
  
  .login-box {position: relative; padding: 0 40px;}
  .login-box .user-box {position: relative;}
  .login-box .user-box input {width: 100%;padding: 10px 0;font-size: 16px;color: #000;margin-bottom: 10px; border: none;border-bottom: 1px solid #000;outline: none;background: transparent;}
  .login-box .user-box label {position: absolute; top:0;left: 0; padding: 10px 0;font-size: 16px;color: #000;pointer-events: none; transition: .5s;}
  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {top: -20px; left: 0;color: #474747;font-size: 12px;}
}
@media(min-width:768px){

  .fs36{font-size: 36px}
  .fs22{font-size: 22px}
  .fw6{font-weight: 600;}
  
  .yukaribosluk{padding-top: 50px;}
  
  .gonder{color: white; background-color: #585858; height: 55px; width: 88%; line-height: 20px; font-size: 20px;}
  .gonder:hover {background-color: #999999;}
  
  .login-box {position: relative; padding: 0 40px;}
  .login-box .user-box {position: relative;}
  .login-box .user-box input {width: 100%;padding: 10px 0;font-size: 16px;color: #000;margin-bottom: 10px; border: none;border-bottom: 1px solid #000;outline: none;background: transparent;}
  .login-box .user-box label {position: absolute; top:0;left: 0; padding: 10px 0;font-size: 16px;color: #000;pointer-events: none; transition: .5s;}
  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {top: -20px; left: 0;color: #474747;font-size: 12px;}
}
@media(min-width:992px){
    
  .fs36{font-size: 30px}
  .fs22{font-size: 18px}
  .fw6{font-weight: 600;}
  
  .yukaribosluk{padding-top: 30px;}
  
  .gonder{color: white; background-color: #585858; height: 55px; width: 88%; line-height: 20px; font-size: 20px;}
  .gonder:hover {background-color: #999999;}
  
  .login-box {position: relative; padding: 0 20px;}
.login-box .user-box {position: relative;}
.login-box .user-box input {width: 100%;padding: 5px 0;font-size: 16px;color: #000;margin-bottom: 10px; border: none;border-bottom: 1px solid #000;outline: none;background: transparent;}
.login-box .user-box label {position: absolute; top:0;left: 0; padding: 10px 0;font-size: 16px;color: #000;pointer-events: none; transition: .5s;}
.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {top: -20px; left: 0;color: #474747;font-size: 12px;}
}
@media(min-width:1200px){  

  .fs36{font-size: 30px}
  .fs22{font-size: 18px}
  .fw6{font-weight: 600;}
  
  .yukaribosluk{padding-top: 30px;}
  
  .gonder{color: white; background-color: #585858; height: 55px; width: 88%; line-height: 20px; font-size: 20px;}
  .gonder:hover {background-color: #999999;}
  
  .login-box {position: relative; padding: 0 20px;}
  .login-box .user-box {position: relative;}
  .login-box .user-box input {width: 100%;padding: 7px 0;font-size: 16px;color: #000;margin-bottom: 10px; border: none;border-bottom: 1px solid #000;outline: none;background: transparent;}
  .login-box .user-box label {position: absolute; top:0;left: 0; padding: 10px 0;font-size: 16px;color: #000;pointer-events: none; transition: .5s;}
  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {top: -20px; left: 0;color: #474747;font-size: 12px;}
}
@media(min-width:1400px){

  .fs36{font-size: 30px}
  .fs22{font-size: 18px}
  .fw6{font-weight: 600;}
  
  .yukaribosluk{padding-top: 30px;}
  
  .gonder{color: white; background-color: #585858; height: 40px; width: 88%; line-height: 17px; font-size: 17px;}
  .gonder:hover {background-color: #999999;}
  
  .login-box {position: relative; padding: 0 20px;}
  .login-box .user-box {position: relative;}
  .login-box .user-box input {width: 100%;padding: 10px 0;font-size: 16px;color: #000;margin-bottom: 10px; border: none;border-bottom: 1px solid #000;outline: none;background: transparent;}
  .login-box .user-box label {position: absolute; top:0;left: 0; padding: 10px 0;font-size: 16px;color: #000;pointer-events: none; transition: .5s;}
  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {top: -20px; left: 0;color: #474747;font-size: 12px;}
}
@media(min-width:1600px){

  .fs36{font-size: 36px}
  .fs22{font-size: 22px}
  .fw6{font-weight: 600;}
  
  .yukaribosluk{padding-top: 50px;}
  
  .gonder{color: white; background-color: #585858; height: 55px; width: 88%; line-height: 20px; font-size: 20px;}
  .gonder:hover {background-color: #999999;}
  
  .login-box {position: relative; padding: 0 40px;}
  .login-box .user-box {position: relative;}
  .login-box .user-box input {width: 100%;padding: 10px 0;font-size: 16px;color: #000;margin-bottom: 10px; border: none;border-bottom: 1px solid #000;outline: none;background: transparent;}
  .login-box .user-box label {position: absolute; top:0;left: 0; padding: 10px 0;font-size: 16px;color: #000;pointer-events: none; transition: .5s;}
  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {top: -20px; left: 0;color: #474747;font-size: 12px;}
}