/* ============================================================
   ACETERNITY UI + ANIMATE-UI — Vanilla CSS Port
   Efektler: Aurora, Background Beams, Meteors, Particles,
   Spotlight, Noise Grain, Grid, Shimmer Border
   ============================================================ */

/* ============================================================
   1. AURORA BACKGROUND (Aceternity UI)
   Kuzey ışıkları efekti — çok katmanlı gradient animasyonu
   ============================================================ */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
  background: #0a1628;
}

.aurora-layer {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  opacity: 0.55;
  mix-blend-mode: screen;
  filter: blur(80px);
  border-radius: 50%;
}

.aurora-1 {
  background: radial-gradient(ellipse 80% 50% at 20% 40%,
    rgba(91, 156, 255, 0.5) 0%,
    rgba(167, 139, 250, 0.3) 35%,
    transparent 70%);
  animation: aurora-move-1 18s ease-in-out infinite;
}

.aurora-2 {
  background: radial-gradient(ellipse 70% 60% at 80% 30%,
    rgba(244, 114, 182, 0.35) 0%,
    rgba(167, 139, 250, 0.25) 40%,
    transparent 70%);
  animation: aurora-move-2 22s ease-in-out infinite reverse;
}

.aurora-3 {
  background: radial-gradient(ellipse 90% 40% at 50% 80%,
    rgba(52, 211, 153, 0.2) 0%,
    rgba(79, 142, 247, 0.15) 50%,
    transparent 70%);
  animation: aurora-move-3 15s ease-in-out infinite;
}

.aurora-4 {
  background: radial-gradient(ellipse 60% 70% at 10% 70%,
    rgba(251, 146, 60, 0.15) 0%,
    rgba(236, 72, 153, 0.1) 50%,
    transparent 70%);
  animation: aurora-move-4 26s ease-in-out infinite reverse;
}

@keyframes aurora-move-1 {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
  25%      { transform: translate(5%,8%) rotate(8deg) scale(1.1); }
  50%      { transform: translate(10%,-5%) rotate(-6deg) scale(0.95); }
  75%      { transform: translate(-5%,10%) rotate(4deg) scale(1.05); }
}

@keyframes aurora-move-2 {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
  33%      { transform: translate(-8%,5%) rotate(-10deg) scale(1.12); }
  66%      { transform: translate(6%,-8%) rotate(7deg) scale(0.92); }
}

@keyframes aurora-move-3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(4%,-6%) scale(1.1); }
}

@keyframes aurora-move-4 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  40%      { transform: translate(10%,6%) rotate(12deg); }
  80%      { transform: translate(-6%,-4%) rotate(-8deg); }
}

/* Noise grain overlay */
.aurora-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: 0.025;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   2. BACKGROUND BEAMS (Aceternity UI SVG Port)
   Işın demetleri efekti
   ============================================================ */
.beams-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.beam {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  transform-origin: top center;
  opacity: 0;
  animation: beam-fall linear infinite;
}

.beam::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(79, 142, 247, 0.6) 40%,
    rgba(139, 92, 246, 0.4) 70%,
    transparent 100%);
  border-radius: 99px;
  animation: beam-glow 3s ease-in-out infinite;
}

.beam::after {
  content: '';
  position: absolute;
  top: 15%;
  left: -2px;
  width: 5px;
  height: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 99px;
  filter: blur(2px);
  box-shadow: 0 0 12px 4px rgba(79, 142, 247, 0.8),
              0 0 24px 8px rgba(139, 92, 246, 0.4);
}

@keyframes beam-fall {
  0%   { opacity: 0; transform: translateY(-100%); }
  5%   { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(100vh); }
}

@keyframes beam-glow {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ============================================================
   3. METEOR SHOWER (Aceternity UI)
   Göktaşı yağmuru efekti
   ============================================================ */
.meteors-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.meteor {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 80px;
  background: linear-gradient(to bottom, white, transparent);
  opacity: 0;
  transform-origin: top;
  transform: rotate(215deg) translateX(-50%);
  border-radius: 99px;
  animation: meteor-fall linear infinite;
}

.meteor::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 8px 2px rgba(255,255,255,0.8), 0 0 16px 4px rgba(79,142,247,0.6);
}

@keyframes meteor-fall {
  0%   { opacity: 0; transform: rotate(215deg) translateX(0) translateY(-100px); }
  5%   { opacity: 1; }
  80%  { opacity: 0.6; }
  100% { opacity: 0; transform: rotate(215deg) translateX(0) translateY(600px); }
}

/* ============================================================
   4. PARTICLE DOTS (Animate-UI)
   Yüzen noktacıklar efekti
   ============================================================ */
.particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   5. GRID PATTERN (Aceternity UI)
   Noktalı / çizgili arka plan grid'i
   ============================================================ */
