/* =========================================================================
   MAXSALES — perakende vitrin
   Tek CSS dosyası, dış kaynak yok (yazı tipi dahil: DSGVO gerekçesi inc/view.php'de).
   Renk düzeni: kemik beyazı vitrin + mürekkep siyahı "Vault" odası.
   ========================================================================= */

/* PALET: kırılmamış beyaz + mürekkep siyahı. Vurgu rengi YOK.
   ------------------------------------------------------------------------
   Eski düzen kemik beyazı zemin üstünde pirinç sarısı vurgu kullanıyordu.
   Sarı vurgu üst segment modada kullanılmıyor; oteldeki lobi ya da kuyumcu
   dili oluyor. Bu vitrinde rengi ÜRÜN veriyor — arayüz siyah beyaz kalıyor
   ki kırmızı kapüşonlu, mavi eşofman, Burberry ekosesi öne çıksın.

   --brass / --brass-2 adları duruyor: ikisi zaten anlamca "açık zemindeki
   vurgu" ve "koyu zemindeki vurgu" demekti, 60 yerde kullanılıyorlar. Adı
   değiştirmek yerine değerleri değişti. */
:root{
  --ink:#000;
  --ink-2:#111;
  --ink-3:#1e1e1e;
  --bone:#fff;
  --bone-2:#f4f4f4;
  --bone-3:#e2e2e2;
  --brass:#000;         /* açık zeminde vurgu: dolgu/çizgi */
  --brass-2:#fff;       /* koyu zeminde vurgu */
  --ember:#b3341c;
  --brass-text:#000;
  --ember-text:#a33f26;
  --text:#000;
  /* Bu iki ton beyaz zeminde 4,5:1'i GEÇMEK zorunda: ikisi de gövde metninde
     kullanılıyor (beden satırı, satıcı tipi, kırıntı yolu, dipnotlar).
     Ölçülen: --muted 7,4:1 · --muted-2 5,3:1. */
  --muted:#555;
  --muted-2:#6b6b6b;

  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1360px;
  --gut:clamp(18px,4vw,52px);
  --r:0;                         /* köşe yok: galeri dili */
  --shadow:0 1px 2px rgba(0,0,0,.05),0 12px 40px -22px rgba(0,0,0,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.08;margin:0}
p{margin:0}
s{text-decoration-thickness:1px;text-decoration-color:color-mix(in oklab,var(--muted) 70%,transparent)}
::selection{background:var(--ink);color:var(--bone)}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bone);padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* ---------------------------------------------------------------- düzen */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:820px}
.sec{padding:clamp(56px,8vw,110px) 0}
.sec--tight{padding:clamp(34px,4vw,56px) 0}
.rule{height:1px;background:var(--bone-3);border:0;margin:0}

/* ---------------------------------------------------------------- ticker */
.ticker{
  background:var(--ink);color:var(--brass-2);font-family:var(--sans);
  display:flex;justify-content:center;text-align:center;padding:0 var(--gut);
}
.ticker__item{
  padding:9px 0;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  /* Dar ekranda sarmalıyor: eskiden nowrap idi, ama o kayan şerit içindi.
     Sabit şeritte nowrap yatay taşma demek olurdu. */
  line-height:1.7;
}

/* ---------------------------------------------------------------- başlık */
.site{
  position:sticky;top:0;z-index:90;background:color-mix(in oklab,var(--bone) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
/* OKUMA ÇİZGİSİ — başlığın alt kenarında bir saç teli.
   Sayfa 13 000 piksel; nerede olduğunu gösteren hiçbir işaret yoktu. Önce
   sağ kenara yüzen bir bölüm dizini denedim ve ÖLÇÜMDE ÇÖPE GİTTİ: bu sayfada
   birden fazla bölüm kenardan kenara taşıyor (Vault los şeridi, kategori
   filmi), dizin de onların üstüne biniyordu — ürün kartının üstünde duran bir
   dizin, dizinsizlikten kötü.

   Bu sürüm çakışamaz: çizgi başlığın kendi alt kenarında duruyor, içeriğin
   üstünde değil. Genişlik JS'ten geliyor (--vr-progress). JS yoksa çizgi
   sıfırda kalıyor ve hiçbir şey bozulmuyor. */
.site::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;
  width:var(--vr-progress,0%);background:var(--ink);
  transition:width .12s linear;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){.site::after{transition:none}}
.site.is-stuck{border-bottom-color:var(--bone-3);background:color-mix(in oklab,var(--bone) 96%,transparent)}
.site__inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  min-height:70px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;
}
.wordmark{
  font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;display:inline-flex;align-items:baseline;padding-right:6px;
}
.wordmark__dot{width:4px;height:4px;background:var(--brass);border-radius:50%;margin-left:-2px;transform:translateY(-1px)}
.nav{display:flex;gap:clamp(14px,2vw,30px);justify-self:center}
.nav a{
  font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;padding:6px 0;position:relative;color:var(--muted);
  transition:color .2s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);
  transition:right .35s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.nav__vault{color:var(--ink);font-weight:600}
.pulse{
  width:5px;height:5px;border-radius:50%;background:var(--ember);display:inline-block;
  margin-left:6px;vertical-align:middle;animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

.tools{display:flex;align-items:center;gap:12px}
.search{display:flex;align-items:center;border-bottom:1px solid var(--bone-3);transition:border-color .25s}
.search:focus-within{border-color:var(--ink)}
.search input{
  border:0;background:none;padding:8px 4px;width:clamp(120px,17vw,230px);
  font-size:12.5px;letter-spacing:.05em;color:var(--ink);
}
.search input::placeholder{color:var(--muted-2)}
.search input:focus{outline:none}
.search button{border:0;background:none;padding:6px;cursor:pointer;color:var(--muted)}
.search button:hover{color:var(--ink)}
.tool{position:relative;padding:7px;color:var(--ink);opacity:.82;transition:opacity .2s}
.tool:hover{opacity:1}
.bag__n{
  position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:9px;background:var(--ink);
  color:var(--bone);font-size:10px;font-style:normal;display:grid;place-items:center;padding:0 4px;
  font-family:var(--sans);font-variant-numeric:tabular-nums;
}
.burger{display:none;border:0;background:none;padding:10px 8px;cursor:pointer}
.burger span{display:block;width:20px;height:1.4px;background:var(--ink);margin:4px 0;transition:transform .3s}

@media (max-width:1080px){
  /* minmax(0,1fr): auto yerine sıfır tabanlı, yoksa orta sütun kelime
     genişliğinin altına inemiyor ve başlık satırı taşıyor. */
  .site__inner{grid-template-columns:auto minmax(0,1fr) auto;min-height:62px;gap:12px}
  .nav{display:none}
  .burger{display:block}
  .search{display:none}
}
/* Dar telefonlarda hamburger + kelime markası + üç araç 390 px'e sığmıyordu:
   satır 32 px taşıyor, bütün sayfalarda yatay kaydırma açıyordu. Kelime
   markasını ve araç aralıklarını küçültüyoruz; dokunma hedefleri 32 px'in
   altına inmiyor. */
@media (max-width:560px){
  .site__inner{gap:8px;min-height:58px}
  .wordmark{font-size:17px;letter-spacing:.2em;padding-right:0}
  .wordmark__dot{width:3px;height:3px}
  .tools{gap:2px}
  .tool{padding:6px}
  .burger{padding:10px 6px}
}
@media (max-width:380px){
  .wordmark{font-size:15px;letter-spacing:.13em}
}

/* ------------------------------------------------------------- çekmece */
.drawer{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.5);animation:fade .25s var(--ease)}
.drawer[hidden]{display:none}
.drawer__panel{
  position:absolute;inset:0 auto 0 0;width:min(86vw,360px);background:var(--bone);
  padding:74px 30px 30px;display:flex;flex-direction:column;gap:2px;animation:slidein .34s var(--ease);
}
.drawer__panel a{
  font-family:var(--serif);font-size:24px;padding:11px 0;border-bottom:1px solid var(--bone-2);
}
.drawer__x{position:absolute;top:16px;right:18px;border:0;background:none;font-size:32px;line-height:1;cursor:pointer}
.drawer__langs{margin-top:22px}
@keyframes fade{from{opacity:0}}
@keyframes slidein{from{transform:translateX(-100%)}}

/* --------------------------------------------------------------- butonlar */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border:1px solid var(--ink);background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  cursor:pointer;border-radius:var(--r);position:relative;overflow:hidden;
  /* Kendi yığın bağlamı: ::before'un z-index:-1'i düğmenin ARKASINA değil,
     zemini ile yazısı arasına düşsün. Yoksa üzerine gelince dolgu görünmez,
     yazı zeminle aynı renge döner ve kaybolur. */
  isolation:isolate;
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .18s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--bone);transform:translateY(101%);
  transition:transform .38s var(--ease);z-index:-1;
}
.btn>*{position:relative}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:none;color:var(--ink)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:var(--bone)}
.btn--brass{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn--brass::before{background:var(--brass-2)}
.btn--brass:hover{color:var(--ink)}
.btn--light{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.btn--light::before{background:var(--ink)}
.btn--light:hover{color:var(--bone)}
.btn--block{width:100%}
.btn--sm{padding:11px 18px;font-size:10.5px;letter-spacing:.16em}
.btn--lg{padding:18px 40px}
.btn.is-disabled,.btn:disabled{opacity:.4;pointer-events:none}
.btn .ico{flex:0 0 auto}

.link{border-bottom:1px solid var(--bone-3);padding-bottom:1px;transition:border-color .2s}
.link:hover{border-color:var(--ink)}

/* ------------------------------------------------------------------- hero */
.hero{
  position:relative;background:var(--ink);color:var(--bone);overflow:hidden;
  min-height:clamp(520px,82vh,860px);display:flex;align-items:flex-end;
}
.hero__art{position:absolute;inset:0;opacity:.72}
.hero__art img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(115% 82% at 78% 18%,rgba(255,255,255,.07),transparent 62%),
    linear-gradient(to top,rgba(0,0,0,.94) 6%,rgba(0,0,0,.55) 46%,rgba(0,0,0,.22) 100%);
}
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) clamp(42px,6vw,80px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brass-text);margin-bottom:22px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass)}
.hero h1{font-size:clamp(38px,6.4vw,92px);max-width:19ch;letter-spacing:-.028em}
.hero__sub{margin-top:22px;max-width:52ch;font-size:clamp(14.5px,1.35vw,17px);color:color-mix(in oklab,var(--bone) 74%,transparent)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__stats{
  display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);margin-top:clamp(34px,5vw,60px);
  padding-top:24px;border-top:1px solid rgba(255,255,255,.16);
}
.hero__stat b{
  display:block;font-family:var(--serif);font-size:clamp(24px,2.6vw,36px);font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--bone);
}
.hero__stat span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}

/* --------------------------------------------------------- bölüm başlığı */
.sechead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;
  margin-bottom:clamp(26px,3.4vw,46px);
}
.sechead__t{font-size:clamp(26px,3.5vw,46px)}
.sechead__s{margin-top:11px;max-width:56ch;color:var(--muted);font-size:14.5px}
.sechead__more{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--bone-3);padding-bottom:5px;white-space:nowrap;transition:border-color .25s,gap .25s;
}
.sechead__more:hover{border-color:var(--ink);gap:13px}

/* -------------------------------------------------------------- ürün kartı */
.grid{
  display:grid;gap:clamp(16px,2vw,30px) clamp(12px,1.5vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,228px),1fr));
}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(min(100%,262px),1fr))}

/* MOZAİK — kuratöryel sıranın ölçek kontrastı.
   On iki eşit karo bir duvar oluşturuyordu: 2019 piksel boyunca hiçbir şey
   diğerinden önemli değildi ve göz hiçbir yerde durmuyordu. İlk parça artık
   iki sütun iki satır kaplıyor; yanındaki karolar küçük kalıyor ve sıra bir
   ızgara olmaktan çıkıp kompozisyon oluyor.

   Yalnızca dört sütunun sığdığı genişlikte açılıyor. Altında üç ya da iki
   sütun kalıyor ve büyük karo satırı bozar: telefonda hepsi eşit, orası
   zaten tek sütun. */
@media (min-width:1120px){
  .grid--mosaic > :first-child{grid-column:span 2;grid-row:span 2}
  /* Büyük karo iki satır boyunda; içindeki kare de o boyu doldurmalı,
     yoksa altında boşluk kalıyor. */
  .grid--mosaic > :first-child .fr{height:100%}
  .grid--mosaic > :first-child .card__body{margin-top:14px}
}
.grid--2{grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr))}

