/*
Theme Name: Sedat Bornovalı Teması
Author: Siz
Description: Sedat Bornovalı için özel olarak hazırlanan WordPress teması.
Version: 3.8
*/

/* =========================
   0. Değişkenler & Reset
   ========================= */
:root{
    --bg-color:#ffffff;
    --text-color:#333;
    --primary-color:#003366;
    --font-heading:'Cardo', serif;
    --font-body:'Lato', sans-serif;
}

html,body{
    margin:0;
    padding:0;
    font-family:var(--font-body);
    background-color:#f5f5f5;
    color:var(--text-color);
    box-sizing:border-box;
}
*,*::before,*::after{ box-sizing:inherit; }

a{ text-decoration:none; color:inherit; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-heading); margin:0; }
.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); border:0;
}

/* =========================
   1. Header (Desktop)
   ========================= */
.site-header-inner{
    padding:10px 4%;
    width:100%;
    position:relative;
    z-index:1000;
    background:#fff;
    border-bottom:1px solid #e0e0e0;
}
.desktop-header .header-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1200px;
    margin:0 auto;
}
.desktop-header .header-group-left{ display:flex; align-items:center; gap:1.5rem; }
.desktop-header .logo-wrapper .logo h1{
    font-size:1.2rem; font-weight:700; color:var(--primary-color); margin:0;
}
.desktop-header .lang-switcher{ font-size:.9em; font-weight:700; }
.desktop-header .lang-switcher a:hover{ color:var(--primary-color); }

.desktop-header .social-media-icons{
    display:flex; align-items:center; gap:.8rem;
}
.desktop-header .social-media-icons a{
    color:var(--text-color); transition:color .3s ease; display:flex; align-items:center;
}
.desktop-header .social-media-icons a:hover{ color:var(--primary-color); }

.desktop-header .social-media-icons svg{
    width:24px; height:24px; fill:currentColor; display:block;
}

.desktop-header .header-group-right{ display:flex; align-items:center; }
.desktop-header .main-navigation{
    display:flex; list-style:none; margin:0; padding:0; gap:1.5rem;
}
.desktop-header .main-navigation a{
    color:var(--text-color); font-weight:700;
}
.desktop-header .main-navigation a:hover,
.desktop-header .main-navigation .current-menu-item a{
    color:var(--primary-color);
}

/* =========================
   2. Header (Mobile)
   ========================= */
.mobile-header{ display:none; }

.mobile-menu-button{
    display:none;
    background:none; border:none; padding:0;
    cursor:pointer; z-index:1001;
}
.mobile-menu-button .line{
    display:block; width:25px; height:3px; background:#333; margin:5px 0;
    transition:all .3s ease;
}

/* =========================
   3. Açılır Navigasyon Paneli
   ========================= */
.site-nav{
    display:flex; flex-direction:column; align-items:center;
    position:fixed; top:0; right:0;
    width:85%; max-width:320px; height:100vh;
    padding-top:80px; background:#fff;
    box-shadow:-5px 0 15px rgba(0,0,0,.15);
    z-index:1001; overflow-y:auto;
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.23,1,.32,1);
    visibility:hidden;
}
.site-nav.active{
    transform:translateX(0);
    visibility:visible;
}
.site-nav .main-navigation{
    flex-direction:column; width:100%; text-align:center; gap:0;
}
.site-nav .main-navigation li{ width:100%; }
.site-nav .main-navigation a{
    display:block; padding:1.2rem 1.5rem; font-size:1.2rem; width:100%;
    border-top:1px solid #f0f0f0;
}
.site-nav .main-navigation li:first-child a{ border-top:none; }

.mobile-only-extra-items{
    display:flex; flex-direction:column; width:100%;
    gap:1.5rem; padding:1.5rem 0; margin-top:1rem;
    border-top:1px solid #f0f0f0;
}
.mobile-only-extra-items .lang-switcher{
    display:flex; justify-content:center; gap:1rem;
    font-size:1.1em; font-weight:bold;
}
.mobile-only-extra-items .lang-switcher a:not(:last-child)::after{
    content:'|'; margin-left:1rem; font-weight:normal;
}
.mobile-only-extra-items .social-media-icons{
    justify-content:center; gap:1.2rem; display:flex; align-items:center;
}
.mobile-only-extra-items .social-media-icons svg{
    width:22px; height:22px; fill:currentColor; display:block;
}

/* =========================
   4. Sosyal ikon genel (desktop + mobile)
   ========================= */
.social-media-icons{
    display:flex; align-items:center; gap:2rem;
}
.social-media-icons a{
    display:flex; align-items:center;
}
.social-media-icons svg{
    width:24px; height:24px; display:block; fill:currentColor;
}

/* Wikipedia W ince ayar */
.icon-wikipedia text{
    font-size:26px; /* ihtiyaca göre 24–28 */
    font-weight:700;
    transform:translateY(1px); /* 0–2px arası dene */
}

/* =========================
   5. Ana Grid
   ========================= */
