body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #F9F9F9; /* hafif beyaz ton */
  color: #222222; /* metin rengi */
  user-select: none;
}

/* Hero Header */
.hero {
  height: 700px; /* hero yüksekliği */
  background-image: url('../images/Untitled-2.png'); /* images klasöründeki görselin adıyla değiştir */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.3); /* hafif karartma */
}

.hero h1 {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 60px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* başlığı öne çıkarır */
  z-index: 1;
}

/* Menü kutuları yan yana */
.menu {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 50px 0;
}

/* Kutu stili ve hover efekti */
.kutu {
  display: block;              /* tüm kutu tıklanabilir */
  width: 300px;
  padding: 20px 30px;          /* orijinal kutu boyutu korunacak şekilde ayarlandı */
  background: white;
  text-align: center;
  border: 2px solid transparent;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, border 0.3s ease, color 0.3s ease;
  text-decoration: none;       /* alt çizgi yok */
  color: inherit;              /* yazı rengi miras alacak (siyah) */
  cursor: pointer;
}

/* Hover efekti */
.kutu:hover {
  border: 2px solid #1FA7A3;  /* turkuaz çerçeve */
  transform: scale(1.05);
}

.kutu:hover h2,
.kutu:hover p {
  color: #F28C28;              /* turuncu hover */
}

/* Görseller */
.kutu img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Başlık ve paragraf boyutları korunuyor */
.kutu h2 {
  margin-top: 15px;
  font-size: 1.5em;  /* önceki güzel boyut korunuyor */
}

.kutu p {
  margin-top: 10px;
  font-size: 1em;
  line-height: 1.4;
}

/* Sanatsal Menü tüm sayfada dikey ortalamak için */
.sanatsal-menu {
  flex: 1; 
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* içeriği üstten başlat */
  align-items: center;
  padding-top: 60px;  /* üst boşluk */
  padding-bottom: 30px; /* alt boşluğu biraz daha az yap */
}

/* Kutuları kapsayan container - yatayda yan yana */
.sanatsal-menu .kutu-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* Mevcut kutu stilinle uyumlu */
.sanatsal-menu .kutu {
  display: block; /* tüm alan tıklanabilir */
  width: 300px;
  padding: 30px;
  background: white;
  text-align: center;
  border: 2px solid transparent;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, border 0.3s ease, color 0.3s ease;
  text-decoration: none;
  color: #055160; /* koyu mavi */
}

/* Hover efektleri */
.sanatsal-menu .kutu:hover {
  border: 2px solid #1FA7A3; /* turkuaz çerçeve */
  transform: scale(1.05);
  cursor: pointer;
}

.sanatsal-menu .kutu:hover h2,
.sanatsal-menu .kutu:hover p {
  color: #F28C28; /* turuncu hover */
}

/* Görsellerin stilini koru */
.sanatsal-menu .kutu img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Başlık ve açıklama */
.sanatsal-menu .kutu h2 {
  margin-top: 15px;
  font-size: 1.3em;
}

.sanatsal-menu .kutu p {
  margin-top: 10px;
  font-size: 1em;
  line-height: 1.4;
}

/* --------------------
   Biyografi / Açıklama Kutusu
-------------------- */
.bio {
  max-width: 900px;
  margin: 50px auto;
  padding: 30px;
  background-color: white;
  border: 2px solid #09A983; /* turuncu çerçeve */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  text-align: center;
}

/* Tüm sayfayı kapsayan container */
.resimler-container {
  display: flex;
  justify-content: center;  /* yatay ortala */
  flex-wrap: wrap;          /* çok resim varsa alt satıra geçsin */
  gap: 40px;                /* resimler arası boşluk */
  min-height: calc(100vh - 100px); /* footer yüksekliği hariç tam ekran yüksekliği */
  align-items: center;      /* dikeyde ortala */
  padding: 50px 20px;       /* üst-alt boşluk */
  box-sizing: border-box;
}

/* Her resim kutusu */
.resim-kutu {
  width: 300px;
  text-align: center;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;    /* alt çizgi kaldır */
  color: black;             /* yazı siyah */
}

/* Hover efekti */
.resim-kutu:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* Resim stili */
.resim-kutu img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Resim açıklamaları */
.resim-kutu p {
  margin-top: 10px;
  font-size: 1em;
}

/* --------------------
   Responsive (Mobil Uyumlu)
-------------------- */
@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .kutu {
    width: 80%;
  }

  .hero h1 {
    font-size: 40px;
  }

  .bio {
    width: 90%;
    padding: 20px;
  }

  .galeri img {
    width: 80%;
  }
}
.icerik {
max-width: 800px;
margin: 10px auto;
padding: 20px;
  background-color: #C4E3E4;
  background-size: cover;       /* tüm alanı kaplamasını sağlar */
  background-repeat: no-repeat; /* tekrarlamayı engeller */
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
line-height: 1.75;
	  /* Yeni fantastik ve kalın yazı stili */
  font-family: 'Book Antiqua', Palatino, serif; /* fantastik, klasik kitap hissi */
  font-weight: 400;                       /* kalın harfler */
  font-size: 18px;                        /* okunabilirlik için artırıldı */
  color: #08312C;                         /* koyu mavi, mavi tema uyumlu */
}

