/* =====================================================================
   Cafe du Port — Menü (2026)
   Mobil öncelikli, bağımsız stil dosyası.
   Bootstrap/style.css'e bağımlı DEĞİLDİR; sadece menu.php kullanır.
   ===================================================================== */

:root {
    --mn-bg:        #0a1420;
    --mn-bg-2:      #0e1c2b;
    --mn-surface:   rgba(255, 255, 255, .045);
    --mn-surface-2: rgba(255, 255, 255, .075);
    --mn-line:      rgba(255, 255, 255, .16);
    --mn-line-soft: rgba(255, 255, 255, .09);

    --mn-text:      #eef4f9;
    --mn-muted:     #9db1c4;
    --mn-faint:     #6f849a;

    --mn-accent:    #a7dbf6;   /* logo mavisi */
    --mn-accent-ink:#06202f;
    --mn-gold:      #c9a961;

    --mn-radius:    14px;
    --mn-radius-sm: 10px;
    --mn-maxw:      1120px;

    /* Sticky çubuk yüksekliği — JS tarafından güncellenir */
    --mn-bar-h:     124px;

    --mn-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.mn {
    margin: 0;
    background: var(--mn-bg);
    color: var(--mn-text);
    font-family: var(--mn-font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.mn img { max-width: 100%; height: auto; display: block; }
.mn a { color: inherit; text-decoration: none; }
/* :where() ile sıfır özgüllük — bileşen kuralları bunu rahatça ezebilsin */
:where(.mn) :where(h1, h2, h3, p) { margin: 0; }

/* [hidden] her zaman kazanmalı — aşağıdaki display kuralları ezmesin */
.mn [hidden] { display: none !important; }

.mn :focus-visible {
    outline: 2px solid var(--mn-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.mn-wrap {
    width: 100%;
    max-width: var(--mn-maxw);
    margin-inline: auto;
    padding-inline: 18px;
}

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

/* ---------------------------------------------------------------- HERO */

.mn-hero {
    position: relative;
    padding: 26px 0 22px;
    text-align: center;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(167, 219, 246, .13) 0%, transparent 62%),
        linear-gradient(180deg, var(--mn-bg-2) 0%, var(--mn-bg) 100%);
    border-bottom: 1px solid var(--mn-line-soft);
}

.mn-hero__logo { width: 88px; margin: 0 auto 12px; }

.mn-hero h1 {
    margin: 0;
    font-size: clamp(1.5rem, 5.2vw, 2.1rem);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mn-hero__sub {
    margin: 8px auto 0;
    max-width: 46ch;
    font-size: .85rem;
    color: var(--mn-muted);
}

.mn-hero__back {
    position: absolute;
    top: 14px; left: 14px;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--mn-surface);
    border: 1px solid var(--mn-line-soft);
    color: var(--mn-text);
    font-size: 1.1rem;
    line-height: 1;
    transition: background .2s ease;
}
.mn-hero__back:hover { background: var(--mn-surface-2); }

/* ------------------------------------------------------------ STICKY BAR */

.mn-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(10, 20, 32, .93);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--mn-line-soft);
}

.mn-bar__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

/* Sekmeler: Yemekler / İçecekler */
.mn-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 4px;
    background: var(--mn-surface);
    border: 1px solid var(--mn-line-soft);
    border-radius: 999px;
}

.mn-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mn-muted);
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.mn-tab img { width: 17px; opacity: .75; }
.mn-tab:hover { color: var(--mn-text); }
.mn-tab[aria-current="true"] {
    background: var(--mn-accent);
    color: var(--mn-accent-ink);
}
.mn-tab[aria-current="true"] img { opacity: 1; }

/* Arama */
.mn-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.mn-search__icon {
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    color: var(--mn-faint);
    pointer-events: none;
    font-size: .95rem;
}
.mn-search input {
    width: 100%;
    min-height: 44px;
    padding: 0 40px 0 38px;
    border: 1px solid var(--mn-line-soft);
    border-radius: 999px;
    background: var(--mn-surface);
    color: var(--mn-text);
    font: inherit;
    font-size: .9rem;
    text-overflow: clip;
}
.mn-search input::-webkit-search-decoration,
.mn-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mn-search input::placeholder { color: var(--mn-faint); }
.mn-search input:focus {
    border-color: rgba(167, 219, 246, .55);
    background: var(--mn-surface-2);
}
.mn-search__clear {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    display: none;
    place-items: center;
    border: 0; border-radius: 50%;
    background: var(--mn-surface-2);
    color: var(--mn-muted);
    font-size: 1rem; line-height: 1;
    cursor: pointer;
}
.mn-search.is-filled .mn-search__clear { display: grid; }

