/* ════════════════════════════════════════════════════════════════
   references.html — sayfa özel ince ayar · REDESIGN v2 (AÇIK TEMA)
   Logo/mektup kartları beyaz + İNCE gri çerçeve, gölgesiz (R6).
   Renkler yalnız §0 paleti.
   ════════════════════════════════════════════════════════════════ */

/* ── Müşteri logoları: 4 kart, boş kolon bırakmadan yayıl ── */
.clients-grid{
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  /* Figürler içerik yüksekliğinde kalır: altyazı 2 satıra sarsa da
     beyaz logo kutuları eşit yükseklikte durur (dengeli kutular) */
  align-items: start;
}

.client-figure{
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Beyaz kutu esner → altyazılar aynı hizada kalır */
.client-figure .logo-grid__item{
  flex: 1;
}

.client-figure figcaption{
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

/* ── İşveren listesi ── */
.employer-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.employer-list li{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-text);
  font-weight: var(--fw-medium);
  transition: border-color var(--transition);
}

.employer-list li:hover{
  border-color: var(--color-line-strong);
}

/* Altın elmas işaretçi (textContent değişse de ::before korunur) */
.employer-list li::before{
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--color-gold);
  border-radius: 1px;
  transform: rotate(45deg);
}

.employer-note{
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

/* ── Referans mektupları ── */
.ref-figure{
  margin: 0;
}

/* Beyaz kutu içinde A4 oranı; taramalar kırpılmadan sığar.
   Kutunun iç boşluğu img'in KENDİ padding'ine taşınır: böylece
   tıklanabilir/odaklanabilir img tüm beyaz kutuyu kaplar
   (gallery.js yalnız .gallery img tıklamalarını dinler). */
.ref-grid .ref-grid__item{
  aspect-ratio: 210 / 297;
  padding: 0;
}

.ref-grid .ref-grid__item img{
  width: 100%;
  height: 100%;
  padding: var(--space-3);
  object-fit: contain;
}

/* gallery.js çıplak img'lere tabindex verir → görünür odak halkası */
.ref-grid img:focus-visible{
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* ── Kırılımlar ── */
@media (max-width: 1024px){
  .employer-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px){
  .employer-list{
    grid-template-columns: 1fr;
  }
}