/* =========================================================
   Ürün kartları

   Ürünlerin uzun metinsel içeriği olmadığı için ayrı ürün detay
   sayfası YOK: aynı ürünün diğer renk/açı fotoğrafları doğrudan
   kartın içinden gezilir. Kart, küçük bir galeri gibi çalışır —
   altındaki küçük görseller (thumb) ana görseli değiştirir, ana
   görsele tıklamak ise büyük görünümü açar.
========================================================= */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(1.1rem,2.2vw,1.8rem);
}
@media (max-width:560px){
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem;}
}

.product-card{
  display:flex;flex-direction:column;height:100%;
  background:var(--color-paper);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium);
}
@media (hover:hover){
  .product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);}
}

.product-card__media{
  position:relative;flex:none;
  aspect-ratio:1/1;
  background:var(--bg-secondary);
  overflow:hidden;
  cursor:zoom-in;
}
/* Fotoğraflar üst üste yığılır ve yalnızca opaklıkla geçiş yapar:
   display/visibility ile değiştirmek her geçişte yeniden yerleşim
   (layout) tetikler ve mobilde gözle görülür bir sıçrama yaratırdı. */
/* Sınıf <img>'in kendisinde değil, onu saran <picture>'da: webp/jpeg
   seçimi <picture> ile yapıldığı için konumlandırma da o kutuya ait
   olmalı (aksi halde saran öğe normal akışta kalır ve kartı bozar). */
.product-card__img{
  position:absolute;inset:0;display:block;
  opacity:0;
  transition:opacity .4s var(--ease-premium), transform var(--dur-slow) var(--ease-premium);
}
.product-card__img img{width:100%;height:100%;object-fit:cover;display:block;}
.product-card__img.is-active{opacity:1;}
@media (hover:hover){
  .product-card:hover .product-card__img.is-active{transform:scale(1.04);}
}

/* Büyüteç ipucu — fotoğrafın tıklanabilir olduğunu belli eder. */
.product-card__zoom{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(252,249,245,.9);color:var(--color-taupe-dark);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:var(--shadow-soft);
  opacity:0;transform:scale(.85);
  transition:opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
  pointer-events:none;
}
.product-card__zoom .icon{width:1.05em;height:1.05em;}
@media (hover:hover){
  .product-card:hover .product-card__zoom,
  .product-card:focus-within .product-card__zoom{opacity:1;transform:none;}
}
/* Dokunmatik cihazlarda hover yok; ipucu kalıcı ama daha sönük durur. */
@media (hover:none){
  .product-card__zoom{opacity:.85;transform:none;}
}

/* Kaç fotoğraf olduğunu gösteren sayaç (yalnızca çok fotoğraflı ürünlerde) */
.product-card__counter{
  position:absolute;left:.7rem;top:.7rem;z-index:2;
  font-family:var(--font-accent);font-size:.62rem;letter-spacing:.12em;
  padding:.32rem .6rem;border-radius:var(--radius-pill);
  background:rgba(252,249,245,.9);color:var(--color-taupe-dark);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* Kart içi ileri/geri okları — parmakla kaydırmayı bilmeyen kullanıcı da
   diğer fotoğrafları görebilsin diye. */
.product-card__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(252,249,245,.92);color:var(--color-anthracite);
  box-shadow:var(--shadow-soft);
  opacity:0;transition:opacity var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.product-card__nav .icon{width:1em;height:1em;}
.product-card__nav--prev{left:.5rem;}
.product-card__nav--prev .icon{transform:rotate(180deg);}
.product-card__nav--next{right:.5rem;}
@media (hover:hover){
  .product-card:hover .product-card__nav,
  .product-card:focus-within .product-card__nav{opacity:1;}
  .product-card__nav:hover{background:var(--color-taupe-dark);color:var(--color-paper);}
}
@media (hover:none){
  /* Dokunmatikte oklar sürekli görünür: hover ile açılamazlar ve
     yalnızca kaydırmaya (swipe) güvenmek keşfedilebilirliği düşürür. */
  .product-card__nav{opacity:.9;}
}

.product-card__body{
  display:flex;flex-direction:column;gap:.7rem;
  flex:1 1 auto;
  padding:.95rem 1.05rem 1.1rem;
}
/* Kartta ürün başlığı YOKTUR (bkz. src/catalog.py): ürünler sitede
   yalnızca fotoğraflarıyla yer alır. Bu yüzden gövdenin ilk öğesi
   doğrudan fotoğraf sayısıdır ve eskiden başlıkla arasındaki boşluğu
   kısan negatif üst boşluk kaldırılmıştır. */
.product-card__meta{
  font-family:var(--font-accent);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-anthracite-light);
}

