/* =====================================================================
   Zaman tüneli (Views/Shared/_ZamanTuneli.cshtml) + dönem çizimleri
   _Layout tüm sayfalarda yükler. Çekirdek dosyadır.
   ===================================================================== */
.tl { position: relative; background: var(--bg); }
.tl--dark { background: var(--bg-dark); color: var(--on-dark); }
.tl__sticky { padding: clamp(72px, 9vw, 120px) 0; }
.tl.is-pinned .tl__sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); min-height: 620px; padding: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.tl__head { margin-bottom: 36px; }
.tl__intro { color: var(--muted); max-width: 640px; margin-top: 12px; }
.tl--dark .tl__intro { color: var(--on-dark-muted); }
.tl__nav { display: flex; gap: 6px; margin-top: 28px; flex-wrap: wrap; }
.tl__nav button { border: 0; background: none; padding: 6px 12px; border-radius: 980px; font-size: 15px; color: var(--muted); transition: color .2s, background .2s; }
.tl__nav button:hover { color: var(--ink); }
.tl__nav button.is-active { background: var(--ink); color: #fff; }
.tl--dark .tl__nav button:hover { color: #fff; }
.tl--dark .tl__nav button.is-active { background: #fff; color: #000; }
.tl__progress { height: 2px; background: var(--line-soft); margin-top: 18px; border-radius: 2px; overflow: hidden; }
.tl__progress i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.tl--dark .tl__progress { background: var(--line-dark); }
.tl--dark .tl__progress i { background: #fff; }
.tl__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tl__viewport::-webkit-scrollbar { display: none; }
.tl.is-pinned .tl__viewport { overflow: visible; scroll-snap-type: none; }
.tl__track { list-style: none; margin: 0; display: flex; gap: 24px; padding: 4px max(var(--gutter), calc((100vw - var(--wide)) / 2)) 24px; will-change: transform; }
.tl__item {
    flex: 0 0 min(1000px, 88vw); scroll-snap-align: center; display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center;
    background: var(--bg-alt); border-radius: var(--r-lg); padding: 48px 48px 48px 56px; min-height: 440px; opacity: .4; transition: opacity .6s var(--ease);
}
.tl--dark .tl__item { background: var(--bg-dark-2); }
.tl__item.is-active { opacity: 1; }
.tl__year { font-size: clamp(64px, 8.4vw, 128px); line-height: .92; font-weight: 600; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.tl__title { font-size: clamp(21px, 2vw, 28px); line-height: 1.14; margin: 22px 0 10px; }
.tl__desc { color: var(--muted); font-size: 17px; max-width: 420px; }
.tl--dark .tl__desc { color: var(--on-dark-muted); }
.tl__art { display: flex; justify-content: center; align-items: center; min-width: 0; }
@media (max-width: 834px) {
    .tl__item { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; min-height: 0; }
    .tl__year { font-size: 72px; }
}

/* 1986 — defter */
.era-ledger { width: 100%; max-width: 440px; }
.era-ledger__page {
    background: #fbf7ec repeating-linear-gradient(#fbf7ec 0 29px, #cfd9e6 29px 30px); border-radius: 4px 10px 10px 4px; padding: 26px 22px 18px 58px; position: relative;
    transform: rotate(-1.6deg); box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 18px 40px rgba(60, 40, 10, .14); font-family: "Segoe Print", "Bradley Hand", "Noteworthy", "Comic Sans MS", cursive; color: #243a73;
}
.era-ledger__page::before { content: ""; position: absolute; left: 44px; top: 0; bottom: 0; width: 1.5px; background: #e39a9a; }
.era-ledger__page::after { content: ""; position: absolute; left: 14px; top: 20px; bottom: 20px; width: 10px; background: radial-gradient(circle, #e2dccb 45%, transparent 48%) 0 0 / 10px 38px repeat-y; }
.era-ledger__title { font-size: 17px; margin: -4px 0 6px; transform: rotate(-.6deg); }
.era-ledger__row { display: grid; grid-template-columns: 40px 1fr 66px 66px; gap: 8px; font-size: 13px; line-height: 30px; height: 30px; white-space: nowrap; }
.era-ledger__row span { overflow: hidden; }
.era-ledger__row span:nth-child(3), .era-ledger__row span:nth-child(4) { text-align: right; }
.era-ledger__row--head { font-family: Georgia, "Times New Roman", serif; font-size: 10.5px; color: #7a6b54; letter-spacing: .04em; text-transform: uppercase; }
.era-ledger__row--sum { border-top: 1.5px solid #243a73; margin-top: 2px; font-weight: 700; }
.era-ledger__row:nth-child(4) { transform: translateX(2px) rotate(.3deg); }
.era-ledger__row:nth-child(6) { transform: translateX(-1px) rotate(-.4deg); }

/* 2002 — Windows XP dönemi pencere */
.era-xp { width: 100%; max-width: 500px; background: #ece9d8; border: 1px solid #0831d9; border-radius: 8px 8px 3px 3px; overflow: hidden; font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-size: 11px; letter-spacing: 0; color: #000; box-shadow: 0 18px 40px rgba(0, 20, 80, .22); }
.era-xp__title { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 5px 0 8px; color: #fff; font-weight: 700; font-size: 12px; text-shadow: 1px 1px #0f1089; background: linear-gradient(#0997ff 0%, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7 100%); white-space: nowrap; overflow: hidden; }
.era-xp__logo { width: 14px; height: 14px; border-radius: 3px; background: #e3000f; box-shadow: inset 0 0 0 2px #fff; flex: none; }
.era-xp__btns { margin-left: auto; display: flex; gap: 2px; }
.era-xp__btns i { width: 21px; height: 21px; border-radius: 3px; border: 1px solid #fff; display: grid; place-items: center; font-style: normal; font-size: 11px; line-height: 1; background: linear-gradient(#3c8cff, #1b5de7); }
.era-xp__btns i.x { background: linear-gradient(#e87b5f, #c6391a); }
.era-xp__menu { display: flex; gap: 12px; padding: 3px 8px; border-bottom: 1px solid #aca899; white-space: nowrap; overflow: hidden; }
.era-xp__tools { display: flex; gap: 4px; padding: 4px 6px; border-bottom: 1px solid #aca899; }
.era-xp__tools b { font-weight: 400; padding: 3px 9px; border: 1px solid #aca899; border-radius: 3px; background: linear-gradient(#fff, #ece9d8); }
.era-xp__grid { margin: 6px; background: #fff; border: 1px solid #7f9db9; }
.era-xp__tr { display: grid; grid-template-columns: 88px 1fr 76px; }
.era-xp__tr span { padding: 3px 6px; border-right: 1px solid #ece9d8; border-bottom: 1px solid #f1efe2; white-space: nowrap; overflow: hidden; }
.era-xp__tr span:last-child { text-align: right; }
.era-xp__th span { background: linear-gradient(#fff, #ebeadb); border-right: 1px solid #c7c5b2; border-bottom: 2px solid #d6d3ce; }
.era-xp__tr.is-sel span { background: #316ac5; color: #fff; }
.era-xp__status { display: flex; border-top: 1px solid #aca899; }
.era-xp__status span { padding: 3px 8px; border-right: 1px solid #aca899; white-space: nowrap; }

/* 2012 — şerit menülü masaüstü uygulaması */
.era-win { width: 100%; max-width: 520px; background: #fff; border: 1px solid #6d8fb8; font-family: "Segoe UI", Tahoma, sans-serif; font-size: 11px; letter-spacing: 0; color: #1e1e1e; box-shadow: 0 18px 40px rgba(20, 50, 90, .2); }
.era-win__title { height: 30px; display: flex; align-items: center; padding: 0 0 0 10px; font-size: 12px; background: #dbe8f7; color: #1e395b; }
.era-win__btns { margin-left: auto; display: flex; height: 100%; }
.era-win__btns i { width: 34px; height: 100%; display: block; position: relative; }
.era-win__btns i::after { content: ""; position: absolute; left: 12px; top: 14px; width: 10px; height: 1.5px; background: #1e395b; }
.era-win__btns i.x { background: #c7412c; }
.era-win__btns i.x::after { background: #fff; transform: rotate(45deg); }
.era-win__btns i.x::before { content: ""; position: absolute; left: 12px; top: 14px; width: 10px; height: 1.5px; background: #fff; transform: rotate(-45deg); }
.era-win__tabs { display: flex; background: #dbe8f7; padding: 0 6px; }
.era-win__tabs span { padding: 5px 12px; color: #1e395b; }
.era-win__tabs span.is-on { background: #fff; border: 1px solid #b9c9da; border-bottom: 0; border-radius: 3px 3px 0 0; }
.era-win__ribbon { display: flex; gap: 2px; padding: 8px 6px; border-bottom: 1px solid #b9c9da; background: #fff; }
.era-win__ribbon b { font-weight: 400; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; line-height: 1.2; padding: 4px 2px; border-radius: 3px; }
.era-win__ribbon b:first-child { background: #fde8a6; box-shadow: inset 0 0 0 1px #e9c35f; }
.era-win__ribbon i { font-size: 20px; color: #2b5797; }
.era-win__body { display: grid; grid-template-columns: 116px 1fr; min-height: 150px; }
.era-win__side { background: #f1f5fb; border-right: 1px solid #d3dfee; padding: 6px 0; display: flex; flex-direction: column; }
.era-win__side span { padding: 4px 10px; }
.era-win__side span.is-on { background: #cde3f8; color: #0b3f7a; }
.era-win__grid { padding: 6px; min-width: 0; }
.era-win__tr { display: grid; grid-template-columns: 70px 1fr 70px; }
.era-win__tr span { padding: 4px 6px; border-bottom: 1px solid #edf1f6; white-space: nowrap; overflow: hidden; }
.era-win__tr span:last-child { text-align: right; }
.era-win__th span { color: #4c607a; font-weight: 600; border-bottom: 1px solid #c9d6e6; }
.era-win__tr.is-sel span { background: #cde8ff; }

/* 2026 — bulut */
.era-cloud { position: relative; width: 100%; max-width: 520px; padding: 0 64px 20px 0; }
.era-cloud__browser { width: 100%; }
.era-cloud__app { display: grid; grid-template-columns: 38px 1fr; aspect-ratio: 16 / 10; }
.era-cloud__side { background: #0a1630; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 10px; }
.era-cloud__side b { width: 16px; height: 16px; border-radius: 5px; background: #e3000f; margin-bottom: 6px; }
.era-cloud__side i { width: 14px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.era-cloud__side i.is-on { background: #fff; }
.era-cloud__main { padding: 12px 14px; background: #f5f5f7; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.era-cloud__h { font-size: 13px; font-weight: 600; color: #1d1d1f; }
.era-cloud__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.era-cloud__kpis div { background: #fff; border-radius: 8px; padding: 7px 8px; min-width: 0; }
.era-cloud__kpis small { display: block; font-size: 8.5px; color: #86868b; white-space: nowrap; overflow: hidden; }
.era-cloud__kpis strong { font-size: 12px; color: #1d1d1f; white-space: nowrap; }
.era-cloud__chart { flex: 1; background: #fff; border-radius: 8px; display: flex; align-items: flex-end; gap: 6px; padding: 10px; }
.era-cloud__chart i { flex: 1; background: #d2d2d7; border-radius: 3px 3px 0 0; }
.era-cloud__chart i:nth-child(6) { background: #e3000f; }
.era-cloud__phone { position: absolute; right: 0; bottom: 0; width: 132px; border-radius: 26px; padding: 6px; }
.era-cloud__phone::before { top: 11px; height: 12px; }
.era-cloud__phone .device-phone__display { border-radius: 21px; }
.era-cloud__mob { padding: 30px 10px 10px; display: flex; flex-direction: column; gap: 5px; font-size: 8.5px; color: #1d1d1f; letter-spacing: 0; }
.era-cloud__mob small { color: #86868b; font-size: 7.5px; }
.era-cloud__mob strong { font-size: 11px; }
.era-cloud__line, .era-cloud__total { display: flex; justify-content: space-between; border-bottom: 1px solid #e8e8ed; padding: 3px 0; }
.era-cloud__total { font-weight: 700; border: 0; }
.era-cloud__btn { margin-top: 4px; background: #e3000f; color: #fff; border-radius: 6px; text-align: center; padding: 5px; font-weight: 600; }

/* ───────── Dönem çizimleri canlanır ─────────
   html.lv altında; yıl etkinleşip çizim görünür olunca: defter satırları elle yazılır, eski pencerelerin satırları
   o dönemin yavaşlığıyla belirir, bulut panosunun grafiği yükselir. */
@keyframes era-write { from { clip-path: inset(-.3em 100% -.3em 0); } to { clip-path: inset(-.3em -.3em -.3em 0); } }
.lv .tl__item.is-active .era-ledger__page > * { animation: era-write .6s steps(12, end) both; animation-delay: calc(.2s + var(--i, 0) * .3s); }
.lv .tl__item.is-active .era-xp__tr,
.lv .tl__item.is-active .era-win__tr { animation: lv-in .2s steps(2, end) both; animation-delay: calc(.25s + var(--i, 0) * .14s); }
.lv .tl__item.is-active .era-cloud__chart i { transform-origin: 50% 100%; animation: lv-bar-y .8s var(--ease) both; animation-delay: calc(.3s + var(--i, 0) * .08s); }
.lv .tl__item.is-active .era-cloud__mob > * { animation: lv-rise .45s var(--ease) both; animation-delay: calc(.5s + var(--i, 0) * .12s); }