body {

  font-family: Arial, sans-serif;

  margin: 0;

  padding: 0;

  text-align: center;

  background: url('images/hali-background.jpg') no-repeat center center fixed; /* Arka plan resmi */

  background-size: cover; /* Resmi tam ekran yapar */

  color: white; /* Metin rengi arka planla uyumlu hale getirildi */

}



h1, h2 {

  margin: 20px 0;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Yazı okunabilirliği için gölge */

}



.header-title{

  margin-top: 40px;

  padding: 10px 5px;

  background-color: #dedede;

  border-radius: 10px;

}



.header-image{

  margin-top: 15px;

  width: 130px;

  border-radius: 5px;

  box-shadow: 0px 2px 20px 10px #30b6b8;

  background-color: #dedede;

}



.categories-title{

  padding: 10px;

  background-color: #8bc34a;

  border-radius: 10px;

  color: #fff;

}



.colors-title{

  padding: 10px;

  background-color: #8bc34a;

  border-radius: 10px;

  color: #fff;

}



.categories, .colors {

  margin: 20px auto;

}



.color-btn.red{

  background-color: #d9534f;

}



.color-btn.blue{

  background-color: #2196f3;

}



.color-btn.green{

  background-color: #5cb85c;

}



.color-btn.yellow{

  background-color: #FFC107;

}



.color-btn.gray{

  background-color: #9e9e9e;

}



button {

  width: 100%;

  margin: 5px;

  padding: 10px 20px;

  border: none;

  cursor: pointer;

  font-size: 30px;

  border-radius: 5px;

  background-color: #FF9800;

  color: white;

  transition: transform 0.2s, background-color 0.2s;
  
  box-sizing: border-box;

  border: 3px solid transparent; /* Şeffaf kenarlık */

  transition: border-color 0.3s;
}



button:hover {

  background-color: rgba(48, 182, 184, 0.9)!important; /* Hover efekti */

}



button.selected {
  background-color: rgb(48 182 184)!important; /* Seçilen durum için arka plan */
  border-color: #fff; /* Renkli kenarlık */
}



#next-btn {

  font-weight: bold;

  background-color: #9e9e9e;

  cursor: not-allowed;

}



#next-btn:enabled {

  cursor: pointer;

  background-color: #8bc34a;

}



#result-container {

  margin-top: 50px;

  border: 4px solid #000;

  padding: 20px;

  background-color: #f9eeb3; /* Beyaz alan yerine yarı saydam bir kutu */

  border-radius: 10px;

}

#selected-items{
  padding: 0px 5px 0 0;
  margin-left: -30px;
}

#selected-items svg {

  margin: 10px 0;

  width: 75px;

  height: 75px;

}



#result-subject{

  border-radius: 15px;

  background: #dedede;

  padding: 20px;

  color: #333;

  text-shadow: none;

  font-weight: bolder;

}



.install-promotion {

    position: fixed;

    bottom: 0px;

    left: 0;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px; /* Butonlar arası boşluk */

    padding: 10px;

    background: rgba(0, 0, 0, 0.9); /* Şeffaf siyah arka plan */

    z-index: 1000;

    box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.2); /* Üstte gölge */

}

.install-promotion.ios{
  flex-direction: column;
}

.install-promotion p{
  display: block;
}

.install-button{

  background-color: #4CAF50;

}

.close-button{

  background-color: #28999a;

}

#install-button,

#close-button {

    color: #fff;

    font-size: 14px;

    font-weight: bold;

    padding: 8px 16px;

    border: none;

    border-radius: 20px;

    cursor: pointer;

    transition: all 0.3s ease;

}



#install-button:hover,

#close-button:hover {

    background: linear-gradient(135deg, #feb47b, #ff7e5f);

    transform: translateY(-2px); /* Hafif yukarı hareket */

}



#install-button:active,

#close-button:active {

    transform: translateY(2px); /* Hafif aşağı hareket */

}



@media(max-width: 768px){

  .header-image{

    width: 70px;

  }

  .header-title{

    margin-top: 10px;

    padding: 10px 5px;

  }

  h1, h2{
    margin: 5px;
    font-size: 16px;

  }

  button{
    font-size: 17px;
    padding: 5px 0;
  }

  #selected-items{
    padding: 0px 20px 0 0;
    margin-left: 0;
  }

  #result-container{
    margin-top: 15px;
    padding: 0;
  }



  #selected-items svg{

    width: 40px;

    height: 40px;

  }

  #install-promotion {

    position: relative;

    top: 0;

    bottom: 0;

  }

}