/* Genel sıfırlama ve temel stiller */
* {
    margin: 0; /* Tüm elementlerin dış boşluğunu sıfırlar */
    padding: 0; /* Tüm elementlerin iç boşluğunu sıfırlar */
    box-sizing: border-box; /* Kenar ölçüsünü iç genişliğe dahil eder */
}

html, body {
    width: 100%;
    overflow-x: hidden;
}


body {
    font-family: Arial, sans-serif; /* Arial ve sans-serif yazı tipi kullanır */
    background-color: #f0f0f0; /* Arka plan rengini beyaz yapar */
    color: #333; /* Metin rengini koyu gri yapar */
    line-height: 1.6; /* Satır yüksekliğini 1.6 katına ayarlar */
}


/* Slider İçeriği */
.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* Tekil Slide */
.slide {
    min-width: 100%;
}

.slide img {
    width: 100%;
    border-radius: 10px;
}
.slider-container {
    position: relative;
    width: 100%; /* Tam genişlik */
    max-width: 1200px; /* Maksimum genişliği belirle (isteğe bağlı değiştir) */
    height: auto;
    max-height: 500px; /* Slider maksimum yüksekliği belirleniyor */
    overflow: hidden; /* Taşan içerikleri gizler */
    margin: 0 auto; /* Ortalamak için */
}



/* Önceki ve Sonraki Butonlar */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 24px;
    border-radius: 5px;
}

.prev { left: 10px; }
.next { right: 10px; }

.prev:hover, .next:hover {
    background: rgba(0, 0, 0, 0.8);
}



/* HEADER */
#header {
    background-color: #fff; /* Başlık bölümünün arka plan rengini beyaz yapar */
    border-bottom: 1px solid #ccc; /* Altına ince gri bir çizgi ekler */
    padding: 20px; /* İç boşluk ekler */
    display: flex; /* Flexbox modelini etkinleştirir */
    justify-content: space-between; /* İçeriği iki uca hizalar */
    align-items: center; /* Öğeleri dikey olarak hizalar */
}

#logo img {
    max-width: 150px; /* Logo resminin maksimum genişliğini 150 piksel olarak ayarlar */
}

#navigation {
    list-style: none; /* Liste öğelerinin varsayılan noktalarını kaldırır */
    display: flex; /* Flexbox modelini etkinleştirir */
    gap: 20px; /* Öğeler arasına 20 piksel boşluk ekler */
}

#navigation li a {
    text-decoration: none; /* Bağlantılardaki alt çizgiyi kaldırır */
    color: #333; /* Metin rengini koyu gri yapar */
    padding: 10px 15px; /* Bağlantıların iç boşluğunu belirler */
    transition: background 0.3s ease, color 0.3s ease; /* Arka plan ve renk geçişlerini yumuşak hale getirir */
}

/* Aktif ve hover durumları */
#navigation li a:hover,
#navigation li.active a {
    background-color: #333; /* Arka plan rengini koyu gri yapar */
    color: #fff; /* Yazı rengini beyaz yapar */
    border-radius: 4px; /* Köşeleri hafif yuvarlatır */
}
/* ADBOX */
#adbox {
    background-color: #f0f0f0; /* Arka plan rengini açık gri yapar */
    padding: 40px; /* İç boşluk ekler */
    text-align: center; /* Metni ortalar */
}

#adbox h1 {
    font-size: 2.5em; /* Başlık yazı boyutunu büyütür */
    color: #000; /* Siyah metin rengi belirler */
    margin-bottom: 20px; /* Altına boşluk ekler */
}

#adbox p {
    font-size: 93%; /* Paragraf metin boyutunu belirler */
    color: #666; /* Metin rengini gri yapar */
}

/* BODY */
#body {
    display: flex; /* İçeriği esnek kutu düzeninde gösterir */
    flex-wrap: wrap; /* Küçük ekranlarda içeriğin alt alta gelmesini sağlar */
    justify-content: space-between; /* İçeriği iki yana yayarak hizalar */
    align-items: flex-start; /* Öğeleri üstten hizalar */
    padding: 40px; /* İç boşluk ekler */
    gap: 20px; /* Öğeler arasına boşluk ekler */
}

/* Sol kısım (Ana içerik) */
#main {
    flex: 2; /* Esnek olarak genişleme payını belirler */
    width: 50%; /* Genel genişlik belirler */
    max-width: 98%; /* Maksimum genişlik ayarı */
    min-width: 350px; /* Minimum genişlik belirler */
    margin: 0 auto; /* Ortalamayı sağlar */
    padding: 20px; /* İç boşluk ekler */
    height: auto; /* Otomatik yükseklik ayarı */
}

