/*
Theme Name: Hasan Balaban Teması
Author: [Hasan Balaban] 
Description: Hasan Balaban için özel olarak geliştirilmiş kişisel tema.
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: kisisel, blog, siyah-tema, el-yazisi
Text Domain: hasanbalabantemasi
*/

/*--------------------------------------------------------------
# Temel HTML ve Body Stilleri
--------------------------------------------------------------*/
html {
    height: 100%;
}

body {
    background-color: #000000;
    color: #cccccc;
    font-family: 'Open Sans', sans-serif; /* <-- DEĞİŞTİ: Ana içerik fontu */
    line-height: 1.7; /* Okunabilirlik için biraz artırdık */
    font-size: 17px;  /* Open Sans için uygun bir boyut (ayarlayabilirsin) */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#page { /* Header ve ana içeriği sarar */
    flex-grow: 1; /* Bu alanın header ve footer arasında kalan tüm dikey boşluğu doldurmasını sağlar */
    display: flex;
    flex-direction: column;
    width: 100%;
}

a {
    color: #eeeeee;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Dancing Script', cursive; /* BAŞLIKLAR İÇİN BU DEVAM EDECEK */
    font-weight: normal; /* Dancing Script'in kendi kalınlığı yeterli */
    color: #dddddd;
    line-height: 1.3; /* Başlıklar için satır yüksekliği */
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Altında fazladan boşluk oluşmasını engeller */
}

/*--------------------------------------------------------------
# Header (Üst Kısım) Stilleri
--------------------------------------------------------------*/
.site-header {
    padding: 20px 0;
    text-align: center;
    width: 100%;
    background-color: #000000; /* Header arka planı, body ile aynı */
}

.site-branding h1 {
    margin-top: 0;
    margin-bottom: 5px;
}

.site-branding h1 a {
    font-size: 48px;
    color: #eeeeee;
    text-decoration: none;
}

.site-branding .site-description {
    font-size: 20px;
    color: #aaaaaa;
    margin-top: 0;
    margin-bottom: 20px;
}

.main-navigation {
    width: 100%;
    display: block;
    margin-top: 15px;
}

.main-navigation ul.primary-menu-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-navigation ul.primary-menu-list li {
    margin: 0 15px;
}

.main-navigation ul.primary-menu-list li a {
    font-family: 'Dancing Script', cursive; /* Menü için Dancing Script EKLENDİ/GÜNCELLENDİ */
    color: #cccccc;
    text-decoration: none;
    padding: 5px 0;
    display: inline-block;
    font-size: 22px; /* Veya isteğine göre ayarla */
}

.main-navigation ul.primary-menu-list li a:hover,
.main-navigation ul.primary-menu-list li.current-menu-item a {
    color: #ffffff;
}

/*--------------------------------------------------------------
# İçerik Alanı
--------------------------------------------------------------*/
#content.site-content { /* #page içindeki ana içerik alanı */
    flex-grow: 1; /* Header ile footer arasındaki tüm boşluğu doldurur */
    width: 100%;
    display: flex; /* Altındaki #primary'nin esnemesi için */
    flex-direction: column;
}

#primary.content-area { /* Genel içerik alanı (anasayfa ve diğerleri için) */
    flex-grow: 1; /* #content içindeki tüm boşluğu doldurur */
    display: flex; /* İçeriği (örn: homepage-text-wrapper) ortalamak için */
    flex-direction: column; /* Çocukların alt alta sıralanması için */
    /* justify-content: center; Bu, genel içerik için değil, ana sayfa için özelleşecek */
    /* align-items: center; Bu da */
}
/*--------------------------------------------------------------
# Kitap Arşivi ve Grid Stilleri
--------------------------------------------------------------*/
.kitap-arsiv-container .page-title { /* "Kitaplar" başlığı için */
    text-align: center;
    font-size: 42px; /* Boyutunu ayarlayabilirsin */
    margin-bottom: 40px;
}

.kitaplar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
    gap: 30px; /* Öğeler arası boşluk */
    padding: 0; /* Zaten .content-area padding'i var */
}

