body {
  background-color: #f8fafc;
  font-family: 'Poppins', sans-serif;
  color: #222;
  margin: 0; padding: 0;
}

.category-list a.category-link:hover {
  color: #0d6efd;
  text-decoration: underline;
}

/* Carousel şəkil slide */
.carousel-inner img {
  border-radius: 20px;
  max-height: 480px;
  object-fit: contain;
}

/* Thumbnaillar */
.thumbnails-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.thumbnails-container::-webkit-scrollbar {
  display: none;
}

.thumbnail-btn {
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
  cursor: pointer;
  padding: 0;
  width: 80px;
  height: 50px;
  flex-shrink: 0;
  background: none;
}

.thumbnail-btn img {
  border-radius: 12px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumbnail-btn.active,
.thumbnail-btn:hover,
.thumbnail-btn:focus {
  border-color: #0d6efd;
  outline: none;
  transform: scale(1.05);
  z-index: 2;
  transition: all 0.3s ease;
}

/* Meta bölmə */
.game-meta i {
  vertical-align: middle;
}

/* Hover effekt oxşar oyunlarda */
.hover-scale:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

#gameCarousel .carousel-inner {
  height: 400px;
  overflow: hidden;
  position: relative;
}

#gameCarousel .carousel-item {
  height: 100%;
}

#gameCarousel .carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/* Navbar */
.navbar {
  position: sticky; /* və ya fixed */
  top: 0;
  z-index: 1030; /* Bootstrap default z-index */
}

.container {
  position: relative; /* sticky üçün konteyner */
}

/* Sidebar və sağ panel sticky */
aside.col-lg-3 {
  position: sticky;
  top: 90px;  /* navbar hündürlüyü qədər yuxardan yapışır */
  max-height: calc(100vh - 90px); /* ekran hündürlüyündən navbar çıxılır */
  overflow-y: auto; /* uzun siyahılarda scroll daxilində olur */
  background: #fff;
  z-index: 10;
}

/* Sağ panel üçün eyni */
aside.related-games {
  position: sticky;
  top: 56px;
  z-index: 1020;
  max-height: none !important;    /* hündürlük limitini silirik */
  overflow-y: visible !important; /* scrollu söndürürük */
}







/* **Mobil və kiçik ekranlarda sol panel gizlədilir** */
@media (max-width: 991.98px) {
  aside.col-lg-3 {
    display: none !important;
  }
  section.col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Kiçik ekranlar üçün thumbnail ölçü */
@media (max-width: 575.98px) {
  .thumbnail-btn {
    width: 60px;
    height: 40px;
  }
}

/* Mobil üçün oxşar oyunlar konteynerinin alt boşluğu */
@media (max-width: 991.98px) {
  aside.related-games {
    position: relative !important;
    top: auto !important;
    max-height: 300px;
    overflow-y: visible;
    margin-bottom: 1.5rem;
    display: block !important; /* Mobil üçün görünür olsun */
    background: #fff;
    z-index: 10;
    border-radius: 0.5rem;
    padding: 1rem;
  }
}

/* Carousel kiçik ekran hündürlüyü */
@media (max-width: 768px) {
  #gameCarousel .carousel-inner {
    height: 250px;
  }
}

/* Game Card */
.related-games h5 {
  font-size: 1.25rem;
  border-color: #0d6efd;
  margin-bottom: 1rem;
}

.similar-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 80vh;
  overflow-y: auto;
  padding-right: 6px; /* Scroll üçün yer */
}

/* Kart stili */
.similar-card {
  display: flex;
  gap: 16px;              /* Bir az artırdım boşluğu */
  text-decoration: none;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 12px 16px;     /* Daha geniş padding */
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.12); /* Bir az daha dərin shadow */
  color: #222;
  transition: background-color 0.25s ease;
  align-items: center;
}

.similar-card:hover,
.similar-card:focus-visible {
  background-color: #e7f1ff;
  outline: none;
  cursor: pointer;
}

.similar-card img {
  width: 100px;           /* Şəkilin eni böyüdüldü */
  height: 66px;           /* Hündürlük proporsional artırıldı (16:9 nisbətinə yaxın) */
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.12);
}

.info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.title {
  font-size: 1.1rem;     /* Yazı bir az böyük oldu */
  font-weight: 600;
  color: #0d6efd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 6px 0;
}

.meta {
  font-size: 0.9rem;     /* Kiçik artım */
  color: #555;
  display: flex;
  gap: 14px;             /* Bir az geniş boşluq */
}

.meta span {
  background-color: #e0e7ff;
  padding: 6px 16px;     /* Daha böyük padding */
  border-radius: 9999px;
  font-weight: 500;
  user-select: none;
}

/* Scroll dizaynı (yalnız webkit üçün) */
.similar-cards::-webkit-scrollbar {
  width: 6px;            /* Scroll biraz daha qalın */
}

.similar-cards::-webkit-scrollbar-track {
  background: transparent;
}

.similar-cards::-webkit-scrollbar-thumb {
  background-color: rgba(13, 110, 253, 0.5);
  border-radius: 10px;
}

/* Mobil üçün */
@media (max-width: 767.98px) {
  .related-games {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }

  .similar-cards {
    max-height: none;
    overflow-y: visible;
    gap: 20px;           /* Kartlar arasında biraz daha böyük boşluq */
    padding: 16px 20px;
  }

  .similar-card {
    padding: 10px 12px;
  }

  .similar-card img {
    width: 120px;        /* Mobil üçün şəkil bir az daha böyük */
    height: 80px;
    border-radius: 12px;
  }

  .title {
    font-size: 1.05rem;
  }

  .meta {
    font-size: 0.85rem;
  }
}