/* ============================================================
 * SITE HERO — tek hero sistemi (consolidation 2026-06-04).
 * <Hero> component (components/uludaginfo/hero.tsx) tarafından kullanılır.
 * İki tip: standard (440px) · extended (636px).
 * h1 = Mark Pro (marka display), clamp(vw) ile mobil/tablet'te yüzdesel
 * küçülür. lead = Gotham (gövde). Eski per-sayfa hero class'larının ve
 * styles.css "holistik !important" bloğunun yerini alır.
 * ============================================================ */

.site-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-bottom: 3px solid var(--u-black);
  /* Varsayılan: navy */
  background: linear-gradient(180deg, #0A1622 0%, #1F3854 100%);
}
/* Arka plan temaları (data-hero-bg) */
.site-hero[data-hero-bg='weather'] {
  background: linear-gradient(180deg, #0A1622 0%, #1F3854 60%, #2C5479 100%);
}
.site-hero[data-hero-bg='dark'] { background: var(--u-black); }
.site-hero[data-hero-bg='gold'] {
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(245, 196, 47, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #0A0A0A 0%, #0F1A2A 100%);
}

/* (Izgara overlay .site-hero__bg kaldırıldı — Bug Report 08.06: tüm
   hero'lardan grid view temizlendi.) */

/* İçerik kabı — üst bölge: breadcrumb (15px/15px margin) + eyebrow; altında
   h1+lead KALAN ALANIN dikey ortasında. (Burak 2026-06-04) */
.site-hero__inner {
  position: relative;
  z-index: 2;
  padding: 0 40px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
}
.site-hero--extended .site-hero__inner { min-height: 636px; }

/* Gövde — kalan alanı doldurur, h1+lead dikey ortalı */
.site-hero__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 40px;
}
/* 2-kolon (aside verilince) — flex-row + align-items:center → body kalan
   yüksekliği doldurduğu için h1 (sol) ve aside (sağ) DİKEY ORTALANIR.
   (grid + align-items:start h1'i yukarı sabitliyordu — 03.06 fix.) */
.site-hero__body.has-aside {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 48px;
}
.site-hero__body.has-aside .site-hero__main { flex: 1.4 1 0; }
.site-hero__body.has-aside .site-hero__aside { flex: 1 1 0; }

.site-hero__main { display: flex; flex-direction: column; min-width: 0; }
.site-hero__aside { min-width: 0; }

/* Key-strip — hero sağ kolonunda istatistik kutuları (auto-fit: kutu sayısına
   göre 2/3/4 kolon). Eski .lp-hero/.ph-hero/.wc-hero .key-strip yerine. */
.site-hero .key-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px;
}
.site-hero .key-strip .ks {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  padding: 14px;
  border-radius: 12px;
}
.site-hero .key-strip .ks .v {
  font-family: 'Mark Pro', sans-serif; font-weight: 900; font-style: italic;
  font-size: 32px; color: var(--u-yellow); line-height: 1; letter-spacing: -0.02em;
}
.site-hero .key-strip .ks .v small { font-size: 16px; vertical-align: 4px; color: var(--u-yellow); font-weight: 700; margin-left: 2px; }
.site-hero .key-strip .ks .k {
  font-family: 'Mark Pro', sans-serif; font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
  margin-top: 8px; line-height: 1.3;
}

/* Hero CTA pill (sponsorluk vb. aside içi buton). */
.site-hero .hero-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  background: var(--u-fuchsia); color: #fff; border: 2px solid var(--u-black);
  border-radius: 999px; padding: 14px 22px;
  font-family: 'Mark Pro', sans-serif; font-weight: 900; font-style: italic;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 5px 0 var(--u-black); transition: transform 160ms ease;
}
.site-hero .hero-cta:hover { transform: translateY(-2px); }

