/* ----------------------------------------------------------------------------
 * Yukarı çık butonu — genel site ve yönetim paneli tarafından PAYLAŞILIR.
 *
 * Bileşen tek yerde durur; renkler CSS değişkenleriyle verilir, böylece iki taraf
 * aynı davranışı paylaşırken kendi paletini kullanabilir. Varsayılanlar zaten her iki
 * temanın da rengidir (koyu #1F2120 zemin, altın #A6A182 vurgu), bu yüzden şu anda
 * hiçbir taraf değer geçersiz kılmak zorunda değil.
 *
 * Davranış: js/scroll-ust.js
 * -------------------------------------------------------------------------- */
.scroll-ust {
    --su-boyut: 48px;
    --su-zemin: #1F2120;
    --su-kenar: rgba(255, 255, 255, .14);
    --su-ok: #FFFFFF;
    --su-iz: rgba(255, 255, 255, .16);
    --su-ilerleme: #A6A182;
    --su-sag: 24px;
    /* JS, sayfada yüzen başka bir öğe varsa (ör. rezervasyon kartı) bu değeri
       o öğenin yüksekliğine göre günceller; ölçemezse aşağıdaki değer geçerlidir. */
    --su-alt: 24px;

    position: fixed;
    right: var(--su-sag);
    bottom: var(--su-alt);
    z-index: 9998; /* rezervasyon kartının (9999) hemen altında */

    width: var(--su-boyut);
    height: var(--su-boyut);
    padding: 0;
    display: grid;
    place-items: center;

    border: 1px solid var(--su-kenar);
    border-radius: 50%;
    background: var(--su-zemin);
    color: var(--su-ok);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);

    /* Görünmezken tab sırasından da çıkar (visibility: hidden). */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.85);
    transition: opacity .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1), visibility .35s;
}

    .scroll-ust.gorunur {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .scroll-ust:hover {
        --su-ok: var(--su-ilerleme);
        transform: translateY(-3px);
    }

    .scroll-ust:active {
        transform: translateY(0) scale(.94);
    }

    .scroll-ust:focus-visible {
        outline: 2px solid var(--su-ilerleme);
        outline-offset: 3px;
    }

    /* İlerleme halkası: kutunun tamamını kaplar, ok ortada kalır. */
    .scroll-ust .su-halka {
        position: absolute;
        top: -1px;  /* kenarlığın üstüne otur */
        left: -1px;
        width: calc(var(--su-boyut) + 2px);
        height: calc(var(--su-boyut) + 2px);
        transform: rotate(-90deg); /* 0% saat 12 yönünden başlasın */
        pointer-events: none;
    }

    .scroll-ust .su-iz,
    .scroll-ust .su-ilerleme {
        fill: none;
        stroke-width: 2;
    }

    .scroll-ust .su-iz {
        stroke: var(--su-iz);
    }

    .scroll-ust .su-ilerleme {
        stroke: var(--su-ilerleme);
        stroke-linecap: round;
        /* dasharray/dashoffset JS tarafından yazılır. Kısa geçiş, kaydırma sırasında
           halkanın takılmadan ilerlemesini sağlar. */
        transition: stroke-dashoffset .12s linear;
    }

    .scroll-ust .su-ok {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        transition: stroke .25s ease;
    }

@media (max-width: 575px) {
    .scroll-ust {
        --su-boyut: 42px;
        --su-sag: 16px;
    }

        .scroll-ust .su-ok {
            width: 16px;
            height: 16px;
        }
}

/* Hareket azaltma tercihi: buton yine görünür, ama kayarak/ölçeklenerek gelmez.
   Kaydırmanın kendisi de anında yapılır (bkz. js/scroll-ust.js). */
@media (prefers-reduced-motion: reduce) {
    .scroll-ust {
        transition: opacity .01ms linear, visibility .01ms linear;
        transform: none;
    }

        .scroll-ust:hover,
        .scroll-ust:active {
            transform: none;
        }

        .scroll-ust .su-ilerleme {
            transition: none;
        }
}