/* ==========================================================================
   TEBEŞİR — kara tahta bistro (dm-tema F14)
   Ahşap çerçeveli tahta, el yazısı tebeşir (Caveat + Amatic SC), noktalı
   fiyat çizgisi, bantlı fotoğraflar. Tek dünya: her zaman koyu tahta.
   Vurgu: --tb-acc = --theme-accent-dark-1 (koyu zeminde okunur marka rengi).
   ========================================================================== */
:root {
    --tb-board: #1E2824;
    --tb-board-2: #26322D;
    --tb-ink: #F2EFE6;
    --tb-muted: #B4BAB0;
    --tb-line: rgba(242, 239, 230, .30);
    --tb-acc: var(--theme-accent-dark-1, #F2C94C);
    --tb-acc2: var(--theme-accent2-dark-1, #8EC5E8);
    --tb-on-acc: var(--theme-on-accent-dark, #1E2824);
    --tb-wood: #6E4B2D;
    --tb-wood-hi: #8A6340;
    --tb-wood-lo: #553823;
    --tb-hand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
    --tb-caps: 'Amatic SC', 'Caveat', cursive;
    --tb-sketch: 255px 15px 225px 15px / 15px 225px 15px 255px; /* elle çizilmiş kenar */
    --tb-frame: 7px;
}

html, body { background-color: var(--tb-board); }
body {
    margin: 0;
    color: var(--tb-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* tebeşir tozu: silinmiş izler + ince doku */
    background-image:
        radial-gradient(120% 55% at 12% 0%, rgba(255, 255, 255, .07), transparent 60%),
        radial-gradient(70% 45% at 92% 38%, rgba(255, 255, 255, .04), transparent 62%),
        radial-gradient(90% 55% at 25% 100%, rgba(255, 255, 255, .05), transparent 60%),
        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 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.noscroll { overflow: hidden; }

.overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(10, 14, 12, .62);
    opacity: 0; pointer-events: none; transition: opacity .25s;
}
.overlay.active { opacity: 1; pointer-events: auto; }

/* --- Ahşap çerçeve (sabit, tıklamayı geçirir) --- */
.tb-frame { position: fixed; inset: 0; z-index: 880; pointer-events: none; }
.tb-frame i { position: absolute; display: block; }
.tb-frame i:nth-child(1), .tb-frame i:nth-child(2) {
    left: 0; right: 0; height: var(--tb-frame);
    background:
        repeating-linear-gradient(180deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, var(--tb-wood-hi), var(--tb-wood) 55%, var(--tb-wood-lo));
}
.tb-frame i:nth-child(1) { top: 0; box-shadow: 0 3px 8px rgba(0, 0, 0, .45); }
.tb-frame i:nth-child(2) { bottom: 0; box-shadow: 0 -3px 8px rgba(0, 0, 0, .45); }
.tb-frame i:nth-child(3), .tb-frame i:nth-child(4) {
    top: 0; bottom: 0; width: var(--tb-frame);
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, var(--tb-wood-hi), var(--tb-wood) 55%, var(--tb-wood-lo));
}
.tb-frame i:nth-child(3) { left: 0; box-shadow: 3px 0 8px rgba(0, 0, 0, .45); }
.tb-frame i:nth-child(4) { right: 0; box-shadow: -3px 0 8px rgba(0, 0, 0, .45); }

/* --- Başlık --- */
.tb-head {
    text-align: center;
    padding: calc(34px + var(--tb-frame)) 24px 6px;
}
.tb-logo-ring {
    display: inline-block; padding: 6px;
    border: 2px solid rgba(242, 239, 230, .75);
    border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
}
.tb-logo {
    width: 74px; height: 74px; display: block; object-fit: cover;
    border-radius: 50%;
}
.tb-name {
    margin: 12px 0 0;
    font-family: var(--tb-hand); font-weight: 700;
    font-size: clamp(40px, 11vw, 58px); line-height: 1; letter-spacing: .01em;
    color: var(--tb-ink);
    text-shadow: 0 0 1px rgba(255, 255, 255, .45), 0 0 14px rgba(255, 255, 255, .08);
    text-wrap: balance;
}
.tb-sub {
    margin: 6px 0 0;
    font-family: var(--tb-caps); font-weight: 700;
    font-size: 23px; letter-spacing: .08em; line-height: 1.15;
    color: var(--tb-muted);
}
.tb-swash {
    display: block; width: 150px; height: 12px; margin: 4px auto 0;
    border-bottom: 3px solid var(--tb-acc);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    transform: rotate(-1.5deg); opacity: .9;
}
.tb-actions {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    flex-wrap: wrap; margin-top: 16px;
}
.tb-pill {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: transparent; color: var(--tb-ink);
    border: 2px solid rgba(242, 239, 230, .75); border-radius: var(--tb-sketch);
    padding: 3px 15px 4px;
    font-family: var(--tb-hand); font-weight: 700; font-size: 20px; line-height: 1.2;
}
.tb-pill i { color: var(--tb-acc); font-size: 14px; }
.tb-pill:focus-visible, .tb-chip:focus-visible, .tb-add:focus-visible, .tb-servis:focus-visible, .tb-cartbar-btn:focus-visible {
    outline: 2px dashed var(--tb-acc); outline-offset: 3px;
}

/* dil menüsü */
.tb-lang { position: relative; }
.tb-lang-menu {
    display: none; position: absolute; inset-inline-end: 0; inset-inline-start: auto; text-align: start;
    top: calc(100% + 8px); z-index: 960;
    min-width: 150px; max-width: calc(100vw - 24px); padding: 6px;
    background: var(--tb-board-2); border: 2px solid var(--tb-line); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.tb-lang-menu.show { display: block; }
.tb-lang-menu .dropdown-item {
    display: block; padding: 6px 12px; border-radius: 10px;
    color: var(--tb-ink); text-decoration: none; background: transparent;
    font-family: var(--tb-hand); font-weight: 700; font-size: 20px;
}
.tb-lang-menu .dropdown-item:hover, .tb-lang-menu .dropdown-item:focus { background: rgba(242, 239, 230, .08); color: var(--tb-acc); }

/* --- Arama --- */
.tb-search-row { padding: 12px 20px 0; max-width: 720px; margin: 0 auto; }
.tb-search-row[hidden] { display: none !important; }
.tb-search-row input {
    width: 100%; box-sizing: border-box;
    background: var(--tb-board-2); color: var(--tb-ink);
    border: 2px dashed var(--tb-line); border-radius: 14px;
    padding: 8px 16px; outline: none;
    font-family: var(--tb-hand); font-weight: 700; font-size: 22px;
}
.tb-search-row input::placeholder { color: var(--tb-muted); opacity: 1; }
.tb-search-row input:focus { border-color: var(--tb-acc); }

/* --- Çipler (yapışkan) --- */
.tb-chips {
    position: sticky; top: var(--tb-frame); z-index: 500;
    display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 12px 20px 14px;
    background: linear-gradient(180deg, var(--tb-board) 82%, rgba(30, 40, 36, 0));
}
.tb-chips::-webkit-scrollbar { display: none; }
.tb-chip {
    flex: 0 0 auto; cursor: pointer; white-space: nowrap;
    background: transparent; color: var(--tb-ink);
    border: 2px solid rgba(242, 239, 230, .55); border-radius: var(--tb-sketch);
    padding: 3px 16px 4px;
    font-family: var(--tb-hand); font-weight: 700; font-size: 20px; line-height: 1.2;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.tb-chip.active {
    background: var(--tb-acc); border-color: var(--tb-acc); color: var(--tb-on-acc);
    transform: rotate(-1.5deg);
}

/* --- Gövde --- */
.tb-body { max-width: 720px; margin: 0 auto; padding: 4px 22px 150px; }
.tb-cat { padding-top: 8px; }
.tb-cat-head { text-align: center; margin: 22px 0 14px; }
.tb-cat-title {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin: 0;
    font-family: var(--tb-caps); font-weight: 700;
    font-size: 40px; line-height: 1; letter-spacing: .06em;
    color: var(--tb-ink);
}
.tb-cat-title::before, .tb-cat-title::after {
    content: ''; flex: 0 0 34px; height: 3px; border-radius: 3px;
    background: var(--tb-ink); opacity: .55;
}
.tb-cat-title::before { transform: rotate(-5deg); }
.tb-cat-title::after { transform: rotate(4deg); }
.tb-cat-count {
    display: block; margin-top: 2px;
    font-family: var(--tb-hand); font-size: 18px; font-weight: 500; color: var(--tb-muted);
}
.tb-subhead {
    margin: 22px 0 10px;
    font-family: var(--tb-hand); font-weight: 700; font-size: 27px; line-height: 1.1;
    color: var(--tb-acc2);
    text-decoration: underline wavy; text-decoration-thickness: 1.5px;
    text-underline-offset: 7px; text-decoration-color: rgba(242, 239, 230, .35);
}

/* --- Ürün --- */
.tb-item {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 14px 0 16px;
}
.tb-item + .tb-item { border-top: 1.5px dashed rgba(242, 239, 230, .14); }
.tb-item-media {
    position: relative; flex: 0 0 74px; margin-top: 8px;
    background: #F4F1E8; padding: 4px 4px 12px; /* polaroid */
    box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
    transform: rotate(-2.5deg);
}
.tb-item:nth-child(even) .tb-item-media { transform: rotate(2.5deg); }
.tb-item-media::before { /* bant */
    content: ''; position: absolute; top: -7px; left: 50%; z-index: 1;
    width: 40px; height: 14px; margin-left: -20px;
    background: rgba(255, 246, 214, .55);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transform: rotate(-7deg);
}
.tb-item-media img { width: 66px; height: 66px; object-fit: cover; display: block; }
.tb-item-body { flex: 1 1 auto; min-width: 0; }
.tb-item-top { display: flex; align-items: flex-end; gap: 6px; cursor: pointer; }
.tb-item-name {
    margin: 0; min-width: 0;
    font-family: var(--tb-hand); font-weight: 700; font-size: 25px; line-height: 1.05;
    color: var(--tb-ink);
}
.tb-leader {
    flex: 1 1 18px; min-width: 18px; margin-bottom: 7px;
    border-bottom: 2.5px dotted rgba(242, 239, 230, .45);
}
.tb-item-price {
    flex: 0 0 auto; white-space: nowrap;
    font-family: var(--tb-hand); font-weight: 700; font-size: 27px; line-height: 1;
    color: var(--tb-acc); font-variant-numeric: tabular-nums;
}
.tb-item-desc {
    margin: 4px 0 0; cursor: pointer;
    font-family: var(--tb-hand); font-weight: 500; font-size: 19px; line-height: 1.2;
    color: var(--tb-muted);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tb-item-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 8px; flex-wrap: wrap;
}
.tb-item-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 24px; }
.tb-item-type {
    width: 16px; height: 16px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(242, 239, 230, .6); background: transparent; font-size: 6px;
}
.tb-item-type.veg { color: #9BE08F; }
.tb-item-type.nonveg { color: #FF9A7A; }
.tb-kcal {
    font-family: var(--tb-hand); font-weight: 700; font-size: 18px; color: var(--tb-acc2);
}
.tb-body .tb-algs { display: inline-flex; gap: 5px; }
.tb-body .tb-algs i {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px dashed rgba(242, 239, 230, .55);
    font-family: var(--tb-hand); font-style: normal; font-weight: 700; font-size: 14px;
    color: var(--tb-ink);
}
.tb-add {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    background: transparent; color: var(--tb-acc);
    border: 2px solid var(--tb-acc); border-radius: var(--tb-sketch);
    padding: 2px 14px 3px;
    font-family: var(--tb-hand); font-weight: 700; font-size: 20px; line-height: 1.2;
    transition: background .15s, color .15s, transform .1s;
}
.tb-add i { font-size: 13px; }
.tb-add:hover { background: var(--tb-acc); color: var(--tb-on-acc); }
.tb-add:active { transform: scale(.96); }

.tb-no-result[hidden] { display: none !important; }
.tb-no-result {
    text-align: center; padding: 26px 0;
    font-family: var(--tb-hand); font-size: 22px; color: var(--tb-muted);
}
.tb-brand {
    text-align: center; padding: 26px 0 0;
    font-family: var(--tb-hand); font-size: 17px; color: var(--tb-muted); opacity: .75;
}
.dm-empty-cat { font-family: var(--tb-hand); font-size: 20px; color: var(--tb-muted); text-align: center; }

/* detay panelinde (açık zemin) kopyalanan alerjen rozetleri */
#menuDetail .tb-algs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#menuDetail .tb-algs i {
    font-style: normal; font-size: 12px; font-weight: 700; color: #333;
    background: #F1F1F3; border-radius: 999px; padding: 3px 9px;
}

/* --- Sepet çubuğu: ahşap tahta --- */
.tb-cartbar {
    position: fixed; left: calc(var(--tb-frame) + 12px); right: calc(var(--tb-frame) + 12px);
    bottom: max(calc(var(--tb-frame) + 12px), env(safe-area-inset-bottom)); z-index: 900;
}
.tb-cartbar.none { display: none; }
.tb-cartbar-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; min-height: 54px; cursor: pointer;
    color: #FFF7E8; border: 0; border-radius: 10px; padding: 0 18px;
    background:
        repeating-linear-gradient(180deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, var(--tb-wood-hi), var(--tb-wood) 60%, var(--tb-wood-lo));
    box-shadow: 0 12px 26px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
    font-family: var(--tb-hand); font-weight: 700; font-size: 22px; line-height: 1;
}
.tb-cartbar-count { font-size: 19px; opacity: .92; }
.tb-cartbar-price { font-variant-numeric: tabular-nums; }

/* --- Servis --- */
.tb-servis {
    position: fixed; inset-inline-end: calc(var(--tb-frame) + 12px); bottom: 86px; z-index: 890; cursor: pointer;
    background: rgba(30, 40, 36, .94); color: var(--tb-ink);
    border: 2px solid rgba(242, 239, 230, .8); border-radius: var(--tb-sketch);
    padding: 5px 18px 6px;
    font-family: var(--tb-hand); font-weight: 700; font-size: 21px; line-height: 1.2;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.tb-servis i { color: var(--tb-acc); font-size: 15px; }

.dm-preview-bar { bottom: 142px !important; }

@media (min-width: 640px) {
    :root { --tb-frame: 12px; }
    .tb-chips { flex-wrap: wrap; overflow-x: visible; justify-content: center; padding-inline: max(20px, calc(50% - 380px)); }
    .tb-cartbar { left: 50%; right: auto; width: min(640px, calc(100vw - 60px)); transform: translateX(-50%); }
    .tb-servis { inset-inline-end: calc(50% - 320px - 14px); }
    .tb-item-media { flex-basis: 92px; }
    .tb-item-media img { width: 84px; height: 84px; }
}
@media (max-width: 360px) {
    .tb-item-name { font-size: 23px; }
    .tb-item-price { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-chip, .tb-add { transition: none; }
}

/* dm-tema F15: tema modu karşılığı ("Açık" seçilirse) — kara tahta yerine el yazılı
   krem kâğıt; ahşap çerçeve, bant ve tebeşir el yazısı kimliği korunur. */
body.dm-alt-light {
    --tb-board: #F3EFE6;
    --tb-board-2: #E9E3D6;
    --tb-ink: #26241F;
    --tb-muted: #5C584E;
    --tb-line: rgba(38, 36, 31, .3);
    --tb-acc2: var(--theme-accent-light-1, #7A5A12);
    --tb-acc: var(--theme-accent-dark-1, #7A5A12);
    --tb-on-acc: var(--theme-on-accent-dark, #fff);
    background-color: #F3EFE6;
}
html:has(> body.dm-alt-light) { background-color: #F3EFE6; }
body.dm-alt-light :is(.tb-logo-ring, .tb-pill) { border-color: rgba(38, 36, 31, .7); }
body.dm-alt-light .tb-chip:not(.active) { border-color: rgba(38, 36, 31, .45); }
body.dm-alt-light .tb-lang-menu .dropdown-item:hover { background: rgba(38, 36, 31, .06); }
body.dm-alt-light .tb-subhead { text-decoration-color: rgba(38, 36, 31, .3); }
body.dm-alt-light .tb-item + .tb-item { border-top-color: rgba(38, 36, 31, .14); }
body.dm-alt-light .tb-leader { border-bottom-color: rgba(38, 36, 31, .4); }
body.dm-alt-light .tb-item-type { border-color: rgba(38, 36, 31, .5); }
body.dm-alt-light .tb-item-type.veg { color: #2F7D33; }
body.dm-alt-light .tb-item-type.nonveg { color: #C2412D; }
body.dm-alt-light .tb-body .tb-algs i { border-color: rgba(38, 36, 31, .45); }
body.dm-alt-light .tb-servis { background: rgba(243, 239, 230, .96); border-color: rgba(38, 36, 31, .75); }
body.dm-alt-light .tb-name { text-shadow: none; }