/* Breadcrumb — navbar'a 15px, eyebrow'a 15px boşluk (üst+alt margin). */
.site-hero .crumbs {
  color: rgba(255, 255, 255, 0.6);
  margin: 15px 0;
  font-family: 'Mark Pro', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Global ".crumbs span::after { content:'·' }" (styles.css) burada İPTAL —
   ayraç olarak yalnız bizim "/" gösterilsin (nokta yok). */
.site-hero .crumbs span::after { content: none !important; }
.site-hero .crumbs a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.site-hero .crumbs a:hover { color: var(--u-yellow); }
.site-hero .crumbs .now { color: var(--u-yellow); }

/* preCrumbs — breadcrumb'tan önce, en üstte (otel-detay back pill). */
.site-hero__precrumbs { margin: 18px 0 0; }
/* preTitle — h1'in hemen üstünde (otel-detay rozetleri). */
.site-hero__pretitle { margin: 0 0 14px; }

/* Eyebrow */
.site-hero .eyebrow {
  color: var(--u-yellow);
  font-family: 'Mark Pro', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;   /* üst bölgede; crumbs'ın 15px alt margin'i gap'i verir. h1 ayrı (ortalı) */
}

/* h1 — Mark Pro, clamp(vw) → mobil/tablet yüzdesel */
.site-hero h1 {
  font-family: 'Mark Pro', sans-serif;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 0.9;
  margin: 0;
}
.site-hero--standard h1 { font-size: clamp(2.5rem, 7.5vw, 4.5rem); }   /* 40 → 72px */
.site-hero--extended h1 { font-size: clamp(3rem, 9vw, 6rem); }          /* 48 → 96px */
.site-hero h1 em { color: var(--u-yellow); font-style: italic; }

/* Lead — Gotham gövde */
.site-hero .lead {
  font-family: 'Gotham', sans-serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 2.2vw, 1rem);   /* ~15 → 16px */
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 16px 0 0;
}
.site-hero .lead strong { color: var(--u-yellow); }

/* Tablet/mobil: 2-kolon tek kolona, padding daralt (h1 zaten clamp ile küçülür) */
@media (max-width: 768px) {
  .site-hero__inner { padding: 44px 20px; min-height: 380px; }
  .site-hero--extended .site-hero__inner { min-height: 520px; }
  /* 2-kolon hero mobilde tek kolona (h1 → key-strip alt alta). justify-content
     center: desktop has-aside flex-start'tı → mobilde gövde dikey ortalanmıyordu
     (aside/key-strip çoğu sayfada @768'de display:none → h1 üstte takılıydı).
     Bug Report 04.06: tüm has-aside hero'larda mobilde h1 dikey ortalansın. */
  .site-hero__body.has-aside {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
  }
  /* Bug Report 05.06 — mobilde breadcrumb + eyebrow yazıları küçült. */
  .site-hero .crumbs { font-size: 10px; letter-spacing: 0.1em; margin: 12px 0; }
  .site-hero .eyebrow { font-size: 10px; letter-spacing: 0.16em; }

  /* Burak 2026-06-13 — foto hero'larda mobilde h1+lead (site-hero__main) DİKEY
     ORTALI + sola dayalı. Bu sayfalarda crumbs+eyebrow + h1+lead + küçük
     key-strip aside gövdeyi neredeyse dolduruyor → ortalanacak boşluk kalmıyor,
     başlık üste yapışıyordu. Mobilde aside'ı gizleyip body'yi center yapınca
     başlık bloğu gerçekten dikey ortalanır (statlar masaüstünde + sayfa
     içeriğinde zaten mevcut). */
  .pistler-hero-photo .site-hero__body.has-aside,
  .webcam-hero-photo .site-hero__body.has-aside,
  .yuzyil-hero-photo .site-hero__body.has-aside,
  .kayakokullari-hero-photo .site-hero__body.has-aside,
  .ekipman-hero-photo .site-hero__body.has-aside,
  .konaklama-hero-photo .site-hero__body.has-aside,
  .ulasim-hero-photo .site-hero__body.has-aside,
  .sponsorluk-hero-photo .site-hero__body.has-aside {
    justify-content: center;
  }
  .pistler-hero-photo .site-hero__aside,
  .webcam-hero-photo .site-hero__aside,
  .yuzyil-hero-photo .site-hero__aside,
  .kayakokullari-hero-photo .site-hero__aside,
  .ekipman-hero-photo .site-hero__aside,
  .konaklama-hero-photo .site-hero__aside,
  .ulasim-hero-photo .site-hero__aside,
  .sponsorluk-hero-photo .site-hero__aside {
    display: none;
  }
  /* main, base'de flex:1.4 ile gövdeyi dolduruyor ama kendi içeriğini
     (h1+lead) flex-start hizalıyordu → başlık üstte. İçeriği main'in dikey
     ortasına al. */
  .pistler-hero-photo .site-hero__body.has-aside .site-hero__main,
  .webcam-hero-photo .site-hero__body.has-aside .site-hero__main,
  .yuzyil-hero-photo .site-hero__body.has-aside .site-hero__main,
  .kayakokullari-hero-photo .site-hero__body.has-aside .site-hero__main,
  .ekipman-hero-photo .site-hero__body.has-aside .site-hero__main,
  .konaklama-hero-photo .site-hero__body.has-aside .site-hero__main,
  .ulasim-hero-photo .site-hero__body.has-aside .site-hero__main,
  .sponsorluk-hero-photo .site-hero__body.has-aside .site-hero__main {
    justify-content: center;
  }

  /* Burak 2026-06-13 — gastronomi / tüm mekanlar / uludağ cebinde başlıkları
     mobilde TEK SATIR olsun (2 satır <br> gizle). Bu 3'te aside (filtre formu /
     mağaza rozetleri) önemli içerik → gizlenmez; main içeriği dikey ortalanır. */
  .gastronomi-hero-photo h1 br.hero-br-mobile,
  .mekanlar-hero-photo h1 br.hero-br-mobile,
  .uapp-hero h1 br.hero-br-mobile {
    display: none;
  }
  .gastronomi-hero-photo .site-hero__body.has-aside .site-hero__main,
  .mekanlar-hero-photo .site-hero__body.has-aside .site-hero__main,
  .uapp-hero .site-hero__body.has-aside .site-hero__main {
    justify-content: center;
  }

  /* Burak 2026-06-13 — sponsorluk hero görselinde insan (turuncu montlu)
     sağda; mobilde center kırpınca kayboluyordu. Sağa kaydır (inline
     background-position:center'ı geçmek için !important). */
  .sponsorluk-hero-photo {
    background-position: 74% center !important;
  }
}
@media (max-width: 480px) {
  .site-hero__inner { padding: 36px 16px; min-height: 340px; }
  .site-hero--extended .site-hero__inner { min-height: 460px; }
}

