.spinner-blue-orange {
    width: 3rem;
    height: 3rem;
    border-width: .35em;
    border-style: solid;
    border-radius: 50%;
    border-color: transparent;

    background: conic-gradient( #4fb5b9 0% 50%,  #ff8c00 50% 100%  );

    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .35em), black 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - .35em), black 0);
    animation: spinner-border 0.75s linear infinite;
}
.custom-spinner-blue-orange {
    width: 60px;
    height: 60px;
    border-radius: 40%;
    border: 6px solid transparent;
    border-top-color: #4fb5b9;
    border-right-color: #ff8c00;
    border-bottom-color: #ff974f;
    border-left-color: #44abb6;
    animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;

    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .30em), black 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - .30em), black 0);
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* Orbit logo loader: logo nefes alir, ustunden isik gecer, etrafinda iki renkli yorunge doner */
.orbit-loader {
    --orbit-loader-size: 96px;
    --orbit-loader-teal: #4fb5b9;
    --orbit-loader-orange: #ff8c00;
    position: relative;
    display: inline-block;
    width: var(--orbit-loader-size);
    height: var(--orbit-loader-size);
}

.orbit-loader--sm {
    --orbit-loader-size: 64px;
}

.orbit-loader__logo {
    position: absolute;
    inset: 20%;
    background: var(--orbit-loader-logo) center / contain no-repeat;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25));
    animation: orbit-loader-breathe 1.8s ease-in-out infinite;
}

.orbit-loader__logo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%) 0 0 / 300% 100% no-repeat;
    -webkit-mask: var(--orbit-loader-logo) center / contain no-repeat;
    mask: var(--orbit-loader-logo) center / contain no-repeat;
    animation: orbit-loader-shine 1.8s ease-in-out infinite;
}

.orbit-loader__track {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .08);
}

.orbit-loader__orbit {
    position: absolute;
    inset: 0;
    animation: orbit-loader-spin 1.4s linear infinite;
}

.orbit-loader__trail {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        transparent 0deg 60deg, var(--orbit-loader-orange) 180deg,
        transparent 180deg 240deg, var(--orbit-loader-teal) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

.orbit-loader__orbit::before,
.orbit-loader__orbit::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 50%;
}

.orbit-loader__orbit::before {
    top: -3px;
    background: var(--orbit-loader-teal);
    box-shadow: 0 0 10px 2px var(--orbit-loader-teal);
}

.orbit-loader__orbit::after {
    bottom: -3px;
    background: var(--orbit-loader-orange);
    box-shadow: 0 0 10px 2px var(--orbit-loader-orange);
}

@keyframes orbit-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes orbit-loader-breathe {
    0%, 100% {
        transform: scale(.92);
    }
    50% {
        transform: scale(1.04);
    }
}

@keyframes orbit-loader-shine {
    0% {
        background-position: 100% 0;
    }
    60%, 100% {
        background-position: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orbit-loader__logo,
    .orbit-loader__logo::after {
        animation: none;
    }

    .orbit-loader__orbit {
        animation-duration: 3s;
    }
}