/* ════════════════════════════════════════════════════════════════════════
   ProYA · banners.css  ·  Paylaşılan editorial sayfa banner sistemi
   ────────────────────────────────────────────────────────────────────────
   Anatomi (Tektonik Editorial):
   - Full-bleed sinematik görsel (.pg-banner__media)
   - Tek katmanlı koyu scrim (gradient, glassmorphism YOK)
   - Editorial içerik: eyebrow mono + serif-italic vurgulu display başlık
     + lede + sağ künye dl + alt hairline meta şeridi
   Sayfa kimliği için per-page tema yok — yalnız içerik (numara/başlık/meta)
   sayfaya özel; ortak chrome paylaşılır.
   ════════════════════════════════════════════════════════════════════════ */

/* Skeleton `section{display:flex}` (@layer proya-default) banner'ı flex'e
   çevirip içeriği daraltır; banner blok düzene sabitlenir. */
.pg-banner { display: block; }

/* OPERATÖR SPEC v3: banner navbar altına BEYAZ ZONE kalmadan girsin.
   Page main wrapper (.about-page / .blog-page / .ct) floating-pill nav için
   padding-top:108px taşıyor; bu padding banner'ı viewport top'tan aşağı
   itip kremsi bir zone yaratıyordu. Banner içeren main'ler için bu
   padding sıfırlanır; banner görseli viewport top'a kadar uzanır (banner.top=0)
   ve nav arkasında durur. Banner ICERIGI (eyebrow/title) navbar yüksekliği
   kadar inerek başlar — text nav'la çakışmaz. */
/* Esnek selector: blog-detay'da .pg-banner <article> içinde nested; selector
   doğrudan child değil herhangi bir .pg-banner içeren main'i hedefler.
   Banner her sayfada en üstte olduğundan bu güvenli. */
main:has(.pg-banner) { padding-top: 0 !important; }
/* Banner article gibi inline wrapper içinde de aynı şekilde sıfırlanır */
main > article:has(> .pg-banner:first-child) { padding-top: 0; }

.pg-banner {
  position: relative;
  color: var(--ink-bone);
  background: var(--bg-deep);
  overflow: hidden;
  /* Üst padding = navbar y(16) + height(63.5) + nefes (~24) ≈ 104. clamp ile
     viewport yüksekliğine ölçeklen. Banner GÖRSELİ viewport top'tan başlar
     (.pg-banner__media absolute), iç padding navbar'ı arkadan absorb eder. */
  padding: clamp(96px, 11vh, 116px) 0 clamp(28px, 4vh, 52px);
  /* Yarım-ekran kapağı: content_zone 50vh × etkili height. Min-height
     toplam (üst padding + content area). 50vh = 450px@900h hedefi. */
  min-height: clamp(360px, 50vh, 480px);
}
.pg-banner[data-variant="tall"] { min-height: clamp(440px, 62vh, 600px); }

/* ─── Görsel + scrim (tek katman, glassmorphism yok) ──────────────────── */
.pg-banner__media {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.pg-banner__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  /* Hafif Ken Burns auto-start (JS sınıf wiring yok); reduced-motion'da kapalı */
  animation: pg-banner-zoom 1600ms var(--ease) 80ms both;
  will-change: transform;
}
@keyframes pg-banner-zoom { from { transform: scale(1.045); } to { transform: scale(1); } }
.pg-banner__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    oklch(0.135 0.006 60 / 0.30) 0%,
    oklch(0.135 0.006 60 / 0.55) 55%,
    oklch(0.135 0.006 60 / 0.92) 100%
  );
  pointer-events: none;
}

/* ─── İçerik kolonu (görselin üstüne) ─────────────────────────────────── */
.pg-banner .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pg-banner__inner {
  display: grid;
  gap: clamp(18px, 2.2vw, 30px);     /* sıkılaştı: 44vh içine sığsın */
  justify-content: stretch;
  align-content: end;
  flex: 1;
}
.pg-banner__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.8vw, 36px);
  align-items: end;
}
@media (min-width: 960px) {
  .pg-banner__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 72px; }
}

/* Başlık bloğu */
.pg-banner__eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: oklch(0.85 0.010 65);
  display: inline-flex; align-items: center; gap: 12px;
}
/* AI-slop blue-dot kaldırıldı; yerine ince hairline tick — daha editorial */
.pg-banner__eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: oklch(0.85 0.010 65 / 0.55);
  display: inline-block;
}
.pg-banner__title {
  font-family: var(--ff-display);
  font-weight: 600;
  /* OPERATÖR SPEC v2: banner 40-50vh içine sığsın diye tavan 88→64;
     başlık hâlâ display ölçekli ve cinematic. */
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink-bone);
  text-wrap: balance;
  margin: 8px 0 0;
  max-width: 24ch;
}
.pg-banner__title .serif-i { color: var(--ink-bone); letter-spacing: 0; }
.pg-banner__lede {
  margin-top: clamp(10px, 1.2vw, 16px);
  /* Daha sıkı genişlik → satır sayısı az, banner 40-50vh içinde kalır */
  max-width: 38ch;
  color: oklch(0.86 0.008 65);
  font-family: var(--ff-display);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.4;
}

/* Sağ künye / koordinat dl — koyu üstünde okunur */
.pg-banner__meta {
  display: grid;
  border-top: 1px solid oklch(0.55 0.010 60 / 0.55);
}
.pg-banner__meta-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding-block: 9px;
  border-bottom: 1px solid oklch(0.55 0.010 60 / 0.55);
}
.pg-banner__meta-row dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: oklch(0.80 0.010 65);
}
.pg-banner__meta-row dd {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 14.5px;
  color: var(--ink-bone);
}

/* Alt hairline meta şeridi (opsiyonel mono caption sırası) */
.pg-banner__foot {
  margin-top: clamp(20px, 2.4vw, 32px);
  padding-top: 12px;
  border-top: 1px solid oklch(0.55 0.010 60 / 0.55);
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: oklch(0.80 0.010 65);
}
.pg-banner__foot strong { color: var(--ink-bone); font-weight: 500; }

/* ─── Mobil (≤620): künye altında, alt meta sade ──────────────────────── */
@media (max-width: 620px) {
  /* Mobil navbar (24+50≈74px) için banner iç üst padding navbar yüksekliği
     kadar — görsel viewport top'tan başlar, içerik nav altından nefes alır. */
  .pg-banner { padding-top: clamp(78px, 9.5vh, 96px); padding-bottom: clamp(18px, 2.6vh, 30px); min-height: clamp(340px, 52vh, 460px); }
  .pg-banner__inner { gap: clamp(14px, 2vh, 20px); }
  .pg-banner__title { font-size: clamp(28px, 7vw, 36px); margin-top: 6px; }
  .pg-banner__lede  { max-width: 34ch; font-size: 13.5px; line-height: 1.4; margin-top: 8px; }
  /* Meta mobilde 2-kolon kompakt: 4 satır yerine 2×2 grid (sıkıştırılmış). */
  .pg-banner__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; border-top: 1px solid oklch(0.55 0.010 60 / 0.55); }
  .pg-banner__meta-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: 7px; border-bottom: 0; }
  .pg-banner__meta-row dt { font-size: 9.5px; letter-spacing: 0.10em; }
  .pg-banner__meta-row dd { font-size: 13px; }
  .pg-banner__foot { gap: 6px 16px; font-size: 9.5px; letter-spacing: 0.10em; margin-top: clamp(12px, 1.8vh, 20px); padding-top: 10px; }
}

/* ─── Erişilebilirlik: reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pg-banner__media img { transform: none; animation: none; }
}