.icerik h1, .icerik h2 {
  font-family: 'Cinzel', serif; /* Fantastik başlık fontu */
  font-weight: 900;
  font-size: 2.5em;
  text-align: center;
  color: #034752;
  margin-top: 40px; /* inline style yerine CSS'te */
}
.icerik strong, .icerik b {
  font-weight: 700; /* kalınlık farkı korunacak */
}

.navigasyon a {
text-decoration: none;
color: #055160;
font-weight: bold;
padding: 10px 15px;
background-color: #A0E7E5;
border-radius: 8px;
transition: transform 0.2s, box-shadow 0.2s;
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
}

/* Sol navigasyon */
.navigasyon .onceki {
left: 15px;
}

/* Sağ navigasyon */
.navigasyon .sonraki {
right: 15px;
}

/* Hover efekti (mevcut stil korunuyor) */
.navigasyon a:hover {
transform: translateY(-50%) scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
color: #F28C28;
}

.bolum-gorsel {
display: block;       /* satırı tek başına kaplasın */
margin: 20px auto;    /* ortalasın ve üst-alt boşluk versin */
max-width: 100%;      /* ekranı taşmasın */
height: auto;         /* oranı bozulmasın */
border-radius: 8px;   /* köşeleri hafif yuvarlat */
box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* hafif gölge */
}

/* Kitap Bölümleri kutuları */
.bolum-listesi {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 50px auto;
  max-width: 1200px;
}

.bolum-listesi .kutu {
  flex: 1 1 180px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #A0E7E5; /* açık turkuaz */
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 20px;
  text-align: center;
  cursor: pointer; /* fare üzerinde tıklanabilir hissi */
}

.bolum-listesi .kutu a {
  color: #055160;  /* koyu turkuaz */
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2em; /* yazı boyutu */
}

.bolum-listesi .kutu:hover {
  background-color: #00bfae; /* kutu hover rengi */
}

.bolum-listesi .kutu a:hover {
  color: #ff9800; /* yazı hover rengi */
}

.telif {
  text-align: center;
  margin-top: 30px;
  padding: 20px;
  font-size: 0.9em;
  color: #055160;
  border-top: 1px solid #ccc;
	font-style: italic;
}

.home-button {
  position: fixed;
  top: 15px;
  left: 15px;
  background-color: #A0E7E5;
  color: #055160;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 1000;
}

.home-button:hover {
  background-color: #FFB347;
}

.telif-ust {
  text-align: center;
  font-size: 12px;
  color: #055160;
  margin: 10px 0;
  font-style: italic;
}

/* Yazar Hakkında dikey kutu */
.yazar-kutu-ust {
  display: flex;
  flex-direction: column; /* dikey yerleşim */
  align-items: center;    /* yatayda ortala */
  margin: 30px auto;
  gap: 20px; /* logo ve buton arası boşluk */
}

/* Çember şeklinde logo */
.yazar-logo-ust {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s, box-shadow 0.3s; /* hover için geçiş animasyonu */
}

/* Logo hover efekti */
.yazar-logo-ust:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* Tıklanabilir buton */
.yazar-link-ust {
  display: inline-block;
  padding: 15px 30px;
  background-color: #A0E7E5; /* açık turkuaz */
  color: #055160; /* koyu turkuaz yazı */
  text-decoration: none;
  font-weight: bold;
  border-radius: 25px; /* yuvarlak hatlar */
  transition: box-shadow 0.3s, transform 0.3s; /* tüm hover değişikliklerini animasyonla uygular */
  box-shadow: 0 0 0 rgba(0,0,0,0); /* başlangıçta gölge yok */
}

/* Hover efektinde sadece kutu etrafında gölge */
.yazar-link-ust:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* kutu ve yazı gölgesi */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* yazıya hafif gölge */
  transform: translateY(-2px); /* kutu hafif yukarı hareket eder */
  background-color: #A0E7E5; /* arka plan sabit */
  color: #055160; /* yazı rengi sabit */
}

.yazar-bolum {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 70px auto;
  max-width: 1100px;
}

.yazar-bolum img {
  width: 420px;
  height: auto;
  border-radius: 10px;
	  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
}

.yazar-bolum img:hover {
  transform: scale(1.03);
}

.yazar-yazi {
  flex: 1;
  line-height: 1.7;
  font-size: 18px;
}

/* Fotoğrafı sağ tarafa almak için */
.yazar-bolum.ters {
  flex-direction: row-reverse;
}

.yazar-baslik {
  text-align: center;
  font-size: 36px;
  margin-top: 40px;
}

.yazar-aciklama {
  text-align: center;
  max-width: 700px;
  margin: 10px auto 40px auto;
  line-height: 1.6;
}

