/*konfeti */

#modalConfettiContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Taşmaları engeller */
  z-index: 9999;
  pointer-events: none; /* Kullanıcı etkileşimlerini engeller */
}




/*çark*/

.sonuc-modal {
  top: 50% !important;
  transform: translateY(-50%) !important; /* Modal'ı dikey olarak ortalar */
   background-color: rgba(255, 255, 255, 0.8) !important; /* Beyaz arka plan ve %80 opaklık */
  box-shadow: none; /* Gölgeyi kaldırmak isterseniz */
}



.modal-cark {
  max-width: 90vw; /* Modalın genişliğini ekranın %95'ine kadar sınırlıyoruz */
  max-height: 90vh; /* Modalın yüksekliğini ekranın %95'ine kadar sınırlıyoruz */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: transparent !important; /* Arka planı şeffaf yap */
  box-shadow: none !important; /* Gölgeyi kaldır */
}

.box-roulette {
  position: relative;
  width: 60vmin; /* Hem genişlik hem yükseklik aynı tutuldu, ekrana sığdırmak için vmin kullanıldı */
  height: 60vmin;
  margin: 0 auto;
  border: 1vmin solid #646464;
  border-radius: 50%;
  background: #646464;
  overflow: hidden;
}

/*.box-roulette .markers {
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 3vmin solid #646464;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  z-index: 9999;
}*/

.box-roulette .markers {
    position: absolute;
    left: 50%;
    top: -13px; /* İkonun yukarıda görünmesi için ayarla */
    transform: translateX(-50%);
    font-size: 2.3rem; /* İkon boyutunu ayarla */
    color: #646464; /* İkon rengini ayarla */
    z-index: 9999;
}

.box-roulette .roulette {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box-roulette .item {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  transform-origin: 0 100%;
}

.box-roulette .label {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  white-space: nowrap;
  transform-origin: 0 0;
}

.box-roulette .label .text {
  display: inline-block;
  font-size: 2.2vmin;
  font-weight: bold;
  line-height: 1;
  vertical-align: middle;
}

#btn-start {
  display: flex; /* Flexbox ile hizalamak */
  justify-content: center; /* Yatayda ortalama */
  align-items: center; /* Dikeyde ortalama */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10vmin;
  height: 10vmin;
  font-weight: bold;
  background: #646464;
  border-radius: 50%;
  z-index: 9999;
  cursor: pointer;
  text-align: center; /* Metni merkezde tutmak */
  font-size: 2vmin; /* Ekran boyutuna göre metin büyüklüğü */
}

/* Buton devre dışı (disabled) olduğunda */
#btn-start:disabled {
  background: #646464 !important; /* Renk sabit kalır */
  color: white !important; /* Metin rengi sabit kalır */
  pointer-events: none; /* Tıklamayı devre dışı bırakır */
  opacity: 1 !important; /* Opaklık korunur */
}


/* kopyalama inputu */

/* Just to play with animations */
.copiedtext {
  position: absolute;
  left: 0; top: 0; right: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(-1em);
  color: #000;
  transition: all .500s;
}

.coupon-button.copied .copiedtext {
  opacity: 1;
  transform: translateY(-4em);
}

/* Some Generic styles */
.coupon-button {
  position: relative;
  padding: 8px 10px;
  border: 2px dotted black;
  font-size: 0.835em;
  text-transform: uppercase;
  letter-spacing: 0.125em;
  font-weight: bold;
  color: #000;
 /* background: #fff;*/
  transition: background .275s;
}

.coupon-button:hover,
.coupon-button:focus {
  background: #EA2237;
  color: #fff;
}




/* kopyalama inputu */


/* Mobil ekranlar için optimize */
@media only screen and (max-width: 600px) {
  .modal-cark {
    max-width: 100vw; /* Modalın genişliğini ekranın %95'ine kadar sınırlıyoruz */
  max-height: 100vh; /* Modalın yüksekliğini ekranın %95'ine kadar sınırlıyoruz */
  }

  .box-roulette {
    width: 70vmin;
    height: 70vmin;
  }

  .box-roulette .label .text {
    font-size: 3vmin;
  }

  #btn-start {
    width: 15vmin;
    height: 15vmin;
	 font-size: 3vmin; /* Küçük ekranlarda daha büyük font */
  }
}