/*
Theme Name: Benim Temam
*/
/* ==========================================================================
   1. TEMA AYARLARI VE DEĞİŞKENLER (VARIABLES)
   --------------------------------------------------------------------------
   Bu bölüm sitenin renk paletini belirler. Bir rengi değiştirmek istediğinde
   tek tek kod aramak yerine sadece burayı güncellemen yeterlidir.
   ========================================================================== */
:root {
  --ana-koyu: #a03c3c; /* Sitenin ana kırmızı tonu */
  --altin-bant: #a03c3c; /* Duyuru çubuğu ve vurgu rengi */
  --vurgu: #a4896a; /* İkincil vurgu rengi (gold/kahve) */
  --zemin: #faf9f6; /* Sayfanın arka plan rengi (kemik rengi) */
  --beyaz: #ffffff; /* Saf beyaz */
  --gri: #757575; /* Yazılar için yardımcı gri */
}

/* ==========================================================================
   2. SIFIRLAMA VE TEMEL YAPI (RESET & BASE)
   --------------------------------------------------------------------------
   Tarayıcıların kendine göre verdiği varsayılan boşlukları siler ve 
   sitenin her cihazda aynı görünmesini sağlar.
   ========================================================================== */

/* Sayfa genelindeki marj ve iç boşlukları sıfırlıyoruz */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%; /* Sayfa içeriği az olsa bile zemini tam boy boyar */
  box-sizing: border-box;
  overflow-x: hidden; /* Sağa doğru istemsiz kaymaları engeller */
}

/* Tüm elemanların genişlik hesaplamasını 'border-box' yapıyoruz.
   Bu sayede verdiğin padding'ler (iç boşluk) elemanı dışa doğru şişirip yapıyı bozmaz. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Temel body ayarı */
body {
  background-color: var(--zemin); /* Yukarıda tanımladığımız zemin rengi */
  font-family: sans-serif; /* Genel yazı tipi (WordPress bunu ezer ama kalsın) */
  line-height: 1.6; /* Okunabilirlik için satır arası boşluk */
}
/* ==========================================================================
   3. NAVİGASYON (MENÜ BUTONLARI)
   --------------------------------------------------------------------------
   Sitenin üst kısmındaki linkleri yuvarlak hatlı, modern butonlara dönüştürür.
   ========================================================================== */
/* Menü listesinin (ul) genel yerleşimi */
.nav-buttons ul {
  list-style: none; /* Maddelerin yanındaki noktaları kaldırır */
  display: flex; /* Yan yana dizilmelerini sağlar */
  justify-content: center; /* Butonları sayfanın ortasına hizalar */
  flex-wrap: wrap; /* Ekran daralınca butonların alt alta geçmesini sağlar */
  gap: 15px; /* Butonlar arasındaki boşluk */
  padding: 0;
  margin: 20px 0; /* Üstten ve alttan 20px boşluk bırakır */
}
/* Butonların (linklerin) kendi tasarımı */
.nav-buttons li a {
  display: inline-block;
  text-decoration: none;
  color: var(--ana-koyu);
  border: 1.5px solid var(--altin-bant);
  padding: 12px 28px; /* Yazı fontu değiştiği için yüksekliği hafifçe dengeledik */
  border-radius: 50px;

  /* Yeni Tipografi Ayarları */
  font-family: "Times New Roman", Times, serif;
  text-transform: uppercase; /* Tüm harfler büyük */
  font-size: 1.1rem; /* Times New Roman yapısı gereği bir tık büyük daha iyi okunur */
  font-weight: 400; /* Klasik serif fontlarda 400 (Normal) daha asil durur */
  letter-spacing: 2px; /* Harf aralarını okunaklılığı bozmadan hafifçe açtık */

  background: transparent;
  transition: all 0.3s ease;
}
/* Mouse ile butonun üzerine gelince (Hover) olacaklar */
.nav-buttons li a:hover {
  background-color: var(--altin-bant); /* Arka planı kırmızıya boyar */
  color: white; /* Yazıyı beyaza çevirir */
  transform: translateY(-3px); /* Butonu hafifçe yukarı zıplatır */
  box-shadow: 0 5px 15px rgba(165, 144, 24, 0.3); /* Butonun altına hafif gölge atar */
}
/* ==========================================================================
   4. KARANLIK MOD SİSTEMİ (DARK MODE SYSTEM) - KAYMA DOSTU
   -------------------------------------------------------------------------- */
