/* Imported from: ../../sub-components/MobileScroll/styles.css */
/* Yatay şerit düzenleri — ızgaraları kaydırılabilir bir şeride çevirir.
 *
 *   .vt-mscroll  → yalnızca dar ekranda şerit, masaüstünde ızgara kalır
 *   .vt-hscroll  → her ekranda şerit; masaüstünde bir bakışta kaç kart
 *                  görüneceği `--vt-hs-cols` ile belirlenir
 *
 * NOT: Renderer kullanan düzenlerde kart genişliği BU DOSYADAN verilemez —
 * ebeveynin seçicisi çocuğun scope'una ulaşamıyor. Orada kart, kendi
 * CSS'inde `--vt-mscroll-w` değişkenini okur (bkz. FeatureItem).
 *
 * Ayarlar: `--vt-mscroll-w` (mobil kart genişliği, yüzde),
 *          `--vt-hs-cols` + `--vt-hs-gap` (masaüstü).
 *
 * ⚠️ Neden global.css'te değil: derleyici yalnızca ikas.config.json'daki
 * `styles` yolunu bileşen paketine katıyor. global.css tema düzeyinde ayrı
 * yükleniyor ve dev sunucusu bileşen paketlerini iterken oradaki değişikliği
 * taşımıyor — kural tarayıcıya hiç ulaşmıyordu.
 *
 * ⚠️ Sınıf adları BİLEREK iki kez yazılmıştır. Bileşenlerdeki
 * `.vt-x__grid { display: grid }` ile aynı ağırlıkta olurlardı ve bu dosya
 * @import ile EN ÜSTE geldiği için ızgara kuralı kazanırdı.
 */

.cc_lqof57t2_t9P0wyeCZj .vt-hscroll.vt-hscroll {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--vt-hs-gap, 12px);
  overflow-x: auto;
  /* Bir eksen `auto` olunca diğerindeki `visible` da `auto`ya döner ve
     şeritte gereksiz bir dikey kaydırma çubuğu belirir. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  /* Şerit sayfa kenarına kadar uzanır ama ilk/son kart kenara yapışmaz.
     `max-width` olmadan negatif kenar boşluğu sayfayı yatayda kaydırıyor. */
  padding-inline: var(--page-margin);
  margin-inline: calc(var(--page-margin) * -1);
  max-width: 100vw;
  scroll-padding-inline: var(--page-margin);
}

.cc_lqof57t2_t9P0wyeCZj .vt-hscroll.vt-hscroll::-webkit-scrollbar {
  display: none;
}

/* ⚠️ Genişlik kuralı DOĞRUDAN ÇOCUĞA yazılır.
   Bir alt katmana da yazmak (`> * > *`) yanlıştı: gerçek kartların İÇİNDEKİ
   ögelere de kart genişliği dayatıyor, kart düzenini bozuyor ve şeritte
   dikey taşma yaratıyordu.

   IkasComponentRenderer kullanan yerlerde durum farklı: her çocuk satır içi
   `display: contents` taşıyan bir sarmalayıcıya sarılıyor ve böyle bir
   eleman kutu ağacında olmadığı için ESNEK ÖGE OLAMAZ. Orada gerçek öge bir
   alttadır — o düzenler `--nested` değişkesini kullanır. */
.cc_lqof57t2_t9P0wyeCZj .vt-hscroll.vt-hscroll > * {
  flex: 0 0 var(--vt-mscroll-w, 62%);
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .cc_lqof57t2_t9P0wyeCZj .vt-hscroll.vt-hscroll {
    gap: var(--vt-hs-gap, 24px);
  }

  /* Bir bakışta tam `--vt-hs-cols` kart görünür: aradaki boşluklar
     düşülüp kalan genişlik sütun sayısına bölünür. */
  .cc_lqof57t2_t9P0wyeCZj .vt-hscroll.vt-hscroll > * {
    flex: 0 0
      calc(
        (100% - (var(--vt-hs-cols, 4) - 1) * var(--vt-hs-gap, 24px)) /
          var(--vt-hs-cols, 4)
      );
  }
}

/* ─── Yalnızca mobil şerit ─────────────────────────────────── */

@media (max-width: 768px) {
  .cc_lqof57t2_t9P0wyeCZj .vt-mscroll.vt-mscroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
      padding-inline: var(--page-margin);
    margin-inline: calc(var(--page-margin) * -1);
    max-width: 100vw;
    scroll-padding-inline: var(--page-margin);
  }

  .cc_lqof57t2_t9P0wyeCZj .vt-mscroll.vt-mscroll::-webkit-scrollbar {
    display: none;
  }

  .cc_lqof57t2_t9P0wyeCZj .vt-mscroll.vt-mscroll > * {
    flex: 0 0 var(--vt-mscroll-w, 62%);
    scroll-snap-align: start;
  }

}

