/* Formatek — numune duvarı.

   Fikr'in çizgisi: kemik zemin, mürekkep siyah, hap düğme, iki uçlu
   tipografi (ya 300 ya 800, ortası yok).

   Ürünler kutuda değil: kart, çerçeve, gölgeli dikdörtgen yok. Parçalar
   kemik zeminin üstünde ortak hizada duruyor, çeşitlilik silüetin kendi
   genişliğinden geliyor — kolsuz yelek dar, kollu mont geniş.

   Sayfanın işi gezdirmek değil, SEÇTİRMEK: toptan alan kişi tek ürün için
   değil, beğendiği beş parça için teklif ister. Merkez öge alttaki tepsi.

   Her kural `.fmg` altında: bu dosya WordPress sayfasına Woodmart'ın kendi
   CSS'inin yanına giriyor, temanın hiçbir yerine karışmaması gerekiyor.    */

.fmg{
  --ink:      #0C0C0E;
  --ink-2:    #141417;
  --bone:     #F5F3EF;
  --line:     rgba(12,12,14,.14);
  --mute:     rgba(12,12,14,.52);
  --sari:     #F0B429;

  /* 'Helvetica Neue' KULLANILMAZ: bu makinede ailenin bozuk bir sürümü
     kurulu, Chrome her yazıyı italik/içi boş gösteriyor. */
  --display:  'Archivo', Arial, system-ui, sans-serif;
  --mono:     ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --pad:  clamp(20px, 4.2vw, 76px);
  --ease: cubic-bezier(.19,1,.22,1);

  position:relative;
  background:var(--bone); color:var(--ink);
  font-family:var(--display); font-weight:300;
  /* Tam genişlik. İki tuzak var:
     1. Elementor konteyneri flexbox; genişlik tek başına yetmiyor,
        `flex-shrink` kutuyu geri daraltıyor.
     2. `100vw` dikey kaydırma çubuğunu da sayıyor: sayfa yatayda çubuk
        kadar (burada 8px) kayıyordu. `--fmg-cubuk` ölçülen çubuk
        genişliği; JavaScript yoksa 0 kalıyor, eski davranış sürüyor. */
  --fmg-en:calc(100vw - var(--fmg-cubuk, 0px));
  width:var(--fmg-en); max-width:var(--fmg-en);
  margin-left:calc(50% - var(--fmg-en) / 2);
  flex:0 0 auto; align-self:stretch;
}
:root{ --tepsi-yer:0px; }        /* tepsi açıkken dipte yer açar */
body:has(.fmg .tepsi:not([hidden])){ padding-bottom:var(--tepsi-yer); }

.fmg *{ box-sizing:border-box; }
.fmg img{ max-width:100%; display:block; }

/* Woodmart BÜTÜN düğmelere `min-height:42px` veriyor ve bu bizim verdiğimiz
   ölçüyü eziyor. Sonucu ölçüldü: 27px'lik renk noktaları 27×42 oval çıkıyor,
   30px'lik `+` düğmesi 30×42 oluyor, arama kutusundaki × çarpısı kutuyu
   42'den 62px'e şişiriyor ve araç çubuğu 185px'e çıkıyordu. */
.fmg button{ font:inherit; min-height:0; min-width:0; }

/* Başlıkların fontu AÇIKÇA yazılmalı. `.fmg`ye yazılan font miras yoluyla
   iniyor ama Woodmart'ın `h1,h2,...{font-family:Urbanist}` kuralı mirası
   yeniyor: duvar başlıkları temanın fontuyla, tasarımın geri kalanı
   Archivo ile çiziliyordu. Tema ayrıca başlıkları büyük harfe çevirebiliyor;
   kategori adı zaten ne ise o yazılsın. */
