/*
Theme Name: Mozthm
Theme URI: http://seninsiten.com
Author: Senin Adın
Author URI: http://seninsiten.com
Description: Codestar Framework altyapılı, gelişmiş haber teması.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mozthm
Tags: news, magazine, responsive, modern
*/

/* Google Font (Roboto) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* =========================================
   1. GENEL AYARLAR VE DEĞİŞKENLER
   ========================================= */
:root {
    --primary-color: #e74c3c;
    /* Haber kırmızısı */
    --secondary-color: #2c3e50;
    /* Koyu lacivert */
    --text-color: #333333;
    --bg-color: #f4f6f7;
    --border-color: #e1e1e1;
    --container-width: 1200px;
}


body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Linkler */
a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

a:hover {
    color: var(--primary-color);
}

/* Konteyner (Ortalama) */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 15px;
}

/* Resimler taşmasın */
img {
    max-width: 100%;
    height: auto;
}

/* =========================================
   2. HEADER (ÜST KISIM) TASARIMI
   ========================================= */
.site-header {
    background: #fff;

    padding: 0;
    position: relative;
    z-index: 100;
}

.header-inner {
    display: flex;
    /* Yan yana dizme sihirbazı */
    align-items: center;
    /* Dikey ortala */
    justify-content: space-between;
    /* Sağa ve sola yasla */
}

/* Logo Alanı */
.site-branding {
    flex: 0 0 auto;
    /* Genişliği içeriği kadar olsun */
    max-width: 250px;
    /* Logo çok büyümesin */
}

/* Menü Alanı */
.main-navigation ul {
    list-style: none;
    /* Noktaları kaldır */
    margin: 0;
    padding: 0;
    display: flex;
    /* Yan yana diz */
    gap: 20px;
    /* Linkler arası boşluk */
}

.main-navigation ul li a {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    color: var(--secondary-color);
}

.main-navigation ul li a:hover {
    color: var(--primary-color);
}

/* Araçlar (Arama & Sosyal) */
.header-tools {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-social a {
    font-size: 16px;
    color: #999;
}

.header-search-toggle button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--secondary-color);
}

/* =========================================
   3. HABER KARTLARI & GRID YAPISI
   ========================================= */

/* Izgara Sistemi (3 sütunlu) */
.mozthm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 eşit parça */
    gap: 30px;
    /* Kutular arası boşluk */
    margin-bottom: 50px;
}

/* Tablette 2 sütun olsun */
@media (max-width: 992px) {
    .mozthm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobilde tek sütun olsun */
@media (max-width: 600px) {
    .mozthm-grid {
        grid-template-columns: 1fr;
    }
}

/* Kartın Kendisi */
.post-card {
    background: #fff;
    border: 1px solid var(--border-color);
    /* Hafif gri çerçeve */
    border-radius: 8px;
    /* Köşeleri yuvarla */
    overflow: hidden;
    /* Resim taşarsa gizle */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Karta gelince hafif yukarı çıksın */
.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Kart Görseli */
.post-thumbnail img {
    width: 100%;
    height: 200px;
    /* Tüm resimler eşit yükseklikte */
    object-fit: cover;
    /* Resmi sündürmeden kırp */
    display: block;
}

/* Kart İçeriği */
.post-content {
    padding: 20px;
}

/* Kategori Linkleri */
.post-meta .cat-links a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 5px;
    display: inline-block;
}

/* ✅ DÜZELTİLMİŞ KOD (Bunu Yapıştır) */
.entry-title {
    /* Font boyutu, renk ve satır aralığı ARTIK PANEL'DEN GELECEK */
    margin-top: 15px;
    margin-bottom: 20px;
    display: block;
    word-wrap: break-word;
}

.entry-title a {
    color: var(--secondary-color);
    text-decoration: none;
}

.entry-title a:hover {
    color: var(--primary-color);
}

/* Özet Metni */
.entry-excerpt {
    font-size: 14px;
    color: #666;
    margin-top: 0px;
    margin-bottom: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* 3 satırdan fazlasını gizle */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Kart Altı (Tarih vb) */
.entry-footer {
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    font-size: 12px;
    color: #999;
}

/* Sayfalama */
.pagination {
    text-align: center;
    margin: 40px 0;
}

.pagination .nav-links .page-numbers {
    padding: 8px 15px;
    background: #fff;
    border: 1px solid var(--border-color);
    margin: 0 5px;
    border-radius: 4px;
}

.pagination .nav-links .current {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* =========================================
   4. DETAY SAYFASI (SINGLE) & SIDEBAR
   ========================================= */

/* İki Sütunlu Düzen */
.site-layout {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    margin-bottom: 60px;
}

/* Sol Taraf (Haber) %70 */
.site-main {
    flex: 2;
    /* 2 birim yer kapla */
    min-width: 0;
    /* İçerik taşmasını önler */
}

/* Sağ Taraf (Sidebar) %30 */
.widget-area {
    flex: 1;
    /* 1 birim yer kapla */
}

/* Mobilde alt alta olsunlar */
@media (max-width: 900px) {
    .site-layout {
        flex-direction: column;
    }
}

/* --- Haber İçeriği --- */
.entry-header {
    margin-bottom: 20px;
}


.entry-meta-bottom {
    font-size: 14px;
    color: #888;
    margin-top: 10px;
}

.entry-meta-bottom span {
    margin-right: 15px;
}

.single-featured-image img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 30px;
}

/* Okuma Metni (Typography) */
.entry-content {
    font-size: 18px;
    /* Okuması kolay büyük font */
    line-height: 1.8;
    color: #222;
}

.entry-content p {
    margin-bottom: 20px;
}

.entry-content h2,
.entry-content h3 {
    margin-top: 30px;
    color: var(--secondary-color);
}

/* --- Yazar Kutusu --- */
.author-box {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 25px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-radius: 8px;
}

.author-avatar img {
    border-radius: 50%;
}

.author-info h3 {
    margin: 0 0 5px;
    font-size: 18px;
}

.author-info p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* --- Sidebar Widgetları --- */
.widget {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 25px;
    margin-bottom: 30px;
    border-radius: 8px;
}

.widget-title {
    font-size: 18px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block;
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

.widget ul li a {
    font-weight: 500;
    color: #555;
}

.widget ul li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
    /* Hover efekt */
}

/* =========================================
   5. ÖZEL WIDGET TASARIMLARI
   ========================================= */

/* Resimli Son Yazılar Listesi */
.mozthm-recent-posts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mozthm-recent-posts li {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.mozthm-recent-posts li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Link Kutusu (Flex ile yan yana) */
.rp-item {
    display: flex;
    align-items: center;
    /* Dikey ortala */
    gap: 15px;
    text-decoration: none;
}

/* Küçük Resim Kutusu */
.rp-thumb {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    /* Resmi sıkıştırma */
    border-radius: 4px;
    overflow: hidden;
    background: #eee;
}

.rp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Resmi kutuya sığdır */
}

/* Resim yoksa gri kutu */
.rp-thumb .no-thumb {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ddd;
}

/* Başlık ve Tarih */
.rp-content {
    flex: 1;
    /* Kalan boşluğu doldur */
}

.rp-title {
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 5px;
    font-weight: 600;
    color: var(--secondary-color);
}

.rp-item:hover .rp-title {
    color: var(--primary-color);
}

.rp-date {
    font-size: 11px;
    color: #999;
}

/* =========================================
   6. FOOTER TASARIMI
   ========================================= */

.site-footer {
    background-color: #1a1a1a;
    /* Koyu antrasit */
    color: #b0b0b0;
    /* Açık gri metin */
    font-size: 14px;
}

/* --- Widget Alanı --- */
.footer-widgets-area {
    padding: 60px 0;
    border-bottom: 1px solid #333;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Eşit Sütun */
    gap: 40px;
}

/* Mobilde tek sütun yap */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Footer Widget Başlıkları */
.footer-widget-title {
    color: #fff;
    /* Başlıklar beyaz */
    font-size: 16px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
}

/* Footer Linkleri */
.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget ul li {
    padding: 5px 0;
    border-bottom: 1px solid #333;
}

.footer-widget ul li a {
    color: #b0b0b0;
    text-decoration: none;
}

.footer-widget ul li a:hover {
    color: #fff;
    padding-left: 5px;
}

/* --- Alt Bar (Copyright) --- */
.site-info-bar {
    padding: 20px 0;
    background-color: #111;
    /* Daha koyu şerit */
}

.site-info-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 600px) {
    .site-info-inner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* Footer Menüsü (Varsa) */
.footer-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

.footer-menu ul li a {
    color: #888;
}

.footer-menu ul li a:hover {
    color: #fff;
}

/* =========================================
   7. MANŞET SLIDER (PROFESYONEL)
   ========================================= */

.manset-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* Derinlik hissi */
}

/* Yükseklik Ayarı */
.manset-slider {
    width: 100%;
    height: 500px;
    /* PC için yükseklik */
}

@media (max-width: 768px) {
    .manset-slider {
        height: 300px;
        /* Mobil için yükseklik */
    }
}

/* Resim ve Overlay */
.manset-item {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.manset-image {
    width: 100%;
    height: 100%;
}

.manset-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Resmi sündürme, kes */
}

/* O Meşhur Haber Sitesi Karartması (Gradient) */
.manset-image .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    /* Resmin %70'inden başla */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

/* Başlık Alanı */
.manset-caption {
    position: absolute;
    bottom: 40px;
    /* Sayıların üstünde dursun */
    left: 30px;
    right: 30px;
    z-index: 2;
    color: #fff;
}

.manset-cat {
    background: var(--primary-color);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 3px;
    margin-bottom: 10px;
    display: inline-block;
}

.manset-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Yazı patlasın */
}

@media (max-width: 768px) {
    .manset-title {
        font-size: 20px;
    }

    .manset-caption {
        bottom: 20px;
        left: 15px;
        right: 15px;
    }
}

/* --- Numaralı Navigasyon Düzeltmesi --- */
.swiper-pagination-bullets {
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.8);
    /* Arkaplanı koyulaştırdık */
    display: flex !important;
    /* Mutlaka yan yana olsun */
    padding: 0;
    margin: 0;
    z-index: 10;
}

.swiper-pagination-bullet {
    flex: 1;
    /* Hepsi eşit genişlikte */
    height: 40px;
    /* Yükseklik arttı */
    line-height: 40px;
    /* Yazıyı ortala */
    background: transparent !important;
    color: #bbb;
    opacity: 1 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    font-size: 16px;
    font-weight: 700;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    /* Numarayı ortala */
    transition: all 0.3s ease;
    cursor: pointer;
}

.swiper-pagination-bullet:last-child {
    border-right: none;
}

.swiper-pagination-bullet-active {
    background: var(--primary-color) !important;
    /* Seçili olan kırmızı olsun */
    color: #fff;
    font-size: 18px;
    /* Seçili olan biraz büyüsün */
}

.swiper-pagination-bullet:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff;
}

/* =========================================
   8. ANASAYFA BLOKLARI
   ========================================= */

.news-block {
    margin-bottom: 50px;
}

.block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
    position: relative;
}

/* Başlık Stili */
.block-title {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    /* Kırmızı çizgi */
    margin-bottom: -2px;
    /* Çizgiyi alt çizginin üstüne bindir */
}

/* "Tümü" Linki */
.block-more {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    text-decoration: none;
}

.block-more:hover {
    color: var(--primary-color);
}

/* =========================================
   9. ARŞİV / KATEGORİ SAYFASI
   ========================================= */

/* Başlık Alanı */
.archive-header {
    background: #fff;
    border-left: 5px solid var(--primary-color);
    /* Solu kırmızı çizgili */
    padding: 30px;
    margin-bottom: 40px;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.archive-header h1 {
    margin: 0;
    font-size: 24px;
    color: var(--secondary-color);
}

.archive-header .archive-description {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

/* Arşiv Grid Düzeni */
/* Sidebar olduğu için buradaki gridi biraz sıkıştırmamız lazım */
.archive-grid {
    grid-template-columns: repeat(2, 1fr);
    /* Sidebar varken 2'li olsun */
    gap: 30px;
}

/* Mobilde tek sütun */
@media (max-width: 768px) {
    .archive-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   10. BENZER HABERLER (RELATED POSTS)
   ========================================= */

.related-posts-section {
    margin-top: 40px;
    margin-bottom: 40px;
    border-top: 2px solid #f0f0f0;
    padding-top: 30px;
}

.related-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 20px;
    border-left: 4px solid var(--primary-color);
    padding-left: 15px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Yan Yana */
    gap: 20px;
}

@media (max-width: 600px) {
    .related-grid {
        grid-template-columns: 1fr;
        /* Mobilde alt alta */
    }
}

.related-item {
    display: block;
    text-decoration: none;
    group: pointer;
    /* Hover için grup */
}

.related-thumb {
    height: 120px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #eee;
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-item:hover .related-thumb img {
    transform: scale(1.1);
    /* Resim hafif zoom yapar */
}

.related-item-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-color);
    margin: 0;
}

.related-item:hover .related-item-title {
    color: var(--primary-color);
}

/* =========================================
   11. BREADCRUMBS (YOL HARİTASI)
   ========================================= */

.mozthm-breadcrumb-wrapper {
    background-color: #f9f9f9;
    /* Çok açık gri zemin */
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    margin-bottom: 30px;
    /* İçerikten uzaklaştır */
    font-size: 13px;
    /* Kibar font boyutu */
    color: #888;
}

.mozthm-breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    /* Mobilde taşarsa aşağı insin */
    align-items: center;
}

.mozthm-breadcrumb li {
    display: flex;
    align-items: center;
}

/* Linkler ve Ayıraçlar */
.mozthm-breadcrumb li a {
    color: #666;
    font-weight: 500;
    text-decoration: none;
    transition: 0.2s;
}

.mozthm-breadcrumb li a:hover {
    color: var(--primary-color);
}

/* Kategori linklerinden sonra gelen virgülleri vs. gizlemek istersen */
.mozthm-breadcrumb li+li::before {
    content: "›";
    /* Araya ok işareti koy */
    margin: 0 10px;
    color: #ccc;
    font-size: 16px;
}