/* Telefonda ürün ızgarası İKİ sütun.
   262 px'lik alt sınır 390 px'lik bir ekranda tek sütuna düşüyordu: on iki
   parçalık seçki on iki ekran boyu sürüyor, ana sayfa 29 000 piksele
   çıkıyordu. Kimse bir vitrini böyle gezmez — her moda uygulaması telefonda
   iki sütun gösterir, çünkü karşılaştırma göz hareketiyle oluyor.

   :has(.card) ile sınırlı: aynı .grid sınıfı düğme çiftlerinde ve marka
   kutularında da kullanılıyor, onların tek sütun kalması gerekiyor. */
@media (max-width:640px){
  .grid:has(.card){grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px}
  .grid:has(.card) .card__brand{font-size:9px;letter-spacing:.16em}
  .grid:has(.card) .card__name{font-size:13.5px;line-height:1.32}
  .grid:has(.card) .card__price{font-size:13px}
  /* Beden satırı 170 px'lik kartta ikinci satıra taşıyor ve kartları
     birbirinden farklı yükseklikte bırakıyor. */
  .grid:has(.card) .card__sizes{display:none}
}

.card{display:flex;flex-direction:column}
.card__media{
  position:relative;display:block;background:var(--bone-2);aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);
}

/* --- Kare yerleşimi -------------------------------------------------------
   Karo 4:5; fotoğraflar 0.33 ile 2.2 arasında. Oranı tutan kareye cover,
   tutmayana contain veriliyor ve arkası dolduruluyor: paket çekiminde karenin
   kendi kenar rengiyle (fr--tint), sokak/mekân çekiminde aynı karenin bulanık
   büyütmesiyle (fr--pad). Hangisinin hangisi olduğuna sunucu karar veriyor —
   data/photo-shape.json, bkz. vr_img_fit(). */
.fr{position:absolute;inset:0;display:block;overflow:hidden;background:var(--tint,var(--bone-2))}
.fr img{
  position:relative;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  transition:transform 1s var(--ease),filter .5s var(--ease);
}
.fr--pad img,.fr--tint img{object-fit:contain}
/* Bulanık zemin: aynı görselin 180 px'lik hâli, tarayıcı onu zaten indirdi.
   inset negatif — blur kenarda saydamlaşmasın diye kutunun dışına taşıyor. */
.fr--pad::before{
  content:"";position:absolute;inset:-12%;
  background:var(--blur) center/cover no-repeat;
  filter:blur(22px) saturate(.72) brightness(1.06);
  opacity:.85;
}
.card__media img{width:100%;height:100%}
.card:hover .fr img{transform:scale(1.045)}
/* Tek kareli ürün: üzerine gelince ikinci fotoğraf yok, o yüzden kart ölü
   duruyordu. Aynı karenin özneye doğru yakınlaşması hem dürüst hem de
   kartların hepsinin aynı şekilde cevap vermesini sağlıyor. */
.card__media--solo:hover .fr img{transform:scale(1.28)}
.card__media--solo .fr img{transform-origin:var(--pos,50% 50%)}
.card.is-out .fr img{filter:grayscale(1) opacity(.55)}
.card.is-out .fr::before{filter:blur(22px) grayscale(1);opacity:.4}
/* İkinci kare: üzerine gelince yumuşak geçişle beliriyor. Dokunmatik cihazda
   hover yok — orada hiç görünmez, ilk kare olduğu gibi kalır. */
.card__alt{opacity:0;transition:opacity .55s var(--ease)}
@media (hover:hover){
  .card__media:hover .card__alt,.card__media:focus-visible .card__alt{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .fr img{transition:opacity .55s var(--ease)}
  .card:hover .fr img{transform:none}
}
.card__badge{
  position:absolute;top:11px;left:11px;background:var(--ink);color:var(--bone);
  font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;padding:5px 9px;
}
.card__badge--priv{background:var(--bone);color:var(--ink);top:auto;bottom:11px}
.card__out{
  position:absolute;inset:auto 0 0 0;background:color-mix(in oklab,var(--bone) 92%,transparent);
  text-align:center;padding:9px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
}
.card__body{padding:14px 2px 0;display:flex;flex-direction:column;gap:5px}
.card__brand{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.card__name{font-size:16.5px;line-height:1.3;font-family:var(--serif)}
.card__name a{display:block}
.card__price{font-size:14.5px;font-variant-numeric:tabular-nums;display:flex;gap:9px;align-items:baseline}
.card__price s{color:var(--muted-2);font-size:12.5px}
.card__sizes{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.card__sizes--low{color:var(--ember-text)}

/* ------------------------------------------------------------ Vault odası */
/* KOYU BÖLGELER — tek kural, üç yer: Vault odası, hero ve altlık.
   Kemik zemin için seçilen griler mürekkep zeminde 2–3:1'e düşüyor; bu yüzden
   koyu bağlamda değişkenler yeniden tanımlanıyor. Ölçülen: --muted 8,9:1,
   --muted-2 6,5:1. Vault'ta gösterilen "son 30 günün en düşük fiyatı" gibi
   satırlar yasal zorunluluk — okunur olmaları şart. */
.vault,.hero,.foot,.member,.stage,.manifesto{
  /* Nötr griler: bu ikisi sıcak tonluydu (#b4aea0/#9a9384) ve palet
     siyah-beyaza geçerken gözden kaçmıştı — koyu bölümlere bej bir sis
     veriyorlardı. */
  --muted:#b0b0b0;
  --muted-2:#949494;
  --brass-text:var(--brass-2);   /* mürekkep üzerinde 13:1 */
  --ember-text:#e08a72;
}
.vault{background:var(--ink);color:var(--bone);position:relative;overflow:hidden}
.vault::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(60% 46% at 12% 0%,rgba(255,255,255,.06),transparent 66%),
    radial-gradient(52% 40% at 92% 96%,rgba(196,85,58,.13),transparent 64%);
}
.vault>*{position:relative}

/* KATEGORİ FİLMİ — bölümün tam ekran açılışı.
   Film arkada, %42 opaklıkta: derinlik için orada, okunurluk için değil.
   Kontrastı sağlayan altındaki perde — böylece filmin hangi karesinde
   durduğu fark etmiyor, taban sabit. Aynı yaklaşım kapakta ve Vault'ta da
   kullanılıyor; ölçüldü ve üç yerde de sınırın üstünde. */
.catfilm{
  position:relative;overflow:hidden;background:var(--ink);color:var(--bone);
  /* 84svh idi: dizin sekiz satır olduğu için altta 200 piksel ölü boşluk
     kalıyordu. 72 hem sinematik hem dizine yakışıyor. */
  min-height:clamp(520px,72svh,860px);display:grid;align-items:center;
  margin:clamp(34px,4.5vw,64px) 0;
}
.catfilm__art{position:absolute;inset:0;z-index:0}
.catfilm__art video,.catfilm__art img{
  width:100%;height:100%;object-fit:cover;display:block;opacity:.42;
}
.catfilm::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.62) 0%,rgba(0,0,0,.44) 40%,rgba(0,0,0,.72) 100%),
    radial-gradient(64% 58% at 28% 50%,rgba(0,0,0,.40),transparent 78%);
}
.catfilm__in{position:relative;z-index:2;width:100%}
.catfilm__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(2px,.5vw,8px) clamp(20px,4vw,64px);
}
/* Satırlar arasında ince bir çizgi: dizin bir künye gibi okunuyor. */
.catfilm__a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:clamp(9px,1.1vw,15px) 0;border-bottom:1px solid rgba(255,255,255,.16);
  font-family:var(--serif);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(21px,2.5vw,40px);line-height:1.12;color:var(--bone);
  transition:padding-left .35s var(--ease),border-color .35s var(--ease);
}
.catfilm__a i{
  font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.2em;
  color:color-mix(in oklab,var(--bone) 72%,transparent);flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.catfilm__a:hover,.catfilm__a:focus-visible{
  padding-left:clamp(8px,1.4vw,20px);border-bottom-color:var(--bone);
}
@media (prefers-reduced-motion:reduce){
  .catfilm__art video{display:none}
  .catfilm__a{transition:none}
}

/* EV ŞERİDİ — sayfanın tipografik anı.
   Kampanya fotoğrafımız olmadığı için "özel" hissi görselden değil puntodan
   geliyor. İsimler serif ve devasa; aralarındaki eşkenar dörtgen tek süs ve
   bilerek küçük. Üstünde ve altında ince çizgi — künye satırı gibi duruyor,
   reklam bandı gibi değil. */
.housereel{
  border-top:1px solid var(--bone-3);border-bottom:1px solid var(--bone-3);
  overflow:hidden;padding:clamp(18px,2.4vw,30px) 0;background:var(--bone);
}
.housereel__track{
  display:flex;align-items:center;width:max-content;
  animation:housereel 64s linear infinite;
}
.housereel__i{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(30px,5.6vw,86px);line-height:1;letter-spacing:-.02em;
  white-space:nowrap;padding:0 clamp(16px,2vw,30px);color:var(--ink);
}
.housereel__d{color:var(--muted-2);font-size:clamp(7px,.8vw,11px);line-height:1}
/* Liste iki tur basılıyor; -%50'de başa dönünce dikiş görünmüyor. */
@keyframes housereel{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .housereel__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

/* Vault kapağı: film + perde. Ana sayfadaki sahnenin alçak kardeşi.
   Film %38 opaklıkta duruyor — okunurluk için değil, DERİNLİK için orada;
   metnin kontrastını asıl sağlayan altındaki perde. Böylece bir sonraki kare
   ne kadar parlak olursa olsun taban değişmiyor. */
.vhero{padding-top:clamp(52px,7vw,92px)}
/* "Premium Outlet — the / Vault": tek kelimelik yetim satır olmasın. */
.vhero h1{text-wrap:balance}
.vhero__art{position:absolute;inset:0;z-index:0;overflow:hidden}
.vhero__art video,.vhero__art img{
  width:100%;height:100%;object-fit:cover;display:block;opacity:.38;
}
.vhero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,.42) 42%,rgba(0,0,0,.92) 100%),
    radial-gradient(70% 60% at 30% 45%,rgba(0,0,0,.42),transparent 76%);
}
.vhero>.wrap{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.vhero__art video{display:none}}
.vault h1,.vault h2,.vault h3{color:var(--bone)}
.vault .sechead__s,.vault .lede{color:color-mix(in oklab,var(--bone) 66%,transparent)}
.vault .sechead__more{border-color:rgba(255,255,255,.28)}
.vault .sechead__more:hover{border-color:var(--brass-2)}
.vault .rule{background:rgba(255,255,255,.14)}
.vault .table th,.vault .table td{border-bottom-color:rgba(255,255,255,.12)}
.vault .table tbody tr:hover{background:rgba(255,255,255,.05)}
.vault .doc__box{background:var(--ink-2);border-color:rgba(255,255,255,.14);color:var(--muted)}
.vault .panel{border-top-color:rgba(255,255,255,.16)}
/* .panel p{color:var(--text)} açık vitrin için doğru, koyu odada metni
   görünmez yapıyordu (ölçülen 1,1:1). Vault içinde geri alıyoruz. */
.vault .panel p,.vault .panel li,.vault .dl dd,.vault .seller__name{color:var(--bone)}
.vault .panel .lot__legal,.vault .panel .pdp__vat,.vault .seller__note{color:var(--muted-2)}
.vault .dl dt,.vault .seller__type{color:var(--muted)}
/* Beden çipleri açık zemin için çizilmişti: kenarlık kemik rengi, seçiliyken
   zemin mürekkep. Vault sayfası koyu, yani ikisi de görünmez oluyordu. */