.product-card__thumbs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;}
.product-card__thumb{
  width:44px;height:44px;flex:none;
  border-radius:9px;overflow:hidden;padding:0;
  border:1.5px solid transparent;
  opacity:.6;
  transition:opacity var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.product-card__thumb img{width:100%;height:100%;object-fit:cover;}
.product-card__thumb.is-active{opacity:1;border-color:var(--color-taupe);}
@media (hover:hover){
  .product-card__thumb:hover{opacity:1;transform:translateY(-2px);}
}
@media (max-width:560px){
  .product-card__thumb{width:36px;height:36px;border-radius:7px;}
}

/* Kategori sayfası üst şeridi — diğer kategorilere hızlı geçiş */
.category-switch{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:1.6rem;
}
.category-switch a{
  font-family:var(--font-accent);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.6rem 1.1rem;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.7);
  border:1px solid rgba(44,38,33,.1);
  color:var(--color-anthracite);
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.category-switch a:hover{background:var(--color-taupe-soft);color:var(--color-taupe-dark);}
.category-switch a.is-active{background:var(--color-taupe-dark);border-color:var(--color-taupe-dark);color:var(--color-paper);}
@media (max-width:720px){.category-switch{justify-content:center;}}

/* =========================================================
   Toptan satış bilgi kutusu — arkasında ambiyans ışıması

   Işıklar kutunun DIŞINA taşacak şekilde konumlandırılır; bu yüzden
   sahne, kapsayıcıdan dar tutulur (max-width) ve üst/alt boşluk
   bırakılır. Aksi halde bulanık kuyruk ya kenardan kesilir ya da bir
   üstteki bölüm ayracının düz rengiyle çakışıp lekeli görünürdü.
========================================================= */
.wholesale-stage{
  position:relative;
  width:100%;max-width:min(1020px,100%);
  margin-inline:auto;
  margin-block:clamp(1rem,3vw,2.2rem);
}
.wholesale-stage__glow{position:absolute;border-radius:50%;filter:blur(46px);pointer-events:none;z-index:-1;}
/* ÜST ve ALT ışıklar kutunun dışına taşabilir: bölümün kendi dikey
   dolgusu (padding-block) bulanık kuyruğun sönümlenmesine yetecek kadar
   nötr alan bırakıyor.
   YANLARDAKİ ışıklar ise HER ZAMAN kutunun içinde kalır. Dışarı
   taşsalardı, sönümlenmeleri için gereken ~85px'lik pay yalnızca çok
   geniş ekranlarda mevcut olurdu; 768-1200px arasında ışık ekran
   kenarına dayanıp düz bir çizgiyle kesilirdi — düzeltmek istediğimiz
   sorunun ta kendisi. İçeride durduklarında görünüm neredeyse aynı
   (ışık kartın altından süzülüyor) ama her genişlikte kusursuz. */
.wholesale-stage__glow--a{width:260px;height:260px;background:rgba(var(--glow-cream),.95);top:-62px;left:4%;}
.wholesale-stage__glow--b{width:230px;height:230px;background:rgba(var(--glow-blush),.8);bottom:-62px;right:6%;}
.wholesale-stage__glow--c{width:190px;height:190px;background:rgba(var(--glow-sky),.6);top:26%;right:14px;}
.wholesale-stage__glow--d{width:190px;height:190px;background:rgba(var(--glow-sage),.55);top:30%;left:14px;}
.wholesale-stage__glow--e{width:165px;height:165px;background:rgba(var(--glow-butter),.65);top:64%;left:22px;}
@media (max-width:760px){
  .wholesale-stage__glow{filter:blur(32px);}
  .wholesale-stage__glow--a{top:-38px;width:165px;height:165px;}
  .wholesale-stage__glow--b{bottom:-38px;width:150px;height:150px;}
  .wholesale-stage__glow--c{right:24px;width:110px;height:110px;}
  .wholesale-stage__glow--d{left:24px;width:110px;height:110px;}
  .wholesale-stage__glow--e{left:20px;width:92px;height:92px;}
}

.wholesale-note{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.4rem;
  background:var(--color-paper);
  border-radius:var(--radius-lg);
  padding:clamp(1.4rem,2.6vw,2rem);
  box-shadow:var(--shadow-lift);
}
.wholesale-note__text{display:flex;flex-direction:column;gap:.3rem;min-width:min(100%,22rem);flex:1 1 22rem;}
.wholesale-note__text p{font-size:.95rem;color:var(--color-anthracite);}
.wholesale-note__actions{display:flex;flex-wrap:wrap;gap:.7rem;}
@media (max-width:720px){
  .wholesale-note{text-align:center;justify-content:center;}
  .wholesale-note__text{align-items:center;}
  .wholesale-note__actions{justify-content:center;width:100%;}
}