/* Kategori çipleri */
.mn-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 0 11px;
    scroll-padding-inline: 18px;
}
.mn-chips::-webkit-scrollbar { display: none; }

.mn-chip {
    flex: 0 0 auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--mn-line-soft);
    border-radius: 999px;
    background: var(--mn-surface);
    color: var(--mn-muted);
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.mn-chip:hover { color: var(--mn-text); background: var(--mn-surface-2); }
.mn-chip.is-active {
    background: var(--mn-accent);
    border-color: var(--mn-accent);
    color: var(--mn-accent-ink);
    font-weight: 600;
}

/* -------------------------------------------------------------- İÇERİK */

.mn-main { padding: 26px 0 90px; }

.mn-panel { scroll-margin-top: calc(var(--mn-bar-h) + 10px); }

.mn-panel__title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
    font-size: clamp(1.35rem, 6vw, 1.9rem);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.mn-panel__title::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--mn-accent), transparent);
    opacity: .55;
}
.mn-panel + .mn-panel .mn-panel__title { margin-top: 34px; }

.mn-group {
    margin: 0 0 34px;
    scroll-margin-top: calc(var(--mn-bar-h) + 14px);
}
.mn-group[hidden] { display: none; }

.mn-group__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}
.mn-group__head h2 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--mn-accent);
}
.mn-group__head::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--mn-line), transparent);
}

.mn-group__note {
    margin: 0 0 14px;
    font-size: .76rem;
    color: var(--mn-gold);
    font-style: italic;
}
.mn-group__head + .mn-list,
.mn-group__head + .mn-compact,
.mn-group__head + .mn-tbl { margin-top: 16px; }

/* --- Standart liste (ad + noktalar + fiyat + açıklama) --- */

.mn-list { display: flex; flex-direction: column; gap: 2px; }

.mn-item {
    padding: 11px 12px;
    border-radius: var(--mn-radius-sm);
    transition: background .18s ease;
}
.mn-item:hover { background: var(--mn-surface); }
.mn-item[hidden] { display: none; }

.mn-item__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.mn-item__name {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .005em;
}
.mn-item__dots {
    flex: 1 1 auto;
    min-width: 14px;
    border-bottom: 1px dotted var(--mn-line);
    transform: translateY(-4px);
}
.mn-item__price {
    flex: 0 0 auto;
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mn-accent);
    white-space: nowrap;
}
.mn-item__desc {
    margin: 4px 0 0;
    max-width: 72ch;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--mn-muted);
}

/* --- Kompakt ızgara (tek kelimelik, açıklamasız ürünler) --- */

.mn-compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px 22px;
}
.mn-compact .mn-item { padding: 9px 12px; }
.mn-compact .mn-item__name,
.mn-compact .mn-item__price { font-size: .9rem; }

/* --- Ölçülü tablo (rakı, viski, şarap...) --- */

.mn-tbl { display: flex; flex-direction: column; gap: 2px; }

.mn-tbl__sizes { display: none; }

.mn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    padding: 11px 12px;
    border-radius: var(--mn-radius-sm);
    transition: background .18s ease;
}
.mn-row:hover { background: var(--mn-surface); }
.mn-row[hidden] { display: none; }

.mn-row__name {
    flex: 1 0 100%;
    font-size: .93rem;
    font-weight: 600;
}
.mn-row__name small {
    display: inline-block;
    margin-left: 7px;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mn-faint);
}

/* Mobilde her fiyat bir "hap": ölçü etiketi + tutar */
.mn-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--mn-line-soft);
    border-radius: 999px;
    background: var(--mn-surface);
    font-size: .78rem;
    white-space: nowrap;
}
.mn-cell--empty { display: none; }
.mn-cell__k { color: var(--mn-faint); font-size: .7rem; }
.mn-cell__v {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mn-accent);
}

/* --- Arama boş sonuç --- */

