/* ============================================================
   LX EFFECTS — Liman'ın imza atmosfer parçaları
   Wave (footer + hero), Glass, Glow ring, Aurora, Noise overlay
   ============================================================ */

/* ============================================================
   WAVE — Footer altı + hero altı (parallax SVG)
   Markup pattern:
     <div class="lx-wave lx-wave--footer">
       <svg class="lx-wave__svg" viewBox="0 24 150 28" preserveAspectRatio="none">
         <defs>
           <path id="lx-wave-path" d="M-160 44c30 0 58-18 88-18s..."/>
         </defs>
         <g class="lx-wave__parallax">
           <use href="#lx-wave-path" x="48" y="0" />
           <use href="#lx-wave-path" x="48" y="3" />
           <use href="#lx-wave-path" x="48" y="5" />
           <use href="#lx-wave-path" x="48" y="7" />
         </g>
       </svg>
     </div>
   ============================================================ */
.lx-wave {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.lx-wave__svg {
  display: block;
  width: 100%;
  height: 100px;
  margin-bottom: -7px;   /* hairline alttaki boşluk */
}

.lx-wave__parallax > use {
  animation: lx-wave-move 25s var(--lx-ease-glide) infinite;
}

.lx-wave__parallax > use:nth-child(1) { animation-delay: -2s;  animation-duration: 7s;  }
.lx-wave__parallax > use:nth-child(2) { animation-delay: -3s;  animation-duration: 10s; }
.lx-wave__parallax > use:nth-child(3) { animation-delay: -4s;  animation-duration: 13s; }
.lx-wave__parallax > use:nth-child(4) { animation-delay: -5s;  animation-duration: 20s; }

/* — Footer wave (over deep blue footer bg) — */
.lx-wave--footer .lx-wave__parallax > use:nth-child(1) { fill: rgba(59, 130, 246, 0.70); }
.lx-wave--footer .lx-wave__parallax > use:nth-child(2) { fill: rgba(59, 130, 246, 0.50); }
.lx-wave--footer .lx-wave__parallax > use:nth-child(3) { fill: rgba(59, 130, 246, 0.30); }
.lx-wave--footer .lx-wave__parallax > use:nth-child(4) { fill: var(--lx-color-primary-800); }

/* — Hero wave (sınır olarak white overlay) — */
.lx-wave--hero {
  position: absolute;
  bottom: 0;
  left: 0;
}
.lx-wave--hero .lx-wave__parallax > use:nth-child(1) { fill: rgba(255, 255, 255, 0.12); }
.lx-wave--hero .lx-wave__parallax > use:nth-child(2) { fill: rgba(80, 227, 255, 0.10); }
.lx-wave--hero .lx-wave__parallax > use:nth-child(3) { fill: rgba(59, 130, 246, 0.18); }
.lx-wave--hero .lx-wave__parallax > use:nth-child(4) { fill: var(--lx-surface-base); }

/* — Inverted (section divider, white-to-dark transition) — */
.lx-wave--inverted .lx-wave__svg { transform: scaleY(-1); }

@media (max-width: 768px) {
  .lx-wave__svg { height: 60px; }
}

/* ============================================================
   AURORA BG — Hero ve premium section'lar için
   ============================================================ */
.lx-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--lx-z-below);
}

.lx-aurora::before,
.lx-aurora::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: lx-float 18s var(--lx-ease-in-out) infinite;
}

.lx-aurora::before {
  width: 60vmax;
  height: 60vmax;
  top: -20vmax;
  left: -10vmax;
  background: radial-gradient(circle,
    rgba(59, 130, 246, 0.45),
    transparent 65%);
}

.lx-aurora::after {
  width: 50vmax;
  height: 50vmax;
  bottom: -15vmax;
  right: -10vmax;
  background: radial-gradient(circle,
    rgba(80, 227, 255, 0.30),
    transparent 65%);
  animation-direction: reverse;
  animation-duration: 22s;
}

/* ============================================================
   GRID PATTERN BG — subtle blueprint
   ============================================================ */
.lx-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(59, 130, 246, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 130, 246, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  z-index: var(--lx-z-below);
}

/* ============================================================
   DOT PATTERN BG
   ============================================================ */
.lx-dot-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle,
    rgba(80, 227, 255, 0.18) 1px,
    transparent 1.5px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 75%);
  z-index: var(--lx-z-below);
}

/* ============================================================
   NOISE OVERLAY — subtle texture (önerilir, opsiyonel)
   ============================================================ */
.lx-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  z-index: var(--lx-z-raised);
}

/* ============================================================
   GLASS PANEL
   ============================================================ */
.lx-glass {
  background: rgba(17, 30, 59, 0.55);
  backdrop-filter: var(--lx-backdrop-glass);
  -webkit-backdrop-filter: var(--lx-backdrop-glass);
  border: 1px solid var(--lx-border-base);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    var(--lx-shadow-lg);
}

