{% extends 'main_base.html.twig' %}
{% 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>
    {% block container %}
       <div class="content">
           <div class="global-content">
               <div class="content-router content-router-global">
                   <div class="content-router-links">
                       <ul>
                           <li><a href="#">Yrd. Doç. Dr. Fatih Kahraman</a></li>
                           <li><a href="#">Dt. Ayşe Nur Kahraman</a></li>
                           <li><a href="#">Dt. Çiğdem Kahraman</a></li>
                           <li><a href="#">Uzm. Dr. Sedanur Eroglu Efe</a></li>
                           <li><a href="#">Dt. Sinem Gümüş</a></li>
                           <li><a href="#">Dt. İlayda Ektik</a></li>
                           <li><a href="#">Gülnur Sivri</a></li>
                           <li><a href="#">Mesure Çelik</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="treatments">
                       <div class="section-header section-header-treatment-header section-header-staff ">
                           <div class="section-header-text aos-init aos-animate" data-aos="fade-right" data-aos-duration="700">
                               <h3>Gülüş Tasarımı Planlama<span class="section-header-text-line"></span></h3>
                           </div>
                           <div class="section-header-right">
                               <div class="section-header-right-border"></div>
                           </div>
                       </div>
                       <div class="treatments-items">
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Dijital gülüş tasarımı</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <div class="treatments-item-box">
                               <div class="treatments-item-image">
                                   <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                   <div class="treatments-item-bg"></div>
                                   <div class="treatments-item-bg-logo">
                                       <img loading="lazy" src="images/logoSmile.png" alt="">
                                   </div>
                               </div>
                               <div class="treatments-box-item-text">
                                   <div class="treatments-box-item-text">
                                       <h2>Organik gülüş tasarımı</h2>
                                   </div>
                               </div>
                           </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Hollywood Smile</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Akıllı mockup Uygulama</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                       </div>

                       <div class="section-header section-header-treatment-header section-header-staff ">
                           <div class="section-header-text aos-init aos-animate" data-aos="fade-right" data-aos-duration="700">
                               <h3>Beyaz Estetik<span class="section-header-text-line"></span></h3>
                           </div>
                           <div class="section-header-right">
                               <div class="section-header-right-border"></div>
                           </div>
                       </div>
                       <div class="treatments-items">
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Lamine Diş (yaprak diş)</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Zirkonyum Kaplama</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Diş Beyazlatma</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Kuron & Köprü Dişler</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Diğer Diş Protez Tedavileri</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Beyaz Lekelerin Silinmesi (ICON)</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Ön Bölge Estetik Dolgu</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Eksik Diş Tedavileri</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                       </div>
                       <div class="section-header section-header-treatment-header section-header-staff ">
                           <div class="section-header-text aos-init aos-animate" data-aos="fade-right" data-aos-duration="700">
                               <h3>Pembe Estetik<span class="section-header-text-line"></span></h3>
                           </div>
                           <div class="section-header-right">
                               <div class="section-header-right-border"></div>
                           </div>
                       </div>
                       <div class="treatments-items">
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Gingivektomi / Diş eti şekillendirme</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Dental Dudak Desteği</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Gummy smile tedavileri</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                       </div>
                       <div class="section-header section-header-treatment-header section-header-staff ">
                           <div class="section-header-text aos-init aos-animate" data-aos="fade-right" data-aos-duration="700">
                               <h3>Hijyen<span class="section-header-text-line"></span></h3>
                           </div>
                           <div class="section-header-right">
                               <div class="section-header-right-border"></div>
                           </div>
                       </div>
                       <div class="treatments-items">
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>DentMax Total Temizlik</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Dental Dudak Desteği</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                       </div>
                       <div class="section-header section-header-treatment-header section-header-staff ">
                           <div class="section-header-text aos-init aos-animate" data-aos="fade-right" data-aos-duration="700">
                               <h3>Gülüş tasarımı aksesuarları<span class="section-header-text-line"></span></h3>
                           </div>
                           <div class="section-header-right">
                               <div class="section-header-right-border"></div>
                           </div>
                       </div>
                       <div class="treatments-items">
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Diş pırlantası</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Bişektomi / Hollywood Yanağı Uygulaması</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Dudak Dolgusu</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                           <a href="tedavi-detay" class="treatments-item">
                               <div class="treatments-item-box">
                                   <div class="treatments-item-image">
                                       <img loading="lazy" src="images/dentmax-dogru-dis-fircalama.jpg" alt="Dentmax">
                                       <div class="treatments-item-bg"></div>
                                       <div class="treatments-item-bg-logo">
                                           <img loading="lazy" src="images/logoSmile.png" alt="">
                                       </div>
                                   </div>
                                   <div class="treatments-box-item-text">
                                       <div class="treatments-box-item-text">
                                           <h2>Diş Dövmesi / Grillz</h2>
                                       </div>
                                   </div>
                               </div>
                           </a>
                       </div>
                   </div>
               </div>
           </div>
       </div>
    {% endblock %}
{% endblock %}

{% block pageScript %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.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>AOS.init({once: true})</script>
{% endblock %}