/* Commerce Sport — scope'lu tema CSS'i. Token'lar runtime'da [data-theme] üzerine basılır. */
[data-theme="commerce-sport"] {
  background: var(--colors-background);
  color: var(--colors-text);
  font-family: var(--fonts-body);
  --cs-container: 1280px;
}
[data-theme="commerce-sport"] * { box-sizing: border-box; }
[data-theme="commerce-sport"] .cs-container { max-width: var(--cs-container); margin: 0 auto; padding: 0 24px; }

/* Butonlar */
[data-theme="commerce-sport"] .cs-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: var(--radius-pill); font-weight: 700; text-decoration: none; border: 1px solid transparent; transition: transform .15s, opacity .15s; }
[data-theme="commerce-sport"] .cs-btn:hover { transform: translateY(-1px); }
[data-theme="commerce-sport"] .cs-btn--accent { background: var(--colors-accent); color: #fff; }
[data-theme="commerce-sport"] .cs-btn--ghost { background: transparent; color: var(--colors-text); border-color: var(--colors-border); }

/* Header */
[data-theme="commerce-sport"] .cs-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--colors-primary) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--colors-border); }
[data-theme="commerce-sport"] .cs-header__bar { display: flex; align-items: center; gap: 32px; height: 72px; }
[data-theme="commerce-sport"] .cs-header__logo { font-family: var(--fonts-heading); font-weight: 800; font-size: 22px; letter-spacing: .08em; color: var(--colors-text); text-decoration: none; }
[data-theme="commerce-sport"] .cs-header__nav { display: flex; gap: 28px; flex: 1; }
[data-theme="commerce-sport"] .cs-header__link { color: var(--colors-text); text-decoration: none; font-weight: 600; font-size: 14px; opacity: .85; }
[data-theme="commerce-sport"] .cs-header__link:hover { opacity: 1; color: var(--colors-accent); }
[data-theme="commerce-sport"] .cs-header[data-layout="center"] .cs-header__bar { justify-content: center; position: relative; }
[data-theme="commerce-sport"] .cs-header[data-layout="center"] .cs-header__logo { position: absolute; left: 50%; transform: translateX(-50%); }
[data-theme="commerce-sport"] .cs-header[data-layout="bold"] { background: var(--colors-accent); }
[data-theme="commerce-sport"] .cs-header[data-layout="bold"] .cs-header__link { color: #fff; }

/* Hero */
[data-theme="commerce-sport"] .cs-hero__eyebrow { color: var(--colors-accent); font-weight: 700; letter-spacing: .2em; font-size: 13px; }
[data-theme="commerce-sport"] .cs-hero__title { font-family: var(--fonts-heading); font-weight: 800; font-size: clamp(40px, 8vw, 104px); line-height: .95; margin: 16px 0; text-transform: uppercase; white-space: pre-line; }
[data-theme="commerce-sport"] .cs-hero__sub { color: var(--colors-muted); font-size: 18px; max-width: 46ch; }
[data-theme="commerce-sport"] .cs-hero__actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
[data-theme="commerce-sport"] .cs-hero__media { display: block; width: 100%; height: 100%; min-height: 420px; border-radius: var(--radius-lg); object-fit: cover; }
[data-theme="commerce-sport"] .cs-hero--split .cs-hero__split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 80px 24px; }
[data-theme="commerce-sport"] .cs-hero--overlay, [data-theme="commerce-sport"] .cs-hero--slider { position: relative; min-height: 80vh; display: grid; }
[data-theme="commerce-sport"] .cs-hero--overlay .cs-hero__media, [data-theme="commerce-sport"] .cs-hero--slider .cs-hero__media { position: absolute; inset: 0; border-radius: 0; min-height: 100%; }
[data-theme="commerce-sport"] .cs-hero__overlay { position: relative; z-index: 1; display: flex; align-items: flex-end; padding: 64px 24px; max-width: var(--cs-container); margin: 0 auto; width: 100%; background: linear-gradient(180deg, transparent, rgba(0,0,0,.6)); }
[data-theme="commerce-sport"] .cs-hero--minimal .cs-hero__copy { padding: 96px 0; text-align: center; }
[data-theme="commerce-sport"] .cs-hero--minimal .cs-hero__sub { margin: 0 auto; }
[data-theme="commerce-sport"] .cs-hero--minimal .cs-hero__actions { justify-content: center; }
[data-theme="commerce-sport"] .cs-hero__dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
[data-theme="commerce-sport"] .cs-hero__dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); }
[data-theme="commerce-sport"] .cs-hero__dots span.is-active { background: var(--colors-accent); width: 24px; border-radius: 4px; }

