/* style.css - Siyah & Kırmızı Tema - ÇOK SAYFALI YAPI */
:root {
    --primary-red: #cc0000;
    --dark-red: #990000;
    --light-red-hover: #ff3333;
    --text-light: #f0f0f0;
    --text-dark: #333333;
    --bg-dark: #121212;
    --bg-semi-dark: #1c1c1c;
    --bg-header-footer: #000000;
    --font-primary: 'Open Sans', sans-serif;
    --font-headings: 'Montserrat', sans-serif;
    --header-height: 75px; /* Sabit başlık yüksekliği (tahmini, ayarlanabilir) */
}

/* Genel Reset ve Temel Ayarlar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* scroll-behavior: smooth; Artık genel sayfa geçişleri için değil, sayfa içi uzun bölümler için olabilir */
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-dark);
    color: var(--text-light);
    line-height: 1.7;
    font-size: 16px;
    padding-top: var(--header-height); /* Sabit header için global boşluk */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: var(--primary-red);
}

a:hover {
    color: var(--light-red-hover);
}

ul {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    font-weight: 700;
    color: var(--text-light);
}

/* Genel Sayfa Bölümü Stili (Her sayfanın ana içeriği için kullanılabilir) */
.page-content-wrapper {
    padding: 40px 0; /* Sayfa içeriği için üst ve alt boşluk */
}

.section-title { /* Bu, her sayfanın kendi başlığı için de kullanılabilir */
    text-align: center;
    margin-bottom: 40px;
}

.section-title h1, /* Ana sayfa dışındaki sayfaların ana başlığı h1 olabilir */
.section-title h2 { /* Ana sayfadaki bölüm başlıkları h2 olabilir */
    font-size: 2.5em;
    margin-bottom: 10px;
    color: var(--primary-red);
    text-transform: uppercase;
}

.section-title p {
    font-size: 1.1em;
    color: #bbb;
}

.btn {
    display: inline-block;
    padding: 12px 25px;
    font-family: var(--font-headings);
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--primary-red);
    color: white;
}

.btn-primary:hover {
    background-color: var(--dark-red);
    color: white;
    transform: translateY(-2px);
}

/* Ana Başlık (Navbar) - Tüm sayfalarda aynı */
#main-header {
    background-color: var(--bg-header-footer);
    color: var(--text-light);
    padding: 15px 0; /* Yüksekliği etkiler, --header-height ile uyumlu olmalı */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 3px solid var(--primary-red);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    height: var(--header-height); /* Yüksekliği CSS değişkeni ile ayarlama */
    display: flex; /* İçeriği dikeyde ortalamak için */
    align-items: center; /* İçeriği dikeyde ortalamak için */
}

#main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Container'ın header içinde tam genişlik alması için */
}

#main-header .logo-text {
    font-family: var(--font-headings);
    font-size: 1.8em;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
}
#main-header .logo-text:hover {
    color: var(--primary-red);
}


#main-header nav ul {
    display: flex;
}

#main-header nav ul li {
    margin-left: 25px;
}

#main-header nav ul li a {
    color: var(--text-light);
    font-family: var(--font-headings);
    font-weight: 600;
    padding: 5px 0;
    transition: color 0.3s ease;
    position: relative;
}

#main-header nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: var(--primary-red);
    transition: width 0.3s ease;
}

#main-header nav ul li a:hover::after,
#main-header nav ul li a.active::after { /* .active class'ı olan link için alt çizgi */
    width: 100%;
}

#main-header nav ul li a.active, /* .active class'ı olan link için renk */
#main-header nav ul li a:hover {
    color: var(--primary-red);
}


/* Hero Bölümü (index.html için) */
#hero {
    background: url('https://via.placeholder.com/1920x1080.png?text=Tantuni+Dükkanı+Görseli') no-repeat center center/cover;
    /* Gerçek görselinizi buraya ekleyin, CSS'ten veya HTML içinden */
    height: calc(100vh - var(--header-height)); /* Ekran yüksekliği eksi header yüksekliği */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.hero-content {
    position: relative;
    z-index: 1;
}

