@charset "utf-8";
@media screen and (max-width: 769px){
    body{
        color: #000000;
        font-family: Roboto;
        background: #F5AE0C;
        background: linear-gradient(180deg, rgba(245, 174, 12, 1) 0%, rgba(255, 255, 255, 1) 100%);
        background-position: center center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0px;
        padding: 0px;
        padding-bottom:15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    header{
        background-color: #506b4a;
        width: 100%;
        height: auto;
        display: flex; 
        flex-direction: column;
        justify-content: center;
        position: sticky;
        top: 0;
        z-index: 1000; /
    }

    header a{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    header a img{
        width: 50%;
        margin-top: 25px;
    }

    nav{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    nav ul{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0px;
        padding: 0px;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    nav ul li{
        list-style: none;
        margin: 0px;
        padding: 0px;
        text-align: center;
    }

    nav ul li a{
        color: #000000;
        display: inline-block;
        background-color: #F5AE0C;
        margin-top: 5px;
        width: 250px;
        height: 25px;
        padding: 5px;
        border-radius: 5px;
        line-height: 25px;
        text-decoration: none;
    }

    nav ul li a:hover{
        background-color: #fff;
        color: #506b4a;
    }

        /* Hamburger simgesinin görünümü */
    .hamburger {
        display: block;
        font-size: 40px;
        cursor: pointer;
        color: #F5AE0C;
        padding: 10px;
    }

    /* Başlangıçta menü listesini gizle */
    nav ul {
        display: none; /* Mevcut "display: flex" yerine bunu yaz */
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Checkbox tıklandığında (checked olduğunda) menüyü göster */
    #menu-toggle:checked ~ ul {
        display: flex;
        color: #000000;
    }

    main{
        width: 80%;
        height: auto;
    }

    article{
        margin-bottom: 15px;
    }

    .yemek h6{
        text-align: center;
        font-size: larger;
        color: #F5AE0C;
        background-color: #506b4a;
        margin-top: 15px;
        margin-bottom: 15px;
        border-radius: 5px;
        padding: 10px;

    }

    .kart{
        background-color: rgba(249, 249, 249, 1);
        border-radius: 5px;
        border-width: 1px;
        border-style: solid;
        border-color: #506b4a;
        margin-top:15px;
        padding-bottom:15px;
        padding-left:30px;
        padding-right:30px;
    }

    .kartici{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .kartici img{
        max-height:fit-content;
        width: 100%;
        border-radius: 5px;
    }

    .kartici p{
        width: 100%;
    }

    .kartici .fiyat{
        width: 100%;
        color: #f5180c;
        text-align: right;
    }

    footer{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    footer .social{
        width: 80%;
        display: flex;
        justify-content: center;
    }

    footer .social img{
        width: 30px;
        margin: 5px;
    }

    footer .copyright{
        width: 100%;
        text-align: center;
        padding: 10px;
    }
}

@media screen and (min-width: 769px){
    body{
        color: #000000;
        font-family: Roboto;
        background: #F5AE0C;
        background: linear-gradient(180deg, rgba(245, 174, 12, 1) 0%, rgba(255, 255, 255, 1) 100%);
        background-position: center center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0px;
        padding: 0px;
    }

    header{
        background-color: #506b4a;
        width: 100%;
        height: auto;
        position: sticky;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    header img{
        width: 100%;
        height:auto;
        margin: 10px;
    }

    .hamburger{
        display: none;
    }

    header nav ul {
        display: flex;
        justify-content: center; /* Elemanları yatayda ortalar */
        gap: 10px;             /* Elemanlar arasına eşit boşluk bırakır */
        padding: 15px;         /* Kenarlardan nefes aldırır */
        list-style: none;
        
        flex-wrap: wrap;
        
    }

    header nav ul li a{
        font-size: small;
        background: #F5AE0C;
        border-radius: 5px;
        color: #506b4a;
        text-decoration: none;
        display: inline-block; /* Genişlik ve yükseklik alabilmesini sağlar */
        white-space: nowrap;   /* Yazıların kendi içinde alt satıra geçmesini önler */
        padding: 8px 15px;     /* İç boşlukları dengeler */
        margin: 0;
    }

    header nav ul li a:hover{
        background-color: #fff;
        color: #506b4a;
    }

    article {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Kartları yatayda ortalar */
    align-items: stretch;    /* Kart boylarının eşit kalmasını sağlar */
    max-width: 1200px;       /* Sayfa çok genişse kartların dağılmasını önler */
    margin: 0 auto;          /* Article'ın kendisini sayfaya ortalar */
    }

    article .baslik{
        width: 100%;
        text-align: center;
        font-size: xx-large;
        color: #F5AE0C;
        margin-top: 15px;
        padding: 0px;
    }

    article .baslik h6{
        max-width: 1200px;
        background-color:#506b4a;
        border-radius: 5px;
        margin: 0px;
        padding: 5px;
    }

    .kart{
        width: 20%;
        background-color: rgba(249, 249, 249, 1);
        border-radius: 5px;
        border-width: 1px;
        border-style: solid;
        border-color: #506b4a;
        margin-top:15px;
        padding-bottom:15px;
        padding-left:15px;
        padding-right:15px;
        margin: 15px;
        width: calc(25% - 60px);
        display: flex;         /* Kartın kendisini de flex yapar */
        flex-direction: column; /* İçeriği dikey dizer */
        /* ... diğer mevcut kodların ... */
    }

    .kart h3{
        text-align: center;
    }

    .kartici {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%; /* İçeriğin kartın tüm boyunu kullanmasını sağlar */
    }

    main article .kart img{
        width: 80%;
        border-radius: 15px;
    }

    main article .kartici .fiyat {
    margin-top: auto;    /* Üstteki tüm boşluğu doldurarak fiyatı aşağı iter */
    width: 100%;
    text-align: right;
    color: #f5180c;
    padding-top: 15px;   /* Metinle fiyat arasına küçük bir nefes payı */
    margin-bottom: 0px;
}
}