/* =========================================
   KARDEŞLER METAL - PAGE LOADER
========================================= */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            #252525 0%,
            #151515 45%,
            #080808 100%
        );

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}

.page-loader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    width: min(320px, 80vw);
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* METAL ANİMASYONU */

.metal-loader {
    width: 76px;
    height: 76px;

    position: relative;

    margin-bottom: 26px;

    animation: loaderRotate 3s linear infinite;
}

.metal-loader span {
    position: absolute;

    width: 22px;
    height: 22px;

    background: linear-gradient(
        135deg,
        #ffffff,
        #9d9d9d 45%,
        #484848
    );

    border-radius: 3px;

    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 0.7);
}

.metal-loader span:nth-child(1) {
    top: 0;
    left: 0;
}

.metal-loader span:nth-child(2) {
    top: 0;
    right: 0;
}

.metal-loader span:nth-child(3) {
    bottom: 0;
    right: 0;
}

.metal-loader span:nth-child(4) {
    bottom: 0;
    left: 0;
}


/* MARKA */

.loader-brand {
    text-align: center;
}

.loader-brand h2 {
    margin: 0;

    color: #ffffff;

    font-size: 27px;
    font-weight: 800;

    letter-spacing: 5px;
}

.loader-brand p {
    margin: 7px 0 0;

    color: #9d9d9d;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 5px;
}


/* PROGRESS LINE */

.loader-line {
    width: 100%;
    height: 2px;

    margin-top: 27px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.1);
}

.loader-line-progress {
    width: 40%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        #ffffff,
        transparent
    );

    animation: loaderProgress 1.3s ease-in-out infinite;
}


/* YÜKLENİYOR */

.loader-text {
    margin-top: 13px;

    color: #6f6f6f;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 4px;

    animation: loaderText 1.4s ease-in-out infinite;
}


/* ANIMATIONS */

@keyframes loaderRotate {

    0% {
        transform: rotate(0deg);
    }

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

@keyframes loaderProgress {

    0% {
        transform: translateX(-150%);
    }

    100% {
        transform: translateX(350%);
    }
}

@keyframes loaderText {

    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;
    }
}


/* MOBİL */

@media (max-width: 600px) {

    .loader-brand h2 {
        font-size: 22px;
        letter-spacing: 4px;
    }

    .loader-brand p {
        font-size: 9px;
        letter-spacing: 4px;
    }

    .metal-loader {
        width: 64px;
        height: 64px;
    }

    .metal-loader span {
        width: 19px;
        height: 19px;
    }
}


/* Hareket azaltma tercihi */

@media (prefers-reduced-motion: reduce) {

    .metal-loader,
    .loader-line-progress,
    .loader-text {
        animation: none;
    }

}
/* JavaScript kapalıyken de sayfa içeriği erişilebilir kalır. */
.page-loader { animation: loader-failsafe 0s 2s forwards; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .page-loader { display: none; } }