#hero h1 { /* Bu artık index.html'deki hero başlığı */
    font-size: 3.5em;
    margin-bottom: 20px;
    color: white;
}

#hero p {
    font-size: 1.5em;
    margin-bottom: 30px;
    color: #f0f0f0;
}

/* Menü Sayfası Stilleri (menu.html için) */
/* #menu-page ID'si yerine genel .page-content-wrapper kullanılacak */
.menu-category {
    background-color: var(--bg-semi-dark);
    margin-bottom: 1.5em;
    border-radius: 8px;
    border: 1px solid #333;
    overflow: hidden;
}

.category-header {
    background-color: var(--dark-red);
    color: white;
    padding: 1em 1.5em;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.category-header:hover {
    background-color: var(--primary-red);
}

.category-header h2 { /* Kategori Adı */
    font-family: var(--font-headings);
    margin: 0;
    font-size: 1.4em;
    color: white;
}

.category-header .arrow {
    font-size: 1.5em;
    transition: transform 0.3s ease-out;
}

.category-items {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    background-color: var(--bg-semi-dark);
    transition: max-height 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.5s ease-out;
}

.menu-category.active .category-items {
    padding: 1em 1.5em;
}

.menu-category.active .category-header .arrow {
    transform: rotate(90deg);
}

.menu-item {
    padding: 0.8em 0;
    border-bottom: 1px dashed #550000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.menu-category.active .menu-item {
    opacity: 1;
    transform: translateY(0);
}

.menu-category.active .menu-item:nth-child(1) { transition-delay: 0.1s; }
.menu-category.active .menu-item:nth-child(2) { transition-delay: 0.2s; }
.menu-category.active .menu-item:nth-child(3) { transition-delay: 0.3s; }

.menu-item:last-child {
    border-bottom: none;
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-header h3 { /* Ürün Adı */
    margin: 0;
    font-size: 1.1em;
    color: var(--text-light);
}

.item-price {
    font-weight: 600;
    color: var(--light-red-hover);
    font-size: 1.1em;
}

.item-description {
    font-size: 0.9em;
    color: #b0b0b0;
    margin-top: 0.3em;
}

/* Hakkımızda Sayfası Stilleri (hakkimizda.html için) */
.about-content-container { /* hakkimizda.html'deki içerik için özel bir sarmalayıcı */
    background-color: var(--bg-semi-dark);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #333;
}
.about-content-container p {
    font-size: 1.1em;
    line-height: 1.8;
    color: #ccc;
    margin-bottom: 15px;
}
.about-content-container p:last-child {
    margin-bottom: 0;
}

/* İletişim Sayfası Stilleri (iletisim.html için) */
.contact-content-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}
.contact-info {
    flex: 1;
    min-width: 300px;
    background-color: var(--bg-semi-dark);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #333;
}
.contact-info p {
    margin-bottom: 15px;
    font-size: 1.1em;
}
.contact-info p strong {
    color: var(--primary-red);
    margin-right: 5px;
}
.map-placeholder {
    flex: 1;
    min-width: 300px;
    background-color: #333; /* Harita yüklenene kadar görünen arka plan */
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    color: #777;
    border: 1px solid #444;
}

/* Alt Bilgi (Footer) - Tüm sayfalarda aynı */
footer {
    text-align: center;
    padding: 30px 1em;
    background-color: var(--bg-header-footer);
    color: #a0a0a0;
    /* margin-top: 3em; body'ye padding-bottom eklenebilir veya son eleman sonrası boşluk bırakılır */
    font-size: 0.9em;
    border-top: 3px solid var(--dark-red);
}
footer p:first-child {
    margin-bottom: 5px;
}


/* Mobil Uyumluluk (Temel Düzeyde) */
@media (max-width: 768px) {
    :root {
        --header-height: 110px; /* Mobil için header yüksekliği artabilir (logo ve nav alt alta gelince) */
    }
    #main-header .container {
        flex-direction: column;
        align-items: center;
    }
    #main-header nav {
        margin-top: 10px;
    }
    #main-header nav ul {
        justify-content: center; /* Linkleri ortala */
    }
    #main-header nav ul li {
        margin: 0 10px;
    }
    #hero {
        height: calc(100vh - var(--header-height)); /* Mobil için hero yüksekliğini güncelle */
    }
    #hero h1 {
        font-size: 2.2em;
    }
    #hero p {
        font-size: 1.1em;
    }
    .section-title h1,
    .section-title h2 {
        font-size: 2em;
    }
    .contact-content-container {
        flex-direction: column;
    }
}
/* static/css/style.css dosyanıza ekleyin veya güncelleyin */