:root {
  --zemin: #faf9f6;
  --beyaz: #ffffff;
  --yazi-renk: #a03c3c;
  --gri: #757575;
  --gecis-hizi: 0.4s ease-in-out;
}
body.dark-mode {
  --zemin: #1a1a1a;
  --beyaz: #252525;
  --yazi-renk: #ffffff;
  --gri: #d0d0d0;
}
/* 
   ÖNEMLİ DÜZELTME: 
   Burada 'all' yerine sadece renkleri hedefliyoruz. 
   Böylece slider-track üzerindeki 'transform' (kayma) efekti bozulmaz.
*/
body,
.slider-container,
.slider-track-window,
.split-card,
.slider-btn,
.slider-dots span {
  transition:
    background-color var(--gecis-hizi),
    color var(--gecis-hizi),
    border-color var(--gecis-hizi),
    box-shadow var(--gecis-hizi) !important;
}
/* 
   RAYI ÖZGÜR BIRAK:
   Slider rayının kayma (transform) animasyonuna dokunma diyoruz.
*/
.slider-track {
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.35, 1) !important;
}
/* 
   GÜVENLİ PEMBE KOD
*/
body.dark-mode *:not(i):not([class*="fa-"]) {
  color: #c5a3a3 !important;
}
/* Buton ve Kart Hover Efektlerini Yumuşat */
.slider-btn:hover,
.split-card:hover {
  transition: transform 0.3s ease !important;
}
/* ==========================================================================
   5. GENEL SAYFA VE HEADER (BAŞLIK) TASARIMI
   --------------------------------------------------------------------------
   Sitenin en üst kısmındaki ana başlık, yazar ismi ve duyuru çubuğunu kapsar.
   ========================================================================== */

