/* ==========================================================================
   LAHMACUN DÜNYASI — Basilico (home_03) teması üzerine marka özelleştirmeleri
   Yükleme sırası: app.css  ->  theme-palette.css  ->  bu dosya.
   Tema dosyasına (app/) dokunulmaz.
   Palet: #17110f (kömür siyahı) · #ee342e (resmi logodan marka kırmızısı)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TÜRKÇE KARAKTER DÜZELTMESİ  (en üstte olmalı)
   Temanın başlık fontu "Audrey" Türkçe karakterleri basamıyor:
   Ç Ö Ü ç ö ü ş ğ ı ve £ glifleri BOŞ; "DÜNYASI" -> "D NYASI".
   Tema CSS'i 18 yerde font-family:"Audrey" diyor. Tek tek ezmek yerine
   "Audrey" adını, görsel olarak neredeyse aynı ve tam Türkçe destekli
   Marcellus dosyalarına bağlıyoruz. Böylece tema dosyasına hiç
   dokunmadan bütün başlıklar düzeliyor. (site2 ile aynı çözüm.)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Audrey";
    src: url("../font/tr/marcellus-400-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Audrey";
    src: url("../font/tr/marcellus-400-latin-ext.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Audrey";
    src: url("../font/tr/marcellus-400-latin.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Audrey";
    src: url("../font/tr/marcellus-400-latin-ext.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --ld-dark: #17110f;
    --ld-dark-2: #241b17;
    --ld-red: #ee342e;
    --ld-red-dark: #c9241f;
    --ld-cream: #f9f1e8;
    --ld-body: #666666;
    --ld-line: #dedede;
}

/* --------------------------------------------------------------------------
   1. Genel — tek sayfa ankor kaydırma payı
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

#home,
#about,
#menu,
#why,
#order,
#contact {
    scroll-margin-top: 90px;
}

/* --------------------------------------------------------------------------
   2. Header'ı hero'nun ÜZERİNE bindir
   Menü çubuğu sayfanın en üstünde, hero görselinin üzerinde duruyor;
   üst şerit (telefon / adres) kaldırıldı, hero tam ekran.
   -------------------------------------------------------------------------- */
#wrapper {
    position: relative;
}

/* :not(.is-fixed) — sabitlenince temanın fixed kuralı devralsın */
.header.style-3:not(.is-fixed) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 88px;
    z-index: 998;
    background: rgba(23, 17, 15, .30);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* sayfa kaydırılınca: aynı dil, biraz daha opak */
#header_main.is-fixed.style-3 {
    background: rgba(23, 17, 15, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}

#header_main.is-fixed.style-3.is-small {
    height: 88px;
}

/* --------------------------------------------------------------------------
   3. Logo — resmi logo (beyaz yazı + kırmızı daireler, saydam zemin)
   Tema style-3'te logoyu koyu bir kutunun içine alıyor; logomuzun kendi
   zemini olmadığı için o kutuya gerek yok.
   -------------------------------------------------------------------------- */
.header.style-3 .header__logo {
    background: transparent;
    padding: 0;
}

.header.style-3 .header__logo img {
    width: 190px;
    height: auto;
    display: block;
}

.footer .widget.logo img {
    width: 210px;
    height: auto;
    margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   4. Header — menü, dil değiştirici, sipariş butonu
   Tema #main-nav'ı mutlak konumda 285px soldan başlatıyor; logo genişliği
   bizde farklı olduğu için menüyü akışa alıp esnek yerleşim kuruyoruz.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

    .header.style-3 #site-header-inner .main-nav {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        -webkit-transform: none;
        margin: 0 auto 0 56px;
    }

    .header.style-3 #main-nav .menu > li {
        margin-right: 38px;
    }

    /* tema aktif sekme çizgisini li'nin ÜSTÜNE koyuyor (top:0). Bu, menü
       akışa alındığında li yüksekliği metin kadar olduğu için yazının
       ortasından geçen bir çizgiye dönüşüyor — altına alıyoruz. */
    .header.style-3 #main-nav .menu > li::after,
    .header.style-3 #main-nav .menu > li.current-menu-item::after,
    .header.style-3 #main-nav .menu > li:hover::after {
        top: auto;
        bottom: -7px;
        height: 2px;
    }
}

.header.style-3 #site-header-inner .main-nav .menu li a {
    color: #fff;
}

