/**
 * =================================================================================
 * PROJE ADI: Nuvu Zenith
 * DOSYA ADI: public/assets/css/medya_layout.css
 * AMACI: Medya bölümü şablonu (layout) için genel stil tanımlarını ve 
 * mobil uyumluluk düzenlemelerini içerir.
 * =================================================================================
 */

/* Temel Renk Değişkenleri, Fontlar ve Global Stiller */
@import url('app.css');

/* ========================================================
 * 1. LAYOUT BİLEŞENLERİ
 * ======================================================== */

/* --- Scroll To Top Button --- */
#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: none;
    transition: all 0.3s ease;
}

#scrollTopBtn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

/* --- Header --- */
.header-transparent {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
}

.hover-text-dark:hover {
    color: #212529 !important;
}

/* ========================================================
 * 2. MOBİL GÖRÜNÜM VE YAPI DÜZELTMELERİ
 * ======================================================== */

/* Bootstrap'in .container sınıfı genellikle padding (sağ/sol) ekler.
   Mobil görünümde bu padding, içeriği fazla daraltabilir. 
   Bunun yerine, medya içeriği için 'container' sınıfına daha esnek bir yapı ekliyoruz.
   Resimde görünen 357px genişlikte daralma muhtemelen container'daki 'padding-x' kaynaklıdır. */
.container {
    /* Yatay padding'i (sol/sağ) mobil cihazlarda biraz azalt */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* 768px'ten küçük ekranlarda (Mobil) */
@media (max-width: 767.98px) {
    /* Genel ana içerik alanındaki padding'i (py-5) yatayda daha da azaltmak istersen: */
    main.container.py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Navigasyon barı için ek boşluk düzenlemesi (isteğe bağlı) */
    .navbar-brand {
        padding-left: 0.5rem;
    }
}

/* ========================================================
 * 3. YAZI DETAY SAYFASI (Ek Okunabilirlik)
 * ======================================================== */

/* Yazı içeriği (detay.php) */
.yazi-icerigi {
    /* Okunabilirliği artırmak için satır yüksekliğini artır */
    line-height: 1.7; 
    /* Metin hizalamasını justify yerine left/start yap (daha doğal okunur) */
    text-align: left; 
}

.yazi-icerigi p {
    margin-bottom: 1.5rem;
}

/* Görseli çevreleyen figür elementi için mobil düzeltme */
figure.mb-5.rounded-3.overflow-hidden.shadow-lg {
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem); /* Mobil görünümde container'ı tam kaplaması için */
    border-radius: 0 !important; /* Mobil görünümde köşeleri kaldır */
}

/* Küçük ekranlarda başlık boyutunu biraz küçült */
@media (max-width: 575.98px) {
    h1.fw-bolder {
        font-size: 1.8rem !important;
    }
}