{% extends 'main_base.html.twig' %}
{% set pathBanner = asset('uploads/anasayfa/banner/' ~ entity.banner|default) %}
{% set pathBannerMobile = asset('uploads/anasayfa/banner/' ~ entity.bannerMobile|default) %}
{% block title %}{{ entityDil.title|default }}{% endblock %}
{% block description %}{{ entityDil.description|default|default }}{% endblock %}
{% block pageMeta %}
    <meta name="google-site-verification" content="i2RwrowXB7l1XYU3OB3AHUT3RAkCbvT6y7Jjv0m3k3M"/>
    {% if entity.kapak|default %}
        <link rel="image_src" href="{{ asset('uploads/blog/kapak/'~entity.kapak|default) }}"/>
        <meta property="og:image" content="{{ asset('uploads/anasayfa/kapak/'~entity.kapak|default) }}">
        <meta name="twitter:image" content="{{ asset('uploads/anasayfa/kapak/'~entity.kapak|default) }}">
        <link rel="preload" as="image" href="{{ asset('uploads/anasayfa/kapak/'~entity.kapak|default) }}">
        <script async src='//www.instagram.com/embed.js'></script>

    {% endif %}

{% endblock %}
{% block pageStyle %}

    <style>
        .centre-section-header-right a:hover i, .our-history-section-header-right a:hover i {
            border: 0 !important;
            transform: translateX(-20%) !important;
        }

        .intro {
            background-image: url('{{ pathBanner }}');
            background-size: 100% 100%;
        }

        .container {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        @media (max-width: 557px) {
            .intro {
                background-image: url('{{ pathBannerMobile }}');
                background-size: 100% 100%;
            }

        }

        @media (max-width: 1280px) {
            .blog-slide-box-image {
                height: auto;
            }

            .social-swiper-wrapper {
                height: auto;
            }

            .blog-slide-box .blog-slide-box-image.youtube {
                height: 580px;
            }

        }

        {% if entity.whatVideo == 2 %}
        #player {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 1;
            overflow: hidden;
            transform: scale(1.22);

        }

        #player iframe {
            width: 100%;
            height: 100%;
        }

        {% elseif entity.whatVideo == 3 %}

        #player {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 1;
            overflow: hidden;
            transform: scale(1.22);

        }

        #player iframe {
            width: 100% !important;
            height: 100% !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            object-fit: cover !important;
            object-position: right !important;
            pointer-events: none !important;
        }


        {% endif %}
        .lazyload {
            opacity: 0;
            transition: opacity 0.3s ease-in;
        }

        .our-collaborations-logo .lazyloaded {
            opacity: .3 !important;
        }

        .our-collaborations-logo .lazyloaded:hover {
            opacity: 1 !important;
        }

        /*#lastContentPaint > * {*/
        /*    visibility: hidden;*/
        /*    opacity: 0;*/
        /*}*/

        #loader-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #40e0d0 !important;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: top 1s ease-out;
            column-gap: 1%;
        }

        #loader {
            width: 100px;
            height: 100px;
        }

        #loader-container img:first-child {
            width: 3%;
            height: auto;
        }

        #loader-container img {
            width: 15%;
            height: auto;
        }

        @media (max-width: 992px) {
            #loader-container img:first-child {
                width: 8%;
                height: auto;
            }

            #loader-container img {
                width: 40%;
                height: auto;
            }
        }

        #loader-container.hidden {
            transition: 0.6s ease-in;
            opacity: 0;
            visibility: hidden;
        }

        .our-work-img {
            width: 100% !important;
            height: auto !important;
        }


        .DentalUnitsSlider-item .ourdentalunitsSwiper-img {
            width: 484px !important;
            height: 200px !important;
        }

        .rewards-item img, .rewards-mobil-item img {
            height: 100px !important;
            width: 100px !important;
        }

        .staff-item-box-image img {
            width: 160px !important;
            height: 160px !important;
        }

        .logo header-logo-image {
            width: 25px;
            height: 39px;
        }


        /*responsive*/

        @media (max-width: 450px) {
            .our-work-img {
                width: 219px !important;
                height: 265px !important;
            }


        }

        nav {
            background-color: transparent !important;
            border-bottom: 0px !important;
        }

        .intro-text-randevu {
            width: 100%;
        }

        .intro-text {
            top: 34%;
        }

        .intro-content {
            width: 100%;
        }

        .intro-text-randevu {
            top: 43%;
        }

        .section-oa h1 {
            color: #fff !important;
            background-color: #fff !important;
        }

        .step-item {
            color: #fff !important;
        }

        .step-item:after {
            color: #fff !important;
        }

        .step-item:after {
            border: 2px solid #1bb6b9 !important;
        }

        #progress {
            border: 1px solid #fff !important;
        }

        .select-dropdown-content {
            background: white !important;
        }

        .select-dropdown-content-text {
            color: #1bb6b9 !important;
            background-color: white !important;
        }

        .select-dropdown-content-icon {
            background-color: #1bb6b9 !important;
        }

        .fa-chevron-down:before {
            color: white !important;
        }

        .intro-text-randevu button:hover {
            display: none;
        }

        .section-oa-form-item.active .appointment-change {
            display: none !important;
        }

        .section-oa.online-appointment-page {
            pointer-events: none;
            appearance: none !important;
        }

        .section-oa-row-right .randevu__text {
            color: white;
        }

        .section-oa h1 {
            font-family: "Roboto Slab Bold" !important;
        }

        .container {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .Footer {
            display: none;
        }






    </style>
    <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.css"/>
    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <link rel="stylesheet"  href="{{ asset('assets/main/css/theme.min.css') }}">
    <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/intl-tel-input@24.4.0/build/css/intlTelInput.css">
    <link rel="stylesheet"  href="{{ asset('assets/main/css/online-muayene.min.css') }}">
    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>



{% endblock %}
{% block content %}
    <div id="loader-container">
        <img loading="lazy" src="{{ asset('assets/main/img/logoSmile.png') }}" alt="Loading...">
        <img loading="lazy" src="{{ asset('assets/main/img/dentmaxLogotxt.svg') }}" alt="Loading...">
    </div>
    {% block container %}
        <div class="wrapper main-wrapper">
            {% block navbar %}
                {{ render(controller('App\\Controller\\Main\\DefaultController::header', {request: app.request})) }}
            {% endblock %}
            {% set videoUrl = entity is null or entity.video is null
                ? "assets/main/videos/mainVideo.mp4"
                : "uploads/anasayfa/video/" ~ entity.video|default %}
            {% set videoDil = {baslik: ""} %}
            {% if video.diller is defined and video.diller|length > 0 %}
                {% set videoDil = video.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
            {% endif %}
            <div class="container main-container">
                <div class="intro" id="intro-section">
                    {% if entity.whatVideo  == 1 %}
                        <div class="intro-video-wrapper" data-video="{{ entity ? entity.video ?? 'mainVideo.mp4' }}"
                             data-video-mobil="{{ entity ? entity.videoMobil|default }}">
                            {# <video playsinline autoplay muted loop class="intro-video" onclick="this.play();">
                            <source src="{{ asset(videoUrl) }}" type="video/mp4"/>
                            Your browser does not support the video tag.
                        </video> #}
                            <div class="intro-bg"></div>
                        </div>
                    {% elseif entity.whatVideo == 2 %}
                        <div id="player"></div>
                    {% elseif entity.whatVideo == 3 %}
                        <div id="player"></div>
                    {% endif %}

                    <div class="intro-content" id="introContent">
                        <div class="intro-logo">
                            <h1 class="logo" data-aos="fade-up" data-aos-duration="700">
                                <img loading="lazy" data-src="{{ asset('assets/main/img/logoSmile.png') }}" class="lazyload"
                                     alt="Dentmax"/>
                                <span class="logo-text-t lazyload" id="navbar-logo-text">Dentmax</span>
                            </h1>
                        </div>
                        {% if entityDil is not null and entityDil.videoBaslik is not null %}
                            <div class="intro-text">
                                <p {% if entityDil.videoMobilBaslik is not null %}data-mobil="{{ entityDil.videoMobilBaslik|default }}"{% endif %}>
                                    {{ entityDil.videoBaslik|default }}
                                </p>
                            </div>
                        {% endif %}
                        <a href="{{ path('app_main_online_randevu') }}" class="intro-text-randevu uppercase">
                            {% include 'main/default/online-randevu-component.html.twig' %}
                        </a>
                    </div>
                    <div class="intro-mouse">
                        <div class="intro-mouse-img">
                            <img loading="lazy" class="lazyload" data-src="{{ asset('assets/main/img/mouse.svg') }}" alt="Dentmax"/>
                        </div>
                    </div>
                </div>
            </div>
            <div id="lastContentPaint">
                <div class=" invisalign-info" id="invisaligninfo">
                    <div class="invisalign-info-bg">
                        {% if entity is null or entity.onsozArkaPlan is null %}
                            <img loading="lazy" class="lazyload"
                                 data-src="{{ asset('assets/main/img/dentmax-buyuk-arkaplan-resim.webp') }}"
                                 alt="Dentmax"/>
                        {% else %}
                            <img loading="lazy" class="lazyload" data-src="{{ asset('uploads/anasayfa/onsoz/'~entity.onsozArkaPlan) }}"
                                 alt="">
                        {% endif %}
                    </div>
                    <div class="invisalign-info-content-wrapper">
                        <div class="invisalign-info-content">
                            <div class="invisalign-info-content-text">
                                <h3 data-aos="fade-up" data-aos-duration="700" data-aos-delay="100">DENTMAX</h3>
                                <h2 data-aos="fade-up" data-aos-duration="700" data-aos-delay="200">
                                    {{ entityDil.onsozBaslik|default }}
                                </h2>
                                <p data-aos="fade-up" data-aos-duration="700" data-aos-delay="300">
                                    {{ entityDil.onsozMetin|default|raw }}
                                </p>
                                <div class="invisalign-info-content-images">
                                    <div class="invisalign-info-content-image" data-aos="fade-right"
                                         data-aos-duration="700" data-aos-delay="300">
                                        {% if entity is not null and entity.onsozMetinResim is not null %}
                                            <img loading="lazy" class="main-logos"
                                                 src="{{ asset('uploads/anasayfa/onsoz/'~entity.onsozMetinResim) }}"
                                                 alt="Dentmax invisailgn" data-aos="fade-in"
                                                 data-aos-duration="700" data-aos-delay="400"/>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="invisalign-info-image-area" {# {% if  card.kartlar|default %}var{% else %}style="height: 100% !important;" {% endif %} #}>
                            <div class="invisalign-info-image-area-bg">
                                <img loading="lazy" class="lazyload"
                                     data-src="{{ asset('assets/main/img/dentmax-arkaplan-resim.webp') }}"
                                     alt="Dentmax ile Mutlu Bir Gülüş Var"/>
                            </div>
                            {% if entity is not null and entity.onsozResim is not null %}
                                <div class="invisalign-info-image">
                                    <img loading="lazy" class="lazyload"
                                         data-src="{{ asset('uploads/anasayfa/onsoz/' ~ entity.onsozResim) }}"
                                         alt="Dentmax ile Mutlu Bir Gülüş Var"/>
                                </div>
                            {% endif %}
                            <a class="invisalign-info-image-area-enquiry uppercase" data-aos="fade-left"
                                 data-aos-duration="800"
                                 data-aos-delay="300">
                                <span>{{ 'talepte_bulun'|trans }}</span>
                                <div class="invisalign-info-image-area-enquiry-icon">
                                    <i class="far fa-comments"></i>
                                </div>
                            </a>
                        </div>
                    </div>
                    {% if card.kartlar is defined %}
                        <div class="invisalign-info-bottom">
                            {% for bolum in card.kartlar|filter(k => k.alias == 'onsoz') %}
                                {% set bolumDil = bolum.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
                                <a href="{{ bolumDil.link ?? '#' }}" class="invisalign-info-bottom-item"
                                   data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">
                                    {% if bolum.icon is not null %}
                                        <div class="invisalign-info-bottom-item-image">
                                            <img loading="lazy" class="lazyload"
                                                 data-src="{{ asset('uploads/anasayfa/onsoz/bolum/'~bolum.icon|default) }}"
                                                 alt="Dentmax"/>
                                        </div>
                                    {% endif %}
                                    <div class="invisalign-info-bottom-item-text">
                                        <h2>{{ bolumDil.baslik|default }}</h2>
                                        <h3>{{ bolumDil.metin|default }}</h3>
                                    </div>
                                </a>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <!-- Items -->
                {% if entity.kartlar is defined %}
                    <div class="invisalign-info-bottom-outside">
                        {% for bolum in entity.kartlar|filter(k => k.alias == 'onsoz') %}
                            {% set bolumDil = bolum.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
                            <a href="{{ bolumDil.link ?? '#' }}" class="invisalign-info-bottom-outside-item"
                               data-aos="fade-right"
                               data-aos-duration="800" data-aos-delay="200">
                                {% if bolum.icon is not null %}
                                    <div class="invisalign-info-bottom-outside-item-image">
                                        <img loading="lazy" class="lazyload"
                                             data-src="{{ asset('uploads/anasayfa/onsoz/bolum/'~bolum.icon|default) }}"
                                             alt="Dentmax"/>
                                    </div>
                                {% endif %}
                                <div class="invisalign-info-bottom-outside-item-text">
                                    <h2>{{ bolumDil.baslik|default }}</h2>
                                    <h3>{{ bolumDil.metin|default }}</h3>
                                </div>
                            </a>
                        {% endfor %}
                    </div>
                {% endif %}
                <!-- DİŞ BİRİMLERİMİZ -->
                <div class=" section-header container-s">
                    <div class="section-header-text" data-aos="fade-right" data-aos-duration="1000">
                        <h3 class="section-header-title uppercase">{{ 'dis_tedavilerimiz'|trans({'%split%': '<br>'})|raw }}
                            <span class="section-header-text-line"></span>
                        </h3>
                    </div>
                    <div class="section-header-right">
                        <div class="section-header-right-border"></div>
                        <div class="carousel-controls">
                            <i class="fa fa-arrow-circle-left our-dental-units-prev"></i>
                            <i class="fa fa-arrow-circle-right our-dental-units-next"></i>
                        </div>
                    </div>
                </div>
                <div class=" our-dental-units container-s">
                    <div id="DentalUnitsSlider" class="owl-carousel">
                        <!-- Slider içeriği -->
                        {% for kategori in tedaviKategoriler %}
                            <a href="{{ path('app_main_tedaviler', {'kategori': kategori.link|default}) }}"
                               class="DentalUnitsSlider-item">
                                <div class="DentalUnitsSlider-item-image">
                                    {% if kategori.thumbnail is not null %}
                                        <img loading="lazy" class="lazyload ourdentalunitsSwiper-img"
                                             data-src="{{ asset('uploads/tedavi/thumbnail/'~kategori.thumbnail|default) }}"
                                             alt="Dentmax Diş ve Ağız Bakımı"/>
                                    {% else %}
                                        <img loading="lazy" class="lazyload ourdentalunitsSwiper-img"
                                             data-src="{{ asset('assets/main/img/dentmax-dis-tedavileri.webp') }}"
                                             alt="Dentmax Diş ve Ağız Bakımı"/>
                                    {% endif %}
                                </div>
                                <div class="our-dental-units-image-content">
                                    {% if kategori.icon is not null %}
                                        <img loading="lazy" class="lazyload dent-image"
                                             data-src="{{ asset('uploads/tedavi/kategori/icon/'~kategori.icon|default) }}"
                                             alt="Diş İmplant Tedavisi"/>
                                    {% else %}
                                        <img loading="lazy" class="lazyload dent-image"
                                             data-src="{{ asset('assets/main/img/dent11.png') }}"
                                             alt="Diş İmplant Tedavisi"/>
                                    {% endif %}
                                    <div class="our-dental-units-image-content-text uppercase">
                                        <h3>{{ kategori.baslik|default }}</h3>
                                    </div>
                                </div>
                            </a>
                        {% endfor %}
                    </div>
                </div>

                <!-- DENTMAX 100% MUTLU GÜLÜŞ -->
                {% if yorumlar is not empty %}
                     <div class="main-comments-wrapper">
                        <div class="main-comments-wrapper-top">
                            <div class="main-comments-logos">
                                <div class="main-comments-logo">
                                    <img loading="lazy" class="lazyload" data-src="{{ asset('assets/main/img/google-reviews.png') }}" alt="Dentmax"/>
                                </div>
                                <div class="main-comments-logo">
                                    <img loading="lazy" class="lazyload" data-src="{{ asset('assets/main/img/google-reviews.png') }}" alt="Dentmax"/>
                                </div>
                                <div class="main-comments-logo">
                                    <img loading="lazy" class="lazyload" data-src="{{ asset('assets/main/img/google-reviews.png') }}" alt="Dentmax"/>
                                </div>
                                <div class="main-comments-logo">
                                    <img loading="lazy" class="lazyload" data-src="{{ asset('assets/main/img/google-reviews.png') }}" alt="Dentmax"/>
                                </div>
                            </div>
                        </div>
                        <div class="main-comments-wrapper-under">
                            <div class="main-comments-wrapper-under-dentmax">
                                <img loading="lazy" class="lazyload" data-src="{{ asset('assets/main/img/logoSmile.png') }}" alt="Dentmax">
                                <!-- <span>Dentmax</span> -->
                            </div>
                            <h2 data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">DENTMAX 100% MUTLU GÜLÜŞ</h2>
                        </div>

                        <div class="google-comments">
                            <div class="owl-nav">
                                <button type="button" role="presentation" class="owl-prev">
                                    <span><i class="fas fa-chevron-left"></i></span>
                                </button>
                                <button type="button" role="presentation" class="owl-next">
                                    <span><i class="fas fa-chevron-right"></i></span>
                                </button>
                            </div>
                            <div id="googleCommentsSliders" class="owl-carousel">
                                {% for comment in googleComments %}
                                    <div>
                                        <div class="google-comment">
                                            <div class="google-comment-profile">
                                                <div class="google-comment-profile-photo">
                                                    <img loading="lazy" class="lazyload" data-src="{{ asset('assets/main/img/dentmax-profile-picture.jpg') }}"
                                                         alt="Dentmax"/>
                                                </div>
                                                <div class="google-comment-profile-username-and-date">
                                                    <div class="google-comment-profile-username">
                                                        {{ comment.kullaniciAdi|default }}
                                                    </div>
                                                    <div class="google-comment-profile-date">
                                                        {{ comment.tarih|date('Y-m-d') }}

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="google-comment-rating">
                                                {% set starsImg = comment.degerlendirme | round %}
                                                {% set starsInactive = max(0, 5 - starsImg) %}
                                                    {% if starsImg > 0 %}
                                                        {% for i in 0..starsImg - 1 %}
                                                            <img loading="lazy" class="lazyload" src="{{ asset('assets/main/img/star.png') }}" alt="Dentmaks Google Yorum">
                                                        {% endfor %}
                                                    {% endif %}
                                                    {% if starsInactive > 0 %}
                                                        {% for i in 0..starsInactive - 1 %}
                                                            <img loading="lazy" class="lazyload" src="{{ asset('assets/main/img/star-inactive.png') }}" alt="Dentmaks Google Yorum">
                                                        {% endfor %}
                                                    {% endif %}
                                            </div>
                                            <div class="google-comment-text">
                                                <p>
                                                    {{ comment.yorum|default }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="more-google-comments">
                            <button>
                                <a href="https://maps.app.goo.gl/GsintbaNfAJmm27i7" target="_blank" class="turquoise-button">DAHA FAZLA YORUM İNCELE</a>
                            </button>
                        </div>
                    </div>
                {% endif %}
                <div class=" rewards-items">
                    {% for odul in oduller %}
                        <div class="rewards-item" data-aos="fade-up" data-aos-duration="700" data-aos-delay="100">
                            <img loading="lazy" class="lazyload" data-src="{{ asset('uploads/odul/'~odul.resim|default) }}"
                                 alt="Dentmax Ödül">
                        </div>
                    {% endfor %}
                </div>

                <div class="welcome">
                    <div class="welcome-image-content" data-aos="fade-right" data-aos-duration="800"
                         data-aos-delay="900">
                        <div class="welcome-image">
                            {% if entity is null or entity.hakkimizdaResim is null %}
                                <img loading="lazy" class="lazyload"
                                     data-src="{{ asset('assets/main/img/dentmax-musteri-memnuniyeti.webp') }}"
                                     alt="Dentmax Müşteri Memnuniyeti"/>
                            {% else %}
                                <img loading="lazy" class="lazyload"
                                     data-src="{{ asset('uploads/anasayfa/hakkimizda/' ~ entity.hakkimizdaResim|default) }}"
                                     alt="Dentmax Müşteri Memnuniyeti"/>
                            {% endif %}
                        </div>
                    </div>
                    <div class="welcome-content" data-aos="fade-up" data-aos-duration="800" data-aos-delay="700">
                        <div class="welcome-text">
                            <div class="blue-line-text-header" data-aos="fade-up" data-aos-duration="800"
                                 data-aos-delay="200">
                                {# <h3>DENTMAX</h3>
                                <span class="blue-line-text"></span><br/>
                                <h3>AİLESİNE HOŞGELDİNİZ</h3> #}
                                <h3>{{ entityDil.hakkimizdaBaslik|default }}</h3>
                            </div>
                            <div class="welcome-text-in">
                                <p class="welcome-text-in-pg" data-aos="fade-up" data-aos-duration="800"
                                   data-aos-delay="300">
                                    {{ entityDil.hakkimizdaMetin|default|raw }}
                                </p>
                                <p class="welcome-text-in-dr" data-aos="fade-up" data-aos-duration="800"
                                   data-aos-delay="500">
                                    Yrd. Doç. Dr. Fatih Kahraman
                                </p>
                                <p class="welcome-text-in-signature" data-aos="fade-up" data-aos-duration="800"
                                   data-aos-delay="600">
                                    Fatih Kahraman
                                </p>
                            </div>
                            <div class="welcome-text-button">
                                <a class="view-more uppercase" href="{{ path('app_main_kurumsal', {'link': hakkimizdaSayfa.diller|first.link}) }}"
                                   data-aos="fade-up"
                                   data-aos-duration="800" data-aos-delay="700">
                                    <img loading="lazy" class="lazyload right-arrow"
                                         src="{{ asset('assets/main/img/dentmax-daha-fazlasini-incele.svg') }}"
                                         alt="Dentmax Daha Fazlasını İncele"/>
                                    <span>{{ 'daha_fazla_incele'|trans }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="rewards-mobil">
                        {% for odul in oduller %}
                            <div class="rewards-mobil-item">
                                <img loading="lazy" src="{{ asset('uploads/odul/'~odul.resim|default) }}" data-aos="fade-right"
                                     data-aos-duration="700" data-aos-delay="100" alt="Dentmax Ödül">
                            </div>
                        {% endfor %}

                    </div>
                    <div class="welcome-boxs" style="transition-duration: 1s !important" data-aos="fade-left"
                         data-aos-duration="700" data-aos-delay="900">
                        {% if entity.kartlar|filter(d => d.del == 0) %}
                            <div class="orthodontic-center-items">
                                {% for bolum in entity.kartlar|filter(k => k.alias == 'hakkimizda') %}
                                    {% set bolumDil = bolum.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
                                    <div class="orthodontic-center-item">
                                        {% if bolum.icon is not null %}
                                            <div class="orthodontic-center-item-image">
                                                <img loading="lazy" class="lazyload"
                                                     data-src="{{ asset('uploads/anasayfa/hakkimizda/bolum/'~bolum.icon|default) }}"
                                                     alt="Dentmax irtibate geçin">
                                            </div>
                                        {% endif %}
                                        <div class="orthodontic-center-item-header">
                                            <p>{{ bolumDil.baslik|default }}</p>
                                        </div>
                                        <div class="orthodontic-center-item-border"></div>
                                        <div class="orthodontic-center-item-text">
                                            <p>{{ bolumDil.metin|default }}</p>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- DENTMAX DİŞ HEKİMLERİMİZ -->
                <div class="section-header container-s" id="section-main">
                    <div class="section-header-text" data-aos="fade-right" data-aos-duration="1000">
                        <div class="hekimlerimiz-texts">
                            <h3 class="section-header-title hekimlerimiz uppercase">
                                {{ 'dis_hekimlerimiz'|trans({'%split%':'<br>'})|raw }}
                                <span class="section-header-text-line section-header-text-line-long"></span>
                            </h3>
                        </div>
                    </div>
                    <div class="section-header-right our-history-section-header-right uppercase">
                        <a href="{{ path('app_main_kadromuz') }}">
                            <div class="section-header-right-border"></div>
                            <i class="fa fa-arrow-right-from-bracket"></i>
                            <span>{{ 'tum_dis_doktorlarimiz'|trans }}</span>
                        </a>
                    </div>
                </div>

                <div class="staffSlider-wrapper main-staffSlider-wrapper container-s">
                    <div id="staffSlider" class="owl-carousel">

                        {% for uye in ekip %}
                            {% set ekipDil = uye.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
                            {% set unvanDil = uye.unvan.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
                            <div class="staff-item">
                                <a href="{{ path('app_main_kadro_detay', {'link': uye.link}) }}">
                                    <div class="staff-item-box">
                                        <div class="staff-box-text">
                                            <h3>
                                                <img loading="lazy" class="lazyload"
                                                     data-src="{{ asset('assets/main/img/logoSmile.png') }}"
                                                     alt="Dentmax">DENTMAX
                                            </h3>
                                        </div>
                                        <div class="staff-item-box-image">
                                            {% if uye.resim %}
                                                <img loading="lazy" class="lazyload" data-src="{{ asset('uploads/ekip/'~uye.resim) }}"
                                                     alt="">
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="staff-item-text uppercase">
                                        <h3>{{ ekipDil.unvanKisa|default }} {{ uye.ad~' '~uye.soyad }}</h3>
                                        <p>{{ unvanDil.baslik|default }}</p>
                                    </div>
                                </a>
                                <div class="staff-item-box-social">
                                    {% for medya in uye.profile.sosyalMedyalar|default([]) %}
                                        <a href="{{ medya.link|default }}">
                                            <img loading="lazy" class="lazyload"
                                                 data-src="{{ asset('assets/main/img/'~medya.tip~'.png') }}"
                                                 alt="Dentmax">
                                        </a>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="staffSlider-btn uppercase">
                        <a href="{{ path('app_main_kadromuz') }}">
                            <button class="turquoise-button">{{ 'tum_kadroyu_gor'|trans }}</button>
                        </a>
                    </div>
                </div>

                <!-- DENTMAX ÇALIŞMALARIMIZ -->
                <div class="section-header container-s">
                    <div class="section-header-text" data-aos="fade-right" data-aos-duration="1000">
                        <h3 class="section-header-title section-header-text-yasam-h3">
                            {{ 'dentmax_yasam_styled'|trans|raw }}
                            <span class="section-header-text-line section-header-text-line-long"></span>
                        </h3>
                    </div>
                    <div class="section-header-right centre-section-header-right uppercase">
                        <a href="{{ path('app_main_blog') }}">
                            <div class="section-header-right-border"></div>
                            <i class="fa fa-arrow-right-from-bracket"></i>
                            <span>{{ 'tum_yazilarimiz'|trans }}</span>
                        </a>
                    </div>
                </div>
                <div class="our-work container-s">
                    <div id="ourWorkSlider" class="owl-carousel">
                        <!-- Slider içeriği -->
                        {% for blog in bloglar %}
                            <div class="ourWorkSlider-item" data-aos="fade-up" data-aos-duration="1000"
                                 data-aos-delay="300">
                                <a href="{{ path('app_main_blog_detay', {'link': blog.link}) }}">
                                    <div class="ourWorkSlider-item-img">
                                        {% if blog.image is not null %}
                                            <img loading="lazy" class="lazyload our-work-img"
                                                 data-src="{{ asset('uploads/blog/image/'~blog.image) }}"
                                                 alt="Dentmax Sağlıklı Diş"/>
                                        {% else %}
                                            <img loading="lazy" class="lazyload our-work-img"
                                                 data-src="{{ asset('assets/main/img/dentmax-saglikli-dis.jpg') }}"
                                                 alt="Dentmax Sağlıklı Diş"/>
                                        {% endif %}
                                    </div>
                                    <div class="our-work-content">
                                        <div class="our-work-content-text"><p>{{ blog.baslik|default }}</p></div>
                                        <div class="our-work-content-more uppercase">{{ 'daha_fazla_incele'|trans }}</div>
                                    </div>
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                 <!-- DENTMAX SOSYAL MEDYA PAYLAŞIMLARIMIZ -->
                {% if sosyalMedyaVideolar is not empty %}
                    <div class="our-social-media-shares">
                        <div class="our-social-media-shares-header" data-aos="zoom-in" data-aos-duration="1000">
                            <h2>{{ 'sosyal_medya_paylasimlarimiz'|trans({'%brand%': 'DENTMAX'})|upper }}</h2>
                            <p>
                                <a href="#"><i class="bx bxl-instagram"></i></a>
                                <a href="#"><i class="bx bxl-youtube"></i></a>
                            </p>
                        </div>
                        <div class="our-social-media-shares-content">

                            {% set instagramExists = false %}
                            {% for sosyalMedya in sosyalMedyaVideolar %}
                                {% if sosyalMedya.socialMediaType == "instagram" %}
                                    {% set instagramExists = true %}

                                    {% if sosyalMedya.videolar|length >= 6 %}
                                        <!-- 5. öğeyi göstermek -->
                                        <a href="#" class="our-social-media-shares-content-box our-social-media-shares-content-left" data-aos="fade-right"
                                           data-aos-duration="1000"
                                           data-aos-delay="200">
                                            {{ sosyalMedya.videolar[4].iframe|raw }}
                                        </a>
                                    {% else %}
                                        <a href="#" class="our-social-media-shares-content-box our-social-media-shares-content-left"
                                           data-aos="fade-right" data-aos-duration="1000" data-aos-delay="200">
                                        </a>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                            {% if not instagramExists %}
                                <!-- Instagram içeriği yoksa buraya alternatif bir içerik ekleyebilirsiniz -->
                                <a href="#" class="our-social-media-shares-content-box our-social-media-shares-content-left"
                                   data-aos="fade-right" data-aos-duration="1000" data-aos-delay="200">
                                </a>
                            {% endif %}
                            <div class="our-social-media-shares-content-box our-social-media-shares-content-mid-left">
                                {% set instagramExists = false %}
                                {% for sosyalMedya in sosyalMedyaVideolar%}
                                    {% if sosyalMedya.socialMediaType == "instagram" %}
                                        {% set instagramExists = true %}
                                        {% if sosyalMedya.videolar is not empty %}
                                            {% for video in sosyalMedya.videolar|slice(0, 2) %}
                                                    <a href="#" class="our-social-media-shares-content-mid-left-box" data-aos="fade-right"
                                                       data-aos-duration="1000"
                                                       data-aos-delay="400">
                                                        {{ video.iframe|raw }}
                                                    </a>
                                            {% endfor %}
                                        {% else %}
                                            <a href="#" class="our-social-media-shares-content-mid-right-box" data-aos="fade-left"
                                               data-aos-duration="1000"
                                               data-aos-delay="400"></a>
                                            <a href="#" class="our-social-media-shares-content-mid-right-box" data-aos="fade-left"
                                               data-aos-duration="1000"
                                               data-aos-delay="400"></a>
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}
                                {% if not instagramExists %}
                                    <a href="#" class="our-social-media-shares-content-mid-right-box" data-aos="fade-left"
                                       data-aos-duration="1000"
                                       data-aos-delay="400"></a>
                                    <a href="#" class="our-social-media-shares-content-mid-right-box" data-aos="fade-left"
                                       data-aos-duration="1000"
                                       data-aos-delay="400"></a>
                                {% endif %}

                            </div>
                            <a href="#" class="our-social-media-shares-content-box our-social-media-shares-content-mid"
                               data-aos="fade-up"
                               data-aos-duration="1000" data-aos-delay="600">
                                {% set youtubeExists = false %}
                                {% for sosyalMedya in sosyalMedyaVideolar%}
                                    {% if sosyalMedya.socialMediaType == "youtube" %}
                                        {% set youtubeExists = true %}
                                        {% if sosyalMedya.videolar is not empty %}
                                            {% for video in sosyalMedya.videolar %}
                                                {{ video.iframe|raw }}
                                            {% endfor %}
                                        {% else %}
                                            <div class="our-social-media-shares-content-mid-logo">
                                                <i class="bx bxl-youtube"></i>
                                            </div>
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}
                                {% if not youtubeExists %}
                                    <div class="our-social-media-shares-content-mid-logo">
                                        <i class="bx bxl-youtube"></i>
                                    </div>
                                {% endif %}
                            </a>
                            <div class="our-social-media-shares-content-box our-social-media-shares-content-mid-right">
                                {% set instagramExists = false %}
                                {% for sosyalMedya in sosyalMedyaVideolar%}
                                    {% if sosyalMedya.socialMediaType == "instagram" %}
                                        {% set instagramExists = true %}
                                        {% if sosyalMedya.videolar is not empty %}
                                            {% for video in sosyalMedya.videolar|slice(2, 2) %}
                                                <a href="#" class="our-social-media-shares-content-mid-right-box" data-aos="fade-right"
                                                   data-aos-duration="1000"
                                                   data-aos-delay="400">
                                                    {{ video.iframe|raw }}
                                                </a>
                                            {% endfor %}
                                        {% else %}
                                            <a href="#" class="our-social-media-shares-content-mid-right-box" data-aos="fade-left"
                                               data-aos-duration="1000"
                                               data-aos-delay="400"></a>
                                            <a href="#" class="our-social-media-shares-content-mid-right-box" data-aos="fade-left"
                                               data-aos-duration="1000"
                                               data-aos-delay="400"></a>
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}
                                {% if not instagramExists %}
                                    <a href="#" class="our-social-media-shares-content-mid-right-box" data-aos="fade-left"
                                       data-aos-duration="1000"
                                       data-aos-delay="400"></a>
                                    <a href="#" class="our-social-media-shares-content-mid-right-box" data-aos="fade-left"
                                       data-aos-duration="1000"
                                       data-aos-delay="400"></a>
                                {% endif %}

                            </div>
                            {% set instagramExists = false %}
                            {% for sosyalMedya in sosyalMedyaVideolar %}
                                {% if sosyalMedya.socialMediaType == "instagram" %}
                                    {% set instagramExists = true %}

                                    {% if sosyalMedya.videolar|length >= 6 %}
                                        <!-- 5. öğeyi göstermek -->
                                        <a href="#" class="our-social-media-shares-content-box our-social-media-shares-content-right" data-aos="fade-right"
                                           data-aos-duration="1000"
                                           data-aos-delay="200">
                                            {{ sosyalMedya.videolar[5].iframe|raw }}
                                        </a>
                                    {% else %}
                                        <a href="#" class="our-social-media-shares-content-box our-social-media-shares-content-right"
                                           data-aos="fade-left"
                                           data-aos-duration="1000" data-aos-delay="200">
                                        </a>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                            {% if not instagramExists %}
                                <!-- Instagram içeriği yoksa buraya alternatif bir içerik ekleyebilirsiniz -->
                                <a href="#" class="our-social-media-shares-content-box our-social-media-shares-content-right"
                                   data-aos="fade-left"
                                   data-aos-duration="1000" data-aos-delay="200">
                                </a>
                            {% endif %}
                        </div>
                    </div>
                    <!-- SOSYAL MEDYA PAYLAŞIMLARI MOBİL SLİDER -->
                    <div class="social-swiper-wrapper">
                        <div class="owl-nav">
                            <button type="button" role="presentation" class="blog-swiper-prev">
                                <span><i class="bx bx-arrow-back"></i></span>
                            </button>
                            <button type="button" role="presentation" class="blog-swiper-next">
                                <span><i class="bx bx-arrow-back"></i></span>
                            </button>
                        </div>
                        <div id="social-swiper" class="owl-carousel">
                                    {% set instagramExists = false %}
                                    {% for sosyalMedya in sosyalMedyaVideolar %}
                                        {% if sosyalMedya.socialMediaType == "instagram" %}
                                            {% set instagramExists = true %}

                                            {% if sosyalMedya.videolar|length >= 6 %}
                                                <!-- 5. öğeyi göstermek -->
                                                <div>
                                                    <a href="#" class="blog-slide-box">
                                                        <div class="blog-slide-box-image">
                                                            {{ sosyalMedya.videolar[4].iframe|raw }}
                                                        </div>
                                                    </a>
                                                </div>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                    {% if not instagramExists %}
                                        <!-- Instagram içeriği yoksa buraya alternatif bir içerik ekleyebilirsiniz -->
                                    {% endif %}
                                    {% set instagramExists = false %}
                                    {% for sosyalMedya in sosyalMedyaVideolar%}
                                        {% if sosyalMedya.socialMediaType == "instagram" %}
                                            {% set instagramExists = true %}
                                            {% if sosyalMedya.videolar is not empty %}
                                                {% for video in sosyalMedya.videolar|slice(0, 2) %}
                                                    <div>
                                                        <a href="#" class="blog-slide-box">
                                                            <div class="blog-slide-box-image">
                                                                {{ video.iframe|raw }}
                                                            </div>
                                                        </a>
                                                    </div>
                                                {% endfor %}
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                    {% if not instagramExists %}

                                    {% endif %}


                                    {% set youtubeExists = false %}
                                    {% for sosyalMedya in sosyalMedyaVideolar%}
                                        {% if sosyalMedya.socialMediaType == "youtube" %}
                                            {% set youtubeExists = true %}
                                            {% if sosyalMedya.videolar is not empty %}
                                                {% for video in sosyalMedya.videolar %}
                                                    <div class="">
                                                        <a href="#" class="blog-slide-box">
                                                            <div class="blog-slide-box-image youtube">
                                                                {{ video.iframe|raw }}
                                                            </div>
                                                        </a>
                                                    </div>
                                                {% endfor %}
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                    {% if not youtubeExists %}
                                    {% endif %}

                                    {% set instagramExists = false %}
                                    {% for sosyalMedya in sosyalMedyaVideolar%}
                                        {% if sosyalMedya.socialMediaType == "instagram" %}
                                            {% set instagramExists = true %}
                                            {% if sosyalMedya.videolar is not empty %}
                                                {% for video in sosyalMedya.videolar|slice(2, 2) %}
                                                    <div>
                                                        <a href="#" class="blog-slide-box">
                                                            <div class="blog-slide-box-image">
                                                                {{ video.iframe|raw }}
                                                            </div>
                                                        </a>
                                                    </div>
                                                {% endfor %}
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                    {% if not instagramExists %}

                                    {% endif %}

                                    {% set instagramExists = false %}
                                    {% for sosyalMedya in sosyalMedyaVideolar %}
                                        {% if sosyalMedya.socialMediaType == "instagram" %}
                                            {% set instagramExists = true %}

                                            {% if sosyalMedya.videolar|length >= 6 %}
                                                <!-- 5. öğeyi göstermek -->
                                                <div>
                                                    <a href="#" class="blog-slide-box">
                                                        <div class="blog-slide-box-image">
                                                            {{ sosyalMedya.videolar[5].iframe|raw }}
                                                        </div>
                                                    </a>
                                                </div>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                    {% if not instagramExists %}
                                        <!-- Instagram içeriği yoksa buraya alternatif bir içerik ekleyebilirsiniz -->
                                    {% endif %}
                                </a>
                            </div>
                        </div>
                    </div>
                {% endif %}

                <!-- DENTMAX IS BIRLIKLERIMIZ -->
                <div class="section-header section-header-blue container-s">
                    <div class="section-header-text" data-aos="fade-right" data-aos-duration="1000">
                        <div class="section-header-text-long">
                            <h3 class="section-header-title our-troops uppercase">
                                {{ 'is_birliklerimiz'|trans({'%brand%': 'DENTMAX', '%split%': '<br>'})|raw }}
                                <span class="section-header-text-line section-header-text-line-long"></span>
                            </h3>
                        </div>
                    </div>
                    <div class="section-header-right centre-section-header-right uppercase">
                        <a href="{{ path('app_main_isbirlik') }}">
                            <div class="section-header-right-border"></div>
                            <i class="fa fa-arrow-right-from-bracket"></i>
                            <span>{{ 'detayli_incele'|trans }}</span>
                        </a>
                    </div>
                </div>
                <div class="our-collaborations">
                    <div class="our-collaborations-text">
                        <p data-aos="fade-right" data-aos-duration="400">
                            {{ entityDil.isBirlikMetin|default|raw }}
                        </p>
                        <p class="our-collaborations-text-dentmax" data-aos="fade-right" data-aos-duration="400"
                           data-aos-delay="100">
                            {{ entityDil.isBirlikBaslik|default }}
                        </p>
                    </div>
                    <div class="our-collaborations-logos">
                        <!-- Slider içeriği -->
                        <div class="our-collabrations-logos-box">
                            <div id="collaborationsSlider" class="owl-carousel">
                                <div class="collaborationsSlider-inside">
                                    <div class="logos">
                                        {% for item in isBirlikler %}
                                            <div class="our-collaborations-logo">
                                                <img loading="lazy" class="lazyload"
                                                     data-src="{{ asset('uploads/is-birliklerimiz/'~item.resim|default) }}"
                                                     alt=""/>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                                <div class="collaborationsSlider-inside">
                                    <div class="logos">
                                        {% for item in isBirlikler %}
                                            <div class="our-collaborations-logo">
                                                <img loading="lazy" class="lazyload"
                                                     data-src="{{ asset('uploads/is-birliklerimiz/'~item.resim|default) }}"
                                                     alt=""/>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                            <div class="our-collaborations-logos-indicators">
                                <i class="fa fa-arrow-circle-left collaborations-prev"></i>
                                <i class="fa fa-arrow-circle-right collaborations-next"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SIKÇA SORULAN SORULAR -->
                <div class="sss-wrapper">
                    <div class="sss-header" data-aos="zoom-in" data-aos-duration="400">
                        <h2>{{ 'sss'|trans|upper }}</h2>
                        <h3>{{ 'sss_alt_metin'|trans }}</h3>
                    </div>
                    <div class="sss-content">
                        <div class="sss-items">
                            {% for soru in sss|slice(0, 5) %}
                                <div class="sss-item" data-aos="fade-right" data-aos-duration="800"
                                     data-aos-delay="200">
                                    <div class="sss-item-header">
                                        <p>{{ soru.baslik|default }}</p>
                                        <i class="fa fa-arrow-right-long"></i>
                                    </div>
                                    <div class="sss-item-content">
                                        {{ soru.metin|default|raw }}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="sss-items">
                            {% for soru in sss|slice(5, 10) %}
                                <div class="sss-item" data-aos="fade-right" data-aos-duration="800"
                                     data-aos-delay="200">
                                    <div class="sss-item-header">
                                        <p>{{ soru.baslik|default }}</p>
                                        <i class="fa fa-arrow-right-long"></i>
                                    </div>
                                    <div class="sss-item-content">
                                        {{ soru.metin|default|raw }}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="sss-text-area" data-aos="fade-up" data-aos-duration="800" data-aos-delay="500">
                        <div class="sss-text-area-content">
                            {{ entityDil.metin|default|default|raw }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{ render(controller('App\\Controller\\Main\\DefaultController::popup', {request: app.request, 'sayfaAlias':'anasayfa'})) }}
    {% endblock %}
{% endblock %}
{% block pageScript %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.1/vanilla-tilt.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script id="vimeoApi"></script>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous"></script>
    <script src="{{ asset('assets/main/js/app.min.js') }}" type="text/javascript"></script>

    <script>
        document.querySelector('.invisalign-info-image-area-enquiry').addEventListener('click', function() {
            document.querySelector('.zsiq_floatmain').click();
        });

    </script>


    <script>
        window.addEventListener('load', function() {
        var script = document.createElement('script');
        script.async = true;
        script.src = 'https://www.instagram.com/embed.js';
        document.body.appendChild(script);
        });
    </script>
    <script defer>
        document.addEventListener("DOMContentLoaded", function () {
            const ourCollaborationsLogos = document.querySelector(".our-collaborations-logos");
            const ourCollaborationsText = document.querySelector(".our-collaborations-text");
            const height = ourCollaborationsLogos.offsetHeight;
            ourCollaborationsText.style.height = (height + 100) + 'px';
        });

        document.addEventListener("DOMContentLoaded", function () {
            {% set videoSrc = entity.whatVideo|default %}
            {% if videoSrc == 1 %}
            let windowWidth = window.innerWidth;
            let windowHeight = window.innerHeight;
            let increase = (windowHeight / windowWidth) * 100 - 100;
            let introVideoWrapper = document.querySelector(".intro-video-wrapper");
            let introTitle = document.querySelector(".intro-content .intro-text p");
            let introVideoData = introVideoWrapper.dataset.video;
            let introTitleMobilData = introTitle.dataset.mobil;
            let introVideoSrc = "{{ asset('uploads/anasayfa/video/') }}";

            let newVideo = document.createElement('video');
            newVideo.classList.add('intro-video');
            newVideo.muted = true;
            newVideo.autoplay = true;
            newVideo.loop = true;
            newVideo.playsInline = true;




            let newVideoSource = document.createElement('source');
            newVideoSource.type = 'video/webm';


            if (windowWidth < 768) {
                if (introVideoWrapper.dataset.mobil !== "") {
                    introVideoSrc = "{{ asset('uploads/anasayfa/video/m/') }}";
                    introVideoData = introVideoWrapper.dataset.videoMobil;
                }
                if (introTitleMobilData) {
                    introTitle.textContent = introTitleMobilData;
                }
            } else {
                if (increase >= 50) {
                    if (introVideoWrapper.dataset.mobil !== "") {
                        introVideoSrc = "{{ asset('uploads/anasayfa/video/m/') }}";
                        introVideoData = introVideoWrapper.dataset.videoMobil;
                    }
                    if (introTitleMobilData) {
                        introTitle.textContent = introTitleMobilData;
                    }
                }
            }

            newVideoSource.src = introVideoSrc + introVideoData;
            newVideo.appendChild(newVideoSource);

            let oldVideo = introVideoWrapper.querySelector('video');
            if (oldVideo) {
                introVideoWrapper.removeChild(oldVideo);
            }
            introVideoWrapper.prepend(newVideo);

            document.addEventListener("click", function () {
                if (newVideo.paused) {
                    newVideo.play();
                }
            });

            {% endif %}
            {% if videoSrc == 2 %}
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            var player;

            function getVideoId() {
                var mobileVideoId = '{{ entity.videoMobilYoutube }}';
                var desktopVideoId = '{{ entity.videoYoutube }}';
                return (window.innerWidth <= 576 && mobileVideoId) ? mobileVideoId : desktopVideoId;
            }

            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    playerVars: {
                        'autoplay': 1,
                        'controls': 0,
                        'modestbranding': 1,
                        'rel': 0,
                        'showinfo': 0,
                        'autohide': 1,
                        'loop': 1,
                        'playlist': getVideoId(),
                        'vq': 'hd1080'
                    },
                    videoId: getVideoId(),
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }

            function onPlayerReady(event) {
                event.target.mute();
                event.target.playVideo();
                startVideoLoop();
            }

            function startVideoLoop() {
                setInterval(function () {
                    var currentTime = player.getCurrentTime();
                    var duration = player.getDuration();

                    if (duration - currentTime <= 7) {
                        player.seekTo(0);
                    }
                }, 1000);
            }

            function onPlayerStateChange(event) {
                if (event.data === YT.PlayerState.ENDED) {
                    player.seekTo(0);
                }
            }

            window.addEventListener('resize', function () {
                var newVideoId = getVideoId();
                if (player && player.getVideoData().video_id !== newVideoId) {
                    player.loadVideoById(newVideoId);
                }
            });

            document.body.addEventListener('click', function () {
                if (player && typeof player.playVideo === 'function') {
                    player.playVideo();
                }
            });

            window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;

            {% endif %}
            {% if videoSrc == 3 %}
            var script = document.createElement('script');
            script.src = 'https://player.vimeo.com/api/player.js';
            script.onload = function () {
                var desktopVideoId = '{{ entity.videoVimeo }}';
                var mobileVideoId = '{{ entity.videoMobilVimeo }}';

                function getVideoId() {
                    return (window.innerWidth <= 576) ? mobileVideoId : desktopVideoId;
                }

                var player = new Vimeo.Player('player', {
                    id: getVideoId(),
                    width: '100%',
                    height: '100%',
                    autoplay: true,
                    loop: true,
                    muted: true,
                    controls: false,
                    quality: '1080p'
                });

                player.on('timeupdate', function (data) {
                    var duration = data.duration;
                    var currentTime = data.seconds;

                    if (duration - currentTime <= 5) {
                        player.setCurrentTime(0);
                    }
                });

                window.addEventListener('resize', function () {
                    var newVideoId = getVideoId();
                    player.loadVideo(newVideoId).then(function (id) {
                    }).catch(function (error) {
                        console.error('Video yükleme hatası:', error);
                    });
                });
            };
            document.head.appendChild(script);

            {% endif %}
        });
        var navContent = $('.nav-content');
        navContent.css('background-color', 'transparent');
        navContent.css('box-shadow', 'unset');
        navContent.css('background-image', 'unset');

        const ajaxSocialMediaUrl = '{{ path('app_pull_socialmediacontent_database') }}'
        $.ajax({
            url: ajaxSocialMediaUrl,
            method: 'GET',
            success: function (data) {
                console.log("Başarılı:", data); // AJAX yanıtını konsola yazdırır
            },
            error: function (xhr, status, error) {
                console.error("Hata:", error); // Hata durumunu yazdırır
            }
        })


    </script>
    <script defer>
        {#
        window.addEventListener("beforeunload", () => {
            window.scroll({
                top: 0,
                behavior: 'smooth'
            })
        });
        #}

        $('.invisalign-info-image-area-buttons').addClass('active');
        VanillaTilt.init(document.querySelectorAll(".staff-item-box-image img"), {
            max: 15,
            speed: 1800,
            axis: "x",
            scale: 1.02,
        });
        const socialSwiper = $('#social-swiper').owlCarousel({
            dots: true,
            loop: true,
            margin: 30,
            autoHeight: true,
            responsive: {
                0: {
                    items: 1.2
                },
                601: {
                    items: 1.8
                },
                768: {
                    items: 2.2
                },
                820: {
                    items: 2.4
                },
                1280: {
                    items: 4.4
                }
            }
        });

        $('.blog-swiper-next').click(function () {
            socialSwiper.trigger('next.owl.carousel');
        });

        $('.blog-swiper-prev').click(function () {
            socialSwiper.trigger('prev.owl.carousel');
        });

        const staffSlider = $("#staffSlider").owlCarousel({
            dots: true,
            loop: true,
            margin: 40,
            autoplay: true,
            autoplayTimeout: 3500,
            autoplaySpeed: 1000,
            responsive: {
                0: {
                    items: 1.4,
                },
                400: {
                    items: 1.6,
                },
                601: {
                    items: 2.3,
                },
                768: {
                    items: 2.5,
                },
                821: {
                    items: 3.5,
                },
                1025: {
                    items: 4.5,
                },
                1180: {
                    items: 4.9,
                },
                1360: {
                    items: 5.7,
                },
            },
        });

        const collaborationsSlider = $("#collaborationsSlider").owlCarousel({
            loop: true,
            margin: 0,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplaySpeed: 1500,
            responsive: {
                0: {
                    items: 1,
                },
            },
        });

        $(".collaborations-prev").click(function () {
            collaborationsSlider.trigger("prev.owl.carousel");
        });

        $(".collaborations-next").click(function () {
            collaborationsSlider.trigger("next.owl.carousel");
        });

        const DentalUnitsSlider = $("#DentalUnitsSlider").owlCarousel({
            dots: true,
            loop: true,
            margin: 50,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplaySpeed: 1500,
            responsive: {
                0: {
                    items: 1.2,
                },
                768: {
                    items: 1.6,
                },
                1024: {
                    items: 2.2,
                },
                1180: {
                    items: 3.3,
                },
            },
        });

        $(".our-dental-units-prev").click(function () {
            DentalUnitsSlider.trigger("prev.owl.carousel");
        });

        $(".our-dental-units-next").click(function () {
            DentalUnitsSlider.trigger("next.owl.carousel");
        });

        const ourWorkSlider = $("#ourWorkSlider").owlCarousel({
            dots: true,
            loop: true,
            margin: 30,
            autoplayTimeout: 5000,
            autoplaySpeed: 1500,
            responsive: {
                0: {
                    items: 1.4,
                },
                425: {
                    items: 1.8,
                },
                601: {
                    items: 2.6,
                },
                880: {
                    items: 3.4,
                },
                1180: {
                    items: 4.4,
                },
                1440: {
                    items: 5.4,
                },
                1675: {
                    items: 6.4,
                },
            },
        });

        const googleCommentsSliders = $("#googleCommentsSliders").owlCarousel({
            dots: true,
            loop: true,
            margin: 30,
            autoHeight: false,
            autoplay:true,
            autoplayHoverPause:true,
            autoplayTimeout: 5000,
            autoplaySpeed: 1500,
            responsive: {
                0: {
                    items: 1,
                },
                601: {
                    items: 1.1,
                },
                768: {
                    items: 1.2,
                },
                820: {
                    items: 1.4,
                },
                1280: {
                    items: 1.6,
                },
            },
        });

        $(".owl-next").click(function () {
            googleCommentsSliders.trigger("next.owl.carousel");
        });

        $(".owl-prev").click(function () {
            googleCommentsSliders.trigger("prev.owl.carousel");
        });

        const invisalignBottom = $("#invisalignBottom").owlCarousel({
            dots: true,
            loop: true,
            margin: 50,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplaySpeed: 1000,
            responsive: {
                0: {
                    items: 1,
                },
            },
        });

        $(".branch-selection").on("click", function () {
            $(".choose-branch-icon").toggleClass("active");
        });
        // ourWorkSlider-item elemanlarını seçin
        var items = document.querySelectorAll('.ourWorkSlider-item');

        // Döngü ile her ikinci elemana ourWork-bottom classını ekleyin
        for (var i = 1; i < items.length; i += 2) {
            items[i].classList.add('ourWork-bottom');
        }

        $(window).scroll(function () {
            var headerVideo = $('.container');
            var scrollTop = $(this).scrollTop();

            var headerVideoTop = headerVideo.offset().top;
            var headerVideoBottom = headerVideoTop + headerVideo.height();

            if (scrollTop >= headerVideoTop && scrollTop <= headerVideoBottom) {
                // Eğer "header-video-content-wrapper" elementindeysek
                navContent.css('background-color', 'transparent');
                navContent.css('box-shadow', 'unset');
                navContent.css('background-image', 'linear-gradient(rgba(0, 0, 0, 0.7), transparent)');
                $('.invisalign-info-image-area-buttons').addClass('active');
            } else {
                // Değilse, yani başka bir yerdeysek
                navContent.css('background-color', 'var(--turquoise)');
                navContent.css('box-shadow', '0px 2px 55px #31999b');
                navContent.css('background-image', 'unset');
                $('.invisalign-info-image-area-buttons').removeClass('active');
            }
        });
        {{ render(controller('App\\Controller\\Main\\DefaultController::popupScript', {request: app.request, 'sayfaAlias':'anasayfa'})) }}
    </script>
{% endblock %}