/* ==========================================================================
   VV TABLO — EĞLENCELİ KOLEKSİYONU  (2026-08-16)
   --------------------------------------------------------------------------
   Bu sayfa BİLEREK ortak koleksiyon şablonundan ayrılıyor (kullanıcı:
   "sayfayı çok farklı ve özgün istiyorum"). collection-page.css yine
   yükleniyor — başlık, altbilgi, eser ızgarası ve eser detay modalı ORTAK
   kalsın diye. Bu dosya yalnızca bu sayfanın üstüne biniyor.

   ORTAK ŞABLONDAN FARKLAR
     1) Hero'da tek geniş oda fotoğrafı YOK. Yerine "çıkartma duvarı":
        bantla yapıştırılmış gibi eğik duran beş eser. Koleksiyonun
        tamamı dikey olduğu için tek yatay hero görseli zaten üretilemezdi;
        bu düzen dikey eserlerle çalışır.
     2) Koleksiyonun ruhunu yazan çapraz kayan şerit.
     3) "Ruh Hâlin Ne?" süzgeci — eserleri temaya göre ayıklar. Tamamen
        istemci tarafında, ızgarayı catalog-live.js kurduktan sonra
        çalışır (bkz. sayfadaki betik).
     4) "Beni Şaşırt" düğmesi — rastgele bir eser açar.

   HAREKET: tüm animasyonlar prefers-reduced-motion ile kapanır.
   ========================================================================== */

.eg{
  --eg-mor:#7B4BFF;
  --eg-pembe:#FF4D8D;
  --eg-sari:#FFC53D;
  --eg-turkuaz:#2ED3C6;
  --eg-tebesir:#F7F5F1;
  --eg-murekkep:#141019;
}

/* ---------- HERO: çıkartma duvarı ---------- */
.eg-hero{
  position:relative;
  padding:74px 0 0;
  background:var(--eg-murekkep);
  overflow:hidden;
  isolation:isolate;
}
/* Arka plandaki yumuşak renk lekeleri. Eserler zaten çok doygun olduğu
   için lekeler düşük opaklıkta — yarışmasınlar diye. */
.eg-hero::before{
  content:"";
  position:absolute; inset:-20% -10%;
  z-index:0;
  background:
    radial-gradient(38% 42% at 18% 26%, rgba(123,75,255,.55), transparent 70%),
    radial-gradient(34% 38% at 82% 22%, rgba(255,77,141,.45), transparent 70%),
    radial-gradient(40% 44% at 66% 84%, rgba(46,211,198,.35), transparent 70%),
    radial-gradient(30% 34% at 26% 82%, rgba(255,197,61,.35), transparent 70%);
  filter:blur(10px);
  animation:eg-blob 26s var(--ease) infinite alternate;
}
/* İnce puantiye ızgarası — "poster duvarı" hissi. */
.eg-hero::after{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom, #000 30%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent 100%);
}
@keyframes eg-blob{
  from{ transform:translate3d(-2%,-1%,0) scale(1); }
  to  { transform:translate3d(3%,2%,0) scale(1.08); }
}

.eg-hero-shell{
  position:relative; z-index:1;
  max-width:1440px; margin:0 auto;
  padding:44px 24px 52px;
  display:grid; gap:36px;
}
@media(min-width:1024px){
  .eg-hero-shell{
    grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
    align-items:center;
    padding:56px 40px 64px;
    gap:28px;
  }
}

/* --- sol sütun: yazılar --- */
.eg-kicker{
  display:inline-block;
  transform:rotate(-2.5deg);
  padding:7px 15px;
  border-radius:999px;
  background:var(--eg-sari);
  color:#211a06;
  font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}
.eg-baslik{
  margin:20px 0 0;
  color:var(--eg-tebesir);
  font-size:clamp(3rem, 11vw, 6.5rem);
  line-height:.92;
  letter-spacing:-.02em;
}
/* Elle çizilmiş gibi duran altı çizili vurgu. */
.eg-squiggle{ display:block; width:min(340px,72%); height:auto; margin:6px 0 0; overflow:visible; }
.eg-squiggle path{
  fill:none; stroke:var(--eg-pembe); stroke-width:7;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:420; stroke-dashoffset:420;
  animation:eg-ciz 1.5s var(--ease) .35s forwards;
}
@keyframes eg-ciz{ to{ stroke-dashoffset:0; } }

.eg-giris{
  margin:22px 0 0;
  max-width:46ch;
  color:rgba(247,245,241,.78);
  font-size:15px; line-height:1.75;
}
@media(min-width:768px){ .eg-giris{ font-size:16px; } }

