/* Whatsapp ve Telefon*/

/* Telefon Bölümü */
.phone-section {
    position: fixed;
    bottom: 20px; /* Alt mesafe */
    right: 20px; /* Sol mesafe */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9999; /* Simgelerin üstte kalması için yüksek z-index */
}

.phone-icon {
    background-color: #34b7f1; /* Telefon ikonunun arka plan rengi */
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    margin-bottom: 5px; /* İkon ile metin arasındaki mesafe */
    text-decoration: none; /* Altını çizme */
}

.phone-icon img {
    width: 50px; /* İkon genişliği */
    height: 50px; /* İkon yüksekliği */
    display: block;
}

.phone-text {
    color: #34b7f1; /* Telefon rengi */
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-size: 14px; /* Metin boyutu */
    font-weight: bold;
    line-height: 1.3;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* Metin gölgesi */
    padding: 5px;
    background-color: red; /* Metin arka plan rengi */
    border-radius: 10px; /* Köşeleri yuvarla */
    border: 2px solid #34b7f1; /* Metin kutusunun kenarlığı */
    text-decoration: none; /* Altını çizme */
    display: inline-block; /* Blok olarak gösterir */
}

.phone-text:hover {
    background-color: #e0f7ff; /* Hover efektinde arka plan rengini değiştirir */
    color: #0288d1; /* Hover efektinde metin rengini değiştirir */
}

/* WhatsApp Bölümü */
.whatsapp-section {
    position: fixed;
    bottom: 20px; /* Alt mesafe */
    left: 20px; /* Sol mesafe */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9999; /* Simgelerin üstte kalması için yüksek z-index */
}

.whatsapp-icon {
    background-color: #25D366; /* WhatsApp yeşili */
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    margin-bottom: 5px; /* İkon ile metin arasındaki mesafe */
}

.whatsapp-icon img {
    width: 50px; /* İkon genişliği */
    height: 50px; /* İkon yüksekliği */
    display: block;
}

.whatsapp-text {
    color: #25D366; /* WhatsApp rengi */
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-size: 14px; /* Metin boyutu */
    font-weight: bold;
    line-height: 1.3;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* Metin gölgesi */
    padding: 5px;
    background-color: red; /* Metin arka plan rengi */
    border-radius: 10px; /* Köşeleri yuvarla */
    border: 2px solid #25D366; /* Metin kutusunun kenarlığı */
    text-decoration: none; /* Bağlantı altını çizme */
}

.whatsapp-text:hover {
    background-color: #eafaf1; /* Hover efektinde arka plan rengini değiştirir */
}

/* Slider Resimleri */
.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 1; /* Resimlerin z-index değerini düşürdük */
}

.slides {
    display: flex;
    transition: transform 1s ease-in-out; /* Geçiş süresi ve efekti */
    width: 300%; /* 3 resim olduğu varsayılarak genişlik ayarlanır */
}

.slide {
    width: 100vw; /* Her bir slayt ekran genişliğinde olacak */
    flex-shrink: 0;
    height: 100vh; /* Ekranın yüksekliği kadar olacak */
    position: relative;
    overflow: hidden; /* Resimlerin container dışında kalmasını engeller */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi container'a uyacak şekilde keser */
    display: block;
    position: absolute; /* Resmin konumunu ayarlamak için */
    top: 0; /* Üstten tam hizalı */
    left: 0; /* Soldan tam hizalı */
}

/* Slider kontrolleri */
.controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10;
}

.control-left, .control-right {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 1.5rem;
}

