/* ============================================================
   BETPIR — effects.css
   Katmanlı arka plan sistemi, dünya ağı haritası, sinematik
   hero efektleri ve mikro etkileşimler.
   ============================================================ */

/* ============================================================
   1. KATMANLI ARKA PLAN SİSTEMİ
   ============================================================ */
.bg-stack {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* --- Katman 1: derin gradyan --- */
.bg-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 78% 12%,  rgba(0, 120, 220, .22), transparent 58%),
    radial-gradient(ellipse 90% 70%  at 12% 82%,  rgba(20, 60, 180, .18), transparent 60%),
    radial-gradient(ellipse 140% 100% at 50% 50%, #071427 0%, #050d1c 42%, #02060f 100%);
}

/* --- Katman 3: hareketli ışık sisi --- */
.bg-fog { position: absolute; inset: -12%; }
.fog {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .42;
  mix-blend-mode: screen;
}
.fog-1 {
  width: 62vw; height: 62vw;
  max-width: 900px; max-height: 900px;
  top: -14%; right: -10%;
  background: radial-gradient(circle, rgba(0, 176, 255, .5), transparent 66%);
  animation: fogDrift1 46s ease-in-out infinite;
}
.fog-2 {
  width: 55vw; height: 55vw;
  max-width: 780px; max-height: 780px;
  bottom: -18%; left: -12%;
  background: radial-gradient(circle, rgba(31, 90, 220, .46), transparent 66%);
  animation: fogDrift2 58s ease-in-out infinite;
}
.fog-3 {
  width: 44vw; height: 44vw;
  max-width: 620px; max-height: 620px;
  top: 36%; left: 40%;
  background: radial-gradient(circle, rgba(87, 227, 255, .22), transparent 68%);
  animation: fogDrift3 68s ease-in-out infinite;
}
@keyframes fogDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-5vw, 4vh) scale(1.12); }
  66%      { transform: translate(3vw, -3vh) scale(.94); }
}
@keyframes fogDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(6vw, -5vh) scale(1.15); }
  70%      { transform: translate(-2vw, 3vh) scale(.96); }
}
@keyframes fogDrift3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .18; }
  50%      { transform: translate(-46%, -56%) scale(1.24); opacity: .34; }
}

/* --- Aurora şeritleri --- */
.bg-aurora { position: absolute; inset: 0; opacity: .5; }
.aurora {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 320px;
  filter: blur(74px);
  mix-blend-mode: screen;
  border-radius: 50%;
}
.aurora-1 {
  top: 6%;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 255, .3), rgba(120, 80, 255, .22), transparent);
  animation: auroraSlide 34s ease-in-out infinite;
}
.aurora-2 {
  bottom: 12%;
  background: linear-gradient(90deg, transparent, rgba(31, 124, 255, .26), rgba(0, 220, 255, .16), transparent);
  animation: auroraSlide 46s ease-in-out infinite reverse;
}
@keyframes auroraSlide {
  0%, 100% { transform: translateX(-8%) skewY(-2deg); opacity: .45; }
  50%      { transform: translateX(8%) skewY(2deg);  opacity: .75; }
}

/* --- Katman 4: dünya ağı görselleştirmesi --- */
.bg-world {
  position: absolute;
  top: 50%; left: 50%;
  width: min(1500px, 132vw);
  transform: translate(-50%, -52%);
  opacity: .72;
  transition: opacity .6s var(--ease);
  will-change: opacity, transform;
}
.bg-world svg { width: 100%; height: auto; overflow: visible; }

.map-dot {
  fill: rgba(96, 170, 240, .34);
  transition: fill .4s ease;
}
.map-dot.lit { fill: rgba(120, 220, 255, .62); }

