:root {
    --ecc-navy: #08142b;
    --ecc-navy-deep: #020713;
    --ecc-blue: #1ed2ff;
    --ecc-blue-light: #d7fbff;
    --ecc-white: #ffffff;
    --loader-exit-duration: 350ms;
    --hands-arrival-duration: 1.3s;
    --meeting-x: 50%;
    --meeting-y: 54%;
}

/* =====================================
   GENEL AYARLAR
   ===================================== */

.ecc-loader,
.ecc-loader *,
.ecc-loader *::before,
.ecc-loader *::after {
    box-sizing: border-box;
}

/* Loader açıkken sayfanın kaymasını engeller */
html.is-loading,
body.is-loading {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.is-loading {
    touch-action: none;
}

/* =====================================
   ANA LOADER
   ===================================== */

.ecc-loader {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    isolation: isolate;
    color: var(--ecc-white);
    background-color: var(--ecc-navy-deep);
    opacity: 1;
    visibility: visible;
    transition: opacity var(--loader-exit-duration) ease, visibility 0s linear var(--loader-exit-duration);
}

    .ecc-loader.is-leaving {
        opacity: 0;
        visibility: hidden;
    }

    .ecc-loader[hidden] {
        display: none !important;
    }

/* =====================================
   ARKA PLAN
   ===================================== */

.ecc-loader__background {
    position: absolute;
    z-index: 0;
    inset: -3%;
    background-color: var(--ecc-navy-deep);
    background-image: url("/Assets/img/ecc-loader/hands-background-clean.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
    filter: saturate(1.05) contrast(1.02);
    transform: scale(1.03);
    transform-origin: center;
}

    .ecc-loader__background::after {
        position: absolute;
        inset: 0;
        content: "";
        pointer-events: none;
        background: radial-gradient( circle at var(--meeting-x) var(--meeting-y), rgba(12, 153, 198, 0.18), transparent 31% ), linear-gradient( 180deg, rgba(2, 7, 19, 0.12), transparent 34%, rgba(2, 7, 19, 0.18) );
    }

/* =====================================
   ELLER
   ===================================== */

.ecc-loader__hand {
    position: absolute;
    z-index: 3;
    top: var(--meeting-y);
    left: var(--meeting-x);
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

    .ecc-loader__hand img {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
        filter: drop-shadow( 0 26px 34px rgba(0, 0, 0, 0.42) );
    }

/* İnsan eli başlangıç konumu */
.ecc-loader__hand--human {
    width: clamp(500px, 51vw, 960px);
    transform: translate( calc(-93% - 48vw), calc(-3% + 42vh) ) rotate(-4deg);
}

/* Robot eli başlangıç konumu */
.ecc-loader__hand--robot {
    width: clamp(515px, 52vw, 960px);
    transform: translate( calc(2% + 48vw), calc(-68% - 42vh) ) rotate(4deg);
}

/* İnsan eli hareketi */
.ecc-loader.is-animating
.ecc-loader__hand--human {
    animation: ecc-human-arrive var(--hands-arrival-duration) cubic-bezier(0.16, 0.72, 0.19, 1) 80ms forwards;
}

/* Robot eli hareketi */
.ecc-loader.is-animating
.ecc-loader__hand--robot {
    animation: ecc-robot-arrive var(--hands-arrival-duration) cubic-bezier(0.16, 0.72, 0.19, 1) 80ms forwards;
}

/* =====================================
   TEMAS IŞIĞI
   ===================================== */

.ecc-loader__contact {
    position: absolute;
    z-index: 6;
    top: var(--meeting-y);
    left: var(--meeting-x);
    width: 12px;
    height: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.12);
}

.ecc-loader.is-animating
.ecc-loader__contact {
    animation: ecc-contact-reveal 850ms ease 1.3s forwards;
}

.ecc-loader__contact-halo,
.ecc-loader__contact-flash,
.ecc-loader__contact-core,
.ecc-loader__contact-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Temas ışığının çevresindeki parlama */
.ecc-loader__contact-halo {
    width: min(390px, 46vw);
    aspect-ratio: 1;
    background: radial-gradient( circle, rgba(255, 255, 255, 1) 0%, rgba(231, 252, 255, 0.96) 8%, rgba(122, 232, 250, 0.66) 25%, rgba(33, 201, 239, 0.3) 48%, transparent 73% );
    filter: blur(8px);
    mix-blend-mode: screen;
}

/* Yatay ışık çizgisi */
.ecc-loader__contact-flash {
    width: min(560px, 68vw);
    height: 2px;
    background: linear-gradient( 90deg, transparent, rgba(215, 251, 255, 0.82), #ffffff, rgba(215, 251, 255, 0.82), transparent );
    box-shadow: 0 0 28px rgba(30, 210, 255, 0.92);
}

/* Merkez temas noktası */
.ecc-loader__contact-core {
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    box-shadow: 0 0 8px #ffffff, 0 0 26px var(--ecc-blue-light), 0 0 62px var(--ecc-blue), 0 0 126px rgba(30, 210, 255, 0.9);
}

/* Temas halkaları */
.ecc-loader__contact-ring {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(215, 251, 255, 0.88);
}

.ecc-loader.is-animating
.ecc-loader__contact-ring--one {
    animation: ecc-ring-pulse 850ms ease-out 1.4s infinite;
}

.ecc-loader.is-animating
.ecc-loader__contact-ring--two {
    animation: ecc-ring-pulse 850ms ease-out 1.58s infinite;
}

/* =====================================
   KENAR GÖLGESİ
   ===================================== */

.ecc-loader__shade {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( 180deg, rgba(2, 7, 19, 0.34) 0%, transparent 25%, transparent 78%, rgba(2, 7, 19, 0.26) 100% ), radial-gradient( circle at var(--meeting-x) var(--meeting-y), transparent 27%, rgba(2, 6, 15, 0.24) 100% );
    box-shadow: inset 0 0 130px rgba(0, 0, 0, 0.36);
}

/* =====================================
   ECC LOGOSU
   ===================================== */

.ecc-loader__logo {
    position: absolute;
    z-index: 7;
    top: max( clamp(26px, 5vh, 60px), env(safe-area-inset-top) );
    left: 50%;
    display: block;
    width: clamp(250px, 32vw, 470px);
    max-width: calc(100vw - 48px);
    height: auto;
    max-height: 15vh;
    margin: 0;
    padding: 0;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow( 0 8px 22px rgba(0, 0, 0, 0.48) );
    transform: translate(-50%, -14px) scale(0.97);
}

.ecc-loader.is-animating
.ecc-loader__logo {
    animation: ecc-logo-reveal 600ms cubic-bezier(0.2, 0.78, 0.2, 1) 1.78s forwards;
}

/* =====================================
   ANİMASYONLAR
   ===================================== */

/* İnsan eli animasyonu */
@keyframes ecc-human-arrive {
    0% {
        opacity: 0;
        transform: translate( calc(-93% - 48vw), calc(-3% + 42vh) ) rotate(-4deg);
    }

    14% {
        opacity: 1;
    }

    88% {
        opacity: 1;
        transform: translate(-93.3%, -2.2%) rotate(0.4deg);
    }

    100% {
        opacity: 1;
        transform: translate(-94.5%, -3%) rotate(0deg);
    }
}

/* Robot eli animasyonu */
@keyframes ecc-robot-arrive {
    0% {
        opacity: 0;
        transform: translate( calc(2% + 48vw), calc(-68% - 42vh) ) rotate(4deg);
    }

    14% {
        opacity: 1;
    }

    88% {
        opacity: 1;
        transform: translate(2.3%, -67.2%) rotate(-0.4deg);
    }

    100% {
        opacity: 1;
        transform: translate(3.5%, -68%) rotate(0deg);
    }
}

/* Temas noktası animasyonu */
@keyframes ecc-contact-reveal {
    0%, 8% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.12);
    }

    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }

    64%, 100% {
        opacity: 0.94;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Işık halkası animasyonu */
@keyframes ecc-ring-pulse {
    0% {
        opacity: 0.92;
        transform: translate(-50%, -50%) scale(0.3);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(6.3);
    }
}

/* Logo görünme animasyonu */
@keyframes ecc-logo-reveal {
    from {
        opacity: 0;
        transform: translate(-50%, -14px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

/* =====================================
   TABLET VE TELEFON
   ===================================== */

@media (max-width: 767px) {
    :root {
        --meeting-y: 53%;
    }

    .ecc-loader__hand--human {
        width: 100vw;
    }

    .ecc-loader__hand--robot {
        width: 102vw;
    }

    .ecc-loader__logo {
        top: max( clamp(22px, 4.5vh, 44px), env(safe-area-inset-top) );
        width: min(76vw, 390px);
        max-width: calc(100vw - 32px);
    }

    .ecc-loader__contact-halo {
        width: min(330px, 72vw);
    }

    .ecc-loader__contact-flash {
        width: 86vw;
    }

    .ecc-loader__shade {
        box-shadow: inset 0 0 72px rgba(0, 0, 0, 0.32);
    }
}

/* =====================================
   KÜÇÜK TELEFONLAR
   ===================================== */

@media (max-width: 480px) {
    .ecc-loader__hand--human {
        width: 108vw;
    }

    .ecc-loader__hand--robot {
        width: 110vw;
    }

    .ecc-loader__logo {
        width: min(78vw, 330px);
    }
}

/* =====================================
   YATAY TELEFON
   ===================================== */

@media (max-height: 590px) and (orientation: landscape) {
    :root {
        --meeting-y: 58%;
    }

    .ecc-loader__hand--human {
        width: 52vw;
    }

    .ecc-loader__hand--robot {
        width: 53vw;
    }

    .ecc-loader__logo {
        top: max( 14px, env(safe-area-inset-top) );
        width: min(320px, 36vw);
        max-height: 18vh;
    }
}

/* =====================================
   HAREKET AZALTMA TERCİHİ
   ===================================== */

@media (prefers-reduced-motion: reduce) {
    .ecc-loader {
        transition-duration: 1ms;
    }

        .ecc-loader.is-animating
        .ecc-loader__hand--human,
        .ecc-loader.is-animating
        .ecc-loader__hand--robot,
        .ecc-loader.is-animating
        .ecc-loader__contact,
        .ecc-loader.is-animating
        .ecc-loader__contact-ring,
        .ecc-loader.is-animating
        .ecc-loader__logo {
            animation-duration: 1ms;
            animation-delay: 0ms;
        }
}