/*
 * Vitrin teması – mobil öncelikli e-ticaret arayüzü.
 * Renk, köşe, yazı tipi ve görsel oranı tema panelinden CSS değişkenleriyle gelir (:root, layout içinde).
 * Tüm sınıflar vt- önekli: Default temanın iç sayfalarında (Bootstrap ile) de çakışmadan çalışır.
 */

:root {
    --vt-primary: #0b5ed7;
    --vt-accent: #f59f00;
    --vt-dark: #0f172a;
    --vt-container: 1320px;
    --vt-radius: 14px;
    --vt-radius-sm: 10px;
    --vt-radius-pill: 999px;
    --vt-img-fit: contain;
    --vt-img-ratio: 1/1;
    --vt-logo-h: 44px;
    --vt-font-head: Inter, system-ui, sans-serif;
    --vt-font-body: Inter, system-ui, sans-serif;

    --vt-primary-soft: color-mix(in srgb, var(--vt-primary) 10%, #fff);
    --vt-primary-strong: color-mix(in srgb, var(--vt-primary) 82%, #000);
    --vt-accent-soft: color-mix(in srgb, var(--vt-accent) 14%, #fff);
    --vt-text: #0f172a;
    --vt-muted: #64748b;
    --vt-line: #e2e8f0;
    --vt-bg: #f6f7f9;
    --vt-card: #fff;
    --vt-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);
    --vt-shadow-lg: 0 10px 30px rgba(15, 23, 42, .12);
    --vt-ease: cubic-bezier(.2, .7, .2, 1);
    --vt-header-h: 64px;
    --vt-bottom-nav-h: 0px;
    --vt-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------------------------------------------------------------- temel (yalnızca Vitrin sayfaları) */
.vt-page {
    margin: 0;
    background: var(--vt-bg);
    color: var(--vt-text);
    font: 400 15px/1.55 var(--vt-font-body);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
}
.vt-page *, .vt-page *::before, .vt-page *::after,
.vt-scope, .vt-scope *, .vt-scope *::before, .vt-scope *::after { box-sizing: border-box; }
:where(.vt-page) img { max-width: 100%; height: auto; display: block; }
:where(.vt-page) a { color: inherit; text-decoration: none; }
:where(.vt-page) :is(h1, h2, h3, p) { margin: 0; }
:where(.vt-page) button { font: inherit; color: inherit; }
.vt-scope h1, .vt-scope h2, .vt-scope h3, .vt-scope h4 { font-family: var(--vt-font-head); letter-spacing: -.01em; }

.vt-wrap { width: 100%; max-width: var(--vt-container); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .vt-wrap { padding-inline: 24px; } }

.vi { width: 1em; height: 1em; fill: currentColor; flex: none; display: inline-block; vertical-align: -.125em; }

.vt-sr { 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-skip { position: fixed; left: 12px; top: -60px; z-index: 1000; background: var(--vt-dark); color: #fff !important; padding: 10px 14px; border-radius: var(--vt-radius-sm); transition: top .2s; }
.vt-skip:focus { top: 12px; }

.vt-scope :focus-visible { outline: 3px solid color-mix(in srgb, var(--vt-primary) 45%, transparent); outline-offset: 2px; }

/* ---------------------------------------------------------------- butonlar */
.vt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 48px; padding: 0 22px; border-radius: var(--vt-radius-pill);
    font: 600 15px/1 var(--vt-font-body); border: 1px solid transparent; cursor: pointer;
    transition: transform .2s var(--vt-ease), box-shadow .2s, background-color .2s, color .2s;
    text-decoration: none !important; white-space: nowrap;
}
.vt-btn:active { transform: scale(.97); }
.vt-btn--primary { background: var(--vt-primary); color: #fff !important; }
.vt-btn--primary:hover { background: var(--vt-primary-strong); transform: translateY(-1px); }
.vt-btn--ghost { background: #fff; color: var(--vt-text) !important; border-color: var(--vt-line); }
.vt-btn--ghost:hover { border-color: var(--vt-primary); color: var(--vt-primary) !important; }
.vt-btn .vi { transition: transform .2s var(--vt-ease); }
.vt-btn:hover .vi--go { transform: translateX(3px); }

/* ---------------------------------------------------------------- duyuru çubuğu */
.vt-topbar { background: var(--vt-dark); color: rgba(255, 255, 255, .88); font-size: 13px; }
.vt-topbar .vt-wrap { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 36px; }
.vt-topbar__text { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-topbar__contact { display: none; gap: 16px; margin-left: auto; }
.vt-topbar__contact a { display: inline-flex; align-items: center; gap: 6px; color: #fff !important; text-decoration: none; opacity: .9; }
.vt-topbar__contact a:hover { opacity: 1; }
@media (min-width: 992px) {
    .vt-topbar .vt-wrap { justify-content: space-between; }
    .vt-topbar__contact { display: flex; }
}

/* ---------------------------------------------------------------- üst alan */
.vt-header { background: #fff; border-bottom: 1px solid var(--vt-line); z-index: 900; transition: box-shadow .25s; }
.vt-header.is-sticky { position: sticky; top: 0; }
.vt-header.is-scrolled { box-shadow: 0 6px 24px rgba(15, 23, 42, .08); }
.vt-header__row { display: flex; align-items: center; gap: 10px; min-height: var(--vt-header-h); }
.vt-logo { display: inline-flex; align-items: center; min-width: 0; margin-right: auto; text-decoration: none !important; }
.vt-logo img { height: calc(var(--vt-logo-h) * .82); width: auto; max-width: 180px; object-fit: contain; }
.vt-logo__text { font: 800 20px/1.1 var(--vt-font-head); color: var(--vt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; }
.vt-iconbtn {
    position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 44px; height: 44px; padding: 0 6px; border: 0; background: transparent; border-radius: var(--vt-radius-sm);
    color: var(--vt-text) !important; cursor: pointer; text-decoration: none !important; font-size: 11px; line-height: 1;
}
.vt-iconbtn .vi { font-size: 21px; }
.vt-iconbtn:hover { background: var(--vt-bg); }
.vt-iconbtn__label { display: none; }
.vt-badge {
    position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--vt-accent); color: #111; font: 700 11px/18px var(--vt-font-body); text-align: center;
}
.vt-badge.is-bump { animation: vt-bump .5s var(--vt-ease); }
.vt-header__desktop-only { display: none; }

.vt-search { position: relative; flex: 1 1 auto; }
.vt-search input {
    width: 100%; height: 46px; padding: 0 52px 0 44px; border: 1.5px solid var(--vt-line); border-radius: var(--vt-radius-pill);
    background: var(--vt-bg); font: 400 15px/1 var(--vt-font-body); color: var(--vt-text); outline: none;
    transition: border-color .2s, background-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.vt-search input:focus { border-color: var(--vt-primary); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--vt-primary) 14%, transparent); }
.vt-search > .vi { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--vt-muted); font-size: 17px; pointer-events: none; }
.vt-search button {
    position: absolute; right: 4px; top: 4px; height: 38px; width: 42px; border: 0; border-radius: var(--vt-radius-pill);
    background: var(--vt-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.vt-header__search-row { padding-bottom: 10px; }

@media (min-width: 992px) {
    :root { --vt-header-h: 80px; }
    .vt-header__menu-btn { display: none !important; }
    .vt-header__search-row { display: none; }
    .vt-header__desktop-only { display: block; }
    .vt-header__row { gap: 24px; }
    .vt-logo { margin-right: 0; }
    .vt-logo img { height: var(--vt-logo-h); max-width: 240px; }
    .vt-iconbtn { min-width: 64px; height: 52px; }
    .vt-iconbtn__label { display: block; }
    .vt-header .vt-search { max-width: 640px; margin-inline: auto; }
}

/* ---------------------------------------------------------------- masaüstü kategori menüsü */
.vt-nav { display: none; border-top: 1px solid var(--vt-line); background: #fff; }
@media (min-width: 992px) { .vt-nav { display: block; } }
.vt-nav__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.vt-nav__list::-webkit-scrollbar { display: none; }
.vt-nav__item { position: relative; }
.vt-nav__link {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 12px; white-space: nowrap;
    font-weight: 600; font-size: 14px; color: var(--vt-text) !important; text-decoration: none !important; position: relative;
}
.vt-nav__link .vi { color: var(--vt-primary); }
.vt-nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--vt-primary); transform: scaleX(0); transition: transform .25s var(--vt-ease); }
.vt-nav__link:hover::after, .vt-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.vt-nav__link--all { background: var(--vt-primary); color: #fff !important; border-radius: var(--vt-radius-sm); margin: 6px 8px 6px 0; padding: 8px 14px; }
.vt-nav__link--all .vi { color: #fff; }
.vt-nav__link--all::after { display: none; }

/* ---------------------------------------------------------------- çekmece (kategoriler) */
.vt-drawer { position: fixed; inset: 0; z-index: 1100; visibility: hidden; }
.vt-drawer.is-open { visibility: visible; }
.vt-drawer__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); opacity: 0; transition: opacity .3s; }
.vt-drawer.is-open .vt-drawer__backdrop { opacity: 1; }
.vt-drawer__panel {
    position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 380px); background: #fff; display: flex; flex-direction: column;
    transform: translateX(-100%); transition: transform .32s var(--vt-ease); box-shadow: var(--vt-shadow-lg);
    padding-bottom: var(--vt-safe-b);
}
.vt-drawer.is-open .vt-drawer__panel { transform: none; }
.vt-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--vt-line); }
.vt-drawer__head strong { font: 700 17px/1 var(--vt-font-head); }
.vt-drawer__body { overflow-y: auto; overscroll-behavior: contain; flex: 1; padding: 8px 0 24px; }
.vt-drawer__title { padding: 16px 18px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--vt-muted); }
.vt-drawer details { border-bottom: 1px solid var(--vt-line); }
.vt-drawer summary { list-style: none; }
.vt-drawer summary::-webkit-details-marker { display: none; }
.vt-drawer__link {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; color: var(--vt-text) !important;
    text-decoration: none !important; font-weight: 600; cursor: pointer;
}
.vt-drawer__link .vt-catico { width: 34px; height: 34px; font-size: 16px; }
.vt-drawer__link small { margin-left: auto; color: var(--vt-muted); font-weight: 500; }
.vt-drawer__link .vt-chev { margin-left: 8px; color: var(--vt-muted); transition: transform .25s var(--vt-ease); }
.vt-drawer details[open] .vt-chev { transform: rotate(180deg); }
.vt-drawer__sub { padding: 0 18px 12px 64px; display: grid; gap: 2px; }
.vt-drawer__sub a { padding: 8px 0; color: var(--vt-muted) !important; text-decoration: none !important; }
.vt-drawer__plain { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 18px; color: var(--vt-text) !important; text-decoration: none !important; }

/* ---------------------------------------------------------------- mobil alt gezinme */
.vt-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px);
    border-top: 1px solid var(--vt-line); padding-bottom: var(--vt-safe-b);
    transition: transform .3s var(--vt-ease);
}
.vt-bottomnav.is-hidden { transform: translateY(110%); }
.vt-bottomnav a, .vt-bottomnav button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 58px; border: 0; background: none; color: var(--vt-muted) !important; font-size: 11px; font-weight: 600;
    text-decoration: none !important; cursor: pointer;
}
.vt-bottomnav .vi { font-size: 20px; }
.vt-bottomnav [aria-current="page"] { color: var(--vt-primary) !important; }
.vt-bottomnav .vt-badge { top: 6px; right: calc(50% - 22px); }
body.vt-has-bottomnav { padding-bottom: calc(58px + var(--vt-safe-b)); }
@media (min-width: 992px) {
    .vt-bottomnav { display: none; }
    body.vt-has-bottomnav { padding-bottom: 0; }
}

/* ---------------------------------------------------------------- bölümler */
.vt-main { display: block; }
.vt-section { padding-block: 28px; }
@media (min-width: 992px) { .vt-section { padding-block: 44px; } }
.vt-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.vt-section__title { font: 800 21px/1.2 var(--vt-font-head); color: var(--vt-text); }
.vt-section__sub { color: var(--vt-muted); font-size: 14px; margin-top: 4px !important; }
.vt-section__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--vt-primary) !important; white-space: nowrap; text-decoration: none !important; }
.vt-section__more:hover .vi { transform: translateX(3px); }
.vt-section__more .vi { transition: transform .2s var(--vt-ease); }
@media (min-width: 992px) { .vt-section__title { font-size: 28px; } .vt-section__head { margin-bottom: 22px; } }

