/* ═══════════════════════════════════════════════════════════════════════
   ZEUS — sportif sneaker teması
   Önek: zs-   (tüm sınıflar bu önekle; başka temadan sınıf taşınmaz)

   Tasarım fikri: yüksek kontrast, geniş ve sıkışık başlıklar, nötr gri
   ürün zemini, tek bir enerjik vurgu rengi (volt). Mobilde önce tek
   kolon; kırılımlar min-width ile büyür (mobile-first).

   NOT: Renk/ölçü değerleri :root'a ThemeContext tarafından css_var ile
   basılır (theme.json). Buradaki değerler yalnızca YEDEKtir.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --c-ink:#0B0B0C; --c-volt:#D7FF3E; --c-bg:#FFFFFF; --c-surface:#F4F4F5;
  --c-muted:#6B6B70; --c-line:#E4E4E7; --c-sale:#E01B24;
  --container:1440px; --radius:4px;
  --card-ratio:1 / 1;
  --ff-display:'Archivo',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gap:16px;
  --pad-x:16px;
}
@media (min-width:768px){ :root{ --gap:20px; --pad-x:24px; } }
@media (min-width:1200px){ :root{ --pad-x:40px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body.zs{
  margin:0; background:var(--c-bg); color:var(--c-ink);
  font-family:var(--ff-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

/* ── Tipografi ─────────────────────────────────────────────────────── */
.zs-h1,.zs-h2,.zs-h3{
  font-family:var(--ff-display); font-weight:800; letter-spacing:-.02em;
  line-height:1.02; margin:0; text-wrap:balance;
}
body.zs-caps .zs-h1, body.zs-caps .zs-h2, body.zs-caps .zs-h3{ text-transform:uppercase; }
body.zs-ital .zs-h1, body.zs-ital .zs-h2, body.zs-ital .zs-h3{ font-style:italic; }
.zs-h1{ font-size:clamp(32px,8vw,72px); }
.zs-h2{ font-size:clamp(24px,5vw,44px); }
.zs-h3{ font-size:clamp(18px,3vw,26px); }
.zs-eyebrow{
  font-family:var(--ff-display); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--c-muted);
}

/* ── Kapsayıcı ─────────────────────────────────────────────────────── */
.zs-wrap{ width:100%; padding-inline:var(--pad-x); margin-inline:auto; }
body.zs-boxed .zs-wrap{ max-width:var(--container); }
.zs-wrap--narrow{ max-width:760px; margin-inline:auto; }

/* ── Butonlar ──────────────────────────────────────────────────────── */
.zs-btn{
  --btn-bg:var(--c-ink); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px; border:1px solid var(--btn-bg);
  background:var(--btn-bg); color:var(--btn-fg); border-radius:var(--radius);
  font-family:var(--ff-display); font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  transition:transform .12s var(--ease), opacity .2s var(--ease);
}
.zs-btn:hover{ opacity:.88; }
.zs-btn:active{ transform:scale(.98); }
.zs-btn:disabled{ cursor:not-allowed; }
.zs-btn--ghost{ --btn-bg:transparent; --btn-fg:var(--c-ink); border-color:var(--c-ink); }
.zs-btn--volt{ --btn-bg:var(--c-volt); --btn-fg:var(--c-ink); }
.zs-btn--block{ width:100%; }
.zs-btn--sm{ min-height:40px; padding:0 16px; font-size:12px; }
.zs-btn--lg{ min-height:56px; font-size:14px; }

/* ── Form ──────────────────────────────────────────────────────────── */
.zs-field{ margin-bottom:14px; }
.zs-flabel{
  display:block; margin-bottom:6px; font-size:12px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--c-muted);
}
.zs-req{ color:var(--c-sale); }
.zs-input,.zs-textarea,.zs-select{
  width:100%; min-height:48px; padding:12px 14px;
  border:1px solid var(--c-line); border-radius:var(--radius);
  background:#fff; color:var(--c-ink); font:inherit; font-size:15px;
  transition:border-color .15s var(--ease);
}
.zs-input:focus,.zs-textarea:focus,.zs-select:focus{
  outline:none; border-color:var(--c-ink); box-shadow:0 0 0 3px rgba(0,0,0,.06);
}
.zs-textarea{ min-height:110px; resize:vertical; }
.zs-select{ appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; }
.zs-field-row{ display:grid; gap:var(--gap); }
@media (min-width:640px){ .zs-field-row{ grid-template-columns:1fr 1fr; } }

/* CountryPicker artık themes/shared/country-picker.css'ten geliyor —
   burada yalnızca zeus'un kendi paletine uyarlanması için --cp- değişkenleri
   :root'ta yeniden tanımlanır (panel document.body'ye taşındığı için
   .cp-wrap scope OLAMAZ, bkz. country-picker.css docblock'u). .cp-btn zaten
   .zs-input sınıfını da taşır (kenarlık/dolgu oradan gelir). */
