.crypto-banner-img {
  width: 100%;                /* Konteyner genişliğini doldur */
  height: auto;
  display: block;
  border-radius: 24px;        /* Köşeleri yuvarlak yap */
  object-fit: cover;
}


/* 1) Flex-row + wrap + gap ayarı */
.container.d-flex.flex-column.gap-2 {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;      /* orijinal gap */
}

/* 2) Desktop: 4 / satır */
.container.d-flex.flex-column.gap-2 > img {
  flex: 0 0 calc((100% - 1.5rem) / 4) !important;
  max-width: calc((100% - 1.5rem) / 4) !important;
  height: auto !important;
  border-radius: .75rem !important;  /* rounded-3 */
  cursor: pointer !important;
}

/* 3) Tablet’e kadar: 2 / satır (gap sayısı 1 => 0.5rem) */
@media (max-width: 768px) {
  .container.d-flex.flex-column.gap-2 > img {
    flex: 0 0 calc((100% - 0.5rem) / 2) !important;
    max-width: calc((100% - 0.5rem) / 2) !important;
  }
}

/* 4) Mobil: 1 / satır */
@media (max-width: 576px) {
  .container.d-flex.flex-column.gap-2 > img {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


.swiper-button-prev {
  display:none;
}

.swiper-button-next {
  display:none;
}

#top-games-wrapper{
  display:none;
}



/* ================================
   HEADER ACTIONS: GİRİŞ YAP & KAYIT OL
   ================================ */

/* Ortak ayarlar */
.header__actions .header__signin,
.header__actions .header__signup {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;                     /* Buton yüksekliği */
  padding: 0 20px !important;                   /* Yatay iç boşluk */
  border: none !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;        /* Resmin tamamı butonu kaplasın */
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #fff !important;
  text-transform: none !important;              /* Bütün metni normalleştir */
  letter-spacing: normal !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}



@media (min-width: 576px) {
/* “GİRİŞ YAP” butonu */
.header__actions .header__signin {
  background-image: url('https://cdn.democu.online/assets/header/GirisYapBG.png') !important;
  margin-right: 12px !important;                /* Butonlar arası boşluk */
}

/* Icon varsa düzgün hizala */
.header__actions .header__signin svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
  fill: currentColor !important;
}

/* Giriş metni span içeriyorsa */
.header__actions .header__signin span {
  text-transform: none !important;
}


}

@media (max-width: 576px) {
    .header__actions .header__signin span {
    display: none !important;
}
}

/* “KAYIT OL” butonu */
.header__actions .header__signup {
 // background-image: url('https://cdn.democu.online/assets/header/KayitOlBG.png') !important;
}

/* Kayıt metni span içeriyorsa */
.header__actions .header__signup span {
  text-transform: none !important;
}


.header__actions .header__signup{
  background-size: unset !important;
}



/* 1) Kayıt Ol butonunu sola doğru 12° eğ */
.header__actions .header__signup {
  transform: skewX(-12deg) !important;
  transform-origin: center center !important;
}

/* 2) İçindeki metni tekrar düz göster */
.header__actions .header__signup span {
  display: inline-block;
  transform: skewX(-12deg) !important;
  transform-origin: center center !important;
}

/* 3) Eğer padding’ler bozulduysa düzeltebilirsiniz */
.header__actions .header__signup {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* “Giriş Yap” butonunu sağa doğru eğ */
.header__actions .header__signin {
  transform: skewX(-5deg) !important;
  transform-origin: center center !important;
}

/* İçindeki metni tekrar dik tut */
.header__actions .header__signin span {
  display: inline-block;
  transform: skewX(-5deg) !important;
  transform-origin: center center !important;
}

/* Gerekirse padding’i buton oranına göre ayarla */
.header__actions .header__signin {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.header__actions {
    gap: 0px !important;
}

.header__actions .header__signin, .header__actions .header__signup{
  height: 34px !important;
}


/*.modal .modal-dialog {
    max-width: 1000px !important;
}

#signup-modal > div > div > div {
  max-width: 1000px !important;
    padding-left: calc(100% - 500px) !important;
}*/
#banners-wrapper > div > img:nth-child(5) {
    flex: 0 0 calc((100%) / 1) !important;
    max-width: calc((100%) / 1) !important;
    height: auto !important;
    border-radius: .75rem !important;
    cursor: pointer !important;
}
#banners-wrapper > div > img:nth-child(6) {
    flex: 0 0 calc((100%) / 1) !important;
    max-width: calc((100%) / 1) !important;
    height: auto !important;
    border-radius: .75rem !important;
    cursor: pointer !important;
}