.vault .size{border-color:rgba(255,255,255,.26);color:var(--bone)}
.vault .size:hover{border-color:rgba(255,255,255,.55)}
.vault .size:has(input:checked){background:var(--brass-2);border-color:var(--brass-2);color:var(--ink)}
.vault .size:has(input:checked) i{color:rgba(0,0,0,.62)}
.vault .size i{color:var(--muted-2)}
.vault .field__err{color:var(--ember,#e0654a)}
.vault .panel h2{color:var(--brass-text)}
.vault .link{border-bottom-color:rgba(255,255,255,.3)}
.vault .link:hover{border-bottom-color:var(--brass-2)}
.vault .field input,.vault .field select,.vault .field textarea{
  background:transparent;border-color:rgba(255,255,255,.22);color:var(--bone);
}
.vault .btn--ghost{color:var(--bone);border-color:rgba(255,255,255,.4)}
.vault .btn--ghost::before{background:var(--bone)}
.vault .btn--ghost:hover{color:var(--ink)}
.vault .btn--brass{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.vault .btn--brass::before{background:var(--ink)}
.vault .btn--brass:hover{color:var(--bone)}
.vault .crumbs{color:var(--muted-2)}
.vault .crumbs li+li::before{color:rgba(255,255,255,.25)}
.vault .sizetabs a{background:var(--ink-2);color:var(--muted)}

.lede{max-width:62ch;font-size:clamp(15px,1.5vw,18.5px);color:var(--muted)}

.lots{
  display:grid;gap:clamp(18px,2.2vw,34px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
}
.lot{
  background:var(--ink-2);border:1px solid rgba(255,255,255,.10);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.lot:hover{border-color:rgba(255,255,255,.45);transform:translateY(-3px)}
.lot__media{position:relative;aspect-ratio:1/1;background:var(--ink-3);overflow:hidden}
.lot__media img{opacity:.94;transition:transform .9s var(--ease)}
.lot__media .fr{background:var(--ink-3)}
.lot:hover .lot__media img{transform:scale(1.05)}
.lot__step{
  position:absolute;top:12px;left:12px;background:rgba(0,0,0,.72);color:var(--brass-2);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.24);
}
.lot__sold{
  position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.66);
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--bone);backdrop-filter:blur(2px);
}
.lot.is-sold .lot__media img{filter:grayscale(1)}
.lot__body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.lot__brand{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-text)}
.lot__name{font-size:17px;line-height:1.28}
.lot__price{display:flex;align-items:baseline;gap:11px;margin-top:2px}
.lot__now{
  font-family:var(--serif);font-size:clamp(26px,3vw,34px);color:var(--bone);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.lot__ref{color:var(--muted-2);font-size:14px}
.lot__legal{font-size:10.5px;line-height:1.45;color:var(--muted-2)}
.lot__drop{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--brass-2);
  font-variant-numeric:tabular-nums;
}
.lot__drop--floor{color:var(--muted-2)}
.lot__cd{font-weight:600;letter-spacing:.06em}
.lot__then{color:var(--muted-2)}
.lot__meter{height:2px;background:rgba(255,255,255,.13);margin:4px 0 6px;overflow:hidden}
.lot__meter span{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--brass-2),var(--ember))}
.lot__body form{margin-top:auto}
.lot.is-locked .lot__now{color:var(--muted-2)}

/* Takvim: henüz açılmamış loslar.
   Kart değil satır — bunlar alınabilir bir şey değil, bir randevu. Kart
   biçimi verilseydi ziyaretçi tıklayıp satın almayı denerdi. */
.soon{display:flex;flex-direction:column;border-top:1px solid var(--bone-3)}
.soon__row{
  display:grid;align-items:center;gap:clamp(12px,2vw,26px);
  grid-template-columns:56px minmax(0,1fr) auto auto;
  padding:14px 0;border-bottom:1px solid var(--bone-3);
}
.soon__img{width:56px;height:70px;object-fit:cover;background:var(--bone-2);border-radius:2px}
.soon__brand{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.soon__name{font-size:15px;line-height:1.3;color:var(--text);margin-top:3px}
.soon__when,.soon__price{
  text-align:right;font-size:13px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.soon__when span,.soon__price span{display:block;font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.02em}
/* Aynı şerit hem koyu Vault sayfasında hem açık bülten sayfasında kullanılıyor. */
.vault .soon,.vault .soon__row{border-color:rgba(255,255,255,.12)}
.vault .soon__img{background:var(--ink-3);opacity:.9}
.vault .soon__brand{color:var(--brass-text)}
.vault .soon__name,.vault .soon__when,.vault .soon__price{color:var(--bone)}
.vault .soon__when span,.vault .soon__price span{color:var(--muted-2)}
@media (max-width:640px){
  /* Dört sütun telefona sığmıyor: fotoğraf solda kalsın, geri kalanı alt alta. */
  .soon__row{grid-template-columns:48px minmax(0,1fr);gap:12px 14px}
  .soon__img{width:48px;height:60px;grid-row:span 2}
  .soon__when,.soon__price{text-align:left;grid-column:2}
  .soon__when{display:flex;gap:8px;align-items:baseline}
  .soon__when span{margin-top:0}
  .soon__price{display:flex;gap:8px;align-items:baseline}
  .soon__price span{margin-top:0}
}

/* Vault mekaniği anlatım şeridi */
.steps{display:grid;gap:clamp(18px,2.4vw,34px);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.step{border-top:1px solid rgba(255,255,255,.2);padding-top:18px}
.step b{
  display:block;font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--brass-text);
  margin-bottom:9px;font-weight:500;
}
.step h2,.step h3{font-size:19px;margin-bottom:7px;letter-spacing:0;text-transform:none;font-family:var(--serif);color:inherit}
.step p{font-size:13.5px;color:var(--muted)}

/* --------------------------------------------------------------- güven */
.trust{display:grid;gap:clamp(22px,3vw,44px);grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr))}
.trust__i{color:var(--brass-text);margin-bottom:14px}
.trust h3{font-size:19px;margin-bottom:8px}
.trust p{font-size:13.5px;color:var(--muted)}

/* -------------------------------------------------------------- markalar */
.brands{display:flex;flex-wrap:wrap;gap:1px;background:var(--bone-3)}
.brands a{
  flex:1 1 190px;background:var(--bone);padding:26px 18px;text-align:center;
  font-family:var(--serif);font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.brands a:hover{background:var(--ink);color:var(--bone)}
.brands a i{display:block;font-style:normal;font-family:var(--sans);font-size:10px;letter-spacing:.16em;color:var(--muted-2);margin-top:7px}
.brands a:hover i{color:var(--brass)}

/* ------------------------------------------------------------ newsletter */
.member{background:var(--ink-2);color:var(--bone);border-radius:var(--r);padding:clamp(28px,4vw,56px);overflow:hidden;position:relative}
.member::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 100% at 100% 0%,rgba(255,255,255,.06),transparent 60%);
}
.member>*{position:relative}
.member h2{font-size:clamp(24px,3vw,38px);max-width:24ch}
.member p{color:color-mix(in oklab,var(--bone) 68%,transparent);margin-top:12px;max-width:52ch;font-size:14.5px}
.member form{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;max-width:560px}
.member input[type=email]{
  flex:1 1 240px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.32);
  color:var(--bone);padding:13px 2px;font-size:15px;
}
.member input[type=email]::placeholder{color:var(--muted-2)}
.member input[type=email]:focus{outline:none;border-color:var(--brass)}
.member .consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:11.5px;color:var(--muted-2);max-width:60ch}
.member .consent input{margin-top:3px;accent-color:var(--brass)}

/* ------------------------------------------------------------ ürün sayfası */
.pdp{display:grid;gap:clamp(26px,4vw,64px);grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:start}
@media (max-width:940px){.pdp{grid-template-columns:1fr}}
.pdp__media{display:grid;gap:10px;grid-template-columns:1fr}
.pdp__media--multi{grid-template-columns:repeat(2,1fr)}
/* Ürün sayfasında dar kare: bulanık zemin yerine karenin kendi kenar rengi.
   Koyu giysinin bulanık büyütmesi açık stüdyo fotoğrafının iki yanında is
   lekesi gibi duruyordu; düz renk paspartu gibi okunuyor. Karoda bulanık
   zemin kalıyor — orada kare küçük ve dolgu dar. */
.pdp__media .fr--pad::before{display:none}
/* Yatay kare iki sütunu kaplar; oranı satır içi stilden gelir. */
.pdp__media--multi .pdp__shot--wide{grid-column:1/-1}
.pdp__shot{background:var(--bone-2);aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)}
/* Tek kare varsa tam genişlik; galeri çoklu ise 2×2 eşit ızgara.
   TEK sayıda kare varsa (3, 5, 7 …) ilk kadraj tam genişlikte kahraman kare
   olur ve geri kalan çift sayı 2×2'yi tam doldurur — çift sayıda ise düz
   ızgara zaten kusursuz, kahraman kare kurulmaz (yoksa altta yetim kalır). */
.pdp__media:not(.pdp__media--multi) .pdp__shot{aspect-ratio:1/1}
.pdp__media--multi .pdp__shot:first-child:nth-last-child(n+3):nth-last-child(odd){
  grid-column:1/-1;aspect-ratio:1/1;
}
.pdp__zoom{z-index:2}

/* Masaüstünde galeri TEK sütun.
   2×2 ızgara medya sütununu kısa bırakıyordu: yan sütun bir buçuk ekran
   uzunken solda yarım ekranlık boş bir alan kalıyor, sayfa yarım kalmış gibi
   duruyordu. Tek sütunda kadraj büyüyor (parça gerçekten görülüyor), medya
   sütunu yan sütunu geçiyor ve yapışkan yan sütun okurken yerinde kalıyor.
   Dar ekranda 2×2 kalıyor — orada tam genişlik kadraj devasa olurdu. */
@media (min-width:941px){
  .pdp__media--multi{grid-template-columns:1fr}
  .pdp__media--multi .pdp__shot,
  .pdp__media--multi .pdp__shot:first-child:nth-last-child(n+3):nth-last-child(odd){
    aspect-ratio:4/5;
  }
  /* Tek kadraj: yan sütun ondan uzun olduğu için fotoğraf yapışıyor ve okuma
     boyunca yanında duruyor. Aksi hâlde tek fotoğrafın altı ekran boyu boş
     kalırdı — üretilen kadrajlarla doldurma denendi, daha kötüydü. */
  .pdp__media:not(.pdp__media--multi){position:sticky;top:96px}
}