.kitap-item {
    background-color: #111111; /* Her bir kitap kutusunun arka planı (isteğe bağlı) */
    /* border: 1px solid #222222; /* İsteğe bağlı kenarlık */
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.kitap-item-thumbnail {
    margin-bottom: 15px;
    flex-grow: 1; /* Resmin esnemesini sağlar */
    display: flex; /* İçindeki resmi ortalamak için */
    align-items: center; /* Dikeyde ortala */
    justify-content: center; /* Yatayda ortala */
}

.kitap-item-thumbnail img {
    max-width: 100%;
    height: auto;
    object-fit: cover; /* Resmin alanı kaplamasını sağlar, orantılı kırpar */
    /* Veya orantıyı koruyarak sığdırmak için: object-fit: contain; */
    /* Belirli bir yükseklik istersen:
    height: 300px;
    width: 100%;
    */
}

.kitap-item-title {
    font-size: 24px; /* Kitap başlığı boyutu */
    margin-top: auto; /* Başlığı alta iter, eğer özet yoksa */
    margin-bottom: 0;
}

.kitap-item-title a {
    color: #eeeeee; /* Kitap başlığı link rengi */
}
.kitap-item-title a:hover {
    color: #ffffff;
}

/* Sayfalama Stilleri (Basit) */
.navigation.pagination {
    margin-top: 40px;
    text-align: center;
}
.navigation.pagination .nav-links .page-numbers {
    padding: 5px 10px;
    margin: 0 2px;
    border: 1px solid #333;
    color: #ccc;
}
.navigation.pagination .nav-links .page-numbers.current,
.navigation.pagination .nav-links .page-numbers:hover {
    background-color: #333;
    color: #fff;
    border-color: #555;
}


/* Küçük Ekranlar İçin Grid Düzenlemesi */
@media (max-width: 992px) { /* Tabletler için 2 sütun */
    .kitaplar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) { /* Mobil için 1 sütun */
    .kitaplar-grid {
        grid-template-columns: 1fr;
    }
}

/*--------------------------------------------------------------
# Ana Sayfa (Homepage) Özel Stilleri
--------------------------------------------------------------*/
body.home .site-branding {
    display: none;
}

body.home #primary.front-page-container { /* Sadece ana sayfadaki #primary için */
    justify-content: center; /* İçeriği dikeyde ortala */
    align-items: center;     /* İçeriği yatayda ortala */
    padding: 0; /* Ana sayfada ekstra padding olmasın */
}

.homepage-text-wrapper {
    text-align: center;
}

.homepage-title { /* Ana sayfadaki "Hasan Balaban" yazısı */
    font-family: 'Dancing Script', cursive !important; /* Fontu zorla uygula (test için) */
    font-size: 10vw;
    color: #efefef;
    margin: 0;
    line-height: 1;
}

@media (max-width: 768px) {
    .homepage-title {
        font-size: 15vw;
    }
}
@media (max-width: 480px) {
    .homepage-title {
        font-size: 18vw;
    }
}

.home #primary.content-area .entry-title { /* Ana sayfada WordPress'in otomatik eklediği sayfa başlığını gizle */
    display: none;
}


/*--------------------------------------------------------------
# Diğer Sayfalar İçin İçerik Stilleri
--------------------------------------------------------------*/
.page:not(.home) #primary.content-area,
.single #primary.content-area { /* Anasayfa dışındaki sayfalar ve tekil yazılar için */
    padding: 20px; /* İç boşluk */
    justify-content: flex-start; /* İçeriği yukarıdan başlat */
    align-items: stretch; /* İçeriğin tam genişliği kullanmasını sağla */
}

.page:not(.home) .entry-header .entry-title,
.single .entry-header .entry-title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
}

.entry-content p {
    margin-bottom: 1.5em;
    font-size: 17px; /* body ile aynı veya biraz farklı olabilir */
    line-height: 1.7; /* body ile aynı */
    /* font-family: 'Open Sans', sans-serif; body'den miras alacağı için tekrar yazmaya gerek yok */
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 1.5em;
    margin-left: 1.5em;
}

.entry-content li {
    margin-bottom: 0.5em;
}


/*--------------------------------------------------------------
# Footer (Alt Kısım) Stilleri
--------------------------------------------------------------*/
.site-footer {
    padding: 20px;
    text-align: center;
    color: #aaaaaa;
    font-size: 16px;
    width: 100%;
    background-color: #000000; /* Veya body'den biraz farklı bir ton */
    /* position: relative; Zaten varsayılanı budur, normal akışta kalır */
    /* flex-shrink: 0; Footer'ın küçülmesini engeller (genelde gerekmez) */
}

