{% extends 'base.html.twig' %}
{% block metaTitle %}{{ meta.title|default }}{% endblock %}
{% block metaDescription %}{{ meta.description|default }}{% endblock %}
{% block stylesheets %}
    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

{#    <link href="{{ asset('assets/css/hh/earth-animation.css') }}" rel="stylesheet" type="text/css">#}
{#    <link rel="stylesheet" href="{{ asset('assets/css/hh/style.css') }}">#}


    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
    <script type="text/javascript">
        WebFont.load({
            google: {
                families: ["Red Hat Display:300,regular,500,600,700,900"]
            }
        });
    </script>
    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.161/build/three.module.js",
                "jsm/": "https://cdn.jsdelivr.net/npm/three@0.161/examples/jsm/"
            }
        }
    </script>
    <style>
        .slider-wrapper {
            width: 100%;
            max-width: 300px;
            margin: 30px auto 0;
        }

        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .scan-img._5 {
            width: 75%;
            height: auto;
            opacity: 0;
            transition: opacity 1s;
        }

        .swiper-slide-active .scan-img._5 {
            opacity: 1;
        }
    </style>

    <style>
        .dyenix_navbar_fixed.scrolled {
            padding: 0 7.5%;
        }

        .swiper-container-wrapper--timeline .swiper-slide {
            display: flex;
            background: transparent;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            height: 100%;
        }

        .swiper-container-wrapper,
        .swiper,
        .swiper-wrapper {
            height: 100% !important;
        }

        .swiper-container-wrapper--timeline .swiper-slide .container {
            padding: 0;
            width: 100%;
        }

        .swiper-container-wrapper--timeline .swiper-slide .title {
            font-size: 18px;
            opacity: 0;
            transition: 0.5s ease 0.5s;
        }

        .swiper-container-wrapper--timeline .swiper-slide .title h2 {
            color: #fff;
            font-size: 9vh;
            font-family: 'titillium_bold';
            letter-spacing: 2px;
            font-weight: 900;
            line-height: 8.5vh;
            margin-bottom: 3vh;
        }

        .swiper-container-wrapper--timeline .swiper-slide .title p {
            font-size: 2.2vh;
            color: rgba(255, 255, 255, 0.75);
            font-weight: lighter;
            letter-spacing: 1px;
            font-family: 'titilliumWeb_light';
        }

        .swiper-container-wrapper--timeline .swiper-slide-active .title {
            opacity: 1;
        }

        .swiper-container-wrapper--timeline .swiper-pagination-progressbar {
            position: relative;
            margin-bottom: 70px;
            background-color: transparent;
            height: 4px;
            border-bottom: 1px solid #a5a8b5;
            width: 50%;
        }

        .swiper-container-wrapper--timeline .swiper-pagination-progressbar-fill {
            background-color: #c41329;
            height: 2px;
            top: 2px;
        }

        .color_red {
            color: #c41329;
        }

        .swiper-container-wrapper--timeline .swiper-pagination-custom {
            position: relative;
            list-style: none;
            margin: 1rem 0;
            padding: 0;
            display: flex;
            line-height: 0;
            bottom: 0;
            z-index: 11;
            width: 50%;
            display: flex;
            justify-content: space-between;
        }

        .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch {
            position: relative;
            width: 0;
            height: 30px;
            margin-bottom: -30px;
            display: block;
        }

        .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch .switch-title {
            position: absolute;
            font-weight: 400;
            right: 0;
            transform: translateX(50%);
            transition: 0.2s all ease-in-out;
            transition-delay: 0s;
            cursor: pointer;
            z-index: 1;
        }

        .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch .switch-title:after {
            position: absolute;
            top: calc(100% + 19px);
            right: 50%;
            transform: translateX(50%) translateY(-50%);
            width: 12px;
            height: 12px;
            background: #c41329;
            border-radius: 2rem;
            content: "";
            transition: 0.2s all ease-in-out;
            transition-delay: 0s;
            z-index: 1;
        }

        .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active .switch-title {
            font-weight: 400;
            transition-delay: 0.4s;
        }

        .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active .switch-title:after {
            background: #fff;
            border: 3px solid #c41329;
            width: 16px;
            height: 16px;
            transition-delay: 0.4s;
        }

        .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active ~ .swiper-pagination-switch .switch-title {
            color: #fff;
        }

        .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active ~ .swiper-pagination-switch .switch-title:after {
            background: #a5a8b5;
        }

        .pagition_div_abs {
            position: absolute;
            left: 0;
            top: 55%;
            left: -15%;
            width: 35%;
            z-index: 10;
            transform: rotate(90deg);
        }

        .pagititon_div_rel {
            position: relative;
            width: 100%;
        }
    </style>
{% endblock %}
{% block body %}
    {% set earthSection = getPageSections({'alias': 'Dünya Animasyonu Kısmı', 'multipleData': true}) %}
    <div id="earth-container">
        <script type="module">
            import * as THREE from "three";
            import {OrbitControls} from "jsm/controls/OrbitControls.js";

            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.2, 1000);
            camera.position.set(1, 1, 2);
            const renderer = new THREE.WebGLRenderer({antialias: true});

            function updateCameraPosition() {
                const width = window.innerWidth;

                if (width < 600) {
                    // Mobil cihazlar için daha uzak kamera
                    camera.position.set(1, 1, 6);
                } else if (width < 1500) {
                    // Tablet için
                    camera.position.set(1, 1, 3);
                } else {
                    // Masaüstü için
                    camera.position.set(1, 1, 2);
                }
            }

            // Başlangıçta çalıştır
            updateCameraPosition();

            // Pencere yeniden boyutlandırıldığında güncelle
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
                updateCameraPosition();
            });

            renderer.setClearColor(0x000000, 0); // BG Opaklık
            renderer.setSize(innerWidth, innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            document.getElementById('earth-container').appendChild(renderer.domElement);

            const orbitCtrl = new OrbitControls(camera, renderer.domElement);
            orbitCtrl.enableDamping = true;
            orbitCtrl.enableZoom = false;
            orbitCtrl.enableRotate = true; // Kamera dönmesi aktif, zoom kapalı

            // TextureLoader ile arka plan resmini yükleyin
            const textureLoader = new THREE.TextureLoader();
            const backgroundTexture = textureLoader.load('{{ asset('assets/img/dd-1.jpg') }}');
            backgroundTexture.minFilter = THREE.LinearFilter;
            backgroundTexture.magFilter = THREE.LinearFilter;
            backgroundTexture.encoding = THREE.sRGBEncoding;
            scene.background = backgroundTexture;

            backgroundTexture.wrapS = THREE.RepeatWrapping;
            backgroundTexture.wrapT = THREE.RepeatWrapping;
            backgroundTexture.repeat.set(1, 1);

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);

            const globeGroup = new THREE.Group();
            scene.add(globeGroup);

            globeGroup.position.set(1.4, 0.1, 0.6);
            globeGroup.scale.set(0.7, 0.7, 0.7);
            globeGroup.rotation.set(0, Math.PI / 4, 0);

            const geo = new THREE.IcosahedronGeometry(1, 10);
            const mat = new THREE.MeshBasicMaterial({
                color: 0x5e5e5e,
                wireframe: true,
                opacity: 0.1,
                transparent: true,
            });
            const cube = new THREE.Mesh(geo, mat);
            globeGroup.add(cube);

            const detail = 100;
            const pointsGeo = new THREE.IcosahedronGeometry(1, detail);

            const vertexShader = `
uniform float size;
uniform sampler2D elevTexture;
varying vec2 vUv;
varying float vVisible;

void main() {
    vUv = uv;
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    float elv = texture2D(elevTexture, vUv).r;
    vec3 vNormal = normalMatrix * normal;
    vVisible = step(0.0, dot(-normalize(mvPosition.xyz), normalize(vNormal)));
    mvPosition.z += 0.10 * elv;
    gl_PointSize = size;
    gl_Position = projectionMatrix * mvPosition;
}`;

            const fragmentShader = `
uniform sampler2D colorTexture;
uniform sampler2D alphaTexture;
varying vec2 vUv;
varying float vVisible;

void main() {
    if (floor(vVisible + 0.1) == 0.0) discard;
    float alpha = 1.0 - texture2D(alphaTexture, vUv).r;
    vec3 color = texture2D(colorTexture, vUv).rgb;
    gl_FragColor = vec4(color, alpha * 0.1);
}`;

            const uniforms = {
                size: {type: "f", value: 4.0},
                colorTexture: {type: "t", value: textureLoader.load("{{ asset('assets/img/04_rainbow1k.jpg') }}")},
                elevTexture: {type: "t", value: textureLoader.load("{{ asset('assets/img/01_earthbump1k.jpg') }}")},
                alphaTexture: {type: "t", value: textureLoader.load("{{ asset('assets/img/02_earthspec1k.jpg') }}")}
            };

            const pointsMat = new THREE.ShaderMaterial({
                uniforms: uniforms,
                vertexShader,
                fragmentShader,
                transparent: true
            });

            const points = new THREE.Points(pointsGeo, pointsMat);
            globeGroup.add(points);

            const hemiLight = new THREE.HemisphereLight(0xffffff, 0x080820, 3);
            scene.add(hemiLight);

            // Marker'ları 2D yap ve yuvarlak hale getir
            const markerTexture = new THREE.TextureLoader().load('{{ asset('assets/img/white_circle.png') }}'); // Yuvarlak bir doku kullan
            const markerMaterial = new THREE.SpriteMaterial({
                map: markerTexture,
                color: 0xFFFFFF,
                transparent: true
            });

            // Koordinatları gezegenin yüzeyine yerleştir
            function latLonToXYZ(lat, lon, radius) {
                const phi = (90 - lat) * (Math.PI / 180); // Latitude'yu doğru hesapla
                const theta = -(lon + 180) * (Math.PI / 180); // Negatif longitude

                const x = radius * Math.sin(phi) * Math.cos(theta); // X ekseni hesaplama
                const y = radius * Math.cos(phi); // Y ekseni hesaplama
                const z = radius * Math.sin(phi) * Math.sin(theta); // Z ekseni hesaplama
                return {x, y, z};
            }

            function create3DLabel(text, position, offset) {
                const spriteMaterial = new THREE.SpriteMaterial({
                    map: new THREE.CanvasTexture(generateLabelTexture(text)),
                    transparent: true
                });

                const sprite = new THREE.Sprite(spriteMaterial);
                sprite.scale.set(0.15, 0.075, 1); // Etiket boyutu
                sprite.position.set(position.x, position.y, position.z);

                globeGroup.add(sprite);
                return sprite;
            }

            // 2D etiket için dokuyu oluştur
            function generateLabelTexture(text) {
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                context.font = '18px proxima, sans-serif';
                context.fillStyle = 'white';
                context.fillText(text, 0, 80);

                return canvas;
            }

            const turkeyPos = latLonToXYZ(38.9637, 35.2433, 1.03); // Türkiye
            const switzerlandPos = latLonToXYZ(45.1, 15.2, 1.03); // Hırvatistan
            const germanyPos = latLonToXYZ(51.1657, 10.4515, 1.03); // Almanya
            const americaPos = latLonToXYZ(37.0902, -95.7129, 1.03); // Amerika
            const chinaPos = latLonToXYZ(35.8617, 104.1954, 1.03); // Çin
            const russiaPos = latLonToXYZ(55.7558, 37.6173, 1.03); // Rusya
            const indiaPos = latLonToXYZ(20.5937, 78.9629, 1.03); // Hindistan
            const japanPos = latLonToXYZ(36.2048, 138.2529, 1.03); // Japonya
            const labels = {};

            const markerAmerika = new THREE.Sprite(markerMaterial);
            markerAmerika.scale.set(0.03, 0.03, 1); // Marker boyutu
            markerAmerika.position.set(americaPos.x, americaPos.y, americaPos.z);
            globeGroup.add(markerAmerika);
            const labelAmerika = create3DLabel('UNITED STATES', americaPos, 0.3);
            labels['UNITED STATES'] = labelAmerika;

            const markerTurkey = new THREE.Sprite(markerMaterial);
            markerTurkey.scale.set(0.03, 0.03, 1);
            markerTurkey.position.set(turkeyPos.x, turkeyPos.y, turkeyPos.z);
            globeGroup.add(markerTurkey);
            const labelTurkey = create3DLabel('TURKEY', turkeyPos, 0.3);
            labels['TURKEY'] = labelTurkey;

            const markerSwitzerland = new THREE.Sprite(markerMaterial);
            markerSwitzerland.scale.set(0.03, 0.03, 1);
            markerSwitzerland.position.set(switzerlandPos.x, switzerlandPos.y, switzerlandPos.z);
            globeGroup.add(markerSwitzerland);
            const labelSwitzerland = create3DLabel('CROATIA', switzerlandPos, 0.3);
            labels['CROATIA'] = labelSwitzerland;

            const markerGermany = new THREE.Sprite(markerMaterial);
            markerGermany.scale.set(0.03, 0.03, 1);
            markerGermany.position.set(germanyPos.x, germanyPos.y, germanyPos.z);
            globeGroup.add(markerGermany);
            const labelGermany = create3DLabel('GERMANY', germanyPos, 0.3);
            labels['GERMANY'] = labelGermany;

            const markerChina = new THREE.Sprite(markerMaterial);
            markerChina.scale.set(0.03, 0.03, 1);
            markerChina.position.set(chinaPos.x, chinaPos.y, chinaPos.z);
            globeGroup.add(markerChina);
            const labelChina = create3DLabel('CHINA', chinaPos, 0.3);
            labels['CHINA'] = labelChina;

            const markerRussia = new THREE.Sprite(markerMaterial);
            markerRussia.scale.set(0.03, 0.03, 1);
            markerRussia.position.set(russiaPos.x, russiaPos.y, russiaPos.z);
            globeGroup.add(markerRussia);
            const labelRussia = create3DLabel('RUSSIA', russiaPos, 0.3);
            labels['RUSSIA'] = labelRussia;

            const markerIndia = new THREE.Sprite(markerMaterial);
            markerIndia.scale.set(0.03, 0.03, 1);
            markerIndia.position.set(indiaPos.x, indiaPos.y, indiaPos.z);
            globeGroup.add(markerIndia);
            const labelIndia = create3DLabel('INDIA', indiaPos, 0.3);
            labels['INDIA'] = labelIndia;

            const markerJapan = new THREE.Sprite(markerMaterial);
            markerJapan.scale.set(0.03, 0.03, 1);
            markerJapan.position.set(japanPos.x, japanPos.y, japanPos.z);
            globeGroup.add(markerJapan);
            const labelJapan = create3DLabel('JAPAN', japanPos, 0.3);
            labels['JAPAN'] = labelJapan;

            const raycaster = new THREE.Raycaster();
            const mouse = new THREE.Vector2();
            const countries = [
                {name: 'UNITED STATES', marker: markerAmerika, label: labels['UNITED STATES']},
                {name: 'TURKEY', marker: markerTurkey, label: labels['TURKEY']},
                {name: 'CROATIA', marker: markerSwitzerland, label: labels['CROATIA']},
                {name: 'GERMANY', marker: markerGermany, label: labels['GERMANY']},
                {name: 'CHINA', marker: markerChina, label: labels['CHINA']},
                {name: 'RUSSIA', marker: markerRussia, label: labels['RUSSIA']},
                {name: 'INDIA', marker: markerIndia, label: labels['INDIA']},
                {name: 'JAPAN', marker: markerJapan, label: labels['JAPAN']}
            ];

            window.addEventListener('mousemove', (event) => {
                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
                raycaster.setFromCamera(mouse, camera);

                countries.forEach(country => {
                    const intersects = raycaster.intersectObject(country.marker);
                    if (intersects.length > 0) {
                        country.marker.scale.set(0.05, 0.05, 1); // Marker boyutunu büyüt
                        if (country.label) country.label.scale.set(0.45, 0.225, 1);
                    } else {
                        country.marker.scale.set(0.03, 0.03, 1); // Marker boyutunu küçült
                        if (country.label) country.label.scale.set(0.3, 0.15, 1);
                    }
                });
            });



            // Animasyon
            function animate() {
                renderer.render(scene, camera);
                globeGroup.rotation.y += 0.001;
                requestAnimationFrame(animate);
                orbitCtrl.update();
            }

            animate();

            let currentCount = 0; // Mevcut sayıyı tutan değişken
            const targetDiv = document.querySelector('#topLeftTextSp1')
            const targetCount = parseInt(targetDiv.dataset.countvalue) ?? 140; // Hedef sayı
            let animationInProgress = false; // Animasyonun birden fazla kez başlamasını engellemek için

            // Hızı değiştirmek için artış miktarını ayarlıyoruz
            const speedFactor = 0.2; // Bu değeri artırarak hızlandırabilir, azaltarak yavaşlatabilirsiniz

            // Sayıyı 0'dan hedef sayıya doğru animasyonlu olarak artıran fonksiyon
            function animateCount() {
                const topLeftTextSp1 = document.getElementById('topLeftTextSp1');

                // Artış miktarını hız faktörüyle çarparak ayarlıyoruz
                const increment = Math.ceil((targetCount / 100) * speedFactor); // Her karede artış miktarı
                currentCount += increment;

                if (currentCount > targetCount) {
                    currentCount = targetCount; // Hedef sayıya ulaşıldığında dur
                }

                topLeftTextSp1.textContent = currentCount + "+"; // Sayıyı güncelle

                if (currentCount < targetCount) {
                    requestAnimationFrame(animateCount); // Hedef sayıya ulaşana kadar animasyonu devam ettir
                }
            }

            // Scroll event listener
            window.addEventListener('scroll', () => {
                let scrollPosition = window.scrollY;

                const textContainer = document.getElementById('text-container');
                if (scrollPosition > 500) {
                    textContainer.style.opacity = 0; // opacity 0 yap
                } else {
                    textContainer.style.opacity = 1; // opacity eski haline getir
                }

                const topLeftText = document.getElementById('topLeftText');
                if (scrollPosition > 1000) {
                    topLeftText.style.opacity = Math.min((scrollPosition - 900) / 500, 1);
                } else {
                    topLeftText.style.opacity = 0;
                }

                const bottomRightText = document.getElementById('bottomRightText');
                if (scrollPosition > 1500) {
                    bottomRightText.style.opacity = Math.min((scrollPosition - 1500) / 500, 1);
                } else {
                    bottomRightText.style.opacity = 0;
                }

                if (scrollPosition > 500 && !animationInProgress) {
                    animationInProgress = true;
                    animateGlobeToCenter(); // Dünya animasyonu
                    animateCount(); // Sayı animasyonu
                } else if (scrollPosition <= 500 && animationInProgress) {
                    animationInProgress = true;
                    animateGlobeToOriginal(); // Dünya animasyonunun eski haline dönmesi
                }
            });

            function animateGlobeToCenter() {
                const startPos = globeGroup.position.clone();
                const targetPos = new THREE.Vector3(0, 0, 0);
                const duration = 1.5; // Animation duration in seconds

                const startTime = Date.now();
                const animateMovement = () => {
                    const elapsed = (Date.now() - startTime) / 1000;
                    if (elapsed < duration) {
                        const t = elapsed / duration;
                        globeGroup.position.lerpVectors(startPos, targetPos, t);
                        requestAnimationFrame(animateMovement);
                    } else {
                        // Animation complete
                        animationInProgress = false;
                    }
                };
                animateMovement();
            }

            function animateGlobeToOriginal() {
                const startPos = globeGroup.position.clone();
                const targetPos = new THREE.Vector3(1.4, 0.1, 0.6);
                const duration = 1.5; // Animation duration in seconds

                const startTime = Date.now();
                const animateMovement = () => {
                    const elapsed = (Date.now() - startTime) / 1000;
                    if (elapsed < duration) {
                        const t = elapsed / duration;
                        globeGroup.position.lerpVectors(startPos, targetPos, t);
                        requestAnimationFrame(animateMovement);
                    } else {
                        // Animation complete
                        animationInProgress = false;
                    }
                };
                animateMovement();
            }
        </script>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                // Fade out işleminin bir kez çalıştığından emin olmak için flag
                window.fadeOutDone = false;

                const earthContainer = document.getElementById("earth-container");
                const textContainer = document.getElementById("text-container");
                const scrollElement = document.getElementById("scrollElement");
                const animateContainer = document.getElementById("animate_container");
                const page = document.getElementById("page");
                const wrapper = document.getElementById("animate_wrapper");

                if (localStorage.getItem("earthAnimation")) {
                    fadeOutWorld();
                }
                localStorage.setItem("earthAnimation", "true");

                function fadeOutWorld() {
                    if (fadeOutDone) return;
                    fadeOutDone = true;

                    // Dünya görünümünü karart
                    textContainer.style.display = 'none';
                    earthContainer.style.transition = 'filter 0.5s ease';
                    earthContainer.style.filter = 'blur(1rem) brightness(0.5)';
                    document.documentElement.scrollTop = 0;

                    setTimeout(() => {
                        earthContainer.style.display = 'none';
                        scrollElement.style.display = 'none';
                        page.style.display = 'block';
                        page.style.opacity = 1;
                    }, 500);

                    setTimeout(() => {
                        page.style.transition = 'filter 0.5s ease';
                        page.style.filter = 'blur(0) brightness(1)';
                        document.body.style.height = '100%';
                    }, 750);

                    // filter özelliğini animasyon tamamlandığında kaldır
                    page.addEventListener("transitionend", function removeFilter() {
                        page.style.filter = "none";
                        page.style.transition = "";
                        page.removeEventListener("transitionend", removeFilter); // Olayı kaldır
                    });

                    initFillSwiper();
                }

                function initFillSwiper() {
                    const mySwiper = new Swiper(".fillSwiper", {
                        autoHeight: true,
                        autoplay: {
                            delay: 2500,
                            disableOnInteraction: false
                        },
                        speed: 1000,
                        direction: "horizontal",
                        pagination: {
                            el: ".swiper-pagination",
                            type: "progressbar"
                        },
                        loop: true,
                        loopFillGroupWithBlank: true,
                        effect: "fade",
                        on: {
                            init: function (swiper) {
                                $(".swiper-pagination-custom .swiper-pagination-switch").removeClass("active");
                                $(".swiper-pagination-custom .swiper-pagination-switch").eq(0).addClass("active");

                                // TODO : Bu yapı sağlıklı değil, revize edilebilir.
                                setTimeout(function () {
                                    $(".swiper-pagination-progressbar-fill").css("transform", "scaleX(0)");
                                }, 750);
                            },
                            slideChange: function() {
                                Uppericon.slideTo(this.realIndex);
                            },
                            slideChangeTransitionStart: function () {
                                $(".swiper-pagination-custom .swiper-pagination-switch").removeClass("active");
                                $(".swiper-pagination-custom .swiper-pagination-switch").eq(this.realIndex).addClass("active");

                                updateProgressBar(this.realIndex, this.slides.length);

                            }
                        }
                    });

                    $(".swiper-pagination-custom .swiper-pagination-switch").click(function () {
                        mySwiper.slideTo($(this).index());
                        $(".swiper-pagination-custom .swiper-pagination-switch").removeClass("active");
                        $(this).addClass("active");
                    });

                    function updateProgressBar(currentIndex, totalSlides) {
                        var progressPercent = (currentIndex / (totalSlides - 1)) * 100;
                        $(".swiper-pagination-progressbar-fill").css("transform", "scaleX(" + (progressPercent / 100) + ")");
                    }
                    mySwiper.update();
                }



                // fill Swiper two


                // Scroll pozisyonunu kontrol et
                window.addEventListener('scroll', () => {
                    if (window.scrollY > (innerHeight * 4) - 10) {
                        fadeOutWorld();
                    }
                });

                // Scroll elementine tıklanırsa
                scrollElement.addEventListener('click', fadeOutWorld);

                // Dünya animasyonu (Three.js gibi bir kütüphane kullanıyorsanız)
                function animate() {
                    if (typeof renderer !== "undefined" && typeof scene !== "undefined" && typeof camera !== "undefined") {
                        renderer.render(scene, camera);
                    }
                    if (typeof orbitCtrl !== "undefined") {
                        orbitCtrl.update();
                    }
                    requestAnimationFrame(animate);
                }

                animate();
            });
        </script>
        {% set mainpageLeftTopTitleSection = earthSection|pageSectionFilter('Açıklama Sol Üst') %}
        {% set leftTopTitleLang = getPageSectionLangLocale({'section': mainpageLeftTopTitleSection, 'locale': app.request.locale}) %}
        <div id="topLeftText">
            <span id="topLeftTextSp1"
                  data-countvalue="{{ leftTopTitleLang.title|default }}">{{ leftTopTitleLang.title|default }}+</span>
            <span>{{ leftTopTitleLang.text|default|raw }}</span>
        </div>
        {% set mainpageRightBottomTitleSection = earthSection|pageSectionFilter('Açıklama Sağ Alt') %}
        {% set rightBottomlang = getPageSectionLangLocale({'section': mainpageRightBottomTitleSection, 'locale': app.request.locale}) %}
        <div id="bottomRightText">
            <span id="bottomRightTextSp1">{{ rightBottomlang.shortTitle|default }}</span>
            <div>
                <span id="bottomRightTextSp2">{{ rightBottomlang.title|default }}</span>
                <span id="bottomRightTextSp3">{{ rightBottomlang.text|default|raw }}</span>
            </div>
        </div>
    </div>
    <div id="text-container">
        {% set mainpageMainTitleSection = earthSection|pageSectionFilter('Ana Başlık') %}
        {% set lang = getPageSectionLangLocale({'section': mainpageMainTitleSection, 'locale': app.request.locale}) %}
        {% set lineShattered = lang.text|default|raw|lineShredder %}
        <div class="swiper starterSwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    {% for line in lineShattered %}
                        {#            {{ lang.text|default|raw }} #}
                        <div class="linex">
                            {#                {{ dump(line) }} #}
                            {% set lineClean = line|striptags %}
                            {% set lineAndLetterShattered = lineClean|lineAndLetterShattered %}
                            {% for word in lineAndLetterShattered %}
                                <span class="word">
                                    {% for letter in word %}
                                        <span class="letter">{{ letter }}</span>
                                    {% endfor %}
                                </span>
                            {% endfor %}
                        </div>
                    {% endfor %}
                </div>
                <div class="swiper-slide">
                    {% for line in lineShattered %}
                        {#            {{ lang.text|default|raw }} #}
                        <div class="linex">
                            {% set lineClean = line|striptags %}
                            {% set lineAndLetterShattered = lineClean|lineAndLetterShattered %}
                            {% for word in lineAndLetterShattered %}
                                <span class="word">
                                    {% for letter in word %}
                                        <span class="letter">{{ letter }}</span>
                                    {% endfor %}
                                </span>
                            {% endfor %}
                        </div>
                    {% endfor %}
                </div>
                <div class="swiper-slide">
                    {% for line in lineShattered %}
                        {#            {{ lang.text|default|raw }} #}
                        <div class="linex">
                            {% set lineClean = line|striptags %}
                            {% set lineAndLetterShattered = lineClean|lineAndLetterShattered %}
                            {% for word in lineAndLetterShattered %}
                                <span class="word">
                                    {% for letter in word %}
                                        <span class="letter">{{ letter }}</span>
                                    {% endfor %}
                                </span>
                            {% endfor %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        {#        <div class="linex"> #}

        {#            <span>L</span><span>e</span><span>a</span><span>d</span><span>e</span><span>r</span> #}
        {#            <span>o</span><span>f</span> #}
        {#            <span>t</span><span>h</span><span>e</span> #}
        {#            <span>P</span><span>r</span><span>o</span><span>d</span><span>u</span><span>c</span><span>i</span><span>n</span><span>g</span> #}
        {#            <span>S</span><span>e</span><span>c</span><span>t</span><span>o</span><span>r</span> #}
        {#            <span>f</span><span>o</span><span>r</span> #}
        {#            <span>4</span><span>3</span> #}
        {#        </div> #}
        {#        <div class="linex"> #}
        {#            <span>Y</span><span>e</span><span>a</span><span>r</span><span>s</span> #}
        {#            <span>E</span><span>n</span><span>e</span><span>r</span><span>g</span><span>y</span> #}
        {#            <span>T</span><span>e</span><span>c</span><span>h</span><span>n</span><span>o</span><span>l</span><span>o</span><span>g</span><span>y</span> #}
        {#            <span>P</span><span>r</span><span>o</span><span>j</span><span>e</span><span>c</span><span>t</span><span>s</span>. #}
        {#        </div> #}
    </div>
    <div id="scrollElement">
        <div class="svg_uniter">
            <svg class="scroll-icon__circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
                <g fill="none" data-svg-origin="30 30" style="transform-origin: 0px 0px;"
                   transform="matrix(1,0,0,1,0,0)">
                    <path stroke="#fff" stroke-width="1.5"
                          d="M50.4 10.2c-8.1-8-20-10.2-30-6.2-3.5 1.3-6.8 3.4-9.7 6.2-4 4-6.5 8.9-7.6 14-1.8 9 .7 18.7 7.6 25.6 11 11 28.7 11 39.5 0"></path>
                </g>
            </svg>

            <!-- Mouse SVG -->
            <svg class="scroll-icon__mouse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
                <g fill="#fff">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M23.6 25.9c0-3.9 3.2-7 7-7 3.9 0 7 3.2 7 7v7.6c0 3.9-3.2 7-7 7-3.9 0-7-3.2-7-7v-7.6zm7 13c3 0 5.4-2.4 5.4-5.4v-7.6c0-3-2.4-5.4-5.4-5.4s-5.4 2.4-5.4 5.4v7.6c.1 3 2.5 5.4 5.4 5.4z"></path>
                    <path d="M30.6 23.1c-.5 0-.8.4-.8.8v2.4c0 .5.4.8.8.8.5 0 .8-.4.8-.8v-2.4c.1-.4-.3-.8-.8-.8z"></path>
                </g>
            </svg>
        </div>
        <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="100" height="100">
            <rect x="85" y="75" width="30" height="50" rx="15"
                stroke="white" stroke-width="4" fill="none" />
            <circle cx="100" cy="95" r="3" fill="white" />
        </svg> -->
        <span> {{ "pages.homepage.scroll"|trans|upper }}</span>
    </div>

    <div id="page">
        <!-- Navbar -->
        {{ include('components/navbar_index.html.twig', {globalSettings: globalSettings}) }}
        <!-- Navbar -->
        <div id="hero" data-w-id="21c30e41-0cf3-55ea-0d32-95203e918461" class="section home-hero finder-fold">
            <div class="scroll_border_anim">
                <img src="{{ asset('assets/img/bg-1.jpg') }}"
                     loading="eager" data-w-id="70e91726-1d35-073e-d00e-02356a0f4fb0" sizes="100vw" alt=""
                     srcset="{{ asset('assets/img/bg-1.jpg') }} 500w, {{ asset('assets/img/bg-1.jpg') }} 800w, {{ asset('assets/img/bg-1.jpg') }} 1080w, {{ asset('assets/img/bg-1.jpg') }} 1600w, {{ asset('assets/img/bg-1.jpg') }} 1920w"
                     class="bg-img"/>
                <div class="scroll_anim_lines">
                    <div class="anim_lines"></div>
                    <div class="anim_lines"></div>
                    <div class="anim_lines"></div>
                    <div class="anim_lines"></div>
                    <div class="anim_lines"></div>
                </div>
            </div>

            {% set introSliderSection = getPageSections({'alias': 'Giriş Slider Kısmı', 'multipleData': true}) %}

            <div data-w-id="8974cecf-29f5-e811-543b-d0b1e66bf33f" class="_3d-anim-wrapper">
                <div class="fingerprint-wrapper">
                    <img src="{{ asset('assets/img/61809e60d0986200bb87656f_circle1-min.png') }}"
                         loading="eager" data-w-id="3ebb028f-7f55-f539-0f83-c82c00f3ee79" alt="" class="scan-img _1"/>

                    <img src="https://cdn.prod.website-files.com/6180689071b80a715e57c868/61809e6080683addba242f96_circle%202-min.png"
                         loading="eager" data-w-id="e9342109-1a2f-7081-c5af-34f938b870a9" alt="" class="scan-img _2"
                         id="circle_dashed_rotate_anim"/>

                    <img src="{{ asset('assets/img/61809e602de00f7c9dd11071_circle-3-min-p-500.png') }}"
                         loading="eager" data-w-id="292984cb-c2fc-10d8-96c7-d7dd262b3263"
                         sizes="(max-width: 479px) 70vw, (max-width: 767px) 53vw, (max-width: 991px) 49vw, 29vw" alt=""
                         srcset="{{ asset('assets/img/61809e602de00f7c9dd11071_circle-3-min.png') }} 500w, {{ asset('assets/img/61809e602de00f7c9dd11071_circle-3-min.png') }} 579w"
                         class="scan-img _3"/>

                    <img src="{{ asset('assets/img/6181a35ffcf5fe4c45d8424f_circle-with-dot-min.png') }}"
                         loading="eager" data-w-id="9ff755b9-abd4-5789-427c-135ebf7adcb1" alt="" class="scan-img _4"
                         id="circle_rotate_anim"/>

                    <!-- Swiper Slider Start -->
                    <div class="slider-wrapper" style="display: block">
                        <div class="swiper mySwiperUpper">
                            <div class="swiper-wrapper">
                                {% if introSliderSection is defined %}
                                    {% for introSlider in introSliderSection %}
                                        {% set introSliderLang = getPageSectionLangLocale({'section': introSlider, 'locale': app.request.locale}) %}
                                        {% set mainpageIntroSliderImage = getPageSectionImages({'section': introSlider}) %}

                                        {% set dir = getParameters("page_mainpage_intro_slider_dir") %}
                                        {% set imageDir = mainpageIntroSliderImage is defined and mainpageIntroSliderImage.name is defined ? (dir ~ mainpageIntroSliderImage.name) : 'assets/img/61809e6000fd8d7ff1991b47_lock-min.png' %}

                                        <div class="swiper-slide">
                                            <img src="{{ asset(imageDir) }}" loading="eager"
                                                 data-w-id="e6c5ca48-48bf-f1ef-517c-0fa0851d3962" alt="{{ introSliderLang.alt[0]|default }}" class="scan-img _5" style="position: relative; top: 0" />
                                        </div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section_header">
                <div class="swiper-container-wrapper swiper-container-wrapper--timeline">
                    <!-- Timeline -->
                    <div class="pagition_div_abs">
                        <div class="pagititon_div_rel">
                            <ul class="swiper-pagination-custom">
                                <li class='swiper-pagination-switch first active'><span class='switch-title'></span>
                                </li>
                                <li class='swiper-pagination-switch'><span class='switch-title'></span></li>
                                <li class='swiper-pagination-switch'><span class='switch-title'></span></li>
                            </ul>
                            <!-- Progressbar -->
                            <div class="swiper-pagination swiper-pagination-progressbar swiper-pagination-horizontal"></div>
                            <!-- Swiper -->
                        </div>
                    </div>

                    <div class="swiper fillSwiper swiper-container swiper-container--timeline animate_start"
                         data-params='{"opacity": [0, 1], "translateY": [150, 0], "duration": 500, "easing": "easeInOutQuad"}'>
                        <div class="swiper-wrapper">
                            <!-- Slides -->
                            {% if introSliderSection is defined %}
                                {% for introSlider in introSliderSection %}
                                    {% set introSliderLang = getPageSectionLangLocale({'section': introSlider, 'locale': app.request.locale}) %}


                                    <div class="swiper-slide"><span class="title">
                                        <h2>{{ introSliderLang.title|default }}<span class="color_red"> {{ introSliderLang.titleTwo|default }}</span></h2>
                                        <p>{{ introSliderLang.text|default|raw }}</p>
                                    </span></div>
                                {% endfor %}
                            {% else %}
                                <div class="swiper-slide"><span class="title">
                                    <h2>Industry Leader in<span class="color_red"> Energy Technology</span></h2>
                                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem nobis animi officia, dicta eos ipsa commodi harum distinctio rem? 1</p>
                                </span></div>
                                <div class="swiper-slide"><span class="title">
                                    <h2>Industry Leader in<span class="color_red"> Energy Technology</span></h2>
                                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem nobis animi officia, dicta eos ipsa commodi harum distinctio rem? 2</p>
                                </span></div>
                                <div class="swiper-slide"><span class="title">
                                    <h2>Industry Leader in<span class="color_red"> Energy Technology</span></h2>
                                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem nobis animi officia, dicta eos ipsa commodi harum distinctio rem? 3</p>
                                </span></div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="scroll_anim">
                <!-- Circle SVG -->
                <div class="svg_uniter">
                    <svg class="scroll-icon__circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
                        <g fill="none" data-svg-origin="30 30" style="transform-origin: 0px 0px;"
                           transform="matrix(1,0,0,1,0,0)">
                            <path stroke="#fff" stroke-width="1.5"
                                  d="M50.4 10.2c-8.1-8-20-10.2-30-6.2-3.5 1.3-6.8 3.4-9.7 6.2-4 4-6.5 8.9-7.6 14-1.8 9 .7 18.7 7.6 25.6 11 11 28.7 11 39.5 0"></path>
                        </g>
                    </svg>

                    <!-- Mouse SVG -->
                    <svg class="scroll-icon__mouse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
                        <g fill="#fff">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                  d="M23.6 25.9c0-3.9 3.2-7 7-7 3.9 0 7 3.2 7 7v7.6c0 3.9-3.2 7-7 7-3.9 0-7-3.2-7-7v-7.6zm7 13c3 0 5.4-2.4 5.4-5.4v-7.6c0-3-2.4-5.4-5.4-5.4s-5.4 2.4-5.4 5.4v7.6c.1 3 2.5 5.4 5.4 5.4z"></path>
                            <path d="M30.6 23.1c-.5 0-.8.4-.8.8v2.4c0 .5.4.8.8.8.5 0 .8-.4.8-.8v-2.4c.1-.4-.3-.8-.8-.8z"></path>
                        </g>
                    </svg>
                </div>
                <span class="scroll_anim_text"
                      onclick="document.getElementById('scrollDownId').scrollIntoView({ behavior: 'smooth' });"> {{ "pages.homepage.scroll"|trans|upper }} </span>
            </div>

        </div>
        {# ABOUT US INTRO SECTION | MAIN SECTION#}
        {% set aboutUsSection = getPageSections({'alias': 'Hakkımızda Kısmı'}) %}
        {% set mainpageAboutUsIntroSection = aboutUsSection|pageSectionFilter('Anasayfa Hakkımızda İntro Kısmı') %}
        {% set mainpageAboutUsIntroLang = getPageSectionLangLocale({'section': mainpageAboutUsIntroSection, 'locale': app.request.locale}) %}

        {# ABOUT US IMAGESLIDER, STATISTICS SECTION | CATEGORY SECTION#}
        {% set aboutUsImageSliderSections = getPageSections({'alias': 'Hakkımızda Kısmı', 'categoryAlias': 'Resim Kaydırıcı Kısmı', 'isCategory': true, 'multipleData': true}) %}
        {% set aboutUsStatisticsSections = getPageSections({'alias': 'Hakkımızda Kısmı', 'categoryAlias': 'İstatistik Bölümler', 'isCategory': true, 'multipleData': true}) %}

        <div class="page_container" id="scrollDownId">
            <div class="section_1">
                <div class="about_us_header aboutUsHeaderAnim">
                    <h5>{{ mainpageAboutUsIntroLang.shortTitle|default }}</h5>
                    <h2 class="about_us_card animate_start"
                        data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                        {{ mainpageAboutUsIntroLang.title|default }}</h2>
                </div>
                <div class="about_us_content">
                    <div class="about_us_img">
                        <div class="img_out_border_dashed">
                            <div class="img_in_border">
                                <div class="bg_img_in_border"fillSwiper >
                                    <img src="{{ asset('assets/img/img-border.png') }}" alt="Temp">
                                </div>
                                {% if aboutUsImageSliderSections is not empty %}
                                    {% for imageSliderSection in aboutUsImageSliderSections %}
                                        <div class="img_container">
                                            {% for image in imageSliderSection.images()|filter(e => e.del == 0)|default([]) %}
                                                {% set img = image.name|default %}
                                                {% set dir = getParameters('page_mainpage_aboutus_dir') %}
                                                {% set imagePath = dir~img %}
                                                <img src="{{ asset(imagePath ? imagePath : '#') }}" alt="Panel 1">
                                            {% endfor %}
                                        </div>
                                    {% endfor %}
                                {% else %}
                                    <div class="img_container">
                                        <img src="{{ asset('/assets/img/all-images/panel-2.png') }}" alt="Panel 1">
                                        <img src="{{ asset('/assets/img/all-images/panel.png') }}" alt="Panel 2">
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% set mainpageAboutUsStatisticsIntroSection = getPageSections({'alias': 'Hakkımızda Kısmı', 'categoryAlias': 'İstatistik Bölümler İntro Kısmı', 'isCategory': true, 'multipleData': false}) %}
                    {% set mainpageAboutUsStatisticsIntroLang = getPageSectionSectionsLang({'section': mainpageAboutUsStatisticsIntroSection, 'lang': app.request.locale}) %}
                    <div class="about_us_desc">
                        <div class="about_us_desc_header">
                            <span class="animate_start"
                                  data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 1000, "easing": "easeInOutQuad"}'>{{ mainpageAboutUsStatisticsIntroLang.title|default }}</span>
                            <div class="animate_start"
                               data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                {{ mainpageAboutUsStatisticsIntroLang.text|default|raw }}
                            </div>
                        </div>
                        <div class="about_us_desc_cards">
                            {% for aboutUsStatisticsSection in aboutUsStatisticsSections %}
                                {% set mainpageAboutUsStatisticsLang = getPageSectionSectionsLang({'section': aboutUsStatisticsSection, 'lang': app.request.locale}) %}
                                <div class="about_us_card animate_start"
                                     data-params='{"opacity": [0, 1], "translateX": [-100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                    <div class="about_us_card_header">
                                        <h3 class="value animate_start"
                                            data-params='{"innerText": [0, {{ mainpageAboutUsStatisticsLang.shortTitle|default }}], "round": 1, "duration": 2000, "easing": "easeInOutQuad"}'>{{ mainpageAboutUsStatisticsLang.shortTitle|default }}</h3>
                                        <span>{{ mainpageAboutUsStatisticsLang.title|default }}</span>
                                    </div>
                                    <div class="about_us_card_content">
                                        <div class="about_us_card_content_desc">
                                            {{ mainpageAboutUsStatisticsLang.text|default|raw }}
                                        </div>
                                        <div class="about_us_card_content_index">
                                            <span>{{ loop.index|formatNumberWithLeadingZero }}</span>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="about_us_button">
                    <a href="{{ path('app_main_aboutus') }}">  {{ "pages.homepage.discover"|trans }}</a>
                </div>
            </div>
            <div class="section_2"
                 style="background-image: url({{ asset('assets/img/all-images/map-01.png') }}); background-size: contain; background-position: center; background-repeat: no-repeat;">
                {# SOLUTİONS MAIN SECTION#}
                {% set solutionsSection = getPageSections({'alias': 'Çözümler Kısmı'}) %}
                {% set mainpageSolutionsIntroSection = solutionsSection|pageSectionFilter('Anasayfa Çözümler İntro Kısmı') %}
                {% set mainpageSolutionsIntroLang = getPageSectionLangLocale({'section': mainpageSolutionsIntroSection, 'locale': app.request.locale}) %}
                <div class="section_2_header">
                    <h5>{{ mainpageSolutionsIntroLang.shortTitle|default }}</h5>
                    <h2 class="animate_start"
                        data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                        {{ mainpageSolutionsIntroLang.title|default }}
                    </h2>
                    <a href="{{ path('app_main_solutions') }}">{{ "pages.homepage.all-solutions"|trans|upper }} <span><svg viewBox="0 0 24 24" width="25px" fill="none"
                                                              xmlns="http://www.w3.org/2000/svg">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <path d="M6 17L11 12L6 7M13 17L18 12L13 7" stroke="#c41329" stroke-width="2"
                                          stroke-linecap="round" stroke-linejoin="round"></path>
                                </g>
                            </svg></span></a>
                </div>
                <div class="section_2_tabs">
                    {% set mainpageSolutionsSection = getSolutions() %}
                    <div class="swiper mySwiper nav-tabs">
                        <div class="swiper-wrapper " id="myTab" role="tablist">
                            {% for mainpageSolutionSection in mainpageSolutionsSection %}
                                {% set mainpageSolutionLang = getSolutionsLangs({'Solutions': mainpageSolutionSection, 'lang': app.request.locale}) %}
                                {% set mainpageSolutionImage = getSolutionsImages({'Solutions': mainpageSolutionSection}) %}
                                <li class="nav-item animate_start swiper-slide" role="presentation" onmouseover="slideToSwiper2(this)"
                                    data-params='{"opacity": [1, 1], "translateX": [0, 0], "duration": 0, "easing": "easeInOutQuad", "delay": {{ loop.index }}00}'>
                                    <button class="nav-link {% if loop.first %}active{% endif %}" id="{{ loop.index }}-tab" data-bs-toggle="tab" data-bs-target="#{{ loop.index }}"
                                            type="button" role="tab" aria-controls="{{ loop.index }}" aria-selected="true">
                                        <div class="tabs_link_icon">
                                            {% set dir = getParameters("page_solutions_solutions_dir") %}
                                            {% set imageDir = mainpageSolutionImage is defined and mainpageSolutionImage.name is defined ? (dir ~ mainpageSolutionImage.name) : 'assets/img/icon/ic-3.png' %}

                                            <img src="{{ asset(imageDir) }}" alt="{{ mainpageSolutionLang.alt|default }}">
                                        </div>
                                        <div class="tabs_link_header">{{ mainpageSolutionLang.title|default }}</div>
                                    </button>
                                </li>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="swiper mySwiperText">
                        <div class="swiper-wrapper tab-content" id="myTabContent">
                            {% for mainpageSolutionSection in mainpageSolutionsSection %}
                                {% set mainpageSolutionLang = getSolutionsLangs({'Solutions': mainpageSolutionSection, 'lang': app.request.locale}) %}
                                {% set pdfDir = getParameters("page_solutions_pdf_dir") %}
                                {% set pdfFile = attribute(mainpageSolutionSection, 'pdf' ~ app.request.locale|capitalize) %}
                                {% set pdfPath = pdfFile ? asset(pdfDir ~ pdfFile) : null %}
                                <div class="swiper-slide solutions_text tab-pane fade {{ loop.index == 1 ? 'show active' }}" id="{{ loop.index }}" role="tabpanel" aria-labelledby="{{ loop.index }}-tab">
                                    <span>{{ mainpageSolutionLang.description|default|raw }}</span>

                                    <div class="section_2_button">
                                        {% if mainpageSolutionLang.link is defined and mainpageSolutionLang.link is not empty %}
                                            <a class="animate_start" data-params='{"opacity": [0, 1], "easing": "easeInOutQuad"}'
                                               href="https://{{ mainpageSolutionLang.link|default }}/">{{ mainpageSolutionLang.link|default }}</a>
                                        {% endif %}
                                        {% if pdfPath is defined and pdfPath is not empty %}
                                            <a href="{{ pdfPath }}" target="_blank" class="animate_start" data-params='{"opacity": [0, 1], "easing": "easeInOutQuad"}' {{ pdfPath ? '' : 'onclick="return false;"' }}>{{ "pages.homepage.catalogue"|trans }}</a>
                                        {% endif %}

                                    </div>
                                </div>

                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="section_2_hud">
                    <img src="{{ asset('assets/img/all-images/SERT-1.png') }}" alt="AR-GE TASARIM MERKEZİ">
                    <img src="{{ asset('assets/img/all-images/SERT-3.png') }}" alt="AT-UYGUNLUK DOĞRULAMASI">
                </div>
            </div>
            <div class="section_3">
                {# NEWS MAIN SECTION #}
                {% set newsSection = getPageSections({'alias': 'Haberler Kısmı'}) %}
                {% set mainpageNewsIntroLang = getPageSectionLangLocale({'section': newsSection, 'locale': app.request.locale}) %}
                <div class="section_3_header">
                    <h5>{{ mainpageNewsIntroLang.shortTitle|default }}</h5>
                    <h2 class="animate_start"
                        data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                        {{ mainpageNewsIntroLang.title|default }}
                    </h2>
                    <a href="{{ path('app_main_news') }}"> {{ "pages.homepage.all-news"|trans|upper }}<span><svg viewBox="0 0 24 24" width="25px" fill="none"
                                                              xmlns="http://www.w3.org/2000/svg">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <path d="M6 17L11 12L6 7M13 17L18 12L13 7" stroke="#c41329" stroke-width="2"
                                          stroke-linecap="round" stroke-linejoin="round"></path>
                                </g>
                            </svg></span></a>
                </div>
            </div>
            <div class="section_3_content">
                {% set defaultImage = 'assets/img/brand/news-bg.jpeg' %}
                {% set defaultLogo = 'assets/img/brand/akgun-brand.png' %}
                {% set dir = getParameters('page_mainpage_news_dir') %}
                <div class="news_cards">
                    {% if news is defined %}
                        {% for new in news %}
                            {% set langParams = {'News': new, 'lang': app.request.locale} %}
                            {% set imageParams = {'new': new, 'type': 'image'} %}
                            {% set logoParams  = {'new': new, 'type': 'logo'} %}

                            {% set mainpageNewLang = getNewsLangs(langParams) %}
                            {% set mainImage = getNewsImages(imageParams) %}
                            {% set logoImage = getNewsImages(logoParams) %}

                            {% set mainImageSrc = mainImage is defined and mainImage.name is defined ? dir ~ mainImage.name : defaultImage %}
                            {% set logoImageSrc = logoImage is defined and logoImage.name is defined ? dir ~ logoImage.name : defaultLogo %}

                            <div class="news_card animate_start"
                                 data-params='{"opacity": [0, 1], "translateY": [100, 0], "duration": 700, "easing": "easeInOutQuad"}'>
                                <a href="{{ path('app_main_news', {link: mainpageNewLang.link}) }}">
                                    <div class="news_image">
                                        <img src="{{ asset(mainImageSrc) }}" alt="News">
                                        <div class="news_brand_image">
                                            <img src="{{ asset(logoImageSrc) }}" alt="Akgün">
                                        </div>
                                    </div>

                                    <div class="news_content">
                                        <span>{{ mainpageNewLang.title|default }}</span>
                                        <p>{{ mainpageNewLang.description|default|raw }}</p>
                                    </div>
                                </a>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="news_card animate_start"
                             data-params='{"opacity": [0, 1], "translateY": [100, 0], "duration": 700, "easing": "easeInOutQuad"}'>
                            <a href="#">
                                <div class="news_image">
                                    <img src="{{ asset('assets/img/brand/news-bg.jpeg') }}" alt="News">
                                    <div class="news_brand_image">
                                        <img src="{{ asset('assets/img/brand/akgun-brand.png') }}" alt="akgun">
                                    </div>
                                </div>
                                <div class="news_content">
                                    <span>SEKTÖREL</span>
                                    <p>Nu Teknoloji, Karadag'da 6,6 MW Kapasiteli iki GES için Akgün Elektrik ile Sözlesme
                                        imzaladi.</p>
                                </div>
                            </a>
                        </div>
                        <div class="news_card animate_start"
                             data-params='{"opacity": [0, 1], "translateY": [100, 0], "duration": 700, "easing": "easeInOutQuad"}'>
                            <a href="#">
                                <div class="news_image">
                                    <img src="{{ asset('assets/img/brand/news-bg.jpeg') }}" alt="News">
                                    <div class="news_brand_image">
                                        <img src="{{ asset('assets/img/brand/tedak-brand.png') }}" alt="tedak">
                                    </div>
                                </div>
                                <div class="news_content">
                                    <span>SEKTÖREL</span>
                                    <p>Nu Teknoloji, Karadag'da 6,6 MW Kapasiteli iki GES için Akgün Elektrik ile Sözlesme
                                        imzaladi.</p>
                                </div>
                            </a>
                        </div>
                        <div class="news_card animate_start"
                             data-params='{"opacity": [0, 1], "translateY": [100, 0], "duration": 700, "easing": "easeInOutQuad"}'>
                            <a href="#">
                                <div class="news_image">
                                    <img src="{{ asset('assets/img/brand/news-bg.jpeg') }}" alt="News">
                                    <div class="news_brand_image">
                                        <img src="{{ asset('assets/img/brand/beoft-brand.png') }}" alt="beoft">
                                    </div>
                                </div>
                                <div class="news_content">
                                    <span>SEKTÖREL</span>
                                    <p>Nu Teknoloji, Karadag'da 6,6 MW Kapasiteli iki GES için Akgün Elektrik ile Sözlesme
                                        imzaladi.</p>
                                </div>
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% include "components/footer.html.twig" %}
    </div>
{% endblock %}

{% block javascripts_bottom %}
    <script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>
    <script src="{{ asset('assets/js/index.navbar.js') }}"></script>

    <script>
        let mySwiper, Uppericon;
        Uppericon = new Swiper(".mySwiperUpper", {
            loop: true,
            effect: "fade",

        });
        // Uppericon.on('slideChange', function () {
        //     mySwiper.slideToLoop(Uppericon.realIndex);
        // });

    </script>


    <script>
        var myCozumSwiper = new Swiper(".mySwiper", {
            slidesPerView: 4,
            spaceBetween: 10,
            loop: true,
            centeredSlides: false,
            // autoplay: {
            //     delay: 2500,
            //     disableOnInteraction: false,
            // },
            // pagination: {
            //     el: ".swiper-pagination",
            //     clickable: true,
            // },
            breakpoints: {
                1025: {
                    slidesPerView: 4
                },
                769: {
                    slidesPerView: 3
                },
                681: {
                    slidesPerView: 2
                },
                320: {
                    slidesPerView: 1

                }
            },
        });

        var swiper2 = new Swiper(".mySwiperText", {
            spaceBetween: 30,
            loop: true,
            centeredSlides: false
            // autoplay: {
            //     delay: 2500,
            //     disableOnInteraction: false,
            // },
            // pagination: {
            //     el: ".swiper-pagination",
            //     clickable: true,
            // },
        });
    </script>

    <script>
        function slideToSwiper2(el) {
            swiper2.slideTo($(el).index());
        }
        function applyAnimationDelaysToActiveSlide() {
            // Tüm slaytlardaki önceki animasyonları sıfırla
            document.querySelectorAll('.starterSwiper .swiper-slide span').forEach(span => {
                span.style.opacity = "0";
                span.style.transform = "translateX(-50px)";
                span.classList.remove('animated');
            });

            // Şu an aktif olan slaytı bul
            const activeSlide = document.querySelector('.starterSwiper .swiper-slide-active');

            if (!activeSlide) return;

            // Sadece aktif slayttaki span'leri seç
            const spans = activeSlide.querySelectorAll('span');

            spans.forEach((span, index) => {
                void span.offsetWidth; // Reflow işlemi ile animasyonu sıfırla
                span.style.animationDelay = `${index * 0.05}s`; // Harfler için gecikme ayarla
                span.classList.add('animated'); // Animasyonu tekrar başlat
            });
        };

        // Swiper'ı başlat
        var swiper = new Swiper(".starterSwiper", {
            loop: true,  // 🔄 Sürekli döngüde çalışmasını sağlar
            effect: "fade",  // 🎭 Geçiş efektini fade (kaybolarak geçiş) yap
            fadeEffect: {
                crossFade: true // Yumuşak geçiş için
            },
            autoplay: {
                delay: 6000, // ⏳ Her slayt 4 saniye kalır
                disableOnInteraction: false // Kullanıcı kaydırınca durmasın
            },
            allowTouchMove: false,
            on: {
                slideChangeTransitionEnd: function () {
                    applyAnimationDelaysToActiveSlide();
                }
            }
        });

        // Sayfa yüklendiğinde ilk aktif slayta animasyonu uygula
        document.addEventListener("DOMContentLoaded", applyAnimationDelaysToActiveSlide);
    </script>

    <script>
        $(document).ready(function () {
            const $imgContainers = $('.img_in_border .img_container');
            if ($imgContainers.length >= 1) {
                let currentIndex = 0;

                const switchImages = () => {
                    $imgContainers.eq(currentIndex).css('opacity', '0');
                    currentIndex = (currentIndex + 1) % $imgContainers.length;
                    $imgContainers.eq(currentIndex).css('opacity', '1');
                };

                $imgContainers.each(function (index) {
                    if (index !== currentIndex) {
                        $(this).css('opacity', '0');
                    }
                });

                setInterval(switchImages, 3000);
            }
        });
    </script>

    <script>
        $(document).ready(function () {
            $(".section_2_tabs .nav-link").hover(function () {
                $(".section_2_tabs .nav-link").removeClass("active");
                $(".section_2_tabs .tab-pane").removeClass("show active");

                let target = $(this).attr("data-bs-target");
                $(this).addClass("active");
                $(target).addClass("show active");
            });
        });
    </script>
    <script src="{{ asset('assets/js/earth-animation.js') }}"></script>
    <script src="{{ asset('assets/js/earth-animation-2.js') }}" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

{% endblock %}