:root {
  --cp-line:   var(--c-line);
  --cp-ink:    var(--c-ink);
  --cp-hover:  var(--c-surface);
  --cp-radius: var(--radius);
}
.cp-btn:focus{ outline:none; border-color:var(--c-ink); box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.zs-check{ display:flex; align-items:flex-start; gap:10px; font-size:14px; cursor:pointer; margin:10px 0; }
.zs-check input{ margin-top:3px; width:18px; height:18px; accent-color:var(--c-ink); flex:none; }

/* ── Rozetler ──────────────────────────────────────────────────────── */
.zs-tags{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.zs-tag{
  font-family:var(--ff-display); font-size:10px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 9px;
  background:var(--c-ink); color:#fff; border-radius:2px;
}
.zs-tag--sale{ background:var(--c-sale); color:#fff; }
.zs-tag--new{ background:var(--c-volt); color:var(--c-ink); }
.zs-tag--out{ background:var(--c-muted); color:#fff; }

/* ── Bölüm başlığı ─────────────────────────────────────────────────── */
.zs-shead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; }
.zs-shead__link{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-bottom:2px solid currentColor; padding-bottom:2px; white-space:nowrap; }

/* ── Kaydırınca beliren ────────────────────────────────────────────── */
body.zs-reveal-on .zs-reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
body.zs-reveal-on .zs-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  body.zs-reveal-on .zs-reveal{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ÜRÜN KARTI
   Görsel katmanları (etiket, favori, hızlı beden) .zs-card__top içinde
   konumlanır — .zs-card'a göre konumlansalardı alttaki butonlar ürün
   adının üzerine düşerdi.
   ═══════════════════════════════════════════════════════════════════════ */
.zs-card{ display:flex; flex-direction:column; }
.zs-card__top{ position:relative; }
.zs-card__media{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:var(--card-ratio,1 / 1);
  background:var(--c-surface); border-radius:var(--radius);
}
.zs-card__img{ width:100%; height:100%; object-fit:contain; padding:8%;
  transition:transform .6s var(--ease), opacity .35s var(--ease); }
.zs-card__img--alt{ position:absolute; inset:0; opacity:0; }
.zs-card:hover .zs-card__img--alt{ opacity:1; }
body.zs-zoom .zs-card:hover .zs-card__img{ transform:scale(1.06); }

.zs-fav{
  position:absolute; top:8px; right:8px; z-index:3;
  width:36px; height:36px; display:grid; place-items:center;
  border:0; border-radius:50%; background:rgba(255,255,255,.9);
  color:var(--c-ink); cursor:pointer; opacity:0; transform:translateY(-4px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.zs-card:hover .zs-fav,.zs-fav:focus-visible{ opacity:1; transform:none; }
.zs-fav svg{ width:18px; height:18px; }
.zs-fav.is-fav svg{ fill:var(--c-sale); stroke:var(--c-sale); }
@media (hover:none){ .zs-fav{ opacity:1; transform:none; } }

/* Hızlı beden şeridi — masaüstünde hover'da, mobilde hiç gösterilmez */
.zs-card__sizes{
  position:absolute; left:8px; right:8px; bottom:8px; z-index:2;
  display:none; gap:4px; flex-wrap:wrap; justify-content:center;
  padding:8px; background:rgba(255,255,255,.95); border-radius:var(--radius);
  opacity:0; transform:translateY(6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
@media (hover:hover) and (min-width:900px){
  .zs-card__sizes{ display:flex; }
  .zs-card:hover .zs-card__sizes{ opacity:1; transform:none; }
}
.zs-card__size{
  min-width:34px; padding:5px 6px; border:1px solid var(--c-line);
  background:#fff; border-radius:2px; font-size:11px; font-weight:600;
  text-align:center; cursor:pointer;
}
.zs-card__size:hover{ border-color:var(--c-ink); }

.zs-card__body{ padding-top:10px; display:flex; flex-direction:column; gap:4px; }
.zs-card__brand{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); }
.zs-card__name{ font-size:14px; font-weight:600; margin:0; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.zs-card__meta{ font-size:12px; color:var(--c-muted); }
.zs-card__price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:2px; }
.zs-card__now{ font-family:var(--ff-display); font-weight:700; font-size:15px; }
.zs-card__was{ font-size:12px; color:var(--c-muted); text-decoration:line-through; }
.zs-card__now--sale{ color:var(--c-sale); }
.zs-card__rating{ display:flex; align-items:center; gap:4px; font-size:11px; color:var(--c-muted); }
.zs-card__swatches{ display:flex; gap:4px; margin-top:6px; }
.zs-card__swatch{ width:26px; height:26px; border:1px solid var(--c-line); border-radius:2px; background:var(--c-surface); overflow:hidden; }
.zs-card__swatch img{ width:100%; height:100%; object-fit:cover; }
.zs-card__more{ font-size:11px; color:var(--c-muted); align-self:center; }

/* ── Ürün ızgarası — mobilde 2 kolon (sneaker perakendesinin standardı) */
.zs-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:700px){  .zs-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .zs-grid{ grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); } }

/* Yatay kaydırmalı şerit (mobilde ürün karuseli) */
.zs-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:44%;
  gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:4px;
}
.zs-rail::-webkit-scrollbar{ display:none; }
.zs-rail > *{ scroll-snap-align:start; }
@media (min-width:700px){ .zs-rail{ grid-auto-columns:30%; } }
@media (min-width:1024px){ .zs-rail{ grid-auto-columns:calc((100% - (var(--cols,4) - 1) * var(--gap)) / var(--cols,4)); } }

/* ═══════════════════════════════════════════════════════════════════════
   ÜST BAR / HEADER
   Mobilde: hamburger + logo + sepet. Arama tam ekran katman olarak açılır.
   Masaüstünde: logo + yatay menü + arama kutusu + aksiyonlar.
   ═══════════════════════════════════════════════════════════════════════ */
.zs-ann{ background:var(--c-ink); color:#fff; font-size:12px; text-align:center; padding:8px var(--pad-x); }
.zs-ann a{ text-decoration:underline; }

.zs-header-wrap.is-sticky{ position:sticky; top:0; z-index:60; }
.zs-header{ background:var(--c-bg); border-bottom:1px solid var(--c-line); }
.zs-header__bar{ display:flex; align-items:center; gap:12px; min-height:60px; }
@media (min-width:1024px){ .zs-header__bar{ min-height:72px; gap:24px; } }

.zs-iconbtn{
  width:40px; height:40px; display:grid; place-items:center; flex:none;
  border:0; background:none; cursor:pointer; position:relative; border-radius:var(--radius);
}
.zs-iconbtn:hover{ background:var(--c-surface); }
.zs-iconbtn svg{ width:22px; height:22px; }
.zs-iconbtn__count{
  position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 4px;
  display:grid; place-items:center; background:var(--c-ink); color:#fff;
  font-size:10px; font-weight:700; border-radius:9px;
}
.zs-burger{ display:grid; }
@media (min-width:1024px){ .zs-burger{ display:none; } }

.zs-logo{ font-family:var(--ff-display); font-weight:800; font-size:22px; letter-spacing:-.02em; text-transform:uppercase; }
.zs-logo img{ height:28px; width:auto; }
@media (min-width:1024px){ .zs-logo{ font-size:26px; } .zs-logo img{ height:32px; } }
.zs-header__logo{ flex:1; display:flex; justify-content:center; }
@media (min-width:1024px){ .zs-header__logo{ flex:none; justify-content:flex-start; } }

.zs-header__search{ display:none; flex:1; max-width:520px; }
@media (min-width:1024px){ .zs-header__search{ display:block; } }
.zs-search{ position:relative; }
.zs-search input{ width:100%; min-height:42px; padding:8px 44px 8px 14px;
  border:1px solid var(--c-line); border-radius:var(--radius); background:var(--c-surface); font-size:14px; }
.zs-search input:focus{ outline:none; border-color:var(--c-ink); background:#fff; }
.zs-search button{ position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center; border:0; background:none; cursor:pointer; }
.zs-search button svg{ width:18px; height:18px; }

.zs-header__acts{ display:flex; align-items:center; gap:2px; margin-left:auto; }

/* Ana menü — masaüstü */
.zs-nav{ display:none; border-top:1px solid var(--c-line); }
@media (min-width:1024px){ .zs-nav{ display:block; } }
.zs-nav__list{ display:flex; gap:26px; align-items:center; min-height:46px; }
.zs-nav__item{ position:relative; }
.zs-nav__link{
  display:flex; align-items:center; gap:4px; height:46px;
  font-family:var(--ff-display); font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.zs-nav__link svg{ width:14px; height:14px; }
.zs-nav__item:hover .zs-nav__link{ color:var(--c-muted); }
.zs-nav__link--hot{ color:var(--c-sale); }
.zs-mega{
  position:absolute; top:100%; left:0; z-index:70; min-width:220px;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  padding:12px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  box-shadow:0 12px 32px rgba(0,0,0,.1);
}
.zs-nav__item:hover .zs-mega, .zs-nav__item:focus-within .zs-mega{ opacity:1; visibility:visible; transform:none; }
.zs-mega__link{ display:block; padding:7px 10px; font-size:14px; border-radius:2px; }
.zs-mega__link:hover{ background:var(--c-surface); }

/* Mobil çekmece */
.zs-drawer{
  position:fixed; inset:0 auto 0 0; width:min(88vw,360px); z-index:95;
  background:#fff; transform:translateX(-100%); transition:transform .28s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto;
}
.zs-drawer.is-open{ transform:none; }
.zs-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:14px var(--pad-x); border-bottom:1px solid var(--c-line); }
.zs-drawer__body{ padding:8px var(--pad-x) 32px; }
.zs-drawer__link{ display:block; padding:13px 0; font-family:var(--ff-display); font-size:16px;
  font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--c-line); }
.zs-drawer__sub{ padding:6px 0 10px 12px; display:flex; flex-direction:column; gap:8px; }
.zs-drawer__sub a{ font-size:14px; color:var(--c-muted); }
.zs-scrim{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .28s var(--ease), visibility .28s; }
.zs-scrim.is-open{ opacity:1; visibility:visible; }

/* Mobil arama katmanı */
.zs-searchlayer{ position:fixed; inset:0; z-index:96; background:#fff; padding:16px var(--pad-x); display:none; }
.zs-searchlayer.is-open{ display:block; }
.zs-searchlayer__row{ display:flex; gap:10px; align-items:center; }

/* ═══════════════════════════════════════════════════════════════════════
   ANA SAYFA BÖLÜMLERİ
   ═══════════════════════════════════════════════════════════════════════ */
/* Hero — mobilde görsel üstte, metin altta; masaüstünde bindirmeli */
.zs-hero{ position:relative; background:var(--c-surface); }
.zs-hero__media{ position:relative; aspect-ratio:4 / 5; overflow:hidden; }
@media (min-width:768px){ .zs-hero__media{ aspect-ratio:21 / 9; } }
.zs-hero__media img{ width:100%; height:100%; object-fit:cover; }
.zs-hero__body{ padding:24px var(--pad-x) 32px; }
@media (min-width:768px){
  .zs-hero__body{
    position:absolute; inset:auto auto 0 0; max-width:min(560px,50%);
    padding:40px; color:#fff;
  }
  .zs-hero--light .zs-hero__body{ color:var(--c-ink); }
}
.zs-hero__title{ margin:8px 0 12px; }
.zs-hero__text{ font-size:15px; opacity:.9; margin:0 0 18px; max-width:44ch; }
.zs-hero__cta{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:767px){ .zs-hero__cta .zs-btn{ flex:1 1 140px; } }

/* Kategori şeridi — yatay kaydırma, dairesel görseller */
.zs-catrail{ display:grid; grid-auto-flow:column; grid-auto-columns:88px; gap:14px;
  overflow-x:auto; scrollbar-width:none; padding:4px 0; }
.zs-catrail::-webkit-scrollbar{ display:none; }
@media (min-width:768px){ .zs-catrail{ grid-auto-columns:120px; gap:20px; } }
.zs-cat{ text-align:center; }
.zs-cat__img{ aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--c-surface); margin-bottom:8px; }
.zs-cat__img img{ width:100%; height:100%; object-fit:cover; }
.zs-cat__name{ font-size:12px; font-weight:600; }

/* Promo kutuları — 1/2/3 kolon */
.zs-promos{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:640px){ .zs-promos{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .zs-promos{ grid-template-columns:repeat(var(--pcols,3),1fr); } }
.zs-promo{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--c-surface); }
.zs-promo__img{ aspect-ratio:4 / 3; }
.zs-promo__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.zs-promo:hover .zs-promo__img img{ transform:scale(1.05); }
.zs-promo__body{ position:absolute; inset:auto 0 0 0; padding:18px; color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent); }
.zs-promo__title{ font-family:var(--ff-display); font-weight:800; font-size:20px;
  text-transform:uppercase; letter-spacing:-.01em; margin:0 0 6px; }
.zs-promo__link{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-bottom:2px solid currentColor; }

/* Marka şeridi */
.zs-brands{ display:grid; gap:1px; background:var(--c-line); grid-template-columns:repeat(2,1fr); border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden; }
@media (min-width:640px){ .zs-brands{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .zs-brands{ grid-template-columns:repeat(6,1fr); } }
.zs-brand{ background:#fff; display:grid; place-items:center; padding:22px 12px; min-height:84px; transition:background .2s var(--ease); }
.zs-brand:hover{ background:var(--c-surface); }
.zs-brand img{ max-height:30px; width:auto; object-fit:contain; }
.zs-brand span{ font-family:var(--ff-display); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em; }

/* Avantaj şeridi (ikon + metin) */
.zs-perks{ display:grid; gap:1px; background:var(--c-line); grid-template-columns:repeat(2,1fr); }
@media (min-width:1024px){ .zs-perks{ grid-template-columns:repeat(4,1fr); } }
.zs-perk{ background:var(--c-bg); padding:20px 16px; text-align:center; }
.zs-perk svg{ width:26px; height:26px; margin:0 auto 8px; stroke:var(--c-ink); }
.zs-perk__t{ font-family:var(--ff-display); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.zs-perk__d{ font-size:12px; color:var(--c-muted); margin-top:3px; }

/* Editoryal ikili blok */
.zs-editorial{ display:grid; gap:var(--gap); }
@media (min-width:900px){ .zs-editorial{ grid-template-columns:1fr 1fr; align-items:center; } }
.zs-editorial--flip > :first-child{ order:2; }
.zs-editorial__img{ aspect-ratio:4 / 3; border-radius:var(--radius); overflow:hidden; background:var(--c-surface); }
.zs-editorial__img img{ width:100%; height:100%; object-fit:cover; }

/* Kayan yazı şeridi */
.zs-marquee{ overflow:hidden; background:var(--c-ink); color:#fff; padding:12px 0; }
.zs-marquee__track{ display:flex; gap:40px; width:max-content; animation:zs-marq 26s linear infinite; }
.zs-marquee span{ font-family:var(--ff-display); font-weight:800; font-size:15px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
@keyframes zs-marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .zs-marquee__track{ animation:none; } }

/* Blog kartları */
.zs-posts{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:640px){ .zs-posts{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .zs-posts{ grid-template-columns:repeat(var(--cols,3),1fr); } }
.zs-post__media{ aspect-ratio:16 / 10; border-radius:var(--radius); overflow:hidden; background:var(--c-surface); }
.zs-post__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.zs-post:hover .zs-post__media img{ transform:scale(1.04); }
.zs-post__meta{ display:flex; gap:10px; font-size:11px; color:var(--c-muted); text-transform:uppercase; letter-spacing:.06em; margin:10px 0 6px; }
.zs-post__title{ font-family:var(--ff-display); font-weight:700; font-size:17px; margin:0 0 6px; line-height:1.25; }
.zs-post__excerpt{ font-size:14px; color:var(--c-muted); margin:0; }

/* Bülten bandı */
.zs-news{ background:var(--c-ink); color:#fff; }
.zs-news__inner{ display:grid; gap:18px; padding:36px 0; }
@media (min-width:900px){ .zs-news__inner{ grid-template-columns:1fr 1fr; align-items:center; gap:40px; } }
.zs-news__form{ display:flex; gap:10px; flex-wrap:wrap; }
.zs-news__form input{ flex:1 1 220px; min-height:48px; padding:12px 14px; border:1px solid rgba(255,255,255,.3);
  background:transparent; color:#fff; border-radius:var(--radius); font-size:15px; }
.zs-news__form input::placeholder{ color:rgba(255,255,255,.6); }
.zs-news__form input:focus{ outline:none; border-color:var(--c-volt); }

/* ═══════════════════════════════════════════════════════════════════════
   MAĞAZA / LİSTELEME
   ═══════════════════════════════════════════════════════════════════════ */
.zs-shop{ display:grid; gap:24px; }
@media (min-width:1024px){ .zs-shop{ grid-template-columns:250px minmax(0,1fr); gap:36px; align-items:start; } }
.zs-shop__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.zs-shop__count{ font-size:13px; color:var(--c-muted); }
.zs-filterbtn{ display:inline-flex; }
@media (min-width:1024px){ .zs-filterbtn{ display:none; } }

/* Filtre paneli: mobilde alttan açılan katman, masaüstünde yan sütun */
.zs-filters{
  position:fixed; inset:auto 0 0 0; z-index:95; max-height:86vh; overflow-y:auto;
  background:#fff; border-top-left-radius:16px; border-top-right-radius:16px;
  padding:18px var(--pad-x) 28px; transform:translateY(100%);
  transition:transform .3s var(--ease);
}
.zs-filters.is-open{ transform:none; }
@media (min-width:1024px){
  .zs-filters{ position:static; transform:none; max-height:none; padding:0; border-radius:0; overflow:visible; }
}
.zs-filters__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
@media (min-width:1024px){ .zs-filters__head{ display:none; } }
.zs-fgroup{ border-bottom:1px solid var(--c-line); padding:14px 0; }
.zs-fgroup__t{ display:flex; align-items:center; justify-content:space-between; width:100%;
  border:0; background:none; padding:0; cursor:pointer;
  font-family:var(--ff-display); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.zs-fgroup__t svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.zs-fgroup.is-open .zs-fgroup__t svg{ transform:rotate(180deg); }
.zs-fgroup__body{ padding-top:12px; display:flex; flex-direction:column; gap:9px; }
.zs-fgroup__body a{ font-size:14px; color:var(--c-muted); }
.zs-fgroup__body a:hover,.zs-fgroup__body a.is-active{ color:var(--c-ink); font-weight:600; }
.zs-pricerow{ display:flex; gap:8px; align-items:center; }
.zs-pricerow input{ min-height:42px; }

.zs-pager{ display:flex; gap:6px; justify-content:center; align-items:center; margin-top:32px; flex-wrap:wrap; }
.zs-pager a,.zs-pager span{ min-width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--c-line); border-radius:var(--radius); font-size:14px; padding:0 10px; }
.zs-pager .is-active{ background:var(--c-ink); color:#fff; border-color:var(--c-ink); font-weight:700; }

.zs-empty{ text-align:center; padding:60px 20px; }
.zs-empty__t{ font-family:var(--ff-display); font-size:22px; font-weight:800; text-transform:uppercase; margin:0 0 8px; }
.zs-empty__d{ color:var(--c-muted); margin:0 0 20px; }

/* ═══════════════════════════════════════════════════════════════════════
   ÜRÜN DETAY
   ═══════════════════════════════════════════════════════════════════════ */
.zs-pd{ display:grid; gap:24px; }
@media (min-width:1024px){ .zs-pd{ grid-template-columns:minmax(0,1fr) 420px; gap:48px; align-items:start; } }
.zs-pd__gallery{ display:grid; gap:8px; grid-template-columns:1fr; }
@media (min-width:640px){ .zs-pd__gallery{ grid-template-columns:1fr 1fr; } }
.zs-pd__shot{ aspect-ratio:1; background:var(--c-surface); border-radius:var(--radius); overflow:hidden; }
.zs-pd__shot img{ width:100%; height:100%; object-fit:contain; padding:6%; }
.zs-pd__shot--wide{ grid-column:1 / -1; aspect-ratio:16 / 10; }

@media (min-width:1024px){ .zs-pd__buy{ position:sticky; top:96px; } }
.zs-pd__brand{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); }
.zs-pd__title{ margin:6px 0 10px; }
.zs-pd__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.zs-pd__tag{ display:inline-flex; align-items:center; padding:5px 12px; border:1px solid var(--c-line); border-radius:999px; font-size:11px; font-weight:600; color:var(--c-muted); }
.zs-pd__price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:14px 0 4px; }
.zs-pd__now{ font-family:var(--ff-display); font-size:26px; font-weight:800; }
.zs-pd__was{ font-size:15px; color:var(--c-muted); text-decoration:line-through; }
.zs-pd__tax{ font-size:12px; color:var(--c-muted); }
.zs-pd__stock{ display:inline-flex; align-items:center; gap:6px; font-size:13px; margin:10px 0; }
.zs-pd__dot{ width:8px; height:8px; border-radius:50%; background:#16A34A; }
.zs-pd__dot--out{ background:var(--c-sale); }
.zs-pd__desc{ font-size:14px; color:var(--c-muted); margin:12px 0; }

/* Varyant seçimi */
.zs-opt{ margin:18px 0; }
.zs-opt__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.zs-opt__name{ font-family:var(--ff-display); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.zs-opt__picked{ font-size:13px; color:var(--c-muted); }
.zs-opt__list{ display:flex; flex-wrap:wrap; gap:8px; }
.zs-opt__btn{
  min-width:56px; min-height:44px; padding:0 12px;
  border:1px solid var(--c-line); background:#fff; border-radius:var(--radius);
  font-size:14px; font-weight:600; cursor:pointer;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.zs-opt__btn:hover{ border-color:var(--c-ink); }
.zs-opt__btn.is-active{ background:var(--c-ink); color:#fff; border-color:var(--c-ink); }
.zs-opt__btn.is-out{ opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.zs-opt__color{ width:44px; height:44px; min-width:44px; padding:0; border-radius:50%; }
.zs-opt__color.is-active{ box-shadow:0 0 0 2px #fff inset, 0 0 0 2px var(--c-ink); }
.zs-opt__img{ width:56px; height:56px; min-width:56px; padding:2px; overflow:hidden; }
.zs-opt__img img{ width:100%; height:100%; object-fit:cover; border-radius:2px; }

.zs-buy{ display:flex; gap:10px; align-items:stretch; margin-top:18px; }
.zs-qty{ display:flex; align-items:center; border:1px solid var(--c-line); border-radius:var(--radius); flex:none; }
.zs-qty button{ width:44px; min-height:48px; border:0; background:none; font-size:18px; cursor:pointer; }
.zs-qty input{ width:48px; min-height:48px; border:0; text-align:center; font-size:15px; font-weight:600; -moz-appearance:textfield; }
.zs-qty input::-webkit-outer-spin-button,.zs-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.zs-buy .zs-btn{ flex:1; }
.zs-buy__fav{ width:52px; flex:none; display:grid; place-items:center; border:1px solid var(--c-line); background:#fff; border-radius:var(--radius); cursor:pointer; }
.zs-buy__fav svg{ width:20px; height:20px; }
.zs-buy__fav.is-fav svg{ fill:var(--c-sale); stroke:var(--c-sale); }

.zs-usp{ list-style:none; margin:18px 0 0; padding:14px 0 0; border-top:1px solid var(--c-line); display:flex; flex-direction:column; gap:8px; font-size:13px; }
.zs-usp li{ display:flex; gap:8px; align-items:center; }
.zs-usp svg{ width:16px; height:16px; flex:none; stroke:var(--c-ink); }

.zs-acc{ border-top:1px solid var(--c-line); }
.zs-acc__t{ display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:16px 0; border:0; background:none; cursor:pointer; text-align:left;
  font-family:var(--ff-display); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.zs-acc__t svg{ width:18px; height:18px; transition:transform .2s var(--ease); flex:none; }
.zs-acc.is-open .zs-acc__t svg{ transform:rotate(45deg); }
.zs-acc__body{ padding-bottom:18px; font-size:14px; color:var(--c-muted); line-height:1.7; }
.zs-acc__body table{ width:100%; border-collapse:collapse; font-size:13px; }
.zs-acc__body td{ padding:7px 0; border-bottom:1px solid var(--c-line); }
.zs-acc__body td:first-child{ color:var(--c-ink); font-weight:600; width:40%; }

/* ═══════════════════════════════════════════════════════════════════════
   SEPET / ÖDEME / HESAP / BLOG / İÇERİK
   ═══════════════════════════════════════════════════════════════════════ */
.zs-cart{ display:grid; gap:28px; }
@media (min-width:1024px){ .zs-cart{ grid-template-columns:minmax(0,1fr) 380px; gap:44px; align-items:start; } }
.zs-cartrow{ display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px; padding:18px 0; border-bottom:1px solid var(--c-line); }
@media (min-width:640px){ .zs-cartrow{ grid-template-columns:110px minmax(0,1fr) auto; align-items:center; gap:18px; } }
.zs-cartrow__img{ aspect-ratio:1; background:var(--c-surface); border-radius:var(--radius); overflow:hidden; }
.zs-cartrow__img img{ width:100%; height:100%; object-fit:contain; padding:6%; }
.zs-cartrow__name{ font-size:15px; font-weight:600; margin:0 0 4px; }
.zs-cartrow__var{ font-size:13px; color:var(--c-muted); margin:0 0 6px; }
.zs-cartrow__unit{ font-size:13px; color:var(--c-muted); }
.zs-cartrow__line{ font-family:var(--ff-display); font-weight:700; font-size:16px; white-space:nowrap; }
.zs-cartrow__rm{ border:0; background:none; cursor:pointer; color:var(--c-muted); padding:4px; }
.zs-cartrow__rm svg{ width:18px; height:18px; }
.zs-cartrow__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }
@media (min-width:640px){ .zs-cartrow__foot{ margin-top:0; } }

.zs-summary{ background:var(--c-surface); border-radius:var(--radius); padding:22px; }
@media (min-width:1024px){ .zs-summary{ position:sticky; top:96px; } }
.zs-summary__t{ font-family:var(--ff-display); font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin:0 0 16px; }
.zs-summary__row{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:14px; }
.zs-summary__row--total{ border-top:1px solid var(--c-line); margin-top:10px; padding-top:14px;
  font-family:var(--ff-display); font-size:19px; font-weight:800; }
.zs-summary__note{ font-size:12px; color:var(--c-muted); text-align:center; margin:10px 0 0; }
.zs-coupon{ display:flex; gap:8px; margin:12px 0; }
.zs-coupon input{ flex:1; min-height:44px; }

.zs-co{ display:grid; gap:28px; }
@media (min-width:1024px){ .zs-co{ grid-template-columns:minmax(0,1fr) 380px; gap:44px; align-items:start; } }
.zs-co__card{ border:1px solid var(--c-line); border-radius:var(--radius); padding:20px; margin-bottom:18px; }
.zs-co__step{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.zs-co__no{ width:26px; height:26px; display:grid; place-items:center; background:var(--c-ink); color:#fff;
  border-radius:50%; font-size:12px; font-weight:700; flex:none; }
.zs-co__steptitle{ font-family:var(--ff-display); font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin:0; }
.zs-co__seg{ display:flex; gap:8px; margin-bottom:14px; }
.zs-co__segbtn{ flex:1; min-height:44px; border:1px solid var(--c-line); background:#fff; border-radius:var(--radius);
  font-size:13px; font-weight:600; cursor:pointer; }
.zs-co__segbtn.is-active{ background:var(--c-ink); color:#fff; border-color:var(--c-ink); }
.zs-pay{ display:flex; flex-direction:column; gap:10px; }
.zs-pay__opt{ display:flex; align-items:flex-start; gap:10px; padding:14px; border:1px solid var(--c-line);
  border-radius:var(--radius); cursor:pointer; }
.zs-pay__opt.is-active{ border-color:var(--c-ink); background:var(--c-surface); }
.zs-pay__t{ font-weight:600; font-size:14px; }
.zs-pay__d{ font-size:12px; color:var(--c-muted); }

.zs-acct{ display:grid; gap:24px; }
@media (min-width:900px){ .zs-acct{ grid-template-columns:230px minmax(0,1fr); gap:36px; align-items:start; } }
.zs-acctnav{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--c-line); padding-bottom:2px; }
.zs-acctnav::-webkit-scrollbar{ display:none; }
@media (min-width:900px){ .zs-acctnav{ flex-direction:column; border-bottom:0; overflow:visible; } }
.zs-acctnav a{ padding:11px 14px; font-size:14px; font-weight:600; white-space:nowrap; border-radius:var(--radius); }
.zs-acctnav a.is-active{ background:var(--c-ink); color:#fff; }
.zs-panel{ border:1px solid var(--c-line); border-radius:var(--radius); padding:20px; }
.zs-panel + .zs-panel{ margin-top:16px; }
.zs-panel__t{ font-family:var(--ff-display); font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin:0 0 14px; }
.zs-table{ width:100%; border-collapse:collapse; font-size:14px; }
.zs-table th{ text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); padding:8px 10px; border-bottom:1px solid var(--c-line); }
.zs-table td{ padding:12px 10px; border-bottom:1px solid var(--c-line); }
.zs-status{ display:inline-block; padding:4px 10px; border-radius:99px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--c-surface); }

.zs-auth{ max-width:440px; margin:48px auto; }
.zs-auth__t{ font-family:var(--ff-display); font-size:28px; font-weight:800; text-transform:uppercase; margin:0 0 6px; }
.zs-auth__d{ color:var(--c-muted); font-size:14px; margin:0 0 22px; }
.zs-auth__alt{ text-align:center; font-size:14px; margin-top:18px; color:var(--c-muted); }
.zs-auth__alt a{ font-weight:600; color:var(--c-ink); text-decoration:underline; }

.zs-article{ max-width:760px; margin-inline:auto; }
.zs-article__hero{ aspect-ratio:16 / 9; border-radius:var(--radius); overflow:hidden; background:var(--c-surface); margin-bottom:24px; }
.zs-article__hero img{ width:100%; height:100%; object-fit:cover; }
.zs-article__body{ font-size:16px; line-height:1.8; }
.zs-article__body h2,.zs-article__body h3{ font-family:var(--ff-display); font-weight:800; margin:32px 0 12px; }
.zs-article__body img{ border-radius:var(--radius); margin:20px 0; }
.zs-article__body a{ text-decoration:underline; }

.zs-crumb{ display:flex; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--c-muted); padding:14px 0; }
.zs-crumb a:hover{ color:var(--c-ink); }
.zs-sep{ margin:0 2px; }

.zs-alert{ padding:13px 16px; border-radius:var(--radius); font-size:14px; margin-bottom:16px; border:1px solid var(--c-line); }
.zs-alert--err{ background:#FEF2F2; border-color:#FECACA; color:#991B1B; }
.zs-alert--ok{ background:#F0FDF4; border-color:#BBF7D0; color:#166534; }

/* ── Alt bilgi ─────────────────────────────────────────────────────── */
.zs-footer{ background:var(--c-ink); color:#fff; margin-top:64px; }
.zs-footer a{ color:rgba(255,255,255,.75); }
.zs-footer a:hover{ color:#fff; }
.zs-footer__cols{ display:grid; gap:28px; padding:44px 0 32px; grid-template-columns:1fr; }
@media (min-width:640px){ .zs-footer__cols{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .zs-footer__cols{ grid-template-columns:repeat(4,1fr); gap:40px; } }
.zs-footer__t{ font-family:var(--ff-display); font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px; }
.zs-footer__list{ display:flex; flex-direction:column; gap:9px; font-size:14px; }
.zs-footer__social{ display:flex; gap:10px; margin-top:14px; }
.zs-footer__social a{ width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.25); border-radius:50%; }
.zs-footer__social svg{ width:18px; height:18px; }
.zs-footer__bottom{ border-top:1px solid rgba(255,255,255,.15); padding:18px 0 26px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; font-size:12px; color:rgba(255,255,255,.7); }

.zs-totop{ position:fixed; right:16px; bottom:16px; z-index:80; width:44px; height:44px;
  display:grid; place-items:center; border:0; border-radius:50%; background:var(--c-ink); color:#fff;
  cursor:pointer; opacity:0; visibility:hidden; transition:opacity .2s var(--ease), visibility .2s; }
.zs-totop.is-on{ opacity:1; visibility:visible; }
.zs-totop svg{ width:20px; height:20px; }

/* ── BİLDİRİM ŞERİDİ (toast) ──────────────────────────────────────
   theme.js içindeki showToast() üretir. Zeus dili: keskin köşe,
   kalın display yazı tipi, volt vurgu. */
.zs-toasts{
  /* .zs-totop (44px, bottom:16px) ile aynı köşede; şerit onun üstünde durur. */
  position:fixed; right:var(--pad-x); bottom:72px; z-index:9000;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
  pointer-events:none;
}
.zs-toast{
  pointer-events:auto; cursor:pointer;
  max-width:min(360px, calc(100vw - 2*var(--pad-x)));
  padding:12px 16px; border-radius:var(--radius);
  background:var(--c-ink); color:var(--c-bg);
  font-family:var(--ff-display); font-size:12px; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase; line-height:1.4;
  border-left:4px solid var(--c-volt);
  box-shadow:0 10px 30px rgba(11,11,12,.28);
  opacity:0; transform:translateY(10px);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.zs-toast.is-open{ opacity:1; transform:translateY(0); }
.zs-toast--ok   { border-left-color:var(--c-volt); }
.zs-toast--hata { border-left-color:var(--c-sale); }
.zs-toast--uyari{ border-left-color:var(--c-muted); }

@media (max-width:560px){
  .zs-toasts{ left:var(--pad-x); align-items:stretch; }
  .zs-toast { max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .zs-toast{ transition:opacity .01ms; transform:none; }
}

/* Özel alan zengin metni (Quill ql-content) — tablo hücresinde taşma/boşluk olmasın */
.ql-content{font-size:inherit;line-height:1.6}
.ql-content p{margin:0 0 8px}
.ql-content p:last-child{margin-bottom:0}
.ql-content ul,.ql-content ol{margin:0 0 8px;padding-left:20px}
.ql-content img{max-width:100%;height:auto}
.ql-content a{text-decoration:underline}

/* Alt seritteki Cerez Politikasi baglantisi. Footer link sutunlari theme_mod
   oldugu icin magaza sahibi duzenleyince kaybolabiliyor, alt serit duzenlenemez. */
.zs-footer__bottom .zs-footer__legal{ color:rgba(255,255,255,.7); text-decoration:underline; text-underline-offset:3px; }
.zs-footer__bottom .zs-footer__legal:hover{ color:#fff; }