/* FINDEL - yeniden tasarım v2
   Yön: Vakko ağırlıklı editoryal moda evi. Tam ekran kampanya görselleri, kalın geniş tipografi,
   beyaz zemin (ürün fotoğraflarının beyazıyla birebir), tek siyah bölüm (markalar) ve siyah altbilgi.
   Köşe: her yerde 0. Yazı tipi: Archivo (geniş kesim başlık, normal kesim metin). */

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --soft: #F4F3F1;
  --ink: #0E0E0E;
  --ink-2: #3D3D3F;
  --ink-3: #6A6A6D;
  --line: #E3E2DF;
  --night: #0E0E0E;
  --danger: #9B2C2C;

  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(16px, 2.6vw, 44px);
  --max: 1840px;
  --hdr: 72px;
  --top: 34px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.locked { overflow: hidden; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- Tipografi ---------- */
.xl, .h2, .h3 { font-family: var(--f); font-stretch: 125%; font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; }
.xl { font-size: clamp(52px, 8.4vw, 148px); line-height: .9; font-weight: 800; }
.h2 { font-size: clamp(30px, 3.4vw, 54px); line-height: .98; }
.h3 { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.05; }
.lead { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.5; color: var(--ink-2); max-width: 44ch; }

.link {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 2px solid currentColor;
}
.link i { font-size: 16px; transition: transform .35s var(--ease); }
.link:hover i { transform: translateX(5px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 34px; white-space: nowrap;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  transition: background .25s, color .25s, transform .15s;
}
.btn:hover { background: #2B2B2D; }
.btn:active { transform: scale(.985); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--soft); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; }
.btn--block { width: 100%; }

.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; font-size: 23px; position: relative; }
.icon-btn .count { position: absolute; top: 6px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }
.icon-btn .count:empty { display: none; }

/* ---------- Üst şerit + başlık ---------- */
.topbar { height: var(--top); display: grid; place-items: center; background: var(--night); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .02em; padding-inline: 16px; text-align: center; }
.hdr { position: sticky; top: 0; z-index: 40; background: #fff; transition: background .35s, box-shadow .35s, top .35s; }
.hdr.is-stuck { box-shadow: 0 1px 0 var(--line); }
.home .hdr { position: fixed; left: 0; right: 0; top: var(--top); background: transparent; }
.home .hdr.is-stuck { top: 0; background: #fff; }
.hdr__in { height: var(--hdr); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.hdr__logo img { height: 22px; width: auto; }
.hdr__tools { justify-self: end; display: flex; align-items: center; margin-right: -10px; }
.hdr__burger { display: none; margin-left: -10px; }
.hdr__nav > ul { display: flex; gap: clamp(16px, 1.8vw, 30px); }
.nav-item > a { display: flex; align-items: center; height: var(--hdr); font-size: 13px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; position: relative; }
.nav-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-item:hover > a::after, .nav-item:focus-within > a::after { transform: scaleX(1); }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .3); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transition-delay: .08s, 0s; }
.mega__in { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 4vw, 80px); padding-block: 40px 48px; }
.mega__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-content: start; }
.mega h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 18px; }
.mega__cols li a { display: inline-block; padding: 6px 0; font-size: 20px; font-weight: 500; letter-spacing: -.01em; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--ease); }
.mega__cols li a:hover { background-size: 100% 1.5px; }
.mega__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mega__card { display: grid; gap: 12px; justify-items: start; }
.mega__card .ph { display: block; width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.mega__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mega__card:hover img { transform: scale(1.04); }
.mega__card b { font-size: 15px; font-weight: 700; text-transform: uppercase; font-stretch: 112%; }
.mega__card .link { font-size: 12px; padding-bottom: 3px; border-bottom-width: 1.5px; }
.mega__in--brands { grid-template-columns: 2fr 1fr; }
.mega__logos { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.mega__logos a { display: grid; place-items: center; height: 104px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .25s; }
.mega__logos a:hover { background: var(--soft); }
.mega__logos img { width: auto; max-width: 70%; filter: invert(1); }
.mega__logos .mega__all { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.mega__all i { font-size: 16px; }
.mega__az ul { columns: 2; column-gap: 24px; }
.mega__az li a { display: inline-block; padding: 5px 0; font-size: 15px; font-weight: 500; }
.mega__az li a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Çekmeceler ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgb(14 14 14 / .45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.scrim.on { opacity: 1; visibility: visible; transition: opacity .3s; }
.drawer { position: fixed; top: 0; bottom: 0; z-index: 70; width: min(460px, 100%); background: #fff; display: flex; flex-direction: column; visibility: hidden; transition: transform .5s var(--ease), visibility 0s .5s; }
.drawer--right { right: 0; transform: translateX(100%); }
.drawer--left { left: 0; transform: translateX(-100%); }
.drawer.on { transform: none; visibility: visible; transition: transform .5s var(--ease); }
.drawer__hd { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--hdr); padding: 0 12px 0 24px; border-bottom: 1px solid var(--line); }
.drawer__hd h2 { font-size: 18px; font-stretch: 125%; font-weight: 700; text-transform: uppercase; }
.drawer__bd { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.drawer__ft { flex: none; display: grid; gap: 12px; padding: 20px 24px 24px; border-top: 1px solid var(--line); }
.bag-item { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.bag-item .ph { aspect-ratio: 3/4; background: #fff; }
.bag-item img { width: 100%; height: 100%; object-fit: cover; }
.bag-item .b { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.bag-item .n { font-size: 14px; color: var(--ink-2); margin: 2px 0 6px; }
.bag-item .s { font-size: 13px; color: var(--ink-3); }
.bag-item .p { font-size: 14px; font-weight: 600; white-space: nowrap; }
.bag-item .rm { font-size: 12px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; margin-top: 10px; }
.bag-sum { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; }
.bag-note { font-size: 12.5px; color: var(--ink-3); }
.empty { padding: 56px 0; display: grid; gap: 16px; justify-items: start; }
.empty p:not(.h3) { color: var(--ink-2); }

#menu .drawer__bd { padding-top: 16px; }
.mnav__search { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 14px; margin-bottom: 12px; background: var(--soft); color: var(--ink-3); font-size: 15px; text-align: left; }
.mnav__search i { font-size: 20px; color: var(--ink); }
.mnav__row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); list-style: none; cursor: pointer; }
.mnav__row::-webkit-details-marker { display: none; }
.mnav__row > i { margin-left: auto; font-size: 18px; color: var(--ink); transition: transform .3s var(--ease); }
.mnav__th { flex: none; width: 46px; height: 58px; overflow: hidden; background: #fff; }
.mnav__th img { width: 100%; height: 100%; object-fit: cover; }
.mnav__th.is-contain img { object-position: 50% 10%; }
.mnav__grp[open] > summary > i { transform: rotate(45deg); }
.mnav__grp ul { display: grid; padding: 6px 0 14px 62px; border-bottom: 1px solid var(--line); }
.mnav__grp li a { display: block; padding: 8px 0; font-size: 15px; color: var(--ink-2); }
.mnav__grp li:last-child a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.mnav__row--brands { min-height: 82px; }
.mnav__count { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.mnav__logos { padding: 14px 0; margin-inline: -24px; border-bottom: 1px solid var(--line); }
.mnav__logos .marquee__track { --dur: 32s; }
.mnav__logos ul { gap: 8px; padding-right: 8px; }
.mnav__logos a { flex: none; display: grid; place-items: center; width: 104px; height: 56px; box-shadow: inset 0 0 0 1px var(--line); }
.mnav__logos img { max-width: 70%; max-height: 26px; width: auto; filter: invert(1); }
.mnav__feature { position: relative; display: block; aspect-ratio: 16/10; margin-top: 24px; overflow: hidden; color: #fff; }
.mnav__feature img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.mnav__feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .62), rgb(0 0 0 / 0) 55%); }
.mnav__feature > span { position: absolute; z-index: 1; left: 18px; bottom: 16px; display: grid; gap: 8px; justify-items: start; }
.mnav__feature b { font-size: 24px; font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.mnav__feature .link { font-size: 12px; padding-bottom: 3px; border-bottom-width: 1.5px; }
.mnav__util { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.mnav__util a { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; font-size: 14px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }
.mnav__util i { font-size: 20px; }

.search { position: fixed; inset: 0 0 auto 0; z-index: 70; background: #fff; max-height: 92dvh; overflow-y: auto; transform: translateY(-100%); visibility: hidden; transition: transform .5s var(--ease), visibility 0s .5s; }
.search.on { transform: none; visibility: visible; transition: transform .5s var(--ease); }
.search__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; height: 96px; border-bottom: 1px solid var(--ink); }
.search__bar > i { font-size: 26px; }
.search__bar input { width: 100%; border: 0; background: none; outline: 0; padding: 0; font: 500 clamp(22px, 2vw, 30px)/1.2 var(--f); letter-spacing: -.01em; color: var(--ink); }
.search__bar input::placeholder { color: #9C9CA0; }
.search__bar input::-webkit-search-cancel-button { display: none; }
.search__close { display: inline-flex; align-items: center; gap: 8px; height: 44px; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.search__close i { font-size: 20px; }
.search__body { display: grid; grid-template-columns: 1fr 3fr; gap: clamp(32px, 4vw, 72px); padding-block: 32px 48px; }
.search__body h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 16px; }
.search__pop { display: flex; flex-wrap: wrap; gap: 8px; }
.search__pop button { height: 38px; padding: 0 14px; font-size: 14px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.search__pop button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.search__catgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.search__catgrid a { display: grid; gap: 12px; }
.search__catgrid .ph { aspect-ratio: 4/5; overflow: hidden; }
.search__catgrid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.search__catgrid a:hover img { transform: scale(1.04); }
.search__catgrid b { font-size: 15px; font-weight: 700; text-transform: uppercase; font-stretch: 112%; }
.search__rhd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.search__rhd h4 { margin: 0; }
.search__res { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.sres { display: grid; grid-template-columns: 68px 1fr; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sres .ph { aspect-ratio: 3/4; overflow: hidden; }
.sres img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.sres .ph.is-contain img { object-fit: contain; }
.sres__tx { display: grid; gap: 2px; font-size: 14px; }
.sres__tx b { font-size: 13px; font-weight: 700; text-transform: uppercase; }
.sres__tx span { color: var(--ink-2); }
.sres__tx em { font-style: normal; font-weight: 600; }
.sres:hover .sres__tx span { text-decoration: underline; text-underline-offset: 3px; }
.search__none { grid-column: 1 / -1; padding: 24px 0; color: var(--ink-2); font-size: 15px; }

.wa { position: fixed; right: 24px; bottom: 24px; z-index: 30; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 6px 20px rgb(0 0 0 / .25); transition: transform .3s var(--ease), box-shadow .3s; }
.wa-ico { display: block; width: 1em; height: 1em; flex: none; }
.wa .wa-ico { width: 32px; height: 32px; }
.icon-btn .wa-ico { width: 21px; height: 21px; }
.mnav__util .wa-ico { width: 19px; height: 19px; }
.buy__ask > .wa-ico { width: 26px; height: 26px; }
.wa:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgb(0 0 0 / .3); }
.pdp-page .wa { display: none; }
body.locked .wa { display: none; }

/* ---------- Ürün kartı (beyaz zemin, kutu yok) ---------- */
.card { display: block; position: relative; }
.card__media { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #fff; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: opacity .6s, transform 1.4s var(--ease); }
.card__media.is-contain img { object-fit: contain; padding: 8%; object-position: center; }
.card__media img.alt { opacity: 0; }
@media (hover: hover) {
  .card:hover .card__media img { transform: scale(1.04); }
  .card:hover .card__media.has-alt img.main { opacity: 0; }
  .card:hover .card__media img.alt { opacity: 1; }
}
.fav { position: absolute; top: 4px; right: 4px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; font-size: 21px; }
.fav .ph-fill { display: none; }
.fav[aria-pressed="true"] .ph-light { display: none; }
.fav[aria-pressed="true"] .ph-fill { display: block; }
.card__meta { padding-top: 12px; display: grid; gap: 2px; }
.card__brand { font-size: 14px; font-weight: 700; text-transform: uppercase; display: flex; gap: 10px; align-items: baseline; }
.card__brand em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.card__name { font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.card__price { font-size: 15px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
  [data-reveal].in { opacity: 1; transform: none; }
}

/* ================= ANA SAYFA ================= */
.hero { position: relative; height: 100dvh; min-height: 640px; max-height: 1100px; overflow: hidden; background: #D9D9D7; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 30%; }
.hero__copy { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: clamp(32px, 7vh, 88px); }
.hero__copy .wrap { display: grid; gap: 22px; justify-items: start; }
.hero__copy .wrap > * { max-width: max(34vw, 340px); }
.hero .xl { font-size: clamp(56px, 7.4vw, 132px); }
.hero__cta { flex-direction: column; align-items: flex-start; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .hero img { animation: settle 2.4s var(--ease) both; }
  .hero__copy .wrap > * { opacity: 0; transform: translateY(26px); animation: up 1.1s var(--ease) forwards; animation-delay: calc(.35s + var(--i, 0) * .12s); }
}
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes up { to { opacity: 1; transform: none; } }

/* Kategori üçlüsü: görsel üzerinde etiket */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
.tile { position: relative; display: block; height: min(86vh, 860px); min-height: 520px; overflow: hidden; color: #fff; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .5), rgb(0 0 0 / 0) 42%); }
.tile__cap { position: absolute; z-index: 1; left: 0; right: 0; bottom: 36px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.tile:hover img { transform: scale(1.045); }
.tiles__dots { display: none; }
.more-m { display: none; }

/* Ürün rayı */
.rail-sec { padding-block: clamp(64px, 8vw, 128px); }
.rail-hd { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.rail-hd__tools { display: flex; align-items: center; gap: 24px; }
.rail-hd__arrows { display: flex; gap: 6px; }
.rail-hd__arrows button { width: 48px; height: 48px; display: grid; place-items: center; font-size: 19px; box-shadow: inset 0 0 0 2px var(--ink); transition: background .2s, color .2s; }
.rail-hd__arrows button:hover { background: var(--ink); color: #fff; }
.rail-hd__arrows button:disabled { opacity: .25; pointer-events: none; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 3.6); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-inline: var(--pad); scroll-padding-inline: var(--pad); max-width: var(--max); margin-inline: auto; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* Tam genişlik kampanya bandı */
.band { position: relative; height: min(92vh, 980px); min-height: 560px; overflow: hidden; }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.band__copy { position: absolute; inset: 0; display: flex; align-items: center; background: linear-gradient(to right, rgb(236 226 210 / .82), rgb(236 226 210 / .5) 30%, rgb(236 226 210 / 0) 52%); }
.band__copy .wrap { width: 100%; display: grid; gap: 22px; justify-items: start; }

/* Kampanyadaki ayakkabılar: bandın hemen altında */
.shoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-block: 28px clamp(64px, 7vw, 112px); }
.shoes .card__media { aspect-ratio: 4/3; }
.shoes .card__media.is-contain img { padding: 2% 4%; }

/* Dış giyim: görsel yapışık, ürünler akar */
.story-sec { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); padding-block: clamp(32px, 4vw, 64px) clamp(64px, 8vw, 128px); align-items: start; }
.story-sec__img { position: sticky; top: calc(var(--hdr) + 16px); display: block; height: calc(100vh - var(--hdr) - 32px); min-height: 560px; overflow: hidden; }
.story-sec__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform 1.6s var(--ease); }
.story-sec__img:hover img { transform: scale(1.03); }
.story-sec__hd { display: grid; gap: 22px; justify-items: start; padding-block: clamp(24px, 6vh, 80px) clamp(40px, 6vh, 72px); }
.story-sec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 16px; }

/* Siyah marka bölümü: kayan şeritler */
.night { background: var(--night); color: #fff; padding-block: clamp(72px, 8vw, 128px); overflow: hidden; }
.night__hd { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(44px, 5vw, 80px); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee var(--dur, 70s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee ul { display: flex; align-items: center; flex: none; }
.marquee--logos ul { gap: clamp(56px, 6vw, 120px); padding-right: clamp(56px, 6vw, 120px); height: 120px; }
.marquee--logos img { width: auto; max-width: none; opacity: .92; transition: opacity .3s, transform .5s var(--ease); }
.marquee--logos a:hover img { opacity: 1; transform: scale(1.06); }
.marquee--names { margin-top: clamp(28px, 3vw, 48px); padding-top: clamp(28px, 3vw, 48px); border-top: 1px solid #2A2A2C; }
.marquee--names .marquee__track { --dur: 95s; animation-direction: reverse; }
.marquee--names ul { gap: clamp(28px, 3vw, 56px); padding-right: clamp(28px, 3vw, 56px); }
.marquee--names a { font-size: clamp(22px, 2.2vw, 36px); font-stretch: 125%; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; color: #5E5E61; white-space: nowrap; transition: color .25s; }
.marquee--names a:hover { color: #fff; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.night__tools { display: flex; align-items: center; gap: 20px; }
.night__tools .icon-btn { box-shadow: inset 0 0 0 1px #3A3A3D; font-size: 18px; }
.night__tools .icon-btn:hover { box-shadow: inset 0 0 0 1px #fff; }
.night__tools .ph-play { display: none; }
.night__tools [aria-pressed="true"] .ph-play { display: block; }
.night__tools [aria-pressed="true"] .ph-pause { display: none; }
/* Hareket azaltılmışsa şerit durmaz, yavaşlar; durdurma düğmesi her zaman var */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { --dur: 110s; }
  .marquee--names .marquee__track { --dur: 150s; }
}

/* İkili görsel, altta başlık */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pair figure { margin: 0; }
.pair .im { display: block; aspect-ratio: 1/1; overflow: hidden; }
.pair img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.pair a:hover img { transform: scale(1.03); }
.pair figcaption { padding: 24px var(--pad) 0; display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.pair figcaption p { color: var(--ink-2); margin-top: 8px; }

/* Hizmetler */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: clamp(56px, 6vw, 96px); }
.perks li { display: grid; gap: 6px; align-content: start; }
.perks i { font-size: 30px; margin-bottom: 8px; }
.perks b { font-size: 15px; font-weight: 700; text-transform: uppercase; }
.perks span { font-size: 14px; color: var(--ink-3); }

/* ---------- Altbilgi (siyah) ---------- */
.ftr { background: var(--night); color: #fff; padding-block: clamp(64px, 7vw, 112px) 28px; }
.ftr__news { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; padding-bottom: clamp(48px, 6vw, 88px); }
.nl { display: grid; gap: 8px; }
.nl label { font-size: 13px; color: #B5B5B7; }
.nl__row { display: grid; grid-template-columns: 1fr auto; border-bottom: 2px solid #fff; }
.nl input { border: 0; background: none; outline: 0; height: 56px; min-width: 0; font: 500 17px var(--f); color: #fff; }
.nl input::placeholder { color: #8C8C8F; }
.nl button { font-size: 13px; font-weight: 700; text-transform: uppercase; padding-left: 16px; }
.nl__msg { font-size: 13px; min-height: 20px; }
.nl__msg.err { color: #F0A3A3; }
.nl__msg.ok { color: #A8D5B2; }
.ftr__cols { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; padding-block: 48px; border-top: 1px solid #2A2A2C; }
.ftr__cols h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #8C8C8F; margin-bottom: 16px; }
.ftr__cols li a { display: inline-block; padding: 4px 0; font-size: 14px; color: #D6D6D8; }
.ftr__cols li a:hover { color: #fff; }
.ftr__brand img { height: 20px; width: auto; filter: invert(1); margin-bottom: 20px; }
.ftr__brand p { font-size: 14px; color: #B5B5B7; max-width: 34ch; }
.ftr__social { display: flex; gap: 4px; margin: 18px 0 0 -10px; }
.ftr__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid #2A2A2C; font-size: 12px; color: #8C8C8F; }

/* ================= KATEGORİ ================= */
.cat-hero { position: relative; height: clamp(320px, 52vh, 560px); overflow: hidden; color: #fff; }
.cat-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.cat-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .5), rgb(0 0 0 / 0) 55%); }
.cat-hero .wrap { position: absolute; left: 0; right: 0; bottom: clamp(24px, 4vw, 48px); z-index: 1; display: grid; gap: 12px; }
.crumb { display: flex; gap: 8px; font-size: 13px; }
.crumb a:hover { text-decoration: underline; }
.cat-hero .crumb { color: #E6E6E6; }
.cat-hero__t { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.cat-hero__t span { font-size: 15px; font-weight: 600; }
.subcats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 24px 20px; }
.subcats::-webkit-scrollbar { display: none; }
.subcats button { flex: none; height: 42px; padding: 0 18px; font-size: 13px; font-weight: 700; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background .2s, color .2s; }
.subcats button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.subcats button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.toolbar { position: sticky; top: var(--hdr); z-index: 20; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toolbar__in { height: 58px; display: flex; align-items: center; gap: 20px; }
.toolbar__btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.toolbar__btn i { font-size: 19px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 600; background: var(--soft); }
.toolbar__right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.toolbar__count { font-size: 13px; color: var(--ink-3); }
.sort { position: relative; }
.sort select { appearance: none; -webkit-appearance: none; border: 0; background: none; height: 44px; padding: 0 22px 0 0; cursor: pointer; font: 700 13px var(--f); text-transform: uppercase; color: var(--ink); }
.sort i { position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 14px; }
.cols-toggle { display: flex; }
.cols-toggle button { width: 38px; height: 44px; display: grid; place-items: center; font-size: 19px; color: #A5A5A8; }
.cols-toggle button[aria-pressed="true"] { color: var(--ink); }

.grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 44px 16px; padding-block: 32px 96px; }
.grid.is-2 { --cols: 2; }
.grid .story { position: relative; grid-column: span 2; grid-row: span 2; overflow: hidden; color: #fff; display: block; min-height: 560px; }
.grid .story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.grid .story:hover img { transform: scale(1.03); }
.grid .story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .55), rgb(0 0 0 / 0) 45%); }
.grid .story .tx { position: absolute; z-index: 1; left: 32px; right: 32px; bottom: 32px; display: grid; gap: 14px; justify-items: start; }
.grid__empty { grid-column: 1 / -1; padding: 64px 0; display: grid; gap: 16px; justify-items: start; }
.grid__empty p:not(.h3) { color: var(--ink-2); }
.more { display: grid; justify-items: center; gap: 16px; padding-bottom: 96px; }
.more p { font-size: 13px; color: var(--ink-3); }

.fgroup { padding: 22px 0; border-bottom: 1px solid var(--line); }
.fgroup h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; margin-bottom: 14px; }
.check { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink); display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--ink); }
.check input:checked::after { content: ""; width: 10px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.check span { margin-left: auto; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.size { min-width: 56px; height: 48px; padding: 0 12px; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px #C9C8C5; transition: box-shadow .2s, background .2s, color .2s; font-variant-numeric: tabular-nums; }
.size:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.size[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.size:disabled { color: #B5B5B7; text-decoration: line-through; pointer-events: none; box-shadow: inset 0 0 0 1px var(--line); }

/* ================= ÜRÜN ================= */
.pdp-top { padding-block: 20px 20px; color: var(--ink-3); }
.pdp-top a { color: var(--ink); }
.pdp { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(32px, 5vw, 96px); padding-bottom: clamp(64px, 8vw, 120px); align-items: start; }

/* Galeri */
.pg { display: grid; grid-template-columns: 76px 1fr; gap: 16px; position: sticky; top: calc(var(--hdr) + 20px); }
.pg__thumbs { display: grid; gap: 8px; align-content: start; }
.pg__thumbs button { aspect-ratio: 3/4; overflow: hidden; box-shadow: inset 0 0 0 1px transparent; opacity: .55; transition: opacity .25s, box-shadow .25s; }
.pg__thumbs button:hover { opacity: 1; }
.pg__thumbs button[aria-selected="true"] { opacity: 1; box-shadow: 0 0 0 1px var(--ink); }
.pg__thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.pg__stage { position: relative; min-width: 0; }
.pg__main { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: min(calc(100vh - var(--hdr) - 120px), 900px); min-height: 520px; }
.pg__main::-webkit-scrollbar { display: none; }
.pg__main figure { margin: 0; scroll-snap-align: start; overflow: hidden; cursor: zoom-in; background: #fff; }
.pg__main img { width: 100%; height: 100%; object-fit: contain; transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .45s var(--ease); }
.pg__main figure.zoom img { transform: scale(2.1); }
.pg__main figure.zoom { cursor: zoom-out; }
.pg__nav { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.pg__count { margin-right: auto; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pg__count b { color: var(--ink); font-weight: 700; }
.pg__nav button { width: 44px; height: 44px; display: grid; place-items: center; font-size: 18px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.pg__nav button:hover { box-shadow: inset 0 0 0 1px var(--ink); }

/* Satın alma paneli */
.buy { display: grid; gap: 30px; padding-top: 8px; }
.buy__top { display: grid; gap: 14px; justify-items: start; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.buy__logo img { height: 22px; width: auto; filter: invert(1); }
.buy h1 { font-size: clamp(22px, 1.7vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.buy__price { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.buy__inst { font-size: 13px; color: var(--ink-3); margin-top: -6px; }
.buy__inst a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.buy__row { display: flex; gap: 12px; align-items: baseline; margin-bottom: 12px; font-size: 14px; }
.buy__row b { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.buy__row span { color: var(--ink-2); }
.buy__row a { margin-left: auto; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.swatch i { display: block; width: 34px; height: 34px; background: #1C2438; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ink); margin: 4px; }
.buy__err { color: var(--danger); font-size: 13px; font-weight: 600; margin-top: 10px; }
.buy__err:empty { display: none; }
.buy__actions { display: grid; grid-template-columns: 1fr 54px; gap: 8px; margin-top: -6px; }
.buy__actions .btn { height: 58px; }
.buy__actions .fav { position: static; width: 54px; height: 58px; box-shadow: inset 0 0 0 1px var(--ink); }
.buy__trust { display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); margin-top: -8px; }
.buy__trust li { display: flex; align-items: center; gap: 12px; }
.buy__trust i { font-size: 20px; color: var(--ink); }
.buy__ask { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s; }
.buy__ask:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.buy__ask > i:first-child { font-size: 26px; }
.buy__ask span { display: grid; font-size: 13px; color: var(--ink-3); }
.buy__ask b { font-size: 14px; font-weight: 700; color: var(--ink); }
.buy__ask > i:last-child { font-size: 18px; transition: transform .3s var(--ease); }
.buy__ask:hover > i:last-child { transform: translateX(4px); }
.acc details { border-top: 1px solid var(--line); }
.acc details:last-child { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 13px; font-weight: 700; text-transform: uppercase; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { font-size: 17px; transition: transform .3s var(--ease); }
.acc details[open] summary i { transform: rotate(45deg); }
.acc .body { padding-bottom: 20px; display: grid; gap: 12px; font-size: 14px; color: var(--ink-2); }
.acc dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; margin: 0; }
.acc dt { color: var(--ink-3); }
.acc dd { margin: 0; }

/* Marka bandı */
.brandband { background: var(--night); color: #fff; }
.brandband__in { display: grid; justify-items: center; text-align: center; gap: 22px; padding-block: clamp(64px, 7vw, 112px); }
.brandband img { height: clamp(28px, 3vw, 44px); width: auto; }
.brandband p { color: #B5B5B7; max-width: 46ch; font-size: 16px; }
.mbar { display: none; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1180px) {
  .nav-item > a { font-size: 12px; }
  .hdr__tools .hide-md { display: none; }
}
@media (max-width: 1023px) {
  :root { --hdr: 60px; }
  .hdr__nav { display: none; }
  .hdr__burger { display: inline-grid; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile:first-child { grid-column: 1 / -1; }
  .tile { height: 70vh; min-height: 440px; }
  .rail { grid-auto-columns: 40%; }
  .story-sec { grid-template-columns: 1fr; }
  .story-sec__img { position: relative; top: 0; height: auto; min-height: 0; aspect-ratio: 4/5; }
  .story-sec__hd { padding-block: 8px 32px; }
  .shoes { grid-template-columns: 1fr 1fr; }
  .perks { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .ftr__news { grid-template-columns: 1fr; gap: 28px; }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
  .grid { --cols: 3; }
  .search__body { grid-template-columns: 1fr; gap: 28px; }
  .search__catgrid { grid-template-columns: repeat(4, 1fr); }
  .pdp { grid-template-columns: 1fr; }
  .pg { position: static; }
}
@media (max-width: 767px) {
  .topbar { font-size: 11px; }
  .hdr__logo img { height: 16px; }
  .hdr__tools .hide-sm { display: none; }
  /* Mobil ana sayfa: tam ekran giriş, yana kayan sıralar, kompakt bloklar */
  .hero { height: calc(100svh - var(--top)); min-height: 560px; max-height: 820px; }
  .hero img { object-position: 52% 0; }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .74), rgb(0 0 0 / .28) 40%, rgb(0 0 0 / 0) 62%); }
  .hero__copy { z-index: 1; color: #fff; padding-bottom: 28px; }
  .hero__copy .wrap { gap: 16px; }
  .hero__copy .wrap > * { max-width: none; }
  .hero .xl { font-size: 58px; }
  .hero .lead { color: rgb(255 255 255 / .86); font-size: 15px; }
  .hero__cta { flex-direction: row; align-items: center; gap: 22px; margin-top: 4px; }
  .hero .btn { background: #fff; color: var(--ink); height: 50px; padding: 0 24px; }
  .hero .link { color: #fff; }

  /* Kategoriler: tam genişlik, kendiliğinden kayan slayt */
  .tiles { display: grid; grid-template-columns: none; grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
  .tiles::-webkit-scrollbar { display: none; }
  .tiles > * { scroll-snap-align: start; }
  .tiles.is-drag { cursor: grabbing; scroll-snap-type: none; }
  .tiles.is-drag a { pointer-events: none; }
  .tiles__dots { display: flex; justify-content: center; gap: 6px; padding-top: 14px; }
  .tiles__dots button { width: 28px; height: 24px; display: grid; place-items: center; }
  .tiles__dots button::before { content: ""; width: 100%; height: 2px; background: var(--line); transition: background .3s; }
  .tiles__dots button[aria-current="true"]::before { background: var(--ink); }

  .tiles { grid-auto-columns: 100%; gap: 0; margin-top: 0; }
  .tile, .tile:first-child { grid-column: auto; height: auto; min-height: 0; aspect-ratio: 4/5; }
  .tile .h2 { font-size: 34px; }
  .tile__cap { bottom: 22px; gap: 10px; }

  .rail-sec { padding-block: 56px; }
  .rail-hd { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
  .rail-hd__arrows { display: none; }
  .rail { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; gap: 32px 10px; overflow: visible; scroll-snap-type: none; }
  .rail > :nth-child(n+5) { display: none; }
  .rail.is-open > :nth-child(n+5) { display: block; }
  .more-m { display: block; margin-top: 28px; }
  .rail + .more-m { padding-inline: var(--pad); }
  .shoes + .more-m { margin: -28px var(--pad) 56px; }
  .more-m .btn { height: 50px; gap: 10px; }
  .more-m .btn i { font-size: 16px; }

  .band { height: 124vw; min-height: 0; }
  .band > img { object-position: 82% 50%; }
  .band__copy { align-items: flex-start; padding-top: 28px; background: linear-gradient(to bottom, rgb(236 226 210 / .9), rgb(236 226 210 / .55) 42%, rgb(236 226 210 / 0) 62%); }
  .band__copy .wrap { gap: 14px; }
  .band .xl { font-size: 44px; }
  .band .lead { font-size: 15px; }
  .band .btn { height: 48px; padding: 0 22px; }

  .shoes { grid-template-columns: 1fr 1fr; gap: 24px 10px; padding-block: 16px 56px; }

  .story-sec { padding-block: 8px 56px; gap: 0; grid-template-areas: "media" "grid" "more"; }
  .story-sec__body { display: contents; }
  .story-sec__img { grid-area: media; aspect-ratio: 4/5; position: relative; }
  .story-sec__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .2) 45%, rgb(0 0 0 / 0) 65%); pointer-events: none; }
  .story-sec__hd { grid-area: media; align-self: end; position: relative; z-index: 1; padding: 0 20px 24px; gap: 12px; color: #fff; pointer-events: none; }
  .story-sec__hd a { pointer-events: auto; }
  .story-sec__hd .lead { color: rgb(255 255 255 / .86); font-size: 15px; }
  .story-sec__hd[data-reveal] { opacity: 1; transform: none; }
  .story-sec .xl { font-size: 44px; }
  .story-sec__grid { grid-area: grid; margin-top: 24px; }
  .story-sec .more-m { grid-area: more; }
  .story-sec__grid { grid-template-columns: 1fr 1fr; gap: 32px 10px; }

  .night { padding-block: 56px; }
  .night__hd { flex-direction: row; align-items: center; margin-bottom: 28px; }
  .night__tools .link { display: none; }
  .marquee--logos ul { height: 84px; }
  .marquee--logos img { transform: scale(.72); }
  .marquee--names a { font-size: 20px; }

  .pair { grid-template-columns: 1fr 1fr; gap: 4px; }
  .pair .im { aspect-ratio: 3/4; }
  .pair figcaption { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 12px 0; }
  .pair .h3 { font-size: 16px; }
  .pair figcaption p { font-size: 13px; margin-top: 4px; }
  .pair .link { font-size: 12px; }

  .perks { grid-template-columns: 1fr 1fr; gap: 24px 16px; padding-block: 44px; }
  .perks i { font-size: 24px; margin-bottom: 2px; }
  .perks b { font-size: 13px; }
  .perks span { font-size: 12.5px; }
  .ftr__news .h2 { font-size: 28px; }
  .ftr__cols { gap: 28px; }
  .grid { --cols: 2; gap: 36px 10px; }
  .grid .story { grid-column: 1 / -1; grid-row: auto; min-height: 0; aspect-ratio: 4/5; }
  .grid .story .tx { left: 20px; right: 20px; bottom: 22px; }
  .toolbar__in { gap: 12px; }
  .chips, .toolbar__count { display: none; }
  .cols-toggle .c4 { display: none; }
  .pg { grid-template-columns: 1fr; position: static; margin-inline: calc(var(--pad) * -1); }
  .pg__thumbs { display: none; }
  .pg__main { height: auto; min-height: 0; }
  .pg__main figure { aspect-ratio: 4/5; cursor: default; }
  .pg__main img { object-fit: cover; object-position: 50% 15%; }
  .pg__nav { padding-inline: var(--pad); }
  .pdp { padding-bottom: 120px; }
  .mbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -1px 0 var(--line); transform: translateY(110%); transition: transform .4s var(--ease); }
  .mbar.on { transform: none; }
  .mbar p { font-size: 12px; font-weight: 700; text-transform: uppercase; }
  .mbar b { display: block; font-size: 15px; font-weight: 600; }
  .mbar .btn { height: 50px; padding: 0 24px; }
  .wa { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .wa .wa-ico { width: 30px; height: 30px; }
  /* Mobil arama: tam ekran, kaydırmadan sığar; kategori görselleri kalan yüksekliği doldurur */
  .search { inset: 0; height: 100dvh; max-height: none; display: flex; flex-direction: column; scrollbar-width: none; }
  .search::-webkit-scrollbar { display: none; }
  .search > .wrap { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }
  .search__bar { flex: none; height: 64px; gap: 12px; position: sticky; top: 0; z-index: 1; background: #fff; }
  .search__bar > i { font-size: 22px; }
  .search__bar input { font-size: 18px; }
  .search__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 22px; padding-block: 20px 16px; }
  .search__body h4 { margin-bottom: 12px; }
  .search__pop button { height: 34px; padding: 0 12px; font-size: 13px; }
  .search__main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .search__cats { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .search__catgrid { flex: 1; min-height: 0; grid-template-rows: 1fr 1fr; gap: 10px; }
  .search__catgrid a { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
  .search__catgrid .ph { aspect-ratio: auto; min-height: 0; height: 100%; }
  .search__catgrid b { font-size: 13px; }
  .search__close { font-size: 0; gap: 0; }
  .search__catgrid { grid-template-columns: 1fr 1fr; }
  .search__res { grid-template-columns: 1fr; }
}