/*
 * ENDÜSTRİYEL TEMA — vitrin bileşenleri ve sayfaları (ürün kartı, kaydırıcı, geri sayım, sayfalama, bildirim…)
 * Katman sırası vt-kabuk.css'teki @layer bildiriminden gelir (bu dosya ondan SONRA yüklenir).
 */
@layer vt.bilesen {
  /* ---------- Bölüm ---------- */
  .vt-bolum { padding-block: var(--vt-s-10) 0; }
  .vt-bolum-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--vt-s-4); margin-bottom: var(--vt-s-5); }
  .vt-bolum-bas .vt-bolum-baslik { margin-bottom: 0; }
  .vt-bolum-alt { margin-top: 4px; color: var(--vt-metin-2); font-size: var(--vt-fs-md); }

  /* ---------- Ürün ızgarası ---------- */
  .vt-izgara { display: grid; gap: var(--vt-s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; }
  @media (min-width: 600px) { .vt-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vt-s-4); } }
  @media (min-width: 1200px) { .vt-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vt-izgara--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

  /* ---------- Ürün kartı ---------- */
  .vt-kart { position: relative; display: flex; flex-direction: column; height: 100%; color: var(--vt-kart-baslik, var(--vt-metin)); background: var(--vt-kart-zemin, var(--vt-yuzey)); border: 1px solid var(--vt-kart-kenar, var(--vt-cizgi)); border-radius: var(--vt-r-2); overflow: hidden; transition: border-color var(--vt-sure), box-shadow var(--vt-sure); }
  .vt-kart:hover { border-color: var(--vt-kart-kenar-hover, var(--vt-gri-400)); box-shadow: var(--vt-golge-2); }
  .vt-kart-gorsel { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--vt-kart-gorsel-zemin, #fff); border-bottom: var(--vt-kart-gorsel-cizgi, 1px) solid var(--vt-kart-kenar, var(--vt-cizgi)); overflow: hidden; } /* çizgi kalınlığı: tema ayarı kart.gorsel_cizgi (0 = yok) */
  .vt-kart-gorsel img { width: 100%; height: 100%; object-fit: contain; padding: var(--vt-s-3); transition: transform .3s var(--vt-egri); }
  .vt-kart:hover .vt-kart-gorsel img { transform: scale(1.04); }
  .vt-kart-gorselsiz { color: var(--vt-gri-300); } .vt-kart-gorselsiz .vt-ikon { width: 48px; height: 48px; }
  .vt-kart-rozetler { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
  .vt-kart-rozet { padding: 2px 8px; border-radius: var(--vt-r-1); background: var(--vt-kart-rozet, var(--vt-koyu, var(--vt-gri-950))); color: var(--vt-kart-rozet-metin, var(--vt-koyu-metin, #fff)); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
  .vt-kart-govde { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: var(--vt-s-3) var(--vt-s-3) var(--vt-s-3); }
  .vt-kart-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--vt-fs-xs); color: var(--vt-kart-ust, var(--vt-metin-3)); min-height: 20px; }
  .vt-kart-ust .vt-kod { display: inline-block; font-size: 11px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; }
  .vt-kart-marka { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
  .vt-kart-ad { font-family: var(--vt-font-govde); font-size: var(--vt-fs-md); font-weight: 600; line-height: 1.35; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
  .vt-kart-ad a { color: var(--vt-kart-baslik, var(--vt-metin)); }
  .vt-kart-ad a::after { content: ""; position: absolute; inset: 0; z-index: 0; }        /* tüm kart tıklanır */
  .vt-kart-ad a:hover { color: var(--vt-kart-baslik-hover, var(--vt-ana-metin)); }
  .vt-kart-varyant { display: inline-flex; align-items: center; gap: 4px; font-size: var(--vt-fs-xs); color: var(--vt-kart-ikincil, var(--vt-metin-2)); }
  .vt-kart-varyant .vt-ikon { width: 14px; height: 14px; }
  .vt-kart-alt { margin-top: auto; display: grid; gap: 4px; }
  .vt-kart-fiyat { font-size: var(--vt-fs-base); line-height: 1.3; min-height: 1.3em; color: var(--vt-kart-fiyat, var(--vt-metin)); }
  .vt-kart-stok { font-size: var(--vt-fs-xs); }
  .vt-kart-stok .vt-ikon { width: 14px; height: 14px; }
  /* Kart zemini özelleşirse stok yazısı okunur kalır (Tema ve Görünüm › okunurluk; boşsa genel durum renkleri) */
  .vt-kart-stok.vt-durum--basari { color: var(--vt-kart-stok-var, var(--vt-basari)); }
  .vt-kart-stok.vt-durum--uyari { color: var(--vt-kart-stok-az, var(--vt-uyari)); }
  .vt-kart-stok.vt-durum--hata { color: var(--vt-kart-stok-yok, var(--vt-hata)); }
  .vt-kart-eylem { position: relative; z-index: 1; display: flex; gap: 6px; margin-top: var(--vt-s-2); }
  .vt-kart-eylem .vt-btn { flex: 1; padding: 0 var(--vt-s-2); }
  .vt-kart-eylem .vt-btn:not(.vt-btn--ikincil) { --b-z: var(--vt-kart-btn, var(--vt-buton)); --b-k: var(--vt-kart-btn, var(--vt-buton)); --b-m: var(--vt-kart-btn-metin, var(--vt-buton-metin)); }
  .vt-kart-eylem .vt-btn:not(.vt-btn--ikincil):hover { --b-z: var(--vt-kart-btn-hover, var(--vt-buton-hover)); --b-k: var(--vt-kart-btn-hover, var(--vt-buton-hover)); --b-m: var(--vt-kart-btn-metin, var(--vt-buton-metin-hover)); }
  .vt-adet { width: 56px; min-height: 34px; padding: 0 6px; text-align: center; border: 1px solid var(--vt-cizgi-2); border-radius: var(--vt-r-2); background: var(--vt-yuzey); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
  .vt-adet::-webkit-outer-spin-button, .vt-adet::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .vt-adet:focus { outline: none; border-color: var(--vt-odak); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-odak) 20%, transparent); }
  @media (max-width: 599px) { .vt-kart-eylem .vt-btn span { display: none; } .vt-kart-eylem .vt-btn { flex: 0 0 auto; width: 44px; } .vt-kart-eylem .vt-btn--tam { width: 100%; flex: 1; } .vt-kart-eylem .vt-btn--tam span, .vt-kart-eylem a.vt-btn span { display: inline; } }

  /* satır (liste) görünümü */
  .vt-kart--satir { flex-direction: row; }
  .vt-kart--satir .vt-kart-gorsel { width: 132px; flex: none; aspect-ratio: 1 / 1; border-bottom: 0; border-right: var(--vt-kart-gorsel-cizgi, 1px) solid var(--vt-cizgi); }
  .vt-kart--satir .vt-kart-govde { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; align-content: center; }
  @media (min-width: 900px) { .vt-kart--satir .vt-kart-govde { grid-template-columns: minmax(0, 1fr) 200px 220px; grid-template-areas: "ust alt eylem" "ad alt eylem" "var alt eylem"; }
    .vt-kart--satir .vt-kart-ust { grid-area: ust; } .vt-kart--satir .vt-kart-ad { grid-area: ad; min-height: 0; } .vt-kart--satir .vt-kart-varyant { grid-area: var; }
    .vt-kart--satir .vt-kart-alt { grid-area: alt; margin: 0; align-self: center; } .vt-kart--satir .vt-kart-eylem { grid-area: eylem; margin: 0; align-self: center; } }
  /* kompakt (yan listeler) */
  .vt-kart--kompakt { flex-direction: row; border: 0; border-bottom: 1px solid var(--vt-cizgi); border-radius: 0; background: transparent; }
  .vt-kart--kompakt:hover { box-shadow: none; }
  .vt-kart--kompakt .vt-kart-gorsel { width: 72px; flex: none; border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-1); margin: var(--vt-s-2) 0; }
  .vt-kart--kompakt .vt-kart-gorsel img { padding: 4px; }
  .vt-kart--kompakt .vt-kart-rozetler, .vt-kart--kompakt .vt-kart-eylem, .vt-kart--kompakt .vt-kart-stok { display: none; }
  .vt-kart--kompakt .vt-kart-govde { padding: var(--vt-s-2) 0 var(--vt-s-2) var(--vt-s-3); gap: 2px; }
  .vt-kart--kompakt .vt-kart-ad { min-height: 0; font-size: var(--vt-fs-sm); }

  /* ---------- Kaydırıcı (scroll-snap) ---------- */
  .vt-kaydirici { position: relative; }
  .vt-kaydirici-liste { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--vt-s-3)) / 2); gap: var(--vt-s-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px; margin: -2px; list-style: none; }
  /* scroll-padding = iç boşluk: yoksa tarayıcı yüklenirken ilk öğeyi hizalamak için listeyi 2 px kaydırır → Chrome bunu
     kaydırma sayıp LCP ölçümünü keser (ölçüldü: ana sayfada LCP hiç kaydedilmiyordu). */
  .vt-kaydirici-liste::-webkit-scrollbar { display: none; }
  .vt-kaydirici-liste > li { scroll-snap-align: start; min-width: 0; }
  @media (min-width: 600px) { .vt-kaydirici-liste { grid-auto-columns: calc((100% - 2 * var(--vt-s-4)) / 3); gap: var(--vt-s-4); } }
  @media (min-width: 900px) { .vt-kaydirici-liste { grid-auto-columns: calc((100% - 3 * var(--vt-s-4)) / 4); } }
  @media (min-width: 1200px) { .vt-kaydirici--5 .vt-kaydirici-liste { grid-auto-columns: calc((100% - 4 * var(--vt-s-4)) / 5); } .vt-kaydirici--6 .vt-kaydirici-liste { grid-auto-columns: calc((100% - 5 * var(--vt-s-4)) / 6); } }
  .vt-kaydir-btn { position: absolute; top: 40%; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi-2); border-radius: 50%; box-shadow: var(--vt-golge-2); color: var(--vt-metin); transition: opacity var(--vt-sure); }
  .vt-kaydir-btn:hover { background: var(--vt-yuzey-2); }
  .vt-kaydir-btn .vt-ikon { width: 20px; height: 20px; }
  .vt-kaydir-geri { left: -14px; } .vt-kaydir-ileri { right: -14px; }
  .vt-kaydir-btn[disabled] { opacity: 0; pointer-events: none; }
  @media (hover: none) { .vt-kaydir-btn { display: none; } }

  /* ---------- Geri sayım ---------- */
  .vt-geri-sayim { display: inline-flex; gap: 6px; font-variant-numeric: tabular-nums; }
  .vt-geri-sayim span { display: grid; justify-items: center; min-width: 48px; padding: 6px 6px 4px; background: var(--vt-sayim-zemin, var(--vt-koyu, var(--vt-gri-950))); color: var(--vt-sayim-metin, var(--vt-koyu-metin, #fff)); border-radius: var(--vt-r-1); }
  .vt-geri-sayim b { font-family: var(--vt-font-kod); font-size: var(--vt-fs-lg); line-height: 1; font-variant-numeric: tabular-nums; }
  .vt-geri-sayim small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; margin-top: 3px; }

  /* ---------- Sekmeler ---------- */
  .vt-sekmeler { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--vt-cizgi); margin-bottom: var(--vt-s-5); }
  .vt-sekmeler::-webkit-scrollbar { display: none; }
  .vt-sekme { padding: 10px var(--vt-s-4); font-weight: 600; font-size: var(--vt-fs-md); color: var(--vt-metin-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
  .vt-sekme:hover { color: var(--vt-metin); }
  .vt-sekme[aria-selected="true"] { color: var(--vt-metin); border-bottom-color: var(--vt-ana); }

  /* ---------- Sayfalama ---------- */
  .vt-sayfalama { margin-top: var(--vt-s-8); }
  .vt-sayfalama ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; list-style: none; padding: 0; }
  .vt-sf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--vt-cizgi-2); border-radius: var(--vt-r-2); background: var(--vt-yuzey); font-weight: 600; font-size: var(--vt-fs-md); font-variant-numeric: tabular-nums; color: var(--vt-metin); }
  a.vt-sf:hover { border-color: var(--vt-gri-500); background: var(--vt-yuzey-2); color: var(--vt-metin); }
  .vt-sf-aktif { background: var(--vt-sf-aktif, var(--vt-koyu, var(--vt-gri-950))); border-color: var(--vt-sf-aktif, var(--vt-koyu, var(--vt-gri-950))); color: var(--vt-sf-aktif-metin, var(--vt-koyu-metin, #fff)); }
  .vt-sf[aria-disabled="true"] { opacity: .45; }
  .vt-sf-bosluk { border: 0; background: none; min-width: 24px; padding: 0; }
  .vt-sf .vt-ikon { width: 16px; height: 16px; }
  @media (max-width: 599px) { .vt-sf-ok span { display: none; } }

  /* ---------- Bildirim (toast) ---------- */
  .vt-bildirimler { position: fixed; z-index: 300; right: 16px; top: calc(var(--vt-ust-ofset, var(--vt-ust-h)) + 16px); display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
  .vt-bildirim { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 12px 14px; background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi); border-left: 4px solid var(--vt-basari); border-radius: var(--vt-r-2); box-shadow: var(--vt-golge-3); font-size: var(--vt-fs-md); pointer-events: auto; animation: vt-bildirim-gir .2s var(--vt-egri); }
  .vt-bildirim--hata { border-left-color: var(--vt-hata); } .vt-bildirim--bilgi { border-left-color: var(--vt-bilgi); }
  .vt-bildirim > .vt-ikon { width: 22px; height: 22px; color: var(--vt-basari); }
  .vt-bildirim--hata > .vt-ikon { color: var(--vt-hata); } .vt-bildirim--bilgi > .vt-ikon { color: var(--vt-bilgi); }
  .vt-bildirim a { color: var(--vt-ana-metin); font-weight: 600; }
  .vt-bildirim button { color: var(--vt-metin-3); } .vt-bildirim button .vt-ikon { width: 16px; height: 16px; }
  @keyframes vt-bildirim-gir { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (max-width: 599px) { .vt-bildirimler { top: auto; bottom: 16px; right: 16px; } }

  /* ---------- Ek ızgara / kaydırıcı genişlikleri ---------- */
  @media (min-width: 900px) { .vt-izgara--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 1200px) { .vt-izgara--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  .vt-kaydirici--8 .vt-kaydirici-liste { grid-auto-columns: 30%; }
  @media (min-width: 600px) { .vt-kaydirici--8 .vt-kaydirici-liste { grid-auto-columns: calc((100% - 4 * var(--vt-s-4)) / 5); } }
  @media (min-width: 900px) { .vt-kaydirici--8 .vt-kaydirici-liste { grid-auto-columns: calc((100% - 5 * var(--vt-s-4)) / 6); } }
  @media (min-width: 1200px) { .vt-kaydirici--8 .vt-kaydirici-liste { grid-auto-columns: calc((100% - 7 * var(--vt-s-4)) / 8); } }

  /* ---------- Kart rozet tonları + kart içi geri sayım ---------- */
  .vt-kart-rozet--basari { background: var(--vt-basari); color: #fff; } .vt-kart-rozet--bilgi { background: var(--vt-bilgi); color: #fff; }
  .vt-kart-rozet--uyari { background: var(--vt-uyari); color: #fff; } .vt-kart-rozet--hata { background: var(--vt-hata); color: #fff; }
  .vt-kart-rozet--marka { background: var(--vt-buton); color: var(--vt-buton-metin); }
  .vt-geri-sayim--kucuk { gap: 4px; }
  .vt-geri-sayim--kucuk span { min-width: 36px; padding: 4px 4px 3px; }
  .vt-geri-sayim--kucuk b { font-size: var(--vt-fs-md); }
  .vt-geri-sayim--kucuk small { font-size: 9px; margin-top: 2px; }
  .vt-geri-sayim.vt-bitti { opacity: .5; }
  .vt-bos-not { display: flex; align-items: center; gap: 8px; padding: var(--vt-s-6); color: var(--vt-metin-3); background: var(--vt-yuzey-2); border: 1px dashed var(--vt-cizgi-2); border-radius: var(--vt-r-2); }
}

@layer vt.uyum {
  /* fiyat_render_html: Phosphor ikonları yeni temada yüklenmez (boş kutu kalmasın), indirim kırmızısı */
  .vt-fiyat i[class*="ph"] { display: none; }
  .vt-fiyat .text-gray-400 { color: var(--vt-metin-3); }
  .vt-fiyat .text-danger { color: var(--vt-hata); }
  /* Ürün kartı fiyatı: bölgesel renkler (Tema ve Görünüm › Ürün kartları) — boşsa yukarıdaki genel renkler */
  .vt-kart-fiyat .text-main-600 { color: var(--vt-kart-fiyat, var(--vt-metin)); }
  .vt-kart-fiyat .text-decoration-line-through, .vt-kart-fiyat .text-gray-400, .vt-kart-fiyat .text-gray-500 { color: var(--vt-kart-eski-fiyat, var(--vt-metin-3)); }
  .vt-kart-fiyat .text-danger { color: var(--vt-kart-indirim, var(--vt-hata)); }
}

/* ======================================== ANA SAYFA ======================================== */
@layer vt.sayfa {
  /* ---------- Slayt (hero) ---------- */
  .vt-hero-bolum { padding-top: var(--vt-s-5); }
  .vt-hero { position: relative; overflow: hidden; border-radius: var(--vt-r-3); background: var(--vt-yuzey-2); border: 1px solid var(--vt-cizgi); }
  .vt-hero-ray { display: grid; }
  .vt-slayt { grid-area: 1 / 1; position: relative; display: flex; min-height: clamp(300px, 38vw, 500px); opacity: 0; visibility: hidden; transition: opacity .6s var(--vt-egri), visibility 0s linear .6s; }
  .vt-slayt.vt-aktif { opacity: 1; visibility: visible; transition: opacity .6s var(--vt-egri); }
  .vt-slayt-zemin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .vt-slayt-ic { position: relative; z-index: 1; flex: 1; display: grid; align-items: center; gap: var(--vt-s-6); padding: var(--vt-s-10) clamp(20px, 5vw, 72px) var(--vt-s-16); }
  @media (min-width: 900px) { .vt-slayt-ic { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); padding-bottom: var(--vt-s-12); } }
  .vt-slayt-ust { margin-bottom: var(--vt-s-3); font-size: var(--vt-fs-md); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vt-ana-metin); }
  .vt-slayt-baslik { max-width: 20ch; font-size: clamp(1.6rem, 1rem + 3.2vw, var(--sl-bas, 3.25rem)); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
  .vt-slayt-vurgu { color: var(--vt-ana-metin); }
  .vt-slayt-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vt-s-4) var(--vt-s-6); margin-top: var(--vt-s-6); }
  .vt-slayt-btn:hover { filter: brightness(.94); }
  .vt-slayt-ozellik { display: flex; flex-direction: column; line-height: 1.2; }
  .vt-slayt-ozellik small { font-size: var(--vt-fs-sm); font-style: italic; color: var(--vt-metin-2); }
  .vt-slayt-ozellik b { font-family: var(--vt-font-baslik); font-size: var(--vt-fs-xl); color: var(--vt-hata); }
  .vt-slayt-gorsel { display: grid; place-items: center; }
  .vt-slayt-gorsel img { width: auto; max-height: 380px; object-fit: contain; }
  @media (max-width: 899px) { .vt-slayt-gorsel img { max-height: 200px; } }
  .vt-slayt-katman { position: absolute; transform: translate(-50%, -50%); pointer-events: none; object-fit: contain; }
  .vt-hero-kontrol { position: absolute; z-index: 3; right: var(--vt-s-4); bottom: var(--vt-s-4); display: flex; align-items: center; gap: 2px; padding: 3px; background: rgb(255 255 255 / .92); border: 1px solid var(--vt-cizgi); border-radius: 999px; box-shadow: var(--vt-golge-1); }
  .vt-hero-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--vt-gri-950); }
  .vt-hero-btn:hover { background: var(--vt-yuzey-3); }
  .vt-hero-btn .vt-ikon { width: 18px; height: 18px; }
  .vt-hero-noktalar { display: flex; }
  .vt-hero-noktalar button { display: grid; place-items: center; width: 24px; height: 34px; }
  .vt-hero-noktalar button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--vt-gri-300); transition: width var(--vt-sure), background var(--vt-sure); }
  .vt-hero-noktalar button[aria-current="true"]::before { width: 20px; background: var(--vt-koyu, var(--vt-gri-950)); }
  .vt-hero-oynat .vt-oyna, .vt-hero[data-durdu] .vt-hero-oynat .vt-dur { display: none; }
  .vt-hero[data-durdu] .vt-hero-oynat .vt-oyna { display: block; }
  /* Telefon: arka plan görseli (çoğu zaman ürünlü tam banner) metnin altına girmesin → metin üstte, görsel altta şerit */
  @media (max-width: 599px) {
    .vt-slayt { flex-direction: column; min-height: 0; }
    .vt-slayt--zeminli .vt-slayt-zemin { position: relative; order: 2; height: 168px; object-position: 85% 50%; }
    .vt-slayt-ic { padding: var(--vt-s-6) var(--vt-s-5) var(--vt-s-5); }
    .vt-hero-kontrol { right: var(--vt-s-2); bottom: var(--vt-s-2); }
  }
  @media (min-width: 600px) and (max-width: 899px) { .vt-slayt--zeminli .vt-slayt-metin { max-width: 56%; } }

  /* ---------- Kategori kutucukları (ana kategoriler + feature) ---------- */
  .vt-katm { display: flex; align-items: center; gap: var(--vt-s-3); color: var(--vt-metin); }
  .vt-katm:hover { color: var(--vt-metin); }
  .vt-katm-gorsel { flex: none; display: grid; place-items: center; overflow: hidden; background: var(--vt-yuzey); color: var(--vt-ana-metin); transition: border-color var(--vt-sure), box-shadow var(--vt-sure); }
  .vt-katm-gorsel img { width: 100%; height: 100%; object-fit: contain; }
  .vt-katm-gorsel .vt-ikon { width: 40%; height: 40%; }
  .vt-katm-ad { display: flex; flex-direction: column; min-width: 0; font-weight: 600; font-size: var(--vt-fs-md); line-height: 1.3; }
  .vt-katm-ad small { font-weight: 400; font-size: var(--vt-fs-xs); color: var(--vt-metin-3); }
  .vt-katm--yuvarlak, .vt-katm--serit, .vt-katm--ozellik { flex-direction: column; gap: var(--vt-s-2); padding: var(--vt-s-1); text-align: center; }
  .vt-katm--yuvarlak .vt-katm-gorsel, .vt-katm--serit .vt-katm-gorsel, .vt-katm--ozellik .vt-katm-gorsel { width: 100%; aspect-ratio: 1; padding: 14%; border: 1px solid var(--vt-cizgi); }
  .vt-katm--yuvarlak .vt-katm-gorsel { border-radius: 50%; }
  .vt-katm--serit .vt-katm-gorsel, .vt-katm--ozellik .vt-katm-gorsel { border-radius: var(--vt-r-2); padding: 10%; background: var(--vt-yuzey-2); }
  .vt-katm--yuvarlak:hover .vt-katm-gorsel, .vt-katm--serit:hover .vt-katm-gorsel, .vt-katm--ozellik:hover .vt-katm-gorsel { border-color: var(--vt-ana); box-shadow: 0 0 0 3px var(--vt-ana-100); }
  .vt-katm--yuvarlak .vt-katm-ad, .vt-katm--serit .vt-katm-ad, .vt-katm--ozellik .vt-katm-ad { align-items: center; }
  .vt-katm-izgara { display: grid; gap: var(--vt-s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
  @media (min-width: 900px) { .vt-katm-izgara { gap: var(--vt-s-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
  .vt-katm--kart { position: relative; height: 100%; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; padding: var(--vt-s-3); background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-2); transition: border-color var(--vt-sure), box-shadow var(--vt-sure); }
  .vt-katm--kart .vt-katm-gorsel { width: 60px; height: 60px; padding: 6px; background: var(--vt-yuzey-2); border-radius: var(--vt-r-1); }
  .vt-katm--kart .vt-ok { width: 16px; height: 16px; color: var(--vt-metin-3); transition: transform var(--vt-sure), color var(--vt-sure); }
  .vt-katm--kart:hover { border-color: var(--vt-ana); box-shadow: var(--vt-golge-2); }
  .vt-katm--kart:hover .vt-ok { transform: translateX(3px); color: var(--vt-ana-metin); }
  @media (max-width: 599px) {   /* telefon: iki sütun, kompakt (17 kök kategori tek sütunda ~1300 px'ti) */
    .vt-katm-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vt-s-2); }
    .vt-katm--kart { grid-template-columns: 40px minmax(0, 1fr); gap: var(--vt-s-2); padding: var(--vt-s-2); }
    .vt-katm--kart .vt-katm-gorsel { width: 40px; height: 40px; padding: 4px; }
    .vt-katm--kart .vt-ok { display: none; }
    .vt-katm--kart .vt-katm-ad { font-size: var(--vt-fs-sm); }
  }
  .vt-katm-izgara--vitrin .vt-katm--kart, .vt-katm-izgara--mozaik .vt-katm--kart { grid-template-columns: minmax(0, 1fr); padding: 0; overflow: hidden; }
  .vt-katm-izgara--vitrin .vt-katm--kart .vt-katm-gorsel, .vt-katm-izgara--mozaik .vt-katm--kart .vt-katm-gorsel { width: 100%; height: auto; aspect-ratio: 4 / 3; padding: 12%; border-radius: 0; border-bottom: 1px solid var(--vt-cizgi); }
  .vt-katm-izgara--vitrin .vt-katm-ad, .vt-katm-izgara--mozaik .vt-katm-ad { padding: var(--vt-s-3); }
  .vt-katm-izgara--vitrin .vt-ok, .vt-katm-izgara--mozaik .vt-ok { display: none; }
  @media (min-width: 900px) { .vt-katm-izgara--mozaik > li:first-child { grid-column: span 2; grid-row: span 2; } .vt-katm-izgara--mozaik > li:first-child .vt-katm-gorsel { aspect-ratio: auto; flex: 1; } .vt-katm-izgara--mozaik > li:first-child .vt-katm--kart { display: flex; flex-direction: column; } }

  /* ---------- Kampanya kartları (flash · offer · promo yedeği · yan kart) ---------- */
  .vt-kampanyalar { display: grid; gap: var(--vt-s-4); }
  @media (min-width: 900px) { .vt-kampanyalar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1200px) { .vt-kampanyalar--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .vt-kampanya { position: relative; isolation: isolate; display: flex; height: 100%; min-height: 220px; overflow: hidden; background: var(--vt-kampanya-zemin, var(--vt-yuzey-2)); border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-3); color: var(--vt-kampanya-metin, var(--vt-metin)); }
  a.vt-kampanya:hover { color: var(--vt-kampanya-metin, var(--vt-metin)); border-color: var(--vt-gri-400); box-shadow: var(--vt-golge-2); }
  .vt-kampanya-zemin { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
  .vt-kampanya--metinli:has(.vt-kampanya-zemin)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(255 255 255 / .94) 0%, rgb(255 255 255 / .78) 48%, rgb(255 255 255 / 0) 78%); }
  .vt-kampanya--koyu { background: var(--vt-koyu, var(--vt-gri-950)); border-color: var(--vt-koyu, var(--vt-gri-900)); color: var(--vt-koyu-metin, #fff); }
  a.vt-kampanya--koyu:hover { color: var(--vt-koyu-metin, #fff); }
  .vt-kampanya--koyu.vt-kampanya--metinli:has(.vt-kampanya-zemin)::before { background: linear-gradient(90deg, rgb(3 7 18 / .9) 0%, rgb(3 7 18 / .7) 50%, rgb(3 7 18 / .1) 80%); }
  .vt-kampanya-ic { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vt-s-2); max-width: min(100%, 440px); padding: var(--vt-s-6); }
  .vt-kampanya-logo { width: auto; max-height: 40px; margin-bottom: var(--vt-s-1); }
  .vt-kampanya-baslik { font-family: var(--vt-font-baslik); font-stretch: var(--vt-baslik-esneme, 100%); font-size: var(--vt-fs-2xl); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; color: inherit; }
  .vt-kampanya-metin { font-size: var(--vt-fs-md); color: inherit; opacity: .85; }
  .vt-kampanya-metin--vurgu { opacity: 1; font-weight: 700; color: var(--vt-ana-metin); }
  .vt-kampanya--koyu .vt-kampanya-metin--vurgu { color: var(--vt-ana-acik); }
  .vt-kampanya-fiyat { font-family: var(--vt-font-baslik); font-size: var(--vt-fs-xl); font-weight: 800; line-height: 1.1; }
  .vt-kampanya-fiyat small { display: block; font-family: var(--vt-font-govde); font-size: var(--vt-fs-xs); font-weight: 500; opacity: .8; }
  .vt-kampanya-not { font-weight: 700; }
  .vt-kampanya-sayim { margin-block: var(--vt-s-1); }
  .vt-kampanya--koyu .vt-geri-sayim span { background: rgb(255 255 255 / .12); }
  .vt-kampanya-btn { margin-top: var(--vt-s-2); }
  .vt-kampanya--dikey { flex-direction: column; justify-content: flex-end; min-height: 360px; }
  .vt-kampanya--dikey.vt-kampanya--metinli:has(.vt-kampanya-zemin)::before { background: linear-gradient(0deg, rgb(3 7 18 / .92) 0%, rgb(3 7 18 / .55) 55%, rgb(3 7 18 / .1) 100%); }

  /* ---------- Günün fırsatları ---------- */
  .vt-firsat { display: grid; gap: var(--vt-s-4); }
  @media (min-width: 900px) { .vt-firsat--promolu { grid-template-columns: 280px minmax(0, 1fr); }
    .vt-firsat--promolu .vt-kaydirici-liste { grid-auto-columns: calc((100% - 2 * var(--vt-s-4)) / 3); } }
  @media (min-width: 1200px) { .vt-firsat--promolu .vt-kaydirici-liste { grid-auto-columns: calc((100% - 3 * var(--vt-s-4)) / 4); } }
  .vt-firsat-promo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--vt-s-3); padding: var(--vt-s-6); overflow: hidden; color: var(--vt-firsat-metin, var(--vt-koyu-metin, #fff)); border-radius: var(--vt-r-3); border-top: 4px solid var(--vt-ana);
    background: var(--vt-firsat-zemin, var(--vt-koyu, var(--vt-gri-950))); background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px); background-size: 22px 22px; }
  .vt-firsat-etiket { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--vt-r-1); background: var(--vt-buton); color: var(--vt-buton-metin); font-size: var(--vt-fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  .vt-firsat-etiket .vt-ikon { width: 14px; height: 14px; }
  .vt-firsat-baslik { font-family: var(--vt-font-baslik); font-stretch: var(--vt-baslik-esneme, 100%); font-size: var(--vt-fs-2xl); font-weight: 800; line-height: 1.1; color: var(--vt-firsat-metin, var(--vt-koyu-metin, #fff)); }
  .vt-firsat-alt { color: var(--vt-firsat-metin-2, var(--vt-gri-300)); font-size: var(--vt-fs-md); }
  .vt-firsat-sayim span { background: rgb(255 255 255 / .12); }
  .vt-firsat-btn { margin-top: auto; }

  /* ---------- Kupon şeridi ---------- */
  .vt-kupon { display: grid; gap: var(--vt-s-3) var(--vt-s-5); align-items: center; padding: var(--vt-s-4) var(--vt-s-5); background: var(--vt-kupon-zemin, var(--vt-ana-50)); border: 1px dashed var(--vt-kupon-kenar, var(--vt-ana-300)); border-radius: var(--vt-r-3); }
  .vt-kupon + .vt-kupon { margin-top: var(--vt-s-3); }
  @media (min-width: 900px) { .vt-kupon { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); } }
  .vt-kupon-ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi); color: var(--vt-ana-metin); }
  .vt-kupon-ikon .vt-ikon { width: 22px; height: 22px; }
  .vt-kupon-sol { font-size: var(--vt-fs-lg); font-weight: 600; }
  .vt-kupon-sol a { color: var(--vt-ana-metin); text-decoration: underline; text-underline-offset: 3px; }
  .vt-kupon-kod { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 5px 5px 14px; background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi-2); border-radius: var(--vt-r-2); }
  .vt-kupon-kod code { font-family: var(--vt-font-kod); font-size: var(--vt-fs-lg); font-weight: 600; letter-spacing: .08em; }
  .vt-kupon-sag { font-size: var(--vt-fs-md); color: var(--vt-metin-2); }

  /* ---------- Kısa listeler + haftanın fırsatı ---------- */
  .vt-kisa { display: grid; gap: var(--vt-s-8) var(--vt-s-5); }
  @media (min-width: 600px) { .vt-kisa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1200px) { .vt-kisa { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vt-kisa--firsatli { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(260px, .95fr); } }
  .vt-kisa-baslik { display: flex; align-items: center; gap: 8px; padding-bottom: var(--vt-s-2); margin-bottom: var(--vt-s-1); font-size: var(--vt-fs-lg); border-bottom: 2px solid var(--vt-koyu, var(--vt-gri-950)); }
  .vt-kisa-baslik .vt-ikon { width: 20px; height: 20px; color: var(--vt-ana-metin); }
  .vt-kisa-liste .vt-kart-fiyat { font-size: var(--vt-fs-md); }
  .vt-kisa-daha { margin-top: var(--vt-s-2); }
  .vt-haftanin { position: relative; display: flex; flex-direction: column; }
  .vt-haftanin .vt-kart { flex: 1; margin-top: var(--vt-s-3); border: 2px solid var(--vt-koyu, var(--vt-gri-950)); }
  .vt-haftanin-yuzde { position: absolute; z-index: 2; top: calc(var(--vt-s-8) + 14px); right: 12px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--vt-hata); color: #fff; font-family: var(--vt-font-baslik); font-size: var(--vt-fs-xl); font-weight: 800; line-height: 1; text-align: center; }
  .vt-haftanin-yuzde small { display: block; font-family: var(--vt-font-govde); font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

  /* ---------- Markalar ---------- */
  .vt-marka-logo { display: grid; place-items: center; height: 96px; padding: var(--vt-s-3) var(--vt-s-4); background: #fff; border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-2); transition: border-color var(--vt-sure), box-shadow var(--vt-sure); }
  .vt-marka-logo img { width: auto; max-width: 100%; max-height: 56px; object-fit: contain; filter: grayscale(1); opacity: .78; transition: filter var(--vt-sure), opacity var(--vt-sure); }
  .vt-marka-logo:hover { border-color: var(--vt-gri-400); box-shadow: var(--vt-golge-1); }
  .vt-marka-logo:hover img, .vt-marka-logo:focus-visible img { filter: none; opacity: 1; }
  @media (max-width: 599px) { .vt-kaydirici--6 .vt-kaydirici-liste { grid-auto-columns: 42%; } }

  /* ---------- En çok satanlar ---------- */
  .vt-cok-satan { display: grid; gap: var(--vt-s-4); }
  @media (min-width: 1200px) { .vt-cok-satan--yanli { grid-template-columns: 300px minmax(0, 1fr); } }

  .vt-as-bos { max-width: 560px; margin-inline: auto; text-align: center; }
  .vt-as-bos .vt-kutu-baslik { justify-content: center; }
}

/* ======================================== ÜRÜN LİSTESİ ======================================== */
@layer vt.bilesen {
  .vt-kart-notlar { display: grid; gap: 3px; margin-top: 2px; font-size: var(--vt-fs-xs); color: var(--vt-kart-ikincil, var(--vt-metin-2)); }
  .vt-kart-notlar li { display: flex; align-items: flex-start; gap: 5px; line-height: 1.35; }
  .vt-kart-notlar .vt-ikon { width: 14px; height: 14px; margin-top: 1px; color: var(--vt-ana-metin); }
  .vt-sayi-rozet { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--vt-buton); color: var(--vt-buton-metin); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  .vt-anahtar { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: var(--vt-fs-md); font-weight: 600; cursor: pointer; }
  .vt-anahtar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .vt-anahtar-iz { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: var(--vt-gri-300); transition: background var(--vt-sure); }
  .vt-anahtar-iz::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--vt-golge-1); transition: transform var(--vt-sure); }
  .vt-anahtar input:checked + .vt-anahtar-iz { background: var(--vt-buton); }
  .vt-anahtar input:checked + .vt-anahtar-iz::after { transform: translateX(16px); }
  .vt-anahtar input:focus-visible + .vt-anahtar-iz { outline: 2px solid var(--vt-odak); outline-offset: 2px; }
}

@layer vt.sayfa {
  .vt-liste-bas { padding: var(--vt-s-4) 0 var(--vt-s-6); background: var(--vt-bant-zemin, var(--vt-yuzey-2)); border-bottom: 1px solid var(--vt-cizgi); }
  .vt-liste-bas .vt-kirinti { margin-bottom: var(--vt-s-3); }
  .vt-liste-bas-ic { display: flex; align-items: center; gap: var(--vt-s-4); }
  .vt-liste-bas h1 { font-size: var(--vt-fs-2xl); }
  .vt-liste-ozet { margin-top: 4px; font-size: var(--vt-fs-md); color: var(--vt-metin-2); }
  .vt-liste-marka { display: grid; place-items: center; flex: none; width: 120px; height: 64px; padding: 8px; background: #fff; border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-2); }
  .vt-liste-marka img { width: auto; max-height: 46px; object-fit: contain; }

  .vt-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vt-s-6); align-items: start; padding-top: var(--vt-s-6); }
  .vt-liste-ana { min-width: 0; }   /* alt kategori şeridi (nowrap) sütunu genişletmesin — telefonda yatay taşma */
  @media (min-width: 900px) { .vt-liste { grid-template-columns: 250px minmax(0, 1fr); } }
  @media (min-width: 1200px) { .vt-liste { grid-template-columns: 272px minmax(0, 1fr); gap: var(--vt-s-8); } }

  /* ---------- Filtre paneli ---------- */
  .vt-liste-yan { position: sticky; top: calc(var(--vt-ust-ofset, var(--vt-ust-h)) + 16px); max-height: calc(100vh - var(--vt-ust-ofset, var(--vt-ust-h)) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
  .vt-filtre-ust { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--vt-s-3); border-bottom: 2px solid var(--vt-koyu, var(--vt-gri-950)); }
  .vt-filtre-baslik { display: flex; align-items: center; gap: 8px; font-family: var(--vt-font-baslik); font-size: var(--vt-fs-lg); font-weight: 700; }
  .vt-filtre-baslik .vt-ikon { width: 20px; height: 20px; }
  .vt-filtre-kapat { display: none; }
  .vt-filtre-grup { border-bottom: 1px solid var(--vt-cizgi); }
  .vt-filtre-grup > summary { display: flex; align-items: center; gap: 6px; padding: 12px 2px; font-size: var(--vt-fs-md); font-weight: 600; list-style: none; cursor: pointer; }
  .vt-filtre-grup > summary::-webkit-details-marker { display: none; }
  .vt-filtre-grup > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .6; transform: rotate(45deg) translateY(-2px); transition: transform var(--vt-sure); }
  .vt-filtre-grup[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .vt-filtre-grup > summary small { font-weight: 400; color: var(--vt-metin-3); }
  .vt-filtre-grup > :not(summary) { margin-bottom: var(--vt-s-3); }
  .vt-filtre-bolum { min-width: 0; margin: 0 0 var(--vt-s-2); padding: 0; border: 0; }
  .vt-filtre-bolum legend { margin-bottom: 6px; padding: 0; font-size: var(--vt-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vt-metin-3); }
  .vt-secenek-kutu { display: grid; gap: 1px; }
  .vt-secenek-kutu[data-vt-uzun] { max-height: 264px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
  .vt-secenek-kutu .vt-secenek { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 4px; border-radius: var(--vt-r-1); font-size: var(--vt-fs-md); cursor: pointer; }
  .vt-secenek-kutu .vt-secenek:hover { background: var(--vt-yuzey-2); }
  .vt-secenek-kutu input { width: 16px; height: 16px; margin: 0; accent-color: var(--vt-buton); }
  .vt-secenek small { font-size: var(--vt-fs-xs); color: var(--vt-metin-3); }
  .vt-secenek-cip { display: flex; flex-wrap: wrap; gap: 6px; }
  .vt-secenek-cip .vt-secenek { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 11px; background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi-2); border-radius: 99px; font-size: var(--vt-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color var(--vt-sure), background var(--vt-sure); }
  .vt-secenek-cip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
  .vt-secenek-cip .vt-secenek:hover { border-color: var(--vt-gri-500); }
  .vt-secenek-cip .vt-secenek:has(input:checked) { background: var(--vt-sf-aktif, var(--vt-koyu, var(--vt-gri-950))); border-color: var(--vt-sf-aktif, var(--vt-koyu, var(--vt-gri-950))); color: var(--vt-sf-aktif-metin, var(--vt-koyu-metin, #fff)); }
  .vt-secenek-cip .vt-secenek:has(input:checked) small { color: inherit; opacity: .7; }
  .vt-secenek-cip .vt-secenek:has(input:focus-visible) { outline: 2px solid var(--vt-odak); outline-offset: 2px; }
  .vt-secenek.vt-kapali { opacity: .42; cursor: not-allowed; }
  .vt-fiyat-aralik { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 6px; }
  .vt-fiyat-aralik label { display: grid; gap: 4px; font-size: var(--vt-fs-xs); color: var(--vt-metin-3); }
  .vt-fiyat-aralik input { width: 100%; min-height: 38px; padding: 0 10px; background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi-2); border-radius: var(--vt-r-2); color: var(--vt-metin); font-variant-numeric: tabular-nums; }
  .vt-fiyat-aralik input:focus { outline: none; border-color: var(--vt-odak); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-odak) 20%, transparent); }
  .vt-fiyat-aralik > span { padding-bottom: 10px; color: var(--vt-metin-3); }
  .vt-fiyat-aralik button { grid-column: 1 / -1; }
  .vt-filtre-stok { padding: 12px 2px; }
  .vt-filtre-alt { display: grid; gap: 8px; padding-top: var(--vt-s-4); }
  @media (min-width: 900px) { .vt-js .vt-filtre-alt > button[type="submit"] { display: none; } }
  .vt-kat-agac { max-height: 340px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
  .vt-kat-agac a { display: block; padding: 5px 8px; border-radius: var(--vt-r-1); font-size: var(--vt-fs-md); color: var(--vt-metin-2); }
  .vt-kat-agac a:hover { background: var(--vt-yuzey-2); color: var(--vt-metin); }
  .vt-kat-agac a.vt-yolda { font-weight: 600; color: var(--vt-metin); }
  .vt-kat-agac a[aria-current="page"] { background: var(--vt-ana-50); color: var(--vt-ana-metin); font-weight: 700; }
  .vt-kat-agac ul { margin: 2px 0 4px 10px; padding-left: 8px; border-left: 1px solid var(--vt-cizgi); list-style: none; }
  .vt-kat-agac ul a { font-size: var(--vt-fs-sm); }
  @media (max-width: 899px) {
    .vt-liste-yan { position: fixed; z-index: 220; inset: 0 auto 0 0; width: min(92vw, 380px); max-height: none; padding: var(--vt-s-4); background: var(--vt-yuzey); box-shadow: var(--vt-golge-3); transform: translateX(-102%); visibility: hidden; transition: transform .25s var(--vt-egri), visibility 0s linear .25s; }
    .vt-liste-yan.vt-acik { transform: none; visibility: visible; transition: transform .25s var(--vt-egri); }
    .vt-filtre-kapat { display: inline-grid; }
    .vt-filtre-alt { position: sticky; bottom: calc(-1 * var(--vt-s-4)); margin-bottom: calc(-1 * var(--vt-s-4)); padding-bottom: var(--vt-s-4); background: var(--vt-yuzey); }
    .vt-filtre-perde:not([hidden]) { position: fixed; inset: 0; z-index: 210; background: rgb(3 7 18 / .45); }
  }
  @media (min-width: 900px) { .vt-filtre-ac { display: none; } .vt-filtre-perde { display: none !important; } }

  /* ---------- Araç çubuğu ---------- */
  .vt-liste-arac { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vt-s-3); margin-bottom: var(--vt-s-4); padding-bottom: var(--vt-s-3); border-bottom: 1px solid var(--vt-cizgi); }
  .vt-liste-sayac { margin-right: auto; font-size: var(--vt-fs-md); color: var(--vt-metin-2); }
  .vt-liste-sayac b { color: var(--vt-metin); }
  .vt-sirala { position: relative; display: inline-flex; align-items: center; }
  .vt-sirala > .vt-ikon { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--vt-metin-3); pointer-events: none; }
  .vt-sirala select { min-height: 38px; padding: 0 30px 0 32px; background: var(--vt-yuzey) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 9px center / 14px; border: 1px solid var(--vt-cizgi-2); border-radius: var(--vt-r-2); color: var(--vt-metin); font-size: var(--vt-fs-md); font-weight: 600; appearance: none; cursor: pointer; }
  .vt-sirala select:focus-visible { outline: 2px solid var(--vt-odak); outline-offset: 2px; }
  .vt-gorunum { display: inline-flex; overflow: hidden; border: 1px solid var(--vt-cizgi-2); border-radius: var(--vt-r-2); }
  .vt-gorunum .vt-ikon-btn { width: 38px; height: 36px; border-radius: 0; }
  .vt-gorunum .vt-ikon-btn .vt-ikon { width: 18px; height: 18px; }
  .vt-gorunum [aria-pressed="true"] { background: var(--vt-sf-aktif, var(--vt-koyu, var(--vt-gri-950))); color: var(--vt-sf-aktif-metin, var(--vt-koyu-metin, #fff)); }
  .vt-gorunum [aria-pressed="true"]:hover { background: var(--vt-koyu-hover, var(--vt-gri-800)); }
  @media (max-width: 599px) { .vt-liste-sayac { order: 3; width: 100%; } .vt-filtre-ac { flex: 0 0 auto; } .vt-sirala { flex: 1; min-width: 0; } .vt-sirala select { width: 100%; } }

  /* ---------- Seçili filtre çipleri ---------- */
  .vt-cipler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--vt-s-4); }
  .vt-cip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 12px; background: var(--vt-ana-50); border: 1px solid var(--vt-ana-200); border-radius: 99px; color: var(--vt-ana-900); font-size: var(--vt-fs-sm); font-weight: 600; }
  .vt-cip:hover { background: var(--vt-ana-100); color: var(--vt-ana-900); }
  .vt-cip .vt-ikon { width: 14px; height: 14px; }
  .vt-cip-temizle { margin-left: 4px; font-size: var(--vt-fs-sm); font-weight: 600; color: var(--vt-hata); text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- Alt kategoriler ---------- */
  .vt-altkat ul { display: flex; gap: 8px; margin-bottom: var(--vt-s-4); padding-bottom: 6px; overflow-x: auto; scrollbar-width: thin; }
  .vt-altkat a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi); border-radius: 99px; font-size: var(--vt-fs-sm); font-weight: 600; white-space: nowrap; }
  .vt-altkat a:hover { border-color: var(--vt-ana); color: var(--vt-metin); }
  .vt-altkat-gorsel { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--vt-yuzey-2); color: var(--vt-ana-metin); }
  .vt-altkat-gorsel img { width: 100%; height: 100%; object-fit: contain; }
  .vt-altkat-gorsel .vt-ikon { width: 16px; height: 16px; }

  /* ---------- Izgara / satır ---------- */
  .vt-liste-izgara[data-gorunum="satir"] { grid-template-columns: minmax(0, 1fr); }
  @media (max-width: 599px) { .vt-liste-izgara[data-gorunum="satir"] .vt-kart--satir .vt-kart-gorsel { width: 104px; } }

  /* ---------- Boş sonuç ---------- */
  .vt-liste-bos { display: grid; justify-items: center; gap: var(--vt-s-3); padding: var(--vt-s-12) var(--vt-s-4); text-align: center; background: var(--vt-yuzey-2); border: 1px dashed var(--vt-cizgi-2); border-radius: var(--vt-r-3); }
  .vt-liste-bos-ikon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi); color: var(--vt-metin-3); }
  .vt-liste-bos-ikon .vt-ikon { width: 32px; height: 32px; }
  .vt-liste-bos h2 { font-size: var(--vt-fs-xl); }
  .vt-liste-bos p { max-width: 46ch; color: var(--vt-metin-2); }
  .vt-liste-bos .vt-arama--sayfa { width: min(100%, 560px); margin-top: var(--vt-s-2); text-align: left; }

  /* ---------- Gömülü kip (bayi paneli iframe'i) ---------- */
  body.vt-gomulu { min-height: 0; background: #fff; }
  .vt-liste--gomulu { padding-top: var(--vt-s-4); padding-bottom: var(--vt-s-6); }
  .vt-gomulu .vt-liste-yan { top: 12px; }
}

/* ======================================== İLETİŞİM ======================================== */
@layer vt.sayfa {
  .vt-iletisim-bas h1 { margin-top: var(--vt-s-3); }
  .vt-iletisim-bas .vt-giris { max-width: 60ch; margin-top: var(--vt-s-2); font-size: var(--vt-fs-lg); color: var(--vt-metin-2); }
  .vt-iletisim-hizli { display: grid; gap: var(--vt-s-3); margin-top: var(--vt-s-6); }
  @media (min-width: 900px) { .vt-iletisim-hizli { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .vt-iletisim-hizli a, .vt-iletisim-hizli li > div { display: flex; align-items: flex-start; gap: var(--vt-s-3); height: 100%; padding: var(--vt-s-4); background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-2); color: var(--vt-metin); transition: border-color var(--vt-sure), box-shadow var(--vt-sure); }
  .vt-iletisim-hizli a:hover { border-color: var(--vt-ana); box-shadow: var(--vt-golge-2); color: var(--vt-metin); }
  .vt-iletisim-ikon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--vt-r-2); background: var(--vt-ana-50); color: var(--vt-ana-metin); }
  .vt-iletisim-ikon .vt-ikon { width: 20px; height: 20px; }
  .vt-iletisim-hizli small { display: block; font-size: var(--vt-fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--vt-metin-3); }
  .vt-iletisim-hizli b { display: block; font-size: var(--vt-fs-md); font-weight: 600; overflow-wrap: anywhere; }

  .vt-iletisim { display: grid; gap: var(--vt-s-6); align-items: start; padding-top: var(--vt-s-8); }
  @media (min-width: 900px) { .vt-iletisim { grid-template-columns: minmax(0, 1fr) 320px; } .vt-iletisim-yan { position: sticky; top: calc(var(--vt-ust-ofset, var(--vt-ust-h)) + 16px); } }
  .vt-iletisim-baslik { display: flex; align-items: center; gap: 8px; margin-bottom: var(--vt-s-4); font-size: var(--vt-fs-xl); }
  .vt-iletisim-baslik .vt-ikon { width: 22px; height: 22px; color: var(--vt-ana-metin); }
  .vt-iletisim-form .vt-uyari { margin: 0 0 var(--vt-s-4); }
  .vt-iletisim-formu { position: relative; }
  .vt-form-izgara { display: grid; gap: var(--vt-s-4); }
  @media (min-width: 600px) { .vt-form-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vt-alan--tam { grid-column: 1 / -1; } }
  textarea.vt-girdi { min-height: 140px; padding: var(--vt-s-3); line-height: 1.5; resize: vertical; }
  .vt-zorunlu { color: var(--vt-hata); }
  .vt-bal-tuzagi { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .vt-iletisim-gonder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vt-s-4); margin-top: var(--vt-s-5); }
  .vt-form-not { max-width: 46ch; font-size: var(--vt-fs-sm); color: var(--vt-metin-3); }
  .vt-buton-grubu--dikey { flex-direction: column; align-items: stretch; }

  .vt-sube-liste { display: grid; gap: var(--vt-s-4); }
  .vt-sube { display: grid; overflow: hidden; background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-3); }
  @media (min-width: 900px) { .vt-sube--haritali { grid-template-columns: minmax(0, 1fr) minmax(300px, 42%); } }
  .vt-sube-bilgi { display: grid; align-content: start; gap: var(--vt-s-3); padding: var(--vt-s-6); }
  .vt-sube-ad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--vt-fs-lg); }
  .vt-sube-adres { display: flex; gap: 8px; font-size: var(--vt-fs-md); color: var(--vt-metin-2); }
  .vt-sube-adres .vt-ikon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--vt-ana-metin); }
  .vt-sube-iletisim, .vt-sirket-bilgi { display: grid; gap: var(--vt-s-3) var(--vt-s-5); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0; }
  .vt-sube-iletisim dt, .vt-sirket-bilgi dt { font-size: var(--vt-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vt-metin-3); }
  .vt-sube-iletisim dd, .vt-sirket-bilgi dd { margin: 3px 0 0; font-weight: 600; overflow-wrap: anywhere; }
  .vt-sube-iletisim a { display: inline-flex; align-items: center; gap: 6px; color: var(--vt-metin); }
  .vt-sube-iletisim a:hover { color: var(--vt-ana-metin); }
  .vt-sube-iletisim .vt-ikon { width: 16px; height: 16px; color: var(--vt-ana-metin); }
  .vt-sube-harita { position: relative; min-height: 260px; background: var(--vt-yuzey-2); border-top: 1px solid var(--vt-cizgi); }
  @media (min-width: 900px) { .vt-sube-harita { border-top: 0; border-left: 1px solid var(--vt-cizgi); } }
  .vt-sube-harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .vt-sirket-bilgi { gap: var(--vt-s-4) var(--vt-s-6); padding: var(--vt-s-6); background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-3); }
}

