:root{
    --bg-body:#f5f5f7;
    --ink:#101827;
    --muted:#6b7280;
    --accent:#b78a33;
    --accent-soft:#f6efe0;
    --accent-deep:#8b5a16;
    --danger:#b91c1c;
    --radius-xl:32px;
    --shadow-soft:0 24px 80px rgba(15,23,42,0.14);
}

/* GLOBAL */
*,*::before,*::after{ box-sizing:border-box; }

body{
    margin:0;
    min-height:100vh;
    font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:
        radial-gradient(circle at -10% 0%, rgba(183,138,51,0.16), transparent 55%),
        radial-gradient(circle at 110% 120%, rgba(15,23,42,0.18), transparent 60%),
        linear-gradient(180deg,#f0f1f5,#f8fafc);
}

.shell{
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:18px 12px 30px;
}
@media (min-width:768px){
    .shell{ padding:32px 24px 40px; }
}

/* DETAY SAYFASI KUTUSU (ÇORBALAR) */
.page{
    width:100%;
    max-width:1120px;
    background:radial-gradient(circle at 0 0, rgba(255,255,255,0.85), rgba(255,255,255,0.97));
    border-radius:var(--radius-xl);
    border:1px solid rgba(255,255,255,0.8);
    box-shadow:var(--shadow-soft);
    padding:1.4rem 1.1rem 2.4rem;
    position:relative;
    overflow:hidden;
}
@media (min-width:900px){
    .page{ padding:1.9rem 2rem 2.8rem; }
}

.page::before{
    content:"";
    position:absolute;
    inset:-60%;
    background:
        radial-gradient(circle at 0% 0%, rgba(183,138,51,0.12), transparent 55%),
        radial-gradient(circle at 120% 120%, rgba(15,23,42,0.18), transparent 60%);
    opacity:.7;
    pointer-events:none;
}

.page-inner{
    position:relative;
    z-index:1;
}

.top-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-bottom:1.2rem;
}
.back-link{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    font-size:.8rem;
    color:#4b5563;
    text-decoration:none;
    padding:.35rem .7rem;
    border-radius:999px;
    background:rgba(255,255,255,0.9);
    border:1px solid rgba(229,231,235,0.9);
}
.back-link i{ font-size:.9rem; }

.top-badge{
    font-size:.78rem;
    color:#9ca3af;
}

/* HERO (ORTAK) */
.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:.9rem;
    margin-bottom:1.8rem;
}

.hero-card{
    width:100%;
    max-width:560px;
    border-radius:40px;
    background:
        linear-gradient(135deg,rgba(255,255,255,0.80),rgba(255,255,255,0.98));
    border:1px solid rgba(229,231,235,0.9);
    padding:1.1rem 1.7rem 1.25rem;
    box-shadow:0 25px 60px rgba(15,23,42,0.13);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.55rem;
}

.hero-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 0 0, rgba(183,138,51,0.16), transparent 55%);
    border-radius:999px;
    padding:.6rem 1.7rem;
}

.hero-logo img{
    display:block;
    max-width:300px;
    max-height:182px;
    width:auto;
    height:auto;
}

/* Marka yazısı iki sayfada da kullanılıyor */
.hero-brand{
    font-family:"Cormorant Garamond",serif;
    font-size:1.4rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.hero-badges{
    margin-top:.35rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.4rem;
}

.hero-chip{
    display:inline-flex;
    align-items:center;
    gap:.32rem;
    font-size:.77rem;
    border-radius:999px;
    padding:.28rem .78rem;
    border:1px solid rgba(212,215,224,0.9);
    background:rgba(248,250,252,0.9);
    color:var(--muted);
    backdrop-filter:blur(10px);
}

.hero-chip i{ font-size:.9rem; }

.hero-chip.primary{
    background:var(--accent-soft);
    border-color:rgba(183,138,51,0.65);
    color:var(--accent-deep);
}

.hero-chip.danger{
    background:linear-gradient(135deg,#fee2e2,#fef2f2);
    border-color:#fecaca;
    color:#991b1b;
}

/* AŞAĞI OK GÖSTERGESİ (ORTAK) */
.scroll-indicator-wrapper{
    margin-top:1.4rem;
    display:flex;
    justify-content:center;
}

.scroll-indicator{
    position:relative;
    width:46px;
    height:46px;
    border-radius:999px;
    border:1px solid rgba(183,138,51,0.85);
    background:rgba(255,255,255,0.96);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent-deep);
    box-shadow:0 14px 36px rgba(15,23,42,0.35);
    text-decoration:none;
    cursor:pointer;
    overflow:visible;
}

.scroll-indicator i{
    font-size:1.4rem;
    animation:arrowBounce 1.2s ease-in-out infinite;
    position:relative;
    z-index:3;
}

.scroll-indicator::before,
.scroll-indicator::after{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:inherit;
    border:2px solid rgba(183,138,51,0.55);
    opacity:0;
    transform:scale(.6);
    animation:pulseRing 1.7s ease-out infinite;
    z-index:1;
}

.scroll-indicator::after{
    inset:-10px;
    border-color:rgba(183,138,51,0.35);
    animation-delay:.4s;
}

@keyframes pulseRing{
    0%{
        opacity:.7;
        transform:scale(.4);
    }
    70%{
        opacity:0;
        transform:scale(1.4);
    }
    100%{
        opacity:0;
        transform:scale(1.65);
    }
}

@keyframes arrowBounce{
    0%,100%{ transform:translateY(-1px); }
    50%{ transform:translateY(3px); }
}

/* ÇORBA DETAY SAYFASI – MENÜ BAŞLIK + GRID + KARTLAR */
.menu-section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-top:1.6rem;
    margin-bottom:.8rem;
    gap:.75rem;
}
.menu-section-head h2{
    margin:0;
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:.16em;
}
.menu-section-head p{
    margin:.2rem 0 0;
    font-size:.8rem;
    color:var(--muted);
}
.menu-section-note{
    font-size:.76rem;
    color:#9ca3af;
    text-align:right;
}