/* End import: ../../sub-components/MobileScroll/styles.css */

/* Alt bileşen CSS'i otomatik toplanmaz — yalnızca ikas.config.json'daki
 * `styles` yolu derlenir. Bu yüzden ProductCard'ın stilleri buradan
 * @import ile bağlanır; CLI derleme sırasında bunu çözüp gömer. */
/* Imported from: ../../sub-components/ProductCard/styles.css */
/* Vuvito ürün kartı
 *
 * Görsel kartı TAM KAPLAR. Stitch'te kart beyaz zeminliydi, 32px iç boşluğu
 * vardı ve görsel ortada küçük duruyordu — burada öyle değil: `object-fit:
 * cover` ile görsel çerçevenin tamamını doldurur.
 *
 * Oran ve hover ölçeği ebeveynden iner:
 *   --vt-pc-ratio, --vt-pc-zoom
 * Yazı boyutları da ebeveynin --vt-pc-title-* / --vt-pc-price-* değerlerini
 * kullanır; verilmezse buradaki yedekler devreye girer.
 */

.cc_lqof57t2_t9P0wyeCZj .vt-pcard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Kart, esnek/izgara ogesi olarak varsayilan `min-width: auto` tasir:
     bosluksuz uzun bir varyasyon adi ("3'lu Set(Kuzucuk+Medium+Large)")
     sutunu icerige gore genisletip sayfayi yatayda kaydiriyordu. */
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--vt-pc-ratio, 4 / 5);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-xl);
  background: var(--color-surface-alt);
}

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__media, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Kartı tamamen kaplar — beyaz boşluk bırakmaz. */
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__placeholder {
  background: var(--color-surface-alt);
}

.cc_lqof57t2_t9P0wyeCZj .vt-pcard:hover .vt-pcard__media {
  transform: scale(var(--vt-pc-zoom, 1));
}

/* ─── Rozet ─────────────────────────────────────────────── */

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: 10px;
  text-transform: uppercase;
}

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__badge--muted {
  color: var(--color-text-secondary);
}

/* ─── Hızlı sepete ekle ─────────────────────────────────── */

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__add {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text-primary);
  --vt-icon-stroke: 1.75;
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  /* Dokunmatik cihazda hover yok — orada hep görünür kalır (aşağıda). */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 250ms ease, transform 250ms ease, background 250ms ease,
    color 250ms ease;
}

.cc_lqof57t2_t9P0wyeCZj .vt-pcard:hover .vt-pcard__add, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__add:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__add:hover {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
}

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__add.is-added {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  opacity: 1;
  transform: translateY(0);
}

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__add:disabled {
  cursor: default;
}

/* Dokunmatik cihazlarda hover durumu yok — buton kalıcı görünür,
   yoksa mobilde hızlı ekleme hiç erişilebilir olmaz. */
@media (hover: none) {
  .cc_lqof57t2_t9P0wyeCZj .vt-pcard__add {
    opacity: 1;
    transform: none;
  }
}

/* ─── Metin ─────────────────────────────────────────────── */

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  /* Renk, kalinlik ve hiza ebeveyn section'dan CSS degiskeniyle iner;
     verilmezse yedek degerler devreye girer. */
  text-align: var(--vt-pc-align, left);
  align-items: var(--vt-pc-align-items, stretch);
}

/* `text-align` metni hizalar ama esnek kutu icindeki ogeleri degil;
   fiyat satiri bir flex oldugu icin ayrica hizalanmali. */