/* ---------------------------------------------------------------- karşılama */
.vt-hero { position: relative; overflow: hidden; padding-block: 28px 32px; background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--vt-primary) 16%, transparent) 0%, transparent 60%),
    radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--vt-accent) 14%, transparent) 0%, transparent 60%),
    #fff; }
.vt-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.vt-hero__grid > * { min-width: 0; }
.vt-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--vt-radius-pill); background: var(--vt-primary-soft); color: var(--vt-primary); font-weight: 700; font-size: 13px; }
.vt-hero__eyebrow .vt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vt-primary); box-shadow: 0 0 0 0 color-mix(in srgb, var(--vt-primary) 50%, transparent); animation: vt-pulse 2s infinite; }
.vt-hero h1 { font: 800 clamp(28px, 7.4vw, 54px)/1.08 var(--vt-font-head); margin: 14px 0 12px; color: var(--vt-text); letter-spacing: -.02em; text-wrap: balance; }
.vt-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--vt-primary), color-mix(in srgb, var(--vt-primary) 50%, var(--vt-accent))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vt-hero__sub { color: var(--vt-muted); font-size: 16px; max-width: 46ch; text-wrap: pretty; }
.vt-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.vt-hero__cta .vt-btn { flex: 1 1 auto; }
.vt-stats { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.vt-stat { flex: 1 1 0; min-width: 90px; padding: 10px 12px; background: rgba(255, 255, 255, .8); border: 1px solid var(--vt-line); border-radius: var(--vt-radius-sm); }
.vt-stat strong { display: block; font: 800 20px/1.1 var(--vt-font-head); color: var(--vt-text); font-variant-numeric: tabular-nums; }
.vt-stat span { font-size: 12px; color: var(--vt-muted); }
.vt-hero__media { position: relative; }
.vt-hero__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: calc(var(--vt-radius) * 1.4); box-shadow: var(--vt-shadow-lg); background: #fff; }
.vt-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vt-collage a { position: relative; display: block; aspect-ratio: 1/1; background: #fff; border-radius: var(--vt-radius); box-shadow: var(--vt-shadow); overflow: hidden; }
.vt-collage img { width: 100%; height: 100%; object-fit: contain; padding: 10%; transition: transform .5s var(--vt-ease); }
.vt-collage a:hover img { transform: scale(1.06); }
.vt-collage a:nth-child(2), .vt-collage a:nth-child(4) { transform: translateY(18px); }
.vt-collage__price { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: var(--vt-radius-pill); background: var(--vt-dark); color: #fff; font-size: 12px; font-weight: 700; }
@media (min-width: 992px) {
    .vt-hero { padding-block: 56px 64px; }
    .vt-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; }
    .vt-hero__cta .vt-btn { flex: 0 0 auto; }
    .vt-hero__sub { font-size: 18px; }
    .vt-collage { gap: 16px; }
}
@media (max-width: 575.98px) {
    .vt-collage { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .vt-collage a:nth-child(2), .vt-collage a:nth-child(4) { transform: none; }
    .vt-collage__price { display: none; }
}

/* ---------------------------------------------------------------- güven çubuğu */
.vt-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vt-trust__item { display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); }
.vt-trust__icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: var(--vt-radius-sm); background: var(--vt-primary-soft); color: var(--vt-primary); font-size: 19px; }
.vt-trust__item strong { display: block; font-size: 14px; line-height: 1.25; }
.vt-trust__item strong + span { display: block; font-size: 12px; color: var(--vt-muted); line-height: 1.35; }
@media (min-width: 992px) { .vt-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .vt-trust__item { padding: 18px; } }
@media (max-width: 400px) { .vt-trust__item span span { display: none; } .vt-trust__item { padding: 12px; gap: 10px; } }

/* ---------------------------------------------------------------- kategoriler */
.vt-catico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--vt-primary-soft); color: var(--vt-primary); font-size: 24px; transition: transform .3s var(--vt-ease), background-color .3s, color .3s; }
.vt-cats { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 84px; gap: 14px 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
.vt-cats::-webkit-scrollbar { display: none; }
.vt-cats--one-row { grid-template-rows: auto; }
.vt-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; scroll-snap-align: start; text-decoration: none !important; color: var(--vt-text) !important; }
.vt-cat__name { font-size: 12.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-cat__count { font-size: 11px; color: var(--vt-muted); margin-top: -4px; }
.vt-cat:hover .vt-catico { background: var(--vt-primary); color: #fff; transform: translateY(-3px) rotate(-4deg); }
@media (min-width: 768px) {
    .vt-cats { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; gap: 14px; }
    .vt-cat { padding: 18px 10px 14px; background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); transition: border-color .25s, box-shadow .25s, transform .25s var(--vt-ease); }
    .vt-cat:hover { border-color: color-mix(in srgb, var(--vt-primary) 40%, var(--vt-line)); box-shadow: var(--vt-shadow); transform: translateY(-2px); }
    .vt-cat__name { font-size: 14px; }
}
.vt-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.vt-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--vt-radius-pill); background: #fff; border: 1px solid var(--vt-line); font-weight: 600; font-size: 14px; color: var(--vt-text) !important; text-decoration: none !important; transition: all .2s; }
.vt-pill .vi { color: var(--vt-primary); }
.vt-pill:hover { background: var(--vt-primary); border-color: var(--vt-primary); color: #fff !important; }
.vt-pill:hover .vi { color: #fff; }

/* ---------------------------------------------------------------- ürün listeleri */
.vt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 576px) { .vt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 992px) { .vt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1200px) { .vt-grid { grid-template-columns: repeat(var(--vt-cols, 6), minmax(0, 1fr)); } }

.vt-rail-wrap { position: relative; }
.vt-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 2px 16px 10px; margin-inline: -16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.vt-rail::-webkit-scrollbar { display: none; }
.vt-rail > * { scroll-snap-align: start; }
@media (min-width: 576px) { .vt-rail { grid-auto-columns: 30%; gap: 14px; } }
@media (min-width: 992px) { .vt-rail { grid-auto-columns: calc((100% - 4 * 18px) / 5); gap: 18px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }
@media (min-width: 1200px) { .vt-rail { grid-auto-columns: calc((100% - 5 * 18px) / 6); } }
.vt-rail-btn {
    display: none; position: absolute; top: 38%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--vt-line);
    background: #fff; box-shadow: var(--vt-shadow); align-items: center; justify-content: center; cursor: pointer; color: var(--vt-text);
    transition: opacity .2s, transform .2s var(--vt-ease);
}
.vt-rail-btn:hover { transform: scale(1.06); color: var(--vt-primary); }
.vt-rail-btn[disabled] { opacity: 0; pointer-events: none; }
.vt-rail-btn--prev { left: -18px; }
.vt-rail-btn--next { right: -18px; }
@media (min-width: 992px) and (hover: hover) { .vt-rail-btn { display: inline-flex; } }

/* ---------------------------------------------------------------- ürün kartı */
.vt-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--vt-card); border: 1px solid var(--vt-line); border-radius: var(--vt-radius); overflow: hidden; transition: transform .3s var(--vt-ease), box-shadow .3s, border-color .3s; }
@media (hover: hover) {
    .vt-card:hover { transform: translateY(-4px); box-shadow: var(--vt-shadow-lg); border-color: transparent; }
    .vt-card:hover .vt-card__img img { transform: scale(1.06); }
    .vt-card:hover .vt-card__cta { opacity: 1; transform: none; }
}
.vt-card__img { position: relative; aspect-ratio: var(--vt-img-ratio); background: #fff; overflow: hidden; }
.vt-card__img img { width: 100%; height: 100%; object-fit: var(--vt-img-fit); transition: transform .5s var(--vt-ease), opacity .4s; }
.vt-card__img img { padding: var(--vt-img-pad, 0); }
.vt-card__img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #f1f5f9 30%, #f8fafc 50%, #f1f5f9 70%); background-size: 200% 100%; animation: vt-shimmer 1.2s linear infinite; }
.vt-card__img.is-loaded::before { display: none; }
.vt-card__img img { position: relative; }
.vt-card__badges { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.vt-tag { padding: 3px 8px; border-radius: var(--vt-radius-pill); font-size: 11.5px; font-weight: 800; line-height: 1.4; }
.vt-tag--sale { background: var(--vt-accent); color: #111; }
.vt-tag--new { background: var(--vt-dark); color: #fff; }
.vt-wish {
    position: absolute; top: 6px; right: 6px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(15, 23, 42, .12); color: var(--vt-muted); display: grid; place-items: center; font-size: 16px;
    transition: transform .2s var(--vt-ease), color .2s;
}
.vt-wish .vi--on { display: none; }
.vt-wish[aria-pressed="true"] { color: #e11d48; }
.vt-wish[aria-pressed="true"] .vi--on { display: inline-block; }
.vt-wish[aria-pressed="true"] .vi--off { display: none; }
.vt-wish.is-pop { animation: vt-pop .45s var(--vt-ease); }
.vt-card__body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; }
.vt-card__brand { font-size: 11.5px; font-weight: 700; color: var(--vt-primary); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-card__name { font: 600 13.5px/1.35 var(--vt-font-body) !important; color: var(--vt-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; margin: 0 !important; letter-spacing: 0 !important; }
.vt-card__link { color: inherit !important; text-decoration: none !important; }
.vt-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vt-card__price { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.vt-card__now { font: 800 17px/1.2 var(--vt-font-head); color: var(--vt-text); font-variant-numeric: tabular-nums; }
.vt-card__old { font-size: 12.5px; color: var(--vt-muted); text-decoration: line-through; }
.vt-card__ask { font-size: 13.5px; font-weight: 700; color: var(--vt-primary); }
.vt-card__cta { display: none; }
@media (min-width: 992px) {
    .vt-card__body { padding: 12px 14px 14px; }
    .vt-card__name { font-size: 14px !important; }
    .vt-card__now { font-size: 19px; }
    .vt-card__cta { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; margin-top: 8px; border-radius: var(--vt-radius-sm); background: var(--vt-primary-soft); color: var(--vt-primary); font-weight: 700; font-size: 13.5px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s var(--vt-ease); }
}
@media (hover: none) { .vt-card__cta { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- indirim bandı */
.vt-deals { background: linear-gradient(135deg, var(--vt-dark), color-mix(in srgb, var(--vt-dark) 70%, var(--vt-primary))); color: #fff; }
.vt-deals .vt-section__title { color: #fff; }
.vt-deals .vt-section__sub { color: rgba(255, 255, 255, .7); }
.vt-deals .vt-section__more { color: var(--vt-accent) !important; }
.vt-deals .vt-section__title .vi { color: var(--vt-accent); }
.vt-deals .vt-card { border-color: transparent; }

/* ---------------------------------------------------------------- markalar */
.vt-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vt-marquee__track { display: flex; gap: 12px; width: max-content; animation: vt-marquee var(--vt-marquee-dur, 40s) linear infinite; }
.vt-marquee:hover .vt-marquee__track, .vt-marquee:focus-within .vt-marquee__track { animation-play-state: paused; }
.vt-brand { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); font: 800 15px/1 var(--vt-font-head); color: var(--vt-text) !important; text-decoration: none !important; letter-spacing: .02em; white-space: nowrap; transition: color .2s, border-color .2s; }
.vt-brand:hover { color: var(--vt-primary) !important; border-color: var(--vt-primary); }

/* ---------------------------------------------------------------- tanıtım (SEO) */
.vt-about { background: #fff; border: 1px solid var(--vt-line); border-radius: calc(var(--vt-radius) * 1.2); padding: 22px; }
.vt-about h2 { font: 800 20px/1.25 var(--vt-font-head); margin-bottom: 10px; }
.vt-about__text { color: #334155; font-size: 15px; line-height: 1.7; white-space: pre-line; }
.vt-about__more { position: relative; }
.vt-about.is-collapsible:not(.is-open) .vt-about__more { max-height: 8.5em; overflow: hidden; }
.vt-about.is-collapsible:not(.is-open) .vt-about__more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4em; background: linear-gradient(transparent, #fff); }
.vt-about__toggle { margin-top: 10px; border: 0; background: none; color: var(--vt-primary); font-weight: 700; cursor: pointer; padding: 6px 0; display: none; }
.vt-about.is-collapsible .vt-about__toggle { display: inline-flex; }
.vt-about h3 { font: 700 15px/1.3 var(--vt-font-head); margin: 18px 0 8px; }
.vt-about__links { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; margin: 0; list-style: none; }
.vt-about__links a { color: var(--vt-primary) !important; font-size: 14px; text-decoration: none; }
.vt-about__links a:hover { text-decoration: underline; }
@media (min-width: 992px) { .vt-about { padding: 32px 36px; } .vt-about h2 { font-size: 24px; } }

/* ---------------------------------------------------------------- alt bilgi */
.vt-footer { background: var(--vt-dark); color: rgba(255, 255, 255, .72); font-size: 14px; margin-top: 24px; }
.vt-footer a { color: rgba(255, 255, 255, .78) !important; text-decoration: none !important; transition: color .2s; }
.vt-footer a:hover { color: #fff !important; }
.vt-footer__grid { display: grid; gap: 4px; padding-block: 32px 20px; }
.vt-footer__brand { padding-bottom: 18px; }
.vt-footer__name { font: 800 20px/1.2 var(--vt-font-head); color: #fff; margin-bottom: 10px; }
.vt-footer__brand p { line-height: 1.6; margin: 0 0 14px; }
.vt-footer__contact { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.vt-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.vt-footer__contact .vi { margin-top: 3px; color: var(--vt-accent); }
.vt-footer details { border-top: 1px solid rgba(255, 255, 255, .1); }
.vt-footer summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; color: #fff; font-weight: 700; cursor: pointer; }
.vt-footer summary::-webkit-details-marker { display: none; }
.vt-footer summary .vi { transition: transform .25s var(--vt-ease); }
.vt-footer details[open] summary .vi { transform: rotate(180deg); }
.vt-footer__links { list-style: none; padding: 0 0 14px; margin: 0; display: grid; gap: 10px; }
.vt-social { display: flex; gap: 8px; margin-top: 16px; }
.vt-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); font-size: 17px; }
.vt-social a:hover { background: var(--vt-primary); }
.vt-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; font-size: 13px; }
.vt-pay { display: flex; gap: 8px; align-items: center; font-size: 30px; color: rgba(255, 255, 255, .85); }
.vt-pay__troy { font: 900 12px/1 var(--vt-font-head); letter-spacing: .06em; padding: 5px 7px; border: 1.5px solid currentColor; border-radius: 4px; }
@media (min-width: 768px) {
    .vt-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-block: 48px 32px; }
    .vt-footer details { border: 0; }
    .vt-footer summary { min-height: auto; margin-bottom: 14px; cursor: default; pointer-events: none; }
    .vt-footer summary .vi { display: none; }
    .vt-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ---------------------------------------------------------------- yukarı çık, bildirim */
.vt-totop { position: fixed; right: 16px; bottom: calc(74px + var(--vt-safe-b)); z-index: 940; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--vt-dark); color: #fff; box-shadow: var(--vt-shadow-lg); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .3s, transform .3s var(--vt-ease); }
.vt-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 992px) { .vt-totop { bottom: 24px; right: 24px; } }
.vt-toast { position: fixed; left: 50%; bottom: calc(80px + var(--vt-safe-b)); z-index: 1200; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: var(--vt-radius-pill); background: var(--vt-dark); color: #fff; font-weight: 600; font-size: 14px; box-shadow: var(--vt-shadow-lg); transition: opacity .25s, transform .3s var(--vt-ease); white-space: nowrap; }
.vt-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 992px) { .vt-toast { bottom: 32px; } }

/* ---------------------------------------------------------------- animasyonlar */
@keyframes vt-shimmer { to { background-position: -200% 0; } }
@keyframes vt-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vt-primary) 50%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes vt-marquee { to { transform: translateX(calc(-50% - 6px)); } }
@keyframes vt-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes vt-bump { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes vt-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes vt-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* JS çalışmazsa her şey görünür kalır: gizleme yalnızca html.vt-anim varken */
.vt-anim .vt-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--vt-ease), transform .7s var(--vt-ease); transition-delay: calc(var(--i, 0) * 60ms); }
.vt-anim .vt-reveal.is-in { opacity: 1; transform: none; }
/* Karşılama metni ve görseli animasyonsuz: ilk ekrandaki en büyük içerik (LCP) bekletilmez */
.vt-anim .vt-collage a:nth-child(odd) img { animation: vt-float 6s ease-in-out infinite; }
.vt-anim .vt-collage a:nth-child(even) img { animation: vt-float 6s 1.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .vt-scope *, .vt-scope *::before, .vt-scope *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .vt-marquee__track { flex-wrap: wrap; width: auto; }
    .vt-marquee__dup { display: none !important; }
    .vt-marquee { mask-image: none; -webkit-mask-image: none; }
}

/* ---------------------------------------------------------------- taşma güvenliği (uzun ürün / kategori adları) */
.vt-page { overflow-x: clip; }
.vt-trust__item > span:last-child { min-width: 0; }
.vt-hero h1 { overflow-wrap: anywhere; hyphens: auto; }
.vt-stat { min-width: 0; }
@media (max-width: 575.98px) { .vt-stats { flex-wrap: nowrap; } .vt-stat { padding: 8px 10px; } .vt-stat strong { font-size: 18px; } }

/* ================================================================ düzeltmeler */
/* Arama: tek odak halkası (outline + box-shadow çift çiziliyordu) */
.vt-search input:focus-visible { outline: none; }
/* Default iç sayfalarında Bootstrap kenar boşlukları ve yazı tipi Vitrin parçalarına karışmasın */
.vt-scope { font-family: var(--vt-font-body); line-height: 1.55; }
:where(.vt-scope) :is(p, ul, ol, dl, figure, fieldset) { margin: 0; }
:where(.vt-scope) :is(ul, ol) { padding: 0; }
:where(.vt-scope) a { text-decoration: none; }
.vt-topbar__text { margin: 0 !important; line-height: 36px; }
[v-cloak] .vt-variants, [v-cloak] .vt-alert, [v-cloak] .vt-vonly { display: none; }
.vt-buy__add { min-width: 0; }

/* ================================================================ sayfa yolu */
.vt-crumbs { padding-block: 14px 4px; font-size: 13px; color: var(--vt-muted); }
.vt-crumbs ol { display: flex; flex-wrap: nowrap; gap: 6px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.vt-crumbs ol::-webkit-scrollbar { display: none; }
.vt-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.vt-crumbs li + li::before { content: "›"; color: #cbd5e1; }
.vt-crumbs a { color: var(--vt-muted) !important; }
.vt-crumbs a:hover { color: var(--vt-primary) !important; }
.vt-crumbs [aria-current] { color: var(--vt-text); font-weight: 600; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================ ürün listesi */
.vt-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px 14px; }
.vt-listhead__main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vt-listhead__icon { width: 52px; height: 52px; font-size: 22px; flex: none; }
.vt-listhead__title { font: 800 clamp(22px, 5.5vw, 32px)/1.15 var(--vt-font-head); color: var(--vt-text); margin: 0; overflow-wrap: anywhere; }
.vt-listhead__count { color: var(--vt-muted); font-size: 14px; margin-top: 4px !important; }
.vt-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; margin-inline: -16px; padding-inline: 16px; }
.vt-chips::-webkit-scrollbar { display: none; }
.vt-chips .vt-pill { white-space: nowrap; }
@media (min-width: 768px) { .vt-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }

.vt-toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 0 12px; }
.vt-toolbar .vt-btn { min-height: 44px; padding: 0 16px; }
.vt-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--vt-primary); color: #fff; font-size: 12px; font-weight: 700; }
.vt-sort select {
    height: 44px; padding: 0 38px 0 14px; border: 1px solid var(--vt-line); border-radius: var(--vt-radius-pill); background: #fff; color: var(--vt-text);
    font: 600 14px/1 var(--vt-font-body); cursor: pointer; -webkit-appearance: none; appearance: none; max-width: 56vw;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
}
.vt-sort select:focus-visible { outline: none; border-color: var(--vt-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vt-primary) 14%, transparent); }
.vt-active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 12px; }
.vt-pill.is-active { background: var(--vt-primary-soft); border-color: transparent; color: var(--vt-primary) !important; }
.vt-pill.is-active .vi { font-size: 11px; }
.vt-active-filters__clear { font-size: 13px; font-weight: 700; color: var(--vt-muted) !important; text-decoration: underline !important; }
.vt-grid--list { margin-top: 4px; }
.vt-empty { text-align: center; padding: 48px 16px; background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); }
.vt-empty .vt-catico { margin: 0 auto 14px; }
.vt-empty h2 { font: 800 22px/1.2 var(--vt-font-head); margin-bottom: 6px; }
.vt-empty p { color: var(--vt-muted); margin-bottom: 18px !important; }

.vt-pager-wrap { padding-block: 28px 8px; }
.vt-pager { display: flex; align-items: center; justify-content: center; gap: 8px; }
.vt-pager__btn, .vt-pager__num { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--vt-radius-pill); border: 1px solid var(--vt-line); background: #fff; color: var(--vt-text) !important; font-weight: 700; font-size: 14px; }
.vt-pager__btn:hover, .vt-pager__num:hover { border-color: var(--vt-primary); color: var(--vt-primary) !important; }
.vt-pager__num.is-current { background: var(--vt-primary); border-color: var(--vt-primary); color: #fff !important; }
.vt-pager__btn.is-disabled { opacity: .4; }
.vt-pager__nums { display: none; list-style: none; margin: 0; padding: 0; gap: 6px; }
.vt-pager__gap { padding: 0 4px; color: var(--vt-muted); }
.vt-pager__info { font-size: 14px; color: var(--vt-muted); font-weight: 600; }
@media (min-width: 768px) { .vt-pager__nums { display: flex; } .vt-pager__info { display: none; } }
@media (max-width: 380px) { .vt-pager__txt { display: none; } }

/* sağdan açılan çekmece + filtre formu */
.vt-drawer--right .vt-drawer__panel { left: auto; right: 0; transform: translateX(100%); }
.vt-drawer--right.is-open .vt-drawer__panel { transform: none; }
.vt-filter { display: flex; flex-direction: column; height: 100%; }
.vt-filter__group { border: 0; padding: 14px 0; border-bottom: 1px solid var(--vt-line); min-width: 0; }
.vt-filter__group legend { font: 700 15px/1.2 var(--vt-font-head); margin-bottom: 12px; padding: 0; float: none; width: auto; }
.vt-filter__price { display: flex; align-items: center; gap: 8px; }
.vt-filter__price label { flex: 1; }
.vt-filter__price input, .vt-qty input { width: 100%; height: 46px; padding: 0 12px; border: 1.5px solid var(--vt-line); border-radius: var(--vt-radius-sm); font: 500 15px/1 var(--vt-font-body); color: var(--vt-text); background: #fff; }
.vt-filter__price input:focus, .vt-qty input:focus { outline: none; border-color: var(--vt-primary); }
.vt-filter__hint { font-size: 12px; color: var(--vt-muted); margin-top: 6px !important; }
.vt-check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 15px; }
.vt-check input { width: 20px; height: 20px; accent-color: var(--vt-primary); margin: 0; }
.vt-filter__foot { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 12px 18px calc(12px + var(--vt-safe-b)); border-top: 1px solid var(--vt-line); background: #fff; }

/* ================================================================ ürün detayı */
.vt-pd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 8px 24px; }
@media (min-width: 992px) { .vt-pd { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; padding-block: 12px 40px; align-items: start; } }

.vt-gallery { position: relative; }
.vt-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--vt-radius); background: #fff; border: 1px solid var(--vt-line); margin-inline: -16px; border-radius: 0; border-inline: 0; }
.vt-gallery__track::-webkit-scrollbar { display: none; }
.vt-gallery__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1/1; display: grid; place-items: center; margin: 0; }
.vt-gallery__slide img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.vt-gallery__badge { position: absolute; top: 12px; left: 0; }
.vt-gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.vt-gallery__thumb { flex: 0 0 64px; height: 64px; padding: 4px; border: 2px solid var(--vt-line); border-radius: var(--vt-radius-sm); background: #fff; cursor: pointer; }
.vt-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.vt-gallery__thumb.is-active { border-color: var(--vt-primary); }
@media (min-width: 768px) {
    .vt-gallery__track { margin-inline: 0; border-radius: var(--vt-radius); border-inline: 1px solid var(--vt-line); }
    .vt-gallery__badge { left: 12px; }
    .vt-gallery__thumb { flex-basis: 80px; height: 80px; }
}
@media (min-width: 992px) { .vt-gallery { position: sticky; top: calc(var(--vt-header-h) + 70px); } }

.vt-pd__brand { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--vt-primary) !important; margin-bottom: 6px; }
.vt-pd__title { font: 800 clamp(22px, 5.4vw, 32px)/1.2 var(--vt-font-head); color: var(--vt-text); margin: 0 0 10px; overflow-wrap: anywhere; }
.vt-pd__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--vt-muted); margin-bottom: 16px; }
.vt-pd__meta a { color: var(--vt-primary) !important; font-weight: 600; }
.vt-pd__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 16px 0; border-block: 1px solid var(--vt-line); }
.vt-pd__now { font: 800 clamp(28px, 7vw, 36px)/1 var(--vt-font-head); color: var(--vt-text); font-variant-numeric: tabular-nums; }
.vt-pd__old { font-size: 16px; color: var(--vt-muted); }
.vt-pd__tax { flex-basis: 100%; font-size: 13px; color: var(--vt-muted); }
.vt-pd__ask { font: 700 18px/1.3 var(--vt-font-head); color: var(--vt-primary); }
.vt-stock { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px !important; font-weight: 700; font-size: 14px; }
.vt-stock.is-in { color: #15803d; }
.vt-stock.is-out { color: #b91c1c; }

.vt-buy { padding-top: 16px; }
.vt-variants { margin-bottom: 14px; }
.vt-variants__label { font-weight: 700; font-size: 14px; margin-bottom: 8px !important; }
.vt-variants__list { display: flex; flex-wrap: wrap; gap: 8px; }
.vt-variant { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--vt-line); border-radius: var(--vt-radius-sm); background: #fff; font-weight: 600; cursor: pointer; transition: border-color .2s, background-color .2s; }
.vt-variant:hover { border-color: var(--vt-primary); }
.vt-variant.is-active { border-color: var(--vt-primary); background: var(--vt-primary-soft); color: var(--vt-primary); }
.vt-variant:disabled { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.vt-buy__row { display: flex; gap: 10px; }
.vt-qty { display: flex; align-items: center; border: 1.5px solid var(--vt-line); border-radius: var(--vt-radius-pill); background: #fff; overflow: hidden; flex: none; }
.vt-qty button { width: 44px; height: 48px; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--vt-text); }
.vt-qty button:hover { color: var(--vt-primary); }
.vt-qty input { width: 48px; height: 48px; border: 0; padding: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.vt-qty input::-webkit-inner-spin-button, .vt-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.vt-buy__add { flex: 1; min-height: 52px; font-size: 16px; }
.vt-btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.vt-btn--wa { width: 100%; margin-top: 10px; background: #fff; border-color: #25d366; color: #128c4b !important; min-height: 50px; }
.vt-btn--wa:hover { background: #25d366; color: #fff !important; }
.vt-alert { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: var(--vt-radius-sm); font-weight: 600; font-size: 14px; }
.vt-alert.is-success { background: #ecfdf5; color: #065f46; }
.vt-alert.is-error { background: #fef2f2; color: #991b1b; }
.vt-alert a { color: inherit !important; text-decoration: underline !important; }
.vt-pd__perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 18px 0 0 !important; padding: 0; }
.vt-pd__perks li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; text-align: center; font-size: 12px; font-weight: 700; background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius-sm); }
.vt-pd__perks .vi { font-size: 18px; color: var(--vt-primary); }
.vt-share { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--vt-muted); }
.vt-share a, .vt-share button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--vt-line); background: #fff; color: var(--vt-text) !important; cursor: pointer; }
.vt-share a:hover, .vt-share button:hover { border-color: var(--vt-primary); color: var(--vt-primary) !important; }

/* mobilde altta sabit satın alma çubuğu (alt gezinmenin üstünde) */
.vt-buybar { display: none; }
@media (max-width: 991.98px) {
    .vt-buybar { position: fixed; left: 0; right: 0; bottom: calc(58px + var(--vt-safe-b)); z-index: 945; display: flex; transform: translateY(160%); transition: transform .3s var(--vt-ease); align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-top: 1px solid var(--vt-line); box-shadow: 0 -6px 20px rgba(15, 23, 42, .08); }
    .vt-buybar.is-visible { transform: none; }
    .vt-buybar__price { flex: 1; min-width: 0; line-height: 1.2; }
    .vt-buybar__price strong { display: block; font: 800 18px/1.2 var(--vt-font-head); }
    .vt-buybar__price del { font-size: 12px; color: var(--vt-muted); }
    .vt-buybar .vt-btn { min-height: 46px; padding: 0 18px; }
    body:has(.vt-buybar) { padding-bottom: calc(58px + 68px + var(--vt-safe-b)); }
    body:has(.vt-buybar) .vt-totop { bottom: calc(140px + var(--vt-safe-b)); }
}

.vt-pd__details { display: grid; gap: 16px; padding-bottom: 8px; }
@media (min-width: 992px) { .vt-pd__details { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.vt-specs { display: grid; gap: 0; margin: 0; }
.vt-specs div { display: grid; grid-template-columns: 40% 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--vt-line); font-size: 14px; }
.vt-specs dt { color: var(--vt-muted); font-weight: 600; }
.vt-specs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.vt-specs a { color: var(--vt-primary) !important; }
.vt-pd__note { font-size: 12px; color: var(--vt-muted); margin-top: 12px !important; }

/* ================================================================ ürün bilgileri (satın alma kutusunun altında) */
.vt-acc { margin-top: 18px; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); background: #fff; overflow: hidden; }
.vt-acc__item + .vt-acc__item { border-top: 1px solid var(--vt-line); }
.vt-acc__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 18px; cursor: pointer; }
.vt-acc__item summary::-webkit-details-marker { display: none; }
.vt-acc__item summary h2 { font: 700 16px/1.3 var(--vt-font-head) !important; margin: 0 !important; color: var(--vt-text); }
.vt-acc__item summary:hover h2 { color: var(--vt-primary); }
.vt-acc__chev { color: var(--vt-muted); transition: transform .25s var(--vt-ease); }
.vt-acc__item[open] .vt-acc__chev { transform: rotate(180deg); }
.vt-acc__body { padding: 0 18px 18px; }
.vt-acc .vt-about__text { font-size: 15px; }
.vt-clamp.is-clamped:not(.is-open) { max-height: 7.2em; overflow: hidden; position: relative; }
.vt-clamp.is-clamped:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3em; background: linear-gradient(transparent, #fff); }
.vt-clamp__toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 0; border: 0; background: none; color: var(--vt-primary); font-weight: 700; font-size: 14px; cursor: pointer; }
.vt-clamp__toggle[aria-expanded="true"] .vi { transform: rotate(180deg); }
.vt-perklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vt-perklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--vt-muted); }
.vt-perklist .vi { color: var(--vt-primary); font-size: 18px; margin-top: 2px; }
.vt-perklist strong { color: var(--vt-text); }
.vt-pd__note a { color: var(--vt-primary) !important; }

/* ================================================================ ödeme */
.vt-co-head { background: #fff; border-bottom: 1px solid var(--vt-line); }
.vt-co-head__row { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.vt-co-head .vt-logo img { height: 36px; }
.vt-co-head__secure { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; font-weight: 700; color: #15803d; }
.vt-co-head__back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--vt-muted) !important; }
@media (max-width: 575.98px) { .vt-co-head__secure { display: none; } .vt-co-head__back { margin-left: auto; } }
.vt-co { padding-bottom: 32px; }
.vt-co__title { font: 800 26px/1.2 var(--vt-font-head); margin: 20px 0 14px; }
.vt-co__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) { .vt-co__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; } .vt-co__title { font-size: 30px; } }
[v-cloak] .vt-co__grid, [v-cloak] .vt-co-bar, [v-cloak] .vt-co-mobsum { visibility: hidden; }

.vt-co-step { background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); padding: 18px; margin-bottom: 14px; scroll-margin-top: 16px; }
@media (min-width: 768px) { .vt-co-step { padding: 24px; } }
.vt-co-step__title { display: flex; align-items: center; gap: 10px; font: 700 18px/1.2 var(--vt-font-head); margin: 0 0 16px; }
.vt-co-step__num { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--vt-primary-soft); color: var(--vt-primary); font-size: 14px; font-weight: 800; transition: background-color .25s, color .25s; }
.vt-co-step__num.is-done { background: #16a34a; color: #fff; font-size: 0; }
.vt-co-step__num.is-done::before { content: "✓"; font-size: 15px; }
.vt-co-step__note { margin-top: 10px !important; font-size: 14px; color: var(--vt-muted); }
.vt-co-step__note a { color: var(--vt-primary) !important; font-weight: 700; }
.vt-co-loading { color: var(--vt-muted); font-size: 14px; }

.vt-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vt-field__label { font-size: 13px; font-weight: 700; color: var(--vt-text); }
.vt-field input, .vt-field select, .vt-field textarea {
    width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--vt-line); border-radius: var(--vt-radius-sm);
    background: #fff; color: var(--vt-text); font: 400 16px/1.4 var(--vt-font-body); -webkit-appearance: none; appearance: none;
    transition: border-color .2s, box-shadow .2s;
}
.vt-field select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; }
.vt-field textarea { min-height: 96px; resize: vertical; }
.vt-field input:focus, .vt-field select:focus, .vt-field textarea:focus { outline: none; border-color: var(--vt-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vt-primary) 14%, transparent); }
.vt-field .is-invalid { border-color: #dc2626; background-color: #fffafa; }
.vt-field__hint { font-size: 12.5px; color: var(--vt-muted); }
.vt-field__error { font-size: 12.5px; font-weight: 600; color: #dc2626; }
.vt-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.vt-field--full { grid-column: 1 / -1; }
@media (max-width: 380px) { .vt-form-grid { grid-template-columns: minmax(0, 1fr); } }

.vt-addr-list { display: grid; gap: 10px; }
.vt-addr { display: flex; align-items: stretch; border: 1.5px solid var(--vt-line); border-radius: var(--vt-radius-sm); background: #fff; transition: border-color .2s, background-color .2s; }
.vt-addr.is-selected { border-color: var(--vt-primary); background: var(--vt-primary-soft); }
.vt-addr__pick { flex: 1; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 0; background: none; text-align: left; cursor: pointer; min-width: 0; }
.vt-addr__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 14px; color: var(--vt-muted); }
.vt-addr__body strong { color: var(--vt-text); font-size: 15px; }
.vt-addr__body span { overflow-wrap: anywhere; }
.vt-addr__edit { border: 0; background: none; padding: 0 14px; color: var(--vt-primary); font-weight: 700; font-size: 13px; cursor: pointer; }
.vt-addr-add { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border: 1.5px dashed #cbd5e1; border-radius: var(--vt-radius-sm); background: #fff; color: var(--vt-primary); font-weight: 700; cursor: pointer; }
.vt-addr-add:hover { border-color: var(--vt-primary); background: var(--vt-primary-soft); }
.vt-radio { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff; margin-top: 1px; transition: border-color .2s, box-shadow .2s; }
.is-selected .vt-radio, [aria-checked="true"] > .vt-radio { border-color: var(--vt-primary); box-shadow: inset 0 0 0 4px #fff; background: var(--vt-primary); }

.vt-addr-form { margin-top: 12px; padding: 16px; border: 1.5px solid var(--vt-line); border-radius: var(--vt-radius-sm); background: #fcfcfd; }
.vt-addr-list + .vt-addr-form, .vt-co-loading + .vt-addr-form { margin-top: 12px; }
.vt-co-step > .vt-addr-form:first-of-type { margin-top: 0; }
.vt-addr-form__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.vt-addr-form__head strong { font-size: 15px; }
.vt-addr-form__close { border: 0; background: none; color: var(--vt-muted); font-weight: 700; cursor: pointer; padding: 6px 0; }
.vt-addr-form__save { width: 100%; margin-top: 16px; min-height: 52px; }
.vt-seg { display: inline-flex; padding: 4px; background: var(--vt-bg); border-radius: var(--vt-radius-pill); margin-bottom: 14px; }
.vt-seg button { min-height: 38px; padding: 0 18px; border: 0; border-radius: var(--vt-radius-pill); background: none; font-weight: 700; font-size: 14px; color: var(--vt-muted); cursor: pointer; }
.vt-seg button.is-active { background: #fff; color: var(--vt-text); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.vt-check--box { padding: 4px 0; font-size: 15px; align-items: flex-start; }
.vt-check--box input { margin-top: 2px; flex: none; }
.vt-check--box a { color: var(--vt-primary) !important; font-weight: 600; text-decoration: underline !important; }
#vt-step-invoice .vt-addr-list, #vt-step-invoice .vt-addr-form { margin-top: 12px; }

.vt-opts { display: grid; gap: 10px; }
.vt-opt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border: 1.5px solid var(--vt-line); border-radius: var(--vt-radius-sm); background: #fff; text-align: left; cursor: pointer; font-size: 15px; transition: border-color .2s, background-color .2s; }
.vt-opt.is-selected { border-color: var(--vt-primary); background: var(--vt-primary-soft); }
.vt-opt__name { flex: 1; font-weight: 700; }
.vt-opt__price { font-weight: 700; color: var(--vt-text); font-size: 14px; }
.vt-payform { margin-top: 14px; padding: 16px; border: 1px solid var(--vt-line); border-radius: var(--vt-radius-sm); background: #fcfcfd; }
.vt-payform input, .vt-payform select { max-width: 100%; }

.vt-co-step--confirm { display: grid; gap: 14px; }
.vt-co-submit { width: 100%; min-height: 56px; font-size: 17px; }
.vt-co-missing { display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: none; color: #b45309; font-weight: 700; font-size: 14px; cursor: pointer; padding: 4px; }
.vt-co-errlist { margin: 6px 0 0 18px !important; padding: 0; font-weight: 500; }

.vt-co-sum__box { background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); padding: 18px; }
@media (min-width: 992px) { .vt-co-sum { position: sticky; top: 16px; } }
.vt-co-sum__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.vt-co-sum__head h2 { font: 700 18px/1.2 var(--vt-font-head); margin: 0; }
.vt-co-sum__head a { font-size: 13px; font-weight: 700; color: var(--vt-primary) !important; }
.vt-co-items { list-style: none; margin: 0; padding: 8px 8px 2px 0; display: grid; gap: 12px; max-height: 340px; overflow-y: auto; }
.vt-co-items li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; }
.vt-co-items__img { position: relative; width: 56px; height: 56px; border: 1px solid var(--vt-line); border-radius: var(--vt-radius-sm); background: #fff; }
.vt-co-items__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.vt-co-items__img b { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--vt-dark); color: #fff; font-size: 11px; display: grid; place-items: center; }
.vt-co-items__name { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-co-items__price { font-weight: 700; white-space: nowrap; }
.vt-co-totals { margin: 16px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--vt-line); display: grid; gap: 8px; }
.vt-co-totals div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.vt-co-totals dt { color: var(--vt-muted); }
.vt-co-totals dd { margin: 0; font-weight: 600; }
.vt-co-totals .is-discount { color: #16a34a; }
.vt-co-totals__grand { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--vt-line); font-size: 18px !important; }
.vt-co-totals__grand dt { color: var(--vt-text); font-weight: 700; }
.vt-co-totals__grand dd { font: 800 20px/1.2 var(--vt-font-head); }
.vt-co-trust { list-style: none; margin: 14px 0 0 !important; padding: 0; display: grid; gap: 8px; font-size: 12.5px; color: var(--vt-muted); }
.vt-co-trust li { display: flex; gap: 8px; align-items: center; }
.vt-co-trust .vi { color: #16a34a; }

/* mobil: özet üstte açılır, onay altta sabit */
.vt-co-mobsum { display: none; }
@media (max-width: 991.98px) {
    .vt-co-mobsum { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; margin-bottom: 12px; border: 1px solid var(--vt-line); border-radius: var(--vt-radius-sm); background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
    .vt-co-mobsum span { display: inline-flex; gap: 8px; align-items: center; color: var(--vt-primary); }
    .vt-co-sum { display: none; order: -1; }
    .vt-co-sum.is-open { display: block; }
    .vt-co-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + var(--vt-safe-b)); background: #fff; border-top: 1px solid var(--vt-line); box-shadow: 0 -6px 20px rgba(15, 23, 42, .08); }
    .vt-co-bar > div { flex: 1; line-height: 1.2; }
    .vt-co-bar small { display: block; font-size: 12px; color: var(--vt-muted); }
    .vt-co-bar strong { font: 800 19px/1.2 var(--vt-font-head); }
    .vt-co-bar .vt-btn { min-height: 50px; padding: 0 22px; }
    .vt-co { padding-bottom: calc(96px + var(--vt-safe-b)); }
}
.vt-co-bar { display: none; }
@media (max-width: 991.98px) { .vt-co-bar { display: flex; } }
.vt-co-foot { border-top: 1px solid var(--vt-line); background: #fff; padding-block: 18px; font-size: 13px; }
.vt-co-foot .vt-wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--vt-muted); }
.vt-co-foot a { color: var(--vt-muted) !important; }
@media (max-width: 991.98px) { .vt-co-foot { padding-bottom: calc(96px + var(--vt-safe-b)); } }

/* ================================================================ sıralama: masaüstü etiket, mobil alt sayfa */
.vt-sortbar { display: none; align-items: center; gap: 6px; flex-wrap: wrap; }
.vt-sortbar__label { font-size: 13px; font-weight: 700; color: var(--vt-muted); margin-right: 2px; }
.vt-sortbar__opt { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--vt-radius-pill); font-size: 13.5px; font-weight: 600; color: var(--vt-text) !important; border: 1px solid transparent; }
.vt-sortbar__opt:hover { background: #fff; border-color: var(--vt-line); }
.vt-sortbar__opt.is-active { background: var(--vt-dark); color: #fff !important; }
.vt-toolbar__sort span { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 992px) {
    .vt-sortbar { display: flex; }
    .vt-toolbar__sort { display: none !important; }
    .vt-toolbar { justify-content: flex-start; gap: 16px; }
}
@media (max-width: 991.98px) { .vt-toolbar > .vt-btn { flex: 1; } }

/* alttan açılan sayfa (mobil); filtre çekmecesi de mobilde alttan açılır */
.vt-drawer--sheet .vt-drawer__panel,
.vt-drawer--right .vt-drawer__panel { transition: transform .34s var(--vt-ease); }
.vt-drawer--sheet .vt-drawer__panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 82vh; border-radius: 20px 20px 0 0; transform: translateY(100%); }
.vt-drawer--sheet.is-open .vt-drawer__panel { transform: none; }
@media (max-width: 767.98px) {
    .vt-drawer--right .vt-drawer__panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: 88vh; border-radius: 20px 20px 0 0; transform: translateY(100%); }
    .vt-drawer--right.is-open .vt-drawer__panel { transform: none; }
    .vt-drawer--right .vt-drawer__panel::before { content: ""; display: block; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: #cbd5e1; }
}
@media (min-width: 768px) {
    .vt-drawer--sheet .vt-drawer__panel { left: 50%; right: auto; bottom: auto; top: 50%; width: min(420px, 92vw); border-radius: var(--vt-radius); transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: transform .25s var(--vt-ease), opacity .2s; }
    .vt-drawer--sheet.is-open .vt-drawer__panel { transform: translate(-50%, -50%); opacity: 1; }
}
.vt-sheet__grip { display: block; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: #cbd5e1; }
@media (min-width: 768px) { .vt-sheet__grip { display: none; } }
.vt-sheet__list { list-style: none; margin: 0; padding: 6px 0 calc(12px + var(--vt-safe-b)); overflow-y: auto; }
.vt-sheet__opt { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 20px; font-size: 16px; font-weight: 600; color: var(--vt-text) !important; }
.vt-sheet__opt:active { background: var(--vt-bg); }
.vt-sheet__opt.is-active { color: var(--vt-primary) !important; }
.vt-sheet__opt .vi { font-size: 18px; }

/* ================================================================ sepete ekleme: durumlar ve efektler */
.vt-buy__add { position: relative; overflow: hidden; isolation: isolate; }
.vt-buy__state { display: inline-flex; align-items: center; justify-content: center; gap: .5em; transition: opacity .2s, transform .3s var(--vt-ease); }
.vt-buy__state--load, .vt-buy__state--done { position: absolute; inset: 0; opacity: 0; transform: translateY(60%); pointer-events: none; }
.vt-buy__add.is-loading .vt-buy__state--idle, .vt-buy__add.is-done .vt-buy__state--idle { opacity: 0; transform: translateY(-60%); }
.vt-buy__add.is-loading .vt-buy__state--load { opacity: 1; transform: none; }
.vt-buy__add.is-done { background: #16a34a !important; }
.vt-buy__add.is-done .vt-buy__state--done { opacity: 1; transform: none; }
.vt-buy__add.is-done .vt-buy__state--done .vi { animation: vt-pop .45s var(--vt-ease); }
/* basınca dalga efekti */
.vt-buy__add::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at center, rgba(255, 255, 255, .35) 0, transparent 60%); opacity: 0; transform: scale(.3); transition: opacity .5s, transform .5s; }
.vt-buy__add:active::after { opacity: 1; transform: scale(1.6); transition: 0s; }
.vt-buy__add.is-shake { animation: vt-shake .45s cubic-bezier(.36, .07, .19, .97); }
.vt-buy__add:disabled { cursor: not-allowed; }
.vt-buy__hint { margin-top: 8px !important; font-size: 13px; font-weight: 700; color: #c2410c; }
.vt-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: vt-spin .7s linear infinite; }

.vt-variants__label strong { color: var(--vt-primary); }
.vt-variant { transition: border-color .2s, background-color .2s, transform .15s var(--vt-ease); }
.vt-variant:active { transform: scale(.95); }
.vt-variant.is-active { animation: vt-pop .3s var(--vt-ease); }
.vt-qty button:disabled { opacity: .3; cursor: not-allowed; }
.vt-qty button:not(:disabled):active { transform: scale(.85); }
.vt-qty input { transition: transform .15s; }

/* görsel sepete uçar; sepet ikonu ve rozet tepki verir */
.vt-fly { position: fixed; z-index: 2000; object-fit: contain; background: #fff; padding: 6px; box-shadow: 0 12px 32px rgba(15, 23, 42, .25); pointer-events: none; will-change: transform, opacity; }
[data-vt-basket-link].is-hit .vi { animation: vt-cart-hit .5s var(--vt-ease); }

/* sepete eklendi sayfası */
.vt-added .vt-drawer__panel { max-width: 100%; }
.vt-added__body { padding: 8px 20px calc(20px + var(--vt-safe-b)); text-align: center; }
.vt-added__check { width: 56px; height: 56px; margin: 8px auto 10px; border-radius: 50%; display: grid; place-items: center; background: #dcfce7; color: #16a34a; font-size: 24px; }
.vt-added.is-open .vt-added__check { animation: vt-pop .5s .1s var(--vt-ease) both; }
.vt-added__title { font: 800 19px/1.3 var(--vt-font-head); margin-bottom: 14px !important; }
.vt-added__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--vt-line); border-radius: var(--vt-radius-sm); text-align: left; }
.vt-added__item img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: #fff; }
.vt-added__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; font-size: 14px; }
.vt-added__meta { display: block; font-size: 13px; color: var(--vt-muted); margin-top: 2px; }
.vt-added__item strong { font: 800 15px/1.2 var(--vt-font-head); white-space: nowrap; }
.vt-added__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.vt-added__actions .vt-btn { min-height: 50px; padding: 0 12px; }
.vt-added { z-index: 1150; }
.vt-added.is-open .vt-drawer__panel { transition-delay: 0s; }
@media (min-width: 768px) { .vt-added .vt-drawer__panel { width: min(460px, 92vw); } }

.vt-fade-enter-active, .vt-fade-leave-active { transition: opacity .25s, transform .25s var(--vt-ease); }
.vt-fade-enter-from, .vt-fade-leave-to { opacity: 0; transform: translateY(-6px); }

@keyframes vt-spin { to { transform: rotate(360deg); } }
@keyframes vt-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes vt-cart-hit { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-10deg); } 60% { transform: scale(.9) rotate(6deg); } 100% { transform: scale(1); } }

/* ================================================================ anasayfa: kompakt kategori şeridi */
.vt-section--tight { padding-block: 18px 6px; }
.vt-section--tight .vt-section__head { margin-bottom: 10px; }
@media (min-width: 992px) { .vt-section--tight { padding-block: 26px 8px; } .vt-section--tight .vt-section__title { font-size: 22px; } }
.vt-catrail { grid-auto-columns: max-content !important; gap: 8px !important; padding-block: 2px 6px; }
.vt-catchip { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px 0 8px; background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius-pill); color: var(--vt-text) !important; white-space: nowrap; transition: border-color .2s, box-shadow .2s, transform .2s var(--vt-ease); }
.vt-catchip__ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--vt-primary-soft); color: var(--vt-primary); font-size: 18px; transition: background-color .25s, color .25s, transform .3s var(--vt-ease); }
.vt-catchip__txt { display: flex; flex-direction: column; line-height: 1.15; }
.vt-catchip__name { font-weight: 700; font-size: 14px; }
.vt-catchip__count { font-size: 11.5px; color: var(--vt-muted); }
.vt-catchip:active { transform: scale(.97); }
@media (hover: hover) {
    .vt-catchip:hover { border-color: color-mix(in srgb, var(--vt-primary) 45%, var(--vt-line)); box-shadow: var(--vt-shadow); }
    .vt-catchip:hover .vt-catchip__ico { background: var(--vt-primary); color: #fff; transform: rotate(-8deg); }
}
.vt-rail-wrap:has(.vt-catrail) .vt-rail-btn { top: 6px; width: 44px; height: 44px; }

/* ================================================================ sepet */
.vt-cart { padding-bottom: 24px; }
[v-cloak] .vt-cart__grid, [v-cloak] .vt-empty, [v-cloak] .vt-cart__head span { visibility: hidden; }
.vt-cart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px 12px; }
.vt-cart__title { font: 800 24px/1.2 var(--vt-font-head); margin: 0; }
.vt-cart__title span { font-size: 16px; font-weight: 600; color: var(--vt-muted); }
.vt-cart__clear { border: 0; background: none; color: var(--vt-muted); font-weight: 700; font-size: 13px; cursor: pointer; padding: 8px 0; transition: color .2s; }
.vt-cart__clear.is-confirm { color: #dc2626; animation: vt-shake .4s; }
.vt-cart__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) { .vt-cart__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; } .vt-cart__title { font-size: 30px; } .vt-cart__sum { position: sticky; top: calc(var(--vt-header-h) + 64px); } }
.vt-cart__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vt-line { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px 14px; padding: 12px; background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); transition: opacity .25s, transform .3s var(--vt-ease), max-height .3s; max-height: 400px; }
.vt-line.is-busy { opacity: .6; }
.vt-line.is-leaving { opacity: 0; transform: translateX(40px); }
.vt-line__img { grid-row: span 2; width: 84px; height: 84px; border-radius: var(--vt-radius-sm); background: #fff; border: 1px solid var(--vt-line); overflow: hidden; }
.vt-line__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.vt-line__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vt-line__name { font-weight: 700; font-size: 14.5px; line-height: 1.35; color: var(--vt-text) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-line__name:hover { color: var(--vt-primary) !important; }
.vt-line__variant { font-size: 13px; color: var(--vt-muted); }
.vt-line__unit { font-size: 13px; color: var(--vt-muted); }
.vt-line__unit del { margin-left: 6px; }
.vt-line__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vt-line__total { margin-left: auto; font: 800 17px/1.2 var(--vt-font-head); white-space: nowrap; }
.vt-line__remove { display: none; border: 0; background: none; color: var(--vt-muted); font-size: 13px; font-weight: 700; cursor: pointer; align-items: center; gap: 4px; }
.vt-line__remove:hover { color: #dc2626; }
.vt-qty--sm button { width: 38px; height: 40px; font-size: 18px; }
.vt-qty--sm input { width: 40px; height: 40px; }
.vt-qty--sm button .vi { font-size: 13px; color: #dc2626; }
@media (min-width: 768px) {
    .vt-line { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; padding: 14px 16px; }
    .vt-line__img { grid-row: auto; width: 96px; height: 96px; }
    .vt-line__actions { flex-wrap: nowrap; }
    .vt-line__total { min-width: 110px; text-align: right; }
    .vt-line__remove { display: inline-flex; }
}
.vt-cart__sumtitle { font: 700 18px/1.2 var(--vt-font-head); margin: 0 0 14px; }
.vt-cart__save { display: flex; align-items: center; gap: 8px; margin-top: 12px !important; padding: 10px 12px; border-radius: var(--vt-radius-sm); background: #ecfdf5; color: #065f46; font-size: 13px; font-weight: 700; }
.vt-cart__go { width: 100%; min-height: 54px; margin-top: 16px; font-size: 16px; }
.vt-cart__continue { display: block; text-align: center; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--vt-primary) !important; }
@media (max-width: 991.98px) {
    .vt-cart__bar { bottom: calc(58px + var(--vt-safe-b)); padding-bottom: 10px; }
    .vt-cart { padding-bottom: calc(80px + var(--vt-safe-b)); }
    .vt-cart__sum .vt-cart__go { display: none; }
}

/* gizli öğeler her zaman gizli (bileşen display kuralları [hidden]'ı ezmesin) */
.vt-scope [hidden], .vt-page [hidden] { display: none !important; }
/* yüklenemeyen görsel yerine gelen yer tutucu */
img.is-noimg { object-fit: contain !important; background: #f1f5f9; }

/* ================================================================ kurumsal sayfalar */
.vt-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 8px 28px; }
@media (min-width: 992px) { .vt-doc { grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; } }
.vt-doc__nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 4px; }
.vt-doc__nav::-webkit-scrollbar { display: none; }
.vt-doc__nav a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--vt-radius-pill); background: #fff; border: 1px solid var(--vt-line); font-size: 14px; font-weight: 600; color: var(--vt-text) !important; white-space: nowrap; }
.vt-doc__nav a.is-active { background: var(--vt-dark); border-color: var(--vt-dark); color: #fff !important; }
@media (min-width: 992px) {
    .vt-doc__nav { position: sticky; top: calc(var(--vt-header-h) + 64px); flex-direction: column; gap: 2px; margin: 0; padding: 10px; overflow: visible; background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); }
    .vt-doc__nav a { border: 0; border-radius: var(--vt-radius-sm); min-height: 42px; background: none; }
    .vt-doc__nav a:hover { background: var(--vt-bg); }
    .vt-doc__nav a.is-active { background: var(--vt-primary-soft); color: var(--vt-primary) !important; }
}
.vt-doc__body { background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); padding: 20px; min-width: 0; }
@media (min-width: 768px) { .vt-doc__body { padding: 36px 40px; } }
.vt-doc__head { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--vt-line); }
.vt-doc__head h1 { font: 800 clamp(24px, 5.5vw, 32px)/1.2 var(--vt-font-head); margin: 0 0 8px; }
.vt-doc__head p { color: var(--vt-muted); font-size: 15px; }
.vt-prose { color: #334155; font-size: 15.5px; line-height: 1.75; max-width: 72ch; overflow-wrap: anywhere; }
.vt-prose > * + * { margin-top: 14px !important; }
.vt-prose h2 { font: 700 19px/1.35 var(--vt-font-head); color: var(--vt-text); margin-top: 30px !important; }
.vt-prose h3 { font: 700 16px/1.4 var(--vt-font-head); color: var(--vt-text); margin-top: 20px !important; }
.vt-prose ul { padding-left: 22px !important; }
.vt-prose li + li { margin-top: 6px; }
.vt-prose a { color: var(--vt-primary) !important; text-decoration: underline !important; text-underline-offset: 2px; }
.vt-prose strong { color: var(--vt-text); }
.vt-seller { display: grid; gap: 0; margin: 10px 0 0 !important; border: 1px solid var(--vt-line); border-radius: var(--vt-radius-sm); overflow: hidden; max-width: 560px; }
.vt-seller div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 14px; font-size: 14px; }
.vt-seller div:nth-child(odd) { background: var(--vt-bg); }
.vt-seller dt { color: var(--vt-muted); font-weight: 600; }
.vt-seller dd { margin: 0; color: var(--vt-text); font-weight: 600; }
@media (max-width: 420px) { .vt-seller div { grid-template-columns: 1fr; gap: 2px; } }
.vt-doc__links { display: flex !important; flex-wrap: wrap; gap: 8px 16px; list-style: none; padding: 0 !important; }
.vt-doc__links li + li { margin-top: 0; }
.vt-faq { display: grid; gap: 10px; }
.vt-faq__item { border: 1px solid var(--vt-line); border-radius: var(--vt-radius-sm); background: #fff; transition: border-color .2s; }
.vt-faq__item[open] { border-color: color-mix(in srgb, var(--vt-primary) 35%, var(--vt-line)); }
.vt-faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 0 18px; cursor: pointer; }
.vt-faq__item summary::-webkit-details-marker { display: none; }
.vt-faq__item summary h2 { font: 700 15.5px/1.35 var(--vt-font-head) !important; margin: 0 !important; color: var(--vt-text); }
.vt-faq__item[open] .vt-acc__chev { transform: rotate(180deg); }
.vt-faq__item .vt-prose { padding: 0 18px 18px; }
.vt-doc__contact { display: grid; gap: 4px; margin-top: 32px; padding: 20px; border-radius: var(--vt-radius); background: var(--vt-primary-soft); }
.vt-doc__contact strong { font: 700 17px/1.3 var(--vt-font-head); }
.vt-doc__contact span { color: var(--vt-muted); font-size: 14px; }
.vt-doc__contact-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vt-doc__contact-links .vt-btn { min-height: 44px; padding: 0 16px; font-size: 14px; }