.pdp__side{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
@media (max-width:940px){.pdp__side{position:static}}
.pdp__brand{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.pdp h1{font-size:clamp(25px,3.1vw,38px);margin-top:9px}
.pdp__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pdp__price b{font-family:var(--serif);font-size:clamp(24px,2.7vw,32px);font-weight:500;font-variant-numeric:tabular-nums}
.pdp__price s{color:var(--muted-2)}
.pdp__vat{font-size:11.5px;color:var(--muted)}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.size{
  position:relative;border:1px solid var(--bone-3);padding:11px 15px;cursor:pointer;
  font-size:12.5px;letter-spacing:.1em;min-width:52px;text-align:center;border-radius:var(--r);
  transition:border-color .2s,background .2s;
}
.size input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.size:hover{border-color:var(--muted)}
.size:has(input:checked){border-color:var(--ink);background:var(--ink);color:var(--bone)}
.size:has(input:focus-visible){outline:2px solid var(--brass);outline-offset:2px}
.size i{display:block;font-style:normal;font-size:9.5px;color:var(--muted-2);margin-top:2px}
/* Beden karşılığı ("IT 48 · 31\""): çipin ana etiketinden bir kademe silik,
   ama stok uyarısıyla karışmasın diye onun üstünde ve biraz daha geniş. */
.size__eq{letter-spacing:.06em;white-space:nowrap}
.size:has(input:checked) .size__eq{color:var(--brass-2)}
.size:has(input:checked) i{color:var(--brass-2)}
.size.is-out{opacity:.35;pointer-events:none;text-decoration:line-through}

.panel{border-top:1px solid var(--bone-3);padding-top:16px;display:grid;gap:9px}
.panel h2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-family:var(--sans);color:var(--muted)}
.panel p,.panel li{font-size:13.5px;color:var(--text)}
.panel--seller{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--bone-3);padding:16px;border-top-width:1px}
.panel--seller .ico{color:var(--brass-text);flex:0 0 auto;margin-top:2px}
.seller__type{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.seller__name{font-size:19px;font-family:var(--serif);margin-top:3px;line-height:1.2}
.seller__note{font-size:12px;color:var(--muted);margin-top:7px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13px}
.dl dt{color:var(--muted)}
.dl dd{margin:0}

/* ---------------------------------------------------------- filtre / shop */
.shop{display:grid;grid-template-columns:212px minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
@media (max-width:900px){.shop{grid-template-columns:1fr}}
.filters{position:sticky;top:96px;font-size:13.5px}
.filters__body{display:grid;gap:24px}
.filters__toggle{
  display:none;                      /* masaüstünde gerek yok, panel hep açık */
  align-items:center;justify-content:space-between;gap:12px;cursor:pointer;
  padding:12px 14px;border:1px solid var(--bone-3);border-radius:var(--r);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  list-style:none;margin-bottom:18px;
}
.filters__toggle::-webkit-details-marker{display:none}
.filters__toggle svg{transition:transform .3s var(--ease)}
.filters[open]>.filters__toggle{color:var(--ink);border-color:var(--ink)}
.filters[open]>.filters__toggle svg{transform:rotate(90deg)}
@media (max-width:900px){
  .filters{position:static}
  .filters__toggle{display:flex}
}
@media (min-width:901px){
  /* <details> kapalıyken tarayıcı gövdeyi gizliyor; masaüstünde panel her
     zaman görünmeli. Eski motorlar bunu çocukta display:none ile yapıyordu,
     yeni Chromium (131+) ::details-content üzerinde content-visibility:hidden
     ile — ikincisini çocuğun display'i geri alamıyor, sol sütun bomboş
     kalıyordu. İkisini de geri alıyoruz. */
  .filters::details-content{content-visibility:visible}
  .filters>.filters__body{display:grid !important}
}
.filters h2{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-family:var(--sans);color:var(--muted);margin-bottom:10px}
.filters a{display:flex;justify-content:space-between;gap:10px;padding:4px 0;color:var(--muted)}
.filters a:hover{color:var(--ink)}
.filters a.is-on{color:var(--ink);font-weight:600}
.filters a i{font-style:normal;font-size:11px;color:var(--muted-2);font-variant-numeric:tabular-nums}
.filters__price{display:flex;gap:8px;align-items:center}
.filters__price input{
  width:100%;border:1px solid var(--bone-3);background:transparent;padding:9px;font-size:13px;border-radius:var(--r);
}
.shopbar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.shopbar__n{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.select{
  border:1px solid var(--bone-3);background:var(--bone);padding:9px 30px 9px 12px;font-size:12px;
  letter-spacing:.09em;border-radius:var(--r);appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat;
}
.pager{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:clamp(30px,4vw,56px)}
.pager a,.pager span{
  min-width:40px;padding:10px;text-align:center;border:1px solid var(--bone-3);font-size:12px;border-radius:var(--r);
}
.pager .is-on{background:var(--ink);color:var(--bone);border-color:var(--ink)}

/* ----------------------------------------------------------------- sepet */
.cart{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr);gap:clamp(26px,4vw,56px);align-items:start}
@media (max-width:860px){.cart{grid-template-columns:1fr}}
.citem{display:grid;grid-template-columns:96px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--bone-3)}
.citem__img{background:var(--bone-2);aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)}
.citem__img img{width:100%;height:100%;object-fit:cover}
.citem__brand{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.citem__name{font-family:var(--serif);font-size:16px;margin:4px 0 6px}
.citem__meta{font-size:12px;color:var(--muted)}
.citem__right{text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.citem__price{font-variant-numeric:tabular-nums;font-size:15px}
.qty{display:inline-flex;border:1px solid var(--bone-3);border-radius:var(--r)}
.qty button{border:0;background:none;width:32px;height:32px;cursor:pointer;color:var(--muted)}
.qty button:hover{color:var(--ink)}
.qty input{
  width:36px;border:0;border-left:1px solid var(--bone-3);border-right:1px solid var(--bone-3);
  text-align:center;background:none;font-size:13px;font-variant-numeric:tabular-nums;
}
.qty input:focus{outline:none}
.xlink{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);border:0;background:none;cursor:pointer;padding:0}
.xlink:hover{color:var(--ember-text)}

.summary{background:var(--bone-2);padding:clamp(20px,2.4vw,30px);border-radius:var(--r);display:grid;gap:12px;position:sticky;top:96px}
@media (max-width:860px){.summary{position:static}}
.summary h2{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-family:var(--sans);color:var(--muted)}
.srow{display:flex;justify-content:space-between;gap:14px;font-size:14px;font-variant-numeric:tabular-nums}
.srow--total{font-size:19px;font-family:var(--serif);border-top:1px solid var(--bone-3);padding-top:12px;margin-top:4px}
.srow--muted{font-size:11.5px;color:var(--muted)}

/* ---------------------------------------------------------------- formlar */
.form{display:grid;gap:16px;max-width:520px}
.form--wide{max-width:none}
.field{display:grid;gap:6px}
.field>label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  border:1px solid var(--bone-3);background:var(--bone);padding:13px 14px;font:inherit;font-size:15px;
  border-radius:var(--r);width:100%;color:var(--text);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.field small{font-size:11.5px;color:var(--muted-2)}
.field--err input,.field--err select{border-color:var(--ember)}
.field__err{font-size:12px;color:var(--ember-text)}
.check{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--muted)}
.check input{margin-top:3px;accent-color:var(--ink);width:17px;height:17px;flex:0 0 auto}
.radios{display:grid;gap:10px}
.radio{
  display:flex;gap:12px;align-items:flex-start;border:1px solid var(--bone-3);padding:15px;
  cursor:pointer;border-radius:var(--r);transition:border-color .2s,background .2s;
}
.radio:has(input:checked){border-color:var(--ink);background:var(--bone-2)}
.radio input{margin-top:3px;accent-color:var(--ink)}
.radio b{display:block;font-size:14.5px;font-weight:600}
.radio span{font-size:12.5px;color:var(--muted)}

/* ------------------------------------------------------- bildirim/uyarı */
.flashes{max-width:var(--wrap);margin:16px auto 0;padding:0 var(--gut);display:grid;gap:8px}
.flash{padding:13px 16px;font-size:13.5px;border-left:3px solid var(--ink);background:var(--bone-2)}
.flash--ok{border-color:#3f7d52}
.flash--err{border-color:var(--ember)}
.notice{
  border:1px solid var(--bone-3);border-left:3px solid var(--brass);background:var(--bone-2);
  padding:15px 18px;font-size:13px;color:var(--muted);margin-bottom:24px;
}
.notice--demo{border-left-color:var(--ember)}
.notice strong{color:var(--text)}
.vault .notice{background:var(--ink-2);border-color:rgba(255,255,255,.14);color:var(--muted-2)}

/* -------------------------------------------------------------- kırıntı */
.crumbs{margin-bottom:22px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--bone-3)}
.crumbs a:hover{color:var(--ink)}

/* ---------------------------------------------------------------- legal */
.doc{max-width:78ch;margin:0 auto}
.doc h1{font-size:clamp(28px,3.6vw,44px);margin-bottom:10px}
.doc__meta{font-size:12px;color:var(--muted-2);margin-bottom:34px}
.doc h2{font-size:20px;margin:36px 0 12px}
.doc h3{font-size:16px;margin:24px 0 8px;font-family:var(--sans);font-weight:700;letter-spacing:0}
.doc p,.doc li{font-size:14.5px;color:var(--text);margin-bottom:11px}
.doc ul,.doc ol{padding-left:22px;margin:0 0 14px}
.doc a{border-bottom:1px solid var(--bone-3)}
.doc a:hover{border-color:var(--ink)}
.doc table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13.5px}
/* Dar ekranda tablo kendi kutusunda kaysın, sayfa değil. */
.tablewrap{overflow-x:auto;margin:16px 0;-webkit-overflow-scrolling:touch}
.tablewrap table{margin:0;min-width:420px}
/* Tablo: ızgara değil, yalnızca yatay kıl çizgiler — editoryal düzen. */
.doc th,.doc td{border:0;border-bottom:1px solid var(--bone-3);padding:14px 18px 14px 0;text-align:left;vertical-align:top;line-height:1.6}
.doc th{border-bottom-color:var(--ink);font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:10px}
.doc td:first-child{font-weight:500;color:var(--ink)}
.doc th:last-child,.doc td:last-child{padding-right:0}
/* .doc p / li / ol genel kuralları kırıntıyı ve künye satırlarını ezmesin */
.doc .crumbs ol{padding-left:0;margin:0}
.doc .crumbs li{font-size:inherit;color:inherit;margin:0}
.doc p.doc__meta{font-size:12px;letter-spacing:.04em;color:var(--muted-2);margin-bottom:40px}
.doc p.doc__binding{font-size:12px;letter-spacing:.04em;font-style:italic;color:var(--muted-2);margin:-34px 0 40px}
.doc__box{border:1px solid var(--bone-3);background:var(--bone-2);padding:18px 20px;margin:20px 0;font-size:13.5px}
.doc__toc{border-left:2px solid var(--brass);padding-left:18px;margin:0 0 34px}
.doc__toc a{display:block;padding:3px 0;font-size:13.5px;border:0;color:var(--muted)}
.doc__toc a:hover{color:var(--ink)}
/* Çeviri notu: sessiz, belgeyi kesmeyen tek satır. Fallback'te .notice kullanılır. */
.doc__related{font-size:12.5px;color:var(--muted);line-height:2}
.doc__rule{margin:40px 0 22px}
.doc__list{font-size:13px;color:var(--muted);line-height:1.9}
.doc__missing{color:var(--ember-text);font-style:normal}
.doc[lang="de"] .notice{font-style:normal}
/* Telefon: tablo yana kaymasın; her satır etiketli, kıl çizgiyle ayrılmış bir blok. */
@media (max-width:640px){
  .doc .tablewrap{overflow:visible}
  .doc .tablewrap table{min-width:0}
  .doc table.is-labelled thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .doc table.is-labelled,.doc table.is-labelled tbody,.doc table.is-labelled tr,.doc table.is-labelled td{display:block;width:100%}
  .doc table.is-labelled tr{border-top:1px solid var(--bone-3);padding:16px 0 6px}
  .doc table.is-labelled tr:first-child{border-top-color:var(--ink)}
  .doc table.is-labelled td{border:0;padding:0 0 10px}
  .doc table.is-labelled td:first-child{font-family:var(--serif);font-size:18px;font-weight:400;padding-bottom:8px}
  .doc table.is-labelled td:not(:first-child)::before{content:attr(data-label);display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:2px}
}

/* ------------------------------------------------------------------- FAQ */
.faq{max-width:82ch;margin:0 auto}
.faq__grp{margin-bottom:34px}
.faq__grp>h2{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-family:var(--sans);color:var(--brass-text);margin-bottom:12px}
.qa{border-bottom:1px solid var(--bone-3)}
.qa summary{
  cursor:pointer;padding:16px 34px 16px 0;font-family:var(--serif);font-size:17.5px;position:relative;list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+";position:absolute;right:4px;top:15px;font-family:var(--sans);font-size:20px;color:var(--brass-text);
  transition:transform .25s var(--ease);
}
.qa[open] summary::after{transform:rotate(45deg)}
.qa__a{padding:0 0 18px;font-size:14px;color:var(--muted);max-width:70ch}
.qa__a p+p{margin-top:10px}

