/* Genel Ayarlar */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* Header */
header {
    background: linear-gradient(45deg, #88e64b, #38a3a6); /* Renk geçişi */
    color: white;
    text-align: center;
    padding: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

header h1 {
    margin: 0;
    font-size: 2em;
    font-weight: bold;
}

.baslik {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    font-display: flex;
    text-align: center;
    margin-bottom: 1pc;
    margin-top: 3pc;
    

  }

/* İçerik Düzeni */
.container {
    max-width: 1200px;
    margin: 20px auto;
    margin-bottom: 8pc;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Hakkımızda İçeriği */
.about-content h2 {
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.about-content p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 18px;
}

.about-content h3 {
    color: #38a3a6;
    margin-top: 20px;
    font-weight: bold;
}

/* Slideshow ana çerçevesi */
.slideshow1 {
    max-width: 75%; /* Slideshow'u sayfanın genişliğine göre sınırla */
    height: 34pc;
     
    margin: 0 auto; /* Ortaya hizala */
    padding: 5px; /* Yanlardan 5px boşluk bırak */
    border-radius: 10px; /* Hafif yuvarlak köşeler */
    overflow: hidden; /* Taşan kısımları gizle */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
}

/* Slideshow içerisindeki resimler */
.slideshow1 img {
    width: 100%; /* Görselleri slideshow alanının genişliğine göre ayarla */
    height: auto; /* Görsellerin orantısını koru */
    object-fit: cover; /* Resimleri çerçeveye sığacak şekilde kırp */
    border-radius: 5px; /* Görsel köşeleri hafif yuvarlak */
    
  object-position: center;
}


/* Büyük Ekranlar (1500px ve Altı) */
@media (max-width: 1500px) {
    .slideshow1 {
        max-width: 80%; /* Daha dar genişlik */
        height: 500px; /* Yükseklik azaltıldı */
        border-radius: 12px; /* Daha fazla yuvarlama */
        padding: 15px; /* İç boşluk artırıldı */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge ekle */
    }

    .slideshow1 img {
        object-fit: contain; /* Görselin tamamını göster */
        border-radius: 12px;
    }
   
}

/* Orta Ekranlar (Tablet - 768px - 1024px arası) */
@media (max-width: 1024px) {
    .slideshow1 {
        max-width: 90%; /* Tabletlerde genişlik */
        height: 400px; /* Daha az yükseklik */
        border-radius: 8px; /* Daha az yuvarlama */
        padding: 10px; /* Daha fazla iç boşluk */
    }

    .slideshow1 img {
        object-fit: contain; /* Görselleri kırpmadan sığdır */
        border-radius: 8px;
    }
}

/* Küçük Tablet ve Büyük Telefonlar (700px - 768px arası) */
@media (max-width: 768px) and (min-width: 700px) {
    .slideshow1 {
        max-width: 95%; /* Daha dar genişlik */
        height: 350px; /* Daha küçük yüksekliğe geç */
    }

    .slideshow1 img {
        object-fit: cover; /* Çerçeveye tam otur */
    }
}

/* Küçük Telefonlar (700px ve Altı) */
@media (max-width: 700px) {
    .slideshow1 {
        max-width: 100%; /* Mobil cihazlarda tam genişlik */
        height: 300px; /* Mobil cihazlarda daha düşük yükseklik */
        border-radius: 5px; /* Köşeleri daha az yuvarla */
        box-shadow: none; /* Gölgeyi kaldır */
    }

    .slideshow1 img {
        object-fit: cover; /* Çerçeveye tam otur */
        border-radius: 5px;
    }
}

/* Ekstra Küçük Telefonlar (480px ve Altı) */
@media (max-width: 480px) {
    .slideshow1 {
        height: 200px; /* Çok küçük ekranlar için yükseklik */
    }

    .slideshow1 img {
        object-fit: cover;
    }
}
/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 15px 0;
    font-size: 0.9em;
}

footer p {
    margin: 0;
}

/* Mobil Uyumluluk: 768px ve Altındaki Ekranlar */
@media (max-width: 768px) {
    header {
        padding: 15px 0; /* Header iç boşlukları küçültüldü */
    }

    header h1 {
        font-size: 1.5em; /* Başlık boyutu küçültüldü */
    }

    .container {
        margin: 10px; /* Kenar boşlukları küçültüldü */
        padding: 15px; /* İç boşluklar azaltıldı */
    }

    .about-content h2 {
        font-size: 1.2em; /* Başlık boyutu küçültüldü */
    }

    .about-content p {
        font-size: 0.9em; /* Paragraf yazı boyutu küçültüldü */
        line-height: 1.5; /* Satır yüksekliği düzenlendi */
    }

    .slider-buttons button {
        font-size: 14px; /* Buton boyutlarını küçült */
        padding: 8px 16px; /* İç boşlukları küçült */
    }
    .baslik {
        margin: 0;
        font-size: 14px;
        font-weight: bold;
        font-display: flex;
        text-align: center;
        margin-bottom: 1pc;
        margin-top: 3pc;
        
      }
}

/* Mobil Uyumluluk: 480px ve Altındaki Ekranlar */
@media (max-width: 480px) {
    header {
        padding: 10px 0; /* Header daha da küçültüldü */
    }

    header h1 {
        font-size: 1.2em; /* Başlık boyutu daha da küçültüldü */
    }

    .container {
        margin: 5px; /* Kenar boşlukları daha da küçültüldü */
        padding: 10px; /* İç boşluklar daha da azaltıldı */
    }

    .about-content h2 {
        font-size: 1em; /* Başlık boyutu daha da küçültüldü */
    }

    .about-content p {
        font-size: 0.8em; /* Paragraf yazı boyutu daha da küçültüldü */
        line-height: 1.4; /* Satır yüksekliği düzenlendi */
    }

    .slider-buttons button {
        font-size: 12px; /* Daha küçük ekranlar için */
        padding: 6px 12px; /* Buton iç boşluklarını küçült */
    }
    .baslik {
        margin: 0;
        font-size: 13px;
        font-weight: bold;
        font-display: flex;
        text-align: center;
        margin-bottom: 1pc;
        margin-top: 3pc;
        
      }
}