.menu-grid{
    display:grid;
    grid-template-columns:repeat(1,minmax(0,1fr));
    gap:.9rem;
}
@media (min-width:720px){
    .menu-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ÇORBA DETAY KARTI */
.menu-item{
    border-radius:20px;
    padding:.75rem .9rem;
    background:rgba(255,255,255,0.96);
    border:1px solid rgba(229,231,235,0.95);
    box-shadow:0 14px 35px rgba(15,23,42,0.08);
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:.7rem;
}
@media (min-width:640px){
    .menu-item{
        grid-template-columns:120px minmax(0,1fr);
        align-items:center;
    }
}

.menu-item-media{
    border-radius:16px;
    overflow:hidden;
    background:#e5e7eb;
    position:relative;
}
.menu-item-media::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 0 0, rgba(183,138,51,0.18), transparent 55%),
        radial-gradient(circle at 120% 120%, rgba(250,250,252,1), rgba(229,231,235,1));
}
.menu-item-img{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.02);
    transition:transform .22s ease;
}
.menu-item:hover .menu-item-img{
    transform:scale(1.06);
}

.menu-item-content{
    display:flex;
    flex-direction:column;
    gap:.45rem;
}

.menu-item-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:.5rem;
}
.menu-item-title{
    font-size:1.08rem;
    font-weight:600;
    letter-spacing:.03em;
}

/* Porsiyon & fiyat satırları */
.menu-item-prices{
    margin-top:.12rem;
    font-size:1rem;
    color:#374151;
}
.portion-row{
    display:flex;
    justify-content:space-between;
    gap:.75rem;
    padding:.18rem 0 .26rem;
    border-bottom:1px dashed rgba(209,213,219,0.9);
}
.portion-label{
    font-weight:700;
    color:#111827;
    font-size:1.03rem;
}
.portion-price{
    font-weight:700;
    color:var(--accent-deep);
    white-space:nowrap;
    font-size:1.03rem;
}

/* Porsiyon yoksa: başlık yanında tek fiyat */
.menu-item-single-price{
    font-size:1rem;
    font-weight:600;
    color:var(--accent-deep);
    white-space:nowrap;
}

.menu-item-desc{
    font-size:.8rem;
    color:var(--muted);
    margin-top:.3rem;
}

/* FOOTER METİNLER (ORTAK) */
.footer-note{
    margin-top:1.6rem;
    text-align:center;
    font-size:.75rem;
    color:#9ca3af;
}
.dev-credit{
    margin-top:.4rem;
    text-align:center;
    font-size:.72rem;
    color:#9ca3af;
}
.dev-credit a{
    color:#6b7280;
    text-decoration:none;
    font-weight:500;
}
.dev-credit a:hover{
    text-decoration:underline;
    color:#4b5563;
}

/* QR ANA SAYFA ÖZEL KISIMLAR */

.qr-page{
    width:100%;
    max-width:1120px;
    background:radial-gradient(circle at 0 0, rgba(255,255,255,0.85), rgba(255,255,255,0.97));
    border-radius:var(--radius-xl);
    border:1px solid rgba(255,255,255,0.8);
    box-shadow:var(--shadow-soft);
    padding:1.6rem 1.1rem 2.2rem;
    position:relative;
    overflow:hidden;
}
@media (min-width:900px){
    .qr-page{ padding:2.1rem 2rem 2.8rem; }
}

.qr-page::before{
    content:"";
    position:absolute;
    inset:-60%;
    background:
        radial-gradient(circle at 0% 0%, rgba(183,138,51,0.12), transparent 55%),
        radial-gradient(circle at 120% 120%, rgba(15,23,42,0.18), transparent 60%);
    opacity:.7;
    pointer-events:none;
}

.qr-main{
    position:relative;
    z-index:1;
}

