/* ==========================================================================
   VV TABLO — ORTAK KOLEKSİYON SAYFASI TASARIM SİSTEMİ  (R6)
   --------------------------------------------------------------------------
   Bu dosya, Modern Sanat sayfasının onaylanmış tasarımını TEK kaynağa taşır.
   Kullanan sayfalar: modern-sanat, doga-yasam, maneviyat, kultur-miras,
   kids-by-hi-mom.

   NOT: imza-serisi/index.html BİLEREK bu sisteme dahil EDİLMEDİ — kendi
   özgün "kişi/imza" tasarımını korur (kullanıcı talebi).

   Sayfalar arasında YALNIZCA şunlar değişir:
     1) hero görseli (.modern-hero-visual img[src])
     2) üst yazılar (kicker / h1 / açıklama paragrafı)
     3) <title> ve meta description
   Renk paleti, tipografi, ızgara ve tüm bileşenler ORTAKTIR.
   ========================================================================== */

:root{
  --warm-white:#F7F5F1;
  --near-black:#111110;
  --midnight-navy:#0B1420;
  --deep-navy:#08111D;
  --soft-gray:#E7E4DE;
  --tint-navy:#F1F1EE;
  --muted-ink:#6B6862;
  --bronze:#B7A17E;
  --gold:#C99535;
  --ease: cubic-bezier(0.16,1,0.3,1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--warm-white); color:var(--near-black); font-family:'Inter',sans-serif; font-weight:300; }
body.locked{ overflow:hidden; }
.display{ font-family:'Fraunces', serif; font-weight:300; }
img{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
.wrap{ max-width:1440px; margin:0 auto; padding:0 24px; }
@media(min-width:768px){ .wrap{ padding:0 40px; } }

/* ---------- header ---------- */
header{ position:fixed; inset:0 0 auto 0; z-index:50; transition: background-color .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease); background:rgba(247,245,241,0.92); backdrop-filter:blur(6px); box-shadow:0 1px 0 rgba(17,17,16,0.06); }
header .bar{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; column-gap:16px; padding:16px 24px; transition: padding .5s var(--ease); }
@media(min-width:768px){ header .bar{ padding:16px 40px; } }

.bar-side{ display:flex; align-items:center; min-width:0; }
.bar-side.start{ justify-content:flex-start; }
.bar-side.end{ justify-content:flex-end; }

header nav{ display:none; gap:32px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; color:var(--near-black); }
@media(min-width:768px){ header nav{ display:flex; } }
header nav a.secondary{ opacity:.7; }
header nav a:hover{ opacity:.7; }

.logo-center{ justify-self:center; display:inline-flex; align-items:center; }
.logo-img{ height:33px; width:auto; display:block; filter:brightness(0); }
@media(min-width:768px){ .logo-img{ height:42px; } }

.header-icons{ display:flex; align-items:center; gap:16px; color:var(--near-black); }
.header-icons svg, .menu-btn svg{ width:19px; height:19px; }
.header-icons button, .search-btn, .menu-btn, .account-icon-link, .cart-icon-link{ background:none; border:none; cursor:pointer; color:inherit; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; }
.search-btn{ display:none; }
@media(min-width:640px){ .search-btn{ display:inline-flex; } }
.menu-btn{ display:inline-flex; color:var(--near-black); }
@media(min-width:768px){ .menu-btn{ display:none; } }

.mobile-menu{ position:fixed; inset:0; z-index:60; background:var(--warm-white); display:none; flex-direction:column; }
.mobile-menu.open{ display:flex; }
.mobile-menu .top{ display:flex; align-items:center; justify-content:space-between; padding:24px; }
.mobile-menu .logo-img{ height:30px; filter:brightness(0); }
.mobile-menu nav{ display:flex; flex-direction:column; gap:24px; padding:16px 32px; }
.mobile-menu nav a{ font-family:'Fraunces',serif; font-size:26px; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- premium üst alan (hero) ---------- */
.modern-hero{ padding-top:74px; background:#050606; }
.modern-hero-shell{
  position:relative;
  display:grid;
  width:100%;
  overflow:hidden;
  background:#050606;
}
/* R9 — LAPTOPTA HERO YÜKSEKLİĞİ  (1440px'de 562px → 420px, ~%25)
   Amaç: eser ızgarasının ekranın altında kalmadan daha erken görünmesi.

   420px NEDEN? Sol sütunun (kicker + başlık + 3 satırlık paragraf + 3
   özellik) GERÇEK ihtiyacı gerçek tarayıcıda ölçüldü: 399px. 420px bunun
   üzerine 21px pay bırakır ve aynı zamanda .modern-hero-visual'ın taban
   min-height değeriyle (420px) çakışır — yani bu, sağdaki oda fotoğrafını
   ezmeden inilebilecek EN ALT sınırdır. Daha aşağısı için sol sütundaki
   metinlerin kısaltılması gerekir.
   (R7'de 460px'ti; ölçüm 61px boş pay olduğunu gösterdi.)

   BEŞ SAYFA DA BİREBİR AYNI yükseklikte olur; koleksiyonlar arasında
   gezinirken güven bandı ve eser ızgarası zıplamaz.

   DİKKAT: Bir koleksiyonun açıklama paragrafı 3 satırı aşarsa o sayfa yine
   uzar ve hiza bozulur. Yeni metin yazarken paragrafı en fazla 3 satır
   tutun (masaüstünde ~39 karakter genişliğinde 3 satır). */
@media(min-width:1024px){
  .modern-hero-shell{ grid-template-columns:minmax(430px,40.8%) minmax(0,59.2%); min-height:420px; }
}
.modern-hero-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  overflow:hidden;
  padding:54px 28px 38px;
  background:
    radial-gradient(circle at 28% 24%,rgba(183,132,42,.11),transparent 29%),
    linear-gradient(90deg,#060707 0%,#080908 70%,#0A0B0B 100%);
}
@media(min-width:768px){ .modern-hero-copy{ padding:56px 56px 34px; } }
@media(min-width:1200px){ .modern-hero-copy{ padding:58px 54px 36px clamp(64px,7vw,108px); } }
.modern-hero-copy::after{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:30%;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.42));
  pointer-events:none;
}
.modern-hero-kicker{
  position:relative;
  z-index:1;
  color:var(--gold);
  font-size:clamp(11px,1vw,14px);
  font-weight:500;
  letter-spacing:.25em;
  text-transform:uppercase;
}
.modern-hero h1{
  position:relative;
  z-index:1;
  margin-top:20px;
  color:#FFF;
  font-size:clamp(3rem,5.1vw,5rem);
  line-height:1;
  letter-spacing:-.035em;
}
.modern-hero-copy > p{
  position:relative;
  z-index:1;
  max-width:39ch;
  margin-top:29px;
  padding-top:29px;
  color:rgba(255,255,255,.7);
  font-size:clamp(13px,1.1vw,16px);
  line-height:1.8;
}
.modern-hero-copy > p::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:60px;
  height:1px;
  background:var(--gold);
}
/* R7 — MASAÜSTÜNDE ~%20 KISALTMA
   Bu blok, yukarıdaki temel kuralların ARDINDAN gelmek ZORUNDADIR: seçici
   özgüllükleri aynı olduğu için (ör. `.modern-hero h1`) kazanan, dosyada
   SONRA yazılan kuraldır. Blok daha yukarıda dururken hiçbir etkisi
   olmuyordu. Mobil/tablet değerleri bilerek dokunulmadan bırakıldı. */
