/* ===========================================================================
   Yukarı çık düğmesi — .progress-wrap
   ---------------------------------------------------------------------------
   Eski hâli main.css'te duruyordu ve sitenin geri kalanıyla hiç
   konuşmuyordu:
     - ikon gerçek bir simge değil, `content: "↑"` metin karakteriydi;
     - iki ayrı sözde öğe aynı oku iki kez çizip hover'da birbirine
       geçiriyordu (biri background-clip ile), görsel olarak farkı yoktu;
     - halka tek düz turuncuydu, iz halkası hiç yoktu — dolayısıyla ne kadar
       ilerlendiği ancak dolu kısma bakılarak anlaşılıyordu;
     - `box-shadow: inset 0 0 0 2px rgba(0,0,0,.1)` koyu zeminde görünmüyordu.

   Yenisi site genelindeki düğme diliyle aynı: buzlu daire, marka kenarlığı,
   üzerine gelince kenar canlanıyor. Halka logodaki degradeyi kullanıyor.
   =========================================================================== */
.progress-wrap {
    display: block;              /* main.css sonundaki `display:none` için */
    right: 26px;
    bottom: 92px;
    height: 52px;
    width: 52px;
    border-radius: 50%;
    box-shadow: none;            /* koyu zeminde görünmeyen iç gölge kalktı */
    border: 1px solid rgba(243, 122, 82, .45);
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
    transition: opacity .2s linear, transform .25s cubic-bezier(.2, .8, .3, 1),
                border-color .25s ease, background .25s ease;
}
.progress-wrap:hover {
    border-color: rgba(253, 168, 113, .95);
    background: rgba(255, 255, 255, .12);
    transform: translateY(-2px);
}
.progress-wrap.active-progress:hover { transform: translateY(-2px); }

/* Metin karakteri oklar tamamen kalkıyor; yerine gerçek bir simge. */
.progress-wrap::after,
.progress-wrap::before { content: none; }

.progress-wrap .progress-circle { position: absolute; inset: 0; }

/* İz halkası — kalan yolu gösterir. <circle> olmak ZORUNDA:
   bundle.js ilerlemeyi `.progress-wrap path` ile buluyor, buraya ikinci bir
   <path> konursa yanlış öğe sürülür. */
.progress-wrap .ptop-track {
    fill: none;
    stroke: rgba(255, 255, 255, .14);
    stroke-width: 5;
}
.progress-wrap svg.progress-circle path {
    stroke: url(#ptop-grad);
    stroke-width: 5;
    stroke-linecap: round;
}

/* Ok */
.ptop-icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.ptop-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s cubic-bezier(.2, .8, .3, 1);
}
.progress-wrap:hover .ptop-icon svg { transform: translateY(-2px); }

@media screen and (max-width: 767px) {
    .progress-wrap { right: 16px; bottom: 84px; height: 46px; width: 46px; }
    .ptop-icon svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .progress-wrap, .ptop-icon svg { transition: none; }
    .progress-wrap:hover { transform: none; }
    .progress-wrap:hover .ptop-icon svg { transform: none; }
}