:root {
  --font-family: Arial, Helvetica, sans-serif;
  --font-scale: 1;
  --blue:       #76b5b9;
  --blue-dark:  #518d92;
  --blue-faint: rgba(118,181,185,.10);
  --green:      #b3c274;
  --gray:       #707070;
  --cream:      #f7f5f2;
  --white:      #ffffff;
  --border:     #e5dfd6;
  --border-mid: #cfc9bf;
  --text:       #1c1c1a;
  --text-muted: #8a837a;
  --shadow-sm:  0 2px 8px rgba(0,0,0,.05);
  --shadow-md:  0 8px 32px rgba(0,0,0,.10);
  --radius:     14px;
}

body.access-high-contrast {
  --blue: #004c6d;
  --blue-dark: #000000;
  --blue-faint: rgba(0,0,0,.10);
  --green: #445500;
  --gray: #111111;
  --cream: #ffffff;
  --white: #ffffff;
  --border: #000000;
  --border-mid: #000000;
  --text: #000000;
  --text-muted: #111111;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.18);
  --shadow-md: 0 8px 32px rgba(0,0,0,.25);
}

body.access-color-blind {
  --blue: #005a9c;
  --blue-dark: #003f6f;
  --blue-faint: rgba(0,90,156,.12);
  --green: #8a6f00;
  --gray: #4a4a4a;
  --text-muted: #555555;
}

body.access-soft-contrast {
  --blue: #4f8185;
  --blue-dark: #3e686c;
  --blue-faint: rgba(79,129,133,.12);
  --green: #87945a;
  --gray: #5f5a54;
  --cream: #eee9df;
  --white: #fbf8f1;
  --border: #d2cabd;
  --border-mid: #bdb4a7;
  --text: #1f1d1a;
  --text-muted: #5f5a54;
}