/* :root içinde renk değişkenleriniz zaten olmalı,
   --bg-dark: #121212; (ana sayfa arka planı)
   --bg-semi-dark: #1c1c1c; (biraz daha açık koyu)
   --primary-red: #cc0000;
   --text-light: #f0f0f0;
   Eğer yoksa, bu renkleri veya kendi tercihlerinizi kullanabilirsiniz.
*/

.menu-category {
    background-color: var(--bg-semi-dark); /* Akordeon kategori arka planı */
    margin-bottom: 1.5em;
    border-radius: 8px;
    border: 1px solid #333; /* Koyu temada hafif bir sınır */
    overflow: hidden; /* Animasyonlar ve border-radius için */
}

.category-header {
    background-color: var(--dark-red); /* Koyu kırmızı kategori başlığı */
    color: white;
    padding: 1em 1.5em;
    cursor: pointer;
    /* ... (mevcut category-header stilleriniz) ... */
}

.category-items {
    /* Bu alanı şeffaf yapalım ki kartlar ana arka planda veya 
       biraz daha farklı bir tonda görünsün. Veya body ile aynı renk yapabilirsiniz. */
    background-color: var(--bg-dark); /* Veya transparent, veya #222222 gibi farklı bir ton */
    padding: 15px; /* Kartlar için iç boşluk */
    /* max-height ve overflow:hidden animasyon için kalmalı */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.5s ease-out;
}

.menu-category.active .category-items {
    /* max-height JavaScript ile ayarlanacak */
    padding: 15px; /* Açıkken iç boşluk */
}


/* Her bir menü öğesini kart gibi gösterelim */
.menu-item {
    display: flex;
    align-items: center; /* Resim ve yazıları dikeyde ortala */
    gap: 20px; /* Resim ve detaylar arası boşluk */
    
    background-color: #2b2b2b; /* Kart arka planı (var(--bg-semi-dark) veya daha açık bir koyu ton) */
    padding: 15px;
    border-radius: 8px; /* Kart köşeleri */
    margin-bottom: 15px; /* Kartlar arası dikey boşluk */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); /* Karta derinlik katan gölge */
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.menu-item:last-child {
    margin-bottom: 0; /* Son kartın altında fazladan boşluk olmasın */
}

/* Kart üzerine gelince hafif bir efekt */
.menu-item:hover {
    transform: translateY(-4px) scale(1.01); /* Biraz yukarı kalksın ve büyüsün */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.product-image {
    width: 100px;     /* Resim genişliği (isteğe bağlı, 100px-150px arası iyi olabilir) */
    height: 100px;    /* Resim yüksekliği (genişlikle aynı tutarak kare yapabilirsiniz) */
    object-fit: cover; /* Resmin orantısını koruyarak alanı kaplamasını sağlar */
    border-radius: 6px; /* Resim köşeleri */
    /* border: 2px solid var(--primary-red); /* İsteğe bağlı: Resme kırmızı bir çerçeve */
    flex-shrink: 0; /* Resmin daralmamasını sağla, eğer metin çok uzunsa */
}

.menu-item .item-details {
    flex-grow: 1; /* Metin kısmının kalan alanı kullanmasını sağlar */
}

.menu-item .item-details .item-header {
    /* ... (mevcut item-header stilleriniz) ... */
    margin-bottom: 5px; /* İsim ve fiyat ile açıklama arası boşluk */
}

.menu-item .item-details h3 { /* Ürün adı */
    color: var(--text-light); /* Açık renk ürün adı */
    font-size: 1.2em; /* Biraz daha büyük ürün adı */
    margin-bottom: 4px;
}

.menu-item .item-details .item-price { /* Ürün fiyatı */
    color: var(--primary-red); /* Kırmızı fiyat */
    font-size: 1.1em; /* Biraz daha belirgin fiyat */
    font-weight: bold;
}

.menu-item .item-details .item-description { /* Ürün açıklaması */
    color: #b0b0b0; /* Daha soluk bir gri */
    font-size: 0.9em;
    line-height: 1.5;
}
/* static/css/style.css dosyanızın sonuna ekleyin */

/* Ana Sayfa - Hero Bölümü */
#hero-main {
    background: url('https://via.placeholder.com/1920x800.png?text=Lezzetli+Tantuni+Görseli') no-repeat center center/cover; /* Kendi resminizi buraya ekleyin */
    /* Alternatif: Arka plan rengi ve üzerine yazı
    background-color: var(--dark-red); */
    color: white;
    height: calc(80vh - var(--header-height)); /* Ekran yüksekliğinin %80'i eksi header */
    min-height: 400px; /* Minimum yükseklik */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative; /* Overlay için */
    padding: 0 20px; /* Kenar boşlukları */
}

