{% extends 'base.html.twig' %}
{% block title %}Falqn{% endblock %}
{% block stylesheets %}

    <link rel="stylesheet" href="{{ asset('assets/css/style-en.css') }}">
    {#
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"/>
    #}

    {#
    Soldan Kayarak Gelme	class="reveal-item slide-left"
    Sağdan Kayarak Gelme	class="reveal-item slide-right"
    Aşağıdan Yukarı Gelme	class="reveal-item slide-up"
    yukarıdan aşağı Gelme	class="reveal-item slide-down"
    Harf Harf Dökülme	class="split-text"
    #}
    <style>
        /* 1. Temal noktaların (bullets) genel yapısı */
        .swiper-pagination-bullet {
            width: 13px;
            height: 13px;
            display: inline-block;
            border-radius: 50%;
            opacity: 1;
            border: 1px solid white;
        }

        /* 2. Aktif olan noktanın görünümü */
        .swiper-pagination-bullet-active {
            opacity: 1;
            background: white; /* Aktif nokta rengi (Mavi) */
        }

        /* 3. Dikey (Vertical) konumlandırma için kritik kodlar */
        .swiper-pagination-vertical.swiper-pagination-bullets,
        .swiper-vertical > .swiper-pagination-bullets {
            right: 46px;
            top: 50%;
            transform: translate3d(0px, -50%, 0);
            position: absolute;
            display: flex;
            flex-direction: column;
            gap: 20px;
            z-index: 10;
        }

        /* Tıklanabilir olması için */
        .swiper-pagination-clickable .swiper-pagination-bullet {
            cursor: pointer;
        }
    </style>

{% endblock %}
{% block body %}

    <div class="fixed">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                {# slider1 #}
                <div class="swiper-slide f-colmn style_slider1">

                    <img src="{{ asset('media/logo/en/main.png') }}" alt="" class="main_img">

                    <div class="parcalar_yuvarlak">

                        <?xml version="1.0" encoding="utf-8"?>
                        <!-- Generator: Adobe Illustrator 27.9.6, SVG Export Plug-In . SVG Version: 9.03 Build 54986)  -->
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="190 61 365 385" style="enable-background:new 124 0 500 500;" xml:space="preserve">
                        <style type="text/css">
                            .st0 {
                                fill: #BCBEC0;
                            }

                            .st1 {
                                opacity: 0.2;
                                fill: #BCBEC0;
                            }

                            .st2 {
                                opacity: 0.3;
                                fill: #BCBEC0;
                            }

                            .st3 {
                                opacity: 0.5;
                                fill: #BCBEC0;
                            }

                            .st4 {
                                opacity: 0.3;
                            }

                            .st5 {
                                opacity: 0.6;
                            }

                            .st6 {
                                opacity: 0.5;
                            }

                            .st7 {
                                opacity: 0.8;
                            }
                        </style>

                    </div>

                    <div class="main-wrapper">
                        <svg viewBox="0 0 100 100">
                            <circle class="neon-circle" cx="50" cy="50" r="45" transform="rotate(-90 50 50)"/>
                        </svg>
                    </div>

                    <div class="slider_1_text">
                        <div class="ovhiden">
                            <h2 class="anim5s" style="position: relative;">WHERE AI BECOMES REAL.</h2>
                        </div>
                        <div class="ovhiden">
                            <a href="#" class="anim5s">Explore the Core</a>
                        </div>
                    </div>

                </div>

                {# slider2 #}
                <div class="swiper-slide realslide_2">


                    <div class="neon2_hear">>
                        <div class="neon-wrapper">
                            <div class="s2_img_section">
                                <img class="s4_c_img" src="{{ asset('media/en/portal.png') }}" alt="">
                            </div>
                            <svg viewBox="0 0 100 100" class="swiper1-neon">
                                <path d="M 50,5 A 45,45 0 0 0 50,95" class="path-left s4_daire" />
                                <path d="M 50,5 A 45,45 0 0 1 50,95" class="path-right s4_daire" />
                            </svg>
                        </div>
                        <div class="neon-wrapper">
                            <div class="s2_img_section">
                                <img class="s4_c_img" src="{{ asset('media/en/portal2.png') }}" alt="">
                            </div>
                            <svg viewBox="0 0 100 100" class="swiper1-neon">
                                <path d="M 50,5 A 45,45 0 0 0 50,95" class="path-left s4_daire" />
                                <path d="M 50,5 A 45,45 0 0 1 50,95" class="path-right s4_daire" />
                            </svg>
                        </div>
                        <div class="neon-wrapper">
                            <div class="s2_img_section">
                                <img class="s4_c_img" src="{{ asset('media/en/portal2.png') }}" alt="">
                            </div>
                            <svg viewBox="0 0 100 100" class="swiper1-neon">
                                <path d="M 50,5 A 45,45 0 0 0 50,95" class="path-left s4_daire" />
                                <path d="M 50,5 A 45,45 0 0 1 50,95" class="path-right s4_daire" />
                            </svg>
                        </div>
                    </div>

                    <div class="slider_2_text_section w-85">
                        <div class="slider2_text">
                            <div class="ovhiden w10r">
                                <h2 class="company reveal-item slide-left">The Company</h2>
                            </div>
                            <div class="ovhiden w37r">
                                <h3 class="takes_shape reveal-item slide-right">WHERE AI TAKES SHAPE</h3>
                            </div>


                            <div class="s2_acik ovhiden">
                                <p class="s2_acik_sol reveal-item slide-up">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris lorem ipsum nisi ut aliquip</p>
                                <p class="s2_acik_sag reveal-item slide-up">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris lorem ipsum nisi ut aliquip</p>
                            </div>
                        </div>
                    </div>
                </div>


                {# slider3 #}
                <div class="swiper-slide realslide_3">

                    <div class="hid_60_3">
                        <div class="neon3_hear">
                            <div class="neon-wrapper">
                                <svg viewBox="0 0 100 100" class="swiper1-neon">
                                    <path d="M 50,5 A 45,45 0 0 0 50,95" class="path-left s3_path" />
                                    <path d="M 50,5 A 45,45 0 0 1 50,95" class="path-right s3_path" />
                                </svg>
                            </div>
                        </div>
                        <div class="s3_img_center_section">
                            <img class="s3_img solgenis" src="{{ asset('media/slide3/solgenis.png') }}" alt="">
                            <div class="s3_parlak"></div>
                            <img class="s3_img saggenis" src="{{ asset('media/slide3/saggenis.png') }}" alt="">
                        </div>
                        <div class="s3_img_section">
                            <img class="s3_img_human l1 reveal-item slide-up" src="{{ asset('media/slide3/l1.png') }}" alt="">
                            <img class="s3_img_human c1 reveal-item slide-up" src="{{ asset('media/slide3/ac1.png') }}" alt="">
                            <img class="s3_img_human k1 reveal-item slide-up" src="{{ asset('media/slide3/k1.png') }}" alt="">
                        </div>
                    </div>

                    <div class="slider_2_text_section w-85">
                        <div class="slider2_text">
                            <div class="ovhiden w10r">
                                <h2 class="company reveal-item slide-right">THE HUMAN</h2>
                            </div>
                            <div class="ovhiden w37r">
                                <h3 class="takes_shape reveal-item slide-left">INTELLIGENCE STARTS IN MINDS</h3>
                            </div>


                            <div class="s2_acik ovhiden">
                                <p class="s2_acik_sol reveal-item slide-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris lorem ipsum nisi ut aliquip</p>
                                <p class="s2_acik_sag reveal-item slide-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris lorem ipsum nisi ut aliquip</p>
                            </div>
                        </div>
                    </div>

                </div>


                {# slider4 #}
                <div class="swiper-slide realslide_4">

                    <div class="neon2_hear neon4_hear">
                        <div class="neon-wrapper">
                            <div class="s4_img_section">
                                <img class="s4_c_img" src="{{ asset('media/slide4/c1.png') }}" alt="">
                            </div>
                            <svg viewBox="0 0 100 100" class="swiper1-neon">
                                <path d="M 50,5 A 45,45 0 0 0 50,95" class="path-left s4_daire" />
                                <path d="M 50,5 A 45,45 0 0 1 50,95" class="path-right s4_daire" />
                            </svg>
                        </div>
                    </div>

                    <div class="slider_2_text_section w-85">
                        <div class="slider2_text">
                            <div class="ovhiden w10r">
                                <h2 class="company reveal-item slide-up">THE INTELLIGENCE</h2>
                            </div>
                            <div class="ovhiden w37r">
                                <h3 class="takes_shape reveal-item slide-left">AI LIVES INSIDE THE PRODUCT</h3>
                            </div>


                            <div class="s2_acik ovhiden">
                                <p class="s2_acik_sol reveal-item slide-up">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris lorem ipsum nisi ut aliquip</p>
                                <p class="s2_acik_sag reveal-item slide-up">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris lorem ipsum nisi ut aliquip</p>
                            </div>
                        </div>
                    </div>

                </div>


                {# slider5 #}
                <div class="swiper-slide realslide_5">

                    <div class="hid_60_3 hid_60_5">
                        <div class="neon3_hear neon5_hear">
                            <div class="neon-wrapper">
                                <svg viewBox="0 0 100 100" class="swiper1-neon">
                                    <path d="M 50,5 A 45,45 0 0 0 50,95" class="path-left s3_path" />
                                    <path d="M 50,5 A 45,45 0 0 1 50,95" class="path-right s3_path" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="yildiz_s5"></div>
                    <!--<img src="{{ asset('media/slide5/cizgi.png') }}" alt="" class="s5_img">-->
                    <div class="amination_5_section_cam">
                        <svg class="svg_s5_ef" viewBox="0 0 100 100" preserveAspectRatio="none">
                            {% set paths = [
                                "M 0 80 Q 80 10 48 0",
                                "M 0 93 Q 85 10 49 0",
                                "M 20 100 Q 93 3 50 0",
                                "M 28 100 Q 94 1 52 0",
                            ] %}
                            {% for path in paths %}
                                <circle class="s5-orb" cx="0" cy="0" r="0.3" fill="#fff" style="offset-path: path('{{ path }}');"></circle>
                                <path class="s5-path" d="{{ path }}" fill="none"></path>
                            {% endfor %}
                            <!--<circle class="s5-air-orb" cx="0" cy="0" r=".5" fill="#fff" style="offset-path: path('M 30 100 Q 92 8 50 0');"></circle>-->
                            <circle class="s5-orb s5-orb-main" cx="0" cy="0" r="0.5" fill="#fff" style="offset-path: path('M 10 100 Q 90 8 50 0');"></circle>
                            <path class="s5-path s5-path-main" fill="none" d='M 10 100 Q 90 8 50 0'></path>
                            <path class="s5-path s5-path-main-shadow" fill="none" d='M 10 100 Q 90 8 50 0'></path>
                        </svg>
                    </div>


                    <div class="slider_2_text_section w-85">
                        <div class="slider2_text">
                            <div class="ovhiden w10r">
                                <h2 class="company reveal-item slide-right">THE HORIZON</h2>
                            </div>
                            <div class="ovhiden w37r">
                                <h3 class="takes_shape reveal-item slide-left">IDEAS HAVE NO BORDERS</h3>
                            </div>


                            <div class="s2_acik ovhiden">
                                <p class="s2_acik_sol reveal-item slide-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris lorem ipsum nisi ut aliquip</p>
                                <p class="s2_acik_sag reveal-item slide-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris lorem ipsum nisi ut aliquip</p>
                            </div>
                        </div>
                    </div>

                </div>


                {# slider6 #}
                <div class="swiper-slide">

                    <div class="main_footer_section">

                        <div class="background_black_section reveal-item slide-down">
                            <div class="black_section_text">
                                <h3 class="bl_h3 reveal-item slide-down">THE NOW</h3>
                                <h2 class="bl_h2 reveal-item slide-up">REALITY IS BUILT NOW</h2>
                                <div class="bl_rig_lef">
                                    <p class="bl_p reveal-item slide-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris lorem ipsum nisi ut aliquip</p>
                                    <p class="bl_p reveal-item slide-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris lorem ipsum nisi ut aliquip</p>
                                </div>
                                <div class="bl_buton">
                                    <a href="#" class="bl_buton_a reveal-item slide-up">
                                        Get in touch
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="24 24" fill="currentColor">
                                            <path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="footer_bottom">
                            <img src="{{ asset('media/footer/footer_down.jpeg') }}" alt="" class="reveal-item slide-up">
                            <div class="footer_text">
                                <p class="fal_tec reveal-item slide-right">Falqn Technology GmbH</p>
                                <p class="mombac reveal-item slide-left">Mombacher Str. 68</p>
                                <p class="mainz reveal-item slide-right">55122 Mainz / Germany</p>
                                <p class="contact reveal-item slide-left">+49 171 1733712 &nbsp; msahin@falqn.de</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>



{% endblock %}

{% block javascripts_bottom %}
    {# main swiper #}
    <script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
    <script>

        var swiper = new Swiper(".mySwiper", {
            direction: "vertical",
            loop: false,
            speed: 0,
            watchSlidesProgress: true,
            observer: true,
            observeParents: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                type: 'bullets',
            },
            effect: 'creative',
            creativeEffect: {
                prev: {opacity: 0, translate: [0, 0, 0]},
                next: {opacity: 0, translate: [0, 0, 0]},
            },
        });

        // ########## 10 SANIYE ENGELLEYICI KISIM BASLANGICI ##########
        let isWaiting = true; // Sayfa açıldığında true olarak başlar (engelli)
        setTimeout(() => {
            isWaiting = false; // 10.000 ms (10 saniye) sonra kilidi açar
        }, 10000);

        // ########## 10 SANIYE ENGELLEYICI KISIM BITISI ##########

        function triggerSlideChange(direction) {
            if (isWaiting) return; // Kilit aktifken (ilk 10 sn) fonksiyon çalışmaz

            const canGoNext = direction === 'next' && swiper.activeIndex < swiper.slides.length - 1;
            const canGoPrev = direction === 'prev' && swiper.activeIndex > 0;

            if (canGoNext || canGoPrev) {
                isWaiting = true;
                const currentSlide = swiper.slides[swiper.activeIndex];
                currentSlide.classList.add('exit-now');

                setTimeout(() => {
                    if (direction === 'next') swiper.slideNext();
                    else swiper.slidePrev();

                    setTimeout(() => {
                        isWaiting = false;
                    }, 800);
                }, 600);
            }
        }

        swiper.on('slideChangeTransitionEnd', function () {
            this.slides.forEach(slide => slide.classList.remove('exit-now'));
            setTimeout(() => {
                isWaiting = false;
            }, 500);
        });

        window.addEventListener('wheel', (e) => {
            const dir = e.deltaY > 0 ? 'next' : 'prev';
            triggerSlideChange(dir);
        }, {passive: false});

        let touchStartY = 0;
        swiper.on('touchStart', (e) => {
            touchStartY = e.touches[0].clientY;
        });

        swiper.on('touchEnd', (e) => {
            const touchEndY = e.changedTouches[0].clientY;
            const diff = touchStartY - touchEndY;

            if (Math.abs(diff) > 50) {
                const dir = diff > 0 ? 'next' : 'prev';
                triggerSlideChange(dir);
            }
        });
    </script>

    {# ======================== SLİDER1 ========================= #}
    {# dönen yuvarlak #}
    <script>
        const canvas = document.getElementById("c");
        const ctx = canvas.getContext("2d");

        canvas.width = 720;
        canvas.height = 632;

        const cx = canvas.width / 2;
        const cy = canvas.height / 2;

        let t = 0;

        function drawMain(rotation) {
            ctx.save();
            ctx.translate(cx, cy);
            ctx.rotate(rotation);
            ctx.globalAlpha = 0.8;

            ctx.beginPath();
            ctx.arc(0, 0, 270, 0, Math.PI * 2);
            ctx.strokeStyle = "#b0bdc6";
            ctx.lineWidth = 2;
            ctx.stroke();

            ctx.restore();
        }

        function drawArcLayer({
                                  radius,
                                  count,
                                  thickness,
                                  speed,
                                  opacity,
                                  gap
                              }) {
            ctx.save();
            ctx.translate(cx, cy);
            ctx.rotate(t * speed);
            ctx.globalAlpha = opacity;

            const full = Math.PI * 2;
            const arcLength = (full / count) - gap;

            for (let i = 0; i < count; i++) {
                const start = i * (full / count);
                const end = start + arcLength;

                ctx.beginPath();
                ctx.arc(0, 0, radius, start, end);
                ctx.strokeStyle = "#192F4D";
                ctx.lineWidth = thickness;
                ctx.lineCap = "butt";
                ctx.stroke();
            }

            ctx.restore();
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            drawMain(t * 0.5);

            drawArcLayer({
                radius: 285,
                count: 8,
                thickness: 3,
                speed: 0.4,
                opacity: 0.6,
                gap: 0.2
            });

            drawArcLayer({
                radius: 295,
                count: 6,
                thickness: 3,
                speed: 0.6,
                opacity: 0.4,
                gap: 0.25
            });

            drawArcLayer({
                radius: 310,
                count: 4,
                thickness: 6,
                speed: 0.8,
                opacity: 0.2,
                gap: 0.75
            });

            t += 0.01;
            requestAnimationFrame(animate);
        }

        animate();
    </script>


    {# ======================== SLİDER2 ========================= #}


    
    <script type="importmap" style="z-index: 2; position: absolute; width: 100%; height: 100%;">
        { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js" } }
    </script>

    {# yıldız - hover effct #}
    <script type="module">

        import * as THREE from 'three';



        // 1. Sahne Ayarları

        const scene = new THREE.Scene();

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 3000);

        const renderer = new THREE.WebGLRenderer({ antialias: true });

        renderer.setSize(window.innerWidth, window.innerHeight);

        scene.background = new THREE.Color( 0x090d14 );

        document.body.appendChild(renderer.domElement);



        // GÜNCELLENMİŞ BOX-SHADOW DOKUSU (30px Blur)

        function createBoxShadowTexture() {
            const canvas = document.createElement('canvas');
            const size = 185; // Alanı genişlettik ki parlama yayılacak yer bulsun
            canvas.width = size;
            canvas.height = size;
            const ctx = canvas.getContext('2d');

            const centerX = size / 2;
            const centerY = size / 2;
            const rectSize = 25; // Kareyi büyüttük

            const neonColor = 'rgba(0, 255, 255, 1)';

            // KATMAN 1: Devasa Dış Aura
            ctx.shadowBlur = 40;
            ctx.shadowColor = neonColor;
            ctx.fillStyle = neonColor;
            ctx.fillRect(centerX - rectSize/2, centerY - rectSize/2, rectSize, rectSize);

            // KATMAN 2: Orta Şiddet Parlama
            ctx.shadowBlur = 20;
            ctx.shadowColor = neonColor;
            ctx.fillRect(centerX - rectSize/2, centerY - rectSize/2, rectSize, rectSize);

            // KATMAN 3: İç Parlama (Işığı yoğunlaştırır)
            ctx.shadowBlur = 10;
            ctx.shadowColor = 'white';
            ctx.fillRect(centerX - rectSize/2, centerY - rectSize/2, rectSize, rectSize);

            // KATMAN 4: Saf Beyaz Çekirdek
            ctx.fillStyle = 'rgba(255, 255, 255, 1)';
            ctx.fillRect(centerX - rectSize/2, centerY - rectSize/2, rectSize, rectSize);

            return new THREE.CanvasTexture(canvas);
        }



        // 2. Parçacık Oluşturma

        const particlesCount = 1000;

        const positions = new Float32Array(particlesCount * 3);

        const colors = new Float32Array(particlesCount * 3);

        const originalPositions = new Float32Array(particlesCount * 3);

        const particleGeometry = new THREE.BufferGeometry();



        const blueColor = new THREE.Color(0x517fa1);



        for (let i = 0; i < particlesCount; i++) { 

            const radius = Math.random() * 4 + 3;

            const theta = Math.random() * Math.PI * 2;

            const phi = Math.acos((Math.random() * 2) - 1);



            const x = radius * Math.sin(phi) * Math.cos(theta);

            const y = radius * Math.sin(phi) * Math.sin(theta);

            const z = radius * Math.cos(phi);



            positions[i * 3] = x;

            positions[i * 3 + 1] = y;

            positions[i * 3 + 2] = z;



            originalPositions[i * 3] = x;

            originalPositions[i * 3 + 1] = y;

            originalPositions[i * 3 + 2] = z;



            if (i < particlesCount / 2) {

                colors[i * 3] = 1; colors[i * 3 + 1] = 1; colors[i * 3 + 2] = 1;

            } else {

                colors[i * 3] = blueColor.r;

                colors[i * 3 + 1] = blueColor.g;

                colors[i * 3 + 2] = blueColor.b;

            }

        }



        particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

        particleGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));



        const particleMaterial = new THREE.PointsMaterial({

            size: 0.18, // 30px gölgenin sığması için alan biraz daha genişletildi

            transparent: true,

            opacity: .5,


            vertexColors: true,

            map: createBoxShadowTexture(),

            blending: THREE.AdditiveBlending,

            depthWrite: false

        });



        const particleSystem = new THREE.Points(particleGeometry, particleMaterial);

        scene.add(particleSystem);


        camera.position.z = 8;



        const mouse = new THREE.Vector2(-10, -10);

        const raycaster = new THREE.Raycaster();

        const worldPos = new THREE.Vector3();

        const emptyRadius = 2.0;



        window.addEventListener('mousemove', (event) => {

            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;

            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

        });



        function animate() {

            requestAnimationFrame(animate);

            particleSystem.rotation.y += 0.0006;

            particleSystem.updateMatrixWorld();



            raycaster.setFromCamera(mouse, camera);

            const intersectPoint = new THREE.Vector3();

            raycaster.ray.at(8, intersectPoint);



            const posArray = particleGeometry.attributes.position.array;



            for (let i = 0; i < particlesCount; i++) {

                const ix = i * 3;

                const iy = i * 3 + 1;

                const iz = i * 3 + 2;



// Mevcut dünya pozisyonunu hesapla

                worldPos.set(posArray[ix], posArray[iy], posArray[iz]);

                worldPos.applyMatrix4(particleSystem.matrixWorld);



                const dx = worldPos.x - intersectPoint.x;

                const dy = worldPos.y - intersectPoint.y;

                const dz = worldPos.z - intersectPoint.z;

                const dist = Math.sqrt(dx*dx + dy*dy + dz*dz);



// TİTREMEYİ ÖNLEYEN MANTIK:

// Sadece fareye çok yakın olanları it, ama belirli bir mesafede durmalarına izin ver.

                if (dist < emptyRadius) {

// Kuvveti yumuşatmak için bir itme gücü (push) ekliyoruz

                    const pushForce = (emptyRadius - dist) / emptyRadius;

                    const ratio = 0.2; // İtme hızı (daha yumuşak geçiş için)



                    posArray[ix] += dx * pushForce * ratio;

                    posArray[iy] += dy * pushForce * ratio;

                    posArray[iz] += dz * pushForce * ratio;

                } else {

// Eski pozisyonuna dönüş hızı (0.05 idealdir)

                    const returnSpeed = 0.05;



// Aradaki fark çok küçükse (titremeyi engellemek için) hareketi kes

                    const diffX = originalPositions[ix] - posArray[ix];

                    const diffY = originalPositions[iy] - posArray[iy];

                    const diffZ = originalPositions[iz] - posArray[iz];



                    if (Math.abs(diffX) > 0.001) posArray[ix] += diffX * returnSpeed;

                    if (Math.abs(diffY) > 0.001) posArray[iy] += diffY * returnSpeed;

                    if (Math.abs(diffZ) > 0.001) posArray[iz] += diffZ * returnSpeed;

                }

            }



            particleGeometry.attributes.position.needsUpdate = true;

            renderer.render(scene, camera);

        }



        animate();



        window.addEventListener('resize', () => {

            camera.aspect = window.innerWidth / window.innerHeight;

            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        });

    </script>


    {# dil seçeneği #}
    <script>
        function toggleDropdown() {
            document.querySelector('.dropdown').classList.toggle('active');
        }

        function select(lang) {
            document.getElementById('selected-lang').innerText = lang;
            document.querySelector('.dropdown').classList.remove('active');

            // Seçilen dili kullanmak için buraya kod ekleyebilirsin
            console.log("Seçilen dil:", lang);
        }

        // Menü dışına tıklandığında kapatma
        window.onclick = function(event) {
            if (!event.target.closest('.dropdown')) {
                document.querySelector('.dropdown').classList.remove('active');
            }
        }
    </script>

    {# mouse iz bırakma
    <script>
        const canvas = document.getElementById('mouse-canvas');
        const ctx = canvas.getContext('2d');
        let points = [];
        let lastX = 0;
        let lastY = 0;

        function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resize);
        resize();

        window.addEventListener('mousemove', (e) => {
            // "Mesafe Kontrolü": Fare en az 25 piksel hareket etmeden yeni damla oluşturma.
            // Bu sayede o "parantez" dizilimi biter, tekil damlalar oluşur.
            const dist = Math.hypot(e.clientX - lastX, e.clientY - lastY);

            if (dist > 25) {
                points.push({
                    x: e.clientX,
                    y: e.clientY,
                    size: 2,
                    opacity: 0.3,
                    maxOpacity: 0.6,
                    lineWidth: 2
                });
                lastX = e.clientX;
                lastY = e.clientY;
            }
        });

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < points.length; i++) {
                let p = points[i];

                ctx.beginPath();
                ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);

                // Su rengi geçişi (Beyazdan çok açık maviye)
                ctx.strokeStyle = `rgba(239, 254, 255, ${p.opacity})`;
                ctx.lineWidth = p.lineWidth;
                ctx.stroke();

                // DAMLA FİZİĞİ:
                p.size += 2.2;        // Genişleme hızı
                p.opacity -= 0.007;   // Daha yavaş ve doğal solma
                p.lineWidth *= 0.98;  // Genişledikçe su yüzeyinde incelme

                if (p.opacity <= 0) {
                    points.splice(i, 1);
                    i--;
                }
            }
            requestAnimationFrame(animate);
        }
        animate();
    </script>#}
    {# başlangıç effect
    <script>
        const circle = document.querySelector("#circle-container circle");
        const percentText = document.getElementById("percent");

        const radius = 44;
        const circumference = 2 * Math.PI * radius;

        circle.style.strokeDasharray = circumference;
        circle.style.strokeDashoffset = circumference;

        const counter = { value: 0 };

        const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });

        /* Sayaç animasyonu */
        tl.to(circle, { strokeDashoffset: 0, duration: 4 });
        tl.to(counter, {
            value: 100,
            duration: 3.6,
            ease: "none",
            onUpdate() { percentText.textContent = Math.round(counter.value) + "%"; }
        }, "<");

        /* Sayaç kayboluyor */
        tl.to("#percent", { opacity: 0, duration: 0.25 }, "+=0.2");

        /* Daire büyüyor */
        tl.to("#circle-container", { scale: 25, duration: 1.2, ease: "power3.in" });

        /* Intro kaldır */
        tl.to("#intro", {
            opacity: 0,
            duration: 0.4,
            onComplete() {
                document.getElementById("intro").remove();
            }
        }, "-=0.4");

        /* Header görünür */
        tl.to("header", { opacity: 1, y: 0, duration: 0.8, ease: "power2.out" }, "-=0.1");
    </script>#}
{% endblock %}