/* Sosyal Medya İkonları Stilleri (Bunlar sabit kalacak) */
.social-media-icons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.social-media-icons a {
    color: #888888;
    font-size: 24px;
    margin-left: 10px;
}

.social-media-icons a:hover {
    color: #cccccc;
}

.social-media-icons a:first-child {
    margin-left: 0;
}

/*--------------------------------------------------------------
# Yazılarım (Blog) Arşivi ve Grid Stilleri
--------------------------------------------------------------*/
.yazilarim-arsiv-container .page-title { /* "Yazılarım" kategori başlığı için */
    text-align: center;
    font-size: 42px;
    margin-bottom: 40px;
}

.yazilar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
    gap: 30px;
}

.yazi-item {
    background-color: #111111; /* Her bir yazı kutusunun arka planı */
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.yazi-item-thumbnail img {
    width: 100%; /* Resim kendi alanının genişliğini doldursun */
    height: auto; /* Yüksekliği orantılı olsun */
    aspect-ratio: 1 / 1; /* En boy oranını 1:1 (kare) yapmaya zorlar */
    object-fit: cover; /* Resmin oranını koruyarak bu kare alanı doldurur, gerekirse kırpar */
    /* Eğer resimlerin kırpılmasını istemiyorsan, object-fit: contain; kullanabilirsin,
       ancak o zaman kare alanın içinde boşluklar kalabilir. */
}

.yazi-item-thumbnail img {
    max-width: 100%; /* Resim kendi alanından taşmasın */
    height: auto;    /* Oranını koru */
    /* Eğer sabit bir yükseklik istersen:
    max-height: 200px; 
    width: auto; 
    object-fit: cover; */
}

.yazi-item-header {
    margin-bottom: 10px;
}

.yazi-item-title {
    font-size: 24px; /* Yazı başlığı boyutu */
    margin-top: 0;
    margin-bottom: 0;
}

.yazi-item-title a {
    color: #eeeeee;
}
.yazi-item-title a:hover {
    color: #ffffff;
}

.yazi-item-excerpt p { /* Özet metni için */
    font-size: 16px; /* Fontu biraz küçültebiliriz */
    color: #bbbbbb;
    line-height: 1.5;
}
.yazi-item-excerpt a.read-more { /* Eğer özetin sonunda "devamını oku" linki varsa */
    display: inline-block;
    margin-top:10px;
    font-size:15px;
}


/* Küçük Ekranlar İçin Grid Düzenlemesi */
@media (max-width: 992px) { /* Tabletler için 2 sütun */
    .yazilar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) { /* Mobil için 1 sütun */
    .yazilar-grid {
        grid-template-columns: 1fr;
    }
}
/*--------------------------------------------------------------
# Hakkımda Sayfası Stilleri
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Hakkımda Sayfası Stilleri
--------------------------------------------------------------*/
.hakkimda-sayfasi-container #main.site-main { /* #main elementini flex container yapıyoruz */
    display: flex;
    flex-wrap: wrap; /* Küçük ekranlarda alt satıra kaysın diye */
    gap: 30px; /* Resim ve yazı arasında boşluk */
}

.hakkimda-rastgele-resim { /* Sol sütun (Resim) */
    flex: 1 1 300px; /* Esneme payı:1, Küçülme payı:1, Temel genişlik:300px */
    /* Alternatif olarak sabit bir yüzde: flex-basis: 35%; max-width: 35%; */
    /* margin-bottom: 0; Artık flex gap kullanıyoruz, dikeyde alta kayınca margin-bottom gerekebilir */
    padding: 0; /* Eski padding'i sıfırla, gerekirse tekrar ayarla */
    /* text-align: center; Artık sola yaslı olacak, bu gerekmeyebilir */
}

.hakkimda-rastgele-resim img {
    max-width: 100%;
    height: auto;
    border: 2px solid #333333;
    padding: 5px;
    background-color: #111111;
    /* max-height: 500px; Bu kuralı kaldırabiliriz veya isteğe göre ayarlanabilir */
    display: block; /* Altındaki olası boşluğu kaldırır */
}

