/* [ttw-referanslar] Referanslarimiz — anasayfa kayan serit + 4'lu logo gridi
   Sablonlar: _referanslar_serit.html, _referanslar_grid.html, referanslarimiz.html
   Renk dili Mezunlarimiz bolumuyle ayni: lacivert #0A102E, vurgu #E8402A, cizgi #d7deee */

:root {
  --ttwref-ink: #0A102E;
  --ttwref-ink-2: #1d2433;
  --ttwref-ink-3: #5b6475;
  --ttwref-accent: #E8402A;
  --ttwref-line: #e3e8f4;
  --ttwref-line-2: #d7deee;
  --ttwref-paper: #ffffff;
  --ttwref-paper-2: #f6f8fc;
  --ttwref-logo-h: 68px;          /* seritte logo yuksekligi (hepsi esit) */
  --ttwref-gap: 72px;             /* seritte logolar arasi bosluk */
  --ttwref-speed: 120s;           /* bir tur suresi */
}

/* ---------- Baslik (Mezunlarimiz ile ayni ritim) ---------- */
.ttwref-baslik {
  display: flex; align-items: baseline; gap: 16px;
  max-width: 1140px; margin: 0 auto; padding: 0 15px;
}
.ttwref-baslik .ttwref-kod {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
  font-size: 12px; letter-spacing: .14em; color: var(--ttwref-accent);
  text-transform: uppercase; white-space: nowrap;
}
.ttwref-baslik h4, .ttwref-baslik h2 {
  margin: 0; font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: -0.025em; font-weight: 800; color: var(--ttwref-ink);
}
.ttwref-baslik::after { content: ""; flex: 1; height: 1px; background: var(--ttwref-line-2); align-self: center; }

/* ---------- Anasayfa: beyaz zeminli kayan serit ---------- */
.ttwref-section {
  background: var(--ttwref-paper);
  padding: 56px 0 60px;
}
.ttwref-section .ttwref-baslik { margin-bottom: 34px; }
/* beyaz alan Mezunlarimiz'in mavi zeminine bitisik dursun (Bootstrap my-5 !important'i ezilir) */
.ttwref-section ~ .mezunlarimiz-section.my-5 { margin-top: 0 !important; }

.ttwref-serit {
  position: relative; overflow: hidden; width: 100%;
  padding: 10px 0;
  /* kenarlarda yumusak erime: logolar sayfaya "girip cikiyor" hissi */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.ttwref-ray {
  display: flex; align-items: center; width: max-content;
  gap: var(--ttwref-gap);
  padding-right: var(--ttwref-gap);     /* iki kopya arasi bosluk, dikis gorunmez */
  animation: ttwref-kay var(--ttwref-speed) linear infinite;
  will-change: transform;
}
.ttwref-logo {
  flex: 0 0 auto; display: block;
  height: var(--ttwref-logo-h);
  width: auto;                           /* tum dosyalar 480x200 → genislik de esit */
  object-fit: contain;
  -webkit-user-drag: none; user-select: none;
}
@keyframes ttwref-kay {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* ray iki kopya icerir; yarisi = tam tur */
}
/* hareket istemeyen kullanici: serit durur, yatay kaydirilabilir */
@media (prefers-reduced-motion: reduce) {
  .ttwref-serit { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ttwref-ray { animation: none; }
  .ttwref-ray .ttwref-kopya { display: none; }
}

/* ---------- 4'lu grid (Kurumsal Egitim Cozumleri + Referanslarimiz sayfasi) ---------- */
.ttwref-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  max-width: 1140px; margin: 0 auto; padding: 0 15px;
}
.ttwref-kart {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 26px 18px 20px; min-height: 172px;
  background: var(--ttwref-paper); border: 1px solid var(--ttwref-line); border-radius: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ttwref-kart:hover { transform: translateY(-3px); border-color: var(--ttwref-line-2); box-shadow: 0 12px 30px rgba(10,16,46,.10); }
.ttwref-kart-logo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 216px; height: 90px;
}
.ttwref-kart-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ttwref-kart-ad {
  margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center;
  color: var(--ttwref-ink-2); letter-spacing: -0.005em;
}

/* Kurumsal Egitim Cozumleri sayfasindaki blok */
.ttwref-blok { background: var(--ttwref-paper-2); padding: 56px 0 64px; margin-top: 40px; }
.ttwref-blok .ttwref-baslik { margin-bottom: 10px; }
.ttwref-aciklama {
  max-width: 1140px; margin: 0 auto 30px; padding: 0 15px;
  font-size: 15px; line-height: 1.6; color: var(--ttwref-ink-3);
}

/* Referanslarimiz sayfasi */
.ttwref-sayfa { padding: 48px 0 72px; background: var(--ttwref-paper); }
.ttwref-sayfa .ttwref-baslik { margin-bottom: 10px; }
.ttwref-cta {
  max-width: 1140px; margin: 44px auto 0; padding: 28px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--ttwref-ink); color: #fff; border-radius: 16px;
}
.ttwref-cta p { margin: 0; font-size: 16px; line-height: 1.5; }
.ttwref-cta strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 4px; }
.ttwref-cta .btn {
  background: var(--ttwref-accent); color: #fff; border: 0; border-radius: 10px;
  padding: 12px 22px; font-weight: 700; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ttwref-cta .btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(232,64,42,.35); }
.ttwref-cta .btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- Duyarli ---------- */
@media (max-width: 991.98px) {
  .ttwref-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  :root { --ttwref-logo-h: 60px; --ttwref-gap: 48px; --ttwref-speed: 90s; }
  .ttwref-section { padding: 40px 0 44px; }
  .ttwref-section .ttwref-baslik { margin-bottom: 24px; }
  .ttwref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ttwref-kart { min-height: 150px; padding: 20px 14px 16px; }
  .ttwref-kart-logo { height: 72px; }
  .ttwref-kart-ad { font-size: 12px; }
  .ttwref-cta { padding: 22px 18px; }
}
@media (max-width: 420px) {
  .ttwref-baslik { flex-wrap: wrap; gap: 6px 12px; }
  .ttwref-baslik::after { display: none; }
}