@media(min-width:1024px){
  .modern-hero h1{ font-size:clamp(2.6rem,4.05vw,4rem); }
  .modern-hero-copy > p{ margin-top:20px; padding-top:20px; line-height:1.7; }
  .modern-features{ padding-top:24px; }
  .modern-feature p{ margin-top:4px; }
}

.modern-hero-visual{
  position:relative;
  min-height:420px;
  overflow:hidden;
  background:#10100F;

}
@media(min-width:768px) and (max-width:1023.98px){ .modern-hero-visual{ min-height:540px; } }
.modern-hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.2),transparent 18%,transparent 82%,rgba(0,0,0,.12));
  pointer-events:none;
  z-index:3;
}
/* R7 — ÖNEMLİ: oda fotoğrafı MUTLAK konumlandırılır.
   Önceden `height:100%` ile akışta duruyordu; yüzdesel yükseklik döngüsel
   olduğu için tarayıcı görselin KENDİ EN-BOY ORANINI kullanıyor ve hero'nun
   yüksekliğini fotoğraf belirliyordu (1440px'de 562px). Bu yüzden
   min-height'i düşürmek hiçbir işe yaramıyordu.
   Mutlak konumlandırma ile fotoğraf yerleşimde yer kaplamaz; hero'nun
   yüksekliğini artık sol sütunun içeriği ve min-height belirler, fotoğraf
   da object-fit:cover ile bu alana kırpılarak oturur. */
.modern-hero-visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;

  /* ------------------------------------------------------------------
     KIRPMA NOKTASI — tek sayıyla ayarlanır
     ------------------------------------------------------------------
     Masaüstünde görsel yuvası 844 × 420 px, yani oranı ~2.0'dır (hero
     kısaldıkça yuva ORANSAL OLARAK GENİŞLER). Yuvadan daha "kare" bir
     fotoğraf, yüksekliğinden kırpılarak oturur:
        oran 2.00 (ör. 1900×950)  → kırpma YOK
        oran 1.50 (ör. 1536×1024) → %25 kırpılır
        oran 1.38 (ör.  944× 686) → %32 kırpılır

     Varsayılan `center`, kırpmayı üstten ve alttan EŞİT alır. Oda
     fotoğrafında alttaki konsol kesiliyorsa ikinci değeri BÜYÜTÜN
     (alta yaklaşır, üstteki boş tavan kırpılır); tavan önemliyse
     KÜÇÜLTÜN. Örnek: `object-position:center 65%;`
     ------------------------------------------------------------------ */
  object-position:center;
}