.mn-empty {
    display: none;
    padding: 54px 20px;
    text-align: center;
    color: var(--mn-muted);
}
.mn-empty strong { display: block; margin-bottom: 6px; color: var(--mn-text); }
.mn.is-empty .mn-empty { display: block; }

/* -------------------------------------------------------------- ALT BİLGİ */

.mn-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    margin-bottom: 16px;
    font-size: .8rem;
    color: var(--mn-muted);
}
.mn-legend span { display: inline-flex; align-items: center; gap: 7px; }
.mn-legend b {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: .62rem;
    font-weight: 700;
}
.mn-legend .is-v  { color: #86c98f; }
.mn-legend .is-gf { color: var(--mn-gold); }

.mn-foot {
    margin-top: 10px;
    padding: 26px 0 34px;
    border-top: 1px solid var(--mn-line-soft);
    text-align: center;
}
.mn-foot p {
    margin: 0 auto 10px;
    max-width: 64ch;
    font-size: .76rem;
    line-height: 1.6;
    color: var(--mn-faint);
}
.mn-foot__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    margin-top: 12px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--mn-accent);
    color: var(--mn-accent-ink);
    font-size: .88rem;
    font-weight: 700;
}
.mn-foot__cta:hover { filter: brightness(1.06); }

/* Yukarı çık */
.mn-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 45;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 1px solid var(--mn-line-soft);
    border-radius: 50%;
    background: rgba(14, 28, 43, .92);
    backdrop-filter: blur(10px);
    color: var(--mn-text);
    font-size: 1.15rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.mn-top.is-on { opacity: 1; visibility: visible; transform: none; }

/* ---------------------------------------------------------- BREAKPOINTS */

/* Dar ekran: arama kutusu ikona küçülür, dokununca tüm satırı kaplar.
   Böylece yapışkan çubuk gereksiz yer kaplamaz. */
@media (max-width: 639px) {
    .mn-search {
        flex: 0 0 44px;
        width: 44px;
        transition: width .22s ease, flex-basis .22s ease;
    }
    .mn-bar.is-searching .mn-tabs { display: none; }
    .mn-bar.is-searching .mn-search { flex: 1 1 auto; width: 100%; }
}

@media (min-width: 560px) {
    .mn-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .mn-wrap { padding-inline: 28px; }
    .mn-chips { scroll-padding-inline: 28px; }
    .mn-hero { padding: 44px 0 34px; }
    .mn-hero__logo { width: 130px; }
    .mn-item__name, .mn-item__price { font-size: 1rem; }
    .mn-item__desc { font-size: .84rem; }

    /* Tabloyu gerçek sütunlara çevir */
    .mn-tbl__sizes {
        display: grid;
        grid-template-columns: minmax(0, 1fr) repeat(var(--cols), minmax(4.6rem, 5.4rem));
        gap: 8px;
        padding: 0 12px 8px;
        border-bottom: 1px solid var(--mn-line-soft);
        margin-bottom: 4px;
    }
    .mn-tbl__sizes span {
        text-align: right;
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--mn-gold);
    }
    .mn-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) repeat(var(--cols), minmax(4.6rem, 5.4rem));
        gap: 8px;
        align-items: baseline;
    }
    .mn-row__name { flex: initial; }
    .mn-cell {
        display: block;
        padding: 0;
        border: 0;
        background: none;
        text-align: right;
        border-radius: 0;
    }
    .mn-cell--empty { display: block; }
    .mn-cell--empty::after { content: "–"; color: var(--mn-faint); }
    .mn-cell__k { display: none; }
    .mn-cell__v { font-size: .88rem; }
}

@media (min-width: 992px) {
    .mn-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mn-group__head h2 { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mn *, .mn *::before, .mn *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------- YAZDIRMA */

@media print {
    :root { --mn-bar-h: 0px; }
    body.mn { background: #fff; color: #111; }
    .mn-bar, .mn-top, .mn-hero__back, .mn-search, .mn-foot__cta { display: none !important; }
    .mn-group { break-inside: avoid; page-break-inside: avoid; }
    .mn-group__head h2, .mn-panel__title { color: #111; }
    .mn-item__price, .mn-cell__v { color: #111; }
    .mn-item__desc, .mn-foot p { color: #444; }
    .mn-group__note { color: #8a6d1f; }
}