.hakkimda-icerik { /* Sağ sütun (Biyografi) */
    flex: 2 1 60%;  /* Esneme payı:2 (daha fazla yer kaplasın), Küçülme payı:1, Temel genişlik: %60 */
    /* Alternatif olarak: flex-grow: 1; */
    /* padding: 0; Eski padding'i sıfırla, .entry-content'e verebiliriz */
}

.hakkimda-icerik .entry-header {
    /* Başlık gizli olduğu için özel stil gerekmeyebilir */
}

.hakkimda-icerik .entry-content {
    color: #dddddd;
    /* padding: 0 20px; Eski padding'i sıfırla, artık sütun kendi boşluğuna sahip olabilir */
}

.hakkimda-icerik .entry-content p {
    margin-top: 0; /* İlk paragrafın üst boşluğunu kaldırabiliriz */
    margin-bottom: 1.5em;
}

/* Küçük Ekranlar İçin (Tablet ve Altı) */
@media (max-width: 768px) {
    .hakkimda-sayfasi-container #main.site-main {
        flex-direction: column; /* Sütunları alt alta getir */
        gap: 20px; /* Dikeyde boşluk */
    }

    .hakkimda-rastgele-resim,
    .hakkimda-icerik {
        flex-basis: 100%; /* Tam genişlik kaplasınlar */
        max-width: 100%;
    }

    .hakkimda-rastgele-resim {
        text-align: center; /* Mobilde resmi tekrar ortalayabiliriz */
        margin-bottom: 20px; /* Resim ile yazı arası dikey boşluk */
    }
    .hakkimda-rastgele-resim img{
         max-height: 400px; /* Mobilde resim çok uzamasın */
    }
}

/*--------------------------------------------------------------
# Contact Form 7 Stilleri
--------------------------------------------------------------*/
.wpcf7-form { /* Formun genel sarmalayıcısı */
    /* max-width: 600px; /* Formun maksimum genişliği (isteğe bağlı) */
    /* margin: 0 auto; /* Formu ortalamak için (eğer max-width ayarlandıysa) */
}

.wpcf7-form p { /* Formdaki her bir satır (label ve input'u içeren paragraf) */
    margin-bottom: 15px;
}

