/* ===== Yunuseli Asansör – Kurumsal Animasyonlar ===== */

/* Öğeler yalnızca JS aktifken gizlenir; JS çalışmazsa içerik görünür kalır. */

/* --- Scroll ile beliren bloklar --- */
html.js-anim .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
html.js-anim .reveal.reveal-left  { transform: translateX(-32px); }
html.js-anim .reveal.reveal-right { transform: translateX(32px); }
html.js-anim .reveal.reveal-scale { transform: scale(0.96); }

html.js-anim .reveal.active {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* --- Header: sayfa kaydırılınca hafif gölge --- */
header {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
header.scrolled {
    box-shadow: 0 6px 24px -12px rgba(58, 95, 148, 0.35);
}

/* --- Kart / kutu hover yükselmesi (kurumsal, hafif) --- */
html.js-anim .anim-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
html.js-anim .anim-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -18px rgba(58, 95, 148, 0.28);
}

/* --- Görsellerde yumuşak zoom (sarıcı overflow-hidden ise) --- */
html.js-anim .anim-zoom { overflow: hidden; }
html.js-anim .anim-zoom img,
html.js-anim .anim-zoom > .bg-cover {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-anim .anim-zoom:hover img,
html.js-anim .anim-zoom:hover > .bg-cover {
    transform: scale(1.05);
}

/* --- Hero açılış animasyonu (sayfa yüklenince) --- */
html.js-anim .hero-in {
    opacity: 0;
    transform: translateY(24px);
    animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html.js-anim .hero-in.d1 { animation-delay: 0.10s; }
html.js-anim .hero-in.d2 { animation-delay: 0.22s; }
html.js-anim .hero-in.d3 { animation-delay: 0.34s; }
html.js-anim .hero-in.d4 { animation-delay: 0.46s; }
@keyframes heroIn {
    to { opacity: 1; transform: translateY(0); }
}

/* --- Birincil butonlarda ince parlama --- */
html.js-anim .anim-btn { position: relative; overflow: hidden; }
html.js-anim .anim-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
html.js-anim .anim-btn:hover::after { left: 125%; }

/* --- Yukarı çık butonu --- */
#geri-yukari {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00628d;
    color: #fff;
    box-shadow: 0 8px 24px -8px rgba(0, 98, 141, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 60;
    border: none;
    cursor: pointer;
}
#geri-yukari.gorunur { opacity: 1; visibility: visible; transform: translateY(0); }
#geri-yukari:hover { background: #004e70; }

/* --- Erişilebilirlik: hareket azaltma isteyen kullanıcılarda kapat --- */
@media (prefers-reduced-motion: reduce) {
    html.js-anim .reveal,
    html.js-anim .hero-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    html.js-anim .anim-lift:hover { transform: none; }
    #geri-yukari { transition: none; }
}