.fmg h1, .fmg h2, .fmg h3, .fmg p, .fmg span, .fmg a, .fmg li, .fmg input, .fmg textarea{
  font-family:var(--display);
  font-style:normal;
}
.fmg h1, .fmg h2, .fmg h3{
  text-transform:none;
  font-family:var(--display);
}
/* Daktilo fontu YALNIZCA koda. Stok kodu ve duvar numarası birer koddur,
   orada yerinde duruyor. Kümeye atlama bağlantıları ve "10 parça" sayacı
   koda benzemiyor ama onlar da daktiloyla yazılıyordu; Windows'ta sıra
   Cascadia Mono'ya düşüyor ve dokuz uzun Türkçe ad yan yana gelince sayfa
   yazılım çıktısı gibi görünüyor. Onlar artık Archivo. */
.fmg .parca-kod, .fmg .duvar-no, .fmg .c-kod, .fmg .tp-kod{ font-family:var(--mono); }
.fmg .atla a, .fmg .duvar-adet, .fmg .arac-sonuc{
  font-family:var(--display); font-weight:500;
}

/* ---- Giriş (kısa kodda baslik="" verilirse) ---------------------------- */
/* Boşluk ölçülü. Prototipte bu blok kendi sayfasının tepesindeydi ve üstünde
   nefes alması gerekiyordu; canlıda üstünde temanın başlığı var, o ayrımı
   zaten yapıyor. Eski değerlerle ilk ürün sırası 768px'lik bir ekranda
   kıvrımın altında kalıyordu (başlık 50 + giriş 224 + çubuk 72 + duvar
   başlığı 54 = 400px). */
.fmg-giris{ padding:clamp(30px,4.4vw,62px) var(--pad) clamp(16px,2.4vw,30px); max-width:1120px; }
.fmg-giris h2{
  margin:0; font-weight:300; color:var(--ink);
  font-size:clamp(32px,5.6vw,72px); line-height:1.04; letter-spacing:-.035em;
}
/* İkinci satır el yazısıyla — Fikr'in çizgisindeki tek gayriresmî dokunuş.
   Kısa kodda `baslik="Ne üretiyorsak|duvarda asılı."` yazılınca açılıyor. */
.fmg-giris h2 em{
  display:block;
  font-family:'Caveat', cursive; font-style:normal; font-weight:500;
  font-size:1.06em; letter-spacing:0;
}
.fmg-giris-alt{
  margin:16px 0 0; max-width:52ch; color:var(--mute);
  font-size:clamp(14.5px,1.35vw,17px); line-height:1.65;
}

/* ---- Araç çubuğu -------------------------------------------------------- */
/* Yapışma noktası `--fmg-ust`: ekranın tepesine gerçekten yapışmış
   çubukların (yönetici çubuğu, temanın yapışkan başlığı) ÖLÇÜLEN alt kenarı.
   Önce Woodmart'ın `--wd-header-h` değeri kullanılıyordu; o değer başlığın
   TOPLAM yüksekliği (40+64+45=149px) ve kaydırırken yalnız orta satır
   yapışıyor — araya 85px'lik bir açıklık kalıyor ve ürünler oradan
   süzülerek geçiyordu. Zemin de saydam değil: hareket eden fotoğrafların
   üstünde yarı saydam bant kirli duruyor. */
.fmg .arac{
  position:sticky; top:var(--fmg-ust, 0px); z-index:38;
  background:var(--bone);
  border-bottom:1px solid var(--line);
  padding:12px var(--pad);
}
.fmg .arac-ic{ display:flex; align-items:center; gap:clamp(12px,2vw,30px); flex-wrap:wrap; }

.fmg .ara{
  display:flex; align-items:center; gap:9px;
  padding:9px 14px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  flex:1 1 230px; max-width:330px; color:var(--mute);
  transition:border-color .2s;
}
.fmg .ara:focus-within{ border-color:var(--ink); }
.fmg .ara input{
  border:0; outline:0; background:none; flex:1; min-width:0; box-shadow:none;
  font-family:var(--display); font-weight:300; font-size:14px; color:var(--ink);
  height:auto; padding:0; margin:0;
}
.fmg .js-ara-sil{ border:0; background:none; cursor:pointer; color:var(--mute); font-size:18px; line-height:1; padding:0 2px; }

