﻿#globalLoader {
    position: fixed;
    inset: 0;
    background: #f4f6f8;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

    #globalLoader.hidden {
        opacity: 0;
        visibility: hidden;
    }

.triangle-loader {
    position: relative;
    width: 120px;
    height: 90px;
}

    /* Üçgenler */
    .triangle-loader span {
        position: absolute;
        width: 0;
        height: 0;
        border-left: 24px solid transparent;
        border-right: 24px solid transparent;
        border-bottom: 40px solid;
        opacity: 0.9;
        animation: floatUltra 2s ease-in-out infinite;
        filter: drop-shadow(0 3px 8px rgba(0,0,0,0.2));
        background-clip: content-box;
        transition: transform 0.3s ease;
        /* Gradient animasyonu */
        border-image: linear-gradient(45deg, #1f2937, #4b5563, #6b7280, #1f2937) 1;
        border-image-slice: 1;
        animation-name: floatUltra, gradientShift;
        animation-duration: 2s, 5s;
        animation-iteration-count: infinite, infinite;
        animation-timing-function: ease-in-out, linear;
    }

        /* Üçgen konumları */
        .triangle-loader span:nth-child(1) {
            left: 36px;
            top: 0;
            animation-delay: 0s, 0s;
        }

        .triangle-loader span:nth-child(2) {
            left: 0;
            top: 40px;
            animation-delay: 0.2s, 1s;
        }

        .triangle-loader span:nth-child(3) {
            left: 72px;
            top: 40px;
            animation-delay: 0.4s, 2s;
        }

/* Float ve rotate animasyonu */
@keyframes floatUltra {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.6;
    }

    25% {
        transform: translateY(-6px) rotate(5deg);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-12px) rotate(-3deg);
        opacity: 1;
    }

    75% {
        transform: translateY(-6px) rotate(3deg);
        opacity: 0.8;
    }

    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.6;
    }
}

/* Gradient shift animasyonu */
@keyframes gradientShift {
    0% {
        border-image-source: linear-gradient(45deg, #1f2937, #4b5563, #6b7280, #1f2937);
    }

    50% {
        border-image-source: linear-gradient(45deg, #4b5563, #6b7280, #1f2937, #4b5563);
    }

    100% {
        border-image-source: linear-gradient(45deg, #1f2937, #4b5563, #6b7280, #1f2937);
    }
}