#main p:last-child {
    margin-bottom: 0; /* Son paragrafın alt boşluğunu sıfırlar */
}

#main, #articles {
    height: auto; /* İçeriğe göre yükseklik ayarlar */
}

#main h2 {
    font-size: 1.8em; /* Başlık yazı boyutunu büyütür */
    color: #000; /* Siyah metin rengi belirler */
    margin-bottom: 20px; /* Altına boşluk ekler */
	padding-left: 14%;
    text-align: center;
}

#main p {
    font-size: 1em; /* Paragraf metin boyutunu belirler */
    margin-bottom: 20px; /* Altına boşluk ekler */
}


.overlay-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
  }
  
  .overlay-card img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: white;
    text-align: left;
  }
  
  .overlay-content h2 {
    margin: 0 0 10px;
    font-size: 22px;
  }
  
  .overlay-content p {
    font-size: 14px;
    margin-bottom: 15px;
  }
  
  .overlay-btn {
    display: inline-block;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
  }
  
/* Sağ kısım (Makaleler) */
#articles {
    display: flex;
    justify-content: center;
  }
  
#articles ul {
    display: flex; /* Flex düzeni etkinleştir */
    flex-wrap: wrap; /* Küçük ekranlarda kaymasını sağla */
    gap: 30px; /* Öğeler arasına boşluk ekle */
    justify-content: space-between; /* Eşit aralıklarla hizala */
    margin: 2%;
}
#articles li {
    background-color: #fff; /* Arka planı beyaz yap */
    border: 1px solid #ddd; /* Kenarlık ekle */
    padding: 15px; /* İç boşluk */
    border-radius: 15px; /* Kenarları yuvarlak yap */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Hafif gölgelendirme */
    width: calc(33.33% - 30px); /* Boşlukları daha iyi düzenle */
    overflow: hidden; /* Taşmaları önle */
	margin-bottom: 2%;
    max-height: fit-content;
}
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1200px;
  }
  
  .card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }
  
  .card:hover {
    transform: translateY(-5px);
  }
  
  .card-img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .card-body {
    padding: 20px;
  }
  
  .card-body h3 {
    margin-top: 0;
    font-size: 1.3rem;
    color: #222;
  }
  
  .card-body hr {
    margin: 10px 0;
    border: 0;
    border-top: 1px solid #eee;
  }
  
  .card-body p {
    font-size: 0.95rem;
    color: #555;
  }
  
  .card-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: #111;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
  }
  


.customImgStyle {
    max-height: 80%;
    max-width: 100%; /* Resmin genişliğinin taşmasını önler */
    height: auto; /* Resmin oranlarını korur */
    margin-bottom: 15px; /* Resim altına boşluk ekler */
    border-radius: 5px; /* Resim kenarlarını yuvarlatır */
}

#articles li h1 {
    font-size: 1.2em; /* Başlık metin boyutunu belirler */
    color: #000; /* Siyah renk yapar */
    margin-bottom: 10px; /* Altına boşluk ekler */
}

#articles li img {
    max-width: 100%;
    width: 100%;
    border-radius: 10px;
    max-height: 37%;
}


#articles li p {
    font-size: 0.95em; /* Paragraf metin boyutunu belirler */
    color: #555; /* Gri renk yapar */
    margin-bottom: 10px; /* Altına boşluk ekler */
}

#articles li a.more {
    text-decoration: none; /* Alt çizgiyi kaldırır */
    background-color: #333; /* Arka planı koyu gri yapar */
    color: #fff; /* Metin rengini beyaz yapar */
    padding: 8px 12px; /* İç boşluk ekler */
    border-radius: 4px; /* Kenarları yuvarlatır */
    transition: background 0.3s ease; /* Arka plan geçiş efekti ekler */
}

#articles li a.more:hover {
    background-color: #000; /* Üzerine gelindiğinde arka plan rengini siyah yapar */
}

/* FOOTER */
#footer {
    background-color: #333; /* Arka plan rengini koyu gri yapar */
    color: #fff; /* Metin rengini beyaz yapar */
    padding: 20px; /* İç boşluk ekler */
    text-align: center; /* Metni ortalar */
}