/* Sayfa genelinin renk geçiş ayarları */
body {
  background-color: var(--zemin);
  color: var(--yazi-renk);
  transition:
    background-color 0.3s ease,
    color 0.3s ease; /* Sadece gerekli değişimleri yumuşatır */
}
/* Üst kısım (Header) Konteynırı */
header {
  /* Geniş bir nefes alma alanı için 60px üst boşluk */
  padding: 60px 20px 20px;
  text-align: center;
  background-color: var(--beyaz);
  transition: background-color 0.3s ease;
}
/* Ana Başlık (Logotype) */
header h1 {
  font-family: "Playfair Display", serif;
  /* clamp: Ekran küçüldükçe başlığı otomatik küçültür (Min: 3rem, Max: 6.5rem) */
  font-size: clamp(3rem, 10vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -4px; /* Harfleri birbirine yaklaştırarak modern bir hava katar */
  margin: 0;
  line-height: 0.85; /* Satır yüksekliğini daraltarak başlığı sıkılaştırır */
}
/* HEADER - YAZAR ADI (SADE VE YAKIN STİL)*/
header .author-name {
  font-family: "Times New Roman", Times, serif;
  text-transform: uppercase;
  letter-spacing: 8px; /* Aralığı biraz daraltarak daha kompakt bir görünüm sağladık */
  color: rgba(0, 0, 0, 0.7); /* Bir tık daha koyulaştırıp netleştirdik */
  font-size: 1.6rem;
  font-weight: 400;

  display: block; /* Alt satıra geçmesini garanti altına aldık */
  margin-top: 20px; /* Başlık ile isim arasındaki boşluğu minimize ettik */
  padding-top: 0; /* Çizgi kalktığı için iç boşluğa gerek kalmadı */
}
/* Karanlık Modda Header Yazı Renklerini Sabitleme */
body.dark-mode header h1,
body.dark-mode header .author-name {
  color: var(--yazi-renk); /* Değişken sayesinde beyaza/pembeye döner */
}
/* ==========================================================================
   6. DUYURU ÇUBUĞU (ANNOUNCEMENT BAR)
   --------------------------------------------------------------------------
   Kayan yazıların veya önemli notların geçtiği kapsül tasarımlı alan.
   ========================================================================== */

.announcement-bar {
  background-color: var(--altin-bant); /* Ana vurgu rengimiz */
  overflow: hidden; /* İçinden taşan yazıların görünmesini engelle (Kayma için şart) */
  padding: 10px 0;
  margin: 35px auto 0; /* Header'dan 35px aşağıda ortalanır */
  width: 30%; /* Şık bir görünüm için dar tutulur */
  min-width: 280px; /* Mobilde çok daralmaması için sınır */
  border-radius: 50px; /* Kapsül (oval) görünümü */
}
/* ==========================================================================
   7. KARANLIK MOD GEÇİŞ BUTONU (DARK MODE TOGGLE)
   --------------------------------------------------------------------------
   Sayfayı aşağı kaydırsan bile ekranın sol üstünde sabit kalan, 
   mod değiştirmeye yarayan yuvarlak butondur.
   ========================================================================== */
.dark-mode-toggle {
  position: fixed; /* Sayfa kaysa da butonu ekranda sabitleşmiş tutar */
  top: 35px; /* Ekranın üstünden 35px boşluk */
  left: 20px; /* Ekranın solundan 20px boşluk */
  z-index: 9999; /* Sitedeki tüm görsellerin ve kartların en üstünde durmasını sağlar */

  width: 45px; /* Buton genişliği */
  height: 45px; /* Buton yüksekliği */
  border-radius: 50%; /* Tam yuvarlak form */

  border: none; /* Çerçeveyi kaldırır */
  background: var(--yazi-renk); /* Temanın ana rengini arka plan yapar */
  color: var(
    --zemin
  ); /* İçindeki ikonu zemin rengiyle zıtlaştırarak görünür kılar */

  cursor: pointer; /* Üzerine gelince el işareti çıkar */

  display: flex; /* İçindeki ikonu ortalamak için */
  align-items: center; /* İkonu dikeyde ortalar */
  justify-content: center; /* İkonu yatayda ortalar */

  transition: transform 0.3s ease; /* Hover etkisini yumuşatır */
}
/* Mouse ile üzerine gelince butonun hafifçe büyümesini sağlar */
.dark-mode-toggle:hover {
  transform: scale(1.1);
}
/* ==========================================================================
   8. SLIDER VE YAZI İÇERİĞİ KARANLIK MOD DÜZELTMESİ (DARK FIX)
   --------------------------------------------------------------------------
   Slider alanındaki farklı katmanların karanlık modda sayfa zeminiyle 
   tam uyumlu görünmesini sağlar ve okuma alanındaki yazıları netleştirir.
   ========================================================================== */

/* Slider'ın tüm alt katmanlarını (konteynır, ray, gruplar) zemin rengine eşitler */
body.dark-mode #yazilar,
body.dark-mode .slider-container,
body.dark-mode .slider-track,
body.dark-mode .slide-group {
  /* !important kullanarak temadan gelebilecek beyaz arka plan zorlamalarını ezer */
  background-color: var(--zemin) !important;
  transition: background-color 0.3s ease;
}
/* Makale içindeki (yazı sayfalarındaki) ana metin rengi */
body.dark-mode .article-body {
  /* Saf beyaz yerine hafif gri tonu (#ddd) kullanarak göz yorgunluğunu önler */
  color: #dddddd;
}
/* ==========================================================================
   9. KAYAN DUYURU (ANNOUNCEMENT TICKER)
   --------------------------------------------------------------------------
   Duyuru çubuğunun içindeki metnin sonsuz bir döngüde sağdan sola
   akmasını sağlayan animasyon sistemidir.
   ========================================================================== */

/* Metni tek satırda tutan ve kaydıran kapsayıcı */
.ticker-wrapper {
  display: inline-block;
  white-space: nowrap; /* Yazının alt satıra geçmesini engelle, hep tek sıra kalsın */
  animation: tickerMove 12s linear infinite; /* 12 saniyede bir tur atar, hiç durmaz */
}
/* Kayan metnin (span) stili */
.ticker-wrapper span {
  color: #ffffff;
  /* Yazı tipi: Menü butonlarınla uyumlu olması için Times veya Playfair */
  font-family: "Times New Roman", Times, serif;
  font-size: 0.9rem;
  font-weight: 600; /* Biraz daha belirgin */
  text-transform: uppercase;
  letter-spacing: 3px; /* Zarif bir açılma */
  padding-right: 80px; /* Duyurular arası mesafe */
  display: inline-block;
}
/* 
   ANIMASYON MOTORU:
   Yazıyı ekranın en sağından (%100) başlatıp, 
   en soluna (% -100) kadar götürür.
*/
@keyframes tickerMove {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* ==========================================================================
   10. HAKKIMDA (ANA SAYFA YAZISI)
   --------------------------------------------------------------------------
   Sabit arka plan görseli üzerine buğulu cam (glassmorphism) efektiyle
   kısa bir biyografi alanı oluşturur.
   ========================================================================== */

/* Arka plan görselinin bulunduğu ana kapsayıcı */
.about-hero {
  position: relative;
  width: 100%;
  height: 600px; /* Görsel alanın yüksekliği */
  display: flex;
  align-items: center; /* İçindeki kutuyu dikeyde ortalar */
  justify-content: center; /* İçindeki kutuyu yatayda ortalar */
  background-image: url("images/kapak2.jpeg");
  background-size: cover; /* Görseli alanı kaplayacak şekilde yayar */
  background-position: center;
  background-attachment: fixed; /* PARALLAX ETKİSİ: Sayfa kaysa da resim sabit kalır */
  margin: 20px 0; /* Diğer bölümlerle aradaki mesafe */
}
/* Görsel üzerindeki buğulu cam (Overlay) kutusu */
.about-overlay-box {
  /* Beyaz rengi %15 şeffaflıkla kullanarak cam efekti verir */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px); /* Arkadaki resmi bulanıklaştırır */
  -webkit-backdrop-filter: blur(15px); /* Safari tarayıcı desteği için */
  padding: 60px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2); /* İnce, zarif bir kenarlık */
  max-width: 700px; /* Metnin çok yayılmasını engeller */
  text-align: center;
}
/* Sadece Dark Mode aktifken kutuyu karartır */
.dark-mode .about-overlay-box {
  background: rgba(
    0,
    0,
    0,
    0.5
  ) !important; /* Beyaz yerine siyah %50 şeffaflık */
  border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Kenarlığı iyice soldur */
  backdrop-filter: blur(
    20px
  ); /* Karartma ile birlikte buğuyu biraz artırmak derinlik katar */
}

