:root { 
    --primary: #e60000; 
    --card-bg: #ffffff; 
    --text-dark: #1a1a1a; 
    --text-muted: #555; 
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    background-image: url('https://res.cloudinary.com/douh5tbmk/image/upload/v1766712054/Ads%C4%B1z_tasar%C4%B1m_2_bqwxzo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-dark); 
    font-family: 'Poppins', sans-serif; 
    overflow: hidden; 
    height: 100vh; 
    width: 100vw;
    display: flex; 
    flex-direction: column; 
    position: relative; 
}

/* --- HEADER --- */
header { 
    flex-shrink: 0; 
    height: 14vh; 
    width: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 1000; 
    padding-top: 1vh; 
}
.logo-wrapper { height: 12vh; will-change: transform; position: absolute; } 
.main-logo { height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1)); animation: bounceFloat 4s ease-in-out infinite; }
@keyframes bounceFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* --- DISPLAY ALANI --- */
#display-wrapper { 
    flex-grow: 1; 
    position: relative; 
    width: 100%; 
    height: 70vh; 
    margin-bottom: 9vh; 
    z-index: 10;
}

.screen { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    opacity: 0; visibility: hidden; 
    padding: 0 2vw; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; /* İçeriği dikeyde ortalar */
}
.screen.active { opacity: 1; visibility: visible; }

/* S1 için özel hizalama */
#screen1 { justify-content: flex-start; padding-top: 1vh; }

/* --- BAŞLIKLAR --- */
.cat-title { 
    font-family: 'Oswald', sans-serif; 
    font-size: 3.5vh; 
    color: var(--primary); 
    text-transform: uppercase; 
    margin: 0 auto 1.5vh auto; 
    border-bottom: 3px solid var(--primary); 
    display: table; 
    padding: 0 20px 2px 20px;
    flex-shrink: 0;
    text-align: center;
}

/* --- GRID YAPILARI --- */
/* S1 */
.layout-split { display: grid; grid-template-columns: 1fr 2.2fr; gap: 2vw; height: 90%; width: 100%; }
.durumler-grid { display: grid; grid-template-rows: repeat(3, 1fr); gap: 1.5vh; height: 90%; }
.icecekler-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1.2vh; height: 90%; }

/* S2 (Ortalı) */
.porsiyon-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    grid-template-rows: repeat(2, 1fr); 
    gap: 3vh 3vw; 
    width: 85%; 
    height: 80%; 
    margin: 0 auto; 
}

/* S3 (Ortalı) */
.specials-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(2, 1fr); 
    gap: 2.5vh 2vw; 
    width: 95%; 
    height: 80%; 
    margin: 0 auto; 
    align-content: center; 
}

/* --- KART TASARIMI --- */
.menu-item { 
    background: var(--card-bg); 
    border-radius: 25px; 
    padding: 1.5vh; 
    display: flex; 
    align-items: center; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.06); 
    border: 1px solid rgba(0,0,0,0.02); 
    height: 100%; 
    overflow: hidden; 
    opacity: 0; 
    visibility: hidden; 
    position: relative;
}

.image-container { width: 38%; height: 100%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.p-img { max-width: 110%; max-height: 110%; object-fit: contain; filter: drop-shadow(0 8px 15px rgba(0,0,0,0.08)); animation: pImgMotion 5s ease-in-out infinite; }
@keyframes pImgMotion { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04) translateY(-3px); } }

.details { width: 62%; padding-left: 1.5vw; display: flex; flex-direction: column; justify-content: center; overflow: hidden; height: 100%; }

.name-wrapper { height: 5.5vh; overflow: hidden; display: flex; align-items: center; }
.name { font-family: 'Oswald', sans-serif; font-size: 2.8vh; color: var(--primary); text-transform: uppercase; line-height: 1.1; font-weight: 700; white-space: nowrap; }

.description { font-size: 1.6vh; color: var(--text-muted); line-height: 1.2; margin-top: 0.5vh; }

.price-tag { font-size: 4.8vh; font-weight: 900; color: var(--text-dark); display: flex; align-items: baseline; margin-top: 0.5vh; }
.tl { font-size: 1.8vh; margin-left: 5px; color: var(--primary); }

.icecekler-grid .menu-item { padding: 1vh; }
.icecekler-grid .name { font-size: 2.3vh; }
.icecekler-grid .price-tag { font-size: 3.5vh; }

/* --- FOOTER --- */
footer { 
    position: fixed; bottom: 0; width: 100%; height: 8vh; 
    background: var(--primary); 
    overflow: hidden; 
    display: flex; align-items: center; 
    z-index: 2000; box-shadow: 0 -5px 20px rgba(0,0,0,0.1); 
}

.marquee-wrapper { width: 100%; overflow: hidden; white-space: nowrap; }
.marquee-content { display: inline-block; white-space: nowrap; animation: scroll-left 40s linear infinite; }
.marquee-content span { 
    color: white; 
    font-family: 'Oswald', sans-serif; 
    font-size: 3.5vh; 
    font-weight: 700; 
    padding-right: 200px; 
    text-transform: uppercase; 
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}