body {
    background-color: #fdfaf3;
    font-family: 'Cormorant Garamond', serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 40px;
    box-sizing: border-box;
}

.menu-category {
    padding: 40px 20px;
    border-radius: 8px;
    position: relative;
    overflow: hidden; /* Taşan resim kenarlarını gizle */

    /* Arka plan resmi ayarları */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.menu-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* public/css/menu.css */
.menu-page {
    background-color:#F7ECD9;

    width: 600px;
    padding: 50px 60px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    min-height: 950px; /* BU SATIRI EKLEYİN */
    display: flex; /* İçeriğin dikeyde daha iyi yayılması için */
    flex-direction: column; /* İçeriği dikey sırala */

    background-size: cover; /* Resmi alanı kaplayacak şekilde büyütür/küçültür */
    background-repeat: no-repeat; /* Resmin tekrar etmesini engeller */
    background-position: center; /* Resmi ortalar */
}

.category-title {
    font-size: 2.8em;
    font-weight: 700;
    text-align: center;
    color: #6B4F4F;
    letter-spacing: 4px;
    margin-bottom: 40px;
    margin-top: 20px;
}

.menu-item {
    display: flex;
    align-items: baseline;
    margin-bottom: 15px;
    font-size: 1.2em;
    color: #333;
}

.item-details {
    display: flex;
    flex-direction: column;
}

.item-name {
    font-weight: bold;
}

.item-description {
    font-size: 0.8em;
    color: #777;
    margin-left: 5px;
}

.item-dots {
    flex-grow: 1;
    border-bottom: 2px dotted #6B4F4F;
    margin: 0 10px;
    transform: translateY(-4px);
}

.item-price {
    font-weight: bold;
    color: #6B4F4F;
}

.page-image {
    position: absolute; /* Konumlandırma artık inline style ile yapılıyor */
    height: auto;
    opacity: 0.8;
    z-index: 0; /* Resmin, yazıların arkasında kalması için */
}

@media (max-width: 768px) {
    /* Bu blok içindeki stiller sadece 768px ve daha dar ekranlarda aktif olur */

    body {
        margin:auto;
    }

    .menu-page {
        width: 80%; /* Genişlik sabit olmasın, ekranın %95'ini kaplasın */
        padding: 25px 25px; /* İç boşlukları azalt */
        min-height: auto; /* Yükseklik içeriğe göre otomatik ayarlansın */
        margin: auto;
        min-height: 100vh;

 }

    .category-title {
        font-size: 2em; /* Başlık fontunu küçült */
        letter-spacing: 2px;
    }

    .menu-item {
        font-size: 1em; /* Menü ürünü fontunu küçült */
        /* Kelimeler uzunsa alt satıra insin */
        flex-wrap: wrap;
    }

    .item-details {
        flex-basis: 100%; /* Mobil ekranda ürün adı tüm satırı kaplasın */
        margin-bottom: 5px;
    }

    /* Dekoratif resimleri mobil ekranda gizleyelim, çünkü koordinatları bozulur */
    .page-image {
        display: none;
    }
}
/* Fiyat Matrisi stilleri */
.price-matrix-header {
    display: flex;
    justify-content: flex-end; /* Başlıkları sağa yasla */
    padding-right: 15px; /* Fiyatlarla hizalamak için küçük bir ayar */
    margin-bottom: 5px;
}

.volume-headers {
    display: flex;
    font-weight: bold;
    font-size: 0.9em;
}

.item-prices-matrix, .volume-headers {
    /* Fiyatların ve başlıkların alt alta hizalı olmasını sağlar */
    display: flex;
    justify-content: flex-end;
    gap: 10px; /* Fiyatlar/başlıklar arası boşluk */
    font-family: monospace; /* Fiyatların daha düzgün görünmesi için */
    font-weight: bold;
    color: #6B4F4F;

}

.item-prices-matrix span, .volume-headers span {
    width: 90px; /* Her fiyat/başlık sütununun genişliği sabit olsun */
    text-align: right; /* Sütun içindeki yazıyı sağa yasla */
    font-weight: bold;
}

/* Arka plan resmi olan kategorilerde başlıkların da rengini düzeltelim */
.menu-category[style] .volume-headers {
    color: #fff;
}
/* Katalog Listesi Sayfası Stilleri */
.catalog-list-container {
    background-color: #F5F0E8;
    width: 100%;
    max-width: 800px;
    padding: 50px 60px;
    border-radius: 15px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.08);
    text-align: center;
}

.catalog-list-title {
    font-size: 2.8em;
    font-weight: 700;
    color: #6B4F4F;
    letter-spacing: 4px;
    margin-bottom: 40px;
}

.catalog-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.catalog-item {
    display: block;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(107, 79, 79, 0.2);
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.5em;
    font-weight: 600;
    color: #333;
    transition: all 0.2s ease-in-out;
}

.catalog-item:hover {
    background-color: #fff;
    border-color: #6B4F4F;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}