
<div class="well" id="well">
  <div class="panel">
    <section class="content">
      <div class="container-fluid">
        <div class="row no-gutters">
          <div class="col-12 ps-0 pe-0">
            <div class="header-left">
                <div class="row">
                  <div class="col-12 pe-0 ps-0">
                    <ul class="header-left-social-menu">
                      <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                      <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
                      <li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
                      <li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
                      <li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
                    </ul>
                  </div>
                </div>
            </div> 
            <div class="carousel">
              <div class="list">
                <div class="item" style="background-image: url('../assets/images/slider/slider-0001.jpg');">
                  <div class="content">
                    <div class="title">MEDRO</div>
                     <div class="img">
                         <img src="../assets/images/slider/urun-01.png" alt="">
                     </div>
                    <div class="btn-link">
                        <button>DETAYLAR</button>
                    </div>
                  </div>
                </div>
                <div class="item" style="background-image: url('../assets/images/slider/slider-0001.jpg');">
                  <div class="content">
                    <div class="title">MEDRO</div>
                     <div class="img">
                         <img src="../assets/images/slider/urun-01.png" alt="">
                     </div>
                    <div class="btn-link">
                      <button>DETAYLAR</button>
                    </div>
                  </div>
                </div>
                <div class="item" style="background-image: url('../assets/images/slider/slider-0001.jpg');">
                  <div class="content">
                    <div class="title">MEDRO</div>
                     <div class="img">
                         <img src="../assets/images/slider/urun-01.png" alt="">
                     </div>
                    <div class="btn-link">
                      <button>DETAYLAR</button>
                    </div>
                  </div>
                </div>
                <div class="item" style="background-image: url('../assets/images/slider/slider-0001.jpg');">
                  <div class="content">
                    <div class="title">MEDRO</div>
                     <div class="img">
                         <img src="../assets/images/slider/urun-01.png" alt="">
                     </div>
                    <div class="btn-link">
                      <button>DETAYLAR</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="arrows">
                <button class="prev"><</button>
                <button class="next">></button>
              </div>
              <div class="timeRunning"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <div class="panel">
       <section class="about-us">
           <div class="container-fluid">
               <div class="row">
                   <div class="col-6">
                       <div class="about-us-content">
                           <h1>GÜVENLİ ALANLAR GÜVENLİ,YOLLAR</h1>
                           <h2>GELECEĞİNE <br> GÜÇ KAT</h2>
                           <div class="about-us-content-text">
                                 <p>Mesan, 1991 yılında kurulmuş olup, saha emniyeti ve trafik emniyeti alanında faaliyet gösteren bir mühendislik, Ar-Ge, entegrasyon ve üretim şirketidir. Kurulduğu günden bu yana Türk Silahlı Kuvvetleri, Jandarma Genel Komutanlığı, Emniyet Genel Müdürlüğü ve diğer kamu kurum ve kuruluşlarına kritik görev cihazları ve sistemleri sağlamaktadır.</p>
                                 <p>Mesan, mayın ve IED'lerle mücadelede ülke çapında ve özel olarak Türk Silahlı Kuvvetleri, Jandarma Genel Komutanlığı ve Emniyet Genel Müdürlüğü'ne mayın dedektörleri, IED dedektörleri, dedektör eğitim sistemleri ve koruyucu ekipmanlar sağlamaktadır. Mesan ayrıca Polis ve Jandarma Trafik ekipleri, Karayolları ve Belediyeler için hız tespit ve trafik istatistik sistemleri üretmektedir.</p>
                           </div>
                           <div class="about-us-content-btn">
                                <button class="button">
                                  <span class="text">Hakkımızda</span>
                                  <div class="overlay">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right">
                                      <path d="M5 12h14" />
                                      <path d="m12 5 7 7-7 7" />
                                    </svg>
                                  </div>
                                </button>
                           </div>
                       </div>
                       
                   </div>
                   <div class="col-6 pe-0 ps-0">
                          <div class="gallery">
                            <img src="../assets/images/kurumsal/001.JPG"  alt="Mesan-Savunma">
                            <img src="../assets/images/kurumsal/002.png"  alt="Mesan-Savunma">
                            <img src="../assets/images/kurumsal/004.png"  alt="Mesan-Savunma">
                            <img src="../assets/images/kurumsal/005.JPG"  alt="Mesan-Savunma">
                            <img src="../assets/images/kurumsal/008.JPG"  alt="Mesan-Savunma">
                            <img src="../assets/images/kurumsal/007.JPG"  alt="Mesan-Savunma">
                            <img src="../assets/images/kurumsal/004.png"  alt="Mesan-Savunma">
                            <img src="../assets/images/kurumsal/005.JPG"  alt="Mesan-Savunma">
                            <img src="../assets/images/kurumsal/medro.png"  alt="Mesan-Savunma">
                          </div>
                   </div>
               </div>
           </div>
       </section>
  </div>
  <div class="panel">
    <section class="urunler">
      <div class="container-fluid">
        <div class="row">
          <div class="col-5">
              <div class="about-us-content" id="hizmetler">
                 <h1>GÜVENLİ ALANLAR GÜVENLİ,YOLLAR</h1>
                 <h2>GELECEĞİNE <br> GÜÇ KAT</h2>
                 <div class="about-us-content-text">
                       <p>Mesan, 1991 yılında kurulmuş olup, saha emniyeti ve trafik emniyeti alanında faaliyet gösteren bir mühendislik, Ar-Ge, entegrasyon ve üretim şirketidir. Kurulduğu günden bu yana Türk Silahlı Kuvvetleri, Jandarma Genel Komutanlığı, Emniyet Genel Müdürlüğü ve diğer kamu kurum ve kuruluşlarına kritik görev cihazları ve sistemleri sağlamaktadır.</p>
                       <p>Mesan, mayın ve IED'lerle mücadelede ülke çapında ve özel olarak Türk Silahlı Kuvvetleri, Jandarma Genel Komutanlığı ve Emniyet Genel Müdürlüğü'ne mayın dedektörleri, IED dedektörleri, dedektör eğitim sistemleri ve koruyucu ekipmanlar sağlamaktadır. Mesan ayrıca Polis ve Jandarma Trafik ekipleri, Karayolları ve Belediyeler için hız tespit ve trafik istatistik sistemleri üretmektedir.</p>
                 </div>
                  <div class="about-us-content-btn">
                      <button class="button">
                        <span class="text">Detaylı Bilgi</span>
                        <div class="overlay">
                          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right">
                            <path d="M5 12h14" />
                            <path d="m12 5 7 7-7 7" />
                          </svg>
                        </div>
                      </button>
                  </div>
              </div>
          </div>
          <div class="col-7">
            <div class="main">
                <div class="inner">
                    <div class="card" style="background:url('../assets/images/urunler/eğitim.jpg')">
                        <div class="text">
                            <h3>Saha Güvenliği</h3>
                        </div>
                    </div>
                    <div class="card" style="background:url('../assets/images/urunler/saha.jpg')">
                        <div class="text">
                            <h3>Eğitim Sistemleri</h3>
                        </div>
                    </div>
                    <div class="card" style="background:url('../assets/images/urunler/trafik.jpg')">
                        <div class="text">
                            <h3>Trafik Güvenliği</h3>
                        </div>
                    </div>
                </div>
            </div>  
          </div>
        </div>
      </div>
    </section>
  </div>
  <div class="panel">
      <section class="haberler">
          <div class="container-fluid">
            <div class="row">
              <div class="col-6 ">
                  <div class="about-us-content" id="hizmetler">
                     <h1>GÜVENLİ ALANLAR GÜVENLİ,YOLLAR</h1>
                     <h2>GELECEĞİNE <br> GÜÇ KAT</h2>
                     <div class="about-us-content-text">
                           <p>Mesan, 1991 yılında kurulmuş olup, saha emniyeti ve trafik emniyeti alanında faaliyet gösteren bir mühendislik, Ar-Ge, entegrasyon ve üretim şirketidir. Kurulduğu günden bu yana Türk Silahlı Kuvvetleri, Jandarma Genel Komutanlığı, Emniyet Genel Müdürlüğü ve diğer kamu kurum ve kuruluşlarına kritik görev cihazları ve sistemleri sağlamaktadır.</p>
                           <p>Mesan, mayın ve IED'lerle mücadelede ülke çapında ve özel olarak Türk Silahlı Kuvvetleri, Jandarma Genel Komutanlığı ve Emniyet Genel Müdürlüğü'ne mayın dedektörleri, IED dedektörleri, dedektör eğitim sistemleri ve koruyucu ekipmanlar sağlamaktadır. Mesan ayrıca Polis ve Jandarma Trafik ekipleri, Karayolları ve Belediyeler için hız tespit ve trafik istatistik sistemleri üretmektedir.</p>
                     </div>
                      <div class="about-us-content-btn">
                          <button class="button">
                            <span class="text">Detaylı Bilgi</span>
                            <div class="overlay">
                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right">
                                <path d="M5 12h14" />
                                <path d="m12 5 7 7-7 7" />
                              </svg>
                            </div>
                          </button>
                      </div>
                  </div>
              </div>
              <div class="col-6">
                  <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                          <div class="haber-item">
                             <div class="haber-item-img">
                                <img src="../assets/images/haberler/01.jpg" alt="Mesan-Savunma">
                             </div>
                             <div class="haber-item-content">
                                <div class="haber-item-title">
                                   <h3>Haber Metni 1</h3>
                                 </div>
                                 <div class="haber-item-text">
                                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore voluptatum totam commodi earum magnam excepturi assumenda cupiditate quasi fuga nesciunt.</p>
                                 </div>
                                 <div class="haber-item-button">
                                   <a href="#">Daha Fazlası</a>
                                 </div>
                             </div> 
                          </div>
                      </div>
                       <div class="swiper-slide">
                          <div class="haber-item">
                             <div class="haber-item-img">
                                <img src="../assets/images/haberler/02.jpg" alt="Mesan-Savunma">
                             </div>
                             <div class="haber-item-content">
                                <div class="haber-item-title">
                                   <h3>Haber Metni 2</h3>
                                 </div>
                                 <div class="haber-item-text">
                                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore voluptatum totam commodi earum magnam excepturi assumenda cupiditate quasi fuga nesciunt.</p>
                                 </div>
                                 <div class="haber-item-button">
                                   <a href="#">Daha Fazlası</a>
                                 </div>
                             </div> 
                          </div>
                      </div>
                      <div class="swiper-slide">
                          <div class="haber-item">
                             <div class="haber-item-img">
                                <img src="../assets/images/haberler/03.jpg" alt="Mesan-Savunma">
                             </div>
                             <div class="haber-item-content">
                                <div class="haber-item-title">
                                   <h3>Haber Metni 3</h3>
                                 </div>
                                 <div class="haber-item-text">
                                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore voluptatum totam commodi earum magnam excepturi assumenda cupiditate quasi fuga nesciunt.</p>
                                 </div>
                                 <div class="haber-item-button">
                                   <a href="#">Daha Fazlası</a>
                                 </div>
                             </div> 
                          </div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-control">
                     <div class="custom-swiper-nav-column d-flex flex-column">
                        <div class="custom-swiper-button-prev">
                          <i class="fa-solid fa-chevron-up"></i>
                        </div>
                        <div class="custom-swiper-button-next">
                           <i class="fa-solid fa-chevron-down"></i>
                        </div>
                      </div>
                  </div>
              </div>
            </div>
          </div>
      </section>
  </div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper(".mySwiper", {
  direction: "vertical",
  slidesPerView: 1,
  spaceBetween: 0,
  keyboard: {
    enabled: true,
  },
  speed: 700,
  autoHeight: false,

  navigation: {
    nextEl: ".custom-swiper-button-next",
    prevEl: ".custom-swiper-button-prev",
  },
});

</script>
<?php include "../includes/footer.php"; ?>