{% extends 'main_base.html.twig' %}
{#{% block title %}{{ sayfa.title }}{% endblock %}#}
{#{% block description %}{{ sayfa.description }}{% endblock %}#}
{% block pageStyle %}

<style>
    #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;
    }

</style>
<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<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/font-awesome/6.4.0/css/all.min.css"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
{% 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>
    {#    {% set banner = sayfa.blog.banner %}#}
    {#    {% set bannerPath = asset('uploads/blog/banner/') %}#}
    {#    {% if banner is null %}#}
    {#        {% set banner = 'blog-banner.png' %}#}
    {#        {% set bannerPath = asset('assets/main/img/') %}#}
    {#    {% endif %}#}

    <header>
        <div class="header-img">
            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-basindan.webp') }}" alt="Dentmax Basından">
        </div>
        <div class="header-content">
            <h1 data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">Tedaviler</h1>
            {#<p data-aos="fade-in" data-aos-duration="800" data-aos-delay="500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>#}

        </div>
        <div class="header-invisalign">
            <img loading="lazy" src="{{ asset('assets/main/img/icons/dentMax.webp') }}" alt="Dentmax invisailgn" data-aos="fade-in" data-aos-duration="800"
                 data-aos-delay="600">
        </div>
        <div class="header-document-path">
            <div class="header-document-path-text">
                <strong class="path-title">TEDAVİLER
                </strong>
                    <div class="content-router-links-path">
                        <a href="index">Anasayfa /</a>
                        <a href="tedaviler">Tedaviler</a>
                    </div>
            </div>
        </div>
    </header>

    {% block container %}
        <div class="wrapper">
            {% block navbar %}
                {{ render(controller('App\\Controller\\Main\\DefaultController::header', {request: app.request})) }}
            {% endblock %}
            <div class="content">
    <div class="global-content">

        <div class="content-router">
            <div class="content-router-links">
                <ul>
                    <li><a href="oncesi-sonrasi-porselen-uygulamalari">Porselen Uygulamaları</a></li>
                    <li><a href="#">Dış Estetik Uygulamaları</a></li>
                    <li><a href="#">Çene Düzenleme</a></li>
                    <li><a href="#">Porselen Uygulamaları</a></li>
                    <li><a href="#">Dış Estetik Uygulamaları</a></li>
                    <li><a href="#">Çene Düzenleme</a></li>
                </ul>
            </div>

            <div class="content-router-contact-wrapper">
                <div class="content-router-contact" id="content-router-contact">
                    <?php require_once "contact-wrapper.php"; ?>
                </div>
            </div>

        </div>

        <div class="content-wrapper">
            <div class="content-wrapper-links-path">
                <a href="index">Anasayfa / </a>
                <a href="tedaviler">Tedaviler / </a>
                <a href="tedaviler-alt-kategori">Gülüş Tasarımı Bileşenlerimiz / </a>
                <a href="tedaviler-alt-kategori">Beyaz Estetik / </a>
                <a href="tedavi-detay">Diş Beyazlatma</a>
            </div>

            <div class="before-after-page-header">
                <h2 class="global-header" data-aos="fade-right" data-aos-duration="1000">PORSELEN DİŞ PROTEZ
                    IMPLANT UYGULAMASI</h2>
                <p class="global-text" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="200">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro repudiandae nemo esse
                    expedita nisi vel, sint fugiat ea quasi possimus illo in non iste aliquam blanditiis
                    similique ipsa deserunt eos ad quod neque voluptate? Impedit ipsum velit error sapiente
                    fugit voluptatibus atque dolor cupiditate non excepturi eaque eum, deleniti assumenda
                    temporibus quisquam rem praesentium vero. Sequi quisquam nobis, doloribus enim quae
                    voluptas ex impedit nemo minus, beatae vitae nam deserunt! Vero atque totam hic sequi.
                    Iure quibusdam doloribus repellat fuga, quisquam commodi hic modi beatae eos officia
                    voluptatem tenetur asperiores tempora velit obcaecati vitae non quo, facere voluptatibus
                    corporis alias!</p>
            </div>
            <!-- -->
            <div class="before-after-page-header">
                <h2></h2>
            </div>
            <div class="before-after-wrapper">
                <!--   -->
                <div class="before-after-items">

                    <div class="before-after-item">
                        <div class="before-after-item-images" data-aos="fade-right" data-aos-duration="1000"
                            data-aos-delay="200">
                            <div class="before-after-item-image">
                                <div class="swiper before-after-itemswiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide"><img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-sonrasi.jpg') }}"
                                                alt="Dentmax">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="before-after-item-image">
                                <div class="swiper before-after-itemswiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide"><img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-sonrasi.jpg') }}"
                                                alt="Dentmax">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="before-after-item-images-text">
                                <img loading="lazy" src="{{ asset('assets/main/img/beforeAfterIcon.png') }}" alt="Dentmax">
                                <p>detaylı inceleyin</p>
                            </div>
                        </div>

                        <div class="before-after-drop-items">

                            <a href="index" class="before-after-drop-items-logo">
                                <div class="nav-logo">
                                    <img loading="lazy" src="{{ asset('assets/main/img/logoSmile.png') }}" alt="Dentmax">
                                    <img loading="lazy" class="second_logo_img" class="header-logo-image" src="{{ asset('assets/main/img/dentmaxLogotxt.svg') }}" alt="DENTMAX">
                                </div>
                            </a>

                            <div class="before-after-drop-item-off"><i class="bx bx-x"></i></div>

                            <div class="before-after-drop-item">

                                <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                                    <symbol id="ei-arrow-left-icon" viewBox="0 0 50 50">
                                        <path
                                            d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17-7.6 17-17 17zm0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z">
                                        </path>
                                        <path d="M25.3 34.7L15.6 25l9.7-9.7 1.4 1.4-8.3 8.3 8.3 8.3z">
                                        </path>
                                        <path d="M17 24h17v2H17z"></path>
                                    </symbol>

                                    <symbol id="ei-arrow-right-icon" viewBox="0 0 50 50">
                                        <path
                                            d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17-7.6 17-17 17zm0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z">
                                        </path>
                                        <path d="M24.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z">
                                        </path>
                                        <path d="M16 24h17v2H16z"></path>
                                    </symbol>
                                </svg>

                                <div class="layout">
                                    <ul class="slider">
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="before-after-item">
                        <div class="before-after-item-images" data-aos="fade-right" data-aos-duration="1000"
                            data-aos-delay="200">
                            <div class="before-after-item-image">
                                <div class="swiper before-after-itemswiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide"><img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-sonrasi.jpg') }}"
                                                alt="Dentmax">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="before-after-item-image">
                                <div class="swiper before-after-itemswiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide"><img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-sonrasi.jpg') }}"
                                                alt="Dentmax">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="before-after-item-images-text">
                                <img loading="lazy" src="{{ asset('assets/main/img/beforeAfterIcon.png') }}" alt="Dentmax">
                                <p>detaylı inceleyin</p>
                            </div>
                        </div>

                        <div class="before-after-drop-items">

                            <a href="index" class="before-after-drop-items-logo">
                                <div class="nav-logo">
                                    <img loading="lazy" src="{{ asset('assets/main/img/logoSmile.png') }}" alt="Dentmax">
                                    <img loading="lazy" class="second_logo_img" class="header-logo-image" src="{{ asset('assets/main/img/dentmaxLogotxt.svg') }}" alt="DENTMAX">
                                </div>
                            </a>

                            <div class="before-after-drop-item-off"><i class="bx bx-x"></i></div>

                            <div class="before-after-drop-item">

                                <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                                    <symbol id="ei-arrow-left-icon" viewBox="0 0 50 50">
                                        <path
                                            d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17-7.6 17-17 17zm0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z">
                                        </path>
                                        <path d="M25.3 34.7L15.6 25l9.7-9.7 1.4 1.4-8.3 8.3 8.3 8.3z">
                                        </path>
                                        <path d="M17 24h17v2H17z"></path>
                                    </symbol>

                                    <symbol id="ei-arrow-right-icon" viewBox="0 0 50 50">
                                        <path
                                            d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17-7.6 17-17 17zm0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z">
                                        </path>
                                        <path d="M24.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z">
                                        </path>
                                        <path d="M16 24h17v2H16z"></path>
                                    </symbol>
                                </svg>

                                <div class="layout">
                                    <ul class="slider">
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="before-after-item">
                        <div class="before-after-item-images" data-aos="fade-right" data-aos-duration="1000"
                            data-aos-delay="200">
                            <div class="before-after-item-image">
                                <div class="swiper before-after-itemswiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide"><img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-sonrasi.jpg') }}"
                                                alt="Dentmax">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="before-after-item-image">
                                <div class="swiper before-after-itemswiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide"><img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-sonrasi.jpg') }}"
                                                alt="Dentmax">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="before-after-item-images-text">
                                <img loading="lazy" src="{{ asset('assets/main/img/beforeAfterIcon.png') }}" alt="Dentmax">
                                <p>detaylı inceleyin</p>
                            </div>
                        </div>

                        <div class="before-after-drop-items">

                            <a href="index" class="before-after-drop-items-logo">
                                <div class="nav-logo">
                                    <img loading="lazy" src="{{ asset('assets/main/img/logoSmile.png') }}" alt="Dentmax">
                                    <img loading="lazy" class="second_logo_img" class="header-logo-image" src="{{ asset('assets/main/img/dentmaxLogotxt.svg') }}" alt="DENTMAX">
                                </div>
                            </a>

                            <div class="before-after-drop-item-off"><i class="bx bx-x"></i></div>

                            <div class="before-after-drop-item">

                                <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                                    <symbol id="ei-arrow-left-icon" viewBox="0 0 50 50">
                                        <path
                                            d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17-7.6 17-17 17zm0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z">
                                        </path>
                                        <path d="M25.3 34.7L15.6 25l9.7-9.7 1.4 1.4-8.3 8.3 8.3 8.3z">
                                        </path>
                                        <path d="M17 24h17v2H17z"></path>
                                    </symbol>

                                    <symbol id="ei-arrow-right-icon" viewBox="0 0 50 50">
                                        <path
                                            d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17-7.6 17-17 17zm0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z">
                                        </path>
                                        <path d="M24.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z">
                                        </path>
                                        <path d="M16 24h17v2H16z"></path>
                                    </symbol>
                                </svg>

                                <div class="layout">
                                    <ul class="slider">
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="before-after-item">
                        <div class="before-after-item-images" data-aos="fade-right" data-aos-duration="1000"
                            data-aos-delay="200">
                            <div class="before-after-item-image">
                                <div class="swiper before-after-itemswiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide"><img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-sonrasi.jpg') }}"
                                                alt="Dentmax">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="before-after-item-image">
                                <div class="swiper before-after-itemswiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide"><img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-sonrasi.jpg') }}"
                                                alt="Dentmax">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="before-after-item-images-text">
                                <img loading="lazy" src="{{ asset('assets/main/img/beforeAfterIcon.png') }}" alt="Dentmax">
                                <p>detaylı inceleyin</p>
                            </div>
                        </div>

                        <div class="before-after-drop-items">

                            <a href="index" class="before-after-drop-items-logo">
                                <div class="nav-logo">
                                    <img loading="lazy" src="{{ asset('assets/main/img/logoSmile.png') }}" alt="Dentmax">
                                    <img loading="lazy" class="second_logo_img" class="header-logo-image" src="{{ asset('assets/main/img/dentmaxLogotxt.svg') }}" alt="DENTMAX">
                                </div>
                            </a>

                            <div class="before-after-drop-item-off"><i class="bx bx-x"></i></div>

                            <div class="before-after-drop-item">

                                <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                                    <symbol id="ei-arrow-left-icon" viewBox="0 0 50 50">
                                        <path
                                            d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17-7.6 17-17 17zm0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z">
                                        </path>
                                        <path d="M25.3 34.7L15.6 25l9.7-9.7 1.4 1.4-8.3 8.3 8.3 8.3z">
                                        </path>
                                        <path d="M17 24h17v2H17z"></path>
                                    </symbol>

                                    <symbol id="ei-arrow-right-icon" viewBox="0 0 50 50">
                                        <path
                                            d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17-7.6 17-17 17zm0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z">
                                        </path>
                                        <path d="M24.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z">
                                        </path>
                                        <path d="M16 24h17v2H16z"></path>
                                    </symbol>
                                </svg>

                                <div class="layout">
                                    <ul class="slider">
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                        <li>
                                            <img loading="lazy" class="my-gallery-image" src="{{ asset('assets/main/img/dentmax-ile-sevecen-yaklasim.jpg') }}"
                                                alt="Dentmax" />
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>




                </div>

            </div>
            <div class="treatment-summaries before-after-treatment-summaries">
                <div class="treatment-summaries-header aos-init aos-animate" data-aos="fade-right"
                    data-aos-duration="1000">
                    TEDAVİ ÖZETLERİ
                </div>
                <div class="treatment-summaries-items">
                    <div class="treatment-summaries-item aos-init aos-animate" data-aos="fade-right"
                        data-aos-duration="1000" data-aos-delay="200">
                        <div class="treatment-summaries-item-image">
                            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-clipboard.svg') }}" alt="Dentmax">
                        </div>
                        <div class="treatment-summaries-item-text">
                            <div class="treatment-summaries-item-text-header">İŞLEM SAYISI</div>
                            <div class="treatment-summaries-item-text-content">2-3</div>
                        </div>
                    </div>
                    <div class="treatment-summaries-item aos-init aos-animate" data-aos="fade-right"
                        data-aos-duration="1000" data-aos-delay="250">
                        <div class="treatment-summaries-item-image">
                            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-alarm.svg') }}" alt="Dentmax">
                        </div>
                        <div class="treatment-summaries-item-text">
                            <div class="treatment-summaries-item-text-header">İŞLEM SÜRESİ</div>
                            <div class="treatment-summaries-item-text-content">2-3 GÜN</div>
                        </div>
                    </div>
                    <div class="treatment-summaries-item aos-init aos-animate" data-aos="fade-right"
                        data-aos-duration="1000" data-aos-delay="300">
                        <div class="treatment-summaries-item-image">
                            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-alarm.svg') }}" alt="Dentmax">
                        </div>
                        <div class="treatment-summaries-item-text">
                            <div class="treatment-summaries-item-text-header">ANESTEZİ YÖNTEMİ</div>
                            <div class="treatment-summaries-item-text-content">LOKAL ANESTEZİ</div>
                        </div>
                    </div>
                    <div class="treatment-summaries-item aos-init aos-animate" data-aos="fade-right"
                        data-aos-duration="1000" data-aos-delay="350">
                        <div class="treatment-summaries-item-image">
                            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-alarm.svg') }}" alt="Dentmax">
                        </div>
                        <div class="treatment-summaries-item-text">
                            <div class="treatment-summaries-item-text-header">HASSASİYET</div>
                            <div class="treatment-summaries-item-text-content">VAR</div>
                        </div>
                    </div>
                </div>
                <div class="treatment-summaries-items">
                    <div class="treatment-summaries-item aos-init aos-animate" data-aos="fade-right"
                        data-aos-duration="1000" data-aos-delay="200">
                        <div class="treatment-summaries-item-image">
                            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-clipboard.svg') }}" alt="Dentmax">
                        </div>
                        <div class="treatment-summaries-item-text">
                            <div class="treatment-summaries-item-text-header">İŞLEM SAYISI</div>
                            <div class="treatment-summaries-item-text-content">2-3</div>
                        </div>
                    </div>
                    <div class="treatment-summaries-item aos-init aos-animate" data-aos="fade-right"
                        data-aos-duration="1000" data-aos-delay="250">
                        <div class="treatment-summaries-item-image">
                            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-alarm.svg') }}" alt="Dentmax">
                        </div>
                        <div class="treatment-summaries-item-text">
                            <div class="treatment-summaries-item-text-header">İŞLEM SÜRESİ</div>
                            <div class="treatment-summaries-item-text-content">2-3 GÜN</div>
                        </div>
                    </div>
                    <div class="treatment-summaries-item aos-init aos-animate" data-aos="fade-right"
                        data-aos-duration="1000" data-aos-delay="300">
                        <div class="treatment-summaries-item-image">
                            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-alarm.svg') }}" alt="Dentmax">
                        </div>
                        <div class="treatment-summaries-item-text">
                            <div class="treatment-summaries-item-text-header">ANESTEZİ YÖNTEMİ</div>
                            <div class="treatment-summaries-item-text-content">LOKAL ANESTEZİ</div>
                        </div>
                    </div>
                    <div class="treatment-summaries-item aos-init aos-animate" data-aos="fade-right"
                        data-aos-duration="1000" data-aos-delay="350">
                        <div class="treatment-summaries-item-image">
                            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-alarm.svg') }}" alt="Dentmax">
                        </div>
                        <div class="treatment-summaries-item-text">
                            <div class="treatment-summaries-item-text-header">HASSASİYET</div>
                            <div class="treatment-summaries-item-text-content">VAR</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="before-after-staff-wrapper">
        <div class="before-after-staff-wrapper-buttons">
            <button class="before-after-staff-wrapper-buttons-left detail-content-staff-prev">
                <i class="bx bx-arrow-back"></i>
            </button>

            <button
                class="before-after-staff-wrapper-buttons-right detail-content-staff-next detail-content-staff-next-more">
                <i class="bx bx-arrow-back"></i>
            </button>
        </div>


        <div id="detail-content-staff-swiper" class="owl-carousel">
            <div>
                <div class="detail-content-staff-box">
                    <div class="detail-content-staff-box-image">
                        <img loading="lazy" src="{{ asset('assets/main/img/dentmax-nurse.jpg') }}" alt="Dentmax">
                    </div>
                    <div class="detail-content-staff-box-text">
                        <h2>Uzm.Dyt. NUR ECEM BAYDI</h2>
                        <div class="detail-content-staff-box-text-clinic">
                            <p>İSTANBUL KLİNİĞİ</p>
                            <p>Pedodonti Çocuk Diş Sağlığı</p>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="detail-content-staff-box">
                    <div class="detail-content-staff-box-image">
                        <img loading="lazy" src="{{ asset('assets/main/img/dentmax-nurse.jpg') }}" alt="Dentmax">
                    </div>
                    <div class="detail-content-staff-box-text">
                        <h2>Uzm.Dyt. NUR ECEM BAYDI</h2>
                        <div class="detail-content-staff-box-text-clinic">
                            <p>İSTANBUL KLİNİĞİ</p>
                            <p>Pedodonti Çocuk Diş Sağlığı</p>
                        </div>
                    </div>
                </div>

            </div>
            <div>
                <div class="detail-content-staff-box">
                    <div class="detail-content-staff-box-image">
                        <img loading="lazy" src="{{ asset('assets/main/img/dentmax-nurse.jpg') }}" alt="Dentmax">
                    </div>
                    <div class="detail-content-staff-box-text">
                        <h2>Uzm.Dyt. NUR ECEM BAYDI</h2>
                        <div class="detail-content-staff-box-text-clinic">
                            <p>İSTANBUL KLİNİĞİ</p>
                            <p>Pedodonti Çocuk Diş Sağlığı</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="before-after-item-form">
        <div></div>
        <form class="considerations-text-contact-us" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST"
            id="beforeAfterForm">
            <div class="considerations-text-contact-us-header" data-aos="fade-right" data-aos-duration="1000">
                <h3>SORULARINIZI İLETEBİLİRSİNİZ</h3>
            </div>
            <div class="considerations-text-contact-us-line considerations-text-contact-us-line-1">
                <input type="text" placeholder="Ad Soyad" name="blog-detail-name" data-aos="fade-right"
                    data-aos-duration="1000" data-aos-delay="100">
                <input type="text" placeholder="E-Posta" name="blog-detail-eposta" data-aos="fade-right"
                    data-aos-duration="1000" data-aos-delay="200">
                <input type="text" placeholder="Telefon" name="blog-detail-phone" data-aos="fade-right"
                    data-aos-duration="1000" data-aos-delay="300">
            </div>
            <div class="considerations-text-contact-us-line considerations-text-contact-us-line-2" data-aos="fade-right"
                data-aos-duration="1000" data-aos-delay="400">
                <textarea name="blog-detail-textarea" id="blog-detail-textarea" cols="30" rows="10"
                    placeholder="Notunuz"></textarea>
            </div>
            <div class="considerations-text-contact-us-btn" data-aos="fade-up" data-aos-duration="1000"
                data-aos-delay="100">
                <!-- Google reCAPTCHA -->
                <div class="g-recaptcha" data-sitekey="6LckRxApAAAAAAeKbeJLkQh-kGZjCKn56dnA3kU5"></div>
                <!-- Submit butonunu JavaScript ile engelleyin -->
                <button type="button" class="turquoise-button" onclick="beforeAfterForm()">GÖNDER</button>
            </div>
        </form>
    </div>


    <!-- İlginizi Çekebilir -->
    <div class="section-header container-s">
        <div class="section-header-text aos-init aos-animate" data-aos="fade-right" data-aos-duration="1000">
            <h3>İLGİNİZİ</h3>
            <h3>ÇEKEBİLİR<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="bx bx-left-arrow-alt other-treatment-swiper-prev"></i>
                <i class="bx bx-right-arrow-alt other-treatment-swiper-next"></i>
            </div>
        </div>
    </div>
    <div class="other-treatment-swiper-wrapper">
        <div id="other-treatment-swiper" class="owl-carousel">
            <div>
                <a href="#" class="other-treatment-swiper-box">
                    <div class="other-treatment-swiper-box-image">
                        <img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-sonrasi.jpg') }}" alt="Dentmax">
                    </div>
                    <div class="other-treatment-swiper-box-text">
                        <div class="other-treatment-swiper-box-text-header">
                            <h2>Porselen Uygulaması</h2>
                        </div>
                        <div class="other-treatment-swiper-box-text-content">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque, explicabo
                                a officia itaque quasi?</p>
                        </div>
                    </div>
                    <div class="other-treatment-swiper-box-bg"></div>
                </a>
            </div>
            <div>
                <a href="#" class="other-treatment-swiper-box">
                    <div class="other-treatment-swiper-box-image">
                        <img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-gulus-1.jpg') }}" alt="Dentmax">
                    </div>
                    <div class="other-treatment-swiper-box-text">
                        <div class="other-treatment-swiper-box-text-header">
                            <h2>Estetik Diş Hekimliği</h2>
                        </div>
                        <div class="other-treatment-swiper-box-text-content">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque, explicabo
                                a officia itaque quasi?</p>
                        </div>
                    </div>
                    <div class="other-treatment-swiper-box-bg"></div>

                </a>
            </div>
            <div>
                <a href="#" class="other-treatment-swiper-box">
                    <div class="other-treatment-swiper-box-image">
                        <img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-gulus-2.jpg') }}" alt="Dentmax">
                    </div>
                    <div class="other-treatment-swiper-box-text">
                        <div class="other-treatment-swiper-box-text-header">
                            <h2>Çene Cerrahisi</h2>
                        </div>
                        <div class="other-treatment-swiper-box-text-content">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque, explicabo
                                a officia itaque quasi?</p>
                        </div>
                    </div>
                    <div class="other-treatment-swiper-box-bg"></div>
                </a>
            </div>
            <div>
                <a href="#" class="other-treatment-swiper-box">
                    <div class="other-treatment-swiper-box-image">
                        <img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-gulus-3.jpg') }}" alt="Dentmax">
                    </div>
                    <div class="other-treatment-swiper-box-text">
                        <div class="other-treatment-swiper-box-text-header">
                            <h2>Pedodonti (Çocuk)</h2>
                        </div>
                        <div class="other-treatment-swiper-box-text-content">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque, explicabo
                                a officia itaque quasi?</p>
                        </div>
                    </div>
                    <div class="other-treatment-swiper-box-bg"></div>

                </a>
            </div>
            <div>
                <a href="#" class="other-treatment-swiper-box">
                    <div class="other-treatment-swiper-box-image">
                        <img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-sonrasi.jpg') }}" alt="Dentmax">
                    </div>

                    <div class="other-treatment-swiper-box-text">
                        <div class="other-treatment-swiper-box-text-header">
                            <h2>Endodonti</h2>
                        </div>
                        <div class="other-treatment-swiper-box-text-content">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque, explicabo
                                a officia itaque quasi?</p>
                        </div>
                    </div>
                    <div class="other-treatment-swiper-box-bg"></div>
                </a>
            </div>
            <div>
                <a href="#" class="other-treatment-swiper-box">
                    <div class="other-treatment-swiper-box-image">
                        <img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-gulus-1.jpg') }}" alt="Dentmax">
                    </div>
                    <div class="other-treatment-swiper-box-text">
                        <div class="other-treatment-swiper-box-text-header">
                            <h2>Ortodonti</h2>
                        </div>
                        <div class="other-treatment-swiper-box-text-content">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque, explicabo
                                a officia itaque quasi?</p>
                        </div>
                    </div>
                    <div class="other-treatment-swiper-box-bg"></div>
                </a>
            </div>
            <div>
                <a href="#" class="other-treatment-swiper-box">
                    <div class="other-treatment-swiper-box-image">
                        <img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-gulus-2.jpg') }}" alt="Dentmax">
                    </div>
                    <div class="other-treatment-swiper-box-text">
                        <div class="other-treatment-swiper-box-text-header">
                            <h2>Periodontoloji</h2>
                        </div>
                        <div class="other-treatment-swiper-box-text-content">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque, explicabo
                                a officia itaque quasi?</p>
                        </div>
                    </div>
                    <div class="other-treatment-swiper-box-bg"></div>
                </a>
            </div>
            <div>
                <a href="#" class="other-treatment-swiper-box">
                    <div class="other-treatment-swiper-box-image">
                        <img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-gulus-3.jpg') }}" alt="Dentmax">
                    </div>

                    <div class="other-treatment-swiper-box-text">
                        <div class="other-treatment-swiper-box-text-header">
                            <h2>Organik Diş Dolgusu</h2>
                        </div>
                        <div class="other-treatment-swiper-box-text-content">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque, explicabo
                                a officia itaque quasi?</p>
                        </div>
                    </div>
                    <div class="other-treatment-swiper-box-bg"></div>
                </a>
            </div>
            <div>
                <a href="#" class="other-treatment-swiper-box">
                    <div class="other-treatment-swiper-box-image">
                        <img loading="lazy" src="{{ asset('assets/main/img/dentmax-ile-gulus-2.jpg') }}" alt="Dentmax">
                    </div>
                    <div class="other-treatment-swiper-box-text">
                        <div class="other-treatment-swiper-box-text-header">
                            <h2>Holistik Diş Hekimliği</h2>
                        </div>
                        <div class="other-treatment-swiper-box-text-content">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque, explicabo
                                a officia itaque quasi?</p>
                        </div>
                    </div>
                    <div class="other-treatment-swiper-box-bg"></div>
                </a>
            </div>
        </div>
    </div>

</div>
    {% endblock %}
{% endblock %}

{% block pageScript %}
    <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://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="{{ asset('assets/main/js/image-zoom.js') }}"></script>
    <script
        src="https://raw.githack.com/SochavaAG/example-mycode/master/pens/slick-slider/plugins/slick/slick.min.js"></script>
    <script>
        AOS.init({
            once: true,
        });
        (function ($) {
            $(function () {


                $('.slider').slick({
                    dots: true,
                    prevArrow: '<a class="slick-prev slick-arrow" href="#" style=""><div class="icon icon--ei-arrow-left"><i class="fas fa-chevron-left"></i></div></a>',
                    nextArrow: '<a class="slick-next slick-arrow" href="#" style=""><div class="icon icon--ei-arrow-right"><i class="fas fa-chevron-right"></i></div></a>',
                    customPaging: function (slick, index) {
                        var targetImage = slick.$slides.eq(index).find('img').attr('src');
                        return '<img loading="lazy" src=" ' + targetImage + ' "/>';
                    }
                });


            });
        })(jQuery);
        $(document).ready(function () {
            $('.my-gallery-image').each(function () {
                $(this).imageZoom({
                    zoom: 300
                });
            });
        });


        $(document).ready(function () {
            $('.before-after-item').click(function () {
                // Tüm before-after-item'ların içindeki before-after-drop-items'ları sıfırlayın
                $('.before-after-item .before-after-drop-items').removeClass('active');

                // Tıklanan before-after-item'ın içindeki before-after-drop-items'a active classını ekle
                $(this).find('.before-after-drop-items').addClass('active');

                if ($(this).find('.before-after-drop-items').hasClass('active')) {
                    $(".global-content-inside-long").css('zIndex', 'unset');
                    $("body").css({
                        'overflow': 'hidden'
                    });


                } else {
                    $(".global-content-inside-long").css('zIndex', '5');
                    $("body").css({
                        'overflow': 'auto'
                    });
                }

                $(document).ready(function () {
                    $('.before-after-drop-items').on('click', function (event) {
                        event.stopPropagation();
                        if (!$(event.target).closest('.layout').length) {
                            $('.before-after-drop-items').removeClass('active');
                        }
                    });
                });
            });


            if ($('.before-after-drop-item-off').click(function () {
                $(".global-content-inside-long").css('zIndex', '5');
                $("body").css({
                    'overflow': 'auto'
                });

                $(this).closest('.before-after-items').find('.before-after-drop-items').removeClass('active');
            }));




        });
        const detailContentStaffSwiper = $('#detail-content-staff-swiper').owlCarousel({
            dots: true,
            loop: true,
            margin: 30,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplaySpeed: 800,
            responsive: {
                0: {
                    items: 1
                },
                1280: {
                    items: 3
                }
            }
        });

        $('.detail-content-staff-next').click(function () {
            detailContentStaffSwiper.trigger('next.owl.carousel');
        });

        $('.detail-content-staff-prev').click(function () {
            detailContentStaffSwiper.trigger('prev.owl.carousel');
        });

        function beforeAfterForm() {
            var captchaResponse1 = grecaptcha.getResponse();

            if (captchaResponse1.length == 0) {
                alert('Lütfen captcha bölümünü kontrol ediniz!');
            } else {
                document.getElementById('beforeAfterForm').submit();
            }
        }
    </script>
{% endblock %}