< !DOCTYPE html><html lang="tr"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>SFK Kantin</title><style>body {
    margin: 0;
    font-family: Georgia, serif;
    background: white;
}

/* HEADER */
header {
    background: white;
    padding: 20px 40px;
    border-bottom: 1px solid #ddd;
    position: relative;
    z-index: 1000;
}

.top-bar {
    display: flex;
    align-items: center;
}

.logo {
    width: 70px;
}

h1 {
    font-size: 32px;
    margin-left: 20px;
}

/* HAMBURGER */
.menu-toggle {
    font-size: 32px;
    cursor: pointer;
    margin-left: auto;
    display: none;
}

/* MENU (MASAÜSTÜ) */
.menu {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    display: flex;
    gap: 20px;
    transition: all 0.3s ease;
}

.menu li a {
    text-decoration: none;
    color: #777;
    font-size: 22px;
}

.menu li a:hover {
    color: black;
}

.menu .active a {
    color: #c79a9a;
}

/* HERO */
.hero {
    text-align: center;
    padding: 60px 20px;
}

.hero img {
    max-width: 600px;
    width: 100%;
}

.content {
    padding: 60px 40px;
}

/* MOBİL */
@media (max-width: 768px) {

    /* Hamburger görünür */
    .menu-toggle {
        display: block;
    }

    /* Menüyi gizle ve sağdan kaydırmalı yap */
    .menu {
        position: fixed;
        top: 0;
        right: -250px;
        /* gizli konum */
        height: 100%;
        width: 250px;
        flex-direction: column;
        background: white;
        padding: 60px 20px;
        box-shadow: -4px 0 8px rgba(0, 0, 0, 0.2);
        transition: right 0.3s ease;
    }

    .menu.show {
        right: 0;
        /* açılınca görünür */
    }

    .menu li {
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        text-align: center;
    }
}

</style></head><body><header><div class="top-bar"><img src="logo.png" class="logo"><h1>SFK KANTİN & LOKANTA</h1>< !-- Hamburger --><div class="menu-toggle" onclick="toggleMenu()">☰</div></div><ul class="menu" id="menu"><li class="active"><a href="#">Anasayfa</a></li><li><a href="#">Ürünler</a></li><li><a href="#">Fiyat Listesi</a></li><li><a href="#">İletişim</a></li></ul></header><section class="hero"><h2>Lezzetin Adresi</h2><p>Her Gün Taze Ürünler</p></section><section class="content"><p>Buraya içerik ekleyebilirsiniz.</p></section><script>function toggleMenu() {
    const menu=document.getElementById("menu");
    menu.classList.toggle("show");
}

<script>function menuAc() {

    var menu=document.getElementById("menu");

    menu.classList.toggle("active");

}

.menu-button {
    font-size: 40px;
    cursor: pointer;
    margin-left: auto;
    display: none;
}

/* mobil görünüm */
@media (max-width:768px) {

    .menu {
        display: none;
        flex-direction: column;
        background: white;
        width: 100%;
    }

    .menu.active {
        display: flex;
    }

    .menu-button {
        display: block;
    }

}

</script></script></body></html>