#hero-main::before { /* Arka plan resmine koyu bir filtre (isteğe bağlı) */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Siyah overlay */
}

.hero-content-main {
    position: relative; /* Overlay'in üzerinde kalması için */
    z-index: 1;
    max-width: 800px; /* İçeriğin genişliğini sınrla */
}

.hero-content-main h1 {
    font-size: 3em; /* Mobil için @media ile küçültülebilir */
    font-family: var(--font-headings);
    margin-bottom: 0.5em;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Yazıya gölge */
}

.hero-content-main p {
    font-size: 1.3em; /* Mobil için @media ile küçültülebilir */
    margin-bottom: 1.5em;
    color: #f0f0f0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.btn-lg { /* Büyük buton için */
    padding: 15px 35px;
    font-size: 1.2em;
    font-weight: bold;
}

/* Genel Sayfa Bölümü Stili (Ana sayfa için) */
.page-section-main {
    padding: 60px 0;
}

.bg-light-tone { /* Hakkımızda snippet'i için hafif farklı bir arka plan */
    background-color: var(--bg-semi-dark); /* Veya #222222 gibi bir ton */
    border-top: 1px solid #2a2a2a;
    border-bottom: 1px solid #2a2a2a;
}

.section-title-main {
    margin-bottom: 40px;
}
.section-title-main h2 {
    font-size: 2.2em;
    color: var(--primary-red);
    text-transform: uppercase;
    margin-bottom: 10px;
}

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

.lead-text { /* Hakkımızda snippet'indeki ana metin için */
    font-size: 1.15em;
    line-height: 1.7;
    color: #ccc;
    max-width: 750px; /* Metin genişliğini sınrla */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Veya justify */
}

.row-main { /* İki sütunlu yapı için basit bir satır */
    display: flex;
    flex-wrap: wrap; /* Mobil için alt alta geçer */
    gap: 30px; /* Sütunlar arası boşluk */
    justify-content: center; /* İçeriği ortala */
}
.column-main-full {
    width:100%;
}
.column-main-half {
    flex: 1; /* Eşit genişlikte sütunlar */
    min-width: 280px; /* Mobil için minimum genişlik */
}

#contact-snippet h3 {
    font-family: var(--font-headings);
    color: var(--text-light);
    margin-bottom: 0.8em;
    font-size: 1.4em;
}
#contact-snippet p {
    font-size: 1.05em;
    color: #bbb;
    margin-bottom: 0.5em;
}

.link-styled { /* İletişimdeki linkler için */
    color: var(--primary-red);
    text-decoration: underline;
    font-weight: 600;
}
.link-styled:hover {
    color: var(--light-red-hover);
    text-decoration: none;
}

.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }

/* Buton Renkleri (Zaten .btn ve .btn-primary tanımlarınız olmalı,
   .btn-secondary için ekleyebilirsiniz) */
.btn-secondary {
    background-color: #555;
    color: white;
}
.btn-secondary:hover {
    background-color: #444;
}