#connect {
    list-style: none; /* Liste noktalarını kaldırır */
    display: flex; /* Esnek düzen kullanır */
    justify-content: center; /* İçeriği ortalar */
    align-items: center; /* Dikey hizalamayı yapar */
    gap: 10px; /* Öğeler arasında boşluk bırakır */
    margin-bottom: 20px; /* Alt boşluk bırakır */
    margin-right: 10%;
}
#connect li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 35px;
	height: 35px;
	background-color: #fff; /* İkon arkaplanı beyaz */
	border-radius: 50%;
	color: #333; /* İkon rengi siyah */
	transition: all 0.3s ease;
	text-decoration: none;
  }
  
  #connect li a:hover {
	background-color: #333; /* Hover durumunda arkaplan siyah */
	color: #fff; /* Hover durumunda ikon beyaz */
  }
  
  #connect li a i {
	font-size: 18px; /* İkon boyutu */
  }

#connect li a.instagram {
    background-image: url('images/instagram.png'); /* Instagram ikonu */
    background-size: cover; /* Resmi kapla */
}

#connect li a.twitter {
    background-image: url('images/twitter.png'); /* Twitter ikonu */
    background-size: cover; /* Resmi kapla */
}

#connect li a.vimeo {
    background-image: url('images/vimeo.png'); /* Vimeo ikonu */
    background-size: cover; /* Resmi kapla */
}

#connect li a.googleplus {
    background-image: url('images/googleplus.png'); /* Google+ ikonu */
    background-size: cover; /* Resmi kapla */
}


#footnote {
    border-top: 1px solid #444; /* Üstüne ince gri çizgi ekler */
    padding-top: 10px; /* Üst boşluk ekler */
}

#footnote ul {
    list-style: none; /* Liste noktalarını kaldırır */
    display: flex; /* Esnek düzen kullanır */
    justify-content: center; /* İçeriği ortalar */
    gap: 15px; /* Öğeler arasında boşluk bırakır */
    margin-bottom: 10px; /* Alt boşluk bırakır */
}

#footnote ul li a {
    text-decoration: none; /* Alt çizgiyi kaldırır */
    color: #fff; /* Metin rengini beyaz yapar */
    transition: color 0.3s ease; /* Renk geçiş efekti ekler */
}

#footnote ul li a:hover,
#footnote ul li.active a {
    color: #ccc; /* Üzerine gelindiğinde metin rengini açık gri yapar */
}

#footnote span {
    font-size: 0.85em; /* Küçük metin boyutu belirler */
    color: #aaa; /* Açık gri metin rengi yapar */
}

.gmail {
    margin-left: 45%;
    z-index: 1;
    font-size: x-small;
}










.about-section {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    font-family: sans-serif;
  }
  
  .about-section p {
    font-size: 16px;
    margin-bottom: 30px;
    color: #eee;
  }
  
  .about-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
  
  .about-card {
    background-color: #222;
    padding: 20px;
    border-radius: 10px;
    color: white;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .about-card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
  }
  
  .about-card h2 {
    font-size: 18px;
    margin: 0 0 10px;
    color: #fff;
  }
  
  .about-card p {
    font-size: 14px;
    color: #ccc;
    flex-grow: 1;
  }
  
  .about-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 15px;
    background-color: #444;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
  }
  
  .about-btn:hover {
    background-color: #666;
  }
  


/* 📌 Mobil ve Tablet İçin Responsive Tasarım */

/* Tablet görünümü (1024px'den küçük ekranlarda) */


@media (max-width: 1024px) {

.about {

font-size: small !important;
}

    #blogs8 p {
        font-size: 8px !important;
        line-height: 1.5;
      
    }

    #articles li {
        width: calc(50% - 15px); /* Tabletlerde 2 sütun düzeni */
    }
}

/*ABOUT CSS****************/
/* HAKKIMIZDA ANA KONTEYNER */
#body3 {
    max-width: 1100px;
    margin: 50px auto;
    background: #2b2b2b;
    padding: 40px;
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* HAKKIMIZDA ÜST KISIM */
#contents3 {
    text-align: center;
    margin-bottom: 40px;
}

#contents3 img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
}

#contents3 h1 {
    font-size: 36px;
    color: #ffffff;
    margin-top: 20px;
    letter-spacing: 1px;
}

#contents3 p {
    font-size: 18px;
    color: #bbb;
    margin-top: 15px;
    padding: 0 20px;
    text-align: justify;
}

/* ALT BÖLÜM (ARTICLES3) */
#articles3 {
    text-align: center;
}