.lx-glass--strong {
  background: rgba(10, 20, 40, 0.75);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* ============================================================
   NEON BORDER — KORUNAN karakteristik (swiper ring)
   Mevcut turuncu→mavi gradyan korundu; markup map:
     <div class="lx-neon-border">
       <div class="lx-neon-border__ring"></div>
       <!-- içerik -->
     </div>
   ============================================================ */
.lx-neon-border {
  position: relative;
  margin: 40px 60px;
  padding: 4px;
  background: var(--lx-surface-abyss);
  border-radius: var(--lx-radius-2xl);
  --lx-mouse-x: 50%;
  --lx-mouse-y: 50%;
}

.lx-neon-border__ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  border-radius: inherit;
  pointer-events: none;
}

.lx-neon-border__ring::before,
.lx-neon-border__ring::after {
  content: '';
  position: absolute;
  inset: -80px;
  background: var(--lx-gradient-neon-border);
  background-size: 400% 400%;
  animation: lx-neon-wave 12s ease-in-out infinite;
  z-index: -1;
  filter: blur(20px) contrast(120%);
  -webkit-mask: radial-gradient(ellipse at center, #000 35%, transparent 70%);
          mask: radial-gradient(ellipse at center, #000 35%, transparent 70%);
  border-radius: var(--lx-radius-3xl);
}

.lx-neon-border__ring::after {
  filter: blur(16px);
  opacity: 0.4;
  animation-direction: reverse;
  transform: scale(0.98);
  background:
    linear-gradient(90deg,
      rgba(255, 115, 0, 0.50),
      rgba(255, 160, 0, 0.50),
      rgba(30, 64, 152, 0.50),
      rgba(65, 105, 225, 0.50));
}

.lx-neon-border::after {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at var(--lx-mouse-x) var(--lx-mouse-y),
    rgba(255, 115, 0, 0.20) 0%,
    rgba(30, 64, 152, 0.20) 40%,
    transparent 80%);
  z-index: -2;
  filter: blur(25px);
  pointer-events: none;
  border-radius: var(--lx-radius-3xl);
  animation: lx-glow-breath 4s var(--lx-ease-in-out) infinite;
}

@keyframes lx-neon-wave {
  0%   { background-position: 0% 50%;   transform: rotate(0deg) scale(1); }
  50%  { background-position: 100% 50%; transform: rotate(180deg) scale(1.15); }
  100% { background-position: 0% 50%;   transform: rotate(360deg) scale(1); }
}

@keyframes lx-glow-breath {
  0%, 100% { opacity: 0.4; filter: brightness(100%) blur(25px); }
  50%      { opacity: 0.55; filter: brightness(125%) blur(28px); }
}

@media (max-width: 768px) {
  .lx-neon-border {
    margin: 20px 0;
    padding: 0;
    background: transparent;
  }
  .lx-neon-border__ring,
  .lx-neon-border::after { display: none; }
}

/* ============================================================
   SCROLL TO TOP — KORUNAN (conic gradient progress)
   ============================================================ */
.lx-scroll-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--lx-color-primary-800);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--lx-transition-base);
  box-shadow: var(--lx-shadow-lg);
  overflow: hidden;
  z-index: var(--lx-z-overlay);
}

.lx-scroll-top.lx-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lx-scroll-top:hover {
  background: var(--lx-color-primary-600);
  transform: translateY(-3px);
  box-shadow: var(--lx-glow-md);
}

.lx-scroll-top__icon {
  width: 22px;
  height: 22px;
  position: relative;
  z-index: 2;
  transition: transform var(--lx-transition-base);
}

.lx-scroll-top:hover .lx-scroll-top__icon { transform: translateY(-3px); }

.lx-scroll-top__progress {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.lx-scroll-top__progress::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--lx-color-glow) calc(var(--lx-scroll-percent, 0) * 1%),
    transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}

@media (max-width: 768px) {
  .lx-scroll-top {
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
  }
}

/* ============================================================
   GLOW RING — emphasis around CTA
   ============================================================ */
.lx-glow-ring {
  position: relative;
  isolation: isolate;
}

.lx-glow-ring::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: var(--lx-gradient-aurora);
  opacity: 0.5;
  filter: blur(20px);
  z-index: -1;
  animation: lx-glow-breath 4s var(--lx-ease-in-out) infinite;
}

/* ============================================================
   CARD HOVER — POINTER REACTIVE GLOW (mouse follow)
   Pair with lx-core.js mouseGlow handler
   ============================================================ */
.lx-card[data-lx-glow]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--lx-mx, 50%) var(--lx-my, 50%),
    rgba(80, 227, 255, 0.10),
    transparent 40%);
  opacity: 0;
  transition: opacity var(--lx-transition-base);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

.lx-card[data-lx-glow]:hover::before { opacity: 1; }