/* =====================================================
   Noa Restaurant — QR Menü
   BEF Steakhouse temasından (themes.befcode.com/demo/befsteak) uyarlandı.
   Marka: Oxblood, Champagne, Emerald Sage, Espresso, Vintage Rose · Cormorant Garamond + Outfit

   Ölçü sistemi (her yerde aynı):
   --pad          yatay kenar boşluğu
   --section-y    bölümlerin üst/alt boşluğu
   --gap          kart ve karo aralıkları
   --frame-inset  fotoğraflardaki açık krem çerçevenin kenara uzaklığı
   --space-*      4 · 8 · 12 · 16 · 24 · 32 · 48 px ölçeği
   ===================================================== */

:root {
    /* Noa marka paleti */
    --color-oxblood: #5C0203;
    --color-champagne: #D9C4B1;
    --color-sage: #4D4828;
    --color-espresso: #372713;
    --color-vintage-rose: #A39670;

    /* Zemin — dokulu koyu oxblood */
    --color-bg: #3A0102;
    --color-bg-alt: #2A0101;
    --color-surface: #4A0202;
    --color-surface-soft: var(--color-oxblood);
    /* Champagne vurgu */
    --color-accent: var(--color-champagne);
    --color-accent-hover: #E4D6C8;
    --color-accent-dim: rgba(217, 196, 177, 0.15);
    --color-accent-ultra-dim: rgba(217, 196, 177, 0.06);

    /* Metin — champagne tonlu fildişi; ikincil bilgi Vintage Rose */
    --color-text-primary: #F4EDE8;
    --color-text-secondary: #E6D9CC;
    --color-text-muted: var(--color-vintage-rose);
    --color-text-on-accent: var(--color-oxblood);

    --color-border: rgba(217, 196, 177, 0.26);
    --color-border-soft: rgba(217, 196, 177, 0.12);
    --color-frame: rgba(217, 196, 177, 0.26);

    /* Fotoğraf tonlaması — tek tip oxblood foto akışı */
    --photo-tint: rgba(140, 14, 14, 0.18);
    --photo-shade: rgba(42, 1, 1, 0.42);

    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;

    --shadow: 0 8px 24px rgba(14, 0, 1, 0.6);
    --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-smooth: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;

    /* Ölçüler */
    --container: 480px;
    --pad: 18px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --section-y: 40px;
    --gap: 12px;
    --frame-inset: 12px;
    --header-h: 65px;

    --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .82  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[lang="ru"] {
    --font-sans: 'Jost', 'Outfit', system-ui, -apple-system, sans-serif;
}

html[lang="ar"] {
    --font-serif: 'Noto Naskh Arabic', 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Noto Sans Arabic', 'Outfit', system-ui, sans-serif;
}

/* Arabic is a joined script: tracking and synthetic italics break the letterforms. */
html[lang="ar"] :not(.latin) {
    letter-spacing: normal !important;
    font-style: normal !important;
}

/* =====================================================
   TEMEL
   ===================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
    background: var(--color-bg-alt);
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    background-image: var(--texture);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.sheet-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-smooth);
}

button {
    font-family: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

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

ul {
    list-style: none;
}

[hidden] {
    display: none !important;
}

main {
    max-width: var(--container);
    margin: 0 auto;
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: 0.02em;
}

#menu {
    scroll-margin-top: 70px;
}

/* Sayfa içi bağlantıyla odaklanan bölüm (app.js) çerçeve göstermez */
[tabindex="-1"]:focus {
    outline: none;
}

/* Yardımcılar */
.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

[dir="rtl"] .flip-rtl {
    transform: scaleX(-1);
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: -60px;
    inset-inline-start: var(--space-3);
    z-index: 300;
    padding: 10px var(--space-4);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-on-accent);
    background: var(--color-accent);
}

.skip-link:focus {
    top: var(--space-3);
}

/* Ayırıcı nokta (·): rakam ve harflerin optik ortasında, iki yanı eşit boşluklu */
.dot-sep {
    display: inline-block;
    width: 0.22em;
    height: 0.22em;
    margin: 0 0.3em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0.21em;
}

/* Harf aralıklı satırda soldaki fazladan aralık dengelenir */
/* Fiyat rakamları */
.pick-card-price,
.pd-price-value,
.pd-price,
.takeover-result-price {
    font-family: var(--font-sans);
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.01em;
}

/* =====================================================
   ORTAK TASARIM DİLİ
   ===================================================== */

