@media(max-width:560px){

    .login-page{
        padding:18px 14px;
    }

    .login-card{
        max-width:100%;

        padding:
            29px
            22px
            23px;

        border-radius:22px;
    }

    .logo-box{
        height:auto;
    }

    .logo-box img{
        width:240px;
        max-width:100%;
        max-height:none;
    }

    .brand-area h1{
        font-size:27px;
    }

    .input-wrap input{
        height:55px;
    }

    .login-button{
        height:56px;
    }
}

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

.sidebar-mobile-backdrop {
    display: none;
}


@media (max-width: 900px) {

    body.sidebar-mobile-open {
        overflow: hidden;
    }


    #panelSidebar.sidebar {
        position: fixed !important;

        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: min(320px, 86vw) !important;
        height: 100dvh !important;

        z-index: 10002 !important;

        transform: translateX(-105%) !important;
        visibility: hidden;

        transition:
            transform 0.25s ease,
            visibility 0.25s ease !important;

        box-shadow:
            18px 0 45px
            rgba(15, 23, 42, 0.22);
    }


    #panelSidebar.sidebar.mobile-open {
        transform: translateX(0) !important;
        visibility: visible;
    }


    .sidebar-mobile-backdrop {
        position: fixed;

        inset: 0;

        display: block;

        z-index: 10001;

        background:
            rgba(15, 23, 42, 0.48);

        opacity: 0;
        visibility: hidden;

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


    .sidebar-mobile-backdrop.active {
        opacity: 1;
        visibility: visible;
    }


    .sidebar-toggle {
        position: relative;
        z-index: 10000;

        cursor: pointer;
        touch-action: manipulation;
    }
}