/* Products */
[data-theme="commerce-sport"] .cs-products { padding: 72px 0; }
[data-theme="commerce-sport"] .cs-products__head { margin-bottom: 32px; }
[data-theme="commerce-sport"] .cs-products__title { font-family: var(--fonts-heading); font-weight: 800; font-size: 34px; }
[data-theme="commerce-sport"] .cs-products__sub { color: var(--colors-muted); }
[data-theme="commerce-sport"] .cs-products__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
[data-theme="commerce-sport"] .cs-products[data-layout="grid3"] .cs-products__grid { grid-template-columns: repeat(3, 1fr); }
[data-theme="commerce-sport"] .cs-products[data-layout="carousel"] .cs-products__grid { grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; }
[data-theme="commerce-sport"] .cs-card { text-decoration: none; color: var(--colors-text); background: var(--colors-surface); border: 1px solid var(--colors-border); border-radius: var(--radius-md); overflow: hidden; scroll-snap-align: start; transition: transform .15s, border-color .15s; }
[data-theme="commerce-sport"] .cs-card:hover { transform: translateY(-4px); border-color: var(--colors-accent); }
[data-theme="commerce-sport"] .cs-card__media { position: relative; aspect-ratio: 4/5; background-size: cover; background-position: center; }
[data-theme="commerce-sport"] .cs-card__badge { position: absolute; top: 12px; left: 12px; background: var(--colors-accent); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); }
[data-theme="commerce-sport"] .cs-card__body { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
[data-theme="commerce-sport"] .cs-card__cat { color: var(--colors-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
[data-theme="commerce-sport"] .cs-card__name { font-weight: 700; }
[data-theme="commerce-sport"] .cs-card__price { font-weight: 800; color: var(--colors-accent); display: flex; gap: 8px; align-items: baseline; }
[data-theme="commerce-sport"] .cs-card__old { color: var(--colors-muted); font-weight: 400; font-size: 14px; }

/* Footer */
[data-theme="commerce-sport"] .cs-footer { border-top: 1px solid var(--colors-border); padding: 56px 0 28px; background: var(--colors-primary); }
[data-theme="commerce-sport"] .cs-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; margin-bottom: 40px; }
[data-theme="commerce-sport"] .cs-footer__logo { font-family: var(--fonts-heading); font-weight: 800; font-size: 24px; }
[data-theme="commerce-sport"] .cs-footer__tagline { color: var(--colors-muted); margin-top: 8px; }
[data-theme="commerce-sport"] .cs-footer__h { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
[data-theme="commerce-sport"] .cs-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
[data-theme="commerce-sport"] .cs-footer__col a { color: var(--colors-muted); text-decoration: none; font-size: 14px; }
[data-theme="commerce-sport"] .cs-footer__col a:hover { color: var(--colors-text); }
[data-theme="commerce-sport"] .cs-footer__bottom { color: var(--colors-muted); font-size: 13px; border-top: 1px solid var(--colors-border); padding-top: 20px; }

/* Responsive */
@media (max-width: 900px) {
  [data-theme="commerce-sport"] .cs-header__nav { display: none; }
  [data-theme="commerce-sport"] .cs-hero--split .cs-hero__split { grid-template-columns: 1fr; }
  [data-theme="commerce-sport"] .cs-products__grid { grid-template-columns: repeat(2, 1fr); }
  [data-theme="commerce-sport"] .cs-footer__grid { grid-template-columns: 1fr 1fr; }
}