/* =========================================================
   animations.css — Scroll reveal, hover, hero giriş, sayaç
   ========================================================= */

/* prefers-reduced-motion: tüm animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------
   1. Scroll Reveal — başlangıç durumları
   --------------------------------------------------------- */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.65s ease;
  will-change: opacity, transform;
}

.reveal        { transform: translateY(32px); }
.reveal-up     { transform: translateY(48px); }
.reveal-left   { transform: translateX(-48px); }
.reveal-right  { transform: translateX(48px); }
.reveal-scale  { transform: scale(0.92); }

/* Görünür hale gelince */
.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Sıralı gecikmeler — grid/list içindeki çocuklar için */
.stagger-children > *:nth-child(1)  { transition-delay: 0.05s; }
.stagger-children > *:nth-child(2)  { transition-delay: 0.12s; }
.stagger-children > *:nth-child(3)  { transition-delay: 0.19s; }
.stagger-children > *:nth-child(4)  { transition-delay: 0.26s; }
.stagger-children > *:nth-child(5)  { transition-delay: 0.33s; }
.stagger-children > *:nth-child(6)  { transition-delay: 0.40s; }
.stagger-children > *:nth-child(7)  { transition-delay: 0.47s; }
.stagger-children > *:nth-child(8)  { transition-delay: 0.54s; }
.stagger-children > *:nth-child(n+9) { transition-delay: 0.60s; }

/* ---------------------------------------------------------
   2. Hero Giriş Animasyonları
   --------------------------------------------------------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-content h1 {
  animation: heroFadeUp 0.7s ease both;
  animation-delay: 0.15s;
}

.hero-content p {
  animation: heroFadeUp 0.7s ease both;
  animation-delay: 0.32s;
}

.hero-cta {
  animation: heroFadeIn 0.7s ease both;
  animation-delay: 0.52s;
}

/* Sağdaki hero görseli / dekoratif element */
.hero-image,
.hero-visual {
  animation: heroFadeIn 0.9s ease both;
  animation-delay: 0.45s;
}

/* ---------------------------------------------------------
   3. Yüzen (Float) Dekoratif Animasyon
   --------------------------------------------------------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.float-anim {
  animation: floatY 4s ease-in-out infinite;
}

/* ---------------------------------------------------------
   4. Kart Hover Efektleri
   --------------------------------------------------------- */
.sektor-card,
.cozum-card,
.product-card,
.blog-card,
.feature-card,
.info-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.sektor-card:hover,
.cozum-card:hover,
.product-card:hover,
.blog-card:hover,
.feature-card:hover,
.info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

/* ---------------------------------------------------------
   5. Buton Mikro-Animasyonları
   --------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-outline {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.25s ease, color 0.25s ease;
  will-change: transform;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(48, 213, 200, 0.30);
}

.btn-primary:active,
.btn-secondary:active,
.btn-outline:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ---------------------------------------------------------
   6. Sayı Sayacı (.count-up)
   --------------------------------------------------------- */
.count-up {
  display: inline-block;
  transition: color 0.3s ease;
}

/* ---------------------------------------------------------
   7. Çizgi / Separator Reveal Animasyonu
   --------------------------------------------------------- */
@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.section-divider.is-visible,
.animate-line.is-visible {
  animation: lineGrow 0.7s ease both;
  transform-origin: left center;
}

/* ---------------------------------------------------------
   8. Pulse — CTA / badge vurgu efekti
   --------------------------------------------------------- */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(48, 213, 200, 0.45); }
  50%       { box-shadow: 0 0 0 10px rgba(48, 213, 200, 0); }
}

.pulse-anim {
  animation: pulse 2.4s ease-in-out infinite;
}