/* Header ölçüleri: mobilde 92px, masaüstünde üst çubuk + ana çubuk (JS ile de güncellenir) */
    /* NOIR & BLANC tema ayarları: temel görünümü buradan özelleştirin. */
:root {
    --color-noir: #0a0a0a;
    --color-charcoal: #141414;
    --color-ash: #262626;
    --color-silver: #b4b4b4;
    --color-white: #ffffff;
    --color-scrollbar: #404040;
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Inter', sans-serif;
    --radius-card: 1.5rem;
    --radius-pill: 9999px;
    --transition-standard: 0.3s ease;
    --hh: 92px;
}
    @media (min-width: 640px) { :root { --hh: 120px; } }
    html { scroll-padding-top: var(--hh); }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--color-noir); }
    ::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--color-white); }

    .grain-overlay {
        background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 0);
        background-size: 24px 24px;
    }

    .sticky-bar { top: calc(var(--hh) + 8px); }
    .menu-anchor { scroll-margin-top: calc(var(--hh) + 96px); }

    .menu-item-enter { animation: fadeIn .35s cubic-bezier(.16,1,.3,1) both; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    .on-light :focus-visible { outline-color: var(--color-noir); }

    .no-scrollbar { scrollbar-width: none; }
    .no-scrollbar::-webkit-scrollbar { display: none; }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto !important; }
        *, *::before, *::after { animation: none !important; transition: none !important; }
    }

    /* ---- Logo ---- */
/* ---- Logo ---- */
.brand-logo-link {
    min-width: 0;
    display: flex;
    align-items: center;
    line-height: 0;
}
.brand-logo {
    display: block;
    width: auto;
    height: 3.6rem;
    max-width: 16rem;
    object-fit: contain;
    object-position: center;
}
@media (min-width: 640px) {
    .brand-logo { height: 3.8rem; }
}

    /* Hero banner photo: visible but intentionally low-opacity behind the text. */
    .hero-banner-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.58) 52%, rgba(10,10,10,.48) 100%), url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=2000&q=85'); background-size: cover; background-position: center 54%; opacity: .72; }
    .hero-banner-photo::after { content: ''; position: absolute; inset: 0; background: rgba(10,10,10,.24); }

    /* ---- Header ---- */
    #navbar.is-scrolled { box-shadow: 0 12px 32px -14px rgba(0,0,0,.7); }
    #navbar.is-scrolled #topBar { max-height: 0; opacity: 0; border-bottom-width: 0; }

    #mainBar { position: relative; height: 92px; }
    @media (min-width: 640px) { #mainBar { height: 84px; } }
    #topBar { max-height: 36px; }

    @media (max-width: 1279px) {
        /* Logo, hamburger dışında kalan tüm alanı kaplar ve kendi içinde ortalanır */
        #mainBar .brand-logo-link {
            flex: 1 1 0%;
            justify-content: center;
        }
        #mainBar .brand-logo {
            max-width: 100%;
        }
        /* Hamburger sağda sabit kalır */
        #mainBar > .xl\:hidden {
            margin-left: 0;
            flex-shrink: 0;
        }
    }

    .nav-link { position: relative; }
    .nav-link::after { content: ''; position: absolute; left: 1rem; right: 1rem; bottom: 4px; height: 1px; background: var(--color-white); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-standard); }
    .nav-link.is-active { color: #fff; }
    .nav-link.is-active::after { transform: scaleX(1); }
    #scrollProgress { transform-origin: left; transform: scaleX(0); }

    /* Mobil açılır menü header yüksekliğini büyütmesin; aksi halde mobil tarayıcıda ekran zıplayabilir. */
    @media (max-width: 1279px) {
        #mobileMenu {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            width: 100%;
            box-sizing: border-box;
            max-height: calc(100vh - var(--hh));
            max-height: calc(100dvh - var(--hh));
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
    }
    #productModal img, #lightboxModal img { background: #141414; }

    /* Mobilde ürün sayacı ve etrafındaki ayırıcı çizgileri gizle */
    @media (max-width: 639px) {
        #menu > .max-w-7xl > .mb-6.border-b { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 1rem !important; }
        #resultCount { display: none !important; }
        #resultCount + * { }
        #menu > .max-w-7xl > .flex.justify-end.mb-3 { display: none !important; }
    }

    /* Serif fontta rakamlar eşit yükseklikte ve aynı genişlikte olsun */
.font-serif {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}


/* Mobil hamburger menüsü: fotoğraflı kategori kartları ve daha erişilebilir etkileşimler */
#mobileMenu { box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.mobile-category-card { isolation: isolate; background: #141414; min-height: 7rem; }
.mobile-category-image { z-index: -2; transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .25s ease; }
.mobile-category-shade { z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.24) 35%, rgba(0,0,0,.88) 100%); }
.mobile-category-card:hover .mobile-category-image,
.mobile-category-card:focus-visible .mobile-category-image { transform: scale(1.06); }
.mobile-category-card:active { transform: scale(.985); }
#mobileMenu a:focus-visible, #mobileMenu button:focus-visible, #mobileMenuBtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .mobile-category-image, .mobile-category-card { transition: none !important; }
}