/* Göç sayfaları (goc/ ve yedi durak). ana.css'in ortak harita ve giriş kurallarının üstüne gelir.
   Tek gösterişli öğe zamandır: yıl sayacı mekanik sayaç gibi hane hane döner, alttaki cetvel yılları orantılı gösterir.
   Masaüstü: sabit harita, solda koyu perde üstünde durak yazıları, altta sayaç ve cetvel.
   Telefon (ve dokunmatik): yapışkan hiçbir şey yok; her durak kendi sayacı, harita karesi (üstünde SVG yollar) ve yazısıyla akar. */

.goc-sayfa { --cetvel-h: 66px; --sayac: clamp(84px, 15.5vh, 168px); --sutun: min(430px, 34vw); }

/* ---------- bölüm ---------- */
.goc-sayfa .goc { padding: 0 0 26vh; }
.goc-sayfa .goc-akis { display: block; position: relative; z-index: 2; }
.durak { position: relative; min-height: 92vh; display: flex; align-items: center; scroll-margin-top: calc(var(--ust-h) + 12px); }
.durak-ic { position: relative; width: var(--sutun); color: var(--kece); pointer-events: auto; transition: opacity .7s var(--e-yumusak); }
html.js .goc-sayfa .durak:not(.aktif) .durak-ic { opacity: .26; }

.durak-sira { display: flex; align-items: baseline; gap: 0; margin: 0 0 14px; font: 600 11px/1 var(--f-etiket); letter-spacing: .12em; color: rgba(239,230,212,.5); font-variant-numeric: tabular-nums; }
.durak-no { color: var(--zerdecal-acik); }
.durak-yil { margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(239,230,212,.25); color: var(--kece); }
.sayac { display: none; }
.durak-baslik { margin: 0 0 18px; font: 400 clamp(34px, 3.3vw, 54px)/1.02 var(--f-baslik); letter-spacing: -.01em; color: var(--kece); text-wrap: balance; }
.durak-harita { display: none; margin: 0; }
.durak-metin p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.62; color: rgba(239,230,212,.86); max-width: 36em; }
.durak-metin blockquote { margin: 22px 0 18px; padding: 2px 0 2px 18px; border-left: 2px solid var(--kok-acik); }
.durak-metin blockquote p { margin: 0; font: 400 clamp(20px, 1.6vw, 24px)/1.22 var(--f-baslik); color: var(--kece); }
.durak-metin cite { display: block; margin-top: 10px; font: 500 12.5px/1.45 var(--f-govde); font-style: normal; color: rgba(239,230,212,.58); }
.durak-metin .durak-not { margin-top: 16px; padding-top: 11px; border-top: 1px dashed rgba(239,230,212,.22); font-size: 13.5px; line-height: 1.5; font-style: italic; color: rgba(239,230,212,.62); }
.durak-alt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 18px; }
.durak-kaynak { flex: 1 1 100%; margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(239,230,212,.55); }
.durak-kaynak a { color: rgba(239,230,212,.82); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(240,196,106,.45); }
.durak-bag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font: 600 10px/1 var(--f-etiket); letter-spacing: .12em; color: var(--zerdecal-acik); }
.durak-bag::before { content: ''; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }
.durak-bag.kopyalandi { color: var(--kece); }
@media (hover: hover) { .durak-kaynak a:hover { color: var(--zerdecal-acik); } .durak-bag:hover { color: var(--kece); } }

/* duraklar arası: geçen yıl */
.durak-ara { position: relative; height: 34vh; width: var(--sutun); display: flex; align-items: center; gap: 14px; }
.durak-ara i { align-self: stretch; width: 1px; margin: 4vh 0; background: repeating-linear-gradient(to bottom, rgba(239,230,212,.32) 0 4px, transparent 4px 9px); }
.durak-ara span { font: 600 11px/1 var(--f-etiket); letter-spacing: .12em; color: var(--zerdecal-acik); opacity: .85; }

/* ---------- masaüstü: perde, sayaç, cetvel ---------- */
.goc-perde { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .7s var(--e-yumusak);
  background: linear-gradient(90deg, rgba(17,12,10,.88) 0, rgba(17,12,10,.78) calc(var(--kenar) + var(--sutun) * .7), rgba(17,12,10,.42) calc(var(--kenar) + var(--sutun) + 30px), rgba(17,12,10,0) calc(var(--kenar) + var(--sutun) + 200px)); }
body.goc-icinde .goc-perde { opacity: 1; }