.wpcf7-form label {
    display: block;
    margin-bottom: 5px;
    color: #cccccc; /* Etiket rengi */
    font-size: 18px; /* Etiket font boyutu (Dancing Script'e uygun) */
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea {
    width: 100%; /* Alanların tam genişlikte olmasını sağla */
    padding: 10px;
    border: 1px solid #444444;
    background-color: #1a1a1a;
    color: #dddddd;
    font-family: Arial, sans-serif; /* Form alanları için daha okunaklı standart bir font */
    font-size: 16px;
    box-sizing: border-box; /* Padding ve border genişliğe dahil edilsin */
}

.wpcf7-form textarea {
    min-height: 120px; /* Mesaj alanı için minimum yükseklik */
}

.wpcf7-form input[type="submit"] { /* Gönder butonu */
    background-color: #333333;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-family: 'Dancing Script', cursive; /* Buton için temamızın fontu */
    font-size: 20px;
    transition: background-color 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #555555;
}

/*--------------------------------------------------------------
# Contact Form 7 Stilleri
--------------------------------------------------------------*/
.wpcf7 { /* Contact Form 7'nin en dış sarmalayıcısı, genellikle shortcode bunu oluşturur */
    max-width: 700px; /* Formun sayfada kaplayacağı maksimum genişlik. Bu değeri değiştirebilirsin. */
    margin-left: auto;  /* Sol ve sağ kenar boşluğunu otomatik ayarla (ortalar) */
    margin-right: auto; /* Sol ve sağ kenar boşluğunu otomatik ayarla (ortalar) */
}

/* .wpcf7-form seçicisi <form> etiketinin kendisidir, istersen yukarıdaki kuralları
   bunun içine de taşıyabilirsin ama .wpcf7 genellikle daha genel bir kapsayıcıdır.
   Şimdilik .wpcf7'yi kullanalım. */

.wpcf7-form p { /* Formdaki her bir satır (label ve input'u içeren paragraf) */
    margin-bottom: 20px; /* Satırlar arası boşluğu biraz artıralım */
}

.wpcf7-form label {
    display: block;
    margin-bottom: 8px; /* Etiket ile input arası boşluğu biraz artıralım */
    color: #cccccc;
    font-size: 18px; /* Dancing Script'e uygun etiket font boyutu */
}

/* Diğer .wpcf7-form input, textarea, submit vb. stilleri aynı kalabilir... */
/* ... (önceki mesajdaki stiller) ... */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea {
    width: 100%;
    padding: 12px; /* Padding'i biraz artıralım */
    border: 1px solid #444444;
    background-color: #1a1a1a;
    color: #dddddd;
    font-family: Arial, sans-serif;
    font-size: 16px;
    box-sizing: border-box;
}

.wpcf7-form textarea {
    min-height: 150px; /* Yüksekliği biraz artıralım */
}

.wpcf7-form input[type="submit"] {
    background-color: #333333;
    color: #ffffff;
    padding: 12px 25px; /* Padding'i biraz artıralım */
    border: none;
    cursor: pointer;
    font-family: 'Dancing Script', cursive;
    font-size: 22px; /* Boyutu biraz artıralım */
    transition: background-color 0.3s ease;
    display: block; /* Butonun tam genişlik kaplamaması ve ortalanabilmesi için */
    margin: 20px auto 0 auto; /* Butonu kendi satırında ortala ve üstten boşluk ver */
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #555555;
}

/*--------------------------------------------------------------
# Contact Form 7 Stilleri
--------------------------------------------------------------*/
.wpcf7 { /* Contact Form 7'nin en dış sarmalayıcısı, genellikle shortcode bunu oluşturur */
    max-width: 700px; /* Formun sayfada kaplayacağı maksimum genişlik. Bu değeri değiştirebilirsin. */
    margin-left: auto;  /* Sol ve sağ kenar boşluğunu otomatik ayarla (ortalar) */
    margin-right: auto; /* Sol ve sağ kenar boşluğunu otomatik ayarla (ortalar) */
}

/* .wpcf7-form seçicisi <form> etiketinin kendisidir, istersen yukarıdaki kuralları
   bunun içine de taşıyabilirsin ama .wpcf7 genellikle daha genel bir kapsayıcıdır.
   Şimdilik .wpcf7'yi kullanalım. */

.wpcf7-form p { /* Formdaki her bir satır (label ve input'u içeren paragraf) */
    margin-bottom: 20px; /* Satırlar arası boşluğu biraz artıralım */
}

.wpcf7-form label {
    display: block;
    margin-bottom: 8px; /* Etiket ile input arası boşluğu biraz artıralım */
    color: #cccccc;
    font-size: 18px; /* Dancing Script'e uygun etiket font boyutu */
}

/* Diğer .wpcf7-form input, textarea, submit vb. stilleri aynı kalabilir... */
/* ... (önceki mesajdaki stiller) ... */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea {
    width: 100%;
    padding: 12px; /* Padding'i biraz artıralım */
    border: 1px solid #444444;
    background-color: #1a1a1a;
    color: #dddddd;
    font-family: Arial, sans-serif;
    font-size: 16px;
    box-sizing: border-box;
}

.wpcf7-form textarea {
    min-height: 150px; /* Yüksekliği biraz artıralım */
}

.wpcf7-form input[type="submit"] {
    background-color: #333333;
    color: #ffffff;
    padding: 12px 25px; /* Padding'i biraz artıralım */
    border: none;
    cursor: pointer;
    font-family: 'Dancing Script', cursive;
    font-size: 22px; /* Boyutu biraz artıralım */
    transition: background-color 0.3s ease;
    display: block; /* Butonun tam genişlik kaplamaması ve ortalanabilmesi için */
    margin: 20px auto 0 auto; /* Butonu kendi satırında ortala ve üstten boşluk ver */
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #555555;
}

/* Form gönderim mesajları için stiller (başarı, hata vb.) */
.wpcf7-response-output {
    border-width: 1px; /* Çerçeveyi inceltelim */
    border-style: solid;
    padding: 15px;
    margin-top: 25px; /* Üst boşluğu biraz artıralım */
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

.wpcf7-mail-sent-ok {
    border-color: #38761d; /* Koyu yeşil */
    color: #38761d;
    background-color: #d9ead3;
}

.wpcf7-mail-sent-ng,
.wpcf7-validation-errors {
    border-color: #cc0000; /* Koyu kırmızı */
    color: #cc0000;
    background-color: #f4cccc;
}
/*--------------------------------------------------------------
# Tekil Kitap Sayfası Stilleri
--------------------------------------------------------------*/
.single-kitap-container .entry-title { /* Kitap detay sayfasındaki ana başlık */
    text-align: center;
    font-size: 42px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.kitap-detay-content-wrapper { /* Kapak ve içeriği saran yeni flex container */
    display: flex;
    flex-wrap: wrap; /* Küçük ekranlar için alt satıra kaymayı sağlar */
    gap: 30px; /* Sütunlar arası boşluk */
    margin-bottom: 30px; /* Bu bölümden sonraki (yorumlar gibi) içerikle arasına boşluk */
}

.kitap-detay-kapak-column { /* Sol sütun - Kapak */
    flex: 1 1 300px; /* Esneklik ayarları: Büyüme:1, Küçülme:1, Temel Genişlik:300px */
    max-width: 35%; /* Maksimum genişlik (çok büyümesini engellemek için, isteğe bağlı) */
    /* Alternatif: flex-basis: 30%; */
}

.kitap-detay-kapak-column img {
    width: 100%; /* Kendi sütununa tam sığsın */
    height: auto;
    border: 1px solid #333;
    display: block; /* Altında fazladan boşluk olmasın */
}

.kitap-detay-icerik-column { /* Sağ sütun - İçerik */
    flex: 2 1 60%; /* Resme göre daha fazla yer kaplasın. Büyüme:2, Küçülme:1, Temel Genişlik:%60 */
    /* Alternatif: flex-grow: 1; */
}

.kitap-detay-icerik-column p:first-child {
    margin-top: 0; /* İçeriğin ilk paragrafının üst boşluğunu kaldır */
}

.kitap-etiketleri { /* Entry footer içindeki etiketler için */
    margin-top: 20px;
    font-size: 16px;
    font-family: Arial, sans-serif; /* Okunabilir standart font */
    color: #aaaaaa;
}
.kitap-etiketleri .etiket-baslik {
    color: #cccccc;
    /* font-family: 'Dancing Script', cursive; İstersen başlık fontunu kullanabilirsin */
}
.kitap-etiketleri a {
    color: #88aaff;
    margin-right: 5px;
}
.kitap-etiketleri a:hover {
    color: #aabbff;
}


/* Küçük Ekranlar İçin (Tablet ve Altı) */
@media (max-width: 768px) {
    .kitap-detay-content-wrapper {
        flex-direction: column; /* Sütunları alt alta getir */
    }

    .kitap-detay-kapak-column,
    .kitap-detay-icerik-column {
        flex-basis: 100%; /* Tam genişlik kaplasınlar */
        max-width: 100%;
    }

    .kitap-detay-kapak-column {
        margin-bottom: 20px; /* Resim ile yazı arası dikey boşluk */
        /* max-width: 70%; /* Mobilde resim biraz daha küçük olabilir, ortalanır */
        /* margin-left: auto; */
        /* margin-right: auto; */
    }
}

/* Yorum Alanı Stilleri (Bunlar aynı kalabilir veya düzenlenebilir) */
/* ... (Bir önceki adımdaki #comments, #respond vb. stilleri burada devam eder) ... */

/*--------------------------------------------------------------
# Yorum Alanı Stilleri (Temel Ayarlamalar)
--------------------------------------------------------------*/
#comments { /* Yorumların tamamını saran ana div */
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #333333; /* Yorumları içerikten ayırmak için çizgi */
}

#comments .comments-title,
#comments .comment-reply-title { /* "X Yorum" veya "Bir Cevap Yazın" başlıkları */
    font-size: 28px;
    color: #eeeeee;
    text-align: center;
    margin-bottom: 30px;
}

#comments ol.comment-list { /* Yorum listesi */
    list-style: none;
    padding: 0;
    margin: 0;
}

