/* Görsellerin genel stili */
.kitap-zoom img {
	transition: transform .3s ease;
/* Geçiş hızı ve yumuşaklığı */
	cursor: pointer;
}

/* Mouse üzerine geldiğinde (Hover) */
.kitap-zoom img:hover {
	transform: scale(1.1);
/* %10 büyütme */
	z-index: 10;
/* Üstte görünmesini sağlar */
	position: relative;
}

@media screen and (min-width: 50em) {
    .header-image, .site-header {
        min-height: 70vh !important; /* Mevcut 87.5vh değerini 40vh yaparak boyutu yarı yarıya düşürdük */
    }
}

/* Logo ve Başlık Kapsayıcısını Ortalama */
.site-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    float: none !important; /* Varsa sola yaslamayı kaldırır */
}

/* Logoyu Ortalama */
.custom-logo-link {
    display: inline-block;
    margin-bottom: 10px;
}

/* Site Başlığı ve Sloganı Ortalama */
.site-title, .site-description {
    float: none !important;
    display: block;
    width: 100%;
}

/* Header alanındaki diğer elemanların (Search gibi) yerleşimini bozmamak için */
.header-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 1. Karanlık Perde Ayarı */
.focus-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85); /* %85 karanlık */
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Çok akıcı geçiş */
    z-index: 9998; /* Sidebar ve Footer'dan daha yüksek olmalı */
    pointer-events: none;
}

/* 2. Sidebar ve Footer'ı Arkada Tut */
/* Bu sınıflar genel WordPress sınıflarıdır */
#secondary, .sidebar, footer, .site-footer {
    position: relative;
    z-index: 1; /* Perdenin altında kalmaları için düşük değer */
}