#articles3 ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    list-style: none;
    margin-top: 20px;
}

#articles3 li {
    flex: 1;
    margin: 15px;
    background: #3a3a3a;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}

#articles3 li:hover {
    transform: translateY(-5px);
    background: #444;
}

#articles3 img {
    width: 100%;
    border-radius: 10px;
}

#articles3 h1 {
    font-size: 22px;
    color: #ffffff;
    margin: 15px 0;
}

#articles3 p {
    font-size: 16px;
    color: #bbb;
}

/* DAHA FAZLA OKU BUTONU */
.more {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background: #555;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
    font-size: 14px;
    font-weight: bold;
}

.more:hover {
    background: #777;


}


#body8 {
    width: 80%;
    margin: 40px auto;
    background-color: #1e1e1e; /* Koyu gri kart stili */
    padding: 20px;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* Başlık */
h1 {
    text-align: center;
    color: #ffffff; /* Beyaz */
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    text-transform: uppercase;
    border-bottom: 3px solid #444;
    padding-bottom: 10px;
}

/* Blog Listesi */
#blogs8 ul {
    list-style: none;
    padding: 0;
}

#blogs8 li {
    background-color: #252525; /* Orta koyu gri kutular */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    transition: transform 0.3s, background-color 0.3s;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.05);
}

#blogs8 li:hover {
    background-color: #333; /* Daha açık gri */
    transform: scale(1.02);
}

/* Blog İçeriği */
#blogs8 img {
    width: 100%;
    max-width: 450px;
    border-radius: 8px;
    display: block;
    margin: auto;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

#blogs8 span {
    font-size: 12px;
    color: #b0b0b0;
    display: block;
    margin-top: 5px;
    text-align: center;
}

#blogs8 h3 {
    font-size: 24px;
    color: #ffffff;
    text-align: center;
    margin-top: 15px;
}

#blogs8 p {
    font-size: 16px;
    color: #d0d0d0;
    line-height: 1.8;
    text-align: justify;
}

/* Blog Linkleri */
#blogs8 a.more {
    display: block;
    text-align: center;
    background-color: #555;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    transition: 0.3s;
    margin-top: 15px;
}

#blogs8 a.more:hover {
    background-color: #777;
    transform: scale(1.05);
}

/* Sayfa Numaralandırma */
.pages8 {
    text-align: center;
    margin-top: 30px;
}

.pages8 a {
    color: #e0e0e0;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    background-color: #444;
    margin: 4px;
    transition: 0.3s;
    font-weight: bold;
}

.pages8 a:hover {
    background-color: #666;
    transform: scale(1.1);
}

/* Makaleler (articles8) */
#articles8 {
    margin-top: 50px;
}

#articles8 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
}

#articles8 li {
    width: 31%;
    background-color: #2b2b2b;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    transition: transform 0.3s, background-color 0.3s;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.05);
}

#articles8 li:hover {
    background-color: #3a3a3a;
    transform: scale(1.05);
}

#articles8 img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

#articles8 p {
    font-size: 16px;
    color: #e0e0e0;
    margin-top: 12px;
    line-height: 1.6;
}

#articles8 a.more {
    display: block;
    text-align: center;
    background-color: #444;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    transition: 0.3s;
}

#articles8 a.more:hover {
    background-color: #666;
    transform: scale(1.05);
}


/* RESPONSIVE TASARIM  ABOUT.HTML */
@media (max-width: 768px) {

    
    #blogs8 p {
        font-size: 8px;
      
    }

    #body8 {
        width: 95%;
        padding: 15px;
    }

    #articles8 ul {
        flex-direction: column;

    }

    #articles8 li {
        width: 100%;
    }

    #body3 {
        padding: 20px;
    }

    #contents3 p {
        font-size: 16px;
        padding: 0 10px;
    }

    #articles3 ul {
        flex-direction: column;
    }

    #articles3 li {
        margin: 10px auto;
        width: 100%;
    }
    #articles ul {
        justify-content: center; /* Kartları ortala */
    }

    #articles li {
        width: calc(50% - 15px); /* Mobilde 2 sütun olacak şekilde ayarla */
    }
}


/* Küçük telefonlar için (480px'den küçük ekranlarda) */
@media (max-width: 480px) {
    #articles li {
        width: 100%; /* Daha küçük ekranlarda tek sütun */
    }
    #blogs8 p {
        font-size: 8px;
      
    }

}