style.css

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  body{
    font-family: 'Inter', sans-serif;
  }
.container{
    width: 100vw;
    height: 100vh;
    background-color: #140D91;
}
  .ust{
    height: 24.31%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .baslik{
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    
    color: #FFFFFF;
  }

  .orta{
    width: 100%;
    height: 45.89%;
    display: flex;
    flex-direction: row;
  }
  .sol{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .sag{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;


  }
  .card-sol{
    height: 28.41vh;
    width: 28.22vh;
    background: #FFFFFF;
    border-radius: 0.39vh  0px  0px 0.39vh ;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .card-sag{
    height: 28.41vh;
    width: 28.22vh;
    background: #F4F4F5;
    border-radius: 0px 0.39vh 0.39vh 0px;
    display: flex;
    flex-direction: column;

  }

  .bir{
    width: 100%;
    height: 33.33%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    

  }
  .iki{
    width: 100%;
    height: 33.33%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 1;
  
  }
  .uc{
    width: 100%;
    height: 33.33%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 0;
  }
  .miktar{
    height: 53.61%;
    width: 71.62%;
    background: #F4F4F5;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;

    color: #5B5B5B;
    border-radius: 4px;
    border:none;
    outline-offset: 0px;
    outline: none;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;
  }
  .miktar:focus
{
    border:none;
    padding-left: 10px;
    caret-color: #140D91;
}
.miktar:focus::placeholder{
    padding-left: 0px;
    
}
  .miktar::placeholder{
    color: #B3B3B3;
    
  }
  .miktar:not(:focus){
    color: #5B5B5B;
    padding-left: 10px;
  }


  .iki_ic{
    
    border-color: #140D91;
    /* Style */
    height: 53.61%;
    width: 71.62%;
    background: none;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;

    color: #5B5B5B;
    border-radius: 4px;
    padding-left: 10px;
    outline-offset: 0px;
    outline: none;
   
    /* Arrow */
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem top 50%;
    background-size: 0.65rem auto;
  }
  

  /* .iki_ic::-webkit-scrollbar{
    width: 8px;
    background: #0d141f;
    border-radius: 0 8px 8px 0; 
  }
  .iki_ic::-webkit-scrollbar-thumb{
    background: #525861;
  border-radius: 0 8px 8px 0;
  }
.iki_ic::-webkit-meter-bar{
  border-radius: 0 8px 8px 0;
}

  .iki_ic:focus{
   
    padding-left: 10px;
    caret-color: #140D91;
  } */
 

  /* selected */


  .select-box {
    display: flex;
    width: 100%;
    min-height: 100%;
    flex-direction: column;
  
    align-items: center;
  
     position: relative;
  }
  
  .options-container {
    background: #0b074e;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #f5f6fa;
    max-height: 0;
    
    width: 71.62%;
    opacity: 0;
    margin-top:26.61%;
    
    transition: all 0.4s;
    border-radius: 4px;
    overflow: hidden;
  position: absolute;
    order: 1;
  }
  
  .selected {
    height: 53.61%;
    width: 71.62%;
    margin-top: 7.40%;
    border: 1px solid #140D91;
    background-repeat: no-repeat;
    
    border-radius: 4px;
    position: absolute;
    order: 0;
    padding-left: 10px;
    display: flex;
    align-items: center;
  }
  
  .h1{
    width: 70%;
    height: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #5B5B5B;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .imgg{
    width: 30%;
    height: 80%;
    display: flex;
    justify-content: center;
    transition: all 0.4s;
  }

  .selected:hover{
    cursor: pointer;
  }
  
  .selected::after {
    /* content: "";
    background: url("./arrow-down.svg");
    background-size: contain;
    background-repeat: no-repeat; */
   
  
   
    transition: all 0.4s;

  }
  
  .options-container.active {
    max-height: 150px;
    opacity: 1;
    overflow-y: scroll;
  }
  
  .select-box .options-container.active + .selected::after + .imgg::after {
    transform: rotateX(180deg);
    top: -6px;
  }
  
  .options-container::-webkit-scrollbar {
    width: 8px;
    background: #0b074e;
    border-radius: 0 4px 4px 0;
  }
  
  .options-container::-webkit-scrollbar-thumb {
    background: #140D91;
    border-radius: 0 4px 4px 0;
  }
  
  .option {
    cursor: pointer;
    padding: 8px;
  }
  
  .option:hover {
    background: #0e0966;
  }
  
  .select-box label {
    cursor: pointer;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
  }
  
  .select-box .option .radio {
    display: none;
  }
  
  
   
    
/* selected end */


/* selected 2 */

.select-box-2 {
  display: flex;
  width: 100%;
  min-height: 100%;
  flex-direction: column;

  align-items: center;

   position: relative;
}

.options-container-2 {
  background: #0b074e;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #f5f6fa;
  max-height: 0;
  
  width: 71.62%;
  opacity: 0;
  margin-top:20.61%;
  
  transition: all 0.4s;
  border-radius: 4px;
  overflow: hidden;
position: absolute;
  order: 1;
  
}

.selected-2 {
  height: 53.61%;
  width: 71.62%;
  border: 1px solid #140D91;
  background-repeat: no-repeat;
  
  border-radius: 4px;
  position: absolute;
  order: 0;
  padding-left: 10px;
  display: flex;
  align-items: center;
}

.h1-2{
  width: 70%;
  height: 100%;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #5B5B5B;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.imgg-2{
  width: 30%;
  height: 80%;
  display: flex;
  justify-content: center;
  transition: all 0.4s;
}

.selected-2:hover{
  cursor: pointer;
}

.selected-2::after {
  /* content: "";
  background: url("./arrow-down.svg");
  background-size: contain;
  background-repeat: no-repeat; */
 

 
   transition: all 0.4s;

}

.options-container-2.active {
  max-height: 150px;
  opacity: 1;
  overflow-y: scroll;
}

.select-box-2 .options-container-2.active + .selected-2::after + .imgg-2::after {
  transform: rotateX(180deg);
  top: -6px;
}

.options-container-2::-webkit-scrollbar {
  width: 8px;
  background: #0b074e;
  border-radius: 0 4px 4px 0;
}

.options-container-2::-webkit-scrollbar-thumb {
  background: #140D91;
  border-radius: 0 4px 4px 0;
}

.option-2 {
  cursor: pointer;
  padding: 8px;
}

.option-2:hover {
  background: #0e0966;
}

.select-box-2 label {
  cursor: pointer;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
}

.select-box-2 .option-2 .radio {
  display: none;
}



/* card-sag */
.ustt{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
}

.altt{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 50%;
}
.h1-3{
 
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #140D91;
}
.h1-4{
  padding-top: 8%;
  font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;
color: #B6B6B6;
}

.alt{
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo{
  max-width:80.56px ;
  height: auto;
}