#comments ol.comment-list li.comment { /* Her bir yorum */
    padding: 20px;
    margin-bottom: 20px;
    background-color: #111111; /* Yorum arka planı */
    border: 1px solid #2b2b2b;
    border-radius: 4px; /* Köşeleri yuvarlat */
}
#comments ol.comment-list li.comment .comment-author img.avatar { /* Yorum yapanın avatarı */
    border-radius: 50%; /* Yuvarlak avatar */
    float: left;
    margin-right: 15px;
}
#comments ol.comment-list li.comment .comment-author .fn { /* Yorum yapanın adı */
    font-size: 20px;
    color: #efefef;
    font-weight: normal; /* Dancing Script'in kendi kalınlığı yeterli */
}
#comments ol.comment-list li.comment .comment-metadata a { /* Yorum tarihi/saati */
    font-size: 14px;
    color: #777777;
    font-family: Arial, sans-serif; /* Okunabilir standart font */
}
#comments ol.comment-list li.comment .comment-content p {
    font-size: 16px; /* Yorum metni */
    color: #cccccc;
    font-family: Arial, sans-serif; /* Okunabilir standart font */
    line-height: 1.6;
}
#comments ol.comment-list li.comment .reply a { /* Cevapla linki */
    font-size: 14px;
    color: #88aaff;
    font-family: Arial, sans-serif;
}

