/* ===== Anasayfa Tam Ekran Slider (fotoğraf tüm zemin, modern bütünleşik tasarım) — diyetisyenaleyna.com ===== */

.hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  max-height: 900px;
  overflow: hidden;
  isolation: isolate;
  background: #20140f;
}
@supports (height: 100svh) {
  .hero-slider { height: 100svh; }
}

.hs-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
  overflow: hidden;
}
.hs-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Fotoğraf — tüm slide'ın arka planı, yavaş "Ken Burns" yakınlaşması */
.hs-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/aleyna-hero.jpg");
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform 7s ease-out;
}
.hs-photo-bg-alt { background-position: center 34%; }
.hs-slide.is-active .hs-photo-bg { transform: scale(1.09); }

/* Geniş ekranlarda fotoğraf dikey bir kare olduğu için "cover" onu gereğinden fazla
   büyütüyordu (yüze çok yakın kadraj). Masaüstünde biraz uzaklaştırıp sağa yasladık,
   boşta kalan sol şerit zaten koyu geçiş (scrim) rengiyle kaplı olduğundan fark edilmiyor. */
@media (min-width: 761px) {
  .hs-photo-bg {
    background-size: 80% auto;
    background-position: right 22%;
  }
  .hs-photo-bg-alt { background-position: right 28%; }
}

/* Marka renginde geçiş (scrim) — solda güçlü, sağa doğru fotoğrafı açan */
.hs-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hs-scrim-1 {
  background:
    linear-gradient(180deg, rgba(15, 12, 8, .3) 0%, rgba(15, 12, 8, 0) 22%, rgba(15, 12, 8, 0) 72%, rgba(15, 12, 8, .4) 100%),
    linear-gradient(100deg, rgba(58, 68, 44, .92) 0%, rgba(58, 68, 44, .72) 30%, rgba(20, 14, 10, .38) 58%, rgba(20, 14, 10, .12) 100%);
}
.hs-scrim-2 {
  background:
    linear-gradient(180deg, rgba(15, 12, 8, .3) 0%, rgba(15, 12, 8, 0) 22%, rgba(15, 12, 8, 0) 72%, rgba(15, 12, 8, .4) 100%),
    linear-gradient(100deg, rgba(94, 51, 36, .92) 0%, rgba(94, 51, 36, .72) 30%, rgba(20, 14, 10, .38) 58%, rgba(20, 14, 10, .12) 100%);
}

/* Sol kenardaki dikey etiket */
.hs-tag {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}

.hs-content {
  position: relative;
  z-index: 3;
  color: #FBF6F3;
  max-width: 480px !important;
  width: 100%;
  padding-left: 30px;
}
.hs-eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #F1DCD2;
  border: 1px solid rgba(251,246,243,.45);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hs-title-big {
  font-size: clamp(30px, 3.8vw, 50px);
  max-width: 100%;
  word-break: keep-all;
  line-height: 1.1;
  margin: 0 0 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: #FBF6F3 !important;
  text-shadow: 0 3px 20px rgba(0,0,0,.45);
}
.hs-lead {
  font-size: clamp(15px, 1.6vw, 17.5px);
  color: rgba(251,246,243,.95);
  max-width: 460px;
  margin-bottom: 30px;
  line-height: 1.6;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.hs-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hs-btn {
  background: #FBF6F3 !important;
  color: #7C4A3A !important;
}
.hs-btn:hover { background: #fff !important; transform: translateY(-2px); }

/* ===== Giriş animasyonları — slayt aktif olduğunda sırayla belirir ===== */
@keyframes hsFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hs-slide.is-active .hs-eyebrow   { animation: hsFadeUp .7s cubic-bezier(.22,.75,.3,1) both; }
.hs-slide.is-active .hs-title-big { animation: hsFadeUp .8s cubic-bezier(.22,.75,.3,1) .12s both; }
.hs-slide.is-active .hs-lead      { animation: hsFadeUp .8s cubic-bezier(.22,.75,.3,1) .24s both; }
.hs-slide.is-active .hs-cta       { animation: hsFadeUp .8s cubic-bezier(.22,.75,.3,1) .36s both; }

.hs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(20,14,10,.35);
  color: #FBF6F3;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.hs-arrow:hover { background: rgba(20,14,10,.6); transform: translateY(-50%) scale(1.08); }
.hs-prev { left: 18px; }
.hs-next { right: 18px; }

.hs-dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 10px;
}
.hs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hs-dot.is-active {
  background: #FBF6F3;
  transform: scale(1.3);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== Mobil ===== */
@media (max-width: 760px) {
  .hero-slider { min-height: 560px; max-height: 720px; }
  .hs-scrim-1 { background: linear-gradient(190deg, rgba(58,68,44,.35) 0%, rgba(20,14,10,.55) 55%, rgba(20,14,10,.82) 100%); }
  .hs-scrim-2 { background: linear-gradient(190deg, rgba(94,51,36,.35) 0%, rgba(20,14,10,.55) 55%, rgba(20,14,10,.82) 100%); }
  .hs-tag { display: none; }
  .hs-arrow { display: none; }
  .hs-content {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 60px;
    max-width: 100% !important;
    position: absolute;
    left: 0; right: 0; bottom: 0;
  }
  .hs-lead { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-photo-bg { transition: none; }
  .hs-slide { transition: opacity .3s linear, visibility .3s linear; }
  .hs-slide.is-active .hs-eyebrow,
  .hs-slide.is-active .hs-title-big,
  .hs-slide.is-active .hs-lead,
  .hs-slide.is-active .hs-cta { animation: none; }
}