Aurora Gradient Kart

<div class="aurora-card">
  <div class="aurora-bg"></div>
  <div class="aurora-content">
    <h2>Aurora Kart</h2>
    <p>Mouse'u kartın üzerine getir ve renklerin dansını izle.</p>
    <span class="aurora-badge">Premium</span>
  </div>
</div>

.aurora-card {
  position: relative; width: 320px; padding: 40px; border-radius: 24px;
  background: #0d0f1a; overflow: hidden; cursor: pointer;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5); font-family: 'Inter', sans-serif;
  border: 1px solid rgba(255,255,255,0.08); transition: transform 0.3s;
}
.aurora-card:hover { transform: translateY(-6px); }
.aurora-bg {
  position: absolute; inset: -50%; width: 200%; height: 200%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    #6C5CE7 0%, #00cec9 25%, #fd79a8 50%, #fdcb6e 75%, #6C5CE7 100%
  );
  animation: aurora-spin 8s linear infinite;
  filter: blur(60px); opacity: 0.35;
}
@keyframes aurora-spin { to { transform: rotate(360deg); } }
.aurora-content { position: relative; z-index: 2; color: #fff; }
.aurora-content h2 { font-size: 26px; margin: 0 0 12px; font-weight: 800; }
.aurora-content p { color: #c0c0d0; line-height: 1.6; margin: 0 0 20px; font-size: 15px; }
.aurora-badge {
  display: inline-block; padding: 6px 16px; border-radius: 20px;
  background: linear-gradient(135deg, #6C5CE7, #00cec9); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}