/* ============================================================
   TOP10.CSS - Top 10 Şarkılar Bölümü
   ------------------------------------------------------------
   Bu dosya, anasayfadaki "Top 10 Çalan Şarkılar" bölümünün
   stillerini içerir:
   - Yükleniyor animasyonu (card, loader, words, word)
   - Ekolayzer dalgası (audiowave, wave)
   - Top 3 için özel renk (bg-custom-red)
   
   NOT: @keyframes spin_4991 ve @keyframes move6 bu dosyada.
   ============================================================ */

/* ============================================================
   1. YÜKLENİYOR ANİMASYONU - DIŞ KART
   ============================================================ */
.card {
  background-color: var(--bg-color, #000);
  padding: 0.5rem 1.5rem;
  border-radius: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  max-width: fit-content;
}

/* ============================================================
   2. YÜKLENİYOR ANİMASYONU - İÇ YAPI
   ============================================================ */
.loader {
  color: #FFBF00;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 5px 8px;
  display: flex;
  border-radius: 8px;
  gap: 4px;
}

.words {
  overflow: hidden;
  position: relative;
}

.words::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--bg-color, #000) 10%,
    transparent 30%,
    transparent 70%,
    var(--bg-color, #000) 90%
  );
  z-index: 20;
}

.word {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #FCFCFC;
  animation: spin_4991 7s infinite;
}

@keyframes spin_4991 {
  0%     { transform: translateY(0%); }
  8.33%  { transform: translateY(0%); }
  16.66% { transform: translateY(-100%); }
  25%    { transform: translateY(-100%); }
  33.33% { transform: translateY(-200%); }
  41.66% { transform: translateY(-200%); }
  50%    { transform: translateY(-300%); }
  58.33% { transform: translateY(-300%); }
  66.66% { transform: translateY(-400%); }
  75%    { transform: translateY(-400%); }
  83.33% { transform: translateY(-500%); }
  91.66% { transform: translateY(-500%); }
  100%   { transform: translateY(-600%); }
}

/* ============================================================
   3. TOP 3 İÇİN ÖZEL ARKA PLAN RENGİ
   ============================================================ */
.bg-custom-red {
  background-color: rgb(194, 159, 4) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 8px rgba(141, 94, 6, 0.5);
}

/* ============================================================
   4. EKOLAYZER DALGASI (Müzik çalarken görünen)
   ============================================================ */
.audiowave {
  display: none;
  margin-top: 1em;
  margin-left: 0.3em;
  align-items: flex-end;
}

.wave {
  width: 2px;
  height: 20px;
  background-color: limegreen;
  animation: move6 1s infinite;
  border-radius: 5px;
  margin: 0.1em;
  transform-origin: bottom;
}

.wave:nth-child(1) { animation-delay: 0.2s; }
.wave:nth-child(2) { animation-delay: 0.4s; }
.wave:nth-child(3) { animation-delay: 0.6s; }

@keyframes move6 {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}