/**
 * Parallax - Sabit arka plan, üzerinde kayan içerik
 *
 * @package Alpaya_x_Retodi
 */

/* ==========================================================================
   Parallax Wrapper
   ========================================================================== */
.parallax {
  position: relative;
  height: var(--parallax-height, 100vh);
  min-height: 300px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Sabit Arka Plan
   ========================================================================== */
.parallax__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: var(--color-secondary, #1e293b);
}

.parallax__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.parallax__overlay-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ==========================================================================
   Overlay İçerik (Başlık)
   ========================================================================== */
.parallax__overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}

.parallax__title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Mobilde Kapat
   ========================================================================== */
@media (max-width: 768px) {
  .parallax__image {
    background-attachment: scroll;
  }

  .parallax--no-mobile {
    display: none;
  }

}

/* ==========================================================================
   Ana İçerik - Parallax Üzerinde Kayar
   ========================================================================== */
.has-parallax .site-footer {
  position: relative;
  z-index: 10;
}

.has-parallax .site-content {
  position: relative;
  z-index: 1;
  background: transparent;
  box-shadow: none;
  margin-top: calc(-1 * var(--parallax-height, 100vh));
  padding-top: 0;
}

/* Banner – Parallax arka planının üstünde görünsün (section tipinden bağımsız) */
.has-parallax .banner {
  position: relative;
  z-index: 5;
}

/* ==========================================================================
   "Header altında ilk bölüm" = true ise: Header float, section top:0
   = false ise: Header ve section alt alta (normal akış)
   ========================================================================== */
body:has(.section--below-header) .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* Section header yüksekliğinden etkilenmez, top:0'da başlar */
body:has(.section--below-header) .section--below-header {
  margin-top: 0;
}

/* Banner – Header fixed olduğunda hemen altında */
body:has(.section--below-header) .banner {
  position: relative;
  z-index: 5;
  padding-top: calc(var(--header-height, 190px) + 2rem);
}

body:has(.section--below-header) .banner--minimal {
  padding-top: calc(var(--header-height, 190px) + 1rem);
}

body:has(.section--below-header) .banner--full {
  padding-top: calc(var(--header-height, 190px) + 2rem);
}

@media (max-width: 768px) {
  body:has(.section--below-header) .banner {
    padding-top: calc(var(--header-height, 100px) + 1rem);
  }

  body:has(.section--below-header) .banner--minimal {
    padding-top: calc(var(--header-height, 100px) + 0.75rem);
  }

  body:has(.section--below-header) .banner--full {
    padding-top: calc(var(--header-height, 100px) + 1.25rem);
  }
}