.sidebar__links {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    margin-bottom: 0px;
    cursor: pointer;
    gap: 0px !important;
}
@media (max-width: 767px) {


  .sidebar__link {
    height: 60px !important;
}

  .header--logged .header__logo {
    width: 125px !important;
}

  .header__action svg {
    width: 30px;
    height: 30px;
    stroke: var(--tf-tc);
}
      .header__wallet-dropdown-btn {
        width: 140px;
    }

#header > div > div > div > div > a {
  width: 125px !important;
}

}

  @media (max-width: 480px) {
    #header > div > div > div > div > a {
  width: 125px !important;
}
    .header--logged .header__logo {
    width: 125px !important;
}

    #sidebar-content > div.sidebar__big > div:nth-child(2) > a{
      width: 93% !important
    }
  }

.badge {
    margin-left: auto !important;
}

@media (max-width: 767px) {
    .footer__accepted img.crypto-footer-icon {
        height: 70px !important;
        width: 70px !important;
    }
}



.sidebar__links {
    margin-bottom: 0px !important;
}

#sidebar-content > div.sidebar__big > div:nth-child(2) > a > span{
  display:none !important;
}

#footer > div > div > div.row.footer-desc > div:nth-child(6){
  display:none !important;
}

#sidebar-content > div.sidebar__big > div.sidebar__links{
  gap: 0px !important;
}



/* Banners Wrapper – Grid ayarları */
#banners-wrapper .container.d-flex.flex-column.gap-2 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

/* Desktop: 4 sütun (varsayılan zaten) */
#banners-wrapper > div > img {
  flex: 0 0 calc((100% - 1.5rem) / 4) !important;
  max-width: calc((100% - 1.5rem) / 4) !important;
}

/* Tablet (≤768px): 2 sütun */
@media (max-width: 768px) {
  #banners-wrapper > div > img {
    flex: 0 0 calc((100% - 0.5rem) / 2) !important;
    max-width: calc((100% - 0.5rem) / 2) !important;
  }

  #banners-wrapper > div > img:nth-child(5) {
    flex: 0 0 calc((100%) / 1) !important;
    max-width: calc((100%) / 1) !important;
}
#banners-wrapper > div > img:nth-child(6) {
    flex: 0 0 calc((100%) / 1) !important;
    max-width: calc((100%) / 1) !important;
}
}

/* Mobil (≤576px): 2 sütun */
@media (max-width: 576px) {
  #banners-wrapper > div > img {
    flex: 0 0 calc((100% - 0.5rem) / 1) !important;
    max-width: calc((100% - 0.5rem) / 1) !important;
  }
   #banners-wrapper > div > img:nth-child(5) {
    flex: 0 0 calc((100%) / 1) !important;
    max-width: calc((100%) / 1) !important;
}
#banners-wrapper > div > img:nth-child(6) {
    flex: 0 0 calc((100%) / 1) !important;
    max-width: calc((100%) / 1) !important;
}
}










.live-tv-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background-color: #001901;
  border: 1px solid #032D05;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 6px rgba(15, 247, 150, 0.2);
  font-family:monospace !important;
}

.live-tv-button:hover {
  background-color: #31DD00;
  color: #FFF;
  box-shadow: 0 0 12px #032D05;
  transform: scale(1.05);
  
}

.live-tv-icon {
  width: 22px;
  height: 22px;
  color: inherit;
  transition: transform 0.3s ease;
  transform: rotate(-10deg);

}

.live-tv-button:hover .live-tv-icon {
  transform: rotate(20deg);
}

.header__wallet{
  justify-content:flex-end !important;
  margin-right:0 !important;
  width:min-content !important;
}


.live-tv-button {
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInLiveTV 0.4s ease-out forwards;
}

@keyframes fadeInLiveTV {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media screen and (max-width: 1024px) {
  .live-tv-button {
    display: none !important;
  }
}

.sidebar__nav li a{
  border: none !important;
}
.sidebar__nav li.active a{
  border: none !important;
  border-left: 1px solid !important;
  transition: all .2sn !important;
}

#sidebar-content > div.sidebar__big > div:nth-child(2) > a {
    background-size: 80% !important;
    border: 0px !important;
}
body {
    background: url(https://cdn.democu.online/pelit/background.webp) no-repeat center center !important;
    background-size: 100% 100% !important;
}
@media only screen and (max-width: 768px) {
  body {
    background: url(https://cdn.democu.online/pelit/background.webp) no-repeat center center fixed !important;
    background-size: 100% 100% !important;
  }
}

.mini-game {
    background-color: transparent !important;
}

.mini-game__title {
    display: none !important;
}
@media (min-width: 724px) {
#mini-games-wrapper > div > div > div:nth-child(2) > div > div > div.swiper-slide{
  max-width: calc((100% - 1.5rem) / 5) !important;
}
}
@media (max-width: 724px) {
#mini-games-wrapper > div > div > div:nth-child(2) > div > div > div.swiper-slide{
  max-width: calc((100% - 1.5rem) / 2) !important;
}
}








