/* Tarih bölümü: mercek ipucu ve zaman çizelgesi */

.lens-hint {
  font-family: var(--f-display);
  font-size: 0.85rem;
  color: var(--ink-2);
  transition: opacity 0.4s;
}
.lens-hint.gone { opacity: 0; }

/* ---------- Zaman çizelgesi ---------- */
.tl { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.tl-detail {
  --c: var(--blue);
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 52px);
  align-items: center;
  padding: clamp(16px, 3vh, 36px) clamp(18px, 3.5vw, 52px);
  overflow: hidden;
}
.tl-watermark {
  position: absolute;
  right: -0.03em;
  bottom: -0.24em;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(8rem, 22vw, 20rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(116, 169, 255, 0.1);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.tl-year {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variation-settings: "opsz" 96;
  color: var(--c);
  text-shadow: 0 0 40px color-mix(in srgb, var(--c) 35%, transparent);
  white-space: nowrap;
  position: relative;
}
.tl-body { position: relative; max-width: 62ch; }
.tl-kind {
  display: flex; align-items: center; gap: 0.5em;
  margin: 0 0 0.45rem;
  font-family: var(--f-display); font-size: 0.85rem; color: var(--c);
}
.tl-kind i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.tl-body h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); margin: 0 0 0.6rem; }
.tl-text { margin: 0; color: var(--ink-2); line-height: 1.62; }

.tl-detail.swap .tl-year { animation: tlIn 0.5s cubic-bezier(.2, .7, .2, 1) both; }
.tl-detail.swap .tl-body { animation: tlIn 0.5s 0.06s cubic-bezier(.2, .7, .2, 1) both; }
.tl-detail.swap .tl-watermark { animation: tlFade 0.8s ease both; }
@keyframes tlIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tlFade { from { opacity: 0; } to { opacity: 1; } }

.tl-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.tl-track { position: relative; height: clamp(190px, 30vh, 250px); min-width: 900px; margin: 0 16px; }

.tl-axis { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--line); }
.tl-axis.dash { background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px); }
.tl-fillline {
  position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  transition: width 0.6s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.tl-note {
  position: absolute; bottom: 4px; transform: translateX(-50%);
  font-family: var(--f-display); font-size: 0.72rem; color: var(--muted); white-space: nowrap;
}
.tl-band {
  position: absolute; top: 12px; bottom: 22px;
  background: rgba(116, 169, 255, 0.09);
  border-left: 1px dashed rgba(116, 169, 255, 0.35);
  border-right: 1px dashed rgba(116, 169, 255, 0.35);
}
.tl-band span {
  position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%);
  font-family: var(--f-display); font-size: 0.72rem; color: var(--blue); white-space: nowrap;
}

.tl-ev {
  position: absolute; top: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border: 0; padding: 0; background: none;
  color: var(--ink-2);
  cursor: pointer;
  z-index: 1;
}
.tl-ev::before {
  content: ""; position: absolute; left: 50%; width: 1px; height: var(--stem);
  background: var(--c); opacity: 0.35;
}
.tl-ev[data-side="up"]::before { bottom: 50%; }
.tl-ev[data-side="down"]::before { top: 50%; }
.tl-dot {
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid var(--bg-2);
  box-shadow: 0 0 0 1px var(--c), 0 0 14px var(--c);
  transition: transform 0.3s cubic-bezier(.2, .7, .2, 1);
}
.tl-lab {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: var(--f-num); font-size: 0.86rem; white-space: nowrap;
  transition: color 0.2s;
}
.tl-ev[data-side="up"] .tl-lab { bottom: calc(50% + var(--stem) + 2px); }
.tl-ev[data-side="down"] .tl-lab { top: calc(50% + var(--stem) + 2px); }
.tl-ev:hover .tl-dot { transform: scale(1.4); }
.tl-ev:hover .tl-lab { color: var(--ink); }
.tl-ev.passed .tl-dot { opacity: 0.7; }
.tl-ev.on { z-index: 2; }
.tl-ev.on .tl-dot { transform: scale(1.5); opacity: 1; }
.tl-ev.on .tl-lab { color: var(--ink); font-weight: 600; }
.tl-ev.on::before { opacity: 0.8; }
.tl-ev.on::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -8px 0 0 -8px;
  border-radius: 50%; border: 1.5px solid var(--c);
  animation: tlRing 1.8s ease-out infinite;
}
@keyframes tlRing { from { transform: scale(1); opacity: 0.9; } to { transform: scale(4); opacity: 0; } }

.tl-count { font-family: var(--f-num); font-size: 0.8rem; color: var(--ink-2); }

@media (max-width: 860px) {
  .tl-detail { grid-template-columns: 1fr; align-content: center; }
  .tl-year { font-size: 3.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-ev.on::after { animation: none; }
  .tl-detail.swap .tl-year, .tl-detail.swap .tl-body, .tl-detail.swap .tl-watermark { animation: none; }
}