/* Dark Mode'da yazıların okunması için (isteğe bağlı) */
.dark-mode .about-overlay-box p,
.dark-mode .about-overlay-box h1 {
  color: #d8b4b4 !important; /* Önerdiğim tozlu pembe/rose tonu */
}
/* Hakkımda Başlığı */
.about-title {
  font-family: "Playfair Display", serif;
  font-size: 2.8rem;
  color: #ffffff; /* Arka plan koyu olacağı için yazı beyaz */
  margin-bottom: 20px;
}
/* Hakkımda Açıklama Metni */
.about-desc {
  color: #ffffff;
  font-size: 1.1rem;
  line-height: 1.8; /* Okunabilirliği artıran geniş satır aralığı */
}
/* ==========================================================================
   11. YAZILAR BÖLÜMÜ ANA KONTEYNER (POSTS SECTION)
   --------------------------------------------------------------------------
   Bu bölüm, slider kartlarını içine alan ana çerçevedir. 
   Gereksiz boşlukları temizleyerek slider'ın kompakt durmasını sağlar.
   ========================================================================== */

#yazilar {
  width: 100%;
  overflow: hidden; /* İçerideki slider kartlarının dışarı taşmasını engeller */
  padding: 20px 0 60px; /* Üst 20px (yaklaştırdık), Alt 60px (nefes alma alanı) */
  background-color: var(--zemin);
  transition: background-color 0.3s ease;
}
/* Bölüm Başlığı (Örn: "Son Yazılar") */
#yazilar h2 {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  margin-top: 0; /* Başlığın üzerindeki otomatik boşluğu sildik */
  margin-bottom: 40px; /* Başlık ile slider arasına mesafe koyduk */
  color: var(
    --ana-koyu
  ); /* Sabit renk yerine değişken kullanarak uyumu sağladık */
}
/* ==========================================================================
   12 & 13. SLIDER MEKANİZMASI (RAY VE GRUPLAR)
   --------------------------------------------------------------------------
   Bu bölüm, slider'ın sonsuz veya iki aşamalı döngüsünü sağlar.
   ========================================================================== */