.ranking::after {
 content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -40%;
    right: -40%;
    background-position: center;
    opacity: 0.1;
    transform: rotate(-20deg);
    background-repeat: no-repeat !important;
    background-position: center center !important;
    transition: all 0.3s ease;
    background-repeat: no-repeat !important;
    background-position: center center !important; 
}

.ranking .rank-icon{
  width:36px !important;
  height:36px !important;
}
.ranking:hover::after {
  opacity: 0.6; /* Fully visible on hover */
  transform: rotate(-10deg); /* Slightly change rotation on hover */
   bottom: -30%;
    right: -30%;
}
.state-slug-standart:after {
  background: url("https://cdn.democu.online/pelit/Pelit%20Ranks_standart.png") center/contain no-repeat;
}
.state-slug-bronz:after {
  background: url("https://cdn.democu.online/pelit/Pelit%20Ranks_bronz.png") center/contain no-repeat;
}
.state-slug-silver:after {
  background: url("https://cdn.democu.online/pelit/Pelit%20Ranks_silver.png") center/contain no-repeat;
}
.state-slug-gold:after {
  background: url("https://cdn.democu.online/pelit/Pelit%20Ranks_gold.png") center/contain no-repeat;
}
.state-slug-platinum:after {
  background: url("https://cdn.democu.online/pelit/Pelit%20Ranks_platin.png") center/contain no-repeat;
}
.state-slug-diamond:after {
  background: url("https://cdn.democu.online/pelit/Pelit%20Ranks_diamond.png") center/contain no-repeat;
}
.state-slug-legend:after {
  background: url("https://cdn.democu.online/pelit/Pelit%20Ranks_legend.png") center/contain no-repeat;
}

.sidebar__link--casino:before {
    opacity: 0 !important;
}


@media (max-width: 480px) {
    #header > div > div > div > div > a {
        width: 90px !important;
    }
}
@media (max-width: 1024px) {
#sidebar-content > div.sidebar__big > div:nth-child(2) > a {
          width: 100% !important;
}

  /* Sadece o ikinci ul’i iki sütunlu grid yap */
#sidebar-content > .sidebar__big > .sidebar__menu > ul:nth-child(2) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* İçindeki linkleri buton gibi tam genişlikte, border + radius’lı yap */
#sidebar-content > .sidebar__big > .sidebar__menu > ul:nth-child(2) li a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.75rem 1rem;
  text-decoration: none;
  color: #ffffff;
  background-color: transparent;
  border: 1px solid #16C72E !important;    /* PelitBet yeşili */
  border-radius: 6px;           /* köşe yuvarlaklığı */
}

/* Aktif linkte dilersen arka plan veya border rengini vurgula */
#sidebar-content > .sidebar__big > .sidebar__menu > ul:nth-child(2) li.active a {
  background-color: rgba(22,199,46,0.1);
  border-color: #00FF00;
}


  #sidebar-content > div.sidebar__big > div.sidebar__menu > ul:nth-child(3){
    margin-top: 15px !important;
  }
}
.mid-me {
    height: 100% !important;
}

/* 1) Animasyonlu zoom + dalgalanma için keyframe */
@keyframes floatZoom {
  0%   { transform: scale(1)   translateY(0);   }
  100% { transform: scale(1.1) translateY(-10px); }
}

/* 2) Sadece ilk 4 görselin başlangıç hali */
#banners-wrapper > div > img:nth-child(1),
#banners-wrapper > div > img:nth-child(2),
#banners-wrapper > div > img:nth-child(3),
#banners-wrapper > div > img:nth-child(4) {
  display: inline-block;
  transform: scale(1) translateY(0);
  /* isteğe bağlı: hover’dan çıkınca sorunsuz dönsün */
  transition: transform 0.3s ease;
}

/* 3) Hover’da sadece bu 4 görsele animasyonu uygula */
#banners-wrapper > div > img:nth-child(1):hover,
#banners-wrapper > div > img:nth-child(2):hover,
#banners-wrapper > div > img:nth-child(3):hover,
#banners-wrapper > div > img:nth-child(4):hover {
  animation: floatZoom 0.8s ease-in-out infinite alternate forwards;
}
@media (min-width: 1200px) {
    .header__search {
        margin-left: 0;
        margin-right: 0;
    }
}