/* Mobil Cihazlar İçin İyileştirmeler (Örnek) */
@media (max-width: 768px) {
    .hero-content-main h1 {
        font-size: 2.2em;
    }
    .hero-content-main p {
        font-size: 1.1em;
    }
    .btn-lg {
        padding: 12px 25px;
        font-size: 1em;
    }
    .page-section-main {
        padding: 40px 0;
    }
    .section-title-main h2 {
        font-size: 1.8em;
    }
    .lead-text {
        font-size: 1em;
    }
    .column-main-half {
        flex-basis: 100%; /* Mobilde tam genişlik */
        margin-bottom: 20px;
    }
    .column-main-half:last-child {
        margin-bottom: 0;
    }
}
/* static/css/style.css dosyanızın sonuna ekleyin */

/* Genel Sayfa Kahraman (Hero) Bölümü Stili (Hakkımızda, İletişim gibi sayfalar için) */
.page-hero-section {
    padding: 80px 20px;
    background-color: var(--dark-red); /* Varsayılan arka plan rengi */
    background-size: cover;
    background-position: center center;
    color: white;
    position: relative;
    text-align: center; /* Başlığı ortala */
    min-height: 300px; /* Minimum yükseklik */
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-hero-section::before { /* Arka plan resmine koyu bir filtre (isteğe bağlı) */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45); /* Siyah overlay */
}

.page-hero-title {
    font-family: 'Playfair Display', serif; /* Farklı, şık bir font deneyebiliriz */
    font-size: 3.5em; /* Mobil için @media ile küçültülebilir */
    color: white;
    position: relative; /* Overlay'in üzerinde kalması için */
    z-index: 1;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
}

/* Hakkımızda - Hikayemiz Bölümü */
.story-content {
    display: flex;
    flex-wrap: wrap; /* Mobil için alt alta geçer */
    gap: 40px; /* Resim ve metin arası boşluk */
    align-items: center; /* Dikeyde ortala */
    margin-top: 30px;
}

.story-image-left {
    flex: 1;
    min-width: 280px; /* Mobilde minimum genişlik */
    max-width: 450px; /* Resmin çok büyümesini engelle */
    margin: 0 auto; /* Tek başına kaldığında ortala */
}

.story-image-left img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

.story-text-right {
    flex: 1.5; /* Metin kısmı biraz daha geniş olsun */
    min-width: 300px;
    color: #c5c5c5; /* Açık gri metin */
}

.story-text-right p {
    font-size: 1.05em;
    line-height: 1.8;
    margin-bottom: 1.5em;
}
.story-text-right p:last-child {
    margin-bottom: 0;
}

/* Hakkımızda - Değerlerimiz Bölümü */
.subtitle-main { /* Bölüm başlıklarının altındaki kısa açıklama için */
    font-size: 1.1em;
    color: #b0b0b0;
    margin-top: -5px;
    margin-bottom: 30px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Esnek grid yapısı */
    gap: 30px;
    text-align: center;
}

.value-item {
    background-color: #252525; /* Koyu gri kart arka planı (var(--bg-semi-dark) olabilir) */
    padding: 25px 20px;
    border-radius: 8px;
    border: 1px solid #383838;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.value-item .value-icon svg {
    width: 48px;
    height: 48px;
    fill: var(--primary-red); /* Kırmızı ikonlar */
    margin-bottom: 15px;
}

.value-item h3 {
    font-family: var(--font-headings);
    font-size: 1.5em;
    color: var(--text-light);
    margin-bottom: 10px;
}

.value-item p {
    font-size: 0.95em;
    color: #b0b0b0;
    line-height: 1.6;
}

/* Mobil Cihazlar İçin Ek İyileştirmeler (Örnek) */
@media (max-width: 768px) {
    .page-hero-title {
        font-size: 2.5em;
    }
    .story-content {
        flex-direction: column; /* Mobilde resim üste, metin alta */
    }
    .story-image-left {
        margin-bottom: 30px; /* Resim ve metin arasına boşluk */
        max-width: 100%;
    }
}
/* static/css/style.css dosyanızın sonuna ekleyin */

/* İletişim Sayfası - Genel */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobilde tek sütun */
    gap: 40px; /* Bölümler arası boşluk */
    margin-top: 30px;
}

