/* ════════════════════════════════════════════════════════════════
   OtoSEO — effects.css  ·  "Light Luxe" ışıltı/efekt util kütüphanesi
   Tema-duyarlı (var() token), additive, fx- önekli. SADE & performanslı
   (transform/opacity ağırlıklı). Token'lar theme.css'te tanımlanır;
   burada güvenli fallback'lerle standalone da çalışır.
   ════════════════════════════════════════════════════════════════ */

/* ── Token fallback'leri (theme.css yoksa da bozulmasın) ───────── */
:root {
  --glow-sm: 0 0 8px rgba(109, 94, 252, .18);
  --glow-md: 0 0 18px rgba(109, 94, 252, .24);
  --glow-lg: 0 0 34px rgba(109, 94, 252, .30);
  --glass-bg: rgba(255, 255, 255, .75);
  --glass-border: rgba(214, 219, 232, .50);
  --glass-blur: 20px;
  --ring-accent: 0 0 0 3px rgba(109, 94, 252, .15);
}

/* ═══════════════════════════════════════════════════════════════
   1) CAM / BLUR YÜZEY
   ═══════════════════════════════════════════════════════════════ */
.fx-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  border: 1px solid var(--glass-border);
}

/* Cam kart: hover'da hafif kalkar, accent ring + glow + köşe hairline belirir */
.fx-card {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--r, 14px);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1),
              box-shadow .3s cubic-bezier(.32, .72, 0, 1),
              border-color .3s ease;
}
.fx-card:hover {
  transform: translateY(-3px);
  border-color: rgba(109, 94, 252, .20);
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .18), var(--glow-md);
}
.fx-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(109, 94, 252, .30), transparent 40%, transparent 60%, rgba(109, 94, 252, .20));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.fx-card:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   2) GLOW (mor accent halesi)
   ═══════════════════════════════════════════════════════════════ */
.fx-glow { box-shadow: var(--glow-md); }
.fx-glow-sm { box-shadow: var(--glow-sm); }
.fx-glow-lg { box-shadow: var(--glow-lg); }

.fx-glow-hover {
  transition: box-shadow .25s ease, transform .25s ease;
}
.fx-glow-hover:hover { box-shadow: var(--glow-lg); }

/* Nefes alan hale (logo/badge gibi sınırlı öğelerde) */
.fx-pulse-glow { animation: fx-glow-pulse 2.5s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════
   3) SHIMMER (yüzeyde yavaş geçen ışıltı sweep)
   ═══════════════════════════════════════════════════════════════ */
.fx-shimmer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, transparent 0%, rgba(109, 94, 252, .12) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: fx-shimmer 2.2s ease-in-out infinite;
}
/* ::after varyantı: opak yüzeyi bozmadan üstten ışık şeridi geçirir */
.fx-shimmer-overlay { position: relative; overflow: hidden; }
.fx-shimmer-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .22) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: fx-shimmer-sweep 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   4) RISE (hover'da hafif yukarı kalkma + gölge)
   ═══════════════════════════════════════════════════════════════ */
.fx-rise {
  transition: transform .3s cubic-bezier(.32, .72, 0, 1),
              box-shadow .3s cubic-bezier(.32, .72, 0, 1);
}
.fx-rise:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(16, 24, 40, .06), 0 24px 48px -16px rgba(16, 24, 40, .18));
}

/* ═══════════════════════════════════════════════════════════════
   5) ANIMASYONLU MOR GRADIENT ARKA PLAN
   ═══════════════════════════════════════════════════════════════ */
.fx-gradient-anim {
  background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 200% 200%;
  animation: fx-gradient-shift 4s ease infinite;
}

/* Mor gradient metin (marka/başlık/sayı vurgusu) */
.fx-gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Animasyonlu ışıltılı çizgi (header alt / footer üst kenarı) */
.fx-divider-glow {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(109, 94, 252, .30), var(--accent), rgba(109, 94, 252, .30), transparent);
  background-size: 200% 100%;
  animation: fx-line-sweep 5s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   6) SHINE (butonlarda diagonal parlama geçişi)
   ═══════════════════════════════════════════════════════════════ */
