/* Sertifika seridi — tuval: specs/designs/sertifika-seridi/
 * Yeni token uretilmedi; zemin --mh-surface-bone, baslik --mh-primary,
 * baslik altindaki etiket --mh-on-surface-variant. Olculer TASARIM-DILI.md
 * skalasindan; baslik site geneliyle ayni (28/36 mobil, 32/40 masaustu). */

.cc_t2dowgyg_40bSErSsoY .mh-cert-strip {
  width: 100%;
  background-color: var(--mh-surface-bone);
}

.cc_t2dowgyg_40bSErSsoY .mh-cert-strip__inner {
  padding-block: 2rem;
}

@media (min-width: 768px) {
  .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__inner {
    padding-block: 2.5rem;
  }
}

/* ===== Baslik blogu ===== */
.cc_t2dowgyg_40bSErSsoY .mh-cert-strip__head {
  /* Bosluk `gap` ile veriliyor, ogelerin kendi margin'iyle DEGIL: baslik ile
   * etiketin sirasi degistiginde (2026-09-06) margin'leri yeniden dagitmak
   * gerekmesin. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__head {
    margin-bottom: 1.75rem;
  }
}

.cc_t2dowgyg_40bSErSsoY .mh-cert-strip__eyebrow {
  margin: 0;
  font-family: var(--mh-font-body);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mh-on-surface-variant);
}

/* Olculer site genelindeki bolum basligiyla BIREBIR: ProductSlider,
 * StoreShowcase ve BannerProductRow 28/36 mobil, 32/40 masaustu, w600
 * kullaniyor. Serit onceden 20/28 w500 idi ve komsu bolumlerin yaninda
 * ayriksi duruyordu. */
.cc_t2dowgyg_40bSErSsoY .mh-cert-strip__title {
  margin: 0;
  font-family: var(--mh-font-display);
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 600;
  color: var(--mh-primary);
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__title {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

/* ===== Kayan raf =====
 * Iki OZDES raf yan yana. Her raf KENDI genisligi kadar (-100%) kayiyor;
 * bir tur bitince kopya, orijinalin basladigi noktaya BIREBIR oturur ve
 * sifirlama gorunmez. Bunun calismasi icin raf genisliginin son ogenin
 * aralik payini da icermesi sart — bkz. __item margin-right. */
.cc_t2dowgyg_40bSErSsoY .mh-cert-strip__viewport {
  position: relative;
  overflow: hidden;
  display: flex;
  width: 100%;
}

/* Kenarlarda zemin renginin kendisiyle solma. Logoya filtre uygulanmiyor —
 * belge logolarinin rengi kimliginin parcasi (tuval notu "renk korunur"). */
.cc_t2dowgyg_40bSErSsoY .mh-cert-strip__viewport::before, .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3.5rem;
  z-index: 1;
  pointer-events: none;
}

/* `transparent` = rgba(0,0,0,0) oldugu icin duz bir gecis gri bir sis birakir.
 * Onun yerine AYNI rengin alfasi sifirlanmis hâline geciliyor (color-mix);
 * tema bu fonksiyonu zaten --mh-cta-green-text'te kullaniyor. */
.cc_t2dowgyg_40bSErSsoY .mh-cert-strip__viewport::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--cert-bg, var(--mh-surface-bone)),
    color-mix(in srgb, var(--cert-bg, var(--mh-surface-bone)), transparent 100%)
  );
}

.cc_t2dowgyg_40bSErSsoY .mh-cert-strip__viewport::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--cert-bg, var(--mh-surface-bone)),
    color-mix(in srgb, var(--cert-bg, var(--mh-surface-bone)), transparent 100%)
  );
}

@media (min-width: 1024px) {
  .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__viewport::before, .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__viewport::after {
    width: 6rem;
  }
}

