/* ====== AGY PROFESSIONAL RESPONSIVE SLIDER ====== */

.hero-slider {
  --slider-ratio: 16 / 6;
  --slider-scale: 1;
  position: relative;
  width: 100%;
  aspect-ratio: var(--slider-ratio);
  overflow: hidden;
  margin: 0;
  container-type: inline-size;
  transition: all 0.3s ease;
}

/* Container genişliğine göre oran değişimi */
@container (width > 1400px) {
  .hero-slider { --slider-ratio: 16 / 5; --slider-scale: 1.02; }
}

@container (width < 768px) {
  .hero-slider { --slider-ratio: 16 / 8; --slider-scale: 0.98; }
}

@container (width < 480px) {
  .hero-slider { --slider-ratio: 16 / 9; --slider-scale: 0.95; }
}

.slider-container {
  width: 100%;
  height: 100%; 
  position: relative;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  scale: var(--slider-scale);
  transition: opacity 0.8s ease-in-out;
  overflow: hidden;
  will-change: transform, opacity;
}

.slide.active { opacity: 1; z-index: 2; }

.slide .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(44,62,80,0.7), rgba(52,152,219,0.7));
  z-index: 1; /* img'nin üstünde, metnin altında */
}

/* Görsel */
.slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.slide.active .slide-img {
  transform: scale(1);
}

/* Metin alanı */
.slide-content {
  position: absolute;
  top: 60%;
  /* left: 8%; /* veya container padding’in kadar */
  transform: translateY(-50%); /* yalnızca dikey ortalama */
  z-index: 2;
  max-width: 600px; /* yazı alanını sınırlamak için */
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}

.slide-heading {
  font-size: clamp(2.0rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  display: block;
}

.slide-content p {
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  margin: 10px 0 25px;
  opacity: 0.9;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Kontroller */
.slider-controls {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 20px;
}

.slider-prev, .slider-next {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.3);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-prev:hover, .slider-next:hover {
  background: var(--accent, #3498db);
  border-color: var(--accent, #3498db);
  transform: scale(1.1);
}

.slider-dots {
  display: flex;
  gap: 8px;
}
.dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: all 0.3s ease;
  cursor: pointer;
}
.dot.active, .dot:hover {
  background: var(--accent, #3498db);
  transform: scale(1.2);
}

@media screen and (max-width: 720px) {
    .slider-prev, .slider-next {
        height: 40px;
        width: 40px;
    }
    .slide-content p {
        margin: 0px 0 10px;
    }
}

@media screen and (max-width: 550px) {
    .slider-prev, .slider-next {
        height: 30px;
        width: 30px;
    }

    .slide-heading {
        font-size: clamp(2.1rem, 4vw, 2.5rem);
    }

    .slide-content {
        top: 50%;
        left: 5%;
    }
    .slide-content p {
        margin: 0;
    }
    
    .btn {
        padding: 8px 16px;
    }
}

@media screen and (max-width: 480px) {
    .hero-slider {
      aspect-ratio: 1 / 1 !important; /* mobilde kare görünüm */
    }
    .slide-content p {
        margin: 0;
    }
    
    .btn {
        padding: 5px 10px;
    }

    .slide-img {
      object-position: right;
    }

}

@media screen and (max-width: 430px) {
    .slide-content {
        top: 50%;
        left: 4%; /* veya container padding’in kadar */
    }

    .slide-content {
        left: 20px;           /* sabit padding; logo hizasını korur */
        right: 20px;          /* kenarlara yapışmaz */
        max-width: none;
    }

    .slide-heading {
        font-size: 1.4rem;    /* daha okunaklı */
        line-height: 1.2;
    }
    .slide-content p {
        font-size: 0.95rem;
    }

    .slide-heading {
        font-size: clamp(1.7rem, 4.5vw, 1.6rem);
        line-height: 1.2;
    }
    .slide-content p {
        font-size: 1rem;
    }
}


.slider-content-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Hem yatay hem dikey ortalama */
  width: 100%;
  /* max-width: 1320px; /* framework container ile aynı */
  margin: 0 auto;
  padding: 0 var(--space-sm);
  z-index: 3;
  display: flex;
  align-items: center;
}

/* İçerik hizalaması */
.slide-content {
  /* position: relative; */
  /* left: 0; */
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}

.slider-content-container .slide-content {
  max-width: 600px;
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

/* === Responsive hizalama - framework ile aynı kırılmalar === */
@media (min-width: 576px) {
  .slider-content-container { max-width: 100%; 
  top: 60%;}
}
@media (min-width: 768px) {
  .slider-content-container { max-width: 100%; }
}
@media (min-width: 992px) {
  .slider-content-container { max-width: 100%; }
}
@media (min-width: 1200px) {
  .slider-content-container { max-width: 1200px; }
}
@media (min-width: 1400px) {
  .slider-content-container { max-width: 1300px; }
}