.cinematic-banner {
  /* UNIQUE DEĞİŞKENLER */
  --cinematic-banner-height: 40vh;
  --cinematic-banner-text-color: #FFFFFF;
  --cinematic-banner-radius: 10px; /* Mevcut portfolyonuzun köşe yumuşaklığı ile uyumlu */
  --cinematic-banner-transition: all 0.3s ease;

  position: relative;
  width: 100%;
  height: var(--cinematic-banner-height);
  overflow: hidden;
}

/* 2 ve 3. MADDE: IMG etiketini arka plan gibi cover ve center yapma */
.cinematic-banner .banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* 5. MADDE: Yukarıdan şeffaf, aşağıya doğru siyaha giden katman */
.cinematic-banner .banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Üst %40 şeffaf kalır, alt kısımlara doğru yumuşakça kararır */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.85) 100%
  );
  z-index: 1;
}

/* 4 ve 6. MADDE GÜNCELLEME: Maksimum 1000px genişlik, sayfa ortalama ve mobil padding ayarı */
.cinematic-banner .banner-content {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* absolute elementi yatayda kusursuz ortalamak için */
  width: 100%;
  max-width: 1200px; /* En fazla 1000px genişliğe çıkabilir */
  padding: 2.5rem 2rem; /* Üst/Alt: 2.5rem, Yanlar: 2rem (Büyük ekranlarda nefes alma payı) */
  color: var(--cinematic-banner-text-color);
  z-index: 2;
}

.cinematic-banner .banner-title {
  font-size: 2.5rem;
  font-weight: 300;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.cinematic-banner .banner-description {
  font-size: 1rem;
  margin: 0;
  opacity: 0.9;
  line-height: 1.25;
  /* max-width'i banner-content 1000px sınırlandığı için buradan kaldırıp içeriğin doğal akışına bıraktık */
}

/* Mobil Ekranlar İçin Uyum */
@media (max-width: 768px) {
  .cinematic-banner {
    height: 45vh; 
  }
  .cinematic-banner .banner-content {
    /* Mobilde max-width (1000px) devre dışı kalır, genişlik tam ekran (100%) olur */
    padding: 1.5rem 0; /* Mobilde yanlardan az bir padding (1.2rem) bırakarak yazının kenara yapışmasını engelledik */
  }
  .cinematic-banner .banner-title {
    font-size: 2rem;
	border-bottom:1px solid rgba(255,255,255,.5);
	padding:0 0 .5rem 0;
    margin: 0 1.2rem; /* Mobilde yanlardan az bir padding (1.2rem) bırakarak yazının kenara yapışmasını engelledik */
  }
  .cinematic-banner .banner-description {
    font-size: 1rem;
	line-height:1.5;
    padding: 1rem 1.2rem 0 1.2rem; /* Mobilde yanlardan az bir padding (1.2rem) bırakarak yazının kenara yapışmasını engelledik */
  }
}