/* ============================================================
   animations.css — Animasyonlar & Geçiş Efektleri
   ============================================================ */

/* ── Temel Keyframes ───────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .55; transform: scale(1.25); }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes float {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

@keyframes morphFrame {
  0%   { border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%; }
  50%  { border-radius: 55% 45% 40% 60% / 55% 60% 40% 45%; }
  100% { border-radius: 45% 55% 60% 40% / 60% 45% 55% 40%; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Hazır Animasyon Sınıfları ─────────────────────────────── */
.animate-fade-up {
  animation: fadeUp .7s cubic-bezier(.22,.61,.36,1) both;
}

.animate-fade-in {
  animation: fadeIn .6s ease both;
}

.animate-scale-in {
  animation: scaleIn .5s cubic-bezier(.22,.61,.36,1) both;
}

/* ── Gecikme Sınıfları ─────────────────────────────────────── */
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; }

/* ── Scroll Reveal - TAMAMEN GÖRÜNÜR (JS bağımsız) ─────────── */
/* Opacity 1 — animasyon olmadan direkt göster */
.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Yükleme Spinner ───────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(122,72,40,.2);
  border-top-color: var(--clr-cinnamon);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

/* ── Shimmer (iskelet yükleme) ─────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg, var(--clr-neutral-100) 25%, var(--clr-neutral-50) 50%, var(--clr-neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
  .section        { padding-block: var(--space-12); }
  .section--lg    { padding-block: var(--space-20); }
  .container      { padding-inline: var(--space-4); }
  .btn-xl         { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
}

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Yalnızca mobilde göster/gizle */
.hide-mobile  { display: none; }
.show-mobile  { display: block; }

@media (min-width: 768px) {
  .hide-mobile  { display: block; }
  .show-mobile  { display: none; }
}