/* Aktif Sayfa (Tıklanmaz) */
.mozthm-breadcrumb li.active {
    color: #999;
    font-weight: 400;
    /* Uzun başlıklar tek satırda kalsın istersen: */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    /* Mobilde taşmasın */
}

@media (max-width: 600px) {
    .mozthm-breadcrumb li.active {
        max-width: 150px;
        /* Mobilde daha kısa tut */
    }
}

/* =========================================
   12. ARAMA SONUÇLARI SAYFASI
   ========================================= */

/* Başlık Kutusu */
.search-header-box {
    background: #fff;
    border-bottom: 3px solid var(--primary-color);
    padding: 30px;
    margin-bottom: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.search-header-box .page-title {
    margin: 0;
    font-size: 24px;
    color: var(--secondary-color);
}

.search-header-box .search-query {
    color: var(--primary-color);
    font-weight: 800;
    font-style: italic;
}

.search-count {
    margin: 10px 0 0;
    font-size: 14px;
    color: #999;
}

/* Sonuç Bulunamadı Kutusu */
.no-results-content {
    text-align: center;
    padding: 50px 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}

.alert-box h3 {
    color: var(--secondary-color);
    font-size: 22px;
}

.alert-box p {
    color: #666;
    max-width: 500px;
    margin: 10px auto 30px;
}

.search-retry {
    max-width: 400px;
    margin: 0 auto;
}

/* =========================================
   13. MOBİL MENÜ VE RESPONSIVE HEADER
   ========================================= */

/* Varsayılan: Mobil Butonu ve Mobil Arama Gizli */
.menu-toggle,
.mobile-search,
.sub-toggle {
    display: none;
}

/* --- RESPONSIVE KURALLARI (992px altı) --- */
@media (max-width: 992px) {

    /* Header Düzeni */
    .header-inner {
        padding: 0 10px;
        position: relative;
    }

    /* 1. Hamburger Butonu Görünsün */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 200;
        /* En üstte olsun */
    }

    /* Hamburger İkon Çizgileri */
    .hamburger-icon {
        display: block;
        width: 25px;
        height: 2px;
        background: var(--secondary-color);
        position: relative;
        transition: all 0.3s;
    }

    .hamburger-icon::before,
    .hamburger-icon::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--secondary-color);
        left: 0;
        transition: all 0.3s;
    }

    .hamburger-icon::before {
        top: -8px;
    }

    .hamburger-icon::after {
        top: 8px;
    }

    /* Buton Aktifken (X Şekli) */
    .menu-toggle.active .hamburger-icon {
        background: transparent;
    }

    .menu-toggle.active .hamburger-icon::before {
        top: 0;
        transform: rotate(45deg);
    }

    .menu-toggle.active .hamburger-icon::after {
        top: 0;
        transform: rotate(-45deg);
    }


    /* 2. Menü Kapsayıcısı (Mobilde Gizli Panel) */
    .menu-wrapper {
        position: fixed;
        top: 0;
        left: -100%;
        /* Ekranın solunda saklı */
        width: 280px;
        /* Panel genişliği */
        height: 100%;
        background: #fff;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        z-index: 150;
        padding-top: 80px;
        /* Header payı */
        transition: left 0.3s ease;
        overflow-y: auto;
    }

    /* Menü Açılınca */
    .menu-wrapper.toggled {
        left: 0;
    }

    /* Siyah Perde (Body'ye eklenirse) */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 140;
    }

    /* 3. Linklerin Mobildeki Hali */
    .main-navigation ul {
        flex-direction: column;
        /* Alt alta diz */
        gap: 0;
    }

    .main-navigation ul li {
        border-bottom: 1px solid #f5f5f5;
        width: 100%;
        position: relative;
    }

    .main-navigation ul li a {
        display: block;
        padding: 15px 20px;
        font-size: 15px;
        color: #333;
    }

    /* Alt Menü Ok İşareti */
    .sub-toggle {
        display: block;
        position: absolute;
        right: 15px;
        top: 10px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background: #f9f9f9;
        cursor: pointer;
    }

    .main-navigation ul .sub-menu {
        display: none;
        /* JS ile açılacak */
        background: #f9f9f9;
        padding-left: 20px;
        box-shadow: none;
        position: static;
        /* Mobilde static */
        width: 100%;
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    /* Mobilde Arama Kutusu Görünsün */
    .mobile-search {
        display: block;
        padding: 20px;
    }
}

/* =========================================
   DÜZELTİLMİŞ HEADER & NAVBAR (FİNAL)
   ========================================= */

/* 1. GENEL KAPSAYICILAR (BLOCK) */
/* Flex yapmıyoruz ki içindeki container rahat çalışsın */
.header-topbar,
.header-main,
.header-bottom {
    display: block;
    width: 100%;
    position: relative;
    z-index: 99;
    box-sizing: border-box;
    /* Padding eklersek taşmasın */
}

/* Konteynerin çalıştığından emin olalım */
.container {
    max-width: 1200px;
    /* Standart genişlik */
    margin: 0 auto;
    /* Ortala */
    padding: 0 15px;
    /* Kenarlardan boşluk */
    height: 100%;
    /* Yüksekliği kapsayıcıdan al */
}

/* =========================================
   A. TOPBAR DÜZENİ
   ========================================= */
.header-topbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    /* Biri sağa biri sola */
    align-items: center;
    /* Dikey ortala */
    height: 100%;
}

/* Sol ve Sağ Alanlar */
.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
    /* İçerik öğeleri arası boşluk */
}

/* Topbar Menüsü */
.topbar-menu-list {
    display: flex;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* =========================================
   B. MAIN HEADER (LOGO & MENÜ)
   ========================================= */
.header-main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Logo en sola, Menü en sağa */
    height: 100%;
}

/* --- Logo Alanı --- */
.site-branding {
    flex-shrink: 0;
    /* Logoyu asla sıkıştırma */
    margin-right: 30px;
    /* Menüye fazla yaklaşma */
    display: flex;
    align-items: center;
}

.site-branding a {
    display: block;
    line-height: 0;
    /* Resim altı boşluğu sil */
}

.site-branding img {
    /* Genişlik ve Yükseklik PHP'den (panelden) geliyor */
    object-fit: contain;
}

/* --- Menü ve Araçlar Kapsayıcısı --- */
.main-navigation-wrapper {
    flex-grow: 1;
    /* Boş alanı kapla */
    display: flex;
    justify-content: flex-end;
    /* İçindekileri sağa yasla */
    align-items: center;
    gap: 20px;
    /* Menü ile Arama butonu arası */
}

/* Ana Menü Listesi */
.main-navigation ul {
    display: flex;
    gap: 25px;
    /* Linkler arası boşluk */
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation ul li a {
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s;
    /* Renk/Font Panelden gelir */
}

.main-navigation ul li a:hover {
    color: var(--primary-color) !important;
    /* Panel rengini ezmek için !important */
}

/* Arama İkonu */
.header-search-trigger {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #333;
    transition: 0.3s;
    flex-shrink: 0;
    /* Asla küçülme */
}

.header-search-trigger:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/* =========================================
   C. BOTTOM BAR DÜZENİ
   ========================================= */
.header-bottom {
    /* Border ve Renk Panelden gelir */
}

.header-bottom .container {
    display: flex;
    align-items: center;
}

.bottom-navigation {
    width: 100%;
}

.bottom-menu-list {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    height: 100%;
}

.bottom-menu-list li a {
    text-decoration: none;
    transition: 0.3s;
    /* Font ayarları Panelden gelir */
}

/* =========================================
   MODERN HEADER ARAÇLARI (Search & Burger)
   ========================================= */

/* Araçlar Kutusu */
.header-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
}

/* Butonların Ortak Stili */
.tool-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Yuvarlak buton */
    transition: all 0.3s ease;
    color: #333;
    /* Varsayılan renk */
}

.tool-btn svg {
    display: block;
}

/* Hover Efekti */
.tool-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    /* Hafif gri */
    color: var(--primary-color);
    transform: scale(1.1);
    /* Hafif büyüme */
}

/* Masaüstü Menüsü (Mobil'de gizleyeceğiz) */
.desktop-menu {
    display: block;
}

@media (max-width: 992px) {
    .desktop-menu {
        display: none;
        /* Mobilde ana menü linklerini gizle, sadece ikon kalsın */
    }
}

/* =========================================
   MODERN ARAMA OVERLAY (FULL SCREEN)
   ========================================= */

.header-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    /* Simsiyah transparan */
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Aktif Olduğunda */
.header-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Kapat Butonu */
.search-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    cursor: pointer;
    transform: rotate(0deg);
    transition: 0.3s;
}

.search-close:hover {
    transform: rotate(90deg);
}

/* Arama Formu */
.search-overlay-inner {
    width: 100%;
    max-width: 800px;
    padding: 0 20px;
    text-align: center;
}

.overlay-search-field {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #555;
    font-size: 30px;
    color: #fff;
    padding: 15px 0;
    text-align: center;
    outline: none;
    font-weight: 300;
}

.overlay-search-field:focus {
    border-bottom-color: var(--primary-color);
}

.search-instruction {
    color: #888;
    margin-top: 15px;
    font-size: 14px;
    letter-spacing: 1px;
}

/* =========================================
   OFF-CANVAS (KAYAR YAN PANEL) - DESKTOP & MOBİL
   ========================================= */

/* Panelin Kendisi */
.offcanvas-menu-wrapper {
    position: fixed;
    top: 0;
    right: -320px;
    /* Ekranın sağında gizli (Solda istersen left: -320px yap) */
    width: 300px;
    height: 100%;
    background: #fff;
    z-index: 9999;
    /* En üstte */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    /* Yumuşak kayma */
    padding: 40px 30px;
    overflow-y: auto;
    /* İçerik taşarsa scroll olsun */
    visibility: hidden;
}

/* Aktif Olduğunda (JS ile eklenecek sınıf) */
.offcanvas-menu-wrapper.active {
    right: 0;
    /* İçeri kay */
    visibility: visible;
}

/* Kapatma Butonu */
.offcanvas-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    transition: 0.3s;
}

.offcanvas-close:hover {
    color: var(--primary-color);
    transform: rotate(90deg);
}

/* Siyah Perde (Backdrop) */
.offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9990;
    /* Panelin bir altında */
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.offcanvas-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Menü Linkleri */
.offcanvas-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offcanvas-nav-list li {
    border-bottom: 1px solid #f5f5f5;
}

.offcanvas-nav-list li a {
    display: block;
    padding: 12px 0;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
}

.offcanvas-nav-list li a:hover {
    color: var(--primary-color);
    padding-left: 10px;
    /* Kayma efekti */
}

/* Alt Menüler */
.offcanvas-nav-list .sub-menu {
    display: none;
    /* JS ile açılır */
    padding-left: 15px;
    background: #f9f9f9;
}

/* =========================================
   PREMIUM MANŞET (PANEL ENTEGRELİ & DÜZELTİLMİŞ)
   ========================================= */

.classic-manset-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    background: var(--manset-bg, #222);
    /* Panelden gelen renk */
    padding: 0;
    border: none;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 1. Resim Alanı */
.classic-slider {
    width: 100%;
    height: var(--slider-height, 450px);
    position: relative;
    margin: 0;
}

.cm-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. Gradient ve Başlık */
.cm-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Sabit Siyah Gradient (Yazı okunabilirliği için şart) */
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.8) 50%, transparent 100%);
    padding: 60px 20px 20px 20px;
    z-index: 2;
    pointer-events: none;
}