*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0}
html {scroll-behavior: smooth; -webkit-tap-highlight-color: transparent}
body {font-family: var(--font-family);font-size: calc(15px * var(--font-scale));line-height: 1.5;background: #f7f5f2;color: #1c1c1a;min-height: 100vh;-webkit-font-smoothing: antialiased;padding-bottom: 70px}
ul.none {list-style: none; padding: 0; margin: 0}
.hide   {display: none}
button, input, select {font: inherit}
button, select {color: inherit}

/* Hero */
.menu-hero {background: var(--white);padding: 44px 24px 30px;text-align: center;border-bottom: 1px solid var(--border);position: relative;overflow: hidden}
.menu-hero::before {content: '';position: absolute;inset: 0;background:radial-gradient(ellipse 70% 60% at 50% -10%, rgba(118,181,185,.12) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 90% 110%, rgba(179,194,116,.08) 0%, transparent 60%);pointer-events: none}
.menu-hero img {position: relative;width: 88px;height: 88px;border-radius: 50%;object-fit: cover;border: 3px solid var(--white);outline: 2px solid var(--border);margin-bottom: 18px;box-shadow: var(--shadow-md)}
.menu-hero h1 {position: relative;font-size: calc(2.1rem * var(--font-scale));font-weight: bold;letter-spacing: .01em;line-height: 1.15;color: var(--text);margin-bottom: 6px}
.menu-hero > p {position: relative;font-size: calc(13px * var(--font-scale));color: var(--text-muted);font-weight: normal;margin-bottom: 22px}

/* Arama alanı */
.search-label {position: absolute;width: 1px; height: 1px;overflow: hidden; clip: rect(0,0,0,0)}
.menu-search {position: relative;display: block;width: 100%;max-width: 380px;margin: 0 auto;height: 44px;border: 1.5px solid var(--border);border-radius: 22px;padding: 0 18px 0 44px;font-size: calc(13.5px * var(--font-scale));color: var(--text);background-color: var(--cream);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23b3aca4' stroke-width='2'/%3E%3Cpath d='m20 20-3.5-3.5' stroke='%23b3aca4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: 15px center;outline: none;transition: border-color .2s, box-shadow .2s, background-color .2s;appearance: none; -webkit-appearance: none}
.menu-search:focus {border-color: var(--blue);background-color: var(--white);box-shadow: 0 0 0 3px rgba(118,181,185,.20)}
.menu-search::placeholder {color: var(--text-muted)}

/* Yatay kategori listesi */
.category-tabs {position: sticky;top: 0;z-index: 100;display: flex;gap: 7px;padding: 10px 16px;background: var(--white);border-bottom: 1px solid var(--border);overflow-x: auto;scrollbar-width: none;-webkit-overflow-scrolling: touch;box-shadow: var(--shadow-sm)}
.category-tabs::-webkit-scrollbar {display: none}
.tab-btn {flex-shrink: 0;height: 34px;padding: 0 13px;border: 1.5px solid var(--border);border-radius: 17px;background: transparent;font-size: calc(12.5px * var(--font-scale));font-weight: bold;color: var(--gray);cursor: pointer;white-space: nowrap;transition: border-color .18s, color .18s, background .18s, box-shadow .18s;display: inline-flex;align-items: center;gap: 5px}
.tab-btn:hover {border-color: var(--blue);color: var(--blue-dark)}
.tab-btn.active {background: var(--blue);border-color: var(--blue);color: var(--white);font-weight: bold;box-shadow: 0 2px 10px rgba(118,181,185,.35)}

.menu-list {padding-bottom: 132px}

/* kategoriler */
#menuList > li[data-menuid] {padding-top: 4px}
#menuList > li[data-menuid] + li[data-menuid] {margin-top: 4px}
.category {display: flex;align-items: center;gap: 10px;padding: 26px 20px 11px;font-size: calc(1.45rem * var(--font-scale));font-weight: bold;color: var(--text);letter-spacing: .01em;border-bottom: 1.5px solid var(--text);margin: 0 20px 0}
.category::before {content: '';flex-shrink: 0;display: inline-block;width: 7px;height: 7px;border-radius: 50%;background: var(--blue)}

/* ürün bilgisi */
li[data-productid] {
  display: grid;grid-template-columns: 1fr auto;
  grid-template-areas:
    "product   price"
    "labels    price"
    "desc      btns";
column-gap: 14px;row-gap: 3px;padding: 15px 20px;border-bottom: 1px solid var(--border);transition: background .15s;align-items: start}
li[data-productid]:last-child {border-bottom: none}
li[data-productid]:hover {background: rgba(118,181,185,.04)}
	/* ürün grid */
.product    {grid-area: product}
.labels     {grid-area: labels;  margin-top: 2px}
.desc_short {grid-area: desc;    margin-top: 2px}
.price      {grid-area: price;   align-self: center}
.buttons    {grid-area: btns;    align-self: end; display: flex; justify-content: flex-end}

.product a {font-weight: bold;font-size: calc(14.5px * var(--font-scale));color: var(--text);text-decoration: none;transition: color .15s;line-height: 1.35}
.product a:hover {color: var(--blue-dark)}
.labels {display: flex;flex-wrap: wrap;gap: 4px}
.label {display: inline-block;font-size: calc(10.5px * var(--font-scale));font-weight: bold;letter-spacing: .03em;padding: 2px 8px;border-radius: 10px;background: rgba(118,181,185,.12);color: var(--blue-dark)}
.desc_short {font-size: calc(12px * var(--font-scale));color: var(--text-muted);font-weight: normal;line-height: 1.45}
.price {font-size: calc(1.15rem * var(--font-scale));font-weight: bold;color: var(--blue-dark);white-space: nowrap;letter-spacing: -.01em;line-height: 1;text-align: right}
.pImage {width: 100%;aspect-ratio: 16 / 9;overflow: hidden;margin-bottom: 16px}
.pImage img {width: 100%;height: auto;aspect-ratio: 16 / 9;object-fit: cover}
	/* Detay tuşu - Kalmalı mı */
.btn {display: inline-flex;align-items: center;justify-content: center;width: 28px;height: 28px;border-radius: 50%;background: var(--cream);border: 1px solid var(--border);font-size: calc(13px * var(--font-scale));text-decoration: none;cursor: pointer;transition: background .18s, border-color .18s, transform .15s;line-height: 1}
.btn:hover {background: var(--blue-faint);border-color: var(--blue);transform: scale(1.1)}

/* Detay balonu */
.modal {position: fixed;inset: 0;z-index: 1000;display: flex;align-items: flex-end;justify-content: center}
.modal[hidden] {display: none}
.modal-backdrop {position: absolute;inset: 0;background: rgba(20,18,16,.50);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px)}
.modal-panel {position: relative;width: 100%;max-width: 540px;background: var(--white);border-radius: 22px 22px 0 0;padding: 10px 24px 44px;max-height: 88vh;overflow-y: auto;scrollbar-width: thin;scrollbar-color: var(--border) transparent;animation: slideUp .28s cubic-bezier(.22,.61,.36,1)}
.modal-panel::-webkit-scrollbar {width: 4px}
.modal-panel::-webkit-scrollbar-thumb {background: var(--border); border-radius: 2px}
	@keyframes slideUp {from {transform: translateY(60px); opacity: 0} to {transform: translateY(0);opacity: 1}}