/* 2 GRUBU YAN YANA TUTAN ANA RAY */
.slider-track {
  display: flex;
  width: 100%; /* Otomatik genişlesin */
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Her kartın tam ortalanması için konteynere bu padding'i ver */
.slider-container {
  width: 100%;
  max-width: 1100px; /* Karttan biraz daha geniş olsun */
  margin: 0 auto;
  padding: 0 20px;
  overflow: hidden;
}
/* 3'LÜ KART GRUPLARI */
.slide-group {
  display: flex;
  width: 50%; /* Ray %200 olduğu için, her grup ekranın tamını (%100) kaplar. */
  justify-content: center; /* Kartları ekranın ortasında toplar */
  gap: 30px; /* Kartlar arasındaki estetik boşluk */
  flex-shrink: 0; /* Kartların daralmasını engeller */
  padding: 20px 0; /* Kart gölgelerinin kesilmemesi için dikey boşluk */
}
/* ==========================================================================
   16. GÜNCEL SLIDER SİSTEMİ - 2026 EKSİKSİZ VERSİYON
   -------------------------------------------------------------------------- */

/* Slider Dış Çerçevesi - Butonların görünmesi için overflow:visible yaptık */
.slider-container {
  position: relative;
  width: 100%;
  max-width: 950px;
  margin: 50px auto;
  overflow: visible;
}

/* Kartların içinden geçtiği pencere - Burada taşanları gizliyoruz */
.slider-track-window {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* Kartların dizildiği ray */
.slider-track {
  display: flex;
  width: 100%;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.35, 1);
  gap: 0; /* Hesaplamayı bozmamak için boşluk 0 olmalı */
}

/* KART YAPISI */
.split-card {
  flex: 0 0 100%; /* Ekranda tek kart garantisi */
  display: flex;
  flex-direction: row;
  height: 340px; /* Kompakt boy */
  background-color: var(--beyaz, #fff);
  text-decoration: none !important;
  overflow: hidden;
}

/* Kart içindeki tüm link/mavi renk etkilerini öldürür */
.split-card,
.split-card * {
  color: inherit !important;
  text-decoration: none !important;
}

/* Sol Görsel Alanı */
.split-image {
  width: 45%;
  height: 100%;
}

.split-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Sağ Metin Alanı */
.split-content {
  width: 55%;
  padding: 35px 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

/* Kategori (Güncel vs.) - Times New Roman Ayarı */
.split-category {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ana-koyu, #a03c3c) !important;
  margin-bottom: 10px;
  display: block;
}

/* Başlık Ayarı */
.split-title {
  font-family: "Playfair Display", serif;
  font-size: 1.7rem;
  line-height: 1.3;
  color: var(--yazi-renk, #222) !important;
  margin-bottom: 12px;
}

/* Özet Metin */
.split-excerpt {
  font-family: "Georgia", serif;
  font-size: 1rem;
  color: var(--gri, #555) !important;
  line-height: 1.6;
}

/* Tarih (2026 vs.) */
.split-meta {
  margin-top: 15px;
  font-size: 0.85rem;
  color: var(--gri, #888) !important;
}

/* BUTONLAR (Konteynerin dışına, sağa ve sola taşındı) */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ana-koyu, #a03c3c);
  color: #ffffff;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.slider-btn:hover {
  background: #822f2f;
  transform: translateY(-50%) scale(1.1);
}

.prev-btn {
  left: -65px;
} /* Sol dış */
.next-btn {
  right: -65px;
} /* Sağ dış */

/* NOKTALAR (DOTS) */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 25px;
}

.slider-dots span {
  width: 12px;
  height: 12px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.slider-dots span.active {
  background-color: var(--ana-koyu, #a03c3c);
  transform: scale(1.2);
}

/* DAR EKRANLAR İÇİN (Butonlar içeri girer, kart mobile döner) */
@media (max-width: 1150px) {
  .slider-container {
    max-width: 90%;
  }
  .prev-btn {
    left: 10px;
  }
  .next-btn {
    right: 10px;
  }
}

@media (max-width: 768px) {
  .split-card {
    flex-direction: column;
    height: auto;
  }
  .split-image,
  .split-content {
    width: 100%;
  }
  .split-image {
    height: 200px;
  }
}
/* ==========================================================================
   17. SLIDER NOKTALARI (DOTS) - CSS
   --------------------------------------------------------------------------
   JS tarafından oluşturulan navigasyon noktalarının tasarımı.
   ========================================================================== */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}
.slider-dots span {
  width: 12px;
  height: 12px;
  background-color: #ccc; /* Pasif nokta rengi */
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}
.slider-dots span.active {
  background-color: #a03c3c; /* Aktif nokta (Senin kırmızın) */
  transform: scale(1.3); /* Aktif olanı biraz büyüt */
}
/* Lightbox (Resim Büyütme) Temel Stili */
#custom-lightbox {
  display: none; /* JS ile flex yapılacak */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}
#lightbox-img {
  max-width: 90%;
  max-height: 80%;
  border: 3px solid #fff;
}
/* ==========================================================================
   18. ESERLER (KİTAPLAR) BÖLÜMÜ
   --------------------------------------------------------------------------
   Sabit arka plan görseli üzerine yerleşmiş kitap kartları.
   ========================================================================== */

.books-slider {
  position: relative;
  width: 100%;
  /* Üst boşluk 30px, alt boşluk 60px (Daha dengeli bir görünüm) */
  padding: 30px 0 60px;
  background-image: url("images/kapak2.jpeg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Paralaks efekti sağlar */
}
/* Bölümün üzerine hafif bir karartma ekleyerek yazıların okunurluğunu artıralım */
.books-slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Arka planı %40 karartır */
  z-index: 1;
}
/* ESERLER Bölüm Başlığı */
.books-slider h2 {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 0;
  margin-bottom: 60px;
  font-size: 2.8rem; /* Boyutu hafifçe estetik seviyeye çektik */

  /* İSTEDİĞİN YENİ AYARLAR: */
  font-family: "Times New Roman", Times, serif !important;
  text-transform: uppercase !important; /* TÜMÜ BÜYÜK HARF */
  letter-spacing: 5px; /* Harf arası boşluk (Klasik eser havası verir) */
  font-weight: bold;
  color: #ffffff;
}
.books-track {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 50px; /* Kitaplar arasındaki ferah boşluk */
}
.book-card {
  width: 250px;
  text-align: center;
  transition: transform 0.3s ease;
}
.book-card:hover {
  transform: translateY(-10px); /* Hover'da hafif yukarı zıplama efekti */
}
.book-cover {
  width: 250px;
  height: 365px;
  border-radius: 4px;
  border-left: 5px solid var(--ana-koyu); /* Kitap sırtı efekti */
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  margin-bottom: 20px;
}
.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.book-card strong {
  display: block;
  color: #fff;
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  line-height: 1.4;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   21. FOOTER (RESİMLİ ARKA PLAN & MERKEZİ KÜNYE) - GÜNCEL
   -------------------------------------------------------------------------- */
.footer-bg-section {
  position: relative;
  width: 100%;
  /* Üst ve alttan genişliği (boşluğu) azalttık */
  padding: 40px 0;
  background-image: url("images/kapak2.jpeg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
  overflow: hidden;
}
.footer-bg-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
.footer-center-container {
  position: relative;
  z-index: 2;
  max-width: 900px; /* Enine hafif esnettik */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
}
/* Telif Hakkı / Başlık Alanı */
.copyright {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 0.95rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 15px; /* Boşluk daraltıldı */
  color: #ffffff;
}
/* Künye Çizgisi */
.credits-sub {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 15px;
  width: fit-content;
  min-width: 250px;
}
/* Künye Satırları */
.credit-row {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  opacity: 0.8;
  text-transform: uppercase;
  margin-bottom: 5px;
}
/* EMAIL ÖZEL AYARI: Küçük harf ve link temizliği */
.credit-row a {
  text-transform: lowercase !important; /* Küçük harfe zorlar */
  text-decoration: none !important; /* Alt çizgiyi kaldırır */
  color: inherit !important; /* Yazı rengini beyazda sabitler, mavi yapmaz */
  border: none !important;
  font-weight: normal;
}
.credit-row b {
  font-weight: 600;
  color: #fff;
  margin-left: 5px;
}
/* Mobil Ayarlar */
@media (max-width: 768px) {
  .footer-bg-section {
    padding: 30px 15px;
  }
}
/* ==========================================================================
   22. YAZI İÇERİK SAYFASI (DETAY) - TEMİZLENMİŞ
   -------------------------------------------------------------------------- */
.content-container {
  max-width: 750px;
  margin: 60px auto;
  padding: 0 20px;
  min-height: 60vh;
}
.article-header {
  text-align: center;
  background: transparent !important; /* Beyaz kutuyu kaldırır */
  padding: 0 !important;
  margin-bottom: 40px;
}
.article-title {
  font-family:
    "Times New Roman", Times, serif !important; /* Başlığı da Times yaptık */
  text-transform: uppercase !important; /* Başlığı Büyük Harf yaptık */
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  margin: 20px 0;
  font-weight: bold;
  line-height: 1.2;
  color: #333;
}
.article-category a {
  text-decoration: none !important;
  color: var(--vurgu) !important;
  font-family: "Times New Roman", Times, serif;
  letter-spacing: 2px;
}
.article-body {
  font-family: "Georgia", "Times New Roman", Times, serif;
  font-size: 1.15rem;
  line-height: 1.8;
  color: #333;
  text-align: justify;
}
/* Dark Mode Ayarı */
body.dark-mode .article-body {
  color: #eeeeee !important;
}
body.dark-mode .article-title {
  color: #ffffff !important;
}
/* ==========================================================================
   23. BİYOGRAFİ SAYFA TASARIMI
   -------------------------------------------------------------------------- */
.bio-page {
  max-width: 800px;
  margin: 80px auto; /* Diğer sayfalarla uyumlu boşluk */
  padding: 0 20px;
  text-align: center;
}
/* "BİYOGRAFİ" veya "HAKKINDA" yazan küçük üst etiket */
.bio-label {
  display: block;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 0.8rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--vurgu); /* Tema rengine bağladık */
  margin-bottom: 15px;
}
/* Kişi İsmi (Başlık) */
.bio-title {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 50px;
  color: #1a1a1a;
  font-weight: bold;
}
/* Biyografi Metni */
.bio-content {
  text-align: justify;
  font-family: "Georgia", serif; /* Okuma konforu için */
  font-size: 1.15rem;
  line-height: 1.9;
  color: #333;
}
/* --- Biyografi Sayfası: E-Kitap/PDF Butonu --- */
.pdf-button {
  display: inline-block;
  padding: 14px 28px;
  background: #a03c3c;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 50px;
  font-weight: bold;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.pdf-button:hover {
  background: #822f2f;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
/* --- Dark Mode Uyumu --- */
body.dark-mode .bio-title {
  color: #fff;
}
body.dark-mode .bio-content {
  color: #ccc;
}

body.dark-mode .pdf-button {
  background: #fff;
  color: #000 !important;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
}

body.dark-mode .pdf-button:hover {
  background: #eee;
}
/* ============================================================
   24. KATEGORİ SAYFASI VE KART TASARIMI
   ============================================================ */
.category-page {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}
/* Kategori Başlığı (Güncel, Şiir vb.) */
.category-title {
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 50px;
  color: #1a1a1a;
}
/* Kartların Dizilimi */
.card-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(350px, 1fr)
  ); /* Esnek kart genişliği */
  gap: 30px;
  justify-items: center;
}
/* 🔥 KART ANA YAPI */
.article-card.category-card {
  position: relative;
  display: block;
  width: 100%; /* Grid içinde tam yayılma */
  height: 500px;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  background: #000; /* Görsel yüklenene kadar siyah zemin */
}
/* Görsel Ayarları */
.article-img,
.article-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
/* Kartın Altındaki Kırmızı Bilgi Kutusu */
.article-info-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(160, 60, 60, 0.95); /* Senin imza kırmızın */
  padding: 20px;
  z-index: 2;
  transition:
    transform 0.4s ease,
    opacity 0.3s ease;
}
.article-info-box h4 {
  color: #fff;
  margin: 0;
  font-size: 1.1rem;
  font-family: "Times New Roman", serif;
  text-transform: uppercase;
}
.article-info-box p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  margin: 5px 0 0;
}
/* 🔥 HOVER OVERLAY (Blur Efekti) */
.article-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* Hafif karartma */
  backdrop-filter: blur(10px); /* Flulaştırma */
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 3;
}
/* Hover Durumunda Tetiklemeler */
.article-card:hover .article-hover-overlay {
  opacity: 1;
  visibility: visible;
}
.article-card:hover .article-img img {
  transform: scale(1.1);
}
.article-card:hover .article-info-box {
  opacity: 0; /* Üzerine gelince alttaki kırmızı kutu kaybolsun ki yazı okunsun */
}
/* Hover İçindeki Özet Yazı */
.hover-content {
  color: #fff;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  font-family: "Georgia", serif;
}
/* ==========================================
   25. ETKİNLİKLER SAYFASI (Görsel Odaklı Kartlar)
   ========================================== */
/* Başlık Alanı */
.etkinlikler-header h1 {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  margin: 60px 0 30px 0;
}
/* Kart Taşıyıcı Grid */
.etkinlikler-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
/* Etkinlik Kart Ana Yapı */
.etkinlik-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
  width: 100%;
}
.etkinlik-card:hover {
  transform: translateY(-8px);
}
/* Resim Alanı (1080x617 Oranı Korunur) */
.etkinlik-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 617;
  object-fit: cover;
  display: block;
}
/* Metin Alanı */
.etkinlik-content {
  padding: 25px;
  text-align: left;
}
.etkinlik-content h2 {
  margin: 0 0 12px 0;
  font-size: 1.5rem;
  font-family: "Playfair Display", serif;
  color: #1a1a1a;
}
.etkinlik-content p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}
/* ==========================================
   ETKİNLİK KARTLARI DARK MODE
   ========================================== */
