/* ==========================================================================
   kosu.co — yarış sayfası: "takviminde" (template-parts/race-people.php)
   Yalnızca yarış sayfasında ve kosuco-app 0.6.0+ varken yüklenir; main.css
   bütçesine dahil değildir. Koyu hero üzerinde, Luma tarzı sade.
   ========================================================================== */

.race-people { width: 100%; max-width: 520px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); color: var(--on-dark); }
.race-people[hidden] { display: none; }
.race-people__head { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.72); }
.race-people__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.race-people__names { margin: 0; font-size: 16px; color: #fff; }
.race-people__login { margin: 0; font-size: 15px; }
.race-people__login a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.race-people__login a:hover { color: var(--sun); }

.race-people__stack { display: flex; padding-left: 8px; }
.race-people__av {
	position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin-left: -8px;
	border-radius: 50%; box-shadow: 0 0 0 2px var(--petrol); font: 400 15px/1 var(--font-display);
	background: var(--turq); color: var(--petrol); cursor: default; transition: transform .15s ease;
}
.race-people__av--1 { background: var(--sun); }
.race-people__av--2 { background: var(--mint); }
.race-people__av--3 { background: #F4A3A0; }
.race-people__av--4 { background: #fff; }
.race-people__av:hover { z-index: 2; transform: translateY(-2px); }

/* Ad baloncuğu: yalnızca üyede (data-name yalnızca giriş yapmış kullanıcıya basılır) */
.race-people__av[data-name]::after {
	content: attr(data-name); position: absolute; bottom: calc(100% + 10px); left: 50%;
	padding: 7px 12px; border-radius: 10px; background: #fff; color: var(--ink); white-space: nowrap;
	font: 400 14px/1.2 var(--font); box-shadow: 0 6px 18px rgba(0,0,0,.25);
	opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.race-people__av[data-name]::before {
	content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; width: 10px; height: 10px; background: #fff;
	transform: translate(-50%, 4px) rotate(45deg); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.race-people__av[data-name]:hover::after { opacity: 1; transform: translate(-50%, 0); }
.race-people__av[data-name]:hover::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .race-people__av, .race-people__av::after, .race-people__av::before { transition: none; } }