.yil-pano { position: fixed; left: 0; bottom: 0; z-index: 4; width: calc(var(--kenar) + var(--sutun) + 120px); height: calc(var(--cetvel-h) + var(--sayac) + 70px); pointer-events: none;
  background: linear-gradient(to top, #130e0c 0, #130e0c calc(var(--cetvel-h) + var(--sayac) * .55), rgba(19,14,12,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 180px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 180px), transparent);
  opacity: 0; visibility: hidden; transition: opacity .6s var(--e-yumusak), visibility 0s .6s; }
body.goc-icinde .yil-pano { opacity: 1; visibility: visible; transition: opacity .6s var(--e-yumusak); }
.sayac-buyuk { position: absolute; left: var(--kenar); bottom: calc(var(--cetvel-h) + 4px); margin: 0; display: flex; font: 800 var(--sayac)/1 var(--f-etiket); letter-spacing: 0; color: var(--kece); font-variant-numeric: tabular-nums; }
.haneler { display: flex; opacity: 0; will-change: transform, opacity; }
.hane { display: block; position: relative; width: .74em; height: 1em; overflow: hidden; text-align: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%); }
.hane-serit { display: block; white-space: pre; line-height: 1; will-change: transform; }
.sayac-ad { position: absolute; left: 0; bottom: 0; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px rgba(239,230,212,.62); letter-spacing: -.01em; white-space: nowrap; will-change: transform, opacity; }

.zaman-serit { position: fixed; left: var(--kenar); right: var(--kenar); bottom: 0; z-index: 5; height: var(--cetvel-h); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--e-yumusak), visibility 0s .6s; }
.zaman-serit::before { content: ''; position: absolute; left: calc(var(--kenar) * -1); right: calc(var(--kenar) * -1); bottom: 0; height: calc(var(--cetvel-h) + 40px); z-index: -1;
  background: linear-gradient(to top, rgba(19,14,12,.94), rgba(19,14,12,.7) 55%, rgba(19,14,12,0)); }