@media (min-width: 768px) { /* Daha geniş ekranlar için iki sütunlu yapı */
    .contact-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Esnek sütunlar */
        /* grid-template-columns: 1fr 1.5fr; /* Sol dar, sağ geniş gibi */
    }
}


.contact-info-block {
    background-color: var(--bg-semi-dark); /* veya #252525 */
    padding: 25px 30px;
    border-radius: 8px;
    border: 1px solid #333;
}

.contact-info-block h3 {
    font-family: var(--font-headings);
    color: var(--primary-red); /* Kırmızı başlıklar */
    font-size: 1.5em;
    margin-bottom: 10px;
    display: flex; /* İkon ve başlığı yan yana getirmek için */
    align-items: center;
}

.inline-icon { /* Başlıklardaki ikonlar için */
    margin-right: 12px;
    fill: var(--primary-red); /* İkon rengi */
}

.contact-info-block p {
    font-size: 1.05em;
    color: #c5c5c5; /* Açık gri metin */
    line-height: 1.7;
    margin-bottom: 1em;
}

.contact-info-block p a {
    color: var(--text-light); /* Link rengi */
    text-decoration: none;
    transition: color 0.2s ease;
}
.contact-info-block p a:hover {
    color: var(--primary-red);
    text-decoration: underline;
}

.contact-hr { /* Bilgi blokları arası ayraç */
    border: none;
    border-top: 1px solid #444;
    margin: 1.5em 0;
}

.map-container {
    /* Haritanın responsiv olmasını ve kenarlıklarını sağlar */
    padding: 0;
    border-radius: 8px;
    overflow: hidden; /* iframe'in köşelerini yuvarlatmak için */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border: 1px solid #333;
    min-height: 450px; /* Haritanın minimum yüksekliği */
    display: flex; /* İçindeki iframe'i esnetmek için */
    flex-direction: column;
}
.map-container iframe {
    flex-grow: 1; /* Kalan alanı kapla */
    min-height: 400px; /* iframe için minimum yükseklik */
}


/* İsteğe Bağlı: İletişim Formu Stilleri */
.styled-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Yatayda inputlar arası boşluk */
}
.styled-form .form-group {
    margin-bottom: 1.5em;
    flex-grow:1; /* Form row içinde esnek genişlik */
}
/* Eğer .column-main-half zaten tanımlıysa ve uygunsa tekrar tanımlamaya gerek yok. */
/* .styled-form .form-group.column-main-half { flex-basis: calc(50% - 10px); } */

.styled-form label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: #ddd;
}
.styled-form input[type="text"],
.styled-form input[type="email"],
.styled-form input[type="tel"],
.styled-form textarea {
    width: 100%;
    padding: 0.8em 1em;
    border: 1px solid #444;
    background-color: #2a2a2a; /* Koyu input arka planı */
    color: var(--text-light);
    border-radius: 5px;
    box-sizing: border-box;
    font-family: var(--font-primary);
    font-size: 1em;
}
.styled-form textarea {
    resize: vertical; /* Sadece dikeyde boyutlandırma */
    min-height: 120px;
}
.styled-form input:focus,
.styled-form textarea:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.25);
}
/* static/css/style.css dosyasının sonuna ekleyin */

/* =============================================== */
/* MOBİL UYUMLULUK STİLLERİ             */
/* =============================================== */

