/* CSS untuk halaman Dzikir & Sholawat */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.card {
  border: 2px solid transparent;
  background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
                    linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: fadeIn 0.8s ease-out;
}

.dzikir-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeIn 0.5s ease-out forwards;
  opacity: 0; /* Mulai dari transparan */
  animation-delay: calc(var(--item-index, 0) * 100ms);
}

.dzikir-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(55, 117, 181, 0.2);
}

.dzikir-item {
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  position: relative;
  overflow: hidden;
}

.dzikir-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.dzikir-item:hover::before {
  left: 100%;
}