/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
/* body{
  display: flex;
  padding: 0 10px;
  min-height: 100vh;
  align-items: center;
  background: #3498DB;
  justify-content: center;
} */


::selection{
  color: #fff;
  background: #3498DB;
}
.wrapper{
  height: 390px;
  max-width: 410px;
  background: #fff;
  border-radius: 7px;
  padding: 20px 25px 0;
  transition: height 0.2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* form aktif iken dış yükseklik orjinal 530 idi */
.wrapper.active{
  height: 600px;   
}

.wrapper2 {
    height: 390px;
    max-width: 410px;
    background: #fff;
    border-radius: 7px;
    padding: 20px 25px 0;
    transition: height 0.2s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

    /* form aktif iken dış yükseklik orjinal 530 idi */
    .wrapper2.active {
        height: 600px;
    }




header h1 {
    font-size: 21px;
    font-weight: 500;
}
header p{
  margin-top: 5px;
  color: #575757;
  font-size: 16px;
  
}
.wrapper .form{
  margin: 20px 0 25px;
  
}
.wrapper2 .form{
  margin: 20px 0 25px;
  
}

.form :where(input, button){
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  border-radius: 5px;
  transition: 0.1s ease;
  /* align-items: center; */
  /* justify-content: center; */
}
.form .bıttın{
  background: #f00b16;
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  border-radius: 5px;
  transition: 0.1s ease;
}

.form input{
  font-size: 18px;
  padding: 0 17px;
  border: 1px solid #999;
}
.form input:focus{
  box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.form input::placeholder{
  color: #999;
}
.form button{
  color: #fff;
  cursor: pointer;
  margin-top: 20px;
  font-size: 17px;
  background: #0768c2;
}


.qr-code{
  opacity: 0;
  display: flex;
  padding: 33px 0;
  border-radius: 5px;
  align-items: center;
  pointer-events: none;
  justify-content: center;
  border: 1px solid #ccc;
}
.wrapper.active .qr-code{
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s 0.05s ease;
}

.wrapper2.active .qr-code{
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s 0.05s ease;
}



/*.qr-code img{
  width: 200px;
}*/

/* iPhone 12 Pro Viewport
390 px x 844 px */

  /* maxsimum genişlik 390 e eşit veya küçükse aşağıdakileri yap */
@media (max-width: 390px){
  .wrapper{
    height: 340px;
    padding: 16px 20px;
  }
  .wrapper.active{
    height: 594px;
  }

.wrapper2{
    height: 340px;
    padding: 16px 20px;
  }
  .wrapper2.active{
    height: 594px;
  }


  header p{
    color: #696969;
  }
  .form :where(input, button){
    height: 52px;
  }
  /*.qr-code img{
    width: 200px;
  } */ 
}


.Karekodolusturucurenk{
  color: rgb(247, 7, 7)
}


@media only screen    and (max-device-width: 480px) and (orientation:landscape) {
    /* iPhone landscape  yatay*/

    .form .bıttın{
      background: #1e06f1;
      width: 100%;
      height: 50px;
      border: none;
      outline: none;
      border-radius: 25px;
      transition: 0.1s ease;
      
    }

    .form .bıttın::before {
      content: "Iphone Yan Yattı - ";
      /* top: 36px; */
  }
    

    

}

@media only screen    and (max-device-width: 480px) and (orientation:portrait) {
    /* iPhone portrait dikey*/
}