/* Etiket: iki yanı ince çizgili açık krem harfler */
.hero-eyebrow,
.picks-eyebrow,
.cat-hero-fm-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.hero-eyebrow::before,
.hero-eyebrow::after,
.picks-eyebrow::before,
.picks-eyebrow::after,
.cat-hero-fm-eyebrow::before,
.cat-hero-fm-eyebrow::after {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

/* Harf aralığı son harften sonra da boşluk bırakır: sağ çizgi o kadar yaklaştırılır,
   yazı iki çizginin tam ortasında durur (Arapçada harf aralığı olmadığı için gerekmez) */
.hero-eyebrow::after,
.picks-eyebrow::after,
.cat-hero-fm-eyebrow::after,
.cats-group::after {
    margin-inline-start: -0.26em;
}

html[lang="ar"] .hero-eyebrow::after,
html[lang="ar"] .picks-eyebrow::after,
html[lang="ar"] .cat-hero-fm-eyebrow::after,
html[lang="ar"] .cats-group::after {
    margin-inline-start: 0;
}

/* Başlıklar: italik serif */
.hero-title,
.cat-hero-fm-title,
.picks-title,
.cats-title,
.notfound-title,
.pd-name,
.bef-foot-hello {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--color-text-primary);
}

/* Sayfa / hero başlığı */
.hero-title,
.cat-hero-fm-title {
    margin-top: var(--space-3);
    font-size: clamp(32px, 9.4vw, 44px);
    line-height: 1.08;
}

/* Bölüm başlığı */
.picks-title,
.cats-title,
.notfound-title,
.pd-name,
.bef-foot-hello {
    font-size: clamp(30px, 8.4vw, 38px);
    line-height: 1.1;
}

.picks-title,
.cats-title,
.notfound-title {
    margin-top: var(--space-3);
}

/* Alt metin */
.hero-sub,
.cat-hero-fm-tagline {
    max-width: 300px;
    margin: var(--space-3) auto 0;
    font-size: 14px;
    text-wrap: balance;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* Düğmeler: keskin, açık krem */
.hero-ctas,
.bef-foot-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
}

.hero-cta,
.bef-foot-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--color-accent);
}

.hero-cta--primary,
.bef-foot-cta--primary {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

.hero-cta--primary:hover,
.bef-foot-cta--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.hero-cta--ghost,
.bef-foot-cta--ghost {
    background: rgba(42, 1, 1, 0.35);
    color: var(--color-accent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hero-cta--ghost:hover,
.bef-foot-cta--ghost:hover {
    background: var(--color-accent-dim);
}

/* Fotoğraflı sahne: hero, sayfa başlıkları, footer bandı */
.hero,
.cat-hero-fm.has-photo,
.bef-foot-hero.has-photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--color-bg-alt);
}

.hero::before,
.cat-hero-fm.has-photo::before,
.bef-foot-hero.has-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: linear-gradient(var(--photo-tint), var(--photo-tint)), var(--hero-img, none);
    background-size: cover;
    background-position: var(--hero-pos, center);
    background-blend-mode: color, normal;
    filter: contrast(1.1) saturate(1.05);
}

.hero::before,
.cat-hero-fm.has-photo::before {
    animation: heroZoom 16s var(--ease) both;
}

.hero::after,
.cat-hero-fm.has-photo::after,
.bef-foot-hero.has-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* İnce açık krem çerçeve */
.hero-frame {
    position: absolute;
    inset: var(--frame-inset);
    border: 1px solid var(--color-frame);
    pointer-events: none;
}

/* =====================================================
   HEADER — her sayfada aynı: menü · logo · dil
   ===================================================== */
.ap {
    position: sticky;
    top: 0;
    z-index: 100;
    max-width: var(--container);
    margin: 0 auto;
    color: var(--color-text-primary);
    background: rgba(42, 1, 1, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background-color 0.35s ease;
}

.ap-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2);
    min-height: 64px;
    padding: 10px var(--pad);
    padding-top: max(10px, env(safe-area-inset-top));
}

.ap-rule {
    display: block;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(217, 196, 177, 0.35), transparent);
    transition: opacity 0.35s ease;
}

.ap-btn {
    justify-self: start;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--color-text-primary);
    transition: color 0.2s ease, transform 0.2s ease;
}

.ap-btn:hover {
    color: var(--color-accent);
}

.ap-btn:active {
    transform: scale(0.94);
}

.ap-burger {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    width: 24px;
}

.ap-burger span {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
}

.ap-burger span:nth-child(2) {
    width: 62%;
}

.ap-burger span:nth-child(3) {
    display: none;
}

.ap-brand {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    color: var(--color-text-primary);
}