.bg-grid-dots {
  background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 28px 28px;
}

.bg-grid-lines {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

.bg-grid-fade {
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
}

/* ============================================================
   6. SHIMMER BORDER (Magic UI)
   Dönen parlak kenarlık
   ============================================================ */
.shimmer-border {
  position: relative;
  border-radius: var(--r-xl, 18px);
  overflow: hidden;
}

.shimmer-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: conic-gradient(
    from var(--shimmer-angle, 0deg),
    transparent 0deg,
    rgba(79, 142, 247, 0.6) 60deg,
    rgba(139, 92, 246, 0.6) 120deg,
    rgba(236, 72, 153, 0.4) 180deg,
    transparent 240deg
  );
  border-radius: inherit;
  animation: shimmer-rotate 4s linear infinite;
  z-index: -1;
}

.shimmer-border::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--bg-card, #111428);
  border-radius: calc(var(--r-xl, 18px) - 1px);
  z-index: 0;
}

.shimmer-border > * { position: relative; z-index: 1; }

@property --shimmer-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes shimmer-rotate {
  to { --shimmer-angle: 360deg; }
}

/* ============================================================
   7. SPOTLIGHT (Aceternity UI)
   Mouse takipli spotlight efekti
   ============================================================ */
.spotlight-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.spotlight {
  position: absolute;
  pointer-events: none;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(79, 142, 247, 0.08) 0%,
    rgba(139, 92, 246, 0.04) 30%,
    transparent 60%);
  filter: blur(20px);
  transition: left 0.1s ease, top 0.1s ease;
  will-change: left, top;
}

/* ============================================================
   8. GLOW BORDER (Animate-UI)
   Pulsing glow kenarlık
   ============================================================ */
.glow-border {
  position: relative;
}

.glow-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #4f8ef7, #8b5cf6, #ec4899, #4f8ef7);
  background-size: 300%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  animation: glow-border-move 4s linear infinite;
}

.glow-border:hover::before { opacity: 0.6; }

@keyframes glow-border-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================================
   9. TYPING CURSOR
   ============================================================ */
.typing-cursor::after {
  content: '|';
  animation: cursor-blink 1s step-end infinite;
  color: #4f8ef7;
  margin-left: 2px;
}

@keyframes cursor-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ============================================================
   10. NUMBER TICKER (Animate-UI)
   Sayı sayma animasyonu wrapper
   ============================================================ */
.number-ticker {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   11. WORD REVEAL (Animate-UI)
   ============================================================ */
.word-reveal-container { overflow: hidden; }

.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.word-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   12. CARD SPOTLIGHT (Aceternity)
   Kart içinde spotlight
   ============================================================ */
.card-spotlight {
  position: relative;
  overflow: hidden;
}

.card-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--card-x, 50%) var(--card-y, 50%),
    rgba(79, 142, 247, 0.1),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.card-spotlight:hover::before { opacity: 1; }

/* ============================================================
   13. FLOATING LABELS (Premium Input)
   ============================================================ */
.floating-label-wrap {
  position: relative;
  margin-bottom: 20px;
}

.floating-label-wrap input,
.floating-label-wrap textarea {
  padding-top: 22px !important;
}

.floating-label-wrap label {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 0.95rem !important;
  color: var(--text-muted) !important;
  pointer-events: none;
  transition: all 0.2s ease;
  transform-origin: left;
  margin-bottom: 0 !important;
}

.floating-label-wrap input:focus + label,
.floating-label-wrap input:not(:placeholder-shown) + label,
.floating-label-wrap textarea:focus + label,
.floating-label-wrap textarea:not(:placeholder-shown) + label {
  top: 6px;
  font-size: 0.68rem !important;
  color: #7aa8ff !important;
}

/* ============================================================
   14. HERO BG LAYERING SYSTEM
   Tüm efektleri hero'ya doğru bindirme
   ============================================================ */
.hero-premium {
  isolation: isolate;
}

.hero-bg-effects {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-premium .container {
  position: relative;
  z-index: 2;
}

/* ============================================================
   MOBILE: Ağır efektleri kapat, hafifleştir
   ============================================================ */
@media (max-width: 768px) {
  .aurora-1, .aurora-2 { opacity: 0.35; }
  .aurora-3, .aurora-4 { display: none; }
  .aurora-bg::after    { opacity: 0.015; }

  .beams-container { display: none; }  /* Mobilde performans */
  .meteors-container .meteor:nth-child(n+4) { display: none; } /* Sadece 3 meteor */

  .spotlight { width: 400px; height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-layer  { animation: none !important; }
  .beam          { animation: none !important; opacity: 0; }
  .meteor        { animation: none !important; opacity: 0; }
  .shimmer-border::before { animation: none !important; }
}