/* Masaüstünde gizle */
.mobile-menu{
    display:none;
}

/* Mobil */
@media screen and (max-width:767px){

    .mobile-menu{
        display:block;
        position:absolute;
		right:0;
        width:auto;
        z-index:9999;
    }

    /* Buton */
    .mobile-menu-btn{
        width:45px;
        height:45px;
        border:none;
        background:transparent;
        cursor:pointer;
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:6px;
        padding:0;
		color:transparent;
		background-color: transparent;
    }

    .mobile-menu-btn span{
        display:block;
        width:30px;
        height:3px;
        background:#fff;
        border-radius:3px;
        transition:.3s;
    }

    /* X animasyonu */
    .mobile-menu-btn.active span:nth-child(1){
        transform:rotate(45deg) translate(6px,6px);
    }

    .mobile-menu-btn.active span:nth-child(2){
        opacity:0;
    }

    .mobile-menu-btn.active span:nth-child(3){
        transform:rotate(-45deg) translate(7px,-7px);
    }

    /* Menü */
    .mobile-menu-content{
        display:none;
        position:absolute;
        top:55px;
        right:0;
        width:100%;
		min-width:250px;
        background:#fff;
        box-shadow:0 8px 20px rgba(0,0,0,.15);
    }

    .mobile-menu-content ul{
        margin:0;
        padding:0;
        list-style:none;
    }

    .mobile-menu-content li{
        border-bottom:1px solid #eee;
    }

    .mobile-menu-content li:last-child{
        border-bottom:none;
    }

    .mobile-menu-content a{
        display:block;
        padding:16px 20px;
        color:#222;
        text-decoration:none;
        font-size:16px;
        transition:.3s;
    }

    .mobile-menu-content a:hover{
        background:#f5f5f5;
    }
	mobile-menu-btn:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover{color:transparent;background-color:transparent;}

}