body{ 
    font-family: Arial, sans-serif;
    background: #f5f3ef;
}

*{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-decoration: none;
}

.logo{
    width: 100%;
    height: 100px;
    float: left;
    position: relative;
    object-fit: contain;
}

.content{
    width: 100%;
    float: left;
    position: relative;
}

.menuGiris{
    width: 100%;
    float: left;
    position: relative;
    background-color: #c1272d;
}

.menuGiris .menuList{
    width: 620px;
    position: relative;
    float: left;
    margin-top: 60px;
    margin-bottom: 150px;
    margin-left: calc(50% - 425px);
    color: #fff;
}

.menuGiris .menuList .katCont{
    width: 100%;
    float: left;
    position: relative;
    font-size: 17px;
    letter-spacing: 1px;
    margin:25px 0px;
}


.menu-page {
    width: 100%;
    float: left;
    position: relative;
}
/*
.menu-page:after {
    content: '';
    width: calc(50% - 320px); 
    height: 100%;
    position: absolute;
    right: 0px;
    top:0px;
    background-color: #c1272d;
}
*/
.menu-background {
    width: 100%;
    position: absolute; 
    z-index: 0;
    pointer-events: none;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
        overflow-x: hidden;
}

.menu-background:after {
    content: '';
    width: calc(50% - 320px); 
    height: 100%;
    position: absolute;
    right: 0px;
    top:0px;
    background-color: #c1272d;
}


.zeminBg {
    width: 850px;
    aspect-ratio: 850 / 850;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
}
 
 

.zemin-giris{
    width:850px;
    aspect-ratio:850 / 141;
    background-color:#c1272d;
    mask:url("/_images/menuSvgG3.svg") no-repeat center;
    -webkit-mask:url("/_images/menuSvgG3.svg") no-repeat center;
    mask-size:100% 100%;
    -webkit-mask-size:100% 100%;
}

.zemin-cikis{
    width:850px;
    aspect-ratio:850 / 141;
    background-color:#c1272d;
    mask:url("/_images/menuSvgC2.svg") no-repeat center;
    -webkit-mask:url("/_images/menuSvgC2.svg") no-repeat center;
    mask-size:100% 100%;
    -webkit-mask-size:100% 100%;
}

.zemin-1 { 
    background-color:#c1272d;
    mask:url("/_images/menuSvgZ1.svg") no-repeat center;
    -webkit-mask:url("/_images/menuSvgZ1.svg") no-repeat center;
    mask-size:100% 100%;
    -webkit-mask-size:100% 100%;
}

.zemin-2 {
    background-color:#c1272d;
    mask:url("/_images/menuSvgZ2.svg") no-repeat center;
    -webkit-mask:url("/_images/menuSvgZ2.svg") no-repeat center;
    mask-size:100% 100%;
    -webkit-mask-size:100% 100%;
}

.zemin-3 {
    background-color:#c1272d;
    mask:url("/_images/menuSvgZ3.svg") no-repeat center;
    -webkit-mask:url("/_images/menuSvgZ3.svg") no-repeat center;
    mask-size:100% 100%;
    -webkit-mask-size:100% 100%;
}

.zemin-4 {
    background-color:#c1272d;
    mask:url("/_images/menuSvgZ4.svg") no-repeat center;
    -webkit-mask:url("/_images/menuSvgZ4.svg") no-repeat center;
    mask-size:100% 100%;
    -webkit-mask-size:100% 100%;
}



.menu-content {
    width: 600px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}


.menu_ara_title{
    width: 100%;
    height: 140px;
    float: left;
    position: relative;
    font-size: 25px;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
}

.card{
    width: 100%;
    float: left;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
    box-sizing: border-box;
}

.card .img{
    width: 150px;
    height: 150px;
    float: left;
    position: relative;
}

.card .img img{
    width: 100%;
    height: 100%;
    float: left;
    position: relative;
    object-fit: contain;
}


.card .info{
    width: calc(100% - 170px);
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 5px;
}

.card .info .title{
    width: 100%;
    line-height: 1.4;
    float: left;
    letter-spacing: 0.5px;
    font-size: 20px;
    font-weight: 600;
}

.card .info .fiyat{
    width: 100%;
    line-height: 1;
    float: left;
    letter-spacing: 0.5px;
}


.yemek1{ height: 190px; padding-left: 130px; }
.yemek1 .img{ width: 190px; height: 190px; }
.yemek1 .info{ width: calc(100% - 210px); }