.map-node-glow { fill: url(#nodeGlow); }
.map-node-core {
  fill: #b6f2ff;
  filter: url(#softGlow);
}
.map-node-ring {
  fill: none;
  stroke: rgba(87, 227, 255, .7);
  stroke-width: 1;
}

.map-route {
  fill: none;
  stroke: url(#routeGrad);
  stroke-width: 1.1;
  opacity: .5;
}
.map-signal {
  fill: none;
  stroke: #9ef2ff;
  stroke-width: 1.9;
  stroke-linecap: round;
  filter: url(#softGlow);
}

/* Düğüm nabzı */
@keyframes nodePulse {
  0%   { transform: scale(.4); opacity: .85; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.map-node-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: nodePulse 3.6s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes coreFlicker {
  0%, 100% { opacity: .95; }
  50%      { opacity: .55; }
}
.map-node-core { animation: coreFlicker 4.2s ease-in-out infinite; }

/* Enerji sinyali (rota üzerinde ilerleyen çizgi) */
@keyframes signalTravel {
  0%   { stroke-dashoffset: var(--len); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.map-signal {
  stroke-dasharray: var(--dash, 26) var(--len);
  animation: signalTravel var(--dur, 6s) linear var(--delay, 0s) infinite;
}

/* --- Katman 2: parçacık alanı --- */
.bg-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
}

/* --- Katman 5: ince ızgara --- */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(110, 180, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 180, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 20%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 20%, transparent 92%);
  animation: gridDrift 60s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 64px 64px, 64px 64px; }
}

/* --- Işık huzmeleri --- */
.bg-beams { position: absolute; inset: 0; overflow: hidden; }
.beam {
  position: absolute;
  top: -40%;
  width: 1px;
  height: 180%;
  background: linear-gradient(180deg, transparent, rgba(87, 227, 255, .5), transparent);
  filter: blur(.6px);
  opacity: 0;
}
.beam-1 { left: 18%; transform: rotate(14deg); animation: beamSweep 17s ease-in-out infinite; }
.beam-2 { left: 52%; transform: rotate(-9deg); animation: beamSweep 23s ease-in-out 5s infinite; }
.beam-3 { left: 81%; transform: rotate(11deg); animation: beamSweep 29s ease-in-out 11s infinite; }
@keyframes beamSweep {
  0%, 100% { opacity: 0; }
  12%      { opacity: .55; }
  40%      { opacity: .18; }
  60%      { opacity: 0; }
}

/* --- Kenar vinyet --- */
.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 85% at 50% 45%, transparent 40%, rgba(1, 4, 12, .72) 100%);
}

/* ============================================================
   2. SİNEMATİK HERO EFEKTLERİ
   ============================================================ */

/* Işık süpürmesi */
.hero-sweep {
  position: absolute;
  top: 0; left: -50%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(120, 220, 255, .07), transparent);
  transform: skewX(-14deg);
  animation: heroSweep 11s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroSweep {
  0%, 68%  { left: -50%; }
  100%     { left: 130%; }
}

/* Yatay tarama çizgisi */
.hero-scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(87, 227, 255, .38), transparent);
  filter: blur(1px);
  animation: heroScan 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroScan {
  0%, 100% { top: 12%; opacity: 0; }
  20%      { opacity: .8; }
  80%      { opacity: .1; }
  99%      { top: 92%; opacity: 0; }
}

/* Arka plan nabzı */
.hero::after {
  content: '';
  position: absolute;
  top: 42%; left: 50%;
  width: 78vw; height: 78vw;
  max-width: 1080px; max-height: 1080px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 170, 255, .1), transparent 62%);
  animation: heroPulse 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes heroPulse {
  0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: .95; transform: translate(-50%, -50%) scale(1.1); }
}

/* Yavaş kamera hareketi */
.hero-inner {
  animation: cameraDrift 26s ease-in-out infinite;
  z-index: 1;
}
@keyframes cameraDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -8px, 0) scale(1.006); }
}

/* Parallax katmanları */
[data-parallax] {
  will-change: transform;
  transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
.parallax-active [data-parallax] { transition: transform .18s linear; }

/* Enerji izi — hero başlığı altı */
.hero h1 { position: relative; }
.hero-content .pill { position: relative; overflow: hidden; }
.hero-content .pill::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(160, 235, 255, .28), transparent);
  animation: pillSweep 6.5s ease-in-out infinite;
}
@keyframes pillSweep {
  0%, 70% { left: -60%; }
  100%    { left: 130%; }
}

/* ============================================================
   3. BAYKUŞ MARKA DETAYLARI (ince kullanım)
   ============================================================ */

/* Logo etrafında "baykuş gözü" halkası */
.logo-mark { position: relative; }
.logo-mark::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(87, 227, 255, .3);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .4s var(--ease), transform .5s var(--ease-out);
  pointer-events: none;
}
.logo:hover .logo-mark::after { opacity: 1; transform: scale(1); }

/* Bölüm başlıklarında ince "iris" işareti */
.eyebrow { position: relative; padding-left: 20px; }
.eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 11px; height: 11px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  box-shadow: inset 0 0 0 2.5px rgba(2, 8, 20, 1), 0 0 10px rgba(0, 200, 255, .55);
}
.section-head .eyebrow { padding-left: 0; }
.section-head .eyebrow::before { display: none; }

/* Kart ikonlarında çift halka (baykuş gözü) */
.card-icon { position: relative; }
.card-icon::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 1px solid rgba(87, 227, 255, .18);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .4s var(--ease), transform .45s var(--ease-out);
}
.card:hover .card-icon::after { opacity: 1; transform: scale(1); }

