/*
 * ENDÜSTRİYEL TEMA — kabuk ve bileşenler (vt-)                                                         2026-10-11
 * Bootstrap / MarketPro bağımlılığı YOK. Renk/yazı tipi/köşe/yoğunluk jetonları <style id="vt-token">'den gelir
 * (yönetim: Frontend Ayarları › Tema ve Görünüm). Bu dosyada sabit marka rengi yoktur.
 * Katman sırası: özel kod ve sayfaya özel CSS katmansızdır → her zaman temayı ezebilir.
 * Kırılımlar: 600 · 900 · 1200 px (mobil öncelikli).
 */
@layer vt.sifirla, vt.temel, vt.duzen, vt.bilesen, vt.sayfa, vt.uyum, vt.yardimci;

@layer vt.sifirla {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--vt-ust-ofset, var(--vt-ust-h)) + 16px); }
  body { margin: 0; }
  h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol[class], ul[class] { list-style: none; padding: 0; }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  [hidden] { display: none !important; }
  table { border-collapse: collapse; }
  dialog { padding: 0; border: 0; color: inherit; }
}

@layer vt.temel {
  :root {
    --vt-s-1: calc(.25rem * var(--vt-birim, 1)); --vt-s-2: calc(.5rem * var(--vt-birim, 1));
    --vt-s-3: calc(.75rem * var(--vt-birim, 1)); --vt-s-4: calc(1rem * var(--vt-birim, 1));
    --vt-s-5: calc(1.25rem * var(--vt-birim, 1)); --vt-s-6: calc(1.5rem * var(--vt-birim, 1));
    --vt-s-8: calc(2rem * var(--vt-birim, 1)); --vt-s-10: calc(2.5rem * var(--vt-birim, 1));
    --vt-s-12: calc(3rem * var(--vt-birim, 1)); --vt-s-16: calc(4rem * var(--vt-birim, 1));
    --vt-kontrol-h: max(40px, calc(2.75rem * var(--vt-birim, 1)));
    --vt-fs-xs: .75rem; --vt-fs-sm: .8125rem; --vt-fs-md: .875rem; --vt-fs-base: .9375rem; --vt-fs-lg: 1.0625rem;
    --vt-fs-xl: clamp(1.125rem, 1rem + .45vw, 1.3rem); --vt-fs-2xl: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
    --vt-fs-3xl: clamp(1.7rem, 1.25rem + 1.9vw, 2.5rem);
    --vt-golge-1: 0 1px 2px rgb(15 23 42 / .06);
    --vt-golge-2: 0 6px 18px -6px rgb(15 23 42 / .16), 0 1px 3px rgb(15 23 42 / .06);
    --vt-golge-3: 0 24px 48px -16px rgb(15 23 42 / .28), 0 2px 8px rgb(15 23 42 / .08);
    --vt-sure: 160ms; --vt-egri: cubic-bezier(.2, .7, .2, 1);
    --vt-kap-max: 1400px; --vt-ust-h: 64px;
    /* 2026-10-24: yapışkan header'ın kapladığı yükseklik (çapa dolgusu, yapışkan yan sütun, bildirim ofseti). --vt-ust-h ana
       çubuğun min-height'ı olduğu için sıfırlanamaz → ayrı değişken. Sabit header kapalıyken <html data-vt-ust="akan"> → 0. */
    --vt-ust-ofset: var(--vt-ust-h);
  }
  @media (min-width: 900px) { :root { --vt-ust-h: 76px; } }
  /* Yalnız nitelik seçici (html/:root öneki YOK): panel kopyasında (#frontendHeaderWrap önekli) hiçbir öğeyle eşleşmez */
  [data-vt-ust="akan"] { --vt-ust-ofset: 0px; }

  body.vt-govde {
    font-family: var(--vt-font-govde); font-size: var(--vt-fs-base); line-height: 1.55;
    color: var(--vt-metin); background: var(--vt-sayfa-zemin, var(--vt-yuzey)); font-feature-settings: "cv05", "cv08";
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
    min-height: 100vh; display: flex; flex-direction: column;
  }
  .vt-ana { flex: 1 0 auto; outline: none; }
  h1, h2, h3, h4 { font-family: var(--vt-font-baslik); font-stretch: var(--vt-baslik-esneme, 100%); font-weight: 700; line-height: 1.2; letter-spacing: -.012em; color: var(--vt-baslik, var(--vt-metin)); }
  a:hover { color: var(--vt-ana-metin); }
  :focus-visible { outline: 2px solid var(--vt-odak); outline-offset: 2px; border-radius: 2px; }
  ::selection { background: var(--vt-ana-200); color: var(--vt-gri-950); }
  .vt-gizli { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .vt-atla { position: absolute; left: var(--vt-s-2); top: -100px; z-index: 1000; padding: var(--vt-s-3) var(--vt-s-4); background: var(--vt-gri-950); color: #fff; font-weight: 600; border-radius: var(--vt-r-2); }
  .vt-atla:focus { top: var(--vt-s-2); color: #fff; }
  .vt-ikon { width: 1.25em; height: 1.25em; flex: none; stroke-width: 1.75; }
  .vt-sayi { font-variant-numeric: tabular-nums lining-nums; }
  .vt-soluk { color: var(--vt-metin-3); }
  .vt-kod-metin { font-family: var(--vt-font-kod); font-size: .92em; font-variant-numeric: tabular-nums; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
}

@layer vt.duzen {
  .vt-kap { width: 100%; max-width: var(--vt-kap-max); margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); }
  .vt-marka-cizgi { height: 3px; background: var(--vt-marka-cizgi, var(--vt-ana)); }

  /* ---------- Üst şerit ---------- */
  .vt-serit { background: var(--vt-serit); color: var(--vt-serit-metin); font-size: var(--vt-fs-sm); }
  .vt-serit-ic { display: flex; align-items: center; gap: var(--vt-s-4); min-height: 34px; }
  .vt-serit-liste { display: flex; align-items: center; gap: var(--vt-s-4); }
  .vt-serit-liste a, .vt-serit-liste span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .vt-serit-liste a:hover { color: var(--vt-serit-vurgu, #fff); }
  .vt-serit-liste .vt-ikon { width: 15px; height: 15px; opacity: .8; }
  .vt-serit-duyuru { flex: 1; text-align: center; color: var(--vt-serit-vurgu, #fff); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vt-serit-hesap { margin-left: auto; }
  /* 2026-10-24: özel şerit bağlantıları — dar masaüstünde sayfayı yatay kaydırmasın, alt satıra sarsın (<900 px'te li'ler gizli) */
  .vt-serit-bag { flex-wrap: wrap; row-gap: 0; column-gap: var(--vt-s-4); min-width: 0; }
  .vt-serit-bag + .vt-serit-duyuru { min-width: 10rem; }   /* bağlantılar varken duyuru 0 px'e inmesin (bağlantı listesi sarar) */
  .vt-serit-duyuru + .vt-serit-hesap { margin-left: 0; }
  .vt-serit-bayi { padding: 3px 10px; border: 1px solid rgb(255 255 255 / .22); border-radius: var(--vt-r-1); color: var(--vt-serit-vurgu, #fff); }
  .vt-serit-bayi:hover { background: rgb(255 255 255 / .08); }
  .vt-serit-rozet { padding: 2px 8px; border-radius: var(--vt-r-1); background: var(--vt-ana-acik); color: var(--vt-gri-950); font-weight: 600; }
  @media (max-width: 599px) { .vt-serit-liste:first-child, .vt-serit-duyuru { display: none; } .vt-serit-hesap { margin-inline: auto; } }

  /* ---------- Ana çubuk (yapışkan) ---------- */
  .vt-ust { position: sticky; top: 0; z-index: 60; background: var(--vt-ust-zemin, var(--vt-yuzey)); border-bottom: 1px solid var(--vt-ust-cizgi, var(--vt-cizgi)); }
  .vt-ust.vt-yapisti { box-shadow: var(--vt-golge-2); }
  .vt-ust-akan .vt-ust { position: relative; }   /* 2026-10-24: sabit header kapalı (yalnız Endüstriyel iskeleti basar) */
  .vt-ust-akan .vt-ust.vt-yapisti { box-shadow: none; }
  .vt-ust-ic { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "menu logo . eylem" "arama arama arama arama"; align-items: center; column-gap: var(--vt-s-2); row-gap: var(--vt-s-2); padding-block: var(--vt-s-2); }
  .vt-menu-btn { grid-area: menu; }
  .vt-logo { grid-area: logo; display: inline-flex; align-items: center; min-height: 40px; max-width: 180px; }
  .vt-logo img { max-height: 36px; width: auto; object-fit: contain; }
  .vt-logo-metin { font-family: var(--vt-font-baslik); font-weight: 800; font-size: var(--vt-fs-xl); letter-spacing: -.02em; color: var(--vt-ust-metin, var(--vt-metin)); }
  .vt-katalog-btn { display: none; }
  .vt-arama { grid-area: arama; }
  .vt-eylemler { grid-area: eylem; display: flex; align-items: center; gap: 2px; justify-self: end; }
  @media (min-width: 900px) {
    .vt-ust-ic { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "logo katalog arama eylem"; column-gap: var(--vt-s-4); min-height: var(--vt-ust-h); padding-block: 0; }
    .vt-menu-btn { display: none; }
    .vt-logo { max-width: 230px; }
    .vt-logo img { max-height: 44px; }
    .vt-katalog-btn { grid-area: katalog; display: inline-flex; }
  }
  /* 2026-10-24: arama kapalıyken mobilde ikinci (arama) satırı açılmaz */
  @media (max-width: 899.98px) { .vt-ust-ic--aramasiz { grid-template-areas: "menu logo . eylem"; } }
  /* 2026-10-24 (inceleme): sağ öğeler çoğalınca arama kutusu ezilmesin — aramaya taban genişlik, eylem sütunu daralabilir
     (özel öğeler kısalır; bkz. vt.bilesen). Varsayılan header (hesap + sepet) ölçüleri değişmez. Studio header'ı kendi
     ızgarasını @layer ts ile kurar; eylem sütununun daralması yalnız Endüstriyel'de (:not(.ts-ust-ic)). */
  @media (min-width: 900px) {
    .vt-ust-ic { grid-template-columns: auto auto minmax(min(240px, 24vw), 1fr) minmax(0, auto); }
    .vt-ust-ic--aramasiz { grid-template-columns: auto auto minmax(0, 1fr) minmax(0, auto); }
    .vt-ust-ic:not(.ts-ust-ic) > .vt-eylemler { min-width: 0; justify-self: stretch; justify-content: safe flex-end; }   /* kutu sütunu aşmaz → aramaya binmez */
    /* özel öğe varken çok dar masaüstünde sığmayan son öğeler kesilir (yatay kaydırma / taşma yok); odak çerçevesi için pay */
    .vt-ust-ic:not(.ts-ust-ic) > .vt-eylemler:has(> .vt-eylem--ozel) { overflow: clip; overflow-clip-margin: 6px; }
  }

  /* ---------- Gezinme (DB menüsü) ---------- */
  .vt-gez { display: none; background: var(--vt-gez-zemin, var(--vt-yuzey)); border-bottom: 1px solid var(--vt-cizgi); position: relative; z-index: 50; }
  @media (min-width: 900px) { .vt-gez { display: block; } }
  .vt-gez > .vt-kap { display: flex; align-items: center; gap: var(--vt-s-4); min-height: 46px; }
  .vt-gez-liste { display: flex; align-items: stretch; gap: 2px; flex: 1; min-width: 0; }
  .vt-gez-kalem { position: relative; display: flex; }
  .vt-gez-bag { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--vt-s-3); min-height: 46px; font-size: var(--vt-fs-md); font-weight: 600; color: var(--vt-gez-metin, var(--vt-metin-2)); border-bottom: 2px solid transparent; transition: color var(--vt-sure), border-color var(--vt-sure); white-space: nowrap; }
  .vt-gez-bag:hover, .vt-gez-bag[aria-expanded="true"] { color: var(--vt-gez-aktif, var(--vt-metin)); border-bottom-color: var(--vt-gez-vurgu, var(--vt-ana)); }
  .vt-gez-bag .vt-ok { width: 14px; height: 14px; transition: transform var(--vt-sure); }
  .vt-gez-bag[aria-expanded="true"] .vt-ok { transform: rotate(180deg); }
  .vt-menu-etiket { display: inline-block; padding: 1px 6px; border-radius: var(--vt-r-1); font-size: 10.5px; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: .04em; }
  .vt-gez-panel { position: absolute; top: 100%; left: 0; min-width: 260px; padding: var(--vt-s-3); background: var(--vt-mm-zemin, var(--vt-mega-zemin, var(--vt-yuzey))); color: var(--vt-mega-baslik, var(--vt-metin)); border: 1px solid var(--vt-cizgi); border-radius: 0 0 var(--vt-r-2) var(--vt-r-2); box-shadow: var(--vt-golge-3); }
  .vt-gez-panel--genis { min-width: min(760px, 80vw); }
  .vt-gez-panel--genis .vt-gez-panel-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--vt-s-2) var(--vt-s-4); }
  .vt-gez-panel-tum { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: var(--vt-s-2) var(--vt-s-3); margin-bottom: var(--vt-s-2); font-weight: 600; font-size: var(--vt-fs-md); color: var(--vt-mega-vurgu, var(--vt-ana-metin)); background: var(--vt-ana-50); border-radius: var(--vt-r-1); }
  .vt-gez-panel-tum .vt-ikon { width: 16px; height: 16px; }
  .vt-gez-panel-liste > li > a { display: flex; align-items: center; gap: 8px; padding: 7px var(--vt-s-3); border-radius: var(--vt-r-1); font-weight: 600; font-size: var(--vt-fs-md); }
  .vt-gez-panel-liste > li > a:hover { background: var(--vt-mega-yan, var(--vt-yuzey-2)); }
  .vt-gez-panel-liste ul { padding: 0 0 var(--vt-s-1) var(--vt-s-3); list-style: none; }
  .vt-gez-panel-liste ul a { display: block; padding: 4px var(--vt-s-3); font-size: var(--vt-fs-sm); color: var(--vt-mega-metin, var(--vt-metin-2)); border-left: 1px solid var(--vt-cizgi); }
  .vt-gez-panel-liste ul a:hover { color: var(--vt-mega-vurgu, var(--vt-ana-metin)); border-left-color: var(--vt-mega-vurgu, var(--vt-ana)); }
  .vt-gez-destek { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding-left: var(--vt-s-4); border-left: 1px solid var(--vt-cizgi); color: var(--vt-gez-aktif, var(--vt-metin)); }
  .vt-gez-destek .vt-ikon { width: 26px; height: 26px; color: var(--vt-ana-metin); }
  .vt-gez-destek span { display: flex; flex-direction: column; line-height: 1.2; }
  .vt-gez-destek small { font-size: var(--vt-fs-xs); color: var(--vt-gez-metin, var(--vt-metin-3)); }
  .vt-gez-destek b { font-family: var(--vt-font-kod); font-size: var(--vt-fs-md); font-variant-numeric: tabular-nums; }

  /* ---------- MENÜ TİPLERİ (2026-11-04, tema/_cekirdek/menu-ciz.php) — Endüstriyel + Theme Studio ortak ----------
     mega: satırın altında, İÇERİĞE GÖRE genişlik (vt-kabuk.js mmKonumla: sütun sayısı × --vt-mm-kol, kapsayıcıya sığmazsa
     tam genişlik + sarma; JS yoksa satır genişliğinde). Panel stili: --vt-mm-zemin / --vt-mm-bosluk / --vt-mm-hover. */
  .vt-gez-kalem--mega { position: static; }
  .vt-mm { --vt-mm-kol: 220px; --vt-mm-ara: 28px; --vt-mm-pad: 26px; --vt-mm-yan: 260px;
    left: 0; right: auto; width: 100%; min-width: 0; max-width: 100vw; max-height: min(78vh, 720px); overflow-y: auto; padding: 0; z-index: 60;
    display: grid; grid-template-columns: minmax(0, 1fr); background: var(--vt-mm-zemin, var(--vt-mega-zemin, var(--vt-yuzey)));
    border-top: 2px solid var(--vt-mega-vurgu, var(--vt-ana)); text-align: left; }
  .vt-mm--yanli { grid-template-columns: minmax(0, 1fr) var(--vt-mm-yan); }
  .vt-mm-ana { min-width: 0; padding: 20px var(--vt-mm-pad) 24px; }
  .vt-mm-bas, .vt-katman-bas { display: flex; align-items: center; justify-content: space-between; gap: var(--vt-s-4); margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--vt-cizgi); }
  .vt-mm-bas-ad, .vt-katman-bas h2 { margin: 0; font-family: var(--vt-font-baslik); font-size: var(--vt-fs-lg, 1.1rem); font-weight: 700; letter-spacing: -.01em; color: var(--vt-mega-baslik, var(--vt-metin)); }
  .vt-mm-bas-tum, .vt-mm-yan-tum { display: inline-flex; align-items: center; gap: 6px; font-size: var(--vt-fs-sm); font-weight: 600; white-space: nowrap; color: var(--vt-mega-vurgu, var(--vt-ana-metin)); }
  .vt-mm-bas-tum .vt-ikon, .vt-mm-yan-tum .vt-ikon { width: 15px; height: 15px; transition: transform var(--vt-sure); }
  .vt-mm-bas-tum:hover .vt-ikon, .vt-mm-yan-tum:hover .vt-ikon { transform: translateX(3px); }
  .vt-mm-sutunlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: calc(22px + var(--vt-mm-bosluk, 0px)) var(--vt-mm-ara); }
  html.vt-mmj .vt-mm .vt-mm-sutunlar { grid-template-columns: repeat(var(--vt-mm-sutun, 3), minmax(0, 1fr)); }
  .vt-mm-sutun { min-width: 0; }
  .vt-mm-baslik { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 10px; padding-bottom: 9px; border-bottom: 2px solid var(--vt-cizgi); font-weight: 700; font-size: var(--vt-fs-md); line-height: 1.3; color: var(--vt-mega-baslik, var(--vt-metin)); }
  .vt-mm-baslik:hover { color: var(--vt-mega-vurgu, var(--vt-ana-metin)); }
  .vt-mm-baslik--duz { color: var(--vt-mega-metin, var(--vt-metin-3)); cursor: default; }
  .vt-mm-baslik--duz:hover { color: var(--vt-mega-metin, var(--vt-metin-3)); }
  .vt-mm-gorsel { flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--vt-r-1); object-fit: contain; background: #fff; border: 1px solid var(--vt-cizgi); }
  .vt-mm-harf { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--vt-r-1); background: var(--vt-ana-50); color: var(--vt-mega-vurgu, var(--vt-ana-metin)); font-weight: 700; font-size: .95rem; }
  .vt-mm-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(2px + var(--vt-mm-bosluk, 0px) / 2); }
  .vt-mm-liste a { display: inline-flex; align-items: baseline; gap: 7px; padding: 3px 7px; margin-left: -7px; border-radius: var(--vt-r-1); font-size: var(--vt-fs-sm); line-height: 1.4; color: var(--vt-mega-metin, var(--vt-metin-2)); transition: color var(--vt-sure), background var(--vt-sure), transform var(--vt-sure); }
  .vt-mm-liste a::before { content: "\203A"; font-weight: 700; color: var(--vt-mega-vurgu, var(--vt-ana)); }
  .vt-mm-liste a:hover { color: var(--vt-mega-vurgu, var(--vt-ana-metin)); background: var(--vt-mm-hover, transparent); }
  .vt-mm-hef-altcizgi .vt-mm-liste a:hover, .vt-mm-hef-altcizgi .vt-gez-panel-liste a:hover { text-decoration: underline; }
  .vt-mm-hef-buyut .vt-mm-liste a:hover, .vt-mm-hef-buyut .vt-gez-panel-liste a:hover { transform: translateX(4px); }
  .vt-mm-hef-renk .vt-gez-panel-liste > li > a:hover, .vt-mm-hef-gradyan .vt-gez-panel-liste > li > a:hover { background: var(--vt-mm-hover, var(--vt-yuzey-2)); }
  .vt-mm-tumu { display: inline-block; margin-top: 8px; font-size: var(--vt-fs-xs); font-weight: 600; color: var(--vt-mega-vurgu, var(--vt-ana-metin)); }
  .vt-mm-tumu:hover { text-decoration: underline; }
  .vt-mm-kat-urun { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 4px; }
  .vt-mm-kat-urun a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 9px; align-items: center; padding: 4px 6px; margin: 0 -6px; border-radius: var(--vt-r-1); font-size: var(--vt-fs-sm); line-height: 1.3; color: var(--vt-mega-metin, var(--vt-metin-2)); }
  .vt-mm-kat-urun a:hover { background: var(--vt-yuzey-2); color: var(--vt-mega-vurgu, var(--vt-ana-metin)); }
  .vt-mm-kat-urun img, .vt-mm-vitrin img { object-fit: contain; background: #fff; border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-1); }
  .vt-mm-kat-urun img { width: 40px; height: 40px; }
  .vt-mm-kat-urun span, .vt-mm-vitrin span, .vt-mm-urunler--kart span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* sağ vitrin: öne çıkan ürünler (yalnız ürün varsa basılır) */
  .vt-mm-yan { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--vt-mega-yan, var(--vt-yuzey-2)); border-left: 1px solid var(--vt-cizgi); }
  .vt-mm-yan-baslik { font-size: var(--vt-fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--vt-mega-metin, var(--vt-metin-3)); }
  .vt-mm-vitrin { display: grid; gap: 8px; }
  .vt-mm-vitrin a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px; background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-2); font-size: var(--vt-fs-sm); font-weight: 500; line-height: 1.3; color: var(--vt-metin); transition: border-color var(--vt-sure), box-shadow var(--vt-sure); }
  .vt-mm-vitrin a:hover { border-color: var(--vt-mega-vurgu, var(--vt-ana)); box-shadow: var(--vt-golge-2, 0 6px 16px -8px rgb(15 23 42 / .25)); }
  .vt-mm-vitrin img { width: 52px; height: 52px; }
  /* kategori kaynağının ürünleri (ürün gösterimi: ad · ad + görsel · görsel) */
  .vt-mm-urunler--ad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 18px; }
  .vt-mm-urunler--ad a { display: block; padding: 6px 8px; border-radius: var(--vt-r-1); font-size: var(--vt-fs-sm); color: var(--vt-mega-metin, var(--vt-metin-2)); }
  .vt-mm-urunler--ad a:hover { background: var(--vt-mm-hover, var(--vt-yuzey-2)); color: var(--vt-mega-vurgu, var(--vt-ana-metin)); }
  .vt-mm-urunler--kart, .vt-mm-urunler--gorsel { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .vt-mm-urunler--gorsel { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .vt-mm-urunler--kart a { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--vt-r-2); font-size: var(--vt-fs-xs); line-height: 1.3; color: var(--vt-metin-2); }
  .vt-mm-urunler--kart a:hover { background: var(--vt-yuzey-2); color: var(--vt-metin); }
  .vt-mm-urunler--kart img, .vt-mm-urunler--gorsel img { width: 100%; height: 96px; object-fit: contain; background: #fff; border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-1); }
  .vt-gez-panel--urun { min-width: min(520px, 80vw); }
  .vt-gez-panel--urun .vt-mm-urunler--ad { grid-template-columns: 1fr; }
  /* tam ekran / modal katmanları (<dialog>) — içerik mega ile aynı desen */
  .vt-katman { padding: 0; border: 0; background: transparent; color: var(--vt-metin); max-width: none; max-height: none; overflow: visible; }
  .vt-katman::backdrop { background: rgb(2 6 23 / .55); }
  .vt-katman--modal[open] { margin: auto; }
  .vt-katman-kutu { position: relative; width: max-content; min-width: min(520px, 92vw); max-width: min(1100px, 94vw); max-height: 88vh; overflow-y: auto; padding: 22px 26px 26px;
    background: var(--vt-mm-zemin, var(--vt-mega-zemin, var(--vt-yuzey))); border-radius: var(--vt-r-3, 16px); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .5); }
  .vt-katman-kutu .vt-mm-sutunlar { grid-template-columns: repeat(var(--vt-mm-sutun, 3), minmax(170px, 220px)); justify-content: start; }
  @media (max-width: 899px) { .vt-katman-kutu { width: 92vw; } .vt-katman-kutu .vt-mm-sutunlar { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
  .vt-katman-bas .vt-mm-bas-tum { margin-left: auto; }
  .vt-katman-kapat { flex: none; }
  .vt-katman--tam[open] { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: grid; place-items: center; background: rgb(10 16 22 / .96); margin: 0; }
  .vt-katman--tam::backdrop { background: transparent; }
  .vt-katman--tam .vt-katman-kutu { background: rgb(255 255 255 / .04); box-shadow: none; color: #e2e8f0; max-height: 82vh; }
  .vt-katman--tam .vt-katman-bas { border-bottom-color: rgb(255 255 255 / .16); }
  .vt-katman--tam .vt-katman-bas h2, .vt-katman--tam .vt-mm-baslik { color: #f1f5f9; border-bottom-color: rgb(255 255 255 / .16); }
  .vt-katman--tam .vt-mm-liste a, .vt-katman--tam .vt-mm-urunler--ad a, .vt-katman--tam .vt-mm-urunler--kart a { color: #cbd5e1; }
  .vt-katman--tam .vt-mm-liste a:hover, .vt-katman--tam .vt-mm-urunler--ad a:hover { color: #fff; background: rgb(255 255 255 / .08); }
  .vt-katman--tam .vt-mm-tumu, .vt-katman--tam .vt-mm-bas-tum, .vt-katman--tam .vt-mm-liste a::before { color: #7dd3fc; }
  .vt-katman--tam .vt-katman-kapat { color: #cbd5e1; }
  @media (prefers-reduced-motion: reduce) { .vt-mm-liste a, .vt-mm-bas-tum .vt-ikon { transition: none; } }

  /* ---------- Footer ---------- */
  .vt-footer { margin-top: var(--vt-s-16); background: var(--vt-f-zemin); color: var(--vt-f-yazi); font-size: var(--vt-fs-md); border-top: 1px solid var(--vt-f-cizgi); }
  .vt-footer a { color: var(--vt-f-link); transition: color var(--vt-sure); }
  .vt-footer a:hover { color: var(--vt-f-link-hover); }
  .vt-bulten { border-bottom: 1px solid var(--vt-f-cizgi); background: var(--vt-f-yuzey); }
  .vt-bulten-ic { display: grid; gap: var(--vt-s-6); padding-block: var(--vt-s-10); align-items: center; }
  @media (min-width: 900px) { .vt-bulten-ic { grid-template-columns: 1fr minmax(320px, 1.1fr); } }
  .vt-bulten h2 { color: var(--vt-f-baslik); font-size: var(--vt-fs-2xl); margin: 6px 0 4px; }
  .vt-bulten p { color: var(--vt-f-yazi); }
  .vt-bulten .vt-ust-etiket { color: var(--vt-f-aksan); }
  .vt-bulten-satir { display: flex; gap: var(--vt-s-2); }
  .vt-bulten-satir .vt-girdi { flex: 1; min-width: 0; }
  .vt-footer--koyu .vt-girdi { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .2); color: #fff; }
  .vt-footer--koyu .vt-girdi::placeholder { color: rgb(255 255 255 / .55); }
  .vt-bulten .vt-onay { margin-top: var(--vt-s-3); color: var(--vt-f-yazi); }
  .vt-bulten-durum:not(:empty) { margin-top: var(--vt-s-3); padding: var(--vt-s-2) var(--vt-s-3); border-radius: var(--vt-r-1); background: var(--vt-f-yuzey); border: 1px solid var(--vt-f-cizgi); font-weight: 500; }
  .vt-bulten-durum.vt-hata { color: var(--vt-hata); background: var(--vt-hata-zemin); border-color: currentColor; }
  .vt-bulten-durum.vt-tamam { color: var(--vt-basari); background: var(--vt-basari-zemin); border-color: currentColor; }
  .vt-tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .vt-footer-ana { display: grid; gap: var(--vt-s-10); padding-block: var(--vt-s-12) var(--vt-s-10); }
  @media (min-width: 900px) { .vt-footer-ana { grid-template-columns: minmax(240px, 300px) 1fr; gap: var(--vt-s-12); } }
  .vt-footer-logo { display: inline-flex; align-items: center; padding: 10px 14px; background: #fff; border: 1px solid var(--vt-f-cizgi); border-radius: var(--vt-r-2); }
  .vt-footer-logo img { max-height: 40px; width: auto; }
  .vt-footer-logo span { font-family: var(--vt-font-baslik); font-weight: 800; color: var(--vt-gri-950); }
  .vt-footer-aciklama { margin-top: var(--vt-s-4); max-width: 42ch; }
  .vt-footer-rozetler { display: flex; flex-wrap: wrap; gap: var(--vt-s-2); margin-top: var(--vt-s-4); }
  .vt-footer-rozetler img { height: 48px; width: auto; border-radius: var(--vt-r-1); background: #fff; }
  .vt-sosyal { display: flex; gap: var(--vt-s-2); margin-top: var(--vt-s-5); }
  .vt-sosyal a { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--vt-f-cizgi); border-radius: var(--vt-r-2); }
  .vt-sosyal a:hover { border-color: var(--vt-f-aksan); color: var(--vt-f-aksan); }
  .vt-sosyal .vt-ikon { width: 20px; height: 20px; }
  .vt-footer-kolonlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--vt-s-8) var(--vt-s-6); }
  @media (max-width: 599px) { .vt-footer-kolonlar { grid-template-columns: 1fr 1fr; } .vt-footer-iletisim { grid-column: 1 / -1; } }
  .vt-footer-baslik { font-family: var(--vt-font-baslik); font-size: var(--vt-fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vt-f-baslik); padding-bottom: var(--vt-s-3); margin-bottom: var(--vt-s-3); border-bottom: 2px solid var(--vt-f-aksan); display: inline-block; }
  .vt-footer-kolon ul { display: grid; gap: 7px; list-style: none; padding: 0; }
  .vt-ik-satir { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
  .vt-ik-satir .vt-ikon { width: 18px; height: 18px; margin-top: 2px; color: var(--vt-f-aksan); }
  .vt-etbis { display: grid; gap: 6px; margin-top: var(--vt-s-2); }
  .vt-etbis img { height: 64px; width: auto; border-radius: var(--vt-r-1); background: #fff; }
  .vt-footer-alt { border-top: 1px solid var(--vt-f-cizgi); font-size: var(--vt-fs-sm); }
  .vt-footer-alt-ic { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vt-s-3) var(--vt-s-6); padding-block: var(--vt-s-5); }
  .vt-telif { flex: 1 1 320px; }
  .vt-yasal { display: flex; flex-wrap: wrap; gap: var(--vt-s-1) var(--vt-s-4); }
  .vt-odeme { display: flex; flex-wrap: wrap; gap: 6px; }
  .vt-odeme li { display: inline-grid; place-items: center; height: 34px; padding: 4px 8px; background: #fff; border: 1px solid var(--vt-f-cizgi); border-radius: var(--vt-r-1); }
  .vt-odeme img { max-height: 24px; width: auto; }
}

@layer vt.bilesen {
  /* ---------- Düğmeler ---------- */
  .vt-btn { --b-z: var(--vt-buton); --b-m: var(--vt-buton-metin); --b-k: var(--vt-buton);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--vt-kontrol-h); padding: 0 var(--vt-s-5);
    background: var(--b-z); color: var(--b-m); border: 1px solid var(--b-k); border-radius: var(--vt-r-2);
    font-weight: 600; font-size: var(--vt-fs-md); line-height: 1.1; white-space: nowrap; text-decoration: none;
    transition: background var(--vt-sure) var(--vt-egri), border-color var(--vt-sure), color var(--vt-sure), box-shadow var(--vt-sure), transform 80ms; }
  .vt-btn:hover { --b-z: var(--vt-buton-hover); --b-k: var(--vt-buton-hover); --b-m: var(--vt-buton-metin-hover); color: var(--b-m); }
  .vt-btn:active { transform: translateY(1px); }
  .vt-btn .vt-ikon { width: 18px; height: 18px; }
  .vt-btn[disabled], .vt-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
  .vt-btn--ikincil { --b-z: var(--vt-btn2-zemin, var(--vt-yuzey)); --b-m: var(--vt-btn2-metin, var(--vt-metin)); --b-k: var(--vt-btn2-kenar, var(--vt-cizgi-2)); }
  .vt-btn--ikincil:hover { --b-z: var(--vt-btn2-hover, var(--vt-yuzey-2)); --b-m: var(--vt-btn2-metin, var(--vt-metin)); --b-k: var(--vt-btn2-kenar, var(--vt-gri-500)); }
  .vt-btn--hayalet { --b-z: transparent; --b-m: var(--vt-ana-metin); --b-k: transparent; }
  .vt-btn--hayalet:hover { --b-z: var(--vt-ana-50); --b-m: var(--vt-ana-metin); --b-k: transparent; }
  .vt-btn--koyu { --b-z: var(--vt-koyu, var(--vt-gri-950)); --b-m: var(--vt-koyu-metin, #fff); --b-k: var(--vt-koyu, var(--vt-gri-950)); }
  .vt-btn--koyu:hover { --b-z: var(--vt-koyu-hover, var(--vt-gri-800)); --b-m: var(--vt-koyu-metin, #fff); --b-k: var(--vt-koyu-hover, var(--vt-gri-800)); }
  .vt-btn--kucuk { min-height: 34px; padding: 0 var(--vt-s-3); font-size: var(--vt-fs-sm); }
  .vt-btn--buyuk { min-height: calc(var(--vt-kontrol-h) + 8px); padding: 0 var(--vt-s-8); font-size: var(--vt-fs-base); }
  .vt-btn--tam { width: 100%; }
  .vt-buton-grubu { display: flex; flex-wrap: wrap; gap: var(--vt-s-2); align-items: center; }
  .vt-ikon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--vt-r-2); color: var(--vt-metin); transition: background var(--vt-sure); }
  .vt-ikon-btn:hover { background: var(--vt-yuzey-3); }
  .vt-ikon-btn .vt-ikon { width: 24px; height: 24px; }
  .vt-ikon-btn--cerceve { border: 1px solid var(--vt-cizgi-2); }
  .vt-ust .vt-ikon-btn { color: var(--vt-ust-metin, var(--vt-metin)); }
  .vt-ust .vt-ikon-btn:hover { background: var(--vt-ust-hover, var(--vt-yuzey-3)); }

  /* ---------- Form ---------- */
  .vt-girdi { width: 100%; min-height: var(--vt-kontrol-h); padding: 0 var(--vt-s-3); background: var(--vt-yuzey); color: var(--vt-metin); border: 1px solid var(--vt-cizgi-2); border-radius: var(--vt-r-2); font-size: var(--vt-fs-base); transition: border-color var(--vt-sure), box-shadow var(--vt-sure); }
  select.vt-girdi { padding-right: var(--vt-s-8); }
  .vt-girdi:hover { border-color: var(--vt-gri-400); }
  .vt-girdi:focus { outline: none; border-color: var(--vt-odak); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-odak) 22%, transparent); }
  .vt-girdi::placeholder { color: var(--vt-metin-3); opacity: 1; }
  .vt-alan { display: grid; gap: 6px; }
  .vt-alan-etiket { font-size: var(--vt-fs-sm); font-weight: 600; color: var(--vt-metin-2); }
  .vt-onay { display: flex; align-items: flex-start; gap: 10px; font-size: var(--vt-fs-sm); cursor: pointer; }
  .vt-onay input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--vt-buton); flex: none; }

  /* ---------- Rozet / etiket / kod / durum ---------- */
  .vt-kod { display: inline-flex; align-items: center; padding: 1px 7px; font-family: var(--vt-font-kod); font-size: .85em; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--vt-gri-900); background: var(--vt-yuzey-3); border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-1); white-space: nowrap; }
  .vt-etiket { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: var(--vt-fs-xs); font-weight: 600; color: var(--vt-metin-2); background: var(--vt-yuzey-3); border-radius: var(--vt-r-1); }
  .vt-etiket .vt-ikon { width: 13px; height: 13px; }
  .vt-etiket--marka { background: var(--vt-ana-100); color: var(--vt-ana-900); }
  .vt-ust-etiket { display: inline-flex; align-items: center; gap: 6px; font-family: var(--vt-font-kod); font-size: var(--vt-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-ana-metin); }
  .vt-ust-etiket .vt-ikon { width: 15px; height: 15px; }
  .vt-durum { display: inline-flex; align-items: center; gap: 5px; font-size: var(--vt-fs-sm); font-weight: 600; }
  .vt-durum .vt-ikon { width: 16px; height: 16px; }
  .vt-durum--basari { color: var(--vt-basari); } .vt-durum--uyari { color: var(--vt-uyari); }
  .vt-durum--hata { color: var(--vt-hata); } .vt-durum--bilgi { color: var(--vt-bilgi); }
  .vt-uyari { display: flex; gap: var(--vt-s-3); align-items: flex-start; padding: var(--vt-s-3) var(--vt-s-4); margin-top: var(--vt-s-3); border-radius: var(--vt-r-2); border: 1px solid; font-size: var(--vt-fs-md); }
  .vt-uyari .vt-ikon { width: 20px; height: 20px; margin-top: 1px; }
  .vt-uyari--bilgi { color: var(--vt-bilgi); background: var(--vt-bilgi-zemin); }
  .vt-uyari--basari { color: var(--vt-basari); background: var(--vt-basari-zemin); }
  .vt-uyari--uyari { color: var(--vt-uyari); background: var(--vt-uyari-zemin); }
  .vt-uyari--hata { color: var(--vt-hata); background: var(--vt-hata-zemin); }
  .vt-uyari p { color: var(--vt-metin); }

  /* ---------- Kutu ---------- */
  .vt-kutu { padding: var(--vt-s-5); background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-3); }
  .vt-kutu + .vt-kutu { margin-top: var(--vt-s-4); }
  .vt-kutu-baslik { display: flex; align-items: center; gap: 8px; font-family: var(--vt-font-baslik); font-weight: 700; font-size: var(--vt-fs-lg); margin-bottom: var(--vt-s-2); }
  .vt-kutu-baslik .vt-ikon { width: 22px; height: 22px; color: var(--vt-ana-metin); }
  .vt-kutu-metin { color: var(--vt-metin-2); font-size: var(--vt-fs-md); margin-bottom: var(--vt-s-4); }
  .vt-kutu .vt-btn + .vt-btn { margin-top: var(--vt-s-2); }

  /* ---------- Tablo ---------- */
  .vt-tablo-kap { overflow-x: auto; border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-2); -webkit-overflow-scrolling: touch; }
  .vt-tablo { width: 100%; font-size: var(--vt-fs-md); background: var(--vt-yuzey); }
  .vt-tablo caption { caption-side: top; text-align: left; padding: var(--vt-s-3) var(--vt-s-4); font-weight: 600; color: var(--vt-metin-2); border-bottom: 1px solid var(--vt-cizgi); }
  .vt-tablo th, .vt-tablo td { padding: 10px var(--vt-s-4); text-align: left; border-bottom: 1px solid var(--vt-cizgi); white-space: nowrap; }
  .vt-tablo thead th { font-size: var(--vt-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--vt-metin-2); background: var(--vt-yuzey-2); }
  .vt-tablo tbody tr:last-child > * { border-bottom: 0; }
  .vt-tablo tbody tr:hover { background: var(--vt-ana-50); }
  .vt-tablo .vt-sayi { text-align: right; }

  /* ---------- Bölüm başlığı ---------- */
  .vt-bolum-baslik { font-size: var(--vt-fs-xl); margin-bottom: var(--vt-s-4); display: flex; align-items: baseline; gap: var(--vt-s-2); }
  .vt-bolum-baslik::before { content: ""; width: 4px; height: .9em; background: var(--vt-bolum-aksan, var(--vt-ana)); border-radius: 1px; align-self: center; }
  .vt-bag-ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--vt-fs-md); color: var(--vt-ana-metin); }
  .vt-bag-ok .vt-ikon { width: 16px; height: 16px; transition: transform var(--vt-sure); }
  .vt-bag-ok:hover .vt-ikon { transform: translateX(3px); }

  /* ---------- Katalog düğmesi ---------- */
  .vt-katalog-btn { align-items: center; gap: 10px; height: 46px; padding: 0 var(--vt-s-4); background: var(--vt-katalog-zemin, var(--vt-koyu, var(--vt-gri-950))); color: var(--vt-katalog-metin, var(--vt-koyu-metin, #fff)); border-radius: var(--vt-r-2); font-weight: 600; font-size: var(--vt-fs-md); white-space: nowrap; transition: background var(--vt-sure); }
  .vt-katalog-btn:hover, .vt-katalog-btn[aria-expanded="true"] { background: var(--vt-katalog-hover, var(--vt-koyu-hover, var(--vt-gri-800))); }
  .vt-katalog-btn .vt-ikon { width: 20px; height: 20px; }
  .vt-katalog-btn .vt-ok { width: 16px; height: 16px; opacity: .7; transition: transform var(--vt-sure); }
  .vt-katalog-btn[aria-expanded="true"] .vt-ok { transform: rotate(180deg); }

  /* ---------- Arama (combobox) ---------- */
  .vt-arama { position: relative; display: flex; align-items: center; min-width: 0; height: 46px; background: var(--vt-arama-zemin, var(--vt-yuzey)); border: 1.5px solid var(--vt-arama-kenar, var(--vt-gri-300)); border-radius: var(--vt-r-2); transition: border-color var(--vt-sure), box-shadow var(--vt-sure); }
  .vt-arama:hover { border-color: var(--vt-arama-kenar, var(--vt-gri-400)); }
  .vt-arama:focus-within { border-color: var(--vt-odak); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-odak) 20%, transparent); }
  .vt-arama-ikon { display: grid; place-items: center; width: 42px; color: var(--vt-arama-ipucu, var(--vt-metin-3)); flex: none; }
  .vt-arama-ikon .vt-ikon { width: 20px; height: 20px; }
  .vt-arama input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: var(--vt-fs-base); color: var(--vt-arama-metin, var(--vt-metin)); }
  .vt-arama input:focus { outline: none; }
  .vt-arama input::placeholder { color: var(--vt-arama-ipucu, var(--vt-metin-3)); }
  .vt-arama input::-webkit-search-cancel-button { cursor: pointer; }
  .vt-arama-kisayol { display: none; margin-right: 8px; padding: 1px 7px; font-family: var(--vt-font-kod); font-size: var(--vt-fs-xs); color: var(--vt-arama-ipucu, var(--vt-metin-3)); border: 1px solid var(--vt-arama-kenar, var(--vt-cizgi-2)); border-radius: var(--vt-r-1); }
  @media (min-width: 1200px) and (hover: hover) { .vt-arama-kisayol { display: inline-block; } .vt-arama:focus-within .vt-arama-kisayol { display: none; } }
  .vt-arama-gonder { display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: stretch; margin: 3px; padding: 0 var(--vt-s-4); background: var(--vt-arama-btn, var(--vt-buton)); color: var(--vt-arama-btn-metin, var(--vt-buton-metin)); border-radius: calc(var(--vt-r-2) - 2px); font-weight: 600; font-size: var(--vt-fs-md); transition: background var(--vt-sure); }
  .vt-arama-gonder:hover { background: var(--vt-arama-btn-hover, var(--vt-buton-hover)); color: var(--vt-arama-btn-metin, var(--vt-buton-metin-hover)); }
  .vt-arama-gonder .vt-ikon { width: 20px; height: 20px; }
  .vt-yalniz-dar { display: inline; }
  .vt-yalniz-genis { display: none !important; }
  @media (min-width: 900px) { .vt-yalniz-dar { display: none !important; } .vt-yalniz-genis { display: revert !important; } span.vt-yalniz-genis, a.vt-yalniz-genis { display: inline-flex !important; } li.vt-yalniz-genis { display: list-item !important; } }
  .vt-serit-liste li.vt-yalniz-genis { display: none !important; }
  @media (min-width: 900px) { .vt-serit-liste li.vt-yalniz-genis { display: flex !important; } }

  .vt-arama-panel { position: absolute; top: calc(100% + 6px); left: -1.5px; right: -1.5px; z-index: 80; max-height: min(72vh, 620px); overflow: auto; overscroll-behavior: contain; background: var(--vt-yuzey); border: 1px solid var(--vt-cizgi-2); border-radius: var(--vt-r-2); box-shadow: var(--vt-golge-3); padding: var(--vt-s-2); }
  .vt-ap-grup + .vt-ap-grup { margin-top: var(--vt-s-2); padding-top: var(--vt-s-2); border-top: 1px solid var(--vt-cizgi); }
  .vt-ap-baslik { padding: 6px var(--vt-s-3); font-family: var(--vt-font-kod); font-size: var(--vt-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vt-metin-3); }
  .vt-ap-oge { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--vt-s-3); align-items: center; padding: 8px var(--vt-s-3); border-radius: var(--vt-r-1); color: var(--vt-metin); cursor: pointer; }
  .vt-ap-oge[aria-selected="true"], .vt-ap-oge:hover { background: var(--vt-ana-50); color: var(--vt-metin); }
  .vt-ap-gorsel { width: 52px; height: 52px; display: grid; place-items: center; background: var(--vt-yuzey-2); border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-1); overflow: hidden; color: var(--vt-metin-3); }
  .vt-ap-gorsel img { width: 100%; height: 100%; object-fit: contain; }
  .vt-ap-gorsel .vt-ikon { width: 22px; height: 22px; }
  .vt-ap-ad { display: block; font-weight: 600; font-size: var(--vt-fs-md); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .vt-ap-ad mark { background: color-mix(in srgb, var(--vt-ana) 22%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
  .vt-ap-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: var(--vt-fs-xs); color: var(--vt-metin-3); }
  .vt-ap-sag { text-align: right; font-size: var(--vt-fs-sm); white-space: nowrap; }
  .vt-ap-sag .text-main-600, .vt-ap-sag .fw-bold { color: var(--vt-metin); font-weight: 700; }
  .vt-ap-kisa { display: flex; align-items: center; gap: 10px; padding: 8px var(--vt-s-3); border-radius: var(--vt-r-1); font-size: var(--vt-fs-md); cursor: pointer; }
  .vt-ap-kisa .vt-ikon { width: 18px; height: 18px; color: var(--vt-metin-3); }
  .vt-ap-kisa small { margin-left: auto; color: var(--vt-metin-3); font-size: var(--vt-fs-xs); }
  .vt-ap-kisa[aria-selected="true"], .vt-ap-kisa:hover { background: var(--vt-ana-50); }
  .vt-ap-tumu { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--vt-s-2); padding: 10px; border-radius: var(--vt-r-1); background: var(--vt-yuzey-2); font-weight: 600; font-size: var(--vt-fs-md); color: var(--vt-ana-metin); cursor: pointer; }
  .vt-ap-tumu[aria-selected="true"], .vt-ap-tumu:hover { background: var(--vt-ana-100); }
  .vt-ap-bos { padding: var(--vt-s-6) var(--vt-s-4); text-align: center; color: var(--vt-metin-2); font-size: var(--vt-fs-md); }
  .vt-ap-bos .vt-ikon { width: 28px; height: 28px; margin: 0 auto var(--vt-s-2); color: var(--vt-metin-3); }
  .vt-ap-yukleniyor { height: 3px; margin: -8px -8px 6px; background: linear-gradient(90deg, transparent, var(--vt-ana), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: vt-kayan 1s linear infinite; }
  @keyframes vt-kayan { from { background-position: -40% 0; } to { background-position: 140% 0; } }

  /* ---------- Hesap / sepet ---------- */
  .vt-eylem { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px; border-radius: var(--vt-r-2); color: var(--vt-ust-metin, var(--vt-metin)); transition: background var(--vt-sure); }
  .vt-eylem:hover { background: var(--vt-ust-hover, var(--vt-yuzey-3)); color: var(--vt-ust-metin, var(--vt-metin)); }
  .vt-eylem-ikon { position: relative; display: inline-grid; place-items: center; }
  .vt-eylem-ikon .vt-ikon { width: 26px; height: 26px; }
  .vt-eylem-metin { display: none; flex-direction: column; line-height: 1.15; }
  .vt-eylem-metin small { font-size: var(--vt-fs-xs); color: var(--vt-ust-soluk, var(--vt-metin-3)); }
  .vt-eylem-metin b { font-size: var(--vt-fs-md); font-weight: 600; max-width: 14ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  @media (min-width: 1200px) { .vt-eylem { padding: 0 10px; } .vt-eylem-metin { display: flex; } }
  .vt-sepet .vt-eylem-ikon { margin-right: 8px; }
  /* 2026-10-24: yeni sağ öğeler (destek / teklif / bayi / özel öğe) — yalnız ≥900 px (vt-yalniz-genis); mobilde çekmecede */
  .vt-eylem-btn { margin-inline: 4px; white-space: nowrap; }
  .vt-eylem-btn .vt-ikon { width: 18px; height: 18px; }
  /* 1440 px altında teklif / bayi düğmeleri ve destek öğesi yalnız ikon (title + aria-label'lı) → arama kutusuna yer kalır */
  @media (max-width: 1439.98px) { .vt-eylem-btn .vt-eylem-btn-metin, .vt-eylem--destek .vt-eylem-metin { display: none; } }
  .vt-eylem--yazili .vt-eylem-metin { display: flex; }
  .vt-eylem--ozel .vt-eylem-metin b { max-width: 18ch; }
  /* Yer daralınca yalnız özel öğeler kısalır (üç nokta); yerleşik öğeler küçülmez */
  .vt-eylemler > .vt-eylem:not(.vt-eylem--ozel), .vt-eylemler > .vt-eylem-btn { flex-shrink: 0; }
  .vt-eylem--ozel { min-width: 0; flex-shrink: 1; overflow: hidden; }   /* daralan öğenin içeriği komşusuna taşmaz */
  .vt-eylem--ozel:not(.vt-eylem--yazili) { min-width: 46px; }          /* ikonlu özel öğe en az ikonu kadar (ikon kesilmez) */
  .vt-eylem--ozel .vt-eylem-ikon { flex-shrink: 0; }
  .vt-eylem--ozel .vt-eylem-metin { min-width: 0; }
  /* 2026-10-25: çok dolu header — özel öğeler kesiliyorsa (vt-kabuk.js ölçer) yerleşik öğelerin yazısı görsel olarak gizlenir; ikon + ekran okuyucu metni kalır */
  .vt-eylemler--sikisik > .vt-eylem:not(.vt-eylem--ozel) { padding: 0 6px; }
  .vt-eylemler--sikisik > .vt-eylem:not(.vt-eylem--ozel) .vt-eylem-metin, .vt-eylemler--sikisik > .vt-eylem-btn .vt-eylem-btn-metin { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .vt-rozet { position: absolute; top: -7px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px; display: inline-grid; place-items: center; background: var(--vt-rozet-zemin, var(--vt-buton)); color: var(--vt-rozet-metin, var(--vt-buton-metin)); border: 2px solid var(--vt-ust-zemin, var(--vt-yuzey)); border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  .vt-rozet.vt-bos { background: var(--vt-gri-400); color: #fff; }

  /* ---------- Mega katalog ---------- */
  .vt-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 70; background: var(--vt-mega-zemin, var(--vt-yuzey)); color: var(--vt-mega-baslik, var(--vt-metin)); border-top: 1px solid var(--vt-cizgi); border-bottom: 1px solid var(--vt-cizgi); box-shadow: var(--vt-golge-3); }
  /* Sabit yükseklik + minmax(0,1fr) satır: iki sütun da KENDİ içinde kayar, içerik kutudan taşmaz */
  .vt-mega-ic { display: grid; grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: min(74vh, 640px); padding-inline: 0; overflow: hidden; }
  .vt-mega-kokler, .vt-mega-paneller { min-height: 0; }
  .vt-mega-kokler { overflow-y: auto; padding: var(--vt-s-3) 0; background: var(--vt-mega-yan, var(--vt-yuzey-2)); border-right: 1px solid var(--vt-cizgi); overscroll-behavior: contain; }
  .vt-mega-kok { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px var(--vt-s-5); font-weight: 600; font-size: var(--vt-fs-md); color: var(--vt-mega-metin, var(--vt-metin-2)); border-left: 3px solid transparent; }
  .vt-mega-kok .vt-ok { width: 16px; height: 16px; opacity: .5; }
  .vt-mega-kok:hover, .vt-mega-kok[aria-current="true"] { background: var(--vt-mega-zemin, var(--vt-yuzey)); color: var(--vt-mega-baslik, var(--vt-metin)); border-left-color: var(--vt-mega-vurgu, var(--vt-ana)); }
  .vt-mega-kok[aria-current="true"] .vt-ok { opacity: 1; color: var(--vt-mega-vurgu, var(--vt-ana-metin)); }
  .vt-mega-kokler-son { margin-top: var(--vt-s-2); padding-top: var(--vt-s-2); border-top: 1px solid var(--vt-cizgi); }
  .vt-mega-tum { color: var(--vt-mega-vurgu, var(--vt-ana-metin)); }
  .vt-mega .vt-bag-ok { color: var(--vt-mega-vurgu, var(--vt-ana-metin)); }
  .vt-mega-paneller { overflow-y: auto; padding: var(--vt-s-5) var(--vt-s-8); overscroll-behavior: contain; }
  .vt-mega-panel-bas { display: flex; align-items: baseline; justify-content: space-between; gap: var(--vt-s-4); padding-bottom: var(--vt-s-3); margin-bottom: var(--vt-s-5); border-bottom: 1px solid var(--vt-cizgi); }
  .vt-mega-panel-bas h2 { font-size: var(--vt-fs-xl); color: var(--vt-mega-baslik, var(--vt-baslik, var(--vt-metin))); }
  .vt-mega-izgara { columns: 3 200px; column-gap: var(--vt-s-8); }
  .vt-mega-grup { break-inside: avoid; margin-bottom: var(--vt-s-5); }
  .vt-mega-grup-bas { display: block; font-weight: 700; font-size: var(--vt-fs-md); color: var(--vt-mega-baslik, var(--vt-metin)); padding-bottom: 6px; }
  .vt-mega-grup-bas:hover { color: var(--vt-mega-vurgu, var(--vt-ana-metin)); }
  .vt-mega-grup ul { list-style: none; padding: 0; display: grid; gap: 2px; }
  .vt-mega-grup li a { display: block; padding: 2px 0; font-size: var(--vt-fs-sm); color: var(--vt-mega-metin, var(--vt-metin-2)); }
  .vt-mega-grup li a:hover { color: var(--vt-mega-vurgu, var(--vt-ana-metin)); }
  .vt-mega-dahasi { font-weight: 600; color: var(--vt-mega-vurgu, var(--vt-ana-metin)) !important; }
  .vt-mega-grup li > .vt-mega-dahasi { display: inline; font-size: var(--vt-fs-xs); }
  /* Alt dalı olan kategori: ok işareti + «uçan» alt menü (konumu JS ile, position:fixed → kayan sütunlarda kırpılmaz) */
  .vt-mega .vt-mega-dal > a { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-inline: -6px; padding: 2px 6px; border-radius: var(--vt-r-1); }
  .vt-mega .vt-mega-dal > a .vt-ok { width: 14px; height: 14px; flex: none; opacity: .5; transition: transform var(--vt-sure), opacity var(--vt-sure); }
  .vt-mega .vt-mega-dal > a:hover, .vt-mega .vt-mega-dal > a[aria-expanded="true"] { background: var(--vt-mega-yan, var(--vt-yuzey-2)); color: var(--vt-mega-vurgu, var(--vt-ana-metin)); }
  .vt-mega .vt-mega-dal > a[aria-expanded="true"] .vt-ok { opacity: 1; transform: translateX(2px); }
  .vt-mega-ucan { position: fixed; z-index: 75; top: 0; left: 0; display: grid; align-content: start; min-width: 230px; max-width: 320px; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: var(--vt-mega-zemin, var(--vt-yuzey)); border: 1px solid var(--vt-cizgi); border-left: 3px solid var(--vt-mega-vurgu, var(--vt-ana)); border-radius: var(--vt-r-2); box-shadow: var(--vt-golge-3); animation: vt-ucan-gir .14s var(--vt-egri); }
  @keyframes vt-ucan-gir { from { opacity: 0; } to { opacity: 1; } }   /* transform YOK: iç içe uçan menünün fixed konumunu bozar */
  .vt-mega-ucan > .vt-mega-ucan-bas { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin-bottom: 4px; font-weight: 700; font-size: var(--vt-fs-sm); color: var(--vt-mega-baslik, var(--vt-metin)); border-bottom: 1px solid var(--vt-cizgi); }
  .vt-mega-ucan > .vt-mega-ucan-bas small { margin-left: auto; font-weight: 500; font-size: var(--vt-fs-xs); color: var(--vt-mega-metin, var(--vt-metin-3)); }
  .vt-mega-ucan > .vt-mega-ucan-bas .vt-ikon { width: 14px; height: 14px; flex: none; }
  .vt-mega-ucan > .vt-mega-ucan-bas:hover { color: var(--vt-mega-vurgu, var(--vt-ana-metin)); }
  .vt-mega-ucan ul { gap: 1px; }
  .vt-mega-ucan li a { padding: 5px 8px; border-radius: var(--vt-r-1); }
  .vt-mega-ucan li a:hover { background: var(--vt-mega-yan, var(--vt-yuzey-2)); }
  .vt-mega .vt-mega-ucan .vt-mega-dal > a { margin-inline: 0; padding: 5px 8px; }
  .vt-mega-bos { color: var(--vt-mega-metin, var(--vt-metin-2)); }
  .vt-mega-bos a { color: var(--vt-mega-vurgu, var(--vt-ana-metin)); font-weight: 600; text-decoration: underline; }

  /* ---------- Mobil çekmece ---------- */
  .vt-cekmece { width: min(400px, 92vw); max-width: none; height: 100dvh; max-height: none; margin: 0 auto 0 0; background: var(--vt-yuzey); box-shadow: var(--vt-golge-3); overflow: hidden; }
  .vt-cekmece[open] { display: flex; flex-direction: column; animation: vt-cekmece-gir .22s var(--vt-egri); }
  .vt-cekmece::backdrop { background: rgb(10 15 20 / .55); backdrop-filter: blur(2px); }
  @keyframes vt-cekmece-gir { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .vt-cekmece-bas { display: flex; align-items: center; justify-content: space-between; padding: var(--vt-s-2) var(--vt-s-2) var(--vt-s-2) var(--vt-s-5); border-bottom: 1px solid var(--vt-cizgi); }
  .vt-cekmece-baslik { font-family: var(--vt-font-baslik); font-weight: 700; font-size: var(--vt-fs-lg); }
  .vt-cekmece-govde { flex: 1; overflow-y: auto; padding: var(--vt-s-3) 0 var(--vt-s-8); overscroll-behavior: contain; }
  .vt-cekmece-hesap { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; margin: 0 var(--vt-s-4) var(--vt-s-3); padding: var(--vt-s-3) var(--vt-s-4); background: var(--vt-yuzey-2); border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-2); }
  .vt-cekmece-hesap .vt-ikon { width: 28px; height: 28px; }
  .vt-cekmece-hesap span { display: flex; flex-direction: column; line-height: 1.2; }
  .vt-cekmece-hesap small { color: var(--vt-metin-3); font-size: var(--vt-fs-xs); }
  .vt-cekmece-bolum { padding: var(--vt-s-4) var(--vt-s-5) var(--vt-s-2); font-family: var(--vt-font-kod); font-size: var(--vt-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-metin-3); }
  .vt-cekmece-liste > li { border-bottom: 1px solid var(--vt-cizgi); }
  .vt-cekmece-liste > li > a, .vt-cekmece-liste summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 var(--vt-s-5); font-weight: 600; cursor: pointer; list-style: none; }
  .vt-cekmece-liste summary::-webkit-details-marker { display: none; }
  .vt-cekmece-liste summary .vt-ok { width: 18px; height: 18px; color: var(--vt-metin-3); transition: transform var(--vt-sure); }
  .vt-cekmece-liste details[open] > summary .vt-ok { transform: rotate(180deg); }
  .vt-cekmece-liste details ul { list-style: none; padding: 0 0 var(--vt-s-2); background: var(--vt-yuzey-2); }
  .vt-cekmece-liste details ul a { display: flex; align-items: center; min-height: 42px; padding: 0 var(--vt-s-5) 0 var(--vt-s-8); color: var(--vt-metin-2); font-size: var(--vt-fs-md); }
  .vt-cekmece-tum { color: var(--vt-ana-metin) !important; font-weight: 600; }
  /* İç içe kategori seviyeleri (3. seviye ve sonrası): her seviye biraz daha içeriden */
  .vt-cekmece-liste details details > summary { min-height: 42px; padding-left: var(--vt-s-8); font-size: var(--vt-fs-md); color: var(--vt-metin-2); border-top: 1px solid var(--vt-cizgi); }
  .vt-cekmece-liste details details[open] > summary { color: var(--vt-metin); }
  .vt-cekmece-liste details details ul a { padding-left: calc(var(--vt-s-8) + var(--vt-s-4)); }
  .vt-cekmece-liste details details details > summary { padding-left: calc(var(--vt-s-8) + var(--vt-s-4)); }
  .vt-cekmece-liste details details details ul a { padding-left: calc(var(--vt-s-8) + var(--vt-s-8)); }
  .vt-cekmece-liste details details details details > summary { padding-left: calc(var(--vt-s-8) + var(--vt-s-8)); }
  .vt-cekmece-liste details details details details ul a { padding-left: calc(var(--vt-s-8) + var(--vt-s-12)); }
  .vt-cekmece-alt { display: grid; gap: var(--vt-s-2); padding: var(--vt-s-5); }
  .vt-cekmece-iletisim { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--vt-metin-2); }
  .vt-cekmece-iletisim .vt-ikon { width: 18px; height: 18px; }
  .vt-cekmece-bag { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }   /* 2026-10-24: çekmece «Bağlantılar» */
  .vt-cekmece-bag .vt-ikon { width: 18px; height: 18px; color: var(--vt-metin-3); }

  /* ---------- Kırıntı ---------- */
  .vt-kirinti { margin-bottom: var(--vt-s-3); }
  .vt-kirinti ol { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; font-size: var(--vt-fs-sm); color: var(--vt-metin-3); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vt-kirinti ol::-webkit-scrollbar { display: none; }
  .vt-kirinti li { display: inline-flex; align-items: center; gap: 2px; }
  .vt-kirinti a { color: var(--vt-metin-2); display: inline-flex; align-items: center; padding: 2px 4px; border-radius: var(--vt-r-1); }
  .vt-kirinti a:hover { color: var(--vt-ana-metin); background: var(--vt-yuzey-3); }
  .vt-kirinti .vt-ikon { width: 16px; height: 16px; }
  .vt-kirinti-ayrac { width: 14px !important; height: 14px !important; opacity: .55; }
  .vt-kirinti [aria-current="page"] span { color: var(--vt-metin); font-weight: 600; padding: 2px 4px; }

  /* ---------- Önizleme şeridi ---------- */
  .vt-onizleme { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 14px; background: var(--vt-gri-950); color: #fff; border-radius: 999px; box-shadow: var(--vt-golge-3); font-size: var(--vt-fs-sm); }
  .vt-onizleme > .vt-ikon { width: 18px; height: 18px; color: var(--vt-ana-acik); }
  .vt-onizleme-kapat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / .12); color: #fff; font-weight: 600; white-space: nowrap; }
  .vt-onizleme-kapat:hover { background: rgb(255 255 255 / .22); color: #fff; }
  .vt-onizleme-kapat .vt-ikon { width: 16px; height: 16px; }
  @media (max-width: 599px) { .vt-onizleme > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vt-onizleme-kapat span { display: none; } }
}

@layer vt.sayfa {
  /* ---------- Sayfa başlık bandı ---------- */
  .vt-sayfa-bas { padding: var(--vt-s-6) 0 var(--vt-s-8); background: var(--vt-bant-zemin, var(--vt-yuzey-2)); border-bottom: 1px solid var(--vt-cizgi); background-image: linear-gradient(var(--vt-cizgi) 1px, transparent 1px), linear-gradient(90deg, var(--vt-cizgi) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; }
  .vt-sayfa-bas > .vt-kap { position: relative; }
  .vt-sayfa-bas h1 { font-size: var(--vt-fs-3xl); max-width: 30ch; }
  .vt-sayfa-meta { display: flex; flex-wrap: wrap; gap: var(--vt-s-2) var(--vt-s-5); margin-top: var(--vt-s-3); font-size: var(--vt-fs-sm); color: var(--vt-metin-2); }
  .vt-sayfa-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .vt-sayfa-meta .vt-ikon { width: 16px; height: 16px; }
  .vt-etiket-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--vt-s-4); }
  .vt-giris { margin-top: var(--vt-s-3); font-size: var(--vt-fs-lg); color: var(--vt-metin-2); max-width: 70ch; }
  .vt-sayfa-duzen { display: grid; gap: var(--vt-s-8); padding-block: var(--vt-s-10) 0; }
  @media (min-width: 900px) { .vt-sayfa-duzen { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--vt-s-12); align-items: start; } .vt-sayfa-yan { position: sticky; top: calc(var(--vt-ust-ofset, var(--vt-ust-h)) + 24px); } }
  .vt-sayfa-gorsel { margin-bottom: var(--vt-s-6); border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-3); overflow: hidden; background: var(--vt-yuzey-2); }
  .vt-sayfa-gorsel img { width: 100%; }
  .vt-yan-liste { list-style: none; padding: 0; }
  .vt-yan-liste a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--vt-cizgi); font-size: var(--vt-fs-md); font-weight: 500; }
  .vt-yan-liste li:last-child a { border-bottom: 0; }
  .vt-yan-liste .vt-ok { width: 16px; height: 16px; color: var(--vt-metin-3); }

  /* ---------- CMS tipografisi ---------- */
  .vt-cms { max-width: 76ch; font-size: var(--vt-fs-lg); line-height: 1.75; color: var(--vt-metin-2); overflow-wrap: anywhere; }
  .vt-cms > * + * { margin-top: 1em; }
  .vt-cms > :first-child { margin-top: 0 !important; }
  .vt-cms h2 { font-size: var(--vt-fs-2xl); margin-top: 1.8em; color: var(--vt-metin); }
  .vt-cms h3 { font-size: var(--vt-fs-xl); margin-top: 1.5em; color: var(--vt-metin); }
  .vt-cms h4 { font-size: var(--vt-fs-lg); margin-top: 1.3em; color: var(--vt-metin); }
  .vt-cms h2 + *, .vt-cms h3 + *, .vt-cms h4 + * { margin-top: .5em; }
  .vt-cms a { color: var(--vt-ana-metin); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .vt-cms strong, .vt-cms b { color: var(--vt-metin); }
  .vt-cms ul, .vt-cms ol { padding-left: 1.4em; }
  .vt-cms li + li { margin-top: .35em; }
  .vt-cms li::marker { color: var(--vt-ana-metin); }
  .vt-cms blockquote { padding: var(--vt-s-4) var(--vt-s-5); border-left: 4px solid var(--vt-ana); background: var(--vt-yuzey-2); color: var(--vt-metin); border-radius: 0 var(--vt-r-2) var(--vt-r-2) 0; }
  .vt-cms img { border-radius: var(--vt-r-2); }
  .vt-cms table { width: 100%; font-size: var(--vt-fs-md); border: 1px solid var(--vt-cizgi); display: block; overflow-x: auto; }
  .vt-cms th, .vt-cms td { padding: 8px 12px; border: 1px solid var(--vt-cizgi); text-align: left; }
  .vt-cms th { background: var(--vt-yuzey-2); color: var(--vt-metin); }
  .vt-cms hr { border: 0; border-top: 1px solid var(--vt-cizgi); margin-block: 2em; }
  .vt-cms code { font-family: var(--vt-font-kod-sabit, var(--vt-font-kod)); font-size: .88em; padding: 1px 5px; background: var(--vt-yuzey-3); border-radius: var(--vt-r-1); }

  /* ---------- 404 ---------- */
  .vt-404 { padding-block: var(--vt-s-12) 0; }
  .vt-404-ic { display: grid; gap: var(--vt-s-8); align-items: center; }
  @media (min-width: 900px) { .vt-404-ic { grid-template-columns: minmax(260px, .9fr) 1.4fr; gap: var(--vt-s-12); } }
  .vt-404-kod { display: flex; gap: 6px; font-family: var(--vt-font-kod); font-weight: 600; font-size: clamp(5rem, 3rem + 10vw, 11rem); line-height: 1; color: var(--vt-gri-200); user-select: none; }
  .vt-404-kod span { display: grid; place-items: center; flex: 1; aspect-ratio: 3 / 4; max-width: 1.2em; border: 2px solid var(--vt-gri-200); border-radius: var(--vt-r-3); background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--vt-yuzey-2) 10px 20px); }
  .vt-404-kod span:nth-child(2) { color: var(--vt-ana); border-color: var(--vt-ana); background: var(--vt-ana-50); }
  .vt-404-metin h1 { font-size: var(--vt-fs-3xl); margin-top: var(--vt-s-2); }
  .vt-arama--sayfa { height: 56px; margin-top: var(--vt-s-6); max-width: 640px; }
  .vt-arama--sayfa input { font-size: var(--vt-fs-lg); }
  .vt-404 .vt-buton-grubu { margin-top: var(--vt-s-5); }
  .vt-404-katalog { margin-top: var(--vt-s-12); }
  .vt-kategori-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--vt-s-3); }
  .vt-kategori-izgara a { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--vt-s-3); align-items: center; padding: var(--vt-s-3) var(--vt-s-4); 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), transform var(--vt-sure); }
  .vt-kategori-izgara a:hover { border-color: var(--vt-ana); box-shadow: var(--vt-golge-2); transform: translateY(-1px); color: var(--vt-metin); }
  .vt-kategori-ikon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--vt-yuzey-2); border-radius: var(--vt-r-1); color: var(--vt-ana-metin); overflow: hidden; }
  .vt-kategori-ikon img { width: 40px; height: 40px; object-fit: contain; }
  .vt-kategori-ikon .vt-ikon { width: 22px; height: 22px; }
  .vt-kategori-ad { display: flex; flex-direction: column; font-weight: 600; font-size: var(--vt-fs-md); line-height: 1.3; }
  .vt-kategori-ad small { font-weight: 400; color: var(--vt-metin-3); font-size: var(--vt-fs-xs); }
  .vt-kategori-izgara .vt-ok { width: 16px; height: 16px; color: var(--vt-metin-3); }

  /* ---------- Kılavuz ---------- */
  .vt-kilavuz { padding-top: var(--vt-s-8); }
  .vt-kil-bolum + .vt-kil-bolum { margin-top: var(--vt-s-12); }
  .vt-kil-alt { font-size: var(--vt-fs-md); color: var(--vt-metin-2); margin: var(--vt-s-5) 0 var(--vt-s-2); }
  .vt-kil-olcek { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); border-radius: var(--vt-r-2); overflow: hidden; border: 1px solid var(--vt-cizgi); }
  .vt-kil-olcek li { display: grid; gap: 2px; padding: 10px; min-height: 64px; font-size: var(--vt-fs-xs); }
  .vt-kil-ornek { display: inline-block; padding: 4px 12px; border-radius: var(--vt-r-1); font-weight: 600; }
  .vt-kil-tip > * + * { margin-top: var(--vt-s-3); }
  .vt-kil-h1 { font-family: var(--vt-font-baslik); font-stretch: var(--vt-baslik-esneme); font-size: var(--vt-fs-3xl); font-weight: 800; line-height: 1.1; color: var(--vt-metin); }
  .vt-kil-h2 { font-family: var(--vt-font-baslik); font-stretch: var(--vt-baslik-esneme); font-size: var(--vt-fs-2xl); font-weight: 700; color: var(--vt-metin); }
  .vt-kil-h3 { font-family: var(--vt-font-baslik); font-stretch: var(--vt-baslik-esneme); font-size: var(--vt-fs-xl); font-weight: 700; color: var(--vt-metin); }
  .vt-kil-form { display: grid; gap: var(--vt-s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; max-width: 900px; }
  .vt-kil-kutular { display: grid; gap: var(--vt-s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .vt-kil-kutular .vt-kutu + .vt-kutu { margin-top: 0; }
  .vt-kil-ikonlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 1px; background: var(--vt-cizgi); border: 1px solid var(--vt-cizgi); border-radius: var(--vt-r-2); overflow: hidden; }
  .vt-kil-ikonlar li { display: grid; justify-items: center; gap: 8px; padding: 14px 6px; background: var(--vt-yuzey); font-size: 10.5px; color: var(--vt-metin-3); text-align: center; }
  .vt-kil-ikonlar .vt-ikon { width: 24px; height: 24px; color: var(--vt-metin); }
}

@layer vt.uyum {
  /* İş mantığı çıktıları (fiyat_render_html, sv_durum_html) MarketPro/Bootstrap sınıfları basar — dar uyum */
  .vt-fiyat .text-main-600 { color: var(--vt-metin); }
  .vt-fiyat .fw-bold { font-weight: 700; }
  .vt-fiyat .d-block { display: block; }
  .vt-fiyat .text-decoration-line-through { text-decoration: line-through; color: var(--vt-metin-3); }
  .vt-fiyat .text-gray-500, .vt-fiyat .text-xs { color: var(--vt-metin-3); font-size: var(--vt-fs-xs); }
  /* CMS editör içeriğinde sık görülen Bootstrap yardımcıları */
  .vt-cms .text-center { text-align: center; } .vt-cms .text-end, .vt-cms .text-right { text-align: right; }
  .vt-cms .fw-bold, .vt-cms .fw-semibold { font-weight: 700; color: var(--vt-metin); }
  .vt-cms .img-fluid { max-width: 100%; height: auto; }
  .vt-cms .row { display: flex; flex-wrap: wrap; gap: var(--vt-s-4); }
  .vt-cms .row > [class*="col"] { flex: 1 1 260px; }
  .vt-cms .table { width: 100%; }
}

@layer vt.yardimci {
  /* Kırılıma bağlı görünürlük EN SON katmanda: bileşen katmanındaki display değerlerini (ör. .vt-ikon-btn
     inline-grid) ezmesi gerekir — katman sırası özgüllükten önce gelir. */
  .vt-katalog-btn { display: none; }
  @media (min-width: 900px) { .vt-menu-btn { display: none; } .vt-katalog-btn { display: inline-flex; } }
  @media print {
    .vt-serit, .vt-ust, .vt-gez, .vt-footer, .vt-onizleme, .vt-sayfa-yan, .vt-marka-cizgi { display: none !important; }
    body.vt-govde { color: #000; }
  }
}