/* =========================================================================
   Marka duvari
   Logolar beyaz zeminli JPG oldugu icin her biri beyaz kart icine alinir;
   kirik beyaz sayfa zemininde kutu izi olusmaz.
   ========================================================================= */

.logo-wall {
  display: grid;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
}

.logo-cell {
  position: relative;
  display: grid;
  place-items: center;
  /* Kaynak logolar 250x156 tuvalde ve bosluk gorselin icinde —
     hucreye ayrica dolgu eklemiyoruz, yoksa logo mikroskobik kaliyor. */
  aspect-ratio: 250 / 156;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.logo-cell:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.logo-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Duvar tek parca okunsun diye logolar durgun, uzerine gelince canlanir. */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.35s var(--ease);
}
.logo-cell:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.04);
}

/* Marka adi — uzerine gelince alttan kayar */
.logo-cell figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.4rem 0.5rem;
  background: var(--dark);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  transform: translateY(101%);
  transition: transform 0.3s var(--ease);
}
.logo-cell:hover figcaption { transform: translateY(0); }

/* Dokunmatik cihazlarda hover yok — adlar hep gorunur, logolar renkli */
@media (hover: none) {
  .logo-cell img { filter: none; opacity: 1; }
  .logo-cell figcaption { position: static; transform: none; background: none; color: var(--ink-dim); padding-top: 0.5rem; }
  .logo-cell { aspect-ratio: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-cell, .logo-cell img, .logo-cell figcaption { transition: none; }
}

/* ---------- Anasayfa / hizmet sayfalari icin ince guven seridi ---------- */
.logo-strip {
  display: flex;
  overflow: hidden;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.logo-strip__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-right: clamp(2rem, 4vw, 3.5rem);
  animation: logo-slide 46s linear infinite;
  will-change: transform;
}
/* Logolarin kendi tuvalinde zaten bosluk var; kucuk boyutta iyice
   kayboluyorlardi — yukseklik ve kontrast artirildi. */
.logo-strip__track img {
  height: clamp(2.4rem, 3.6vw, 3.2rem);
  width: auto;
  filter: grayscale(1) contrast(1.15);
  opacity: 0.78;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.logo-strip:hover .logo-strip__track img { filter: grayscale(0); opacity: 1; }

@keyframes logo-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip__track { animation: none; flex-wrap: wrap; }
}