.control-left:hover, .control-right:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Daire şeklinde radio butonlar */
.radio-buttons {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.radio-button {
    cursor: pointer;
    display: inline-block;
    margin: 0 5px;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    transition: background-color 0.3s;
}

/* Aktif radio butonu stili */
input[type="radio"] {
    display: none; /* Radio butonları gizler */
}

/* Slayt geçişleri */
input[type="radio"]:nth-of-type(1):checked ~ .slides {
    transform: translateX(0%);
}

input[type="radio"]:nth-of-type(2):checked ~ .slides {
    transform: translateX(-33.7%);
}

input[type="radio"]:nth-of-type(3):checked ~ .slides {
    transform: translateX(-67.4%);
}

/* Aktif radio butonu stili */
input[type="radio"]:nth-of-type(1):checked ~ .radio-buttons .radio-button:nth-of-type(1),
input[type="radio"]:nth-of-type(2):checked ~ .radio-buttons .radio-button:nth-of-type(2),
input[type="radio"]:nth-of-type(3):checked ~ .radio-buttons .radio-button:nth-of-type(3) {
    background-color: #000; /* Aktif buton rengi */
}
/* Global styles */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Yatay kaymayı engellemek için */
}
/* Mobil uyum için medya sorgusu */
@media (max-width: 768px) {
    header .logo h1 {
        font-size: 1.5rem; /* Mobilde yazı boyutunu küçült */
        right: 0; /* Sağ kaymayı engelle */
    }

    header .logo h1::after {
        transform: scaleX(1); /* Alt çizgi görünür hale gelsin */
    }
}

@media (max-width: 480px) {
    header .logo h1 {
        font-size: 1.2rem; /* Daha küçük mobil cihazlar için font boyutunu küçült */
    }
}
/* Mobil uyum için media query */
@media screen and (max-width: 768px) {
    .hero {
        background-position: center top; /* Resmin üst kısmına odaklanıyoruz */
        background-size: cover; /* Resmin boyutunun korunması */
        padding: 80px 0; /* Mobilde padding miktarını azaltıyoruz */
        height: 90vh; /* Mobilde yükseklik oranını azaltıyoruz */
    }
}

@media screen and (max-width: 425px) {
    .hero {
        background-position: center top; /* Resmin üst kısmına odaklanıyoruz */
        background-size: cover; /* Resmin boyutunun korunması */
        padding: 60px 0; /* Daha küçük ekranlar için padding azaltılır */
        height: 90vh; /* Mobilde daha uygun bir yüksekliğe çekilir */
    }
}
@media (max-width: 768px) {
    /* Hamburger menu */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 1100;
        width: 30px; /* Hamburger menüsünü biraz daha büyük yapalım */
        height: 22px; /* Yüksekliği ayarlıyoruz */
        justify-content: space-between; /* Çubuklar arasındaki mesafeyi artırıyoruz */
    }

    .menu-toggle .bar {
        width: 100%;
        height: 4px; /* Çubuğun yüksekliğini artırıyoruz */
        background-color: white;
        border-radius: 5px; /* Kenarlarını yuvarlatıyoruz */
        transition: all 0.3s ease; /* Animasyon ekliyoruz */
    }

    /* Hamburger menü açıldığında çubukların dönüşümü */
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg); /* Üst çubuğun dönüşümü */
    }

    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0; /* Orta çubuğu kaybolmasını sağlıyoruz */
    }

    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg); /* Alt çubuğun dönüşümü */
    }

    /* Navbar menu container */
    header nav ul {
        display: none;
        flex-direction: column;
        width: 100%; /* Menü tam genişlikte olacak */
        background-color: rgba(44, 62, 80, 0.9); /* Arka plan rengi */
        position: absolute;
        top: 60px; /* Menü header'ın altına gelsin */
        left: 0;
        padding: 0;
        margin: 0;
        text-align: center;
        box-sizing: border-box;
    }

    /* Hamburger menü açıldığında görünür yap */
    .menu-toggle.active + ul {
        display: flex;
    }

    /* Menü öğeleri */
    header nav ul li {
        width: 100%; /* Menü öğeleri tam genişlikte olacak */
        text-align: center;
    }

    header nav ul li a {
        font-size: 1.2rem;
        padding: 10px 20px;
        display: block;
        width: 100%; /* Linklerin genişliği tam olacak */
        color: white;
        text-decoration: none;
    }

    /* Hover efekti */
    header nav ul li a:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* Header logo'yu ortalayalım */
    header .logo h1 {
        text-align: center;
        font-size: 1.5rem; /* Mobilde daha küçük yazı boyutu */
        margin: 0;
    }


    /* Navbar menu container */
    header nav ul {
        display: none;
        flex-direction: column;
        width: 100%; /* Menü tam genişlikte olacak */
        background-color: rgba(44, 62, 80, 0.9); /* Arka plan rengi */
        position: absolute;
        top: 60px; /* Menü header'ın altına gelsin */
        left: 0;
        padding: 0;
        margin: 0;
        text-align: center;
        box-sizing: border-box;
    }

    /* Menü öğeleri */
    header nav ul li {
        width: 100%; /* Menü öğeleri tam genişlikte olacak */
        text-align: center;
    }

    header nav ul li a {
        font-size: 1.2rem;
        padding: 10px 20px;
        display: block;
        width: 100%; /* Linklerin genişliği tam olacak */
    }

    /* Hamburger menü açıldığında görünür yap */
    .menu-toggle.active + ul {
        display: flex;
    }

    /* Header logo'yu ortalayalım */
    header .logo h1 {
        text-align: center;
        font-size: 1.5rem; /* Mobilde daha küçük yazı boyutu */
        margin: 0;
    }
}









