/* V3: gerçek ürün görselleri, hareketli marka şeridi ve yenilenen ürün grupları */
.brand-grid {
  display: block;
  overflow: hidden;
  position: relative;
  padding: 10px 0 22px;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.brand-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: brand-marquee 30s linear infinite;
  will-change: transform;
}
.brand-grid:hover .brand-track { animation-play-state: paused; }
.brand-card {
  width: 240px;
  min-height: 132px;
  flex: 0 0 240px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 72px auto;
  align-items: center;
  text-align: left;
  padding: 16px 17px;
  border-radius: 17px;
  box-shadow: 0 8px 26px rgba(20, 22, 24, .035);
}
.brand-logo-wrap {
  grid-column: 1 / -1;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 11px;
  background: #fafafa;
  overflow: hidden;
}
.brand-logo {
  display: block;
  max-width: 100%;
  width: auto;
  height: 54px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.brand-wordmark {
  font-size: 26px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -1.5px;
  color: #181a1d;
}
.brand-wordmark.man { letter-spacing: 1px; border: 3px solid #181a1d; padding: 6px 10px; }
.brand-wordmark.renault { font-size: 17px; letter-spacing: .4px; border-left: 8px solid #ed1c24; padding-left: 10px; }
.brand-card-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand-card-meta strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-card b { align-self: center; }
@keyframes brand-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }

#groups.section.soft {
  background: radial-gradient(circle at 85% 12%, rgba(245, 130, 32, .11), transparent 28%), linear-gradient(180deg, #f6f7f8, #eef0f2);
}
.group-grid { gap: 14px; }
.group-card {
  min-height: 104px;
  padding: 14px 17px;
  border-radius: 17px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fff 0%, #fff 72%, #fff7ef 100%);
  border-color: #e3e5e8;
}
.group-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--orange);
  transform: scaleY(0);
  transition: .2s;
}
.group-card:hover { transform: translateY(-3px); border-color: #ffc18b; box-shadow: 0 16px 36px rgba(20, 22, 24, .08); }
.group-card:hover::before { transform: scaleY(1); }
.group-icon {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #2d3033;
  position: relative;
}
.group-icon i { font-style: normal; }
.group-icon.has-photo { background: #17191b; padding: 5px; }
.group-icon img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 9px; background: #fff; }
.group-card h3 { font-size: 14px; margin-bottom: 5px; }
.group-card small { font-size: 10px; }
.group-card > b { margin-left: auto; color: var(--orange); font-size: 13px; }

.product-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 18px;
  background: #fff;
  transition: transform .35s ease;
}
.product-card:hover .product-photo { transform: scale(1.055); }
.image-fallback { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: #777; font-size: 10px; }
.image-fallback[hidden] { display: none; }
.modal-product-photo { width: 100%; height: 100%; max-height: 390px; object-fit: contain; padding: 28px; background: #fff; }
.modal-fallback { min-height: 390px; }
.image-source { position: absolute; left: 14px; bottom: 14px; background: rgba(17, 18, 20, .9); color: #fff; padding: 7px 10px; border-radius: 7px; font-size: 9px; font-weight: 800; }
.image-source:hover { background: var(--orange); color: #111; }

@media (max-width: 720px) {
  .brand-card { width: 205px; flex-basis: 205px; }
  .group-icon { width: 56px; height: 56px; flex-basis: 56px; }
  .group-card { min-height: 92px; }
  .modal-product-photo { max-height: 270px; }
  .modal-fallback { min-height: 220px; }
}
@media (max-width: 470px) {
  .group-grid { grid-template-columns: 1fr; }
  .brand-grid { mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-track { animation: none; }
  .brand-grid { overflow-x: auto; }
  .product-photo { transition: none; }
}