/* ============================================================
   4. MİKRO ETKİLEŞİMLER
   ============================================================ */

/* --- Düğmeler: manyetik + parlama genişlemesi + dalga --- */
.btn { will-change: transform; isolation: isolate; }

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(160, 235, 255, .3), transparent 65%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.btn:hover::before { opacity: 1; }

.btn-primary:hover { box-shadow: 0 18px 44px rgba(0, 190, 255, .5), 0 0 0 1px rgba(160, 235, 255, .35); }
.btn-outline:hover { box-shadow: 0 16px 38px rgba(0, 170, 255, .26), inset 0 0 22px rgba(0, 200, 255, .12); }

/* Dalga (ripple) */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  transform: scale(0);
  opacity: .7;
  pointer-events: none;
  animation: rippleOut .62s var(--ease-out) forwards;
}
.btn-primary .ripple { background: rgba(2, 20, 34, .3); }
@keyframes rippleOut {
  to { transform: scale(2.6); opacity: 0; }
}

/* --- Kartlar: 3B eğim + ışık tepkisi --- */
.card, .post, .side-box, .notice, .stat {
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-active { transition: transform .1s linear !important; }

/* Dinamik parlayan kenar */
.card::after,
.notice::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    rgba(87, 227, 255, .55),
    rgba(31, 124, 255, .12) 40%,
    transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.card:hover::after,
.notice:hover::after { opacity: 1; }

/* glow-card üst çizgisini koru */
.glow-card::after { inset: auto; padding: 0; background: linear-gradient(90deg, transparent, var(--primary), transparent); -webkit-mask: none; mask: none; top: 0; left: 22px; right: 22px; height: 1px; }

/* Cam yansıması */
.card::before { z-index: 1; }
.hero-panel::after,
.side-cta::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), transparent);
  pointer-events: none;
}
.side-cta { position: relative; overflow: hidden; }

/* --- Navigasyon: aktif durum parlaması --- */
.nav-link.active {
  color: #fff;
  text-shadow: 0 0 18px rgba(87, 227, 255, .55);
}
.nav-link::after { box-shadow: 0 0 12px rgba(0, 200, 255, .8); }

/* --- İstatistik kartları: ışık tepkisi --- */
.stat { position: relative; overflow: hidden; }
.stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 200, 255, .12), transparent 65%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.stat:hover::before { opacity: 1; }

/* --- SSS: açık öğede yan enerji çizgisi --- */
.faq-item { position: relative; }
.faq-item::before {
  content: '';
  position: absolute;
  left: 0; top: 12%;
  width: 2px; height: 76%;
  border-radius: 2px;
  background: var(--grad);
  box-shadow: 0 0 14px rgba(0, 200, 255, .7);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .42s var(--ease-out);
}
.faq-item.open::before { transform: scaleY(1); }

/* --- Duyuru kartları: sol kenar akışı --- */
.notice { position: relative; overflow: hidden; }

/* --- Başa dön: halka göstergesi --- */
.to-top::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(87, 227, 255, .28);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .35s var(--ease), transform .4s var(--ease-out);
}
.to-top:hover::after { opacity: 1; transform: scale(1); }

/* ============================================================
   5. KAYDIRMA DENEYİMİ
   ============================================================ */

/* Kademeli kart girişleri için ek gecikme sınıfları */
[data-animate].stagger-1 { transition-delay: 80ms; }
[data-animate].stagger-2 { transition-delay: 160ms; }
[data-animate].stagger-3 { transition-delay: 240ms; }

/* Bölüm ayırıcı enerji çizgisi */
.section-alt::before,
.section-alt::after {
  background: linear-gradient(90deg, transparent, rgba(0, 200, 255, .45), transparent);
  box-shadow: 0 0 18px rgba(0, 200, 255, .3);
}

/* ============================================================
   6. HAREKET AZALTMA
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fog, .aurora, .beam, .bg-grid,
  .hero-sweep, .hero-scan, .hero-inner, .hero::after,
  .map-node-ring, .map-node-core, .map-signal,
  .hero-content .pill::after {
    animation: none !important;
  }
  .hero-sweep, .hero-scan, .beam { opacity: 0 !important; }
  [data-parallax] { transform: none !important; }
  .map-signal { opacity: .35; }
}

/* Düşük güçlü cihazlarda ağır katmanları kıs */
@media (max-width: 768px) {
  .bg-world { opacity: .4; width: 190vw; }
  .bg-aurora { opacity: .32; }
  .fog { filter: blur(80px); opacity: .34; }
  .bg-beams { display: none; }
  .hero-scan { display: none; }
  .hero-inner { animation: none; }
}

@media (hover: none) {
  .card::after, .notice::after { display: none; }
  .btn::before { display: none; }
}