body.dark-mode .etkinlik-card {
  background-color: #1e1e1e !important;
}
body.dark-mode .etkinlik-content h2 {
  color: #f1f1f1 !important;
}
body.dark-mode .etkinlik-content p {
  color: #cfcfcf !important;
}
/* Kartın içindeki tarih veya kategori gibi meta bilgiler varsa */
body.dark-mode .etkinlik-card .split-meta {
  color: #999 !important;
}
/* --- Lightbox (Tam Ekran Görsel) Tasarımı --- */
#custom-lightbox {
  display: none; /* Başlangıçta gizli */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
#lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  animation: zoomIn 0.3s ease;
}
.close-lightbox {
  position: absolute;
  top: 30px;
  right: 40px;
  color: white;
  font-size: 50px;
  font-weight: bold;
  cursor: pointer;
}
@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* Mouse ile üzerine gelince büyüteç çıksın */
.zoomable-image {
  cursor: zoom-in;
  transition: 0.3s ease;
}
/* ==========================================
   26. ANA SAYFA / KATEGORI TEPE BAŞLIĞI
   ========================================== */

.category-title,
.etkinlikler-header h1,
.page-title {
  font-family: "Times New Roman", Times, serif !important;
  color: #a03c3c !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 2.4rem; /* 2.8rem'den 2.6rem'e çekildi */
  text-align: center;
  margin: 50px 0 30px 0; /* Boşlukları hafif daralttım */
  letter-spacing: 1px;
}