/* ------------------------------------------------------------ satıcı paneli */
.dash{display:grid;grid-template-columns:216px minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
@media (max-width:860px){.dash{grid-template-columns:1fr}}
.dashnav{display:grid;gap:2px;position:sticky;top:96px}
@media (max-width:860px){.dashnav{position:static;grid-auto-flow:column;overflow-x:auto}}
.dashnav a{
  padding:11px 13px;font-size:12.5px;letter-spacing:.09em;color:var(--muted);border-left:2px solid transparent;
  white-space:nowrap;
}
.dashnav a:hover{color:var(--ink)}
.dashnav a.is-on{color:var(--ink);border-left-color:var(--brass-text);background:var(--bone-2);font-weight:600}
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));margin-bottom:28px}
.tile{border:1px solid var(--bone-3);padding:18px;border-radius:var(--r)}
.tile b{display:block;font-family:var(--serif);font-size:27px;font-weight:500;font-variant-numeric:tabular-nums}
.tile span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th,.table td{padding:11px 10px;border-bottom:1px solid var(--bone-3);text-align:left;vertical-align:top}
.table th{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:500}
.table tbody tr:hover{background:var(--bone-2)}
.pill{
  display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;
  border:1px solid var(--bone-3);border-radius:20px;
}
.pill--live{background:#e8f0e9;border-color:#c3d8c8;color:#2f6640}
.pill--review{background:#f3ecdb;border-color:#e0d0a8;color:#7a6220}
.pill--out{background:#f6e6e2;border-color:#e2c3ba;color:#8d3f2c}
.pill--brass{background:var(--ink);border-color:var(--ink);color:var(--bone)}

/* ------------------------------------------------------------ sipariş sonu */
.done{max-width:640px;margin:0 auto;text-align:center}
.done__mark{
  width:64px;height:64px;border-radius:50%;border:1px solid var(--brass);color:var(--brass-text);
  display:grid;place-items:center;margin:0 auto 24px;
}
.done h1{font-size:clamp(26px,3.4vw,40px)}
.done__num{
  font-family:var(--serif);font-size:22px;letter-spacing:.1em;margin:18px 0;padding:14px;
  background:var(--bone-2);border-radius:var(--r);
}
.done__next{text-align:left;display:grid;gap:12px;margin:28px 0;font-size:14px;color:var(--muted)}
.done__next li{display:flex;gap:12px;align-items:flex-start;list-style:none}
.done__next .ico{color:var(--brass-text);flex:0 0 auto;margin-top:2px}
.done__next ol,.done__next ul{padding:0;margin:0;display:grid;gap:12px}

/* ---------------------------------------------------------------- diller */
.langs{display:flex;flex-wrap:wrap;gap:1px;margin-top:18px}

/* BÖLGE & PARA BİRİMİ — başlıktaki ince kontrol.
   Özet satırı "EN · €" gibi okunuyor; açılınca dil ve para birimi listeleri.
   Salt HTML: details/summary. Panel mutlak konumlu, başlığın altına iniyor. */
.region{position:relative}
.region>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  font-size:10.5px;letter-spacing:.2em;padding:8px 6px;color:var(--ink);
}
.region>summary::-webkit-details-marker{display:none}
.region>summary i{font-style:normal;color:var(--muted-2)}
.region__panel{
  position:absolute;right:0;top:calc(100% + 10px);z-index:95;min-width:250px;
  background:var(--bone);border:1px solid var(--bone-3);padding:16px 18px 14px;
  box-shadow:var(--shadow);
}
.region__panel .langs{margin-top:6px}
.region__h{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0}
.region__h+.langs+.region__h,.region__panel .langs+.region__h{margin-top:16px}
.region__n{font-size:11px;color:var(--muted-2);margin-top:10px}
@media (max-width:900px){.region{display:none}}   /* telefonda çekmecede zaten var */

/* GÖSTERGE KARŞILIK — fiyatın yanında silik "≈ $213".
   Kartta tek satır; ürün sayfasında altına küçük "gösterge · EUR çekilir". */
.fx{font-family:var(--sans);font-size:12px;color:var(--muted-2);letter-spacing:.02em;white-space:nowrap}
.card__price .fx{display:block;margin-top:2px}
.fx--pdp{display:block;margin-top:6px;font-size:14px}
.fx--pdp i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:2px;color:var(--muted-2)}

/* ÖZEL MÜŞTERİLER — üç sütun ve ana sayfadaki sessiz levha. */
/* Form ikilisi: .grid--2 iki sütun için 860 px istiyor, metin sütunu 794 px —
   orada hep alt alta düşüyordu. Bu eşik sütuna göre ayarlı. */
/* Özel müşteri formu: ikili satırlar sığsın diye 520'den geniş, ama gönder
   düğmesi 794 pikselde absürt durduğu için metin sütunundan dar. */
.form--pc{max-width:620px}
.form__privacy{font-size:12px;color:var(--muted);margin-top:14px}
.form__pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px}

.pc__three{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(22px,3vw,44px);margin-top:8px}
.pc__three b{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;color:var(--muted-2);margin-bottom:12px}
.pc__three h2{font-size:20px;margin:0 0 8px}
.pc__three p{font-size:14.5px;color:var(--text);margin:0}
.pcband{border-top:1px solid var(--bone-3);border-bottom:1px solid var(--bone-3);padding:clamp(28px,4vw,52px) 0}
.pcband__in{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pcband h2{font-size:clamp(22px,2.6vw,34px);margin:0}
.pcband p{font-size:14.5px;color:var(--muted);margin:6px 0 0}
.lang{
  font-size:10.5px;letter-spacing:.15em;padding:6px 9px;color:var(--muted-2);border:1px solid transparent;
}
.lang:hover{color:var(--ink)}
.lang.is-on{border-color:var(--bone-3);color:var(--ink)}
.foot .lang:hover,.foot .lang.is-on{color:var(--bone);border-color:rgba(255,255,255,.25)}

/* ---------------------------------------------------------------- altlık */
/* margin-top YOK: koyu bir bölümden (Vault, hero) hemen sonra gelen altlıkta
   araya kemik rengi bir şerit giriyordu. Boşluğu bölümlerin kendi
   padding'i veriyor zaten. */
.foot{background:var(--ink);color:var(--muted-2);padding:clamp(48px,6vw,84px) 0 30px}
.foot__top{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:grid;gap:clamp(26px,3vw,40px);grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,.8fr));
}
/* Dört sütun + marka bloğu 1100px'in altında sıkışıyor: marka kendi satırına
   çıkıyor, sütunlar dörtlü kalıyor. */
@media (max-width:1100px){
  .foot__top{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot__brand{grid-column:1/-1}
}
/* 940px'in altında dört sütun 160px'e düşüyor ve "Erklärung zur
   Barrierefreiheit" gibi uzun başlıklar üç satıra kırılıyor — ikiye in. */
@media (max-width:940px){.foot__top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.foot__top{grid-template-columns:minmax(0,1fr)}}
.wordmark--foot{color:var(--bone);font-size:20px}
.foot__tag{font-family:var(--serif);font-size:15px;color:var(--brass-text);margin-top:12px}
.foot__note{font-size:12px;line-height:1.6;margin-top:14px;max-width:44ch}
.foot__col h2{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);
  font-family:var(--sans);font-weight:500;margin:0;
}
.foot__col a{display:block;font-size:13px;padding:4px 0;transition:color .2s}
.foot__col a:hover{color:var(--bone)}

/* Sütunlar <details>. GENİŞ ekranda açılır kapanır olmasınlar diye içerik
   koşulsuz gösteriliyor ve ok gizleniyor — open niteliğinin bir hükmü yok.
   Dar ekranda (620px altı) native davranış geri geliyor: dört başlık, biri
   dokununca açılıyor. */
.foot__d > summary{list-style:none;cursor:default;margin-bottom:13px}
.foot__d > summary::-webkit-details-marker{display:none}
.foot__d > summary::marker{content:""}
/* Kapali bir <details> icerigini geri getirmek iki satir istiyor: eski
   motorlarda display:none, yeni Chromium'da ::details-content uzerinde
   content-visibility:hidden. Yalnizca birini yazinca genis ekranda butun
   baglantilar kayboluyordu - olculdu. */
.foot__d > .foot__links{display:block}
.foot__d::details-content{content-visibility:visible;block-size:auto}
@media (max-width:620px){
  .foot__d > summary{
    cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:13px 0;margin:0;border-bottom:1px solid rgba(255,255,255,.12);
  }
  .foot__d > summary::after{
    content:"";width:7px;height:7px;flex:none;margin-right:2px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease);
  }
  .foot__d[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .foot__d > .foot__links{padding:8px 0 14px}
  .foot__d:not([open]) > .foot__links{display:none}
  .foot__d:not([open])::details-content{content-visibility:hidden;block-size:0}
  .foot__col{margin:0}
  .foot__top{gap:0}
}
.foot__pay{
  max-width:var(--wrap);margin:clamp(34px,4vw,56px) auto 0;padding:22px var(--gut) 0;
  border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:9px;
}
.pay{
  border:1px solid rgba(255,255,255,.18);padding:5px 10px;font-size:9.5px;letter-spacing:.14em;
}
.foot__bottom{
  max-width:var(--wrap);margin:22px auto 0;padding:0 var(--gut);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;
}

/* ------------------------------------------------------------ animasyonlar
   Beliriş efektinin VARSAYILANI görünür olmak. Gizleme yalnızca JavaScript
   çalışıyorsa (@media scripting: enabled) devreye giriyor.
   Neden: [data-reveal]{opacity:0} koşulsuz yazılırsa — ki ilk hali öyleydi —
   JS kapalı bir tarayıcıda, bir betik hatasında ya da IntersectionObserver
   desteklenmediğinde sayfanın TAMAMI görünmez kalıyor. Sitenin JS'siz de tam
   çalışması sözünü tutan şey bu blok. (JS tarafında ayrıca bir emniyet
   zamanlayıcısı var: bkz. maxsales.js) */
[data-reveal]{opacity:1;transform:none}
@media (scripting:enabled){
  [data-reveal]{opacity:0;transform:translateY(16px)}
  [data-reveal].is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].is-in{opacity:1;transform:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* --------------------------------------------------------------- yazdırma */
@media print{
  .site,.ticker,.foot,.drawer,.btn{display:none !important}
  body{background:#fff}
  .doc{max-width:none}
}

/* =========================================================================
   İKİNCİ TUR: Merkliste, galeri/büyüteç, son bakılanlar, Größenberatung,
   Kontakt, Journal, Vault-Alarm, 404
   ========================================================================= */

/* ------------------------------------------------------------- Merkliste */
.card{position:relative}
.wishform{position:absolute;top:8px;right:8px;z-index:2;margin:0}
.wish{
  display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;padding:8px;
  background:color-mix(in oklab,var(--bone) 82%,transparent);color:var(--ink);
  border-radius:50%;line-height:0;backdrop-filter:blur(6px);
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.wish:hover{background:var(--bone);transform:scale(1.08)}
.wish.is-on{color:var(--ember-text)}
.wish--lg{
  border-radius:var(--r);padding:11px 16px;line-height:1;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;background:none;border:1px solid var(--bone-3);
}
.wish--lg:hover{background:var(--bone-2);transform:none}
.wish--lg.is-on{border-color:var(--ember)}
.lot .wishform{top:10px;right:10px}
.lot .wish{background:rgba(0,0,0,.6);color:var(--bone);border:1px solid rgba(255,255,255,.18)}
.lot .wish.is-on{color:var(--ember-text)}

.pdp__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pdp__head .wishform{position:static}

/* --------------------------------------------------------- galeri/büyüteç */
.pdp__shot{position:relative;display:block}
/* 1:1 BÜYÜTME KATMANI.
   Orijinal dosya gerçek pikselleriyle basılıyor (background-size = doğal
   boyut), imleç de arka plan konumunu sürüyor. Katman YALNIZCA dosya
   ekrandakinden anlamlı ölçüde büyükse kuruluyor — bkz. maxsales.js. */
.pdp__mag{
  position:absolute;inset:0;z-index:1;background-repeat:no-repeat;
  opacity:0;transition:opacity .28s var(--ease);pointer-events:none;
}
.pdp__shot.is-mag .pdp__mag{opacity:1}
/* İmleç yalnızca gerçekten büyütecek kadraj üstünde değişiyor: büyütmeyen
   bir karede büyüteç imleci yalan olurdu. */
.pdp__shot.can-mag{cursor:zoom-in}
/* Büyütme açıkken büyüteç rozeti çekiliyor, kadrajın önünü kapatmasın. */
.pdp__shot.is-mag .pdp__zoom{opacity:0}

.pdp__zoom{
  position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;
  background:color-mix(in oklab,var(--bone) 84%,transparent);color:var(--ink);
  display:grid;place-items:center;opacity:0;transform:translateY(6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);backdrop-filter:blur(6px);
}
.pdp__shot:hover .pdp__zoom,.pdp__shot:focus-visible .pdp__zoom{opacity:1;transform:none}

.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.94);
  display:grid;place-items:center;padding:clamp(12px,4vw,52px);animation:fade .2s var(--ease);
}
.lightbox[hidden]{display:none}
/* max-* yalnızca KÜÇÜLTÜR: doğal boyutundan küçük bir kare büyütülmüyor,
   yani hiçbir zaman bulanık basılmıyor. */
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain;box-shadow:0 30px 90px -40px #000}
/* Büyütülmüş hâl: kısıt kalkıyor, kare doğal boyutunda ve sürüklenerek
   geziliyor. İmleç yalnızca gerçekten büyüyecek karede değişiyor (JS
   canZoom kapısı). */
/* Büyütülmüşken ızgaradan ÇIKIYOR.
   İlk sürümde kare ızgara öğesi olarak kalıyordu: doğal boyutu ekrandan
   büyük olduğu için ızgara alanı şişiyor, place-items:center kareyi o şişmiş
   alanın ortasına koyuyor ve kare ekranın dışına kaçıyordu — arka plan da
   bozuluyordu. Ekran görüntüsünde sayfa lightbox'ın arkasından görünüyordu.
   Büyütülmüş kare artık mutlak konumlu: ortadan hizalanıyor, kaydırma
   transform ile yapılıyor, kap da taşmayı kesiyor. */
.lightbox.is-zoom{display:block;overflow:hidden;padding:0}
.lightbox img.is-zoom{
  position:absolute;left:50%;top:50%;
  max-width:none;max-height:none;width:auto;height:auto;cursor:grab;
  box-shadow:none;transition:none;
}
.lightbox img.is-zoom:active{cursor:grabbing}
.lightbox__x,.lightbox__nav{
  position:absolute;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.5);
  color:var(--bone);width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:22px;
  display:grid;place-items:center;transition:background .2s,border-color .2s;
}
.lightbox__x:hover,.lightbox__nav:hover{background:rgba(255,255,255,.14);border-color:var(--brass-2)}
.lightbox__x{top:18px;right:18px}
.lightbox__nav--prev{left:18px;top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:18px;top:50%;transform:translateY(-50%)}
.lightbox__n{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:var(--muted-2);
  font-size:11px;letter-spacing:.2em;font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------- panel başlığı + ızgara */
.panel__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.panel__h .link{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:5px;
}
.panel__h .link:hover{color:var(--ink)}
.grid--6{grid-template-columns:repeat(auto-fill,minmax(min(100%,175px),1fr))}
.grid--6 .card__name{font-size:14px}
.grid--6 .card__price{font-size:13px}

/* ------------------------------------------------------- Größenberatung */
.sizetabs{display:flex;flex-wrap:wrap;gap:1px;background:var(--bone-3);margin-bottom:26px}
.sizetabs a{
  flex:1 1 130px;background:var(--bone);padding:13px 14px;text-align:center;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:background .2s,color .2s;
}
.sizetabs a:hover{color:var(--ink)}
.sizetabs a.is-on{background:var(--ink);color:var(--bone)}
.measure{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));margin:22px 0}
.measure div{border-top:1px solid var(--bone-3);padding-top:14px}
.measure b{display:block;font-family:var(--serif);font-size:16px;margin-bottom:6px}
.measure p{font-size:13px;color:var(--muted)}