/* Yorum Formu Alanları */
#respond #commentform p.comment-form-comment textarea#comment {
    width: 100%;
    padding: 10px;
    border: 1px solid #444444;
    background-color: #1a1a1a;
    color: #dddddd;
    font-family: Arial, sans-serif;
    font-size: 16px;
    box-sizing: border-box;
    min-height: 120px;
}
#respond #commentform p.form-submit input#submit { /* Yorum gönder butonu */
    background-color: #333333;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-family: 'Dancing Script', cursive;
    font-size: 20px;
}
#respond #commentform p.form-submit input#submit:hover {
    background-color: #555555;
}
#respond #commentform p.comment-notes,
#respond #commentform p.comment-form-author label,
#respond #commentform p.comment-form-email label,
#respond #commentform p.comment-form-url label,
#respond #commentform p.comment-form-cookies-consent label {
    font-family: Arial, sans-serif; /* Form etiketleri ve notlar için okunaklı font */
    font-size: 15px;
    color: #aaaaaa;
}
#respond #commentform p.logged-in-as a { /* Giriş yapılmış kullanıcı bilgisi linkleri */
    color: #88aaff;
}
/*--------------------------------------------------------------
# Mailchimp Abonelik Formu Stilleri (Sol Alta Sabitlenmiş)
--------------------------------------------------------------*/
.footer-newsletter {
    position: fixed; /* Sayfada sabit kalsın */
    bottom: 20px;    /* Alt kenardan boşluk (sosyal ikonlarla aynı hizada) */
    left: 20px;      /* Sol kenardan boşluk */
    z-index: 1000;   /* Diğer elemanların üzerinde kalması için */
    padding: 0;      /* Kendi iç boşluğu olmasın, formun kendi boşlukları yeterli */
    background-color: transparent; /* Arka planı olmasın */
    border: none;    /* Çerçevesi olmasın */
    max-width: none; /* Genişlik kısıtlaması olmasın, içindeki forma göre şekillensin */
    margin: 0;       /* Dış boşluğu olmasın */
    text-align: left; /* İçeriği sola yasla */
}

/* Başlık ve açıklama paragrafları için stilleri silebiliriz veya gizleyebiliriz,
   çünkü HTML'den kaldırdık veya çok kısalttık. */
.footer-newsletter h4,
.footer-newsletter p.newsletter-description {
    display: none; /* Eğer HTML'de bıraktıysan gizle */
}

.footer-newsletter .mc4wp-form {
    padding: 0; /* Formun kendi iç sarmalayıcısının da padding'i olmasın */
    background-color: transparent;
    border: none;
    max-width: none; /* Formun genişliği içindeki elemanlara göre olsun */
    margin: 0;
}

.footer-newsletter .mc4wp-form form { /* Asıl <form> etiketini hedefle */
    display: flex; /* E-posta alanı ve butonu yan yana getir */
    align-items: center; /* Dikeyde ortala */
    gap: 6px; /* Elemanlar arası çok az boşluk */
}

.footer-newsletter .mc4wp-form input[type="email"] {
    flex-grow: 1; /* Esnek genişlik */
    padding: 8px 10px; /* Daha küçük iç boşluk */
    border: 1px solid #555555;
    background-color: #222222;
    color: #dddddd;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px; /* Daha küçük font */
    box-sizing: border-box;
    border-radius: 3px;
    line-height: normal;
    width: 180px; /* Sabit bir genişlik veya max-width verebiliriz */
                  /* Örneğin: max-width: 200px; */
}

