/* ============================================================
   YÇFİT — TAKVİYE MAĞAZASI
   Katalog + sepet + WhatsApp siparişi. Sunucu yok, ödeme sayfası
   yok: sepet tarayıcıda durur, sipariş hazır mesaj olarak gider.
   Ürün kartı da sitenin geri kalanı gibi pah kesilmiş ve köşesiz.
   ============================================================ */

.shop { background: var(--ink-1); }

.shop__bar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.shop__filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.shop__note { font-size: var(--t-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ash-dim); }

.shop__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
/* display:grid, hidden özniteliğinin display:none'ını eziyor —
   kategori seçilmeden ızgara gerçekten kapalı kalsın diye geri alınıyor. */
.shop__grid[hidden] { display: none; }

.prod {
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  transition: border-color var(--d-fast) var(--e-cut), transform var(--d-mid) var(--e-load);
}
.prod:hover { border-color: var(--line); transform: translateY(-4px); }
.prod[data-stok="false"] { opacity: .62; }

.prod__shot {
  position: relative; display: block;
  aspect-ratio: 4 / 5; overflow: hidden;
  /* Ürün kareleri beyaz zeminli stüdyo çekimi — e-ticaret standardı.
     Kutu da beyaz ki fotoğrafın kenarında koyu bir çerçeve kalmasın. */
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
}
.prod__shot img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform var(--d-slow) var(--e-load);
}
.prod:hover .prod__shot img { transform: scale(1.04); }

/* Rozetler: stok durumu ve kategori */
.prod__flag {
  position: absolute; left: 0; top: 0;
  padding: .32rem .7rem;
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .18em; text-transform: uppercase;
  background: var(--acid); color: var(--ink);
}
.prod__flag--out { background: var(--blood); color: var(--bone); }

.prod__in { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); flex: 1; }
.prod__brand {
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .2em; text-transform: uppercase; color: var(--ash-dim);
}
.prod__name { font-size: var(--t-lg); line-height: 1; }
.prod__size { font-size: var(--t-sm); color: var(--ash); }
.prod__note { font-size: var(--t-sm); color: var(--parchment); }

.prod__foot {
  margin-top: auto; padding-top: var(--s-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  border-top: 1px solid var(--line-soft);
}
.prod__price {
  font-family: var(--font-display); font-size: var(--t-md);
  color: var(--acid); line-height: 1;
  white-space: nowrap;          /* "1.250 ₺" alt satıra bölünmesin */
}
.prod__price i { font-style: normal; font-family: var(--font-body);
  font-size: var(--t-sm); color: var(--ash-dim); letter-spacing: .1em; }

.prod__pay { margin-top: var(--s-2); }

/* Adet kutusu — sepette olan ürün kartta da sayısını gösteriyor */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line); }
.qty button {
  width: 34px; background: none; border: 0; cursor: pointer;
  color: var(--bone); font-weight: var(--fw-max);
  transition: background var(--d-fast) var(--e-cut), color var(--d-fast) var(--e-cut);
}
.qty button:hover { background: var(--acid); color: var(--ink); }
.qty span {
  min-width: 38px; display: grid; place-items: center;
  font-variant-numeric: tabular-nums; font-weight: var(--fw-max);
  border-inline: 1px solid var(--line);
}

/* ============================================================
   NAVİGASYONDAKİ SEPET DÜĞMESİ
   ============================================================ */
.cartbtn {
  position: relative;
  width: 38px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line);
  color: var(--ash); cursor: pointer;
  transition: color var(--d-fast) var(--e-cut), border-color var(--d-fast) var(--e-cut);
}
.cartbtn:hover { color: var(--bone); border-color: var(--ash-dim); }
.cartbtn svg { width: 17px; height: 17px; }
.cartbtn__n {
  position: absolute; right: -7px; top: -8px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--acid); color: var(--ink);
  font-size: 10px; font-weight: var(--fw-max);
  font-variant-numeric: tabular-nums;
  transform: scale(0); transition: transform .3s var(--e-impact);
}
.cartbtn__n[data-on="true"] { transform: scale(1); }

/* ============================================================
   SEPET PANELİ
   ============================================================ */
.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-light);
  width: min(420px, 100%);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--ink-1);
  border-left: 1px solid var(--line);
  transform: translateX(101%);
  visibility: hidden;
  transition: transform var(--d-mid) var(--e-cut), visibility 0s linear var(--d-mid);
}
.cart[data-open="true"] {
  transform: translateX(0); visibility: visible;
  transition: transform var(--d-mid) var(--e-cut), visibility 0s linear 0s;
}
.cart__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line-soft);
}
.cart__title { font-size: var(--t-lg); }
.cart__body { overflow-y: auto; padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.cart__empty { color: var(--ash-dim); font-size: var(--t-sm); }

.cart__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.cart__row img { width: 64px; height: 80px; object-fit: contain; background: #fff; }
.cart__nm { font-weight: var(--fw-strong); color: var(--bone); }
.cart__sz { font-size: var(--t-micro); letter-spacing: .1em; color: var(--ash-dim); text-transform: uppercase; }
.cart__line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }
.cart__sum { font-family: var(--font-display); font-size: var(--t-md); color: var(--acid); }

.cart__foot {
  padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  display: grid; gap: var(--s-3);
}
.cart__total { display: flex; align-items: baseline; justify-content: space-between; }
.cart__total span { font-size: var(--t-micro); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--ash-dim); }
.cart__total b { font-family: var(--font-display); font-size: var(--t-xl); color: var(--bone); font-weight: 400; }
.cart__hint { font-size: var(--t-sm); color: var(--ash); }
.cart__name { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--ash-dim); }
.cart__foot input {
  width: 100%; padding: .8rem 1rem;
  background: var(--ink-2); border: 1px solid var(--line); color: var(--bone);
}
.cart__foot input:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
/* Sepet boşken sipariş düğmesi devre dışı — ve öyle göründüğü belli olsun */
.cart__foot .btn:disabled {
  --btn-bg: var(--steel-2); --btn-fg: var(--ash-dim);
  cursor: not-allowed;
}
.cart__foot .btn:disabled:hover { --btn-bg: var(--steel-2); --btn-fg: var(--ash-dim); }

/* Panel açıkken sayfanın üstüne düşen perde */
.cart__veil {
  position: fixed; inset: 0; z-index: calc(var(--z-light) - 1);
  background: rgba(4, 4, 3, .72);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-mid) var(--e-cut), visibility 0s linear var(--d-mid);
}
.cart__veil[data-on="true"] {
  opacity: 1; visibility: visible;
  transition: opacity var(--d-mid) var(--e-cut), visibility 0s linear 0s;
}

@media (max-width: 859px) {
  .cart { padding-bottom: 52px; }        /* alttaki sabit çubuk kadar */
}