/* ----------------------------------------------------------------- Journal */
.jgrid{display:grid;gap:clamp(18px,2.4vw,32px);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
/* Kutu yok, çerçeve yok: fotoğraf, bir ince boşluk, metin. Kart sınırını
   beyaz alan çiziyor — editöryal sayfalarda çerçeve dergiyi kataloğa çevirir. */
.jcard{display:flex;flex-direction:column;background:transparent}
/* Beş yazı üç sütunda bir boşluk bırakıyordu (3+2). Geniş ekranda ilk yazı
   iki sütun kaplıyor: 2+1 / 1+1+1 — ızgara tam kapanıyor, ilk yazı da öne çıkıyor. */
@media (min-width:1000px){
  .jgrid{grid-template-columns:repeat(3,1fr)}
  .jgrid>.jcard:first-child:nth-last-child(5),.jgrid>.jcard:first-child:nth-last-child(8){grid-column:span 2}
  /* iki sütun + oluk genişliğinde, yanındaki 4:3 karelerle AYNI yükseklik */
  .jgrid>.jcard:first-child:nth-last-child(5) .jcard__media,.jgrid>.jcard:first-child:nth-last-child(8) .jcard__media{aspect-ratio:8.32/3}
}
.jcard__media{aspect-ratio:4/3;overflow:hidden;background:var(--bone-2)}
.jcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.jcard:hover .jcard__media img{transform:scale(1.03)}
.jcard__body{padding:18px 0 6px;display:flex;flex-direction:column;gap:9px;flex:1}
.jcard__t a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .5s var(--ease)}
.jcard:hover .jcard__t a{background-size:100% 1px}

/* ------------------------------------------------------------- Markalar */
.housegrid{display:grid;gap:clamp(28px,4vw,56px) clamp(24px,4vw,64px);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.housecard{display:flex;flex-direction:column;gap:16px;padding-top:18px;border-top:1px solid var(--bone-3)}
.housecard__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 18px}
.housecard__t{font-family:var(--serif);font-size:clamp(22px,2.2vw,28px);letter-spacing:.02em;text-transform:none}
.housecard__meta{display:flex;gap:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.housecard__row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.housecard__shot{display:block;overflow:hidden}
.housecard__shot img{transition:transform 1.4s var(--ease)}
.housecard__shot:hover img{transform:scale(1.04)}
.housecard__more{align-self:flex-start}
.jcard__kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-text)}
.jcard__body h2,.jcard__body h3{font-size:21px;line-height:1.25;letter-spacing:0;text-transform:none;font-family:var(--serif);color:inherit}
.jcard__body p{font-size:13.5px;color:var(--muted)}
.jcard__more{margin-top:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--bone-3);align-self:flex-start;padding-bottom:4px}

/* ------------------------------------------------------------ Vault-Alarm */
.alert{border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:18px}
.alert h2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-family:var(--sans);color:var(--brass-text)}
.alert p{font-size:13px;color:var(--muted);margin:8px 0 14px}
.alert__row{display:flex;gap:8px;flex-wrap:wrap}
.alert__row input{
  flex:1 1 130px;background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--bone);
  padding:11px 12px;font:inherit;font-size:14px;border-radius:var(--r);
}
.alert__row input:focus{outline:none;border-color:var(--brass-2)}
.alert__row input::placeholder{color:var(--muted-2)}

/* --------------------------------------------------------------- arama önerisi */
.suggest{
  position:absolute;top:calc(100% + 6px);right:0;width:min(420px,80vw);background:var(--bone);
  border:1px solid var(--bone-3);box-shadow:var(--shadow);z-index:95;max-height:60vh;overflow:auto;
}
.suggest[hidden]{display:none}
.suggest a{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--bone-2)}
.suggest a:last-child{border-bottom:0}
.suggest a:hover,.suggest a.is-cur{background:var(--bone-2)}
.suggest img{width:42px;height:52px;object-fit:cover;flex:0 0 auto;background:var(--bone-2)}
.suggest__t{font-size:13.5px;line-height:1.3}
.suggest__b{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.suggest__p{margin-left:auto;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.search{position:relative}

/* ------------------------------------------------------------------- 404 */
.nf{max-width:640px;margin:0 auto;text-align:center}
.nf__code{font-family:var(--serif);font-size:clamp(72px,14vw,150px);line-height:1;color:var(--bone-3)}
.nf h1{font-size:clamp(24px,3.2vw,38px);margin:6px 0 12px}
.nf p{color:var(--muted);margin-bottom:26px}
.nf form{display:flex;gap:8px;max-width:420px;margin:0 auto 26px}
.nf input{flex:1;border:1px solid var(--bone-3);background:var(--bone);padding:13px;font:inherit;border-radius:var(--r)}
.nf input:focus{outline:none;border-color:var(--ink)}

/* Ürün metninin giriş cümlesi — gövdeden bir tık öne çıksın. */
/* .panel p (0,1,1) bunu yenmesin diye seçici .panel ile birlikte yazıldı —
   yoksa giriş cümlesi gövde metninden KÜÇÜK çıkıyordu (13.5px). */
.panel .pdp__lead,.pdp__lead{
  font-family:var(--serif);font-size:17.5px;line-height:1.45;color:var(--ink);
  margin-bottom:6px;letter-spacing:.002em;
}
.vault .panel .pdp__lead,.vault .pdp__lead{color:var(--bone)}
.panel p+p{margin-top:9px}

/* =========================================================================
   ANASAYFA — "maison" düzeni
   Fark şu: perakende anasayfası kutu içinde kutu diziyor; moda evinin
   anasayfası sayfayı bir dergi gibi kuruyor. Buradaki araçlar o yüzden
   kenardan kenara sahne, bölüm numaraları, kadrajdan taşan yatay ray,
   devasa tipografiyle bir manifesto bandı ve tek tek satır olarak dizilmiş
   ev listesi. Hepsi JS'siz çalışıyor.
   ========================================================================= */

/* ------------------------------------------------------------ sahne (hero) */
.stage{
  position:relative;background:var(--ink);color:var(--bone);overflow:hidden;
  /* Yükseklik 72svh'ten 92svh'e çıktı.
     72svh, ilk kart şeridinin üst kenarını göstersin diye seçilmişti — kitle
     perakendesinin dönüşüm hilesi. Bedeli şuydu: sayfa açıldığında aynı anda
     hem film hem bir sıra ürün görünüyor, yani sinematik an hiç oluşmuyor.
     Üst segment evleri istisnasız tam ekran açar; ürün ikinci kaydırmada
     başlar ve bu bir kayıp değil, duruş.
     92 — 100 değil: altta ince bir şerit kalıyor, "devamı var" bunu söylemeye
     yetiyor ve istatistik bandı ekranda kalıyor. */
  min-height:clamp(560px,92svh,1040px);display:grid;grid-template-rows:1fr auto;
}
.stage__art{position:absolute;inset:0}
.stage__art img{width:100%;height:100%;object-fit:cover;opacity:.86}
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    /* Ortaya bakan katman. Alttaki dikey geçiş ortada en zayıf yerinde
       (%40–52) ve metin bloğu tam orada duruyor: kırmızı kapüşonlunun üstüne
       denk gelen satırlar ölçümde 4,5 sınırının altına düşüyordu. */
    radial-gradient(76% 60% at 50% 50%,rgba(0,0,0,.34),transparent 72%),
    radial-gradient(118% 74% at 50% 6%,rgba(255,255,255,.05),transparent 58%),
    linear-gradient(to bottom,rgba(0,0,0,.82) 0%,rgba(0,0,0,.52) 30%,rgba(0,0,0,.40) 64%,rgba(0,0,0,.86) 100%);
}
/* İnce altın çerçeve — kadrajı bir kampanya sayfası gibi kapatıyor. */
.stage__frame{
  position:absolute;inset:clamp(11px,1.5vw,24px);border:1px solid rgba(255,255,255,.18);
  pointer-events:none;z-index:3;
}
.stage__in{
  position:relative;z-index:4;grid-area:1/1;align-self:center;text-align:center;
  width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(74px,10vw,132px) var(--gut) clamp(26px,4vw,44px);
}
/* Metnin KENDİ perdesi. Sayfa geneline yayılan geçiş, arkadaki karenin hangi
   an durduğuna bağlı: film oynuyor ve bir sonraki kare daha parlak olabilir.
   Bu katman yazının hemen arkasında durduğu için kontrast tabanı kareden
   bağımsız — hangi an bakılırsa bakılsın aynı. Kenarları geniş ve yumuşak,
   o yüzden bir kutu gibi görünmüyor. */
.stage__in::before{
  content:"";position:absolute;inset:-6% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 58% at 50% 50%,rgba(0,0,0,.34),transparent 78%);
}
/* Telefonda perde daha koyu. Film aynı film ama kadraj dar: object-fit:cover
   yatay videoyu kırptığı için metnin arkasına kalabalık ve parlak bölge
   düşüyor, masaüstündeki .34 orada 4,04'te kalıyordu (gerek 4,5). */
@media (max-width:700px){
  .stage__in::before{
    background:radial-gradient(78% 62% at 50% 50%,rgba(0,0,0,.52),transparent 82%);
  }
}

/* Süsleme kaldırıldı: iki çizgi arasındaki eşkenar dörtgen.
   Bu tür bezeme modern lüks perakendede kullanılmıyor — sayfayı davetiye
   ya da menü kartı diline çekiyor. Yerini boşluk alıyor; boşluk zaten bu
   tasarımın en pahalı malzemesi. */
.orn{display:none}
.orn--legacy{display:flex;align-items:center;justify-content:center;gap:13px;color:var(--brass-2)}
.orn i{width:6px;height:6px;background:currentColor;transform:rotate(45deg);display:block;flex:0 0 auto}
.orn::before,.orn::after{content:"";height:1px;flex:0 0 clamp(28px,6vw,80px);background:currentColor;opacity:.5}

