/* ==========================================================================
   HERO SLIDER
   Birden fazla hero slaytı için. Tek slayt varsa hiçbir etkisi olmaz —
   .hero'nun orijinal görünümü ve akışı aynen korunur.
   ========================================================================== */

.hero-slider{
  position:relative;
  isolation:isolate;
}

/* Tek slayt: hiçbir şey değişmesin */
.hero-slider[data-count="1"] .hero-slide{position:relative;opacity:1;visibility:visible}

/* Çok slayt: hepsi üst üste, sadece aktif olan görünür */
.hero-slider:not([data-count="1"]) .hero-slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .7s ease, visibility .7s;
  pointer-events:none;
}
.hero-slider:not([data-count="1"]) .hero-slide.is-active{
  position:relative;
  opacity:1;visibility:visible;
  pointer-events:auto;
  z-index:2;
}

/* Aktif slaytın içeriği hafif yukarı süzülerek gelsin */
.hero-slider:not([data-count="1"]) .hero-slide .hero-content > *,
.hero-slider:not([data-count="1"]) .hero-slide .stage{
  opacity:0;transform:translateY(18px);
}
.hero-slider:not([data-count="1"]) .hero-slide.is-active .hero-content > *,
.hero-slider:not([data-count="1"]) .hero-slide.is-active .stage{
  opacity:1;transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.hero-slider .hero-slide.is-active .hero-content > *:nth-child(1){transition-delay:.10s}
.hero-slider .hero-slide.is-active .hero-content > *:nth-child(2){transition-delay:.16s}
.hero-slider .hero-slide.is-active .hero-content > *:nth-child(3){transition-delay:.22s}
.hero-slider .hero-slide.is-active .hero-content > *:nth-child(4){transition-delay:.28s}
.hero-slider .hero-slide.is-active .hero-content > *:nth-child(5){transition-delay:.34s}
.hero-slider .hero-slide.is-active .stage{transition-delay:.14s}

/* --- Noktalar --- */
.hero-dots{
  position:absolute;left:64px;bottom:52px;z-index:6;
  display:flex;align-items:center;gap:10px;
}
.hero-dot{
  width:26px;height:3px;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.22);
  transition:background .3s ease, width .3s ease;
}
.hero-dot:hover{background:rgba(255,255,255,.45)}
.hero-dot.is-active{width:46px;background:var(--ice,#63b3ff)}

/* --- Oklar --- */
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:44px;height:44px;display:grid;place-items:center;
  cursor:pointer;color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.hero-arrow:hover{
  background:rgba(255,255,255,.10);
  border-color:var(--ice,#63b3ff);
  color:var(--ice,#63b3ff);
}
.hero-arrow.prev{left:16px}
.hero-arrow.next{right:16px}

@media (max-width:1100px){
  .hero-arrow{display:none}
  .hero-dots{left:32px;bottom:32px}
}
@media (max-width:640px){
  .hero-dots{left:20px;bottom:24px}
}

/* Hareket azaltma tercihi: geçişler anında olsun */
@media (prefers-reduced-motion:reduce){
  .hero-slider .hero-slide,
  .hero-slider .hero-slide .hero-content > *,
  .hero-slider .hero-slide .stage{transition:none !important;transform:none !important}
}