/* ============================================================
   Yörünge — Site Geneli İnteraktif Katman (içerik değiştirmez)
   Scroll ilerleme çubuğu, kart spot ışığı, 3D tilt, manyetik
   butonlar, tıklama dalgası, imleç parıltısı, yukarı dön butonu.
   ============================================================ */

/* --- Yumuşak çapa kaydırma --- */
html {
    scroll-behavior: smooth;
}

/* --- Scroll ilerleme çubuğu --- */
.yrg-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 9998;
    pointer-events: none;
    background: linear-gradient(90deg, #0284c7, #3b82f6, #8b5cf6, #f97316);
    transform-origin: 0 50%;
    scale: 0 1;
    transition: scale 0.08s linear;
}

/* --- Kart spot ışığı: imleci takip eden ışık --- */
.tilt-card {
    transition: rotate 0.25s ease, transform 0.3s, box-shadow 0.3s;
}
.tilt-card .yrg-spot {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(
        420px circle at var(--yrg-mx, 50%) var(--yrg-my, 50%),
        rgba(14, 165, 233, 0.10),
        transparent 65%
    );
    z-index: 3;
}
.tilt-card:hover .yrg-spot {
    opacity: 1;
}

/* --- Tıklama dalgası (ripple) --- */
.yrg-ripple-host {
    position: relative;
    overflow: hidden;
}
.yrg-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: yrg-ripple-anim 0.6s ease-out forwards;
    z-index: 5;
}
@keyframes yrg-ripple-anim {
    to { transform: scale(2.6); opacity: 0; }
}

/* --- İmleç parıltısı: sayfada imleci izleyen yumuşak ışık --- */
.yrg-cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 480px;
    height: 480px;
    margin: -240px 0 0 -240px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.07), transparent 65%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* --- Yukarı dön butonu --- */
.yrg-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #0284c7, #3b82f6);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
    opacity: 0;
    pointer-events: none;
    translate: 0 16px;
    transition: opacity 0.35s ease, translate 0.35s ease, box-shadow 0.25s ease;
}
.yrg-top-btn.yrg-visible {
    opacity: 1;
    pointer-events: auto;
    translate: 0 0;
}
.yrg-top-btn:hover {
    box-shadow: 0 12px 32px rgba(2, 132, 199, 0.5);
}
.yrg-top-btn svg {
    transition: translate 0.25s ease;
}
.yrg-top-btn:hover svg {
    translate: 0 -2px;
}
/* İlerleme halkası */
.yrg-top-btn .yrg-ring {
    position: absolute;
    inset: -5px;
    border-radius: 18px;
    pointer-events: none;
}

/* --- Manyetik buton: yumuşak geri dönüş --- */
.yrg-magnetic {
    transition: translate 0.25s ease-out;
}

/* --- Hareket azaltma / dokunmatik cihaz --- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .yrg-progress,
    .yrg-cursor-glow { display: none; }
    .yrg-ripple { animation: none; opacity: 0; }
}
@media (pointer: coarse) {
    .yrg-cursor-glow { display: none; }
}