/* urunler-ek.css · 2026-10-20 · urunler.html'den taşındı (sayfa 120 KB sınırı, test/katalog_kontrol.js).
   Yükleme yeri: urunler.html ilk <style> içinde, eski "KATEGORİ ÇİPLERİ" bloğunun yeri (</style><link><style> bölmesi).
   KART DÜĞMELERİ bloğu eskiden aradaki kurallardan sonraydı; aradakilerle tek eşit-özgüllük çakışması
   (.prod-dugmeler gap: telefonda 4px) urunler.html'de eski yerinde bırakıldı, görünüm aynı (piksel karşılaştırıldı). */

/* 2026-10-20 · KATEGORİ ÇİPLERİ: her kategori gece zemininde bir sticker. Krem gövde, kalın siyah kontur,
   kategori renginde sert gölge (--kc; siyah kategoriler gece zemininde kaybolmasın diye JS gök/pembe verir),
   dolu renkli simge dairesi, okunaklı sayı rozeti. Hafif eğik; seçili olan limon, daha eğik, parıltılı.
   Tek satır, yatay kaydırma ve oklar eskisi gibi. */
.cat-bar{max-width:1600px;margin:0 auto;padding:6px 60px 18px;position:relative}
.cat-scroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 12px;padding:10px 10px 14px 12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-bar.sol-var .cat-scroll{mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.cat-bar:not(.sag-var) .cat-scroll{mask-image:linear-gradient(90deg,transparent,#000 40px)}
.cat-bar:not(.sag-var):not(.sol-var) .cat-scroll{mask-image:none}
.cat-chip{--kc:var(--kr,#4DCBFF);scroll-snap-align:start;flex:none;display:inline-flex;align-items:center;gap:9px;padding:6px 10px 6px 6px;
  border:3px solid var(--ink);border-radius:14px;font-family:'Archivo Black','Familjen Grotesk',sans-serif;font-size:14px;letter-spacing:.2px;
  color:var(--ink);cursor:pointer;background:#FFF8E7;box-shadow:4px 4px 0 var(--kc);
  transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap;transform:rotate(-1.2deg)}
.cat-chip:nth-child(even){transform:rotate(1deg)}
.cat-chip .cc-emoji{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:18px;line-height:1;
  background:var(--kc);border:2.5px solid var(--ink)}
.cat-chip .cc-n{font-family:'Familjen Grotesk',sans-serif;font-size:12px;font-weight:800;line-height:1;color:#FFF8E7;
  background:var(--ink);padding:4px 8px;border-radius:999px}
.cat-chip:hover{transform:translate(-2px,-3px) rotate(0deg);box-shadow:6px 7px 0 var(--kc)}
.cat-chip.active{background:var(--lime);transform:rotate(-3deg) scale(1.06);
  box-shadow:4px 4px 0 var(--hot),0 0 22px rgba(200,255,61,.45)}
.cat-chip.active .cc-n{background:var(--hot);color:#fff}
.cat-ok{position:absolute;top:50%;transform:translateY(-60%);width:40px;height:40px;border-radius:50%;border:3px solid var(--ink);
  background:#FFF8E7;color:var(--ink);box-shadow:3px 3px 0 var(--lime);font-size:22px;font-weight:900;line-height:1;cursor:pointer;display:none;z-index:2}
.cat-ok.sol{left:14px}.cat-ok.sag{right:14px}
.cat-bar.sol-var .cat-ok.sol,.cat-bar.sag-var .cat-ok.sag{display:grid;place-items:center}
.cat-ok:hover{background:var(--lime);box-shadow:3px 3px 0 var(--hot)}
@media(max-width:840px){.cat-ok{display:none !important}}
@media(max-width:600px){
  .cat-scroll{gap:11px}
  .cat-chip{font-size:13px;gap:7px;padding:5px 9px 5px 5px}
  .cat-chip .cc-emoji{width:30px;height:30px;font-size:15px}
  .cat-chip .cc-n{font-size:12px;padding:4px 7px}
  /* telefonda çip düz durur (eğiklik satır ölçümünü bozuyor, mobil düzen kapısı); seçili olan yine limon + büyük */
  .cat-chip,.cat-chip:nth-child(even),.cat-chip:hover{transform:none}
  .cat-chip.active{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){.cat-chip{transition:none}}

/* 2026-10-20 · KART DÜĞMELERİ: üç küçük yuvarlak yerine net bir sıra. "Sepete ekle" ANA düğme: pembe, geniş,
   satırda kalan yeri doldurur. 3D (limon) ve Fotoğrafta dene (gök) İKİNCİL: kare sticker düğme, altında kısa yazı.
   Yazılar sığdığı kadar (container query):
   · Ekle düğmesi kendi genişliğine bakar: dar = yalnız 🛒, orta = "Ekle", geniş = "Sepete ekle".
   · İkincil alt yazı ("dene", "fotoğrafta") kart içi ≥200 px'te; dar kartta yalnız simge.
   Her düğme 44 px yüksek (dokunma hedefi). 430 px altında 📷 gizli kuralı (B3) aşağıda aynen duruyor. */
.prod-info{container:kart/inline-size}
.prod-card.list-view .prod-dugmeler{max-width:340px;justify-content:flex-start}
.prod-add{container:ekle/inline-size;flex:1 1 0;min-width:44px;height:44px;padding:0 8px;display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--hot);color:#fff;border:2.5px solid var(--ink);border-radius:12px;font-family:'Archivo Black','Familjen Grotesk',sans-serif;
  font-size:13px;letter-spacing:.2px;line-height:1;box-shadow:3px 3px 0 var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;
  transition:transform .15s,box-shadow .15s,background .15s}
.prod-add .pa-ik{font-size:17px;line-height:1}
.prod-add .pa-kisa,.prod-add .pa-yazi,.prod-add .pa-ok{display:none}
@container ekle (min-width:56px){.prod-add .pa-kisa{display:inline;font-size:12px}}
@container ekle (min-width:118px){.prod-add .pa-kisa{display:none}.prod-add .pa-yazi{display:inline}}
.prod-add:hover{transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--ink)}
.prod-add:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
/* eklenince 1,2 sn limon + ✓ (kartEklendi) */
.prod-add.eklendi{background:var(--lime);color:var(--ink);animation:paPop .35s ease}
.prod-add.eklendi>span{display:none!important}
.prod-add.eklendi>.pa-ok{display:inline!important;font-size:20px}
@keyframes paPop{40%{transform:scale(1.1) rotate(-2deg)}}
.prod-3d,.prod-giydir{flex:none;min-width:44px;height:44px;padding:0 6px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--ink);border:2.5px solid var(--ink);border-radius:12px;box-shadow:2px 2px 0 var(--ink);cursor:pointer;white-space:nowrap;line-height:1;
  transition:transform .15s,box-shadow .15s}
.prod-3d{background:var(--lime)}
.prod-giydir{background:var(--sky)}
.prod-3d .pd-ik{font-family:'Archivo Black','Familjen Grotesk',sans-serif;font-size:14px;letter-spacing:.3px}
.prod-giydir .pd-ik{font-size:16px}
.pd-alt{display:none;font-family:'Familjen Grotesk',sans-serif;font-size:10px;font-weight:800;letter-spacing:.1px}
@container kart (min-width:200px){.pd-alt{display:block}.prod-3d,.prod-giydir{padding:0 7px}}
.prod-3d:hover,.prod-giydir:hover{transform:translate(-1px,-2px);box-shadow:3px 4px 0 var(--ink)}
@media (prefers-reduced-motion:reduce){.prod-add.eklendi{animation:none}}

/* 2026-10-20 · K14: çekmece alt kısmı telefonda sıkı (bilgi aynı, boşluk az). Ürün listesine ekranın yarısından fazlası kalır. */
@media(max-width:600px){
  /* FX-6: urunler.html içindeki satır içi <style> bu dosyadan SONRA gelir ve eşit özgüllükte kazanırdı (kural hiç işlemiyordu); #cartDr önekiyle özgüllük yükseltildi. */
  html #cartDr .cd-foot{padding:8px 14px 10px}
  html #cartDr .cd-foot .skmp{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;margin:0 0 5px}
  html #cartDr .cd-foot .skmp-eski{font-size:12px}
  html #cartDr .cd-foot .skmp-kargo,html #cartDr .cd-foot .skmp-tesvik{flex:1 1 100%;padding:3px 8px;font-size:12px;line-height:1.25;border-radius:8px}
  html #cartDr .cd-foot .skmp-rozet{padding:1px 8px;font-size:11.5px;line-height:1.35}
  html #cartDr .cd-foot .skmp-dokum{flex:1 1 100%;font-size:11px;line-height:1.25}
  html #cartDr .cd-total{font-size:22px;margin-bottom:5px}
  html #cartDr .cd-foot a.dk-satir{margin:0 0 5px!important}
  html #cartDr .cd-checkout{padding:10px;font-size:15px}
  html #cartDr .cd-head{padding:12px 16px}
}

/* 2026-10-21 · FİYAT ÖLÇÜ SEÇİLİNCE. Kart çipleri + fiyat yeri kart-olcu.js içinde (her sayfa aynı görünüm).
   Pencerede boyut seçilene kadar fiyat yerine yönlendirme (aşağıda). */
.prod-card.list-view .ko-cipler{justify-content:flex-start}
#prodModal .modal-price.fiyat-bekliyor{display:inline-block;font-family:'Familjen Grotesk',sans-serif;font-size:16px;font-weight:800;
  letter-spacing:0;line-height:1.25;color:var(--ink);background:var(--lime);border:2.5px solid var(--ink);border-radius:12px;
  padding:8px 14px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-1deg)}