.stage__eyebrow{
  margin-top:19px;font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--brass-2);
}
.stage h1{
  margin-top:clamp(16px,2.2vw,28px);font-size:clamp(38px,7.2vw,112px);line-height:.95;
  /* Ölçü 15ch'ten 18ch'e çıktı. 15ch'te başlık her genişlikte DÖRT satıra
     kırılıyordu ve ikinci satırın ucunda tek başına bir "At" kalıyordu:
     "everyone wants. At / the moment they". 18ch'te üç satır oluyor, nokta
     satır ortasına düşüyor ve blok 1440'ta 394 → 296 px kısalıyor — yani
     düğmeler yukarı geliyor, filmden daha çok görünüyor.
     1920/1280/1024/768/390'da tek tek ölçüldü: hepsinde 4 → 3 satır. */
  letter-spacing:-.036em;max-width:18ch;margin-inline:auto;text-wrap:balance;
}
.stage__sub{
  margin:clamp(20px,2.6vw,30px) auto 0;max-width:56ch;
  /* %76 → %88. Yarı saydam metin zemine doğru yaklaşıyor, yani perdeyi
     koyulaştırmak bu satıra en az fayda eden şey; kendi opaklığını artırmak
     gerekiyordu. 17 pikselde %76 zaten inceydi. */
  font-size:clamp(14px,1.25vw,16.5px);color:color-mix(in oklab,var(--bone) 88%,transparent);
}
.stage__act{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;margin-top:clamp(28px,3.4vw,42px)}
/* İkinci eylem düğme değil, altı çizili büyük harf bağlantı — kasa dili
   yerine dergi dili. */
.stage__link{
  display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone);padding-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.42);transition:border-color .3s var(--ease),color .3s var(--ease);
}
.stage__link:hover{color:var(--brass-2);border-bottom-color:var(--brass-2)}

/* Sahnenin dibindeki ölçü şeridi: rakamlar dizilmiş, aralarında ince çizgi. */
.stage__meta{
  position:relative;z-index:4;grid-area:2/1;border-top:1px solid rgba(255,255,255,.16);
  background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.85));
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
}
@media (max-width:640px){.stage__meta{grid-auto-flow:row;grid-auto-columns:auto}}
.stage__meta div{
  padding:clamp(16px,2.2vw,26px) var(--gut);text-align:center;
  border-left:1px solid rgba(255,255,255,.16);
}
.stage__meta div:first-child{border-left:0}
@media (max-width:640px){
  .stage__meta div{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .stage__meta div:first-child{border-top:0}
}
.stage__meta b{
  display:block;font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--bone);line-height:1.1;
}
.stage__meta>div>span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
.stage__meta b span{font:inherit;letter-spacing:.01em;text-transform:none;color:inherit}

/* ------------------------------------------------------- bölüm başlığı (ev) */
.chap{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(16px,3vw,40px);
  margin-bottom:clamp(28px,3.6vw,50px);
}
@media (max-width:820px){.chap{grid-template-columns:minmax(0,1fr);row-gap:16px}.chap__more{justify-self:start}}
.chap__n{
  display:flex;align-items:center;gap:12px;margin-bottom:clamp(13px,1.6vw,20px);
  font-size:10.5px;letter-spacing:.3em;color:var(--brass-text);font-variant-numeric:tabular-nums;
}
.chap__n::after{content:"";height:1px;width:clamp(26px,4vw,54px);background:currentColor;opacity:.6}
.chap__t{font-size:clamp(27px,3.6vw,52px);letter-spacing:-.028em}
.chap__s{margin-top:11px;max-width:60ch;font-size:14.5px;color:var(--muted)}
.chap__more{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding-bottom:.5em;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--bone-3);transition:color .3s var(--ease),border-color .3s var(--ease);
}
.chap__more:hover{color:var(--ink);border-bottom-color:var(--ink)}
.vault .chap__more{border-bottom-color:rgba(255,255,255,.3)}
.vault .chap__more:hover{color:var(--bone);border-bottom-color:var(--bone)}

/* ------------------------------------------------------------- yatay ray
   Izgara sarmak yerine kadrajdan taşan tek sıra. İlk kart sayfa oluğuyla
   hizalı başlıyor, son kart sağ kenardan çıkıyor — "devamı var" demenin
   ok çizmeden yolu. Kaydırma tarayıcının kendi işi, JS yok. */
.rail{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-padding-left:max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)));
  padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--bone-3) transparent;
}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--bone-3)}
.vault .rail{scrollbar-color:rgba(255,255,255,.3) transparent}
.vault .rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}
.rail__track{
  display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;
  padding-inline:max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)));
}
.rail__track>*{flex:0 0 clamp(216px,23vw,318px);scroll-snap-align:start}
.rail__track>.lot{flex-basis:clamp(260px,30vw,396px)}

/* --------------------------------------------------------- manifesto bandı */
/* MANİFESTO — bir levha, bir boşluk değil.
   Ölçüldü: editoryal ikili (680) + manifesto (560) + Vault (1352) hepsi siyah
   ve yan yana, yani y=3697'den 6288'e kadar 2592 piksel KESİNTİSİZ siyah
   akıyordu — sayfanın beşte biri. Manifestonun tek satırı o boşlukta
   yüzüyordu ve dolgu azaltmak bunu çözmezdi; sorun dolgu değil, sınırın
   olmamasıydı.

   Çözüm tipografik: üstte ve altta saç teli kalınlığında bir çizgi. Üç siyah
   bölüm artık üç ayrı levha olarak okunuyor. Dolgu da bir tık daraldı, cümle
   çizgilerin arasına oturuyor. */
.manifesto{
  background:var(--ink);color:var(--bone);position:relative;overflow:hidden;
  padding:clamp(60px,8.5vw,116px) 0;text-align:center;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.manifesto::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 50% 50%,rgba(255,255,255,.05),transparent 66%);
}
.manifesto__in{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.manifesto p{
  margin-top:clamp(24px,3.4vw,44px);font-family:var(--serif);
  font-size:clamp(28px,5.2vw,74px);line-height:1.04;letter-spacing:-.032em;text-wrap:balance;
}
.manifesto__note{
  margin-top:clamp(22px,3vw,38px)!important;font-family:var(--sans)!important;
  font-size:11px!important;letter-spacing:.22em!important;line-height:1.8!important;
  text-transform:uppercase;color:var(--muted-2);
}

/* -------------------------------------------------------------- ev listesi
   Rozet ızgarası değil, jenerik gibi tek tek satırlar. Sayı sağda, üzerine
   gelince pirinç. */
/* ---------------------------------------------------------- kategori rayı
   Ad ve adet fotoğrafın ÜZERİNDE. Altına yazılan küçük etiket satırı
   kadraja eşlik eden bir yazı gibi değil, ızgaraya iliştirilmiş bir dipnot
   gibi duruyordu. Üstte, koyu geçişin içinde, serif ve iri: kadraj ile yazı
   tek bir nesne oluyor — moda evlerinin kategori kartı böyle kurulur. */
.cats{align-items:stretch}
.cat{flex:0 0 clamp(230px,24vw,320px);display:block;position:relative}
.cat__art{
  display:block;position:relative;overflow:hidden;background:var(--bone-2);
  aspect-ratio:3/4;
}
.cat__art img{
  transform:scale(1.03);transition:transform 1.2s var(--ease);
}
.cat__art .fr{background:var(--bone-2)}
.cat:hover .cat__art img,.cat:focus-visible .cat__art img{transform:scale(1.1)}
.cat__art::after{
  content:"";position:absolute;inset:0;
 /* Perde bilerek koyu ve yüksek: kapak fotoğraflarının bir kısmı beyaz
     zeminli ürün çekimi, orada açık bir geçiş beyaz yazıyı okunmaz
     bırakıyordu. Ölçülen en kötü durumda (Balmain pembe tişört) yazı 8:1. */
  background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 24%,rgba(0,0,0,.18) 55%,rgba(0,0,0,0) 78%);
}
.cat__in{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(14px,1.6vw,22px);display:flex;flex-direction:column;gap:5px;
  color:var(--bone);
}
.cat__in b{
  font-family:var(--serif);font-weight:400;font-size:clamp(19px,2vw,26px);
  letter-spacing:-.015em;line-height:1.1;
}
.cat__in i{
  font-style:normal;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-2);
}
/* İnce pirinç alt çizgi hover'da soldan sağa çiziliyor — karonun tıklanabilir
   olduğunu okla söylemek yerine gösteriyor. */
.cat::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--brass-2);
  transition:width .5s var(--ease);z-index:3;
}
.cat:hover::after,.cat:focus-visible::after{width:100%}
@media (prefers-reduced-motion:reduce){
  .cat__art img,.cat:hover .cat__art img{transform:none;transition:none}
  .cat::after{transition:none}
}

/* Kategori bloğu: başlık + o kategoriden dört parça. Kategoriye tıklamadan
   ne satıldığı görünsün diye. */
.catblock{margin-top:clamp(40px,5vw,72px)}
.catblock__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:14px;margin-bottom:clamp(18px,2vw,28px);
  border-bottom:1px solid var(--bone-3);
}
.catblock__head h3{font-size:clamp(19px,2.2vw,27px);font-family:var(--serif);font-weight:400}

/* --------------------------------------------------------------- evler
   Marka karosu: gerçek bir parçanın fotoğrafı üstte, ad ve adet altta.
   Fotoğraf yavaşça yaklaşıyor (hover), ad pirinç rengine dönüyor. Metin
   listesinin yerini aldı — bir moda evi adıyla değil malıyla tanıtılır. */
.houses{
  display:grid;gap:clamp(10px,1.2vw,18px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:980px){.houses{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.houses{grid-template-columns:repeat(2,minmax(0,1fr))}}
.house{display:block;position:relative}
.house__art{
  display:block;position:relative;overflow:hidden;background:var(--bone-2);
  aspect-ratio:3/4;
}
.house__art img{
  transform:scale(1.02);transition:transform 1.1s var(--ease),filter .5s var(--ease);
  filter:saturate(.92);
}
.house__art .fr{background:var(--bone-2)}
.house:hover .house__art img,.house:focus-visible .house__art img{
  transform:scale(1.09);filter:saturate(1);
}
.house__art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 52%);
  opacity:0;transition:opacity .45s var(--ease);
}
.house:hover .house__art::after{opacity:1}
.house__in{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px 2px 0;
}
.house__in b{
  font-family:var(--serif);font-weight:400;font-size:clamp(15px,1.5vw,20px);
  letter-spacing:-.01em;transition:color .3s var(--ease);
}
.house:hover .house__in b{color:var(--brass-text)}
.house__in i{
  font-style:normal;font-family:var(--sans);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  .house__art img,.house:hover .house__art img{transform:none;transition:none}
}

.houselist{border-top:1px solid var(--bone-3)}
.houselist a{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:clamp(13px,1.7vw,22px) 2px;border-bottom:1px solid var(--bone-3);
  font-family:var(--serif);font-size:clamp(21px,3vw,38px);letter-spacing:-.02em;
  transition:color .3s var(--ease),padding-left .35s var(--ease);
}
.houselist a:hover,.houselist a:focus-visible{color:var(--brass-text);padding-left:clamp(8px,1.2vw,18px)}
.houselist i{
  font-style:normal;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  .houselist a:hover,.houselist a:focus-visible{padding-left:2px}
}

/* ------------------------------------------------------------ sahne filmi
   Gerçek kampanya filmi yoksa üç kampanya karesi yavaşça büyüyerek birbirine
   geçiyor — video dosyası olmadan sinema hissi. Operatör assets/media/hero.mp4
   koyduğu anda yerini gerçek videoya bırakıyor.
   Hareket 5 saniyeden uzun sürdüğü için duraklatma düğmesi ŞART (WCAG 2.2.2);
   düğme salt CSS ile çalışıyor, JS gerektirmiyor. */
.stage__film{position:absolute;inset:0}
.stage__film img,.stage__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Gerçek video da yavaşça yaklaşıyor.
   Yedek karelerde (aşağıdaki stagefilm) bu hareket zaten vardı; video varken
   kadraj çakılı duruyordu ve döngü ikinci turda fark ediliyordu — göz aynı
   kesme noktasını tanıyor. Çok yavaş bir yaklaşma o dikişi gizliyor ve
   kapağa nefes veriyor. alternate: geri sararken sıçrama olmuyor.
   Duraklatma düğmesi bunu da durduruyor (WCAG 2.2.2) — aşağıdaki
   :checked kuralına .stage__vid de eklendi. */
