/* =========================================================
   COLLECTIONS ARCHIVE STYLE
   ========================================================= */

.collections-archive {
  background-color: #000;
  color: #fff;
  min-height: 100vh;
}

/* Judul utama */
.collections-archive h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  color: #b2fc4f; /* Spotify green */
  text-shadow: 0 0 8px rgba(29, 185, 84, 0.3);
}

/* Card Style */
.collections-archive .card {
  background-color: #121212;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
}

.collections-archive .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 15px rgba(29, 185, 84, 0.25);
}

/* Thumbnail */
.collections-archive .ratio img {
  border-radius: 12px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.collections-archive .card:hover .ratio img {
  transform: scale(1.05);
}

/* Judul */
.collections-archive .card-body h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #fff;
  margin-top: 0.75rem;
  transition: color 0.3s ease;
}

.collections-archive .card:hover h5 {
  color: #b2fc4f;
}

/* Tombol */
.collections-archive .btn {
  font-size: 0.85rem;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.5px;
  padding: 0.4rem 1.2rem;
  border-radius: 20px;
  border: 1px solid #b2fc4f;
  color: #b2fc4f;
  transition: all 0.3s ease;
}

.collections-archive .btn:hover {
  background-color: #b2fc4f;
  color: #000;
  box-shadow: 0 0 10px rgba(29, 185, 84, 0.5);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .collections-archive h2 {
    font-size: 1.8rem;
  }

  .collections-archive .btn {
    font-size: 0.8rem;
    width: 100%;
  }
}

@media (max-width: 576px) {
  .collections-archive {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .collections-archive h2 {
    font-size: 1.5rem;
  }

  .collections-archive .row {
    row-gap: 1.5rem;
  }
}