/*
Theme Name: Medya ve Çocuk Hakları Teması
Author: MEÇHAD
Description: Çocuk odaklı haber platformu teması
Version: 1.0
*/

/* =========================================
   1. TEMEL AYARLAR
   ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    background-color: #f7f9fc; 
    font-family: 'Inter', sans-serif; 
    color: #333; 
    line-height: 1.5; 
    overflow-x: hidden; 
}

.container { 
    max-width: 1140px; 
    margin: 0 auto; 
    padding: 0 15px; 
}

a { text-decoration: none; color: inherit; }

/* =========================================
   2. HEADER & NAV (ÜST KISIM)
   ========================================= */
.top-bar { background: #1a202c; color: #fff; padding: 10px 0; }
.top-bar-flex { display: flex; justify-content: space-between; align-items: center; }
.top-search input { 
    background: rgba(255,255,255,0.1); 
    border: 1px solid rgba(255,255,255,0.2); 
    padding: 5px 15px; 
    border-radius: 20px; 
    color: #fff; 
    font-size: 12px; 
    width: 180px; 
}
.top-slogan { font-weight: 600; font-size: 11px; text-transform: uppercase; color: #cbd5e0; }
.top-btn { 
    background: #e53e3e; 
    color: #fff !important; 
    padding: 6px 15px; 
    border-radius: 4px; 
    font-weight: 700; 
    font-size: 11px; 
}

.header-top { background: #fff; padding: 25px 0; text-align: center; }
.logo { font-size: 38px; font-weight: 900; color: #222; }
.logo span { color: #e53e3e; }

nav { background: #fff; border-bottom: 1px solid #eee; margin-bottom: 25px; }
nav ul { list-style: none; display: flex; justify-content: center; }
nav ul li a { 
    display: block; 
    color: #333; 
    padding: 15px 25px; 
    font-weight: 700; 
    transition: 0.3s; 
}
nav ul li a:hover { color: #e53e3e; }

/* =========================================
   3. MANŞET SİSTEMİ (SLIDER)
   ========================================= */
.main-grid { display: flex; gap: 15px; height: 420px; margin-bottom: 30px; }
.slider-box { width: 67%; position: relative; border-radius: 6px; overflow: hidden; background: #000; }
.side-box { width: 33%; display: flex; flex-direction: column; gap: 12px; }
.side-item { flex: 1; position: relative; border-radius: 6px; overflow: hidden; background: #000; }

.slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: 0.8s ease; z-index: 1; }
.slide.active { opacity: 1; z-index: 5; }
.slide img, .side-item img { width: 100%; height: 100%; object-fit: cover; }

.text-overlay { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    padding: 80px 25px 40px; 
    background: linear-gradient(transparent, rgba(0,0,0,0.95)); 
    color: #fff; 
    z-index: 10; 
}
.slider-box h2 { font-size: 24px; line-height: 1.2; font-weight: 800; }

/* Slider Navigasyon */
.slider-nav .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: 0.3s;
}
.nav-btn:hover { background: #e53e3e !important; }

.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 25px;
    display: flex;
    gap: 8px;
    z-index: 60;
}
.dot {
    width: 12px;
    height: 6px;
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: 0.4s;
}
.dot.active { background: #e53e3e; width: 30px; }

.newsletter-box h4 { font-size: 16px; margin-bottom: 15px; border-left: 4px solid #e53e3e; padding-left: 12px; }

/* =========================================
   5. FOOTER (ALT KISIM)
   ========================================= */
.mediach-footer { 
    background: #0b0f19; 
    color: #94a3b8; 
    padding: 60px 0; 
    border-top: 4px solid #e53e3e; 
    margin-top: 50px; 
}
.f-grid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.f-logo { font-size: 28px; font-weight: 900; color: #fff; }
.f-logo span { color: #e53e3e; }

/* =========================================
   6. MOBİL UYUMLULUK
   ========================================= */
@media (max-width: 992px) {
    .main-grid, .news-main-wrapper, .f-grid { flex-direction: column; height: auto; }
    .slider-box, .side-box { width: 100%; height: 300px; }
    .sidebar-right { width: 100%; }
}

/* Sadece bu 3'lü bloktaki kutuların boyunu kısaltır */
.box-fixed-height {
    height: 280px !important; /* Yüksekliği 400'den 280'e çektik */
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
}

/* İçerideki yazıların arasındaki devasa boşlukları daraltır */
.mech-box-content {
    padding: 8px 15px !important; /* Üst-alt boşluğu iyice azalttık */
}

/* Liste elemanlarını birbirine yaklaştırır */
.list-item-simple {
    padding: 4px 0 !important; /* Her bir satırın boşluğunu kıstık */
    margin-bottom: 2px !important;
    font-size: 13px;
    line-height: 1.2;
    border-bottom: 1px solid #f8fafc;
}

/* Başlık alanının altındaki boşluğu daraltır */
.alt-head-dark, .mech-box-head {
    padding: 10px 15px !important;
}