/* ==================================================================
   splash.css — açılış (giriş) ekranı
   ------------------------------------------------------------------
   Tasarım notu: metin tek bir cümledir ve iki satır halinde akar.
   Arkasına kutu/karartma lekesi KOYULMAZ; okunabilirlik, tüm ekranı
   kaplayan çok yumuşak bir gradyanla sağlanır. Böylece yazı bir
   "uyarı kutusu" gibi değil, sahnenin parçası gibi durur.
   ================================================================== */

#splash {
    position: fixed; inset: 0;
    z-index: var(--z-splash);
    overflow: hidden;
    background: #080909;
    display: flex; align-items: center; justify-content: center;
}

.splash-bg {
    position: absolute; inset: 0;
    background: #080909 url('../images/splash-bg.jpg') center / cover no-repeat;
}
/* Sahne geneline yayılan yumuşak karartma — kenarı belli olmaz */
.splash-bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(6,6,8,.55) 0%, rgba(6,6,8,.20) 34%, rgba(6,6,8,.10) 55%, rgba(6,6,8,.55) 100%),
        radial-gradient(120% 90% at 50% 42%, rgba(6,6,8,.42) 0%, transparent 62%);
    pointer-events: none;
}
.splash-bg video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: none;
}

.splash-inner {
    position: relative;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 24px;
}

/* Yerleşim: logo üstte, metin ortada, ok altta. Mercekler ortada
   dönerek dolaştığı için üçü de onlarla çakışmaz. */
.splash-text {
    position: relative;
    max-width: 980px;       /* geniş ama satırlar 3'ü geçmesin */
    width: 100%;
    z-index: 4;             /* mercekler METNİN ÜSTÜNDEN geçer (z-index:8) */
}

/* Metnin üstündeki ince turuncu çizgi */
.splash-rule {
    display: block;
    width: 52px; height: 2px;
    margin: 0 auto 34px;
    background: var(--color-accent, #f36b21);
    transform-origin: center;
    animation: splashRule .9s cubic-bezier(.2,.8,.2,1) both;
}

.splash-lead {
    font-size: clamp(20px, 1.95vw, 34px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.028em;
    color: #fff;
    /* Yazının merceklerin üzerinden geçtiği yerlerde de net kalması için
       geniş yayılımlı, kenarı belli olmayan gölge. */
    text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 4px 30px rgba(0,0,0,.55);
}

/* Her satır sırayla yumuşakça belirir */
.splash-line {
    display: block;
    text-wrap: balance;
    opacity: 0;
    animation: splashIn 1s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc(.25s + var(--i, 0) * .22s);
}
/* İkinci cümle daha küçük ve ince — manşetin altındaki destek satırı.
   Bu hiyerarşi, iki cümlenin tek blok halinde yığılmasını önler. */
.splash-line + .splash-line {
    /* Destek satırı: manşetten küçük ama okunur; iki satıra sarsın
       diye genişliği sınırlı tutuluyor. */
    max-width: 760px;
    margin: .7em auto 0;
    font-size: .645em;      /* manşetin ~2/3'ü — fark artık yumuşak */
    font-weight: 350;
    line-height: 1.45;
    letter-spacing: -.012em;
    color: rgba(255,255,255,.8);
}

@keyframes splashIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes splashRule {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

/* --- Mercekler (metnin arkasında kalır) --- */
/* Mercekler metnin ÖNÜNDE dolaşır — cam efekti yazının üstünden geçer */
.lens-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.lens { position: absolute; top: 0; left: 0; z-index: 1; will-change: transform; }
.lens-1 { width: clamp(190px, 21vw, 350px); aspect-ratio: 421/337; }
.lens-2 { width: clamp(215px, 25vw, 400px); aspect-ratio: 568/631; }

/* Mercek görselleri olduğu gibi kullanılır — üzerine CSS efekti
   (blur/backdrop-filter vb.) eklenmez. Görselin kendi cam dokusu
   ve parlamaları yeterlidir. */
.lens img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}

/* --- Logo ve aşağı oku --- */
.splash-logo {
    position: absolute;
    top: clamp(30px, 6vh, 62px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    animation: splashLogoIn 1s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: .1s;
}
.splash-logo img { height: 42px; width: auto; }
@keyframes splashLogoIn {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.scroll-down {
    position: absolute;
    bottom: clamp(26px, 5vh, 54px);
    left: 50%;
    margin-left: -23px;
    width: 46px; height: 46px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    z-index: 6;
    animation: splashFadeIn .9s cubic-bezier(.2,.8,.2,1) .95s both, bounceDown 2.4s ease-in-out 1.9s infinite;
    transition: border-color .25s ease, background .25s ease;
}
.scroll-down:hover { border-color: var(--color-accent, #f36b21); background: rgba(243,107,33,.14); }
.scroll-down svg { width: 18px; }
@keyframes splashFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bounceDown { 50% { transform: translateY(7px); } }

#splash.is-leaving {
    transition: transform 1s cubic-bezier(.2,.75,.2,1), opacity .85s ease;
    transform: translateY(-12%);
    opacity: 0;
    pointer-events: none;
}
#splash.is-hidden { display: none; }

@media (max-width: 640px) {
    .splash-text { max-width: 100%; }
    .splash-rule { margin-bottom: 22px; width: 40px; }
    .splash-lead { font-size: 21px; line-height: 1.32; }
    /* Dar ekranda destek satırı fazla küçülüyordu */
    .splash-line + .splash-line { font-size: .7em; margin-top: .72em; line-height: 1.5; }
    .splash-logo img { height: 34px; }

    .scroll-down { width: 42px; height: 42px; margin-left: -21px; }
}

@media (prefers-reduced-motion: reduce) {
    .splash-line, .splash-rule, .splash-logo, .scroll-down { animation: none; opacity: 1; }
}