.cc_t2dowgyg_40bSErSsoY .mh-cert-strip__track {
  display: flex;
  align-items: center;
  /* Aralik `gap` ile DEGIL, ogelerin sag margin'i ile veriliyor. Sebep:
   * dongunun kesintisiz olmasi icin bir rafin genisligi kendi aralik payini
   * DA icermeli. `gap` kullanilinca son ogeden sonra bosluk olmuyor, raf
   * genisligi bir aralik eksik kaliyor ve -100%'luk kaydirma kopyayi tam
   * yerine oturtmuyordu; tur bitiminde goruntu basa sicriyordu (2026-09-06). */
  margin: 0;
  padding: 0;
  list-style: none;
  flex: none;
}

.cc_t2dowgyg_40bSErSsoY .mh-cert-strip__item {
  flex: none;
  display: flex;
  align-items: center;
  margin-right: 2.5rem;
}

@media (min-width: 1024px) {
  .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__item {
    margin-right: 3.5rem;
  }
}

.cc_t2dowgyg_40bSErSsoY .mh-cert-strip__img {
  height: 2.5rem;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

@media (min-width: 1024px) {
  .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__img {
    height: 3.5rem;
  }
}

/* ===== Animasyon =====
 * Yalnizca `animate` prop'u aciksa calisir. Uzerine gelince durur;
 * klavyeyle gezinen biri seridin icindeki bir ogeye odaklanirsa da durur. */
@keyframes cc_t2dowgyg_40bSErSsoY_mh-cert-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.cc_t2dowgyg_40bSErSsoY .mh-cert-strip--animated .mh-cert-strip__track {
  animation: cc_t2dowgyg_40bSErSsoY_mh-cert-scroll var(--cert-duration, 40s) linear infinite;
}

/* Uzerine gelince durdurma SADECE gercek isaretleyicisi olan cihazlarda.
 * Dokunmatikte `:hover` bir kez dokunulunca UZERINDE KALIYOR ve baska bir
 * yere dokunulana kadar temizlenmiyor; serit duruyor, tekrar dokunmak da
 * geri baslatmiyordu (2026-09-06). `hover: hover` bunu fare/trackpad'e
 * sinirliyor. */
@media (hover: hover) and (pointer: fine) {
  .cc_t2dowgyg_40bSErSsoY .mh-cert-strip--animated .mh-cert-strip__viewport:hover .mh-cert-strip__track {
    animation-play-state: paused;
  }
}

/* Klavye odagi her cihazda gecerli: kullanici Tab ile geldiginde durmali,
 * Tab ile ayrildiginda kendiliginden devam eder — takilip kalmaz. */
.cc_t2dowgyg_40bSErSsoY .mh-cert-strip--animated .mh-cert-strip__viewport:focus-within .mh-cert-strip__track {
  animation-play-state: paused;
}

/* Animasyon KAPALIYKEN kopya raf gereksiz: gizle, tek raf yatay kaydirilsin. */
.cc_t2dowgyg_40bSErSsoY .mh-cert-strip:not(.mh-cert-strip--animated) .mh-cert-strip__track--clone {
  display: none;
}

.cc_t2dowgyg_40bSErSsoY .mh-cert-strip:not(.mh-cert-strip--animated) .mh-cert-strip__viewport {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cc_t2dowgyg_40bSErSsoY .mh-cert-strip:not(.mh-cert-strip--animated) .mh-cert-strip__viewport::-webkit-scrollbar {
  display: none;
}

/* ===== Hareket azaltilmis =====
 * global.css'teki evrensel sifirlama animasyonu 0.01ms'e cekiyor; bu tek
 * basina YETMEZ — serit yarim bir logonun uzerinde donar. Burada duzen
 * tamamen degistiriliyor: kopya raf gizleniyor, tek raf sarmalanip
 * ortalaniyor. Boylece 15 belgenin hepsi ayni anda ve tam gorunur. */
@media (prefers-reduced-motion: reduce) {
  .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__track--clone {
    display: none;
  }

  .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__viewport {
    overflow: visible;
  }

  .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__viewport::before, .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__viewport::after {
    display: none;
  }

  .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    animation: none;
  }

  /* Sarmalanan izgarada sag margin son ogede bosluk birakip ortalamayi
   * kaydirirdi; burada aralik yine `gap`ten geliyor. */
  .cc_t2dowgyg_40bSErSsoY .mh-cert-strip__item {
    margin-right: 0;
  }
}