/* ============================================
   HASINDER - ANİMASYONLAR (animations.css)
   AOS benzeri, scroll-triggered efektler
   ============================================ */

/* === TEMEL KEYFRAMES === */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@keyframes pulseRing {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* === ANİMASYON UTİLİTY === */
.anim-fade { animation: fadeIn 0.6s ease both; }
.anim-fade-up { animation: fadeInUp 0.6s ease both; }
.anim-fade-down { animation: fadeInDown 0.6s ease both; }
.anim-slide-left { animation: slideInLeft 0.6s ease both; }
.anim-slide-right { animation: slideInRight 0.6s ease both; }
.anim-scale { animation: scaleIn 0.4s ease both; }

.anim-delay-100 { animation-delay: 100ms; }
.anim-delay-200 { animation-delay: 200ms; }
.anim-delay-300 { animation-delay: 300ms; }
.anim-delay-400 { animation-delay: 400ms; }
.anim-delay-500 { animation-delay: 500ms; }
.anim-delay-700 { animation-delay: 700ms; }

/* === SCROLL-TRIGGERED (data-aos benzeri) === */
[data-anim] { opacity: 0; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
[data-anim="fade"] { opacity: 0; }
[data-anim="up"] { opacity: 0; transform: translateY(30px); }
[data-anim="down"] { opacity: 0; transform: translateY(-30px); }
[data-anim="left"] { opacity: 0; transform: translateX(-30px); }
[data-anim="right"] { opacity: 0; transform: translateX(30px); }
[data-anim="scale"] { opacity: 0; transform: scale(0.9); }
[data-anim].visible { opacity: 1; transform: translate(0,0) scale(1); }

/* === HOVER EFECTLERİ === */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }

.hover-glow {
  transition: box-shadow var(--transition-base);
}
.hover-glow:hover { box-shadow: 0 0 30px rgba(212,175,55,0.4); }

.hover-scale {
  transition: transform var(--transition-base);
}
.hover-scale:hover { transform: scale(1.05); }

.hover-tilt {
  transition: transform var(--transition-base);
}
.hover-tilt:hover { transform: rotate(-2deg) scale(1.02); }

.hover-shine {
  position: relative;
  overflow: hidden;
}
.hover-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s;
}
.hover-shine:hover::after { left: 100%; }

/* === SKELETON LOADING === */
.skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

/* === LOADING SPINNER === */
.spinner {
  display: inline-block;
  width: 24px; height: 24px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* === PULSE DOT === */
.pulse-dot {
  width: 8px; height: 8px;
  background: var(--success);
  border-radius: 50%;
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--success);
  animation: pulseRing 1.5s ease-out infinite;
  z-index: -1;
}