/* Urun fotograflarinin yuvarlak koseleri. Fotografli kartlarda kap (.menu-info) yuvarlatilir: kap zaten tasani kesiyor, masaustundeki
   hover yakinlastirmasinda da koseler yuvarlak kalir; detayli fotografta kartin alt beyaz kismi da ayni koseyle biter. */
.menu-item2 .menu-info,
.menu-item4 .menu-info {
    border-radius: 14px;
}

.menu-item3 img {
    border-radius: 10px;
}

/* Detayli fotograf: kartlar arasi sinir belli olsun (ozellikle mobilde alt alta kartlar birbirine karisiyordu). Legacy'nin alt golgesi
   kabin overflow: hidden'ina takiliyor; kenarlik ve golge kabin kendisinde, belli belirsiz. */
.menu-item4 .menu-info {
    border: 1px solid #ece8e1;
    box-shadow: 0 2px 10px rgba(75, 71, 65, 0.08);
}

/* Fotografli liste: legacy aciklamayi sola yaslar (float); kisa aciklama urun adinin yanina, noktali cizginin ustune biniyordu. Aciklama
   ad ve fiyatin altina iner; yazi blogu kendi yerlesim baglamini kurar (flow-root), clear soldaki kucuk resmi temizleyip aciklamayi
   resmin altina itmesin. */
.menu-item3 .menu-wrapper {
    display: flow-root;
}

.menu-item3 .menu-wrapper p {
    float: none;
    clear: both;
}

/* Fotograf gorunumu, dokunmatik ekran: urun bilgileri yalniz uzerine gelince gorunuyordu; ekrana giren urunun bilgileri gosterilir
   (menu-items.js). Gecis legacy'nin 0,4 sn'lik fade'i. */
.menu-item2 .menu-info.menu-info-in-view .menu2-overlay {
    opacity: 1;
    visibility: visible;
}

/* Karta dokununca bilgiler gizlenir, fotograf gorunur (menu-items.js). Dokunmatikte :hover dokunulan kartta takili kalir; legacy
   .menu-info:hover kuralini da ezmesi icin daha ozgul. */
.menu-item2 .menu-info.menu-info-dismissed .menu2-overlay {
    opacity: 0;
    visibility: hidden;
}

/* Mobil kapak: legacy kapak (200/150 px ic bosluk, 61 px baslik) ilk ekranin ~%60'ini kapliyor, ilk urun ekranin altinda basliyordu.
   main.css arka plani sabitliyor (background-attachment: fixed !important); iOS bunu desteklemedigi icin resim tum sayfa boyuna
   yayiliyor. Masaustu degismez. */
@media (max-width: 767px) {
    .page_header {
        padding: 64px 0 52px;
        background-attachment: scroll !important;
    }

    .page_header h2 {
        font-size: 36px;
        line-height: 40px;
    }
}

/* Kontrast: legacy fiyat rengi (#E7AD48) beyazda 2,0:1 (buyuk yazi icin en az 3:1); ayni tonun koyusu 4,2:1. */
.menu4-overlay .price {
    color: #a86f12;
}

/* Detayli fotograf, mobil: kartin yazi kismi sikilasir (baslik ustu 46 px, fiyat 36 px ve altinda 45 px bosluk vardi). */
@media (max-width: 767px) {
    .menu4-overlay h4 {
        margin: 18px 0 8px;
    }

    .menu4-overlay .price {
        padding: 8px 0 18px;
        font-size: 28px;
    }
}

/* Fotografli liste, <= 480 px: legacy fiyati float: none + display: table yapiyor; alta inmek yerine adin hemen bitisiginde kaliyor,
   noktali cizgi fiyattan sonra bosluga uzaniyordu. Fiyat diger genisliklerdeki gibi saga yaslanir; ad sigmazsa ad tam genislikte sarar,
   fiyat altina saga iner. */
@media (max-width: 480px) {
    .menu .food-menu .menu-item3 .price {
        float: right;
        padding-left: 10px;
    }
}

/* Dokunmatik ekran: legacy fotograf yakinlastirmasi (:hover, scale 1.1) dokununca takili kaliyordu; yalniz fareli cihazda calisir. */
@media (hover: none) {
    .menu-item2:hover img,
    .menu-item4:hover img {
        transform: none;
        opacity: 1;
    }
}