/* ══════════════════════════════════════════════════════════════════════════
   ms-eser-vitrin.css — Eser vitrini (3D coverflow) + eser kart ızgarası

   ORTAK DOSYA: sanatci.php ve eserler.php aynı stilleri kullanır.
   Bu stiller üzerinde çok kez ince ayar yapıldı (kart boyutu, ışık, üst bant,
   metin netliği); iki sayfaya kopyalansaydı sonraki düzenleme yalnız birinde
   kalırdı. Buraya yazılan her değişiklik iki sayfada da geçerlidir.

   Vurgu rengi bölümden gelir: .ms-bolum-sanatci → altın sarısı
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Eser kart ızgarası ── */
.san-eserler-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1100px){.san-eserler-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.san-eserler-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.san-eserler-grid{grid-template-columns:1fr}}

.san-eser-kart{
  position:relative;
  cursor:pointer;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease,border-color .35s ease;
}
/* Hover — vitrin kartlarıyla ve ana sayfa kartlarıyla aynı üç katmanlı ışık */
@media (hover:hover) and (pointer:fine){
  .san-eser-kart:hover{
    transform:translateY(-10px);
    z-index:5;
    border-color:rgba(var(--ms-vurgu-rgb),.7);
    box-shadow:
      0 0 16px 3px rgba(var(--ms-vurgu-rgb),.8),
      0 0 38px 9px rgba(var(--ms-vurgu-rgb),.45),
      0 22px 55px 6px rgba(var(--ms-vurgu-rgb),.25);
  }
  .san-eser-kart:hover .san-eser-img > img{
    transform:scale(1.07);
    filter:brightness(1.06) saturate(1.1);
  }
}
.san-eser-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#111;
  display:flex;align-items:center;justify-content:center}
/* Üstteki etiket görseli kapatmasın: iç boşlukla eser aşağı itilir ve
   kalan alanda ortalanır (object-fit:contain iç boşluğu hesaba katar).
   ÖNEMLİ: ">" ile yalnızca eser görseli hedeflenir — etiketin içindeki
   avatar da bu kuraldan etkilenmesin diye. */
.san-eser-img > img{width:100%;height:100%;object-fit:contain;display:block;
  box-sizing:border-box;padding:48px 14px 14px;
  transition:transform .6s cubic-bezier(.2,.8,.3,1),filter .4s ease}
/* Üst etiketin okunması için görselin üst kısmına yumuşak karartma */
.san-eser-img::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 22%,rgba(0,0,0,0) 45%);
}

/* Izgara kartlarında etiket "hap" görünümü olmadan, doğrudan görselin
   üzerine yerleşir. Okunurluğu üstteki karartma gradyanı + yazı gölgesi sağlar. */
.san-eser-img .ms-vitrin-ust{
  /* right:auto — vitrin kuralındaki width:max-content ile çakışmasın.
     Izgara kartında bant zaten arka plansız, yalnız yazı görünüyor. */
  top:11px;left:12px;right:auto;gap:8px;padding:0;
  background:none;border:none;border-radius:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.san-eser-img .ms-vitrin-avatar-kap{width:30px;height:30px;border-width:2px;
  box-shadow:0 2px 6px rgba(0,0,0,.5)}
.san-eser-img .ms-vitrin-avatar-kap::before{font-size:12px}
.san-eser-img .ms-vitrin-eser-ad{font-size:12px;text-shadow:0 1px 4px rgba(0,0,0,.85)}
.san-eser-img .ms-vitrin-sanatci-ad{font-size:10px;color:rgba(255,255,255,.8);
  text-shadow:0 1px 4px rgba(0,0,0,.85)}

/* ── Kompakt alt blok ── */
.san-eser-alt{padding:10px 12px 12px}
.san-eser-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:10px;color:rgba(255,255,255,.35);margin-bottom:8px;min-height:12px}
.san-eser-tip{font-weight:700;color:var(--ms-vurgu);text-transform:uppercase;letter-spacing:.8px}
.san-eser-satir{display:flex;align-items:center;justify-content:space-between;gap:8px}
.san-eser-fiyat{font-size:14px;font-weight:900;color:var(--ms-vurgu);white-space:nowrap}
.san-eser-satildi{font-size:10.5px;font-weight:800;color:#81c784;
  background:rgba(76,175,80,.12);border:1px solid rgba(76,175,80,.3);
  padding:3px 9px;border-radius:20px;white-space:nowrap}
