/* cevaplama.com — GEZİNİM HİKÂYESİ (30.09.2026)
   Üç iş: (1) düğme bekleme durumu (basıldı mı basılmadı mı belirsizliği kalmasın),
   (2) sayfalar arası yumuşak geçiş + üst ilerleme çizgisi, (3) bölümleri tek hikâyede
   bağlayan yol rayı ve bölüm türüne göre beliriş. Ana stil bütçesinin (20 KB) DIŞINDA,
   ayrı dosya. JS yoksa hiçbir şey gizlenmez: gizleme yalnız html.hk altında.
   Hareket istemeyen kullanıcıda (prefers-reduced-motion) animasyonların tamamı kapalı. */

/* ── 1) Düğme bekleme ───────────────────────────────────────────────────── */
.hk-bekle{position:relative;pointer-events:none;cursor:progress}
.hk-bekle>*{opacity:.75}
.hk-bekle::after{content:"";flex:none;width:1.050em;height:1.050em;margin-left:.550em;border-radius:50%;
  border:.160em solid currentColor;border-right-color:transparent;animation:hk-don .7s linear infinite;vertical-align:-.150em;display:inline-block}
@keyframes hk-don{to{transform:rotate(360deg)}}
.hk-cizgi{position:fixed;left:0;top:0;height:3px;width:0;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,#1f6feb,#0d9488);opacity:0;transition:opacity .2s}
.hk-cizgi.acik{opacity:1;animation:hk-ilerle 8s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes hk-ilerle{0%{width:0}15%{width:38%}50%{width:72%}100%{width:94%}}

/* ── 2) Sayfalar arası geçiş (destekleyen tarayıcıda) ──────────────────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:hk-cik .16s ease-in both}
::view-transition-new(root){animation:hk-gir .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes hk-cik{to{opacity:0;transform:translateY(-6px)}}
@keyframes hk-gir{from{opacity:0;transform:translateY(14px)}}
header.ust,header.site{view-transition-name:hk-ust}
.alt-cubuk,.uy-alt{view-transition-name:hk-alt}
::view-transition-group(hk-ust),::view-transition-group(hk-alt){animation-duration:.01s}

/* ── 3) Hikâye rayı: bölümler tek yolda, üstünde sayfanın ataları ───────── */
.hk-ray{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;display:none;
  flex-direction:column;align-items:flex-end;gap:0;font:500 12.500px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
@media (min-width:1180px){.hk-ray{display:flex}}
.hk-ray a{display:flex;align-items:center;gap:9px;padding:6px 0;text-decoration:none;color:inherit;position:relative}
.hk-ray a span{opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;white-space:nowrap;
  background:var(--yuzey,var(--panel,#fff));color:var(--murekkep,var(--ink,#14181f));border:1px solid var(--cizgi,var(--line,#e4e7ec));
  padding:3px 9px;border-radius:999px;box-shadow:0 4px 14px rgba(16,24,40,.08)}
.hk-ray a:hover span,.hk-ray a:focus-visible span,.hk-ray a.simdi span{opacity:1;transform:none}
.hk-ray a i{flex:none;width:11px;height:11px;border-radius:50%;border:2px solid #94a3b8;background:var(--zemin,var(--bg,#fff));
  transition:transform .25s,background .25s,border-color .25s;position:relative;z-index:1}
.hk-ray a.gecti i{background:#0d9488;border-color:#0d9488}
.hk-ray a.simdi i{background:#1f6feb;border-color:#1f6feb;transform:scale(1.450);box-shadow:0 0 0 5px rgba(31,111,235,.18)}
.hk-ray a.ata i{border-radius:3px;width:9px;height:9px;margin-right:1px;border-color:#64748b}
.hk-ray a.ata span{opacity:.0}
.hk-ray a.ata:hover span{opacity:1}
.hk-ray::before{content:"";position:absolute;right:4.500px;top:12px;bottom:12px;width:2px;background:#cbd5e1;border-radius:2px}
.hk-ray::after{content:"";position:absolute;right:4.500px;top:12px;width:2px;height:calc((100% - 24px) * var(--hk-oran,0));
  background:linear-gradient(#0d9488,#1f6feb);border-radius:2px;transition:height .15s linear}
/* Dar ekranda ray yerine üstte ince okuma çizgisi */
.hk-okuma{position:fixed;left:0;top:0;height:3px;width:calc(100% * var(--hk-oran,0));z-index:60;pointer-events:none;
  background:linear-gradient(90deg,#0d9488,#1f6feb)}
@media (min-width:1180px){.hk-okuma{display:none}}

/* ── 4) Bölüm türüne göre beliriş (yalnız JS çalışıyorsa gizlenir) ─────── */
html.hk [data-hk]{opacity:0;transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--hk-i,0) * 70ms);will-change:transform,opacity}
html.hk [data-hk="yuksel"]{transform:translateY(22px)}
html.hk [data-hk="kart"]{transform:translateY(26px) scale(.965)}
html.hk [data-hk="adim"]{transform:translateX(-26px)}
html.hk [data-hk="pop"]{transform:scale(.9)}
html.hk [data-hk="bant"]{transform:scale(.955)}
html.hk [data-hk="sag"]{transform:translateX(34px)}
html.hk [data-hk].hk-var{opacity:1;transform:none}
/* Adımlar: numaralar sırayla yanar, aralarındaki yol çizilir */
html.hk ol.adimlar{position:relative}
html.hk ol.adimlar>li.hk-var{animation:hk-vurgu .9s ease calc(var(--hk-i,0) * 70ms + .2s) 1}
@keyframes hk-vurgu{0%{box-shadow:0 0 0 0 rgba(13,148,136,.0)}40%{box-shadow:0 0 0 6px rgba(13,148,136,.16)}100%{box-shadow:0 0 0 0 rgba(13,148,136,0)}}
/* Çağrı bandı: bir kez nabız */
html.hk .cta-band.hk-var,html.hk .deneme-kutu.hk-var{animation:hk-nabiz 1.200s ease .35s 1}
@keyframes hk-nabiz{0%,100%{box-shadow:0 0 0 0 rgba(31,111,235,0)}45%{box-shadow:0 0 0 10px rgba(31,111,235,.10)}}
/* Bölüm başlığının altında çizilen ince yol işareti */
html.hk .bolum-bas h2{position:relative}
html.hk .bolum-bas h2::after{content:"";display:block;height:3px;width:56px;margin-top:10px;border-radius:3px;
  background:linear-gradient(90deg,#1f6feb,#0d9488);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1) .15s}
html.hk .bolum-bas.hk-var h2::after{transform:scaleX(1)}
html.hk .bolum-bas[style*="center"] h2::after,html.hk .bolum-bas.orta h2::after{margin-left:auto;margin-right:auto;transform-origin:center}

@media (prefers-reduced-motion:reduce){
  html.hk [data-hk]{opacity:1!important;transform:none!important;transition:none!important}
  html.hk .bolum-bas h2::after{transform:scaleX(1);transition:none}
  .hk-bekle::after{animation-duration:1.600s}
  .hk-cizgi.acik{animation:none;width:60%}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  html.hk ol.adimlar>li.hk-var,html.hk .cta-band.hk-var,html.hk .deneme-kutu.hk-var{animation:none}
  .hk-ray::after,.hk-ray a i,.hk-ray a span{transition:none}
}
@media print{.hk-ray,.hk-okuma,.hk-cizgi{display:none!important}html.hk [data-hk]{opacity:1!important;transform:none!important}}

/* ── 5) Panel: sayfa içeriği sırayla yerine oturur (ray yok; alt sekme çubuğu yol göstergesi) ── */
@media (prefers-reduced-motion:no-preference){
  main.wrap>*{animation:hk-gir .38s cubic-bezier(.2,.7,.2,1) both}
  main.wrap>*:nth-child(2){animation-delay:.04s}
  main.wrap>*:nth-child(3){animation-delay:.08s}
  main.wrap>*:nth-child(4){animation-delay:.12s}
  main.wrap>*:nth-child(n+5){animation-delay:.16s}
  .uy-liste>.uy-s{animation:hk-gir .34s cubic-bezier(.2,.7,.2,1) both}
  .uy-liste>.uy-s:nth-child(1){animation-delay:.05s}.uy-liste>.uy-s:nth-child(2){animation-delay:.08s}
  .uy-liste>.uy-s:nth-child(3){animation-delay:.11s}.uy-liste>.uy-s:nth-child(4){animation-delay:.14s}
  .uy-liste>.uy-s:nth-child(5){animation-delay:.17s}.uy-liste>.uy-s:nth-child(6){animation-delay:.20s}
  .uy-liste>.uy-s:nth-child(n+7){animation-delay:.23s}
  .uy-alt a.aktif span.i{animation:hk-sekme .35s cubic-bezier(.2,.9,.3,1.4) both}
}
@keyframes hk-sekme{from{transform:scaleX(.4);opacity:.3}}