/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* VARIABLE CSS */
:root {
    --header-height: 6rem;
    /* Increased for larger logo */

    /* Colors - Black, White, Grey Theme */
    --first-color: #000000;
    --first-color-alt: #1a1a1a;
    --text-color: #333333;
    --text-color-light: #999999;
    --body-color: #ffffff;
    --container-color: #f9f9f9;
    --border-color: #e0e0e0;

    /* Font and Typography */
    --body-font: 'Montserrat', sans-serif;
    --title-font: 'Montserrat', sans-serif;
    --biggest-font-size: 2.25rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;

    /* Font weight */
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;

    /* Margins */
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;

    /* Z-index */
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;
}

/* Response Typography */
@media screen and (min-width: 968px) {
    :root {
        --biggest-font-size: 4rem;
        --h1-font-size: 3rem;
        /* Larger */
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: var(--header-height) 0 0 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
    line-height: 1.6;
}

h1,
h2,
h3,
h4 {
    color: var(--first-color);
    font-family: var(--title-font);
    font-weight: var(--font-bold);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* REUSABLE CSS CLASSES */
.section {
    padding: 4.5rem 0 2rem;
}

.section__title {
    font-size: var(--h2-font-size);
    margin-bottom: var(--mb-2);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.section__title-center {
    text-align: center;
}

.container {
    max-width: 1200px;
    /* Wider container */
    margin-left: var(--mb-1-5);
    margin-right: var(--mb-1-5);
}

.grid {
    display: grid;
    gap: 1.5rem;
}

.button {
    display: inline-block;
    background-color: var(--first-color);
    color: #fff;
    padding: 1rem 1.75rem;
    font-weight: var(--font-medium);
    transition: .3s;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--small-font-size);
}

.button:hover {
    background-color: var(--first-color-alt);
    transform: translateY(-2px);
}

.button--flex {
    display: inline-flex;
    align-items: center;
    column-gap: .5rem;
}

/* HEADER */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    background-color: var(--body-color);
    transition: .4s;
    border-bottom: 1px solid #eee;
}

.header__container {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 4.5rem;
    /* MUCH LARGER */
    width: auto;
}

.nav__toggle,
.nav__close {
    color: var(--first-color);
    cursor: pointer;
}

/* Navigation for Mobile */
@media screen and (max-width: 767px) {
    .nav {
        position: fixed;
        top: -100%;
        /* Hidden by default */
        left: 0;
        width: 100%;
        background-color: var(--body-color);
        padding: 4rem 0 3rem;
        box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
        transition: .3s;
    }
}

.nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
}

.nav__link {
    color: var(--first-color);
    font-weight: var(--font-semi-bold);
    text-transform: uppercase;
    font-size: var(--small-font-size);
    letter-spacing: 1px;
    transition: .3s;
}

.nav__link:hover {
    color: var(--text-color-light);
}

.nav__social-link {
    display: flex;
    align-items: center;
    color: var(--first-color);
}

.nav__close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Show Menu */
.show-menu {
    top: 0;
}

/* Active Link */
.active-link {
    border-bottom: 2px solid var(--first-color);
}

/* HOME */
.home__container {
    padding-top: 2rem;
    align-items: center;
}

.home__data {
    text-align: left;
}

.home__title {
    font-size: var(--biggest-font-size);
    line-height: 1.1;
    margin-bottom: var(--mb-1);
    color: var(--first-color);
}

.home__description {
    margin-bottom: var(--mb-2);
    color: var(--text-color);
}

.home__img-container {
    justify-self: center;
}

.home__img {
    width: 400px;
    filter: grayscale(0%);
    transition: .4s;
}

/* CONTACT PAGE STYLES */
.contact__container {
    grid-template-columns: 1fr;
}

.contact__inputs {
    grid-template-columns: 1fr;
}

/* FOOTER - NEW GRID LAYOUT */
.footer {
    background-color: #fff;
    /* White background as requested in look, or keep dark? Image 4 looks white/clean */
    padding: 4rem 0;
    color: var(--text-color);
    border-top: 1px solid #eee;
    text-align: left;
}

.grid-footer {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

.footer__subtitle {
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-1);
    text-transform: uppercase;
    color: var(--first-color);
    font-weight: var(--font-bold);
}

.footer__text {
    color: #666;
    font-size: var(--small-font-size);
    line-height: 1.8;
}

.footer__social-logo {
    height: 4rem;
    /* Large logo for footer */
    width: auto;
    border-radius: 50%;
    /* If circular logo desired, or keep as is */
}

.footer__copy {
    display: block;
    margin-top: 3rem;
    text-align: center;
    font-size: var(--smaller-font-size);
    color: #999;
}