/* ===== Hesabım ===== */
.vt-btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.vt-btn--danger { color: #b91c1c !important; }
.vt-btn--danger:hover, .vt-btn--danger.is-confirm { border-color: #dc2626; background: #fef2f2; color: #b91c1c !important; }
.vt-btn.is-busy { opacity: .75; pointer-events: none; }
.vt-acct__side { display: grid; gap: 10px; min-width: 0; }
.vt-acct__me { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); }
.vt-acct__me small { display: block; color: var(--vt-muted); font-size: 12.5px; }
.vt-acct__me strong { display: block; font: 700 15.5px/1.25 var(--vt-font-head); overflow-wrap: anywhere; }
.vt-acct__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--vt-primary); color: #fff; font: 800 18px/1 var(--vt-font-head); }
.vt-acct .vt-doc__nav a { gap: 10px; }
.vt-acct .vt-doc__nav .vi { width: 16px; height: 16px; opacity: .8; }
.vt-acct__logout { color: var(--vt-muted) !important; }
@media (max-width: 991.98px) { .vt-acct__me { display: none; } }
@media (min-width: 992px) { .vt-acct__side { position: sticky; top: calc(var(--vt-header-h) + 64px); } .vt-acct .vt-doc__nav { position: static; } }
.vt-acct__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--vt-line); }
.vt-acct__head h1 { font: 800 clamp(22px, 5vw, 30px)/1.2 var(--vt-font-head); margin: 0; }
.vt-acct__head p { color: var(--vt-muted); font-size: 14.5px; margin-top: 4px !important; }
.vt-acct .vt-alert { margin: 0 0 16px; justify-content: flex-start; align-items: center; }
.vt-acct__form { display: grid; gap: 18px; }
.vt-acct__actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
@media (max-width: 575.98px) { .vt-acct__actions .vt-btn { flex: 1 1 100%; } .vt-acct .vt-form-grid { grid-template-columns: minmax(0, 1fr); } }
.vt-acct__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.vt-acct__stats a { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); color: var(--vt-text) !important; text-decoration: none !important; transition: border-color .2s, transform .25s var(--vt-ease); }
.vt-acct__stats a:hover { border-color: var(--vt-primary); transform: translateY(-2px); }
.vt-acct__stats .vi { width: 20px; height: 20px; color: var(--vt-primary); }
.vt-acct__stats strong { font: 800 20px/1 var(--vt-font-head); margin-right: 4px; }
.vt-acct__more { border: 1px dashed var(--vt-line); border-radius: var(--vt-radius-sm); padding: 0 14px; }
.vt-acct__more[open] { padding-bottom: 14px; }
.vt-acct__more summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14.5px; list-style: none; }
.vt-acct__more summary::-webkit-details-marker { display: none; }
.vt-acct__more summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--vt-primary-soft); color: var(--vt-primary); font-weight: 800; transition: transform .25s var(--vt-ease); }
.vt-acct__more[open] summary::before { transform: rotate(45deg); }
.vt-acct__more summary small, .vt-field__label small { font-weight: 500; color: var(--vt-muted); }
.vt-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; margin: 0; }
.vt-seg label { position: relative; cursor: pointer; }
.vt-seg input { position: absolute; opacity: 0; pointer-events: none; }
.vt-seg span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--vt-line); border-radius: var(--vt-radius-sm); font-weight: 700; font-size: 14px; text-align: center; transition: border-color .2s, background-color .2s, color .2s; }
.vt-seg input:checked + span { border-color: var(--vt-primary); background: var(--vt-primary-soft); color: var(--vt-primary); }
.vt-seg input:focus-visible + span { outline: 2px solid var(--vt-primary); outline-offset: 2px; }
.vt-field select.is-loading { background-image: none; color: var(--vt-muted); }
.vt-empty--flat { border: 0; padding: 32px 8px; }

