/*
Theme Name: Sade Mobil Tema
Description: Modern Grid Ana Sayfa ve Ferah Makale Tasarımı
Version: 2.1
*/

/* 1. Genel Temel Ayarlar */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background-color: #DAD6BC !important; /* İstediğiniz dış renk */
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; background-color: #DAD6BC; color: #333; }
.container { max-width: 1000px; width: 90%; margin: 0 auto; padding: 5px 0; }

/* 2. Header & Logo */
header { display: flex; flex-direction: column; align-items: center; margin-bottom: 5px; }
.logo { max-width: 200px; margin-bottom: 5px; }
.logo img { width: 100%; height: auto; }

/* 3. Menü (Mobil Uyumlu) */
.menu-toggle { width: 100%; padding: 15px; background: #EEEEE0; color: #000; border: none; cursor: pointer; border-radius: 5px; margin-bottom: 10px; }
.main-menu { display: none; width: 100%; }
.main-menu.active { display: block; }
.main-menu ul { list-style: none; display: flex; flex-direction: column; background: #fff; border: 1px solid #ddd; border-radius: 5px; }
.main-menu a { display: block; padding: 15px; border-bottom: 1px solid #eee; text-decoration: none; color: #333; font-weight: bold; }

/* 4. Ana Sayfa Grid (index.php ve category.php için) */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.post-card { background: #EEEEE0; border-radius: 12px; overflow: hidden; border: 1px solid #eee; transition: 0.3s; }
.post-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.post-thumbnail img { width: 100%; height: 220px; object-fit: cover; display: block; }
.post-content { padding: 7px; }
.post-content h2 { font-size: 1.2rem; margin-bottom: 10px; }
.post-content h2 a { color: #222; text-decoration: none; }

/* 5. Tekil Sayfa Yapısı (single.php - Yapıyı bozmadık, stili güçlendirdik) */
.single-post { background: #DAD6BC; padding: 40px; border-radius: 12px; border: 1px solid #eee; }
.single-post h1 { font-size: 2rem; margin-bottom: 10px; line-height: 1.2; }
.meta { color: #888; margin-bottom: 30px; font-size: 0.9rem; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.single-thumbnail { margin-bottom: 30px; }
.single-thumbnail img { width: 100%; height: auto; border-radius: 8px; }
.entry-content { font-size: 1.15rem; color: #333; }
.entry-content p { margin-bottom: 20px; }
.entry-content img { max-width: 100%; border-radius: 8px; margin: 20px 0; display: block; }

/* 6. Yorumlar */
.comments-wrapper { margin-top: 50px; padding-top: 30px; border-top: 2px solid #f0f0f0; }
.comment-body { padding: 20px; border: 1px solid #f0f0f0; border-radius: 12px; margin-bottom: 15px; background: #fff; }
#submit { background: #222; color: #fff; border: none; padding: 12px 30px; border-radius: 6px; cursor: pointer; transition: 0.3s; }
#submit:hover { background: #0066cc; }

/* 7. Footer */
footer { margin-top: 60px; padding: 20px; text-align: center; color: #888; font-size: 0.9rem; }



/* Mobil cihazlarda tekil sayfa boşluklarını sıfırlama */
@media screen and (max-width: 767px) {
    .single-post {
        padding: 20px 10px; /* Üstten/alttan 20px, yanlardan 10px boşluk */
        border-radius: 0;   /* Köşeleri kare yapıp tam ekran hissini artırır */
        border-left: none;
        border-right: none;
    }
   
}
/* İçerik içindeki resimleri tam genişlik yapma */
.entry-content img {
    width: 100% !important;      /* Ekranın tamamını kaplar */
    max-width: 100% !important;  /* Taşmayı engeller */
    height: auto !important;     /* Oranları korur */
    display: block;
    margin: 20px 0;
    border-radius: 8px;
}

/* Mobil cihazlarda kapsayıcı boşlukları kaldırma */
@media screen and (max-width: 767px) {
    .single-post {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    

}

/* Masaüstü için özel düzenleme */
@media screen and (min-width: 768px) {
    /* Konteynırı daha düzenli tutalım */
    .container {
        max-width: 800px; /* Okunabilirlik için genişliği sınırladık */
        padding: 5px 5px;
    }

    /* .single-post görsel estetiği */
    .single-post {
        padding: 5px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Masaüstünde hafif bir gölge ekledik */
        border: 1px solid #e1e1e1;
    }

    /* Masaüstünde resimlerin daha büyük ve estetik görünmesi */
    .single-thumbnail img {
        border-radius: 12px;
    }

    .entry-content {
        font-size: 1.25rem; /* Masaüstünde metni biraz daha büyüttük */
        line-height: 1.8;
    }
}
.entry-content hr {
    border: none;
    border-top: 2px solid #ddd; /* İnce, şık bir çizgi */
    
    /* Üstten 50px, alttan 50px boşluk bırakır */
    margin-top: 35px;    
    margin-bottom: 35px; 
    
    /* Genişliği biraz kısarak daha modern gösterebiliriz */
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
}
/* 2. İçerik Alanını Kapsayan Çerçeve (Makale kutusu) */
.main-article {
    background-color: #EEEEE0; /* Yazıların yazıldığı iç kutunun rengi */
    max-width: 800px;         /* Masaüstünde çok genişlememesi için */
    margin: 15px auto;        /* Kutuyu ortalar ve dış boşluk bırakır */
    padding: 20px;            /* İçeriklerin kutu kenarlarına değmemesi için */
    border-radius: 15px;      /* Köşeleri yumuşatır */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Dış arka planla kutuyu birbirinden ayırır */
}

/* 3. Mobil İçin Özel Düzenleme (Ekran küçülünce kutu kenarları birleşmesin) */
@media screen and (max-width: 767px) {
    .main-article {
        margin: 0;            /* Mobilde tam ekran olsun */
        border-radius: 0;     /* Mobilde köşeleri düz olsun */
        padding: 10px;
    }
}

/* 4. İçerik Düzenlemeleri */
.main-article h1 { font-size: 2rem; margin-bottom: 20px; }
.main-article .entry-content { font-size: 1.15rem; line-height: 1.8; }
.main-article .entry-content img { width: 100%; border-radius: 8px; margin: 5px 0; }

/* 6. Yorumlar Bölümü - Modern Görünüm */
.comments-wrapper { 
    margin-top: 40px; 
    padding-top: 30px; 
    border-top: 2px solid #e1e1e1; /* İçerik ile yorumlar arası ayrım */
}

.comment-list { list-style: none; padding: 0; }

.comment-body { 
    background: #fdfdfd;      /* Hafif bir gri/beyaz tonu */
    border: 1px solid #eee; 
    padding: 20px; 
    border-radius: 12px; 
    margin-bottom: 20px; 
    transition: 0.3s;
}

.comment-body:hover {
    border-color: #d1ceb2;    /* Üzerine gelince sitenin tonuyla uyumlu renk */
}

/* Yorum Formu Düzenlemesi */
#commentform { display: flex; flex-direction: column; gap: 15px; }

#commentform input[type="text"], 
#commentform input[type="email"], 
#commentform textarea {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 100%;
}

#submit { 
    background: #222; 
    color: #fff; 
    border: none; 
    padding: 12px 30px; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: bold;
    transition: 0.3s;
}

#submit:hover { 
    background: #444; /* Daha yumuşak bir hover efekti */
}
/* Yorumlardaki tarih ve saat bilgilerini soluklaştırma */
.comment-metadata, 
.comment-date, 
.comment-meta {
    color: #a8a8a8 !important; /* Soluk gri tonu */
    font-size: 0.8rem !important; /* Daha küçük ve zarif bir yazı tipi */
}

/* 3. Modern Menü Butonu */
.menu-toggle {
    width: 100%;
    padding: 18px;
    background: #C4C0A0; /* Sitenin tasarım tonuyla uyumlu bir renk */
    color: #333;
    border: none;
    cursor: pointer;
    border-radius: 8px; /* Daha yumuşak köşeler */
    margin-bottom: 15px;
    font-weight: bold;
    text-transform: uppercase; /* Modern bir görünüm için */
    letter-spacing: 1px;
    transition: all 0.3s ease; /* Yumuşak geçiş efekti */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Hafif bir derinlik */
}

.menu-toggle:hover {
    background: #D1CEB2; /* Üzerine gelince biraz daha koyu ton */
    transform: translateY(-2px); /* Hafif bir yükselme efekti */
}

/* Menü içeriğinin açılırken daha estetik olması için */
.main-menu {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}