.fx-shine {
  position: relative;
  overflow: hidden;
}
.fx-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .22) 50%, transparent 100%);
  transform: translateX(-220%) skewX(-20deg);
  transition: transform .65s cubic-bezier(.32, .72, 0, 1);
  pointer-events: none;
}
.fx-shine:hover::after { transform: translateX(220%) skewX(-20deg); }

/* Çapraz accent süpürme (kart hover sheen) */
.fx-shine-sweep {
  position: relative;
  overflow: hidden;
}
.fx-shine-sweep::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(109, 94, 252, .28), transparent);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
  z-index: 1;
}
.fx-shine-sweep:hover::before { animation: fx-shine-sweep 1.1s ease-out; }

/* ═══════════════════════════════════════════════════════════════
   7) GİRİŞ ANİMASYONLARI (fade / rise-in)
   ═══════════════════════════════════════════════════════════════ */
.fx-fade-in { animation: fx-fade-in .4s cubic-bezier(.4, 0, .2, 1) both; }
.fx-rise-in { animation: fx-rise-up .5s cubic-bezier(.4, 0, .2, 1) both; }
.fx-slide-in { animation: fx-slide-in-right .45s cubic-bezier(.4, 0, .2, 1) both; }
.fx-scale-in { animation: fx-scale-in .35s cubic-bezier(.32, .72, 0, 1) both; }

/* Çocuklara kademeli gecikme (stagger) */
.fx-stagger > :nth-child(1) { animation-delay: 0ms; }
.fx-stagger > :nth-child(2) { animation-delay: 60ms; }
.fx-stagger > :nth-child(3) { animation-delay: 120ms; }
.fx-stagger > :nth-child(4) { animation-delay: 180ms; }
.fx-stagger > :nth-child(5) { animation-delay: 240ms; }
.fx-stagger > :nth-child(6) { animation-delay: 300ms; }
.fx-stagger > :nth-child(7) { animation-delay: 360ms; }
.fx-stagger > :nth-child(8) { animation-delay: 420ms; }

/* ═══════════════════════════════════════════════════════════════
   8) EK UTIL'LER (ring / float / no-scrollbar)
   ═══════════════════════════════════════════════════════════════ */
.fx-ring:focus,
.fx-ring:focus-visible {
  border-color: rgba(109, 94, 252, .30) !important;
  box-shadow: var(--ring-accent);
  outline: none;
}

.fx-float { animation: fx-float 3s ease-in-out infinite; }

.fx-no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fx-no-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ═══════════════════════════════════════════════════════════════
   @KEYFRAMES
   ═══════════════════════════════════════════════════════════════ */
@keyframes fx-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fx-rise-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fx-slide-in-right {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fx-scale-in {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fx-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes fx-shimmer-sweep {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@keyframes fx-glow-pulse {
  0%, 100% { box-shadow: var(--glow-sm); }
  50%      { box-shadow: var(--glow-lg); }
}
@keyframes fx-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes fx-line-sweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes fx-shine-sweep {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(220%) skewX(-20deg); }
}
@keyframes fx-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ═══════════════════════════════════════════════════════════════
   ERİŞİLEBİLİRLİK — hareket azaltma tercihi
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fx-shimmer,
  .fx-shimmer-overlay::after,
  .fx-pulse-glow,
  .fx-gradient-anim,
  .fx-divider-glow,
  .fx-float,
  .fx-fade-in,
  .fx-rise-in,
  .fx-slide-in,
  .fx-scale-in {
    animation: none !important;
  }
  .fx-rise,
  .fx-card,
  .fx-glow-hover,
  .fx-shine::after,
  .fx-shine-sweep::before {
    transition: none !important;
  }
}