.stage__vid{
  opacity:.86;transform-origin:52% 42%;
  animation:stagedrift 44s var(--ease) infinite alternate;
}
@keyframes stagedrift{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to  {transform:scale(1.10) translate3d(-.9%,-.6%,0)}
}
@media (prefers-reduced-motion:reduce){.stage__vid{animation:none;transform:none}}
.stage__film img{opacity:0;transform:scale(1.035);animation:stagefilm 33s var(--ease) infinite}
.stage__film img:nth-child(2){animation-delay:11s}
.stage__film img:nth-child(3){animation-delay:22s}
@keyframes stagefilm{
  0%  {opacity:0;   transform:scale(1.035) translate3d(0,0,0)}
  4%  {opacity:.86}
  30% {opacity:.86}
  36% {opacity:0}
  40% {opacity:0;   transform:scale(1.13) translate3d(-1.1%,-.7%,0)}
  100%{opacity:0;   transform:scale(1.035) translate3d(0,0,0)}
}

/* Duraklatma: kutu işaretliyken hem film hem sayaç durur. */
.stage__pausebox:checked ~ .stage__art .stage__film img,
.stage__pausebox:checked ~ .stage__art .stage__vid{animation-play-state:paused}
.stage__pause{
  grid-area:1/1;justify-self:end;align-self:end;position:relative;z-index:5;
  margin:0 clamp(20px,2.6vw,40px) clamp(18px,2.4vw,34px) 0;
  width:36px;height:36px;border:1px solid rgba(255,255,255,.32);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(0,0,0,.42);backdrop-filter:blur(5px);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.stage__pause:hover{border-color:var(--brass-2);background:rgba(0,0,0,.66)}
.stage__pausebox:focus-visible + .stage__art + .stage__pause{outline:2px solid var(--brass-2);outline-offset:3px}
/* Duraklat = iki dikey çubuk; oynat = üçgen. Tek elemanla, ikon dosyasız. */
.stage__pause-i{
  width:9px;height:11px;border-left:2px solid var(--bone);border-right:2px solid var(--bone);
}
.stage__pausebox:checked ~ .stage__pause .stage__pause-i{
  width:0;height:0;border:0;border-left:9px solid var(--bone);
  border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px;
}
.stage__pausebox:checked ~ .stage__pause .stage__pause-a,
.stage__pause-b{display:none}
.stage__pausebox:checked ~ .stage__pause .stage__pause-b{display:inline}

/* Hareketi azaltılmış tercihte film hiç oynamaz: ilk kare durur. */
@media (prefers-reduced-motion:reduce){
  .stage__film img{animation:none;opacity:0;transform:none}
  .stage__film img:first-child{opacity:.86}
  .stage__pause{display:none}
}
/* Kayan tablo kutusu klavyeyle de kaydırılabilmeli (WCAG 2.1.1); odaklanınca
   görünür olsun diye kendi çerçevesi var. */
.tablewrap:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ----------------------------------------------------------- editoryal ikili
   İki tam boy kare, aralarında oluk yok, kenardan kenara. Metin görselin
   üstünde durduğu için her karonun kendi karartması var — kontrast görselin
   ne kadar açık olduğuna bakmadan garanti. */
.editorial{
  --muted:#b0b0b0;--muted-2:#949494;--brass-text:var(--brass-2);
  display:grid;grid-template-columns:1fr 1fr;background:var(--ink);
}
@media (max-width:820px){.editorial{grid-template-columns:1fr}}
.etile{
  position:relative;display:block;overflow:hidden;color:var(--bone);
  min-height:clamp(420px,52vw,680px);
}
.etile img,.etile__vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;
  transform:scale(1.01);transition:transform 1.2s var(--ease),opacity .6s var(--ease);
}
.etile:hover img,.etile:focus-visible img,
.etile:hover .etile__vid,.etile:focus-visible .etile__vid{transform:scale(1.06);opacity:.82}
/* Hareketi azalt tercihinde film durur, poster kalır. */
@media (prefers-reduced-motion:reduce){.etile__vid{display:none}}
.etile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.9) 4%,rgba(0,0,0,.5) 46%,rgba(0,0,0,.3) 100%);
}
/* İki karo arasındaki ince pirinç ayrım — dikişi belli etmek yerine süs. */
.etile+.etile{box-shadow:inset 1px 0 0 rgba(255,255,255,.18)}
@media (max-width:820px){.etile+.etile{box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}}
.etile__in{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(26px,4vw,54px);display:grid;justify-items:start;gap:14px;
}
.etile__in .orn{justify-content:flex-start}
.etile__in .orn::before{display:none}
.etile h2{font-size:clamp(24px,2.9vw,40px);letter-spacing:-.028em;max-width:17ch;text-wrap:balance}
.etile p{font-size:14px;color:color-mix(in oklab,var(--bone) 78%,transparent);max-width:46ch}
.etile__go{
  display:inline-flex;align-items:center;gap:9px;margin-top:4px;padding-bottom:5px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.42);transition:border-color .3s var(--ease),color .3s var(--ease);
}
.etile:hover .etile__go,.etile:focus-visible .etile__go{color:var(--brass-2);border-bottom-color:var(--brass-2)}
@media (prefers-reduced-motion:reduce){
  .etile img,.etile__vid,.etile:hover img,.etile:hover .etile__vid{transform:none}
}

/* --------------------------------------------------------- panel rakamları
   Müşteri ve yönetim panellerinde küçük sayı kutuları. Kart değil: ince
   çizgiyle ayrılmış sütunlar, sitenin geri kalanıyla aynı dil. */
.stats{
  display:grid;gap:1px;background:var(--bone-3);border:1px solid var(--bone-3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
}
.stats>div{background:var(--bone);padding:clamp(14px,1.8vw,20px)}
.stats b{
  display:block;font-family:var(--serif);font-size:clamp(19px,2.2vw,27px);font-weight:500;
  font-variant-numeric:tabular-nums;line-height:1.15;
}
.stats span{
  display:block;margin-top:5px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}

/* ------------------------------------------------------------- Gutschein
   Sepet özetindeki kod alanı ve indirim satırı. Kod tek satırda kalsın,
   büyük harf ve geniş harf aralığıyla okunsun — e-postadan elle giriliyor. */
.vou{display:flex;gap:6px;margin:10px 0 4px}
.vou input{
  flex:1;min-width:0;padding:9px 11px;border:1px solid var(--bone-3);background:var(--bone);
  font:inherit;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.vou input:focus{outline:none;border-color:var(--ink)}
.vou input::placeholder{letter-spacing:.06em;text-transform:none;color:var(--muted-2)}
.srow--cut span:last-child{color:var(--ember-text);font-variant-numeric:tabular-nums}
/* Doğrulama sayfasındaki kupon kutusu. */
.vou__code{
  display:inline-block;margin-top:10px;border:1px solid var(--brass);padding:12px 22px;
  font-size:18px;letter-spacing:.22em;font-variant-numeric:tabular-nums;
}

/* "Hakkımızda" sayfasındaki kadraj şeridi. Dört fotoğraf, dört ev — sayfa
   kurumsal bildiri değil mağazanın parçası gibi dursun. Telefonda ikişerli. */
.thumb45{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--bone-2)}
.aboutstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:26px 0 4px}
.aboutstrip a{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--bone-2)}
.aboutstrip img{transition:transform .9s var(--ease)}
.aboutstrip a:hover img{transform:scale(1.05)}
@media (max-width:640px){.aboutstrip{grid-template-columns:repeat(2,1fr)}}

/* Kategori / marka kapağı.
   Bir bölüme girince ekranda düz bir başlıktan başka şey yoktu. Şerit o
   bölümün kendi parçalarından üç kadraj gösteriyor; yazı en altta, üstünde
   koyu bir perde — kapak fotoğraflarının bir kısmı beyaz zeminli çekim ve
   perdesiz beyaz yazı okunmuyor. */
.taxo{position:relative;overflow:hidden;border-radius:var(--r);margin-bottom:clamp(22px,3vw,38px)}
.taxo__art{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--bone-2)}
.taxo__art img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1}
.taxo__art img:nth-child(n+4){display:none}
.taxo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.5) 26%,rgba(0,0,0,.08) 58%,rgba(0,0,0,0) 78%);
}
.taxo__in{
  position:absolute;left:0;right:0;bottom:0;z-index:2;color:var(--bone);
  padding:clamp(18px,2.6vw,34px);
}
.taxo__in h1{font-size:clamp(28px,4vw,52px);line-height:1.05;letter-spacing:-.02em}
.taxo__in p{
  margin-top:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in oklab,var(--bone) 74%,transparent);
}
@media (max-width:640px){
  /* Üç kare telefonda şerit gibi kalıyor: ikisi yeter, kadrajlar nefes alsın. */
  .taxo__art{grid-template-columns:repeat(2,1fr)}
  .taxo__art img:nth-child(n+3){display:none}
  .taxo__art img{aspect-ratio:3/4}
}

/* --- Renk şeridi (ürün sayfası) -------------------------------------------
   Beslemede her renk ayrı ürün; vitrinde modelin tek karosu duruyor ve diğer
   renklere buradan geçiliyor. Kare 4:5 çünkü kartın küçültülmüşü — aynı
   fotoğrafın 180 px'lik hâli, tarayıcı için ek indirme değil. */
.swatches{margin:0 0 18px}
.swatches .panel__h{margin-bottom:10px}
/* Şerit başlığı da diğer bölüm etiketleriyle aynı dilde: küçük, aralıklı büyük harf. */
.swatches h2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-family:var(--sans);color:var(--muted)}
.swatches__row{display:flex;flex-wrap:wrap;gap:9px}
.swatch{
  display:block;width:62px;text-decoration:none;color:var(--muted);
}
.swatch .fr{
  position:relative;display:block;width:62px;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--r);background:var(--bone-2);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .25s var(--ease);
}
.swatch:hover .fr,.swatch:focus-visible .fr{box-shadow:inset 0 0 0 1px var(--ink)}
.swatch.is-on .fr{box-shadow:inset 0 0 0 2px var(--ink)}
.swatch.is-out .fr{opacity:.45}
.swatch__l{
  display:block;margin-top:5px;font-size:10.5px;line-height:1.3;
  letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.swatch.is-on .swatch__l{color:var(--ink)}

/* Seçili rengin adı, şerit başlığının sağında — hangi karede olduğun yazıyla da belli. */
.swatches__now{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

/* Renk noktası: kumaşın tonu, beyazda da görünsün diye kıl çizgili. */
.cdot{
  display:inline-block;flex:0 0 auto;width:14px;height:14px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);vertical-align:-2px;
}
/* Tek renkli ürün: seçim yok, yalnızca bilgi — çip değil sakin bir satır. */
.colourline{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.colourline__k{color:var(--muted)}
.colourline__v{color:var(--ink)}
/* Aynı ürünün birden çok rengi: beden çipleriyle aynı dil, başta renk noktası. */
.cchips{display:flex;flex-wrap:wrap;gap:8px}
.cchip{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--bone-3);padding:10px 14px;cursor:pointer;border-radius:var(--r);
  font-size:12px;letter-spacing:.08em;transition:border-color .2s;
}
.cchip input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.cchip:hover{border-color:var(--muted)}
.cchip:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cchip:has(input:focus-visible){outline:2px solid var(--brass);outline-offset:2px}
.vault .cchip{border-color:rgba(255,255,255,.26);color:var(--bone)}
.vault .cchip:has(input:checked){border-color:var(--bone);box-shadow:inset 0 0 0 1px var(--bone)}

.card__sizes--col{color:var(--ink);opacity:.72}
/* Fotoğrafı olmayan çeşit: boş bir kare değil, çapraz taralı bir yer tutucu.
   "Fotoğraf yok" demek, yanlış renk göstermekten iyi.

   Tarama %5 opaklıktaydı ve 62 pikselde hiç görünmüyordu: kare düpedüz boş
   duruyordu, yani "Light Blue" yazan yerde bej bir kutu vardı — tam da
   kaçınmak istediğimiz şey. Kontrast görünür seviyeye çekildi ve ortaya bir
   tire kondu; artık kare "burada fotoğraf yok" diyor, "bu renk bej" demiyor. */
.swatch__none{
  position:relative;
  background:
    repeating-linear-gradient(-45deg,transparent 0 5px,rgba(0,0,0,.10) 5px 7px),
    var(--bone-2);
}
.swatch__none::after{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:1px;
  transform:translate(-50%,-50%);background:var(--muted-2);opacity:.7;
}