/**
 * Section: Hero Section
 *
 * Arka plan rengi + ortada hero (şeffaf/görsel/video).
 * Hero: max-width, 500px yükseklik. Sol altta başlık.
 * Hero altında içerik alanı.
 *
 * @package Alpaya_x_Retodi
 */

/* Şeffaf mod: hero penceresi şeffaf, parallax arkada görünsün; arka plan rengi çerçevede kalır */
.section--hero-section-bg-transparent .hero-section__wrap--transparent {
  background: transparent !important;
}

.has-parallax .section--hero-section-bg-transparent .hero-section__wrap--transparent {
  position: relative;
  z-index: 0;
}

/* Şeffaf mod: çerçeve yapısı (üst bar, yanlar, içerik) */
.hero-section__bg-top {
  width: 100%;
  flex-shrink: 0;
}

.hero-section__row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  flex-shrink: 0;
}

.hero-section__bg-side {
  flex: 1;
  min-width: 0;
}

.section--hero-section-bg-transparent .hero-section__wrap--transparent {
  flex-shrink: 0;
  width: 100%;
  max-width: var(--max-width, 1200px);
  overflow: visible;
}

/* Tam genişlik - arka plan rengi viewport genişliğinde */
.entry-content .section--hero-section,
.entry-content .wp-block-alpaya-section .section--hero-section {
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  box-sizing: border-box;
}

.section--hero-section {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Header altında ilk bölüm */
.section--below-header.section--hero-section {
  margin-top: calc(-1 * var(--header-height, 190px));
}

/* Container - hero ve içerik ortada, max-width */
.hero-section__container {
  width: 100%;
}

/* Hero wrap - ortada, max-width, sabit yükseklik (varsayılan 500px) */
.hero-section__wrap {
  position: relative;
  width: 100%;
  max-width: var(--max-width, 1200px);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

/* Şeffaf modda (wrap--transparent) - hero penceresi tamamen şeffaf */

/* Arka plan medya (görsel/video) */
.hero-section__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-section__image,
.hero-section__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Başlık overlay - sol altta */
.hero-section__overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
}

.hero-section__title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  max-width: 80%;
}

/* İçerik alanı - hero altında, tam genişlik (full width) */
.hero-section__content-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  background: transparent;
}

.hero-section__content {
  margin: 0 auto;
  max-width: var(--max-width, 1200px);
  width: 100%;
  font-family: var(--font-secondary);
  padding-left: var(--spacing);
  padding-right: var(--spacing);
  box-sizing: border-box;
}

.hero-section__content p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .hero-section__overlay {
    padding: 1.5rem;
  }

  .hero-section__title {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    max-width: 100%;
  }

  .section--below-header.section--hero-section {
    margin-top: calc(-1 * var(--header-height, 100px));
  }
}