.header.style-3 #site-header-inner .main-nav .menu li a:hover,
.header.style-3 #site-header-inner .main-nav .menu li.current-menu-item > a {
    color: var(--ld-red);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    position: relative;
    z-index: 5;
}

/* tema #site-header-inner > .tf-button'a otomatik sol boşluk veriyor;
   buton artık .header-right içinde, o kural gerekmiyor */
.header .header-right .tf-button {
    margin-left: 0;
    margin-right: 0;
    white-space: nowrap;
}

.lang-switch {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, .38);
    overflow: hidden;
}

.lang-switch button {
    background: transparent;
    border: 0;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    cursor: pointer;
    line-height: 1.4;
    transition: all .25s ease;
}

.lang-switch button + button {
    border-left: 1px solid rgba(255, 255, 255, .38);
}

.lang-switch button:hover {
    color: var(--ld-red);
}

.lang-switch button.active {
    background: var(--ld-red);
    color: #fff;
}

/* hamburger çizgileri koyu zemin üzerinde beyaz */
.header.style-3 .mobile-button:before,
.header.style-3 .mobile-button:after,
.header.style-3 .mobile-button span {
    background-color: #fff;
}

/* açılan mobil menü paneli */
#main-nav-mobi {
    background: rgba(23, 17, 15, .97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

#main-nav-mobi .menu li a {
    color: #fff;
}

#main-nav-mobi .menu li a:hover {
    color: var(--ld-red);
}

/* --------------------------------------------------------------------------
   6. Hero — rozet, ikili buton, karartma
   -------------------------------------------------------------------------- */
.hero-badge {
    display: inline-block;
    margin-bottom: 22px;
    padding: 8px 22px;
    border: 1px solid var(--ld-red);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: rgba(238, 52, 46, .22);
}