.vt-addrs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .vt-addrs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vt-addr { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); transition: border-color .2s, box-shadow .25s; }
.vt-addr:hover { border-color: color-mix(in srgb, var(--vt-primary) 40%, var(--vt-line)); }
.vt-addr__type { display: inline-flex; padding: 4px 10px; border-radius: var(--vt-radius-pill); background: var(--vt-primary-soft); color: var(--vt-primary); font-size: 12px; font-weight: 700; }
.vt-addr__type.is-invoice { background: #fef3c7; color: #92400e; }
.vt-addr__name { font: 700 16px/1.3 var(--vt-font-head); margin-top: 8px; }
.vt-addr__text { font-size: 14.5px; color: var(--vt-text); margin: 0 !important; }
.vt-addr__meta { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--vt-muted); margin: 2px 0 0 !important; }
.vt-addr__meta .vi { width: 13px; height: 13px; }
.vt-addr__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.vt-addr__actions form { margin: 0; }
.vt-addr--new { align-items: center; justify-content: center; min-height: 170px; border-style: dashed; color: var(--vt-primary) !important; text-decoration: none !important; gap: 10px; }
.vt-addr--new:hover { background: var(--vt-primary-soft); }
.vt-addr--new .vt-catico { width: 46px; height: 46px; font-size: 18px; }