.san-eser-btn{flex-shrink:0;font-size:11px;font-weight:700;
  border:1px solid rgba(var(--ms-vurgu-rgb),.45);color:var(--ms-vurgu);
  padding:5px 13px;border-radius:20px;transition:background .25s ease,color .25s ease}
.san-eser-kart:hover .san-eser-btn{background:var(--ms-vurgu);color:#111;
  border-color:var(--ms-vurgu)}

/* ══════════════════════════════════════════════════════════
   ESER VİTRİNİ — 3D Coverflow
   Vurgu rengi bölümden gelir (.ms-bolum-sanatci → altın sarısı)
   ══════════════════════════════════════════════════════════ */
/* overflow:hidden → yandaki kartlar kabın dışına taşıp sayfada
   yatay kaydırma oluşturmasın. Işığa yer kalsın diye iç boşluk verildi. */
.ms-eser-vitrin{position:relative;margin:0 0 46px;overflow:hidden}
.ms-eser-vitrin .swiper{padding:66px 0 74px;overflow:visible}
/* Genişlik Swiper tarafından hesaplanır (slidesPerView) — sabit width
   verilirse döngü modu şaşırıyor. */
/* ÖNEMLİ: transition-property'ye transform de dahil edilmeli. Aksi halde
   Swiper'ın verdiği süre yalnızca opacity'ye uygulanır, 3D dönüşüm ok
   tuşlarında anında sıçrar (sürüklerken sorun görünmez, çünkü orada Swiper
   her karede yeniden hesaplar).
   Süre BİLEREK yazılmadı — Swiper satır içi olarak veriyor: gezinmede 600ms,
   sürükleme sırasında 0ms. Buraya süre yazmak sürüklemeyi bozardı. */
.ms-vitrin-slide{
  height:auto;
  transition-property:transform,opacity;
  transition-timing-function:cubic-bezier(.25,.8,.35,1);
}

/* Yandaki kartlar geri planda kalsın, odaktaki öne çıksın */
.ms-vitrin-slide{opacity:.34}
.ms-vitrin-slide.swiper-slide-active{opacity:1}
.ms-vitrin-slide.swiper-slide-prev,
.ms-vitrin-slide.swiper-slide-next{opacity:.62}

/* ⚠ Odaktaki karta transform:scale() UYGULANMAZ.
   scale(), zaten çizilmiş (rasterize edilmiş) katmanı büyütür; Swiper'ın 3D
   bağlamında bu, kart üstündeki yazıların bulanıklaşmasına yol açıyordu.
   Kart artık YERLEŞİMLE büyütülüyor (slidesPerView düşürülerek) — böylece
   metin gerçek boyutunda çizilip net kalıyor. */
.ms-vitrin-kart{display:block;text-decoration:none;color:inherit}
.ms-vitrin-gorsel{
  position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:#111;border:1px solid rgba(255,255,255,.08);
  transition:box-shadow .4s ease,border-color .4s ease;
}
/* ">" ile yalnızca eser görseli — etiketteki avatar etkilenmesin */
/* ⚠ object-fit:COVER DEĞİL — cover, yatay bir tabloyu 4:5 çerçeveye sığdırmak
   için sağını solunu kırpıyordu. contain ile eser TAM görünür; oluşan boşluğu
   aynı görselin bulanık kopyası (::before) dolduruyor. Sabit oranlı kutuyu
   YERLEŞİM verir, görselin kendisi kırpılmaz. */
.ms-vitrin-gorsel > img{width:100%;height:100%;object-fit:contain;display:block;
  position:relative;z-index:1;
  transition:transform .6s cubic-bezier(.2,.8,.3,1),filter .4s ease}

/* Bulanık zemin — --ms-zemin değişkeni karta satır içi olarak veriliyor.
   Değişken yoksa (görselsiz eser) hiçbir şey çizilmez. */
.ms-vitrin-gorsel::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--ms-zemin,none);background-size:cover;background-position:center;
  filter:blur(26px) brightness(.42) saturate(1.15);
  transform:scale(1.15);   /* bulanıklığın kenarda soluk bant bırakmasını önler */
}
.ms-vitrin-bos{width:100%;height:100%;display:flex;align-items:center;justify-content:center}

