/* References section: marquee of wordmarks. NAMES ARE PLACEHOLDERS (see index.html) */
.refs{overflow:hidden}
.refs__lead{margin-top:18px;color:var(--mute);max-width:56ch;line-height:1.6;font-size:clamp(16px,1.5vw,20px)}
.refs__rows{margin-top:clamp(40px,6vw,72px);display:grid;gap:clamp(14px,2vw,22px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.refs__track{display:flex;width:max-content;animation:refs-left 48s linear infinite}
.refs__track.is-rev{animation-name:refs-right;animation-duration:56s}
.refs__rows:hover .refs__track{animation-play-state:paused}
.refs__list{display:flex;gap:clamp(14px,2vw,22px);padding-right:clamp(14px,2vw,22px);list-style:none}
@keyframes refs-left{to{transform:translateX(-50%)}}
@keyframes refs-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.wm{flex:none;display:flex;align-items:center;gap:14px;padding:clamp(18px,2.2vw,28px) clamp(22px,3vw,40px);
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  color:rgba(244,246,248,.55);font-family:var(--display);font-size:clamp(17px,1.9vw,26px);white-space:nowrap;
  transition:color .3s,border-color .3s,background .3s}
.wm::before{content:"";flex:none;width:.9em;height:.9em;background:currentColor;opacity:.9;transition:background .3s}
.wm:hover{color:var(--ink);border-color:rgba(228,27,32,.6);background:linear-gradient(180deg,rgba(228,27,32,.12),rgba(228,27,32,0))}
.wm:hover::before{background:var(--red)}

/* each "logo" gets its own glyph and type treatment so the row reads like real marks */
.wm--1{font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.wm--1::before{border-radius:50%}
.wm--2{font-weight:500;letter-spacing:-.02em}
.wm--2::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
.wm--3{font-weight:800;font-style:italic;letter-spacing:-.03em}
.wm--3::before{clip-path:polygon(0 0,100% 0,60% 100%,0 100%)}
.wm--4{font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:.82em}
.wm--4::before{border-radius:50%;background:none;border:.16em solid currentColor}
.wm--5{font-weight:500;font-style:italic}
.wm--5::before{transform:rotate(45deg);width:.7em;height:.7em}
.wm--6{font-weight:800;letter-spacing:.02em}
.wm--6::before{clip-path:polygon(0 100%,0 40%,50% 0,100% 40%,100% 100%)}
.wm--7{font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.88em}
.wm--7::before{width:1.1em;height:.28em}
.wm--8{font-weight:500;letter-spacing:.06em}
.wm--8::before{clip-path:polygon(0 0,100% 50%,0 100%)}

@media (max-width:760px){.refs__track{animation-duration:36s}.refs__track.is-rev{animation-duration:42s}}

/* no motion: static wrapped grid, hide the duplicated loop copy */
@media (prefers-reduced-motion:reduce){
  .refs__rows{-webkit-mask-image:none;mask-image:none}
  .refs__track,.refs__track.is-rev{animation:none;width:auto;flex-wrap:wrap}
  .refs__list{flex-wrap:wrap;padding-right:0}
  .refs__list[aria-hidden="true"]{display:none}
}

/* wordmark linkleri (vaka sayfalarina): tum chip tiklanir, odak halkasi chip uzerinde */
.wm{position:relative}
.wm a{color:inherit}
.wm a::after{content:"";position:absolute;inset:0}
.wm a:focus-visible{outline:0!important;box-shadow:none}
.wm:has(a:focus-visible){outline:3px solid var(--red-text);outline-offset:2px;color:var(--ink)}
.wm:has(a:focus-visible)::before{background:var(--red)}
.refs__more{margin-top:clamp(28px,4vw,48px)}

/* DUZELTME F (WCAG 2.2.2 / 2.4.7): klavye odagi marquee'yi durdurur; :has() yoksa odak halkasi dogrudan baglantida */
.refs__rows:focus-within .refs__track{animation-play-state:paused}
.refs__track.is-paused{animation-play-state:paused}
@supports not selector(:has(*)){
  .wm a:focus-visible{outline:3px solid var(--red-text,#ef3a3f)!important;outline-offset:2px;box-shadow:none}
}
/* Durdur/Oynat dugmesi: JS gostermezse [hidden]; hareket azaltilmissa zaten durgun */
.refs__pause{display:inline-flex;align-items:center;margin-top:22px;background:none;border:1px solid var(--line);color:var(--mute);font:600 12px var(--display);letter-spacing:.12em;padding:10px 16px;min-height:44px;cursor:pointer;transition:color .2s,border-color .2s}
.refs__pause[hidden]{display:none}
.refs__pause:hover,.refs__pause[aria-pressed="true"]{color:var(--ink);border-color:var(--red)}
@media (prefers-reduced-motion:reduce){.refs__pause{display:none}}