/* ==========================================================================
   Eskin Elektrik — v2 anasayfa ekleri
   style.css tasarım sistemini değiştirmez; yalnızca v2'de eklenen
   bileşenleri tanımlar. Tüm değerler style.css :root değişkenlerinden gelir.
   --------------------------------------------------------------------------
   Bölümler:
     1. Kompakt hero
     2. Ürün grubu kutusu (6 × 2 grid)
     3. Marka slider
     4. Kampanya ürün kartı (4 × 3 grid) + filtre
     5. Duyarlı davranış
   ========================================================================== */

/* ==========================================================================
   1. KOMPAKT HERO — ürünler ilk ekranda görünsün diye yüksekliği düşük
   ========================================================================== */

.hero--compact .hero__inner {
  max-width: none;
  padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-6); align-items: center;
}
.hero--compact h1 { font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.375rem); max-width: 22ch; }
.hero--compact .hero__lead { margin-bottom: var(--sp-5); font-size: var(--fs-base); }
.hero--compact .hero__actions { margin-bottom: 0; }

.hero-panel {
  background: rgba(20, 24, 29, .72); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg); padding: var(--sp-5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-panel__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding-block: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,.12);
}
.hero-panel__row:first-child { padding-top: 0; }
.hero-panel__row:last-of-type { border-bottom: 0; }
.hero-panel__row span { font-size: var(--fs-sm); color: rgba(255,255,255,.7); }
.hero-panel__row strong {
  font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 600;
  color: #fff; letter-spacing: -.02em; line-height: 1.1;
}
.hero-panel .btn { margin-top: var(--sp-4); }

/* ==========================================================================
   2. ÜRÜN GRUBU KUTUSU — görsel üstte, metin altta
   ========================================================================== */

