/*
 * Spor (spor · outdoor · fitness · bisiklet) – Vitrin'in üstüne görünüm katmanı.
 * Enerjik: koyu karşılama, eğik büyük harf başlıklar, keskin köşeler, net fiyatlar.
 * Önce telefon. Renkler tema panelinden gelir.
 */

:root {
    --vt-bg: #f4f4f2;
    --vt-line: #e3e3df;
    --vt-text: #0c0a09;
    --vt-muted: #57534e;
}

/* ---------------------------------------------------------------- üst alan */
.vt-topbar { background: var(--vt-dark); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 700; }
.vt-nav__link { text-transform: uppercase; font-weight: 800; letter-spacing: .04em; font-size: 13px; }
.vt-nav__link::after { height: 3px; border-radius: 0; }

/* ---------------------------------------------------------------- butonlar ve başlıklar */
.vt-btn { text-transform: uppercase; font-weight: 800; letter-spacing: .06em; font-size: 13px; }
.vt-section__title { font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; }
.vt-section__more { text-transform: uppercase; font-weight: 800; font-size: 12px; }

/* ---------------------------------------------------------------- karşılama: koyu, çapraz vurgu */
.vt-hero {
    color: #fff;
    background:
        linear-gradient(115deg, transparent 0 72%, color-mix(in srgb, var(--vt-primary) 85%, transparent) 72% 79%, transparent 79%),
        radial-gradient(80% 80% at 100% 0%, color-mix(in srgb, var(--vt-primary) 35%, transparent) 0%, transparent 65%),
        var(--vt-dark);
}
.vt-hero h1 { color: #fff; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.02; }
.vt-hero h1 em { background: none; color: var(--vt-accent); }
.vt-hero__sub { color: rgba(255, 255, 255, .75); }
.vt-hero__eyebrow { background: var(--vt-accent); color: #111; border-radius: 0; text-transform: uppercase; font-weight: 800; letter-spacing: .06em; }
.vt-hero__eyebrow .vt-dot { background: #111; }
.vt-hero .vt-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .4); }
.vt-hero .vt-btn--ghost:hover { border-color: #fff; color: #fff !important; }
.vt-stat { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); border-radius: 0; }
.vt-stat strong { color: #fff; }
.vt-stat span { color: rgba(255, 255, 255, .64); }
.vt-collage a { border-radius: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.vt-collage__price { background: var(--vt-accent); color: #111; border-radius: 0; font-weight: 900; }
@media (max-width: 575.98px) { .vt-stats { display: none; } }

/* ---------------------------------------------------------------- kategoriler: kayan etiketler */
.vt-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 6px; }
.vt-pills::-webkit-scrollbar { display: none; }
.vt-pill { flex: none; text-transform: uppercase; font-weight: 800; font-size: 12px; letter-spacing: .04em; background: #fff; }
.vt-pill:hover { background: var(--vt-dark); border-color: var(--vt-dark); color: #fff; }
@media (min-width: 768px) { .vt-pills { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.vt-catchip__ico { background: var(--vt-dark); color: var(--vt-accent); }

/* ---------------------------------------------------------------- güven kutuları */
.vt-trust__item { background: #fff; border-color: transparent; border-left: 4px solid var(--vt-primary); }
.vt-trust__icon { background: none; color: var(--vt-primary); }
.vt-trust__item strong, .vt-trust__title { text-transform: uppercase; font-weight: 800; }

/* ---------------------------------------------------------------- ürün kartı */
.vt-card { border-color: transparent; }
.vt-card__img { background: #fff; border-bottom: 1px solid var(--vt-line); }
.vt-card__brand { color: var(--vt-text); font-weight: 800; letter-spacing: .06em; }
.vt-card__now { font-weight: 900; font-size: 17px; }
.vt-tag { border-radius: 0; text-transform: uppercase; font-style: italic; font-weight: 900; transform: skewX(-8deg); }
.vt-tag--new { background: var(--vt-dark); }
@media (hover: hover) { .vt-card:hover { box-shadow: 0 0 0 2px var(--vt-dark); } }

/* ---------------------------------------------------------------- indirim bandı */
.vt-deals { background: var(--vt-primary); }
.vt-deals .vt-section__title .vi { color: var(--vt-accent); }

/* ---------------------------------------------------------------- markalar, tanıtım */
.vt-brand { font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .02em; background: #fff; }

/* ---------------------------------------------------------------- ürün sayfası */
.vt-pd__title { font-weight: 900; }
.vt-pd__now { font-weight: 900; }