/* ==========================================================================
   Mailmyra — Sayfa ilerleme dugmesi (eski "go to top" butonunun yerine)
   Davranis: kaydirdikca halka doluyor + ortada yuzde; %100'e gelince
   (ya da uzerine gelinince) ortadaki yuzde YUKARI OK'a donusuyor.
   Tiklama davranisi temanin kendi JS'inde (main.js → back_to_top).

   Temanin `.back-to-top-wrapper` / `.back-to-top-btn` kabugu KORUNDU —
   gorunme/gizlenme mantigi tema tarafindan yonetilmeye devam ediyor,
   burada yalnizca gorunum ve ilerleme eklendi.
   ========================================================================== */

.back-to-top-wrapper {
    /* halka ve yuzde okunakli olsun diye buyutuldu */
    width: 62px;
    height: 62px;
    right: 42px;
    /* 3B sahne: icerideki katmanlar farkli derinliklerde duracak */
    perspective: 420px;
    --rx: 0deg;
    --ry: 0deg;
    --mx: 50%;
    --my: 50%;
}

@media (max-width: 767px) {
    .back-to-top-wrapper {
        right: 18px;
        width: 54px;
        height: 54px;
    }
}

/* --- dugme govdesi: kabartilmis cam puck ---
   Katmanlar (arkadan one): govde golgesi → cam disk → ust isik →
   halka (Z+10) → yuzde/ok (Z+22). Imlecle egilince aralarindaki
   derinlik farki parallaks yaratiyor. */
.back-to-top-btn {
    position: relative;
    width: 100%;
    height: 100%;
    line-height: 1;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    background:
        /* imleci takip eden parlama */
        radial-gradient(58% 58% at var(--mx) var(--my),
            rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
        /* ust isik → alt golge: hacim hissi */
        linear-gradient(180deg,
            rgba(255, 255, 255, .12) 0%,
            rgba(255, 255, 255, .02) 42%,
            rgba(0, 0, 0, .22) 100%),
        rgba(9, 22, 48, .74);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #fff;
    overflow: visible;
    transform-style: preserve-3d;
    /* --lift: hover'da dugme perspektif icinde IZLEYICIYE dogru gelir */
    --lift: 0px;
    transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--lift));
    transition: box-shadow .3s ease, border-color .3s ease,
                background .3s ease, transform .12s ease-out;
}

.back-to-top-btn:hover {
    --lift: 26px;
    border-color: rgba(242, 165, 115, .72);
    background:
        radial-gradient(58% 58% at var(--mx) var(--my),
            rgba(242, 165, 115, .30), rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg,
            rgba(255, 255, 255, .16) 0%,
            rgba(255, 255, 255, .03) 42%,
            rgba(0, 0, 0, .24) 100%),
        rgba(14, 28, 56, .82);
    box-shadow:
        0 10px 0 -2px rgba(3, 9, 22, .65),
        0 30px 48px -14px rgba(0, 0, 0, .95),
        0 0 40px -4px rgba(242, 165, 115, .6),
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -6px 12px -6px rgba(0, 0, 0, .8);
}

/* imlec ayrilinca yumusak donsun */
.back-to-top-btn:not(:hover) {
    transition: box-shadow .35s ease, border-color .35s ease,
                background .35s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* --- hover halesi: disari acilan turuncu cember --- */
.back-to-top-btn::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid rgba(242, 165, 115, .6);
    opacity: 0;
    transform: scale(.8) translateZ(6px);
    transition: opacity .3s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}

.back-to-top-btn:hover::after {
    opacity: 1;
    transform: scale(1) translateZ(6px);
}

/* --- ilerleme halkasi --- */
.mm-sp__ring {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    /* 0 noktasi saat 12'de + govdeden 10px onde (parallaks) */
    transform: rotate(-90deg) translateZ(10px);
    overflow: visible;
    pointer-events: none;
}

.mm-sp__ring circle {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-width .25s ease;
}

/* hover'da halka kalinlasir */
.back-to-top-btn:hover .mm-sp__ring circle {
    stroke-width: 5.2;
}

/* Ray: hafif ic golge gibi dursun diye altta koyu bir kardesi var */
.mm-sp__track {
    stroke: rgba(255, 255, 255, .12);
}

/* halkanin altindaki koyu kopya → cikintili gorunum */
.mm-sp__shadow {
    stroke: rgba(0, 0, 0, .55);
    stroke-dasharray: 150.796;
    stroke-dashoffset: calc(150.796 * (1 - var(--sp, 0)));
    transform: translateY(1.5px);
    transform-origin: center;
}

/* NOT: cevre elle hesaplandi — r=24 → 2πr = 150.796.
   pathLength'e guvenilmedi (bazi tarayicilarda dash deseni kayiyor).
   index'teki <circle r> degisirse BU SAYI da degismeli. */
.mm-sp__bar {
    stroke: var(--mmp-orange, #f2a573);
    stroke-dasharray: 150.796;
    stroke-dashoffset: calc(150.796 * (1 - var(--sp, 0)));
    filter: drop-shadow(0 0 6px rgba(242, 165, 115, .75));
    /* --sp her karede JS'ten geliyor; gecis KOYMA, yoksa hizli
       kaydirmada halka scroll'un gerisinde kalir. */
}

/* --- ortadaki icerik: yuzde ↔ ok --- */
/* Yuzde/ok en onde — egilince halkanin uzerinde kayar (parallaks) */
.mm-sp__face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform: translateZ(22px);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .7);
}

.mm-sp__num,
.mm-sp__arrow {
    grid-area: 1 / 1;
    transition: opacity .22s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}

.mm-sp__num {
    display: flex;
    align-items: baseline;
    font-family: var(--mmp-clash, sans-serif);
    font-size: 17px;
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* "%" isareti referanstaki gibi var, rakamdan kucuk */
.mm-sp__num i {
    font-style: normal;
    font-family: var(--mmp-mono, ui-monospace, Menlo, monospace);
    font-size: 9px;
    opacity: .6;
    margin-left: 1px;
}

@media (max-width: 767px) {
    .mm-sp__num { font-size: 15px; }
}

.mm-sp__arrow {
    display: block;
    opacity: 0;
    transform: translateY(8px);
    color: var(--mmp-orange, #f2a573);
    filter: drop-shadow(0 0 8px rgba(242, 165, 115, .8));
}

/* ok girerken hafif yay yapsin */
.back-to-top-btn:hover .mm-sp__arrow,
.back-to-top-wrapper.is-complete .mm-sp__arrow {
    transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
    transition-duration: .38s;
}

/* %100'de VE uzerine gelindiginde ok cikar */
.back-to-top-wrapper.is-complete .mm-sp__num,
.back-to-top-btn:hover .mm-sp__num {
    opacity: 0;
    transform: translateY(-6px);
}

.back-to-top-wrapper.is-complete .mm-sp__arrow,
.back-to-top-btn:hover .mm-sp__arrow {
    opacity: 1;
    transform: none;
}

/* %100'de halka da tamamlandigini belli etsin */
.back-to-top-wrapper.is-complete .mm-sp__bar {
    stroke: var(--mmp-orange, #f2a573);
    filter: drop-shadow(0 0 10px rgba(242, 165, 115, .95));
}

.back-to-top-wrapper.is-complete .back-to-top-btn {
    border-color: rgba(242, 165, 115, .5);
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top-btn,
    .mm-sp__num,
    .mm-sp__arrow {
        transition-duration: .01ms;
    }
}