.ap-brand-logo {
    display: block;
    width: 106px;
    height: auto;
}

.ap-right {
    justify-self: end;
    display: inline-flex;
    align-items: center;
}

/* Dil seçici — menü ikonu kadar hafif: ince küre + dil kodu, kutusuz */
.ap-lang {
    position: relative;
}

.ap-lang-btn {
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--color-text-primary);
    transition: color 0.2s ease;
}

.ap-lang-btn .icon {
    color: var(--color-accent);
}

.ap-lang-btn:hover,
.ap-lang.open .ap-lang-btn {
    color: var(--color-accent);
}

/* harf aralığının sondaki fazlası */
.ap-lang-btn .lang-current {
    line-height: 1;
    margin-inline-end: -0.16em;
}

.ap-lang-menu {
    position: absolute;
    top: calc(100% + 2px);
    inset-inline-end: 0;
    z-index: 110;
    min-width: 188px;
    padding: 6px 0;
    background: var(--color-surface);
    border: 1px solid var(--color-frame);
    box-shadow: var(--shadow);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s var(--ease), visibility 0s linear 0.2s;
}

.ap-lang.open .ap-lang-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s var(--ease), visibility 0s;
}

.ap-lang-menu li + li a {
    border-top: 1px solid rgba(217, 196, 177, 0.08);
}

.ap-lang-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 14px;
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.2;
    color: var(--color-text-secondary);
    border-inline-start: 2px solid transparent;
}

.ap-lang-menu a span {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--color-text-muted);
}

.ap-lang-menu a:hover,
.ap-lang-menu a:focus-visible {
    color: var(--color-text-primary);
    background: var(--color-surface-soft);
}

.ap-lang-menu a.is-active {
    color: var(--color-accent);
    background: var(--color-accent-ultra-dim);
    border-inline-start-color: var(--color-accent);
}

.ap-lang-menu a.is-active span {
    color: var(--color-accent);
}

/* Ana sayfa: header hero'nun üstünde şeffaf, kaydırınca koyulaşır */
.is-home .ap {
    margin-bottom: calc(var(--header-h) * -1);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.is-home .ap .ap-rule {
    opacity: 0;
}

.is-home .ap.is-scrolled {
    background: rgba(42, 1, 1, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.is-home .ap.is-scrolled .ap-rule {
    opacity: 1;
}

/* =====================================================
   ANA SAYFA — HERO
   ===================================================== */
.hero {
    height: 92vh;
    height: 92svh;
    min-height: 560px;
    padding: 96px var(--space-5) 84px;
}

.hero::after {
    background:
        radial-gradient(85% 50% at 50% 54%, rgba(42, 1, 1, 0.62), rgba(42, 1, 1, 0) 100%),
        linear-gradient(to bottom, rgba(42, 1, 1, 0.25), rgba(42, 1, 1, 0) 30%),
        linear-gradient(to top, rgba(42, 1, 1, 0.35), rgba(42, 1, 1, 0) 22%);
}

/* Çerçeve header'ın altından başlar */
.hero .hero-frame {
    top: calc(var(--header-h) + 9px);
}

.hero-inner {
    position: relative;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: heroIn 1.2s var(--ease) 0.15s both;
}


.hero-title {
    text-shadow: 0 2px 18px rgba(14, 0, 1, 0.7);
}

.hero-sub {
    text-shadow: 0 1px 8px rgba(14, 0, 1, 0.8);
}

.hero-ctas {
    margin-top: var(--space-5);
}

.hero-scroll {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-accent);
    opacity: 0.85;
    animation: heroBob 2.4s ease-in-out infinite;
}

.hero-banner-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-surface), var(--color-bg-alt));
}

/* =====================================================
   ÖNE ÇIKANLAR + ÜRÜN KARTI (her yerde aynı kart)
   ===================================================== */
.picks {
    padding: var(--section-y) var(--pad);
}

.picks-head {
    margin-bottom: var(--space-5);
    text-align: center;
}

.picks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

.pick-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid rgba(217, 196, 177, 0.2);
    transition: border-color 0.3s ease;
}

.pick-card:hover {
    border-color: rgba(217, 196, 177, 0.5);
}

.pick-card-img {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-surface-soft);
}

.pick-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 0.8s var(--ease);
}

.pick-card:hover .pick-card-img img {
    transform: scale(1.08);
}

.pick-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-3);
    border-top: 1px solid rgba(217, 196, 177, 0.14);
}

.pick-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.15;
    color: var(--color-text-primary);
}