/* MEDIA QUERIES */
/* Small devices */
@media screen and (max-width: 320px) {
    .container {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/* Medium devices */
@media screen and (min-width: 576px) {
    .menu__container {
        grid-template-columns: repeat(2, 200px);
        justify-content: center;
    }

    .contact__form {
        width: 100%;
    }

    .grid-footer {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 767px) {
    body {
        margin: 0;
        padding-top: var(--header-height);
        /* Add padding to body for fixed header */
    }

    .nav {
        height: auto;
        padding: 0;
    }

    .nav__toggle,
    .nav__close {
        display: none;
    }

    .nav__list {
        flex-direction: row;
        column-gap: 3rem;
    }

    .home__container,
    .about__container,
    .contact__container {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }

    /* Footer 4 columns on large screens */
    .grid-footer {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large devices */
@media screen and (min-width: 992px) {
    .container {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ANIMATION UTILITIES */
.animate-init {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* MENU PAGE SPECIFIC STYLES */
.menu-page {
    background-color: var(--body-color);
    color: var(--text-color);
    min-height: 100vh;
}

.menu-category-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
}

@media screen and (min-width: 576px) {
    .menu-category-nav {
        grid-template-columns: repeat(5, 1fr);
    }
}

.category-card {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    padding: 1.5rem 0.5rem;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

.category-card:hover {
    background-color: var(--first-color);
    color: #fff;
    transform: translateY(-5px);
    border-color: var(--first-color);
}

.category-card:hover .category-title {
    color: #fff;
}

.category-title {
    font-family: var(--title-font);
    font-size: 1.1rem;
    font-weight: var(--font-bold);
    color: var(--first-color);
    margin-top: 0.5rem;
    letter-spacing: 1px;
}

.menu-section {
    margin-bottom: 4rem;
    scroll-margin-top: 8rem;
    /* For fixed header offset */
}

.menu-section-title {
    font-size: 1.5rem;
    color: var(--first-color);
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.menu-bg-accent {
    background-color: #f5f5f5;
    /* Light grey */
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 5px solid var(--first-color);
}

.menu-bg-accent h3 {
    color: var(--first-color);
    font-size: 1.1rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.menu-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 0.5rem;
}

.menu-item-name {
    font-weight: var(--font-medium);
    margin-right: 1rem;
    color: var(--text-color);
}

.menu-item-dots {
    flex-grow: 1;
}

.menu-item-price {
    font-weight: var(--font-bold);
    color: var(--first-color);
    font-size: 1.1rem;
}

/* Make footer dark on menu page if needed, or keep standard white. 
   User asked for "projemizdeki sayfa renkleri gri siyah ve beyaz". 
   Global footer is white. Let's make menu page footer dark to match concept?
   Or keep consistency. User said "Brand identity". 
   Let's keep footer consistent (Light) or invert for this page. 
   I'll stick to Dark page content but Light footer might look jarring.
   Let's override footer for menu page. 
*/
.menu-page .footer {
    background-color: #000;
    color: #fff;
    border-top: 1px solid #333;
}

.menu-page .footer__subtitle {
    color: #fff;
}

.menu-page .footer__text {
    color: #aaa;
}

/* Category Icons (Optional, using simple shapes or none) */
.category-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 0.5rem;
    filter: invert(1);
}

/* Scroll Up */
.scrollup {
    position: fixed;
    right: 1rem;
    bottom: -20%;
    /* Hidden initially */
    background-color: var(--first-color);
    opacity: .8;
    padding: 0.5rem;
    border-radius: .4rem;
    z-index: var(--z-tooltip);
    transition: .4s;
    display: flex;
    color: #fff;
}

.scrollup:hover {
    background-color: var(--first-color-alt);
}

.show-scroll {
    bottom: 5rem;
}

/* Header Ghost Animation */
.header__ghosts {
    position: absolute;
    bottom: 5px;
    /* Just above the bottom border */
    left: 0;
    width: 100%;
    height: 20px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    opacity: 0.3;
}

.ghost-ticker {
    display: flex;
    white-space: nowrap;
    animation: ticker 20s linear infinite;
}

.header-ghost-icon {
    width: 16px;
    height: 16px;
    margin-right: 50px;
    fill: var(--first-color);
}

@keyframes ticker {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Background Animation */
.animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.parallax-obj {
    position: absolute;
    opacity: 0.1;
    fill: var(--first-color);
    pointer-events: none;
}

/* Specific positions for background items */
.p-item-1 {
    top: 10%;
    left: 10%;
    width: 40px;
}

.p-item-2 {
    top: 20%;
    right: 20%;
    width: 60px;
}

.p-item-3 {
    bottom: 30%;
    left: 15%;
    width: 50px;
}

.p-item-4 {
    bottom: 10%;
    right: 10%;
    width: 70px;
}

.p-item-5 {
    top: 50%;
    left: 50%;
    width: 30px;
}

.p-item-6 {
    top: 15%;
    left: 40%;
    width: 45px;
}

/* Readability Cards for Home Content */
.home__data,
.about__data {
    background-color: rgba(255, 255, 255, 0.85);
    /* Light translucent background */
    padding: 2rem;
    border-radius: 1rem;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Dark mode adjustment if needed, but user asked for "dark text" on these areas, 
   so white bg with dark text handles contrast well against a potentially busy bg set. */
.home__title,
.section__title {
    color: var(--first-color);
    /* Black */
}