/* ============================================================
   PODCAST.CSS - Podcast Bölümü
   ------------------------------------------------------------
   Bu dosya, podcast bölümünün kart buton stillerini,
   renk temalarını, seçim modunu ve responsive kurallarını içerir.
   ============================================================ */

/* ============================================================
   1. KART KONTEYNERİ - YAN YANA DİZİLİM
   ============================================================ */
.kart-konteyneri {
  display: flex;
  flex-direction: row;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

/* ============================================================
   2. KART RENK TEMALARI
   ============================================================ */
.kart-buton.kirmizi {
  background-color: #f43f5e;
}

.kart-buton.mavi {
  background-color: #3b82f6;
}

.kart-buton.yesil {
  background-color: #22c55e;
}

.kart-buton.mor {
  background-color: #8b5cf6;
}

.kart-buton.turuncu {
  background-color: #f97316;
}

.kart-buton.camgobegi {
  background-color: #14b8a6;
}

/* ============================================================
   3. KART TEMEL STİLLERİ
   ============================================================ */
.kart-buton {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 100px;
  width: 250px;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  transition: 400ms;
  margin: 0;
}

/* ============================================================
   4. KART İÇERİK STİLLERİ
   ============================================================ */
.kart-buton .kart-baslik {
  font-size: 1em;
  font-weight: 700;
}

.kart-buton .kart-programci {
  font-size: .7em;
}

/* ============================================================
   5. HOVER EFEKTLERİ
   ============================================================ */
.kart-buton:hover {
  transform: scale(1.1, 1.1);
}

.kart-konteyneri:hover>.kart-buton:not(:hover) {
  filter: blur(10px);
  transform: scale(0.9, 0.9);
}

/* ============================================================
   6. SEÇİLİ KART STİLİ (AKTİF DURUM)
   ============================================================ */
.kart-buton.secili {
  border: 3px solid #ffffff;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
  transform: scale(1.05, 1.05);
}

/* ============================================================
   7. SEÇİM MODU DURUMUNDA HOVER EFEKTİ
   ============================================================ */
.kart-konteyneri.secim-modu .kart-buton.secili:hover {
  transform: scale(1.1, 1.1);
}

.kart-konteyneri.secim-modu:hover>.kart-buton:not(.secili):not(:hover) {
  filter: blur(10px);
  transform: scale(0.9, 0.9);
}

/* ============================================================
   8. GİZLİ ELEMAN STİLİ
   ============================================================ */
.gizli {
  display: none;
}

/* ============================================================
   9. RESPONSIVE - BÜYÜK TABLET / KÜÇÜK LAPTOP (1024px altı)
   ============================================================ */
@media (max-width: 1024px) {
  .kart-konteyneri {
    gap: 12px;
  }

  .kart-buton {
    width: 230px;
    height: 95px;
  }
}

/* ============================================================
   10. RESPONSIVE - TABLET (768px altı)
   ============================================================ */
@media (max-width: 768px) {
  .kart-konteyneri {
    gap: 10px;
  }

  .kart-buton {
    width: 200px;
    height: 90px;
    flex: 0 1 calc(50% - 10px);
  }
}

/* ============================================================
   11. RESPONSIVE - MOBİL (480px altı)
   ============================================================ */
@media (max-width: 480px) {
  .kart-konteyneri {
    gap: 8px;
  }

  .kart-buton {
    width: 170px;
    height: 85px;
    flex: 0 1 calc(50% - 8px);
  }

  .kart-buton .kart-baslik {
    font-size: 0.9em;
  }

  .kart-buton .kart-programci {
    font-size: 0.65em;
  }
}