/* Alt satır: fiyat her kartta solda (açık krem), porsiyon varsa sağda (soluk) */
.pick-card-foot {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--space-2);
}

.pick-card-meta {
    margin-inline-start: auto;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.pick-card-price {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--color-accent);
}

/* Rozetler — görselin sol üst köşesinde */
.pick-card-badges {
    position: absolute;
    top: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.pick-badge {
    padding: 4px 7px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-accent);
    background: rgba(77, 72, 40, 0.88);
    border: 1px solid rgba(217, 196, 177, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pick-badge--accent {
    color: var(--color-text-on-accent);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* İçecek çekimleri: beyaz sahnede kırpılmadan */
.pick-card--product .pick-card-img {
    background: #FFFFFF;
}

.pick-card--product .pick-card-img img {
    object-fit: contain;
    transform: none;
}

/* Görsel henüz yoksa marka yer tutucusu: kırpılmaz, büyütülmez, renk düzeltmesi yok */
.pick-card .pick-card-img.is-placeholder img,
.pick-card:hover .pick-card-img.is-placeholder img,
.pd-photo.is-placeholder img {
    transform: none;
    filter: none;
}

/* Görsel henüz yoksa ortada soluk NOA logosu */
.ph-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 34%;
    max-width: 72px;
    aspect-ratio: 1610 / 569;
    transform: translate(-50%, -50%);
    background: url("../img/brand/noa-mark.svg") center / contain no-repeat;
    opacity: 0.5;
    pointer-events: none;
}

.pd-photo .ph-mark {
    width: 38%;
    max-width: 170px;
}

.pick-card .pick-card-img.is-placeholder::after,
.pd-photo.is-placeholder::after {
    display: none;
}

/* Ürün fotoğrafları — hafif ortak düzeltme (beyaz zeminli içecek çekimleri hariç) */
.pick-card:not(.pick-card--product) .pick-card-img img {
    filter: brightness(0.94) contrast(1.06) saturate(1.06);
}

.pick-card:not(.pick-card--product) .pick-card-img::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 36px rgba(42, 1, 1, 0.35);
    pointer-events: none;
}

/* =====================================================
   KATEGORİLER (ana sayfa + menü sayfası)
   ===================================================== */
.cats {
    padding: var(--section-y) var(--pad);
    background: rgba(26, 1, 1, 0.4);
    border-top: 1px solid rgba(217, 196, 177, 0.08);
}

.cats--page {
    background: transparent;
    border: none;
}

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

/* Grup başlığı: iki yanı uzun çizgili etiket */
.cats-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.cats-group::before,
.cats-group::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border-soft);
}

.cats--page > .cats-group:first-child,
.section > .cats-group:first-child {
    margin-top: 0;
}

/* Kategori içi alt başlık (ör. Kırmızı Şaraplar): ortalı italik serif */
.menu-sub {
    margin: var(--space-5) 0 var(--space-3);
    font-family: var(--font-serif);
    font-size: 22px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    color: var(--color-text-primary);
}

.section > .menu-sub:first-child,
.cats-group + .menu-sub {
    margin-top: 0;
}

.cats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

.cat-tile-fm {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    height: 104px;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid rgba(217, 196, 177, 0.18);
    transition: border-color 0.3s ease;
}

/* Kategori görseli henüz yoksa: marka yer tutucusu, ek vişne tonlama ve hareket yok */
.cat-tile-fm.is-placeholder::before {
    display: none;
}

.cat-hero-fm.has-photo.is-placeholder::before {
    filter: none;
    animation: none;
}

/* Tek kalan son karo tam genişlik */
.cat-tile-fm:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.cat-tile-fm-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}

/* Oxblood tonlaması: fotoğrafı koyulaştırıp tek renk ailesine çeker */
.cat-tile-fm::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(42, 1, 1, 0.5), rgba(42, 1, 1, 0.1), rgba(42, 1, 1, 0.5)),
        rgba(120, 22, 20, 0.62);
    mix-blend-mode: multiply;
}

/* Karonun iç çerçevesi (küçük öğe olduğu için 6px) */
.cat-tile-fm::after {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: 2;
    border: 1px solid rgba(217, 196, 177, 0.28);
    transition: border-color 0.3s ease;
}

.cat-tile-fm:hover {
    border-color: var(--color-accent);
}

.cat-tile-fm:hover .cat-tile-fm-img {
    transform: scale(1.04);
}

.cat-tile-fm:hover::after {
    border-color: var(--color-accent);
}

/* Bulunulan kategori (menü panelinde) */
.cat-tile-fm.is-active {
    border-color: var(--color-accent);
}

