/* ==========================================================================
   Açılış — logo ekranın ortasında büyük belirir (yapışma/damga hissi),
   kısa bekler, küçülüp sol üst köşeye süzülür ve orada kalır.
   ========================================================================== */

:root {
    /* Açılışta merkezdeki büyük logo boyu */
    --logo-boyut: min(38vmin, 20rem);
    --logo-ust:   calc(clamp(1rem, 3.5vw, 2rem) + env(safe-area-inset-top, 0px));
}

#intro-perde {
    position: fixed;
    inset: 0;
    z-index: var(--z-intro);
    background: #000;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1s ease;
}

#intro-perde.kapan { opacity: 0; }
#intro-perde.bitti { display: none; }

/* Darbe halkası */
#intro-perde::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60vmin;
    height: 60vmin;
    margin: -30vmin 0 0 -30vmin;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 238, 227, 0.16) 0%, rgba(185, 139, 82, 0.14) 38%, rgba(185, 139, 82, 0) 66%);
    opacity: 0;
    transform: scale(0.2);
    pointer-events: none;
}

#intro-perde.dalga::after {
    animation: darbeDalga 0.8s ease-out 0.25s forwards;
}

@keyframes darbeDalga {
    0%   { opacity: 0.9; transform: scale(0.2); }
    100% { opacity: 0;   transform: scale(2.4); }
}

/* Logo */
#intro-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    width: var(--logo-boyut);
    z-index: calc(var(--z-intro) + 1);
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.2);
    transform-origin: center center;
    filter: drop-shadow(0 0 40px rgba(244, 238, 227, 0.14));
    transition:
        opacity 0.55s ease,
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

#intro-logo picture,
#intro-logo img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* 1 — merkezde büyür ve oturur */
#intro-logo.oyna {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
}

/* 2 — küçülüp sol üst köşeye süzülür */
#intro-logo.yerlesti {
    top: calc(var(--logo-ust) + var(--logo-boyut) * 0.09);
    left: calc(clamp(1.1rem, 4vw, 2.4rem) + var(--logo-boyut) * 0.09);
    opacity: 0.92;
    transform: translate3d(-50%, -50%, 0) scale(0.18);
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
    transition:
        top 1.15s var(--ease),
        left 1.15s var(--ease),
        opacity 1.15s ease,
        transform 1.15s var(--ease),
        filter 1.15s ease;
}

/* Açılış bitince intro logosu solar — üst bardaki logo devralır */
body.hazir #intro-logo {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease 0.5s, transform 1.1s var(--ease), top 1.1s var(--ease), left 1.1s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    #intro-perde.dalga::after { animation: none; }
    #intro-logo { transition: opacity 0.4s ease, transform 0.4s ease; }
    #intro-logo.yerlesti {
        transition: opacity 0.4s ease, top 0.4s ease, left 0.4s ease, transform 0.4s ease;
    }
}