.modal-panel::before {content: '';display: block;width: 36px;height: 4px;border-radius: 2px;background: var(--border);margin: 12px auto 22px}
.modal-close {position: absolute;top: 22px; right: 20px;width: 30px; height: 30px;border: 1px solid var(--border);border-radius: 50%;background: var(--cream);font-size: calc(17px * var(--font-scale));line-height: 1;cursor: pointer;display: flex; align-items: center; justify-content: center;color: var(--gray);transition: background .15s, border-color .15s}
.modal-close:hover {background: var(--border); border-color: var(--border-mid)}
#modalTitle {font-size: calc(1.75rem * var(--font-scale));font-weight: bold;color: var(--text);line-height: 1.2;padding-right: 36px;margin-bottom: 14px}
.modal-labels {display: flex;flex-wrap: wrap;gap: 6px;margin-bottom: 16px}
.modal-detail {font-size: calc(14px * var(--font-scale));line-height: 1.7;color: var(--text-muted);font-weight: normal;margin-bottom: 22px}
.modal-price {font-size: calc(2rem * var(--font-scale));font-weight: bold;color: var(--blue-dark);padding-top: 18px;border-top: 1px solid var(--border);letter-spacing: -.01em}
	/* Görsel gelince bakacağız */
body.modal-open {overflow: hidden} /* auto */

/* Arama */
.no-result {padding: 48px 20px;text-align: center;font-size: calc(14px * var(--font-scale));color: var(--text-muted);display: none}
.no-result.visible {display: block}
.search-loader {position: fixed;inset: 0;z-index: 1100;display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 12px;background: rgba(247,245,242,.68);color: var(--text);font-weight: bold;backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px)}
.search-loader[hidden] {display: none}
.search-loader-spinner {width: 42px;height: 42px;border: 4px solid var(--border);border-top-color: var(--blue-dark);border-radius: 50%;animation: searchSpin .75s linear infinite}
	@keyframes searchSpin {to {transform: rotate(360deg)}}

/* Erişilebilirlik */
.bottom-tools {position: fixed;left: 0;bottom: 0;z-index: 900;display: inline-flex;align-items: center;justify-content: center;gap: 8px;width: 100%;padding: 8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));background: var(--white);border: 1px solid var(--border);box-shadow: 0 -8px 26px rgba(0, 0, 0, .10)}
.tool-btn,.drawer-category-btn,.settings-option {min-height: 44px;border: 1.5px solid var(--border);border-radius: 14px;background: var(--cream);color: var(--text);cursor: pointer}
.tool-btn {flex: 0 0 auto;display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;padding: 0;font-weight: bold;white-space: nowrap}
.tool-icon svg {display: block;width: 1.2em;height: 1.2em;fill: currentColor}
.tool-icon {display: inline-flex;align-items: center;justify-content: center;font-size: calc(22px * var(--font-scale));line-height: 1}