/* Üç marka özelliği — ortak şablondaki blok, çıkartma rozetine dönüştü. */
.eg-rozetler{ display:flex; flex-wrap:wrap; gap:9px; margin:26px 0 0; padding:0; list-style:none; }
.eg-rozetler li{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(247,245,241,.22);
  background:rgba(247,245,241,.06);
  color:rgba(247,245,241,.9);
  font-size:12.5px; letter-spacing:.02em;
  backdrop-filter:blur(4px);
}
.eg-rozetler li b{ font-weight:500; color:var(--eg-sari); }

/* --- sağ sütun: çıkartma duvarı ---
   Izgara DEĞİL, üst üste binen bir dizi: dört çıkartma eşit sütunlara
   bölündüğünde her biri ~150px kalıyordu ve eserler seçilemiyordu.
   Negatif yan boşlukla hafifçe bindirilince aynı yere daha büyük
   görsel sığıyor — zaten "duvara üst üste yapıştırılmış" etkisi de
   bu bindirmeden doğuyor. */
.eg-duvar{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:8px 0;
}

.eg-cikartma{
  position:relative;
  flex:0 0 auto;
  width:36%;
  margin:0 -9px;
  border-radius:4px;
  background:#fff;
  padding:7px 7px 26px;
  box-shadow:0 16px 34px rgba(0,0,0,.42);
  transform:rotate(var(--eg-aci)) translateY(var(--eg-kaydir));
  animation:eg-suzul 7s ease-in-out var(--eg-gecikme) infinite alternate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* Telefonda dört çıkartma çok küçülüyor; sonuncusu gizlenip üçlü kalıyor. */
@media(max-width:639.98px){ .eg-cikartma:nth-child(n+4){ display:none; } }
@media(min-width:640px){ .eg-cikartma{ width:29%; margin:0 -12px; } }
@media(min-width:1024px){ .eg-cikartma{ width:26.5%; margin:0 -14px; } }

.eg-cikartma img{ width:100%; height:auto; border-radius:2px; }
/* Yapışkan bant. */
.eg-cikartma::before{
  content:"";
  position:absolute; top:-11px; left:50%;
  width:52px; height:21px;
  transform:translateX(-50%) rotate(calc(var(--eg-aci) * -1.6));
  background:rgba(255,255,255,.42);
  border-left:1px dashed rgba(0,0,0,.10);
  border-right:1px dashed rgba(0,0,0,.10);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* Polaroid alt şeridindeki eser adı. */
.eg-cikartma figcaption{
  position:absolute; left:0; right:0; bottom:7px;
  text-align:center;
  color:#5d5a55;
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:0 8px;
}
.eg-cikartma:hover, .eg-cikartma:focus-within{
  transform:rotate(0deg) translateY(-8px) scale(1.06);
  box-shadow:0 24px 48px rgba(0,0,0,.5);
  z-index:2;
}
@keyframes eg-suzul{
  from{ transform:rotate(var(--eg-aci)) translateY(var(--eg-kaydir)); }
  to  { transform:rotate(calc(var(--eg-aci) * .55)) translateY(calc(var(--eg-kaydir) - 10px)); }
}

/* ---------- KAYAN ŞERİT ----------
   İKİ KATMAN ŞART: şeridin kendisi eğik duruyor, eğik kutu da sayfadan
   iki yana taşıyor. Bir elemanın kendi overflow:hidden'ı ÇOCUKLARINI
   kırpar, kendi taşan kutusunu değil — bu yüzden döndürülmemiş bir dış
   sarmalayıcı gerekiyor. (Sarmalayıcı yokken sayfada 14px yatay
   kaydırma çubuğu çıkıyordu.)

   Sarmalayıcının DİKEY DOLGUSU da şart: eğik şeridin uçları, kendi
   düz kutusunun dışına taşar. Taşma payı = genişlik × tan(açı) / 2;
   0,8° ile 1440px ekranda ±11px, 2560'ta ±19px, 3440'ta ±25px. 36px
   dolgu hepsini karşılıyor. Dolgu olmadan iki bandın uçları
   kırpılıyordu; 28px'te 1920'de payda 1px kalmıştı. */
.eg-serit-kap{
  position:relative;
  z-index:2;
  overflow:hidden;
  padding:36px 0;
  margin-top:-38px;
}
.eg-serit{
  position:relative;
  width:106%;
  margin:0 0 0 -3%;
  padding:0;
  background:transparent;
  overflow:hidden;
}
.eg-serit-bant{
  display:flex; width:max-content;
  padding:11px 0;
  background:var(--eg-sari);
  color:#1a1405;
  font-size:13px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  animation:eg-kay 34s linear infinite;
}
.eg-serit-bant + .eg-serit-bant{
  margin-top:-1px;
  background:var(--eg-mor);
  color:#fff;
  animation-direction:reverse;
  animation-duration:41s;
}
.eg-serit-bant span{ padding:0 22px; white-space:nowrap; }
.eg-serit-bant i{ font-style:normal; opacity:.5; }
.eg-serit{ transform:rotate(-0.8deg); }
@keyframes eg-kay{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ---------- RUH HÂLİ SÜZGECİ ---------- */
.eg-ruh{ padding:46px 24px 4px; text-align:center; }
@media(min-width:768px){ .eg-ruh{ padding:58px 40px 4px; } }
.eg-ruh h2{ font-size:1.55rem; line-height:1.2; }
@media(min-width:768px){ .eg-ruh h2{ font-size:2.2rem; } }
.eg-ruh > p{ margin:12px auto 0; max-width:52ch; color:var(--muted-ink); font-size:14px; line-height:1.7; }

.eg-cipler{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:9px; margin:24px auto 0; max-width:900px;
  padding:0; list-style:none;
}
.eg-cip{
  --eg-cip-renk:var(--near-black);
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px;
  border:1px solid rgba(17,17,16,.16);
  border-radius:999px;
  background:#fff;
  color:var(--near-black);
  font-size:13px; line-height:1;
  cursor:pointer;
  transition:transform .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.eg-cip::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--eg-cip-renk);
  transition:transform .2s var(--ease);
}
.eg-cip:hover{ transform:translateY(-2px) rotate(-1.5deg); border-color:var(--eg-cip-renk); }
.eg-cip[aria-pressed="true"]{
  background:var(--eg-cip-renk); border-color:var(--eg-cip-renk); color:#fff;
}
.eg-cip[aria-pressed="true"]::before{ background:#fff; transform:scale(1.15); }
.eg-cip-sayi{ opacity:.55; font-size:11.5px; }
.eg-cip[aria-pressed="true"] .eg-cip-sayi{ opacity:.8; }

/* Süzgeç hiçbir eser bırakmadığında. Betik gizli/görünür yapıyor. */
.eg-bos{
  margin:28px auto 0; max-width:44ch;
  color:var(--muted-ink); font-size:14px; line-height:1.7;
}
.eg-bos[hidden]{ display:none; }

/* Süzgeçle elenen kartlar. display:none yerine bu: ızgara gözeleri
   yeniden akarken kart yüksekliği hesaplanmasın diye. */
.artwork-card.eg-elendi{ display:none !important; }

/* ---------- IZGARA: eğlenceli dokunuşlar ---------- */
.eg .person.headless{ padding-top:14px; }
.eg .artwork-card{ transition:transform .28s var(--ease), box-shadow .28s var(--ease); }
.eg .artwork-card:hover{ transform:translateY(-5px) rotate(-.7deg); }
.eg .artwork-card:nth-child(even):hover{ transform:translateY(-5px) rotate(.7deg); }

/* ---------- "BENİ ŞAŞIRT" ---------- */
.eg-sasirt{
  position:fixed; right:18px; bottom:18px; z-index:40;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 20px;
  border:0; border-radius:999px;
  background:var(--eg-pembe);
  color:#fff;
  font-size:14px; font-weight:500;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(255,77,141,.42);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.eg-sasirt:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 18px 38px rgba(255,77,141,.52); }
.eg-sasirt:active{ transform:scale(.97); }
.eg-sasirt svg{ width:17px; height:17px; }
/* Canlı destek balonu sağ altta duruyor; çakışmasın diye telefonda
   biraz yukarı alınıyor. */
@media(max-width:639.98px){ .eg-sasirt{ right:14px; bottom:82px; padding:11px 17px; font-size:13px; } }

/* ---------- GÜVENCE ŞERİDİ ---------- */
.eg-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){
  .eg-guvence{ grid-template-columns:repeat(4,minmax(0,1fr)); padding:52px 40px 8px; gap:12px; }
}
.eg-guvence li{
  padding:16px 18px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(17,17,16,.08);
}
.eg-guvence h3{ font-size:14px; font-weight:500; }
.eg-guvence p{ margin-top:4px; color:var(--muted-ink); font-size:12.5px; line-height:1.6; }
.eg-guvence li:nth-child(1){ border-top:3px solid var(--eg-mor); }
.eg-guvence li:nth-child(2){ border-top:3px solid var(--eg-pembe); }
.eg-guvence li:nth-child(3){ border-top:3px solid var(--eg-sari); }
.eg-guvence li:nth-child(4){ border-top:3px solid var(--eg-turkuaz); }

/* ---------- HAREKETİ AZALT ---------- */
@media (prefers-reduced-motion: reduce){
  .eg-hero::before, .eg-cikartma, .eg-serit-bant{ animation:none !important; }
  .eg-squiggle path{ animation:none; stroke-dashoffset:0; }
  .eg-cikartma:hover, .eg-cikartma:focus-within,
  .eg .artwork-card:hover, .eg-cip:hover, .eg-sasirt:hover{ transform:none; }
}