/* Odaktaki kart: altın hale (ana sayfa kartlarıyla aynı üç katmanlı ışık) */
.ms-vitrin-slide.swiper-slide-active .ms-vitrin-gorsel{
  border-color:rgba(var(--ms-vurgu-rgb),.6);
  box-shadow:
    0 0 18px 3px rgba(var(--ms-vurgu-rgb),.70),
    0 0 44px 10px rgba(var(--ms-vurgu-rgb),.36),
    0 26px 60px 8px rgba(var(--ms-vurgu-rgb),.22);
}
@media (hover:hover) and (pointer:fine){
  .ms-vitrin-kart:hover .ms-vitrin-gorsel{
    border-color:rgba(var(--ms-vurgu-rgb),.7);
    box-shadow:
      0 0 16px 3px rgba(var(--ms-vurgu-rgb),.8),
      0 0 38px 9px rgba(var(--ms-vurgu-rgb),.45),
      0 22px 55px 6px rgba(var(--ms-vurgu-rgb),.25);
  }
  .ms-vitrin-kart:hover .ms-vitrin-gorsel > img{transform:scale(1.07);filter:brightness(1.06) saturate(1.1)}
  /* Hover'da ölçek yok (metni bulanıklaştırır); tepki ışık ve görsel
     yakınlaşmasıyla veriliyor — yukarıdaki kurallar bunu zaten yapıyor. */
}

/* Üst ve alt katmanların okunurluğu için yumuşak karartma.
   KATMAN SIRASI: 0 bulanık zemin · 1 eser görseli · 2 bu gradyan · 3 etiketler
   (::before görselden ÖNCE boyandığı için z-index'i açıkça yükseltilmeli) */
.ms-vitrin-gorsel::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 34%,
             rgba(0,0,0,0) 52%,rgba(0,0,0,.88) 100%);
}

/* Üst etiket — avatar + eser adı + sanatçı adı */
.ms-vitrin-ust{
  position:absolute;top:12px;left:12px;z-index:3;
  /* inline-flex + max-width: bant, İÇİNDEKİ YAZI KADAR genişler.
     Eskiden right:12px ile kartın tüm genişliğini kaplıyor ve görselin üst
     kısmındaki yüzleri gereksiz yere kapatıyordu. */
  display:inline-flex;align-items:center;gap:9px;
  max-width:calc(100% - 24px);width:max-content;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
  border-radius:40px;padding:6px 13px 6px 6px;
}
/* Avatar: görsel yoksa/yüklenmezse baş harf gösterilir */
.ms-vitrin-avatar-kap{position:relative;width:32px;height:32px;flex-shrink:0;
  border-radius:50%;overflow:hidden;background:#232323;
  border:2px solid rgba(var(--ms-vurgu-rgb),.75);
  display:flex;align-items:center;justify-content:center}
.ms-vitrin-avatar-kap::before{content:attr(data-harf);
  font-size:13px;font-weight:900;color:var(--ms-vurgu)}
.ms-vitrin-avatar{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.ms-vitrin-ust-yazi{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ms-vitrin-eser-ad{font-size:12.5px;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ms-vitrin-sanatci-ad{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.72);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* Alt bar — fiyat + incele */
.ms-vitrin-alt{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.ms-vitrin-fiyat{font-size:15px;font-weight:900;color:var(--ms-vurgu);
  text-shadow:0 1px 4px rgba(0,0,0,.7);white-space:nowrap}
.ms-vitrin-fiyat-yok{font-size:11px;font-weight:700;color:rgba(255,255,255,.6);
  text-transform:uppercase;letter-spacing:1px}
.ms-vitrin-satildi{font-size:11px;font-weight:800;color:#81c784;
  background:rgba(76,175,80,.16);border:1px solid rgba(76,175,80,.4);
  padding:4px 11px;border-radius:20px}
.ms-vitrin-btn{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-size:11.5px;font-weight:700;padding:6px 13px;border-radius:20px;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.ms-vitrin-kart:hover .ms-vitrin-btn{
  background:var(--ms-vurgu);border-color:var(--ms-vurgu);color:#111
}

/* Sağ / sol oklar */
.ms-vitrin-ok{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,20,20,.78);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:.25s;
}
.ms-vitrin-ok:hover{background:var(--ms-vurgu);border-color:var(--ms-vurgu);color:#111}
.ms-vitrin-ok.swiper-button-disabled{opacity:.3;cursor:default}
.ms-vitrin-ok.swiper-button-disabled:hover{background:rgba(20,20,20,.78);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.16)}
.ms-vitrin-onceki{left:6px}
.ms-vitrin-sonraki{right:6px}
@media(max-width:640px){
  .ms-vitrin-ok{width:38px;height:38px}
  .ms-vitrin-onceki{left:-2px}
  .ms-vitrin-sonraki{right:-2px}
}