@import './font.css';
@import url('https://fonts.cdnfonts.com/css/aquire');
/*font-family: 'Aquire', sans-serif;*/

:root {
    font-size: 18px;
    --z-index-counter: 1;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui;
}

#swiper-header-title {
    display: inline-block; /* Animasyonun düzgün çalışması için */
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 1;
    transform: translateY(0);
}
/* Yazı kaybolurken bu sınıfı JS ile ekleyeceğiz */
.header-fade-out {
    opacity: 0 !important;
    transform: translateY(15px) !important; /* Hafif aşağı kayar */
}

/* Yazı gelirken başlangıç noktası */
.header-fade-in {
    opacity: 0;
    transform: translateY(-15px); /* Yukarıdan başlar */
}

a{
    text-decoration: none;
    color: white;
}


.f-colmn{
    flex-direction: column !important;
}
.ovhiden{
    overflow: hidden;
}


.n1{
    z-index: 2;
    position: fixed;
}
.i1{
    z-index: 1;
    position: fixed;
}

body {
    margin: 0;
    /*background: linear-gradient(45deg, #000000, #025e5e);*/
    background-color: black;
    font-family: Arial, sans-serif;
    height: 100%;
    color: white;
    position: relative;
    overflow: hidden;
}

#mouse-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}


/* ========================== EFFECT GEÇİŞ ===================================*/
/* 1. Genel Gizleme ve Geçiş Hızı */
.reveal-item{
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

/* 2. Giriş Yönleri */
.slide-left { transform: translateX(-100%); }
.slide-right { transform: translateX(100%); }
.slide-up { transform: translateY(60px); }
.slide-down { transform: translateY(-60px); }

/* 3. Aktif Slayt (Giriş Efekti)
.swiper-slide-active .reveal-item {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}*/

/* 4. Çıkış Efekti (Slayt değişmeden hemen önce çalışan kısım)*/
.exit-now .reveal-item {
    opacity: 0 !important;
    transition: all 0.5s ease-in !important;
    transition-delay: 0s !important; /* Giderken sıra beklemesinler, toplu gitsinler */
}

/* Giriş hızı da biraz daha atak olabilir */
.swiper-slide-active .reveal-item {
    opacity: 1;
    transform: translate(0) !important;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}






/*========================= Header ======================================*/
header a {
    text-decoration: none;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
}

#lang {
    display: flex;
    align-items: center;
    font-size: 16px;
    opacity: 0.85;
}
#lang p{
    padding-right: 1rem;
}
#lang svg{
    margin-right: .3rem;
}
#lang select{
    border: 0;
    font-size: 1rem;
}
.header_section{
    position: fixed;
    left: 0;
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
    color: white;
    align-items: center;
}
.header_ust_section {
    padding: 2.5rem 0 0;
    top: 0px;
    opacity: 0;
    animation: acılıs 1s ease-in forwards 9s;
}
@keyframes acılıs {
    from{ opacity: 0;}
    to{ opacity:1;}

}




.header_ust_a img{
    width: auto;
    height: 35px;
    max-width: 20vw;
    object-fit: contain;
    min-width: 150px
}

.dropdown {
    position: relative;
    width: 70px; /* Küçük boyut */
    user-select: none;
}

.dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ccc;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 0 5px 5px;
    transition: color 0.3s;
}

.dropdown-header:hover {
    color: #fff;
}

.arrow {
    transition: transform 0.3s ease;
    color: #666;
}

/* Menü açıldığında ok dönsün */
.dropdown.active .arrow {
    transform: rotate(180deg);
}

.dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #111;
    border-radius: 4px;
    margin-top: 5px;
    overflow: hidden;
    /* Başlangıçta gizli ve kapalı efekti */
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.3s ease;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.dropdown.active .dropdown-list {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.option {
    text-decoration: none; /* Alt çizgiyi kaldırır */
    display: block;
    padding: 8px 10px;
    color: #aaa;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.option:hover {
    background: #222;
    color: #fff;
}


.header_alt_section{
    border-top: 1px solid #18191d;
    bottom: -80px;
    animation: footeracilis 1s ease-in forwards 9s;
}
@keyframes footeracilis {
    from{ bottom: -80px;}
    to{ bottom: 0px;}

}

.header_main_down{
    padding: 1rem 0;
}

.headeR_footer_left {
    display: flex;
    gap: 2rem;
    align-items: center;
}
.headeR_footer_text {
    display: flex;
    gap: 1.4rem;
    color: #8f8f8f;
    font-size: .8rem;
}
.headeR_footer_right img{
    height: 14px;
    width: auto;
}

.w-85{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fixed{
    position: fixed;
    width: 100%;
    height: 100%;
}



.swiper {
    width: 100%;
    height: 100%;
    perspective: 1500px; /* Bu değer ne kadar yüksekse derinlik o kadar gerçekçi olur */
}

.swiper-slide {
    font-size: 18px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-timing-function: ease-in-out;
    position: relative;
}
.swiper-slide:not(.swiper-slide-active){
    visibility: hidden;
}
.swiper-slide:not(.swiper-slide-active) > *{
    transition-duration: 0ms;
    visibility: hidden;
}

.swiper-pagination-bullet{
    transition: .7s ease all;
    position: relative;
}
.swiper-pagination-bullet-active{
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    box-shadow: 0px 0px 17px 4px #ffffff;
}

/* Dönme Animasyonu */
@keyframes daire {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.style_slider1{
    position: relative;
}

.main-wrapper {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(500px, 57vw);
    aspect-ratio: 1 / 1;
    top: calc(45% - min(250px, 28.5vw));
    /* Donanım hızlandırmasını zorla */
    transform: translateZ(0);
    will-change: transform;
    animation: rotateFull 50s linear 12s infinite;
}
.main-wrapper > svg{
    width: 100% !important;
}
.swiper-slide svg {
    position: absolute;
    width: 500px;
    aspect-ratio: 1 / 1;
    overflow: visible !important;
}

.neon-circle {
    fill: none;
    stroke: #b0bdc6;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;

    /* Akıcılık için kritik özellikler */
    will-change: stroke-dashoffset;
    transform: translateZ(0);

    /* Süreyi 3s yerine 4s yaparak daha pürüzsüz bir akış sağladık */
    animation: drawCircle 3s cubic-bezier(0.4, 0, 0.2, 1) 2s forwards;
}

.pulse-circle {
    fill: none;
    stroke: #61f6ff;
    stroke-width: 1;
    opacity: 0;
    filter: blur(1px) drop-shadow(0 0 5px #61f6ff);
    /* MERKEZLEME İÇİN KRİTİK EKLEME: */
    transform-origin: center;
    transform-box: fill-box;
}

.pulse-1 {
    animation: pulseEffect 3s ease-out 12s infinite;
}

.pulse-2 {
    animation: pulseEffect 3s ease-out 13.3s infinite;
}




.location-group {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    color: #00f2ff;
    text-shadow: 0 0 10px #00f2ff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    z-index: 10;
}

.marker {
    width: 4px;
    height: 15px;
    background-color: #fff;
    box-shadow: 0 0 10px #eefeff, 0 0 20px #eefeff;
    margin-bottom: 8px;
    border-radius: 2px;
}

.location-group{
    color: #eefeff;
}

/* Senin konumlandırmaların */
.dubai, .turkiye, .almanya{
    top: 50%;
    left: 50%;
    transform: translate(calc(cos(var(--deg)) * (min(500px, 57vw) / 2 - 2px) - 50%), calc(sin(var(--deg)) * (min(500px, 57vw) / 2 - 2px) - 50%)) rotate(calc(var(--deg) - 90deg)) !important;
}
.dubai {
    --deg: 0deg;
    animation: fadeIn 0.8s forwards 7s; /* Daire bittikten sonra başlar */
}
.turkiye {
    --deg: 120deg;
    animation: fadeIn 0.8s forwards 8s;
}
.almanya {
    --deg: 240deg;
    animation: fadeIn 0.8s forwards 9s;
}

@keyframes drawCircle {
    from { stroke-dashoffset: 283; }
    to { stroke-dashoffset: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rotateFull {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes pulseEffect {
    0% {
        transform: scale(1);
        opacity: 0.1;
    }
    100% {
        transform: scale(2); /* Biraz daha genişlettim daha belirgin olsun diye */
        opacity: 0;
    }
}


.slider_1_text{
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 10%;
    text-align: center;
    justify-content: center;
    gap: 2rem;
}
.slider_1_text h2{
    font-size: 2.2rem;
    letter-spacing: 1px;
    font-family: 'Aquire', sans-serif;
    font-weight: 400;
}
.slider_1_text a{
    padding: 1rem 2rem;
    font-size: .9rem;
    letter-spacing: 1px;
    border: 1px solid #8f8f8f;
    /* left: 33.33333%; */
    border-radius: 30px;
    position: relative;
    display: inline-block;
    /* top: 3.5rem; */
    transition: .5s ease box-shadow;
    font-family: sans-serif;
}
.slider_1_text a:hover{
    border: 1px solid #00f2ff;
    box-shadow: 0px 0px 10px #00f2ff;
}


.main_img{
    transform: scale(0);
    width: 100%;
    height: 110.5%;
    margin: 0 auto;
    position: absolute;
    display: flex;
    opacity: .7;
    animation: img_scale 3s ease-out forwards 5s;
}
@keyframes img_scale {
    0%{transform: scale(.95); filter: brightness(0) contrast(1.65); opacity: 0}
    62.5%{transform: scale(1);filter: brightness(.75) contrast(1.3); opacity: .7}
    100%{transform: scale(1);filter: brightness(1.2) contrast(1.1); opacity: .7}
}


/*========== where aı yazısı animasyon==============*/
.anim5s{
    animation: gecikme5s 1s ease-in forwards 7s !important;
    top: 4rem;
}
@keyframes gecikme5s {
    from{ top: 4rem;}
    to{top: 0;}

}

/*
#c{
    position: absolute;
    left: 50%;
    top: 41%;
    transform: translate(-50% , -50%);
}*/

.parcalar_yuvarlak {
    position: absolute;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 680px;
    aspect-ratio: 1 / 1;
    max-width: 80vw;
    /* overflow: hidden;*/
}

.parcalar_yuvarlak svg{
    width: 100%;
    height: 100%;
    transform: scale(1);
    opacity: 0;
    transition: 1s ease all;
    animation: d350low 3s ease-in 5s forwards, d-360 50s linear 12s infinite;
}
@keyframes d350low {
    0%{
        transform: scale(1.2) rotate(45deg);
        opacity: 0;
    }
    50%{
        transform: scale(1.2) rotate(0deg);
        opacity: 1;
    }
    100%{
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}
@keyframes d-360 {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(-360deg);
    }
}






/*========================= SLİDER 2 ======================================*/

.realslide_2:after{
    align-items: normal;
    box-shadow: inset 0px -84px 110px 160px black;
}
.neon2_hear{
    width: 100%;
    height: fit-content;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
}


.neon-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    width: min(650px, 70vw);
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}

/* Yeni klas ismin burada */

.swiper-slide-active .swiper1-neon,
.swiper-slide svg .neon-circle{
    /* Neon Parlama Efekti */
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px #6598e1) drop-shadow(0 0 30px #2c579d);
}
.swiper1-neon {
    width: 100% !important;
    height: 100% !important;
    filter: drop-shadow(0 0 4px #bdc4c7);

    transition: filter 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.path-left, .path-right {
    fill: none;
    stroke: #BFE4E9;
    stroke-width: 1.2;
    stroke-linecap: round;

    stroke-dasharray: 142;
    stroke-dashoffset: 142;

    transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.merkez {
    width: 100px;
    height: auto;
}

/* Swiper aktif olduğunda animasyonun başlaması */
.swiper-slide-active .path-left,
.swiper-slide-active .path-right {
    stroke-dashoffset: 0;
}
/* Swiper aktif olduğunda animasyonun başlaması */
.exit-now .path-left,
.exit-now .path-right {
    stroke-dashoffset: 142;
    transition: .8s ease all;
}





.slider_2_text_section{
    position: absolute;
    bottom: 8rem;
    z-index: 2;
}
.slider2_text{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.company{
    font-weight: 100;
    font-family: system-ui;
    letter-spacing: .7px;
    font-size: 1.4rem;
    text-transform: uppercase;
    display: inline-flex;
    position: relative;
    z-index: 1;
}
.w10r{
    width: 10rem;
}
.takes_shape{
    font-family: 'Aquire', sans-serif;
    font-size: 3.5rem;
    max-width: 35rem;
    font-weight: 400;
    line-height: 1;
}
.s2_acik{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.s2_acik_sol , .s2_acik_sag{
    font-size: 1rem;
    font-weight: 400;
    width: 30rem;
    letter-spacing: 1px;
}

/*======ortadaki yuvarlak========*/
.slider_2_effect_wrapper{
    position: relative;
    width: 252px;
    height: 252px;
    max-width: 70%;
    max-height: 70%;
}
.slider_2_effect_wrapper{
    opacity: 0;
    transform: rotate(0deg) scale(0);
    transition: all 1s cubic-bezier(0, 0.44, 0, 1);;
}
.swiper-slide-active .slider_2_effect_wrapper{
    opacity: 1;
    transform: rotate(0deg);
}
#slider_2_effect2 {
    height: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    animation: s2-rotate 50s linear 3s infinite;
}
@keyframes s2-rotate {
    from {
        transform: rotate(0deg) scale(1.26);
    }
    to{
        transform: rotate(360deg) scale(1.26);
    }
}
.exit-now .section2_canvas{
    opacity: 0;
    transform: scale(0);
}

.white{
    width: 2px;
    height: 2px;
    background-color: white;
    box-shadow: 0 -2px 6px 6px white;
    position: relative;
    display: flex;
    z-index: 3;
    border-radius: 30px;
    opacity: 0;
    transition: 1s ease opacity 1s;
}
.swiper-slide-active .white{
    opacity: 1;
}
.exit-now .white{
    opacity: 0;
    transition: .5s ease opacity !important;
}


.s2_sol_img, .s2_sag_img {
    width: clamp(300px, 550px, 33vw);
    position: relative;
    z-index: 1;
    filter: brightness(1.5);
}


.cizgii_svvg{
    position: relative !important;
    width: 200px !important;
    height: 300px !important;
    transform: scale(1.2);
}


.s2_sag_img{
    opacity: 0;
    transform: translateX(-400px) scale(0);
    transition: 3s ease all 1s;
    left: -70px;
    -webkit-mask-image: linear-gradient(to right, black 0%, black 80%,transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black 80%,transparent 100%); 
}
.s2_sol_img{
    opacity: 0;
    transform: translateX(400px) scale(0);
    transition: 3s ease all 1s;
    right: -70px;
    -webkit-mask-image: linear-gradient(to left, black 0%, black 80%,transparent 100%);
    mask-image: linear-gradient(to left, black 0%, black 80%,transparent 100%);
}
.swiper-slide-active .s2_sol_img, .swiper-slide-active .cizgii, .swiper-slide-active .s2_sag_img, .swiper-slide-active .cizgii-ters{
    opacity: .9;
    transform: translateX(0px) scale(1);
}
.cizgii-ters,.cizgii{
    opacity: 0;
    transition: 2s cubic-bezier(0.58, -0.02, 0, 1) all 1.5s;
}
.exit-now .cizgii-ters,.exit-now .cizgii{
    opacity: 0;
    transition: .5s cubic-bezier(0.58, -0.02, 0, 1) all !important;
}
.exit-now .s2_sag_img {
    opacity: 0;
    transform: translateX(-400px) scale(0);
    transition: .5s cubic-bezier(0.58, -0.02, 0, 1) all !important;
}
.exit-now .s2_sol_img {
    opacity: 0;
    transform: translateX(400px) scale(0);
    transition: .5s cubic-bezier(0.58, -0.02, 0, 1) all !important;
}

.thread {
    fill: none;
    stroke: #7693BC;
    stroke-width: 2; /* İnce çizgiler */
    stroke-linecap: round;

    /* 1. Katman: CSS Filtresi ile yumuşak parlama */
    filter: drop-shadow(0 0 10px #5A97D3) drop-shadow(0 0 5px #5A97D3) drop-shadow(0 0 10px #5A97D3);

    /* Sabit opaklık */
    opacity: .7;
}
    /*=====================SECTİON 2 BİTTİ===================*/








/*=====================SECTİON 3  ========================*/
.realslide_3{
    align-items: flex-start;
    box-shadow: inset 0px -84px 140px 190px black;
}

.s3_path{
    stroke: #A8BED8;
}

.hid_60_3,
.hid_60_5{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: transparent;
    -webkit-mask-image: linear-gradient(to bottom,
    black 0%,
    black 55%,
    transparent 65%
    );
    mask-image: linear-gradient(to bottom,
    black 0%,
    black 55%,
    transparent 65%
    );
}
.hid_60_5{   
    -webkit-mask-image: linear-gradient(to bottom,
    black 0%,
    black 90%,
    transparent 100%
    ) !important;
    mask-image: linear-gradient(to bottom,
    black 0%,
    black 90%,
    transparent 100%
    ) !important;
}
/* Scroll bar (kaydırma çubuğu) maskeyi bozmasın diye gerekirse gizleyebilirsin */
.hid_60_3::-webkit-scrollbar {
    width: 5px;
}
.neon3_hear{
    top: 45%;
    transform: translateY(-50%);
    width: 100%;
    position: absolute;
}
.neon5_hear{
    top: 100%;
    transform: translateY(-50%);
}

.golge3{
    width: 100%;
    height: 0;
    box-shadow: 0px 0px 16px 22px #0b101b;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%);
}

.s3_img_center_section{
    display: flex;
    gap: 2rem;
    position: absolute;
    align-items: center;
    top: 30%;
    transform: translateY(-50%);
}
.s3_parlak{
    width: 30px;
    height: 0px;
    position: relative;
    z-index: 1;
    border-radius: 50px;
    box-shadow: 0px 51px 94px 67px #7DA3CA;
    transition: 1s ease all 1s;
    opacity: 0;
}
.swiper-slide-active .s3_parlak{
    opacity: 1;
}
.exit-now .s3_parlak{
    opacity: 0;
    transition: .5s ease all;
}

.s3_img{
    width: min(430px, 25vw);
    height: min(280px, 19vw);
    filter: brightness(.9) drop-shadow(0px 0px 15px #7DA3CA);
}
.solgenis,
.saggenis{
    opacity: 0;
    transform: scale(0.25);
    transition-duration: 1s;
    transition-timing-function: 1s;
    transition-property: opacity, transform;
    transition-delay: 4s;
}
.saggenis{
    transition-delay: 5s;
}
.swiper-slide-active .solgenis, .swiper-slide-active .saggenis {
    opacity: 1;
    transform: scale(1);
}
.exit-now .saggenis , .exit-now .solgenis {
    opacity: 0; 
    transform: scale(0);
    transition: .5s ease all !important;
}

.s3_img_section{
    position: absolute;
    top: 30%;
}
.s3_img_human{
    width: min(170px, 15vw);
    height: auto;
    position: relative;
}
.l1{
    top: 20px;
    transition: 1s ease 2s !important;
}
.k1{
    top: 40px;
    transition: 1s ease 3s !important;
}
.c1{
    transition: 1s ease , 1s !important;
}
/*========================SECTİON 3 BİTTİ====================*/


/*========================SECTİON 4 =========================*/

.realslide_4:after{
    align-items: normal;
    box-shadow: inset 0px -84px 140px 190px black;
}
.neon4_hear {
    width: 50rem;
}
.s4_img_section{
    width: 90%;
    height: 90%;
    align-items: flex-start;
}
.s4_c_img{
    width: 100%;
    height: 100%;
}
.swiper-slide-active .s4_img_section {
    transform: scale(1);
    filter: brightness(1.5) contrast(1.1);
    opacity: .7;
    transition: 2s ease all 1s;
}
.s4_img_section,
.exit-now .s4_img_section {
    transform: scale(.95);
    filter: brightness(0) contrast(1.65);
    opacity: 0;
    transition: .75s ease all;
}
.exit-now .s4_img_section{
    transition-duration: .75s !important;
    transition-delay: 0s !important;
}

.s4_daire {
    stroke: #F5F7FC;
}
/*================SECTİON 4 BİTTİ============*/


/*================= SECTİON 5 =====================*/

.realslide_5{
    background-color: rgba(1,1,1,.3);
    display: flex;
    flex-direction: column;
    justify-content: normal;
    position: relative;
}
.realslide_5:after{
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    display: block;
    box-shadow: inset 0px -84px 300px 120px black;
    z-index: 1;
    pointer-events: none;
}
.hid_60_5{
    z-index: 2;
    bottom: 55%;
    position: absolute;
}


.yildiz_s5{
    position: absolute;
    width: 12px;
    height: 12px;
    top: 45%;
    z-index: 3;
    transform: translateY(-75%);
    background-color: #fff;
    border-radius: 50%;
    /* MERKEZDEN HER YÖNE SAÇILAN YOĞUN IŞIK */
    /* Burası ana patlamayı yapar. Katman katman ışık ekledik. */
    box-shadow:
            0 0 20px 20px #fff,               /* En iç çekirdek */
            0 0 70px 40px rgba(168, 190, 216,1), /* Orta yoğunluk */
            0 0 120px 60px rgba(168, 190, 216,0.6), /* Dışa yayılan hare */
            0 0 220px 100px rgba(168, 190, 216,0.4); /* Odayı aydınlatan son katman */
    opacity: 0;
    transition: opacity 1s ease-out .5s;
}
.swiper-slide-active .yildiz_s5,
.swiper-slide-active .yildiz_s5:before{
    opacity: 1;
}
.exit-now .yildiz_s5,
.exit-now .yildiz_s5:before{
    transition: opacity .5s ease-out;
    opacity: 0 !important;
}
/* YANLAR (Keskin ve parlak - Dokunmadık) */
.yildiz_s5::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 850px;
    height: 6px;
    /* Kademeli geçişi daha geniş aralıklarla ve ara renklerle yumuşattık */
    background: linear-gradient(to right,
    transparent 0%,
    rgba(168, 190, 216, 0.1) 10%,
    rgba(168, 190, 216, 0.4) 45%,
    rgba(255,255,255, 0) 50%, /* Tam merkez */
    rgba(168, 190, 216, 0.4) 55%,
    rgba(168, 190, 216, 0.1) 90%,
    transparent 100%
    );
    opacity: 0;
    transition: opacity 2s ease-out;
    /* Kenarların keskinliğini öldürmek için maskeleme benzeri yüksek blur */
    filter: drop-shadow(0 0 10px #6598e1) drop-shadow(0 0 30px #2c579d) blur(3px);
}

/* DİKEY (Geniş ve puslu - Dokunmadık) */
.yildiz_s5::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 120px; /* Boyu iyice kısaltıldı */
    background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 1) 0%,
    rgba(53, 133, 230, 0.4) 50%,
    rgba(255, 255, 255, 0) 80%);
    filter: blur(25px);
}

/*===========ALT ANİMASYON =================*/
.amination_5_section_cam {
    z-index: 1;
    width: 100%;
    min-width: 950px;
    aspect-ratio: 20 / 5;
    top: 45%;
    position: relative;
    overflow: visible;
}
.svg_s5_ef {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.s5_img{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 55%;
}

.s5-path{
    stroke-width: 0.075px;
    stroke: #fff;
    stroke-dashoffset: 142;
    stroke-dasharray: 142;
    transition: .75s stroke-dashoffset linear !important;
    transform: translateZ(0);
}
.swiper-slide-active .s5-path{
    stroke-dashoffset: 0;
    transition: .75s stroke-dashoffset linear .75s !important;
}
.exit-now .s5-path{
    stroke-dashoffset: 142;
    stroke-dasharray: 142;
    transition: .5s stroke-dashoffset linear !important;
}

.s5-path-main{
    stroke-width: .5px;
    stroke: #A8BED8;
    filter:
            drop-shadow(0 0 2px #fff)         /* En içteki parlak beyaz çekirdek */
            drop-shadow(0 0 4px #6598e1)      /* Ana renk parlaması */
            drop-shadow(0 0 6px #6598e1)      /* Yoğunluk katmanı */
            drop-shadow(0 0 10px #2c579d);
    transition: 1s stroke-dashoffset linear !important;
}
.s5-path-main-shadow{
    stroke-width: 10;
    stroke: rgba(101, 152, 225, .25);
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px #6598e1) drop-shadow(0 0 30px #2c579d) blur(10px);
}

.s5-airOrb{
    transform: scaleX(.75) scaleY(2.5);
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 1px #6598e1) blur(.15px);
    fill: #c4ddff;
}
.s5-airOrb-flare{
    z-index: 1;
    fill: #c4ddff;
    filter: drop-shadow(0 0 1px #6598e1) drop-shadow(0 0 1px #6598e1) drop-shadow(0 0 1px #6598e1) blur(.1px);
}

.s5-orb{
    /* Başlangıçta görünürlüğü kontrol edelim */
    opacity: 0;
    offset-rotate: 0deg !important;

    /* GÜÇLÜ VE BASİT PARLAMA */
    /* Tarayıcı uyumu için en temel neon efekti */

    /* Animasyonu zorla çalıştır */
    animation: none !important;
    position: relative;
}
.exit-now .s5-orb,
.exit-now .s5-airOrb{
    opacity: 0 !important;
    transition: .5s opacity !important;
}

.s5-orb-main {
    opacity: 1 !important;
    filter: drop-shadow(0 0 2px #6598e1) drop-shadow(0 0 2px #6598e1) drop-shadow(0 0 2px #6598e1) drop-shadow(0 0 3px #6598e1);
}









/* Slide aktif olduğunda tetikle */
.swiper-slide-active .s5-orb{
    animation-name: moveData !important;
    animation-duration: 6s !important; /* Genel bir süre */
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
}

/* Tekil Gecikmeler */
.swiper-slide-active .s5-orb:nth-of-type(1),.swiper-slide-active .s5-orb:nth-of-type(2)
{ animation-delay: 1.5s !important; animation-duration: 5s !important; }

.swiper-slide-active .s5-orb:nth-of-type(3),.swiper-slide-active .s5-orb:nth-of-type(4)
{ animation-delay: 3.5s !important; animation-duration: 6s !important; }

.swiper-slide-active .s5-orb:nth-of-type(5),.swiper-slide-active .s5-orb:nth-of-type(6)
{ animation-delay: 4.5s !important; animation-duration: 7s !important; }

.swiper-slide-active .s5-orb:nth-of-type(7),.swiper-slide-active .s5-orb:nth-of-type(8)
{ animation-delay: 6.5s !important; animation-duration: 8s !important; }

.swiper-slide-active .s5-orb:nth-of-type(9),
.swiper-slide-active .s5-orb:nth-of-type(10) { animation-delay: 1.25s !important; animation-duration: 6s !important; }
.swiper-slide-active .s5-orb:nth-of-type(11),
.swiper-slide-active .s5-orb:nth-of-type(12) { animation-delay: 2s !important; animation-duration: 7s !important; }
.swiper-slide-active .s5-orb:nth-of-type(13),
.swiper-slide-active .s5-orb:nth-of-type(14) { animation-delay: 2.5s !important; animation-duration: 8s !important; }
.swiper-slide-active .s5-orb:nth-of-type(15),
.swiper-slide-active .s5-orb:nth-of-type(16) { animation-delay: 1.5s !important; animation-duration: 7s !important; }
.swiper-slide-active .s5-orb-main { animation-delay: 1.5s !important; animation-duration: 7s !important; }

@keyframes moveData {
    0% { offset-distance: 0%; opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

.s5-line-follow {
    /* Tek satırda 3 katmanlı, çok yoğun parlama efekti */
    filter:
            drop-shadow(0 0 .1px #FFFFFF)
            drop-shadow(0 0 1px #FFFFFF)
            drop-shadow(0 0 5px #FFFFFF)
            drop-shadow(0 0 10px #FFFFFF);
    opacity: 1 !important;
    fill: white;
}
/*========================= SECTİON 5 BİTTİ ==========================*/






/*===================FOOTER_SECTİON==========*/
.main_footer_section{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 3;
}
.background_black_section{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 60%;
    text-align: center;
    position: relative;
}
.black_section_text{
    padding: 0 60px;
    position: absolute;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    align-items: center;
}
.bl_h3{
    font-size: 1.5rem;
    font-weight: 100;
}
.bl_h2{
    font-family: 'Aquire', sans-serif;
    font-size: 4.5rem;
    font-weight: 400;
}
.bl_rig_lef{
    display: flex;
    gap: 2rem;
    width: 100%;
    max-width: 65rem;
}
.bl_rig_lef .bl_p{
    font-size: 1.1rem;
    letter-spacing: 1px;
    font-weight: 200;
}

.bl_buton{
    display: flex;
}
.bl_buton .bl_buton_a{
    padding: 1.1rem 2rem;
    border-radius: 50px;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    font-size: 1rem;
    width: 25rem;
    position: relative;
    letter-spacing: 1px;
    font-weight: 200;
}
.bl_buton .bl_buton_a svg{
    width: 16px !important;
    height: 16px !important;
    right: 4rem;
    top: .95rem;
}



.footer_bottom{
    display: flex;
    width: 100%;
    height: 40%;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.footer_bottom img{
    width: 100%;
    height: 100%;
    opacity: .5 !important;
    filter: brightness(2);
}
.footer_text{
    position: absolute;
    right: 5rem;
    text-align: right;
    display: flex;
    flex-direction: column;
}
.fal_tec{
    color: #C0C1C3;
    font-weight: 400;
    font-size: .9rem;
}
.mombac , .mainz , .contact {
    color: #919296;
    font-weight: 100;
    font-size: .9rem;
}





.swiper-slide:before,
.swiper-slide:after{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: 1s opacity;
    opacity: 0;
}

.swiper-slide.swiper-slide-active:before{
    opacity: 1;
    background-image: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, .5) 20%, transparent 35%);
}
.swiper-slide.swiper-slide-active:first-child:before{
    opacity: 1;
    background-image: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, .5) 20%, transparent 50%);
}
.swiper-slide.swiper-slide-active:after{
    opacity: 1;
}

.parlak_6section {
    top: 0;
    left: 48%;
    transform: translateX(-50%);
}
.parlak_6section::before {
    width: 1000px;
}


/*====================FOOOTER END=================*/


/*================= SİTE YANSİMA====================*/
.kutu {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    opacity: 0;
    transform: scale(.5);
    transition: opacity 1s, transform 3s; /* Geçiş efektleri */
}
.yansima_yuvarlak {
    position: absolute;
    background-color: #B0BDC6;
    opacity: 1;
    border-radius: 50%;
    filter: blur(10px);
}
.swiper-wrapper:has(.swiper-slide-active) .kutu {
    opacity: .1;
    transform: scale(1);
}
.swiper-wrapper:has(.exit-now) .kutu {
    opacity: 0;
    transform: scale(1.5) !important;
    transition: 1s ease all !important;
}
.realslide_6 .kutu{
    z-index: 2;
}

/* Senin verdiğin koordinatlar */
.yansima_1  { left: 14%; top: 42%; width: 55px; height: 55px; }
.yansima_2  { left: 82%; top: 15%; width: 35px; height: 35px; }
.yansima_3  { left: 5%;  top: 78%; width: 65px; height: 65px; }
.yansima_4  { left: 91%; top: 63%; width: 80px; height: 75px; }
.yansima_5  { left: 27%; top: 12%; width: 40px; height: 40px; }
.yansima_6  { left: 56%; top: 89%; width: 30px; height: 30px; }
.yansima_7  { left: 38%; top: 54%; width: 50px; height: 50px; }
.yansima_8  { left: 74%; top: 31%; width: 70px; height: 70px; }
.yansima_9  { left: 19%; top: 94%; width: 45px; height: 45px; }
.yansima_10 { left: 47%; top: 5%;  width: 35px; height: 35px; }
.yansima_11 { left: 63%; top: 22%; width: 75px; height: 70px; }
.yansima_12 { left: 2%;  top: 36%; width: 55px; height: 55px; }
.yansima_13 { left: 85%; top: 85%; width: 30px; height: 30px; }
.yansima_14 { left: 41%; top: 71%; width: 60px; height: 60px; }
.yansima_15 { left: 69%; top: 47%; width: 40px; height: 40px; }
.yansima_16 { left: 11%; top: 18%; width: 80px; height: 80px; }
.yansima_17 { left: 94%; top: 8%;  width: 50px; height: 50px; }
.yansima_18 { left: 33%; top: 92%; width: 35px; height: 35px; }
.yansima_19 { left: 52%; top: 39%; width: 65px; height: 65px; }
.yansima_20 { left: 77%; top: 68%; width: 45px; height: 45px; }