/* ══════════ YIL TAHMİNİ ══════════
 * survival.css'in oynatıcı, cevap ve sonuç parçalarını kullanır; burada oyunun rengi (mor),
 * dinleme çubuğu, yıl sürgüsü ve cevaptaki zaman çizgisi var.
 */
body[data-mode="yil"] { --mode: #9B7BFF; --mode-rgb: 155, 123, 255; --mode-hover: #b39bff; }
/* Arka plandaki ışık da oyunun renginde (diğer oyun sayfaları gibi) */
body[data-page="yil"] { --aura-1: var(--violet); --aura-2: var(--pink); --aura-3: var(--cyan); }
.hl-violet { color: var(--violet); }

/* Dinleme çubuğu (30 sn önizleme) */
.yt-listen { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; margin-bottom: 1.6rem; }
.yt-listen i { display: block; height: 100%; width: 0%; background: var(--primary); border-radius: 3px; box-shadow: 0 0 10px var(--primary-glow); }

/* ══════════ SÜRGÜ ══════════ */
.yt-year {
    text-align: center;
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
    text-shadow: 0 0 30px var(--primary-glow);
    margin-bottom: 1rem;
}

.yt-slider-row { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 12px; }

.yt-step {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(var(--mode-rgb), 0.35);
    background: rgba(var(--mode-rgb), 0.08);
    color: var(--primary);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    touch-action: manipulation;
}

.yt-step:hover:not(:disabled) { background: rgba(var(--mode-rgb), 0.18); }
.yt-step:active:not(:disabled) { transform: scale(0.92); }
.yt-step:disabled { opacity: 0.35; cursor: default; }

/* Tutamaç 28 px; çentik yılları tutamacın merkeziyle hizalanır (--p: 0..1) */
#yt-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    background: transparent;
    cursor: pointer;
    margin: 0;
    touch-action: pan-y;
}

#yt-slider::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(var(--mode-rgb), 0.25), rgba(var(--mode-rgb), 0.55));
}

#yt-slider::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(var(--mode-rgb), 0.25), rgba(var(--mode-rgb), 0.55));
}

#yt-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    margin-top: -10px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--primary);
    box-shadow: 0 2px 12px rgba(var(--mode-rgb), 0.6);
}

#yt-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--primary);
    box-shadow: 0 2px 12px rgba(var(--mode-rgb), 0.6);
}

#yt-slider:disabled { cursor: default; opacity: 0.5; }
#yt-slider:focus-visible { outline: none; }
#yt-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--mode-rgb), 0.35); }

.yt-ticks { position: relative; height: 1.4em; margin: 6px 56px 1.4rem; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.yt-ticks span { position: absolute; left: calc(14px + (100% - 28px) * var(--p)); transform: translateX(-50%); font-variant-numeric: tabular-nums; }

#yt-lock { font-size: 1.05rem; padding: 16px; border-radius: 50px; }

/* ══════════ CEVAP ══════════ */
.sv-reveal__badge.near { background: rgba(255,176,32,0.15); color: var(--amber); }

/* Zaman çizgisi: 1960 ── tahmin ── doğru ── 2026; aradaki fark renkli */
.yt-timeline { position: relative; height: 70px; margin: 0.4rem 14px 1.2rem; }
.yt-timeline__line { position: absolute; left: 0; right: 0; top: 34px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); }
.yt-timeline__gap { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: rgba(var(--mode-rgb), 0.55); }

.yt-pin { position: absolute; left: calc(var(--p) * 100%); transform: translateX(-50%); display: grid; justify-items: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yt-pin::before { content: ''; order: 1; width: 14px; height: 14px; border-radius: 50%; }
/* Sabit satır yükseklikleri: doğru yılın noktası çizginin tam üstüne (36 px) otursun */
.yt-pin b { font-size: 0.95rem; font-weight: 800; line-height: 17px; }
.yt-pin small { font-size: 0.66rem; line-height: 13px; color: var(--text-muted); }
/* Doğru yıl çizginin üstünde, tahmin altında (yakın yıllarda yazılar çakışmasın) */
.yt-pin--answer { top: 0; }
.yt-pin--answer b { order: -1; color: var(--primary); }
.yt-pin--answer small { order: -2; }
.yt-pin--answer::before { background: var(--primary); box-shadow: 0 0 12px var(--primary-glow); margin-top: -1px; }
.yt-pin--guess { top: 29px; }
.yt-pin--guess::before { order: 0; background: #fff; border: 3px solid rgba(255,255,255,0.35); box-sizing: border-box; }
.yt-pin--guess b { order: 2; color: #fff; }
.yt-pin--guess small { order: 3; }
.yt-timeline.exact .yt-pin--guess { display: none; }

/* ══════════ SONUÇ ══════════ */
.summary-near { background: rgba(255,176,32,0.06); border-color: rgba(255,176,32,0.18); }
.summary-near .summary-icon { background: var(--amber); }
.summary-near .sv-chip { background: rgba(255,176,32,0.12); color: var(--amber); }
.summary-wrong .sv-chip { background: rgba(255,77,77,0.12); color: var(--error); }

@media (max-width: 520px) {
    .yt-year { font-size: 3rem; }
}