.cat-tile-fm.is-active::after {
    border-color: var(--color-accent);
}

.cat-tile-fm-name,
.cat-tile-fm-count {
    position: relative;
    z-index: 3;
    isolation: isolate;
}

.cat-tile-fm-name {
    padding: 0 var(--space-2);
    font-family: var(--font-serif);
    font-size: 19px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--color-text-primary);
    text-shadow: 0 2px 10px rgba(14, 0, 1, 0.7);
}

.cat-tile-fm-img + .cat-tile-fm-name::before {
    content: "";
    position: absolute;
    inset: -18px -8px;
    z-index: -1;
    background: radial-gradient(closest-side, var(--photo-shade), transparent);
}

.cat-tile-fm-count {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* =====================================================
   SAYFA BAŞLIĞI (menü, kategori, iletişim)
   ===================================================== */
.cat-hero-fm {
    padding: var(--section-y) var(--space-5) var(--space-6);
    text-align: center;
}

.cat-hero-fm.has-photo {
    min-height: 300px;
    padding: var(--space-7) var(--space-5);
}

.cat-hero-fm.has-photo::after {
    background: radial-gradient(85% 65% at 50% 50%, rgba(42, 1, 1, 0.62), rgba(42, 1, 1, 0.12) 100%);
}

.cat-hero-fm.has-photo .cat-hero-fm-title {
    text-shadow: 0 2px 18px rgba(14, 0, 1, 0.6);
}

.cat-hero-fm.has-photo .cat-hero-fm-tagline {
    text-shadow: 0 1px 8px rgba(14, 0, 1, 0.8);
}

.cat-hero-fm.has-photo > :not(.hero-frame) {
    animation: heroIn 1s var(--ease) 0.1s both;
}

.cat-hero-fm-rule {
    display: none;
}

/* Fotoğraflı başlıktan sonra gelen içerik bölümü */
.section {
    padding: 0 var(--pad);
}

.section-tight {
    padding-bottom: var(--section-y);
}

.cat-hero-fm.has-photo + .section {
    padding-top: var(--section-y);
}

/* =====================================================
   KATEGORİ SAYFASI — sabit kategori şeridi
   ===================================================== */
.cat-chips {
    position: sticky;
    top: calc(var(--header-h) + max(0px, env(safe-area-inset-top) - 10px));
    z-index: 90;
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: 20px var(--pad);
    background: transparent;
    border-bottom: 1px solid transparent;
    scrollbar-width: none;
    scroll-padding-inline: var(--pad);
    -webkit-overflow-scrolling: touch;
    transition: background-color 0.25s ease, border-color 0.25s ease, padding 0.25s ease, margin 0.25s ease;
}

.cat-chips::-webkit-scrollbar {
    display: none;
}

/* Header'a yapışınca incelir; fark alt boşluğa aktarıldığı için sayfa zıplamaz */
.cat-chips.is-stuck {
    padding-block: 10px;
    margin-bottom: 20px;
    background: rgba(42, 1, 1, 0.92);
    border-bottom-color: rgba(217, 196, 177, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.cat-chip {
    flex: 0 0 auto;
    padding: 7px 13px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-secondary);
    background: rgba(42, 1, 1, 0.35);
    border: 1px solid var(--color-border);
}

.cat-chip:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.cat-chip.is-active {
    font-weight: 600;
    color: var(--color-text-on-accent);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--section-y) 0;
    text-align: center;
    color: var(--color-text-muted);
}

/* =====================================================
   ÜRÜN SAYFASI — çerçeveli fotoğraf + basılı menü gibi fiyat satırları
   ===================================================== */
.pd-top {
    padding: var(--space-5) var(--pad) var(--space-3);
}

.pd-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.pd-back:hover {
    color: var(--color-text-primary);
}

/* Ürün görselleri her yerde 1:1 (kaynak: 1000×1000) */
.pd-photo {
    position: relative;
    margin: 0 var(--pad);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-surface-soft);
    border: 1px solid rgba(217, 196, 177, 0.2);
    box-shadow: 0 18px 40px rgba(14, 0, 1, 0.45);
}

.pd-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    filter: brightness(0.94) contrast(1.06) saturate(1.06);
}

.pd-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 40px rgba(42, 1, 1, 0.35);
    pointer-events: none;
}

.pd-photo .hero-frame {
    z-index: 1;
}

/* İçecek çekimleri: beyaz sahnede kırpılmadan */
.pd-photo.is-product {
    background: #FFFFFF;
}

.pd-photo.is-product img {
    object-fit: contain;
    transform: none;
    filter: none;
}