.tool-btn:focus-visible,
.drawer-category-btn:focus-visible,
.settings-option:focus-visible,
.modal-close:focus-visible,
.drawer-close:focus-visible,
.tab-btn:focus-visible,
.btn:focus-visible,
.product a:focus-visible,
.menu-search:focus-visible {outline: 3px solid var(--blue-dark);outline-offset: 2px}

.category-drawer {position: fixed;inset: 0;z-index: 950;display: flex;align-items: flex-end;justify-content: center}
.category-drawer[hidden] {display: none}
.drawer-backdrop {position: absolute;inset: 0;background: rgba(20,18,16,.48);backdrop-filter: blur(3px);-webkit-backdrop-filter: blur(3px)}
.drawer-panel {position: relative;width: 100%;max-width: 540px;max-height: 82vh;overflow-y: auto;background: var(--white);color: var(--text);border-radius: 22px 22px 0 0;padding: 22px 18px calc(24px + env(safe-area-inset-bottom));box-shadow: var(--shadow-md);animation: slideUp .22s cubic-bezier(.22,.61,.36,1)}
.drawer-panel h2 {padding-right: 42px;margin-bottom: 16px;font-size: calc(1.35rem * var(--font-scale));font-weight: bold}
.drawer-close {position: absolute;top: 16px;right: 16px;width: 34px;height: 34px;border: 1px solid var(--border);border-radius: 50%;background: var(--cream);color: var(--gray);cursor: pointer;font-size: calc(20px * var(--font-scale));line-height: 1}
.drawer-category-list {display: grid;grid-template-columns: 1fr;gap: 8px}
.drawer-category-btn {display: flex;align-items: center;justify-content: flex-start;width: 100%;padding: 0 14px;text-align: left;font-weight: bold}
.drawer-category-btn.active {background: var(--blue);border-color: var(--blue);color: var(--white)}
body.category-menu-open {overflow: hidden}

.settings-menu {position: fixed;left: 50%;bottom: calc(78px + env(safe-area-inset-bottom));z-index: 920;width: min(360px, calc(100% - 24px));transform: translateX(-50%)}
.settings-menu[hidden] {display: none}
.settings-panel {background: var(--white);color: var(--text);border: 1px solid var(--border);border-radius: 18px;padding: 14px;box-shadow: var(--shadow-md)}
.settings-panel h2 {margin-bottom: 10px;font-size: calc(1rem * var(--font-scale));font-weight: bold}
.settings-option {display: flex;align-items: center;justify-content: space-between;width: 100%;margin-top: 8px;padding: 0 12px;text-align: left;font-weight: bold}
.settings-option.active {background: var(--blue);border-color: var(--blue);color: var(--white)}
.settings-option.reset {justify-content: center;margin-top: 12px}
.settings-check {display: none;margin-left: 12px;font-size: calc(16px * var(--font-scale));line-height: 1}
.settings-option.active .settings-check {display: inline}


@media (min-width: 640px) {
	.modal-panel {border-radius: 22px; margin-bottom: 24px; max-height: 80vh}
	.modal {align-items: center}
	.drawer-panel {border-radius: 22px; margin-bottom: 24px}
	.category-drawer {align-items: center}
}

@media (min-width: 480px) {
	.menu-hero {padding: 52px 40px 36px}
	.menu-hero h1 {font-size: calc(2.5rem * var(--font-scale))}
	li[data-productid] {padding: 16px 28px}
	.category {padding: 30px 28px 12px; margin: 0 28px}
}

@media (min-width: 520px) {
	.drawer-category-list {grid-template-columns: 1fr 1fr}
}