.elementor-29506 .elementor-element.elementor-element-d46c5cc{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-29506 .elementor-element.elementor-element-d46c5cc.e-con{--align-self:center;--flex-grow:1;--flex-shrink:0;}/* Start custom CSS for container, class: .elementor-element-d46c5cc *//* =====================================================
   SLIDER RENK ANİMASYONU
   Döngü: Mavi → Açık Mavi → Koyu Mavi → Turkuaz
   ===================================================== */

/* Ana slider container */
#slider {
  position: relative;
  width: 100%;
  min-height: 500px;
  overflow: hidden;
  animation: sliderColorShift 16s ease-in-out infinite;
}

/* =====================================================
   1. ANA DÖNGÜ: Mavi → Açık Mavi → Koyu Mavi → Turkuaz
   ===================================================== */
@keyframes sliderColorShift {
  /* --- AŞAMA 1: MAVİ --- */
  0% {
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #1E40AF 100%);
  }
  10% {
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #1E40AF 100%);
  }

  /* --- GEÇİŞ: Mavi → Açık Mavi --- */
  20% {
    background: linear-gradient(135deg, #38BDF8 0%, #7DD3FC 50%, #BAE6FD 100%);
  }

  /* --- AŞAMA 2: AÇIK MAVİ --- */
  30% {
    background: linear-gradient(135deg, #38BDF8 0%, #7DD3FC 50%, #BAE6FD 100%);
  }

  /* --- GEÇİŞ: Açık Mavi → Koyu Mavi --- */
  45% {
    background: linear-gradient(135deg, #1E3A5F 0%, #1E40AF 50%, #1D4ED8 100%);
  }

  /* --- AŞAMA 3: KOYU MAVİ --- */
  55% {
    background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #1E40AF 100%);
  }

  /* --- GEÇİŞ: Koyu Mavi → Turkuaz --- */
  68% {
    background: linear-gradient(135deg, #0891B2 0%, #06B6D4 50%, #22D3EE 100%);
  }

  /* --- AŞAMA 4: TURKUAZ --- */
  78% {
    background: linear-gradient(135deg, #0891B2 0%, #06B6D4 50%, #22D3EE 100%);
  }

  /* --- GEÇİŞ: Turkuaz → Mavi (döngü başa dönüyor) --- */
  90% {
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #1E40AF 100%);
  }
  100% {
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #1E40AF 100%);
  }
}

/* =====================================================
   2. AKAN GRADIENT VERSİYONU (Daha Akıcı Geçiş)
   ===================================================== */
#slider.dynamic {
  background: linear-gradient(
    -45deg,
    #1D4ED8,   /* Mavi */
    #38BDF8,   /* Açık Mavi */
    #BAE6FD,   /* Çok Açık Mavi */
    #38BDF8,   /* Açık Mavi */
    #1E3A5F,   /* Koyu Mavi */
    #0F172A,   /* Çok Koyu Mavi */
    #06B6D4,   /* Turkuaz */
    #22D3EE,   /* Açık Turkuaz */
    #1D4ED8    /* Mavi (döngü) */
  );
  background-size: 400% 400%;
  animation: gradientFlow 14s ease infinite;
}

@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 100% 50%; }
  50%  { background-position: 100% 0%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

/* =====================================================
   3. IŞIK YANSIMASI EFEKTİ (Shimmer)
   ===================================================== */
#slider::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    ellipse at center,
    rgba(186, 230, 253, 0.18) 0%,
    rgba(56, 189, 248, 0.08) 40%,
    transparent 70%
  );
  animation: shimmerRotate 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes shimmerRotate {
  0%   { transform: rotate(0deg) scale(1);   opacity: 0.6; }
  25%  {                                      opacity: 1;   }
  50%  { transform: rotate(180deg) scale(1.1); opacity: 0.8; }
  75%  {                                      opacity: 1;   }
  100% { transform: rotate(360deg) scale(1); opacity: 0.6; }
}

/* =====================================================
   4. ALT IŞIK HALESİ (Glow)
   ===================================================== */
#slider::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(
    ellipse at center,
    rgba(34, 211, 238, 0.3) 0%,
    rgba(6, 182, 212, 0.15) 50%,
    transparent 70%
  );
  animation: glowPulse 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1) translateY(0);    }
  50%       { opacity: 1;   transform: scale(1.15) translateY(-5%); }
}

