/* Responsive Fixes for Maxelance */

/*
 * 1. Mobil Menü ve Header Ayarlamaları
 * Hedef: Mobil cihazlarda (tablet ve altı) menünün düzgün çalışmasını sağlamak.
 * - Header'ın z-index değerini artırarak diğer elemanların üzerinde kalmasını garantile.
 * - Mobil menü açıldığında (.show) düzgün görünmesini sağla.
 */
@media (max-width: 991.98px) {
    .header {
        z-index: 1050; /* Bootstrap modal'larından bile yüksek bir değer */
        padding: 1rem 0;
    }

    .navbar-collapse {
        position: fixed;
        top: 0;
        left: -100%; /* Başlangıçta ekranın dışında */
        width: 85%;
        max-width: 320px;
        height: 100%;
        padding-top: 60px; /* Header yüksekliğine göre ayarlanabilir */
        background-color: #111013; /* Koyu bir arkaplan */
        z-index: 1045;
        transition: left 0.35s ease-in-out;
        overflow-y: auto;
        display: block !important;
    }

    .navbar-collapse.show {
        left: 0; /* .show class'ı eklendiğinde ekranın içine kaydır */
        box-shadow: 5px 0px 15px rgba(0,0,0,0.2);
    }

    .navbar-nav {
        padding: 20px;
        width: 100%;
    }

    .header.-mobile .menu li a {
        padding: 12px 15px;
        font-size: 1rem;
        color: #f0f0f0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
     .header.-mobile .menu li a:hover {
        background-color: rgba(255, 255, 255, 0.05);
     }

    /* Mobil menü açıldığında arkaplanı karartmak için overlay */
    body.mobile-menu-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 1040; /* Menünün arkasında, içeriğin önünde */
        display: block;
    }

    /* Menü kapatma butonu için stil */
    .close-menu-button {
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 2rem;
        color: #fff;
        background: transparent;
        border: none;
        display: none; /* Başlangıçta gizli */
    }

    .navbar-collapse.show .close-menu-button {
        display: block; /* Menü açıldığında göster */
    }
}

/*
 * 2. İçerik Alanındaki Gereksiz Boşluk Sorunu
 * Hedef: Mobil modda menü altında oluşan fazladan boşluğu kaldırmak.
 */
@media (max-width: 991.98px) {
    .site-content {
        padding-top: 80px; /* Header yüksekliğine göre sabit bir boşluk ver */
    }
    .page-title-wrap {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}