/* Genel stil ayarları */
#about {
    background-color: #f0f8ff; /* Arka plan rengi (açık mavi) */
    padding: 40px 0; /* Üst ve alt boşluk */
    box-sizing: border-box;
  }
  
  /* Başlık stil ayarları */
  #about h2 {
    font-size: 2em; /* Başlık boyutu */
    font-weight: bold; /* Kalın yazı tipi */
    color: #007bff; /* Mavi renk */
    text-align: center; /* Ortalanmış başlık */
    margin-bottom: 20px; /* Başlık ile içerik arasında boşluk */
  }
  
  /* About içeriği stil ayarları */
  .about-content {
    background-color: #ffffff; /* İçeriğin arka plan rengi beyaz */
    border: 5px solid #007bff; /* Mavi çerçeve */
    padding: 20px; /* İçerik etrafında boşluk */
    border-radius: 10px; /* Yuvarlatılmış köşeler */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    max-width: 800px; /* Maksimum genişlik */
    margin: 0 auto; /* Ortalanmış içerik */
  }
  
  /* Mobil uyum için stil ayarları */
  @media (max-width: 768px) {
    #about h2 {
      font-size: 1.5em; /* Başlık boyutunu küçük ekranlarda küçült */
    }
    
    .about-content {
      padding: 15px; /* Küçük ekranlarda içerik etrafındaki boşluğu küçült */
      border-width: 3px; /* Çerçeve kalınlığını azalt */
    }
  }
  
  @media (max-width: 480px) {
    #about h2 {
      font-size: 1.2em; /* Başlık boyutunu daha da küçült */
    }
    
    .about-content {
      padding: 10px; /* İçeriği daralt */
      border-width: 2px; /* Çerçeve kalınlığını daha da azalt */
    }
  }
/* Başlık */
h2 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 30px;
    color: #007bff; /* Mavi başlık */
}

/* Grid sistem */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Her kart için stil */
.service {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    padding: 20px;
}

/* Kartın üzerine gelindiğinde animasyon */
.service:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Kart başlıkları */
.service h3 {
    font-size: 1.5em;
    margin-top: 15px;
    color: #007bff; /* Mavi başlık */
}

/* Kart içerikleri */
.service p {
    font-size: 1em;
    color: #555;
    margin-top: 10px;
}

/* Görsellerin boyutlandırılması */
.service img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

/* Mobil uyumlu tasarım */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    h2 {
        font-size: 1.5em;
    }
    
    .service {
        padding: 15px;
    }
    
    .service h3 {
        font-size: 1.2em;
    }
}