/* ==========================================
   27. BACK TO TOP BUTONU
   ========================================== */
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #a03c3c;
  color: #fff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: none; /* Sayfa kaydırılana kadar gizli */
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 1000;
  transition: 0.3s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
#backToTop:hover {
  transform: scale(1.1);
  background: #822f2f;
}

/* ==========================================
   29. METİN SEÇİMİNİ KAPATMA
   ========================================== */
/* Tüm sitede metin seçimini kapat */
body {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ */
  -moz-user-select: none; /* Firefox */
  user-select: none; /* Standart */
}
/* Ama arama kutusu veya form alanları gibi yerlerde yazı yazılabilsin */
input,
textarea {
  -webkit-user-select: text;
  -ms-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
/* ==========================================
   30. GÖRSEL SÜRÜKLEME ENGELLEME
   ========================================== */
img {
  -webkit-user-drag: none;
  user-drag: none;
}
/* ==========================================
   31. SOSYAL MEDYA İKONLARI
   ========================================== */
.footer-social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px; /* boşluk */
}
.footer-social-icons a {
  color: #888;
  font-size: 1.3rem; /* İkonları bir tık büyüttük, daha rahat tıklanır */
  transition: all 0.3s ease;
}
.footer-social-icons a:hover {
  color: #a03c3c;
  transform: scale(1.1); /* Hafif büyüme efekti */
}
/* ==========================================
   32. Yazı başlıklarının stili
   ========================================== */