.box-slider .wrap-btn.st2 {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.box-slider .wrap-btn.st2 .tf-button {
    margin: 0;
}

/* Hero görselleri sağ ağırlıklı kurgulandı; metin solda duruyor.
   İki katman: soldan sağa açılan yatay karartma metni her genişlikte
   okunur tutar (dar ekranda görsel yanlardan kırpılıp yemek sola
   yaklaşıyor), dikey katman da üstteki menü çubuğu ile alt kenarı
   oturtur. Sağ taraf açık kalır, yemek parlak görünür. */
.home-3 .mySwiper .overlay::before {
    background:
        linear-gradient(90deg,
            rgba(23, 17, 15, .78) 0%,
            rgba(23, 17, 15, .62) 30%,
            rgba(23, 17, 15, .18) 55%,
            rgba(23, 17, 15, 0) 72%),
        linear-gradient(180deg,
            rgba(23, 17, 15, .58) 0%,
            rgba(23, 17, 15, .30) 34%,
            rgba(23, 17, 15, .48) 78%,
            rgba(23, 17, 15, .72) 100%);
}

/* hareketli hero: fotoğrafın üstüne oturur, karartma (::before, z-index 1)
   videonun da üstünde kalır */
.mySwiper .overlay .hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* telefonda metin tam genişlik — yatay katman yerine düz dikey karartma */
@media (max-width: 767px) {

    .home-3 .mySwiper .overlay::before {
        background: linear-gradient(180deg,
                rgba(23, 17, 15, .70) 0%,
                rgba(23, 17, 15, .58) 34%,
                rgba(23, 17, 15, .68) 78%,
                rgba(23, 17, 15, .82) 100%);
    }
}

/* içerik üst şerit + menü çubuğunun (192px) altında dursun */
.home-3 .mySwiper .box-slider .content-box {
    padding-top: 250px;
    padding-bottom: 90px;
}

/* tema slayt oklarını 1440px altında "display:none !important" ile
   gizliyor; hero'da iki slayt olduğu için okları masaüstünde geri açıyoruz
   (mobilde kaydırma + otomatik geçiş zaten var) */
@media (min-width: 992px) {

    .home-3 .mySwiper .swiper-button-next,
    .home-3 .mySwiper .swiper-button-prev {
        display: flex !important;
    }
}

/* hero üzerindeki ikincil buton koyu zeminde okunur olsun */
.home-3 .mySwiper .box-slider .content-box .wrap-btn .tf-button.style3 {
    color: #fff;
    border-color: rgba(255, 255, 255, .6);
}

.home-3 .mySwiper .box-slider .content-box .wrap-btn .tf-button.style3:hover {
    color: var(--ld-dark);
    border-color: #fff;
}

/* --------------------------------------------------------------------------
   7. Hakkımızda — dekoratif görseller
   -------------------------------------------------------------------------- */
.about-restaurant .about-restaurant-main .image img {
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   8. Menü — 6 sekme, 108 kalem
   home_03'te menü bölümü beyaz zeminli; menü listesinin noktalı çizgilerini
   maskeleyen kutucuklar bölüm rengiyle aynı olmak zorunda ve tema onları
   koyu zemine göre kurmuş. Markanın siyah/kırmızı diline de bu uyuyor:
   bölümü koyuya çekip metin renklerini düzeltiyoruz.
   Ayrıca tema listeyi tek dar sütuna (569px) sıkıştırıyor; 23 kalemli
   sekmede sayfa gereksiz uzuyor — geniş ekranda iki sütuna açıyoruz.
   -------------------------------------------------------------------------- */
.home-3 .s-menu {
    background: var(--ld-dark);
}

.home-3 .s-menu .menu-content .block-text .subtitle {
    color: var(--ld-red);
}

.home-3 .s-menu .menu-content .block-text .title {
    color: #fff;
}

.home-3 .s-menu .menu-content .block-text p {
    color: rgba(255, 255, 255, .75);
}

.s-menu .flat-tabs .menu-tab {
    flex-wrap: wrap;
    gap: 6px 0;
}

.s-menu .flat-tabs .menu-tab li {
    margin: 0 22px;
}

.s-menu .flat-tabs .menu-tab li h5 {
    transition: color .25s ease;
}

.s-menu .flat-tabs .menu-tab li:hover h5 {
    color: var(--ld-red);
}

@media (min-width: 992px) {

    /* grid yerine çok sütunlu metin akışı: kalemler doğal yükseklikte
       kalır, satır hizalaması yüzünden aralarında boşluk oluşmaz */
    .s-menu .flat-tabs .content-tab .menu-list {
        max-width: 1180px;
        columns: 2;
        column-gap: 56px;
    }

    .s-menu .flat-tabs .content-tab .menu-list li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }
}

.s-menu .menu-list li .name .price {
    white-space: nowrap;
}

/* fiyat ve ad, aradaki noktalı çizgiyi maskeleyen zemini bölüm rengiyle
   aynı tutmalı — theme-palette.css bunu #17110f'e çekiyor, burada
   yalnızca hizalamayı düzeltiyoruz */
.s-menu .menu-list h5 {
    align-items: baseline;
    gap: 8px;
}

.s-menu .menu-list li p {
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    line-height: 25px;
}

.menu-cta {
    margin-top: 26px;
}

.menu-cta p {
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   9. Neden biz
   -------------------------------------------------------------------------- */
.event .event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 575px) {
    .event .event-content .block-text .list li {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   10. Sipariş bölümü — tema burada iki stok fotoğraf kullanıyor;
   markanın kendi siyah/kırmızı dilini kullanan düz zeminle değiştirdik.
   -------------------------------------------------------------------------- */
.s-book .book-content,
.s-book .book-content:last-child {
    background: var(--ld-dark);
    padding: 96px 40px;
}

.s-book .book-content::before {
    background: radial-gradient(760px 420px at 50% 0%, rgba(238, 52, 46, .16), transparent 70%);
}

.s-book .book-content:last-child {
    background: var(--ld-dark-2);
}

.s-book .book-content .block-text .title {
    color: #fff;
}

/* tema iki paneli her genişlikte %100 yapıyor; masaüstünde yan yana */
@media (min-width: 992px) {

    .s-book .book-main {
        flex-wrap: nowrap;
    }

    .s-book .book-main .book-content,
    .s-book .book-main .book-content:last-child {
        width: 50%;
    }
}

/* --------------------------------------------------------------------------
   10b. CTA şeridi — temanın "gift voucher" stok görseli yerine marka şeridi
   -------------------------------------------------------------------------- */
.vouchers {
    background: var(--ld-dark-2);
    background-image: radial-gradient(900px 380px at 12% 0%, rgba(238, 52, 46, .18), transparent 70%);
}

.vouchers .vouchers-main .left .icon {
    background: var(--ld-red);
}

.vouchers .vouchers-main .left .content h4 {
    color: #fff;
}

.vouchers .vouchers-main .left .content p {
    color: rgba(255, 255, 255, .78);
}

.vouchers .vouchers-main .tf-button {
    background-image: linear-gradient(160deg, var(--ld-red) 50%, #fff 50%);
    border-color: var(--ld-red);
    color: #fff;
}

.vouchers .vouchers-main .tf-button:hover {
    color: var(--ld-dark);
}

/* --------------------------------------------------------------------------
   11. İletişim + harita
   -------------------------------------------------------------------------- */
.s-contact {
    padding: 100px 0;
    background: var(--ld-cream);
}

.s-contact .block-text .title {
    color: var(--ld-dark);
}

.s-contact .block-text .text {
    color: var(--ld-body);
}

.contact-boxes {
    margin-top: 48px;
}

.contact-box {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ld-line);
    padding: 38px 32px 34px;
    text-align: center;
    margin-bottom: 30px;
    transition: border-color .3s ease, transform .3s ease;
}

.contact-box:hover {
    border-color: var(--ld-red);
    transform: translateY(-4px);
}

.contact-box i {
    font-size: 26px;
    color: var(--ld-red);
    margin-bottom: 18px;
    display: block;
}

.contact-box h5 {
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 18px;
    margin-bottom: 14px;
}

.contact-box p {
    color: var(--ld-body);
    line-height: 28px;
    margin-bottom: 16px;
}

.contact-box a {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ld-dark);
    border-bottom: 1px solid var(--ld-red);
    padding-bottom: 3px;
    transition: color .3s ease;
}

.contact-box a:hover {
    color: var(--ld-red);
}

.map-wrap {
    margin-top: 24px;
    border: 1px solid var(--ld-line);
    line-height: 0;
}

.map-wrap iframe {
    display: block;
    filter: grayscale(.35);
}

/* --------------------------------------------------------------------------
   12. Footer — tıklanabilir bağlantılar
   -------------------------------------------------------------------------- */
.footer .widget.locations ul li p.cl a,
.footer .bottom-main a {
    color: inherit;
    transition: color .3s ease;
}

.footer .widget.locations ul li p.cl a:hover,
.footer .bottom-main a:hover {
    color: var(--ld-red);
}

.footer .widget.logo .list-social li a {
    transition: all .3s ease;
}

/* --------------------------------------------------------------------------
   13. Mobil sabit "sipariş için ara" çubuğu
   -------------------------------------------------------------------------- */
.mobile-call-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--ld-red);
    color: #fff;
    padding: 15px 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    text-align: center;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
}