.cc_lqof57t2_t9P0wyeCZj .vt-pcard__body { --vt-pc-align-items: stretch; }

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__title {
  margin: 0;
  color: var(--vt-pc-title-color, inherit);
  font-weight: var(--vt-pc-title-weight, inherit);
  /* Urun adi iki satira kadar sarar, sonrasi kesilir. */
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-size: var(--vt-pc-title-m, 15px);
}

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__variant {
  margin: 0;
  color: var(--color-text-secondary);
  /* Varyasyon adi tek satirda kalir; sigmayan kismi ucnokta ile kesilir.
     Sarmak birakilsaydi kartlarin yuksekligi urunden urune degisiyordu.
     Tam adi gormek isteyen icin `title` niteligi index.tsx'te veriliyor. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__price {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: var(--vt-pc-justify, flex-start);
  gap: 4px 8px;
  min-width: 0;
  font-weight: var(--vt-pc-price-weight, inherit);
  color: var(--color-accent);
  font-size: var(--vt-pc-price-m, 14px);
  letter-spacing: normal;
}

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__price-final {
  color: var(--vt-pc-price-color, inherit);
}

.cc_lqof57t2_t9P0wyeCZj .vt-pcard__price-old {
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-size: 0.85em;
}

/* Tutar ile para birimi arasinda satir atlamasin: dar kartta "₺" ustte,
   rakam altta kaliyordu. Iki fiyat gerekirse alt alta gecer. */
.cc_lqof57t2_t9P0wyeCZj .vt-pcard__price > * {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .cc_lqof57t2_t9P0wyeCZj .vt-pcard__title { font-size: var(--vt-pc-title-d, 18px); }
  .cc_lqof57t2_t9P0wyeCZj .vt-pcard__price { font-size: var(--vt-pc-price-d, 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .cc_lqof57t2_t9P0wyeCZj .vt-pcard__media, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__add {
    transition: none;
  }

  .cc_lqof57t2_t9P0wyeCZj .vt-pcard:hover .vt-pcard__media {
    transform: none;
  }
}

/* End import: ../../sub-components/ProductCard/styles.css */

/* Vuvito ürün ızgarası
 *
 * Sütun sayıları prop'tan gelir (--vt-pg-cols-m / -d), kart oranı ve hover
 * ölçeği de karta CSS değişkeniyle iner.
 * Breakpoint: md = 768px 768px
 */

.cc_lqof57t2_t9P0wyeCZj .vt-pgrid {
  width: 100%;
  background: var(--color-bg);
}

/* ─── Başlık satırı ─────────────────────────────────────── */

.cc_lqof57t2_t9P0wyeCZj .vt-pgrid__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .cc_lqof57t2_t9P0wyeCZj .vt-pgrid__head {
    margin-bottom: 56px;
  }
}

.cc_lqof57t2_t9P0wyeCZj .vt-pgrid__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc_lqof57t2_t9P0wyeCZj .vt-pgrid__eyebrow {
  color: var(--vt-pg-eyebrow-color, var(--color-accent));
  font-size: var(--vt-pg-eyebrow-m, 11px);
  text-transform: uppercase;
}

.cc_lqof57t2_t9P0wyeCZj .vt-pgrid__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--vt-pg-title-m, 28px);
}

/* "Tüm Ürünler" bağlantısı dar ekranda başlıkla yan yana sığmıyor. */
.cc_lqof57t2_t9P0wyeCZj .vt-pgrid__viewall {
  display: none;
}

@media (min-width: 768px) {
  .cc_lqof57t2_t9P0wyeCZj .vt-pgrid__viewall {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 300ms ease, border-color 300ms ease, gap 300ms ease;
  }

  .cc_lqof57t2_t9P0wyeCZj .vt-pgrid__viewall:hover, .cc_lqof57t2_t9P0wyeCZj .vt-pgrid__viewall:focus-visible {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    gap: 16px;
    outline: none;
  }

  .cc_lqof57t2_t9P0wyeCZj .vt-pgrid__eyebrow { font-size: var(--vt-pg-eyebrow-d, 12px); }
  .cc_lqof57t2_t9P0wyeCZj .vt-pgrid__title { font-size: var(--vt-pg-title-d, 36px); }
}

.cc_lqof57t2_t9P0wyeCZj .vt-pgrid__viewall-icon {
  font-size: 1.4em;
}

/* ─── Izgara ────────────────────────────────────────────── */

.cc_lqof57t2_t9P0wyeCZj .vt-pgrid__grid {
  display: grid;
  grid-template-columns: repeat(var(--vt-pg-cols-m, 2), minmax(0, 1fr));
  gap: var(--vt-pg-gap, 24px);
}

@media (min-width: 768px) {
  .cc_lqof57t2_t9P0wyeCZj .vt-pgrid__grid {
    grid-template-columns: repeat(var(--vt-pg-cols-d, 4), minmax(0, 1fr));
  }
}

.cc_lqof57t2_t9P0wyeCZj .vt-pgrid__empty {
  margin: 0;
  padding-block: 32px;
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .cc_lqof57t2_t9P0wyeCZj .vt-pgrid__viewall {
    transition: none;
  }
}

/* Serit oklari — baslik satirinin sagina oturur, kartlarin ustunu
   kapatmaz. Serit her ekranda acik oldugu icin oklar da her yerde
   gorunur. */
.cc_lqof57t2_t9P0wyeCZj .vt-pgrid__arrows {
  display: flex;
  gap: 6px;
  flex: none;
}

.cc_lqof57t2_t9P0wyeCZj .vt-pgrid__arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 17px;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.cc_lqof57t2_t9P0wyeCZj .vt-pgrid__arrow:hover, .cc_lqof57t2_t9P0wyeCZj .vt-pgrid__arrow:focus-visible {
  background: var(--color-surface-alt);
}

@media (prefers-reduced-motion: reduce) {
  .cc_lqof57t2_t9P0wyeCZj .vt-pgrid__arrow { transition: none; }
}