/* Genel Sayfa Ayarları */
body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #f5f1e6d5, #e2e0d3);
    background-position: center center;
    background-attachment: fixed;
}

/* Header (Başlık) Ayarları */
header {
    background-color: #b49655;
    color: white;
    padding: 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge ekleyerek derinlik */
    z-index: 1;
    transition: background-color 0.3s ease; /* Hover etkisiyle arka plan değişimi */
}

header:hover {
    background-color: #9c7b47;  /* Hoverda daha koyu arka plan */
    
}

/* Header'daki Resim (Logo ve Görsel) Ayarları */
header img {
    width: 480px;  /* Resmin genişliğini ayarlayın */
    height: auto;  /* Yükseklik oranını koruyarak genişliğe göre otomatik olarak ayarlanır */
    transition: transform 0.3s ease; /* Animasyon ekledik */
}

header img:hover {
    transform: scale(1.1); /* Resmin üzerine gelindiğinde biraz büyümesini sağlarız */
}

/* Ana Başlık (H1) Ayarları */
header h1 {
    font-size: 36px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Hafif gölge efekti */
    transition: color 0.3s ease;
    font-family: 'Quintessential', cursive; /* Fontu burada belirtiyoruz */
    font-weight: bold;
    font-size: 48px;
    color: #f0e6d2;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    transition: color 0.3s ease;

}

header:hover h1 {
    color: #ffd700; /* Hoverda başlık rengini değiştirir */
}

/* Ana Metin Ayarları */
header p {
    font-size: 18px;
    margin-top: 10px;
    font-style: italic;
    transition: font-size 0.3s ease;
}

header:hover p {
    font-size: 20px; /* Hoverda yazı büyür */
}

/* Header'a yerleştirilecek Bağlantılar */
header a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    margin: 15px;
    font-size: 20px;
    transition: color 0.3s ease;
}

header a:hover {
    color: #ff6347; /* Hoverda renk değişimi */
}

/* Header İçindeki butonlar için (Örneğin: ana sayfa) */
button {
    background-color:   #ffd900cf;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #ffd700;  /* Hoverda butonun rengini değiştir */
}

/* Ana Konteyner (Grid Yapısı) */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolonlu grid düzeni */
    gap: 20px;
    padding: 20px;
}
/* Kutuların Temel Tasarımı */
.box {
    color: white;
    padding: 30px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Gradyanlı Arka Plan Fotoğrafı */
.box img {
    width: 100%;  /* Genişliği kutuya tam oturt */
    height: 100%; /* Yüksekliği kutuya tam oturt */
    object-fit: cover;  /* Resmi kırpmadan sığdır */
    border-radius: 10px; /* Kenarları yuvarlak yap */
}
.box {
    color: white;
    padding: 40px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    position: relative;
    overflow: hidden;

    height: 300px; /* Kutunun sabit yüksekliğini ayarlayın */
}

/* Arka plan fotoğrafı ve gradyan */
.box-1 {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/piri.webp') center/cover no-repeat;
    background-size: cover;  /* Fotoğrafı kutuya göre ayarlamak */
    background-position: center center;  /* Fotoğrafı kutunun ortasına yerleştir */
    
}

.box-2 {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/turkharita.jpg') center/cover no-repeat;
    background-size: cover;  /* Fotoğrafı kutuya göre ayarlamak */
    background-position: center center;  /* Fotoğrafı kutunun ortasına yerleştir */
    
}
.box-3 {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/osmn.png') center/cover no-repeat;
    background-size: cover;  /* Fotoğrafı kutuya göre ayarlamak */
    background-position: center center;  /* Fotoğrafı kutunun ortasına yerleştir */
   
}
.box-4 {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/400x300/7fff7f/333333') center/cover no-repeat;
 background-size: cover;  /* Fotoğrafı kutuya göre ayarlamak */
background-position: center center;  /* Fotoğrafı kutunun ortasına yerleştir */

}
.box-5 {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/400x300/ffff7f/333333') center/cover no-repeat;
    background-size: cover;  /* Fotoğrafı kutuya göre ayarlamak */
    background-position: center center;  /* Fotoğrafı kutunun ortasına yerleştir */
   
}
.box-6 {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/400x300/ff7fff/333333') center/cover no-repeat;
    background-size: cover;  /* Fotoğrafı kutuya göre ayarlamak */
    background-position: center center;  /* Fotoğrafı kutunun ortasına yerleştir */
  
}

/* Hover Efekti (Kutuların Üzerine Gelindiğinde) */
.box:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    filter: brightness(1.2);
}

/* Link (Başlıklar) Tasarımı */
.box a {
    text-decoration: none;
    color: white;
   font-family: 'historical.otf';
    font-size: 20px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.box a:hover {
    color: #ffdb7b;
}

/* Footer (Alt Bilgi) Tasarımı */


html, body {
    height: 100%;
    margin: 0;
  padding: 0;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    margin-bottom: 0;
  padding-bottom: 0;
    width: 100%;
    height: auto; /* Footer yüksekliğini biraz arttırdım, emeği geçenler kısmı için */
    box-sizing: border-box;
    font-size: 14px;
    position: relative;
}

.social-media {
    margin: 10px 0;
}

.social-icon {
    margin: 0 10px;
    display: inline-block;
}

.social-icon img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
}

.social-icon img:hover {
    transform: scale(1.2);
}

/* Emeği Geçenler Bölümü */
.contributors {
    margin-top: 20px;
    color: white; /* Yazı rengini beyaz yapıyoruz */
    font-size: 14px; /* Aynı font boyutunda tutuyoruz */
}

.contributors p {
    font-weight: bold;
}

.contributors ul {
    list-style-type: none;
    padding: 0;
}

.contributors li {
    margin-bottom: 5px;
}

/* Tünelleme Efekti (Kutulara Tıklandığında Sayfaya Gitme) */
.tunnel-effect a {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background-color:rgba(255, 255, 255, 0.3) ;
    color: white;
    border-radius: 5px;
    transition: transform 0.5s ease;
}

.tunnel-effect a:hover {
    transform: scale(1.2);
}

.arkaplanliyazi {
    background-color: #333 ;
    color: white;
    padding: 0px;
    width: auto;
    height: auto;
    box-sizing: border-box; /* padding dışına taşmasın diye */
  }