.mobile-call-bar:hover,
.mobile-call-bar:focus {
    background: var(--ld-red-dark);
    color: #fff;
}

@media (max-width: 767px) {
    .mobile-call-bar {
        display: flex;
    }

    /* sabit çubuk içeriği kapatmasın */
    .footer {
        padding-bottom: 70px;
    }

    #scroll-top {
        bottom: 80px;
    }
}

/* --------------------------------------------------------------------------
   14. Küçük ekran düzeltmeleri
   -------------------------------------------------------------------------- */
@media (max-width: 1399px) {
    .header.style-3 .header__logo img {
        width: 160px;
    }
}

@media (min-width: 992px) and (max-width: 1399px) {
    .header.style-3 #site-header-inner .main-nav {
        margin-left: 34px;
    }

    .header.style-3 #main-nav .menu > li {
        margin-right: 26px;
    }
}

@media (max-width: 1199px) {
    .header .header-right .tf-button {
        padding: 14px 18px;
        font-size: 11px;
    }
}

@media (max-width: 991px) {

    .header-right {
        margin-right: 56px;
        gap: 12px;
    }

    /* tablette sipariş butonu yerine dil düğmesi yeter */
    .header .header-right .tf-button {
        display: none;
    }

    .s-book .book-content,
    .s-book .book-content:last-child {
        padding: 64px 24px;
    }
}

@media (max-width: 767px) {

    /* hero: içerik menü çubuğunun altında kalsın, <br> satırları bozmasın */
    .home-3 .mySwiper .box-slider .content-box {
        padding-top: 180px;
        padding-bottom: 70px;
    }

    .home-3 .mySwiper .content-box .sub-title br,
    .home-3 .mySwiper .content-box .title br {
        display: none;
    }

    .s-menu .flat-tabs .menu-tab li {
        margin: 0 12px;
    }

    .s-menu .flat-tabs .menu-tab li h5 {
        font-size: 15px;
    }
}

@media (max-width: 575px) {
    .hero-badge {
        font-size: 11px;
        letter-spacing: 2px;
        padding: 6px 14px;
    }

    .box-slider .wrap-btn.st2 {
        gap: 12px;
    }
}