/* ============================================================
   hero.css — giriş: tam genişlik canlı yayın afişi ve hemen
   altında ana menü şeridi. Üstteki marka şeridi layout.css'te.
   ============================================================ */

.hero {
  position: relative;
  z-index: 2;
  /* Giriş animasyonu afişi bir an %3 büyütüyor; bu, sayfanın yanlara
     29px kaymasına yol açıyordu (bodydeki overflow-x:hidden html'i
     kapsamıyor). Taşma burada kesiliyor. */
  overflow: hidden;
  background: var(--background-ivory);
  /* Marka şeridi sabit (fixed); afiş onun altından başlar ki
     logo hiçbir boyutta afişin üzerine taşmasın. */
  padding-top: var(--nav-h, 100px);
}

/* ---------- afiş ---------- */
.hero__visual {
  position: relative;
  margin: 0;
  width: 100%;
  /* Afiş HER ekranda ekranı TAM kaplar: iki yanda bosluk birakilmaz.
     Yukseklik "ekran - sabit sheridler" kadar; genislik ise tam ekran.
     Afisin kendi orani (2.37) ekran oranindan farkli olursa gorsel
     cover ile kirpilir — guvenli alan ortadaki %85, kompozisyon
     korunur. Boylece afis+menu ilk ekranda birlikte gorunur ve
     ultra-wide ekranda yan bosluk kalmaz. */
  height: calc(100svh - var(--serit-h) - var(--menu-serit-h));
  overflow: hidden;
  background: var(--background-dark-soft);
}

/* Görsel kutuyu baştan sona doldurur (cover). Kapak 2560x1080 (2.37:1)
   hazırlandı; kutunun oranı ekrana göre 1.86-2.96 arasında gezindiği için
   kimi ekranda yanlardan, kimi ekranda üst/alttan bir miktar kırpılır.
   Kırpma merkezden: tasarımın kompozisyonu ortaya kurulu.
   NOT: Kutunun oranı ekran boyuna göre değiştiği için (yükseklik =
   ekran − üst şerit − menü), kapak görselinin kenarlarında boşluk
   payı bırakılması gerekir. Ölçüler README'de değil, afişi hazırlayan
   için aşağıdaki yorumda: ~2:1, güvenli alan ortadaki %85. */
.hero__visual .live-cover {
  background: #F3E7CF;
}
.hero__visual .live-cover img {
  object-fit: cover;
  object-position: center;
}
.hero__embed {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- "Yayını İzle" ---------- */
.hero__watch {
  position: absolute;
  z-index: 2;
  /* Tam ortada değil: kapaktaki altın motifin merkezine oturacak
     şekilde biraz yukarıda ve çok az sağda. */
  left: 52.5%;
  top: 41%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: clamp(0.45rem, 0.9vw, 0.75rem);
  padding: 0.5em 1.5em 0.5em 0.5em;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFC62F 0%, var(--brand-yellow) 42%, #E79400 100%);
  color: #2A2008;
  font-size: clamp(0.95rem, 1.55vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 14px 34px rgba(60, 35, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.hero__watch-icon {
  display: grid;
  place-items: center;
  width: 1.95em;
  height: 1.95em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
}
.hero__watch-icon svg {
  width: 52%;
  height: 52%;
  fill: #E07A00;
}
.live-cover:hover .hero__watch {
  transform: translate(-50%, -50%) scale(1.045);
  box-shadow:
    0 18px 42px rgba(60, 35, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---------- ana menü şeridi ----------
   Afişin altında STATİK durur; kaydirinca ust seride yapismaz.
   Eski haline donuluyor: menu afisin hemen altinda tek bir yerde kalir. */
.mainnav {
  position: relative;
  z-index: 900;
  background: var(--background-ivory);
  border-bottom: 1px solid var(--border-dark-soft);
}
.mainnav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.1rem, 3.2vw, 3.2rem);
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(0.85rem, 1.5vw, 1.15rem) var(--gutter);
}
.mainnav__link {
  position: relative;
  display: inline-block;
  padding: 0.3rem 0;
  font-size: clamp(0.84rem, 1.05vw, 0.98rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--lacivert);
  white-space: nowrap;
  transition: color 0.3s;
}
/* Etkin bölümün altındaki sarı çizgi */
.mainnav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-yellow);
  transform: scaleX(0);
  transition: transform 0.35s var(--ease-out);
}
.mainnav__link:hover { color: var(--brand-yellow-deep); }
.mainnav__link.is-active {
  color: var(--brand-yellow-deep);
  font-weight: 700;
}
.mainnav__link.is-active::after { transform: scaleX(1); }

/* Koyu bölümlerin üzerinden geçerken üst şeritle birlikte koyulaşır
   (sınıfı js/sections/navbar.js veriyor). */
.mainnav.is-dark {
  background: var(--background-dark);
  border-bottom-color: var(--border-soft);
}
.mainnav.is-dark .mainnav__link { color: var(--text-light); }
.mainnav.is-dark .mainnav__link:hover,
.mainnav.is-dark .mainnav__link.is-active { color: var(--brand-yellow); }

/* ---------- dar ekranlar ---------- */
@media (max-width: 900px) {
  /* Beş başlık telefonda tek satıra sığmıyor; şerit ya kesiliyor ya iki
     satıra çıkıyordu. Dar ekranda gezinme hamburger menüsünden yürüyor
     (layout.css), şerit gizleniyor. */
  .mainnav { display: none; }

  /* Afiş ekran boyuna uzatılmaz: 2.72:1'lik görsel dikey ekranda ince bir
     dilime inerdi. Kadraj oranı görselin kendi oranına yaklaştırıldı:
     16:9'da genişliğin üçte biri kırpılıyor ve sahne iyice yakınlaşmış
     duruyordu; 2.1:1'de kırpma onda bire iniyor, Hocamız da Kur'an-ı
     Kerim de kadraja giriyor. */
  /* Mobilde afis EKRANI DOLDURMAZ: dikey telefonda tam-ekran yapilsa
     yatay gorsel cok kirpilip Hocamiz'in yuzu kesilir. Burada afis
     kendi yatay orani (2.37) ile ince bir serit olarak durur. */
  .hero__visual {
    height: auto;
    aspect-ratio: 1930 / 815;
  }

  /* Düğme dar afişte ekranı boğmasın: küçülüyor ve ortanın biraz
     üstüne alınıyor — tam ortada Hocamızın yüzüne denk geliyordu,
     yukarıda motifin üzerine oturuyor. */
  .hero__watch {
    left: 50%;
    top: 42%;
    font-size: 0.6rem;
    padding: 0.4em 1.05em 0.4em 0.4em;
    letter-spacing: 0.04em;
    gap: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__watch,
  .live-cover:hover .hero__watch { transition: none; transform: translate(-50%, -50%); }
}