/* Genellikle 768px ve altı tablet ve telefonlar için kullanılır */
@media (max-width: 768px) {

    /* --- Genel Ayarlamalar --- */
    body {
        /* Lokal geliştirme için eklediğimiz padding-top'ı burada tekrar değerlendirebiliriz.
           Mobil header yüksekliği farklıysa güncellenmeli.
           Şimdilik :root'taki --header-height değişkeninin mobil için
           ayrı bir değer almasını sağlayabilir veya burada override edebiliriz.
           Eğer header mobilde daha yüksekse: body { padding-top: YENİ_MOBİL_HEADER_YÜKSEKLİĞİ; }
        */
    }

    .container {
        padding-left: 15px;
        padding-right: 15px; /* Mobilde kenar boşluklarını biraz azaltalım */
    }

    .btn-lg { /* Büyük butonları mobilde biraz küçültelim */
        padding: 12px 25px;
        font-size: 1em;
    }

    .page-section-main { /* Bölümler arası dikey boşluğu azaltabiliriz */
        padding: 40px 0;
    }

    .section-title-main h2,
    .page-hero-title { /* Ana başlıkları küçültelim */
        font-size: 2em; /* Örnek değer, ihtiyaca göre ayarlayın */
    }
    #hero-main .hero-content-main h1 {
        font-size: 2.2em; /* Ana sayfa hero başlığı */
    }
    #hero-main .hero-content-main p {
        font-size: 1.1em; /* Ana sayfa hero alt metni */
    }

    .lead-text, 
    .subtitle-main,
    #contact-snippet p,
    .story-text-right p { /* Paragraf ve alt başlık fontlarını ayarla */
        font-size: 0.95em;
    }


    /* --- Header (Navigasyon Menüsü) --- */
    #main-header .container {
        flex-direction: column; /* Logo ve navigasyonu alt alta getir */
        align-items: center;
        padding-top: 10px; /* Header içi boşluk */
        padding-bottom: 10px;
    }

    #main-header nav {
        margin-top: 15px; /* Logo ile navigasyon arasına boşluk */
        width: 100%;
    }

    #main-header nav ul {
        flex-direction: column; /* Navigasyon linklerini alt alta sırala */
        align-items: center; /* Ortala */
        width: 100%;
    }

    #main-header nav ul li {
        margin-left: 0;
        margin-bottom: 8px; /* Linkler arası dikey boşluk */
        width: 90%; /* Linklerin genişliği */
        text-align: center;
    }
    #main-header nav ul li:last-child {
        margin-bottom: 0;
    }

    #main-header nav ul li a {
        display: block; /* Linkin tüm satırı kaplamasını sağla */
        padding: 10px 5px; /* Link içi boşluk */
        border-bottom: 1px solid #444; /* Linkler arasına ayraç (isteğe bağlı) */
    }
    #main-header nav ul li:last-child a {
        border-bottom: none;
    }
    #main-header nav ul li a.active::after, /* Aktif link alt çizgisini mobilde kaldırabiliriz */
    #main-header nav ul li a:hover::after {
        display: none;
    }
    #main-header nav ul li a.active,
    #main-header nav ul li a:hover {
        background-color: var(--primary-red); /* Tıklama alanını belirginleştir */
        color: white;
        border-radius: 4px;
    }
    
    /* Mobilde header yüksekliği arttıysa body padding-top'u güncellemek gerekebilir */
    /* Bu dinamik olarak JS ile veya daha fazla CSS ile ayarlanabilir.
       Şimdilik varsayılan --header-height'ın yeteceğini umalım veya manuel bir değer atayalım.
       Örn: body { padding-top: 120px !important; } // Mobil header yüksekliğine göre
    */


    /* --- Ana Sayfa Bölümleri (`index.html`) --- */
    #hero-main {
        height: auto; /* Yüksekliği içeriğe göre ayarla */
        min-height: 300px; /* Minimum yükseklik kalsın */
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .row-main { /* İki sütunlu yapılar mobilde alt alta gelsin */
        flex-direction: column;
        align-items: center; /* İçerikleri ortala */
    }
    .column-main-half {
        flex-basis: 100%; /* Tam genişlik alsın */
        margin-bottom: 25px;
        text-align: center; /* Sütun içeriklerini ortala */
    }
    .column-main-half:last-child {
        margin-bottom: 0;
    }


    /* --- Hakkımızda Sayfası (`hakkimizda.html`) --- */
    .page-hero-section { /* Genel sayfa başlık alanı */
        padding: 60px 15px;
        min-height: 200px;
    }
    .story-content { /* Hikayemiz bölümünde resim ve metin alt alta */
        flex-direction: column;
    }
    .story-image-left {
        margin-bottom: 25px; /* Resim ve metin arasına boşluk */
        max-width: 90%; /* Resim genişliğini ayarla */
    }
    .values-grid { /* Değerler bölümü grid yapısı */
        grid-template-columns: 1fr; /* Mobilde tek sütun */
    }


    /* --- Menü Sayfası (`menu.html`) --- */
    .menu-category .category-header h2 {
        font-size: 1.2em; /* Kategori başlıklarını biraz küçült */
    }
    .menu-item {
        flex-direction: column; /* Resim üste, detaylar alta */
        align-items: center; /* Ortala */
        text-align: center; /* Metinleri ortala */
    }
    .product-image {
        width: 120px; /* Resim boyutunu biraz büyütebilir veya aynı bırakabiliriz */
        height: 120px;
        margin-bottom: 10px; /* Resimle detaylar arasına boşluk */
    }
    .menu-item .item-details .item-header {
        flex-direction: column; /* İsim ve fiyat alt alta */
        align-items: center;
    }
    .menu-item .item-details .item-price {
        margin-top: 5px; /* İsim ve fiyat arasına boşluk */
    }


    /* --- İletişim Sayfası (`iletisim.html`) --- */
    .contact-grid { /* İletişim bilgileri ve harita alt alta */
        grid-template-columns: 1fr;
    }
    .contact-info-block, .map-container {
        margin-bottom: 30px; /* Bölümler arası boşluk */
    }
    .map-container iframe {
        min-height: 300px; /* Harita yüksekliğini ayarla */
    }

    /* İsteğe Bağlı: İletişim Formu Stilleri Mobilde */
    .styled-form .form-row {
        flex-direction: column;
        gap: 0; /* Yatay boşluğu kaldır, dikeyde form-group zaten boşluk veriyor */
    }
    /* .styled-form .form-group.column-main-half { flex-basis: 100%; } */

} /* @media (max-width: 768px) sonu */


