/* =============================================================
   pagehead.css — Yeniden kullanılabilir SAYFA BANNER'I (tüm alt sayfalar).
   Anasayfa hero'sunun "half" hali: yuvarlatılmış medya kartı + atmosferik bg
   foto + koyu okunurluk overlay + kırmızı kor; içerikte breadcrumb + sayfa
   başlığı + alt metin (sol-altta). Nav bunun ÜSTÜNDE durur (fixed).
   Her sayfa kendi bg'sini ve başlığını verir. SCOPE: HER selector .mcy-banner.
   ============================================================= */

.mcy-banner {
  --bn-display: "MCY Helvetica", "Helvetica Neue", Arial, sans-serif;
  --bn-ease: cubic-bezier(0.23, 1, 0.32, 1);
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 14px;
  background: var(--bg-color);
}
.mcy-banner .mcy-banner__card {
  position: relative;
  width: 100%;
  max-width: 1800px;
  height: clamp(340px, 54vh, 500px);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #1c1612;
}
.mcy-banner .mcy-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  animation: mcyBannerZoom 18s ease-out both;
}
/* Okunurluk: alttan koyu degrade + sol-altta sıcak kırmızı kor */
.mcy-banner .mcy-banner__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(70% 90% at 6% 104%, rgba(234, 29, 38, 0.2) 0%, transparent 52%),
    linear-gradient(to top, rgba(18, 12, 8, 0.86) 0%, rgba(18, 12, 8, 0.34) 46%, rgba(18, 12, 8, 0.42) 100%);
}

.mcy-banner .mcy-banner__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 60px);
  color: var(--text-light);
}

/* Breadcrumb */
.mcy-banner .mcy-banner__crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.mcy-banner .mcy-banner__crumb a {
  color: rgba(252, 251, 251, 0.66);
  text-decoration: none;
  transition: color 0.2s var(--bn-ease);
}
.mcy-banner .mcy-banner__crumb a:hover { color: var(--text-light); }
.mcy-banner .mcy-banner__crumb .mcy-ico { width: 14px; height: 14px; color: rgba(252, 251, 251, 0.4); }
.mcy-banner .mcy-banner__crumb span[aria-current] { color: var(--primary-color); font-weight: 600; }

.mcy-banner .mcy-banner__title {
  margin: 0;
  font-family: var(--bn-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-light);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
}
.mcy-banner .mcy-banner__title b { font-weight: 700; color: var(--primary-color); }
.mcy-banner .mcy-banner__sub {
  margin: 14px 0 0;
  max-width: 48ch;
  font-family: "Poppins", sans-serif;
  font-size: clamp(0.95rem, 1.4vw, 1.12rem);
  line-height: 1.55;
  color: rgba(252, 251, 251, 0.78);
}

@keyframes mcyBannerZoom { from { transform: scale(1.08); } to { transform: scale(1.0); } }

/* ============================ Responsive ============================ */
@media (max-width: 767px) {
  .mcy-banner { padding: 10px; }
  .mcy-banner .mcy-banner__card { height: clamp(300px, 60vh, 420px); border-radius: 20px; }
  .mcy-banner .mcy-banner__content { padding: 24px 20px; }
  .mcy-banner .mcy-banner__crumb { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mcy-banner .mcy-banner__bg { animation: none; transform: scale(1.0); }
}