.pd-photo.is-product::after {
    display: none;
}

.pd-photo.is-product .hero-frame {
    border-color: rgba(217, 196, 177, 0.35);
}

.pd-body {
    padding: var(--space-5) var(--pad) 0;
    text-align: center;
}

.pd-body:last-child {
    padding-bottom: var(--section-y);
}

.pd-original {
    margin-top: var(--space-2);
    font-size: 12px;
    color: var(--color-text-muted);
}

.pd-original span {
    font-family: var(--font-serif);
    font-size: 15px;
    font-style: italic;
    color: var(--color-text-secondary);
}

.pd-desc {
    max-width: 320px;
    margin: var(--space-3) auto 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

/* Tek fiyat — porsiyon iki yanı çizgili etiket, fiyat ortada büyük */
.pd-price-single {
    margin-top: var(--space-4);
}

.pd-portion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.pd-portion::before,
.pd-portion::after {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.pd-portion::after {
    margin-inline-start: -0.26em;
}

html[lang="ar"] .pd-portion::after {
    margin-inline-start: 0;
}

.pd-price {
    margin-top: var(--space-2);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-accent);
}

/* Çok boylu ürünler — ölçü · noktalı çizgi · fiyat */
.pd-prices {
    margin-top: var(--space-5);
    padding: var(--space-1) var(--space-4);
    text-align: start;
    background: var(--color-surface);
    border: 1px solid rgba(217, 196, 177, 0.2);
}

.pd-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: var(--space-3) 0;
}

.pd-price-row + .pd-price-row {
    border-top: 1px solid rgba(217, 196, 177, 0.08);
}

.pd-price-row::after {
    content: "";
    order: 2;
    flex: 1;
    min-width: var(--space-3);
    border-bottom: 1px dotted rgba(217, 196, 177, 0.45);
}

.pd-price-label {
    order: 1;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.pd-price-value {
    order: 3;
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-accent);
}

.pd-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    max-width: 320px;
    margin: var(--space-4) auto 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: start;
    color: var(--color-text-muted);
}

/* 18 px satırda 13 px ikon: yazının gövde ortasına hizalı */
.pd-note .icon {
    margin-top: 3px;
    color: var(--color-accent);
}

/* Bu kategoriden — ana sayfadaki kategori bandı gibi ayrılır */
.pd-related {
    margin-top: var(--section-y);
    padding: var(--section-y) var(--pad);
    background: rgba(26, 1, 1, 0.4);
    border-top: 1px solid rgba(217, 196, 177, 0.08);
}

.pd-related > .picks-eyebrow {
    margin-bottom: var(--space-5);
}

.pd-all-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-5);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* =====================================================
   MENÜ PANELİ (takeover)
   ===================================================== */
.sheet {
    position: fixed;
    inset: 0;
    z-index: 150;
    max-width: var(--container);
    margin: 0 auto;
    visibility: hidden;
    pointer-events: none;
    /* kapanırken gizlenme, kayma/solma bitene kadar bekler */
    transition: visibility 0s linear 0.4s;
}

.sheet[aria-hidden="false"] {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
}

.sheet-backdrop {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: rgba(30, 1, 1, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.4s ease;
}

.sheet[aria-hidden="false"] .sheet-backdrop {
    opacity: 1;
}

.sheet-panel {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    max-width: var(--container);
    max-height: 88vh;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, 100%);
    background-color: var(--color-bg);
    background-image: var(--texture);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -10px 40px rgba(14, 0, 1, 0.8);
    transition: transform 0.4s var(--ease);
}

.sheet[aria-hidden="false"] .sheet-panel {
    transform: translate(-50%, 0);
}

.takeover-handle {
    display: block;
    width: 36px;
    height: 3px;
    margin: 10px auto 0;
    background: rgba(217, 196, 177, 0.35);
}

.takeover-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--pad) var(--space-4);
}

/* Header'daki logo ile aynı */
.takeover-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.takeover-brand-logo {
    display: block;
    width: 96px;
    height: auto;
}

.takeover-close {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    border: 1px solid rgba(217, 196, 177, 0.3);
    transition: var(--transition-smooth);
}

.takeover-close:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.takeover-close:active {
    transform: scale(0.94);
}

.takeover-search {
    position: relative;
    padding: 0 var(--pad) var(--space-4);
    border-bottom: 1px solid rgba(217, 196, 177, 0.12);
}

.takeover-search .icon {
    position: absolute;
    top: 23px;
    inset-inline-start: calc(var(--pad) + 15px);
    transform: translateY(-50%);
    color: var(--color-accent);
    pointer-events: none;
}