body.goc-icinde .zaman-serit { opacity: 1; visibility: visible; transition: opacity .6s var(--e-yumusak); }
.zaman-serit ol { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.zaman-serit li { position: absolute; left: var(--x); bottom: 15px; width: var(--w); }
.zaman-serit a { position: relative; display: block; padding: 0 0 14px; pointer-events: auto; color: rgba(239,230,212,.55); transition: color .3s; }
.zaman-serit a b { display: block; transform: translateX(-4px); font: 600 10px/1 var(--f-etiket); letter-spacing: .1em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zaman-serit a i { position: absolute; left: 0; bottom: -4px; width: max(7px, 100%); height: 7px; transform: translateX(-3.5px); background: #130e0c; border: 1.5px solid currentColor; }
.zaman-serit li:first-child a i { transform: translateX(-3.5px) rotate(45deg) scale(.85); }
.zaman-serit li:last-child a b { transform: translateX(calc(-100% + 4px)); }
.zaman-serit a[aria-current] { color: var(--kece); }
.zaman-serit a[aria-current] i { background: var(--zerdecal); border-color: var(--zerdecal); }
@media (hover: hover) { .zaman-serit a:hover { color: var(--zerdecal-acik); } }
.serit-iz { position: absolute; left: 0; right: 0; bottom: 15px; height: 1px; background: rgba(239,230,212,.22); }
.serit-iz::before, .serit-iz::after { content: ''; position: absolute; left: calc(var(--x0, .07) * 100%); right: 0; bottom: 0; }
.serit-iz::before { height: 5px; background: repeating-linear-gradient(90deg, rgba(239,230,212,.24) 0 1px, transparent 1px var(--yil, 6px)); }
.serit-iz::after { height: 10px; background: repeating-linear-gradient(90deg, rgba(239,230,212,.4) 0 1px, transparent 1px calc(var(--yil, 6px) * 10)); background-position: calc(var(--yil, 6px) * 2) 0; }
.serit-imlec { position: absolute; left: 0; bottom: -5px; width: 2px; height: 16px; margin-left: -1px; background: var(--zerdecal); will-change: transform; }
.serit-imlec::after { content: ''; position: absolute; left: -3.5px; top: -4px; width: 9px; height: 9px; background: var(--zerdecal); transform: rotate(45deg); }

.goc-sayfa .goc-ipucu { position: fixed; right: var(--kenar); top: calc(var(--ust-h) + 10px); z-index: 3; margin: 0; padding: 0; background: none; font-size: 12.5px; color: rgba(239,230,212,.6); text-shadow: 0 1px 10px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
body.goc-icinde .goc-ipucu { opacity: 1; visibility: visible; transition: opacity .5s; }
html.no-webgl .goc-sayfa .goc-ipucu { display: none; }

/* yer etiketleri yazı sütununun perdesinin üstünde kalsın (etiketler sütuna ve alt banda hiç yerleşmez) */
.goc-sayfa .harita-katman { z-index: 3; }

/* istasyon (yol ara durağı) adları */
.ist-et { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; transform: translate3d(-200px, -200px, 0); white-space: nowrap; pointer-events: none;
  font: 500 12.5px/1 var(--f-govde); letter-spacing: .01em; color: var(--kece); text-shadow: 0 1px 2px rgba(10,6,5,.9), 0 0 12px rgba(10,6,5,.75);
  opacity: 0; transition: opacity .5s; will-change: transform; }
.ist-et::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--zerdecal-acik); box-shadow: 0 0 6px rgba(240,196,106,.9); }
.ist-et.on { opacity: .95; }
.ist-et.gizli-et { opacity: 0 !important; }

/* ---------- telefon, dokunmatik tablet, dar pencere ---------- */
@media (max-width: 900px), (pointer: coarse) {
  .goc-sayfa .goc { background: var(--murekkep); padding: 40px 0 70px; pointer-events: auto; }
  .goc-perde, .yil-pano, .goc-sayfa .goc-ipucu { display: none; }
  .goc-sayfa .goc-akis { padding: 0 var(--kenar); }
  .durak { min-height: 0; display: block; padding: 8px 0 0; }
  .durak-ic { width: auto; }
  html.js .goc-sayfa .durak:not(.aktif) .durak-ic { opacity: 1; }
  .durak-sira { margin-bottom: 6px; }
  .durak-yil { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .durak-baslik { font-size: clamp(30px, 8.6vw, 44px); margin-bottom: 0; }
  .durak-metin p { font-size: 16px; line-height: 1.64; }
  .durak-metin blockquote p { font-size: 21px; }

  /* sayaç: durak ekrana girince bir önceki durağın yılından bu yıla döner */
  .sayac { display: flex; align-items: flex-end; margin: 2px 0 8px -.02em; font: 800 clamp(66px, 23vw, 140px)/1 var(--f-etiket); color: var(--kece); font-variant-numeric: tabular-nums; }
  .sayac .haneler { display: flex; opacity: 1; }
  .sayac .hane { width: .74em; }
  .sayac.sayac--don .hane-serit { transform: translate3d(0, 0, 0); }
  .sayac.sayac--don.dondu .hane-serit { transform: translate3d(0, calc(var(--son) * 1em), 0); transition: transform 2.1s cubic-bezier(.12, .7, .14, 1) var(--gec); }
  .sayac.sayac--yuksel .hane-serit { transform: translate3d(0, 105%, 0); }
  .sayac.sayac--yuksel.dondu .hane-serit { transform: none; transition: transform 1s var(--e-cikis) var(--gec); }
  .sayac-ek { font-size: .34em; line-height: 1; margin: 0 0 .1em .12em; color: rgba(239,230,212,.72); letter-spacing: .02em; }
  html.js:not(.rm) .sayac-ek { opacity: 0; transition: opacity .7s 1.5s; }
  html.js:not(.rm) .sayac.dondu .sayac-ek { opacity: 1; }
  .sayac--kelime { overflow: hidden; padding-bottom: .02em; font-size: clamp(56px, 19vw, 120px); }
  .sayac--kelime .sayac-yil { display: block; color: transparent; -webkit-text-stroke: 1.2px rgba(239,230,212,.75); }
  html.js:not(.rm) .sayac--kelime .sayac-yil { transform: translate3d(0, 102%, 0); transition: transform 1s var(--e-cikis); }
  html.js:not(.rm) .sayac--kelime.dondu .sayac-yil { transform: none; }

  /* harita karesi ve üstündeki yollar */
  .durak-harita { display: block; position: relative; margin: 20px calc(var(--kenar) * -1) 22px; aspect-ratio: 3 / 2; background: #1a1210; overflow: hidden; }
  .durak-harita picture, .durak-harita img { display: block; width: 100%; height: 100%; }
  .durak-harita img { object-fit: cover; }
  .iz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .iz-yol path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .iz-hale { stroke: rgba(255, 196, 110, .2); stroke-width: 8; }
  .iz-taban { stroke: #e0583c; stroke-width: 2.1; }
  .iz-kervan { --donem: 17; stroke: #ffe3a3; stroke-width: 2.6; stroke-dasharray: 2.5 14.5; }
  .iz-yol--surgun .iz-hale { stroke: rgba(185, 205, 255, .2); }
  .iz-yol--surgun .iz-taban { stroke: rgba(223, 230, 243, .5); stroke-width: 1.5; }
  .iz-yol--surgun .iz-kervan { --donem: 10; stroke: #eef3ff; stroke-width: 2.4; stroke-dasharray: 6 4; stroke-linecap: butt; }
  .iz-yol--belirsiz .iz-hale { stroke: rgba(226, 162, 58, .12); }
  .iz-yol--belirsiz .iz-taban { stroke: rgba(226, 162, 58, .35); stroke-width: 1.2; }
  .iz-yol--belirsiz .iz-kervan { --donem: 8; stroke: #f0c46a; stroke-width: 2.4; stroke-dasharray: .1 7.9; }
  .iz-kapi { fill: #eef3ff; }
  .iz-im { fill: var(--zerdecal-acik); stroke: var(--kok-koyu); stroke-width: 1.3; transform-box: fill-box; transform-origin: center; }
  .iz-etiketler { position: absolute; inset: 0; pointer-events: none; }
  .iz-et { position: absolute; transform: none; opacity: 1; pointer-events: auto; }
  .iz-et.iz-et--yari { opacity: .6; }
  .iz-et--ist { display: flex; align-items: center; gap: 5px; white-space: nowrap; font: 500 11px/1 var(--f-govde); color: var(--kece); text-shadow: 0 1px 2px rgba(10,6,5,.9), 0 0 10px rgba(10,6,5,.8); pointer-events: none; }
  .iz-et--ist::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--zerdecal-acik); }

  /* canlandırma yalnız betik varsa ve hareket azaltılmamışsa: yol çizilerek belirir, sonra kervan akar (yalnız kare ekrandayken) */
  html.js:not(.rm) .iz-hale, html.js:not(.rm) .iz-taban { stroke-dasharray: var(--l) 9999; stroke-dashoffset: var(--l); }
  html.js:not(.rm) .iz-kervan, html.js:not(.rm) .iz-kapi, html.js:not(.rm) .iz-et { opacity: 0; }
  html.js:not(.rm) .iz-im { transform: scale(0); }
  html.js:not(.rm) .cizildi .iz-hale, html.js:not(.rm) .cizildi .iz-taban { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s cubic-bezier(.5, .05, .3, 1) var(--g); }
  html.js:not(.rm) .cizildi .iz-kervan { opacity: 1; transition: opacity .6s calc(var(--g) + 1.2s); }
  html.js:not(.rm) .cizildi .iz-kapi { opacity: 1; transition: opacity .5s var(--g); }
  html.js:not(.rm) .cizildi .iz-im { transform: none; transition: transform .55s cubic-bezier(.3, 1.6, .5, 1) var(--g); }
  html.js:not(.rm) .cizildi .iz-et { opacity: 1; transition: opacity .5s var(--g); }
  html.js:not(.rm) .cizildi .iz-et--yari { opacity: .6; }
  html.js:not(.rm) .akiyor .iz-kervan { animation: kervan 1.5s linear infinite; }
  html.js:not(.rm) .akiyor .iz-yol--surgun .iz-kervan { animation-duration: .8s; }
  html.js:not(.rm) .akiyor .iz-yol--belirsiz .iz-kervan { animation-duration: 2.6s; }

  /* duraklar arası: dikey zaman ipi ve geçen yıl */
  .durak-ara { width: auto; height: auto; min-height: 96px; padding: 30px 0 26px; }
  .durak-ara i { margin: 0; transform-origin: 50% 0; }
  html.js:not(.rm) .durak-ara i { transform: scaleY(0); transition: transform .9s var(--e-cikis); }
  html.js:not(.rm) .durak-ara span { opacity: 0; transition: opacity .6s .35s; }
  html.js:not(.rm) .durak-ara.acildi i { transform: none; }
  html.js:not(.rm) .durak-ara.acildi span { opacity: .85; }

  /* durak dizini: bölümün başında, yıllarla orantılı */
  .zaman-serit { position: relative; left: auto; right: auto; bottom: auto; z-index: 1; height: 80px; margin: 6px var(--kenar) 20px; opacity: 1; visibility: visible; pointer-events: auto; }
  .zaman-serit::before { display: none; }
  .zaman-serit li { bottom: 40px; }
  .zaman-serit li:nth-child(even) { bottom: auto; top: 40px; }
  .zaman-serit li:nth-child(even) a { padding: 11px 0 0; }
  .zaman-serit li:nth-child(even) a i { bottom: auto; top: -4px; }
  .zaman-serit a b { font-size: 9px; }
  .serit-iz { bottom: auto; top: 40px; }
  .serit-imlec { display: none; }
}
@keyframes kervan { to { stroke-dashoffset: calc(var(--donem) * -1); } }

/* hareket azaltılmış: sayaç ve cetvel durağan, geçişler yok */
html.rm .durak-ic, html.rm .yil-pano, html.rm .zaman-serit, html.rm .goc-perde { transition: none; }