/* =============================================================
   Katalog: ürün kartı, filtreler, ürün detay galerisi
   ============================================================= */

/* -------------------------------------------------------------
   Ürün kartı
   ------------------------------------------------------------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--t-base);
}
.product-card:hover { border-color: var(--line-strong); }

.product-card__media {
  position: relative;
  display: block;
  background: var(--surface-2);
  overflow: hidden;
}
.product-card__media::before { content: ''; display: block; padding-top: 100%; }
.product-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.product-card:hover .product-card__media img { transform: scale(1.035); }

.product-card__flags {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  z-index: 2;
}

.product-card__gallery-hint {
  position: absolute;
  bottom: var(--sp-3); right: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 2px;
  z-index: 2;
}
.product-card__gallery-hint svg { width: 12px; height: 12px; }

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-4);
  gap: var(--sp-2);
}
.product-card__cat {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.product-card__name {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.product-card__name:hover { color: var(--brand); }
.product-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-12);
  color: var(--ink-3);
}
.product-card__meta span { display: inline-flex; align-items: center; gap: 4px; }

.product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
}
.product-card__price {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: -0.015em;
}
.product-card__old {
  font-size: var(--fs-13);
  color: var(--ink-4);
  text-decoration: line-through;
}
.product-card__vat { font-size: var(--fs-11); color: var(--ink-4); }

.product-card__foot {
  display: flex;
  gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-4);
}
.product-card__foot .btn { flex: 1; }

/* Liste görünümü */
.product-card--row {
  flex-direction: row;
  align-items: stretch;
}
.product-card--row .product-card__media { width: 190px; flex-shrink: 0; }
.product-card--row .product-card__media::before { padding-top: 0; height: 100%; }
.product-card--row .product-card__media img { position: absolute; }
.product-card--row .product-card__body { padding: var(--sp-5); }
.product-card--row .product-card__name { min-height: 0; -webkit-line-clamp: 1; }
.product-card--row .product-card__foot { padding: 0 var(--sp-5) var(--sp-5); max-width: 300px; }

/* -------------------------------------------------------------
   Filtre kenar çubuğu
   ------------------------------------------------------------- */
.filters { position: sticky; top: calc(var(--headmain-h) + var(--headnav-h) + var(--sp-5)); }
.filter-group {
  border-bottom: 1px solid var(--line);
  padding: var(--sp-5) 0;
}
.filter-group:first-child { padding-top: 0; }
.filter-group:last-child { border-bottom: none; }
.filter-group__title {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
.filter-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.filter-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin: 0 calc(-1 * var(--sp-3));
  font-size: var(--fs-14);
  color: var(--ink-2);
  border-radius: 2px;
  transition: background-color var(--t-fast);
}
.filter-list__item:hover { background: var(--surface-2); color: var(--ink); }
.filter-list__item.is-active {
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: var(--fw-semibold);
}
.filter-list__count { font-size: var(--fs-12); color: var(--ink-4); }

.price-fields { display: flex; align-items: center; gap: var(--sp-2); }
.price-fields .input { padding: 8px var(--sp-3); font-size: var(--fs-14); }
.price-fields__sep { color: var(--ink-4); }

/* Araç çubuğu */
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.catalog-toolbar__count { font-size: var(--fs-14); color: var(--ink-3); }
.catalog-toolbar__right { display: flex; align-items: center; gap: var(--sp-3); }
.catalog-toolbar .select { padding: 8px var(--sp-7) 8px var(--sp-3); font-size: var(--fs-14); }

.view-toggle { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.view-toggle__btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--ink-3);
  background: var(--surface);
}
.view-toggle__btn + .view-toggle__btn { border-left: 1px solid var(--line); }
.view-toggle__btn:hover { background: var(--surface-2); }
.view-toggle__btn.is-active { background: var(--ink); color: #fff; }
.view-toggle__btn svg { width: 16px; height: 16px; }

/* Etkin filtre etiketleri */
.active-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-3);
  font-size: var(--fs-13);
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.filter-chip svg { width: 12px; height: 12px; color: var(--ink-3); }
.filter-chip:hover { border-color: var(--ink-4); }

.filters-mobile-btn { display: none; }

/* -------------------------------------------------------------
   Ürün detay
   ------------------------------------------------------------- */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: var(--sp-9);
  align-items: start;
}

/* Galeri */
.gallery { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--sp-4); }
.gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 560px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.gallery__thumb {
  position: relative;
  width: 84px; height: 84px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { border-color: var(--ink-4); }
.gallery__thumb.is-active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

.gallery__stage {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
  cursor: zoom-in;
}
.gallery__stage::before { content: ''; display: block; padding-top: 100%; }
.gallery__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--t-base);
}
.gallery__stage.is-zoomed .gallery__image {
  transform: scale(2);
  cursor: zoom-out;
  transition: transform var(--t-base);
}
.gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--line);
  color: var(--ink-2);
  z-index: 2;
  transition: background-color var(--t-fast);
}
.gallery__arrow:hover { background: #fff; color: var(--brand); }
.gallery__arrow--prev { left: var(--sp-3); }
.gallery__arrow--next { right: var(--sp-3); }
.gallery__arrow svg { width: 16px; height: 16px; }
.gallery__counter {
  position: absolute;
  bottom: var(--sp-3); right: var(--sp-3);
  padding: 3px var(--sp-3);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--line);
  z-index: 2;
}

/* Bilgi sütunu */
.product-info__cat {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--sp-3);
}
.product-info__title {
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}
.product-info__sub { color: var(--ink-3); font-size: var(--fs-15); margin-bottom: var(--sp-5); }

.product-info__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-13);
  color: var(--ink-3);
  margin-bottom: var(--sp-5);
}
.product-info__meta strong { color: var(--ink); font-weight: var(--fw-semibold); }

.price-block { margin-bottom: var(--sp-6); }
.price-block__row { display: flex; align-items: baseline; gap: var(--sp-3); }
.price-block__price {
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
}
.price-block__old { font-size: var(--fs-16); color: var(--ink-4); text-decoration: line-through; }
.price-block__note { font-size: var(--fs-12); color: var(--ink-3); margin-top: var(--sp-2); }

.buy-box {
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.buy-box__row { display: flex; align-items: center; gap: var(--sp-3); }
.buy-box__row .btn { flex: 1; }
.buy-box__note { font-size: var(--fs-12); color: var(--ink-3); margin-top: var(--sp-3); }

.product-perks { display: flex; flex-direction: column; gap: var(--sp-3); }
.product-perk {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.product-perk svg { width: 17px; height: 17px; color: var(--brand); flex-shrink: 0; margin-top: 1px; }

/* Özellik tablosu */
.spec-table { font-size: var(--fs-14); }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  color: var(--ink-3);
  font-weight: var(--fw-regular);
  width: 40%;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-14);
  border-bottom: none;
}
.spec-table td { padding: var(--sp-3) 0; font-weight: var(--fw-medium); border-bottom: none; }