.yemek2{height: 150px;  flex-direction: row-reverse; margin-top: 20px; padding-right: 220px;}
.yemek2 .img{ }
.yemek2 .info{ }
.yemek2 .info *{  text-align: right;}

.yemek3{ height: 150px; padding-left: 175px; margin-top:20px; }
.yemek3 .img{ }
.yemek3 .info{ }

.yemek4{height: 200px; flex-direction: row-reverse; padding-right: 160px; margin-top: 20px;}
.yemek4 .img{ width: 200px; height: 200px; }
.yemek4 .info{ width: calc(100% - 220px); }
.yemek4 .info *{  text-align: right;}

.yemek5{ height: 150px; padding-left: 190px; margin-top: 20px; }
.yemek5 .img{ }
.yemek5 .info{ }

.yemek6{ height: 130px; flex-direction: row-reverse; margin-top: 10px; padding-right: 220px; }
.yemek6 .img{ width: 130px; height: 130px; }
.yemek6 .info{ }
.yemek6 .info *{  text-align: right;}

.yemek7{ height: 130px; padding-left: 170px; }
.yemek7 .img{ width: 130px; height: 130px;}
.yemek7 .info{ width: calc(100% - 150px); }
.yemek7 .info *{  }

.yemek8{ height: 170px; flex-direction: row-reverse;  padding-right: 200px; }
.yemek8 .img{ width: 170px; height: 170px; }
.yemek8 .info{ width: calc(100% - 190px); }
.yemek8 .info *{  text-align: right;}

.yemek9{ height: 140px; padding-left: 170px; }
.yemek9 .img{ width: 140px; height: 140px; }
.yemek9 .info{ width: calc(100% - 160px); }

.yemek10{height: 130px; flex-direction: row-reverse; padding-right: 215px; }
.yemek10 .img{ width: 130px; height: 130px;}
.yemek10 .info{ width: calc(100% - 160px); }
.yemek10 .info *{ text-align: right; }

.yemek11{ height: 150px; padding-left: 170px; }
.yemek11 .img{ }
.yemek11 .info{ }
.yemek11 .info *{  }

.yemek12{ height: 190px; flex-direction: row-reverse; padding-right: 200px; margin-top: 25px; }
.yemek12 .img{ width: 190px; height: 190px;}
.yemek12 .info{ width: calc(100% - 210px); }
.yemek12 .info *{  text-align: right;}

.yemek13{ height: 230px; padding-left: 100px; margin-top: 20px;}
.yemek13 .img{ width: 230px; height: 230px; }
.yemek13 .info{ width: calc(100% - 250px); }
.yemek13 .info *{  }

.yemek14{height: 150px; flex-direction: row-reverse; padding-right: 220px; margin-top: 30px;}
.yemek14 .img{ width: 150px; height: 150px;}
.yemek14 .info{ width: calc(100% - 170px); }
.yemek14 .info *{ text-align: right; }

.yemek15{ height: 180px; padding-left: 150px; margin-top: 25px;}
.yemek15 .img{ width: 180px; height: 180px;}
.yemek15 .info{ width: calc(100% - 200px); }
.yemek15 .info *{  }

.yemek16{ height: 180px; flex-direction: row-reverse; padding-right: 170px; margin-top: 15px; }
.yemek16 .img{ width: 180px; height: 180px;}
.yemek16 .info{ width: calc(100% - 200px); }
.yemek16 .info *{ text-align: right; }

.yemek17{ height: 180px; padding-left: 145px; margin-top: 20px; }
.yemek17 .img{ width: 180px; height: 180px;}
.yemek17 .info{ width: calc(100% - 200px); }
.yemek17 .info *{  }

.yemek18{ height: 250px; flex-direction: row-reverse; padding-right: 130px; margin-top: 30px; margin-bottom: 90px;}
.yemek18 .img{ width: 250px; height: 250px;}
.yemek18 .info{ width: calc(100% - 270px); }
.yemek18 .info *{ text-align: right; }






@media (max-width: 1024px) {
        

    .menuGiris .menuList{
        width: calc(100% - 80px);
        position: relative;
        float: left;
        margin-top: 60px;
        margin-bottom: 150px;
        margin-left: 40px;
        color: #fff;
    }

}



@media (max-width: 640px) {

    .menu-content { width: calc(100% - 50px); margin-left: 25px; }


}