/* Foto arka planlı hero'lar (liftler, otel-detay, pistler, pist rotaları,
   aktiviteler, ulaşım, ekipman kiralama) — Bug Report 08.06: fotoğraf
   ORİJİNAL renginde, üzerine karartma filtresi YOK. Yazı okunabilirliği için
   yalnızca METNE gölge (fotoğrafa filtre değil). */
.liftler-hero-photo .crumbs,
.liftler-hero-photo .eyebrow,
.liftler-hero-photo h1,
.liftler-hero-photo .lead,
.pistler-hero-photo .crumbs,
.pistler-hero-photo .eyebrow,
.pistler-hero-photo h1,
.pistler-hero-photo .lead,
.pistrotalari-hero-photo .crumbs,
.pistrotalari-hero-photo .eyebrow,
.pistrotalari-hero-photo h1,
.pistrotalari-hero-photo .lead,
.aktiviteler-hero-photo .crumbs,
.aktiviteler-hero-photo .eyebrow,
.aktiviteler-hero-photo h1,
.aktiviteler-hero-photo .lead,
.ulasim-hero-photo .crumbs,
.ulasim-hero-photo .eyebrow,
.ulasim-hero-photo h1,
.ulasim-hero-photo .lead,
.ulasim-hero-photo .key-strip,
.ekipman-hero-photo .crumbs,
.ekipman-hero-photo .eyebrow,
.ekipman-hero-photo h1,
.ekipman-hero-photo .lead,
.gastronomi-hero-photo .crumbs,
.gastronomi-hero-photo .eyebrow,
.gastronomi-hero-photo h1,
.gastronomi-hero-photo .lead,
.mekanlar-hero-photo .crumbs,
.mekanlar-hero-photo .eyebrow,
.mekanlar-hero-photo h1,
.mekanlar-hero-photo .lead,
.kayakokullari-hero-photo .crumbs,
.kayakokullari-hero-photo .eyebrow,
.kayakokullari-hero-photo h1,
.kayakokullari-hero-photo .lead,
.konaklama-hero-photo .crumbs,
.konaklama-hero-photo .eyebrow,
.konaklama-hero-photo h1,
.konaklama-hero-photo .lead,
.sozlesmeler-hero-photo .crumbs,
.sozlesmeler-hero-photo .eyebrow,
.sozlesmeler-hero-photo h1,
.sozlesmeler-hero-photo .lead,
.bilet-hero-photo .crumbs,
.bilet-hero-photo .eyebrow,
.bilet-hero-photo h1,
.bilet-hero-photo .lead,
.yuzyil-hero-photo .crumbs,
.yuzyil-hero-photo .eyebrow,
.yuzyil-hero-photo h1,
.yuzyil-hero-photo .lead,
.bursa-hero-photo .crumbs,
.bursa-hero-photo .eyebrow,
.bursa-hero-photo h1,
.bursa-hero-photo .lead,
.sponsorluk-hero-photo .crumbs,
.sponsorluk-hero-photo .eyebrow,
.sponsorluk-hero-photo h1,
.sponsorluk-hero-photo .lead,
.karavan-hero-photo .crumbs,
.karavan-hero-photo .eyebrow,
.karavan-hero-photo h1,
.karavan-hero-photo .lead,
.havakar-hero-photo .crumbs,
.havakar-hero-photo .eyebrow,
.havakar-hero-photo h1,
.havakar-hero-photo .lead,
.webcam-hero-photo .crumbs,
.webcam-hero-photo .eyebrow,
.webcam-hero-photo h1,
.webcam-hero-photo .lead,
.etkinlikler-hero-photo .crumbs,
.etkinlikler-hero-photo .eyebrow,
.etkinlikler-hero-photo h1,
.etkinlikler-hero-photo .lead,
.iletisim-hero-photo .crumbs,
.iletisim-hero-photo .eyebrow,
.iletisim-hero-photo h1,
.iletisim-hero-photo .lead,
.haberler-hero-photo .crumbs,
.haberler-hero-photo .eyebrow,
.haberler-hero-photo h1,
.haberler-hero-photo .lead,
.cozumortaklarimiz-hero-photo .crumbs,
.cozumortaklarimiz-hero-photo .eyebrow,
.cozumortaklarimiz-hero-photo h1,
.cozumortaklarimiz-hero-photo .lead,
.od-hero-photo .crumbs,
.od-hero-photo .eyebrow,
.od-hero-photo .site-hero__pretitle,
.od-hero-photo h1,
.od-hero-photo .lead,
.od-hero-photo .quickstats {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Hero parallax KALDIRILDI (2026-06-13, Burak) — `background-attachment:
   fixed` viewport'a göre konumlandığı için bazı hero'larda (gastronomi,
   konaklama) görsel "kaymış/oturmamış" görünüyordu. Tüm hero'lar artık
   element-bazlı `cover` + `center` (varsayılan scroll attachment). */

/* Hero scrim (2026-06-12) — parlak foto arka planlarda metin okunabilirliği
   için karartma katmanı. 08.06'da tüm foto-hero'lardan filtre kaldırılmıştı;
   bazı görseller çok parlak → yazılar okunmuyordu. Fotoğrafa filtre DEĞİL,
   ::before overlay. Metin (.site-hero__inner z-index:2) üstte kalır.

   İki tip:
   - SOL→SAĞ artan şeffaflık (varsayılan): metin solda; sağdaki fotoğraf
     görünür kalır. bilet vb. parlak ama sağı boş sayfalar.
   - ÜNİFORM (tam kaplama): sayfada SAĞDA DA yazı varsa (reklam-sponsorluk:
     aside + CTA sağda) → tüm hero eşit karartılır. */
.sozlesmeler-hero-photo::before,
.bilet-hero-photo::before,
.liftler-hero-photo::before,
.pistrotalari-hero-photo::before,
.havakar-hero-photo::before,
.karavan-hero-photo::before,
.aktiviteler-hero-photo::before,
.etkinlikler-hero-photo::before,
.iletisim-hero-photo::before,
.haberler-hero-photo::before,
.cozumortaklarimiz-hero-photo::before,
.bursa-hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 16, 28, 0.66) 0%,
    rgba(8, 16, 28, 0.42) 40%,
    rgba(8, 16, 28, 0.12) 72%,
    rgba(8, 16, 28, 0) 100%
  );
  pointer-events: none;
}
/* Üniform — sağda da yazı (aside) olan parlak hero'lar. */
.sponsorluk-hero-photo::before,
.pistler-hero-photo::before,
.ekipman-hero-photo::before,
.kayakokullari-hero-photo::before,
.yuzyil-hero-photo::before,
.gastronomi-hero-photo::before,
.konaklama-hero-photo::before,
.od-hero-photo::before,
.webcam-hero-photo::before,
.mekanlar-hero-photo::before,
.ulasim-hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 28, 0.56);
  pointer-events: none;
}