/* --------------------
   Diğer Eserler Sayfası - Güncellenmiş
-------------------- */
.diger-menu {
  display: flex;
  justify-content: center; /* yatay ortalama */
  flex-direction: column;
  padding: 60px 20px 40px 20px; /* üst 60px, alt 40px */
  /* align-items ve min-height kaldırıldı */
}

.diger-menu .kutu-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* Kutular aynı şekilde kalıyor */
.diger-menu .kutu {
  display: block;
  width: 300px;
  padding: 30px;
  background: white;
  text-align: center;
  border: 2px solid transparent;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, border 0.3s ease, color 0.3s ease;
  text-decoration: none;
  color: #055160;
}

.diger-menu .kutu:hover {
  border: 2px solid #1FA7A3;
  transform: scale(1.05);
  cursor: pointer;
}

.diger-menu .kutu:hover h2,
.diger-menu .kutu:hover p {
  color: #F28C28;
}

.diger-menu .kutu img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.diger-menu .kutu h2 {
  margin-top: 15px;
  font-size: 1.3em;
}

.diger-menu .kutu p {
  margin-top: 10px;
  font-size: 1em;
  line-height: 1.4;
}

/* ==============================================
   DİĞER ESERLER DP Bölüm Listesi Sayfası
   Body class: diger-kitap1-liste
   ============================================== */
.diger-footer-fix .kitap-bolumleri-menu{
    display:flex;
    justify-content:center;
    padding:30px 0;
}

.diger-footer-fix .kutu-container{
    display:flex;
    flex-wrap:wrap; /* satır taşmasına izin verir */
    justify-content:center;
    gap:20px; /* kutular arası boşluk */
    width:100%;
    max-width:1000px;
}

/* Kutular */
.diger-footer-fix .kutu-bolum{
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    width:280px;   /* kutu genişliği */
    height:80px;   /* kutu yüksekliği */
    padding:10px;
    text-decoration:none;
    border:2px solid #ccc;
    border-radius:8px;
    background:#fff;
    transition:transform 0.2s ease,border-color 0.2s ease;
}

.diger-footer-fix .kutu-bolum h2{
    margin:0;
    font-size:18px;
    color:#333;
}

/* Hover */
.diger-footer-fix .kutu-bolum:hover{
    border-color:turquoise;
    transform:scale(1.05);
}

/* ==============================================
   Okuma Sayfası
   Body class: diger-kitap1-bolum
   ============================================== */
.diger-kitap1-bolum .bolum-icerik-container {
    display: flex;
    justify-content: center;
}

.diger-kitap1-bolum .bolum-icerik {
    width: 100%;
    max-width: 760px;
    background: #C0EBE7;
    padding: 50px 40px;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
    font-family: Georgia, "Times New Roman", serif; /* Kitap stili */
}

.diger-kitap1-bolum .bolum-icerik h1 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
	font-family: 'Palatino Linotype', 'Palatino', serif;
    font-size: 32px;
    color: #222;
}

.diger-kitap1-bolum .bolum-icerik p {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 18px;
    color: #333;
	text-align: center;
}

.diger-kitap1-bolum .bolum-icerik img {
    display: block;
    max-width: 100%;
    margin: 30px auto;
    border-radius: 6px;
}

.diger-kitap1-bolum .bolum-icerik.ikinci-kategori {
    text-align: left; /* Genel metin sola hizalı */
}

.diger-kitap1-bolum .bolum-icerik.ikinci-kategori p {
    text-align: left !important; /* Önceki center stilini geçersiz kıl */
    text-indent: 1.2em; 
    margin-bottom: 18px;
    font-size: 18px;
    line-height: 1.7;
    color: #333;
}

.diger-kitap1-bolum .bolum-icerik.ikinci-kategori img {
    display: block;
    max-width: 100%;
    margin: 30px 0 30px 0; /* Sola dayalı */
    border-radius: 6px;
}

/* Sticky footer için sadece gerekli sayfalarda */
body.diger-footer-fix {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ekran yüksekliği kadar alan */
}

/* Container’ı büyüt, footer ekranın altına iter */
.bolum-icerik-container,
.diger-menu {
  flex: 1;
}

body.sanatsal-footer-fix {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ekran yüksekliği */
}

.sanatsal-menu {
  flex: 1; /* footer’ı ekranın altına iter */
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center; /* kutuları dikeyde ortala */
}

/* mobil uyumlu navigasyon */
@media (max-width: 768px) {
  .navigasyon a {
    position: static;
    transform: none;
    display: inline-block;
    margin: 10px;
  }
}

@media (max-width: 768px) {

  body {
    padding: 12px;
  }

  .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;
  }

  p {
    font-size: 16px;
    line-height: 1.6;
  }

}

@media (max-width: 768px) {

  .yazar-bolum {
    flex-direction: column;
    gap: 20px;
    margin: 40px 15px;
  }

  .yazar-bolum img {
    width: 100%;
    max-width: 100%;
  }

  .yazar-yazi {
    font-size: 16px;
    text-align: left;
  }

  /* Ters olanları da düzelt */
  .yazar-bolum.ters {
    flex-direction: column;
  }

}