.modern-features{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:auto;
  padding-top:32px;
}
.modern-feature{
  display:grid;
  grid-template-columns:34px 1fr;
  align-items:start;
  gap:11px;
  min-width:0;
}
.modern-feature img{ width:30px; height:30px; }
.modern-feature h2{ color:#F7F2EA; font-size:8.5px; font-weight:500; letter-spacing:.045em; line-height:1.35; text-transform:uppercase; }
.modern-feature p{ margin-top:6px; color:rgba(255,255,255,.58); font-size:9.5px; line-height:1.45; }

.modern-trust{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  overflow:hidden;
  border-top:1px solid rgba(201,149,53,.7);
  background:
    linear-gradient(115deg,transparent 0 14%,rgba(183,134,49,.08) 14.1% 14.2%,transparent 14.3% 65%,rgba(183,134,49,.07) 65.1% 65.2%,transparent 65.3%),
    #07101A;
}
@media(min-width:900px){ .modern-trust{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.modern-trust-item{
  display:grid;
  grid-template-columns:40px 1fr;
  align-items:center;
  gap:14px;
  min-width:0;
  padding:24px clamp(20px,3vw,54px);
  border-right:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media(min-width:900px){ .modern-trust-item{ border-bottom:0; } }
.modern-trust-item:last-child{ border-right:0; }
.modern-trust-item img{ width:35px; height:35px; }
.modern-trust-item h2{ color:#F7F1E7; font-size:9.5px; font-weight:500; letter-spacing:.045em; text-transform:uppercase; }
.modern-trust-item p{ margin-top:5px; color:rgba(247,241,231,.82); font-size:11px; line-height:1.4; }
@media(max-width:420px){
  .modern-trust{ grid-template-columns:1fr; }
  .modern-trust-item{ border-right:0; }
}
@media(max-width:1023.98px){
  .modern-hero-copy{ min-height:480px; }
  .modern-features{ margin-top:38px; }
}
@media(max-width:639.98px){
  .modern-hero{ padding-top:65px; }
  .modern-hero-copy{ min-height:auto; padding:46px 24px 34px; }
  .modern-features{ grid-template-columns:1fr; gap:17px; padding-top:28px; }
  .modern-feature{ grid-template-columns:30px 1fr; }
  .modern-hero-visual{ min-height:340px; }
}

/* ---------- eser bölümü ---------- */
/* Telefonda yan boşluk 18px — uygulamanın screenPadding değeri.
   768px üstü değişmedi. */
.person{ padding:32px 18px 40px; border-top:0; scroll-margin-top:84px; }
@media(min-width:768px){ .person{ padding:28px 40px 56px; } }
.person.tint{ background:var(--tint-navy); }

/* Tek bir grup varsa (alt koleksiyon yok) başlık gereksizdir; sayfa doğrudan
   ızgarayla başlar. Bu durumda üstteki hero ile ızgara arasında nefes payı
   bırakmak için ek üst boşluk verilir. */
.person.headless{ padding-top:44px; }
@media(min-width:768px){ .person.headless{ padding-top:56px; } }

.person-head{ text-align:center; }
.person-head .order{ display:none; }
/* Telefonda 2rem (32px) başlık ekranı domine ediyordu; uygulamanın
   bölüm başlığı ölçeğine (22-24px) çekildi. 768px üstü 2.45rem'de. */
.person-head h2{ margin-top:0; font-size:1.5rem; }
.person-head h2::after{ content:""; display:block; width:72px; height:1px; margin:14px auto 0; background:var(--bronze); }
@media(min-width:768px){ .person-head h2{ font-size:2.45rem; } }
.person-head p{ margin:14px auto 0; max-width:58ch; font-size:14px; line-height:1.7; color:var(--muted-ink); font-style:normal; }
.person-head p:empty{ display:none; }

/* ---------- eser galerisi ---------- */
.artwork-grid{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 16px;
}
@media(min-width:768px) and (max-width:1023.98px){
  .artwork-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:32px; }
}
@media(min-width:1024px){
  .artwork-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; margin-top:34px; }
}

.artwork-card{ display:block; }
.artwork-card.is-available{ cursor:pointer; }
.artwork-card.is-available:focus-visible{ outline:1px solid var(--bronze); outline-offset:6px; }

/* --------------------------------------------------------------------------
   ESER SAHNESİ — IZGARADA TEK TİP DİKEY KART, DETAYDA TAM ESER
   --------------------------------------------------------------------------
   R6c KARARI (kullanıcı talebi):
     Izgara bir SERGİ sayfasıdır; kartların hepsi aynı boyda olmalıdır.
     Yatay ve kare eserleri ızgarada kendi oranlarıyla göstermek satırları
     bozuyor, sayfa dağınık görünüyordu. Bu yüzden ızgarada eser, dikey
     karta ORTASINDAN kırpılarak sığdırılır (object-fit:cover).

     Eserin TAMAMI, karta tıklandığında açılan detay ekranında kırpılmadan
     gösterilir — orada görsel object-fit:contain ile tam oranıyla durur
     (bkz. assets/art-detail.css → .vv-detail-image). Yani müşteri hiçbir
     zaman eserin tamamını göremeden kalmaz; ızgara yalnızca düzenli bir
     ÖNİZLEMEDİR.
   -------------------------------------------------------------------------- */

.artwork-media{
  position:relative;
  aspect-ratio:5/7;
  overflow:hidden;
  /* radius.md=14 — mobil uygulamanın kart diliyle aynı (2026-08-04).
     Site genelinde koleksiyon/Keşfet/mekân kartları yuvarlak, yalnız
     eser kartları keskin köşeliydi. */
  border-radius:14px;
  background:linear-gradient(160deg,#EFEDE8 0%,var(--soft-gray) 100%);
}
.artwork-img{
  display:block;
  width:100%;
  height:100%;
  /* cover + center: dikey eserler tam oturur; yatay/kare eserler dikey
     karta ortasından kırpılarak sığar. Kırpılan kısım detay ekranında
     eksiksiz görünür. */
  object-fit:cover;
  object-position:center;
  transition:transform .7s var(--ease);
}
.artwork-img,#modalArtworkImage{ -webkit-user-drag:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
/* Hover: klasik vitrin yakınlaştırması. Kart zaten kırpılmış bir önizleme
   olduğu için buradaki hafif büyütme yeni bir bilgi kaybı yaratmaz;
   taşma overflow:hidden ile kartın içinde kalır. */
@media(hover:hover){
  .artwork-card:hover .artwork-img{ transform:scale(1.04); }
}
.artwork-meta{ margin-top:12px; }
/* R12: eser adı ve fiyat KALIN (kullanıcı isteği — örnek tasarımdaki gibi).
   Fraunces 300 ile 500 arasındaki fark ince olduğu için 600 seçildi;
   400'de "kalınlaştı" hissi vermiyordu. */
.artwork-meta h3{ font-family:'Fraunces',serif; font-weight:600; font-size:13.5px; color:var(--near-black); line-height:1.35; }
/* R13 — ölçü satırında "·" ayracı KALDIRILDI (örnek tasarımda yok);
   alanlar aralıkla ayrılıyor. */
.artwork-meta .specs{ margin-top:5px; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:10.5px; letter-spacing:.02em; color:var(--muted-ink); }

/* R12 — kısa açıklama. İki satırda kesilir: kartlar farklı uzunluktaki
   metinler yüzünden farklı boylara ulaşmasın, ızgara satırları düzgün
   kalsın. Panelde girilmemişse bu eleman hiç OLUŞTURULMAZ. */
.artwork-note{
  margin-top:7px;
  font-size:11px;
  line-height:1.55;
  color:var(--muted-ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* R12 — fiyat solda, beğen + paylaş sağda. */
/* Fiyat + rozetler solda, düğmeler sağda. flex-wrap ŞART: dar kartta uzun
   bir fiyat metni ("Fiyat için bilgi alın") düğmelerle aynı satıra sığmaz;
   sarma olmadan düğmeler kart kenarını taşıyordu (ölçüldü).
   R13: fiyat satırının üstüne ince ayırıcı çizgi (örnek tasarımdaki gibi). */
.artwork-price-row{
  margin-top:11px;
  padding-top:11px;
  border-top:1px solid var(--soft-gray);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px 10px;
}
.artwork-price-left{ min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.artwork-price-row .price{ min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; }
.artwork-meta .price{ font-size:12.5px; color:var(--near-black); }
.artwork-meta .price.empty,
.artwork-meta .price.price-on-request{ font-weight:400; color:var(--muted-ink); }

/* R13 — üstü çizili liste fiyatı + kalın indirimli fiyat. */
.price-old{
  font-size:11.5px; font-weight:400; color:var(--muted-ink);
  text-decoration:line-through; text-decoration-thickness:1px;
}
.price-now{ font-size:14px; font-weight:600; color:var(--near-black); }
.artwork-meta .price small{
  font-size:10px; font-weight:400; letter-spacing:.02em; color:var(--muted-ink);
}

/* ---------- rozetler ---------- */
/* min-width:0 ŞART: flex öğesinin varsayılan min-width'i "auto"dur, yani
   white-space:nowrap olan bir rozet kapsayıcıyı kendi metin genişliğine
   kadar İTER. Telefonda ölçüldü: 132px'lik kartta "Stoktan Hemen Teslim"
   rozeti kart kenarını 7px taşıyordu (12 karttan 8'inde). min-width:0 +
   max-width:100% bunu her genişlikte yapısal olarak engeller. */
.artwork-badges{ min-width:0; max-width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.artwork-badge{
  min-width:0; max-width:100%;
  display:inline-flex; align-items:center;
  padding:4px 9px; border-radius:3px; white-space:nowrap;
  font-size:9.5px; font-weight:500; letter-spacing:.04em;
}
/* "%25 avantaj" — dolu, sıcak bronz zemin. */
.badge-discount{ background:rgba(183,161,126,.22); color:#6E5A33; }
/* "Stoktan Hemen Teslim" — çerçeveli, zeminsiz (örnek tasarımdaki gibi). */
.badge-ready{ border:1px solid var(--soft-gray); color:var(--muted-ink); background:none; }

/* ---------- beğen / paylaş düğmeleri ---------- */
.artwork-actions{ position:relative; display:flex; align-items:center; gap:2px; flex-shrink:0; }
.artwork-action-like{ display:inline-flex; align-items:center; gap:3px; }
.artwork-action{
  appearance:none; -webkit-appearance:none;
  border:0; background:none; padding:5px; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted-ink); cursor:pointer; border-radius:999px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.artwork-action svg{ width:16px; height:16px; display:block; }
.artwork-action:hover{ color:var(--near-black); background:rgba(17,17,16,.05); }
.artwork-action:focus-visible{ outline:1px solid var(--bronze); outline-offset:2px; }

/* Kalp: boşken yalnızca dış çizgi, beğenilince dolu ve bronz. */
.artwork-like svg{ fill:none; stroke:currentColor; stroke-width:1.6; }
.artwork-like[aria-pressed="true"]{ color:var(--bronze); }
.artwork-like[aria-pressed="true"] svg{ fill:currentColor; stroke:currentColor; }

/* R35 — BEĞENİ KİLİDİ: geri alma penceresi (10 sn) kapandıktan sonra
   kalp DOLU kalır ama artık bir düğme gibi davranmaz. Soluklaştırılmıyor:
   ortada eksik ya da devre dışı bir şey yok, beğeni kalıcı olarak
   kaydedilmiş durumda. Değişen tek şey imlecin "tıklanır" dememesi. */
.artwork-like.is-locked{ cursor:default; opacity:1; }
.artwork-like.is-locked:hover{ opacity:1; }
.artwork-like-count{
  font-size:11px; font-variant-numeric:tabular-nums; color:var(--muted-ink); min-width:6px;
}
.artwork-like-count:empty{ display:none; }

/* "Bağlantı kopyalandı" baloncuğu — düğmenin üstünde belirir. */
.artwork-action-note{
  position:absolute; bottom:calc(100% + 6px); right:0;
  white-space:nowrap; padding:5px 9px; border-radius:3px;
  background:var(--near-black); color:var(--warm-white);
  font-size:10px; letter-spacing:.04em; pointer-events:none; z-index:3;
}
@media(prefers-reduced-motion:no-preference){
  .artwork-action-note{ animation:vv-action-note .2s var(--ease); }
  @keyframes vv-action-note{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
}

/* Dokunmatik VE dar ekran: simge aynı boyutta kalır, tıklama alanı büyür.
   26×26'lık hedef parmak için küçüktü (ölçüldü); dolgu ile 38×38 oluyor.
   İki koşul birden yazıldı: gerçek telefonlar hover:none ile, küçültülmüş
   masaüstü pencereleri de genişlikle yakalanır. */
@media(hover:none), (max-width:767.98px){
  /* 9px dolgu → 34×34 hedef. 11px denendi (38×38) ama 132px'lik telefon
     kartında fiyatla aynı satıra sığmıyordu; 34, 26'ya göre yine belirgin
     bir iyileşme ve sığıyor. */
  .artwork-action{ padding:9px; }
  .artwork-actions{ gap:0; }

  /* R13 — telefonda iki kolonlu kartın iç genişliği 114px (ölçüldü).
     "Stoktan Hemen Teslim" 9,5px/9px dolguyla 128px sürüyordu; 8,5px ve
     7px dolguyla 113px'e iniyor ve tek satırda kalıyor. white-space:normal
     ise güvenlik ağı: ileride daha uzun bir rozet metni gelirse taşmak
     yerine alt satıra sarar. */
  .artwork-badge{ font-size:8.5px; padding:4px 7px; white-space:normal; }
}

/* ==========================================================================
   YATAY / DİKEY VARYANT KARTI (R10)
   ==========================================================================
   Yalnızca #personSections[data-vv-orientation="1"] olan sayfada (şu an
   sadece doga-yasam) çalışır. Aşağıdaki hiçbir kural, yön kipi kapalı olan
   diğer koleksiyon sayfalarını ETKİLEMEZ.

   KARARIN ÖZÜ — İKİ GÖRSEL, TEK YÜKSEKLİK
     Yatay görsel 3:2, dikey görsel 2:3 oranındadır. İkisinin kart içindeki
     GENİŞLİKLERİ, yükseklikleri tam olarak eşitlenecek şekilde bölüştürülür:
       yatay  = %69,2308      dikey = %30,7692     (69,2308 / 1,5 = 30,7692 × 1,5)
     Yükseklik kart genişliğinden türediği için bir satırdaki BÜTÜN kartlar —
     tek varyantlı olanlar dahil — aynı tabanda biter, ad ve fiyat satırları
     hizalı kalır ve hiçbir ekran genişliğinde yana taşma olmaz.
     (Sabit piksel yükseklik denendi ve 1280px dizüstü ekranda sayfayı yana
     kaydırıyordu — bu yüzden orantısal genişlik kullanılıyor.)
   ========================================================================== */
#personSections[data-vv-orientation="1"]{ --variant-gap:12px; }

.artwork-card.is-variant{
  background:#FBFAF7;
  border:1px solid var(--soft-gray);
  border-radius:14px;
  padding:12px;
}
/* İç içe köşe kuralı: içteki görselin yarıçapı, dıştaki çerçevenin
   yarıçapından dolgu payı kadar küçük olmalı; yoksa köşeler "şişkin"
   görünür. 14'lük çerçeve + 12 dolgu → içeride 8. */
.artwork-card.is-variant .artwork-media{ border-radius:8px; }
@media(min-width:1024px){ .artwork-card.is-variant{ padding:16px; } }

.artwork-variants{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:var(--variant-gap);
}
.artwork-variant{
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg,#EFEDE8 0%,var(--soft-gray) 100%);
}
.artwork-variant.variant-yatay{ width:calc((100% - var(--variant-gap)) * .692308); aspect-ratio:3/2; }
.artwork-variant.variant-dikey{ width:calc((100% - var(--variant-gap)) * .307692); aspect-ratio:2/3; }

.artwork-card.is-variant .artwork-meta{ margin-top:14px; }
.artwork-meta .spec-size{ white-space:nowrap; }
.artwork-meta .price small{
  margin-left:5px; font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted-ink);
}

/* ---------- yön süzgeci ---------- */
.orientation-filter{ margin-top:34px; display:flex; justify-content:center; }
.orientation-filter-group{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.orientation-chip{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--soft-gray); background:none; color:var(--muted-ink);
  font:inherit; font-size:10px; font-weight:400; letter-spacing:.13em; text-transform:uppercase;
  padding:9px 18px; border-radius:999px; cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.orientation-chip:hover{ color:var(--near-black); border-color:var(--bronze); }
.orientation-chip[aria-pressed="true"]{
  background:var(--near-black); border-color:var(--near-black); color:var(--warm-white);
}
.orientation-chip:focus-visible{ outline:1px solid var(--bronze); outline-offset:3px; }

/* ---------- yön süzgeci durumları ----------
   Süzgeç kartları YENİDEN ÜRETMEZ; yalnızca #personSections üzerindeki
   data-vv-filter değeri değişir ve görünürlük buradan yönetilir. Geçiş
   anında olur, görseller tekrar indirilmez. */

/* Ölçü etiketi ve ONUN ÖNÜNDEKİ ayraç noktası birlikte gizlenir — ikisi de
   [data-size-orientation] taşır. Yalnızca .spec-size hedeflenseydi süzülmüş
   görünümde başıboş bir "·" kalırdı. */

/* Yatay: yalnızca yatay varyantı olan eserler, yalnızca yatay görsel. */
[data-vv-filter="yatay"] .artwork-card[data-has-yatay="0"]{ display:none; }
[data-vv-filter="yatay"] .variant-dikey,
[data-vv-filter="yatay"] .specs [data-size-orientation="dikey"]{ display:none; }
[data-vv-filter="yatay"] .artwork-variant.variant-yatay{ width:100%; }

/* Dikey: yalnızca dikey varyantı OLAN eserler, yalnızca dikey görsel —
   R6'daki mevcut tasarımın birebir aynısı. (R11: dikey artık zorunlu
   olmadığı için, dikeyi olmayan eser bu süzgeçte listelenmez.) */
[data-vv-filter="dikey"] .artwork-card[data-has-dikey="0"]{ display:none; }
[data-vv-filter="dikey"] .variant-yatay,
[data-vv-filter="dikey"] .specs [data-size-orientation="yatay"]{ display:none; }
[data-vv-filter="dikey"] .artwork-variant.variant-dikey{ width:100%; }

/* Her İki Yön: yalnızca İKİ varyantı da olan eserler. */
[data-vv-filter="her-ikisi"] .artwork-card[data-has-yatay="0"],
[data-vv-filter="her-ikisi"] .artwork-card[data-has-dikey="0"]{ display:none; }

/* Tümü: tek varyantlı eser ortalanır ve satırdaki diğer kartlarla AYNI
   yükseklikte kalır — varyant kutusunun genişliği değişmediği için. */

/* ---------- yön kipinde ızgara kolonları ----------
   Çift görselli kart geniş olduğu için masaüstünde 2 kolon; "Yatay"da 4,
   "Dikey"de mevcut 5 kolon. */
#personSections[data-vv-orientation="1"] .artwork-grid{ gap:22px 16px; }
@media(min-width:768px) and (max-width:1023.98px){
  #personSections[data-vv-orientation="1"] .artwork-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 20px; }
  /* "Yatay" süzgeci de bölüm düzeniyle aynı büyük ölçüde (2026-08-07). */
  #personSections[data-vv-filter="yatay"] .artwork-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #personSections[data-vv-filter="dikey"] .artwork-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(min-width:1024px){
  #personSections[data-vv-orientation="1"] .artwork-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; }
  #personSections[data-vv-filter="yatay"] .artwork-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 26px; }
  #personSections[data-vv-filter="dikey"] .artwork-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* ---------- alt koleksiyonun KENDİ yön düzeni (R16) ----------
   Yukarıdaki 2 kolonluk "Tümü" düzeni, yatay ve dikey görseli AYNI kartta yan
   yana göstermek için vardır (bkz. %69,2 / %30,8 hesabı). Bir alt koleksiyonun
   BÜTÜN eserleri tek yönlüyse o düzenin dayanağı kalmaz ve varyant kutusu
   kartın küçük bir bölümünde sıkışır — Kültür & Miras'ta 1280px'te ölçüldü:
   yatay bölümde 541px kartta 342px görsel (%37 boş), dikey bölümde 152px
   görsel (%72 boş).

   Karar SAYFANIN TAMAMINA DEĞİL, HER BÖLÜME AYRI verilir: bütünüyle yatay
   olan alt koleksiyon "Yatay" süzgecinin düzenini (4 kolon), bütünüyle dikey
   olan "Dikey" süzgecinin düzenini (5 kolon) alır. Böylece her alt koleksiyon
   kendi yönüne uygun görünür ve sayfanın geri kalanı etkilenmez.

   data-vv-sec katalog verisinden bölüm bölüm hesaplanır (bkz. catalog-live.js
   → sectionOrientation). "karisik" değeri — iki varyantlı eser içeren ya da
   yatay ve dikey eseri birlikte barındıran bölüm — bu bloğa HİÇ girmez ve
   R10'un 2 kolonluk düzenini aynen korur; o düzendeki oran, tek varyantlı
   kartları da satırdaki diğerleriyle aynı yükseklikte tutan tek çözümdür.

   Yalnızca "Tümü" görünümünde geçerlidir; bir süzgeç seçiliyken o süzgecin
   kendi kuralları çalışır. Telefon (≤767.98px) bilerek DIŞARIDA bırakılmıştır
   — oradaki 2 kolonluk düzene dokunulmaz. */
@media(min-width:768px){
  #personSections[data-vv-filter="tumu"] .person[data-vv-sec="yatay"] .artwork-variant.variant-yatay,
  #personSections[data-vv-filter="tumu"] .person[data-vv-sec="dikey"] .artwork-variant.variant-dikey{ width:100%; }
}
/* YATAY KARTLAR BÜYÜTÜLDÜ (2026-08-07, kullanıcı kararı — tüm sayfalar):
   yatay bölümler telefonda tek sütun, tablette 2, masaüstünde 3 sütun.
   Önce 2/3/4'tü; yatay kompozisyonlar pul gibi kalıyordu. Dikey bölümler
   eski yoğun düzeninde (3/5) — dikey kartlar zaten yeterince büyük. */
@media(max-width:767.98px){
  #personSections[data-vv-filter="tumu"] .person[data-vv-sec="yatay"] .artwork-grid{
    grid-template-columns:1fr; gap:26px;
  }
}
@media(min-width:768px) and (max-width:1023.98px){
  #personSections[data-vv-filter="tumu"] .person[data-vv-sec="yatay"] .artwork-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #personSections[data-vv-filter="tumu"] .person[data-vv-sec="dikey"] .artwork-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(min-width:1024px){
  #personSections[data-vv-filter="tumu"] .person[data-vv-sec="yatay"] .artwork-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 26px; }
  #personSections[data-vv-filter="tumu"] .person[data-vv-sec="dikey"] .artwork-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* ---------- telefon ----------
   Kullanıcı kararı: telefonda iki kolon, kartta ÖNCE (yani yalnızca) yatay
   görsel. İki görseli 160px'lik bir karta yan yana sığdırmak eserleri
   okunamayacak kadar küçültüyordu. Yatay varyantı olmayan eserlerde kart
   dikey görseli tam genişlikte gösterir — yani bugünkü görünüm korunur.
   Ölçü satırı iki yönü de yazmaya devam eder; müşteri yatay varyantın
   varlığını oradan ve süzgeçten görür. */
@media(max-width:767.98px){
  #personSections[data-vv-orientation="1"]{ --variant-gap:8px; }
  #personSections[data-vv-orientation="1"] .artwork-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* "Yatay" süzgecinde telefonda tek sütun — bölüm düzeniyle aynı (2026-08-07). */
  #personSections[data-vv-filter="yatay"] .artwork-grid{ grid-template-columns:1fr; gap:26px; }
  #personSections[data-vv-orientation="1"] .artwork-card.is-variant{ padding:8px; }

  /* YALNIZCA "Tümü" görünümünde geçerlidir; Yatay/Dikey süzgeçleri zaten
     tek görsel gösterir. */
  #personSections[data-vv-filter="tumu"] .artwork-card[data-has-yatay="1"] .variant-dikey{ display:none; }
  #personSections[data-vv-filter="tumu"] .artwork-card[data-has-yatay="1"] .variant-yatay{ width:100%; }
  #personSections[data-vv-filter="tumu"] .artwork-card[data-has-yatay="0"] .variant-dikey{ width:100%; }
  /* Yalnızca yatay varyantı olan eser (R11): telefonda da tam genişlikte. */
  #personSections[data-vv-filter="tumu"] .artwork-card[data-has-dikey="0"] .variant-yatay{ width:100%; }

  /* "Her İki Yön" bu düzenin tek istisnasıdır: müşteri o düğmeye zaten iki
     varyantı YAN YANA karşılaştırmak için basar, o yüzden görseller
     gizlenmez. Ancak 155px'lik iki kolonda yan yana iki görsel ~49px'e
     düşüyor (ölçüldü) — okunmuyor. Bu görünüm telefonda tek kolona alınır;
     böylece görseller kullanılabilir boyutta kalır. */
  #personSections[data-vv-filter="her-ikisi"] .artwork-grid{
    grid-template-columns:1fr;
    max-width:420px;
    margin-inline:auto;
  }

  .orientation-filter{ margin-top:26px; }
  .orientation-chip{ padding:8px 14px; letter-spacing:.1em; }
}

/* ---------- katalog durumu (yükleniyor / boş / hata) ----------
   Statik data.js yedeği kaldırıldığı için, veritabanı yanıtı gelene kadar ve
   hata/boş sonuç durumlarında kullanıcıya GÖRÜNÜR bir durum bildirilir;
   sayfa asla sessizce boş kalmaz. */
.catalog-state{
  padding:72px 24px 96px;
  text-align:center;
  color:var(--muted-ink);
}
.catalog-state h2{
  font-family:'Fraunces',serif;
  font-weight:300;
  font-size:1.5rem;
  color:var(--near-black);
}
.catalog-state p{ margin:12px auto 0; max-width:46ch; font-size:14px; line-height:1.7; }
.catalog-state .retry{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; margin-top:22px; padding:0 24px;
  border:1px solid var(--near-black);
  font-size:10px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  cursor:pointer; background:none;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.catalog-state .retry:hover{ background:var(--near-black); color:var(--warm-white); }
.catalog-state .spinner{
  width:26px; height:26px; margin:0 auto 20px;
  border:2px solid var(--soft-gray); border-top-color:var(--bronze);
  border-radius:50%;
  animation:vv-spin .9s linear infinite;
}
@keyframes vv-spin{ to{ transform:rotate(360deg); } }

/* ---------- footer ---------- */
/* Telefonda site geneli ritim (46/18); masaüstü değişmedi. */
footer.site{ padding:46px 18px; }
@media(min-width:768px){ footer.site{ padding:80px 40px; } }
.footer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media(min-width:768px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr 1fr; } }
.footer-brand{ grid-column: span 2; }
@media(min-width:768px){ .footer-brand{ grid-column: span 1; } }
.footer-brand .name{ font-family:'Fraunces',serif; font-size:18px; letter-spacing:.1em; }
.footer-brand .links{ margin-top:24px; display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--muted-ink); }
.footer-grid h3{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-ink); }
/* gap 12→4 + bağlantıya 6px dikey dolgu: görünen aralık aynı, dokunma
   alanı 16px'ten ~28px'e çıkar — telefonda parmak için yetersizdi. */
.footer-grid ul{ list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:4px; }
.footer-grid a{ display:inline-block; padding:6px 0; font-size:13px; color:rgba(17,17,16,.8); }
.footer-grid a:hover{ color:var(--near-black); }
.footer-bottom{ margin-top:64px; border-top:1px solid var(--soft-gray); padding-top:24px; font-size:12px; color:var(--muted-ink); }

/* ---------- bilgilendirme ---------- */
.disclaimer{ border-top:1px solid var(--soft-gray); padding:28px 24px; }
@media(min-width:768px){ .disclaimer{ padding:32px 40px; } }
.disclaimer p{ max-width:70ch; font-size:12px; line-height:1.7; color:var(--muted-ink); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .catalog-state .spinner{ animation:none; }
}

/* ==========================================================================
   R19 — SAHNE HERO + ALT KOLEKSİYON SÜZGECİ  (yalnızca Kültür & Miras)
   ==========================================================================
   .heritage-hero sınıfı YALNIZCA kultur-miras/index.html'de vardır. Diğer
   dört koleksiyon iki sütunlu .modern-hero-shell düzenini aynen korur;
   aşağıdaki hiçbir kural onlara dokunmaz.

   ARKA PLAN GÖRSELİ ZORUNLU DEĞİLDİR: altta koyu bir gradyan var. Görsel
   yüklenmemişse (ya da henüz sunucuya çıkmamışsa) hero boş/kırık değil,
   koyu dokulu bir zemin olarak görünür ve yazılar okunur kalır.
   ========================================================================== */
.heritage-hero{
  position:relative;
  padding-top:74px;              /* sabit başlığın altı */
  background:
    radial-gradient(ellipse at 50% 40%, #14110c 0%, #0a0908 55%, #050505 100%);
  overflow:hidden;
}

.heritage-hero-media{
  position:absolute;
  inset:74px 0 0 0;
  z-index:0;
}
/* R19 AYDINLATMA — DEĞERLER ÖLÇÜLEREK SEÇİLDİ, GÖZ KARARI DEĞİL.
   Kaynak görsel çok düşük pozlu: monümanların olduğu sağ bölgenin ortalama
   parlaklığı yalnızca %5,3. Perdeyi tamamen kaldırsak bile hero loş bir bant
   olarak kalıyordu; sorun perdede değil, görselin kendisindeydi.

   canvas'ın ctx.filter'ı CSS filter ile aynı motoru kullandığı için aday
   değerler tarayıcıda ölçüldü (sonuçlar %, monüman bölgesi):

     filtresiz              5,3   siyah taban 0,00   yanan piksel 0,00
     brightness(2) tek başına  10,5   siyah taban 0,00   yanan piksel 0,31  ← yakıyor
     b2.4 c1.02             11,6   siyah taban 0,00   yanan piksel 0,49  ← yakıyor
     b2.4 c0.94  ✔          14,4   siyah taban 2,75   yanan piksel 0,00
     b2.6 c0.92             16,0   siyah taban 3,92   yanan piksel 0,00  ← siyahlar sütlü

   Yani: contrast 1 ve üstünde parlaklık ~%13'te tıkanıp önce parlak noktalar
   yanıyor; contrast'ı hafifçe düşürünce hiç yakmadan üç katına çıkılabiliyor.
   0.94 sınırı, siyahların hâlâ siyah kaldığı (taban %2,75) son basamak.
   Doygunluk +%10, parlaklıkla soluklaşan amber tonu geri getirmek için.

   GERİ ALMAK tek satır: aşağıdaki filter satırını silmek yeterli. */
.heritage-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(2.4) contrast(.94) saturate(1.1);
}
/* Okunabilirlik perdesi.
   R19 DÜZELTMESİ — İLK SÜRÜM GÖRSELİ ÖLDÜRÜYORDU.
   Perde başta ortada %82 siyahtı; yazılar ortada olacak diye öyle
   tasarlanmıştı. Yazılar sola alınınca o perde tam da monümanların
   üstüne denk geldi. Görselin sağ tarafının ortalama parlaklığı ZATEN
   %5,3 (ölçüldü); üstüne %82 siyah binince geriye ~%1 kalıyor ve hero
   düz siyah görünüyordu.

   Yeni perde YÖNLÜ: solda (yazı alanı) hafif koyulaştırma, sağda
   (monümanlar) HİÇ YOK. Zaten sol bölge görselde de neredeyse saf siyah
   (%0,3), yani okunabilirlik için ağır perdeye gerek yok.

   Görsel yukarıdaki filter ile aydınlatıldıktan sonra perde bir kez daha
   hafifletildi: yazı alanı filtreden sonra bile yalnızca %3,5 parlaklıkta,
   yani %30 perde beyaz yazıyı fazlasıyla taşıyor (~19:1 kontrast). Perde
   img'in ÜSTÜNDE (::after) durduğu için filtreden etkilenmez; ikisi ayrı
   ayrı ayarlanabilir. */
.heritage-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(5,5,5,.34) 0%, rgba(5,5,5,.10) 40%, rgba(5,5,5,0) 62%),
    linear-gradient(180deg, rgba(5,5,5,.26) 0%, transparent 22%, transparent 76%, rgba(5,5,5,.42) 100%);
}

/* R19 — YAZILAR SOLDA.
   Arka plan görselinde monümanlar SAĞ tarafta, sol %42 boş bırakıldı
   (ölçüldü: sol bölgenin ortalama parlaklığı %0,3). Yazıları ortalasaydık
   Petra'nın ve heykelin üstüne binerdi. Sol sütun 46ch ile sınırlı; geri
   kalan genişlik görsele bırakılır. */
.heritage-hero-inner{
  position:relative;
  z-index:1;
  max-width:1440px;
  margin:0 auto;
  /* Dolgu bilerek ölçülü: ilk denemede hero 792px çıkıp eser ızgarasını
     ekranın çok altına itiyordu (1265px genişlikte ölçüldü). Bu değerlerle
     ~560px'e iniyor ve kartlar ilk ekranda görünmeye başlıyor. */
  padding:clamp(34px,4vw,56px) 24px clamp(44px,4.4vw,64px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
@media(min-width:768px){ .heritage-hero-inner{ padding-inline:40px; } }
@media(min-width:900px){
  .heritage-hero-inner{ max-width:min(1440px, 100%); }
  /* 46ch YALNIZ yazı blokları için: başlık ve paragraf, sağdaki
     monümanların üstüne taşmasın diye dar tutulur. */
  .heritage-hero-kicker,
  .heritage-hero .display,
  .heritage-hero-lead{ max-width:46ch; }
}

/* Telefonda görselin ortası görünüyor, yani monümanlar yazının arkasına
   düşüyor. Orada yazıyı ortalayıp perdeyi koyulaştırmak, sola sıkıştırıp
   monümanların üstünde bırakmaktan daha okunaklı. */
@media(max-width:767.98px){
  .heritage-hero-inner{ align-items:center; text-align:center; }
  .heritage-hero-media img{ object-position:64% center; }
  /* Telefonda yazı monümanların ÜSTÜNE biniyor, o yüzden burada perde
     gerekiyor — ama %82 değil. Görsel filtreden sonra bu bölgede %14,4
     parlaklıkta; %45'lik perde onu ~%8'e indirir: beyaz yazı rahat okunur
     (~11:1) ve monümanlar hâlâ seçilir. Masaüstündeki gibi tamamen
     kaldırmak burada okunabilirliği bozardı. */
  .heritage-hero-media::after{
    background:linear-gradient(180deg, rgba(5,5,5,.52) 0%, rgba(5,5,5,.45) 45%, rgba(5,5,5,.6) 100%);
  }
}

.heritage-hero-kicker{
  color:var(--gold);
  font-size:clamp(10px,1vw,13px);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.heritage-hero .display{
  margin-top:18px;
  color:#fff;
  font-size:clamp(2.4rem,5.2vw,4.6rem);
  line-height:1.02;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.heritage-hero-lead{
  max-width:52ch;
  margin-top:20px;
  color:rgba(255,255,255,.74);
  font-size:clamp(13px,1.15vw,16.5px);
  line-height:1.75;
}

/* ---------- üç özellik şeridi (2026-08-04) ----------
   Eskiden burada "30 Eser / 5 Alt Koleksiyon" sayaç bloğu (.heritage-stats)
   vardı; sayılar gerçek katalogla uyuşmadığı için TAMAMEN KALDIRILDI ve
   yerine diğer dört koleksiyon sayfasındaki .modern-features bloğunun
   aynısı kondu. Aşağıdakiler yalnızca o bloğu bu hero'ya uyarlar.

   GENİŞLİK NEDEN SINIRLI: yazılar görselin ÜSTÜNDE duruyor ve monümanlar
   görselin sağ ~%44'ünde başlıyor. Şerit serbest bırakılırsa Petra'nın
   üstüne biner. 40vw sınırı, dar masaüstünde de metni karanlık bölgede
   tutar (1280px'de ~512px; monümanlar orada ~543px'te başlıyor). */
.heritage-hero .modern-features{
  margin-top:clamp(30px,3.6vw,44px);
  padding-top:0;
  gap:clamp(14px,1.6vw,26px);
}
@media(min-width:900px){
  .heritage-hero .modern-features{ max-width:min(640px,40vw); }
}
/* İkonlar sayaç bloğundaki gibi altın tonda kalsın — hero'nun dili bu. */
.heritage-hero .modern-feature img{
  filter:brightness(0) saturate(100%) invert(72%) sepia(28%) saturate(680%) hue-rotate(2deg) brightness(92%);
  opacity:.95;
}
/* Telefonda blok ortalanıyor (bkz. .heritage-hero-inner); üç özellik de
   alt alta ve ortalı dursun ki metin sağa yaslı kalmasın. */
@media(max-width:767.98px){
  .heritage-hero .modern-features{ grid-template-columns:1fr; gap:16px; justify-items:center; }
  .heritage-hero .modern-feature{ grid-template-columns:30px 1fr; text-align:left; }
}

/* ---------- breadcrumb ---------- */
.heritage-crumbs{
  position:relative;
  z-index:1;
  max-width:1440px;
  margin:0 auto;
  padding:18px 24px 0;
  color:rgba(255,255,255,.55);
  font-size:12px;
}
@media(min-width:768px){ .heritage-crumbs{ padding-inline:40px; } }
.heritage-crumbs a{ color:rgba(255,255,255,.72); }
.heritage-crumbs a:hover{ color:#fff; }
.heritage-crumbs span{ padding:0 7px; opacity:.5; }

/* ==========================================================================
   ALT KOLEKSİYON SÜZGECİ
   ==========================================================================
   Yön süzgeciyle AYNI mantık: bölümler hep basılır, süzgeç yalnızca hangi
   bölümün görüneceğini seçer. Kartlar yeniden üretilmediği için geçiş
   anlıktır ve görseller tekrar indirilmez.
   ========================================================================== */
.subcollection-filter{ padding-top:26px; padding-bottom:2px; }
.subcollection-filter-group{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  /* Telefonda 6+ çip tek satıra sığmaz; sarmak yerine yatay kaydırma
     tercih edildi — sarma, çubuğu üç sıraya çıkarıp ızgarayı ekranın
     dışına itiyordu. */
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:2px;
}
.subcollection-filter-group::-webkit-scrollbar{ display:none; }

.subcollection-chip{
  flex:0 0 auto;
  min-height:38px;
  padding:0 18px;
  border:1px solid var(--soft-gray);
  border-radius:999px;
  background:#fff;
  color:var(--muted-ink);
  font-size:12.5px;
  letter-spacing:.02em;
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.subcollection-chip[aria-pressed="true"]{
  background:var(--near-black);
  border-color:var(--near-black);
  color:#fff;
}
@media(hover:hover){
  .subcollection-chip:not([aria-pressed="true"]):hover{ border-color:var(--bronze); color:var(--near-black); }
}

/* Seçili alt koleksiyon dışındaki bölümler gizlenir.
   CSS iki AYRI öğenin özniteliklerini birbiriyle karşılaştıramaz
   (kapsayıcıdaki data-vv-sub ile bölümdeki data-vv-sec-key), bu yüzden
   eşleştirmeyi JS yapar ve yalnızca bu sınıfı ekler/kaldırır. */
.person.is-sub-hidden{ display:none; }

/* ----------------------------------------------------------------------
   ÖZEL SERİ — NUMARALI & SINIRLI BASKI (2026-08-07, /imza-serisi/)
   Mockup: görsel solda, lacivert panel sağda; büyük altın numara,
   son satın alınan / kalan satırları, altın çerçeveli düğme. */
.ozel-baslik{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin:8px 0 26px; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted-ink);
}
.ozel-baslik b{ font-weight:500; color:var(--near-black); }
.ozel-baslik::before, .ozel-baslik::after{
  content:""; height:1px; width:min(120px,18vw); background:#DDD8D0;
}

.ozel-seri-izgara{ display:grid; gap:22px; margin-bottom:52px; }
@media(min-width:900px){ .ozel-seri-izgara{ grid-template-columns:1fr 1fr; } }

.ozel-kart{
  display:grid; overflow:hidden; cursor:pointer;
  background:#0B1420; color:#F7F5F1;
  box-shadow:0 18px 50px rgba(4,9,14,.18);
  transition:transform .35s cubic-bezier(0.16,1,0.3,1), box-shadow .35s ease;
}
.ozel-kart:hover{ transform:translateY(-4px); box-shadow:0 26px 60px rgba(4,9,14,.28); }
.ozel-kart:focus-visible{ outline:2px solid #B7A17E; outline-offset:3px; }
@media(min-width:560px){ .ozel-kart{ grid-template-columns:1.15fr .85fr; } }

.ozel-kart-gorsel{ min-height:220px; background:#04070C; }
.ozel-kart-gorsel img{ width:100%; height:100%; min-height:220px; object-fit:cover; display:block; }

.ozel-kart-panel{ padding:24px 22px; display:flex; flex-direction:column; gap:10px; }
@media(min-width:1100px){ .ozel-kart-panel{ padding:30px 28px; } }

.ozel-kart-etiket{
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:#B7A17E;
}
.ozel-kart-baslik{
  margin:2px 0 6px; font-size:clamp(20px,2.2vw,27px); line-height:1.15; color:#F7F5F1;
}
.ozel-kart-no{ display:flex; align-items:baseline; gap:7px; margin-bottom:4px; flex-wrap:wrap; }
.ozel-kart-no b{
  font-family:'Fraunces',Georgia,serif; font-weight:300; font-size:clamp(34px,3.4vw,44px);
  line-height:1; color:#B7A17E; font-variant-numeric:tabular-nums;
}
.ozel-kart-no span{ font-size:15px; color:rgba(247,245,241,.65); }
.ozel-kart-no small{
  width:100%; font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(247,245,241,.45);
}
.ozel-kart-satir{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:rgba(247,245,241,.72);
}
.ozel-kart-satir b{ font-weight:500; color:#F7F5F1; }
.ozel-nokta{ width:6px; height:6px; border-radius:50%; background:#3E7A5E; flex-shrink:0; }
.ozel-nokta.altin{ background:#B7A17E; }

.ozel-kart-dugme{
  margin-top:auto; align-self:flex-start; min-height:42px; padding:0 22px;
  border:1px solid #B7A17E; background:transparent; color:#F7F5F1;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-family:inherit; cursor:pointer; transition:all .25s ease;
}
.ozel-kart-dugme:hover{ background:#B7A17E; color:#0B1420; }
.ozel-kart-dugme:disabled{ opacity:.45; cursor:default; }
.ozel-kart-dugme:disabled:hover{ background:transparent; color:#F7F5F1; }

/* ---------- MUTFAK DENEMESİ: dikey kartlar satırda 4 (2026-08-12) ----------
   Kullanıcı isteği: "dikey görseller tek satırda 4 adet görünsün; şimdilik
   yalnız Mutfak Koleksiyonunda, beğenirsek diğerlerine de uygularız."
   Sayfa kendini data-vv-dikey-4="1" ile işaretler; başka hiçbir koleksiyon
   bu kuraldan etkilenmez. Yaymak istersek tek yapılacak şey diğer
   sayfalara aynı özniteliği eklemek. Mobil (768 altı) 2 kolonda kalır —
   telefonda 4 kolon okunmaz. */
@media(min-width:768px) and (max-width:1023.98px){
  #personSections[data-vv-dikey-4="1"] .artwork-grid,
  #personSections[data-vv-dikey-4="1"][data-vv-filter="tumu"] .person[data-vv-sec="dikey"] .artwork-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 18px;
  }
}
@media(min-width:1024px){
  /* İkinci seçici şart: "Tümü" görünümündeki dikey bölüm kuralı
     (yukarıda, repeat(5)) daha yüksek özgüllükte — onu ancak aynı
     zincire data-vv-dikey-4 ekleyerek ezebiliyoruz. */
  #personSections[data-vv-dikey-4="1"] .artwork-grid,
  #personSections[data-vv-dikey-4="1"][data-vv-filter="tumu"] .person[data-vv-sec="dikey"] .artwork-grid,
  #personSections[data-vv-dikey-4="1"][data-vv-filter="dikey"] .artwork-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 22px;
  }
}