/* ==========================================================================
   VV TABLO — İKONLAR  (2026-08-17)
   --------------------------------------------------------------------------
   Altıncı özel sayfa. Hepsi aynı markanın ayrı odaları:

     Eğlenceli      koyu mürekkep + neon + çıkartma      → şen
     Kids by Hi Mom gün ışığı + pastel + kemer           → masalsı
     Doğa & Yaşam   gece siyahı + altın saat             → dingin
     Kültür & Miras sinema perdesi + yer künyesi         → görkemli
     İmza Serisi    gece laciverti + altın imza          → törensel
     İkonlar        grafit galeri duvarı + künye plakası → müzesel

   TASARIMIN DAYANDIĞI VERİ
   Bu koleksiyonun alt koleksiyonları tema ya da yer DEĞİL — İNSAN:
   Marilyn Monroe (10), Charlie Chaplin (9), İlber Ortaylı (9),
   Frida Kahlo (2). Yani bu bir portre galerisi. Hero da öyle kuruldu:
   loş bir galeri duvarına asılmış dört portre, her birinin altında
   müze künyesi (ad + alan). Portreye tıklayınca o kişinin bölümüne
   gidiliyor — koleksiyonun kadrosu ilk ekranda görünüyor.

   Çerçeveler BİLEREK aynı oranda (2:3). İlber Ortaylı'nın 9 eserinin
   tamamı yatay; hero portresi kaynaktan ilgi-odaklı kırpılarak aynı
   çerçeveye sokuldu (bkz. images/collections/ikonlar/hero — sharp
   position:attention). Karışık oranlı çerçeveler galeri duvarı hissini
   bozardı.
   ========================================================================== */

.ikon{
  --ik-duvar:#17161A;
  --ik-derin:#0E0D10;
  --ik-altin:#C9A227;
  --ik-amber:#E8B860;
  --ik-tebesir:#F4F1EA;
}

/* ---------- HERO: galeri duvarı ---------- */
.ikon-hero{
  position:relative;
  padding:74px 0 0;
  background:var(--ik-duvar);
  overflow:hidden;
  isolation:isolate;
}
/* Tavandan düşen sergi ışığı — portrelerin üstünü yıkar, kenarlar loş kalır. */
.ikon-hero::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(80% 55% at 50% -8%, rgba(232,184,96,.16), transparent 62%),
    radial-gradient(120% 90% at 50% 120%, rgba(14,13,16,.9), transparent 60%);
}
/* Duvarın ince dokusu. */
.ikon-hero::after{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:5px 5px;
  opacity:.7;
}

.ikon-hero-shell{
  position:relative; z-index:1;
  max-width:1440px; margin:0 auto;
  padding:34px 24px 30px;
  text-align:center;
}
@media(min-width:768px){ .ikon-hero-shell{ padding:40px 40px 34px; } }

.ikon-kicker{
  display:inline-flex; align-items:center; gap:13px;
  color:var(--ik-amber);
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
}
.ikon-kicker::before,
.ikon-kicker::after{ content:""; width:30px; height:1px; background:rgba(201,162,39,.7); }

.ikon-baslik{
  margin:16px 0 0;
  color:var(--ik-tebesir);
  font-size:clamp(2.4rem,6.4vw,4.2rem);
  line-height:1.04;
}
.ikon-giris{
  margin:16px auto 0; max-width:52ch;
  color:rgba(244,241,234,.72);
  font-size:14.5px; line-height:1.8;
}

/* ---------- PORTRE DUVARI ---------- */
/* Duvar genişliği BİLEREK sınırlı: 1120px'te çerçeveler 265×398 oluyordu ve
   hero 854px'e çıkıyordu — serinin diğer sayfaları 490-590 arasında.
   860px'te çerçeve ~195×292, hero ~700px. */
.ikon-duvar{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:26px auto 0; padding:0; list-style:none;
  max-width:430px;
}
@media(min-width:900px){
  .ikon-duvar{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; max-width:860px; }
}

.ikon-portre{
  display:block; color:inherit;
  transition:transform .35s var(--ease);
}
.ikon-portre:hover{ transform:translateY(-6px); }

/* Çerçeve: ince altın kenar + paspartu + derin gölge. */
.ikon-cerceve{
  position:relative;
  aspect-ratio:2 / 3;
  overflow:hidden;
  border:1px solid rgba(201,162,39,.42);
  padding:6px;
  background:#0A090C;
  box-shadow:0 20px 44px rgba(0,0,0,.55);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.ikon-portre:hover .ikon-cerceve{
  border-color:var(--ik-amber);
  box-shadow:0 26px 56px rgba(0,0,0,.66);
}
.ikon-cerceve img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.94) contrast(1.02);
  transition:filter .35s var(--ease), transform .5s var(--ease);
}
.ikon-portre:hover .ikon-cerceve img{ filter:none; transform:scale(1.03); }
/* Çerçevenin üstüne düşen ışık — sergi spotu. */
.ikon-cerceve::after{
  content:"";
  position:absolute; inset:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, transparent 34%, transparent 66%, rgba(0,0,0,.34) 100%);
  pointer-events:none;
}

/* Künye plakası — müze etiketi. */
.ikon-kunye{
  margin-top:13px;
  text-align:center;
}
.ikon-kunye-ad{
  display:block;
  font-family:'Fraunces',serif; font-weight:300;
  font-size:16px; line-height:1.25;
  color:var(--ik-tebesir);
}
@media(min-width:900px){ .ikon-kunye-ad{ font-size:18px; } }
.ikon-kunye-alan{
  display:block; margin-top:6px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ik-amber);
}
.ikon-kunye-sayi{
  display:block; margin-top:7px;
  font-size:11px; color:rgba(244,241,234,.5);
}
/* Plakayı portreden ayıran ince altın çizgi. */
.ikon-kunye::before{
  content:""; display:block; width:26px; height:1px;
  margin:0 auto 11px; background:rgba(201,162,39,.55);
}

/* Hero'yu sayfaya bağlayan çizgi. */
.ikon-cizgi{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, rgba(201,162,39,.5), transparent);
}

/* ---------- IZGARA ---------- */
/* Bölüm başlıkları kişi adı olduğu için biraz daha ağırbaşlı. */
.ikon .person-head h2::after{ background:var(--ik-altin); width:56px; height:2px; border-radius:2px; }
.ikon .person{ scroll-margin-top:84px; }
.ikon .artwork-card{ transition:transform .3s var(--ease); }
.ikon .artwork-card:hover{ transform:translateY(-4px); }

/* ---------- GÜVENCE ŞERİDİ ---------- */
.ikon-guvence{
  display:grid; gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:1440px; margin:0 auto; padding:40px 24px 8px;
  list-style:none;
}
@media(min-width:768px){
  .ikon-guvence{ grid-template-columns:repeat(4,minmax(0,1fr)); padding:52px 40px 8px; gap:12px; }
}
.ikon-guvence li{
  padding:16px 18px; border-radius:14px;
  background:#fff; border:1px solid rgba(17,17,16,.08);
  border-top:3px solid var(--ik-altin);
}
.ikon-guvence h3{ font-size:14px; font-weight:500; }
.ikon-guvence p{ margin-top:4px; color:var(--muted-ink); font-size:12.5px; line-height:1.6; }

/* ---------- HAREKETİ AZALT ---------- */
@media (prefers-reduced-motion: reduce){
  .ikon-portre:hover,
  .ikon-portre:hover .ikon-cerceve img,
  .ikon .artwork-card:hover{ transform:none; }
}