/* ==========================================================================
   VV TABLO — KÜLTÜR & MİRAS  (2026-08-17)
   --------------------------------------------------------------------------
   Serideki dördüncü özel sayfa. Dördü de aynı markanın ayrı odaları:

     Eğlenceli      koyu mürekkep + neon + bantlı çıkartma   → şen
     Kids by Hi Mom gün ışığı + pastel + kemerli pencere     → masalsı
     Doğa & Yaşam   gece siyahı + altın saat + boşluk        → dingin
     Kültür & Miras sinema perdesi + yer künyesi             → görkemli

   TASARIMIN DAYANDIĞI GÖZLEM
   Bu koleksiyonun eserleri "tema" değil, YER. Kapadokya, Göbeklitepe,
   Nemrut, Petra, Machu Picchu... 52 eserin her biri adı olan gerçek bir
   mekân ve bir saat (şafak, altın saat, gün batımı). Hero artık tek bir
   donmuş kare değil; beş yer arasında ağır ağır geçen bir sahne ve her
   sahnede o yerin künyesi. Koleksiyonun vaadi — "bir yolculuk" — ilk
   ekranda anlatılıyor.

   NEDEN AYRI DOSYA
   collection-page.css'teki .heritage-hero kuralları ESKİ, çok düşük pozlu
   tek hero görseli için ÖLÇÜLEREK ayarlanmıştı (brightness 2.4 dahil; o
   dosyadaki uzun açıklamaya bakın). Yeni sahneler zaten altın saat
   parlaklığında — o filtre onları yakardı. Eski kuralları silmek yerine
   burada, yalnız bu sayfada (body.km) eziyoruz: geri almak bu dosyanın
   bağlantısını kaldırmakla biter.
   ========================================================================== */

.km{
  --km-altin:#C9A227;
  --km-amber:#E8B860;
  --km-tebesir:#F4F1EA;
}

/* ---------- SAHNE ---------- */
/* Eski tek görsel yerine üst üste beş sahne. */
.km .heritage-hero-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  /* Eski aydınlatma filtresi İPTAL — yeni sahneler zaten parlak. */
  filter:none;
  opacity:0;
  transition:opacity 1.2s var(--ease);
}
.km .heritage-hero-media img.is-aktif{ opacity:1; }

/* Okunabilirlik perdesi — DEĞERLER ÖLÇÜLEREK SEÇİLDİ (bu dosyanın kuralı;
   collection-page.css'teki R19 notuyla aynı yöntem).

   Eski perde "sol %40 zaten neredeyse siyah" varsayımına dayanıyordu; o
   varsayım TEK bir karanlık görsel için doğruydu. Beş sahnede sol taraf
   bazen gün doğumu göğü, bazen kar beyazı traverten. Tarayıcıda canvas
   ile ölçüldü (yazı bölgesi = soldan %40, dikeyde %20-80, göreli parlaklık):

     sahne          ortalama L   en parlak piksel
     Kapadokya         0,316          0,982   ← güneş, sol üstte
     Nemrut Dağı       0,328          0,968
     Pamukkale         0,232          0,818
     Petra             0,136          0,927
     Efes              0,084          0,568

   İlk perde (%40'ta 0,40 siyah) Kapadokya'da beyaz yazıya 4,4:1 veriyordu
   — AA gövde eşiği 4,5:1, yani KALIYORDU. Yeni perde yazı bandını 0,86-0,76
   arasında tutuyor:

     Kapadokya ortalama → 8,3:1     en parlak piksel → 3,7:1
     Nemrut    ortalama → 8,0:1     Efes ortalama    → 22:1

   En parlak piksel (güneş diski) tek başına 4,5'in altında kalıyor; onu da
   aşağıdaki text-shadow karşılıyor. Sağ %58'den sonra perde hızla açılıyor,
   anıtlar tam parlaklıkta kalıyor. */
