/* =========================================================
   PAZAR360 RESPONSIVE SİSTEM
   ========================================================= */


/* =========================================================
   SIDEBAR - MASAÜSTÜ
   ========================================================= */

.pazar-sidebar {
    width: 240px;
    min-height: 100vh;

    flex-shrink: 0;

    position: relative;

    z-index: 1000;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   SIDEBAR MARKA
   ========================================================= */

.pazar-sidebar-brand {
    padding: 18px 18px 20px 18px;
}


/* =========================================================
   SIDEBAR MENÜ
   ========================================================= */

.pazar-sidebar-menu {
    display: flex;

    flex-direction: column;

    padding: 0 12px;
}


/* =========================================================
   SIDEBAR LINK
   ========================================================= */

.pazar-sidebar-menu .nav-link {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 44px;

    padding: 10px 12px;

    border-radius: 8px;

    line-height: 1.3;

    transition:
        background-color 0.2s ease,
        transform 0.1s ease;
}


.pazar-sidebar-menu .nav-link:hover {

    background-color: rgba(255, 255, 255, 0.10);

}


.pazar-sidebar-menu .nav-link:active {

    transform: scale(0.98);

}


/* =========================================================
   MOBİL BUTONLAR
   ========================================================= */

.pazar-mobile-toggle,
.pazar-mobile-close {

    border: none;

    cursor: pointer;

}


/* =========================================================
   MOBİL AÇMA BUTONU
   ========================================================= */

.pazar-mobile-toggle {

    display: none;

}


/* =========================================================
   MOBİL KAPATMA ALANI
   ========================================================= */

.pazar-mobile-close-area {

    display: none;

}


/* =========================================================
   OVERLAY
   ========================================================= */

.pazar-sidebar-overlay {

    display: none;

}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 767.98px) {


    /* ---------------------------------------------
       BODY
       --------------------------------------------- */

    body.pazar-menu-open {

        overflow: hidden;

    }


    /* ---------------------------------------------
       MOBİL AÇMA BUTONU
       --------------------------------------------- */

    .pazar-mobile-toggle {

        display: flex;

        align-items: center;

        justify-content: center;

        position: fixed;

        top: 12px;

        left: 12px;

        width: 46px;

        height: 46px;

        z-index: 1100;

        background: #212529;

        color: #ffffff;

        border-radius: 10px;

        font-size: 25px;

        line-height: 1;

        box-shadow:
            0 3px 12px rgba(0, 0, 0, 0.25);

    }


    /* ---------------------------------------------
       SIDEBAR
       --------------------------------------------- */

    .pazar-sidebar {

        position: fixed;

        top: 0;

        left: 0;

        bottom: 0;

        width: min(280px, 85vw);

        min-height: 100vh;

        z-index: 1200;

        overflow-y: auto;

        transform: translateX(-105%);

        box-shadow:
            5px 0 25px rgba(0, 0, 0, 0.30);

    }


    /* ---------------------------------------------
       SIDEBAR AÇIK
       --------------------------------------------- */

    .pazar-sidebar.mobile-open {

        transform: translateX(0);

    }


    /* ---------------------------------------------
       KAPATMA ALANI
       --------------------------------------------- */

    .pazar-mobile-close-area {

        display: flex;

        align-items: center;

        justify-content: flex-end;

        padding: 10px 12px 0 12px;

    }


    /* ---------------------------------------------
       KAPATMA BUTONU
       --------------------------------------------- */

    .pazar-mobile-close {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 42px;

        height: 42px;

        background: transparent;

        color: #ffffff;

        border-radius: 8px;

        font-size: 22px;

    }


    .pazar-mobile-close:hover {

        background: rgba(255, 255, 255, 0.10);

    }


    /* ---------------------------------------------
       LOGO
       --------------------------------------------- */

    .pazar-sidebar-brand {

        padding: 12px 20px 24px 20px;

    }


    .pazar-sidebar-brand h4 {

        font-size: 22px;

    }


    /* ---------------------------------------------
       MENÜ
       --------------------------------------------- */

    .pazar-sidebar-menu {

        padding: 0 14px 25px 14px;

    }


    .pazar-sidebar-menu .nav-link {

        min-height: 48px;

        padding: 12px 14px;

        margin-bottom: 6px !important;

        font-size: 16px;

    }


    /* ---------------------------------------------
       OVERLAY
       --------------------------------------------- */

    .pazar-sidebar-overlay {

        display: block;

        position: fixed;

        inset: 0;

        z-index: 1150;

        background: rgba(0, 0, 0, 0.55);

        opacity: 0;

        visibility: hidden;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease;

    }


    .pazar-sidebar-overlay.mobile-open {

        opacity: 1;

        visibility: visible;

    }

}


/* =========================================================
   KÜÇÜK TELEFON
   ========================================================= */

@media (max-width: 375px) {

    .pazar-sidebar {

        width: 85vw;

    }


    .pazar-mobile-toggle {

        width: 44px;

        height: 44px;

        top: 10px;

        left: 10px;

    }

}