.takeover-search input {
    width: 100%;
    height: 46px;
    padding-block: 0;
    padding-inline: 42px 14px;
    font-family: inherit;
    font-size: 16px;
    color: var(--color-text-primary);
    background: rgba(42, 1, 1, 0.45);
    border: 1px solid rgba(217, 196, 177, 0.22);
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.takeover-search input::placeholder {
    font-size: 14px;
    color: var(--color-text-muted);
}

.takeover-search input:focus {
    border-color: var(--color-accent);
}

.sheet-scroll {
    flex-grow: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-4) var(--pad) calc(var(--space-5) + env(safe-area-inset-bottom));
}

/* Grup başlıkları ana sayfadaki "— MUTFAK —" ile aynı (.cats-group) */
.takeover-results .cats-group {
    margin: 0 0 var(--space-1);
}

/* Kategori kartları menü sayfasındakiyle aynı (.cat-tile-fm) */
.takeover-group .cats-group {
    margin: var(--space-5) 0 var(--space-3);
}

.takeover-results[hidden] ~ .takeover-group.is-first-visible .cats-group {
    margin-top: 0;
}

.takeover-result-list {
    display: flex;
    flex-direction: column;
}

.takeover-result {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid rgba(217, 196, 177, 0.08);
}

.takeover-result-name {
    font-family: var(--font-serif);
    font-size: 19px;
    font-style: italic;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.takeover-result-name small {
    display: block;
    margin-top: var(--space-1);
    font-family: var(--font-sans);
    font-size: 9px;
    font-style: normal;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.takeover-result-price {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-accent);
}

.takeover-result:active .takeover-result-name,
.takeover-result:hover .takeover-result-name {
    color: var(--color-accent);
}

.takeover-empty {
    padding: var(--space-3) 0;
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: var(--color-text-muted);
}

/* Sayfa bağlantıları — altta tek satır */
.takeover-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(217, 196, 177, 0.12);
}

/* Harf aralığının kelime sonundaki fazlası dengelenir: grup tam ortada, aralıklar eşit */
.takeover-quick a {
    margin-inline-end: -0.22em;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.takeover-quick a:hover,
.takeover-quick a.is-active {
    color: var(--color-accent);
}

html[lang="ar"] .takeover-quick a {
    margin-inline-end: 0;
}

/* =====================================================
   FOOTER — tek kapanış bandı
   ===================================================== */
.bef-foot {
    max-width: var(--container);
    margin: 0 auto;
    text-align: center;
    color: var(--color-text-secondary);
}

.bef-foot-hero.has-photo {
    padding: var(--space-7) var(--space-5) calc(var(--space-7) + env(safe-area-inset-bottom));
}

.bef-foot-hero.has-photo::after {
    background: radial-gradient(85% 60% at 50% 50%, rgba(42, 1, 1, 0.66), rgba(42, 1, 1, 0.12) 100%);
}



.bef-foot-hello {
    margin: var(--space-3) 0 var(--space-5);
    text-shadow: 0 2px 18px rgba(14, 0, 1, 0.6);
}

.bef-foot-icons {
    display: flex;
    justify-content: center;
    gap: var(--gap);
    margin-top: var(--space-5);
}

.bef-foot-icons a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    background: rgba(42, 1, 1, 0.35);
    border: 1px solid rgba(217, 196, 177, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.bef-foot-icons a:hover {
    color: var(--color-text-primary);
    border-color: var(--color-accent);
}

.bef-foot-copy {
    margin-top: var(--space-5);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

/* =====================================================
   İLETİŞİM
   ===================================================== */
.contact-block + .contact-block {
    margin-top: var(--section-y);
}

.contact-block > .picks-eyebrow {
    margin-bottom: var(--space-4);
}

/* Hızlı aksiyonlar */
.contact-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--gap);
    margin-bottom: var(--section-y);
}

/* Düğme sayısı kadar eşit sütun; 4 düğmede 2 × 2 */
.contact-actions:has(> :nth-child(4)) {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
}

.contact-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: rgba(42, 1, 1, 0.35);
    border: 1px solid var(--color-border);
}

.contact-action-btn .icon {
    color: var(--color-accent);
}

.contact-action-btn:hover {
    color: var(--color-text-primary);
    border-color: var(--color-accent);
}