.fmg .renkler{ display:flex; gap:7px; flex-wrap:wrap; }
/* Renk noktası görselin kendisinden çıkarılıyor — elle girilmiyor. */
.fmg .renk{
  width:27px; height:27px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); padding:0; min-width:0;
  position:relative; transition:transform .2s var(--ease), box-shadow .2s;
}
.fmg .renk:hover{ transform:scale(1.12); }
.fmg .renk[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--bone), 0 0 0 3.5px var(--ink); }
.fmg .renk span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

.fmg .atla{
  display:flex; gap:6px; flex-wrap:wrap; margin-left:auto;
  /* Kümeler sığmayınca şerit yana kayıyor. Sert kesik "bitti" gibi
     görünüyor; devamı olan tarafta soluyor. Payları JavaScript veriyor,
     ikisi de 0 iken şerit düz opak kalıyor. */
  --sol-sol:0px; --sag-sol:0px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--sol-sol),
                     #000 calc(100% - var(--sag-sol)), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 var(--sol-sol),
             #000 calc(100% - var(--sag-sol)), transparent 100%);
}
.fmg .atla a{
  font-family:var(--display); font-weight:500; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none; color:var(--mute);
  padding:7px 12px; border-radius:999px; border:1px solid transparent;
  white-space:nowrap;          /* dar ekranda kutu içinde satıra bölünüyordu */
  transition:color .2s, border-color .2s;
}
.fmg .atla a:hover{ color:var(--ink); border-color:var(--line); }

/* Geniş ekranda her şey TEK satırda. Dokuz küme olunca kümeye atlama
   bağlantıları alt satıra, oradan da ikinci bir satıra bölünüyor ve yapışık
   çubuk 185px'e çıkıyordu — 768px'lik bir ekranın dörtte biri, üstelik hep
   tepede duran bir şerit. Bağlantılar artık taşarsa kendi içinde kayıyor. */
@media (min-width:900px){
  .fmg .arac-ic{ flex-wrap:nowrap; }
  .fmg .ara{ flex:0 1 270px; }
  .fmg .renkler{ flex:0 0 auto; flex-wrap:nowrap; }
  /* `flex:1 1 0` + `justify-content:flex-end` KULLANILMAZ: sığmayan içerik
     baştan kırpılıyor ("İş güvenliği" → "Gİ") ve oraya kaydırmak da mümkün
     olmuyor — taşan esnek kutuda baştaki parça erişilemez hâle geliyor.
     `flex:0 1 auto` + `margin-left:auto` aynı sağa yaslamayı veriyor ama
     daralınca içerik baştan başlayıp kayıyor. */
  .fmg .atla{
    flex:0 1 auto; min-width:0; margin-left:auto;
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  }
  .fmg .atla::-webkit-scrollbar{ display:none; }
}

.fmg .arac-sonuc{
  margin:10px 0 0; font-family:var(--display); font-weight:500; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--mute);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.fmg .arac-sonuc[hidden]{ display:none; }
/* Renge basınca geri dönüş yolu görünür olmalı: aynı noktaya ikinci kez
   basmak işe yarıyor ama kimse bunu tahmin etmiyor. */
.fmg .arac-temizle{
  font:inherit; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  transition:background-color .2s, color .2s, border-color .2s;
}
.fmg .arac-temizle:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }

/* ---- Duvar -------------------------------------------------------------- */
.fmg .duvar{
  padding:clamp(38px,5.4vw,78px) 0 clamp(14px,2.4vw,30px);
  /* Kümeye atlayınca başlık yapışık çubuğun altında kalmasın. */
  scroll-margin-top:calc(var(--fmg-ust, 0px) + 136px);
}
.fmg .duvar + .duvar{ border-top:1px solid var(--line); }
.fmg .duvar[hidden]{ display:none; }