/* 3. Sadece Üst Menüyü Öne Çıkar */
.menu-item {
    position: relative;
    z-index: 9999 !important; /* Perdenin bile üstünde */
    transition: all 0.4s ease;
}


	
}
/* Kitap Kapsayıcı Alanı - Boyutu buradan yönetiyoruz */
.book-cover-wrapper {
    position: relative;
    width: 250px; /* İstediğin genişliğe göre burayı değiştirebilirsin (Örn: 200px) */
    margin: 20px 0;
    overflow: hidden;
    border-radius: 8px;
    line-height: 0; /* Alttaki boşluk sızıntısını önler */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Kitap Kapağı Görseli */
.book-cover {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.5s ease;
}

/* Karartma Katmanı */
.book-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Biraz daha koyu karartma */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

/* Hover Efektleri */
.book-cover-wrapper:hover .book-overlay {
    opacity: 1;
    visibility: visible;
}

.book-cover-wrapper:hover .book-cover {
    transform: scale(1.05);
    filter: blur(2px) brightness(0.6); /* Hafif flulaştırma odaklanmayı artırır */
}

/* Download Butonu */
.overlay-download-btn {
    background-color: #ffffff;
    color: #000000 !important;
    padding: 10px 20px;
    font-size: 14px;
    text-decoration: none !important;
    font-weight: bold;
    border-radius: 4px;
    transform: translateY(15px);
    transition: all 0.4s ease;
}

.book-cover-wrapper:hover .overlay-download-btn {
    transform: translateY(0);
}

/* Sayfa yüklendiğinde animasyon başlasın */
.mehmed-section img {
    animation: slideRight 1.5s ease-out forwards;
}

.mehmed-section p {
    animation: fadeIn 2s ease-in forwards;
}

/* Sağa kayma efekti */
@keyframes slideRight {
    0% { transform: translateX(-50px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Yazının yavaşça gelmesi */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
/* Genel Hizalama */
.book-container {
    width: 180px; /* Kitap boyutu */
    margin: 20px auto;
    text-align: center;
}

/* Kapak ve Overlay Katmanı */
.book-cover-wrapper {
    position: relative;
    width: 100%;
    line-height: 0;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Hafif derinlik gölgesi */
    transition: transform 0.3s ease;
}

.book-cover {
    width: 100%;
    height: auto;
    display: block;
    transition: filter 0.4s ease;
}

/* Hover Yapınca Kitap Kararsın */
.book-cover-wrapper:hover .book-cover {
    filter: brightness(0.3);
}

/* Download Butonu Katmanı */
.book-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.book-cover-wrapper:hover .book-overlay {
    opacity: 1;
    visibility: visible;
}

/* Estetik Kitap İsmi (Her zaman görünür) */
.book-info {
    padding-top: 15px;
}

.book-title {
    font-family: 'Georgia', serif; /* Daha edebi bir font */
    font-size: 14px;
    color: #2c3e50;
    margin: 0;
    font-weight: 600;
    line-height: 1.4;
}

/* Download Butonu Tasarımı */
.overlay-download-btn {
    background: #ffffff;
    color: #000000 !important;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none !important;
    border-radius: 4px;
    transition: background 0.3s;
}

.overlay-download-btn:hover {
    background: #f0f0f0;
}

/* Menüyü ortalar ve sağdaki boşluğu dengeler */
#header-menu {
    display: flex;
    justify-content: center;
    width: 1000%;
}
/* Ana sayfadaki büyük başlığı gizler */
.home .entry-title {
    display: none !important;
}
/* Sadece ana sayfadaki (home) genişlik kısıtlamalarını kaldırır */
.home .site-content .ast-container, 
.home .container, 
.home .entry-content,
.home .site-main {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* İçeriğin ekranın en kenarına yapışmaması için hafif bir iç boşluk */
.home .intellectual-hero, 
.home .split-container {
    max-width: 1600px; /* Çok aşırı yayılmayı önleyen güvenli sınır */
    margin: 0 auto !important;
    padding: 60px 5% !important;
    display: flex;
    gap: 80px;
}

/* Dikey kayan yazıları (T H E A) düzeltmek için sütunları zorla genişletir */
.home .split-side {
    flex: 1 !important;
    min-width: 300px;
}

/* Dağ fotoğrafının üzerindeki beyaz puslu katmanı sadece ana sayfada kaldırır */
.home .wp-block-cover__background {
    opacity: 0 !important;
}
/* 1. Sadece Ana Sayfada Tüm Genişlik Kısıtlamalarını Kaldır */
.home .site-content .ast-container, 
.home .container, 
.home .entry-content,
.home .site-main,
.home article {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Dağ Fotoğrafındaki Beyazlığı (Opacity) Kaldır */
.home .wp-block-cover__background, 
.home .wp-block-cover__gradient-background {
    opacity: 0 !important; /* Fotoğrafı orijinal netliğine döndürür */
}

.home .wp-block-cover {
    min-height: 500px !important; /* Fotoğrafın çok daralmasını önler */
}

/* 3. İçerik Alanını Ferahlat ve Dikey Kaymaları Düzelt */
.home .intellectual-hero {
    padding: 80px 5% !important;
}

.home .split-container {
    display: flex;
    max-width: 1400px; /* İçeriğin aşırı yayılmasını önleyen güvenli sınır */
    margin: 0 auto !important;
    gap: 100px; /* Podcast ve Yazı arasındaki boşluğu açar */
}

/* 4. "MAIN PAGE" Başlığını Sayfadan Kaldır */
.home .entry-title {
    display: none !important;
}
/* 1. Arka plandaki puslu/beyaz perdeyi tamamen yok et */
.home .wp-block-cover-dim, 
.home .wp-block-cover__background, 
.home .wp-block-cover__gradient-background,
.home .wp-block-cover-image-text-after-page-title {
    background-color: transparent !important;
    opacity: 0 !important;
    display: none !important;
}

/* 2. Fotoğrafın orijinal keskinliğini ve renklerini geri getir */
.home .wp-block-cover img {
    filter: none !important;
    opacity: 1 !important;
    object-fit: cover !important;
}

/* 3. Sayfanın "SAYFA" gibi davranmasını engelle (Genişlik Kısıtlamasını Kır) */
.home .site-content .ast-container, 
.home .container, 
.home .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* 4. "MAIN PAGE" yazısını ve üstündeki boşluğu sil */
.home .entry-header, 
.home .entry-title {
    display: none !important;
}
/* Ana sayfa genişliğini 'World Classics' hariç tüm sayfalara uygular */
body:not(.page-id-205):not(.home) .site-content, 
body:not(.page-id-205):not(.home) .container {
    max-width: 600% !important; /* Veya ana sayfanızda kaç piksel ise, örn: 1400px */
    padding-left: 0;
    padding-right: 0;
}

/* === WORLD CLASSICS (ID 205) TAM GENİŞLİK KİLİT KIRMA === */

/* 1. Tüm kapsayıcıların genişlik sınırlarını kaldırıyoruz */
body.page-id-205 .site-content,
body.page-id-205 #primary,
body.page-id-205 .site-main,
body.page-id-205 article,
body.page-id-205 .entry-content, 
body.page-id-205 .entry-header {
    max-width: 100% !important;  /* Piksel sınırını (800px vb.) iptal et */
    width: 100% !important;      /* Kutuyu tam doldur */
    float: none !important;      /* Sola yaslanmayı iptal et */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. Sayfanın kenarlarına yapışmaması için ana çerçeveyi %90'a çekiyoruz */
body.page-id-205 .site-content {
    width: 90% !important; 
    margin: 0 auto !important; /* Ekranın tam ortasına al */
}

/* 3. Kitapların yan yana dizilmesini zorla (Flexbox) */
/* NOT: Eğer sayfa başlığın kayarsa bu kısmı silip tekrar haber ver */
body.page-id-205 .entry-content {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Kitapları tam ortada topla */
    gap: 30px; /* Kitaplar arası boşluk */
}

/* 4. Sidebar (Yan Menü) varsa onu gizle ve yer kaplamasını engelle */
body.page-id-205 #secondary {
    display: none !important;
}
/* Kitapları kutunun içinde hizalamak için */
body.page-id-205 .site-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* İçeriklerin çok fazla kenara yapışmaması için opsiyonel iç boşluk */
body:not(.page-id-123) .entry-content {
    max-width: 1200px; /* Okunabilirlik için metin alanını kısıtlayabilirsiniz */
    margin: 0 auto;
}
/* Textbook temasındaki harf kaymalarını zorla düzeltir */
.custom-book-page h1, 
.custom-book-page div, 
.custom-book-page p {
    line-height: 1.2 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    display: block !important;
}

.custom-book-page .hero {
    display: flex !important;
    flex-direction: row !important;
}

@media (max-width: 768px) {
    .custom-book-page .hero {
        flex-direction: column !important;
    }
}
/* 1. Dağlı alanın devasa iç boşluğunu daraltır */
#masthead.site-header {
    padding: 10px 0 !important; /* Üst ve alt boşluğu 20px'den 10px'e indirdik */
    min-height: auto !important;
}

/* 2. Dağ görselinin (arka plan) kapsayıcısını daraltır */
.header-image-container, 
.custom-header-image {
    max-height: 250px !important; /* Dağın göründüğü şeridi 250px ile sınırladık */
    overflow: hidden !important;
}

/* 3. Logo (Kurt) ve Menü arasındaki boşluğu sıfıra yaklaştırır */
.site-branding {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.main-navigation {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 4. Kitap içeriğinin başladığı beyaz alanı yukarı çeker */
#content.site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 5. Scroll (kaydırma) bozulmasını engellemek için güvenlik kilidi */
html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
}
/* 5. Hover Yapılan Menü Elemanını Büyüt ve Aydınlat */
.menu-item:hover {
    transform: scale(1.1); /* %10 büyüme */
    filter: brightness(1.3); /* Yazıyı parlatır */
} /* <--- BU KAPATMA PARANTEZİ EKSİKTİ */

/* 1. Üzerine gelindiğinde (hover) oluşan çizgileri kapat */
.menu-item:hover > a, 
.menu-item a:hover {
    border-bottom: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
/* 1. Uzerini cizdigin kucuk yazi (Breadcrumb) kismini gizler */
.breadcrumb, 
.site-breadcrumb, 
.yoast-breadcrumb, 
.rank-math-breadcrumb,
.page-header-title-area span { 
    display: none !important; 
}

/* 2. "WORLD CLASSICS" basligini tam ortalar */
.page-title, 
.entry-title, 
h1.page-title,
.page-header h1 {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* Eger siyah seridin icindeki tum icerigin ortalanmasini istersen bunu da ekle */
.page-header-content,
.page-title-bar {
    text-align: center !important;
}
/* İsminde 'breadcrumb' geçen tüm öğeleri bul ve gizle */
div[class*="breadcrumb"],
nav[class*="breadcrumb"],
span[class*="breadcrumb"],
.page-header .text-small, 
.page-header ul,
.page-header ol {
    display: none !important;
}
/* SEARCH BUTONUNU SAĞ ÜST KÖŞEYE TAŞI */
.site-search-toggle,
.search-toggle,
.header-search-icon {
    position: absolute !important;
    top: 30px !important; /* Yukarıdan mesafe */
    right: 40px !important; /* Sağdan mesafe */
    z-index: 1000 !important;
    
    /* Biraz da stil verelim */
    background: rgba(255, 255, 255, 0.5) !important;
    padding: 10px !important;
    border-radius: 50% !important; /* Yuvarlak olsun */
}
/* --- STOIC PATH CSS (BURAYA YAPIŞTIR) --- */
.mz-wrapper {
    background-color: #fcfcfc;
    background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
    background-size: 20px 20px;
    font-family: 'Georgia', serif;
    color: #333;
    padding: 60px 20px;
    border-radius: 8px;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.mz-hero {
    text-align: center; margin-bottom: 60px; position: relative; z-index: 2;
}
.mz-hero img {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
    border: 4px solid #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.mz-title {
    font-size: 2.2rem; margin-top: 20px; letter-spacing: 2px;
    text-transform: uppercase; color: #111;
}

.mz-timeline {
    position: relative; max-width: 800px; margin: 0 auto; padding-bottom: 50px;
}
.mz-timeline::after {
    content: ''; position: absolute; width: 2px; background-color: #e0e0e0;
    top: 0; bottom: 0; left: 50%; margin-left: -1px; z-index: 0;
}

.mz-box {
    padding: 10px 40px; position: relative; width: 50%; box-sizing: border-box;
    transition: all 0.5s ease;
}
.mz-left { left: 0; text-align: right; }
.mz-right { left: 50%; text-align: left; }
.mz-box::after {
    content: ''; position: absolute; width: 14px; height: 14px; right: -7px;
    background-color: #fff; border: 3px solid #ccc; top: 25px;
    border-radius: 50%; z-index: 1; transition: all 0.5s ease;
}
.mz-right::after { left: -7px; }

.active-step::after, .completed-step::after {
    border-color: #333; background-color: #333;
}

.mz-card {
    padding: 30px; background-color: #fff; position: relative; border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.6s ease;
    z-index: 5;
}

.mz-locked .mz-card {
    filter: blur(5px) grayscale(100%); opacity: 0.5; pointer-events: none;
    transform: scale(0.98); user-select: none;
}
.mz-locked::before {
    content: '🔒'; position: absolute; top: 40px; font-size: 2rem; z-index: 10;
}
.mz-left.mz-locked::before { right: 10px; }
.mz-right.mz-locked::before { left: 10px; }

.active-step .mz-card {
    filter: blur(0); opacity: 1; transform: scale(1); border-left: 5px solid #333;
}
.completed-step .mz-card {
    opacity: 0.7; border-left: 5px solid #aaa;
}

.mz-step-label {
    display: inline-block; padding: 4px 8px; background: #f4f4f4; color: #888;
    font-size: 0.7rem; font-weight: bold; letter-spacing: 1px; margin-bottom: 10px;
}
.mz-card h2 { margin: 0 0 10px 0; font-size: 1.3rem; }
.mz-card p { font-size: 0.95rem; line-height: 1.6; color: #555; }

.mz-btn {
    display: inline-block; padding: 12px 25px; border: 2px solid #333;
    background: #333; color: #fff; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 1px; cursor: pointer;
    font-weight: bold; margin-top: 10px;
    position: relative; z-index: 9999; pointer-events: auto;
}
.mz-btn:hover { background: #555; border-color: #555; }

.mz-badge { display: none; color: #27ae60; font-weight: bold; margin-top: 10px; }
.completed-step .mz-btn { display: none; }
.completed-step .mz-badge { display: inline-block; }

@media screen and (max-width: 600px) {
    .mz-timeline::after { left: 30px; }
    .mz-box { width: 100%; padding-left: 60px; padding-right: 10px; }
    .mz-box::after { left: 22px; }
    .mz-left, .mz-right { left: 0; text-align: left; }
    .mz-left.mz-locked::before, .mz-right.mz-locked::before { left: 50%; }
}

/* TÜM SİTEDE menü şeridini gizle (Logo kalır) */
.main-navigation {
    display: none !important;
}
/* Sadece bu ID'lere sahip sayfalarda Logoyu (Header'ı) komple gizle */
.page-id-1045 #masthead,
.page-id-1060 #masthead,
.page-id-1060 #masthead
{
    display: none !important;
}
#masthead, #header, .site-header {
    display: none !important;
}

/* ==================================================
   TÜM SİTEDE (GLOBAL) KENARLIKLARI SİL & TAM GENİŞLİK YAP
   ================================================== */

/* 1. Tüm ana kapsayıcıların sınırlarını ve çizgilerini kaldır */
body, 
#page, 
.site, 
.site-content, 
.ast-container, 
.container,
.site-main,
.content-area,
div[class*="ast-container"] {
    border: none !important;       /* Gri çizgileri siler */
    box-shadow: none !important;   /* Gölgeleri siler */
    background: transparent !important;
    max-width: 100% !important;    /* Genişliği %100 yapar */
    width: 100% !important;
    margin-left: 0 !important;     /* Yan boşlukları sıfırlar */
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. İç sayfaların (Makaleler/Yazılar) etrafındaki kutu görünümünü sil */
.ast-separate-container .ast-article-post, 
.ast-separate-container .ast-article-single,
.ast-separate-container .site-main {
    border: none !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* 3. Varsa yan boşlukları (Sidebar/Kenar Çubuğu) iptal et ve tam ekran yap */
#primary {
    width: 100% !important;
    max-width: 100% !important;
}
/* ==================================================
   TÜM SİTEDE (GLOBAL) KENARLIKLARI SİL & TAM GENİŞLİK YAP
   ================================================== */

/* 1. Tüm ana kapsayıcıların sınırlarını ve çizgilerini kaldır */
body, 
#page, 
.site, 
.site-content, 
.ast-container, 
.container,
.site-main,
.content-area,
div[class*="ast-container"] {
    border: none !important;       /* Gri çizgileri siler */
    box-shadow: none !important;   /* Gölgeleri siler */
    background: transparent !important;
    max-width: 100% !important;    /* Genişliği %100 yapar */
    width: 100% !important;
    margin-left: 0 !important;     /* Yan boşlukları sıfırlar */
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. İç sayfaların (Makaleler/Yazılar) etrafındaki kutu görünümünü sil */
.ast-separate-container .ast-article-post, 
.ast-separate-container .ast-article-single,
.ast-separate-container .site-main {
    border: none !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* 3. Varsa yan boşlukları (Sidebar/Kenar Çubuğu) iptal et ve tam ekran yap */
#primary {
    width: 100% !important;
    max-width: 100% !important;
}
/* Sayfaların en üstündeki Başlık kısmını (Örn: Fatih Sultan Mehmet yazısını) gizler */
.entry-header, 
.entry-title, 
.page-header {
    display: none !important;
}
/* Footer alanindaki sadece ilk widget'i (no title yazan kismi) gizler */
#footer-widgets .widget:first-child {
    display: none !important;
}
/* --- FOOTER DÜZELTME VE GECİKTİRME KODU --- */

    /* 1. Sayfa ve Root elementinin boyunu ekran kadar yap (Footer yukarı kaçmasın) */
    html, body, #root {
        height: 100%;
        min-height: 100vh;
    }

    /* Root içindeki yapının esnek olmasını sağla */
    #root {
        display: flex;
        flex-direction: column;
    }

    /* React ana kapsayıcısını büyüt ki Footer'ı aşağı itsin */
    #root > div {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* 2. Footer'a Gecikmeli ve Animasyonlu Giriş */
    .noir-footer-stage {
        opacity: 0; /* Başlangıçta tamamen görünmez olsun */
        /* 1 saniyelik bir animasyonla gelsin, ama... */
        animation: footerSmoothEntry 1.2s ease-out forwards; 
        /* ...sayfa açıldıktan 0.8 saniye sonra başlasın (İçerik yüklenene kadar bekle) */
        animation-delay: 0.8s; 
    }

    /* Animasyon Tanımı: Aşağıdan yukarı süzülerek belirme */
    @keyframes footerSmoothEntry {
        0% {
            opacity: 0;
            transform: translateY(30px); /* Hafif aşağıdan başla */
        }
        100% {
            opacity: 1;
            transform: translateY(0); /* Yerine otur */
        }
    }