.km .heritage-hero-media::after{
  background:
    linear-gradient(90deg,
      rgba(6,7,6,.86) 0%,
      rgba(6,7,6,.82) 22%,
      rgba(6,7,6,.76) 40%,
      rgba(6,7,6,.46) 58%,
      rgba(6,7,6,.12) 72%,
      rgba(6,7,6,0) 84%),
    linear-gradient(180deg, rgba(6,7,6,.40) 0%, transparent 24%, transparent 62%, rgba(6,7,6,.60) 100%);
}
/* Güneş diski gibi tek tük çok parlak noktalarda kenar ayrımı. */
.km .heritage-hero-inner :where(h1, p, .heritage-hero-kicker){
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
@media(max-width:767.98px){
  /* Telefonda yazı görselin üstünde tam genişlikte duruyor; yön yerine
     yukarıdan aşağı perde gerekiyor. */
  .km .heritage-hero-media::after{
    background:linear-gradient(180deg, rgba(6,7,6,.72) 0%, rgba(6,7,6,.55) 44%, rgba(6,7,6,.78) 100%);
  }
}

/* ---------- YER KÜNYESİ ---------- */
/* KÜNYE VE NOKTALAR AKIŞTA, MUTLAK DEĞİL.
   İlk sürümde ikisi de .heritage-hero'ya göre `position:absolute; bottom:…`
   idi. Sorun: bu sayfada GÜVENCE ŞERİDİ (.modern-trust — Ücretsiz Kargo,
   Güvenli Ödeme, Kolay İade, Destek Hattı) hero'nun İÇİNDE, en altındaki
   84px'i kaplıyor. Dolayısıyla künye "Destek Hattı / 7/24 yanınızdayız"
   yazısının üstüne biniyordu, noktalar da tamamen onun içinde kalıyordu.
   (Ölçüldü: künye y 482-544, şerit y 502-586.)

   Bottom değerini şerit yüksekliği kadar artırmak kırılgan olurdu — şerit
   telefonda 2 sütuna, 420px altında tek sütuna düşüyor, yüksekliği
   değişiyor. Onun yerine ikisi, şeritten HEMEN ÖNCE duran normal akışlı
   bir kutuya alındı: nereye denk geleceği artık hesaba değil, akışa bağlı. */
/* TEK SATIR (17 Ağu, kullanıcı: "yüksek, kısalt"): künye ve noktalar
   alt alta ~100px yiyordu, hero 586'dan 702'ye çıkmıştı. Şimdi ikisi
   aynı satırda; blok ~40px. */
.km-sahne-alt{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
  padding:0 40px 16px;
}
@media(max-width:767.98px){
  .km-sahne-alt{ justify-content:flex-start; padding:0 24px 14px; flex-wrap:wrap; gap:10px 16px; }
}

.km-kunye{
  color:var(--km-tebesir);
  display:flex; align-items:baseline; gap:10px;
}
.km-kunye-yer{
  font-family:'Fraunces',serif; font-weight:300;
  font-size:19px; line-height:1.2;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.km-kunye-alt{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--km-amber);
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}
/* Tek satır düzeninde çizgi gereksiz — yükseklik yiyordu. */
.km-kunye-cizgi{ display:none; }

/* ---------- SAHNE NOKTALARI ---------- */
.km-noktalar{
  display:flex; gap:7px;
  padding:0; margin:0; list-style:none;
}
.km-nokta{
  width:26px; height:3px; padding:0;
  border:0; border-radius:2px;
  background:rgba(244,241,234,.3);
  cursor:pointer;
  transition:background-color .3s var(--ease);
}
.km-nokta:hover{ background:rgba(244,241,234,.6); }
.km-nokta[aria-current="true"]{ background:var(--km-amber); }

.km .heritage-hero{ position:relative; }

/* Yükseklik (17 Ağu, kullanıcı: "yüksek, kısalt"): künye satırı akışa
   girince hero 586 → 702px olmuştu. Künye tek satıra indi (yukarıda) ve
   yazı bloğunun alt dolgusu kısıldı — künye satırı zaten görsel bir
   kapanış veriyor, ikisinin toplamı eski dolgu kadar yer tutuyor. */
.km .heritage-hero-inner{ padding-bottom:clamp(20px,2.2vw,30px); }

/* ---------- TELEFON: premium sıkılaştırma (17 Ağu, kullanıcı bildirimi:
   "web mobilde premium görünmüyor").
   Ortak şablon telefonda üç özelliği (Özgün Tasarımlar / Premium Malzeme /
   El İşçiliği) alt alta, açıklama satırlarıyla basıyor — hero'nun yarısı
   madde listesi gibi görünüyordu. Telefonda açıklamalar gizlenir, üçü
   buzlu-cam rozet olarak tek satıra alınır; kicker'a harf aralığı,
   başlığa kırpılmış üst boşluk verilir. Masaüstü DEĞİŞMEZ. ---------- */
@media(max-width:767.98px){
  .km .heritage-hero-inner{ padding-top:26px; padding-bottom:18px; }
  .km .heritage-hero-kicker{
    font-size:10.5px; letter-spacing:.24em; color:var(--km-amber);
  }
  .km .heritage-hero .modern-features{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:8px; margin-top:22px; max-width:none;
  }
  .km .heritage-hero .modern-feature{
    display:inline-flex; align-items:center; gap:8px;
    grid-template-columns:none;
    padding:8px 13px;
    border:1px solid rgba(244,241,234,.22);
    border-radius:999px;
    background:rgba(244,241,234,.07);
    backdrop-filter:blur(4px);
  }
  .km .heritage-hero .modern-feature img{ width:17px; height:17px; }
  .km .heritage-hero .modern-feature h2{
    font-size:11.5px; font-weight:500; letter-spacing:.04em;
    color:var(--km-tebesir); margin:0;
  }
  /* Açıklama satırları ("Her eser özgün olarak tasarlanır.") telefonda
     gizli — rozette başlık yeter, açıklamalar listeyi uzatıyordu. */
  .km .heritage-hero .modern-feature p{ display:none; }
}

/* ---------- IZGARA ---------- */
.km .person-head h2::after{ background:var(--km-altin); width:56px; height:2px; border-radius:2px; }
.km .artwork-card{ transition:transform .3s var(--ease); }
.km .artwork-card:hover{ transform:translateY(-4px); }

/* ---------- HAREKETİ AZALT ---------- */
@media (prefers-reduced-motion: reduce){
  .km .heritage-hero-media img{ transition:none; }
  .km .artwork-card:hover{ transform:none; }
}