/* Derdiman – Infinite Marquee. Yalnızca CSS; tüm sınıflar .dd-marquee ile başlar. */
.dd-marquee {
  --dd-m-ink: var(--ink, #1B1D22);
  --dd-m-silver: #A9ADB6;
  --dd-m-hiz: 60s;
  position: relative; overflow: hidden; padding: clamp(1.2rem, 2.4vw, 1.9rem) 0;
  border-top: 1px solid var(--line, #D4D7DD); border-bottom: 1px solid var(--line, #D4D7DD);
  background: var(--bg, #F3F4F6); color: var(--dd-m-ink);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.dd-marquee__track { display: flex; width: max-content; animation: dd-marquee-akis var(--dd-m-hiz) linear infinite; will-change: transform; }
.dd-marquee__grup { display: flex; flex: none; align-items: center; min-width: 100vw; justify-content: space-around; margin: 0; padding: 0; list-style: none; }
.dd-marquee__oge { display: inline-flex; align-items: center; white-space: nowrap; padding: 0 clamp(1.2rem, 2.4vw, 2.2rem); font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.2; letter-spacing: -.005em; }
/* ayraç: ince gümüş eşkenar dörtgen */
.dd-marquee__oge::after { content: ""; flex: none; width: .42rem; height: .42rem; margin-left: clamp(1.2rem, 2.4vw, 2.2rem); background: var(--dd-m-silver); transform: rotate(45deg); }
@keyframes dd-marquee-akis { to { transform: translateX(-50%); } }

/* fare ya da klavye odağı varken durur */
.dd-marquee:hover .dd-marquee__track, .dd-marquee:focus-within .dd-marquee__track { animation-play-state: paused; }

@media (max-width: 640px) { .dd-marquee { --dd-m-hiz: 48s; } }
/* hareket azaltma: akış durur, alanlar kaydırılabilir şerit olur */
@media (prefers-reduced-motion: reduce) {
  .dd-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .dd-marquee__track { animation: none; }
  .dd-marquee__grup[aria-hidden="true"] { display: none; }
  .dd-marquee__grup { min-width: 0; }
}