.footer-newsletter .mc4wp-form input[type="submit"] {
    background-color: #777; /* Daha sade bir buton rengi */
    color: #fff;
    padding: 8px 12px; /* Daha küçük buton */
    border: none;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif; /* Buton için de okunaklı font */
    font-size: 13px; /* Daha küçük font */
    border-radius: 3px;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
    line-height: normal;
}

.footer-newsletter .mc4wp-form input[type="submit"]:hover {
    background-color: #999;
}

/* Form mesajları gizli kalsın veya çok minimal olsun */
.footer-newsletter .mc4wp-alert {
    display: none; /* Sabit bir alanda uzun mesajlar istenmeyebilir */
    /* Eğer gösterecekseniz, pozisyonunu ve stilini ayarlamanız gerekir */
}
/*--------------------------------------------------------------
# 404 Hata Sayfası Stilleri
--------------------------------------------------------------*/
.error-404-container {
    text-align: center; /* İçeriği ortala */
    padding-top: 50px;
    padding-bottom: 50px;
    /* flex-grow: 1; Zaten #primary.content-area için benzer bir kuralımız var */
    /* display: flex; Zaten #primary.content-area için benzer bir kuralımız var */
    /* flex-direction: column; Zaten #primary.content-area için benzer bir kuralımız var */
    /* justify-content: center; Zaten #primary.content-area için benzer bir kuralımız var */
    /* align-items: center; Zaten #primary.content-area için benzer bir kuralımız var */
}

.error-404 .page-header {
    margin-bottom: 30px;
}

.error-404 .page-title { /* "Oops! O sayfa bulunamıyor." başlığı */
    font-size: 60px; /* Büyük ve dikkat çekici */
    /* font-family: 'Dancing Script', cursive; Zaten h1'den miras alacak */
    color: #efefef;
    line-height: 1.2;
}

.error-404 .page-content {
    max-width: 600px; /* İçerik alanının maksimum genişliği */
    margin-left: auto;
    margin-right: auto;
}

.error-404 .page-content p {
    font-family: 'Open Sans', sans-serif; /* Açıklama metni için okunaklı font */
    font-size: 18px;
    color: #cccccc;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* WordPress Arama Formu (get_search_form() ile gelen) için Temel Stiller */
.error-404 .search-form {
    margin-bottom: 30px;
    display: flex; /* Arama alanı ve butonu yan yana getirmek için */
    border: 1px solid #444;
    border-radius: 3px;
    overflow: hidden; /* Köşeleri yuvarlatılmış göstermek için */
}

.error-404 .search-form label { /* Arama etiketi genellikle gizlidir */
    display: none;
}

.error-404 .search-field { /* Arama giriş alanı */
    flex-grow: 1; /* Alanın mevcut boşluğu doldurmasını sağla */
    padding: 12px 15px;
    border: none;
    background-color: #222222;
    color: #dddddd;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}
.error-404 .search-field:focus {
    outline: none;
    background-color: #333333;
}

.error-404 .search-submit { /* Arama butonu */
    padding: 10px 20px;
    border: none;
    background-color: #c29947; /* Bülten butonuyla aynı renk olabilir */
    color: #ffffff;
    cursor: pointer;
    font-family: 'Dancing Script', cursive;
    font-size: 18px;
    transition: background-color 0.3s ease;
}
.error-404 .search-submit:hover {
    background-color: #d4aa50;
}


.error-404-links {
    margin-top: 30px;
}

.button-404 { /* Ana sayfaya dönüş butonu */
    display: inline-block;
    padding: 10px 25px;
    background-color: #555555;
    color: #ffffff;
    text-decoration: none;
    border-radius: 3px;
    font-family: 'Dancing Script', cursive;
    font-size: 20px;
    transition: background-color 0.3s ease;
}

.button-404:hover {
    background-color: #777777;
}

/* Eğer son yazılar widget'ını eklersen onun için de stil ekleyebilirsin */
.error-404 .widget_recent_entries {
    margin-top: 40px;
    text-align: left; /* Widget içeriğini sola yasla */
}
.error-404 .widget_recent_entries ul {
    list-style: none;
    padding-left: 0;
}
.error-404 .widget_recent_entries ul li a {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}