/* Bileşen: Kanıt şeridi — sayılar + iş ortakları.
   BÜYÜK HARF text-transform ile yapılır, içerik büyük harfe çevrilmez:
   Türkçe "i" doğru büyür (İ) ve ekran okuyucu kelimeyi kelime olarak okur. */

.ar-kanit {
  --ar-kanit-hiz: 42s;

  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ar-bg) 0%, #fff 100%);
}

/* --- Sayılar --- */

.ar-kanit__sayilar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(22px, 3vw, 48px);
  max-width: var(--ar-container, 1280px);
  margin-inline: auto;
  padding: clamp(46px, 6vw, 82px) var(--ar-gutter, 24px);
}

.ar-kanit__oge {
  position: relative;
  text-align: center;
}

/* Ayraç çizgi — son öğede yok. İki sayıyı ayırmak için kutu çizmek yerine
   ince bir dikey çizgi; daha az gürültü. */
.ar-kanit__oge::after {
  position: absolute;
  top: 12%;
  right: calc(clamp(22px, 3vw, 48px) / -2);
  width: 1px;
  height: 76%;
  content: "";
  background: linear-gradient(180deg, transparent, var(--ar-border) 30%, var(--ar-border) 70%, transparent);
}

.ar-kanit__oge:last-child::after { display: none; }

.ar-kanit__deger {
  display: block;
  font-family: var(--ar-font-heading);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ar-navy);
  letter-spacing: -0.03em;
  /* Sayarken genişlik oynamasın; 9 ile 1 aynı yeri kaplasın. */
  font-variant-numeric: tabular-nums;
}

.ar-kanit__etiket {
  display: block;
  margin-top: 12px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ar-muted);
  text-transform: uppercase;
}

/* --- İş ortakları --- */

.ar-kanit__ortaklar {
  padding: 0 0 clamp(40px, 5vw, 68px);
  overflow: hidden;
  border-top: 1px solid var(--ar-border);
  /* Kenarlarda solma: şerit ekran dışına çıkarken sert kesilmesin. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Üst başlık maskeden etkilenmesin — ortada durduğu için zaten net,
   ama maske kapsayıcıda olduğu için kenarları soluyordu. */
.ar-kanit__ustbaslik { mask-image: none; }

.ar-kanit__ustbaslik {
  margin: 0;
  padding: clamp(26px, 3.4vw, 40px) var(--ar-gutter, 24px) clamp(20px, 2.6vw, 30px);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ar-muted);
  text-align: center;
  text-transform: uppercase;
}

/* Kenarlarda solma: şerit ekran dışına çıkarken sert kesilmesin. */
/* Şerit JS ile İKİYE kopyalanır; kopya KARDEŞ olarak eklenir. Sarmalayıcı
   flex olmazsa iki şerit ALT ALTA düşer ve kayma iki satır gibi görünür
   (ölçüldü). Flex + max-content ikisini yan yana dizer; -50% kaydırmak
   tam olarak bir şerit boyu eder ve döngü kesintisiz olur. */
.ar-kanit__ray-kap {
  display: flex;
  width: max-content;
}

.ar-kanit__ray {
  display: flex;
  flex: 0 0 auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  width: max-content;
  padding-inline: calc(clamp(32px, 5vw, 72px) / 2);
}

.ar-kanit__ortak {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ar-kanit__ad {
  font-family: var(--ar-font-heading);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ar-navy);
  white-space: nowrap;
  text-transform: uppercase;
  transition: color var(--ar-transition);
}

.ar-kanit__ortak:hover .ar-kanit__ad { color: var(--ar-green); }

.ar-kanit__logo {
  width: auto;
  max-width: 160px;
  height: auto;
  max-height: 42px;
  /* Renkli logo kalabalığı marka paletini bozuyor; tek renge indirilir,
     üzerine gelince gerçek rengine döner. */
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--ar-transition), opacity var(--ar-transition);
}

.ar-kanit__ortak:hover .ar-kanit__logo { filter: none; opacity: 1; }

/* --- Kayma --- */

/* Şerit JS ile İKİYE KOPYALANIR (bkz. motion.js); -50% kaydırmak kesintisiz
   döngü verir. Kopya yoksa animasyon boşluk bırakır, o yüzden kayma yalnızca
   kopyalanmış şeritte açılır. */
.ar-kanit__ortaklar.is-kayar .ar-kanit__ray-kap {
  animation: ar-kanit-kay var(--ar-kanit-hiz) linear infinite;
}

/* Üzerine gelince durur — okumak isteyen bir ad yakalayabilsin. */
.ar-kanit__ortaklar.is-kayar:hover .ar-kanit__ray-kap { animation-play-state: paused; }

@keyframes ar-kanit-kay {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ar-kanit__ortaklar.is-kayar .ar-kanit__ray-kap { animation: none; width: auto; }

  /* Kayma kapalıyken şerit ortalanmalı; sola yaslı kalırsa sağı boş görünür. */
  .ar-kanit__ray { flex-wrap: wrap; justify-content: center; width: auto; }
}

@media (width <= 720px) {
  /* Dar ekranda dikey ayraç çizgileri karmaşa yaratıyor. */
  .ar-kanit__oge::after { display: none; }

  .ar-kanit__sayilar { grid-template-columns: repeat(2, 1fr); }
}