.main-grid{
    display:grid; grid-template-columns:repeat(4,1fr);
    min-height:calc(100vh - 61px);
}
.grid-item{
    position:relative; display:flex; align-items:flex-end; justify-content:center;
    overflow:hidden; transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.grid-item-bg{
    position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;
    object-fit:cover; transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.grid-item:hover .grid-item-bg{ transform:scale(1.05); }
.grid-item::after{
    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
    background:linear-gradient(to top, rgba(0,0,0,.7), transparent 50%);
    z-index:1;
}
.item-content{
    position:relative; z-index:2; padding:40px 20px; text-align:center; color:#fff;
    transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.grid-item:hover .item-content{ transform:translateY(-10px); }
.item-content h2{
    font-size:2.4rem; font-weight:700; text-shadow:1px 1px 5px rgba(0,0,0,.6);
}

/* =========================
   6. Arşiv / Sayfa Türleri
   ========================= */
.archive-main-wrapper,.page-content{
    max-width:1200px; margin:0 auto; padding:4rem;
}
.archive-header{
    text-align:center; margin-bottom:3rem; padding-bottom:1.5rem; border-bottom:2px solid var(--primary-color);
}
.archive-header h1{ font-size:3rem; }

.no-books-found,.no-media-found,.no-posts-found{
    text-align:center; font-size:1.2rem; padding:3rem 0;
}

/* Hakkımda */
.page-template-page-hakkimda .page-title-container{ text-align:center; margin-bottom:3rem; }
.page-template-page-hakkimda .about-section{ display:flex; gap:3rem; align-items:flex-start; }
.page-template-page-hakkimda .about-image{ flex:0 0 30%; }
.page-template-page-hakkimda .about-image img{ width:100%; height:auto; }
.page-template-page-hakkimda .about-text{ flex:1; }

/* Kitaplar / Medya / Blog kartları */
.book-archive-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:2.5rem;
}
.book-item{
    display:flex; flex-direction:column; justify-content:space-between;
    background:#fff; padding:1rem; box-shadow:0 5px 20px rgba(0,0,0,.08);
    transition:transform .3s ease, box-shadow .3s ease; text-align:center;
}
.book-item:hover{ transform:translateY(-10px); box-shadow:0 8px 25px rgba(0,0,0,.15); }
.book-cover{ margin-bottom:1rem; }
.book-cover img{ width:100%; height:auto; display:block; max-width:200px; margin:0 auto; }
.book-title{ font-size:1.1rem; font-weight:700; color:#666; transition:color .3s ease; line-height:1.4; }
.book-item:hover .book-title{ color:var(--primary-color); }

.media-archive-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
}
.media-card{
    display:flex; flex-direction:column; background:#fff; border:1px solid #e9e9e9;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
    transition:box-shadow .3s ease, transform .3s ease; overflow:hidden;
}
.media-card:hover{ box-shadow:0 5px 20px rgba(0,0,0,.1); transform:translateY(-5px); }
.media-card-image{ width:100%; height:200px; background:#f5f5f5; }
.media-card-image img{ width:100%; height:100%; object-fit:cover; }
.media-card-content{ padding:1.5rem; display:flex; flex-direction:column; flex-grow:1; }
.media-card-title{ font-size:1.3rem; margin-bottom:.5rem; }
.media-card-meta{ font-size:.8rem; color:#888; margin-bottom:1rem; order:-1; }
.media-card-meta .media-date::before{ content:' | '; margin:0 .5em; }
.media-card-excerpt{ color:#666; font-size:.9rem; flex-grow:1; }

.post-archive-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(350px,1fr)); gap:2rem;
}
.post-card{
    background:#fff; border:1px solid #e9e9e9; box-shadow:0 3px 10px rgba(0,0,0,.05);
    display:flex; flex-direction:column;
}
.post-card-image a{ display:block; height:200px; }
.post-card-image img{ width:100%; height:100%; object-fit:cover; }
.post-card-content{ padding:1.5rem; display:flex; flex-direction:column; flex-grow:1; }
.post-card-header{ margin-bottom:1rem; }
.post-card-meta{ font-size:.8rem; color:#888; margin-bottom:.5rem; }
.post-card-meta .post-card-date::before{ content:' | '; margin:0 .5em; }
.post-card-title{ font-size:1.4rem; line-height:1.3; }
.post-card-title a:hover{ color:var(--primary-color); }
.post-card-excerpt{ color:#666; font-size:.95rem; flex-grow:1; }
.post-card-footer{ margin-top:1rem; }
.read-more-link{ font-weight:bold; color:var(--primary-color); }

/* =========================
   7. Responsive
   ========================= */
@media (max-width:900px){
    .desktop-header{ display:none !important; }
    .mobile-header{
        display:flex !important; justify-content:space-between; align-items:center; width:100%;
    }
    .mobile-header .logo-wrapper .logo h1{
        font-size:1.2rem; font-weight:700; color:var(--primary-color); margin:0;
    }

    .mobile-menu-button{
        display:block; padding:10px; width:40px; height:40px; position:relative;
    }
    .mobile-menu-button .line{
        width:24px; height:2px; background:var(--text-color); margin:5px auto;
    }
    .mobile-menu-button.active .line:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .mobile-menu-button.active .line:nth-child(2){ opacity:0; }
    .mobile-menu-button.active .line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    .main-grid{ display:block; }
    .grid-item{ height:50vh; min-height:350px; }

    .media-archive-grid{ grid-template-columns:repeat(2,1fr); }
    .page-template-page-hakkimda .about-section{ flex-direction:column; }
}

@media (max-width:600px){
    .media-archive-grid, .post-archive-grid{ grid-template-columns:1fr; }
    .archive-main-wrapper, .page-content{ padding:2rem 1.5rem; }
    .archive-header h1{ font-size:2.2rem; }
}