/* Daha küçük telefon ekranları için ek ayarlar (isteğe bağlı) */
@media (max-width: 480px) {
    #hero-main .hero-content-main h1 {
        font-size: 1.8em;
    }
    #hero-main .hero-content-main p {
        font-size: 1em;
    }
    .page-hero-title {
        font-size: 1.6em;
    }
    .section-title-main h2 {
        font-size: 1.5em;
    }
    .btn, .btn-lg, .btn-primary, .btn-secondary { /* Butonları biraz daha küçült */
        font-size: 0.9em;
        padding: 10px 18px;
    }
    .lead-text,
    .subtitle-main,
    #contact-snippet p,
    .story-text-right p,
    .menu-item .item-details h3,
    .menu-item .item-details .item-price,
    .menu-item .item-details .item-description {
        font-size: 0.85em; /* Genel metinleri biraz daha küçült */
    }
     .product-image {
        width: 100px;
        height: 100px;
    }
}
/* static/css/style.css dosyanızda */

/* Daha küçük telefon ekranları için (480px ve altı) */
@media (max-width: 480px) {
    /* ... (diğer 480px stilleriniz) ... */

    #main-header nav ul li a {
        font-size: 0.9em;       /* Gerekirse font boyutunu biraz küçültün */
        padding: 8px 5px;       /* Dikey padding'i biraz azaltabilirsiniz */
        white-space: nowrap;    /* Metnin alt satıra kaymasını engelle */
        overflow: hidden;       /* Taşma durumunda gizle (genellikle gerekmez) */
        text-overflow: ellipsis;/* Taşma durumunda ... ile göster (genellikle gerekmez) */
    }

    /* ... (diğer 480px stilleriniz) ... */
}

/* Eğer sorun 768px'lik daha geniş mobil/tablet görünümünde de varsa,
   aşağıdaki kuralı @media (max-width: 768px) bloğundaki 
   #main-header nav ul li a kuralına ekleyin veya güncelleyin:
*/
@media (max-width: 768px) {
    /* ... (diğer 768px #main-header nav ul li a stilleriniz) ... */
    #main-header nav ul li a {
        /* ... (mevcut display: block; padding: 10px 5px; gibi stilleriniz) ... */
        white-space: nowrap; /* Metnin alt satıra kaymasını engelle */
        /* Çok gerekmedikçe fontu burada küçültmeyin, 480px daha uygun olabilir */
    }
    /* ... */
}