/* ============================================================
   animations.css — Animasyon tanımları
   ============================================================ */

/* ---- Pulse (CTA buton) ---- */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,93,4,.5); }
  50%       { box-shadow: 0 0 0 12px rgba(232,93,4,0); }
}
.pulse { animation: pulse 2.4s ease infinite; }
.pulse:hover { animation: none; }

/* ---- Ripple (buton tıklaması) ---- */
.ripple-wrap { position: relative; overflow: hidden; }
.ripple-effect {
  position: absolute; border-radius: 50%;
  transform: scale(0); animation: ripple .55s linear;
  background: rgba(255,255,255,.35); pointer-events: none;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ---- Fade In Up (temel) ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp .5s ease forwards; }

/* ---- Dissolve (login başarılı) ---- */
@keyframes dissolve {
  to { opacity: 0; transform: scale(.95); }
}
.dissolve { animation: dissolve .4s ease forwards; }

/* ---- Float (partiküller) ---- */
@keyframes float1 { 0%,100%{transform:translate(0,0) rotate(0)} 33%{transform:translate(20px,-30px) rotate(60deg)} 66%{transform:translate(-15px,15px) rotate(-30deg)} }
@keyframes float2 { 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(-25px,-20px) rotate(90deg)} }
@keyframes float3 { 0%,100%{transform:translate(0,0) rotate(0)} 40%{transform:translate(15px,25px) rotate(-60deg)} 80%{transform:translate(-10px,-15px) rotate(30deg)} }

/* Geometrik partiküller */
.particle {
  position: absolute; border-radius: 3px;
  opacity: .12; pointer-events: none;
}
.particle:nth-child(1)  { width:18px;height:18px;background:var(--orange);top:15%;left:8%;animation:float1 7s ease-in-out infinite; }
.particle:nth-child(2)  { width:10px;height:10px;background:#3B82F6;top:60%;left:5%;animation:float2 9s ease-in-out infinite; }
.particle:nth-child(3)  { width:24px;height:24px;background:var(--orange);top:30%;right:10%;animation:float3 8s ease-in-out infinite; border-radius:50%; }
.particle:nth-child(4)  { width:14px;height:14px;background:#10B981;top:75%;right:8%;animation:float1 10s ease-in-out infinite; }
.particle:nth-child(5)  { width:8px;height:8px;background:#fff;top:85%;left:20%;animation:float2 6s ease-in-out infinite; border-radius:50%; }
.particle:nth-child(6)  { width:20px;height:20px;background:#3B82F6;top:45%;right:20%;animation:float3 11s ease-in-out infinite; }

/* ---- 3D Kart (login sağ panel) ---- */
@keyframes rotateCard {
  0%,100% { transform: perspective(600px) rotateY(0deg) rotateX(4deg); }
  50%     { transform: perspective(600px) rotateY(8deg) rotateX(-4deg); }
}
.card-3d { animation: rotateCard 6s ease-in-out infinite; transform-style: preserve-3d; }

/* ---- Progress bar dolma ---- */
@keyframes progressFill { from { width: 0; } }
.progress-bar { animation: progressFill .8s ease forwards; }

/* ---- Counter (sayaç) ---- */
.counter { display: inline-block; }

/* ---- Neon focus (input) ---- */
@keyframes neonPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(232,93,4,.2), 0 0 12px rgba(232,93,4,.1); }
  50%     { box-shadow: 0 0 0 4px rgba(232,93,4,.35), 0 0 20px rgba(232,93,4,.2); }
}
.auth-card .form-control:focus { animation: neonPulse 1.5s ease infinite; }

/* ---- Slide In Drawer ---- */
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.sidebar.open { animation: slideIn .3s ease; }

/* ---- Skeleton loader ---- */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--gray200) 25%, var(--gray100) 50%, var(--gray200) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
  display: block;
}