.fmg .duvar-ust{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  padding:0 var(--pad) clamp(22px,3vw,38px);
}
.fmg .duvar-no{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--mute); }
.fmg .duvar-ust h2{
  margin:0; font-weight:800; letter-spacing:-.035em; color:var(--ink);
  font-size:clamp(26px,3.6vw,46px); line-height:1.05;
}
.fmg .duvar-alt{ margin:0; color:var(--mute); font-size:14px; }
.fmg .duvar-adet{ margin-left:auto; font-family:var(--display); font-weight:500; font-size:11.5px; letter-spacing:.1em; color:var(--mute); }

/* Ray sarmalayıcı: okları ve kenar solmasını taşıyor. */
.fmg .ray-kap{ position:relative; }

.fmg .ray{
  --kutu:clamp(190px, 17vw, 296px);
  display:flex; align-items:flex-start; gap:clamp(18px,2.6vw,46px);
  padding:0 var(--pad) 26px;
  overflow-x:auto;
  /* `overflow-y:hidden` ŞART ama üzerine gelince kalkan parçayı kırpıyor:
     yatay kaydırma varken dikey "visible" olamıyor. Yukarıdan yer açıp
     ray'ı negatif kenar boşluğuyla geri çekiyoruz. */
  overflow-y:hidden;
  padding-top:30px; margin-top:-30px;
  scroll-snap-type:x proximity;
  /* `scroll-snap-align:start` ilk ögeyi içerik kutusunun başına yapıştırıp
     sol boşluğu yutuyordu; ray açılır açılmaz kaymış oluyordu. */
  scroll-padding-inline:var(--pad);
  /* Çubuk gizli: kaydırma çubuğu rayın altında ince bir şerit olarak
     duruyordu, parçanın üzerine gelince kalkan gölgeyle çakışıyor ve
     sürüklerken yanlışlıkla tutuluyordu. Yerini `.ray-cizgi` aldı —
     aynı bilgiyi veriyor, tıklanacak bir şey değil. */
  scrollbar-width:none;
  cursor:grab;
}
.fmg .ray::-webkit-scrollbar{ display:none; }
.fmg .ray.suruklu{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.fmg .ray.suruklu *{ pointer-events:none; }
/* Sürüklerken metin ve görsel seçilmesin. Görselin kendi "sürükle-bırak"ı
   da kapalı: tarayıcı fotoğrafı sayfadan koparıp taşımaya kalkıyordu. */
.fmg .ray.suruklu{ -webkit-user-select:none; user-select:none; }
.fmg .parca-gorsel{ -webkit-user-select:none; user-select:none; }
.fmg .parca-gorsel img{ -webkit-user-drag:none; }

/* Kaydırma göstergesi: ne kadarını gördüğünü ve nerede olduğunu söyler. */
.fmg .ray-cizgi{
  position:absolute; left:var(--pad); right:var(--pad); bottom:6px; height:2px;
  background:rgba(12,12,14,.09); border-radius:2px;
  pointer-events:none; opacity:0; transition:opacity .3s;
}
.fmg .ray-kap.kaydirilir .ray-cizgi{ opacity:1; }
.fmg .ray-cizgi i{
  display:block; height:100%; border-radius:2px; background:rgba(12,12,14,.42);
  transition:margin-left .12s linear, width .2s;
}

/* Kenar solması: ray'ın devam ettiğini söyler, çizgi çekmeden. */
.fmg .ray-kap::before, .fmg .ray-kap::after{
  content:""; position:absolute; top:0; bottom:26px; width:clamp(26px,5vw,80px);
  pointer-events:none; z-index:2; opacity:0; transition:opacity .3s;
}
.fmg .ray-kap::before{ left:0;  background:linear-gradient(90deg, var(--bone), transparent); }
.fmg .ray-kap::after{  right:0; background:linear-gradient(270deg, var(--bone), transparent); }
.fmg .ray-kap.sol-var::before{ opacity:1; }
.fmg .ray-kap.sag-var::after{  opacity:1; }

/* Oklar: fare tekerleği olmayan ya da kullanmayan için. */
.fmg .ok{
  position:absolute; top:calc(50% - 40px); z-index:3;
  width:42px; height:42px; border-radius:50%; padding:0; min-width:0;
  border:1px solid var(--line); background:rgba(245,243,239,.92);
  backdrop-filter:blur(6px); color:var(--ink);
  display:grid; place-items:center; cursor:pointer;
  opacity:0; transition:opacity .25s, transform .25s var(--ease), border-color .2s;
}
.fmg .ok-sol{ left:calc(var(--pad) - 52px); }
.fmg .ok-sag{ right:calc(var(--pad) - 52px); }
@media (max-width:1100px){ .fmg .ok-sol{ left:8px; } .fmg .ok-sag{ right:8px; } }
/* Oklar yalnız üzerine gelince. Kaydırma çubuğu gizlendiğinde bir süre
   sürekli görünür tutuldular; ürünün üstünde duran daire kalabalık yapıyor.
   Rayın devam ettiğini zaten iki şey söylüyor ve ikisi de hep görünür:
   kenar solması ve `.ray-cizgi`. */
.fmg .ray-kap:hover .ok, .fmg .ok:focus-visible{ opacity:1; }
.fmg .ok:hover{ border-color:var(--ink); transform:scale(1.06); }
.fmg .ok[disabled]{ opacity:0 !important; pointer-events:none; }

/* ---- Parça -------------------------------------------------------------- */
.fmg .parca{
  flex:0 0 auto; scroll-snap-align:start;
  width:max(116px, calc(var(--en) / 520 * var(--kutu)));
  position:relative;
}
.fmg .parca[hidden]{ display:none; }
/* Gövde gerçek bir <a>: JavaScript tıklamayı çekmeceye çeviriyor, ama orta
   tuş ve "yeni sekmede aç" ürün sayfasına gitmeye devam ediyor. */
.fmg .parca-bag{
  display:flex; flex-direction:column;
  color:inherit; text-decoration:none; cursor:pointer;
  border:0; background:none; box-shadow:none;
}
.fmg .parca-bag:hover, .fmg .parca-bag:focus{ color:inherit; text-decoration:none; }

/* Giysi ortak yükseklikte bir kutuda, dikeyde ortalı.
   Boy farkı UYDURULMUYOR: bu fotoğraflardan gerçek boy çıkmıyor (genişlik
   kol açıklığını ölçüyor), uydurulan fark aynı ürünün iki fotoğrafını bile
   dengesiz gösteriyordu. */
.fmg .parca-gorsel{
  position:relative; height:var(--kutu);
  display:flex; align-items:center; justify-content:center;
  transition:transform .5s var(--ease), filter .5s var(--ease), opacity .4s var(--ease);
  transform-origin:50% 100%;
  will-change:transform;
  filter:drop-shadow(0 18px 26px rgba(12,12,14,.13));
}
.fmg .parca-gorsel img{
  height:calc(var(--boy) / 520 * var(--kutu));
  width:auto; max-width:100%;
}

/* Hızlı ekleme: parçayı açmadan listeye atmak için. */
.fmg .parca-ekle{
  position:absolute; top:8px; right:4px; z-index:4;
  width:30px; height:30px; border-radius:50%; padding:0; min-width:0;
  border:1px solid var(--line); background:rgba(245,243,239,.94);
  color:var(--ink); cursor:pointer; display:grid; place-items:center;
  opacity:0; transform:scale(.8);
  transition:opacity .22s, transform .22s var(--ease), background-color .2s, border-color .2s;
}
.fmg .parca:hover .parca-ekle, .fmg .parca-ekle:focus-visible{ opacity:1; transform:none; }
.fmg .parca-ekle:hover{ border-color:var(--ink); background:#fff; }
.fmg .parca.secili .parca-ekle{
  opacity:1; transform:none; background:var(--ink); color:var(--bone); border-color:var(--ink);
}

.fmg .parca-kunye{
  margin-top:16px; padding-top:11px; border-top:1px solid var(--line);
  transition:border-color .4s var(--ease);
  display:flex; align-items:flex-start; gap:7px;
}
.fmg .parca-nokta{
  width:9px; height:9px; border-radius:50%; flex:none; margin-top:4px;
  border:1px solid rgba(12,12,14,.18);
}
.fmg .parca-nokta-yok{ background:none; border-style:dashed; }
/* `display:block` ŞART: ikisi de <span>, satır içi kalınca kod ile ad yan
   yana akıyor ve komşu parçanın üstüne taşıyordu. */
.fmg .parca-kod{
  display:block;
  font-family:var(--mono); font-size:10px; letter-spacing:.09em;
  color:var(--mute); margin:0 0 5px;
}
.fmg .parca-ad{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin:0; font-size:12.5px; line-height:1.32; font-weight:500; letter-spacing:-.01em;
  color:var(--ink);
  /* İki satırlık yer HER ZAMAN ayrılıyor. Tek satırlık adlarda künye
     yukarı kayıyor, rayın alt kenarı testere gibi görünüyordu. */
  min-height:calc(2 * 1.32em);
}

@media (hover:hover) and (pointer:fine){
  .fmg .parca:hover .parca-gorsel, .fmg .parca-bag:focus-visible .parca-gorsel{
    transform:translateY(-14px) scale(1.03);
    filter:drop-shadow(0 38px 44px rgba(12,12,14,.24));
  }
  .fmg .parca:hover .parca-kunye{ border-color:var(--ink); }
  /* Komşular geri çekiliyor ama ÇOK AZ. Önce .58 denendi: kemik zeminde
     siyah montlar orta griye dönüyordu; ürünlerin yarısı siyah, bu zeminde
     saydamlık payı çok dar. */
  .fmg .ray:hover .parca:not(:hover) .parca-gorsel{
    opacity:.88; transform:scale(.985);
    filter:drop-shadow(0 12px 18px rgba(12,12,14,.09));
  }
}
.fmg .parca-bag:focus-visible{ outline:2px solid var(--ink); outline-offset:10px; }
.fmg .parca.secili .parca-kunye{ border-color:var(--ink); border-top-width:2px; padding-top:10px; }

/* ---- Hap düğme ---------------------------------------------------------- */
.fmg .hap{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  font-family:var(--display); font-weight:500; font-size:13.5px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.fmg .hap:hover{ transform:translateY(-2px); border-color:var(--ink); color:var(--ink); }
.fmg .hap-dolu{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.fmg .hap-dolu:hover{ background:var(--ink-2); color:var(--bone); }
.fmg .hap-sade{ border-color:transparent; color:var(--mute); }
.fmg .hap-sade:hover{ color:var(--ink); }

/* ---- Seçim tepsisi ------------------------------------------------------ */
.fmg .tepsi{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  padding:0 var(--pad) clamp(14px,2vw,22px);
  animation:fmgTepsi .4s var(--ease);
  pointer-events:none;
}
.fmg .tepsi[hidden]{ display:none; }
@keyframes fmgTepsi{ from{ transform:translateY(18px); opacity:0; } }
.fmg .tepsi-ic{
  pointer-events:auto;
  display:flex; align-items:center; gap:clamp(12px,2vw,26px);
  max-width:1280px; margin:0 auto;
  background:var(--ink); color:var(--bone);
  border-radius:999px; padding:12px 14px 12px 22px;
  box-shadow:0 22px 50px -22px rgba(12,12,14,.6);
}
.fmg .tepsi-sol{ display:flex; align-items:baseline; gap:8px; flex:none; cursor:pointer; }
.fmg .tepsi-sol:hover .tepsi-yazi{ color:var(--sari); }
.fmg .tepsi-adet{ font-weight:800; font-size:20px; letter-spacing:-.02em; }
.fmg .tepsi-yazi{ font-size:12.5px; color:rgba(245,243,239,.62); transition:color .2s; }
@media (max-width:620px){ .fmg .tepsi-yazi{ display:none; } }

.fmg .tepsi-liste{
  list-style:none; margin:0; padding:0; flex:1; min-width:0;
  display:flex; gap:7px; overflow-x:auto; scrollbar-width:none;
}
.fmg .tepsi-liste::-webkit-scrollbar{ display:none; }
.fmg .tepsi-liste li{ flex:none; margin:0; }
/* Zemin AYDINLIK olmalı: ürünlerin yarısı siyah, koyu tepsinin üstünde
   siyah mont tamamen kayboluyordu — seçtiğini göremiyorsun. */
.fmg .tepsi-liste button{
  width:42px; height:42px; border-radius:50%; cursor:pointer; min-width:0;
  border:1px solid transparent; background:var(--bone);
  display:grid; place-items:center; padding:0; position:relative;
  transition:border-color .2s, transform .2s var(--ease);
}
.fmg .tepsi-liste button:hover{ border-color:var(--sari); transform:translateY(-2px); }
.fmg .tepsi-liste button::after{
  content:"×"; position:absolute; inset:0; border-radius:50%;
  background:rgba(12,12,14,.72); color:var(--bone);
  display:grid; place-items:center; font-size:19px; line-height:1;
  opacity:0; transition:opacity .2s;
}
.fmg .tepsi-liste button:hover::after{ opacity:1; }
.fmg .tepsi-liste img{ width:30px; height:30px; object-fit:contain; }
.fmg .tepsi-sag{ display:flex; align-items:center; gap:8px; flex:none; }
.fmg .tepsi-sag .hap{ padding:11px 20px; }
.fmg .tepsi-sag .hap-dolu{ background:var(--sari); color:var(--ink); border-color:var(--sari); }
.fmg .tepsi-sag .hap-dolu:hover{ background:#FFC53D; color:var(--ink); }
.fmg .tepsi-sag .hap-sade{ color:rgba(245,243,239,.6); }
.fmg .tepsi-sag .hap-sade:hover{ color:var(--bone); }
@media (max-width:760px){
  .fmg .js-tepsi-kopyala, .fmg .js-tepsi-bosalt{ display:none; }
}

/* Adet listesi: teklif formunda "kaç adet" sorusunu ikinci kez sormamak için. */
.fmg .tepsi-panel{
  pointer-events:auto;
  max-width:1280px; margin:0 auto 10px;
  background:var(--bone); color:var(--ink);
  border:1px solid rgba(12,12,14,.1); border-radius:22px;
  padding:16px 18px; max-height:min(52vh, 460px); overflow-y:auto;
  box-shadow:0 26px 60px -26px rgba(12,12,14,.5);
  animation:fmgPanel .3s var(--ease);
}
@keyframes fmgPanel{ from{ transform:translateY(10px); opacity:0; } }
.fmg .tepsi-panel[hidden]{ display:none; }
.fmg .tp-ust{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--line);
}
.fmg .tp-ust strong{ font-weight:800; letter-spacing:-.02em; font-size:15px; }
.fmg .tp-ipucu{ color:var(--mute); font-size:12.5px; }
.fmg .tp-kapat{
  margin-left:auto; border:0; background:none; cursor:pointer;
  font-size:22px; line-height:1; color:var(--mute); padding:0 4px;
}
.fmg .tp-kapat:hover{ color:var(--ink); }
.fmg .tp-satir{
  display:flex; align-items:center; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.fmg .tp-satir:last-child{ border-bottom:0; }
.fmg .tp-gorsel{ width:44px; height:44px; object-fit:contain; flex:none; }
.fmg .tp-yazi{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.fmg .tp-ad{ font-size:13.5px; font-weight:500; letter-spacing:-.01em; }
.fmg .tp-kod{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--mute); }
.fmg .tp-adet{
  flex:none; width:84px; height:38px; text-align:center;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  font-family:var(--display); font-size:14px; color:var(--ink); padding:0 8px;
}
.fmg .tp-adet:focus{ outline:0; border-color:var(--ink); }
.fmg .tp-sil{
  flex:none; width:32px; height:32px; border-radius:50%; min-width:0; padding:0;
  border:1px solid transparent; background:none; cursor:pointer;
  color:var(--mute); font-size:19px; line-height:1;
}
.fmg .tp-sil:hover{ border-color:var(--line); color:var(--ink); }

/* ---- Çekmece ------------------------------------------------------------ */
.fmg .cekmece-perde{ position:fixed; inset:0; z-index:60; background:rgba(12,12,14,.44); backdrop-filter:blur(3px); }
.fmg .cekmece{
  position:fixed; z-index:61; right:0; top:0; bottom:0;
  width:min(520px, 94vw); background:var(--bone);
  border-left:1px solid var(--line);
  padding:clamp(24px,3vw,44px); overflow-y:auto;
  animation:fmgGir .42s var(--ease);
}
@keyframes fmgGir{ from{ transform:translateX(26px); opacity:0; } }
.fmg .cekmece[hidden], .fmg .cekmece-perde[hidden]{ display:none; }
.fmg .cekmece-kapat{
  position:absolute; top:16px; right:18px;
  width:40px; height:40px; border-radius:50%; min-width:0; padding:0;
  border:1px solid var(--line); background:transparent;
  font-size:22px; line-height:1; cursor:pointer; color:var(--ink);
}
.fmg .cekmece-kapat:hover{ border-color:var(--ink); }
.fmg .cekmece-ic{ display:grid; gap:24px; }
.fmg .js-c-gorsel{ width:100%; max-height:46vh; object-fit:contain; filter:drop-shadow(0 26px 34px rgba(12,12,14,.18)); }
.fmg .c-kod{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--mute); margin:0; }
.fmg .cekmece h2{ margin:8px 0 0; font-weight:300; letter-spacing:-.03em; font-size:clamp(26px,3.4vw,38px); line-height:1.1; color:var(--ink); }
.fmg .c-kume{ margin:12px 0 0; color:var(--mute); font-size:14px; }
.fmg .c-eylem{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }

/* ---- Boş sonuç ---------------------------------------------------------- */
.fmg .bos{ padding:clamp(50px,8vw,110px) var(--pad); text-align:center; color:var(--mute); font-size:15px; }
.fmg .bos[hidden]{ display:none; }

/* ---- Telefon ------------------------------------------------------------ */
@media (max-width:640px){
  /* Sabit genişlik (52vw) verilmişti: parçalar eşitleniyor ve gerçek oran
     kayboluyordu. Kutu büyütülüp oran korunuyor. */
  .fmg .ray{ gap:22px; scroll-snap-type:x mandatory; --kutu:232px; }
  .fmg .duvar{ scroll-margin-top:calc(var(--fmg-ust, 0px) + 170px); }
  .fmg .duvar-adet{ margin-left:0; width:100%; }
  .fmg .atla{ margin-left:0; width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .fmg .atla::-webkit-scrollbar{ display:none; }
  .fmg .ok{ display:none; }           /* telefonda parmakla kaydırılıyor */
  .fmg .tepsi-ic{ padding:10px 12px 10px 16px; border-radius:26px; }
  .fmg .tepsi-panel{ border-radius:18px; padding:14px; }
  .fmg .tp-ipucu{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .fmg *{ animation:none !important; transition:none !important; }
}