.cm-title {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 3. Numara Şeridi (ZEMİN RENGİ BURADAN GELİR) */
.classic-pagination-container {
    background: var(--manset-bg, #222);
    /* PANEL DEĞİŞKENİ */
    width: 100%;
    height: 46px;
    display: flex;
    align-items: stretch;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Hafif ayırıcı çizgi */
    position: relative;
    z-index: 5;
}

.swiper-pagination-custom {
    display: flex;
    flex-grow: 1;
    margin: 0;
    padding: 0;
}

/* Numaralar (Kutucuklar) */
.swiper-pagination-bullet {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    /* ÖNEMLİ: Arkaplan şeffaf olsun ki ana zemin görünsün */
    background: transparent !important;

    color: var(--manset-pasif, #888);
    /* PANEL DEĞİŞKENİ */
    font-weight: 700;
    font-size: 14px;

    border-radius: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    cursor: pointer;
    transition: all 0.2s ease;

    border-top: 4px solid transparent;
    /* Yer tutucu */
    position: relative;
}

/* Ayırıcı Çizgiler (Separator) */
.swiper-pagination-bullet::after {
    content: '';
    position: absolute;
    right: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    /* Hafif görünür çizgi */
}

.swiper-pagination-bullet:last-child::after {
    display: none;
}

/* HOVER Durumu */
.swiper-pagination-bullet:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    /* Çok hafif aydınlatma */
    color: #fff;
}

/* AKTİF Numara */
.swiper-pagination-bullet-active {
    /* ÖNEMLİ DÜZELTME: Sabit renk yerine şeffaf veya çok hafif ton */
    background: transparent !important;
    /* İstersen aktif olanın zemini hafif belli olsun diye şunu açabilirsin: */
    /* background: rgba(0,0,0,0.2) !important; */

    color: var(--manset-aktif, #e74c3c) !important;
    /* Yazı Rengi */
    border-top-color: var(--manset-aktif, #e74c3c) !important;
    /* Çizgi Rengi */
    font-weight: 900;
}

/* İkon Kutusu */
.all-news-link {
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    /* Hafif koyu */
    color: #fff;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.all-news-link:hover {
    background: var(--manset-aktif, #e74c3c);
    /* PANEL DEĞİŞKENİ */
}

/* MOBİL AYARLARI (Full Width Devam Ediyor) */
@media (max-width: 768px) {
    .home-top-section {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
        margin-top: 0;
        gap: 0;
    }

    .main-slider-area,
    .classic-slider,
    .classic-manset-wrapper,
    .cm-img {
        border-radius: 0 !important;
        border: none !important;
    }

    .classic-slider {
        height: 260px !important;
    }

    .cm-title {
        font-size: 18px;
    }

    .classic-pagination-container {
        overflow-x: auto;
        padding-left: 10px;
        padding-right: 10px;
    }

    .swiper-pagination-bullet {
        min-width: 40px;
        flex: none;
    }

    .all-news-link {
        display: none;
    }
}

/* =========================================
   GENEL RADIUS AYARI (Tüm Kutular İçin)
   ========================================= */
/* Panelden gelen --global-radius değişkenini kullanıyoruz */
.classic-manset-wrapper,
.main-slider-area,
.slider-sidebar-area,
.widget,
.post-box,
.entry-content img,
.author-box,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
button.submit,
.btn {
    border-radius: var(--global-radius, 4px) !important;
}

/* =========================================
   MOBİL HEADER & KAYAR MENÜ (DÜZELTİLMİŞ)
   ========================================= */

/* 1. MASAÜSTÜ VARSAYILANLARI (Zorunlu Gizleme) */
.mobile-header-wrapper {
    display: none !important;
    /* Masaüstünde ASLA görünmesin */
}

/* 2. MOBİL GÖRÜNÜM (Sadece 992px ve altı) */
@media (max-width: 992px) {

    /* Masaüstü Header'ı Gizle */
    .header-main,
    .top-bar,
    .header-bottom {
        display: none !important;
    }

    /* Mobil Header'ı Göster */
    .mobile-header-wrapper {
        display: block !important;
        width: 100%;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        position: sticky;
        top: 0;
        z-index: 999;
    }

    /* --- ÜST BAR (LOGO VE İKONLAR) --- */
    .mobile-main-bar {
        height: var(--mob-header-h, 60px);
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        position: relative;
        background: #fff;
    }

    .mob-inner {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        justify-content: space-between;
        position: relative;
    }

    /* Buton Stili */
    .mob-btn {
        background: none;
        border: none;
        padding: 0 15px;
        /* Tıklama alanı */
        height: 100%;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .mob-btn svg {
        display: block;
        /* Altındaki boşluğu al */
    }

    /* Logo Resmi */
    .mob-logo img {
        max-height: calc(var(--mob-header-h, 60px) - 20px);
        width: auto;
        display: block;
    }

    /* --- DÜZEN SENARYOLARI (Panelden Gelen) --- */

    /* 1. LAYOUT: CENTER (Klasik) */
    .mobile-main-bar.layout-center .mob-logo {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 1;
    }

    /* 2. LAYOUT: LEFT (Logo Solda) */
    .mobile-main-bar.layout-left .mob-inner {
        justify-content: flex-start;
    }

    .mobile-main-bar.layout-left .mob-logo {
        margin-right: auto;
        padding-left: 15px;
        order: 1;
    }

    .mobile-main-bar.layout-left .mob-item-right {
        order: 2;
        margin-right: 5px;
    }

    .mobile-main-bar.layout-left .mob-item-left {
        order: 3;
    }

    /* 3. LAYOUT: SWAP (Ters) */
    .mobile-main-bar.layout-swap .mob-logo {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .mobile-main-bar.layout-swap .mob-item-right {
        order: 1;
        margin-right: auto;
    }

    .mobile-main-bar.layout-swap .mob-item-left {
        order: 3;
        margin-left: auto;
    }


    /* --- KAYAR KATEGORİ MENÜSÜ --- */
    .mobile-cat-nav {
        height: var(--mob-cat-h, 45px);
        background: var(--mob-cat-bg, #fff);
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid #eee;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mobile-cat-nav::-webkit-scrollbar {
        display: none;
    }

    .mob-scroll-menu {
        margin: 0;
        padding: 0;
        list-style: none;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 15px;
        /* Başlangıç boşluğu */
    }

    .mob-scroll-menu li {
        display: inline-block;
        margin-right: 20px;
        flex-shrink: 0;
    }

    .mob-scroll-menu li:last-child {
        margin-right: 15px;
    }

    .mob-scroll-menu li a {
        text-decoration: none;
        color: #555;
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        display: block;
        line-height: var(--mob-cat-h, 45px);
    }

    .mob-scroll-menu li.current-menu-item a {
        color: var(--primary-color);
    }
}

/* =========================================
   MANŞET + YAN PANEL DÜZENİ
   ========================================= */

.home-top-section {
    display: grid;
    grid-template-columns: 3fr 1fr;
    /* Sol 3 birim, Sağ 1 birim */
    gap: 20px;
    /* Aradaki boşluk */
    margin-top: 20px;
    margin-bottom: 40px;
}

/* Eğer sağ tarafa widget atmazsan Slider tam ekran olsun */
.home-top-section:has(.slider-sidebar-area:empty),
/* Modern tarayıcılar */
.home-top-section.full-width {
    grid-template-columns: 1fr;
}

/* Mobilde alt alta düşsün */
@media (max-width: 992px) {
    .home-top-section {
        grid-template-columns: 1fr;
        /* Tek sütun */
    }

    .slider-sidebar-area {
        margin-top: 20px;
    }
}

/* =========================================
   MANŞET + YAN PANEL DÜZENİ (OTOMATİK)
   ========================================= */

.home-top-section {
    display: grid;
    margin-top: 20px;
    margin-bottom: 40px;
    width: 100%;
    box-sizing: border-box;
    gap: 20px;
}

/* DURUM 1: Widget YOK (Tam Genişlik) */
.home-top-section.full-width {
    grid-template-columns: 1fr;
    /* Tek parça, %100 */
}

/* DURUM 2: Widget VAR (Bölünmüş) */
.home-top-section.has-sidebar {
    /* Sol %74 - Boşluk %2 - Sağ %24 */
    grid-template-columns: 74% 24%;
    gap: 2%;
}

/* Manşet Alanı Genel Ayarı */
.main-slider-area {
    min-width: 0;
    /* Taşmayı önle */
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}

/* Yan Panel Genel Ayarı */
.slider-sidebar-area {
    min-width: 0;
    width: 100%;
}

/* MOBİL AYARLARI */
@media (max-width: 992px) {

    /* Mobilde her zaman alt alta */
    .home-top-section.has-sidebar,
    .home-top-section.full-width {
        display: block;
    }

    .main-slider-area {
        margin-bottom: 20px;
    }
}

/* =========================================
   MOBİL İÇİN FULL EKRAN MANŞET (Kenarları Sıfırla)
   ========================================= */

@media (max-width: 768px) {

    /* 1. Manşet ve Yan Alanı Kapsayıcısı */
    .home-top-section {
        /* Container'ın verdiği 15px boşluğu negatif margin ile nötrle */
        margin-left: -15px;
        margin-right: -15px;
        /* Genişliği taşan kısım kadar artır */
        width: calc(100% + 30px);

        margin-top: 0;
        /* Üst boşluğu da alalım, menüye yapışsın */
        gap: 0;
        /* Grid boşluklarını sıfırla */
    }

    /* 2. Manşetin Köşelerini Sivrilt (Kutu gibi tam otursun) */
    .main-slider-area,
    .classic-slider,
    .classic-manset-wrapper,
    .cm-img {
        border-radius: 0 !important;
        /* Yuvarlak köşeleri iptal et */
        border: none !important;
        /* Kenar çizgilerini kaldır */
    }

    /* 3. Manşet Altındaki Numaralar */
    .classic-pagination-container {
        border-radius: 0 !important;
        /* Alt şerit de tam otursun */
        padding-left: 10px;
        /* Hafif iç boşluk verelim ki numaralar ekrana yapışmasın */
        padding-right: 10px;
    }

    /* 4. Eğer manşetin hemen altında Widget varsa ona da biraz pay bırak */
    .slider-sidebar-area {
        padding: 0 15px;
        /* Sidebar içeriği tekrar normal hizaya gelsin */
        margin-top: 20px;
    }
}

/* =========================================
   GENEL RADIUS AYARI (Tüm Kutular İçin)
   ========================================= */
/* Panelden gelen --global-radius değişkenini kullanıyoruz */
.classic-manset-wrapper,
.main-slider-area,
.slider-sidebar-area,
.widget,
.post-box,
.entry-content img,
.author-box,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
button.submit,
.btn {
    border-radius: var(--global-radius, 4px) !important;
}

/* ==================================================
   ACİL ÇÖZÜM: LOGO SOL - MENÜ SAĞ (ZORLA)
   ================================================== */
@media (max-width: 992px) {

    /* 1. FLEX KAPSAYICIYI DÜZENLE */
    .mobile-main-bar .mob-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        /* Her şeyi sağa yasla önce */
        width: 100% !important;
    }

    /* 2. LOGO: Sol Başa Geç ve Diğerlerini İt */
    .mobile-main-bar .mob-logo {
        order: 1 !important;
        /* Sıra 1: En başta ol */
        margin-right: auto !important;
        /* Sağındaki her şeyi en uca itekle! */

        /* Ortalamayı öldüren kritik kodlar: */
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;

        padding-left: 0 !important;
    }

    /* Logo resminin kenar boşluklarını sıfırla */
    .mobile-main-bar .mob-logo img {
        margin: 0 !important;
        display: block !important;
    }

    /* 3. ARAMA İKONU (Varsa): Sırada 2. olsun */
    .mobile-main-bar .mob-item-right {
        order: 2 !important;
        margin-left: 15px !important;
        /* Soluna biraz boşluk */
        margin-right: 0 !important;
    }

    /* 4. MENÜ İKONU (Hamburger): En Sona Geçsin */
    /* Normalde .mob-item-left sınıfında ama biz onu sağa alıyoruz */
    .mobile-main-bar .mob-item-left {
        order: 3 !important;
        /* En son sırada */
        margin-left: 100px !important;
        /* Arama ile arasına boşluk */
    }
}

/* ==================================================
   STICKY (YAPIŞKAN) HEADER ÖZELLİĞİ
   ================================================== */
.is-sticky {
    position: -webkit-sticky;
    /* Safari için */
    position: sticky;
    top: 0;
    z-index: 999;
    /* Diğer her şeyin üstünde olsun */
    background: #fff;
    /* Arkaplan şeffaf olmasın, içerik karışır */
    width: 100%;
}

/* KÜÇÜK GÖLGE EFEKTİ */
/* Yapışan eleman diğerlerinden ayrışsın diye */
.is-sticky {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* MOBİL HEADER ÖZEL */
/* Mobilde zaten wrapper var, onu yapıştırıyoruz */
.mobile-header-wrapper.is-sticky {
    z-index: 1000;
    /* Mobilde daha da üstte olsun */
}

/* ==================================================
   TOPBAR MENÜ DÜZELTMESİ (YAN YANA DİZME)
   ================================================== */
.topbar-menu-list {
    display: flex;
    /* Yan yana diz */
    align-items: center;
    /* Dikey ortala */
    gap: 20px;
    /* Aralarına boşluk koy */
    list-style: none;
    /* Noktaları kaldır */
    margin: 0;
    padding: 0;
}

.topbar-menu-list li a {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    text-transform: capitalize;
    /* Baş harfi büyük */
}

.topbar-menu-list li a:hover {
    color: var(--primary-color);
}

/* ==================================================
   MOBİL TOPBAR (YENİ EKLENEN)
   ================================================== */
.mobile-topbar {
    background: #f9f9f9;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #777;
    text-align: center;
    /* Mobilde ortalı olsun */
}

.mobile-topbar .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Mobilde menü linkleri sığmazsa biraz küçültelim */
.mobile-topbar .topbar-menu-list {
    justify-content: center;
    gap: 10px;
}

/* ==================================================
   1. MOBİL TOPBAR VE MENÜ DÜZENİ
   ================================================== */

/* Yeni Mobil Topbar'ın Şekli */
.mobile-topbar {
    background: #f5f5f5;
    /* Hafif gri zemin */
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #555;
    text-align: center;
    min-height: 30px;
    /* İçerik olmasa bile çökmesin (veya PHP ile gizlenecek) */
}

/* Mobil Topbar Menüsü Yan Yana Olsun */
.mobile-topbar .topbar-menu-list {
    display: flex !important;
    justify-content: center;
    /* Ortala */
    align-items: center;
    gap: 15px;
    /* Araları aç */
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    /* Sığmazsa alt satıra geçsin */
}

.mobile-topbar .topbar-menu-list li a {
    color: #555;
    text-decoration: none;
    font-weight: 500;
}

/* ==================================================
   2. GİZLEME SORUNUNU ÇÖZME (ZORLA)
   ================================================== */

/* MOBİLDE (992px Altı) */
@media (max-width: 992px) {

    /* Masaüstü Topbar'ı kesinlikle gizle (Altta çıkmasın) */
    .header-topbar,
    #masthead .header-topbar {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }

    /* Eğer Panelden Mobil Topbar kapalıysa o boşluğu sil */
    /* Not: PHP'den kapattıysan zaten çıkmaz ama CSS ile de garantiye alalım */
    .mobile-header-wrapper:empty {
        display: none;
    }
}

/* ==================================================
   MOBİLDE TOPBAR BOŞLUĞUNU YOK ETME
   ================================================== */

/* 1. Mobil Topbar'ı Tamamen Gizle */
.mobile-topbar {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* 2. Masaüstü Topbar'ın mobilde yer kaplamadığından emin ol */
@media (max-width: 992px) {
    .header-topbar {
        display: none !important;
    }
}

/* ==================================================
   MANŞET VE SIDEBAR GENİŞLİK GÜNCELLEMESİ
   Eski: %74 - %24
   Yeni: %60 - %38
   ================================================== */
.home-top-section.has-sidebar {
    /* Sol: %60 | Sağ: %38 | Arada %2 boşluk var */
    grid-template-columns: 68% 30% !important;
    gap: 2% !important;
}

/* Mobilde yine alt alta olsun (Bozulmasın diye garantiye alıyoruz) */
@media (max-width: 992px) {
    .home-top-section.has-sidebar {
        grid-template-columns: 1fr !important;
        display: block !important;
    }
}

/* ==================================================
   MOBİL MANŞET BAŞLIK DÜZELTMESİ
   (Yazı taşmasını ve sağa kaymayı önler)
   ================================================== */
@media (max-width: 768px) {
    .cm-caption {
        /* 1. TAŞMAYI ENGELLE (Sihirli Kod) */
        box-sizing: border-box !important;

        /* 2. Genişlik Ayarı */
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;

        /* 3. İç Boşlukları Mobilde Azalt (Daha fazla yer kalsın) */
        padding: 15px 35px !important;

        /* 4. Arkaplan Gradyanını Mobilde Biraz Yükselt */
        background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.9) 60%, transparent 100%) !important;
    }

    /* Başlık Fontunu Mobilde Törpüle */
    .cm-title {
        font-size: 18px !important;
        /* Mobilde dev gibi olmasın */
        line-height: 1.3 !important;
        white-space: normal !important;
        /* Satır sonuna gelince aşağı insin */
    }
}

/* ==================================================
   MODERN HABER WIDGET TASARIMI
   ================================================== */
.modern-news-widget {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Haberler arası boşluk */
}

/* Her Bir Haber Kutusu */
.mnw-item {
    display: flex;
    align-items: flex-start;
    /* Üstten hizala */
    gap: 15px;
    text-decoration: none;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    /* İnce çizgi */
    transition: transform 0.2s ease;
}

.mnw-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mnw-item:hover {
    transform: translateX(5px);
    /* Hoverda hafif sağa kayma */
}

/* Resim Alanı */
.mnw-thumb {
    width: 90px;
    /* Resim Genişliği */
    height: 70px;
    /* Resim Yüksekliği */
    flex-shrink: 0;
    border-radius: var(--global-radius, 4px);
    overflow: hidden;
    position: relative;
}

.mnw-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

.mnw-item:hover .mnw-thumb img {
    transform: scale(1.1);
    /* Resim zoom efekti */
}

/* İçerik Alanı */
.mnw-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Başlık */
.mnw-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--secondary-color, #2c3e50);
    margin: 0 0 5px 0;
    transition: 0.2s;

    /* Uzun başlıkları 2 satırda kes */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mnw-item:hover .mnw-title {
    color: var(--primary-color, #e74c3c);
}

/* Tarih */
.mnw-date {
    font-size: 11px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Resimsiz Mod (Eğer panelden resim kapatılırsa) */
.mnw-item.no-img .mnw-content {
    padding-left: 0;
}

/* Resimsiz modda başlık önüne numara efekti verebiliriz (Opsiyonel) */
.mnw-item.no-img {
    counter-increment: widget-counter;
}

.mnw-item.no-img .mnw-title::before {
    /* content: counter(widget-counter) ". "; */
    /* color: var(--primary-color); */
}

/* ==================================================
   MOBİLDE SIDEBAR / WIDGET KENAR BOŞLUĞU
   (Manşet tam ekran kalsın ama widgetlar nefes alsın)
   ================================================== */
@media (max-width: 992px) {

    /* Sidebar Alanına İç Boşluk Veriyoruz */
    .slider-sidebar-area {
        padding-left: 10px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        /* Kutu hesaplamasını düzelt */

        /* Widget ile Manşet arasını biraz açalım */
        margin-top: 10px !important;
    }

    /* Widget İçindeki Linkler Taşmasın */
    .mnw-item {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Başlıklar çok uzunsa kelimeyi kırmasın, alt satıra alsın */
    .mnw-title {
        word-wrap: break-word;
        white-space: normal;
    }
}

/* ==================================================
   WIDGET RENK DÜZELTMELERİ
   (Arkaplan rengi seçilince devreye girer)
   ================================================== */

/* Arkaplan varsa kenar çizgilerini kaldır veya şeffaflaştır */
.modern-news-widget.has-bg .mnw-item {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    /* Hafif silik çizgi */
    padding-left: 0;
    padding-right: 0;
}

/* Hover efektini renkliyken biraz daha belirgin yap */
.modern-news-widget.has-bg .mnw-item:hover {
    background: rgba(255, 255, 255, 0.05);
    /* Üzerine gelince hafif aydınlat */
    padding-left: 10px;
    /* İçeri kayma efekti */
    padding-right: 10px;
    border-radius: 4px;
}

/* ==================================================
   MASAÜSTÜ MANŞET YAZI TAŞMASINI ENGELLEME
   ================================================== */
.classic-manset-wrapper .cm-caption {
    /* 1. Kutu Hesabını Düzelt (Padding taşma yapmasın) */
    box-sizing: border-box !important;

    /* 2. Genişlik Sınırları */
    width: 100% !important;
    max-width: 100% !important;

    /* 3. Sağdan ve Soldan Güvenli Boşluk Bırak */
    padding-left: 30px !important;
    padding-right: 30px !important;

    /* 4. Taşanı Gizle ve Satırı Kır */
    overflow: hidden !important;
    white-space: normal !important;
    /* Yazı sığmazsa alt satıra geçsin */
}

.classic-manset-wrapper .cm-title {
    /* Çok uzun kelime varsa (örn: upuzunbirbaşlık...) onu da kır */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* ==================================================
   MOBİL MANŞET ZORUNLU DARALTMA
   ================================================== */
@media (max-width: 768px) {

    /* Önce Kapsayıcıyı Hedefleyelim */
    .classic-manset-wrapper .cm-caption,
    .cm-caption {
        /* 1. Genişliği otomatiğe çek (100% olmasın) */
        width: auto !important;

        /* 2. Sol ve Sağdan 20px uzakta dur (Fiziksel Boşluk) */
        left: 0px !important;
        right: 0px !important;

        /* 3. Alttan da biraz boşluk bırakalım, tam yapışmasın */
        bottom: -5px !important;

        /* 4. İçerik Ayarları */
        padding: 15px !important;
        box-sizing: border-box !important;

        /* Arkaplanı biraz daha netleştirelim ki kutuyu gör */
        background: linear-gradient(to top, #000 0%, rgba(0, 0, 0.8, 0.9) 60%, transparent 100%) !important;
        border-radius: 0px !important;
        /* Köşeleri yumuşat */
    }

    /* Başlık Font Ayarı */
    .cm-title {
        margin: 0 !important;
        width: 100% !important;
        white-space: normal !important;
    }
}

/* ==================================================
   MOZTHM MODERN GRID BİLEŞENİ TASARIMI
   ================================================== */

/* 1. Grid Konteyner (İskelet) */
.mozthm-grid-container {
    display: grid;
    gap: 20px;
    /* Kartlar arası boşluk */
    margin-bottom: 30px;
}

/* Sütun Ayarları (Panelden seçilen değere göre) */
.grid-col-1 {
    grid-template-columns: 1fr;
}

.grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 2. Kart Tasarımı (Kutu) */
.mg-card {
    background: #fff;
    border: 1px solid #eee;
    /* Çok ince çerçeve */
    border-radius: 8px;
    /* Yumuşak köşeler */
    overflow: hidden;
    /* Resim taşmasın */
    transition: all 0.3s ease;
    /* Animasyon */
    display: flex;
    flex-direction: column;
}

/* Hover Efekti: Kart yukarı kalkar ve gölge artar */
.mg-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

/* 3. Görsel Alanı */
.mg-thumb {
    position: relative;
    width: 100%;
    padding-top: 60%;
    /* 16:9 Oranında kalsın */
    overflow: hidden;
    background: #f1f1f1;
}

.mg-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Resim Zoom Efekti */
.mg-card:hover .mg-thumb img {
    transform: scale(1.1);
}

/* Kategori Etiketi (Resmin Sol Üstünde) */
.mg-cat-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--primary-color, #e74c3c);
    /* Tema rengi veya Kırmızı */
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 4. İçerik Alanı */
.mg-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    /* Kart boylarını eşitlemek için */
}

/* Başlık */
.mg-title {
    margin: 0;
    line-height: 1.4;
    color: #222;
}

.mg-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;

    /* Uzun başlıkları 3 satırda kes */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mg-card:hover .mg-title a {
    color: var(--primary-color);
}

/* Meta (Tarih) */
.mg-meta {
    margin-top: auto;
    /* Meta'yı en alta it */
    padding-top: 10px;
}

.mg-date {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ==================================================
   RESPONSIVE (MOBİL UYUM)
   ================================================== */

/* Tablet (992px altı): 4'lü ve 3'lüleri 2'ye düşür */
@media (max-width: 992px) {

    .grid-col-4,
    .grid-col-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobil (576px altı): Her şeyi tek sütun yap */
@media (max-width: 576px) {
    .mozthm-grid-container {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    /* Mobilde resim oranını biraz küçültelim */
    .mg-thumb {
        padding-top: 56.25%;
        /* Tam YouTube standardı */
    }

    .mg-title {
        font-size: 16px !important;
        /* Mobilde fontu çok küçültme */
    }
}

/* ==================================================
   ANASAYFA ORTA BÖLÜM (CONTENT + SIDEBAR) TASARIMI
   ================================================== */
.home-content-section {
    margin-top: 30px;
    margin-bottom: 50px;
}

/* Kapsayıcı Grid Yapısı */
.content-section-inner {
    display: grid;
    /* Varsayılan: Tek Sütun (Sağ taraf yoksa) */
    grid-template-columns: 100%;
    gap: 30px;
}

/* --- EĞER SAĞ TARAFTA BİLEŞEN VARSA --- */
/* Manşet bölümüyle aynı oranları kullanıyoruz: %60 - %38 */
.home-content-section.has-sidebar .content-section-inner {
    grid-template-columns: 68% 30%;
    gap: 2%;
    /* Aradaki boşluk */
}



.content-right-sidebar {
    min-width: 0;
}

/* Sidebar İçindeki Widgetlar Arası Boşluk */
.content-right-sidebar .widget {
    margin-bottom: 30px;
}

/* --- MOBİL UYUM (992px Altı) --- */
@media (max-width: 992px) {

    /* Mobilde her zaman alt alta olsun */
    .home-content-section.has-sidebar .content-section-inner {
        grid-template-columns: 100% !important;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
}

/* ==================================================
   ANASAYFA ORTA (SOL) ALAN - KUTUYU KALDIRMA
   ================================================== */
/* Sol alandaki Widget'ın dış çerçevesini, beyazlığını yok et */
.content-left-area .widget {
    background: transparent !important;
    /* Arkaplan şeffaf */
    box-shadow: none !important;
    /* Gölge yok */
    border: none !important;
    /* Kenarlık yok */
    padding: 0 !important;
    /* İç boşluk sıfır */
    margin-bottom: 30px !important;
}

/* Eğer başlık da kutunun içinde sıkışmışsa onu da rahatlat */
.content-left-area .widget-title {
    margin-bottom: 20px !important;
    /* Başlık ile kartlar arasına boşluk */
    padding-left: 0 !important;
    /* Soldan sıfırla */
    background: transparent !important;
    border-bottom: 2px solid var(--primary-color, #e74c3c);
    /* Altına şık bir çizgi (isteğe bağlı) */
    display: inline-block;
    /* Çizgi yazı kadar olsun istersen */
    width: 100%;
    /* Veya boydan boya çizgi */
}

/* ==================================================
   SOL HİZALAMA DÜZELTMESİ (MANŞET İLE AYNI HİZA)
   ================================================== */

/* 1. Sol Sütunun Kendi Boşluğunu Sıfırla */
.content-left-area {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 2. Widget Başlığını Sola Yapıştır */
.content-left-area .widget-title {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 3. Grid Haber Kartlarını Sola Yapıştır */
.content-left-area .mozthm-grid-container {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 4. Widget Kapsayıcısını Garantiye Al */
.content-left-area .widget {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* ==================================================
   SOL ALANI ZORLA HİZALAMA (SOLA ÇEKME)
   ================================================== */
@media (min-width: 993px) {
    /* Sadece Masaüstünde */

    .content-left-area {
        /* Bu değer standarttır, eğer az gelirse -20px, çok gelirse -10px yap */
        margin-left: -15px !important;

        /* Sola çekince sağdan boşluk açılır, onu telafi et */
        width: calc(100% + 15px) !important;

        position: relative;
        z-index: 1;
    }

    /* Izgara sisteminin bu çekmeden bozulmaması için */
    .home-content-section.has-sidebar .content-section-inner {
        /* Sol sütun genişliğini biraz artırıp dengeleyelim */
        grid-template-columns: 68% 30% !important;
        gap: 2% !important;
    }
}

/* ==================================================
   KÖŞE YUVARLAKLIĞI (PANEL BAĞLANTISI)
   ================================================== */

/* 1. Grid Kartları */
.mg-card {
    border-radius: var(--moz-radius, 8px) !important;
}

/* 2. Grid Görsel Alanı (Gerekirse) */
.mg-thumb {
    border-radius: var(--moz-radius, 8px) !important;
}

/* 3. Yan Sidebar Haber Widget Resimleri */
.mnw-thumb {
    border-radius: var(--moz-radius, 8px) !important;
}

/* 4. Carousel (Slider) Okları */
.swiper-button-prev-custom,
.swiper-button-next-custom {
    border-radius: 50%;
    /* Oklar hep yuvarlak kalsın dersen bu satırı SİL */
    /* Veya kare yapmak istersen: */
    /* border-radius: var(--moz-radius, 50%) !important; */
}

/* 5. Etiketler (Kategori Butonları) */
.mg-cat-tag {
    border-radius: var(--moz-radius, 4px) !important;
}

/* ==================================================
   GRID KARTLARI - HOVER EFEKTLERİNİ İPTAL ET
   (Gölge, Yukarı Kalkma ve Zoom Yok)
   ================================================== */

/* 1. Kartın kendisi kıpırdamasın ve gölge yapmasın */
.mg-card:hover {
    transform: none !important;
    /* Yukarı kalkma iptal */
    box-shadow: none !important;
    /* Gölge iptal */
    border-color: #eee !important;
    /* Kenarlık rengi sabit kalsın */
}

/* 2. Resim yakınlaşmasın (Zoom iptal) */
.mg-card:hover .mg-thumb img {
    transform: none !important;
}

/* 3. Başlık rengi değişsin mi? (İstersen bunu da iptal edebilirsin) */
/* Eğer başlık rengi de değişmesin istiyorsan alttaki satırın başındaki // işaretlerini kaldır */
/* .mg-card:hover .mg-title a { color: inherit !important; } */

/* ==================================================
   GRID ÇERÇEVESİZ MOD VE YENİ TARİH TASARIMI
   ================================================== */

/* 1. ÇERÇEVESİZ MOD (Panelden seçildiyse) */
.grid-no-border .mg-card {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Çerçevesizse içerik padding'ini sıfırla (Resimle hizala) */
.grid-no-border .mg-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 8px !important;
    /* Resim ile yazı arasına biraz boşluk */
}

/* Hover efektlerini de çerçevesizde tamamen kapat */
.grid-no-border .mg-card:hover {
    transform: none !important;
    box-shadow: none !important;
}


/* 2. YENİ TARİH STİLİ (BAŞLIK ÜSTÜNDE) */
.mg-meta-top {
    margin-bottom: 2px;
    /* Başlık ile arası */
    display: flex;
    align-items: center;
}

.mg-date-modern {
    font-size: 12px;
    font-weight: 500;
    color: #888;
    /* Gri modern renk */
    text-transform: uppercase;
    /* BÜYÜK HARF */
    letter-spacing: 0.5px;
    /* Harf aralığı */
    display: flex;
    align-items: center;
    gap: 5px;
}

.mg-date-modern svg {
    color: var(--primary-color, #e74c3c);
    /* İkon Rengi */
    margin-top: -1px;
    /* İkon hizalaması */
}

/* ==================================================
   ANASAYFA ORTA (SAĞ) SIDEBAR - ŞEFFAFLAŞTIRMA
   ================================================== */
.content-right-sidebar .widget {
    background: transparent !important;
    /* Beyaz arkaplanı kaldır */
    box-shadow: none !important;
    /* Gölgeyi kaldır */
    border: none !important;
    /* Çerçeveyi kaldır */
    padding: 0 !important;
    /* İç boşlukları sıfırla */
    margin-bottom: 30px !important;
    /* Alt alta yapışmasınlar */
}

/* Başlık Ayarları (Sola yapışsın) */
.content-right-sidebar .widget-title {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    /* Başlık altı çizgisi kalsın dersen bu satırı elleme, silinsin dersen border: none yap */
    border-bottom: 2px solid var(--primary-color, #e74c3c) !important;
    display: inline-block;
    width: 100%;
}

/* Eğer Widget içindeki liste öğelerinde (li) border varsa onları da uçur */
.content-right-sidebar .widget li {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    /* Çok hafif bir ayraç kalsın */
    padding: 10px 0 !important;
}

.content-right-sidebar .widget li:last-child {
    border-bottom: none !important;
}

/* ==================================================
   ANASAYFA ÜST (MANŞET YANI) - ŞEFFAFLAŞTIRMA
   ================================================== */
/* Manşet yanındaki widgetların beyazlığını sil */
.home-top-section .widget {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
}

/* Başlıkları da şeffaf yap ve hizala */
.home-top-section .widget-title {
    background: transparent !important;
    padding: 0 !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid var(--primary-color, #e74c3c) !important;
    /* Alt çizgi kalsın */
    display: block !important;
    width: 100% !important;
}

/* Eğer liste varsa (Son Yazılar vb.) aradaki çizgileri incelt */
.home-top-section .widget ul li {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Çok hafif çizgi */
    padding: 10px 0 !important;
}

/* Son elemanın alt çizgisini kaldır */
.home-top-section .widget ul li:last-child {
    border-bottom: none !important;
}

/* ==================================================
   ANA YAN PANEL (DETAY SAYFALARI) - ÇERÇEVE KALDIRMA
   ================================================== */

/* 1. Geniş Kapsamlı Hedefleme (Section, Aside, Div) */
#secondary .widget,
#sidebar .widget,
.sidebar .widget,
.sidebar-area .widget,
.widget-area .widget {
    background: transparent !important;
    /* Beyaz arkaplanı sil */
    background-color: transparent !important;
    border: none !important;
    /* Çerçeveyi sil */
    box-shadow: none !important;
    /* Gölgeyi sil */
    padding: 0 !important;
    /* İç boşluğu sil */
    margin-bottom: 30px !important;
    /* Alt alta yapışmasın */
}

/* 2. Başlıkları da buna uydur */
#secondary .widget-title,
#sidebar .widget-title,
.sidebar .widget-title,
.sidebar-area .widget-title {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    border: none !important;
    /* Varsayılan tüm borderları sil */
    border-bottom: 2px solid var(--primary-color, #e74c3c) !important;
    /* Sadece alt çizgi kalsın */
    display: block;
    width: 100%;
}

/* 3. Widget içindeki liste çizgilerini hafiflet */
#secondary .widget ul li,
.sidebar .widget ul li {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    /* Çok silik çizgi */
    padding: 10px 0 !important;
}

#secondary .widget ul li:last-child,
.sidebar .widget ul li:last-child {
    border-bottom: none !important;
}

/* ==================================================
   MODERN LİSTE (YATAY) BİLEŞENİ TASARIMI
   ================================================== */

.mozthm-list-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Haberler arası boşluk */
}

/* Tekil Liste Kartı */
.ml-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    /* Resim ile yazı arası boşluk */
    transition: all 0.3s ease;
}

/* 1. Resim Alanı */
.ml-thumb {
    width: 240px;
    /* Sabit Genişlik */
    flex-shrink: 0;
    /* Asla küçülmesin */
    position: relative;
    border-radius: var(--moz-radius, 8px);
    overflow: hidden;
    aspect-ratio: 16/9;
    /* Video formatı */
}

.ml-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Hover Efekti (Sadece resim zoom) */
.ml-item:hover .ml-thumb img {
    transform: scale(1.1);
}

/* 2. İçerik Alanı */
.ml-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Dikey ortala */
}

/* Başlık */
.ml-title {
    margin: 0;
    line-height: 1.35;
    color: #222;
}

.ml-title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.ml-item:hover .ml-title a {
    color: var(--primary-color, #e74c3c);
}

/* Özet Metin */
.ml-excerpt {
    font-size: 14px;
    color: #666;
    margin: 8px 0 0 0;
    line-height: 1.5;

    /* 2 satırdan fazlasını gizle */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- ÇERÇEVELİ VE ÇERÇEVESİZ MOD --- */

/* A) Çerçeveli Mod (Panelden Açılırsa) */
.list-has-border .ml-item {
    background: #fff;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: var(--moz-radius, 8px);
}

.list-has-border .ml-item:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-color: transparent;
}

/* B) Çerçevesiz Mod (Varsayılan) */
.list-no-border .ml-item {
    background: transparent;
    padding: 0;
    border: none;
    /* Altına ince bir çizgi atalım ki karışmasın */
    border-bottom: 1px solid #eee;
    padding-bottom: 25px;
}

.list-no-border .ml-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* --- MOBİL UYUM --- */
@media (max-width: 576px) {
    .ml-item {
        flex-direction: column;
        /* Mobilde alt alta olsun */
    }

    .ml-thumb {
        width: 100%;
        /* Resim tam genişlik */
        aspect-ratio: 16/9;
    }

    .ml-excerpt {
        display: none;
        /* Mobilde özeti gizle, kalabalık etmesin */
    }
}

/* ==================================================
   MOBİL LİSTE GÖRÜNÜM AYARLARI
   ================================================== */

@media (max-width: 576px) {

    /* SEÇENEK 1: "Alt Alta" (Stack) Seçildiyse */
    .mobile-layout-stack .ml-item {
        flex-direction: column !important;
        /* Alt alta diz */
    }

    .mobile-layout-stack .ml-thumb {
        width: 100% !important;
        /* Resim tam genişlik */
        aspect-ratio: 16/9;
    }

    .mobile-layout-stack .ml-excerpt {
        display: none;
        /* Mobilde özeti her türlü gizle ki yer açılsın */
    }


    /* SEÇENEK 2: "Yan Yana" (List) Seçildiyse */
    .mobile-layout-list .ml-item {
        flex-direction: row !important;
        /* Yan yana zorla */
        align-items: center !important;
        /* Ortala */
        gap: 15px !important;
    }

    /* Resmi ufalt ve kare yap */
    .mobile-layout-list .ml-thumb {
        width: 110px !important;
        height: 110px !important;
        flex-shrink: 0;
        aspect-ratio: 1/1 !important;
        /* Kare olsun */
    }

    /* Özet Metni KESİNLİKLE Gizle (Çorba olmasın) */
    .mobile-layout-list .ml-excerpt {
        display: none !important;
    }

    /* Başlık Fontunu Mobilde Törpüle */
    .mobile-layout-list .ml-title {
        font-size: 15px !important;
        /* Çok büyük olmasın */
        line-height: 1.3 !important;
    }

    /* Kategori etiketini mobilde gizleyebiliriz (Opsiyonel - Yer açmak için) */
    .mobile-layout-list .mg-cat-tag {
        display: none !important;
    }
}

/* ==================================================
   MOBİL İÇİN SOL/SAĞ HİZALAMA VE DENGELEME
   ================================================== */
@media (max-width: 768px) {

    /* 1. Kapsayıcı (Container) Ayarı */
    /* Ekranın her iki yanından 10'ar px boşluk bırak */
    .home-content-section .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 2. İç Sütun (Column) Boşluklarını ÖLDÜR */
    /* Sorun burada: Temanın "col-md-8" gibi sınıfları soldan 15px veriyor. Bunu sıfırlıyoruz. */
    .content-left-area {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* 3. Widget'ın Kendisi */
    /* Sağa sola taşma yapmasın, kutunun içine tam otursun */
    .content-left-area .widget {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* 4. Grid ve Liste Konteynerleri */
    .mozthm-grid-container,
    .mozthm-list-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
}

/* ==================================================
   MOZTHM ÖZEL LAYOUT SİSTEMİ (TEMİZ KOD)
   ================================================== */

.mozthm-custom-section {
    margin-top: 30px;
    margin-bottom: 50px;
}

/* 1. Satır Yapısı (Flexbox) */
.mozthm-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* Sağa sola yasla */
    gap: 30px;
    /* İki sütun arası boşluk */
}

/* 2. Sol Sütun (İçerik) */
.mozthm-col-left {
    flex: 1;
    /* Kalan boşluğu doldur */
    min-width: 0;
    /* Taşmayı önler */
}

/* 3. Sağ Sütun (Sidebar) */
.mozthm-col-right {
    width: 330px;
    /* Sabit genişlik (İstersen yüzde verebiliriz: 35%) */
    flex-shrink: 0;
    /* Asla küçülmesin */
}

/* Eğer sağ taraf boşsa sol taraf %100 olsun */
.mozthm-row:not(:has(.mozthm-col-right)) .mozthm-col-left {
    width: 100%;
}


/* --- WIDGET GENEL STİLİ (TABLO GÖRÜNÜMÜNÜ İPTAL ETME) --- */
.mozthm-widget {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 30px;
}

/* Başlık Stili */
.mozthm-widget-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color, #e74c3c);
    display: block;
}


/* ==================================================
   📱 MOBİL UYUM (KESİN DÜZEN)
   ================================================== */
@media (max-width: 992px) {

    /* Tablet ve Mobilde Alt Alta Olsun */
    .mozthm-row {
        flex-direction: column;
        gap: 40px;
    }

    .mozthm-col-left,
    .mozthm-col-right {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    /* MOBİLDE KENAR BOŞLUKLARI AYARI */

    /* Container'ın kenarlarını 10px yapıyoruz */
    .mozthm-custom-section .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* İçerik Sütunu TAM GENİŞLİK */
    .mozthm-col-left {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Widgetlar TAM GENİŞLİK */
    .mozthm-widget {
        width: 100% !important;
        margin: 0 0 30px 0 !important;
    }

    /* Grid ve List Konteynerleri */
    .mozthm-grid-container,
    .mozthm-list-container {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ==================================================
   YENİ ALAN HİZALAMA AYARI (SOLA SIFIRLAMA)
   ================================================== */

/* Sadece Masaüstü (993px ve üstü) için geçerli */
/* Mobilde zaten kenarlarda 10px kalsın istiyorduk, ona dokunmuyoruz */
@media (min-width: 993px) {

    /* 1. Konteynerin İç Boşluğunu Al */
    .mozthm-custom-section .container {
        padding-left: 0 !important;
        /* Soldaki boşluğu öldür */
        padding-right: 0 !important;
        /* Sağdaki boşluğu öldür */
    }

    /* 2. Satırın Kenar Boşluklarını Nötrle */
    .mozthm-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. İç Sütunu Garantiye Al */
    .mozthm-col-left {
        padding-left: 0 !important;
    }
}

/* ==================================================
   CİHAZ GÖRÜNÜRLÜK AYARLARI (GİZLE/GÖSTER)
   ================================================== */

/* 1. "Sadece Masaüstünde Göster" seçildiyse -> Mobilde Gizle */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* 2. "Sadece Mobilde Göster" seçildiyse -> Masaüstünde Gizle */
@media (min-width: 769px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* ==================================================
   FOOTER TASARIMI (MODERN & ESNEK)
   ================================================== */

.mozthm-main-footer {
    padding: 60px 0;
    margin-top: 50px;
    font-size: 15px;
    line-height: 1.6;
}

.mozthm-main-footer .footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
}

/* --- SÜTUNLAR --- */
.footer-col {
    flex: 1;
    min-width: 250px;
    /* Çok küçülmesin */
}

/* 1. Sütun (Bilgi) Biraz daha geniş olabilir */
.footer-col-info {
    flex: 1.5;
    /* Diğerlerinden 1.5 kat geniş */
}

/* Logo */
.footer-logo img {
    max-width: 180px;
    height: auto;
    margin-bottom: 20px;
    display: block;
}

/* Açıklama */
.footer-desc {
    margin-bottom: 25px;
    max-width: 90%;
}

/* Sosyal İkonlar (Basit kutular) */
.footer-socials {
    display: flex;
    gap: 10px;
}

.footer-socials a {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    transition: all 0.3s ease;
}

.footer-socials a:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* --- MENÜLER --- */
.footer-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid;
    /* Renk PHP'den gelecek */
    display: inline-block;
    opacity: 0.9;
}

.footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu-list li {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Çok silik çizgi */
    padding-bottom: 10px;
}

.footer-menu-list li:last-child {
    border-bottom: none;
}

.footer-menu-list li a {
    text-decoration: none;
    color: inherit;
    /* Footerın ana rengini miras alır */
    opacity: 0.7;
    transition: opacity 0.2s, padding-left 0.2s;
    display: block;
}

.footer-menu-list li a:hover {
    opacity: 1;
    padding-left: 5px;
    /* Hoverda sağa kayma efekti */
}

/* --- ALT TELİF ALANI (SUB FOOTER) --- */
.sub-footer {
    background: #111;
    color: #888;
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- MOBİL UYUM --- */
@media (max-width: 768px) {
    .mozthm-main-footer {
        padding: 40px 0;
        text-align: center;
        /* Mobilde ortala */
    }

    .footer-col-info {
        flex: 1;
        /* Mobilde eşitlensin */
        margin-bottom: 30px;
    }

    .footer-desc {
        margin: 0 auto 20px auto;
        /* Ortala */
    }

    .footer-socials {
        justify-content: center;
        /* İkonları ortala */
    }

    .footer-title {
        display: block;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* ==================================================
   CODESTAR FOOTER TASARIMI
   ================================================== */
.csf-footer-area {
    padding: 60px 0;
    margin-top: 50px;
    font-size: 15px;
    line-height: 1.6;
}

.csf-footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
}

/* Sütun Ayarları */
.csf-col {
    flex: 1;
    min-width: 250px;
}

/* 1. Sütun (Bilgi Alanı) daha geniş olsun */
.csf-col-info {
    flex: 1.5;
}

/* Logo & Görsel */
.f-logo img {
    max-width: 180px;
    height: auto;
    margin-bottom: 25px;
}

/* Sosyal Medya Butonları */
.f-socials {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.f-socials a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
}

/* Menü Başlıkları */
.f-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid;
    /* Rengi PHP'den alıyor */
    display: inline-block;
}

/* Menü Listeleri */
.f-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.f-menu li {
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

.f-menu li:last-child {
    border: none;
}

.f-menu a {
    text-decoration: none;
    display: block;
    transition: all 0.3s;
}

/* Alt Copyright Kısmı */
.copyright-area {
    background: #111;
    color: #888;
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .csf-footer-row {
        flex-direction: column;
        /* Alt alta diz */
        text-align: center;
    }

    .f-socials {
        justify-content: center;
    }

    .f-title {
        display: block;
        width: 100%;
    }
}

/* ==================================================
   PREMIUM FOOTER TASARIMI (V3 - FİNAL)
   ================================================== */

.csf-footer-area {
    /* 1. Yükseklik Ayarı: Boşlukları azalttık (60px'den 40px'e) */
    padding: 45px 0 35px 0;
    margin-top: 40px;
    font-size: 14px;
    /* Fontu tık küçültüp kibarlaştırdık */
    line-height: 1.6;
}

.csf-footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* 2. Hizalama Ayarı: Her şey en tepeden başlasın */
    align-items: flex-start;
    gap: 40px;
}

/* --- SÜTUN GENİŞLİKLERİ VE YAYILIM --- */

/* SOL (Logo & Bilgi) */
.csf-col-info {
    flex: 0 0 260px;
    /* Sabit, derli toplu genişlik */
    max-width: 260px;
}

/* ORTA (Kategoriler) - En geniş alan */
.csf-footer-row .csf-col:nth-child(2) {
    flex: 2;
    /* 2 birim yer kapla */
}

/* SAĞ (Kurumsal) - Eskisinden daha geniş */
.csf-footer-row .csf-col:nth-child(3) {
    flex: 1.2;
    /* 2 sütun sığacak kadar yer açtık */
}


/* --- İÇERİK DÜZENİ VE GRID YAPILARI --- */

/* Başlıklar */
.f-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    /* Alt boşluk */
    padding-bottom: 10px;
    border-bottom: 2px solid;
    display: inline-block;

    /* 3. Logo ile Hiza Ayarı */
    /* Başlıkların üst boşluğunu sıfırlıyoruz ki logo ile aynı hizaya gelsin */
    margin-top: 0;
    line-height: 1.2;
}

/* Logo Ayarı */
.f-logo img {
    max-width: 160px;
    height: auto;
    display: block;
    /* Logo görselinin üstündeki olası boşlukları yiyoruz */
    margin-top: -5px;
    margin-bottom: 20px;
}

/* KATEGORİLER (3 Sütunlu Grid) */
.csf-footer-row .csf-col:nth-child(2) .f-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Sütun */
    column-gap: 20px;
    row-gap: 8px;
}

/* KURUMSAL (2 Sütunlu Grid - YENİ İSTEK) */
.csf-footer-row .csf-col:nth-child(3) .f-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Sütun */
    column-gap: 20px;
    row-gap: 8px;
}

/* Link Stilleri (Ortak) */
.f-menu a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    white-space: nowrap;
    /* Satır kırılmasın */
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-menu a:hover {
    padding-left: 3px;
    opacity: 1 !important;
}

/* Sosyal Medya (Daha Kompakt) */
.f-socials {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

.f-socials a {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 3px;
    opacity: 0.7;
}

.f-socials a:hover {
    opacity: 1;
}

/* Açıklama Yazısı */
.f-desc {
    font-size: 13px;
    opacity: 0.7;
    margin-bottom: 15px;
}


/* --- MOBİL UYUM (Responsive) --- */
@media (max-width: 992px) {
    .csf-footer-row {
        flex-direction: column;
        gap: 30px;
    }

    .csf-col-info,
    .csf-footer-row .csf-col:nth-child(2),
    .csf-footer-row .csf-col:nth-child(3) {
        flex: auto;
        width: 100%;
        max-width: 100%;
    }

    /* Mobilde sütun sayılarını düşür */
    .csf-footer-row .csf-col:nth-child(2) .f-menu {
        grid-template-columns: repeat(2, 1fr);
        /* Kategoriler 2 sütun olsun */
    }

    /* Kurumsal mobilde tek veya iki olabilir, 2 iyidir */
    .csf-footer-row .csf-col:nth-child(3) .f-menu {
        grid-template-columns: repeat(2, 1fr);
    }

    .f-logo img {
        margin-top: 0;
    }

    /* Mobilde negatife gerek yok */
}

/* ==================================================
   GELİŞMİŞ ALT ÇUBUK (COPYRIGHT)
   ================================================== */
.copyright-area.sub-footer-modern {
    background: #111;
    /* Koyu gri */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #999;
    font-size: 13px;
    /* Yükseklik padding ile PHP'den geliyor */
}

/* Flexbox ile İkiye Bölme */
.sf-row {
    display: flex;
    justify-content: space-between;
    /* Biri en sola, biri en sağa */
    align-items: center;
    /* Dikey ortala */
    flex-wrap: wrap;
    gap: 20px;
}

/* Sol Yazı */
.sf-left p {
    margin: 0;
}

.sf-left strong {
    color: #fff;
}

/* Sağ Menü */
.sf-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.sf-menu-list li a {
    text-decoration: none;
    color: #999;
    transition: 0.3s;
}

.sf-menu-list li a:hover {
    color: #fff;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .sf-row {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
}

/* ==================================================
   MOBİL FOOTER AKORDEON (AÇILIR/KAPANIR) SİSTEMİ
   ================================================== */

@media (max-width: 992px) {

    /* 1. Menüleri Başlangıçta Gizle */
    .csf-col-menu .f-menu {
        display: block !important;
        /* Grid yapısını resetle */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        /* Kayarak açılma efekti */
        margin-top: 0 !important;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }

    /* 2. Menü Açıldığında (JS ile 'menu-open' sınıfı gelince) */
    .csf-col-menu .f-menu.menu-open {
        max-height: 1000px;
        /* Yeterince büyük bir değer */
        opacity: 1;
        transform: translateY(0);
        margin-top: 15px !important;
        margin-bottom: 20px !important;

        /* Açılınca İçerik Düzeni (Yine 2 Sütun Olsun) */
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 10px;
    }

    /* 3. Başlıkları Tıklanabilir Yap */
    .csf-col-menu .f-title {
        cursor: pointer;
        position: relative;
        display: block;
        width: 100%;
        margin-bottom: 0 !important;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        /* Başlık altına hafif çizgi */
        /* Hiza olayını mobilde resetle */
        margin-top: 0 !important;
    }

    /* 4. Başlığın Sağına "+" İşareti Koy */
    .csf-col-menu .f-title::after {
        content: '+';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        font-weight: 400;
        transition: transform 0.3s ease;
    }

    /* 5. Tıklanınca "+" İşaretini "x" veya "-" Yap */
    .csf-col-menu .f-title.active::after {
        content: '-';
        transform: translateY(-50%) rotate(180deg);
        color: var(--primary-color, #e74c3c);
        /* Aktif olunca renkli olsun */
    }

    /* Aktif başlığın alt çizgisini kaldır (Menüyle bütünleşsin) */
    .csf-col-menu .f-title.active {
        border-bottom: none;
    }

    /* 6. Logo ve Bilgi Alanı (En üst kısım) */
    .csf-col-info {
        text-align: center;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .f-logo img {
        margin: 0 auto 20px auto !important;
    }

    .f-socials {
        justify-content: center;
    }
}

/* ==================================================
   SINGLE (DETAY) SAYFASI TASARIMI
   ================================================== */

/* ==================================================
   BREADCRUMB (YOL HARİTASI) - GÜNCELLENDİ
   ================================================== */
.mozthm-breadcrumbs {
    font-size: 13px;
    color: #888;
    margin-bottom: 15px;
    /* Alt boşluğu biraz artırdık */

    /* Hizalama ve Ferahlık */
    display: flex;
    flex-wrap: wrap;
    /* Mobilde taşarsa aşağı insin */
    align-items: center;
    /* Dikeyde tam ortalasın */
    line-height: 1.5;
}

/* Linkler */
.mozthm-breadcrumbs a {
    color: #555;
    text-decoration: none;
    font-weight: 300;
    /* Linkler tık daha kalın olsun */
    transition: color 0.2s;

    /* İkon ve yazıyı hizala */
    display: inline-flex;
    align-items: center;
}

.mozthm-breadcrumbs a:hover {
    color: #000;
    /* Üzerine gelince koyulaşsın */
}

/* İkon (Ev simgesi) Ayarı */
.mozthm-breadcrumbs i {
    margin-right: 3px;
    /* İkon ile yazı arasına mesafe */
    opacity: 0.7;
    font-size: 12px;
}

/* Araya Giren Ayraç (/) */
.mozthm-breadcrumbs .sep {
    margin: 0 12px;
    /* İŞTE ÇÖZÜM: Sağdan soldan 12px itiyoruz */
    color: #ccc;
    /* Rengi silik olsun */
    font-size: 11px;
}

/* Son Eleman (Yazı Başlığı) */
.mozthm-breadcrumbs .current {
    color: #999;
    font-weight: 400;
}

/* Header & Başlık */
.entry-header {
    margin-bottom: 30px;
}

.entry-cat a {
    background: var(--primary-color, #e74c3c);
    color: #fff;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    margin-right: 3px;
    text-decoration: none;
}

.entry-title {
    margin-top: 15px;
    margin-bottom: 15px;
    /* Font ayarı panelden gelecek ama default verelim */
    font-size: 32px;
    line-height: 1.3;
    color: #111;
}

/* Meta Bar */
.entry-meta-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    color: #666;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.entry-meta-bar img {
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.meta-item i {
    margin-right: 5px;
    color: #999;
}

.meta-item.author a {
    color: #111;
    font-weight: 600;
    text-decoration: none;
}

/* Öne Çıkan Görsel */
.single-featured-image {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.single-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* İçerik Tipografisi (Jannah Tarzı) */
.entry-content {
    font-size: 17px;
    line-height: 1.7;
    color: #333;
}

.entry-content p {
    margin-bottom: 20px;
}

.entry-content h2,
.entry-content h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 700;
}

.entry-content blockquote {
    border-left: 4px solid var(--primary-color, #e74c3c);
    background: #f9f9f9;
    padding: 20px;
    font-style: italic;
    margin: 30px 0;
}

/* Sosyal Paylaşım */
.mozthm-share-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

.share-title {
    font-weight: 700;
    font-size: 14px;
    margin-right: 5px;
}

.share-btn {
    padding: 8px 15px;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.share-btn.fb {
    background: #3b5998;
}

.share-btn.tw {
    background: #1da1f2;
}

.share-btn.wa {
    background: #25d366;
}

.share-btn:hover {
    opacity: 0.9;
    color: #fff;
}

/* Inline Reklam/Öneri (Yazı İçi) */
.inline-related-post {
    border-top: 2px solid #eee;
    border-bottom: 2px solid #eee;
    padding: 15px 0;
    margin: 30px 0;
    font-family: var(--heading-font, sans-serif);
}

.inline-related-post span {
    font-weight: 700;
    color: var(--primary-color, #e74c3c);
    margin-right: 10px;
}

.inline-related-post a {
    text-decoration: none;
    color: #111;
    font-weight: 600;
    font-size: 18px;
}

/* Etiketler */
.tags-container {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.tags-label {
    font-weight: 700;
    margin-right: 10px;
}

.tags-container a {
    display: inline-block;
    background: #f1f1f1;
    color: #555;
    padding: 5px 10px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: 5px;
    transition: 0.2s;
}

.tags-container a:hover {
    background: var(--primary-color, #e74c3c);
    color: #fff;
}

/* Yazar Kutusu (Modern) */
.author-box-modern {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    margin-top: 50px;
    display: flex;
    gap: 20px;
    border: 1px solid #eee;
}

.ab-avatar img {
    border-radius: 50%;
}

.ab-name {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.ab-name span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
}

.ab-name a {
    text-decoration: none;
    color: #111;
}

.ab-bio {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .author-box-modern {
        flex-direction: column;
        text-align: center;
    }

    .ab-avatar {
        margin: 0 auto;
    }

    .entry-title {
        font-size: 24px;
    }
}

/* Benzer Haberler Grid */
.related-posts-section {
    margin-top: 10px;
}

.section-heading {
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    font-size: 20px;
}

.section-heading span {
    border-bottom: 2px solid var(--primary-color, #e74c3c);
    padding-bottom: 5px;
    display: inline-block;
    margin-bottom: -2px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.related-card {
    text-decoration: none;
    color: inherit;
}

.related-thumb {
    height: 160px;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 10px;
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

.related-card:hover .related-thumb img {
    transform: scale(1.1);
}

.related-info h4 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
}

.related-info .date {
    font-size: 12px;
    color: #999;
}

@media (max-width: 768px) {
    .related-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================
   SINGLE FULL WIDTH (TEMİZ & SOLA YASLI) TASARIMI
   ================================================== */

.single-hero-header {
    background: transparent !important;
    /* Gri arkaplanı kaldır */
    padding: 0 0 30px 0;
    /* Üst boşluğu sıfırla, alta biraz pay ver */
    margin-bottom: 30px;
    /* İçerikle arasına mesafe koy */
    border-bottom: 1px solid #eee;
    /* Altına ince, kibar bir çizgi çek */
    text-align: left !important;
    /* Hepsini SOLA YASLA */
}

/* Başlık Ayarları */
.hero-title {
    font-size: 36px;
    /* Başlık boyutu (İstersen büyüt) */
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    margin: 15px 0 20px 0;
    /* Başlığın alt/üst boşlukları */
    max-width: 100%;
    /* Genişliği kısıtlama, container kadar uzasın */
}

/* Kategori */
.single-hero-header .hero-cat {
    margin-bottom: 15px;
    text-align: left;
}

/* Kategori etiketi stili globalden gelir, dokunmuyoruz */

/* Meta Bilgileri (Yazar, Tarih) */
.hero-meta {
    justify-content: flex-start !important;
    /* Flex öğelerini SOLA yasla */
    gap: 20px;
    /* Aralarına boşluk koy */
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Breadcrumb (Yol Haritası) */
.single-hero-header .mozthm-breadcrumbs {
    justify-content: flex-start !important;
    /* SOLA yasla */
    margin-bottom: 15px;
    padding-top: 20px;
    /* En tepeye yapışmasın diye biraz boşluk */
}

/* MOBİL AYARLAR */
@media (max-width: 768px) {
    .hero-title {
        font-size: 26px;
    }

    /* Mobilde başlık taşmasın */
    .single-hero-header {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
}

/* ==================================================
   FULL HEADER HİZALAMA & MODERN İKONLAR
   ================================================== */

/* Ana Taşıyıcı: Flex ile İkiye Böl */
.hero-meta-wrapper {
    display: flex;
    justify-content: space-between;
    /* Biri en sola, biri en sağa */
    align-items: center;
    /* Dikey ortala */
    flex-wrap: wrap;
    /* Mobilde alt alta düşsün */
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    /* Başlık ile arasına çizgi */
}

/* SOL Taraf: Meta (Yazar vs.) */
.hero-meta-left {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Yazar Detayı (İsim ve "Yazar" yazısı alt alta) */
.author-details {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    margin-left: 10px;
}

.author-details .by {
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
}

.meta-item.author {
    display: flex;
    align-items: center;
}

.meta-item.author img {
    margin-right: 0;
}

/* Resim hizası */


/* SAĞ Taraf: Sosyal İkonlar */
.hero-social-right .mozthm-share-box {
    margin: 0;
    /* Varsayılan margin'i sıfırla */
    gap: 8px;
    /* İkonlar arası boşluk */
}


/* --- YUVARLAK & MODERN İKON TASARIMI --- */

.mozthm-share-box.modern-rounded .share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* Tam yuvarlak */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.2s, opacity 0.2s;
    font-size: 14px;
}

.mozthm-share-box.modern-rounded .share-btn:hover {
    transform: translateY(-2px);
    /* Hover'da hafif zıplasın */
    opacity: 1;
}

/* Google News Butonu (Özel Stil) */
.mozthm-share-box.modern-rounded .share-btn.gnews {
    width: auto;
    /* İkon değil yazı olduğu için genişlik serbest */
    border-radius: 20px;
    /* Hap şeklinde */
    padding: 0 15px;
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #333;
    font-weight: 600;
    font-size: 12px;
    gap: 6px;
}

.mozthm-share-box.modern-rounded .share-btn.gnews:hover {
    background: #f5f5f5;
    border-color: #ccc;
}


/* MOBİL UYUM */
@media (max-width: 768px) {
    .hero-meta-wrapper {
        flex-direction: column;
        /* Alt alta diz */
        align-items: flex-start;
        /* Sola yasla */
    }

    .hero-social-right {
        width: 100%;
        /* Tam genişlik */
    }

    .mozthm-share-box {
        justify-content: flex-start;
        /* İkonları sola diz */
    }
}

/* ==================================================
   SVG İKON DÜZENLEMELERİ (GÜNCELLENDİ)
   ================================================== */

.mozthm-share-box.modern-rounded {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Butonlar arası boşluk */
}

.mozthm-share-box.modern-rounded .share-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    /* Flexbox ile SVG'yi ortala */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s;
    background: #f0f0f0;
    /* Varsayılan gri zemin */
    color: #555;
    /* Varsayılan ikon rengi */
    border: none;
    padding: 0;
}

/* Hover Efektleri */
.mozthm-share-box.modern-rounded .share-btn:hover {
    transform: translateY(-3px);
    opacity: 1;
    color: #fff;
    /* Hoverda ikon beyaz olsun */
}

/* Marka Renkleri (Hover Durumunda) */
.share-btn.fb:hover {
    background: #1877f2;
}

.share-btn.tw:hover {
    background: #000000;
}

.share-btn.wa:hover {
    background: #25d366;
}

/* SVG Ayarları */
.share-btn svg {
    display: block;
    pointer-events: none;
    /* Tıklamayı engellemesin */
}

/* --- GOOGLE NEWS BUTONU ÖZEL --- */
.mozthm-share-box.modern-rounded .share-btn.gnews {
    width: auto;
    /* Genişlik serbest */
    border-radius: 50px;
    /* Hap şekli */
    background: #fff;
    border: 1px solid #ddd;
    padding: 0 12px 0 10px;
    /* İç boşluk */
    gap: 8px;
    /* İkon ve yazı arası */
    height: 38px;
}

.mozthm-share-box.modern-rounded .share-btn.gnews:hover {
    background: #f8f9fa;
    border-color: #ccc;
    color: #333;
    /* News yazısı siyah kalsın */
    transform: translateY(-2px);
}

.mozthm-share-box.modern-rounded .share-btn.gnews .btn-text {
    font-size: 13px;
    font-weight: 700;
    color: #444;
}

/* ==================================================
   PREMIUM DÜZEN VE ESTETİK (FONTLAR PANEL'E BAĞLI)
   ================================================== */

/* 1. Başlık Alanı (Hiyerarşi ve Boşluk) */
.entry-title,
.hero-title {
    /* Font ailesi panelden geliyor */
    /* Renk panelden geliyor */
    margin-top: 15px;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    /* Harfleri çok hafif sıkılaştırır, tok durur */
}

/* 2. Özet Alanı (Excerpt) */
.entry-excerpt {
    /* Font ve renk panelden geliyor */
    margin-bottom: 10px;
    opacity: 0.9;
    /* Hafif bir yumuşaklık */
}

/* 3. İçerik Alanı (Genel Okuma Düzeni) */
.entry-content {
    /* Font ailesi panelden geliyor */
}

/* Paragraflar Arası "Nefes" Payı */
.entry-content p {
    margin-bottom: 26px;
    /* Paragrafları birbirinden ayırarak okunabilirliği artırır */
}

/* Yazı İçi Başlıklar (H2, H3, H4 vb.) */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    /* Font ailesi panelden gelecek */
    color: #111;
    /* Varsayılan koyu renk (Panelden ezilebilir) */
    margin-top: 45px;
    /* Başlıkların üstünü açalım */
    margin-bottom: 20px;
    /* Altını kısalım */
    line-height: 1.3;
}

/* 4. Liste Tasarımları (Madde İşaretleri) */
.entry-content ul,
.entry-content ol {
    margin-bottom: 26px;
    padding-left: 20px;
    margin-left: 10px;
}

.entry-content ul li,
.entry-content ol li {
    margin-bottom: 12px;
    padding-left: 5px;
}

/* 5. Alıntı (Blockquote) - Modern Görünüm */
.entry-content blockquote {
    background: transparent;
    border-left: 4px solid #e74c3c;
    /* Tema rengin */
    margin: 40px 0;
    padding: 10px 25px;
    font-style: italic;
    color: #444;
}

/* 6. Linkler (Yazı İçi) - Altı Çizgili Efekt */
.entry-content a {
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    /* İnce silik çizgi */
    transition: all 0.2s;
    color: #e74c3c;
    /* Tema rengi varsayılan */
    font-weight: 600;
}

.entry-content a:hover {
    border-bottom-color: #e74c3c;
    background: rgba(231, 76, 60, 0.05);
}

/* 7. Görseller (Kalite Hissi Veren Dokunuş) */
.entry-content img {
    border-radius: 6px;
    /* Keskin köşeleri yumuşat */
    margin: 30px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    /* Hafif gölge ekle (Derinlik katar) */
    height: auto;
    max-width: 100%;
}

/* ==================================================
   LAYOUT 2 (FULL) - SIKIŞTIRMA & TEMİZLİK
   ================================================== */

/* 1. O Çizgiyi Kaldır ve Meta Alanını Sıkıştır */
.hero-meta-wrapper {
    border-top: none !important;
    /* Çizgiyi yok et */
    padding-top: 0 !important;
    /* Üst iç boşluğu sıfırla */
    margin-top: 5px !important;
    /* Başlık/Özet ile arasını kıs */
}

/* 2. Başlık Altı Boşluğu Kıs */
.hero-title {
    margin-bottom: 0px !important;
    /* Özete daha yakın olsun */
}

/* 3. Özet Altı Boşluğu Kıs */
.hero-excerpt {
    margin-bottom: 2px !important;
    /* Meta verisine daha yakın olsun */
}

/* 4. Full Header'ın Kendisinin Alt Boşluğunu Kıs */
/* (Meta ile Görsel arasındaki mesafeyi belirler) */
.single-hero-header {
    margin-bottom: 0px !important;
    /* Görsele çok yaklaşsın */
    padding-bottom: 0 !important;
    /* Alt dolguyu alalım */
    border-bottom: none !important;
    /* Header altındaki çizgiyi de kaldıralım (Varsa) */
}

/* 5. Öne Çıkan Görselin Altını Kıs */
/* (Görsel ile İçerik arasındaki mesafeyi belirler) */
.single-featured-image {
    margin-bottom: 0px !important;
    /* İçeriğe yaklaşsın */
}

/* 6. İçeriğin İlk Paragrafının Üstünü Sıfırla */
/* Bazen ilk paragrafın kendi boşluğu yüzünden açıklık olur */
.entry-content>p:first-child {
    margin-top: 0 !important;
}

/* ==================================================
   META GÜNCELLEMESİ (KATEGORİ & TARİH)
   ================================================== */

.hero-meta-left {
    flex-wrap: wrap;
    /* Mobilde sığmazsa alt satıra geçsin */
    gap: 25px;
    /* Öğeler arası boşluk */
}

/* Tarih Grubu */
.meta-item.date-group {
    display: flex;
    flex-direction: column;
    /* Alt alta diz (Yayınlanma üstte, Güncelleme altta) */
    font-size: 13px;
    line-height: 1.4;
    color: #666;
}

.date-single .label {
    font-weight: 700;
    /* "Yayınlanma:" yazısı kalın olsun */
    color: #333;
    margin-right: 4px;
}

.date-single.modified {
    color: #888;
    /* Güncelleme tarihi biraz daha silik olsun, karışmasın */
    font-size: 12px;
}

/* Kategori Rozeti (Meta İçinde) */
.meta-item.category-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.meta-item.category-badge i {
    color: #e74c3c;
    /* Klasör ikonu tema rengi olsun */
}

.meta-item.category-badge a {
    color: #333;
    text-decoration: none;
    transition: 0.2s;
}

.meta-item.category-badge a:hover {
    color: #e74c3c;
    text-decoration: underline;
}

/* MOBİL AYAR */
@media (max-width: 768px) {
    .hero-meta-left {
        gap: 15px;
    }

    /* Mobilde meta bilgileri alt alta binmesin, yan yana sığışsın */
    .meta-item.date-group {
        font-size: 12px;
    }
}

/* ==================================================
   GÖRSEL & İÇERİK ARASI MESAFE (KALICI ÇÖZÜM)
   ================================================== */

/* 1. Öne Çıkan Görselin Altını Kontrol Altına Al */
.single-featured-image {
    /* Burayı ne kadar yaparsan ara o kadar açılır/kapanır. 20px idealdir. */
    margin-bottom: 0px !important;
}

/* 2. İçerik Kutusunun Kendi Üst Boşluğunu Sıfırla */
.entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. İŞTE BU ÇOK ÖNEMLİ: İlk Paragrafın/Başlığın Üstünü Sıfırla */
/* Yazı neyle başlarsa başlasın (p, h2, h3, div) tepesindeki boşluğu alırız */
.entry-content> :first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==================================================
   LAYOUT AYARI: SABİT 350PX SIDEBAR
   ================================================== */

/* Sadece Masaüstü ve Laptoplarda Çalışsın (Mobilde Zaten Alt Alta) */
@media (min-width: 992px) {

    /* 1. Ana Taşıyıcıyı Esnek Yap */
    .site-layout {
        display: flex;
        justify-content: space-between;
        /* İki yakaya yasla */
        align-items: flex-start;
        /* Yukarı hizala */
        gap: 40px;
        /* İçerik ile Sidebar arasındaki boşluk (İdeal) */
    }

    /* 2. SOL TARAF (Haber İçeriği) - Geri kalan alanı kaplasın */
    .site-main {
        flex: 1;
        /* Kalan boşluğu doldur */
        width: auto;
        /* Genişliği serbest bırak */
        min-width: 0;
        /* Taşmaları önler */
    }

    /* 3. SAĞ TARAF (Sidebar) - 350px'e Çivile */
    /* WordPress standart sidebar ID ve Class'larını hedefliyoruz */
    #secondary,
    .widget-area,
    .sidebar,
    aside {
        flex: 0 0 350px !important;
        /* Asla büyüme, asla küçülme, 350px kal */
        width: 350px !important;
        max-width: 350px !important;
    }

}

/* Tabletlerde (Daha küçük ekranlarda) Sidebar biraz daha daralsın */
@media (min-width: 768px) and (max-width: 991px) {
    .site-layout {
        gap: 20px;
    }

    #secondary,
    .widget-area,
    .sidebar,
    aside {
        flex: 0 0 300px !important;
        /* Tablette 300px yeter */
        width: 300px !important;
    }
}

/* ==================================================
   GİZLENEN YAZAR KUTUSU ÇİZGİ SORUNU (ÇÖZÜM)
   ================================================== */

/* 1. Haberin (Article) Altındaki Çizgiyi Kaldır */
/* Kutu olsa da olmasa da bu çizgiye gerek yok, modüllerin kendi çizgisi olsun */
.single-article-container {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 30px !important;
}

/* 2. Benzer Haberlerin Üstüne Çizgi Ekle */
/* Yazar kutusu kapalıysa, içerik ile benzer haberleri bu çizgi ayıracak */
.related-posts-section {
    border-top: 0px solid #eee;
    padding-top: 30px;
    margin-top: 30px;
}

/* 3. Yazar Kutusu Açıksa Onun Üstüne Boşluk Ver */
/* Çizgiler birbirine girmesin */
.author-box-modern {
    margin-top: 30px !important;
    /* Yazar kutusunun kendi border'ı zaten var, ekstra çizgiye gerek yok */
}

/* ==================================================
   YAZAR KUTUSU GİZLENİNCE BOŞLUK ALMA
   ================================================== */

/* 1. Haberin Kendi Alt Boşluğunu İdeal Seviyeye Çek */
/* (Kutu olsa da olmasa da haberin altı çok açık olmamalı) */
.single-article-container {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    border-bottom: none !important;
    /* Çizgiyi buradan kesin sildik */
}

/* 2. Benzer Haberler Alanı (Genel Ayar) */
.related-posts-section {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 0px solid #eee;
    /* Çizgi burada olsun */
}

/* 3. İŞTE ÇÖZÜM: Yazar Kutusu "VARSA" Araya Girip Yer Açsın */
/* Kutu aktifken üstten ve alttan kendini ittirsin ki sıkışık durmasın */
.author-box-modern {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

/* 4. ALTERNATİF GARANTİ: Eğer Kutu Yoksa */
/* Bu kod, "Article" etiketinden HEMEN SONRA "Related" geliyorsa (arada kutu yoksa) çalışır */
.single-article-container+.related-posts-section,
.single-article-container+*+.related-posts-section {
    margin-top: 0 !important;
    /* Ekstra boşluğu sıfırla */
}

/* ==================================================
   STICKY (YAPIŞKAN) SIDEBAR
   ================================================== */

@media (min-width: 992px) {
    /* Sadece Masaüstü ve Geniş Tabletlerde Çalışsın */

    #secondary,
    .widget-area,
    .sidebar,
    aside {
        /* 1. Yapışkan Özelliği Aç */
        position: -webkit-sticky;
        /* Safari desteği için */
        position: sticky;

        /* 2. Tavana Ne Kadar Kala Dursun? */
        top: 20px;

        /* 3. Flex Yapısında Sorun Çıkarmaması İçin */
        align-self: flex-start;

        /* 4. İçerik Yüksekliği Otomatik Olsun */
        height: auto !important;
        z-index: 99;
        /* İçeriğin altında kalmasın */
    }

    /* --- WORDPRESS ADMIN BAR DÜZELTMESİ --- */
    /* Eğer siteye yönetici olarak giriş yaptıysan üstteki siyah bar 
       sidebar'ın üstünü kapatmasın diye boşluğu artırıyoruz */
    .admin-bar #secondary,
    .admin-bar .widget-area,
    .admin-bar .sidebar,
    .admin-bar aside {
        top: 60px;
        /* 32px Admin Bar + 28px Boşluk */
    }
}

/* ==================================================
   PREMIUM YORUM SİSTEMİ (MODERN UI)
   ================================================== */

/* 1. Yorum Alanı Genel Çerçevesi */
#comments {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

/* Başlık ("Bir Cevap Yazın" veya "3 Yorum") */
.comments-title,
.comment-reply-title {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}

.comments-title:before,
.comment-reply-title:before {
    content: '\f086';
    /* FontAwesome konuşma balonu */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
    color: #e74c3c;
    /* Tema rengi */
    font-size: 18px;
}

/* --- FORM ALANI TASARIMI --- */

/* Form Kutusu */
#respond {
    background: #f9f9f9;
    /* Hafif gri zemin */
    padding: 30px;
    border-radius: 12px;
    /* Yumuşak köşeler */
    border: 1px solid #eee;
}

/* Form İçindeki Label'ları Gizle (Modern görünüm için placeholder yeterli) */
.comment-form label {
    display: none;
}

/* Input ve Textarea (Yazı Alanları) */
#respond textarea,
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"] {
    width: 100%;
    background: #fff;
    border: 2px solid #eee;
    /* Kalın silik çerçeve */
    padding: 15px;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    font-family: inherit;
}

/* Tıklayınca (Focus) Efekti */
#respond textarea:focus,
#respond input:focus {
    border-color: #e74c3c;
    /* Odaklanınca tema rengi olsun */
    outline: none;
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.1);
}

/* İsim ve Mail Alanlarını Yan Yana Al (Masaüstü) */
.comment-form-author,
.comment-form-email {
    width: 48%;
    float: left;
}

.comment-form-email {
    float: right;
    /* Mail sağda */
}

/* Web Sitesi Alanını Tam Genişlik Yap */
.comment-form-url {
    clear: both;
    width: 100%;
}

/* Temizlik (Float sonrası) */
.comment-form:after {
    content: "";
    display: table;
    clear: both;
}

/* Gönder Butonu (Submit) */
#respond .submit {
    background: #111;
    /* Siyah asil durur */
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 50px;
    /* Hap şeklinde buton */
    cursor: pointer;
    transition: 0.3s;
    font-size: 14px;
    display: inline-block;
    margin-top: 10px;
}

#respond .submit:hover {
    background: #e74c3c;
    /* Hoverda tema rengi */
    transform: translateY(-3px);
    /* Hafif zıplama */
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
}

/* --- YORUM LİSTESİ TASARIMI --- */

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

.comment-body {
    position: relative;
    padding-left: 75px;
    /* Avatar için yer aç */
    margin-bottom: 40px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 30px;
}

/* Avatar Resmi */
.comment-body .avatar {
    position: absolute;
    left: 0;
    top: 5px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Tam yuvarlak */
    border: 3px solid #fff;
    /* Beyaz çerçeve */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    /* Gölge */
}

/* Yorum Yapanın Adı */
.comment-meta .fn {
    font-size: 16px;
    font-weight: 800;
    color: #000;
    font-style: normal;
}

.comment-meta .fn a {
    color: #000;
    text-decoration: none;
}

/* Tarih */
.comment-metadata {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.comment-metadata a {
    color: #999;
    text-decoration: none;
}

/* Yorum Metni */
.comment-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

/* Cevapla Butonu (Reply) */
.reply {
    margin-top: 15px;
}

.comment-reply-link {
    font-size: 12px;
    font-weight: 700;
    color: #e74c3c;
    border: 1px solid #e74c3c;
    padding: 5px 15px;
    border-radius: 20px;
    text-decoration: none;
    transition: 0.2s;
}

.comment-reply-link:hover {
    background: #e74c3c;
    color: #fff;
}

.comment-reply-link i {
    margin-right: 5px;
}

/* Alt Yorumlar (Cevaplar) İçeri Girsin */
.children {
    list-style: none;
    padding-left: 40px;
    /* İçeri girinti */
    border-left: 2px solid #eee;
    /* Solda ince bir iz */
}

/* MOBİL UYUM */
@media (max-width: 768px) {

    .comment-form-author,
    .comment-form-email {
        width: 100%;
        /* Mobilde alt alta olsunlar */
        float: none;
    }

    .comment-body {
        padding-left: 0;
        /* Mobilde avatar yukarı alınabilir veya küçültülebilir */
    }

    .comment-body .avatar {
        position: static;
        /* Avatarı akışa al */
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }

    .children {
        padding-left: 15px;
        /* Mobilde girinti az olsun */
    }
}

/* ==================================================
   YORUM ALANI TAŞMA & İKON DÜZELTMESİ
   ================================================== */

/* 1. TAŞMA SORUNU ÇÖZÜMÜ (Box-Sizing) */
/* Input ve Textarea'ya "Padding'i içine göm" diyoruz */
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
    box-sizing: border-box !important;
    /* Sihirli değnek bu! */
    max-width: 100% !important;
    /* Asla kapsayıcıdan büyük olma */
    width: 100% !important;
    /* Kapsayıcıyı tam doldur */
}

/* Formun Kendi Kapsayıcısı Mobilde Taşmasın */
#respond {
    box-sizing: border-box !important;
    width: 100%;
    overflow: hidden;
    /* Taşarsa gizle */
}


/* 2. İKON SORUNU ÇÖZÜMÜ (SVG Teknolojisi) */
/* Font kullanmak yerine doğrudan ikonun çizimini gömüyoruz. Asla bozulmaz. */
.comments-title:before,
.comment-reply-title:before {
    content: '' !important;
    /* Eski font kodunu sil */
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    /* Kırmızı Konuşma Balonu İkonu (SVG) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23e74c3c'%3E%3Cpath d='M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Eski font ayarlarını sıfırla */
    font-family: inherit !important;
    font-weight: normal !important;
    vertical-align: middle;
    /* Metinle tam hizala */
}

/* Başlığın Kendisini de Hizala */
.comments-title,
.comment-reply-title {
    display: flex;
    align-items: center;
    /* Dikey ortala */
}

/* ==================================================
   INFINITY SCROLL TASARIMI
   ================================================== */

/* 1. Sonraki Haber Ayracı */
.infinity-divider {
    text-align: center;
    margin: 40px 0;
    position: relative;
    z-index: 1;
}

.infinity-divider:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #eee;
    z-index: -1;
}

.infinity-divider span {
    background: #fff;
    /* Arkaplan rengin neyse o olmalı */
    padding: 5px 20px;
    color: #999;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid #eee;
    border-radius: 20px;
}

/* 2. Yükleniyor (Loader) */
.mozthm-inf-loader {
    text-align: center;
    padding: 30px;
    color: #555;
    font-weight: 600;
}

.mozthm-inf-loader .spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #e74c3c;
    /* Tema rengin */
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 10px;
    vertical-align: middle;
    margin-right: 10px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 3. Haber Bitti Mesajı */
.inf-end {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
    margin-bottom: 30px;
}

/* ==================================================
   MODERN ARŞİV TASARIMI
   ================================================== */

/* 1. Header (Hero Alanı) */
.archive-header-modern {
    background: #f8f9fa;
    /* Hafif gri zemin */
    padding: 60px 0;
    margin-bottom: 40px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.archive-meta-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.archive-title {
    font-size: 3rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 15px;
}

.archive-description {
    font-size: 1.1rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
}

/* 2. Grid Kart Tasarımı */
.post-card-grid {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: 0.3s;
    height: 100%;
    /* Kartların boyunu eşitle */
}

.post-card-grid:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.post-thumb {
    position: relative;
    overflow: hidden;
}

.post-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: 0.5s;
}

.post-card-grid:hover .post-thumb img {
    transform: scale(1.05);
}

.cat-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 3px;
    text-transform: uppercase;
}

.cat-badge a {
    color: #fff;
    text-decoration: none;
}

/* 3. Küçük Liste Tasarımı */
.post-card-list-small .post-thumb img {
    height: 140px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .post-card-list-small {
        flex-direction: column;
    }

    .post-card-list-small .post-thumb {
        width: 100% !important;
    }
}

/* Arşiv Grid Efektleri */
.transition-img {
    transition: transform 0.5s ease;
}

.card-hover-effect:hover .transition-img {
    transform: scale(1.1);
}

.card-hover-effect {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card-hover-effect:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-5px);
}

.object-fit-cover {
    object-fit: cover;
}


.ad-area {
    padding: 20px 0;
    text-align: center;
    overflow: hidden;
}

.ad-area img {
    max-width: 100%;
    height: auto;
}

/* Header Altı Reklam */
.ad-header-bottom {
    background: #f9f9f9;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

/* Öne Çıkan Görsel Altı Reklam */
.ad-featured-image {
    margin: 20px 0;
    padding: 15px;
    background: #fafafa;
    border-radius: var(--moz-radius, 8px);
    border: 1px dashed #e0e0e0;
}

/* Benzer Haberler Üstü Reklam */
.ad-related-top {
    margin-top: 30px;
    margin-bottom: 10px;
}

/* Benzer Haberler Altı Reklam */
.ad-related-bottom {
    margin-top: 10px;
    margin-bottom: 30px;
}

/* Mobil Reklam Optimizasyonu */
@media (max-width: 768px) {
    .ad-area {
        padding: 15px 0;
    }

    .ad-featured-image {
        margin: 15px 0;
        padding: 10px;
    }
}

/* =========================================
   KATEGORİ BİLEŞEN ALANI
   ========================================= */

.category-widget-area {
    margin-bottom: 30px;
}

.mozthm-category-widget {
    margin-bottom: 30px;
}

/* Sidebar olmadan tam genişlik */
.site-layout.no-sidebar {
    display: block;
}

.site-layout.no-sidebar .site-main {
    max-width: 100%;
}

/* ==================================================
   INFINITY SCROLL İÇİN ÖZEL STİLLER
   ================================================== */

/* Infinity ile yüklenen içeriklerde container padding'i sıfırla */
.infinity-item .single-hero-header .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Infinity içindeki meta wrapper'a boşluk ver */
.infinity-item .hero-meta-wrapper {
    margin-top: 15px;
    margin-bottom: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Infinity içindeki öne çıkan görsel üstüne boşluk */
.infinity-item .single-featured-image {
    margin-top: 20px;
}

/* Infinity içindeki article padding'lerini ayarla */
.infinity-item .single-article-container {
    padding: 0;
}