/* ======================================== ÜRÜN DETAYI · SEPET · ÖDEME (eski çekirdek kabuğu) ======================================== */
@layer vt.sayfa {
  .vt-pd-bas { padding-top: var(--vt-s-3); }
  .vt-pd-benzer { padding-top: var(--vt-s-6); }
  .vt-akis-bas { padding: var(--vt-s-4) 0 var(--vt-s-5); background: var(--vt-bant-zemin, var(--vt-yuzey-2)); border-bottom: 1px solid var(--vt-cizgi); }
  .vt-akis-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vt-s-4); margin-top: var(--vt-s-3); }
  .vt-akis-ust h1 { font-size: var(--vt-fs-2xl); }
  .vt-adimlar { display: flex; align-items: center; gap: var(--vt-s-2); }
  .vt-adim { display: flex; align-items: center; gap: 8px; font-size: var(--vt-fs-sm); font-weight: 600; color: var(--vt-metin-3); }
  .vt-adim + .vt-adim::before { content: ""; width: clamp(16px, 4vw, 40px); height: 2px; background: var(--vt-cizgi-2); }
  .vt-adim-no { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--vt-cizgi-2); background: var(--vt-yuzey); font-variant-numeric: tabular-nums; }
  .vt-adim-no .vt-ikon { width: 16px; height: 16px; }
  .vt-adim--aktif { color: var(--vt-metin); }
  .vt-adim--aktif .vt-adim-no { border-color: var(--vt-buton); background: var(--vt-buton); color: var(--vt-buton-metin); }
  .vt-adim--tamam { color: var(--vt-metin-2); }
  .vt-adim--tamam .vt-adim-no { border-color: var(--vt-basari); background: var(--vt-basari-zemin); color: var(--vt-basari); }
  .vt-adim--tamam + .vt-adim::before { background: var(--vt-basari); }
  @media (max-width: 599px) { .vt-adim:not(.vt-adim--aktif) .vt-adim-ad { display: none; } }
}