.contact-action-btn--primary,
.contact-action-btn--primary:hover {
    color: var(--color-text-on-accent);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.contact-action-btn--primary .icon {
    color: var(--color-text-on-accent);
}

.contact-action-btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/* Harita kartı — harita ve adres tek kartta, tamamı haritayı açar */
.contact-map-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid rgba(217, 196, 177, 0.2);
    transition: border-color 0.3s ease;
}

.contact-map-card:hover {
    border-color: rgba(217, 196, 177, 0.5);
}

.contact-map {
    position: relative;
    display: block;
    aspect-ratio: 720 / 440;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.contact-map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}

.contact-map-card:hover .contact-map img {
    transform: scale(1.03);
}

.contact-map .hero-frame {
    z-index: 1;
}

/* Konum noktası (nabız) + üstünde açık krem iğne + en üstte marka etiketi */
.contact-map-point {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: pulseAccent 2s infinite;
}

.contact-map-pin {
    position: absolute;
    top: calc(50% - 29px);
    left: calc(50% - 16px);
    z-index: 3;
    width: 32px;
    height: 32px;
    color: var(--color-bg-alt);
    filter: drop-shadow(0 4px 8px rgba(14, 0, 1, 0.6));
}

.contact-map-pin svg {
    display: block;
}

.contact-map-pin svg path {
    fill: var(--color-accent);
}

.contact-map-pin svg circle {
    fill: var(--color-bg-alt);
    stroke: none;
}

.contact-map-label {
    position: absolute;
    top: calc(50% - 64px);
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    white-space: nowrap;
    color: var(--color-accent);
    background: rgba(42, 1, 1, 0.82);
    border: 1px solid rgba(217, 196, 177, 0.24);
}

.contact-map-credit {
    position: absolute;
    bottom: calc(var(--frame-inset) + 6px);
    inset-inline-end: calc(var(--frame-inset) + 8px);
    z-index: 2;
    font-size: 8px;
    letter-spacing: 0.04em;
    color: rgba(244, 237, 232, 0.5);
}

.contact-map-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px var(--space-4);
    border-top: 1px solid rgba(217, 196, 177, 0.16);
}

.contact-map-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    border: 1px solid var(--color-border);
}

.contact-map-address {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.contact-map-address--plain {
    text-align: center;
}

.contact-map-go {
    display: inline-flex;
    color: var(--color-accent);
}

/* =====================================================
   404
   ===================================================== */
.notfound {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-7) var(--pad);
    text-align: center;
}


.notfound-sub {
    margin: var(--space-3) 0 var(--space-5);
    font-size: 14px;
    font-style: italic;
    color: var(--color-text-muted);
}

/* =====================================================
   ANİMASYONLAR
   ===================================================== */
@keyframes pulseAccent {
    0% {
        box-shadow: 0 0 0 0 rgba(217, 196, 177, 0.6);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(217, 196, 177, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(217, 196, 177, 0);
    }
}

@keyframes heroZoom {
    from {
        transform: scale(1.12);
    }
    to {
        transform: scale(1.02);
    }
}

@keyframes heroIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes heroBob {
    0%,
    100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, 6px);
    }
}

/* =====================================================
   EKRAN BOYUTLARI
   ===================================================== */
@media (max-width: 374px) {
    .ap-brand-logo {
        width: 96px;
    }
}

@media (max-width: 359px) {
    :root {
        --pad: 14px;
    }

    .pick-card-name {
        font-size: 15px;
    }

    .contact-action-btn {
        font-size: 10px;
    }
}

/* Masaüstü — menü sütunu ortada, dış alan daha koyu */
@media (min-width: 520px) {
    html,
    body {
        background-color: #150001;
    }

    body {
        background-image: var(--texture), linear-gradient(var(--color-bg), var(--color-bg));
        background-size: auto, var(--container) 100%;
        background-position: 0 0, center top;
        background-repeat: repeat, repeat-y;
    }
}

/* =====================================================
   LOGO — NOA İstanbul (hero, footer, 404)
   ===================================================== */
.brand-logo {
    display: block;
    height: auto;
    margin-inline: auto;
}

.brand-logo--lg {
    width: 236px;
}

.brand-logo--md {
    width: 172px;
}

.hero .brand-logo {
    margin-bottom: var(--space-5);
    filter: drop-shadow(0 2px 14px rgba(14, 0, 1, 0.6));
}

.bef-foot .brand-logo {
    margin-bottom: var(--space-2);
}

.notfound .brand-logo {
    margin-bottom: var(--space-6);
}

/* İletişim bilgisi henüz yoksa */
.contact-empty {
    padding: var(--space-6) 0;
    font-size: 14px;
    font-style: italic;
    text-align: center;
    color: var(--color-text-muted);
}