/* Single Page - Kategori Üst Yazısı */
.article-category,
.article-category a {
  font-family: "Times New Roman", serif;
  color: #888;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
}
/* Single Page - Ana Başlık*/
.article-title {
  font-family: "Times New Roman", Times, serif !important;
  color: #a03c3c !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 2.4rem !important;
  text-align: center;
  margin: 10px 0 40px 0;
  letter-spacing: 1px;
  line-height: 1.2;
}
/* Yazı Sonu Navigasyon Tasarımı */
.post-navigation-area {
  margin: 60px auto 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
  text-align: center;
}
.nav-label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: #bbb;
  margin-bottom: 15px;
}
.next-post-link {
  font-family: "Times New Roman", serif;
  font-size: 1.8rem;
  color: #a03c3c;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
}
.next-post-link:hover {
  color: #333;
}
/* Mobilde Başlık Boyutu */
@media (max-width: 768px) {
  .article-title {
    font-size: 1.8rem !important;
  }
  .next-post-link {
    font-size: 1.4rem;
  }
}
/* ==========================================
   33. Yazdırma ve pdf olarak kaydetme koruması
   ========================================== */
   /* Sadece 'yazdırma' işlemi tetiklendiğinde çalışacak kurallar */
@media print {
    /* Sayfadaki tüm içeriği (body) gizle */
    body { 
        display: none !important; 
    }
    
    /* İstersen gizlemek yerine bir uyarı yazısı da gösterebilirsin */
    html::after {
        content: "Bu içeriğin çıktısını almak veya PDF olarak kaydetmek yasaktır.";
        font-family: Arial, sans-serif;
        color: red;
        font-size: 20px;
    }
}
/* ==========================================
   34. Görsellerin üzerine sağ tıklama engeli
   ========================================== */
/* Görsellerin üzerine sağ tıklanmasını veya kaydedilmesini zorlaştırır */
img {
    /* Kullanıcının görselle etkileşimini kısıtlar */
    pointer-events: none; 
    /* Bazı tarayıcılarda görselin seçilmesini engeller */
    -webkit-touch-callout: none;
}