/* =====================================================
   5. SLIDE BAZLI RENKLER
   Slide 1 = Mavi | Slide 2 = Açık Mavi
   Slide 3 = Koyu Mavi | Slide 4 = Turkuaz
   ===================================================== */

#slider .slide:nth-child(1) { --slide-from: #1E40AF; --slide-to: #2563EB; }   /* Mavi        */
#slider .slide:nth-child(2) { --slide-from: #38BDF8; --slide-to: #BAE6FD; }   /* Açık Mavi   */
#slider .slide:nth-child(3) { --slide-from: #0F172A; --slide-to: #1E3A5F; }   /* Koyu Mavi   */
#slider .slide:nth-child(4) { --slide-from: #0891B2; --slide-to: #22D3EE; }   /* Turkuaz     */

#slider .slide.active {
  animation: slideColorIn 0.8s ease-out forwards;
}
#slider .slide.leaving {
  animation: slideColorOut 0.8s ease-in forwards;
}

@keyframes slideColorIn {
  from {
    opacity: 0;
    background: linear-gradient(135deg, var(--slide-from) 0%, var(--slide-to) 100%);
    filter: brightness(0.7);
  }
  to {
    opacity: 1;
    background: linear-gradient(135deg, var(--slide-from) 0%, var(--slide-to) 100%);
    filter: brightness(1);
  }
}
@keyframes slideColorOut {
  from { opacity: 1; filter: brightness(1); }
  to   { opacity: 0; filter: brightness(1.3) saturate(1.5); }
}

/* =====================================================
   6. SLIDE GEÇİŞ FLASH OVERLAY
   ===================================================== */
#slider .color-transition-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

#slider.transitioning .color-transition-overlay {
  animation: flashTransition 0.6s ease-in-out;
}

@keyframes flashTransition {
  0%   { opacity: 0; background: transparent; }
  30%  { opacity: 0.4; background: rgba(56, 189, 248, 0.3); }
  60%  { opacity: 0.2; background: rgba(6, 182, 212, 0.2);  }
  100% { opacity: 0; background: transparent; }
}

/* =====================================================
   7. HOVER - ANİMASYON DURAKLATMA
   ===================================================== */
#slider:hover {
  animation-play-state: paused;
  filter: brightness(1.05) saturate(1.1);
  transition: filter 0.3s ease;
}

/* =====================================================
   8. BUTON ANİMASYONU
   ===================================================== */
#slider .cta-button {
  background: #0C2340;
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  z-index: 10;
}

#slider .cta-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1D4ED8, #06B6D4, #38BDF8, #1D4ED8);
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: buttonGlow 3s ease infinite paused;
}

#slider .cta-button:hover::before {
  opacity: 1;
  animation-play-state: running;
}

#slider .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.5);
}

@keyframes buttonGlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =====================================================
   KULLANIM ÖRNEĞİ:
   
   <div id="slider">
     <div class="color-transition-overlay"></div>
     <div class="slide active"> ... </div>
     <div class="slide"> ... </div>
     <div class="slide"> ... </div>
     <div class="slide"> ... </div>
   </div>
   
   Slide geçişinde JS:
   slider.classList.add('transitioning');
   setTimeout(() => slider.classList.remove('transitioning'), 600);

   RENK DÖNGÜSÜ:
   Mavi (#2563EB) → Açık Mavi (#7DD3FC) → Koyu Mavi (#1E3A5F) → Turkuaz (#06B6D4) → ...
   ===================================================== *//* End custom CSS */