/* ════════════════════════════════════════════════════════════════
   quality-safety.html — sayfa özel ince ayar · R9 CİLALAMA
   Ortak bileşen tabanları (.photo-band, .mosaic, .stat-cards)
   core components.css + responsive.css'te; burada YALNIZ sayfa
   varyantları ve ince ayar. Renkler yalnız §0 paleti.
   ════════════════════════════════════════════════════════════════ */

/* ── Foto bandı sarmalayıcı (page-hero'nun hemen altı) ─────────── */
.qs-band-wrap{
  padding-top: var(--space-7);
  background: var(--color-bg);
}

/* ── Sertifikalar: 2 GENİŞ yatay kart (R9.2 — büyütülmüş) ────────
   .cert-grid.gallery (0,2,0): responsive.css'in ≤768 auto-fill
   düzenini de geçersiz kılar — her genişlikte TEK kolon.          */
.cert-grid.gallery{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-7);
}

.qs-cert{
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(0, 3fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: 0;
  padding: clamp(24px, 3.5vw, 48px);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 12px;
}

/* Belirgin çerçeveli tarama: beyaz paspartu + çift çizgi + gölge.
   .qs-cert öneki (0,2,0): core .gallery img (cover/%100 yükseklik)
   kuralını geçersiz kılar — tarama oranı korunur.                 */
.qs-cert .qs-cert__img{
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  justify-self: center;
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-line-strong);
  outline: 1px solid var(--color-line-soft);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

/* gallery.js çıplak img'lere tabindex verir → görünür odak halkası
   (paspartu çerçevesinin dış çizgisi yerine belirgin altın halka)  */
.qs-cert .qs-cert__img:focus-visible{
  outline: 2px solid var(--color-gold);
  outline-offset: 6px;
}

/* Core .cert-grid figcaption (ortalanmış küçük yazı) burada geniş
   kart düzenine döner — özgüllük için .qs-cert ile birlikte. */
.qs-cert .qs-cert__caption{
  margin-top: 0;
  text-align: left;
  font-size: var(--text-base);
  color: var(--color-text);
}

.qs-cert__title{
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-graphite);
}

.qs-cert__text{
  margin-top: var(--space-4);
  max-width: 52ch;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ── İSG damalı bloğu — sayfa varyantı (3 alt başlıklı panel) ──── */
.mosaic--qs .mosaic__panel{
  gap: var(--space-6);
}

.mosaic--qs .mosaic__subtitle{
  font-size: 1.125rem;
  font-weight: var(--fw-extrabold);
  color: var(--color-gold-soft);
}

.mosaic--qs .mosaic__item .mosaic__text{
  margin-top: var(--space-2);
}

/* ── Süre ve kalite kontrolü metin bloğu ── */
.qs-text{
  max-width: 780px;
  margin-top: var(--space-6);
}

.qs-text p + p{
  margin-top: var(--space-5);
}

/* ── Kırılımlar (gövde yatay taşma YASAK) ── */
@media (max-width: 768px){
  .qs-band-wrap{
    padding-top: var(--space-6);
  }

  .qs-cert{
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .qs-cert .qs-cert__img{
    max-width: 320px;
    justify-self: start;
  }
}