.pg-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-4);
}
.pg-tile {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: var(--sp-4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.pg-tile:hover {
  border-color: var(--brand-line); box-shadow: var(--shadow);
  transform: translateY(-2px); color: inherit;
}
.pg-tile__media {
  display: block; aspect-ratio: 1 / 1; margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4);
  padding: var(--sp-4); background: #fff; border-bottom: 1px solid var(--line);
  border-radius: var(--r) var(--r) 0 0; overflow: hidden;
}
.pg-tile__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ease); }
.pg-tile:hover .pg-tile__media img { transform: scale(1.05); }
.pg-tile__name {
  margin: 0 0 var(--sp-1); font-size: var(--fs-base); font-weight: 600;
  line-height: 1.3; color: var(--ink); min-height: 2.6em;
}
.pg-tile__count {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--brand);
  font-weight: 500; margin-bottom: var(--sp-3);
}
.pg-tile__brands {
  margin: 0; padding-right: var(--sp-5); padding-top: var(--sp-3); border-top: 1px dashed var(--line);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-tile__arrow {
  position: absolute; bottom: var(--sp-4); right: var(--sp-4);
  color: var(--line-2); transition: color .2s var(--ease), transform .2s var(--ease);
}
.pg-tile:hover .pg-tile__arrow { color: var(--brand); transform: translateX(3px); }

.pg-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  font-size: var(--fs-ui); color: var(--ink-3);
}
.pg-foot strong { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   3. MARKA SLIDER
   ========================================================================== */

.brand-slider { position: relative; }
.brand-slider__controls { display: flex; gap: var(--sp-2); flex: none; }
.slider-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: #fff; color: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.slider-btn:hover { border-color: var(--ink); }
.slider-btn:disabled { opacity: .4; cursor: default; border-color: var(--line-2); }
.slider-btn--prev svg { transform: scaleX(-1); }

.brand-track {
  --per-view: 6;
  display: flex; gap: var(--sp-4);
  margin: 0; padding: 0 0 var(--sp-1); list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.brand-track::-webkit-scrollbar { display: none; }
.brand-track > li {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--sp-4)) / var(--per-view));
  scroll-snap-align: start;
}
.brand-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); height: 128px; padding: var(--sp-4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  text-align: center;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.brand-tile:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
/* Logo dosyaları gelene kadar marka adı "wordmark" olarak dizilir */
.brand-tile__name {
  font-size: 1.3125rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1;
  color: var(--ink-2); transition: color .2s var(--ease);
}
.brand-tile:hover .brand-tile__name { color: var(--ink); }
.brand-tile__group {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.brand-tile--logo { padding: var(--sp-3); }
.brand-tile--logo img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

.brand-progress {
  position: relative; height: 3px; margin-top: var(--sp-5);
  background: var(--line); border-radius: 3px; overflow: hidden;
}
.brand-progress span {
  position: absolute; left: 0; top: 0; bottom: 0; width: 20%;
  background: var(--brand); border-radius: 3px;
  transition: transform .3s var(--ease);
}

.brand-az {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--ink-3);
}
.brand-az a { color: var(--ink-2); }
.brand-az a:hover { color: var(--brand); }

/* ==========================================================================
   4. KAMPANYA ÜRÜN KARTI
   ========================================================================== */

.filter-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.chip {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 36px; padding: .375rem .875rem;
  background: #fff; color: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: 999px; font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .mono { font-size: var(--fs-2xs); opacity: .7; }

.product-card__brand {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--sp-1);
}
.product-card__cond {
  display: flex; align-items: center; gap: .375rem;
  margin-top: var(--sp-2); padding: .375rem .5rem;
  background: var(--brand-tint); border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 500; color: var(--brand-darker); line-height: 1.35;
}
.product-card__cond svg { flex: none; }
.product-card .price-main { color: var(--brand); }
.product-card__actions .qty { flex: none; }
.product-card__actions .qty button { width: 32px; }
.product-card__actions .qty input { width: 44px; }
.product-card.is-hidden { display: none; }
.camp-col.is-hidden { display: none; }

.camp-empty { display: none; }
.camp-empty.is-visible { display: block; }

/* Başlıktaki "Online Ödeme" butonu — 992px altında mobil menüye taşınır */
.header-pay { min-height: 44px; margin-right: var(--sp-2); }
@media (max-width: 991.98px) { .header-pay { display: none; } }

/* Başlık aksiyonları arama kutusunun orta çizgisine hizalanır. Arama bloğunun
   altında "Sık aranan" satırı olduğu için bloğa göre ortalamak butonları
   aşağı kaydırıyordu; 46px = .header-search input yüksekliği. */
@media (min-width: 992px) {
  .header-actions { align-self: flex-start; min-height: 46px; }
}

/* ==========================================================================
   5. DUYARLI DAVRANIŞ
   ========================================================================== */

@media (max-width: 1199.98px) {
  .pg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brand-track { --per-view: 5; }
  .product-card__actions { flex-wrap: wrap; }
  .product-card__actions .qty { flex: 1 1 100%; }
  .product-card__actions .qty input { flex: 1 1 0; width: 0; min-width: 0; }  /* min-width:0 olmazsa + düğmesi kutudan taşıp kırpılıyor */
}

@media (max-width: 991.98px) {
  .hero--compact .hero__inner { grid-template-columns: 1fr; }
  .hero-panel { display: none; }
  .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-track { --per-view: 4; }
}

@media (max-width: 767.98px) {
  .brand-track { --per-view: 3; }
}

@media (max-width: 575.98px) {
  .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .pg-tile { padding: var(--sp-3); }
  .pg-tile__media { margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-3); padding: var(--sp-3); }
  .pg-tile__arrow { display: none; }
  .pg-tile__brands { padding-right: 0; }
  .pg-tile__name { font-size: var(--fs-ui); }
  .pg-tile__brands { -webkit-line-clamp: 3; font-size: var(--fs-xs); }
  .brand-track { --per-view: 2.3; gap: var(--sp-3); }
  .brand-track > li { flex-basis: calc((100% - 2 * var(--sp-3)) / 2.3); }
  .brand-tile { height: 104px; }
  .brand-tile__name { font-size: var(--fs-lg); }
  .product-card__body { padding: var(--sp-3); }
  .product-card__media { padding: var(--sp-2); }
  .product-card .price-main { font-size: 1.0625rem; }
  .product-card__cond { font-size: var(--fs-2xs); }
  .filter-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
  .filter-chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}

/* Ürün görseli bağlantısı kartın kare alanını doldursun */
.product-card__media > a { display: block; width: 100%; height: 100%; }
.product-card__media img { transition: transform .4s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.04); }