/* ============================================================
   LX CAROUSEL — Vanilla carousel stilleri
   Effect: fade (default), slide
   ============================================================ */

.lx-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--lx-radius-xl);
  outline: none;
}

.lx-carousel:focus-visible {
  outline: 2px solid var(--lx-color-glow);
  outline-offset: 4px;
}

.lx-carousel__track {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

.lx-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
}

.lx-carousel__slide > img,
.lx-carousel__slide > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------------------------
   FADE EFFECT (mutlak yığın, opacity geçişi)
   ---------------------------------------------------------- */
.lx-carousel--fade .lx-carousel__track {
  display: block;
}

.lx-carousel--fade .lx-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 700ms var(--lx-ease-out);
  pointer-events: none;
}

.lx-carousel--fade .lx-carousel__slide--active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* fade içinde aspect-ratio koruyucu — track yüksekliğini ilk slide belirler */
.lx-carousel--fade .lx-carousel__track::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 16:9 default — override'lanabilir */
}

.lx-carousel--fade[data-lx-aspect="4-3"]  .lx-carousel__track::before { padding-top: 75%; }
.lx-carousel--fade[data-lx-aspect="1-1"]  .lx-carousel__track::before { padding-top: 100%; }
.lx-carousel--fade[data-lx-aspect="3-2"]  .lx-carousel__track::before { padding-top: 66.66%; }
.lx-carousel--fade[data-lx-aspect="21-9"] .lx-carousel__track::before { padding-top: 42.85%; }

/* ----------------------------------------------------------
   SLIDE EFFECT (translate3d)
   ---------------------------------------------------------- */
.lx-carousel--slide .lx-carousel__track {
  transition: transform 600ms var(--lx-ease-out);
  will-change: transform;
}

/* ----------------------------------------------------------
   PAGINATION DOTS
   ---------------------------------------------------------- */
.lx-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: var(--lx-space-3);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--lx-space-2);
  padding: var(--lx-space-1) var(--lx-space-3);
  background: rgba(2, 6, 15, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--lx-radius-full);
  z-index: 3;
}

.lx-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--lx-transition-fast),
              width var(--lx-transition-base),
              box-shadow var(--lx-transition-base);
}

.lx-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

.lx-carousel__dot--active {
  width: 22px;
  border-radius: var(--lx-radius-full);
  background: var(--lx-color-glow);
  box-shadow: 0 0 12px rgba(80, 227, 255, 0.65);
}

/* ----------------------------------------------------------
   NAV BUTTONS (prev / next)
   ---------------------------------------------------------- */
.lx-carousel__prev,
.lx-carousel__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 15, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--lx-border-base);
  border-radius: var(--lx-radius-full);
  color: var(--lx-text-primary);
  cursor: pointer;
  z-index: 3;
  transition: background var(--lx-transition-base),
              border-color var(--lx-transition-base),
              transform var(--lx-transition-spring);
}

.lx-carousel__prev { left: var(--lx-space-3); }
.lx-carousel__next { right: var(--lx-space-3); }

.lx-carousel__prev:hover,
.lx-carousel__next:hover {
  background: var(--lx-color-primary-700);
  border-color: var(--lx-border-glow);
  transform: translateY(-50%) scale(1.05);
}

.lx-carousel__prev svg,
.lx-carousel__next svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 640px) {
  .lx-carousel__prev,
  .lx-carousel__next {
    width: 36px;
    height: 36px;
  }
  .lx-carousel__dots { bottom: var(--lx-space-2); }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.lx-motion-force) .lx-carousel--fade .lx-carousel__slide,
  html:not(.lx-motion-force) .lx-carousel--slide .lx-carousel__track {
    transition: none;
  }
}