/* --- MOBİL UYUMLULUK DOSYASI (MAX 992PX) --- */

@media (max-width: 992px) {

    /* =========================================
       1. ÜST BAR (HEADER) & NAVİGASYON
       ========================================= */
    
    /* Sabit Üst Bar */
    .mobile-top-bar {
        display: flex !important;
        justify-content: center !important; /* Yatayda ortala */
        align-items: center !important;     /* Dikeyde ortala */
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;                       /* Yükseklik 70px */
        background-color: #1c2331;          /* Lacivert */
        z-index: 9999;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        border-bottom: 2px solid #c5a059;   /* Altın Çizgi */
    }

    /* Site Başlığı (İsim Soyisim) */
    .mobile-brand {
        font-family: 'Playfair Display', serif;
        font-size: 1.1rem !important;
        color: #fff !important;
        text-align: center !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 50px; /* Hamburger menüye çarpmaması için */
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    /* Hamburger Menü Butonu */
    .menu-toggle {
        position: absolute !important;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #c5a059 !important;
        font-size: 1.5rem !important;
        background: none !important;
        border: none !important;
        cursor: pointer;
    }

    /* Sidebar Gizleme */
    .sidebar {
        width: 280px !important;
        z-index: 10000 !important;
    }

    .sidebar .profile-info, 
    .sidebar .user-name, 
    .sidebar small, 
    .sidebar-header h3, 
    .sidebar-header small { 
        display: none !important; 
    }

    /* =========================================
       2. GENEL SAYFA YAPISI (BOŞLUKLAR SIFIRLANDI)
       ========================================= */
    
    html, body {
        overflow-x: hidden;
        background-color: #fff;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ana İçerik Alanı */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        
        /* DÜZELTME: Header 70px olduğu için burası da tam 70px olmalı. */
        padding-top: 70px !important; 
        
        margin-top: 0 !important;
        display: block !important;
    }

    /* Masaüstü Profil Görsellerini Gizle */
    .mobile-hero-image, .hero-image, .profile-avatar { 
        display: none !important; 
    }

    /* =========================================
       3. SLIDER AYARLARI (Gradient & Bitişik)
       ========================================= */
    
    .hero-slider-container {
        width: 100% !important;
        height: 400px !important;
        
        /* DÜZELTME: Üstteki boşluğu tamamen kaldırmak için margin-top: 0 */
        margin-top: 0 !important; 
        margin-bottom: 30px !important;
        position: relative;
    }

    .swiper, .swiper-slide {
        width: 100% !important;
        height: 100% !important;
    }

    .slider-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    /* Slider İçerik Kutusu (Tam Oturan & Gradient Tasarım) */
    .slider-content {
        position: absolute !important;
        bottom: 0 !important;           /* En alta yapıştır */
        left: 0 !important;             /* Sola yapıştır */
        width: 100% !important;         /* Tam genişlik */
        padding: 60px 20px 30px 20px !important; /* Metin için boşluklar */
        
        /* Alttan yukarı doğru kararan gölge efekti (Resimle bütünleşir) */
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%) !important;
        
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        
        text-align: left !important;
        z-index: 20 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        transform: none !important;
    }

    .slider-title {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
        color: #fff !important;
        text-shadow: none !important;
        font-weight: 700 !important;
    }

    .slider-btn {
        display: inline-block !important;
        background-color: #c5a059 !important;
        color: #fff !important;
        padding: 8px 20px !important;
        font-size: 0.9rem !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        margin-top: 5px !important;
    }

    /* =========================================
       4. HAKKIMDA BÖLÜMÜ
       ========================================= */

    .about-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff;
    }

    /* Başlık */
    .main-title {
        display: block !important;
        font-size: 2rem !important;
        color: #333 !important;
        text-align: left !important;      
        margin-top: 5px !important;
        margin-bottom: 15px !important;
        padding-left: 20px !important;    
        line-height: 1.2 !important;
        order: 1; 
        width: 100%;
        position: relative;
    }

    /* Başlık Altı Çizgi */
    .main-title::after {
        left: 20px !important;
        transform: none !important;
        bottom: -5px !important;
    }

    /* Görsel Alanı */
    .about-image {
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 2;
    }

    .image-frame, .image-frame img {
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Metin Alanı */
    .about-text {
        flex: 1 1 auto !important;
        width: 100% !important;
        padding: 25px 20px !important;
        order: 3;
    }

    .content-body {
        margin-top: 0 !important;
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        text-align: justify !important;
        color: #444;
    }

    /* =========================================
       5. GALERİ & ALBÜMLER
       ========================================= */
    
    .content-wrapper { 
        padding: 30px 20px !important; 
    }
    
    .gallery-title { 
        font-size: 2rem !important; 
    }
    
    .albums-grid, .photos-grid { 
        grid-template-columns: 1fr !important; 
        gap: 20px !important;
    }

    /* =========================================
       6. İLETİŞİM SAYFASI
       ========================================= */
    
    .contact-form-area form > div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .page-title {
        font-size: 2rem !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }

    /* =========================================
       7. HİZMETLER & İSTATİSTİKLER
       ========================================= */

    .hizmet-container {
        flex-direction: column !important;
    }
    .hizmet-kutu {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .stats-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        margin-top: 20px !important;
        padding-top: 20px !important;
        border-top: 1px solid #eee !important;
    }

    .stat-box {
        flex: 1 1 40% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .stat-val {
        font-size: 2rem !important;
        color: #c5a059 !important;
    }

    /* =========================================
       8. FOOTER
       ========================================= */
    
    .site-footer {
        padding: 30px 15px !important;
        background: #f9f9f9;
        margin-top: auto !important;
        text-align: center !important;
        font-size: 0.9rem !important;
    }
}
/* =========================================
   9. MAKALE DETAY SAYFASI DÜZELTMELERİ
   ========================================= */

@media (max-width: 992px) {
    /* Ana kapsayıcıyı genişlet ve boşlukları azalt */
    .detail-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        /* Üst-Alt: 20px, Sağ-Sol: 15px (Daha geniş görünür) */
        padding: 20px 15px !important; 
        gap: 30px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Sol taraftaki içerik alanı */
    .detail-main {
        width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Başlık boyutunu mobilde biraz dengele */
    .detail-title {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    /* Resim tam genişlikte olsun */
    .detail-main-image {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 20px !important;
    }

    /* İçerik metni */
    .detail-content {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        text-align: left !important; /* Mobilde 'justify' bazen boşluk yaratır, left daha iyidir */
        padding: 0 !important;
    }
    
    .detail-content img {
        width: 100% !important;
        height: auto !important;
    }

    /* Sidebar (Yan Menü) */
    .detail-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }

    /* Sidebar kutusu */
    .sidebar-widget {
        padding: 20px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}
/* =========================================
   10. NEDEN BEN SAYFASI MOBİL DÜZELTMELERİ
   ========================================= */

@media (max-width: 992px) {

    /* 1. Başlık Ayarı: Kenarlardan boşluk bırak ve boyutu ayarla */
    .main-content .main-title {
        display: block !important;
        padding: 0 15px !important; /* Sağdan soldan 15px boşluk */
        margin-top: 25px !important;
        margin-bottom: 20px !important;
        font-size: 1.8rem !important; /* Makale detay ile uyumlu font */
        line-height: 1.3 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Resim Alanı: Tam genişlik yerine kenarlardan boşluklu olsun */
    .hero-banner-frame {
        display: block !important;
        /* Genişliği ekranın tamamı eksi 30px yapıyoruz (15px sağ, 15px sol boşluk için) */
        width: calc(100% - 30px) !important; 
        margin: 0 auto 25px auto !important; /* Ortala ve alttan boşluk bırak */
        height: auto !important;
        border-radius: 8px !important; /* Köşeleri hafif yuvarlat */
        overflow: hidden !important;
    }

    .hero-banner-frame img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* 3. Metin Alanı: Kenarlara yapışmayı engelle */
    .content-body {
        padding: 0 15px 40px 15px !important; /* Üst 0, Sağ 15, Alt 40, Sol 15 */
        font-size: 1.05rem !important;
        line-height: 1.7 !important;
        text-align: left !important; /* Mobilde okumayı kolaylaştırır */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Metin içindeki paragrafların aralarını aç */
    .content-body p {
        margin-bottom: 20px !important;
    }
}