.vt-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vt-order { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); color: var(--vt-text) !important; text-decoration: none !important; transition: border-color .2s, transform .25s var(--vt-ease); }
.vt-order:hover { border-color: var(--vt-primary); transform: translateY(-2px); }
.vt-order__ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--vt-bg); color: var(--vt-primary); }
.vt-order__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.vt-order__main strong { font: 700 15.5px/1.25 var(--vt-font-head); }
.vt-order__main small { color: var(--vt-muted); font-size: 13px; }
.vt-order__side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.vt-order__side b { font: 800 15.5px/1 var(--vt-font-head); white-space: nowrap; }
.vt-order__go { flex: none; width: 14px; height: 14px; color: var(--vt-muted); transition: transform .2s var(--vt-ease); }
.vt-order:hover .vt-order__go { transform: translateX(3px); color: var(--vt-primary); }
@media (max-width: 479.98px) { .vt-order__ic, .vt-order__go { display: none; } }
.vt-status { display: inline-flex; padding: 3px 9px; border-radius: var(--vt-radius-pill); font-size: 12px; font-weight: 700; white-space: nowrap; }
.vt-status.is-wait { background: #fef3c7; color: #92400e; }
.vt-status.is-go { background: #dbeafe; color: #1e40af; }
.vt-status.is-ok { background: #dcfce7; color: #166534; }
.vt-status.is-bad { background: #fee2e2; color: #991b1b; }

.vt-acct__back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--vt-muted) !important; text-decoration: none !important; margin-bottom: 14px; }
.vt-acct__back .vi { width: 12px; height: 12px; }
.vt-acct__back:hover { color: var(--vt-primary) !important; }
.vt-track { padding: 18px; border-radius: var(--vt-radius); background: var(--vt-bg); display: grid; gap: 12px; }
.vt-track__steps { --vt-step: 0; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-size: 12.5px; font-weight: 600; color: var(--vt-muted); }
.vt-track__steps::before, .vt-track__steps::after { content: ""; position: absolute; top: 15px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 3px; background: var(--vt-line); }
.vt-track__steps::after { background: var(--vt-primary); right: auto; width: calc(75% * var(--vt-step) / 3); transform-origin: left; animation: vt-trackfill 1s .2s var(--vt-ease) both; }
@keyframes vt-trackfill { from { transform: scaleX(0); } }
.vt-track__steps li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; }
.vt-track__steps li span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--vt-line); font-weight: 800; color: var(--vt-muted); transition: background-color .3s, border-color .3s, color .3s; }
.vt-track__steps li.is-done { color: var(--vt-text); }
.vt-track__steps li.is-done span { background: var(--vt-primary); border-color: var(--vt-primary); color: #fff; }
.vt-track__steps li.is-now span { box-shadow: 0 0 0 5px color-mix(in srgb, var(--vt-primary) 20%, transparent); }
.vt-track__now, .vt-track__cargo, .vt-track__note { font-size: 14px; margin: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vt-track__cargo a { font-weight: 700; }
.vt-track.is-cancelled { background: #fef2f2; color: #991b1b; }
.vt-acct__h2 { font: 800 18px/1.3 var(--vt-font-head); margin: 24px 0 10px; }
.vt-oitems { list-style: none; margin: 0; padding: 0; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); }
.vt-oitem { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.vt-oitem + .vt-oitem { border-top: 1px solid var(--vt-line); }
.vt-oitem img { flex: none; width: 64px; height: 64px; object-fit: contain; border-radius: var(--vt-radius-sm); background: #fff; border: 1px solid var(--vt-line); }
.vt-oitem__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.vt-oitem__main a, .vt-oitem__main span { font-weight: 700; font-size: 14.5px; color: var(--vt-text) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-oitem__main small { color: var(--vt-muted); font-size: 13px; }
.vt-oitem b { font: 800 15px/1 var(--vt-font-head); white-space: nowrap; }
.vt-acct__grid { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 768px) { .vt-acct__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vt-acct__box { padding: 16px; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); font-size: 14px; }
.vt-acct__box h2 { font: 700 15px/1.3 var(--vt-font-head); margin: 0 0 8px; }
.vt-acct__box p { margin: 0 !important; }
.vt-acct__sum dl { margin: 0; display: grid; gap: 8px; }
.vt-acct__sum dl div { display: flex; justify-content: space-between; gap: 10px; }
.vt-acct__sum dt { color: var(--vt-muted); font-weight: 500; }
.vt-acct__sum dd { margin: 0; font-weight: 700; }
.vt-acct__sum .is-save dd { color: #059669; }
.vt-acct__sum .is-total { padding-top: 8px; border-top: 1px solid var(--vt-line); font-size: 16px; }
.vt-acct__sum .is-total dt { color: var(--vt-text); font-weight: 700; }
.vt-acct .vt-doc__contact .vt-btn { justify-self: start; margin-top: 8px; min-height: 42px; }

/* ===== Şeritler: kenar soldurma, dikey kaymayı önleme, kategori şeridi mobil öncelikli ===== */
@property --vt-fl { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --vt-fr { syntax: '<length>'; inherits: false; initial-value: 0px; }
.vt-rail { overflow-y: hidden; --vt-fl: 0px; --vt-fr: 0px; transition: --vt-fl .3s, --vt-fr .3s;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--vt-fl), #000 calc(100% - var(--vt-fr)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--vt-fl), #000 calc(100% - var(--vt-fr)), transparent 100%); }
.vt-rail-wrap.has-prev .vt-rail { --vt-fl: 48px; }
.vt-rail-wrap.has-next .vt-rail { --vt-fr: 48px; }
@media (min-width: 992px) { .vt-rail-wrap.has-prev .vt-rail { --vt-fl: 96px; } .vt-rail-wrap.has-next .vt-rail { --vt-fr: 96px; } }
.vt-catrail { padding-block: 8px 12px !important; scroll-snap-type: x proximity; }
.vt-rail-wrap:has(.vt-catrail) .vt-rail-btn { top: 50%; margin-top: -24px; }
.vt-rail-wrap:has(.vt-catrail) .vt-rail-btn:hover { transform: scale(1.06); }
.vt-catchip { height: 50px; padding: 0 14px 0 6px; gap: 8px; }
.vt-catchip__ico { width: 36px; height: 36px; font-size: 16px; }
.vt-catchip__name { font-size: 13.5px; }
@media (min-width: 768px) { .vt-catchip { height: 56px; padding: 0 16px 0 8px; gap: 10px; } .vt-catchip__ico { width: 40px; height: 40px; font-size: 18px; } .vt-catchip__name { font-size: 14px; } }
@media (hover: hover) { .vt-catchip:hover { transform: none; } }

/* ===== Mobil sepet: alt menüye yapışık eylem çubuğu ve derli toplu ürün satırları ===== */
@media (max-width: 991.98px) {
    body:has(.vt-cart__bar) .vt-bottomnav, body:has(.vt-buybar) .vt-bottomnav { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .vt-cart__bar { bottom: calc(58px + var(--vt-safe-b)); padding: 10px 16px; box-shadow: none; border-top: 1px solid var(--vt-line); border-bottom: 1px solid var(--vt-line); }
    .vt-cart__bar strong { font-size: 18px; }
    .vt-cart__bar .vt-btn { min-height: 46px; padding: 0 20px; }
    .vt-buybar { box-shadow: none; border-bottom: 1px solid var(--vt-line); }
    .vt-cart { padding-bottom: calc(132px + var(--vt-safe-b)); }
}
@media (max-width: 767.98px) {
    .vt-line { grid-template-columns: 68px minmax(0, 1fr); gap: 8px 12px; padding: 10px; }
    .vt-line__img { width: 68px; height: 68px; grid-row: span 2; }
    .vt-line__img img { padding: 4px; }
    .vt-line__name { font-size: 13.5px; line-height: 1.3; }
    .vt-line__unit { font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 0 6px; }
    .vt-line__unit del { margin-left: 0; }
    .vt-line__actions { gap: 8px; flex-wrap: nowrap; }
    .vt-line__actions .vt-qty--sm button { width: 34px; height: 36px; font-size: 17px; }
    .vt-line__actions .vt-qty--sm input { width: 34px; height: 36px; font-size: 14px; }
    .vt-line__total { font-size: 15.5px; }
}
@media (max-width: 359.98px) { .vt-line__actions { flex-wrap: wrap; } .vt-line__total { margin-left: 0; } }

/* ===== Logo: amblem + mağaza adı (kare/yuvarlak logolar okunur olsun) ===== */
.vt-logo--lockup { gap: 10px; min-width: 0; }
.vt-logo--lockup .vt-logo__mark { flex: none; width: auto; height: calc(var(--vt-logo-h) * .86); max-width: 56px; aspect-ratio: auto; object-fit: contain; }
.vt-logo__lock { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.vt-logo__name { font: 800 17px/1.1 var(--vt-font-head); color: var(--vt-text); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.vt-logo__tag { margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--vt-muted); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
@media (min-width: 992px) {
    .vt-logo--lockup .vt-logo__mark { height: var(--vt-logo-h); max-width: 64px; }
    .vt-logo__name { font-size: 20px; max-width: 280px; }
    .vt-logo__tag { font-size: 12.5px; max-width: 280px; }
}
.vt-co-head .vt-logo--lockup .vt-logo__mark { height: 34px; }