/* ============================================
   ARXES STUDIOS — Fare / Cursor Efektleri
   ============================================ */

/* --- Mouse spotlight: fare nerede orada hafif aydınlık --- */
.mouse-spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background: radial-gradient(
    circle 40vmax at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 204, 0, 0.055) 0%,
    rgba(142, 68, 173, 0.04) 30%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
}

body.has-mouse .mouse-spotlight { opacity: 1; }

/* --- Custom cursor (sadece pointer cihazlarda) --- */
.cursor-wrap {
  pointer-events: none;
  position: fixed;
  z-index: 99999;
  mix-blend-mode: difference;
}

.cursor-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-gold);
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.6);
}

.cursor-dot.hover {
  width: 44px;
  height: 44px;
  opacity: 0.7;
  border: 2px solid var(--accent-gold);
  background: transparent;
}

.cursor-ring {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 204, 0, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s, border-color 0.25s, opacity 0.25s;
  pointer-events: none;
  z-index: 99998;
}

.cursor-ring.hover {
  width: 56px;
  height: 56px;
  border-color: var(--accent-gold);
  opacity: 0.9;
}

body.cursor-custom { cursor: none; }
body.cursor-custom a, body.cursor-custom button { cursor: none; }

/* --- Floating blobs: fareye doğru hareket eden arka plan şekilleri --- */
.blobs-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.2;
  will-change: transform;
  transition: opacity 0.4s;
}

.blob-1 { width: 320px; height: 320px; background: var(--accent-gold); top: 10%; left: 10%; }
.blob-2 { width: 280px; height: 280px; background: var(--accent-purple); top: 60%; right: 15%; }
.blob-3 { width: 240px; height: 240px; background: rgba(0, 217, 255, 0.4); bottom: 20%; left: 30%; }
.blob-4 { width: 200px; height: 200px; background: var(--accent-gold); top: 40%; right: 40%; }
.blob-5 { width: 260px; height: 260px; background: var(--accent-purple); bottom: 40%; right: 20%; }
.blob-6 { width: 180px; height: 180px; background: rgba(255, 204, 0, 0.5); top: 70%; left: 50%; }

body.has-mouse .blob:hover,
body.has-mouse .blob.attract { opacity: 0.35; }

/* --- 3D kart eğimi (perspektif konteyner) --- */
.tilt-wrap {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.card-tilt {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.3s;
  will-change: transform;
}

.card-tilt .game-card-thumb,
.card-tilt .game-card-body {
  transform: translateZ(12px);
}
.card-tilt .process-icon,
.card-tilt h4,
.card-tilt p {
  transform: translateZ(8px);
}

/* Manyetik buton: fare yaklaşınca hafif çekilir --- */
.btn-magnetic {
  position: relative;
  transition: transform 0.2s ease-out;
}

/* Parallax: fare ile hafif kayma (hero arka plan) --- */
.hero-bg.parallax-mouse {
  will-change: transform;
}