/* Ana menü başlık bloğu */
.section-head{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-end;
    gap:.75rem;
    padding-top:1.5rem;
    margin-top:1.4rem;
    border-top:1px solid rgba(222,226,236,0.95);
}
.section-title-block h2{
    margin:0;
    font-size:.94rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#374151;
}
.section-title-block p{
    margin:.18rem 0 0;
    font-size:.8rem;
    color:var(--muted);
}

/* Ana menü grid (2 kart, ama .menu-grid ile aynı yapı) */
.menu-grid{
    margin-top:1.4rem;
}

/* Kategori kutuları (tile) */
.tile{
    border:none;
    padding:0;
    background:transparent;
    text-align:left;
    cursor:pointer;
    display:block;
    text-decoration:none;
    color:inherit;
}

.tile-inner{
    border-radius:22px;
    background:linear-gradient(180deg,#ffffff,#f9fafb);
    border:1px solid rgba(226,232,240,0.9);
    box-shadow:0 20px 45px rgba(15,23,42,0.10);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:240px;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.tile:focus-visible .tile-inner{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.tile-inner:hover{
    transform:translateY(-4px);
    box-shadow:0 28px 70px rgba(15,23,42,0.20);
    border-color:rgba(183,138,51,0.8);
    background:linear-gradient(180deg,#ffffff,#f5f3ea);
}

/* Üst text bloğu */
.tile-body{
    padding:.75rem .9rem .4rem;
    display:flex;
    flex-direction:column;
    gap:.3rem;
}

.tile-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:.4rem;
}

.tile-title{
    font-size:.9rem;
    font-weight:600;
}

.tile-arrow{
    font-size:.92rem;
    color:#9ca3af;
}

.tile-desc{
    font-size:.76rem;
    color:var(--muted);
    line-height:1.35;
}

.tile-meta-row{
    margin-top:.05rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:.72rem;
    color:#6b7280;
}

.tile-pill{
    border-radius:999px;
    border:1px solid rgba(209,213,219,0.95);
    padding:.08rem .55rem;
    background:#f9fafb;
}

.tile-meta-soft{
    color:#9ca3af;
}

/* Foto bloğu */
.tile-media{
    margin-top:.32rem;
    padding:0 .9rem .9rem;
}

.tile-media-box{
    border-radius:18px;
    position:relative;
    overflow:hidden;
    background:#e5e7eb;
    aspect-ratio:4/3;
}

.tile-media-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 0 0, rgba(183,138,51,0.18), transparent 52%),
        radial-gradient(circle at 120% 120%, rgba(250,250,252,1), rgba(229,231,235,1));
}

.tile-media-box.with-image::before{
    content:none;
}

.tile-media-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.02);
    transition:transform .25s ease;
}

.tile-inner:hover .tile-media-img{
    transform:scale(1.06);
}

.tile-media-label{
    position:absolute;
    left:12px;
    top:12px;
    border-radius:999px;
    padding:.14rem .7rem;
    font-size:.7rem;
    background:rgba(255,255,255,0.97);
    color:#4b5563;
    box-shadow:0 12px 32px rgba(15,23,42,0.25);
}

.tile-media-icon{
    position:absolute;
    right:12px;
    bottom:11px;
    font-size:1.5rem;
    color:rgba(15,23,42,0.52);
    text-shadow:0 12px 32px rgba(15,23,42,0.45);
}

/* Geri butonu (isteğe bağlı, detay sayfada kullanılıyor) */
.floating-back{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:50;
    width:46px;
    height:46px;
    border-radius:999px;
    background:rgba(255,255,255,0.96);
    border:1px solid rgba(209,213,219,0.9);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 16px 40px rgba(15,23,42,0.35);
    color:#111827;
    text-decoration:none;
}
.floating-back i{
    font-size:1.2rem;
}
@media (max-width:480px){
    .floating-back{
        right:12px;
        bottom:12px;
        width:44px;
        height:44px;
    }
}

/* =========================================================
   ÜRÜN DETAY KARTI DİKEY LAYOUT
   (Resim üstte, porsiyonlar altta)
   ========================================================= */

.menu-item{
    /* grid yerine dikey flex yapısı */
    display:flex;
    flex-direction:column;
    gap:.7rem;
}

/* breakpoint ne olursa olsun artık tek kolon kalsın */
@media (min-width:640px){
    .menu-item{
        display:flex;
        flex-direction:column;
    }
}

/* Resim bloğu kartın üstünde, tam genişlikte */
.menu-item-media{
    width:100%;
    margin-bottom:.4rem;
    border-radius:20px;
    overflow:hidden;
    background:#e5e7eb;
    position:relative;
    aspect-ratio:4/3;        /* biraz daha yatay, istersen 1/1 yapabilirsin */
}

/* Resim kutuya güzel otursun */
.menu-item-img{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.02);
    transition:transform .22s ease;
}

/* İçerik/porsiyonlar altta yer kaplasın */
.menu-item-content{
    display:flex;
    flex-direction:column;
    gap:.45rem;
}