/* Alt sayfalar. style.css'teki bileşenleri (hero, menu-section, product-grid, footer) aynen kullanır;
   burada yalnızca alt sayfa hero yüksekliği ve ardışık bölüm boşlukları ayarlanır. */

/* iOS yatay çevirmede yazıları kendiliğinden büyütmesin */
html {
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%
}

.hero--page {
    height:auto;
    min-height:0;
    max-height:none;
    padding-bottom:78px
}

.hero--page .hero-poster {
    object-position:center 40%
}

.hero--page .hero-content {
    padding-top:clamp(70px,10vh,120px)
}

.hero--page .hero-description {
    margin-bottom:0
}

.menu-section+.menu-section {
    padding-top:0
}

/* Menü sayfası (masa karekodu → telefon): uzun ürün adı / tek uzun kelime kartı ekrandan taşırmasın.
   Grid öğesi min-content'e göre büyümesin; metin gerekirse kelime içinden kırılsın. */
.menu-section .product,
.menu-section .product-heading {
    min-width:0
}

.menu-section .product h3,
.menu-section .product p {
    min-width:0;
    overflow-wrap:anywhere
}

/* Yatay telefon / küçük tablet: 3 dar sütunda fiyat adı sıkıştırıyor → 2 sütun */
@media(min-width:601px) and (max-width:900px) {
    .menu-section .product-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

/* Görseli olmayan ürün (ör. içecek): boş görsel kutusu yerine doğrudan başlık */
.menu-section .product > .product-heading:first-child {
    margin-top:0
}

/* Menü sayfası: gramaj (fiyat style.css'teki .price ile gösterilir) */
.product .product-weight {
    font-size:13px;
    font-weight:700;
    letter-spacing:.2px;
    color:var(--copper);
    margin:-3px 0 6px
}

.menu-empty {
    font-size:17px;
    color:var(--muted);
    margin:0
}

@media(max-width:900px) {
    .hero--page {
        min-height:0
    }
    .hero--page .hero-content {
        padding-top:90px
    }
}

@media(max-width:600px) {
    .menu-section+.menu-section {
        padding-top:0
    }
}

/* Telefon (dikey ≤600px; yatay: ≤900px genişlik ve kısa ekran). Masa karekoduyla gelen müşteri
   doğrudan ürünlere insin: hero logo yüksekliğinde ince bir bara döner — solda logo, sağda başlık.
   Menü/Konum bağlantıları ile başlığın üstündeki ve altındaki metinler gizlenir. */
@media(max-width:600px),(max-width:900px) and (max-height:500px) {
    .hero--page {
        height:auto;
        min-height:0;
        max-height:none;
        padding:0 0 18px
    }
    .hero--page .hero-shade {
        background:linear-gradient(90deg,rgba(16,12,8,.88),rgba(16,12,8,.6))
    }
    .hero--page .site-header {
        padding-top:18px
    }
    .hero--page .site-header nav,
    .hero--page .hero-content .eyebrow,
    .hero--page .hero-description {
        display:none
    }
    .hero--page .hero-content {
        position:absolute;
        top:18px;
        left:0;
        right:0;
        bottom:auto;
        height:52px;
        margin:0 auto;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        pointer-events:none
    }
    .hero--page h1 {
        font-size:40px;
        letter-spacing:-1.6px;
        line-height:1;
        margin:0;
        max-width:58%;
        text-align:right
    }
}

/* Yatay telefonda logo masaüstü boyutunda (36px, 2 satır ≈ 65px): başlığı logo yazısıyla hizala */
@media(min-width:601px) and (max-width:900px) and (max-height:500px) {
    .hero--page .hero-content {
        height:65px
    }
}

/* Telefonda ürünler liste satırı (panel menü listesindeki gibi):
   solda küçük görsel · ortada ad + açıklama · sağda fiyat + gramaj. Masaüstü/tablet kart düzeni aynen. */
@media(max-width:600px),(max-width:900px) and (max-height:500px) {
    .menu-section .product-grid {
        grid-template-columns:1fr;
        gap:0
    }
    .menu-section .product {
        display:grid;
        grid-template-columns:clamp(64px,22vw,96px) minmax(0,1fr) auto;
        grid-template-areas:"img name price" "img desc weight";
        column-gap:14px;
        row-gap:4px;
        padding:16px 0;
        border-top:1px solid var(--line)
    }
    .menu-section .product:last-child {
        border-bottom:1px solid var(--line)
    }
    .menu-section .product:not(:has(.product-image)) {
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:"name price" "desc weight"
    }
    .menu-section .product-heading {
        display:contents
    }
    .menu-section .product-image {
        grid-area:img;
        align-self:center;
        aspect-ratio:1.35;
        border-radius:7px
    }
    .menu-section .product h3 {
        grid-area:name;
        align-self:end;
        font-size:18px;
        letter-spacing:-.4px;
        line-height:1.2;
        margin:0
    }
    .menu-section .product .price {
        grid-area:price;
        align-self:end;
        justify-self:end;
        font-size:16px;
        line-height:1.2
    }
    .menu-section .product .product-weight {
        grid-area:weight;
        align-self:start;
        justify-self:end;
        font-size:13px;
        font-weight:600;
        letter-spacing:0;
        color:var(--muted);
        margin:0;
        text-align:right;
        max-width:34vw
    }
    .menu-section .product p:not(.product-weight) {
        grid-area:desc;
        align-self:start;
        font-size:13px;
        line-height:1.45
    }
    .menu-section .product:hover img {
        transform:none
    }
}

/* Ürün görseli modalı (assets/menu.js) */
.menu-section .product-image img {
    cursor:zoom-in
}

.image-modal {
    padding:0;
    border:0;
    background:transparent;
    max-width:min(92vw,1100px);
    max-height:88vh;
    overflow:visible
}

.image-modal::backdrop {
    background:rgba(10,8,5,.86)
}

.image-modal img {
    display:block;
    max-width:min(92vw,1100px);
    max-height:88vh;
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:10px
}

.image-modal-close {
    position:absolute;
    top:-14px;
    right:-10px;
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:var(--cream);
    color:var(--ink);
    font:700 24px/1 inherit;
    cursor:pointer
}

.modal-open {
    overflow:hidden
}