/* eyp-qr studio 2a395495c19a */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-latin-400-normal.3b646991d300.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-latin-500-normal.0717336fb31f.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-latin-600-normal.8960851d691c.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-latin-ext-400-normal.c93d2a12aaa2.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-latin-ext-500-normal.2846035d8510.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-latin-ext-600-normal.b25dfd4f979e.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-arabic-arabic-400-normal.6010e7fd0dce.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-arabic-arabic-600-normal.16734a5adb27.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

/* QR menu prototype — core/shared.css
   Stage, root and overlay base + shared guest parts (qs-*) + core layers (Masam, filter).
   Only CONTRACT §4 variables (--qr-*); logical properties only (RTL is automatic). */

/* ---------- guest page (?view=guest): the stage fills the window ---------- */
.qs-page { position: fixed; inset: 0; margin: 0; background: #fff; }

/* ---------- stage ---------- */
.qr-stage {
  position: relative; overflow: hidden; width: 100%; height: 100%;
  container-type: size; container-name: stage;
  box-sizing: border-box; direction: ltr;
}
.qr-stage *, .qr-stage *::before, .qr-stage *::after { box-sizing: border-box; }
.qr-stage [hidden] { display: none !important; }
.qr-stage[data-motion="reduced"], .qr-stage[data-motion="reduced"] *,
.qr-stage[data-motion="reduced"] *::before, .qr-stage[data-motion="reduced"] *::after {
  transition-duration: 0s !important; transition-delay: 0s !important;
  animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}

/* Programmatic moves (goTo, QRTest, position restore) are instant: the core sets data-qr-instant on the stage only
   for the duration of the call. Infinite decorative loops keep their iteration count (only durations go to 0). */
.qr-stage[data-qr-instant] .qr-root, .qr-stage[data-qr-instant] .qr-root *,
.qr-stage[data-qr-instant] .qr-root *::before, .qr-stage[data-qr-instant] .qr-root *::after,
.qr-stage[data-qr-instant] .qr-overlay, .qr-stage[data-qr-instant] .qr-overlay *,
.qr-stage[data-qr-instant] .qr-overlay *::before, .qr-stage[data-qr-instant] .qr-overlay *::after {
  transition-duration: 0s !important; transition-delay: 0s !important;
  animation-duration: 0s !important; animation-delay: 0s !important;
  scroll-behavior: auto !important;
}

.qr-root {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--qr-bg); color: var(--qr-ink);
  font-family: var(--qr-font-body); font-size: 16px; line-height: 1.4;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.qr-overlay {
  position: absolute; inset: 0; z-index: 50;
  color: var(--qr-ink); font-family: var(--qr-font-body); font-size: 16px; line-height: 1.4;
}

/* Thumbnail frame (QR.guest.thumbnail): a 390×844 stage scaled into the card. */
.qs-thumb-frame { position: relative; width: 100%; aspect-ratio: 390 / 844; overflow: hidden; pointer-events: none; user-select: none; }
.qs-thumb-frame > .qr-stage { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 390px; height: 844px; transform-origin: 0 0; }

/* ---------- icons ---------- */
.qs-icon { inline-size: 24px; block-size: 24px; flex: none; display: inline-block; vertical-align: middle; }
[dir="rtl"] .qs-icon[data-icon="chevron"], [dir="rtl"] .qs-icon[data-icon="back"] { transform: scaleX(-1); }

/* ---------- names, prices, flags ---------- */
.qs-name { font-size: max(14px, 1em); overflow-wrap: break-word; word-break: normal; min-width: 0; }
.qs-price {
  display: inline-block; white-space: nowrap; unicode-bidi: isolate;
  font-size: max(14px, 1em); font-variant-numeric: tabular-nums; color: var(--qr-price); font-weight: 600;
}
.qs-price__cur, .qs-price__unit { font-weight: 400; font-size: .86em; color: var(--qr-ink-2); }
/* "85 AED": the currency span starts with a no-break space (see figure() in shared.js).
   Template margins on the currency are neutralised so the gap is never doubled. */
.qr-stage .qs-price > .qs-price__cur { margin-inline: 0 !important; }
.qs-price__each { font-weight: 400; font-size: .86em; color: var(--qr-ink-2); }
/* unitBreak: the unit drops under the figure and never widens it */
.qs-price--break { display: inline-flex; flex-wrap: wrap; align-items: baseline; text-align: end; justify-content: flex-end; white-space: normal; }
.qs-price--break .qs-price__num, .qs-price--break .qs-price__cur, .qs-price--break .qs-price__each { white-space: nowrap; }
.qs-price--break .qs-price__unit { flex-basis: 100%; inline-size: 0; min-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.3; }
.qs-price--out .qs-price__num { text-decoration: line-through; text-decoration-thickness: 2px; }
.qs-flags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.qs-flag {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.5; font-weight: 600;
  border: 1px solid var(--qr-line); color: var(--qr-ink); background: var(--qr-surface);
}
.qs-flag--out { border-color: var(--qr-ink-2); }
.qs-flag--chef { background: var(--qr-accent); color: var(--qr-on-accent); border-color: var(--qr-accent); }

/* ---------- photo ---------- */
.qs-photo { position: relative; display: block; overflow: hidden; background: var(--qr-line); inline-size: 100%; aspect-ratio: 4 / 3; }
.qs-photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; filter: var(--qs-tone-filter, brightness(1)) var(--qs-bright, brightness(1)); }
/* Photo tones. Root tone (data-tone, from view.ui.tone) sets both variables; an item tone (data-qs-tone on the box)
   overrides only --qs-tone-filter for that photo. Section media (video / poster) follows the root tone only. */
[data-tone="dogal"], [data-qs-tone="dogal"] { --qs-tone-filter: brightness(1); }
[data-tone="sicak"], [data-qs-tone="sicak"] { --qs-tone-filter: sepia(.16) saturate(1.12) brightness(1.02); }
[data-tone="serin"], [data-qs-tone="serin"] { --qs-tone-filter: hue-rotate(-8deg) saturate(.92) brightness(1.02); }
[data-tone="canli"], [data-qs-tone="canli"] { --qs-tone-filter: saturate(1.28) contrast(1.06); }
[data-tone="mat"], [data-qs-tone="mat"] { --qs-tone-filter: saturate(.82) contrast(.92) brightness(1.03); }
[data-tone="sb"], [data-qs-tone="sb"] { --qs-tone-filter: grayscale(1) contrast(1.05); }
.qr-root[data-tone] { --qs-root-tone: var(--qs-tone-filter); }
.qr-root video, .qr-root .qs-media, .qr-root [data-qs-media] { filter: var(--qs-root-tone, none); }
.qs-photo--thumb {
  inline-size: calc(72px * var(--qr-thumb-scale, 1)); flex: none;
  border-radius: var(--qr-thumb-radius, 12px); aspect-ratio: 1 / 1;
}
.qs-photo--card { border-radius: calc(var(--qr-thumb-radius, 12px) / 2); }
.qs-photo--hero { border-radius: 0; }

/* ---------- buttons ---------- */
.qs-btn, .qs-iconbtn, .qs-pick, .qs-lang__btn, .qs-chip, .qs-link, .qs-result {
  font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.qs-btn, .qs-iconbtn, .qs-pick, .qs-lang__btn, .qs-chip, .qs-link, .qs-result, .qs-input {
  min-block-size: 44px;
}
.qs-btn:focus-visible, .qs-iconbtn:focus-visible, .qs-pick:focus-visible, .qs-lang__btn:focus-visible,
.qs-chip:focus-visible, .qs-link:focus-visible, .qs-result:focus-visible, .qs-input:focus-visible, .qs-layer__title:focus-visible {
  outline: 2px solid var(--qr-accent); outline-offset: 2px;
}
.qs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding-block: 0; padding-inline: 14px; border-radius: 999px;
  border: 1px solid var(--qr-line); background: var(--qr-surface); color: var(--qr-ink);
  font-size: 15px; font-weight: 600; white-space: nowrap;
}
.qs-btn[disabled] { opacity: .5; cursor: default; }
.qs-btn[aria-pressed="true"] { border-color: var(--qr-accent); }
.qs-btn--primary { background: var(--qr-accent); color: var(--qr-on-accent); border-color: var(--qr-accent); }
.qs-btn--wide { inline-size: 100%; }
.qs-count {
  min-inline-size: 22px; block-size: 22px; padding-inline: 6px; border-radius: 999px;
  background: var(--qr-accent); color: var(--qr-on-accent); font-size: 13px; line-height: 22px; text-align: center;
}
.qs-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  inline-size: 44px; block-size: 44px; padding: 0; border-radius: 999px;
  border: 1px solid var(--qr-line); background: var(--qr-surface); color: var(--qr-ink);
}

.qs-pick {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  min-inline-size: 44px; block-size: 44px; padding: 0; border-radius: 999px;
  border: 1px solid var(--qr-line); background: var(--qr-surface); color: var(--qr-ink);
}
.qs-pick[aria-pressed="true"] { background: var(--qr-accent); color: var(--qr-on-accent); border-color: var(--qr-accent); }
.qs-pick--label { padding-inline: 16px; font-size: 15px; font-weight: 600; }

.qs-lang { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid var(--qr-line); background: var(--qr-surface); }
.qs-lang__btn {
  min-inline-size: 44px; padding-inline: 8px; border: 0; border-radius: 999px; background: transparent;
  color: var(--qr-ink-2); font-size: 14px; font-weight: 600;
}
.qs-lang__btn[aria-pressed="true"] { background: var(--qr-accent); color: var(--qr-on-accent); }

.qs-link {
  display: inline-flex; align-items: center; padding-inline: 14px; border-radius: 999px;
  border: 1px solid var(--qr-line); color: var(--qr-ink); text-decoration: none; font-weight: 600; font-size: 15px;
}

/* ---------- search result row ---------- */
.qs-result {
  display: flex; align-items: center; gap: 12px; inline-size: 100%; text-align: start;
  padding-block: 8px; padding-inline: 12px; border: 0; border-block-end: 1px solid var(--qr-line); background: transparent;
}
.qs-result .qs-photo--thumb { inline-size: 48px; }
.qs-result__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.qs-result__where { font-size: 13px; color: var(--qr-ink-2); }

/* ---------- allergen block + detail ---------- */
.qs-allergen { padding-block: 12px; padding-inline: 14px; border-radius: 12px; background: var(--qr-surface); border: 1px solid var(--qr-line); }
.qs-allergen p { margin: 0; }
.qs-allergen p + p { margin-block-start: 4px; }
.qs-allergen__by { font-weight: 600; }
.qs-allergen__unknown { display: flex; align-items: flex-start; gap: 8px; color: var(--qr-ink); }
.qs-allergen__unknown .qs-icon { color: var(--qr-ink-2); }

.qs-detail { display: flex; flex-direction: column; gap: 12px; color: var(--qr-ink); min-width: 0; }
.qs-detail > * { margin: 0; }
.qs-detail .qs-photo--hero { border-radius: 12px; }
.qs-detail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.qs-detail__name { margin: 0; font-family: var(--qr-font-display); font-size: 24px; line-height: 1.2; font-weight: 600; }
.qs-detail__head .qs-price { font-size: 20px; }
.qs-detail__label { color: var(--qr-ink-2); }
.qs-detail__desc { color: var(--qr-ink); }
.qs-detail__note { color: var(--qr-ink-2); font-size: 15px; }
.qs-detail .qs-pick--label { align-self: flex-start; }

/* ---------- allergen icons, row info, nutrition table (00 §7.105–106) ---------- */
/* the icon pack's symbols are imported here by core/shared.js; the filled pack's inner details are cut out with the page colour */
.qs-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.qs-sprite .k { stroke: var(--qr-bg, #fff); }
.qs-als { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-inline-size: 0; max-inline-size: 100%; }
.qs-al, .qs-al-more { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 24px; block-size: 24px; color: var(--qr-ink); }
.qs-al { border: 1.5px solid currentColor; border-radius: 7px; }
.qs-al--trace { border-style: dashed; }
.qs-al__svg { display: block; inline-size: 16px; block-size: 16px; }
.qs-al--unknown { color: var(--qr-ink-2); border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1; }
.qs-al--txt { inline-size: auto; block-size: auto; min-block-size: 22px; max-inline-size: 100%; padding-inline: 8px; border-radius: 999px; font-size: 12px; line-height: 1.4; font-weight: 600; }
.qs-al__txt { overflow-wrap: anywhere; }
.qs-al-more { inline-size: auto; padding-inline: 4px; font-size: 12px; font-weight: 700; color: var(--qr-ink-2); }
.qs-als__tip { flex-basis: 100%; font-size: 12px; line-height: 1.3; color: var(--qr-ink-2); }
.qs-als--detail .qs-al:not(.qs-al--txt) { inline-size: 32px; block-size: 32px; border-radius: 9px; }
.qs-als--detail .qs-al__svg { inline-size: 22px; block-size: 22px; }
.qs-allergen__line { display: flex; align-items: flex-start; gap: 10px; }
.qs-allergen__line .qs-als { flex: 0 1 auto; max-inline-size: 60%; }
.qs-allergen__text { flex: 1 1 0; min-inline-size: 0; overflow-wrap: anywhere; align-self: center; }
.qs-it__info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-inline-size: 0; max-inline-size: 100%; margin-block-start: 4px; }
.qs-it__kcal { font-size: 13px; line-height: 1.3; color: var(--qr-ink-2); white-space: nowrap; }
.qs-nutri { padding-block: 12px; padding-inline: 14px; border-radius: 12px; background: var(--qr-surface); border: 1px solid var(--qr-line); }
.qs-nutri__head, .qs-nutri__note, .qs-nutri__approx { margin: 0; }
.qs-nutri__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-weight: 600; }
.qs-nutri__basis { font-weight: 400; color: var(--qr-ink-2); }
.qs-nutri__list { display: block; margin: 8px 0 0; padding: 0; }
.qs-nutri__row { display: flex; justify-content: space-between; gap: 12px; padding-block: 6px; border-block-start: 1px solid var(--qr-line); }
.qs-nutri__row dt, .qs-nutri__row dd { margin: 0; }
.qs-nutri__row dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.qs-nutri__note, .qs-nutri__approx { margin-block-start: 6px; font-size: 13px; color: var(--qr-ink-2); }

/* ---------- venue + footer ---------- */
.qs-venue { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; background: var(--qr-surface); border: 1px solid var(--qr-line); }
.qs-venue > * { margin: 0; }
.qs-venue__title { font-family: var(--qr-font-display); font-size: 20px; }
.qs-venue__links { display: flex; flex-wrap: wrap; gap: 8px; }
/* inside the "Mekân" layer the layer is the card: no second frame */
.qs-layer .qs-venue { padding: 0; border: 0; border-radius: 0; background: transparent; }
.qs-logo { display: block; max-inline-size: 100%; block-size: auto; object-fit: contain; }
.qs-savenote { font-size: 13px; color: var(--qr-ink-2); }
.qs-footer { display: flex; flex-direction: column; gap: 6px; padding-block: 20px; color: var(--qr-ink-2); font-size: 14px; }
.qs-footer > p { margin: 0; }
.qs-footer__sign { font-size: 13px; letter-spacing: .02em; }
.qs-stale {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--qr-accent); color: var(--qr-ink); background: var(--qr-surface); font-weight: 600;
}
.qs-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.qs-share__btn { min-block-size: 44px; }
.qs-share__note { color: var(--qr-ink-2); font-size: 14px; }
.qs-empty-menu { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; text-align: center; color: var(--qr-ink); }
.qs-empty-menu__name { margin: 0; font-family: var(--qr-font-display); font-size: 24px; line-height: 1.2; }
.qs-empty-menu__note { margin: 0; color: var(--qr-ink-2); }

/* ---------- filter marks on template items (template sets data-qr-fit) ---------- */
.qr-stage[data-qs-filter="on"] .qr-root [data-qr-item][data-qr-fit="no"] { opacity: .38; }
.qr-stage[data-qs-filter="on"] .qr-root [data-qr-item][data-qr-fit="unknown"] { position: relative; }
.qr-stage[data-qs-filter="on"] .qr-root [data-qr-item][data-qr-fit="unknown"]::after {
  content: var(--qs-unknown-label, "?"); position: absolute; z-index: 1; pointer-events: none;
  inset-block-start: 2px; inset-inline-end: 4px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; line-height: 18px; font-weight: 600; white-space: nowrap;
  background: var(--qr-surface); color: var(--qr-ink-2); border: 1px dashed var(--qr-ink-2);
}

/* ---------- core layers ---------- */
.qs-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.qs-layer {
  position: absolute; inset-inline: 0; inset-block-end: 0; max-block-size: 88%;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--qr-bg); color: var(--qr-ink);
  border-start-start-radius: 18px; border-start-end-radius: 18px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
}
.qs-layer--enter { animation: qs-rise .2s ease-out; }
@keyframes qs-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@container stage (min-width: 700px) {
  .qs-layer {
    inset-block-end: auto; inset-block-start: 50%; inset-inline-start: 50%; inline-size: min(520px, 90%); max-block-size: 80%;
    transform: translate(-50%, -50%); border-radius: 18px;
  }
  [dir="rtl"] .qs-layer { transform: translate(50%, -50%); }
  .qs-layer--enter { animation: none; }
}
.qs-layer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 12px; padding-inline: 16px; border-block-end: 1px solid var(--qr-line);
}
.qs-layer__title { margin: 0; font-family: var(--qr-font-display); font-size: 20px; font-weight: 600; }
.qs-layer__body { overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.qs-layer__body > p { margin: 0; }
.qs-note, .qs-empty { color: var(--qr-ink-2); }
.qs-table { font-weight: 600; }
.qs-actions { display: flex; flex-direction: column; gap: 8px; }

.qs-mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.qs-mrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "flags qty";
  align-items: center; column-gap: 12px; row-gap: 4px; padding-block: 10px; border-block-end: 1px solid var(--qr-line);
}
/* K12: the first line carries name and price on one baseline; a long name wraps beside the price, which keeps the line's end */
.qs-mrow__name { grid-area: name; align-self: baseline; display: block; min-width: 0; }
.qs-mrow > .qs-price { grid-area: price; justify-self: end; align-self: baseline; }
.qs-mrow__flags { grid-area: flags; align-self: center; min-width: 0; }
.qs-qty { grid-area: qty; display: inline-flex; align-items: center; gap: 6px; justify-self: end; }
.qs-qty__n { min-inline-size: 24px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.qs-is-out .qs-name, .qs-is-out .qs-staff__name, .qs-is-out .qs-staff__qty { text-decoration: line-through; color: var(--qr-ink-2); }
.qs-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 18px; }

.qs-notorder { padding: 12px 14px; border-radius: 12px; background: var(--qr-surface); border: 2px solid var(--qr-accent); font-weight: 700; }
.qs-staff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qs-staff__row { display: flex; gap: 12px; align-items: baseline; font-size: 26px; line-height: 1.2; font-weight: 600; }
.qs-staff__qty { flex: none; font-variant-numeric: tabular-nums; }
.qs-staff__name { min-width: 0; overflow-wrap: anywhere; }

.qs-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.qs-legend { display: block; padding: 0; margin-block-end: 8px; font-weight: 600; }
.qs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qs-chip {
  padding-inline: 14px; border-radius: 999px; border: 1px solid var(--qr-line); background: var(--qr-surface);
  color: var(--qr-ink); font-size: 15px;
}
.qs-chip[aria-pressed="true"] { background: var(--qr-ink); color: var(--qr-bg); border-color: var(--qr-ink); }
.qs-field__row { display: flex; align-items: center; gap: 8px; }
.qs-input {
  inline-size: 9em; max-inline-size: 100%; padding-inline: 12px; border-radius: 10px; border: 1px solid var(--qr-line);
  background: var(--qr-surface); color: var(--qr-ink); font: inherit;
}
.qs-field__suffix { color: var(--qr-ink-2); }

/* ---------- section body (.qs-body, 04 §3): yalin · kucuk · izgara · vitrin ----------
   Characters a template may set on its .qr-root (all optional, none is defined here): --qs-name-font, --qs-name-size, --qs-name-weight,
   --qs-lead (leader line, e.g. 1px dotted var(--qr-line)), --qs-row-rule, --qs-gap, --qs-pad, --qs-card-min, --qs-card-bg, --qs-hero-ratio,
   --qs-radius, and .qs-grp__name. Colour and typeface come from the theme's --qr-* variables; nothing free here. */
.qs-body { --qs-g: var(--qs-gap, calc(12px * var(--qr-density, 1))); --qs-p: var(--qs-pad, calc(12px * var(--qr-density, 1))); --qs-r: var(--qs-radius, var(--qr-radius, 12px)); min-width: 0; }
.qs-body ul { list-style: none; margin: 0; padding: 0; }
.qs-sched { margin: 0; margin-block-end: var(--qs-g); font-size: 14px; font-weight: 600; color: var(--qr-ink-2); overflow-wrap: break-word; }

/* the product element: a row (yalin, kucuk, option) or a card (izgara, hero) */
.qs-it { position: relative; min-width: 0; }
.qs-it__open {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; inline-size: 100%; padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.qs-it__open:focus-visible { outline: 2px solid var(--qr-accent); outline-offset: -2px; }
.qs-it__text { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.qs-it__pic { grid-column: 2; grid-row: 1; margin-inline-start: 12px; min-width: 0; }
.qs-it__pic .qs-photo--thumb { inline-size: calc(64px * var(--qr-thumb-scale, 1)); }
/* name · leader · price on one grid line: the name starts at the line's start edge and wraps (never indented), the price keeps the line's end
   and sits beside the name's first line. Grid columns follow the row's direction, so no price margin is needed in RTL. */
.qs-it__line { align-self: stretch; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto; align-items: first baseline; column-gap: 8px; min-width: 0; }
.qs-it__line > .qs-name { grid-column: 1; }
.qs-it__line > .qs-it__lead { grid-column: 2; }
.qs-it__line > .qs-price { grid-column: 3; }
.qs-it__line .qs-name { font-family: var(--qs-name-font, var(--qr-font-display)); font-size: var(--qs-name-size, 17px); font-weight: var(--qs-name-weight, 600); line-height: 1.25; }
.qs-it__lead { min-inline-size: 0; margin-block-end: .3em; border-block-end: var(--qs-lead, none); }
.qs-it__desc {
  font-size: 14px; line-height: 1.35; color: var(--qr-ink-2); overflow-wrap: break-word; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-desc="tam"] .qs-it__desc { display: block; overflow: visible; }
[data-desc="gizli"] .qs-it__desc { display: none; }
.qs-it__text > .qs-flags { margin-block-start: 2px; }
.qs-it[data-qr-soldout="1"] .qs-photo, .qs-it[data-qs-sched="out"] .qs-photo { opacity: .55; }
.qs-flag--sched { border-style: dashed; color: var(--qr-ink-2); }

/* rows */
.qs-it:not(.qs-it--card) { display: flex; align-items: center; gap: 8px; border-block-end: var(--qs-row-rule, 1px solid var(--qr-line)); }
.qs-it:not(.qs-it--card) > .qs-it__open { flex: 1; min-inline-size: 0; inline-size: auto; min-block-size: 56px; padding-block: var(--qs-p); }
.qs-it--opt .qs-it__line .qs-name { font-family: var(--qr-font-body); font-size: 16px; font-weight: 500; }
.qs-items, .qs-opts { display: grid; grid-template-columns: repeat(var(--qr-cols-phone, 1), minmax(0, 1fr)); column-gap: 24px; }
@container stage (min-width: 700px) {
  .qs-items, .qs-opts { grid-template-columns: repeat(var(--qr-cols-tablet, 1), minmax(0, 1fr)); }
}
@container stage (min-width: 1100px) {
  .qs-items, .qs-opts { grid-template-columns: repeat(var(--qr-cols-desktop, 1), minmax(0, 1fr)); }
}

/* cards: izgara grid and the vitrin hero */
.qs-it--card { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--qr-line); border-radius: var(--qs-r); background: var(--qs-card-bg, var(--qr-surface)); overflow: hidden; }
.qs-it--card > .qs-it__open { display: flex; flex-direction: column; align-items: stretch; }
.qs-it--card .qs-it__pic { margin: 0; }
.qs-it--card .qs-photo { border-radius: 0; }
.qs-it--card .qs-it__text { flex: 1; align-items: stretch; gap: 4px; padding-block: 10px 12px; padding-inline: 12px; }
.qs-it--card .qs-it__text > .qs-flags, .qs-it--card .qs-it__line > .qs-price { align-self: flex-start; }
.qs-body[data-qr-layout="izgara"] .qs-items { grid-template-columns: repeat(auto-fill, minmax(var(--qs-card-min, 150px), 1fr)); gap: var(--qs-g); }
@container stage (min-width: 700px) {
  .qs-body[data-qr-layout="izgara"] .qs-items { grid-template-columns: repeat(auto-fill, minmax(var(--qs-card-min, 180px), 1fr)); }
}
@container stage (min-width: 1100px) {
  .qs-body[data-qr-layout="izgara"] .qs-items { grid-template-columns: repeat(auto-fill, minmax(var(--qs-card-min, 210px), 1fr)); }
}
/* a card: name, price, description; a card without a photo is a type card with the price at the foot */
.qs-it--card:not(.qs-it--hero) .qs-it__line { display: contents; }
.qs-it--card:not(.qs-it--hero) .qs-it__lead { display: none; }
.qs-it--card[data-qs-has-img="0"]:not(.qs-it--hero) .qs-it__desc { -webkit-line-clamp: 3; }
.qs-it--card[data-qs-has-img="0"]:not(.qs-it--hero) .qs-it__line > .qs-price { order: 5; margin-block-start: auto; padding-block-start: 8px; }
.qs-it--card[data-qs-has-img="0"] .qs-it__text > .qs-flags { order: 4; }
.qs-it--card[data-qs-pickat="corner"] > .qs-pick { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; z-index: 1; }
.qs-it--card[data-qs-has-img="0"][data-qs-pickat="corner"] .qs-it__line .qs-name { padding-inline-end: 48px; }

/* vitrin: one large card, up to three small rows beside or below it, the rest as rows */
.qs-feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; gap: var(--qs-g); margin-block-end: var(--qs-g); }
.qs-feat--n1 { grid-template-columns: minmax(0, 1fr); }
.qs-hero, .qs-smalls { min-width: 0; }
.qs-hero { max-inline-size: 720px; }
.qs-it--hero { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.qs-it--hero .qs-photo { aspect-ratio: var(--qs-hero-ratio, 3 / 2); border-radius: var(--qs-r); }
.qs-it--hero .qs-it__text { padding-inline: 0; }
.qs-it--hero .qs-it__line .qs-name { font-size: calc(var(--qs-name-size, 17px) + 3px); }
.qs-it--hero .qs-it__lead { display: none; }
.qs-it--hero .qs-it__line > .qs-price { align-self: first baseline; }
.qs-it--hero[data-qs-has-img="0"] { padding: 16px; border: 1px solid var(--qr-line); border-radius: var(--qs-r); background: var(--qs-card-bg, var(--qr-surface)); }
.qs-it--hero[data-qs-has-img="0"] .qs-it__text { padding: 0; }
.qs-it--hero[data-qs-pickat="corner"] > .qs-pick { inset-block-start: 8px; inset-inline-end: 8px; }
.qs-it--hero[data-qs-has-img="0"][data-qs-pickat="corner"] .qs-it__line .qs-name { padding-inline-end: 48px; }

/* izgara on a phone with flow:'shelf': a row that slides sideways, "See all" opens it as a grid */
.qs-seeall {
  display: none; align-items: center; inline-size: fit-content; min-block-size: 44px; margin-block-start: 4px; margin-inline-start: auto; padding-inline: 12px 2px;
  border: 0; background: transparent; color: var(--qr-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--qr-line); text-underline-offset: 5px;
}
.qs-seeall:focus-visible { outline: 2px solid var(--qr-accent); outline-offset: 2px; }
@container stage (max-width: 699px) {
  .qs-body .qs-items--shelf { display: flex; gap: var(--qs-g); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-block-end: 4px; }
  .qs-body .qs-items--shelf::-webkit-scrollbar { display: none; }
  .qs-body .qs-items--shelf > .qs-it { flex: 0 0 max(var(--qs-card-min, 150px), 46%); scroll-snap-align: start; }
  .qs-body[data-qs-all] .qs-items--shelf { display: grid; overflow: visible; scroll-snap-type: none; }
  .qs-body[data-qs-all] .qs-items--shelf > .qs-it { flex: none; }
  .qs-seeall { display: flex; }
}

/* option groups (mode: list): every layout draws an aligned list; the layout only changes the group head's picture */
.qs-grp { margin-block-start: var(--qs-g); min-width: 0; }
.qs-body > .qs-grp:first-child, .qs-sched + .qs-grp { margin-block-start: 0; }
.qs-grp__head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 8px; margin: 0; padding-block: 8px; }
.qs-grp__name { flex: 1 1 auto; margin: 0; font-family: var(--qr-font-body); font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; min-width: 0; }
.qs-grp__head > .qs-amount { flex: none; }
.qs-grp__pic { flex: none; min-width: 0; }
.qs-body[data-qr-layout="kucuk"] .qs-grp__pic .qs-photo { inline-size: calc(48px * var(--qr-thumb-scale, 1)); aspect-ratio: 1 / 1; border-radius: var(--qr-thumb-radius, 12px); }
.qs-body[data-qr-layout="izgara"] .qs-grp__pic, .qs-body[data-qr-layout="vitrin"] .qs-grp__pic { flex: 0 0 min(100%, 560px); }
.qs-body[data-qr-layout="izgara"] .qs-grp__pic .qs-photo, .qs-body[data-qr-layout="vitrin"] .qs-grp__pic .qs-photo { aspect-ratio: 16 / 9; border-radius: var(--qs-r); }
.qs-grp[data-qs-single="1"] .qs-opts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); column-gap: 16px; }

/* collapse:'one' — the head is a button, one group open at a time */
.qs-grp[data-qs-key] + .qs-grp[data-qs-key] { margin-block-start: 0; border-block-start: var(--qs-row-rule, 1px solid var(--qr-line)); }
.qs-grp__head--btn { padding: 0; }
.qs-grp__toggle {
  display: flex; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 48px; padding-block: 8px; padding-inline: 0; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.qs-grp__toggle:focus-visible { outline: 2px solid var(--qr-accent); outline-offset: -2px; }
.qs-grp__text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qs-grp__meta { font-size: 13.5px; color: var(--qr-ink-2); }
.qs-grp__meta .qs-price { font-size: 13.5px; color: var(--qr-ink); }
.qs-body .qs-grp .qs-grp__toggle .qs-grp__pic { flex: none; inline-size: calc(48px * var(--qr-thumb-scale, 1)); }
.qs-body .qs-grp .qs-grp__toggle .qs-grp__pic .qs-photo { inline-size: 100%; aspect-ratio: 1 / 1; border-radius: var(--qr-thumb-radius, 12px); }
.qs-body .qs-grp__toggle > .qs-icon[data-icon] { inline-size: 20px; block-size: 20px; color: var(--qr-ink-2); transform: rotate(90deg); }
.qs-body .qs-grp[data-qs-open] .qs-grp__toggle > .qs-icon[data-icon] { color: var(--qr-accent); transform: rotate(-90deg); }
@media (prefers-reduced-motion: no-preference) {
  .qs-body .qs-grp__toggle > .qs-icon[data-icon] { transition: transform .18s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .qs-body .qs-items--shelf { scroll-behavior: auto; }
}

/* ---------- shared areas (04 §5): slot · welcome · campaign · featured ----------
   Everything sits in the flow of its slot (no fixed / sticky / floating). Hooks a template may set on its .qr-root:
   --qs-slot-gap (8px), --qs-slot-max (760px), --qs-promo-bg, --qs-promo-border, --qs-promo-radius (and the --qs-radius / --qr-radius it falls back to). */
.qs-slot { display: flex; flex-direction: column; gap: var(--qs-slot-gap, 8px); margin-block: var(--qs-slot-gap, 8px); min-width: 0; }
.qs-slot > [data-qr-area] { inline-size: 100%; max-inline-size: var(--qs-slot-max, 760px); min-width: 0; }
.qs-welcome, .qs-promo, .qs-featured { --qs-ar: var(--qs-radius, var(--qr-radius, 12px)); }
.qs-promo__tap:focus-visible, .qs-promo__chip:focus-visible, .qs-promo__dot:focus-visible, .qs-promo-reopen:focus-visible { outline: 2px solid var(--qr-accent); outline-offset: 2px; }

/* welcome */
.qs-welcome { display: flex; align-items: center; gap: 12px; min-block-size: 56px; padding: 10px 12px; border: 1px solid var(--qr-line); border-radius: var(--qs-ar); background: var(--qr-surface); color: var(--qr-ink); }
.qs-welcome .qs-logo { flex: none; inline-size: auto; max-inline-size: 96px; max-block-size: 40px; }
.qs-welcome__text { min-width: 0; }
.qs-welcome__name { margin: 0; font-family: var(--qr-font-display); font-size: 18px; font-weight: 600; line-height: 1.2; overflow-wrap: break-word; }
.qs-welcome__sub { margin: 0; font-size: 14px; line-height: 1.4; color: var(--qr-ink-2); }
.qs-welcome--cover { position: relative; display: block; padding: 0; border: 0; overflow: hidden; }
.qs-welcome--cover .qs-photo { max-block-size: 140px; border-radius: 0; }
.qs-welcome--cover .qs-welcome__text { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 8px 12px; color: rgb(255 255 255); }
.qs-welcome--cover .qs-welcome__sub { color: inherit; }

/* campaign: shared look */
.qs-promo { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--qs-promo-border, var(--qr-line)); border-radius: var(--qs-promo-radius, var(--qs-ar)); background: var(--qs-promo-bg, var(--qr-surface)); color: var(--qr-ink); }
.qs-promo__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; }
.qs-promo__tag { font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; color: var(--qr-ink-2); }
.qs-promo__title, .qs-promo__body, .qs-promo-reopen__title { overflow-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.qs-promo__title { font-family: var(--qs-name-font, var(--qr-font-display)); font-size: 17px; font-weight: 600; line-height: 1.25; -webkit-line-clamp: 1; }
.qs-promo__body { font-size: 14px; line-height: 1.35; color: var(--qr-ink-2); -webkit-line-clamp: 1; }
.qs-promo__pic { flex: none; inline-size: 80px; }
.qs-promo__pic .qs-photo { border-radius: calc(var(--qs-ar) / 2); }
.qs-promo__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-width: 0; min-block-size: 44px; }
button.qs-promo__main, button.qs-promo__caption {
  inline-size: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.qs-promo__go { display: inline-flex; align-items: center; flex: none; gap: 2px; font-size: 14px; font-weight: 600; color: var(--qr-ink); }
.qs-promo__go .qs-icon { inline-size: 18px; block-size: 18px; }
.qs-promo__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.qs-promo__chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; max-inline-size: 78%; min-block-size: 44px; padding-inline: 12px;
  border: 1px solid var(--qr-line); border-radius: 999px; background: var(--qr-bg); color: inherit; font: inherit; font-size: 14px; cursor: pointer;
}
.qs-promo__chipname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-promo__chip .qs-price { font-size: 14px; }

/* kart: one card, text + picture, close at the corner, up to three linked products as chips */
.qs-promo--kart { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main close" "chips chips"; align-items: start; column-gap: 4px; padding-block: 10px; padding-inline: 12px 6px; }
.qs-promo--kart > .qs-promo__main { grid-area: main; align-self: center; }
.qs-promo--kart > .qs-promo__close { grid-area: close; }
.qs-promo--kart > .qs-promo__chips { grid-area: chips; margin-block-start: 4px; margin-inline-end: 6px; }

/* serit: one line, not closable */
.qs-promo--serit .qs-promo__main { display: flex; align-items: center; gap: 10px; padding-inline: 12px; }
.qs-promo--serit .qs-promo__title { flex: 1; min-width: 0; }

/* slayt: sliding cards + dots + pause + close; rotation only while motion is allowed (data-qr-ambient) */
.qs-promo__rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.qs-promo__rail::-webkit-scrollbar { display: none; }
.qs-slide { flex: 0 0 100%; min-width: 0; padding-block: 8px 0; padding-inline: 12px; scroll-snap-align: start; }
.qs-promo__bar { display: flex; align-items: center; gap: 2px; padding-inline: 6px 6px; }
.qs-promo__dots { display: flex; flex: 1; min-width: 0; }
.qs-promo__dot { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.qs-promo__dot::before { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; border: 1px solid var(--qr-ink-2); background: transparent; }
.qs-promo__dot[aria-pressed="true"]::before { border-color: var(--qr-accent); background: var(--qr-accent); }
.qs-promo__pause .qs-icon, .qs-promo__close .qs-icon { inline-size: 20px; block-size: 20px; }

/* hareketli: slim media band, caption on a dark gradient, pause + close over the corners */
.qs-promo--hareketli { border-radius: var(--qs-promo-radius, var(--qs-ar)); }
.qs-promo__media { position: relative; }
.qs-promo__media .qs-photo { max-block-size: 160px; border-radius: 0; }
.qs-promo__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.qs-promo__caption { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; align-items: flex-end; min-block-size: 44px; padding-block: 8px; padding-inline: 12px 60px; }
/* text over a picture: a black scrim, solid under the text and fading above it, so white text reads on the lightest picture (≥ 4.5 : 1, tools/fixtures/m7-checks.cjs);
   two classes beat the button reset above (button.qs-promo__caption would otherwise strip colour and scrim) */
.qs-promo--hareketli .qs-promo__caption, .qs-welcome--cover .qs-welcome__text { color: rgb(255 255 255); background: linear-gradient(to top, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .74) 90%, rgba(0, 0, 0, 0) 100%); }
.qs-promo__caption .qs-promo__tag, .qs-promo__caption .qs-promo__title { color: inherit; }
.qs-promo--hareketli > .qs-promo__close { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; }
.qs-promo--hareketli > .qs-promo__pause { position: absolute; inset-block-end: 4px; inset-inline-end: 4px; }

/* urunler: the linked products as a sliding row */
.qs-promo--urunler { padding-block: 2px 0; }
.qs-promo__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 12px 6px; }
.qs-promo__head .qs-promo__text { flex: 1; }

/* closed: one line in the same place */
.qs-promo-reopen {
  display: flex; align-items: center; gap: 8px; inline-size: 100%; min-block-size: 44px; padding-inline: 12px;
  border: 1px solid var(--qs-promo-border, var(--qr-line)); border-radius: var(--qs-promo-radius, var(--qs-ar)); background: var(--qs-promo-bg, var(--qr-surface));
  color: var(--qr-ink); font: inherit; font-size: 14px; text-align: start; cursor: pointer;
}
.qs-promo-reopen__title { flex: 1; min-width: 0; font-weight: 600; -webkit-line-clamp: 1; }

/* featured + the sliding rows: compact cards (picture beside the text) so the row stays slim */
.qs-featured__title { margin: 0; margin-block-end: 4px; padding-inline: 2px; font-family: var(--qr-font-display); font-size: 16px; font-weight: 600; line-height: 1.3; }
.qs-strip { display: flex; gap: 8px; margin: 0; padding-block: 2px 8px; padding-inline: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; list-style: none; }
.qs-featured .qs-strip { padding-inline: 0; }
.qs-strip > .qs-it { flex: 0 0 min(230px, 78%); scroll-snap-align: start; }
.qs-strip > .qs-it--card > .qs-it__open, .qs-featured--izgara .qs-it--card > .qs-it__open { flex-direction: row; align-items: center; gap: 10px; padding: 6px 10px; }
.qs-strip > .qs-it--card .qs-it__pic, .qs-featured--izgara .qs-it--card .qs-it__pic { flex: none; inline-size: 56px; }
.qs-strip > .qs-it--card .qs-photo, .qs-featured--izgara .qs-it--card .qs-photo { aspect-ratio: 1 / 1; border-radius: calc(var(--qs-ar) / 2); }
.qs-strip > .qs-it--card .qs-it__text, .qs-featured--izgara .qs-it--card .qs-it__text { flex: 1; min-width: 0; padding: 0; gap: 2px; justify-content: center; }
.qs-strip > .qs-it--card .qs-it__desc, .qs-featured--izgara .qs-it--card .qs-it__desc { display: none; }
.qs-strip .qs-it--card .qs-it__line .qs-name, .qs-featured--izgara .qs-it--card .qs-it__line .qs-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; }
@container stage (max-width: 699px) {
  .qs-featured--izgara .qs-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* in the ust slot the phone shows the grid as one sliding row (I2: the first product must stay on the first screen) */
  .qs-featured--izgara[data-qs-ust] .qs-items { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; padding-block-end: 8px; }
  .qs-featured--izgara[data-qs-ust] .qs-items::-webkit-scrollbar { display: none; }
  .qs-featured--izgara[data-qs-ust] .qs-items > .qs-it { flex: 0 0 min(230px, 78%); scroll-snap-align: start; }
}
@container stage (min-width: 700px) {
  .qs-featured--izgara .qs-it--card > .qs-it__open { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .qs-featured--izgara .qs-it--card .qs-it__pic { inline-size: auto; }
  .qs-featured--izgara .qs-it--card .qs-photo { aspect-ratio: 4 / 3; border-radius: 0; }
  .qs-featured--izgara .qs-it--card .qs-it__text { padding-block: 10px 12px; padding-inline: 12px; gap: 4px; justify-content: flex-start; }
  .qs-featured--izgara .qs-it--card .qs-it__desc { display: -webkit-box; }
  .qs-featured--izgara .qs-it--card .qs-it__line .qs-name { display: inline; font-size: var(--qs-name-size, 17px); }
}

.qr-root[data-template="cetvel"] { --tcv-gap: calc(12px * var(--qr-density)); --tcv-thumb-size: 40px; }
.qr-root[data-template="cetvel"][data-thumb-size="kucuk"] { --tcv-thumb-size: 32px; }
.qr-root[data-template="cetvel"][data-thumb-size="buyuk"] { --tcv-thumb-size: 52px; }
.qr-root[data-template="cetvel"] .tcv-app { display: flex; flex-direction: column; block-size: 100%; min-block-size: 0; }
.qr-root[data-template="cetvel"] .tcv-head { background: var(--qr-surface); padding-inline: 12px; border-block-end: 1px solid var(--qr-line); }
.qr-root[data-template="cetvel"] .tcv-masthead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 48px; }
/* The name stays on one line: a long name ends in an ellipsis, it never breaks mid-word. */
.qr-root[data-template="cetvel"] .tcv-masthead h1 { flex: 0 1 auto; margin: 0; font: 600 17px/1.15 var(--qr-font-display); min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr-root[data-template="cetvel"] .tcv-tools { display: flex; align-items: center; gap: 2px; flex: none; }
/* Icon buttons stay 44 wide: the counter sits on the icon's corner instead of widening the button (and squeezing the name). */
.qr-root[data-template="cetvel"] .tcv-tools .qs-btn { position: relative; min-inline-size: 44px; padding-inline: 10px; gap: 0; }
.qr-root[data-template="cetvel"] .tcv-tools .qs-count { position: absolute; inset-block-start: 3px; inset-inline-end: 0; min-inline-size: 18px; block-size: 18px; padding-inline: 4px; font-size: 11px; line-height: 18px; }
.qr-root[data-template="cetvel"] .tcv-tools .qs-lang__btn { padding-inline: 6px; min-inline-size: 44px; }
.qr-root[data-template="cetvel"] .tcv-searchbox { display: flex; align-items: center; gap: 8px; border-block-start: 1px solid var(--qr-line); color: var(--qr-ink-2); }
.qr-root[data-template="cetvel"] .tcv-search { min-inline-size: 0; inline-size: 100%; min-block-size: 44px; padding-block: 0; padding-inline: 0; border: 0; border-radius: 0; background: var(--qr-surface); color: var(--qr-ink); font: inherit; font-size: 14px; }
.qr-root[data-template="cetvel"] .tcv-worlds { display: flex; flex: none; min-inline-size: 0; overflow-x: auto; background: var(--qr-surface); border-block-end: 1px solid var(--qr-line); }
.qr-root[data-template="cetvel"] .tcv-world { flex: 1 0 auto; min-inline-size: 44px; min-block-size: 44px; padding-block: 4px; padding-inline: 12px; border: 0; border-block-end: 2px solid var(--qr-line); background: var(--qr-surface); color: var(--qr-ink-2); font: 600 14px/1.2 var(--qr-font-display); cursor: pointer; }
.qr-root[data-template="cetvel"] .tcv-world[aria-current] { color: var(--qr-accent); border-block-end-color: var(--qr-accent); }
.qr-root[data-template="cetvel"] .tcv-body { display: grid; grid-template-rows: auto minmax(0, 1fr); flex: 1; min-block-size: 0; min-inline-size: 0; }
.qr-root[data-template="cetvel"] .tcv-index { display: flex; gap: 4px; overflow-x: auto; padding-inline: 8px; min-inline-size: 0; border-block-end: 1px solid var(--qr-line); background: var(--qr-bg); }
.qr-root[data-template="cetvel"] .tcv-chip { display: inline-flex; flex: none; align-items: center; gap: 6px; min-block-size: 44px; min-inline-size: 44px; padding-block: 4px; padding-inline: 8px; border: 0; background: var(--qr-bg); color: var(--qr-ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.qr-root[data-template="cetvel"] .tcv-chip .qs-icon { inline-size: 18px; block-size: 18px; }
.qr-root[data-template="cetvel"] .tcv-chipname { white-space: nowrap; }
.qr-root[data-template="cetvel"] .tcv-chip[aria-current] { background: var(--qr-accent); color: var(--qr-on-accent); }
.qr-root[data-template="cetvel"][data-nav="side"] .tcv-body { grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.qr-root[data-template="cetvel"][data-nav="side"] .tcv-index { flex-direction: column; overflow-x: hidden; overflow-y: auto; padding-inline: 4px; border-block-end: 0; border-inline-end: 1px solid var(--qr-line); }
.qr-root[data-template="cetvel"][data-nav="side"] .tcv-chip { justify-content: center; padding-inline: 0; }
.qr-root[data-template="cetvel"][data-nav="side"] .tcv-chipname { display: none; }
.qr-root[data-template="cetvel"] .tcv-main { position: relative; overflow-y: auto; overflow-x: hidden; min-inline-size: 0; min-block-size: 0; padding-inline: 12px; scrollbar-gutter: stable; overflow-anchor: none; scroll-padding-block-start: 64px; }
.qr-root[data-template="cetvel"] .tcv-sections { column-count: var(--qr-cols-phone); column-gap: calc(2 * var(--tcv-gap)); }
.qr-root[data-template="cetvel"] .tcv-section { min-inline-size: 0; content-visibility: auto; contain-intrinsic-block-size: auto 500px; padding-block-end: calc(2 * var(--tcv-gap)); }
.qr-root[data-template="cetvel"] .tcv-sectionhead { break-after: avoid; position: sticky; inset-block-start: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px; min-block-size: 38px; margin: 0; padding-block: 9px; border-block-end: 2px solid var(--qr-ink); background: var(--qr-bg); color: var(--qr-ink); font: 600 17px/1.2 var(--qr-font-display); }
.qr-root[data-template="cetvel"] .tcv-sectionhead > span:first-child { min-inline-size: 0; overflow-wrap: anywhere; }
.qr-root[data-template="cetvel"] .tcv-sectionhead .qs-amount { font-size: 14px; margin-inline-start: auto; }
.qr-root[data-template="cetvel"] .tcv-grouphead { break-inside: avoid; break-after: avoid; display: flex; align-items: center; gap: 8px; padding-block-start: var(--tcv-gap); padding-block-end: 4px; }
.qr-root[data-template="cetvel"] .tcv-grouphead h3 { margin: 0; font: 600 14px/1.3 var(--qr-font-display); color: var(--qr-ink-2); overflow-wrap: anywhere; }
.qr-root[data-template="cetvel"] .tcv-grouphead .qs-photo { inline-size: calc(28px * var(--qr-thumb-scale)); border-radius: var(--qr-thumb-radius); }
.qr-root[data-template="cetvel"] .tcv-item { min-inline-size: 0; break-inside: avoid; border-block-end: 1px solid var(--qr-line); }
.qr-root[data-template="cetvel"] .tcv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; inline-size: 100%; min-block-size: max(44px, calc(49px * var(--qr-density))); padding-block: calc(4px * var(--qr-density)); padding-inline: 0; border: 0; background: var(--qr-bg); color: var(--qr-ink); text-align: start; font: inherit; font-size: 14px; cursor: pointer; }
.qr-root[data-template="cetvel"] .tcv-row[aria-expanded="true"] { color: var(--qr-accent); }
.qr-root[data-template="cetvel"] .tcv-namecell { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-inline-size: 0; }
.qr-root[data-template="cetvel"] .tcv-copy { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.qr-root[data-template="cetvel"] .tcv-copy .qs-name { font-size: 14px; line-height: 1.3; font-weight: 500; }
.qr-root[data-template="cetvel"] .tcv-row > .qs-price { max-inline-size: 96px; font-size: 14px; text-align: end; }
/* unitBreak uses flex: the shared whitespace text node has no width there. */
.qr-root[data-template="cetvel"] .qs-price--break .qs-price__cur { margin-inline-start: .3em; }
.qr-root[data-template="cetvel"] .tcv-desc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--qr-ink-2); font-size: 12px; line-height: 1.3; }
.qr-root[data-template="cetvel"] .tcv-namecell > .qs-photo { inline-size: var(--tcv-thumb-size); border-radius: var(--qr-thumb-radius); }
.qr-root[data-template="cetvel"] .tcv-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.qr-root[data-template="cetvel"] .tcv-options .tcv-item:has(.tcv-detail) { grid-column: 1 / -1; }
.qr-root[data-template="cetvel"] .tcv-options .tcv-row { grid-template-columns: minmax(0, 1fr); }
.qr-root[data-template="cetvel"] .tcv-detail { position: relative; padding-block: 12px; padding-inline: 12px; background: var(--qr-surface); border-block-start: 1px solid var(--qr-accent); }
.qr-root[data-template="cetvel"] .tcv-detail .qs-detail { max-inline-size: 480px; margin-inline: auto; }
.qr-root[data-template="cetvel"] .tcv-close { display: flex; align-items: center; justify-content: center; flex: none; min-inline-size: 44px; min-block-size: 44px; padding: 0; border: 0; background: var(--qr-surface); color: var(--qr-ink); cursor: pointer; }
/* The close button sits on the detail's top corner (over the photo) instead of taking a 44px line of its own. */
.qr-root[data-template="cetvel"] .tcv-detail > .tcv-close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 1; border-radius: 999px; }
.qr-root[data-template="cetvel"] .tcv-top { max-inline-size: 720px; margin-inline: auto; }
.qr-root[data-template="cetvel"] .tcv-sections > .qs-slot { column-span: all; }
.qr-root[data-template="cetvel"] .tcv-section > .qs-sched { margin: 4px 0 0; }
/* data-qr-layout: yalin = a plain ledger line, kucuk = the line with its small picture. */
.qr-root[data-template="cetvel"] [data-qr-layout="yalin"] .tcv-namecell > .qs-photo { display: none; }
/* data-desc */
.qr-root[data-template="cetvel"][data-desc="tam"] .tcv-desc { white-space: normal; overflow: visible; }
.qr-root[data-template="cetvel"][data-desc="iki"] .tcv-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }
.qr-root[data-template="cetvel"][data-desc="gizli"] .tcv-desc { display: none; }
/* data-section-head */
.qr-root[data-template="cetvel"][data-section-head="susle"] .tcv-sectionhead { border-block-end: 3px double var(--qr-accent); color: var(--qr-accent); text-transform: uppercase; letter-spacing: .06em; font-size: 15px; }
/* data-venue: a separate venue layer leaves the foot tighter */
.qr-root[data-template="cetvel"][data-venue="ayri"] .tcv-tail { gap: 6px; padding-block: 12px; }
/* corners (--qr-radius) */
.qr-root[data-template="cetvel"] .tcv-detail, .qr-root[data-template="cetvel"] .tcv-chip { border-radius: var(--qr-radius); }
.qr-root[data-template="cetvel"] .tcv-tail { display: grid; gap: 12px; padding-block: 20px; max-inline-size: 720px; margin-inline: auto; }
.qr-root[data-template="cetvel"] .tcv-results { max-inline-size: 720px; margin-inline: auto; }
.qr-root[data-template="cetvel"] .tcv-results .qs-photo--thumb { inline-size: calc(32px * var(--qr-thumb-scale)); }
.qr-root[data-template="cetvel"] button:focus-visible,
.qr-root[data-template="cetvel"] input:focus-visible { outline: 2px solid var(--qr-accent); outline-offset: -2px; }
.qr-root[data-template="cetvel"]:is(.qr-stage[data-motion="reduced"] *) * { transition-duration: 0s !important; animation-duration: 0s !important; }
@container stage (min-width: 700px) {
  .qr-root[data-template="cetvel"] .tcv-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-inline: 24px; }
  .qr-root[data-template="cetvel"] .tcv-masthead { flex: 1; min-inline-size: 0; gap: 12px; }
  .qr-root[data-template="cetvel"] .tcv-masthead h1 { font-size: 22px; }
  .qr-root[data-template="cetvel"] .tcv-searchbox { flex: 0 1 240px; border-block-start: 0; }
  .qr-root[data-template="cetvel"] .tcv-world { flex: 0 0 auto; padding-inline: 24px; }
  .qr-root[data-template="cetvel"] .tcv-main { padding-inline: 24px; }
  .qr-root[data-template="cetvel"] .tcv-sections { column-count: var(--qr-cols-tablet); column-rule: 1px solid var(--qr-line); }
  .qr-root[data-template="cetvel"] .tcv-sectionhead { font-size: 19px; }
  .qr-root[data-template="cetvel"][data-nav="side"] .tcv-body { grid-template-columns: 148px minmax(0, 1fr); }
  .qr-root[data-template="cetvel"][data-nav="side"] .tcv-chip { justify-content: flex-start; padding-inline: 8px; }
  .qr-root[data-template="cetvel"][data-nav="side"] .tcv-chipname { display: block; white-space: normal; overflow-wrap: anywhere; text-align: start; }
}
@container stage (min-width: 1100px) {
  .qr-root[data-template="cetvel"] .tcv-body { grid-template-columns: 176px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .qr-root[data-template="cetvel"][data-nav="side"] .tcv-body { grid-template-columns: 176px minmax(0, 1fr); }
  .qr-root[data-template="cetvel"] .tcv-index { flex-direction: column; overflow-x: hidden; overflow-y: auto; border-block-end: 0; border-inline-end: 1px solid var(--qr-line); padding-block: 12px; }
  .qr-root[data-template="cetvel"] .tcv-chip { justify-content: flex-start; }
  .qr-root[data-template="cetvel"] .tcv-chipname { white-space: normal; overflow-wrap: anywhere; }
  .qr-root[data-template="cetvel"] .tcv-sections { column-count: var(--qr-cols-desktop); column-gap: calc(3 * var(--tcv-gap)); }
}

/* QR menu prototype — templates/defter.css (CONTRACT v2). §4 variables only; logical properties only.
   Text sizes are in rem so the guest's text zoom reaches the book (and re-paginates it). */
.qr-root[data-template="defter"] {
  --tdf-d: var(--qr-density, 1);
  --tdf-paper:
    radial-gradient(130% 100% at 50% 45%, transparent 55%, color-mix(in srgb, var(--qr-ink) 9%, transparent) 100%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--qr-ink) 3%, transparent) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--qr-ink) 1.6%, transparent) 0 1px, transparent 1px 7px),
    var(--qr-surface);
}
.qr-root[data-template="defter"] .tdf-app {
  position: relative; display: flex; flex-direction: column; block-size: 100%; min-block-size: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--qr-surface) 40%, transparent), transparent 70%),
    var(--qr-bg);
}
.qr-root[data-template="defter"] .tdf-em {
  position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 10rem; block-size: 1rem;
  visibility: hidden; pointer-events: none;
}

/* ---------- top tools ---------- */
.qr-root[data-template="defter"] .tdf-top {
  flex: none; padding-block: 6px; padding-inline: 10px;
  border-block-end: 1px solid var(--qr-line); background: var(--qr-surface);
}
.qr-root[data-template="defter"] .tdf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.qr-root[data-template="defter"] .tdf-tools__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-inline-start: auto; min-width: 0; }
.qr-root[data-template="defter"] .tdf-tools__end { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.qr-root[data-template="defter"] .tdf-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 44px; min-inline-size: 44px;
  padding-inline: 12px; border: 1px solid var(--qr-line); border-radius: 999px; background: var(--qr-bg); color: var(--qr-ink);
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.qr-root[data-template="defter"] .tdf-tool--toc { background: var(--qr-accent); border-color: var(--qr-accent); color: var(--qr-on-accent); }
.qr-root[data-template="defter"] .tdf-tool--icon { padding-inline: 0; }
.qr-root[data-template="defter"] .tdf-tool__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qr-root[data-template="defter"] .tdf-tools__lang { display: none; }
.qr-root[data-template="defter"] .tdf-worlds {
  order: 3; flex: 1 0 100%; display: none; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.qr-root[data-template="defter"] .tdf-world {
  flex: none; min-block-size: 44px; padding-inline: 12px; border: 0; border-block-end: 2px solid transparent; background: transparent;
  color: var(--qr-ink-2); font-family: var(--qr-font-display); font-size: 1.125rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.qr-root[data-template="defter"] .tdf-world[aria-current] { color: var(--qr-ink); border-block-end-color: var(--qr-accent); }

/* ---------- the book ---------- */
.qr-root[data-template="defter"] .tdf-book {
  position: relative; flex: 1; min-block-size: 0; padding-block: calc(10px * var(--tdf-d)); padding-inline: 10px;
  touch-action: pan-y;
}
.qr-root[data-template="defter"] .tdf-spread {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  block-size: 100%; margin-inline: auto; max-inline-size: 680px;
}
.qr-root[data-template="defter"] .tdf-page {
  grid-row: 1; grid-column: 1; position: relative; display: flex; flex-direction: column; min-block-size: 0; min-width: 0;
  padding-block: calc(12px * var(--tdf-d)) 2px; padding-inline: calc(16px * var(--tdf-d));
  background: var(--tdf-paper); color: var(--qr-ink);
  border: 1px solid color-mix(in srgb, var(--qr-line) 80%, transparent); border-radius: min(var(--qr-radius, 3px), 12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 26px -14px rgba(0, 0, 0, .4);
}
.qr-root[data-template="defter"] .tdf-page--b { grid-column: 2; }
.qr-root[data-template="defter"] .tdf-page--probe { visibility: hidden; pointer-events: none; z-index: -1; }
.qr-root[data-template="defter"] .tdf-run {
  flex: none; margin: 0; padding-block-end: 6px; border-block-end: 1px solid var(--qr-line);
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--qr-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.qr-root[data-template="defter"] .tdf-run:empty { visibility: hidden; }
.qr-root[data-template="defter"] .tdf-run:empty::before { content: "\00a0"; }
.qr-root[data-template="defter"] .tdf-body { position: relative; flex: 1; min-block-size: 0; overflow: hidden; }
.qr-root[data-template="defter"] .tdf-page[data-tdf-tall] .tdf-body,
.qr-root[data-template="defter"] .tdf-page--cover .tdf-body { overflow-y: auto; overscroll-behavior: contain; }
.qr-root[data-template="defter"] .tdf-measure { position: absolute; inset-block-start: 0; inset-inline: 0; }
.qr-root[data-template="defter"] .tdf-folio {
  flex: none; display: flex; align-items: center; justify-content: space-between; min-block-size: 44px;
  border-block-start: 1px solid color-mix(in srgb, var(--qr-line) 70%, transparent);
}
.qr-root[data-template="defter"] .tdf-folio__num {
  font-family: var(--qr-font-display); font-style: italic; font-size: 1rem; color: var(--qr-ink-2); font-variant-numeric: oldstyle-nums;
}
.qr-root[data-template="defter"] .tdf-corner {
  inline-size: 44px; block-size: 44px; padding: 0; border: 0; cursor: pointer; background-color: transparent;
  background-repeat: no-repeat; background-size: 20px 20px;
}
.qr-root[data-template="defter"] .tdf-corner[hidden] { display: block !important; visibility: hidden; }
.qr-root[data-template="defter"] .tdf-corner--next {
  background-image: linear-gradient(to top left, color-mix(in srgb, var(--qr-ink) 16%, transparent) 50%, transparent 50%);
  background-position: 100% 100%;
}
.qr-root[data-template="defter"] .tdf-corner--prev {
  background-image: linear-gradient(to top right, color-mix(in srgb, var(--qr-ink) 16%, transparent) 50%, transparent 50%);
  background-position: 0% 100%;
}
.qr-root[data-template="defter"][dir="rtl"] .tdf-corner--next {
  background-image: linear-gradient(to top right, color-mix(in srgb, var(--qr-ink) 16%, transparent) 50%, transparent 50%);
  background-position: 0% 100%;
}
.qr-root[data-template="defter"][dir="rtl"] .tdf-corner--prev {
  background-image: linear-gradient(to top left, color-mix(in srgb, var(--qr-ink) 16%, transparent) 50%, transparent 50%);
  background-position: 100% 100%;
}

/* ---------- blocks (no margins: measured heights add up exactly) ---------- */
.qr-root[data-template="defter"] .tdf-blk { display: block; margin: 0; }
.qr-root[data-template="defter"] .tdf-rule {
  position: relative; display: block; inline-size: 38%; block-size: 1px; margin-inline: auto; margin-block: 10px 2px; background: var(--qr-line);
}
.qr-root[data-template="defter"] .tdf-rule::after {
  content: ""; position: absolute; inset-block-start: -3px; inset-inline-start: calc(50% - 3.5px); inline-size: 7px; block-size: 7px;
  background: var(--qr-accent); transform: rotate(45deg);
}
.qr-root[data-template="defter"] .tdf-head { padding-block: calc(16px * var(--tdf-d)) calc(10px * var(--tdf-d)); text-align: center; }
.qr-root[data-template="defter"] .tdf-head p, .qr-root[data-template="defter"] .tdf-head h2 { margin: 0; }
.qr-root[data-template="defter"] .tdf-head__kicker { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--qr-ink-2); }
.qr-root[data-template="defter"] .tdf-head__title {
  font-family: var(--qr-font-display); font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--qr-ink);
}
.qr-root[data-template="defter"] .tdf-head__price { margin-block-start: 8px !important; color: var(--qr-ink-2); }
.qr-root[data-template="defter"] .tdf-group {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px;
  padding-block: calc(14px * var(--tdf-d)) calc(4px * var(--tdf-d)); border-block-end: 1px solid var(--qr-line);
}
.qr-root[data-template="defter"] .tdf-group__name {
  margin: 0; font-family: var(--qr-font-display); font-size: 1.25rem; font-style: italic; font-weight: 600; color: var(--qr-ink);
}
.qr-root[data-template="defter"] .tdf-item {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px;
  padding-block: calc(6px * var(--tdf-d));
  border-block-end: 1px dotted color-mix(in srgb, var(--qr-ink-2) 45%, transparent);
}
.qr-root[data-template="defter"] .tdf-item__open {
  display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; min-block-size: 44px;
  padding-block: 2px; padding-inline: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.qr-root[data-template="defter"] .tdf-item__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.qr-root[data-template="defter"] .tdf-item__name { flex: 0 1 auto; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; overflow-wrap: normal; }
.qr-root[data-template="defter"] .tdf-leader {
  flex: 1 0 1.25rem; align-self: center; block-size: 0; min-inline-size: 1.25rem;
  border-block-end: 2px dotted color-mix(in srgb, var(--qr-ink-2) 55%, transparent);
}
.qr-root[data-template="defter"] .tdf-item .qs-price { flex: none; margin-inline-start: auto; font-size: 1rem; }
/* the shared price box is dir="ltr", so its own logical margins are LTR: push it to the line end physically per direction */
.qr-root[data-template="defter"][dir="rtl"] .tdf-item .qs-price { margin-inline-start: 0; margin-inline-end: auto; }
.qr-root[data-template="defter"] .tdf-item__desc {
  display: block; font-size: .9375rem; line-height: 1.45; font-style: italic; color: var(--qr-ink-2);
}
.qr-root[data-template="defter"] .tdf-item--row .tdf-item__name { font-weight: 500; font-size: 1rem; }
.qr-root[data-template="defter"] .tdf-item[data-qr-soldout="1"] .tdf-item__line .qs-name { opacity: .72; }
.qr-root[data-template="defter"] .tdf-item .qs-pick { align-self: center; }

/* ---------- front matter ---------- */
.qr-root[data-template="defter"] .tdf-tochead { padding-block: calc(14px * var(--tdf-d)) calc(8px * var(--tdf-d)); text-align: center; }
.qr-root[data-template="defter"] .tdf-tochead__title { margin: 0; font-family: var(--qr-font-display); font-size: 2rem; font-weight: 600; }
.qr-root[data-template="defter"] .tdf-tocworld {
  display: flex; inline-size: 100%; align-items: baseline; justify-content: space-between; gap: 10px; min-block-size: 44px;
  padding-block: calc(12px * var(--tdf-d)) calc(4px * var(--tdf-d)); padding-inline: 0;
  border: 0; border-block-end: 1px solid var(--qr-line); background: transparent; color: var(--qr-ink); cursor: pointer;
  font-family: var(--qr-font-display); font-size: 1.375rem; font-weight: 600; text-align: start;
}
.qr-root[data-template="defter"] .tdf-tocworld[aria-current] .tdf-tocworld__name { color: var(--qr-accent); }
.qr-root[data-template="defter"] .tdf-tocentry {
  display: flex; inline-size: 100%; align-items: baseline; gap: 8px; min-block-size: 44px;
  padding-block: calc(8px * var(--tdf-d)); padding-inline: 14px 0; border: 0; background: transparent; color: var(--qr-ink);
  font: inherit; font-size: 1.0625rem; text-align: start; cursor: pointer;
}
.qr-root[data-template="defter"] .tdf-tocentry__name { flex: 0 1 auto; min-width: 0; }
.qr-root[data-template="defter"] .tdf-toc__num { flex: none; font-family: var(--qr-font-display); font-variant-numeric: oldstyle-nums; color: var(--qr-ink-2); font-size: 1.0625rem; }
.qr-root[data-template="defter"] .tdf-tocentry .tdf-leader { align-self: center; }
.qr-root[data-template="defter"] .tdf-info { padding-block: calc(18px * var(--tdf-d)) 4px; }
.qr-root[data-template="defter"] .tdf-info__title { margin: 0 0 10px; font-family: var(--qr-font-display); font-size: 1.375rem; font-weight: 600; }
.qr-root[data-template="defter"] .tdf-info .qs-venue { background: transparent; }

.qr-root[data-template="defter"] .tdf-langrow { display: flex; justify-content: center; padding-block: 8px 2px; }
.qr-root[data-template="defter"] .tdf-seg { display: block; }
.qr-root[data-template="defter"] .tdf-info__part { padding-block-end: 8px; }
.qr-root[data-template="defter"] .qs-footer.tdf-piece { padding-block: 2px; }
.qr-root[data-template="defter"] .qs-venue.tdf-piece { padding-block: 4px; border-radius: 0; border-block-width: 0; }

/* ---------- cover ---------- */
.qr-root[data-template="defter"] .tdf-page--cover .tdf-body { display: flex; flex-direction: column; }
.qr-root[data-template="defter"] .tdf-cover {
  margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding-block: 18px; padding-inline: 14px; inline-size: 100%;
  outline: 1px solid var(--qr-line); outline-offset: -6px; border: 3px double color-mix(in srgb, var(--qr-ink-2) 60%, transparent);
}
.qr-root[data-template="defter"] .tdf-cover p, .qr-root[data-template="defter"] .tdf-cover h1 { margin: 0; }
.qr-root[data-template="defter"] .tdf-cover__est { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--qr-ink-2); }
.qr-root[data-template="defter"] .tdf-cover__name { font-family: var(--qr-font-display); font-size: 2.625rem; font-weight: 600; line-height: 1.05; }
.qr-root[data-template="defter"] .tdf-cover__branch { font-style: italic; color: var(--qr-ink-2); }
.qr-root[data-template="defter"] .tdf-rule--cover { inline-size: 56%; margin-block: 4px; }
.qr-root[data-template="defter"] .tdf-cover__title { font-family: var(--qr-font-display); font-size: 1.5rem; font-style: italic; }
.qr-root[data-template="defter"] .tdf-cover__open {
  display: inline-flex; align-items: center; gap: 8px; min-block-size: 48px; padding-inline: 18px; margin-block-start: 6px;
  border: 1px solid var(--qr-accent); border-radius: 999px; background: var(--qr-accent); color: var(--qr-on-accent);
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.qr-root[data-template="defter"] .tdf-cover__hint { font-size: .875rem; color: var(--qr-ink-2); max-inline-size: 26em; }
.qr-root[data-template="defter"] .tdf-cover--tight { gap: 6px; padding-block: 10px; }
.qr-root[data-template="defter"] .tdf-cover--tight .tdf-cover__hint { display: none; }
.qr-root[data-template="defter"] .tdf-cover--tight .tdf-cover__name { font-size: 2rem; }
.qr-root[data-template="defter"] .tdf-cover--tight .tdf-cover__langs { display: none; }
.qr-root[data-template="defter"] .tdf-cover--tighter .tdf-cover__est,
.qr-root[data-template="defter"] .tdf-cover--tighter .tdf-cover__branch,
.qr-root[data-template="defter"] .tdf-cover--tighter .tdf-rule--cover { display: none; }
.qr-root[data-template="defter"] .tdf-cover--tighter .tdf-cover__name { font-size: 1.625rem; }
.qr-root[data-template="defter"] .tdf-cover--tighter { padding-block: 6px; }

/* ---------- bottom bar ---------- */
.qr-root[data-template="defter"] .tdf-bar {
  flex: none; display: flex; align-items: center; gap: 8px; padding-block: 6px; padding-inline: 10px;
  border-block-start: 1px solid var(--qr-line); background: var(--qr-surface);
}
.qr-root[data-template="defter"] .tdf-turn {
  flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-block-size: 48px; min-inline-size: 48px; min-width: 48px;
  padding-inline: 12px; border: 1px solid var(--qr-line); border-radius: 999px; background: var(--qr-bg); color: var(--qr-ink);
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; overflow: hidden;
}
.qr-root[data-template="defter"] .tdf-turn--next { background: var(--qr-accent); border-color: var(--qr-accent); color: var(--qr-on-accent); }
.qr-root[data-template="defter"] .tdf-turn:disabled { opacity: .4; cursor: default; }
.qr-root[data-template="defter"] .tdf-turn__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qr-root[data-template="defter"] .tdf-turn--prev .qs-icon { transform: scaleX(-1); }
.qr-root[data-template="defter"][dir="rtl"] .tdf-turn--prev .qs-icon { transform: none; }
.qr-root[data-template="defter"] .tdf-where {
  flex: 1 1 0; min-width: 0; margin: 0; text-align: center; font-size: .9375rem; color: var(--qr-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* nav=bottom: the tools sit above the page buttons, within thumb reach */
.qr-root[data-template="defter"][data-nav="bottom"] .tdf-top { order: 2; border-block-end: 0; border-block-start: 1px solid var(--qr-line); }
.qr-root[data-template="defter"][data-nav="bottom"] .tdf-book { order: 1; }
.qr-root[data-template="defter"][data-nav="bottom"] .tdf-bar { order: 3; }

/* ---------- focus ---------- */
.qr-root[data-template="defter"] button:focus-visible, .qr-root[data-template="defter"] input:focus-visible {
  outline: 2px solid var(--qr-accent); outline-offset: 2px;
}
.qr-root[data-template="defter"] .tdf-item__open:focus-visible, .qr-root[data-template="defter"] .tdf-tocentry:focus-visible,
.qr-root[data-template="defter"] .tdf-tocworld:focus-visible { outline-offset: -2px; }
.qr-root[data-template="defter"] .tdf-body:focus { outline: none; }

/* ---------- layers: detail sheet and search ---------- */
.qr-root[data-template="defter"] .tdf-layer { position: absolute; inset: 0; z-index: 30; }
.qr-root[data-template="defter"] .tdf-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.qr-root[data-template="defter"] .tdf-sheet {
  position: absolute; inset-inline: 0; inset-block-end: 0; max-block-size: 86%; overflow-y: auto;
  padding: 18px; padding-block-start: 58px; background: var(--tdf-paper);
  border-start-start-radius: max(var(--qr-radius, 14px), 4px); border-start-end-radius: max(var(--qr-radius, 14px), 4px);
}
.qr-root[data-template="defter"] .tdf-sheet .qs-detail__name { font-family: var(--qr-font-display); font-size: 1.75rem; }
.qr-root[data-template="defter"] .tdf-close {
  position: absolute; inset-block-start: 7px; inset-inline-end: 8px; z-index: 2; inline-size: 44px; block-size: 44px;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--qr-line); border-radius: 999px;
  background: var(--qr-surface); color: var(--qr-ink); cursor: pointer;
}
.qr-root[data-template="defter"] .tdf-search {
  position: absolute; inset-inline: 0; inset-block-start: 0; max-block-size: 100%; display: flex; flex-direction: column; gap: 6px;
  padding: 10px; background: var(--qr-surface); border-block-end: 1px solid var(--qr-line);
}
.qr-root[data-template="defter"] .tdf-search__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qr-root[data-template="defter"] .tdf-search__head .tdf-close { position: static; flex: none; }
.qr-root[data-template="defter"] .tdf-search__icon { display: inline-flex; color: var(--qr-ink-2); }
.qr-root[data-template="defter"] .tdf-search__input {
  flex: 1; min-width: 0; min-block-size: 44px; padding-inline: 12px; border: 1px solid var(--qr-line); border-radius: var(--qr-radius, 10px);
  background: var(--qr-bg); color: var(--qr-ink); font: inherit; font-size: 1rem;
}
.qr-root[data-template="defter"] .tdf-search__count { margin: 0; font-size: .875rem; color: var(--qr-ink-2); }
.qr-root[data-template="defter"] .tdf-search__count:empty { display: none; }
.qr-root[data-template="defter"] .tdf-search__list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-block-size: 0; }

/* ---------- motion: paper turn (only when the transition allows it) and soft fade ---------- */
.qr-root[data-template="defter"] .tdf-turning {
  z-index: 2; transform-origin: var(--tdf-ox, 0%) 50%; backface-visibility: hidden;
  animation: tdf-turn .32s cubic-bezier(.2, .75, .25, 1) both;
}
.qr-root[data-template="defter"] .tdf-fading { animation: tdf-fade .14s ease-out both; }
@keyframes tdf-turn {
  from { transform: perspective(1800px) rotateY(var(--tdf-ry, -24deg)); filter: brightness(.9); }
  to { transform: perspective(1800px) rotateY(0deg); filter: none; }
}
@keyframes tdf-fade { from { opacity: .35; } to { opacity: 1; } }
.qr-stage[data-motion="reduced"] .qr-root[data-template="defter"] .tdf-turning,
.qr-stage[data-motion="reduced"] .qr-root[data-template="defter"] .tdf-fading,
.qr-root[data-template="defter"][data-transition="sakin"] .tdf-turning,
.qr-root[data-template="defter"][data-transition="sakin"] .tdf-fading { animation: none; }

/* ---------- tablet: one wider page, tools in one row ---------- */
@container stage (min-width: 700px) {
  .qr-root[data-template="defter"] .tdf-top { padding-inline: 16px; }
  .qr-root[data-template="defter"] .tdf-worlds { order: 0; flex: 1 1 auto; justify-content: center; display: flex; }
  .qr-root[data-template="defter"] .tdf-tools__lang { display: flex; }
  .qr-root[data-template="defter"] .tdf-tools__group { margin-inline-start: 0; }
  .qr-root[data-template="defter"] .tdf-book { padding-block: calc(18px * var(--tdf-d)); padding-inline: 24px; }
  .qr-root[data-template="defter"] .tdf-page { padding-inline: calc(28px * var(--tdf-d)); padding-block-start: calc(18px * var(--tdf-d)); }
  .qr-root[data-template="defter"] .tdf-bar { justify-content: center; }
  .qr-root[data-template="defter"] .tdf-where { flex: 0 1 22rem; }
  .qr-root[data-template="defter"] .tdf-sheet {
    inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; inline-size: 420px; max-block-size: none;
    border-radius: 0; border-inline-start: 1px solid var(--qr-line);
  }
  .qr-root[data-template="defter"] .tdf-search { inset-inline: auto; inset-inline-end: 0; inline-size: 460px; block-size: 100%; border-inline-start: 1px solid var(--qr-line); }
}

/* ---------- desktop: an open two-page spread ---------- */
@container stage (min-width: 1100px) {
  .qr-root[data-template="defter"] .tdf-spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-inline-size: 1180px; }
  .qr-root[data-template="defter"] .tdf-page { border-radius: 0; }
  .qr-root[data-template="defter"] .tdf-page--a {
    border-start-start-radius: var(--qr-radius, 4px); border-end-start-radius: var(--qr-radius, 4px);
    background: linear-gradient(to left, color-mix(in srgb, var(--qr-ink) 14%, transparent), transparent 28px), var(--tdf-paper);
  }
  .qr-root[data-template="defter"] .tdf-page--b {
    border-start-end-radius: var(--qr-radius, 4px); border-end-end-radius: var(--qr-radius, 4px);
    background: linear-gradient(to right, color-mix(in srgb, var(--qr-ink) 14%, transparent), transparent 28px), var(--tdf-paper);
  }
  .qr-root[data-template="defter"][dir="rtl"] .tdf-page--a {
    background: linear-gradient(to right, color-mix(in srgb, var(--qr-ink) 14%, transparent), transparent 28px), var(--tdf-paper);
  }
  .qr-root[data-template="defter"][dir="rtl"] .tdf-page--b {
    background: linear-gradient(to left, color-mix(in srgb, var(--qr-ink) 14%, transparent), transparent 28px), var(--tdf-paper);
  }
}

/* goTo target: on a page shared by two sections the reached section's head stands out */
.qr-root[data-template="defter"] .tdf-head--target { background: linear-gradient(color-mix(in srgb, var(--qr-accent) 9%, transparent), transparent); }
.qr-root[data-template="defter"] .tdf-head--target .tdf-head__title { color: var(--qr-accent); }
.qr-root[data-template="defter"] .tdf-head--target .tdf-rule { inline-size: 56%; }
.qr-root[data-template="defter"] .tdf-head:focus { outline: none; }
.qr-root[data-template="defter"] .tdf-head:focus-visible { outline: 2px solid var(--qr-accent); outline-offset: -2px; }

/* ---------- shared slots, section heads, description lines, venue place ---------- */
.qr-root[data-template="defter"] .tdf-slot { padding-block: calc(8px * var(--tdf-d)); }
.qr-root[data-template="defter"][data-section-head="yalin"] .tdf-head .tdf-rule { display: none; }
.qr-root[data-template="defter"][data-section-head="yalin"] .tdf-head__title { font-size: 1.5rem; }
.qr-root[data-template="defter"][data-section-head="susle"] .tdf-head__title { font-style: italic; }
.qr-root[data-template="defter"][data-desc="iki"] .tdf-item__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.qr-root[data-template="defter"][data-desc="gizli"] .tdf-item__desc { display: none; }
.qr-root[data-template="defter"][data-venue="alt"] .tdf-tools [data-qs-open="venue"] { display: none; }
.qr-root[data-template="defter"][data-venue="ayri"] .tdf-tools [data-qs-open="venue"] { min-block-size: 44px; min-inline-size: 44px; }
.qr-root[data-template="defter"][data-venue="ayri"] .tdf-info .qs-venue { display: none; }

/* QR menu prototype — templates/harita.css ("Harita": bird's-eye tiles → zoom into a section; v3: rows, campaign, highlights are shared).
   §4 variables only, logical properties only; widths via container queries (stage ≥ 700 / ≥ 1100, map pane, section pane). */
.qr-root[data-template="harita"] {
  --thr-gap: calc(12px * var(--qr-density, 1));
  --thr-radius: var(--qr-radius, 12px);
  --thr-pill: calc(var(--qr-radius, 12px) * 100);   /* 0 with square corners (keskin), a full pill with soft ones */
  --thr-grid: color-mix(in srgb, var(--qr-accent) 16%, transparent);
  background: var(--qr-bg); color: var(--qr-ink); font-family: var(--qr-font-body);
}
.qr-root[data-template="harita"] .thr-app { display: flex; flex-direction: column; block-size: 100%; min-block-size: 0; background: var(--qr-bg); }

/* ---------- header ---------- */
.qr-root[data-template="harita"] .thr-head {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px;
  padding-block: 4px; padding-inline: 10px; background: var(--qr-surface);
}
.qr-root[data-template="harita"] .thr-title {
  flex: 1 1 auto; margin: 0; min-inline-size: min(max-content, 45%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--qr-font-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
}
.qr-root[data-template="harita"] .thr-tools { flex: none; display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.qr-root[data-template="harita"] .thr-tools .qs-btn { padding-inline: 10px; gap: 4px; min-inline-size: 44px; }

/* ---------- breadcrumb strip (same builder on every level and inside the detail layer) ---------- */
.qr-root[data-template="harita"] .thr-zone { position: relative; flex: 1; min-block-size: 0; display: flex; flex-direction: column; }
.qr-root[data-template="harita"] .thr-crumbrow {
  display: flex; align-items: center; gap: 6px; min-block-size: 48px; padding-block: 2px; padding-inline: 10px;
  background: var(--qr-surface); border-block: 1px solid var(--qr-line);
}
.qr-root[data-template="harita"][data-nav="bottom"] .thr-zone > .thr-crumbrow { order: 2; }
.qr-root[data-template="harita"][data-nav="bottom"] .thr-layer > .thr-crumbrow { order: 2; }
.qr-root[data-template="harita"] .thr-back {
  flex: none; max-inline-size: 58%; min-block-size: 44px; display: inline-flex; align-items: center; gap: 4px;
  padding-block: 4px; padding-inline: 8px 14px; border: 0; border-radius: var(--thr-pill); cursor: pointer;
  background: var(--qr-accent); color: var(--qr-on-accent); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.15; text-align: start;
}
.qr-root[data-template="harita"] .thr-back .qs-icon { inline-size: 20px; block-size: 20px; }
.qr-root[data-template="harita"] .thr-back__label { min-inline-size: 0; }
.qr-root[data-template="harita"] .thr-crumbnav { flex: 1; min-inline-size: 0; }
.qr-root[data-template="harita"] .thr-crumbs {
  display: flex; align-items: center; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none;
}
.qr-root[data-template="harita"] .thr-crumbs::-webkit-scrollbar { display: none; }
.qr-root[data-template="harita"] .thr-crumbs__part { flex: none; display: flex; align-items: center; }
.qr-root[data-template="harita"] .thr-crumbs__sep { display: inline-flex; color: var(--qr-ink-2); }
.qr-root[data-template="harita"] :is(.thr-crumbs__part, .thr-crumbs__sep)[hidden] { display: none; }
.qr-root[data-template="harita"] .thr-crumbs__sep .qs-icon { inline-size: 14px; block-size: 14px; }
.qr-root[data-template="harita"] .thr-crumb {
  min-block-size: 44px; min-inline-size: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding-inline: 6px; border: 0; background: transparent; color: var(--qr-ink-2); font: inherit; font-size: 14px; font-weight: 600;
  white-space: nowrap; cursor: pointer; text-decoration: underline; text-decoration-color: var(--qr-line); text-underline-offset: 4px;
}
.qr-root[data-template="harita"] .thr-crumb--here { color: var(--qr-ink); font-weight: 700; text-decoration: none; cursor: default; }
.qr-root[data-template="harita"] .thr-iconbtn {
  flex: none; inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--qr-line); border-radius: var(--thr-pill); background: var(--qr-bg); color: var(--qr-ink); cursor: pointer;
}
.qr-root[data-template="harita"] :is(.thr-back, .thr-crumb, .thr-iconbtn, .thr-tile, .thr-wchip, .thr-page, .thr-find):focus-visible,
.qr-root[data-template="harita"] :is(.thr-sec__name, .thr-world__name):focus-visible {
  outline: 2px solid var(--qr-accent); outline-offset: 2px;
}
.qr-root[data-template="harita"] :is(.thr-sec__name, .thr-world__name):focus:not(:focus-visible) { outline: none; }

/* ---------- body: map + pane ---------- */
.qr-root[data-template="harita"] .thr-body { position: relative; flex: 1; min-block-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.qr-root[data-template="harita"] .thr-map,
.qr-root[data-template="harita"] .thr-pane { grid-row: 1; grid-column: 1; min-block-size: 0; overflow-y: auto; position: relative; }
.qr-root[data-template="harita"] .thr-map { container-type: inline-size; container-name: thrmap; }
.qr-root[data-template="harita"] .thr-pane { container-type: inline-size; container-name: thrpane; padding-inline: 16px; background: var(--qr-bg); }
.qr-root[data-template="harita"] .thr-app[data-level="map"] .thr-pane { display: none; }
.qr-root[data-template="harita"] .thr-app:not([data-level="map"]) .thr-map { display: none; }

/* world chips */
.qr-root[data-template="harita"] .thr-worldnav {
  position: sticky; inset-block-start: 0; z-index: 2; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding-block: 4px; padding-inline: 12px; background: var(--qr-bg); border-block-end: 1px solid var(--qr-line);
}
.qr-root[data-template="harita"] .thr-worldnav::-webkit-scrollbar { display: none; }
.qr-root[data-template="harita"] .thr-wchip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding-inline: 12px;
  border: 1px solid var(--qr-line); border-radius: var(--thr-pill); background: var(--qr-surface); color: var(--qr-ink);
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.qr-root[data-template="harita"] .thr-wchip .qs-icon { inline-size: 20px; block-size: 20px; }
.qr-root[data-template="harita"] .thr-wchip[aria-current] { background: var(--qr-ink); color: var(--qr-bg); border-color: var(--qr-ink); }

.qr-root[data-template="harita"] .thr-map__inner {
  display: flex; flex-direction: column; gap: calc(var(--thr-gap) * 1.4);
  padding-block: 4px 8px; padding-inline: 12px; max-inline-size: 1120px; margin-inline: auto;
}

.qr-root[data-template="harita"] .thr-world__name { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--qr-font-display); font-weight: 700; }

/* world groups and tiles */
.qr-root[data-template="harita"] .thr-world { display: flex; flex-direction: column; gap: 8px; }
.qr-root[data-template="harita"] .thr-world__name { font-size: 19px; letter-spacing: -.01em; }
.qr-root[data-template="harita"] .thr-world__name .qs-icon { inline-size: 22px; block-size: 22px; color: var(--qr-accent); }
.qr-root[data-template="harita"] .thr-world__count { margin-inline-start: auto; font-family: var(--qr-font-body); font-size: 13px; font-weight: 500; color: var(--qr-ink-2); }
.qr-root[data-template="harita"] .thr-tiles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: calc(8px * var(--qr-density, 1));
}
.qr-root[data-template="harita"] .thr-tile {
  position: relative; min-inline-size: 0; min-block-size: 44px; display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border: 1px solid var(--qr-line); border-radius: var(--thr-radius); background: var(--qr-surface); color: var(--qr-ink);
  font: inherit; text-align: start; cursor: pointer;
}
.qr-root[data-template="harita"] :is(.thr-tile--wide, .thr-tile:only-child) { grid-column: 1 / -1; }
.qr-root[data-template="harita"] .thr-tile[aria-current] { border-color: var(--qr-accent); box-shadow: inset 0 0 0 2px var(--qr-accent); }
.qr-root[data-template="harita"] .thr-tile__art {
  position: relative; display: flex; align-items: center; justify-content: center; flex: none;
  block-size: calc(76px * var(--qr-density, 1)); background-color: color-mix(in srgb, var(--qr-accent) 8%, var(--qr-surface)); color: var(--qr-accent);
}
.qr-root[data-template="harita"] .thr-tile--wide .thr-tile__art { block-size: calc(92px * var(--qr-density, 1)); }
.qr-root[data-template="harita"] .thr-tile__art--plain {
  background-image: linear-gradient(var(--thr-grid) 1px, transparent 1px), linear-gradient(90deg, var(--thr-grid) 1px, transparent 1px);
  background-size: 14px 14px;
}
.qr-root[data-template="harita"] .thr-tile__art--plain .qs-icon { inline-size: 34px; block-size: 34px; }
.qr-root[data-template="harita"] .thr-tile__art .qs-photo { position: absolute; inset: 0; aspect-ratio: auto; inline-size: 100%; block-size: 100%; border-radius: 0; }
.qr-root[data-template="harita"] .thr-tile__label { display: flex; flex-direction: column; gap: 2px; padding-block: 7px 9px; padding-inline: 10px; }
.qr-root[data-template="harita"] .thr-tile__name { font-family: var(--qr-font-display); font-size: 15px; font-weight: 700; line-height: 1.2; }
.qr-root[data-template="harita"] .thr-tile__meta { font-size: 13px; color: var(--qr-ink-2); }

.qr-root[data-template="harita"] .thr-tail { display: flex; flex-direction: column; gap: 12px; padding-block: 12px 24px; }

/* ---------- section pane ---------- */
.qr-root[data-template="harita"] .thr-pane > * { max-inline-size: 1040px; }
.qr-root[data-template="harita"] .thr-sec__head { display: flex; align-items: flex-start; gap: 10px; padding-block: 16px 6px; }
.qr-root[data-template="harita"] .thr-sec__titles { flex: 1; min-inline-size: 0; }
.qr-root[data-template="harita"] .thr-sec__name {
  margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--qr-font-display); font-size: 25px; font-weight: 700; line-height: 1.15; letter-spacing: -.015em;
}
.qr-root[data-template="harita"] .thr-sec__name .qs-icon { inline-size: 26px; block-size: 26px; color: var(--qr-accent); }
.qr-root[data-template="harita"] .thr-sec__meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; color: var(--qr-ink-2); }
.qr-root[data-template="harita"] .thr-sec__steps { flex: none; display: flex; gap: 6px; }

/* neighbour pager */
.qr-root[data-template="harita"] .thr-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-block: 20px 4px; }
.qr-root[data-template="harita"] .thr-page {
  min-inline-size: 0; min-block-size: 60px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  padding-block: 8px; padding-inline: 12px; border: 1px solid var(--qr-line); border-radius: var(--thr-radius); background: var(--qr-surface); color: var(--qr-ink);
  font: inherit; text-align: start; cursor: pointer;
}
.qr-root[data-template="harita"] .thr-page--next { align-items: flex-end; text-align: end; }
.qr-root[data-template="harita"] .thr-page--empty { visibility: hidden; border: 0; background: none; }
.qr-root[data-template="harita"] .thr-page__dir { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--qr-ink-2); }
.qr-root[data-template="harita"] .thr-page__dir .qs-icon { inline-size: 16px; block-size: 16px; }
.qr-root[data-template="harita"] .thr-page__name { font-family: var(--qr-font-display); font-size: 16px; font-weight: 700; }

/* ---------- look settings written on the root (04 §7): section head (data-section-head), search (data-search); desc, venue, corner come from the shared layer / --qr-radius ---------- */
.qr-root[data-template="harita"][data-section-head="susle"] .thr-sec { margin-block-start: 10px; border-block-start: 3px double var(--qr-ink); }
.qr-root[data-template="harita"][data-section-head="susle"] .thr-sec__name { font-size: 22px; letter-spacing: .08em; text-transform: uppercase; }
.qr-root[data-template="harita"][data-section-head="susle"] .thr-world__name { padding-block-end: 4px; border-block-end: 3px double var(--qr-line); letter-spacing: .06em; text-transform: uppercase; }
.qr-root[data-template="harita"] .thr-find__text { display: none; }
.qr-root[data-template="harita"][data-search="acik"] .thr-app[data-level="map"] .thr-crumbrow > .thr-find {
  flex: 1 1 auto; inline-size: auto; min-inline-size: 0; justify-content: flex-start; gap: 8px; padding-inline: 14px; color: var(--qr-ink-2); font: inherit; font-size: 15px;
}
.qr-root[data-template="harita"][data-search="acik"] .thr-app[data-level="map"] .thr-crumbrow > .thr-find .thr-find__text { display: inline; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-root[data-template="harita"][data-search="acik"] .thr-app[data-level="map"] .thr-crumbrow > .thr-crumbnav { flex: none; }
.qr-root[data-template="harita"] .thr-crumbrow > .qs-btn--venue { flex: none; }
/* data-venue: "alt" draws the card at the foot of the map; "ayri" (a button in the strip, venueButton) and "gizli" leave no card even if the attribute flips before the next redraw */
.qr-root[data-template="harita"]:is([data-venue="ayri"], [data-venue="gizli"]) .thr-tail .qs-venue { display: none; }
.qr-root[data-template="harita"] .thr-map__inner > .qs-slot { margin-block: 0; }

/* ---------- layers (detail, search) ---------- */
.qr-root[data-template="harita"] .thr-layer { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; background: transparent; }
.qr-root[data-template="harita"] .thr-layer[hidden] { display: none; }
.qr-root[data-template="harita"] .thr-layer__area { position: relative; flex: 1; min-block-size: 0; }
.qr-root[data-template="harita"] .thr-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .38); }
.qr-root[data-template="harita"] .thr-detail {
  position: absolute; inset: 0; overflow-y: auto; padding-block: 16px 24px; padding-inline: 16px; background: var(--qr-bg);
}
.qr-root[data-template="harita"] .thr-layer--search { background: var(--qr-bg); }
.qr-root[data-template="harita"] .thr-search__bar {
  display: flex; align-items: center; gap: 8px; min-block-size: 56px; padding-block: 6px; padding-inline: 10px;
  background: var(--qr-surface); border-block: 1px solid var(--qr-line);
}
.qr-root[data-template="harita"] .thr-search__input {
  flex: 1; min-inline-size: 0; min-block-size: 44px; padding-inline: 14px; border: 1px solid var(--qr-line); border-radius: var(--thr-pill);
  background: var(--qr-bg); color: var(--qr-ink); font: inherit; font-size: 16px;
}
.qr-root[data-template="harita"] .thr-search__input:focus-visible { outline: 2px solid var(--qr-accent); outline-offset: 1px; }
.qr-root[data-template="harita"] .thr-search__results { flex: 1; min-block-size: 0; overflow-y: auto; padding-block: 8px 20px; padding-inline: 12px; display: flex; flex-direction: column; gap: 4px; }
.qr-root[data-template="harita"] .thr-search__count { margin: 4px 0; font-size: 14px; color: var(--qr-ink-2); }

/* ---------- narrow phone ---------- */
@container stage (max-width: 370px) {
  .qr-root[data-template="harita"] .thr-title { font-size: 16px; }
  .qr-root[data-template="harita"] .thr-back { font-size: 14px; }
  .qr-root[data-template="harita"] .thr-head { gap: 4px; padding-inline: 8px; }
  .qr-root[data-template="harita"] .thr-tools { gap: 2px; }
  .qr-root[data-template="harita"] .thr-tools .qs-lang__btn { padding-inline: 4px; }
}

/* ---------- tablet: one level at a time, full width (crumbs + back return to the map) ---------- */
@container stage (min-width: 700px) {
  .qr-root[data-template="harita"] .thr-crumbrow { order: 0 !important; padding-inline: 16px; }
  .qr-root[data-template="harita"] .thr-head { padding-inline: 20px; }
  .qr-root[data-template="harita"] .thr-pane { padding-inline: 28px; }
  .qr-root[data-template="harita"] .thr-layer__area .thr-detail {
    inset-inline-start: auto; inline-size: min(480px, 100%); border-inline-start: 1px solid var(--qr-line);
    box-shadow: 0 0 32px rgba(0, 0, 0, .18);
  }
  .qr-root[data-template="harita"] .thr-layer--search { inset-inline-start: auto; inline-size: min(520px, 100%); border-inline-start: 1px solid var(--qr-line); box-shadow: 0 0 32px rgba(0, 0, 0, .18); }
}
/* ---------- desktop: the map shrinks to a start pane, the open section sits beside it ---------- */
@container stage (min-width: 1100px) {
  .qr-root[data-template="harita"] .thr-app:not([data-level="map"]) .thr-body { grid-template-columns: 380px minmax(0, 1fr); }
  .qr-root[data-template="harita"] .thr-app:not([data-level="map"]) .thr-map { display: block; grid-column: 1; border-inline-end: 1px solid var(--qr-line); }
  .qr-root[data-template="harita"] .thr-app:not([data-level="map"]) .thr-pane { grid-column: 2; }
  .qr-root[data-template="harita"] .thr-sec__name { font-size: 30px; }
}
/* the open map at width: more tiles per row */
@container thrmap (min-width: 560px) {
  .qr-root[data-template="harita"] .thr-tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .qr-root[data-template="harita"] .thr-map__inner { padding-inline: 24px; }
}
/* a narrow section pane keeps one column whatever the option says */
@container thrpane (max-width: 520px) {
  .qr-root[data-template="harita"] .thr-pane :is(.qs-items, .qs-opts) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- reduced motion ---------- */
.qr-stage[data-motion="reduced"] .qr-root[data-template="harita"] *,
.qr-stage[data-motion="reduced"] .qr-root[data-template="harita"] { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }

/* QR menu prototype — templates/rehber.css (CONTRACT v3). §4 variables only; logical properties only.
   One accent, one ornament: the İznik lattice in the header band, drawn from the palette.
   Rows, cards, the option accordion, campaign, welcome, featured and venue are the shared ones (core/shared.css);
   this file places them and gives them Rehber's character through the --qs-* hooks. */
.qr-root[data-template="rehber"] {
  --trh-soft: color-mix(in srgb, var(--qr-accent) 12%, var(--qr-bg));
  --trh-gap: calc(12px * var(--qr-density, 1));
  --trh-pad: 14px;
  --trh-band: 48px;
  --trh-rail: 94px;
  --trh-ease: cubic-bezier(.2, .8, .2, 1);
  --trh-band-bg: var(--qr-accent);
  --trh-band-ink: var(--qr-on-accent);
  --trh-band-line: color-mix(in srgb, var(--qr-on-accent) 9%, transparent);
  --trh-band-dot: color-mix(in srgb, var(--qr-on-accent) 24%, transparent);
  --qs-name-font: var(--qr-font-body);
  --qs-name-size: 15.5px;
  --qs-name-weight: 600;
  --qs-pad: calc(10px * var(--qr-density, 1));
  background: var(--qr-bg); color: var(--qr-ink); font-family: var(--qr-font-body); font-size: 15px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.qr-root[data-template="rehber"][data-scheme="dark"] {
  --trh-soft: color-mix(in srgb, var(--qr-accent) 18%, var(--qr-surface));
  --trh-band-bg: var(--qr-surface);
  --trh-band-ink: var(--qr-ink);
  --trh-band-line: color-mix(in srgb, var(--qr-accent) 16%, transparent);
  --trh-band-dot: color-mix(in srgb, var(--qr-accent) 42%, transparent);
}
.qr-root[data-template="rehber"] *, .qr-root[data-template="rehber"] *::before, .qr-root[data-template="rehber"] *::after { box-sizing: border-box; }
.qr-root[data-template="rehber"] button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qr-root[data-template="rehber"] ul { list-style: none; margin: 0; padding: 0; }
.qr-root[data-template="rehber"] p, .qr-root[data-template="rehber"] h2 { margin: 0; }
.qr-root[data-template="rehber"] [hidden] { display: none !important; }
.qr-root[data-template="rehber"] :focus-visible { outline: 2px solid var(--qr-accent); outline-offset: 2px; }
.qr-root[data-template="rehber"] .trh-app { position: relative; block-size: 100%; display: flex; flex-direction: column; overflow: hidden; }

/* ---------- header: tile band · search · world switch · (strip) ---------- */
.qr-root[data-template="rehber"] .trh-head {
  position: relative; z-index: 3; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand tools" "search search" "seg seg" "strip strip";
  column-gap: 8px; align-items: center; padding-inline: 12px; padding-block-end: 6px;
  background: var(--qr-bg); border-block-end: 1px solid var(--qr-line);
}
.qr-root[data-template="rehber"] .trh-head::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: var(--trh-band); z-index: -1;
  background-color: var(--trh-band-bg);
  /* İznik lattice: two diagonal hairline grids, a dot and a ring in each 16px tile */
  background-image:
    radial-gradient(circle at 50% 50%, var(--trh-band-dot) 0 1.4px, transparent 2px),
    radial-gradient(circle at 50% 50%, transparent 0 4.6px, var(--trh-band-line) 5px 5.8px, transparent 6.2px),
    repeating-linear-gradient(45deg, var(--trh-band-line) 0 1px, transparent 1px 11.31px),
    repeating-linear-gradient(-45deg, var(--trh-band-line) 0 1px, transparent 1px 11.31px);
  background-size: 16px 16px, 16px 16px, auto, auto;
}
.qr-root[data-template="rehber"][data-scheme="dark"] .trh-head::before { border-block-end: 1px solid var(--qr-line); }
.qr-root[data-template="rehber"] .trh-brand {
  grid-area: brand; display: flex; align-items: center; gap: 8px; min-inline-size: 0; block-size: var(--trh-band); color: var(--trh-band-ink); overflow: hidden;
}
.qr-root[data-template="rehber"] .trh-word { font-family: var(--qr-font-display); font-weight: 800; font-size: 19px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.qr-root[data-template="rehber"] .trh-branch { font-size: 13px; font-weight: 500; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.qr-root[data-template="rehber"] .trh-tools { grid-area: tools; display: flex; align-items: center; min-inline-size: 0; }

.qr-root[data-template="rehber"] .trh-searchrow { grid-area: search; display: flex; align-items: center; gap: 6px; margin-block-start: 8px; min-inline-size: 0; }
.qr-root[data-template="rehber"] .trh-layers { display: flex; gap: 6px; flex: none; }
.qr-root[data-template="rehber"] .trh-layers .qs-btn { padding-inline: 11px; }
.qr-root[data-template="rehber"] .trh-field {
  position: relative; flex: 1; min-inline-size: 0; display: flex; align-items: center; block-size: 44px;
  border-radius: var(--qr-radius, 12px); background: var(--qr-surface); --trh-field-line: var(--qr-line);
  box-shadow: inset 0 0 0 1px var(--trh-field-line);
}
.qr-root[data-template="rehber"] .trh-field:focus-within { --trh-field-line: var(--qr-accent); box-shadow: inset 0 0 0 1px var(--trh-field-line), 0 0 0 3px var(--trh-soft); }
.qr-root[data-template="rehber"] .trh-field__ico { position: absolute; inset-inline-start: 12px; display: flex; color: var(--qr-ink-2); pointer-events: none; }
.qr-root[data-template="rehber"] .trh-field__ico .qs-icon { inline-size: 20px; block-size: 20px; }
.qr-root[data-template="rehber"] .trh-input {
  flex: 1; min-inline-size: 0; block-size: 100%; border: 0; background: transparent; outline: none; color: var(--qr-ink);
  padding-inline: 42px 46px; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
}
.qr-root[data-template="rehber"] .trh-input::placeholder { color: var(--qr-ink-2); }
.qr-root[data-template="rehber"] .trh-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.qr-root[data-template="rehber"] .trh-clear {
  position: absolute; inset-inline-end: 0; inset-block: 0; inline-size: 44px; min-block-size: 44px; border: 0; background: transparent; color: var(--qr-ink-2);
  display: flex; align-items: center; justify-content: center; border-radius: inherit;
}
.qr-root[data-template="rehber"] .trh-clear .qs-icon { inline-size: 20px; block-size: 20px; }

/* searchMode: acik = the field is always on screen · dugme = a search button opens it (it stays open while a query is typed) */
.qr-root[data-template="rehber"] .trh-find { display: none; }
.qr-root[data-template="rehber"][data-search="dugme"] .trh-find { display: inline-flex; }
.qr-root[data-template="rehber"][data-search="dugme"] .trh-find[aria-expanded="true"] { background: var(--qr-accent); color: var(--qr-on-accent); border-color: var(--qr-accent); }
.qr-root[data-template="rehber"][data-search="dugme"] .trh-field { display: none; }
.qr-root[data-template="rehber"][data-search="dugme"] .trh-app[data-find] .trh-field { display: flex; }
.qr-root[data-template="rehber"][data-search="dugme"] .trh-searchrow { justify-content: flex-end; }

.qr-root[data-template="rehber"] .trh-seg {
  grid-area: seg; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
  margin-block-start: 6px; padding: 2px; border-radius: var(--qr-radius, 12px); background: var(--qr-surface);
}
.qr-root[data-template="rehber"] .trh-seg__btn {
  min-block-size: 44px; padding-inline: 4px; border: 0; border-radius: calc(var(--qr-radius, 12px) * .75); background: transparent;
  font-size: 14px; font-weight: 600; color: var(--qr-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qr-root[data-template="rehber"] .trh-seg__btn[aria-current] { background: var(--qr-bg); color: var(--qr-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px var(--qr-line); }
.qr-root[data-template="rehber"][data-scheme="dark"] .trh-seg__btn[aria-current] { background: var(--qr-accent); color: var(--qr-on-accent); box-shadow: none; }

/* nav=top: sliding section strip instead of the rail */
.qr-root[data-template="rehber"] .trh-strip { grid-area: strip; display: none; gap: 6px; overflow-x: auto; margin-block-start: 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.qr-root[data-template="rehber"] .trh-strip::-webkit-scrollbar { display: none; }
.qr-root[data-template="rehber"] .trh-strip__btn {
  flex: none; min-block-size: 44px; padding-inline: 14px; border-radius: 999px; border: 1px solid var(--qr-line);
  background: var(--qr-bg); color: var(--qr-ink); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.qr-root[data-template="rehber"] .trh-strip__btn[aria-current] { background: var(--qr-accent); border-color: var(--qr-accent); color: var(--qr-on-accent); }
.qr-root[data-template="rehber"][data-nav="top"] .trh-strip { display: flex; }
.qr-root[data-template="rehber"][data-nav="top"] .trh-app[data-single] .trh-strip,
.qr-root[data-template="rehber"][data-nav="top"] .trh-app[data-results] .trh-strip { display: none; }

/* ---------- body: index | list | detail ---------- */
.qr-root[data-template="rehber"] .trh-body {
  position: static; flex: 1; min-block-size: 0; display: grid;
  grid-template-columns: var(--trh-rail) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}
.qr-root[data-template="rehber"] .trh-rail {
  position: relative; grid-column: 1; grid-row: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  background: var(--qr-surface); border-inline-end: 1px solid var(--qr-line); padding-block: 6px 140px;
}
.qr-root[data-template="rehber"] .trh-rail::-webkit-scrollbar { display: none; }
.qr-root[data-template="rehber"] .trh-main { position: relative; grid-column: 2; grid-row: 1; overflow-y: auto; overscroll-behavior: contain; container: trhlist / inline-size; outline: none; }
.qr-root[data-template="rehber"] .trh-results { grid-column: 1 / -1; grid-row: 1; overflow-y: auto; overscroll-behavior: contain; padding-block: 4px 40px; }
.qr-root[data-template="rehber"] .trh-app[data-results] .trh-rail,
.qr-root[data-template="rehber"] .trh-app[data-single] .trh-rail,
.qr-root[data-template="rehber"][data-nav="top"] .trh-rail { display: none; }
.qr-root[data-template="rehber"] .trh-app[data-single] .trh-main,
.qr-root[data-template="rehber"][data-nav="top"] .trh-main { grid-column: 1 / -1; }

/* tree: phone/tablet show only the active world's sections, without world headings */
.qr-root[data-template="rehber"] .trh-tree__head { display: none; }
.qr-root[data-template="rehber"] .trh-tree__world:not(.is-on) .trh-tree__secs { display: none; }
.qr-root[data-template="rehber"] .trh-rail__btn {
  position: relative; inline-size: 100%; min-block-size: 56px; padding-block: 9px; padding-inline: 10px 4px; border: 0; background: transparent;
  display: flex; flex-direction: column; justify-content: center; gap: 2px; text-align: start;
}
.qr-root[data-template="rehber"] .trh-rail__name {
  font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--qr-ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; hyphens: auto;
}
.qr-root[data-template="rehber"] .trh-rail__count { font-size: 12.5px; color: var(--qr-ink-2); font-variant-numeric: tabular-nums; }
.qr-root[data-template="rehber"] .trh-rail__btn[aria-current] { background: var(--trh-soft); }
.qr-root[data-template="rehber"] .trh-rail__btn[aria-current]::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: 8px; inline-size: 4px;
  border-start-end-radius: 3px; border-end-end-radius: 3px; background: var(--qr-accent);
}
.qr-root[data-template="rehber"] .trh-rail__btn[aria-current] .trh-rail__name { font-weight: 700; color: var(--qr-accent); }
.qr-root[data-template="rehber"] .trh-rail__btn:focus-visible { outline-offset: -2px; }

/* ---------- list: Rehber's section head, then the shared body ---------- */
.qr-root[data-template="rehber"] .trh-flow > .qs-slot { padding-inline: var(--trh-pad); }
.qr-root[data-template="rehber"] .trh-sec { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.qr-root[data-template="rehber"] .trh-sec[data-live] { content-visibility: visible; }
.qr-root[data-template="rehber"] .trh-sec + .trh-sec { border-block-start: 6px solid var(--qr-surface); }
.qr-root[data-template="rehber"] .trh-flow > .qs-slot + .trh-sec { border-block-start: 6px solid var(--qr-surface); }
.qr-root[data-template="rehber"] .trh-sec__head {
  position: sticky; inset-block-start: 0; z-index: 1; display: flex; flex-direction: column; gap: 1px;
  padding-block: calc(12px * var(--qr-density, 1)) 9px; padding-inline: var(--trh-pad); background: var(--qr-bg); border-block-end: 1px solid var(--qr-line);
}
.qr-root[data-template="rehber"] .trh-sec__title { font-family: var(--qr-font-display); font-size: 17px; font-weight: 750; letter-spacing: -.01em; line-height: 1.2; }
.qr-root[data-template="rehber"] .trh-sec__meta { font-size: 13px; color: var(--qr-ink-2); }
.qr-root[data-template="rehber"] .trh-sec__meta .qs-price { font-size: 13px; font-weight: 400; color: var(--qr-ink-2); }
.qr-root[data-template="rehber"] .trh-flow.is-stepping { animation: trh-step .18s var(--trh-ease); }
@keyframes trh-step { from { opacity: .3; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* sectionHeads=susle: the lattice diamond before the title and a heavier accent rule under the head */
.qr-root[data-template="rehber"][data-section-head="susle"] .trh-sec__head { padding-block-end: 12px; border-block-end: 3px solid var(--qr-accent); }
.qr-root[data-template="rehber"][data-section-head="susle"] .trh-sec__title { display: flex; align-items: center; gap: 9px; }
.qr-root[data-template="rehber"][data-section-head="susle"] .trh-sec__title::before {
  content: ""; flex: none; inline-size: 8px; block-size: 8px; border-radius: 2px; background: var(--qr-accent); transform: rotate(45deg);
}

/* the shared body inside a section: padded to the column, rows hairline-ruled; accordion bands run edge to edge */
.qr-root[data-template="rehber"] .trh-sec__body .qs-body { padding-inline: var(--trh-pad); padding-block: 0 8px; }
.qr-root[data-template="rehber"] .trh-sec__body .qs-sched { padding-block-start: 10px; }
.qr-root[data-template="rehber"] .trh-sec__body .qs-body[data-qr-layout="izgara"],
.qr-root[data-template="rehber"] .trh-sec__body .qs-body[data-qr-layout="vitrin"] { padding-block: 12px; }
.qr-root[data-template="rehber"] .trh-sec__body .qs-it[data-selected] > .qs-it__open { background: var(--trh-soft); }
.qr-root[data-template="rehber"] .trh-sec__body .qs-it--card[data-selected] { border-color: var(--qr-accent); }
.qr-root[data-template="rehber"][data-theme="rehber-gece"] .trh-sec__body .qs-it .qs-price { color: var(--qr-accent); }

.qr-root[data-template="rehber"] .trh-sec__body .qs-grp[data-qs-key] { margin-inline: calc(-1 * var(--trh-pad)); }
.qr-root[data-template="rehber"] .trh-sec__body .qs-grp__toggle { padding-inline: var(--trh-pad); min-block-size: 68px; }
.qr-root[data-template="rehber"] .trh-sec__body .qs-grp__name { font-size: 15.5px; font-weight: 650; }
.qr-root[data-template="rehber"] .trh-sec__body .qs-grp[data-qs-open] .qs-grp__toggle { background: var(--qr-surface); }
.qr-root[data-template="rehber"] .trh-sec__body .qs-grp[data-qs-key] .qs-opts { padding-block: 2px 8px; padding-inline: var(--trh-pad); background: var(--qr-surface); }
.qr-root[data-template="rehber"] .trh-sec__body .qs-grp[data-qs-key] .qs-it--opt > .qs-it__open { padding-inline-start: calc(12px + 48px * var(--qr-thumb-scale, 1)); }
.qr-root[data-template="rehber"][data-transition="satir-acilimi"] .trh-sec__body .qs-grp[data-qs-open] .qs-opts { animation: trh-row .18s var(--trh-ease); }
@keyframes trh-row { from { opacity: .35; } to { opacity: 1; } }

/* end of list */
.qr-root[data-template="rehber"] .trh-tail { padding-inline: var(--trh-pad); border-block-start: 6px solid var(--qr-surface); }
.qr-root[data-template="rehber"] .trh-tail > .qs-venue, .qr-root[data-template="rehber"] .trh-tail > .qs-slot { margin-block: 12px; }

/* ---------- search results ---------- */
.qr-root[data-template="rehber"] .trh-count { padding-block: 10px 4px; padding-inline: var(--trh-pad); font-size: 14px; color: var(--qr-ink-2); }
.qr-root[data-template="rehber"] .trh-rgroup + .trh-rgroup { border-block-start: 6px solid var(--qr-surface); }
.qr-root[data-template="rehber"] .trh-rhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding-block: 12px 4px; padding-inline: var(--trh-pad); font-size: 13.5px; font-weight: 650; }
.qr-root[data-template="rehber"] .trh-rhead__world { color: var(--qr-accent); }
.qr-root[data-template="rehber"] .trh-rhead__sep { color: var(--qr-ink-2); font-weight: 400; margin-inline: 2px; }
.qr-root[data-template="rehber"] .trh-results .qs-result { padding-inline: var(--trh-pad); min-block-size: 56px; }

/* ---------- detail: bottom sheet (phone) ---------- */
.qr-root[data-template="rehber"] .trh-scrim { position: absolute; inset: 0; z-index: 6; background: rgba(0, 0, 0, .42); }
.qr-root[data-template="rehber"] .trh-pane {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 7; max-block-size: 88%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--qr-bg); border-start-start-radius: calc(var(--qr-radius, 12px) * 1.5); border-start-end-radius: calc(var(--qr-radius, 12px) * 1.5); box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
  transform: translateY(105%); visibility: hidden; transition: transform .28s var(--trh-ease), visibility 0s linear .28s;
}
.qr-root[data-template="rehber"] .trh-app[data-detail] .trh-pane { transform: none; visibility: visible; transition: transform .28s var(--trh-ease), visibility 0s; }
.qr-root[data-template="rehber"] .trh-app:not([data-detail]) .trh-pane .trh-rest { display: none; }
.qr-root[data-template="rehber"] .trh-detail { position: relative; padding: 16px; padding-block-start: 22px; }
.qr-root[data-template="rehber"] .trh-grab { position: absolute; inset-block-start: 8px; inset-inline-start: calc(50% - 20px); inline-size: 40px; block-size: 4px; border-radius: 2px; background: var(--qr-line); }
.qr-root[data-template="rehber"] .trh-close {
  position: absolute; inset-block-start: 22px; inset-inline-end: 22px; z-index: 2; inline-size: 44px; block-size: 44px; border-radius: 999px;
  border: 1px solid var(--qr-line); background: var(--qr-bg); color: var(--qr-ink); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.qr-root[data-template="rehber"] .trh-close .qs-icon { inline-size: 20px; block-size: 20px; }
.qr-root[data-template="rehber"] .trh-crumb { display: flex; flex-wrap: wrap; gap: 4px; margin-block-end: 10px; font-size: 13px; font-weight: 600; color: var(--qr-accent); padding-inline-end: 56px; }
.qr-root[data-template="rehber"] .trh-detail .qs-detail__name { font-size: 23px; font-weight: 750; letter-spacing: -.015em; }
.qr-root[data-template="rehber"] .trh-detail .qs-detail__note { background: var(--trh-soft); color: var(--qr-ink); border-radius: calc(var(--qr-radius, 12px) * .8); padding: 9px 12px; font-weight: 600; }

/* resting column content (desktop): the venue card, or the opening hours when there is none */
.qr-root[data-template="rehber"] .trh-rest { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.qr-root[data-template="rehber"] .trh-hours { padding: 14px 16px; border-radius: var(--qr-radius, 12px); background: var(--qr-surface); }
.qr-root[data-template="rehber"] .trh-hours__label { font-size: 14px; color: var(--qr-ink-2); }
.qr-root[data-template="rehber"] .trh-hours__value { font-size: 17px; font-weight: 700; }

/* narrow phone: the branch gives way first */
@container stage (max-width: 419px) {
  .qr-root[data-template="rehber"] .trh-branch { display: none; }
  .qr-root[data-template="rehber"] .trh-word { font-size: 18px; }
}

/* list column ≥ 520 (tablet and desktop centre): the shared grids take the theme's column count, measured on the column, not the stage */
@container trhlist (min-width: 520px) {
  .qr-root[data-template="rehber"] .trh-sec__body .qs-body:not([data-qr-layout="izgara"]) .qs-items,
  .qr-root[data-template="rehber"] .trh-sec__body .qs-grp:not([data-qs-single="1"]) .qs-opts { grid-template-columns: repeat(min(2, var(--qr-cols-tablet, 1)), minmax(0, 1fr)); }
}
@container trhlist (min-width: 760px) {
  .qr-root[data-template="rehber"] .trh-sec__body .qs-body:not([data-qr-layout="izgara"]) .qs-items,
  .qr-root[data-template="rehber"] .trh-sec__body .qs-grp:not([data-qs-single="1"]) .qs-opts { grid-template-columns: repeat(var(--qr-cols-desktop, 2), minmax(0, 1fr)); }
}

/* ================= tablet (700–1099) ================= */
@container stage (min-width: 700px) {
  .qr-root[data-template="rehber"] { --trh-rail: 210px; --trh-band: 56px; --trh-pad: 20px; }
  .qr-root[data-template="rehber"] .trh-head {
    padding-inline: 20px; padding-block-end: 12px; column-gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand . tools" "search seg seg";
  }
  .qr-root[data-template="rehber"] .trh-searchrow { margin-block-start: 12px; }
  .qr-root[data-template="rehber"] .trh-field { block-size: 48px; }
  .qr-root[data-template="rehber"] .trh-seg { margin-block-start: 12px; min-inline-size: 360px; }
  .qr-root[data-template="rehber"] .trh-word { font-size: 21px; }
  .qr-root[data-template="rehber"][data-nav="top"] .trh-strip { display: none; }
  .qr-root[data-template="rehber"][data-nav="top"] .trh-rail { display: block; }
  .qr-root[data-template="rehber"][data-nav="top"] .trh-main { grid-column: 2; }
  .qr-root[data-template="rehber"] .trh-app[data-single] .trh-rail { display: none; }
  .qr-root[data-template="rehber"] .trh-app[data-single] .trh-main { grid-column: 1 / -1; }
  .qr-root[data-template="rehber"] .trh-app[data-results] .trh-rail { display: none; }
  .qr-root[data-template="rehber"] .trh-rail__btn { min-block-size: 50px; padding-inline: 18px 14px; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .qr-root[data-template="rehber"] .trh-rail__name { font-size: 15px; }
  .qr-root[data-template="rehber"] .trh-sec__head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .qr-root[data-template="rehber"] .trh-sec__title { font-size: 20px; }
  .qr-root[data-template="rehber"] .trh-results { padding-inline: 8px; }

  /* detail: end-side drawer */
  .qr-root[data-template="rehber"] .trh-pane {
    inset-inline-start: auto; inset-block: 0; inline-size: min(440px, 62%); max-block-size: none; border-radius: 0;
    box-shadow: 0 0 30px rgba(0, 0, 0, .18); transform: translateX(105%);
  }
  .qr-root[data-template="rehber"][dir="rtl"] .trh-pane { transform: translateX(-105%); }
  .qr-root[data-template="rehber"] .trh-app[data-detail] .trh-pane { transform: none; }
  .qr-root[data-template="rehber"] .trh-grab { display: none; }
  .qr-root[data-template="rehber"] .trh-detail { padding-block-start: 16px; }
  .qr-root[data-template="rehber"] .trh-close { inset-block-start: 14px; inset-inline-end: 14px; }
}

/* ================= desktop (≥ 1100): tree | grid | detail ================= */
@container stage (min-width: 1100px) {
  .qr-root[data-template="rehber"] { --trh-rail: 268px; --trh-band: 72px; --trh-pad: 24px; }
  .qr-root[data-template="rehber"] .trh-head {
    grid-template-columns: var(--trh-rail) minmax(0, 1fr) auto; grid-template-areas: "brand search tools";
    padding-inline: 0 24px; padding-block-end: 0; block-size: var(--trh-band); border-block-end: 0; column-gap: 20px;
  }
  .qr-root[data-template="rehber"] .trh-head::before { block-size: 100%; }
  .qr-root[data-template="rehber"] .trh-brand { padding-inline-start: 24px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; }
  .qr-root[data-template="rehber"] .trh-word { font-size: 22px; line-height: 1.1; }
  .qr-root[data-template="rehber"] .trh-searchrow { margin-block-start: 0; max-inline-size: 820px; }
  .qr-root[data-template="rehber"] .trh-field { block-size: 48px; background: var(--qr-bg); --trh-field-line: transparent; }
  .qr-root[data-template="rehber"] .trh-seg { display: none !important; }

  .qr-root[data-template="rehber"] .trh-body { position: relative; grid-template-columns: var(--trh-rail) minmax(0, 1fr) 372px; }
  .qr-root[data-template="rehber"] .trh-results { grid-column: 2; padding-block: 12px 40px; padding-inline: 16px; }
  .qr-root[data-template="rehber"] .trh-rail,
  .qr-root[data-template="rehber"][data-nav="top"] .trh-rail,
  .qr-root[data-template="rehber"] .trh-app[data-single] .trh-rail,
  .qr-root[data-template="rehber"] .trh-app[data-results] .trh-rail { display: block; padding-block: 12px 40px; }
  .qr-root[data-template="rehber"] .trh-main,
  .qr-root[data-template="rehber"][data-nav="top"] .trh-main,
  .qr-root[data-template="rehber"] .trh-app[data-single] .trh-main { grid-column: 2; }

  .qr-root[data-template="rehber"] .trh-tree__world + .trh-tree__world { border-block-start: 1px solid var(--qr-line); }
  .qr-root[data-template="rehber"] .trh-tree__head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; column-gap: 10px; align-items: center; inline-size: 100%; min-block-size: 52px;
    padding-inline: 24px 18px; border: 0; background: transparent; text-align: start; font-size: 16px; font-weight: 700; color: var(--qr-ink);
  }
  .qr-root[data-template="rehber"] .trh-tree__name { font-family: var(--qr-font-display); }
  .qr-root[data-template="rehber"] .trh-tree__head > .qs-icon { inline-size: 18px; block-size: 18px; color: var(--qr-ink-2); }
  .qr-root[data-template="rehber"] .trh-tree__world.is-on .trh-tree__head { color: var(--qr-accent); }
  .qr-root[data-template="rehber"] .trh-tree__world.is-on .trh-tree__head > .qs-icon { transform: rotate(90deg); color: var(--qr-accent); }
  .qr-root[data-template="rehber"] .trh-tree__head:focus-visible { outline-offset: -2px; }
  .qr-root[data-template="rehber"] .trh-tree__secs { padding-block-end: 10px; }
  .qr-root[data-template="rehber"] .trh-rail__btn { min-block-size: 44px; padding-block: 8px; padding-inline: 38px 18px; }
  .qr-root[data-template="rehber"] .trh-rail__name { font-size: 14.5px; -webkit-line-clamp: 1; }
  .qr-root[data-template="rehber"] .trh-rail__btn[aria-current]::before { inset-inline-start: 22px; inset-block: 10px; inline-size: 3px; border-radius: 2px; }

  /* permanent detail column */
  .qr-root[data-template="rehber"] .trh-pane,
  .qr-root[data-template="rehber"][dir="rtl"] .trh-pane {
    position: relative; grid-column: 3; grid-row: 1; inset: auto; inline-size: auto; max-block-size: none;
    transform: none; visibility: visible; transition: none; border-radius: 0; box-shadow: none;
    border-inline-start: 1px solid var(--qr-line); background: var(--qr-bg);
  }
  .qr-root[data-template="rehber"] .trh-app:not([data-detail]) .trh-pane .trh-rest { display: flex; }
  .qr-root[data-template="rehber"] .trh-scrim { display: none !important; }
  .qr-root[data-template="rehber"] .trh-detail { padding: 20px; }
  .qr-root[data-template="rehber"] .trh-close { inset-block-start: 14px; inset-inline-end: 14px; }
}

/* ---------- Gece (teknolojik): same skeleton, app-like surfaces ---------- */
.qr-root[data-template="rehber"][data-theme="rehber-gece"] .trh-sec__title { letter-spacing: 0; }

/* ---------- transitions off: 'sakin' and reduced motion ---------- */
.qr-root[data-template="rehber"][data-transition="sakin"] .trh-pane,
.qr-root[data-template="rehber"][data-transition="sakin"] .trh-app[data-detail] .trh-pane { transition: none; }
.qr-stage[data-motion="reduced"] .qr-root[data-template="rehber"] *,
.qr-stage[data-motion="reduced"] .qr-root[data-template="rehber"] *::before,
.qr-stage[data-motion="reduced"] .qr-root[data-template="rehber"] *::after { transition: none !important; animation: none !important; }

/* QR menu prototype — templates/sahne.css (CONTRACT v3). §4 variables only, logical properties only,
   stage container queries only. Prefix: tsh-. The cast, campaign, welcome and featured rows are the shared parts. */
.qr-root[data-template="sahne"] {
  --tsh-gap: calc(14px * var(--qr-density, 1));
  --tsh-radius: var(--qr-radius, 12px);
  --tsh-pill: min(999px, calc(var(--qr-radius, 12px) * 84));   /* corner setting: 0 for sharp, a pill for soft */
  --qs-slot-max: 100%;
}
.qr-root[data-template="sahne"] .tsh-app {
  display: flex; flex-direction: column; block-size: 100%; min-block-size: 0;
  background: var(--qr-bg); color: var(--qr-ink); font-family: var(--qr-font-body);
}

/* ---------- header ---------- */
.qr-root[data-template="sahne"] .tsh-head {
  position: relative; z-index: 5;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px;
  padding-block: 4px; padding-inline: 16px; background: var(--qr-surface); border-block-end: 1px solid var(--qr-line);
}
/* phone: one header row — the name beside the four 44 px tools (search, language, my list, filter) */
.qr-root[data-template="sahne"] .tsh-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; }
.qr-root[data-template="sahne"] .tsh-tools-wrap { margin-inline-start: auto; }
.qr-root[data-template="sahne"] .tsh-lang-full { display: none; }
.qr-root[data-template="sahne"] .tsh-langbtn { font: inherit; font-size: 14px; font-weight: 600; }
.qr-root[data-template="sahne"] .tsh-langpop {
  position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 16px; z-index: 20; padding: 4px;
  background: var(--qr-surface); border: 1px solid var(--qr-line); border-radius: calc(var(--qr-radius, 12px) * 1.33); box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.qr-root[data-template="sahne"] .tsh-langpop .qs-lang { display: flex; flex-direction: column; padding: 0; border: 0; background: transparent; }
.qr-root[data-template="sahne"] .tsh-langpop .qs-lang__btn { min-inline-size: 96px; }
.qr-root[data-template="sahne"] .tsh-brand .qs-logo { block-size: 36px; inline-size: auto; flex: none; }
.qr-root[data-template="sahne"] .tsh-brand__text { min-width: 0; }
.qr-root[data-template="sahne"] .tsh-brand__name {
  margin: 0; font-family: var(--qr-font-display); font-size: 18px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qr-root[data-template="sahne"] .tsh-brand__branch { margin: 0; font-size: 14px; color: var(--qr-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr-root[data-template="sahne"] .tsh-tools-wrap,
.qr-root[data-template="sahne"] .tsh-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.qr-root[data-template="sahne"] .tsh-iconbtn {
  inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 1px solid var(--qr-line); border-radius: var(--tsh-pill); background: var(--qr-bg); color: var(--qr-ink); cursor: pointer;
}
.qr-root[data-template="sahne"] .tsh-iconbtn[aria-expanded="true"] { background: var(--qr-accent); color: var(--qr-on-accent); border-color: var(--qr-accent); }
.qr-root[data-template="sahne"] .tsh-iconbtn .qs-icon { inline-size: 20px; block-size: 20px; }
.qr-root[data-template="sahne"] .tsh-searchrow {
  display: flex; align-items: center; gap: 8px; padding-block: 8px; padding-inline: 16px;
  background: var(--qr-surface); border-block-end: 1px solid var(--qr-line); color: var(--qr-ink-2);
}
.qr-root[data-template="sahne"] .tsh-search {
  flex: 1; min-width: 0; min-block-size: 44px; padding-inline: 12px; border: 1px solid var(--qr-line); border-radius: min(var(--qr-radius, 10px), 10px);
  background: var(--qr-bg); color: var(--qr-ink); font: inherit; font-size: 16px;
}

/* ---------- worlds + act strip (phone: side dissolves into the column) ---------- */
.qr-root[data-template="sahne"] .tsh-side { display: contents; }
.qr-root[data-template="sahne"] .tsh-worlds { display: flex; min-width: 0; background: var(--qr-surface); border-block-end: 1px solid var(--qr-line); }
.qr-root[data-template="sahne"][data-nav="bottom"] .tsh-worlds { order: 10; border-block-end: 0; border-block-start: 1px solid var(--qr-line); }
.qr-root[data-template="sahne"] .tsh-world {
  flex: 1; min-width: 0; min-block-size: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding-inline: 4px; border: 0; border-block-end: 3px solid transparent; background: transparent; color: var(--qr-ink-2);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.qr-root[data-template="sahne"][data-nav="bottom"] .tsh-world { border-block-end: 0; border-block-start: 3px solid transparent; }
.qr-root[data-template="sahne"] .tsh-world .qs-icon { inline-size: 20px; block-size: 20px; }
.qr-root[data-template="sahne"] .tsh-world__name { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-root[data-template="sahne"] .tsh-world[aria-current] { color: var(--qr-ink); border-block-end-color: var(--qr-accent); }
.qr-root[data-template="sahne"][data-nav="bottom"] .tsh-world[aria-current] { border-block-start-color: var(--qr-accent); }
.qr-root[data-template="sahne"] .tsh-prog__title { display: none; }
/* phone: the header act strip gives way to the thin sticky strip inside the scroll column */
.qr-root[data-template="sahne"] .tsh-side .tsh-acts { display: none; }
.qr-root[data-template="sahne"] .tsh-actbar {
  position: sticky; inset-block-start: 0; z-index: 3; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  padding-inline: 8px; background: var(--qr-bg); border-block-end: 1px solid var(--qr-line);
}
.qr-root[data-template="sahne"] .tsh-actbar .tsh-actlink {
  gap: 6px; padding-inline: 10px; border: 0; border-block-end: 2px solid transparent; border-radius: 0; color: var(--qr-ink-2);
}
.qr-root[data-template="sahne"] .tsh-actbar .tsh-actlink[aria-current] { background: transparent; color: var(--qr-ink); border-block-end-color: var(--qr-accent); }
.qr-root[data-template="sahne"] .tsh-actbar .tsh-actlink[aria-current] .tsh-actlink__n { color: var(--qr-accent); }
.qr-root[data-template="sahne"] .tsh-actbar .tsh-actlink:focus-visible { outline-offset: -2px; }
.qr-root[data-template="sahne"] .tsh-acts {
  display: flex; gap: 6px; overflow-x: auto; padding-block: 8px; padding-inline: 12px; scrollbar-width: none;
  background: var(--qr-bg); border-block-end: 1px solid var(--qr-line);
}
.qr-root[data-template="sahne"] .tsh-actlink {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding-inline: 14px;
  border: 1px solid var(--qr-line); border-radius: var(--tsh-pill); background: transparent; color: var(--qr-ink);
  font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer;
}
.qr-root[data-template="sahne"] .tsh-actlink__n { font-family: var(--qr-font-display); font-size: 14px; font-weight: 600; color: var(--qr-ink-2); font-variant-numeric: tabular-nums; }
.qr-root[data-template="sahne"] .tsh-actlink[aria-current] { background: var(--qr-accent); color: var(--qr-on-accent); border-color: var(--qr-accent); }
.qr-root[data-template="sahne"] .tsh-actlink[aria-current] .tsh-actlink__n { color: inherit; }

.qr-root[data-template="sahne"] button:focus-visible,
.qr-root[data-template="sahne"] .tsh-search:focus-visible { outline: 2px solid var(--qr-accent); outline-offset: 2px; }
.qr-root[data-template="sahne"] .tsh-world:focus-visible { outline-offset: -2px; }

/* ---------- main column ---------- */
.qr-root[data-template="sahne"] .tsh-main { position: relative; flex: 1; min-block-size: 0; overflow-y: auto; overflow-x: hidden; }
.qr-root[data-template="sahne"] .tsh-inner { max-inline-size: 1180px; margin-inline: auto; padding-inline: 16px; }
.qr-root[data-template="sahne"] .tsh-act {
  padding-block: var(--tsh-gap) calc(var(--tsh-gap) * 1.6);
  content-visibility: auto; contain-intrinsic-size: auto 900px;
}
.qr-root[data-template="sahne"] .tsh-act ~ .tsh-act { border-block-start: 1px solid var(--qr-line); }

/* scene */
.qr-root[data-template="sahne"] .tsh-scene { position: relative; border-radius: var(--tsh-radius); overflow: hidden; }
.qr-root[data-template="sahne"] .tsh-scene__frame { position: relative; aspect-ratio: 9 / 4; background: var(--qr-surface); }
.qr-root[data-template="sahne"] .tsh-scene__poster.qs-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; }
.qr-root[data-template="sahne"] .tsh-scene__video {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0;
  transition: opacity .4s ease-out; pointer-events: none;
}
.qr-root[data-template="sahne"] .tsh-scene.is-live .tsh-scene__video { opacity: 1; }
/* the curtain: a band of the page colour under the caption keeps ink/bg contrast over any frame */
.qr-root[data-template="sahne"] .tsh-scene__veil {
  position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 78%; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--qr-bg) 94%, transparent) 0%, color-mix(in srgb, var(--qr-bg) 86%, transparent) 42%, transparent 100%);
}
.qr-root[data-template="sahne"] .tsh-cap { position: relative; padding: 14px 16px; }
.qr-root[data-template="sahne"] .tsh-scene--media .tsh-cap { position: absolute; inset-inline: 0; inset-block-end: 0; padding-inline-end: 64px; }
.qr-root[data-template="sahne"] .tsh-cap p { margin: 0; }
.qr-root[data-template="sahne"] .tsh-cap__act {
  font-family: var(--qr-font-display); font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--qr-ink-2);
}
.qr-root[data-template="sahne"] .tsh-cap__name {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; font-family: var(--qr-font-display); font-size: 26px; font-weight: 600; line-height: 1.12;
}
.qr-root[data-template="sahne"] .tsh-cap__name .qs-icon { inline-size: 24px; block-size: 24px; flex: none; color: var(--qr-accent); }
.qr-root[data-template="sahne"] .tsh-cap__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; color: var(--qr-ink-2); }
.qr-root[data-template="sahne"] .tsh-scene--card {
  background: var(--qr-surface); border: 1px solid var(--qr-line); border-block-start: 4px solid var(--qr-accent);
}
.qr-root[data-template="sahne"] .tsh-scene--card .tsh-cap { padding-block: calc(22px * var(--qr-density, 1)); }
.qr-root[data-template="sahne"] .tsh-scene--card .tsh-cap__name { font-size: 30px; }

/* motion toggle (only rendered when a video is attached) */
.qr-root[data-template="sahne"] .tsh-toggle {
  position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 2;
  inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--qr-line); border-radius: var(--tsh-pill); background: color-mix(in srgb, var(--qr-bg) 88%, transparent); color: var(--qr-ink); cursor: pointer;
}
.qr-root[data-template="sahne"] .tsh-toggle__glyph { inline-size: 12px; block-size: 14px; border-inline: 4px solid currentColor; box-sizing: border-box; }
.qr-root[data-template="sahne"] .tsh-toggle[aria-pressed="true"] .tsh-toggle__glyph {
  inline-size: 0; block-size: 0; border-inline: 0; border-block: 8px solid transparent; border-inline-start: 13px solid currentColor; margin-inline-start: 4px;
}

/* entering scene ("sahne-gecisi" / "canli"); never applied under calm or reduced motion */
.qr-root[data-template="sahne"] .tsh-enter { animation: tsh-curtain .26s ease-out; }
@keyframes tsh-curtain { from { clip-path: inset(0 0 22% 0); opacity: .55; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.qr-stage[data-motion="reduced"] .qr-root[data-template="sahne"] .tsh-enter { animation: none; }
/* motion gate (reduced motion or Save-Data): no animation or transition anywhere in the template */
.qr-root[data-template="sahne"] .tsh-still *,
.qr-root[data-template="sahne"] .tsh-still *::before,
.qr-root[data-template="sahne"] .tsh-still *::after { animation: none !important; transition: none !important; }
.qr-stage[data-motion="reduced"] .qr-root[data-template="sahne"] .tsh-scene__video { transition: none; }

/* ---------- cast: the shared section body ----------
   Card grids follow the chosen column counts; rows and option groups keep the shared look. */
.qr-root[data-template="sahne"] .tsh-cast { margin-block-start: var(--tsh-gap); min-width: 0; }
.qr-root[data-template="sahne"] .tsh-cast .qs-body[data-qr-layout="izgara"] .qs-items { grid-template-columns: repeat(var(--qr-cols-phone, 2), minmax(0, 1fr)); }
/* phone: rows and option lists stay one column (the column setting is for the cards; two rows side by side are too narrow to read) */
@container stage (max-width: 699px) {
  .qr-root[data-template="sahne"] .tsh-cast .qs-body:not([data-qr-layout="izgara"]) .qs-items,
  .qr-root[data-template="sahne"] .tsh-cast .qs-grp:not([data-qs-single="1"]) .qs-opts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- results, tail ---------- */
.qr-root[data-template="sahne"] .tsh-results { padding-block: 12px; max-inline-size: 760px; }
.qr-root[data-template="sahne"] .tsh-results__list { display: flex; flex-direction: column; gap: 6px; }
.qr-root[data-template="sahne"] .tsh-count { margin: 0 0 8px; font-size: 14px; color: var(--qr-ink-2); }
.qr-root[data-template="sahne"] .tsh-tail { display: flex; flex-direction: column; gap: 12px; padding-block: 20px 28px; }

/* ---------- detail ---------- */
.qr-root[data-template="sahne"] .tsh-detailwrap { position: absolute; inset: 0; z-index: 30; }
.qr-root[data-template="sahne"] .tsh-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.qr-root[data-template="sahne"] .tsh-panel {
  position: absolute; inset-inline: 0; inset-block-end: 0; max-block-size: 88%; overflow-y: auto;
  padding: 16px; padding-block-start: 60px; background: var(--qr-bg); color: var(--qr-ink);
  border-start-start-radius: calc(var(--qr-radius, 12px) * 1.5); border-start-end-radius: calc(var(--qr-radius, 12px) * 1.5); border-block-start: 3px solid var(--qr-accent);
}
.qr-root[data-template="sahne"] .tsh-close {
  position: absolute; inset-block-start: 8px; inset-inline-end: 10px; z-index: 2; inline-size: 44px; block-size: 44px;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--qr-line); border-radius: var(--tsh-pill);
  background: var(--qr-surface); color: var(--qr-ink); cursor: pointer;
}

/* ---------- tablet ---------- */
@container stage (min-width: 700px) {
  .qr-root[data-template="sahne"] .tsh-head { padding-block: 6px; padding-inline: 24px; }
  .qr-root[data-template="sahne"] .tsh-lang-full { display: inline-flex; }
  .qr-root[data-template="sahne"] .tsh-langbtn,
  .qr-root[data-template="sahne"] .tsh-langpop,
  .qr-root[data-template="sahne"] .tsh-actbar { display: none; }
  .qr-root[data-template="sahne"] .tsh-side .tsh-acts { display: flex; }
  .qr-root[data-template="sahne"] .tsh-world { min-block-size: 50px; }
  .qr-root[data-template="sahne"][data-nav="bottom"] .tsh-worlds { order: 0; border-block-start: 0; border-block-end: 1px solid var(--qr-line); }
  .qr-root[data-template="sahne"][data-nav="bottom"] .tsh-world { border-block-start: 0; border-block-end: 3px solid transparent; }
  .qr-root[data-template="sahne"][data-nav="bottom"] .tsh-world[aria-current] { border-block-end-color: var(--qr-accent); }
  .qr-root[data-template="sahne"] .tsh-world { flex: 0 1 auto; flex-direction: row; gap: 8px; padding-inline: 20px; font-size: 15px; }
  .qr-root[data-template="sahne"] .tsh-worlds { justify-content: center; }
  .qr-root[data-template="sahne"] .tsh-acts { justify-content: safe center; padding-inline: 24px; }
  .qr-root[data-template="sahne"] .tsh-inner { max-inline-size: 920px; padding-inline: 24px; }
  .qr-root[data-template="sahne"] .tsh-scene__frame { aspect-ratio: 21 / 9; }
  .qr-root[data-template="sahne"][data-section-head="yalin"] .tsh-scene__frame { aspect-ratio: 4 / 1; }
  .qr-root[data-template="sahne"] .tsh-cap { padding: 18px 22px; }
  .qr-root[data-template="sahne"] .tsh-cap__name { font-size: 30px; }
  .qr-root[data-template="sahne"] .tsh-cast .qs-body[data-qr-layout="izgara"] .qs-items { grid-template-columns: repeat(var(--qr-cols-tablet, 3), minmax(0, 1fr)); }
  .qr-root[data-template="sahne"] .tsh-panel {
    inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; inline-size: 440px; max-inline-size: 100%; max-block-size: none;
    border-radius: 0; border-block-start: 0; border-inline-start: 3px solid var(--qr-accent);
  }
}

/* ---------- landscape tablet: the scene stands beside its cast so dishes share the first screen ---------- */
@container stage (min-width: 700px) and (orientation: landscape) {
  .qr-root[data-template="sahne"] .tsh-inner { max-inline-size: 1180px; }
  .qr-root[data-template="sahne"] .tsh-act { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 24px; align-items: start; }
  .qr-root[data-template="sahne"] .tsh-scene { position: sticky; inset-block-start: 16px; }
  .qr-root[data-template="sahne"] .tsh-scene__frame { aspect-ratio: 4 / 3; }
  .qr-root[data-template="sahne"] .tsh-cap__name { font-size: 26px; }
  .qr-root[data-template="sahne"] .tsh-cast { margin-block-start: 0; }
  .qr-root[data-template="sahne"] .tsh-cast .qs-body[data-qr-layout="izgara"] .qs-items { grid-template-columns: repeat(var(--qr-cols-tablet, 3), minmax(0, 1fr)); }
}

/* ---------- desktop: programme column + scene beside its cast ---------- */
@container stage (min-width: 1100px) {
  .qr-root[data-template="sahne"] .tsh-app {
    display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "head head" "search search" "side main";
  }
  .qr-root[data-template="sahne"] .tsh-head { grid-area: head; }
  .qr-root[data-template="sahne"] .tsh-searchrow { grid-area: search; }
  .qr-root[data-template="sahne"] .tsh-side {
    grid-area: side; display: flex; flex-direction: column; min-block-size: 0; overflow-y: auto;
    background: var(--qr-surface); border-inline-end: 1px solid var(--qr-line);
  }
  .qr-root[data-template="sahne"] .tsh-main { grid-area: main; }
  .qr-root[data-template="sahne"] .tsh-worlds,
  .qr-root[data-template="sahne"][data-nav="bottom"] .tsh-worlds { flex-direction: column; justify-content: flex-start; order: 0; border: 0; padding-block: 10px; }
  .qr-root[data-template="sahne"] .tsh-world,
  .qr-root[data-template="sahne"][data-nav="bottom"] .tsh-world {
    flex: none; justify-content: flex-start; gap: 10px; padding-inline: 18px; min-block-size: 46px;
    border: 0; border-inline-start: 3px solid transparent;
  }
  .qr-root[data-template="sahne"] .tsh-world[aria-current],
  .qr-root[data-template="sahne"][data-nav="bottom"] .tsh-world[aria-current] { border-inline-start-color: var(--qr-accent); background: var(--qr-bg); }
  .qr-root[data-template="sahne"] .tsh-prog__title {
    display: block; margin: 8px 0 4px; padding-inline: 18px; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--qr-ink-2);
  }
  .qr-root[data-template="sahne"] .tsh-acts {
    flex-direction: column; overflow-x: visible; padding-block: 4px 16px; padding-inline: 10px; background: transparent; border: 0; justify-content: flex-start;
  }
  .qr-root[data-template="sahne"] .tsh-actlink { justify-content: flex-start; white-space: normal; text-align: start; border-radius: 10px; border-color: transparent; }
  .qr-root[data-template="sahne"] .tsh-inner { max-inline-size: 1180px; padding-inline: 32px; }
  .qr-root[data-template="sahne"] .tsh-act {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 32px; align-items: start;
    padding-block: calc(28px * var(--qr-density, 1));
  }
  .qr-root[data-template="sahne"] .tsh-scene { position: sticky; inset-block-start: 20px; }
  .qr-root[data-template="sahne"] .tsh-scene__frame { aspect-ratio: 4 / 3; }
  .qr-root[data-template="sahne"] .tsh-cast { margin-block-start: 0; }
  .qr-root[data-template="sahne"] .tsh-cast .qs-body[data-qr-layout="izgara"] .qs-items { grid-template-columns: repeat(var(--qr-cols-desktop, 3), minmax(0, 1fr)); }
}

/* ---------- settings the core writes to the root ---------- */
/* data-section-head: "yalin" = a slim act scene (the type card, or a short band when the act has media);
   "gorselli" = a full scene frame for every act with media or a cover picture (the cover is fetched in sahne.js) */
@container stage (max-width: 699px) {
  .qr-root[data-template="sahne"][data-section-head="yalin"] .tsh-scene__frame { aspect-ratio: 3 / 1; }
}
@container stage (min-width: 700px) and (orientation: landscape) {
  .qr-root[data-template="sahne"][data-section-head="yalin"] .tsh-scene__frame { aspect-ratio: 16 / 9; }
}
@container stage (min-width: 1100px) {
  .qr-root[data-template="sahne"][data-section-head="yalin"] .tsh-scene__frame { aspect-ratio: 16 / 9; }
}
.qr-root[data-template="sahne"][data-section-head="yalin"] .tsh-cap__name { font-size: 22px; }
.qr-root[data-template="sahne"][data-section-head="yalin"] .tsh-scene--card .tsh-cap__name { font-size: 24px; }
.qr-root[data-template="sahne"][data-section-head="yalin"] .tsh-scene--card .tsh-cap { padding-block: calc(14px * var(--qr-density, 1)); }
.qr-root[data-template="sahne"][data-section-head="gorselli"] .tsh-cap__name { font-size: 28px; }

/* data-search: "acik" = the field lives in the header row (no button, no extra row); the name text gives way on a phone */
.qr-root[data-template="sahne"][data-search="acik"] .tsh-head .tsh-searchrow { flex: 1 1 0; min-width: 0; padding: 0; border: 0; background: transparent; }
.qr-root[data-template="sahne"][data-search="acik"] .tsh-brand { flex: 0 0 auto; }
.qr-root[data-template="sahne"][data-search="acik"] .tsh-brand__text { display: none; }

/* data-venue: "ayri" puts the venue button among the header tools (the card itself opens in the core layer) */
.qr-root[data-template="sahne"][data-venue="ayri"] .tsh-tools { gap: 4px; }

/* QR menu prototype — templates/secki.css ("Seçki": one section = one composed menu page).
   §4 variables only; logical properties only; breakpoints on the stage container. */
.qr-root[data-template="secki"] {
  --tsk-pad: calc(16px * var(--qr-density, 1));
  --tsk-gap: calc(22px * var(--qr-density, 1));
  --tsk-thumb: calc(72px * var(--qr-thumb-scale, 1));
}

/* ---------- frame ---------- */
.qr-root[data-template="secki"] .tsk-app {
  position: relative; display: grid; block-size: 100%; min-block-size: 0;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas: "bar" "search" "nav" "main";
  background: var(--qr-bg); color: var(--qr-ink); font-family: var(--qr-font-body); font-size: 15px; line-height: 1.4;
}
.qr-root[data-template="secki"] .tsk-app button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.qr-root[data-template="secki"] .tsk-app button:focus-visible,
.qr-root[data-template="secki"] .tsk-search:focus-visible { outline: 2px solid var(--qr-accent); outline-offset: -2px; }

.qr-root[data-template="secki"] .tsk-bar {
  grid-area: bar; display: flex; align-items: center; gap: 6px; min-inline-size: 0;
  padding-block: 6px; padding-inline: 12px; background: var(--qr-surface); border-block-end: 1px solid var(--qr-line);
}
.qr-root[data-template="secki"] .tsk-indexbtn {
  display: none; flex: none; align-items: center; gap: 6px; min-block-size: 44px; padding-inline: 12px;
  border: 1px solid var(--qr-line); border-radius: 999px; background: transparent; font-weight: 600; cursor: pointer;
}
.qr-root[data-template="secki"] .tsk-bartitle { display: none; flex: 1; min-inline-size: 0; margin: 0; }
.qr-root[data-template="secki"] .tsk-bartitle > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-root[data-template="secki"] .tsk-bartitle__brand { font-family: var(--qr-font-display); font-size: 22px; font-weight: 600; line-height: 1.1; }
.qr-root[data-template="secki"] .tsk-bartitle__world { display: none !important; font-family: var(--qr-font-display); font-size: 19px; font-weight: 600; }
.qr-root[data-template="secki"] .tsk-barlang { flex: none; margin-inline-end: auto; }
.qr-root[data-template="secki"] .tsk-bartools { flex: none; display: flex; gap: 6px; }
.qr-root[data-template="secki"] .tsk-searchbtn { flex: none; background: transparent; cursor: pointer; }

.qr-root[data-template="secki"] .tsk-searchrow {
  grid-area: search; display: flex; align-items: center; gap: 8px;
  padding-block: 8px; padding-inline: 12px; background: var(--qr-surface); border-block-end: 1px solid var(--qr-line);
}
.qr-root[data-template="secki"] .tsk-search {
  flex: 1; min-inline-size: 0; min-block-size: 44px; padding-inline: 14px; border: 1px solid var(--qr-line); border-radius: 999px;
  background: var(--qr-bg); color: var(--qr-ink); font: inherit; font-size: 16px;
}
.qr-root[data-template="secki"] .tsk-searchclose { background: transparent; cursor: pointer; }

/* ---------- navigation: phone, nav = top ---------- */
.qr-root[data-template="secki"] .tsk-nav {
  grid-area: nav; display: flex; flex-direction: column; min-inline-size: 0;
  background: var(--qr-surface); border-block-end: 1px solid var(--qr-line);
}
.qr-root[data-template="secki"] .tsk-navlang, .qr-root[data-template="secki"] .tsk-navlabel { display: none; }
.qr-root[data-template="secki"] .tsk-worlds { display: flex; min-inline-size: 0; }
.qr-root[data-template="secki"] .tsk-world {
  flex: 1; min-inline-size: 0; min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding-inline: 4px; border: 0; border-block-end: 2px solid transparent; background: transparent;
  color: var(--qr-ink-2); font-size: 14px; font-weight: 600; cursor: pointer;
}
.qr-root[data-template="secki"] .tsk-world .qs-icon { display: none; inline-size: 20px; block-size: 20px; }
.qr-root[data-template="secki"] .tsk-world span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-root[data-template="secki"] .tsk-world[aria-current] { color: var(--qr-ink); border-block-end-color: var(--qr-accent); }
.qr-root[data-template="secki"] .tsk-strip {
  display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding-inline: 8px; border-block-start: 1px solid var(--qr-line);
}
.qr-root[data-template="secki"] .tsk-strip::-webkit-scrollbar { display: none; }
.qr-root[data-template="secki"] .tsk-chip {
  flex: none; min-block-size: 46px; padding-inline: 12px; border: 0; background: transparent;
  color: var(--qr-ink-2); font-size: 15px; white-space: nowrap; cursor: pointer;
}
.qr-root[data-template="secki"] .tsk-chip[aria-current] { color: var(--qr-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--qr-accent); }
.qr-root[data-template="secki"] .tsk-navscrim { position: absolute; inset: 0; z-index: 25; background: rgba(0, 0, 0, .42); }

/* ---------- navigation: phone, nav = side (index drawer) ---------- */
.qr-root[data-template="secki"][data-nav="side"] .tsk-indexbtn { display: inline-flex; }
.qr-root[data-template="secki"][data-nav="side"] .tsk-barlang { display: none; }
.qr-root[data-template="secki"][data-nav="side"] .tsk-bartitle { display: block; }
.qr-root[data-template="secki"][data-nav="side"] .tsk-bartitle__brand { display: none; }
.qr-root[data-template="secki"][data-nav="side"] .tsk-bartitle__world { display: block !important; }
.qr-root[data-template="secki"][data-nav="side"] .tsk-nav {
  display: none; position: absolute; z-index: 30; inset-block: 0; inset-inline-start: 0; inline-size: min(320px, 86%);
  overflow-y: auto; overscroll-behavior: contain; padding-block: 12px; border-block-end: 0; border-inline-end: 1px solid var(--qr-line);
  box-shadow: 0 0 32px rgba(0, 0, 0, .22);
}
.qr-root[data-template="secki"][data-nav="side"] .tsk-app[data-tsk-index="open"] .tsk-nav { display: flex; }
.qr-root[data-template="secki"][data-nav="side"] .tsk-navlang { display: block; padding-inline: 16px; padding-block-end: 12px; }

/* vertical index (side drawer on phone, column on tablet and desktop) */
.qr-root[data-template="secki"][data-nav="side"] .tsk-worlds { flex-direction: column; }
.qr-root[data-template="secki"][data-nav="side"] .tsk-world { flex: none; justify-content: flex-start; padding-inline: 16px; border-block-end: 0; border-inline-start: 3px solid transparent; font-size: 16px; }
.qr-root[data-template="secki"][data-nav="side"] .tsk-world .qs-icon { display: inline-block; }
.qr-root[data-template="secki"][data-nav="side"] .tsk-world[aria-current] { border-inline-start-color: var(--qr-accent); }
.qr-root[data-template="secki"][data-nav="side"] .tsk-navlabel {
  display: block; margin: 0; margin-block-start: 12px; padding-block: 10px 4px; padding-inline: 16px;
  border-block-start: 1px solid var(--qr-line); color: var(--qr-ink-2); font-size: 14px;
}
.qr-root[data-template="secki"][data-nav="side"] .tsk-strip { flex-direction: column; overflow: visible; padding-inline: 0; border-block-start: 0; }
.qr-root[data-template="secki"][data-nav="side"] .tsk-chip {
  text-align: start; white-space: normal; padding-inline: 16px; border-inline-start: 3px solid transparent; box-shadow: none;
}
.qr-root[data-template="secki"][data-nav="side"] .tsk-chip[aria-current] { border-inline-start-color: var(--qr-accent); }

/* ---------- reading area ---------- */
.qr-root[data-template="secki"] .tsk-main {
  grid-area: main; position: relative; min-block-size: 0; overflow-y: auto; overflow-x: hidden;
  padding-inline: var(--tsk-pad); padding-block-end: 24px;
}
.qr-root[data-template="secki"] .tsk-flow,
.qr-root[data-template="secki"] .tsk-results,
.qr-root[data-template="secki"] .tsk-tail { max-inline-size: 680px; margin-inline: auto; }
.qr-root[data-template="secki"] .tsk-results { padding-block: 8px; }
.qr-root[data-template="secki"] .tsk-count { margin: 6px 0; color: var(--qr-ink-2); font-size: 14px; }
.qr-root[data-template="secki"] .tsk-tail { display: flex; flex-direction: column; gap: 12px; padding-block-start: 24px; }

/* masthead */
.qr-root[data-template="secki"] .tsk-mast { padding-block: 18px 0; text-align: center; }
.qr-root[data-template="secki"] .tsk-mast p { margin: 0; }
.qr-root[data-template="secki"] .tsk-mast__brand { font-family: var(--qr-font-display); font-size: 20px; font-weight: 600; letter-spacing: .02em; }
.qr-root[data-template="secki"] .tsk-mast__line { color: var(--qr-ink-2); font-size: 14px; }
.qr-root[data-template="secki"] .tsk-mast__world {
  display: none; margin: 14px 0 0; font-family: var(--qr-font-display); font-size: 44px; font-weight: 600; line-height: 1.05;
}

/* ---------- a page ---------- */
.qr-root[data-template="secki"] .tsk-page { padding-block: var(--tsk-gap) 4px; content-visibility: auto; contain-intrinsic-size: auto 900px; }
.qr-root[data-template="secki"] .tsk-page__head { margin-block: 8px 16px; text-align: center; }
.qr-root[data-template="secki"] .tsk-orn { position: relative; display: block; block-size: 14px; margin-block-end: 12px; }
.qr-root[data-template="secki"] .tsk-orn::before {
  content: ""; position: absolute; inset-inline: 12%; inset-block-start: 5px; border-block-start: 4px double var(--qr-line);
}
.qr-root[data-template="secki"] .tsk-orn::after {
  content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 3px; inline-size: 8px; block-size: 8px;
  background: var(--qr-accent); box-shadow: 0 0 0 6px var(--qr-bg); transform: translateX(-50%) rotate(45deg);
}
.qr-root[data-template="secki"][dir="rtl"] .tsk-orn::after { transform: translateX(50%) rotate(45deg); }
.qr-root[data-template="secki"] .tsk-page__name { margin: 0; font-family: var(--qr-font-display); font-size: 34px; font-weight: 600; line-height: 1.1; }
.qr-root[data-template="secki"] .tsk-page__price { margin: 6px 0 0; font-size: 15px; }

/* page foot: next page / next world */
.qr-root[data-template="secki"] .tsk-page__foot { margin-block-start: 12px; }
.qr-root[data-template="secki"] .tsk-next {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k a" "n a"; align-items: center;
  inline-size: 100%; min-block-size: 60px; padding-block: 12px; padding-inline: 0; border: 0; border-block-start: 1px solid var(--qr-line);
  background: transparent; text-align: start; cursor: pointer;
}
.qr-root[data-template="secki"] .tsk-next__kicker { grid-area: k; color: var(--qr-ink-2); font-size: 14px; }
.qr-root[data-template="secki"] .tsk-next__name { grid-area: n; display: flex; align-items: center; gap: 8px; font-family: var(--qr-font-display); font-size: 21px; font-weight: 600; }
.qr-root[data-template="secki"] .tsk-next__arrow { grid-area: a; color: var(--qr-accent); }
.qr-root[data-template="secki"][dir="rtl"] .tsk-next__arrow .qs-icon { transform: scaleX(-1); }

/* ---------- detail ---------- */
.qr-root[data-template="secki"] .tsk-sheetwrap { position: absolute; inset: 0; z-index: 40; }
.qr-root[data-template="secki"] .tsk-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.qr-root[data-template="secki"] .tsk-sheet {
  position: absolute; inset-inline: 0; inset-block-end: 0; max-block-size: 88%; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px; padding-block-start: 64px; background: var(--qr-bg); color: var(--qr-ink);
  border-start-start-radius: 16px; border-start-end-radius: 16px; box-shadow: 0 -10px 34px rgba(0, 0, 0, .22);
}
.qr-root[data-template="secki"] .tsk-close { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 2; cursor: pointer; }

/* ---------- motion (none when reduced or "sakin": JS never adds these classes then) ---------- */
.qr-root[data-template="secki"] .tsk-in-step { animation: tsk-step .2s ease-out; }
.qr-root[data-template="secki"] .tsk-in-fade { animation: tsk-fade .22s ease-out; }
.qr-root[data-template="secki"] .tsk-in-perde { animation: tsk-perde .26s ease-out; }
.qr-root[data-template="secki"] .tsk-sheet--rise { animation: tsk-step .2s ease-out; }
.qr-root[data-template="secki"] .tsk-sheet--trail { animation: tsk-trail .22s ease-out; }
.qr-root[data-template="secki"] .tsk-sheet--curtain { animation: tsk-perde .26s ease-out; }
@keyframes tsk-step { from { transform: translateY(14px); opacity: .45; } to { transform: none; opacity: 1; } }
@keyframes tsk-fade { from { opacity: .35; } to { opacity: 1; } }
@keyframes tsk-perde { from { clip-path: inset(0 0 55% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tsk-trail { from { transform: scale(.55); opacity: .2; } to { transform: none; opacity: 1; } }

/* ---------- theme: Lokanta (rich) ---------- */
.qr-root[data-template="secki"][data-theme="secki-lokanta"] .tsk-page__name,
.qr-root[data-template="secki"][data-theme="secki-lokanta"] .tsk-mast__world { font-style: italic; }
.qr-root[data-template="secki"][data-theme="secki-lokanta"][lang="ar"] .tsk-page__name,
.qr-root[data-template="secki"][data-theme="secki-lokanta"][lang="ar"] .tsk-mast__world { font-style: normal; }
.qr-root[data-template="secki"][data-theme="secki-lokanta"] .tsk-mast { padding-block-end: 0; }
.qr-root[data-template="secki"][data-theme="secki-lokanta"] .tsk-mast__world::after {
  content: ""; display: block; inline-size: 120px; margin-block-start: 14px; margin-inline: auto; border-block-start: 4px double var(--qr-line);
}
.qr-root[data-template="secki"][data-theme="secki-lokanta"] .tsk-chip { font-family: var(--qr-font-display); font-size: 18px; font-style: italic; }
.qr-root[data-template="secki"][data-theme="secki-lokanta"][lang="ar"] .tsk-chip { font-style: normal; font-size: 16px; }
.qr-root[data-template="secki"][data-theme="secki-lokanta"] .tsk-next__name { font-style: italic; }
.qr-root[data-template="secki"][data-theme="secki-lokanta"][lang="ar"] .tsk-next__name { font-style: normal; }

/* ---------- theme: Sade (plain) ---------- */
.qr-root[data-template="secki"][data-theme="secki-sade"] .tsk-mast__world { font-size: 36px; font-weight: 700; letter-spacing: -.01em; }
.qr-root[data-template="secki"][data-theme="secki-sade"] .tsk-page__name { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.qr-root[data-template="secki"][data-theme="secki-sade"] .tsk-next__name { font-size: 18px; font-weight: 700; }
.qr-root[data-template="secki"][data-theme="secki-sade"] .tsk-chip { min-block-size: 44px; margin-block: 4px; }
.qr-root[data-template="secki"][data-theme="secki-sade"] .tsk-chip[aria-current] { background: var(--qr-accent); color: var(--qr-on-accent); box-shadow: none; }
.qr-root[data-template="secki"][data-theme="secki-sade"][data-nav="side"] .tsk-chip { border-radius: 0; margin-block: 0; }
.qr-root[data-template="secki"][data-theme="secki-sade"][data-nav="side"] .tsk-chip[aria-current] { background: transparent; color: var(--qr-ink); }

/* ---------- look settings written on the root (04 §7) ---------- */
/* sectionHead: susle = ornament, centred name (the card's own); yalin = start-aligned name over a rule; gorselli = cover band above the name */
.qr-root[data-template="secki"][data-section-head="yalin"] .tsk-orn { display: none; }
.qr-root[data-template="secki"][data-section-head="yalin"] .tsk-mast, .qr-root[data-template="secki"][data-section-head="yalin"] .tsk-page__head { text-align: start; }
.qr-root[data-template="secki"][data-section-head="yalin"] .tsk-page__head { padding-block-end: 10px; border-block-end: 2px solid var(--qr-ink); }
.qr-root[data-template="secki"] .tsk-band { display: none; }
.qr-root[data-template="secki"][data-section-head="gorselli"] .tsk-band { display: block; margin-block-end: 12px; }
.qr-root[data-template="secki"][data-section-head="gorselli"] .tsk-band .qs-photo { border-radius: 0; }
/* descLines: "tam" and "gizli" come from the shared layer; a hidden line tightens the row */
.qr-root[data-template="secki"][data-desc="gizli"] { --qs-pad: calc(11px * var(--qr-density, 1)); }
.qr-root[data-template="secki"][data-desc="tam"] .qs-it__desc { padding-block-end: 2px; }
/* venuePlace: "alt" draws the card at the foot; "ayri" (button in the bar) and "gizli" leave no card */
.qr-root[data-template="secki"]:is([data-venue="ayri"], [data-venue="gizli"]) .tsk-tail .qs-venue { display: none; }
/* corner: the radius setting reaches the search field, the index button, chips and the detail sheet */
.qr-root[data-template="secki"] .tsk-search { border-radius: calc(var(--qr-radius, 12px) * 100); }
.qr-root[data-template="secki"] .tsk-indexbtn { border-radius: calc(var(--qr-radius, 12px) * 100); }
.qr-root[data-template="secki"][data-theme="secki-sade"] .tsk-chip { border-radius: calc(var(--qr-radius, 12px) * 100); }
.qr-root[data-template="secki"] .tsk-sheet { border-start-start-radius: var(--qr-radius, 12px); border-start-end-radius: var(--qr-radius, 12px); }
/* searchMode: "dugme" opens the field from the button; "acik" keeps it in the page */
.qr-root[data-template="secki"][data-search="acik"] .tsk-searchbtn, .qr-root[data-template="secki"][data-search="acik"] .tsk-searchclose { display: none; }

/* ---------- tablet: index column + one wide page ---------- */
@container stage (min-width: 700px) {
  .qr-root[data-template="secki"] { --tsk-pad: calc(32px * var(--qr-density, 1)); --tsk-thumb: calc(88px * var(--qr-thumb-scale, 1)); }
  .qr-root[data-template="secki"] .tsk-app {
    grid-template-columns: 228px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "bar bar" "search search" "nav main";
  }
  .qr-root[data-template="secki"] .tsk-bar, .qr-root[data-template="secki"] .tsk-searchrow { padding-inline: 20px; gap: 10px; }
  .qr-root[data-template="secki"] .tsk-indexbtn,
  .qr-root[data-template="secki"][data-nav="side"] .tsk-indexbtn { display: none; }
  .qr-root[data-template="secki"] .tsk-bartitle,
  .qr-root[data-template="secki"][data-nav="side"] .tsk-bartitle { display: block; }
  .qr-root[data-template="secki"][data-nav="side"] .tsk-bartitle__brand { display: block; }
  .qr-root[data-template="secki"][data-nav="side"] .tsk-bartitle__world { display: none !important; }
  .qr-root[data-template="secki"] .tsk-barlang,
  .qr-root[data-template="secki"][data-nav="side"] .tsk-barlang { display: block; margin-inline-end: 0; }
  .qr-root[data-template="secki"] .tsk-navscrim { display: none; }

  .qr-root[data-template="secki"] .tsk-nav,
  .qr-root[data-template="secki"][data-nav="side"] .tsk-nav {
    display: flex; position: static; inline-size: auto; overflow-y: auto; padding-block: 12px; box-shadow: none;
    border-block-end: 0; border-inline-end: 1px solid var(--qr-line);
  }
  .qr-root[data-template="secki"][data-nav="side"] .tsk-navlang { display: none; }
  .qr-root[data-template="secki"] .tsk-worlds { flex-direction: column; }
  .qr-root[data-template="secki"] .tsk-world {
    flex: none; justify-content: flex-start; padding-inline: 16px; border-block-end: 0; border-inline-start: 3px solid transparent; font-size: 16px;
  }
  .qr-root[data-template="secki"] .tsk-world .qs-icon { display: inline-block; }
  .qr-root[data-template="secki"] .tsk-world[aria-current] { border-inline-start-color: var(--qr-accent); }
  .qr-root[data-template="secki"] .tsk-navlabel {
    display: block; margin: 12px 0 0; padding-block: 10px 4px; padding-inline: 16px; border-block-start: 1px solid var(--qr-line); color: var(--qr-ink-2); font-size: 14px;
  }
  .qr-root[data-template="secki"] .tsk-strip { flex-direction: column; overflow: visible; padding-inline: 0; border-block-start: 0; }
  .qr-root[data-template="secki"] .tsk-chip,
  .qr-root[data-template="secki"][data-theme="secki-sade"] .tsk-chip {
    text-align: start; white-space: normal; padding-inline: 16px; margin-block: 0; border-radius: 0;
    border-inline-start: 3px solid transparent; box-shadow: none;
  }
  .qr-root[data-template="secki"] .tsk-chip[aria-current],
  .qr-root[data-template="secki"][data-theme="secki-sade"] .tsk-chip[aria-current] {
    background: transparent; color: var(--qr-ink); box-shadow: none; border-inline-start-color: var(--qr-accent);
  }

  .qr-root[data-template="secki"] .tsk-flow, .qr-root[data-template="secki"] .tsk-results, .qr-root[data-template="secki"] .tsk-tail { max-inline-size: 800px; }
  .qr-root[data-template="secki"] .tsk-mast { padding-block-start: 26px; }
  .qr-root[data-template="secki"] .tsk-mast__world { display: block; font-size: 52px; }
  .qr-root[data-template="secki"] .tsk-page__name { font-size: 40px; }
  .qr-root[data-template="secki"][data-theme="secki-sade"] .tsk-page__name { font-size: 30px; }
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 24px; row-gap: 8px; align-content: start;
  }

  .qr-root[data-template="secki"] .tsk-sheet {
    inset: auto; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%;
    inline-size: min(560px, 86%); max-block-size: 86%; border-radius: var(--qr-radius, 12px); box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  }
  .qr-root[data-template="secki"][dir="rtl"] .tsk-sheet { translate: 50% -50%; }
}

/* ---------- desktop: an open menu, pages in two columns with a binding line (slots and the masthead span both) ---------- */
@container stage (min-width: 1100px) {
  .qr-root[data-template="secki"] { --tsk-pad: calc(40px * var(--qr-density, 1)); }
  .qr-root[data-template="secki"] .tsk-app { grid-template-columns: 244px minmax(0, 1fr); }
  .qr-root[data-template="secki"] .tsk-flow {
    position: relative; max-inline-size: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: start;
  }
  .qr-root[data-template="secki"] .tsk-flow::before {
    content: ""; position: absolute; inset-block: 120px 8px; inset-inline-start: calc(50% - .5px); inline-size: 1px; background: var(--qr-line);
  }
  .qr-root[data-template="secki"][data-theme="secki-lokanta"] .tsk-flow::before { box-shadow: 0 0 22px 5px color-mix(in srgb, var(--qr-ink) 7%, transparent); }
  .qr-root[data-template="secki"] .tsk-flow > .tsk-mast, .qr-root[data-template="secki"] .tsk-flow > .qs-slot { grid-column: 1 / -1; position: relative; z-index: 1; background: var(--qr-bg); }
  .qr-root[data-template="secki"] .tsk-page__name { font-size: 36px; }
  .qr-root[data-template="secki"][data-theme="secki-sade"] .tsk-page__name { font-size: 28px; }
  /* a page without a facing page (single-section world) opens across the spread */
  .qr-root[data-template="secki"] .tsk-flow > .tsk-page:only-of-type { grid-column: 1 / -1; }
}

/* QR menu prototype — templates/sofra.css (CONTRACT v3).
   Colour, type and shape come only from the §4 variables; logical properties only. Rows, groups, campaign, welcome and featured are the shared layer's
   (core/shared.css): this file sets their characters through the --qs-* hooks and draws only the card's own chrome.
   Type scale (px): 13 · 14.5 · 16 · 18 · 22 · 30 · 42. Display face = names and headings, body face = interface. */

.qr-root[data-template="sofra"] {
  --tsf-d: var(--qr-density, 1);
  --tsf-gutter: 20px;
  --tsf-rule: color-mix(in srgb, var(--qr-accent) 45%, var(--qr-line));
  --tsf-bar-h: 60px;
  --tsf-r: var(--qr-radius, 12px);
  --qs-name-size: 18px;
  --qs-name-weight: 500;
  --qs-lead: 1.5px dotted var(--tsf-rule);
  --qs-pad: calc(15px * var(--tsf-d));
  --qs-gap: calc(18px * var(--tsf-d));
  --qs-promo-border: var(--tsf-rule);
  background: var(--qr-bg);
  color: var(--qr-ink);
  font-family: var(--qr-font-body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.qr-root[data-template="sofra"] *,
.qr-root[data-template="sofra"] *::before,
.qr-root[data-template="sofra"] *::after { box-sizing: border-box; }
.qr-root[data-template="sofra"] :where(h1, h2, h3, p, ul, li) { margin: 0; padding: 0; }
.qr-root[data-template="sofra"] :where(ul) { list-style: none; }
.qr-root[data-template="sofra"] :where(button) {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: start;
  -webkit-tap-highlight-color: transparent;
}
.qr-root[data-template="sofra"] :where(button, input):focus-visible { outline: 2px solid var(--qr-accent); outline-offset: 2px; border-radius: 4px; }
.qr-root[data-template="sofra"] .tsf-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.qr-root[data-template="sofra"] .tsf-n { font-size: 13px; color: var(--qr-ink-2); font-variant-numeric: tabular-nums; flex: none; }

/* ---------- frame ---------- */
.qr-root[data-template="sofra"] .tsf-app { position: relative; block-size: 100%; min-block-size: 0; display: flex; flex-direction: column; background: var(--qr-bg); }
.qr-root[data-template="sofra"] .tsf-scroll { flex: 1; min-block-size: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.qr-root[data-template="sofra"] .tsf-side,
.qr-root[data-template="sofra"] .tsf-rail,
.qr-root[data-template="sofra"] .tsf-bar { display: none; }

/* ---------- brand + tools ---------- */
.qr-root[data-template="sofra"] .tsf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-block: 14px 10px; padding-inline: var(--tsf-gutter) 12px; }
.qr-root[data-template="sofra"] .tsf-brand { flex: 1 1 120px; min-width: 0; }
.qr-root[data-template="sofra"] .tsf-side .tsf-brand { flex: none; }
.qr-root[data-template="sofra"] .tsf-wordmark { font-family: var(--qr-font-display); font-weight: 500; font-size: 28px; line-height: 1.05; letter-spacing: -0.01em; color: var(--qr-ink); }
.qr-root[data-template="sofra"] .tsf-meta { margin-block-start: 3px; font-size: 13px; color: var(--qr-ink-2); }
.qr-root[data-template="sofra"] .tsf-hours { white-space: nowrap; font-variant-numeric: tabular-nums; }
.qr-root[data-template="sofra"] .tsf-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qr-root[data-template="sofra"] .tsf-searchbtn { border-color: transparent; background: transparent; }
.qr-root[data-template="sofra"][data-search="acik"] .tsf-searchbtn { display: none; }
.qr-root[data-template="sofra"] .tsf-searchrow { display: none; }
.qr-root[data-template="sofra"][data-search="acik"] .tsf-searchrow { display: block; }

/* searchMode "acik": the field stays in the page, under the brand; "dugme" opens a layer from the button */
.qr-root[data-template="sofra"] .tsf-searchrow { padding-block: 0 4px; padding-inline: var(--tsf-gutter); }
.qr-root[data-template="sofra"] .tsf-searchrow .tsf-search-field { border-block-end: 1px solid var(--qr-ink); }
.qr-root[data-template="sofra"] .tsf-results { padding-block-start: 4px; }

/* ---------- shared areas: the ust slot sits before the sticky navigation, after / alt inside the flow ---------- */
.qr-root[data-template="sofra"] .tsf-slot-top { padding-inline: var(--tsf-gutter); }
.qr-root[data-template="sofra"] .tsf-slot-top:empty { display: none; }
.qr-root[data-template="sofra"] .tsf-flow > .qs-slot { margin-block: calc(18px * var(--tsf-d)) 0; }

/* ---------- sticky navigation (phone) ---------- */
.qr-root[data-template="sofra"] .tsf-nav { position: sticky; inset-block-start: 0; z-index: 5; background: var(--qr-bg); border-block-end: 1px solid var(--qr-line); }
.qr-root[data-template="sofra"] .tsf-tabs { display: flex; gap: 18px; padding-inline: var(--tsf-gutter); border-block-end: 1px solid var(--qr-line); overflow: hidden; }
.qr-root[data-template="sofra"] .tsf-nav--one .tsf-tabs { border-block-end: 0; }
.qr-root[data-template="sofra"] .tsf-tab { position: relative; min-block-size: 46px; display: flex; align-items: center; flex: none; }
.qr-root[data-template="sofra"] .tsf-tab-t { font-family: var(--qr-font-display); font-weight: 500; font-size: 17px; color: var(--qr-ink-2); white-space: nowrap; }
.qr-root[data-template="sofra"] .tsf-tab[aria-current] .tsf-tab-t { color: var(--qr-ink); }
.qr-root[data-template="sofra"] .tsf-tab[aria-current]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px; background: var(--qr-accent); }
.qr-root[data-template="sofra"] .tsf-strip { display: flex; gap: 2px; overflow-x: auto; padding-inline: 12px; scrollbar-width: none; }
.qr-root[data-template="sofra"] .tsf-strip::-webkit-scrollbar { display: none; }
.qr-root[data-template="sofra"] .tsf-strip[hidden] { display: none; }
.qr-root[data-template="sofra"] .tsf-chip { flex: none; min-block-size: 44px; display: flex; align-items: center; padding-inline: 1px; }
.qr-root[data-template="sofra"] .tsf-chip-t { font-size: 14.5px; font-weight: 500; color: var(--qr-ink-2); padding-block: 7px; padding-inline: 10px; border-radius: calc(var(--tsf-r) + 4px); white-space: nowrap; transition: background-color .18s, color .18s; }
.qr-root[data-template="sofra"] .tsf-chip[aria-current] .tsf-chip-t { background: var(--qr-ink); color: var(--qr-bg); }

/* nav = bottom: world tabs leave the sticky strip and become a bottom bar */
.qr-root[data-template="sofra"][data-nav="bottom"] .tsf-tabs { display: none; }
.qr-root[data-template="sofra"][data-nav="bottom"] .tsf-bar {
  display: flex; flex: none; block-size: var(--tsf-bar-h); background: var(--qr-surface); border-block-start: 1px solid var(--qr-line);
}
.qr-root[data-template="sofra"] .tsf-bartab { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--qr-ink-2); }
.qr-root[data-template="sofra"] .tsf-bartab .qs-icon { inline-size: 22px; block-size: 22px; }
.qr-root[data-template="sofra"] .tsf-bartab-t { font-size: 13px; font-weight: 600; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-root[data-template="sofra"] .tsf-bartab[aria-current] { color: var(--qr-ink); }
.qr-root[data-template="sofra"] .tsf-bartab[aria-current]::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 22%; block-size: 2px; background: var(--qr-accent); }

/* ---------- flow ---------- */
.qr-root[data-template="sofra"] .tsf-flow { padding-inline: var(--tsf-gutter); padding-block-end: 112px; }
.qr-root[data-template="sofra"] .tsf-flow.is-enter { animation: tsf-step .2s ease-out both; }
.qr-root[data-template="sofra"][data-transition="yumusak-belirme"] .tsf-flow.is-enter { animation: tsf-fade .16s ease-out both; }
@keyframes tsf-step { from { opacity: .3; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tsf-fade { from { opacity: .3; } to { opacity: 1; } }
.qr-root[data-template="sofra"] .tsf-world-head { padding-block: calc(26px * var(--tsf-d)) 4px; }
.qr-root[data-template="sofra"] .tsf-world-title { font-family: var(--qr-font-display); font-weight: 400; font-size: 42px; line-height: 1; letter-spacing: -0.02em; }
.qr-root[data-template="sofra"] .tsf-world-meta { margin-block-start: 8px; font-size: 13px; color: var(--qr-ink-2); }
.qr-root[data-template="sofra"] .tsf-sec { padding-block-start: calc(34px * var(--tsf-d)); content-visibility: auto; contain-intrinsic-size: auto 800px; }
.qr-root[data-template="sofra"] .tsf-sec.is-solo { padding-block-start: 10px; }
.qr-root[data-template="sofra"] .tsf-sec-head { display: flex; align-items: baseline; gap: 12px; padding-block-end: 4px; }
.qr-root[data-template="sofra"] .tsf-sec-title { min-width: 0; font-family: var(--qr-font-display); font-style: italic; font-weight: 400; font-size: 30px; line-height: 1.08; letter-spacing: -0.01em; color: var(--qr-ink); }
.qr-root[data-template="sofra"] .tsf-sec-rule { flex: 1 1 24px; min-inline-size: 16px; block-size: 1px; background: var(--tsf-rule); align-self: center; margin-block-start: 6px; }
.qr-root[data-template="sofra"] .tsf-sec-rule--lead { display: none; }
.qr-root[data-template="sofra"] .tsf-sec-count { flex: none; font-size: 13px; color: var(--qr-ink-2); white-space: nowrap; }
.qr-root[data-template="sofra"] .tsf-sec-head.is-flat { flex-wrap: wrap; row-gap: 8px; }
.qr-root[data-template="sofra"] .tsf-sec-head.is-flat .tsf-sec-rule { display: none; }
.qr-root[data-template="sofra"] .tsf-sec-count--flat { flex: 1 0 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block-start: 8px; border-block-start: 1px solid var(--tsf-rule); }
.qr-root[data-template="sofra"] .tsf-sec-count--flat .qs-amount { font-size: 15px; color: var(--qr-ink-2); }
.qr-root[data-template="sofra"] .tsf-sec-count--flat .qs-price { font-size: 16px; }

/* sectionHeads: yalin = title · rule · count; susle = centred title between two rules; gorselli = a cover band above the heading */
.qr-root[data-template="sofra"][data-section-head="susle"] .tsf-sec-head { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
.qr-root[data-template="sofra"][data-section-head="susle"] .tsf-sec-rule--lead { display: block; }
.qr-root[data-template="sofra"][data-section-head="susle"] .tsf-sec-head:not(.is-flat) .tsf-sec-count { flex: 1 0 100%; text-align: center; }
.qr-root[data-template="sofra"] .tsf-band { display: none; }
.qr-root[data-template="sofra"][data-section-head="gorselli"] .tsf-band { display: block; margin-inline: calc(var(--tsf-gutter) * -1); margin-block-end: 16px; }
.qr-root[data-template="sofra"] .tsf-band .qs-photo { border-radius: 0; }

/* rows come from the shared body: the card's own characters */
.qr-root[data-template="sofra"] .qs-it__pic .qs-photo--thumb { border-radius: var(--qr-thumb-radius, 12px); }
.qr-root[data-template="sofra"] .qs-it[data-qr-soldout="1"] .qs-it__line .qs-name,
.qr-root[data-template="sofra"] .qs-it[data-qr-soldout="1"] .qs-it__desc,
.qr-root[data-template="sofra"] .qs-it[data-qs-sched="out"] .qs-it__line .qs-name,
.qr-root[data-template="sofra"] .qs-it[data-qs-sched="out"] .qs-it__desc { opacity: .55; }
.qr-root[data-template="sofra"] .qs-it__open:hover .qs-it__line .qs-name { text-decoration: underline; text-decoration-color: var(--tsf-rule); text-underline-offset: 3px; }
.qr-root[data-template="sofra"] .qs-it__open[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--qr-accent); background: var(--qr-surface); }
.qr-root[data-template="sofra"][dir="rtl"] .qs-it__open[aria-pressed="true"] { box-shadow: inset -3px 0 0 var(--qr-accent); }
.qr-root[data-template="sofra"] .qs-it__desc { font-size: 14.5px; }
.qr-root[data-template="sofra"][data-desc="gizli"] { --qs-pad: calc(11px * var(--tsf-d)); }
.qr-root[data-template="sofra"][data-desc="tam"] .qs-it__desc { padding-block-end: 2px; }
.qr-root[data-template="sofra"] .qs-grp__name { font-family: var(--qr-font-display); font-weight: 500; font-size: 20px; line-height: 1.15; }
.qr-root[data-template="sofra"] .qs-grp__pic .qs-photo--thumb { border-radius: 50%; box-shadow: 0 0 0 1px var(--qr-line); }

/* end of world */
.qr-root[data-template="sofra"] .tsf-next { inline-size: 100%; margin-block-start: 48px; padding-block: 22px 24px; border-block-start: 1px solid var(--qr-ink); border-block-end: 1px solid var(--qr-line); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.qr-root[data-template="sofra"] .tsf-next-k { font-size: 13px; font-weight: 500; color: var(--qr-ink-2); }
.qr-root[data-template="sofra"] .tsf-next-w { display: inline-flex; align-items: center; gap: 8px; font-family: var(--qr-font-display); font-style: italic; font-size: 32px; line-height: 1.1; color: var(--qr-ink); }
.qr-root[data-template="sofra"] .tsf-next-w .qs-icon { inline-size: 28px; block-size: 28px; }
.qr-root[data-template="sofra"] .tsf-next:hover .tsf-next-w { color: var(--qr-accent); }
.qr-root[data-template="sofra"] .tsf-tail { padding-block-start: 22px; display: flex; flex-direction: column; gap: 14px; max-inline-size: 62ch; }

/* floating dock (phone): Index · My list · Filter */
.qr-root[data-template="sofra"] .tsf-dock {
  position: absolute; z-index: 6; inset-inline: 0; margin-inline: auto; inline-size: fit-content; inset-block-end: 14px;
  display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--qr-surface); border: 1px solid var(--qr-line); box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}
.qr-root[data-template="sofra"][data-nav="bottom"] .tsf-dock { inset-block-end: calc(var(--tsf-bar-h) + 10px); }
.qr-root[data-template="sofra"] .tsf-dock .qs-btn { border-color: transparent; background: transparent; padding-inline: 10px; }
.qr-root[data-template="sofra"] .tsf-dock-index { min-block-size: 44px; display: inline-flex; align-items: center; gap: 8px; padding-inline: 14px 16px; border-radius: 999px; background: var(--qr-ink); color: var(--qr-bg); }
.qr-root[data-template="sofra"] .tsf-dock-index span { font-size: 14.5px; font-weight: 600; }
.qr-root[data-template="sofra"] .tsf-dock-index .qs-icon { inline-size: 20px; block-size: 20px; }

/* ---------- layers ---------- */
.qr-root[data-template="sofra"] .tsf-layers:empty { display: none; }
.qr-root[data-template="sofra"] .tsf-layer { position: absolute; inset: 0; z-index: 20; }
.qr-root[data-template="sofra"] .tsf-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .38); }
.qr-root[data-template="sofra"] .tsf-sheet {
  position: absolute; inset-inline: 0; inset-block-end: 0; max-block-size: 90%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--qr-bg); color: var(--qr-ink); border-start-start-radius: calc(var(--tsf-r) + 2px); border-start-end-radius: calc(var(--tsf-r) + 2px); box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
}
.qr-root[data-template="sofra"] .tsf-layer.is-anim .tsf-scrim { animation: tsf-fade .2s ease both; }
.qr-root[data-template="sofra"] .tsf-layer.is-anim .tsf-sheet { animation: tsf-up .3s cubic-bezier(.2, .8, .2, 1) both; }
.qr-root[data-template="sofra"][data-transition="yumusak-belirme"] .tsf-layer.is-anim .tsf-sheet { animation: tsf-fade .2s ease both; }
.qr-root[data-template="sofra"][data-transition="sakin"] .tsf-layer.is-anim .tsf-sheet,
.qr-root[data-template="sofra"][data-transition="sakin"] .tsf-layer.is-anim .tsf-scrim,
.qr-root[data-template="sofra"][data-transition="sakin"] .tsf-flow.is-enter { animation: none; transition: none; }
@keyframes tsf-up { from { transform: translateY(36px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes tsf-in-end { from { transform: translateX(44px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes tsf-in-start { from { transform: translateX(-44px); opacity: .4; } to { transform: none; opacity: 1; } }

/* detail sheet */
.qr-root[data-template="sofra"] .tsf-sheet--detail { padding-block: 0 28px; padding-inline: var(--tsf-gutter); }
.qr-root[data-template="sofra"] .tsf-sheet-x { position: sticky; inset-block-start: 10px; z-index: 2; display: flex; margin-block: 10px -44px; margin-inline: auto -6px; box-shadow: 0 1px 6px rgba(0, 0, 0, .16); }
.qr-root[data-template="sofra"] .tsf-where { min-block-size: 44px; display: flex; align-items: center; padding-inline-end: 52px; font-size: 13px; color: var(--qr-ink-2); }
.qr-root[data-template="sofra"] .tsf-sheet--detail .qs-detail .qs-photo--hero { border-radius: calc(var(--tsf-r) / 3); }
.qr-root[data-template="sofra"] .qs-detail__name { font-weight: 500; font-size: 28px; }
.qr-root[data-template="sofra"] .qs-detail__note { font-family: var(--qr-font-display); font-style: italic; color: var(--qr-accent); font-size: 17px; }

/* index sheet */
.qr-root[data-template="sofra"] .tsf-sheet--index { padding-inline: var(--tsf-gutter); padding-block-end: 24px; max-block-size: 88%; }
.qr-root[data-template="sofra"] .tsf-sheet-top {
  position: sticky; inset-block-start: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  margin-inline: calc(var(--tsf-gutter) * -1); padding-block: 12px 8px; padding-inline: var(--tsf-gutter) 12px; background: var(--qr-bg); border-block-end: 1px solid var(--qr-line);
}
.qr-root[data-template="sofra"] .tsf-sheet-h { font-family: var(--qr-font-display); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1; }
.qr-root[data-template="sofra"] .tsf-tree-w { padding-block-start: 12px; }
.qr-root[data-template="sofra"] .tsf-tree-world { inline-size: 100%; min-block-size: 44px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 8px; }
.qr-root[data-template="sofra"] .tsf-tree-world-t { font-family: var(--qr-font-display); font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--qr-ink); }
.qr-root[data-template="sofra"] .tsf-tree-secs { border-inline-start: 1px solid var(--qr-line); margin-inline-start: 2px; }
.qr-root[data-template="sofra"] .tsf-tree-sec { position: relative; inline-size: 100%; min-block-size: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline-start: 14px; }
.qr-root[data-template="sofra"] .tsf-tree-sec-t { font-size: 15px; line-height: 1.25; color: var(--qr-ink-2); }
.qr-root[data-template="sofra"] .tsf-tree-sec[aria-current] .tsf-tree-sec-t { color: var(--qr-ink); font-weight: 600; }
.qr-root[data-template="sofra"] .tsf-tree-sec[aria-current]::before { content: ""; position: absolute; inset-inline-start: -1.5px; inset-block: 10px; inline-size: 3px; border-radius: 2px; background: var(--qr-accent); }
.qr-root[data-template="sofra"] .tsf-tree-sec:hover .tsf-tree-sec-t,
.qr-root[data-template="sofra"] .tsf-tree-world:hover .tsf-tree-world-t { color: var(--qr-ink); text-decoration: underline; text-decoration-color: var(--tsf-rule); text-underline-offset: 3px; }

/* search */
.qr-root[data-template="sofra"] .tsf-layer--search .tsf-scrim { display: none; }
.qr-root[data-template="sofra"] .tsf-searchbox { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--qr-bg); color: var(--qr-ink); }
.qr-root[data-template="sofra"] .tsf-layer--search.is-anim .tsf-searchbox { animation: tsf-fade .16s ease both; }
.qr-root[data-template="sofra"][data-transition="sakin"] .tsf-layer--search.is-anim .tsf-searchbox { animation: none; }
.qr-root[data-template="sofra"] .tsf-search-bar { flex: none; display: flex; align-items: center; gap: 6px; padding-block: 8px; padding-inline: var(--tsf-gutter) 8px; border-block-end: 1px solid var(--qr-ink); }
.qr-root[data-template="sofra"] .tsf-search-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--qr-ink-2); }
.qr-root[data-template="sofra"] .tsf-search-input {
  flex: 1; min-width: 0; min-block-size: 48px; border: 0; background: transparent; color: var(--qr-ink);
  font-family: var(--qr-font-display); font-size: 20px; -webkit-appearance: none; appearance: none;
}
.qr-root[data-template="sofra"] .tsf-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.qr-root[data-template="sofra"] .tsf-search-input::placeholder { color: var(--qr-ink-2); font-style: italic; }
.qr-root[data-template="sofra"] .tsf-search-input:focus-visible { outline: none; }
.qr-root[data-template="sofra"] .tsf-search-field:focus-within { color: var(--qr-ink); }
.qr-root[data-template="sofra"] .tsf-textbtn { min-block-size: 44px; padding-inline: 12px; font-weight: 600; font-size: 14.5px; }
.qr-root[data-template="sofra"] .tsf-search-out { flex: 1; overflow-y: auto; padding-inline: var(--tsf-gutter); padding-block-end: 24px; }
.qr-root[data-template="sofra"] .tsf-search-out .qs-result { padding-inline: 0; }
.qr-root[data-template="sofra"] .tsf-search-out .qs-result .qs-name { font-family: var(--qr-font-display); font-size: 18px; }
.qr-root[data-template="sofra"] .tsf-count { padding-block: 14px 6px; font-size: 13px; color: var(--qr-ink-2); }

/* ---------- narrow phones ---------- */
@container stage (max-width: 375px) {
  .qr-root[data-template="sofra"] { --tsf-gutter: 16px; }
  .qr-root[data-template="sofra"] .tsf-wordmark { font-size: 25px; }
  .qr-root[data-template="sofra"] .tsf-tabs { gap: 14px; }
  .qr-root[data-template="sofra"] .tsf-tab-t { font-size: 16px; }
}

/* ---------- tablet: index column + flow ---------- */
@container stage (min-width: 700px) {
  .qr-root[data-template="sofra"] { --tsf-gutter: 36px; }
  .qr-root[data-template="sofra"] .tsf-app { display: grid; grid-template-columns: 252px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .qr-root[data-template="sofra"] .tsf-scroll { block-size: 100%; }
  .qr-root[data-template="sofra"] .tsf-head,
  .qr-root[data-template="sofra"] .tsf-nav,
  .qr-root[data-template="sofra"] .tsf-dock,
  .qr-root[data-template="sofra"][data-nav="bottom"] .tsf-bar { display: none; }
  .qr-root[data-template="sofra"] .tsf-side {
    display: flex; flex-direction: column; gap: 14px; block-size: 100%; overflow-y: auto;
    padding-block: 28px 32px; padding-inline: 24px 18px; border-inline-end: 1px solid var(--qr-line); background: var(--qr-bg);
  }
  .qr-root[data-template="sofra"] .tsf-side .tsf-wordmark { font-size: 32px; }
  .qr-root[data-template="sofra"] .tsf-tools--side { margin-inline-start: -8px; }
  .qr-root[data-template="sofra"] .tsf-side-nav { padding-block-start: 6px; border-block-start: 1px solid var(--tsf-rule); }
  .qr-root[data-template="sofra"] .tsf-tree--side .tsf-tree-w { padding-block-start: 4px; }
  .qr-root[data-template="sofra"] .tsf-tree--side .tsf-tree-world-t { font-size: 21px; color: var(--qr-ink-2); }
  .qr-root[data-template="sofra"] .tsf-tree--side .tsf-tree-world[aria-current] .tsf-tree-world-t { color: var(--qr-ink); font-style: italic; }
  .qr-root[data-template="sofra"] .tsf-tree--side .tsf-tree-secs { margin-block-end: 8px; }
  .qr-root[data-template="sofra"] .tsf-searchrow { padding-block-start: 24px; }
  .qr-root[data-template="sofra"] .tsf-searchrow,
  .qr-root[data-template="sofra"] .tsf-results,
  .qr-root[data-template="sofra"] .tsf-slot-top { max-inline-size: 860px; }
  .qr-root[data-template="sofra"] .tsf-slot-top { padding-block-start: 20px; }
  .qr-root[data-template="sofra"] .tsf-flow { padding-block-end: 64px; max-inline-size: 860px; }
  .qr-root[data-template="sofra"] .tsf-world-head { padding-block-start: 34px; }
  .qr-root[data-template="sofra"] .tsf-world-title { font-size: 52px; }
  .qr-root[data-template="sofra"] .tsf-sec-title { font-size: 34px; }
  .qr-root[data-template="sofra"] .qs-it__pic .qs-photo--thumb { inline-size: calc(88px * var(--qr-thumb-scale, 1)); }
  .qr-root[data-template="sofra"][data-section-head="gorselli"] .tsf-band { margin-inline: 0; }
  .qr-root[data-template="sofra"] .tsf-band .qs-photo { aspect-ratio: 16 / 4 !important; border-radius: calc(var(--tsf-r) / 3); }
  /* detail: panel from the inline-end side */
  .qr-root[data-template="sofra"] .tsf-sheet--detail {
    inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; inline-size: min(460px, 62%); max-block-size: none;
    border-radius: 0; box-shadow: -12px 0 40px rgba(0, 0, 0, .16); padding-inline: 28px;
  }
  .qr-root[data-template="sofra"] .tsf-layer.is-anim .tsf-sheet--detail { animation-name: tsf-in-end; }
  .qr-root[data-template="sofra"][dir="rtl"] .tsf-layer.is-anim .tsf-sheet--detail { animation-name: tsf-in-start; }
  .qr-root[data-template="sofra"][data-transition="yumusak-belirme"] .tsf-layer.is-anim .tsf-sheet--detail { animation-name: tsf-fade; }
  .qr-root[data-template="sofra"] .tsf-sheet--index { inset-inline: 0; margin-inline: auto; inline-size: min(560px, 100%); }
  /* search: a panel over the page */
  .qr-root[data-template="sofra"] .tsf-layer--search .tsf-scrim { display: block; }
  .qr-root[data-template="sofra"] .tsf-searchbox {
    inset-block: 48px auto; inset-inline: 0; margin-inline: auto; inline-size: min(620px, calc(100% - 64px)); max-block-size: calc(100% - 96px);
    border-radius: calc(var(--tsf-r) / 2); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); overflow: hidden;
  }
  .qr-root[data-template="sofra"] .tsf-search-out { min-block-size: 120px; }
}

/* ---------- desktop: index · two-column flow · rail ---------- */
@container stage (min-width: 1100px) {
  .qr-root[data-template="sofra"] { --tsf-gutter: 48px; }
  .qr-root[data-template="sofra"] .tsf-app { grid-template-columns: 248px minmax(0, 1fr) 352px; }
  .qr-root[data-template="sofra"] .tsf-flow,
  .qr-root[data-template="sofra"] .tsf-searchrow,
  .qr-root[data-template="sofra"] .tsf-results,
  .qr-root[data-template="sofra"] .tsf-slot-top { max-inline-size: 1040px; }
  .qr-root[data-template="sofra"] .qs-it__pic .qs-photo--thumb { inline-size: calc(80px * var(--qr-thumb-scale, 1)); }
  .qr-root[data-template="sofra"] .tsf-band .qs-photo { aspect-ratio: 16 / 3 !important; }
  .qr-root[data-template="sofra"] .tsf-rail {
    display: flex; flex-direction: column; gap: 22px; block-size: 100%; overflow-y: auto;
    padding-block: 28px 32px; padding-inline: 28px; border-inline-start: 1px solid var(--qr-line); background: var(--qr-bg);
  }
  .qr-root[data-template="sofra"] .tsf-rail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .qr-root[data-template="sofra"] .tsf-rail-top .tsf-where { padding-inline-end: 0; }
  .qr-root[data-template="sofra"] .tsf-rail-body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; }
  .qr-root[data-template="sofra"] .tsf-rail-body[data-qr-detail] { animation: tsf-fade .2s ease both; }
  .qr-root[data-template="sofra"][data-transition="sakin"] .tsf-rail-body[data-qr-detail] { animation: none; }
  .qr-root[data-template="sofra"] .tsf-rail-body .qs-detail .qs-photo--hero { border-radius: calc(var(--tsf-r) / 4); }
  .qr-root[data-template="sofra"] .tsf-rail-idle { display: flex; flex-direction: column; gap: 14px; }
  .qr-root[data-template="sofra"] .tsf-rail-pick { font-family: var(--qr-font-display); font-style: italic; font-size: 20px; line-height: 1.3; }
  .qr-root[data-template="sofra"] .tsf-rail-hours { font-size: 15px; }
  .qr-root[data-template="sofra"] .tsf-rail-k { color: var(--qr-ink-2); }
}

/* ---------- Klasik: classic lokanta reading of the same card ---------- */
.qr-root[data-template="sofra"][data-theme="sofra-klasik"] { --qs-name-size: 19px; }
.qr-root[data-template="sofra"][data-theme="sofra-klasik"] .tsf-sec-rule { block-size: 4px; background: none; border-block: 1px solid var(--tsf-rule); }
.qr-root[data-template="sofra"][data-theme="sofra-klasik"] .tsf-nav { border-block-end: 3px double var(--qr-line); }
.qr-root[data-template="sofra"][data-theme="sofra-klasik"] .tsf-next { border-block-start: 3px double var(--qr-ink); }
.qr-root[data-template="sofra"][data-theme="sofra-klasik"] .tsf-side-nav { border-block-start: 3px double var(--tsf-rule); }
.qr-root[data-template="sofra"][data-theme="sofra-klasik"] .tsf-sec-count--flat { border-block-start: 3px double var(--tsf-rule); }
.qr-root[data-template="sofra"][data-theme="sofra-klasik"] .qs-grp__name { font-variant: small-caps; letter-spacing: .03em; }
.qr-root[data-template="sofra"][data-theme="sofra-klasik"] .tsf-world-title { font-style: italic; }
.qr-root[data-template="sofra"][data-theme="sofra-klasik"] .qs-it--opt .qs-it__line .qs-name { font-family: var(--qr-font-display); font-size: 17px; }

/* ---------- Arabic: no faux italics, no letter-spacing ---------- */
.qr-root[data-template="sofra"][lang="ar"] .tsf-sec-title,
.qr-root[data-template="sofra"][lang="ar"] .tsf-next-w,
.qr-root[data-template="sofra"][lang="ar"] .tsf-sheet-h,
.qr-root[data-template="sofra"][lang="ar"] .tsf-world-title,
.qr-root[data-template="sofra"][lang="ar"] .tsf-tree-world-t,
.qr-root[data-template="sofra"][lang="ar"] .tsf-rail-pick,
.qr-root[data-template="sofra"][lang="ar"] .tsf-search-input::placeholder,
.qr-root[data-template="sofra"][lang="ar"] .qs-detail__note { font-style: normal; }
.qr-root[data-template="sofra"][lang="ar"] .qs-grp__name { font-variant: normal; letter-spacing: 0; }
.qr-root[data-template="sofra"][lang="ar"] .tsf-wordmark,
.qr-root[data-template="sofra"][lang="ar"] .tsf-world-title,
.qr-root[data-template="sofra"][lang="ar"] .tsf-sec-title { letter-spacing: 0; }

/* ---------- reduced motion ---------- */
.qr-stage[data-motion="reduced"] .qr-root[data-template="sofra"] *,
.qr-stage[data-motion="reduced"] .qr-root[data-template="sofra"] *::before,
.qr-stage[data-motion="reduced"] .qr-root[data-template="sofra"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* QR menu prototype — templates/vitrin.css (CONTRACT v3). §4 variables only, logical properties only.
   Photo fades are mixed from --qr-bg so text over a photo is always --qr-ink on a ground of the palette's own tone. */
.qr-root[data-template="vitrin"] {
  --tvi-gap: calc(12px * var(--qr-density, 1));
  --tvi-pad: 16px;
  --tvi-r: var(--qr-radius, 12px);
  --tvi-nav-h: 0px;
  --tvi-rail: 0px;
  --tvi-fade: color-mix(in srgb, var(--qr-bg) 88%, transparent);
  --tvi-veil: color-mix(in srgb, var(--qr-bg) 70%, transparent);
  font-family: var(--qr-font-body);
}
.qr-root[data-template="vitrin"][data-nav="bottom"] { --tvi-nav-h: 64px; }
.qr-root[data-template="vitrin"] .tvi-app { position: absolute; inset: 0; background: var(--qr-bg); }
.qr-root[data-template="vitrin"] button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qr-root[data-template="vitrin"] .tvi-opt, .qr-root[data-template="vitrin"] .tvi-chip, .qr-root[data-template="vitrin"] .tvi-world,
.qr-root[data-template="vitrin"] .tvi-cap, .qr-root[data-template="vitrin"] .tvi-iconbtn, .qr-root[data-template="vitrin"] .tvi-sclose, .qr-root[data-template="vitrin"] .tvi-sfield {
  margin: 0; padding: 0; border: 0; background: none; text-align: start;
}
.qr-root[data-template="vitrin"] button:focus-visible, .qr-root[data-template="vitrin"] input:focus-visible { outline: 2px solid var(--qr-accent); outline-offset: 2px; }
.qr-root[data-template="vitrin"] h2, .qr-root[data-template="vitrin"] h3, .qr-root[data-template="vitrin"] p { margin: 0; }
.qr-root[data-template="vitrin"] .tvi-iconbtn {
  inline-size: 44px; block-size: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--qr-ink);
}

/* ---------- scroller ---------- */
.qr-root[data-template="vitrin"] .tvi-scroll {
  position: absolute; inset-block: 0; inset-inline-start: var(--tvi-rail); inset-inline-end: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--qr-line) transparent;
  scroll-padding-block-end: var(--tvi-nav-h);
}

/* ---------- cover ---------- */
.qr-root[data-template="vitrin"] .tvi-cover { position: relative; block-size: min(40cqh, 340px); min-block-size: 280px; overflow: hidden; background: var(--qr-surface); touch-action: pan-y; }
.qr-root[data-template="vitrin"] .tvi-top {
  position: absolute; z-index: 3; inset-block-start: 0; inset-inline: 0; display: flex; align-items: flex-start; gap: 8px;
  padding-block: 10px 28px; padding-inline: var(--tvi-pad);
  background: linear-gradient(var(--tvi-veil), transparent);
}
.qr-root[data-template="vitrin"] .tvi-mark { display: flex; flex-direction: column; margin-inline-end: auto; min-inline-size: 0; }
.qr-root[data-template="vitrin"] .tvi-wordmark { font-family: var(--qr-font-display); font-size: 24px; line-height: 1.15; letter-spacing: .02em; color: var(--qr-ink); }
.qr-root[data-template="vitrin"] .tvi-branch { font-size: 13px; color: var(--qr-ink); opacity: .85; }
.qr-root[data-template="vitrin"] .tvi-slide {
  position: absolute; inset: 0; display: block; inline-size: 100%; overflow: hidden;
}
.qr-root[data-template="vitrin"] .tvi-slide .qs-photo { position: absolute; inset: 0; aspect-ratio: auto; block-size: 100%; border-radius: 0; transform-origin: 60% 50%; }
.qr-root[data-template="vitrin"] .tvi-slide__blank { position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 20%, color-mix(in srgb, var(--qr-accent) 30%, var(--qr-surface)), var(--qr-surface) 62%); }
.qr-root[data-template="vitrin"] .tvi-zoom img { animation: tvi-zoom 7s ease-out forwards; }
@keyframes tvi-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.qr-root[data-template="vitrin"] .tvi-slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(transparent 32%, var(--tvi-veil) 62%, var(--qr-bg) 100%);
}
.qr-root[data-template="vitrin"] .tvi-slide__text {
  position: absolute; z-index: 1; inset-inline-start: var(--tvi-pad); inset-inline-end: 84px; inset-block-end: 18px;
  display: flex; flex-direction: column; gap: 6px; color: var(--qr-ink);
}
.qr-root[data-template="vitrin"] .tvi-slide__title { font-family: var(--qr-font-display); font-size: 30px; line-height: 1.1; text-wrap: balance; }
.qr-root[data-template="vitrin"] .tvi-slide__title--world { font-size: 38px; }
.qr-root[data-template="vitrin"] .tvi-slide__body { font-size: 14px; color: var(--qr-ink-2); max-inline-size: 34em; }

/* a campaign / welcome in the `ust` slot sits below the cover: the cover gives way so the slot ends in the top 40% of a phone */
.qr-root[data-template="vitrin"] .tvi-has-top .tvi-cover { block-size: min(17cqh, 150px); min-block-size: 124px; }
.qr-root[data-template="vitrin"] .tvi-has-top .tvi-slide__text { inset-block-end: 10px; gap: 2px; }
.qr-root[data-template="vitrin"] .tvi-has-top .tvi-slide__title--world { font-size: 28px; }

/* shelf: free sideways scroll, no snapping. Snapping pulled a card's info strip (scrolled into view by the browser or by
   assistive tech) back out of view whenever the next card started just past the edge, leaving the strip unreachable. */
@container stage (max-width: 699px) {
  .qr-root[data-template="vitrin"] .qs-body .qs-items--shelf { scroll-snap-type: none; }
}

/* ---------- sticky bar: (top world strip) + section chips + layer buttons ---------- */
.qr-root[data-template="vitrin"] .tvi-sticky {
  position: sticky; inset-block-start: 0; z-index: 5;
  background: color-mix(in srgb, var(--qr-bg) 95%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--qr-line);
}
.qr-root[data-template="vitrin"] .tvi-bar { display: flex; align-items: center; min-block-size: 52px; }
.qr-root[data-template="vitrin"] .tvi-searchbtn { inline-size: 48px; color: var(--qr-ink-2); border-radius: 0; border-inline-end: 1px solid var(--qr-line); }
.qr-root[data-template="vitrin"] .tvi-chiprow { flex: 1; min-inline-size: 0; display: flex; gap: 2px; padding-inline: 6px; overflow-x: auto; scrollbar-width: none; }
.qr-root[data-template="vitrin"] .tvi-chiprow::-webkit-scrollbar { display: none; }
.qr-root[data-template="vitrin"] .tvi-chip {
  position: relative; flex: none; min-block-size: 44px; padding-inline: 10px; display: inline-flex; align-items: center;
  font-size: 14px; color: var(--qr-ink-2); white-space: nowrap;
}
.qr-root[data-template="vitrin"] .tvi-chip::after { content: ""; position: absolute; inset-inline: 10px; inset-block-end: 0; block-size: 2px; border-radius: 2px; background: transparent; }
.qr-root[data-template="vitrin"] .tvi-chip[aria-current] { color: var(--qr-ink); font-weight: 600; }
.qr-root[data-template="vitrin"] .tvi-chip[aria-current]::after { background: var(--qr-accent); }
.qr-root[data-template="vitrin"] .tvi-layers { display: flex; gap: 4px; padding-inline: 4px 8px; border-inline-start: 1px solid var(--qr-line); }
.qr-root[data-template="vitrin"] .tvi-layers .qs-btn { inline-size: 44px; padding-inline: 0; border-color: transparent; background: transparent; position: relative; }
.qr-root[data-template="vitrin"] .tvi-layers .qs-count { position: absolute; inset-block-start: 2px; inset-inline-end: 0; }

/* world navigation: strip (nav=top, phone), bottom bar (nav=bottom, phone), side rail (≥700) */
.qr-root[data-template="vitrin"] .tvi-worlds { display: flex; }
.qr-root[data-template="vitrin"] .tvi-world {
  position: relative; flex: 1; min-inline-size: 0; min-block-size: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 12.5px; color: var(--qr-ink-2); text-align: center;
}
.qr-root[data-template="vitrin"] .tvi-world .qs-icon { inline-size: 22px; block-size: 22px; }
.qr-root[data-template="vitrin"] .tvi-world__name { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-root[data-template="vitrin"] .tvi-world[aria-current] { color: var(--qr-accent); font-weight: 600; }
.qr-root[data-template="vitrin"] .tvi-worlds--top { border-block-end: 1px solid var(--qr-line); }
.qr-root[data-template="vitrin"] .tvi-worlds--top .tvi-world { flex-direction: row; gap: 6px; min-block-size: 48px; font-size: 14px; }
.qr-root[data-template="vitrin"] .tvi-worlds--top .tvi-world .qs-icon { inline-size: 18px; block-size: 18px; }
.qr-root[data-template="vitrin"] .tvi-worlds--top .tvi-world[aria-current]::after { content: ""; position: absolute; inset-inline: 22%; inset-block-end: -1px; block-size: 2px; background: var(--qr-accent); }
.qr-root[data-template="vitrin"]:not([data-nav="top"]) .tvi-worlds--top { display: none; }
.qr-root[data-template="vitrin"] .tvi-rail {
  position: absolute; z-index: 10; inset-inline: 0; inset-block-end: 0; block-size: var(--tvi-nav-h);
  background: var(--qr-surface); border-block-start: 1px solid var(--qr-line);
}
.qr-root[data-template="vitrin"] .tvi-rail .tvi-world[aria-current]::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline: 30%; block-size: 2px; background: var(--qr-accent); }
.qr-root[data-template="vitrin"]:not([data-nav="bottom"]) .tvi-rail { display: none; }

/* ---------- sections ---------- */
.qr-root[data-template="vitrin"] .tvi-main { padding-block-start: calc(6px * var(--qr-density, 1)); }
.qr-root[data-template="vitrin"] .tvi-enter { animation: tvi-fade .24s ease both; }
.qr-root[data-template="vitrin"][data-transition="kisa-adim"] .tvi-enter { animation: tvi-step .18s ease-out both; }
@keyframes tvi-fade { from { opacity: .2; } to { opacity: 1; } }
@keyframes tvi-step { from { opacity: .4; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qr-root[data-template="vitrin"] .tvi-sec { padding-block: calc(22px * var(--qr-density, 1)) calc(8px * var(--qr-density, 1)); content-visibility: auto; contain-intrinsic-size: auto 420px; }
.qr-root[data-template="vitrin"] .tvi-sec__head { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; padding-inline: var(--tvi-pad); margin-block-end: calc(12px * var(--qr-density, 1)); }
.qr-root[data-template="vitrin"] .tvi-h2 { font-family: var(--qr-font-display); font-weight: 400; font-size: 25px; line-height: 1.2; color: var(--qr-ink); }
.qr-root[data-template="vitrin"] .tvi-h3 { font-family: var(--qr-font-display); font-weight: 400; font-size: 21px; line-height: 1.2; }
.qr-root[data-template="vitrin"] .tvi-count { font-size: 14px; color: var(--qr-ink-2); }
/* section head: ornament / plain / cover band (data-section-head) */
.qr-root[data-template="vitrin"] .tvi-band, .qr-root[data-template="vitrin"] .tvi-orn { display: none; }
.qr-root[data-template="vitrin"] .tvi-band { inline-size: 100%; margin-block-end: 12px; }
.qr-root[data-template="vitrin"] .tvi-band .qs-photo { border-radius: 0; }
.qr-root[data-template="vitrin"][data-section-head="susle"] .tvi-orn { display: block; flex: 0 0 100%; inline-size: 34px; block-size: 2px; margin-block-end: 8px; border-radius: 2px; background: var(--qr-accent); }
.qr-root[data-template="vitrin"][data-section-head="yalin"] .tvi-sec__head { padding-block-end: 8px; margin-inline: var(--tvi-pad); padding-inline: 0; border-block-end: 1px solid var(--qr-line); }
.qr-root[data-template="vitrin"][data-section-head="gorselli"] .tvi-band { display: block; }
.qr-root[data-template="vitrin"] .tvi-sec__body > .qs-body { padding-inline: var(--tvi-pad); --qs-g: var(--tvi-gap); }
.qr-root[data-template="vitrin"][data-desc="gizli"] { --qs-pad: calc(11px * var(--qr-density, 1)); }
.qr-root[data-template="vitrin"][data-desc="tam"] .qs-it__desc { padding-block-end: 2px; }

/* search mode (data-search): "acik" keeps a search field in the page instead of the icon button */
.qr-root[data-template="vitrin"] .tvi-sfield { display: none; align-items: center; gap: 10px; inline-size: calc(100% - 2 * var(--tvi-pad)); min-block-size: 44px; margin-block-start: 8px; margin-inline: var(--tvi-pad); padding-inline: 14px; border: 1px solid var(--qr-line); border-radius: calc(var(--tvi-r) * 3); color: var(--qr-ink-2); background: var(--qr-bg); }
.qr-root[data-template="vitrin"][data-search="acik"] .tvi-sfield { display: flex; }
.qr-root[data-template="vitrin"][data-search="acik"] .tvi-searchbtn { display: none; }

/* ---------- option boards ---------- */
.qr-root[data-template="vitrin"] .tvi-boards { display: grid; gap: calc(22px * var(--qr-density, 1)); padding-inline: var(--tvi-pad); align-items: start; }
.qr-root[data-template="vitrin"] .tvi-board { min-inline-size: 0; }
.qr-root[data-template="vitrin"] .tvi-board__media { position: relative; border-radius: var(--tvi-r); overflow: hidden; background: var(--qr-surface); }
.qr-root[data-template="vitrin"] .tvi-board__media .qs-photo { border-radius: 0; }
.qr-root[data-template="vitrin"] .tvi-board__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--tvi-fade), transparent 46%, transparent 58%, var(--tvi-veil));
}
.qr-root[data-template="vitrin"] .tvi-board__head { position: absolute; z-index: 1; inset-block-start: 12px; inset-inline: 14px; display: flex; flex-direction: column; color: var(--qr-ink); }
.qr-root[data-template="vitrin"] .tvi-board__head .qs-amount, .qr-root[data-template="vitrin"] .tvi-board__head .tvi-range { align-self: flex-start; }
.qr-root[data-template="vitrin"] .tvi-range { display: inline-flex; align-items: baseline; gap: 2px; unicode-bidi: isolate; }
.qr-root[data-template="vitrin"] .tvi-cap {
  position: absolute; z-index: 2; inset-inline: 10px; inset-block-end: 10px; min-block-size: 44px; padding-block: 8px; padding-inline: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: calc(var(--tvi-r) * .8);
  background: var(--tvi-fade); border: 1px solid var(--qr-accent); color: var(--qr-ink); font-weight: 600;
}
.qr-root[data-template="vitrin"] .tvi-cap__text { min-inline-size: 0; }
.qr-root[data-template="vitrin"] .tvi-cap .qs-icon { color: var(--qr-accent); inline-size: 18px; block-size: 18px; }
.qr-root[data-template="vitrin"] .tvi-cap--plain { position: static; margin-block-end: 4px; }
.qr-root[data-template="vitrin"] .tvi-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block-start: 10px; }
.qr-root[data-template="vitrin"] .tvi-opt {
  position: relative; min-block-size: 48px; padding-block: 8px; padding-inline: 12px; border-radius: calc(var(--tvi-r) * .8);
  background: var(--qr-surface); border: 1px solid var(--qr-line); color: var(--qr-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 1.25;
}
.qr-root[data-template="vitrin"] .tvi-opt__label { min-inline-size: 0; display: flex; flex-direction: column; gap: 4px; }
.qr-root[data-template="vitrin"] .tvi-opt[aria-pressed="true"] { border-color: var(--qr-accent); background: color-mix(in srgb, var(--qr-accent) 16%, var(--qr-surface)); }
.qr-root[data-template="vitrin"] .tvi-opt.is-out { opacity: .7; }
.qr-root[data-template="vitrin"] .tvi-loose { display: flex; flex-direction: column; gap: 18px; }
.qr-root[data-template="vitrin"] .tvi-board__media + .tvi-loose { margin-block-start: 14px; }
.qr-root[data-template="vitrin"] .tvi-loose__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.qr-root[data-template="vitrin"] .tvi-loose__group .tvi-opts { margin-block-start: 8px; }

/* ---------- tail ---------- */
.qr-root[data-template="vitrin"] .tvi-tail {
  display: flex; flex-direction: column; gap: 16px; margin-block-start: 24px; margin-inline: var(--tvi-pad);
  padding-block: 16px calc(var(--tvi-nav-h) + 28px); border-block-start: 1px solid var(--qr-line); max-inline-size: 64ch;
}

/* ---------- detail sheet (phone: full height; ≥700: centred split window) ---------- */
.qr-root[data-template="vitrin"] .tvi-sheet { position: absolute; inset: 0; z-index: 40; }
.qr-root[data-template="vitrin"] .tvi-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .3s ease; }
.qr-root[data-template="vitrin"] .tvi-sheet.is-open .tvi-scrim { opacity: 1; }
.qr-root[data-template="vitrin"] .tvi-panel {
  position: absolute; inset: 0; overflow-y: auto; background: var(--qr-bg); color: var(--qr-ink);
  transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.qr-root[data-template="vitrin"] .tvi-sheet.is-open .tvi-panel { transform: none; }
.qr-root[data-template="vitrin"] .tvi-close { position: absolute; z-index: 2; inset-block-start: 12px; inset-inline-end: 12px; background: var(--tvi-fade); border: 1px solid var(--qr-line); }
.qr-root[data-template="vitrin"] .tvi-panel__media .qs-photo { border-radius: 0; }
.qr-root[data-template="vitrin"] .tvi-panel__body { display: flex; flex-direction: column; gap: 8px; padding-block: 18px 40px; padding-inline: 20px; max-inline-size: 62ch; }
.qr-root[data-template="vitrin"] .tvi-panel--text .tvi-panel__body { padding-block-start: 72px; }
.qr-root[data-template="vitrin"] .tvi-path { font-size: 13px; color: var(--qr-ink-2); }
.qr-root[data-template="vitrin"] .tvi-panel .qs-detail__name { font-weight: 400; font-size: 30px; line-height: 1.12; }

/* ---------- search ---------- */
.qr-root[data-template="vitrin"] .tvi-search { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--qr-bg); color: var(--qr-ink); }
.qr-root[data-template="vitrin"] .tvi-sbar {
  display: flex; align-items: center; gap: 10px; padding-block: 10px; padding-inline: var(--tvi-pad) 8px;
  border-block-end: 1px solid var(--qr-line); color: var(--qr-ink-2);
}
.qr-root[data-template="vitrin"] .tvi-sbar:focus-within { border-block-end-color: var(--qr-accent); }
.qr-root[data-template="vitrin"] .tvi-sinput {
  flex: 1; min-inline-size: 0; block-size: 44px; border: 0; background: transparent; color: var(--qr-ink); font: 500 17px var(--qr-font-body);
  -webkit-appearance: none; appearance: none;
}
.qr-root[data-template="vitrin"] .tvi-sinput:focus-visible { outline: none; }
.qr-root[data-template="vitrin"] .tvi-sinput::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.qr-root[data-template="vitrin"] .tvi-sinput::placeholder { color: var(--qr-ink-2); }
.qr-root[data-template="vitrin"] .tvi-sclose { min-block-size: 44px; padding-inline: 12px; font-weight: 600; color: var(--qr-ink); }
.qr-root[data-template="vitrin"] .tvi-sresults { flex: 1; overflow-y: auto; padding-block: 4px 24px; }
.qr-root[data-template="vitrin"] .tvi-scount { padding-block: 10px; padding-inline: var(--tvi-pad); font-size: 14px; color: var(--qr-ink-2); }
.qr-root[data-template="vitrin"] .tvi-sresults .qs-result { padding-inline: var(--tvi-pad); }


/* ================= narrow phone ================= */
@container stage (max-width: 380px) {
  .qr-root[data-template="vitrin"] .tvi-wordmark { font-size: 21px; }
  .qr-root[data-template="vitrin"] .tvi-slide__title { font-size: 26px; }
  .qr-root[data-template="vitrin"] .tvi-slide__title--world { font-size: 32px; }
  .qr-root[data-template="vitrin"] .tvi-searchbtn { inline-size: 44px; }
}

/* ================= tablet: side rail, wider cover, ~3.2 cards ================= */
@container stage (min-width: 700px) {
  .qr-root[data-template="vitrin"] { --tvi-rail: 92px; --tvi-pad: 28px; --tvi-nav-h: 0px; }
  .qr-root[data-template="vitrin"] .tvi-worlds--top, .qr-root[data-template="vitrin"][data-nav="top"] .tvi-worlds--top { display: none; }
  .qr-root[data-template="vitrin"] .tvi-rail, .qr-root[data-template="vitrin"]:not([data-nav="bottom"]) .tvi-rail {
    display: flex; flex-direction: column; justify-content: center; inset-block: 0; inset-inline-end: auto; inline-size: var(--tvi-rail); block-size: auto;
    border-block-start: 0; border-inline-end: 1px solid var(--qr-line);
  }
  .qr-root[data-template="vitrin"] .tvi-rail .tvi-world { flex: none; min-block-size: 84px; padding-inline: 6px; font-size: 13px; gap: 6px; }
  .qr-root[data-template="vitrin"] .tvi-rail .tvi-world__name { white-space: normal; line-height: 1.2; }
  .qr-root[data-template="vitrin"] .tvi-rail .tvi-world .qs-icon { inline-size: 26px; block-size: 26px; }
  .qr-root[data-template="vitrin"] .tvi-rail .tvi-world[aria-current]::before { inset-block: 22%; inset-inline-start: -1px; inset-inline-end: auto; inline-size: 2px; block-size: auto; }
  .qr-root[data-template="vitrin"] .tvi-cover { block-size: min(36cqh, 420px); }
  .qr-root[data-template="vitrin"] .tvi-slide::after {
    background: linear-gradient(to right, var(--tvi-fade) 0%, var(--tvi-veil) 40%, transparent 70%), linear-gradient(transparent 70%, var(--qr-bg));
  }
  .qr-root[data-template="vitrin"][dir="rtl"] .tvi-slide::after {
    background: linear-gradient(to left, var(--tvi-fade) 0%, var(--tvi-veil) 40%, transparent 70%), linear-gradient(transparent 70%, var(--qr-bg));
  }
  .qr-root[data-template="vitrin"] .tvi-slide__text { inset-inline-end: auto; inline-size: min(50%, 420px); inset-block-end: 40px; }
  .qr-root[data-template="vitrin"] .tvi-slide__title { font-size: 40px; }
  .qr-root[data-template="vitrin"] .tvi-slide__title--world { font-size: 52px; }
  .qr-root[data-template="vitrin"] .tvi-slide__body { font-size: 16px; }
    .qr-root[data-template="vitrin"] .tvi-wordmark { font-size: 28px; }
  .qr-root[data-template="vitrin"] .tvi-top { padding-block-start: 16px; }
  .qr-root[data-template="vitrin"] .tvi-h2 { font-size: 30px; }
  .qr-root[data-template="vitrin"] .tvi-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .qr-root[data-template="vitrin"] .tvi-board--solo { grid-column: 1 / -1; }
  .qr-root[data-template="vitrin"] .tvi-board--solo .tvi-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qr-root[data-template="vitrin"] .tvi-board--solo .tvi-board__media .qs-photo { aspect-ratio: 21 / 9; }
  .qr-root[data-template="vitrin"] .tvi-sheet { display: flex; align-items: center; justify-content: center; padding: 40px; }
  .qr-root[data-template="vitrin"] .tvi-panel {
    position: relative; inset: auto; inline-size: min(780px, 100%); max-block-size: min(86%, 640px); overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; border-radius: calc(var(--tvi-r) + 6px); border: 1px solid var(--qr-line); background: var(--qr-surface);
    opacity: 0; transform: translateY(16px) scale(.98); transition: transform .28s ease, opacity .28s ease;
  }
  .qr-root[data-template="vitrin"] .tvi-sheet.is-open .tvi-panel { opacity: 1; transform: none; }
  .qr-root[data-template="vitrin"] .tvi-panel--text { grid-template-columns: 1fr; inline-size: min(560px, 100%); }
  .qr-root[data-template="vitrin"] .tvi-panel__media .qs-photo { aspect-ratio: auto; block-size: 100%; }
  .qr-root[data-template="vitrin"] .tvi-panel__body { overflow-y: auto; padding-block: 56px 28px; padding-inline: 28px; }
  .qr-root[data-template="vitrin"] .tvi-panel--text .tvi-panel__body { padding-block-start: 56px; }
  .qr-root[data-template="vitrin"] .tvi-search { inset-inline-start: var(--tvi-rail); }
  .qr-root[data-template="vitrin"] .tvi-sbar, .qr-root[data-template="vitrin"] .tvi-sresults > * { inline-size: min(760px, 100%); margin-inline: auto; }
}

/* ================= desktop: split cover, full grids, side-by-side boards ================= */
@container stage (min-width: 1100px) {
  .qr-root[data-template="vitrin"] { --tvi-pad: 40px; }
  .qr-root[data-template="vitrin"] .tvi-cover { block-size: min(46cqh, 420px); background: var(--qr-bg); }
  .qr-root[data-template="vitrin"] .tvi-top { padding-block: 22px 0; padding-inline: var(--tvi-pad); background: none; inset-inline-end: auto; inline-size: 40%; }
  .qr-root[data-template="vitrin"] .tvi-wordmark { font-size: 30px; }
  .qr-root[data-template="vitrin"] .tvi-slide .qs-photo { inset-inline-start: 40%; border-end-start-radius: 28px; }
  .qr-root[data-template="vitrin"] .tvi-slide__blank { inset-inline-start: 40%; }
  .qr-root[data-template="vitrin"] .tvi-slide::after,
  .qr-root[data-template="vitrin"][dir="rtl"] .tvi-slide::after { inset-inline-start: 40%; background: linear-gradient(to right, var(--qr-bg), transparent 22%); }
  .qr-root[data-template="vitrin"][dir="rtl"] .tvi-slide::after { background: linear-gradient(to left, var(--qr-bg), transparent 22%); }
  .qr-root[data-template="vitrin"] .tvi-slide__text { inset-inline-start: var(--tvi-pad); inline-size: calc(40% - var(--tvi-pad) - 32px); inset-block: 104px 40px; justify-content: center; gap: 12px; }
  .qr-root[data-template="vitrin"] .tvi-slide__title { font-size: 44px; }
  .qr-root[data-template="vitrin"] .tvi-slide__title--world { font-size: 62px; }
  .qr-root[data-template="vitrin"] .tvi-slide__body { font-size: 17px; }
  .qr-root[data-template="vitrin"] .tvi-bar { padding-inline: calc(var(--tvi-pad) - 20px); }
  .qr-root[data-template="vitrin"] .tvi-searchbtn { border-inline-end: 0; }
  .qr-root[data-template="vitrin"] .tvi-chip { font-size: 15px; padding-inline: 14px; }
  .qr-root[data-template="vitrin"] .tvi-main, .qr-root[data-template="vitrin"] .tvi-tail { max-inline-size: 1340px; }
  .qr-root[data-template="vitrin"] .tvi-sec { padding-block-start: calc(36px * var(--qr-density, 1)); }
  .qr-root[data-template="vitrin"] .tvi-h2 { font-size: 34px; }
  .qr-root[data-template="vitrin"] .tvi-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(30px * var(--qr-density, 1)) 24px; }
  .qr-root[data-template="vitrin"] .tvi-board--solo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 28px; align-items: start; }
  .qr-root[data-template="vitrin"] .tvi-board--solo:not(:has(.tvi-board__media)) { grid-template-columns: minmax(0, 1fr); }
  .qr-root[data-template="vitrin"] .tvi-board--solo .tvi-board__media .qs-photo { aspect-ratio: 4 / 3; }
  .qr-root[data-template="vitrin"] .tvi-board--solo .tvi-board__media + .tvi-loose { margin-block-start: 0; }
  .qr-root[data-template="vitrin"] .tvi-board--solo .tvi-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qr-root[data-template="vitrin"] .tvi-panel { inline-size: min(980px, 100%); max-block-size: min(84%, 680px); grid-template-columns: 1.1fr 1fr; }
  .qr-root[data-template="vitrin"] .tvi-panel__body { padding-block: 64px 40px; padding-inline: 40px; }
}

/* ---------- reduced motion (shared.css zeroes durations; also stop the zoom transform) ---------- */
.qr-stage[data-motion="reduced"] .qr-root[data-template="vitrin"] .tvi-zoom img,
.qr-stage[data-motion="reduced"] .qr-root[data-template="vitrin"] .tvi-enter { animation: none; }

/* EYP QR editör · studio/css/tokens.css
 * Sahibi: E1 — 03 §7. Görev: tasarım değişkenlerinin tek yeri (03 §3.7; 00 §4).
 * Editörün bütün renkleri buradaki değişkenlerden gelir; başka dosya renk değeri yazmaz.
 * Palet (00 §7.108, sahibinin seçimi): Midnight Violet #241B3A (metin, dolu ana düğme, güçlü öğeler) · Lilac Haze #B9A7E6 (seçili denetim,
 * açık anahtar; geniş yüzeyde soluk tonları) · Neon Yellow #E8FF3A (yalnız Yayınla ve seyrek marka vurgusu; üstünde koyu mor yazı).
 * Lilac metin ya da tek başına kenar olmaz (beyazda 2,2:1). Durum renkleri yalnız durum içindir; uyarı kehribar kalır, neon sarı uyarı değildir.
 * Koyu tema 1.0'da yoktur (03 §3.7 tanımlamaz). Karşıtlık: node tools/contrast.cjs (editör çiftleri).
 * Kırılımlar (değişkene konamaz): telefon < 700 px · tablet 700–1023 · masaüstü ≥ 1024 (1024–1279 dar ray).
 */
:root {
  color-scheme: light;

  /* Nötrler (hafif mor alt ton) */
  --qs-g-0: #FFFFFF;          /* yüzey */
  --qs-g-25: #F8F7FA;         /* sayfa */
  --qs-g-50: #F1F0F5;         /* yükseltilmiş / üzerinde */
  --qs-g-75: #EBE9F1;         /* seçili segment, ikincil düğme zemini */
  --qs-g-100: #E5E3EB;        /* çizgi (dekor) */
  --qs-g-200: #D6D3DF;        /* yumuşak denetim kenarı (ikincil düğme) */
  --qs-g-300: #AAA6B8;        /* kapalı anahtar rayı */
  --qs-g-400: #8A8599;        /* alan kenarı (metinde kullanılmaz) */
  --qs-g-600: #5D5870;        /* ikincil metin */
  --qs-g-900: #241B3A;        /* birincil metin */

  /* Vurgu: Midnight Violet. --qs-accent dolu zemin ve güçlü çizgi; --qs-accent-strong metin vurgusu ve üzerinde/basılı zemin */
  --qs-accent: #241B3A;
  --qs-accent-strong: #5A45A6;
  --qs-accent-soft: #F1EDFA;   /* seçili satır / kart zemini (lilac'ın en soluk tonu) */
  --qs-on-accent: var(--qs-g-0);

  /* Seçim: Lilac Haze. Zemin olarak kullanılır; üstündeki işaret ve yazı koyu mordur */
  --qs-select: #B9A7E6;        /* açık anahtar rayı, işaretli kutu */
  --qs-select-soft: #E4DCF7;   /* seçili segment / dil sekmesi */
  --qs-select-line: #7A62C9;   /* seçili denetimin kenarı (beyazda 4,7:1) */
  --qs-on-select: var(--qs-accent);

  /* Baskın eylem: Neon Yellow. Yalnız Yayınla (üst çubuk + Yayın ekranı) ve seyrek marka vurgusu */
  --qs-cta: #E8FF3A;
  --qs-cta-strong: #DCF52B;    /* üzerinde / basılı */
  --qs-cta-line: #7C823A;      /* ince kenar: beyaz zeminde düğmenin sınırı (4,1:1) */
  --qs-on-cta: var(--qs-accent);

  /* Durum (yalnız durum için): taslak · anında · yayında · hata */
  --qs-st-draft-ink: #5D5870;
  --qs-st-draft-bg: #EFEDF3;
  --qs-st-instant-ink: #8A5300;
  --qs-st-instant-bg: #FFF4E0;
  --qs-st-published-ink: #1B7A4B;
  --qs-st-published-bg: #E6F4EC;
  --qs-st-error-ink: #C0283A;
  --qs-st-error-bg: #FCEBED;

  /* Anlamsal eşlemeler */
  --qs-page: var(--qs-g-25);
  --qs-surface: var(--qs-g-0);
  --qs-raised: var(--qs-g-50);
  --qs-line: var(--qs-g-100);
  --qs-control-line: var(--qs-g-400);
  --qs-control-soft: var(--qs-g-200);   /* ince ve hafif kenar (çerçeveli grup, hesap düğmesi) */
  --qs-soft: var(--qs-g-75);            /* yumuşak dolgu: seçili segment, ikincil düğme */
  --qs-switch-off: var(--qs-g-300);
  --qs-ink: var(--qs-g-900);
  --qs-ink-2: var(--qs-g-600);

  /* Odak halkası: 2 px orta mor + 2 px beyaz boşluk (03 §3.8) */
  --qs-focus-color: #6B55B8;
  --qs-focus-gap: var(--qs-g-0);
  --qs-focus-width: 2px;
  --qs-focus-offset: 2px;

  /* Yazı (03 §3.7): IBM Plex Sans + Arabic, yerel studio/fonts */
  --qs-font: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --qs-font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --qs-fw-regular: 400;
  --qs-fw-medium: 500;
  --qs-fw-semibold: 600;
  --qs-fs-help: 12px;     --qs-lh-help: 16px;     /* yardımcı */
  --qs-fs-table: 13px;    --qs-lh-table: 18px;    /* tablo */
  --qs-fs-body: 14px;     --qs-lh-body: 20px;     /* gövde */
  --qs-fs-field: 16px;    --qs-lh-field: 24px;    /* alan değeri, telefon gövdesi */
  --qs-fs-title: 20px;    --qs-lh-title: 28px;    /* ekran başlığı */
  --qs-fs-display: 24px;  --qs-lh-display: 32px;  /* kurulum başlığı */

  /* Boşluk: 4 · 8 · 12 · 16 · 24 · 32 · 48 */
  --qs-sp-1: 4px;
  --qs-sp-2: 8px;
  --qs-sp-3: 12px;
  --qs-sp-4: 16px;
  --qs-sp-5: 24px;
  --qs-sp-6: 32px;
  --qs-sp-7: 48px;

  /* Köşe */
  --qs-r-badge: 4px;
  --qs-r-control: 10px;
  --qs-r-card: 8px;
  --qs-r-layer: 12px;

  /* Gölge: yalnız yüzen katmanlar; düz yüzeylerde yok */
  --qs-shadow-float: 0 8px 24px rgb(36 27 58 / .14);
  /* anahtar tutamağı: çok hafif */
  --qs-shadow-thumb: 0 1px 2px rgb(36 27 58 / .26);

  /* Hareket (azaltılmış harekette 0; base.css) */
  --qs-dur-hover: 120ms;
  --qs-dur-sheet: 200ms;
  --qs-dur-device: 280ms;
  --qs-ease: cubic-bezier(.2, 0, 0, 1);

  /* Dokunma hedefi (03 §3.7) */
  --qs-hit: 44px;          /* telefon / tablet */
  --qs-hit-desk: 32px;     /* masaüstü işaretçi: tablo hücresi, simge düğme */

  /* Kabuk ölçüleri (03 §3.2) */
  --qs-topbar-h: 52px;
  --qs-rail-w: 208px;
  --qs-rail-w-compact: 64px;
  --qs-tabbar-h: 56px;
  --qs-work-min: 440px;
  --qs-work-max: 560px;
  --qs-canvas-min: 400px;
  --qs-canvasbar-h: 44px;
  --qs-drawer-w: 420px;
  --qs-notice-h: 40px;
}

/* Katman sırası (03 §3.7): sayısal z-index yazılmaz */
:root {
  --qs-z-base: 0;
  --qs-z-sticky: 10;
  --qs-z-rail: 20;
  --qs-z-drawer: 30;
  --qs-z-scrim: 40;
  --qs-z-dialog: 50;
  --qs-z-notice: 55;
  --qs-z-menu: 60;
}

/* Hesap tercihi "azaltılmış hareket" (03 §3.7): kök öznitelik */
:root[data-qs-motion="reduced"] {
  --qs-dur-hover: 0ms;
  --qs-dur-sheet: 0ms;
  --qs-dur-device: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --qs-dur-hover: 0ms;
    --qs-dur-sheet: 0ms;
    --qs-dur-device: 0ms;
  }
}

/* EYP QR editör · studio/css/base.css
 * Sahibi: E1 — 03 §7. Görev: sıfırlama, tipografi, görünür odak, azaltılmış hareket, RTL temeli (03 §3.7, §3.8).
 * Bileşen ve ekran kuralı yazılmaz; değerler css/tokens.css değişkenlerinden.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--qs-page);
  color: var(--qs-ink);
  font-family: var(--qs-font);
  font-size: var(--qs-fs-body);
  line-height: var(--qs-lh-body);
  font-weight: var(--qs-fw-regular);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, fieldset {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

fieldset {
  padding: 0;
  border: 0;
  min-width: 0;
}

h1, h2, h3, h4 {
  font-weight: var(--qs-fw-semibold);
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

input, select, textarea {
  font-size: var(--qs-fs-field);
  line-height: var(--qs-lh-field);
}

[hidden] {
  display: none !important;
}

/* Rakamlar: fiyat, sayaç, tablo */
.qs-num,
input[type="number"],
table {
  font-variant-numeric: tabular-nums;
}

/* Görünür odak: 2 px kobalt + 2 px beyaz boşluk; her etkileşimli öğede */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--qs-focus-width) solid var(--qs-focus-color);
  outline-offset: var(--qs-focus-offset);
  box-shadow: 0 0 0 var(--qs-focus-offset) var(--qs-focus-gap);
}

/* Yalnız ekran okuyucuya */
.qs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* RTL temeli: editör ltr; Arapça içerik alanı dir="rtl" lang="ar" (03 §3.7) */
[lang="ar"] {
  font-family: var(--qs-font-ar);
}

[dir="rtl"] {
  text-align: start;
}

bdi {
  unicode-bidi: isolate;
}

/* Azaltılmış hareket: sistem tercihi ve hesap tercihi (03 §3.8) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

:root[data-qs-motion="reduced"] *,
:root[data-qs-motion="reduced"] *::before,
:root[data-qs-motion="reduced"] *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}

/* EYP QR editör · studio/css/shell.css
 * Sahibi: E3 (Kabuk + yönlendirici) → E25 — 03 §7. Görev: üst çubuk, ray, alt sekmeler, çalışma alanı, önizleme bölgesi,
 * bildirim şeridi yeri, kırılımlar (03 §3.2). Renk, aralık, köşe, gölge, ölçü yalnız css/tokens.css değişkenlerinden;
 * yön mantıksal özelliklerle (dir="rtl" aynalanır). Kırılımlar: telefon < 700 · tablet 700–1023 · masaüstü ≥ 1024
 * (1024–1279 dar ray; '[' ile geniş ray çalışma alanının üstüne açılır).
 */
.qs-app { block-size: 100%; }

.qs-shell {
  --qs-shell-rail: var(--qs-rail-w);
  --qs-shell-top: var(--qs-topbar-h);
  display: grid;
  block-size: 100%;
  overflow: hidden;
  grid-template-columns: var(--qs-shell-rail) minmax(var(--qs-work-min), var(--qs-work-max)) minmax(var(--qs-canvas-min), 1fr);
  grid-template-rows: var(--qs-shell-top) minmax(0, 1fr);
  grid-template-areas: "top top top" "rail work canvas";
  background: var(--qs-page);
}

/* ---------- atla bağlantısı ---------- */
.qs-skip {
  position: fixed; z-index: var(--qs-z-menu); inset-block-start: var(--qs-sp-2); inset-inline-start: var(--qs-sp-2);
  padding: var(--qs-sp-2) var(--qs-sp-3); border-radius: var(--qs-r-control); background: var(--qs-surface);
  color: var(--qs-accent-strong); box-shadow: var(--qs-shadow-float); font-weight: var(--qs-fw-medium);
  transform: translateY(-200%);
}
.qs-skip:focus { transform: none; }

/* ---------- üst çubuk ---------- */
.qs-topbar {
  grid-area: top; display: flex; align-items: center; gap: var(--qs-sp-1); min-inline-size: 0;
  padding-inline: var(--qs-sp-2) var(--qs-sp-3); background: var(--qs-surface); border-block-end: 1px solid var(--qs-line);
}
.qs-topbar-gap { flex: 1 1 auto; min-inline-size: 0; }
.qs-topbar-undo { display: flex; align-items: center; }
.qs-topbar .qs-biz { color: var(--qs-ink); font-weight: var(--qs-fw-semibold); min-inline-size: 0; flex: 0 1 auto; max-inline-size: 240px; }
.qs-topbar .qs-biz .qs-ui-button-label { overflow: hidden; text-overflow: ellipsis; }
.qs-topbar .qs-biz .qs-shell-icon { inline-size: 16px; block-size: 16px; color: var(--qs-ink-2); }
.qs-topbar .qs-ui-button { flex: none; }
.qs-topbar .qs-biz { flex: 0 1 auto; }
.qs-shell-icon { inline-size: 20px; block-size: 20px; }
.qs-kbd {
  padding-inline: var(--qs-sp-1); border: 1px solid var(--qs-line); border-radius: var(--qs-r-badge);
  color: var(--qs-ink-2); font-family: inherit; font-size: var(--qs-fs-help); line-height: var(--qs-lh-help);
}
.qs-topbar .qs-preview-btn, .qs-topbar .qs-phone-more { display: none; }
.qs-topbar .qs-account { min-inline-size: var(--qs-hit-desk); padding-inline: 0; border-radius: 50%; font-weight: var(--qs-fw-semibold); background: var(--qs-surface); border-color: var(--qs-control-soft); }

/* durum çipi (03 §3.2): nokta + metin; telefonda nokta + sayı */
.qs-status {
  display: inline-flex; align-items: center; gap: var(--qs-sp-2); flex: 0 1 auto; min-inline-size: 0;
  min-block-size: var(--qs-hit-desk); padding-inline: var(--qs-sp-2); margin-inline-start: var(--qs-sp-2);
  border: 0; border-radius: var(--qs-r-control); background: none; color: var(--qs-ink-2);
  font-size: var(--qs-fs-table); line-height: var(--qs-lh-table); white-space: nowrap;
}
.qs-status:hover { background: var(--qs-raised); }
.qs-status-text { overflow: hidden; text-overflow: ellipsis; }
.qs-status-short { display: none; }
.qs-status-dot { flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--qs-control-line); }
.qs-status[data-tone="draft"] .qs-status-dot { background: var(--qs-st-draft-ink); }
.qs-status[data-tone="published"] .qs-status-dot { background: var(--qs-st-published-ink); }
.qs-status[data-tone="instant"] .qs-status-dot { background: var(--qs-st-instant-ink); }
.qs-status[data-tone="error"] { color: var(--qs-st-error-ink); }
.qs-status[data-tone="error"] .qs-status-dot { background: var(--qs-st-error-ink); }

/* ---------- ray ---------- */
.qs-rail {
  grid-area: rail; min-block-size: 0; overflow-y: auto; overflow-x: hidden; padding: var(--qs-sp-2);
  background: var(--qs-surface); border-inline-end: 1px solid var(--qs-line);
}
.qs-rail-list { display: flex; flex-direction: column; gap: 2px; }
.qs-rail-link {
  position: relative; display: flex; align-items: center; gap: var(--qs-sp-3); min-block-size: 40px;
  padding-inline: var(--qs-sp-3); border-radius: var(--qs-r-control); color: var(--qs-ink-2); text-decoration: none;
  font-weight: var(--qs-fw-medium); transition: background-color var(--qs-dur-hover) var(--qs-ease);
}
.qs-rail-link:hover { background: var(--qs-raised); color: var(--qs-ink); }
.qs-rail-link[aria-current="page"] { background: var(--qs-accent-soft); color: var(--qs-accent-strong); font-weight: var(--qs-fw-semibold); }
.qs-rail-link-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- çalışma alanı + ekran ---------- */
.qs-work {
  grid-area: work; display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0;
  background: var(--qs-surface); border-inline-end: 1px solid var(--qs-line);
}
.qs-work:focus { outline: none; }
.qs-screens { flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column; }
.qs-screen { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overflow-x: hidden; padding: var(--qs-sp-4) var(--qs-sp-5) var(--qs-sp-5); }
.qs-screen-head { margin-block-end: var(--qs-sp-4); }
.qs-screen-title { font-size: var(--qs-fs-title); line-height: var(--qs-lh-title); color: var(--qs-ink); border-radius: var(--qs-r-badge); }
.qs-screen-title:focus { outline: none; }
/* the heading takes focus on every route change (screen readers land on it); a ring there reads as an input box, so it shows none */
.qs-screen-title:focus-visible { outline: none; }
.qs-work > .qs-ui-notice-host { flex: none; border-block-start: 1px solid var(--qs-line); }

/* ---------- önizleme bölgesi (içi E7: S.shell.canvasHost()) ---------- */
.qs-canvas { grid-area: canvas; display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; background: var(--qs-page); }
.qs-canvas-head {
  display: none; align-items: center; justify-content: space-between; gap: var(--qs-sp-2); flex: none;
  min-block-size: var(--qs-canvasbar-h); padding-inline: var(--qs-sp-4) var(--qs-sp-1);
  background: var(--qs-surface); border-block-end: 1px solid var(--qs-line);
}
.qs-canvas-title { font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-canvas-host { flex: 1 1 auto; min-block-size: 0; position: relative; overflow: hidden; }

/* ---------- telefon sekmeleri + Daha ---------- */
.qs-tabs { grid-area: tabs; display: none; background: var(--qs-surface); border-block-start: 1px solid var(--qs-line); padding-block-end: env(safe-area-inset-bottom); }
.qs-tabs-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); block-size: calc(var(--qs-tabbar-h) - 1px); } /* + 1 px üst çizgi = 56 */
.qs-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; inline-size: 100%; block-size: 100%;
  border: 0; background: none; color: var(--qs-ink-2); text-decoration: none; font: inherit;
  font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); font-weight: var(--qs-fw-medium); -webkit-tap-highlight-color: transparent;
}
.qs-tab[aria-current="page"] { color: var(--qs-accent-strong); font-weight: var(--qs-fw-semibold); }
.qs-tab-label { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-tab:focus-visible { outline-offset: calc(var(--qs-focus-width) * -1); box-shadow: none; }
.qs-more-list { display: flex; flex-direction: column; gap: 2px; }
.qs-more-link {
  display: flex; align-items: center; gap: var(--qs-sp-3); inline-size: 100%; min-block-size: var(--qs-hit); padding-inline: var(--qs-sp-3);
  border: 0; border-radius: var(--qs-r-control); background: none; color: var(--qs-ink); text-decoration: none; text-align: start;
  font: inherit; font-size: var(--qs-fs-field); line-height: var(--qs-lh-field);
}
.qs-more-link:hover { background: var(--qs-raised); }
.qs-more-link[aria-current="page"] { background: var(--qs-accent-soft); color: var(--qs-accent-strong); }
.qs-more-sub { padding-inline-start: calc(var(--qs-sp-3) + 24px + var(--qs-sp-3)); font-size: var(--qs-fs-body); color: var(--qs-ink-2); }

/* ---------- kabuksuz ekranlar (giriş, kurulum, baskı) ---------- */
.qs-shell[data-chrome="bare"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "work"; }
.qs-shell[data-chrome="bare"] > .qs-topbar, .qs-shell[data-chrome="bare"] > .qs-rail,
.qs-shell[data-chrome="bare"] > .qs-canvas, .qs-shell[data-chrome="bare"] > .qs-tabs { display: none; }
.qs-shell[data-chrome="bare"] .qs-work { border: 0; }
/* no top bar here: the work area itself keeps clear of the status bar, the home indicator and side insets (phone browser, iOS shell app) */
.qs-shell[data-chrome="bare"] .qs-work { padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom); padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }

/* ---------- masaüstü geniş kip (toplu tablo: çalışma alanı + kanvas birleşir; 03 §3.2) ---------- */
@media (min-width: 1024px) {
  .qs-shell[data-wide] { grid-template-columns: var(--qs-shell-rail) minmax(0, 1fr); grid-template-areas: "top top" "rail work"; }
  .qs-shell[data-wide] > .qs-canvas { display: none; }
  .qs-shell[data-wide][data-preview] { grid-template-columns: var(--qs-shell-rail) minmax(0, 1fr) var(--qs-canvas-min); grid-template-areas: "top top top" "rail work canvas"; }
  .qs-shell[data-wide][data-preview] > .qs-canvas { display: flex; }
}

/* ---------- dar ray: masaüstü 1024–1279 ve tablet (yalnız ikon + ipucu) ---------- */
@media (max-width: 1279px) {
  .qs-shell { --qs-shell-rail: var(--qs-rail-w-compact); }
  .qs-rail { overflow: visible; padding-inline: var(--qs-sp-1); }
  .qs-rail-link { justify-content: center; min-block-size: 48px; padding-inline: 0; }
  .qs-rail-link-label {
    position: absolute; z-index: var(--qs-z-sticky); inset-inline-start: calc(100% + var(--qs-sp-2)); inset-block-start: 50%; transform: translateY(-50%);
    padding: var(--qs-sp-1) var(--qs-sp-2); border-radius: var(--qs-r-control); background: var(--qs-ink); color: var(--qs-surface);
    font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); font-weight: var(--qs-fw-medium); pointer-events: none;
    clip-path: inset(50%); opacity: 0;
  }
  .qs-rail-link:hover > .qs-rail-link-label, .qs-rail-link:focus-visible > .qs-rail-link-label { clip-path: none; opacity: 1; }
  .qs-shell[data-rail-open] > .qs-rail {
    position: relative; z-index: var(--qs-z-rail); inline-size: var(--qs-rail-w); padding-inline: var(--qs-sp-2); box-shadow: var(--qs-shadow-float);
  }
  .qs-shell[data-rail-open] .qs-rail-link { justify-content: flex-start; padding-inline: var(--qs-sp-3); }
  .qs-shell[data-rail-open] .qs-rail-link-label { position: static; transform: none; padding: 0; background: none; color: inherit; font-size: inherit; line-height: inherit; clip-path: none; opacity: 1; }
}

/* ---------- tablet 700–1023: ray 64 + çalışma alanı; kanvas sağdan 420 px çekmece ---------- */
@media (max-width: 1023px) {
  .qs-shell { grid-template-columns: var(--qs-shell-rail) minmax(0, 1fr); grid-template-areas: "top top" "rail work"; }
  .qs-work { border-inline-end: 0; }
  .qs-topbar .qs-preview-btn { display: inline-flex; }
  .qs-canvas {
    position: fixed; z-index: var(--qs-z-drawer); inset-block: 0; inset-inline-end: 0; inline-size: min(var(--qs-drawer-w), 100%);
    box-shadow: var(--qs-shadow-float); visibility: hidden; transform: translateX(100%);
    transition: transform var(--qs-dur-sheet) var(--qs-ease), visibility 0s linear var(--qs-dur-sheet);
  }
  [dir="rtl"] .qs-canvas { transform: translateX(-100%); }
  .qs-shell[data-preview] > .qs-canvas { visibility: visible; transform: none; transition: transform var(--qs-dur-sheet) var(--qs-ease); }
  .qs-canvas-head { display: flex; }
  .qs-topbar { gap: var(--qs-sp-1); }
  .qs-status { min-block-size: var(--qs-hit); }
  .qs-topbar .qs-account { min-inline-size: var(--qs-hit); }
}

/* ---------- telefon < 700: tam genişlik, alt sekmeler 56 + güvenli alan, kanvas tam ekran ---------- */
@media (max-width: 699px) {
  .qs-shell {
    --qs-shell-top: calc(var(--qs-topbar-h) + env(safe-area-inset-top));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--qs-shell-top) minmax(0, 1fr) auto;
    grid-template-areas: "top" "work" "tabs";
  }
  .qs-topbar { padding-block-start: env(safe-area-inset-top); padding-inline: var(--qs-sp-1) var(--qs-sp-2); gap: 0; }
  .qs-rail, .qs-topbar .qs-topbar-undo, .qs-topbar .qs-search, .qs-topbar .qs-account { display: none; }
  .qs-topbar .qs-phone-more { display: inline-flex; }
  .qs-tabs { display: block; }
  .qs-shell[data-keyboard] > .qs-tabs { display: none; }
  .qs-screen { padding: var(--qs-sp-3) var(--qs-sp-4) var(--qs-sp-4); }
  .qs-topbar .qs-biz { max-inline-size: none; padding-inline: var(--qs-sp-2); }
  .qs-status { margin-inline-start: 0; justify-content: center; min-inline-size: var(--qs-hit); }
  .qs-status-text { display: none; }
  .qs-status-short { display: inline; }
  .qs-status-short:empty { display: none; }
  .qs-topbar .qs-preview-btn { min-inline-size: var(--qs-hit); padding-inline: 0; }
  .qs-topbar .qs-preview-btn .qs-ui-button-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .qs-topbar .qs-publish { padding-inline: var(--qs-sp-3); }
  .qs-canvas { inline-size: 100%; padding-block-start: env(safe-area-inset-top); box-shadow: none; transform: translateY(100%); }
  [dir="rtl"] .qs-canvas { transform: translateY(100%); }
}

/* ---------- ekran çatısı: alt gezinme ve yükleniyor (03 §4.1) ---------- */
.qs-subtabs {
  display: flex; gap: var(--qs-sp-1); margin-block-end: var(--qs-sp-4); overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; border-block-end: 1px solid var(--qs-line);
}
.qs-subtabs::-webkit-scrollbar { display: none; }
.qs-subtab {
  flex: none; display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--qs-sp-3);
  border-block-end: 2px solid transparent; color: var(--qs-ink-2); text-decoration: none; white-space: nowrap; font-weight: var(--qs-fw-medium);
}
.qs-subtab:hover { color: var(--qs-ink); }
.qs-subtab[aria-current="page"] { border-block-end-color: var(--qs-accent); color: var(--qs-accent-strong); font-weight: var(--qs-fw-semibold); }
.qs-frame-loading { padding: var(--qs-sp-6) var(--qs-sp-4); color: var(--qs-ink-2); text-align: center; }

/* EYP QR editör · studio/css/components.css
 * Sahibi: E6 (ortak stillerin tek sahibi) — 03 §7. Görev: bütün ortak bileşen stilleri (03 §3.6).
 * Sınıflar .qs-ui-<bileşen>: core/shared.css misafir sınıflarıyla (.qs-btn, .qs-field, .qs-empty, .qs-table …) çakışmaz.
 * Renk, aralık, köşe, gölge yalnız css/tokens.css değişkenlerinden; yön mantıksal özelliklerle (RTL aynalanır).
 * Ölçü: masaüstü işaretçide düğme 36, simge düğme ve tablo hücresi 32; < 1024 px ve kaba işaretçide her hedef 44 (03 §3.7).
 */
.qs-ui-button, .qs-ui-segment, .qs-ui-switch, .qs-ui-group-head, .qs-ui-menu-item, .qs-ui-row-main, .qs-ui-row-handle,
.qs-ui-option, .qs-ui-langtab, .qs-ui-media-tile, .qs-ui-pa-tone, .qs-ui-crumb-link, .qs-ui-tree-more {
  -webkit-tap-highlight-color: transparent; font: inherit; color: inherit; border: 0; background: none; margin: 0;
}
.qs-ui-button .qs-icon, .qs-ui-field .qs-icon, .qs-ui-group .qs-icon, .qs-ui-notice .qs-icon, .qs-ui-tree .qs-icon { inline-size: 20px; block-size: 20px; }

/* ---------- button ---------- */
.qs-ui-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--qs-sp-2);
  min-block-size: calc(var(--qs-hit-desk) + var(--qs-sp-1)); padding-block: 0; padding-inline: var(--qs-sp-3);
  border: 1px solid transparent; border-radius: var(--qs-r-control); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body);
  font-weight: var(--qs-fw-medium); white-space: nowrap;
  transition: background-color var(--qs-dur-hover) var(--qs-ease), border-color var(--qs-dur-hover) var(--qs-ease), color var(--qs-dur-hover) var(--qs-ease);
}
.qs-ui-button--primary { background: var(--qs-accent); color: var(--qs-on-accent); }
.qs-ui-button--primary:hover, .qs-ui-button--primary:active { background: var(--qs-accent-strong); }
/* baskın eylem (00 §7.108): yalnız Yayınla. Neon zemin + koyu mor yazı + ince kenar (beyaz zeminde sınır) */
.qs-ui-button.qs-publish, .qs-ui-button--primary[data-fk="publish-go"] { background: var(--qs-cta); color: var(--qs-on-cta); box-shadow: inset 0 0 0 1px var(--qs-cta-line); font-weight: var(--qs-fw-semibold); }
.qs-ui-button.qs-publish:hover, .qs-ui-button.qs-publish:active, .qs-ui-button--primary[data-fk="publish-go"]:hover, .qs-ui-button--primary[data-fk="publish-go"]:active { background: var(--qs-cta-strong); }
.qs-ui-button.qs-publish:disabled, .qs-ui-button.qs-publish[aria-disabled="true"], .qs-ui-button--primary[data-fk="publish-go"]:disabled, .qs-ui-button--primary[data-fk="publish-go"][aria-disabled="true"] { background: var(--qs-raised); color: var(--qs-ink-2); box-shadow: none; font-weight: var(--qs-fw-medium); }
.qs-ui-button.qs-publish .qs-ui-button-count, .qs-ui-button--primary[data-fk="publish-go"] .qs-ui-button-count { background: var(--qs-accent); color: var(--qs-cta); }
/* yumuşak dil: ana eylem dolu marka rengi; ikincil hafif zemin, kenarsız; düşük öncelikli (quiet) sade metin */
.qs-ui-button--secondary { background: var(--qs-soft); color: var(--qs-ink); }
.qs-ui-button--secondary:hover { background: var(--qs-line); }
.qs-ui-button--secondary:active { background: var(--qs-control-soft); }
.qs-ui-button--quiet:active, .qs-ui-button--icon:active { background: var(--qs-line); }
.qs-ui-button--quiet { color: var(--qs-ink-2); padding-inline: var(--qs-sp-2); }
.qs-ui-button--quiet:hover, .qs-ui-button--icon:hover { background: var(--qs-raised); color: var(--qs-ink); }
.qs-ui-button--danger { background: var(--qs-st-error-ink); color: var(--qs-on-accent); }
.qs-ui-button--danger:hover, .qs-ui-button--danger:active { background: var(--qs-ink); }
.qs-ui-button--icon { min-inline-size: var(--qs-hit-desk); min-block-size: var(--qs-hit-desk); padding: 0; color: var(--qs-ink-2); }
.qs-ui-button[aria-pressed="true"] { background: var(--qs-accent-soft); border-color: transparent; color: var(--qs-accent-strong); }
.qs-ui-button:disabled, .qs-ui-button[aria-disabled="true"] { background: var(--qs-raised); border-color: var(--qs-line); color: var(--qs-ink-2); cursor: not-allowed; }
.qs-ui-button--quiet:disabled, .qs-ui-button--quiet[aria-disabled="true"], .qs-ui-button--icon:disabled { background: none; border-color: transparent; }
.qs-ui-button[aria-busy="true"] { cursor: progress; }
.qs-ui-button[aria-busy="true"] .qs-ui-button-label { opacity: .7; }
.qs-ui-button-count { min-inline-size: 20px; padding-inline: var(--qs-sp-1); border-radius: var(--qs-r-badge); background: var(--qs-surface); color: var(--qs-accent-strong); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); font-weight: var(--qs-fw-semibold); }
.qs-ui-spin { inline-size: 14px; block-size: 14px; flex: none; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: qs-ui-spin 800ms linear infinite; }
@keyframes qs-ui-spin { to { transform: rotate(360deg); } }
.qs-ui-tip {
  display: none; position: absolute; z-index: 30; inset-block-start: calc(100% + var(--qs-sp-1)); inset-inline-start: 0;
  inline-size: max-content; max-inline-size: var(--qs-rail-w); padding: var(--qs-sp-1) var(--qs-sp-2); border-radius: var(--qs-r-badge);
  background: var(--qs-ink); color: var(--qs-surface); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); font-weight: var(--qs-fw-regular); white-space: normal; text-align: start;
}
.qs-ui-button:hover > .qs-ui-tip, .qs-ui-button:focus-visible > .qs-ui-tip, .qs-ui-switch:hover > .qs-ui-tip, .qs-ui-switch:focus-visible > .qs-ui-tip { display: block; }

/* ---------- field ---------- */
.qs-ui-field { display: flex; flex-direction: column; gap: var(--qs-sp-1); min-inline-size: 0; }
.qs-ui-field-label { font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-medium); color: var(--qs-ink); }
.qs-ui-field-req { color: var(--qs-ink-2); font-weight: var(--qs-fw-regular); }
.qs-ui-field-control { position: relative; display: flex; align-items: center; }
.qs-ui-input {
  inline-size: 100%; min-inline-size: 0; min-block-size: calc(var(--qs-hit-desk) + var(--qs-sp-2)); padding-block: var(--qs-sp-1); padding-inline: var(--qs-sp-3);
  border: 1px solid var(--qs-control-line); border-radius: var(--qs-r-control); background: var(--qs-surface); color: var(--qs-ink);
  transition: border-color var(--qs-dur-hover) var(--qs-ease);
}
textarea.qs-ui-input { resize: vertical; min-block-size: calc(var(--qs-lh-field) * 3 + var(--qs-sp-3)); }
.qs-ui-input:hover { border-color: var(--qs-ink-2); }
.qs-ui-input:focus-visible { border-color: var(--qs-accent); }
.qs-ui-input::placeholder { color: var(--qs-ink-2); }
.qs-ui-field-suffix { position: absolute; inset-inline-end: var(--qs-sp-3); color: var(--qs-ink-2); pointer-events: none; }
.qs-ui-field-control:has(.qs-ui-field-suffix) .qs-ui-input { padding-inline-end: var(--qs-sp-7); }
.qs-ui-field[data-error] .qs-ui-input { border-color: var(--qs-st-error-ink); box-shadow: inset 0 0 0 1px var(--qs-st-error-ink); }
.qs-ui-field[data-readonly] .qs-ui-input { background: var(--qs-raised); border-color: var(--qs-line); color: var(--qs-ink-2); cursor: default; }
.qs-ui-field-error, .qs-ui-field-lock, .qs-ui-field-hint { display: flex; align-items: flex-start; gap: var(--qs-sp-1); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-ui-field-error { color: var(--qs-st-error-ink); }
.qs-ui-field-error .qs-icon { inline-size: 16px; block-size: 16px; }
.qs-ui-field-lock, .qs-ui-field-hint { color: var(--qs-ink-2); }
.qs-ui-lock { position: relative; flex: none; inline-size: 10px; block-size: 8px; margin-block-start: 6px; border-radius: 2px; background: currentColor; }
.qs-ui-lock::before { content: ''; position: absolute; inset-inline-start: 2px; inset-block-end: 100%; inline-size: 6px; block-size: 5px; border: 1.5px solid currentColor; border-block-end: 0; border-radius: 3px 3px 0 0; }

/* ---------- badge · empty ---------- */
.qs-ui-badge {
  display: inline-flex; align-items: center; gap: var(--qs-sp-1); flex: none; padding-inline: var(--qs-sp-2); border-radius: var(--qs-r-badge);
  font-size: var(--qs-fs-help); line-height: 20px; font-weight: var(--qs-fw-medium); white-space: nowrap; background: var(--qs-raised); color: var(--qs-ink-2);
}
.qs-ui-badge-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.qs-ui-badge--draft { background: var(--qs-st-draft-bg); color: var(--qs-st-draft-ink); }
.qs-ui-badge--instant { background: var(--qs-st-instant-bg); color: var(--qs-st-instant-ink); }
.qs-ui-badge--published { background: var(--qs-st-published-bg); color: var(--qs-st-published-ink); }
.qs-ui-badge--error { background: var(--qs-st-error-bg); color: var(--qs-st-error-ink); }
.qs-ui-empty { display: flex; flex-direction: column; align-items: center; gap: var(--qs-sp-2); padding: var(--qs-sp-6) var(--qs-sp-4); text-align: center; }
.qs-ui-empty-title { font-size: var(--qs-fs-field); line-height: var(--qs-lh-field); }
.qs-ui-empty-text { max-inline-size: var(--qs-work-min); color: var(--qs-ink-2); }
.qs-ui-empty .qs-ui-button { margin-block-start: var(--qs-sp-2); }

/* ---------- segmented · switch ---------- */
/* yumuşak dil: zemin ve çerçeve yok; seçili öğe hafif nötr dolgu, ötekiler sade metin */
.qs-ui-segmented { display: inline-flex; max-inline-size: 100%; gap: 2px; border-radius: var(--qs-r-control); }
.qs-ui-segment {
  flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--qs-hit-desk); padding-inline: var(--qs-sp-3); border-radius: calc(var(--qs-r-control) - 2px);
  color: var(--qs-ink-2); font-size: var(--qs-fs-body); font-weight: var(--qs-fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color var(--qs-dur-hover) var(--qs-ease), color var(--qs-dur-hover) var(--qs-ease), box-shadow var(--qs-dur-hover) var(--qs-ease);
}
.qs-ui-segment:hover { color: var(--qs-ink); background: var(--qs-raised); }
.qs-ui-segment[aria-checked="true"] { background: var(--qs-select-soft); color: var(--qs-ink); }
.qs-ui-segment:disabled { color: var(--qs-control-line); cursor: not-allowed; }
.qs-ui-switch-row { display: flex; flex-direction: column; gap: var(--qs-sp-1); }
.qs-ui-switch {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--qs-sp-3); inline-size: 100%;
  min-block-size: var(--qs-hit-desk); padding: 0; text-align: start; font-size: var(--qs-fs-body);
}
.qs-ui-switch-label { min-inline-size: 0; overflow-wrap: anywhere; }
/* yuvarlatılmış ray, dairesel tutamak; kapalı nötr gri, açık marka rengi */
.qs-ui-switch-track { position: relative; flex: none; inline-size: 36px; block-size: 22px; border-radius: 11px; background: var(--qs-switch-off); transition: background-color var(--qs-dur-hover) var(--qs-ease); }
.qs-ui-switch-thumb { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--qs-surface); box-shadow: var(--qs-shadow-thumb); transition: inset-inline-start var(--qs-dur-hover) var(--qs-ease); }
/* açık: lilac ray + koyu mor tutamak (durum renkten bağımsız da okunur) + 3:1 kenar */
.qs-ui-switch[aria-checked="true"] .qs-ui-switch-track { background: var(--qs-select); box-shadow: inset 0 0 0 1px var(--qs-select-line); }
.qs-ui-switch[aria-checked="true"] .qs-ui-switch-thumb { inset-inline-start: 17px; background: var(--qs-on-select); box-shadow: none; }
.qs-ui-switch:disabled, .qs-ui-switch[aria-disabled="true"] { color: var(--qs-ink-2); cursor: not-allowed; }
.qs-ui-switch:disabled .qs-ui-switch-track, .qs-ui-switch[aria-disabled="true"] .qs-ui-switch-track { background: var(--qs-line); box-shadow: none; }
.qs-ui-switch:disabled .qs-ui-switch-thumb, .qs-ui-switch[aria-disabled="true"] .qs-ui-switch-thumb { background: var(--qs-surface); box-shadow: var(--qs-shadow-thumb); }
.qs-ui-switch[aria-checked="true"]:disabled .qs-ui-switch-thumb, .qs-ui-switch[aria-checked="true"][aria-disabled="true"] .qs-ui-switch-thumb { background: var(--qs-control-line); box-shadow: none; }

/* ---------- group ---------- */
.qs-ui-group { border-block-end: 1px solid var(--qs-line); }
.qs-ui-group-h { font-size: inherit; }
.qs-ui-group-head {
  display: flex; align-items: center; gap: var(--qs-sp-2); inline-size: 100%; min-block-size: var(--qs-hit); padding: 0; text-align: start;
  font-size: var(--qs-fs-body); font-weight: var(--qs-fw-semibold);
}
.qs-ui-group-head .qs-icon { color: var(--qs-ink-2); transition: transform var(--qs-dur-hover) var(--qs-ease); }
.qs-ui-group[data-open] .qs-ui-group-head .qs-icon { transform: rotate(90deg); }
.qs-ui-group-title { flex: 1 1 auto; min-inline-size: 0; }
.qs-ui-group-count { padding-inline: var(--qs-sp-2); border-radius: var(--qs-r-badge); background: var(--qs-raised); color: var(--qs-ink-2); font-size: var(--qs-fs-help); font-weight: var(--qs-fw-medium); }
.qs-ui-group-body { display: flex; flex-direction: column; gap: var(--qs-sp-3); padding-block-end: var(--qs-sp-4); }
.qs-ui-group-note { display: flex; gap: var(--qs-sp-2); padding: var(--qs-sp-2) var(--qs-sp-3); border-radius: var(--qs-r-control); background: var(--qs-raised); color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-ui-group-note .qs-icon { inline-size: 16px; block-size: 16px; }

/* ---------- menu ---------- */
.qs-ui-menu {
  position: fixed; z-index: 60; left: var(--qs-menu-x, 8px); top: var(--qs-menu-y, 8px); /* fiziksel: getBoundingClientRect'ten */
  min-inline-size: var(--qs-rail-w); max-inline-size: calc(100vw - var(--qs-sp-4)); max-block-size: 60vh; overflow-y: auto; padding: var(--qs-sp-1);
  border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); background: var(--qs-surface); box-shadow: var(--qs-shadow-float);
}
.qs-ui-menu-item {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--qs-sp-2); inline-size: 100%; min-block-size: var(--qs-hit-desk);
  padding: var(--qs-sp-1) var(--qs-sp-2); border-radius: var(--qs-r-control); text-align: start; font-size: var(--qs-fs-body);
}
.qs-ui-menu-item:hover, .qs-ui-menu-item:focus-visible { background: var(--qs-raised); }
.qs-ui-menu-item:focus-visible, .qs-ui-grid td:focus-visible, .qs-ui-media-tile:focus-visible { outline-offset: calc(var(--qs-focus-width) * -1); box-shadow: none; }
.qs-ui-menu-item.is-danger { color: var(--qs-st-error-ink); }
.qs-ui-menu-item[aria-disabled="true"] { color: var(--qs-ink-2); cursor: not-allowed; }
.qs-ui-menu-check { inline-size: 20px; flex: none; color: var(--qs-accent); }
.qs-ui-menu-check .qs-icon { inline-size: 16px; block-size: 16px; }
.qs-ui-menu-label { flex: 1 1 auto; min-inline-size: 0; }
.qs-ui-menu-reason { flex-basis: 100%; font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-ui-more-dots, .qs-ui-more-dots::before, .qs-ui-more-dots::after { inline-size: 4px; block-size: 4px; border-radius: 50%; background: currentColor; }
.qs-ui-more-dots { position: relative; display: block; }
.qs-ui-more-dots::before, .qs-ui-more-dots::after { content: ''; position: absolute; inset-block-start: 0; }
.qs-ui-more-dots::before { inset-inline-start: -7px; }
.qs-ui-more-dots::after { inset-inline-start: 7px; }

/* ---------- listRow ---------- */
.qs-ui-list { display: flex; flex-direction: column; }
.qs-ui-row {
  display: flex; align-items: center; gap: var(--qs-sp-1); min-block-size: var(--qs-hit); padding-inline: var(--qs-sp-1);
  border-block-end: 1px solid var(--qs-line); background: var(--qs-surface); transition: background-color var(--qs-dur-hover) var(--qs-ease);
}
.qs-ui-row:hover { background: var(--qs-page); }
.qs-ui-row[data-selected] { background: var(--qs-accent-soft); }
.qs-ui-row[data-dragging] { position: relative; z-index: 2; border-radius: var(--qs-r-control); box-shadow: var(--qs-shadow-float); }
/* Soluk satır: metin opaklıkla DEĞİL ink-2 (≥ 5,5:1) ile soluklaşır (opaklık .55 metni 3,93:1, rozeti 2,28:1'e düşürüyordu); yalnız görsel solar. 'gizli'/'arşivde' rozeti metin taşır. */
.qs-ui-row[data-hidden] .qs-ui-row-media, .qs-ui-row[data-archived] .qs-ui-row-media { opacity: .55; }
.qs-ui-row[data-hidden] .qs-ui-row-title bdi, .qs-ui-row[data-archived] .qs-ui-row-title bdi { color: var(--qs-ink-2); }
.qs-ui-row-handle { display: grid; place-items: center; flex: none; inline-size: var(--qs-hit-desk); block-size: var(--qs-hit); border-radius: var(--qs-r-control); color: var(--qs-ink-2); cursor: grab; touch-action: none; }
.qs-ui-row-handle[aria-pressed="true"] { background: var(--qs-accent-soft); color: var(--qs-accent-strong); }
.qs-ui-grip { inline-size: 10px; block-size: 16px; background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.6px); background-size: 5px 5.33px; }
.qs-ui-row-checkhit { display: grid; place-items: center; flex: none; inline-size: var(--qs-hit-desk); min-block-size: var(--qs-hit); cursor: pointer; }
.qs-ui-row-check { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--qs-accent); }
.qs-ui-row-main { display: flex; align-items: center; gap: var(--qs-sp-3); flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--qs-hit); padding: var(--qs-sp-1) var(--qs-sp-2); border-radius: var(--qs-r-control); text-align: start; }
button.qs-ui-row-main { cursor: pointer; }
.qs-ui-row-media { flex: none; inline-size: 40px; block-size: 40px; border-radius: var(--qs-r-control); overflow: hidden; background: var(--qs-raised); }
.qs-ui-row-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.qs-ui-row-text { display: flex; flex-direction: column; flex: 1 1 auto; min-inline-size: 0; }
.qs-ui-row-title { display: flex; align-items: center; gap: var(--qs-sp-2); min-inline-size: 0; font-weight: var(--qs-fw-medium); }
.qs-ui-row-title bdi { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-ui-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-ui-row-hidden, .qs-ui-row-archived { flex: none; padding-inline: var(--qs-sp-1); border-radius: var(--qs-r-badge); background: var(--qs-raised); color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); font-weight: var(--qs-fw-regular); }
.qs-ui-row-hidden[hidden], .qs-ui-row-archived[hidden] { display: none; }
.qs-ui-row-badges { display: flex; gap: var(--qs-sp-1); flex: none; }
.qs-ui-row-meta { flex: none; color: var(--qs-ink); font-size: var(--qs-fs-body); }
.qs-ui-row-controls { display: flex; align-items: center; gap: var(--qs-sp-1); flex: none; }

/* ---------- tree ---------- */
.qs-ui-tree, .qs-ui-tree-group { display: flex; flex-direction: column; }
.qs-ui-tree-item { --qs-tree-level: 0; outline: none; }
.qs-ui-tree-item:focus-visible { outline: none; box-shadow: none; }
.qs-ui-tree-row {
  display: flex; align-items: center; gap: var(--qs-sp-2); min-block-size: var(--qs-hit); padding-inline-end: var(--qs-sp-1);
  padding-inline-start: calc(var(--qs-sp-1) + var(--qs-tree-level) * var(--qs-sp-5)); border-radius: var(--qs-r-control); cursor: pointer;
}
.qs-ui-tree-row:hover { background: var(--qs-page); }
.qs-ui-tree-item:focus-visible > .qs-ui-tree-row { outline: var(--qs-focus-width) solid var(--qs-focus-color); outline-offset: calc(var(--qs-focus-width) * -1); }
.qs-ui-tree-item[aria-selected="true"] > .qs-ui-tree-row { background: var(--qs-accent-soft); font-weight: var(--qs-fw-medium); }
.qs-ui-tree-item[data-hidden] > .qs-ui-tree-row .qs-ui-tree-label { color: var(--qs-ink-2); }
.qs-ui-tree-twist { display: grid; place-items: center; flex: none; inline-size: 24px; block-size: 24px; color: var(--qs-ink-2); }
.qs-ui-tree-item[aria-expanded="true"] > .qs-ui-tree-row .qs-ui-tree-twist .qs-icon { transform: rotate(90deg); }
.qs-ui-tree-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-ui-tree-meta { flex: none; color: var(--qs-ink-2); font-size: var(--qs-fs-help); }
.qs-ui-tree-more { display: grid; place-items: center; flex: none; inline-size: var(--qs-hit-desk); block-size: var(--qs-hit-desk); border-radius: var(--qs-r-control); color: var(--qs-ink-2); }
.qs-ui-tree-more:hover { background: var(--qs-raised); }
.qs-ui-tree-item[data-drop="inside"] > .qs-ui-tree-row { box-shadow: inset 0 0 0 2px var(--qs-accent); background: var(--qs-accent-soft); }
.qs-ui-tree-item[data-drop="before"] > .qs-ui-tree-row { box-shadow: inset 0 2px 0 var(--qs-accent); }
.qs-ui-tree-item[data-drop="after"] > .qs-ui-tree-row { box-shadow: inset 0 -2px 0 var(--qs-accent); }

/* ---------- selectionBar ---------- */
.qs-ui-selbar {
  display: flex; align-items: center; gap: var(--qs-sp-2); min-block-size: var(--qs-hit); padding-inline: var(--qs-sp-3) var(--qs-sp-1);
  border-radius: var(--qs-r-card); background: var(--qs-accent-soft); color: var(--qs-ink);
}
.qs-ui-selbar-count { flex: none; font-weight: var(--qs-fw-semibold); }
.qs-ui-selbar-actions { display: flex; align-items: center; gap: var(--qs-sp-1); flex: 1 1 auto; min-inline-size: 0; flex-wrap: wrap; }
.qs-ui-selbar .qs-ui-button--quiet:not(:disabled):not([aria-disabled="true"]) { color: var(--qs-accent-strong); }

/* ---------- table ---------- */
.qs-ui-table { max-inline-size: 100%; overflow: auto; border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); background: var(--qs-surface); }
.qs-ui-grid { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--qs-fs-table); line-height: var(--qs-lh-table); }
.qs-ui-grid th {
  position: sticky; inset-block-start: 0; z-index: 1; block-size: var(--qs-hit-desk); padding-inline: var(--qs-sp-2); background: var(--qs-page);
  border-block-end: 1px solid var(--qs-line); color: var(--qs-ink-2); font-weight: var(--qs-fw-medium); text-align: start; white-space: nowrap;
}
.qs-ui-grid td { position: relative; block-size: var(--qs-hit-desk); padding-block: 0; padding-inline: var(--qs-sp-2); border-block-end: 1px solid var(--qs-line); white-space: nowrap; }
.qs-ui-grid .is-end { text-align: end; }
.qs-ui-grid td.is-editable { cursor: cell; }
.qs-ui-grid td[aria-readonly="true"] { color: var(--qs-ink-2); }
.qs-ui-grid tr[aria-selected="true"] td { background: var(--qs-accent-soft); }
.qs-ui-grid td[data-dirty]::before { content: ''; position: absolute; inset-block-start: 4px; inset-inline-start: 3px; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--qs-st-instant-ink); }
.qs-ui-grid td[data-error] { background: var(--qs-st-error-bg); box-shadow: inset 0 0 0 1px var(--qs-st-error-ink); color: var(--qs-st-error-ink); }
.qs-ui-grid td[data-editing] { padding: 0; box-shadow: inset 0 0 0 2px var(--qs-accent); }
.qs-ui-grid-sel { inline-size: 40px; text-align: center; }
.qs-ui-grid-sel input { margin: 0; vertical-align: middle; accent-color: var(--qs-accent); }
.qs-ui-grid-input { inline-size: 100%; block-size: var(--qs-hit-desk); padding-inline: var(--qs-sp-2); border: 0; background: var(--qs-surface); font-size: var(--qs-fs-table); line-height: var(--qs-lh-table); text-align: inherit; }
.qs-ui-grid-input:focus-visible { outline: none; box-shadow: none; }
.qs-ui-grid td.is-sticky, .qs-ui-grid th.is-sticky { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--qs-surface); }
.qs-ui-grid th.is-sticky { z-index: 2; background: var(--qs-page); }

/* ---------- inspectorHeader ---------- */
.qs-ui-inspector { display: flex; flex-direction: column; gap: var(--qs-sp-1); padding-block-end: var(--qs-sp-3); border-block-end: 1px solid var(--qs-line); }
.qs-ui-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-1); color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-ui-crumb { display: flex; align-items: center; gap: var(--qs-sp-1); min-inline-size: 0; }
.qs-ui-crumb + .qs-ui-crumb::before { content: '›'; color: var(--qs-ink-2); }
.qs-ui-crumb-link { min-block-size: 24px; padding: 0; color: var(--qs-accent); text-decoration: underline; text-underline-offset: 2px; }
.qs-ui-inspector-row { display: flex; align-items: center; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-ui-inspector-title { flex: 0 1 auto; min-inline-size: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: var(--qs-fs-title); line-height: var(--qs-lh-title); }
.qs-ui-inspector-tools { display: flex; gap: var(--qs-sp-1); margin-inline-start: auto; flex: none; }

/* ---------- optionCard ---------- */
.qs-ui-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--qs-sp-7) * 3), 1fr)); gap: var(--qs-sp-3); }
.qs-ui-option {
  position: relative; display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; padding: var(--qs-sp-2);
  border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); background: var(--qs-surface); text-align: start; cursor: pointer;
  transition: border-color var(--qs-dur-hover) var(--qs-ease);
}
.qs-ui-option:hover { border-color: var(--qs-control-line); }
.qs-ui-option[aria-checked="true"] { border-color: var(--qs-select-line); background: var(--qs-accent-soft); }
.qs-ui-option:disabled, .qs-ui-option[aria-disabled="true"] { cursor: not-allowed; color: var(--qs-ink-2); }
.qs-ui-option:disabled .qs-ui-option-media, .qs-ui-option[aria-disabled="true"] .qs-ui-option-media { opacity: .45; }
.qs-ui-option-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--qs-r-control); background: var(--qs-raised); }
.qs-ui-option-media > * { inline-size: 100%; block-size: 100%; object-fit: cover; }
.qs-ui-option-check { position: absolute; inset-block-start: var(--qs-sp-3); inset-inline-end: var(--qs-sp-3); display: none; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--qs-accent); color: var(--qs-on-accent); }
.qs-ui-option-check .qs-icon { inline-size: 16px; block-size: 16px; }
.qs-ui-option[aria-checked="true"] .qs-ui-option-check { display: grid; }
.qs-ui-option-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--qs-sp-1); min-inline-size: 0; }
.qs-ui-option-title { font-weight: var(--qs-fw-medium); overflow-wrap: anywhere; }
.qs-ui-option-note { color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }

/* ---------- langField ---------- */
.qs-ui-langfield { display: flex; flex-direction: column; gap: var(--qs-sp-1); min-inline-size: 0; }
.qs-ui-langfield-head { display: flex; align-items: center; justify-content: space-between; gap: var(--qs-sp-2); flex-wrap: wrap; }
.qs-ui-langtabs { display: inline-flex; gap: 2px; border-radius: var(--qs-r-control); }
.qs-ui-langtab { position: relative; display: inline-flex; align-items: center; gap: var(--qs-sp-1); min-inline-size: var(--qs-hit-desk); min-block-size: 28px; padding-inline: var(--qs-sp-2); border-radius: calc(var(--qs-r-control) - 2px); color: var(--qs-ink-2); font-size: var(--qs-fs-help); font-weight: var(--qs-fw-semibold); transition: background-color var(--qs-dur-hover) var(--qs-ease), color var(--qs-dur-hover) var(--qs-ease), box-shadow var(--qs-dur-hover) var(--qs-ease); }
.qs-ui-langtab[aria-selected="true"] { background: var(--qs-select-soft); color: var(--qs-ink); }
.qs-ui-langtab-dot { display: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--qs-st-instant-ink); }
.qs-ui-langtab[data-missing] .qs-ui-langtab-dot { display: inline-block; }
.qs-ui-langtab[data-error] { color: var(--qs-st-error-ink); }
.qs-ui-langtab[data-error] .qs-ui-langtab-dot { display: inline-block; background: var(--qs-st-error-ink); }

/* ---------- confirm · dialog · sheet ---------- */
.qs-ui-scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--qs-sp-4); background: color-mix(in srgb, var(--qs-ink) 40%, transparent); animation: qs-ui-fade var(--qs-dur-sheet) var(--qs-ease); }
@keyframes qs-ui-fade { from { opacity: 0; } }
.qs-ui-dialog {
  display: flex; flex-direction: column; gap: var(--qs-sp-4); inline-size: min(var(--qs-work-min), 100%); max-block-size: calc(100vh - var(--qs-sp-6)); overflow: auto;
  padding: var(--qs-sp-5); border-radius: var(--qs-r-layer); background: var(--qs-surface); box-shadow: var(--qs-shadow-float);
}
.qs-ui-dialog-title, .qs-ui-sheet-title { font-size: var(--qs-fs-field); line-height: var(--qs-lh-field); }
.qs-ui-dialog-body { display: flex; flex-direction: column; gap: var(--qs-sp-3); color: var(--qs-ink); }
.qs-ui-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--qs-sp-2); }
.qs-ui-confirm-text { color: var(--qs-ink-2); }
.qs-ui-confirm-rows { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); }
.qs-ui-confirm-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--qs-sp-1) var(--qs-sp-3); padding: var(--qs-sp-2) var(--qs-sp-3); }
.qs-ui-confirm-row + .qs-ui-confirm-row { border-block-start: 1px solid var(--qs-line); }
.qs-ui-confirm-row dt { color: var(--qs-ink-2); }
.qs-ui-confirm-row dd { display: flex; align-items: center; gap: var(--qs-sp-2); margin: 0; font-variant-numeric: tabular-nums; }
.qs-ui-confirm-from { color: var(--qs-ink-2); text-decoration: line-through; }
.qs-ui-confirm-to { font-weight: var(--qs-fw-semibold); }
[dir="rtl"] .qs-ui-confirm-arrow { display: inline-block; transform: scaleX(-1); }
.qs-ui-scrim--sheet { place-items: end; padding: 0; }
.qs-ui-sheet {
  --qs-sheet-from: 100%; position: fixed; z-index: 51; display: flex; flex-direction: column; background: var(--qs-surface); box-shadow: var(--qs-shadow-float);
  transition: transform var(--qs-dur-sheet) var(--qs-ease);
}
.qs-ui-sheet[data-side="end"] { inset-block: 0; inset-inline-end: 0; inline-size: min(var(--qs-drawer-w), 100%); animation: qs-ui-sheet-x var(--qs-dur-sheet) var(--qs-ease); }
[dir="rtl"] .qs-ui-sheet[data-side="end"] { --qs-sheet-from: -100%; }
.qs-ui-sheet[data-side="bottom"] {
  inset-inline: 0; inset-block-end: 0; max-block-size: 90vh; border-start-start-radius: var(--qs-r-layer); border-start-end-radius: var(--qs-r-layer);
  padding-block-end: env(safe-area-inset-bottom); transform: translateY(var(--qs-sheet-dy, 0px)); animation: qs-ui-sheet-y var(--qs-dur-sheet) var(--qs-ease);
}
.qs-ui-sheet[data-dragging] { transition: none; }
@keyframes qs-ui-sheet-x { from { transform: translateX(var(--qs-sheet-from)); } }
@keyframes qs-ui-sheet-y { from { transform: translateY(100%); } }
.qs-ui-sheet-grip { flex: none; align-self: center; inline-size: 40px; block-size: 4px; margin-block: var(--qs-sp-2) 0; border-radius: 2px; background: var(--qs-control-line); touch-action: none; }
.qs-ui-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--qs-sp-2); padding: var(--qs-sp-2) var(--qs-sp-2) var(--qs-sp-2) var(--qs-sp-4); border-block-end: 1px solid var(--qs-line); }
.qs-ui-sheet[data-side="bottom"] .qs-ui-sheet-head { touch-action: none; }
.qs-ui-sheet-body { flex: 1 1 auto; overflow: auto; padding: var(--qs-sp-4); display: flex; flex-direction: column; gap: var(--qs-sp-3); }
.qs-ui-sheet-foot { display: flex; justify-content: flex-end; gap: var(--qs-sp-2); padding: var(--qs-sp-3) var(--qs-sp-4); border-block-start: 1px solid var(--qs-line); }

/* ---------- notice ---------- */
.qs-ui-notice-host { display: flex; min-block-size: var(--qs-notice-h); }
.qs-ui-notice { display: flex; align-items: center; gap: var(--qs-sp-2); flex: 1 1 auto; min-inline-size: 0; padding-inline: var(--qs-sp-3) var(--qs-sp-1); background: var(--qs-ink); color: var(--qs-surface); font-size: var(--qs-fs-body); }
.qs-ui-notice-text { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-ui-notice .qs-ui-button--quiet, .qs-ui-notice .qs-ui-button--icon { color: var(--qs-surface); }
.qs-ui-notice .qs-ui-button--quiet { text-decoration: underline; text-underline-offset: 2px; }
.qs-ui-notice .qs-ui-button:hover { background: var(--qs-ink-2); }
.qs-ui-notice--error { background: var(--qs-st-error-bg); color: var(--qs-st-error-ink); }
.qs-ui-notice--error .qs-ui-button--quiet, .qs-ui-notice--error .qs-ui-button--icon { color: var(--qs-st-error-ink); }
.qs-ui-notice--error .qs-ui-button:hover { background: var(--qs-surface); }

/* ---------- mediaPicker ---------- */
.qs-ui-media { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-ui-media-title { font-size: var(--qs-fs-body); }
.qs-ui-media-drop { display: flex; align-items: center; flex-wrap: wrap; gap: var(--qs-sp-3); padding: var(--qs-sp-3); border: 1px dashed var(--qs-control-line); border-radius: var(--qs-r-card); color: var(--qs-ink-2); }
.qs-ui-media-drop[data-over] { border-color: var(--qs-accent); background: var(--qs-accent-soft); }
.qs-ui-media[data-error] .qs-ui-media-drop { border-color: var(--qs-st-error-ink); }
.qs-ui-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--qs-sp-7) * 2), 1fr)); gap: var(--qs-sp-2); }
.qs-ui-media-grid > .qs-ui-empty { grid-column: 1 / -1; }
.qs-ui-media-tile { position: relative; display: block; aspect-ratio: 1; padding: 0; overflow: hidden; border-radius: var(--qs-r-control); background: var(--qs-raised); cursor: pointer; }
.qs-ui-media-tile[aria-checked="true"] { box-shadow: inset 0 0 0 3px var(--qs-select-line); }
.qs-ui-media-thumb, .qs-ui-media-thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.qs-ui-media-check { position: absolute; inset-block-start: var(--qs-sp-1); inset-inline-end: var(--qs-sp-1); display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--qs-accent); color: var(--qs-on-accent); }
.qs-ui-media-check .qs-icon { inline-size: 16px; block-size: 16px; }
.qs-ui-media-uses { position: absolute; inset-block-end: var(--qs-sp-1); inset-inline-start: var(--qs-sp-1); max-inline-size: calc(100% - var(--qs-sp-2)); }
.qs-ui-media-uses .qs-ui-badge { background: var(--qs-surface); color: var(--qs-ink); }
.qs-ui-media-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--qs-sp-2); padding: var(--qs-sp-2); color: var(--qs-ink-2); cursor: progress; text-align: center; font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-ui-media-loading-text { max-inline-size: 100%; overflow-wrap: anywhere; }

/* ---------- photoAdjust (görünüm: core/shared.css .qs-photo + data-qs-tone) ---------- */
.qs-ui-pa { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-ui-pa-head { display: flex; align-items: center; justify-content: space-between; gap: var(--qs-sp-2); }
.qs-ui-pa-title { font-size: var(--qs-fs-body); }
.qs-ui-pa .qs-photo { background: var(--qs-raised); }
.qs-ui-pa-stage { border-radius: var(--qs-r-card); cursor: crosshair; touch-action: none; }
.qs-ui-pa[data-empty] .qs-ui-pa-stage { cursor: default; }
.qs-ui-pa-stage img, .qs-ui-pa-frame img { object-position: var(--qs-pa-x, 50%) var(--qs-pa-y, 50%); transform: scale(var(--qs-pa-zoom, 1)); transform-origin: var(--qs-pa-x, 50%) var(--qs-pa-y, 50%); }
/* Odak noktası resmin fiziksel koordinatıdır (resim RTL'de aynalanmaz): left/top bilinçli. */
.qs-ui-pa-dot { position: absolute; left: var(--qs-pa-x, 50%); top: var(--qs-pa-y, 50%); inline-size: 20px; block-size: 20px; margin: -10px 0 0 -10px; border: 3px solid var(--qs-surface); border-radius: 50%; background: var(--qs-accent); box-shadow: var(--qs-shadow-float); pointer-events: none; }
.qs-ui-pa[data-empty] .qs-ui-pa-dot { display: none; }
.qs-ui-pa-zoom { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--qs-sp-3); }
.qs-ui-range { inline-size: 100%; min-inline-size: 0; min-block-size: var(--qs-hit-desk); margin: 0; accent-color: var(--qs-accent); }
.qs-ui-pa-zoomval { min-inline-size: 40px; color: var(--qs-ink-2); text-align: end; }
.qs-ui-pa-label { color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); font-weight: var(--qs-fw-medium); }
.qs-ui-pa-tones { display: flex; flex-wrap: wrap; gap: var(--qs-sp-2); }
.qs-ui-pa-tone { display: flex; flex-direction: column; align-items: center; gap: var(--qs-sp-1); inline-size: calc(var(--qs-sp-7) + var(--qs-sp-3)); padding: var(--qs-sp-1); border-radius: var(--qs-r-control); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-ui-pa-tone[aria-checked="true"] { background: var(--qs-accent-soft); color: var(--qs-accent-strong); font-weight: var(--qs-fw-semibold); }
.qs-ui-pa-swatch { inline-size: 40px; block-size: 40px; aspect-ratio: auto; border-radius: var(--qs-r-control); }
.qs-ui-pa-crops { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: var(--qs-sp-3); align-items: end; }
.qs-ui-pa-crop { display: flex; flex-direction: column; gap: var(--qs-sp-1); min-inline-size: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-help); }
.qs-ui-pa-frame { aspect-ratio: 1; border-radius: var(--qs-r-control); }
.qs-ui-pa-crop[data-crop="round"] .qs-ui-pa-frame { border-radius: 50%; }
.qs-ui-pa-crop[data-crop="wide"] .qs-ui-pa-frame { aspect-ratio: 16 / 9; }

/* ---------- deviceFrame ---------- */
.qs-ui-device {
  --qs-df-bezel: var(--qs-sp-2); position: relative; flex: none; margin-inline: auto; border-radius: calc(var(--qs-r-layer) * 3); background: var(--qs-ink);
  inline-size: calc(var(--qs-df-w) * var(--qs-df-scale) + var(--qs-df-bezel) * 2); block-size: calc(var(--qs-df-h) * var(--qs-df-scale) + var(--qs-df-bezel) * 2);
  transition: inline-size var(--qs-dur-device) var(--qs-ease), block-size var(--qs-dur-device) var(--qs-ease);
}
.qs-ui-device[data-device="tablet"] { --qs-df-bezel: var(--qs-sp-3); border-radius: calc(var(--qs-r-layer) * 2); }
.qs-ui-device[data-device="desktop"] { --qs-df-bezel: var(--qs-sp-1); border-radius: var(--qs-r-card); }
/* Ekran fiziksel ortadan ölçeklenir (simetrik; RTL'de de aynı): left + translateX bilinçli. */
.qs-ui-device-screen {
  position: absolute; top: var(--qs-df-bezel); left: 50%; inline-size: var(--qs-df-w); block-size: var(--qs-df-h); overflow: hidden;
  border-radius: calc(var(--qs-r-layer) * 2); background: var(--qs-surface); transform: translateX(-50%) scale(var(--qs-df-scale)); transform-origin: top center;
  transition: transform var(--qs-dur-device) var(--qs-ease);
}
.qs-ui-device[data-device="tablet"] .qs-ui-device-screen { border-radius: var(--qs-r-layer); }
.qs-ui-device[data-device="desktop"] .qs-ui-device-screen { border-radius: var(--qs-r-control); }
.qs-ui-device-viewport { inline-size: 100%; block-size: 100%; overflow: auto; }

/* ---------- dokunma: tablet/telefon ve kaba işaretçi 44 px (03 §3.7) ---------- */
@media (max-width: 1023px), (pointer: coarse) {
  .qs-ui-button, .qs-ui-button--icon, .qs-ui-segment, .qs-ui-switch, .qs-ui-menu-item, .qs-ui-row-handle, .qs-ui-langtab,
  .qs-ui-crumb-link, .qs-ui-tree-more, .qs-ui-input, .qs-ui-grid-input, .qs-ui-range { min-block-size: var(--qs-hit); }
  .qs-ui-button--icon, .qs-ui-row-handle, .qs-ui-tree-more, .qs-ui-langtab, .qs-ui-segment { min-inline-size: var(--qs-hit); }
  .qs-ui-grid td, .qs-ui-grid th { block-size: var(--qs-hit); }
  .qs-ui-pa-tone { min-block-size: var(--qs-hit); }
  .qs-ui-row-check, .qs-ui-grid-sel input { inline-size: 22px; block-size: 22px; }
  .qs-ui-row-checkhit { inline-size: var(--qs-hit); }
  .qs-ui-notice-host { min-block-size: var(--qs-hit); }
}
@media (max-width: 699px) {
  /* Telefonda taşıma "…" menüsünden (03 §3.3); onay kutusu yalnız seçim kipinde (uzun basış → liste data-selecting) */
  .qs-ui-row-handle, .qs-ui-list:not([data-selecting]) .qs-ui-row-checkhit { display: none; }
  .qs-ui-dialog { padding: var(--qs-sp-4); }
  .qs-ui-dialog-actions { flex-direction: column-reverse; align-items: stretch; }
  .qs-ui-input, .qs-ui-field-label, .qs-ui-switch { font-size: var(--qs-fs-field); }
  .qs-ui-notice { padding-block: var(--qs-sp-1); }
  .qs-ui-notice-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; line-height: var(--qs-lh-help); }
  .qs-ui-pa-crops { grid-template-columns: 1fr 1fr; }
  .qs-ui-pa-crop[data-crop="wide"] { grid-column: 1 / -1; }
}

/* EYP QR editör · studio/css/components-grid.css
 * Sahibi: A (E6c, 03 §3.6.1). Görev: tablo hücre türleri + şerit (P1), ağaç ekleme/taşıma (P2), sürükle-sırala bırakma çizgisi (P3).
 * Yalnız .qs-ui-*; renk ve boşluk yalnız tokens.css değişkenleri; yön mantıksal özellik. Temel grid/tree/listRow kuralları components.css'tedir. */

/* ---------- tablo: hücre türleri ---------- */
.qs-ui-grid-value { display: inline-block; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.qs-ui-grid td[data-missing] { background: var(--qs-st-instant-bg); box-shadow: inset 0 0 0 1px var(--qs-st-instant-ink); }
.qs-ui-grid td[data-locked] { color: var(--qs-ink-2); cursor: not-allowed; }
.qs-ui-grid td[data-locked] .qs-ui-grid-value { border-block-end: 1px dashed currentColor; }
.qs-ui-grid-selhit { display: grid; place-items: center; inline-size: 100%; block-size: var(--qs-hit-desk); cursor: pointer; }
.qs-ui-grid-selhit input { margin: 0; accent-color: var(--qs-accent); }
.qs-ui-grid-layer { margin-inline-start: var(--qs-sp-1); }
.qs-ui-grid-select { inline-size: 100%; block-size: var(--qs-hit-desk); padding-inline: var(--qs-sp-1); border: 0; border-radius: var(--qs-r-control); background: transparent; font: inherit; color: inherit; cursor: pointer; }
.qs-ui-grid-select:focus-visible { outline: var(--qs-focus-width) solid var(--qs-focus-color); outline-offset: calc(var(--qs-focus-width) * -1); }
.qs-ui-grid-select:disabled { color: var(--qs-ink-2); cursor: not-allowed; }
.qs-ui-grid-switch { display: inline-flex; align-items: center; min-block-size: var(--qs-hit-desk); padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.qs-ui-grid-switch[aria-checked="true"] .qs-ui-switch-track { background: var(--qs-select); box-shadow: inset 0 0 0 1px var(--qs-select-line); }
.qs-ui-grid-switch[aria-checked="true"] .qs-ui-switch-thumb { inset-inline-start: 17px; background: var(--qs-on-select); box-shadow: none; }
.qs-ui-grid-switch[aria-disabled="true"] { cursor: not-allowed; }
.qs-ui-grid-switch[aria-disabled="true"] .qs-ui-switch-track { background: var(--qs-line); box-shadow: none; }
.qs-ui-grid-switch[aria-disabled="true"] .qs-ui-switch-thumb { background: var(--qs-control-line); }
.qs-ui-grid-switch:focus-visible, .qs-ui-grid-action:focus-visible { outline: var(--qs-focus-width) solid var(--qs-focus-color); outline-offset: var(--qs-focus-offset); }
.qs-ui-grid-action { min-block-size: var(--qs-hit-desk); }

/* ---------- tablo: şerit (satır altı onay/uyarı) ---------- */
.qs-ui-grid-strip > td { block-size: auto; padding: 0; background: var(--qs-st-instant-bg); box-shadow: inset 0 2px 0 var(--qs-st-instant-ink); white-space: normal; }
.qs-ui-grid-strip-box { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-2) var(--qs-sp-4); padding: var(--qs-sp-2) var(--qs-sp-3); color: var(--qs-ink); }
.qs-ui-grid-strip-text, .qs-ui-grid-strip-rows { flex: 1 1 auto; min-inline-size: 0; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-ui-grid-strip-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.qs-ui-grid-strip-actions { display: flex; align-items: center; gap: var(--qs-sp-2); flex: none; margin-inline-start: auto; }

/* ---------- ağaç: ekleme satırı/formu, taşıma ---------- */
.qs-ui-tree-add > .qs-ui-tree-row { color: var(--qs-ink-2); }
.qs-ui-tree-add > .qs-ui-tree-row .qs-ui-tree-label { font-weight: var(--qs-fw-medium); }
.qs-ui-tree-form {
  display: flex; flex-direction: column; gap: var(--qs-sp-2); padding-block: var(--qs-sp-2) var(--qs-sp-3); padding-inline-end: var(--qs-sp-2);
  padding-inline-start: calc(var(--qs-sp-1) + var(--qs-tree-level) * var(--qs-sp-5) + var(--qs-sp-5)); cursor: default;
}
.qs-ui-tree-form[aria-busy="true"] { cursor: progress; }
.qs-ui-tree-form-actions { display: flex; align-items: center; gap: var(--qs-sp-2); }
.qs-ui-tree-reason { flex: none; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-ui-tree-item[aria-disabled="true"] > .qs-ui-tree-row { color: var(--qs-ink-2); cursor: not-allowed; }
.qs-ui-tree-item[data-grabbed] > .qs-ui-tree-row, .qs-ui-tree-item[data-dragging] > .qs-ui-tree-row { background: var(--qs-accent-soft); box-shadow: var(--qs-shadow-float); }
.qs-ui-tree[data-sorting], .qs-ui-list[data-sorting] { cursor: grabbing; user-select: none; }

/* ---------- sürükle-sırala: bırakma çizgisi (listRow) ---------- */
.qs-ui-row[data-drop="before"] { box-shadow: inset 0 2px 0 var(--qs-accent); }
.qs-ui-row[data-drop="after"] { box-shadow: inset 0 -2px 0 var(--qs-accent); }

@media (max-width: 699px) {
  .qs-ui-grid-strip-actions { inline-size: 100%; flex-direction: column-reverse; align-items: stretch; }
  .qs-ui-tree-form-actions { flex-direction: column-reverse; align-items: stretch; }
  .qs-ui-tree-add > .qs-ui-tree-row { inline-size: 100%; }
}

/* EYP QR editör · studio/css/components-fields.css
 * Sahibi: B (E6c, 03 §3.6.1). Görev: seçici, zaman kuralı, beyan, anında alan, beyan etkisi, görsel okuma ve önizleme çerçevesi alt sınırı (P4–P9, P11).
 * Yalnız .qs-ui-*; renk, boşluk, köşe yalnız tokens.css değişkenlerinden; yön mantıksal özelliklerle. Masaüstü hedef 32, < 1024 px ve kaba işaretçide 44.
 */
.qs-ui-chip-x, .qs-ui-daychip { -webkit-tap-highlight-color: transparent; font: inherit; color: inherit; border: 0; background: none; margin: 0; }

/* ---------- itemPicker (P4) ---------- */
.qs-ui-picker { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-ui-picker-chips { display: flex; flex-wrap: wrap; gap: var(--qs-sp-2); margin: 0; padding: 0; list-style: none; }
.qs-ui-chip {
  display: inline-flex; align-items: center; gap: var(--qs-sp-1); max-inline-size: 100%; min-block-size: var(--qs-hit-desk); padding-inline: var(--qs-sp-3) var(--qs-sp-1);
  border: 1px solid var(--qs-control-line); border-radius: var(--qs-r-control); background: var(--qs-accent-soft); color: var(--qs-ink);
}
.qs-ui-chip-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-ui-chip-tag { flex: none; padding-inline: var(--qs-sp-1); border-radius: var(--qs-r-badge); background: var(--qs-raised); color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-ui-chip-x { display: grid; place-items: center; flex: none; inline-size: var(--qs-hit-desk); block-size: var(--qs-hit-desk); border-radius: var(--qs-r-control); color: var(--qs-ink-2); cursor: pointer; }
.qs-ui-chip-x:hover { background: var(--qs-line); color: var(--qs-ink); }
.qs-ui-chip .qs-ui-more { min-inline-size: var(--qs-hit-desk); min-block-size: var(--qs-hit-desk); }
.qs-ui-picker-bar { display: flex; }
.qs-ui-picker[data-readonly] .qs-ui-chip { background: var(--qs-raised); border-color: var(--qs-line); }
.qs-ui-picker-sheet { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-block-size: 0; }
.qs-ui-picker-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.qs-ui-picker-opt {
  display: flex; align-items: center; gap: var(--qs-sp-3); min-block-size: var(--qs-hit-desk); padding-block: var(--qs-sp-2); padding-inline: var(--qs-sp-2);
  border-radius: var(--qs-r-control); cursor: pointer; color: var(--qs-ink);
}
.qs-ui-picker-opt:hover { background: var(--qs-page); }
.qs-ui-picker-opt[data-active] { background: var(--qs-accent-soft); box-shadow: inset 0 0 0 2px var(--qs-select-line); }
.qs-ui-picker-opt[aria-selected="true"] { font-weight: var(--qs-fw-medium); }
.qs-ui-picker-opt[aria-disabled="true"] { color: var(--qs-ink-2); cursor: not-allowed; }
.qs-ui-picker-mark { display: grid; place-items: center; flex: none; inline-size: 20px; block-size: 20px; border: 1px solid var(--qs-control-line); border-radius: var(--qs-r-badge); color: var(--qs-accent-strong); }
.qs-ui-picker-opt[aria-selected="true"] .qs-ui-picker-mark { background: var(--qs-select-soft); border-color: var(--qs-select-line); }
.qs-ui-picker-mark .qs-icon { inline-size: 16px; block-size: 16px; }
.qs-ui-picker-text { display: flex; flex-direction: column; flex: 1 1 auto; min-inline-size: 0; }
.qs-ui-picker-name { overflow-wrap: anywhere; }
.qs-ui-picker-sub, .qs-ui-picker-why { color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-ui-picker-empty { margin: 0; padding: var(--qs-sp-4); color: var(--qs-ink-2); text-align: center; }

/* ---------- scheduleField (P5) ---------- */
.qs-ui-sched { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-ui-sched-body { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-ui-sched-body[hidden] { display: none; }
.qs-ui-daychips { display: flex; flex-wrap: wrap; gap: var(--qs-sp-1); }
.qs-ui-daychip {
  display: grid; place-items: center; min-inline-size: var(--qs-hit-desk); min-block-size: var(--qs-hit-desk); padding-inline: var(--qs-sp-2); cursor: pointer;
  border: 1px solid var(--qs-control-line); border-radius: var(--qs-r-control); background: var(--qs-surface); color: var(--qs-ink); font-weight: var(--qs-fw-medium);
}
.qs-ui-daychip:hover { background: var(--qs-raised); }
.qs-ui-daychip[aria-pressed="true"] { background: var(--qs-select-soft); border-color: var(--qs-select-line); color: var(--qs-ink); box-shadow: inset 0 0 0 1px var(--qs-select-line); }
.qs-ui-daychip[aria-pressed="true"]::after { content: ''; display: block; inline-size: 12px; block-size: 3px; margin-block-start: 1px; border-radius: 2px; background: currentColor; }
.qs-ui-daychip[aria-disabled="true"] { color: var(--qs-ink-2); cursor: not-allowed; }
.qs-ui-sched-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--qs-sp-3); }
.qs-ui-sched-night { margin: 0; padding: var(--qs-sp-2) var(--qs-sp-3); border-radius: var(--qs-r-control); background: var(--qs-raised); color: var(--qs-ink); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-ui-sched-night[hidden] { display: none; }
.qs-ui-sched-outside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--qs-sp-1); }
.qs-ui-sched-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--qs-sp-2) var(--qs-sp-3); }
.qs-ui-sched-pair > .qs-ui-field-label { grid-column: 1 / -1; }

/* ---------- allergenControl (P6) ---------- */
.qs-ui-allergen { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-ui-segmented--full { display: flex; inline-size: 100%; }
.qs-ui-allergen[data-readonly] .qs-ui-segment { cursor: default; }
.qs-ui-allergen-review {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--qs-sp-2); padding: var(--qs-sp-3);
  border: 1px solid var(--qs-st-instant-ink); border-radius: var(--qs-r-control); background: var(--qs-st-instant-bg); color: var(--qs-st-instant-ink);
}
.qs-ui-allergen-review[hidden] { display: none; }
.qs-ui-allergen-flag { display: inline-flex; align-items: center; gap: var(--qs-sp-1); font-weight: var(--qs-fw-semibold); }
.qs-ui-allergen-flag .qs-icon { inline-size: 16px; block-size: 16px; }
.qs-ui-allergen-reviewtext { margin: 0; }
.qs-ui-allergen-review .qs-ui-button--secondary { color: var(--qs-ink); }
.qs-ui-allergen-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.qs-ui-allergen-list[hidden] { display: none; }
.qs-ui-arow { display: flex; align-items: center; justify-content: space-between; gap: var(--qs-sp-3); padding-block: var(--qs-sp-1); border-block-end: 1px solid var(--qs-line); }
.qs-ui-arow-name { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
.qs-ui-allergen-levels { flex: none; }
.qs-ui-allergen-levels .qs-ui-segment { padding-inline: var(--qs-sp-2); }

/* ---------- liveField (P8): taslak alanından ayrışır (amber çerçeve + rozet) ---------- */
.qs-ui-live {
  display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; padding: var(--qs-sp-3);
  border: 1px solid var(--qs-st-instant-ink); border-radius: var(--qs-r-card); background: var(--qs-surface);
}
.qs-ui-live-head { display: flex; align-items: center; justify-content: space-between; gap: var(--qs-sp-2); flex-wrap: wrap; }
.qs-ui-live-row { display: flex; align-items: flex-start; gap: var(--qs-sp-2); }
.qs-ui-live-row .qs-ui-field { flex: 1 1 auto; }
.qs-ui-live-row > .qs-ui-button { flex: none; margin-block-start: 0; }
.qs-ui-live-confirm, .qs-ui-impact {
  display: flex; flex-direction: column; gap: var(--qs-sp-2); padding: var(--qs-sp-3); border-radius: var(--qs-r-control);
  background: var(--qs-st-instant-bg); color: var(--qs-st-instant-ink);
}
.qs-ui-live-confirm[hidden], .qs-ui-impact[hidden] { display: none; }
.qs-ui-live-confirm-text, .qs-ui-impact-text { margin: 0; font-weight: var(--qs-fw-medium); }
.qs-ui-live-actions { display: flex; flex-wrap: wrap; gap: var(--qs-sp-2); }
.qs-ui-live-confirm .qs-ui-button--quiet, .qs-ui-impact .qs-ui-button--quiet { color: var(--qs-st-instant-ink); }
.qs-ui-live[data-dirty] { box-shadow: inset 4px 0 0 var(--qs-st-instant-ink); }
.qs-ui-live[data-readonly] { border-style: dashed; }
.qs-ui-impactfield { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; }

/* ---------- deviceFrame alt sınırı (P11): alan 0,55'in altına inince kap kaydırılır, çerçeve kırpılmaz ---------- */
.qs-ui-device[data-clamped] { max-inline-size: 100%; margin-inline: 0; overflow-x: auto; overflow-y: hidden; block-size: calc(var(--qs-df-h) * var(--qs-df-scale) + var(--qs-df-bezel) * 2 + var(--qs-sp-4)); }
.qs-ui-device[data-clamped] .qs-ui-device-screen { left: auto; inset-inline-start: var(--qs-df-bezel); transform: scale(var(--qs-df-scale)); transform-origin: top left; }
[dir="rtl"] .qs-ui-device[data-clamped] .qs-ui-device-screen { transform-origin: top right; }

/* ---------- dokunma: tablet/telefon ve kaba işaretçi 44 px ---------- */
@media (max-width: 1023px), (pointer: coarse) {
  .qs-ui-chip, .qs-ui-chip-x, .qs-ui-chip .qs-ui-more, .qs-ui-daychip, .qs-ui-picker-opt { min-block-size: var(--qs-hit); }
  .qs-ui-chip-x, .qs-ui-chip .qs-ui-more, .qs-ui-daychip { min-inline-size: var(--qs-hit); }
  .qs-ui-chip-x { inline-size: var(--qs-hit); block-size: var(--qs-hit); }
}
@media (max-width: 699px) {
  .qs-ui-arow { flex-direction: column; align-items: stretch; gap: var(--qs-sp-1); }
  .qs-ui-allergen-levels { inline-size: 100%; }
  .qs-ui-live-row { flex-direction: column; align-items: stretch; }
  .qs-ui-live-actions { flex-direction: column; }
  .qs-ui-live-actions .qs-ui-button { inline-size: 100%; }
  .qs-ui-sched-times, .qs-ui-sched-pair { grid-template-columns: minmax(0, 1fr); }
  .qs-ui-picker-opt, .qs-ui-picker-name { font-size: var(--qs-fs-field); }
}

/* EYP QR editör · studio/css/canvas.css
 * Sahibi: E7 — 03 §7. Görev: kanvas çubuğu + cihaz alanı + seçim katmanı .qs-pick-layer (03 §3.4).
 * Renk, aralık, köşe, gölge yalnız css/tokens.css değişkenlerinden. Sınıflar .qs-cv-* ve .qs-pick-* (misafir .qs-* adlarıyla çakışmaz).
 * Çubuk tek satır, 44 px; dar kanvasta (< 640 px) cihaz ve kip simgeye, dil tek düğmeye iner (container sorgusu: kanvasın kendi genişliği).
 */
.qs-cv { position: absolute; inset: 0; display: flex; flex-direction: column; container: qscv / inline-size; }

/* ---------- çubuk ---------- */
.qs-cv-bar {
  flex: none; display: flex; align-items: center; gap: var(--qs-sp-1); min-inline-size: 0; block-size: var(--qs-canvasbar-h);
  padding-inline: var(--qs-sp-2); background: var(--qs-surface); border-block-end: 1px solid var(--qs-line);
}
.qs-cv-gap { flex: 1 1 0; min-inline-size: 0; }
.qs-cv-lang { display: flex; flex: none; }
.qs-cv-lang[hidden] { display: none; }
.qs-cv-bar .qs-ui-segmented { flex: none; }
.qs-cv-bar .qs-ui-segment { padding-inline: var(--qs-sp-2); font-size: var(--qs-fs-table); line-height: var(--qs-lh-table); }
.qs-cv-glyph { inline-size: 20px; block-size: 20px; flex: none; }
.qs-cv-ico .qs-ui-segment { display: inline-flex; align-items: center; justify-content: center; gap: var(--qs-sp-1); }
.qs-cv-lang-cycle { padding-inline: var(--qs-sp-2); font-size: var(--qs-fs-table); }
.qs-cv-link { flex: none; text-decoration: none; }

@container qscv (max-width: 639px) {
  .qs-cv-ico .qs-cv-text { display: none; }
  .qs-cv-ico .qs-ui-segment { min-inline-size: var(--qs-hit-desk); padding-inline: 0; }
  .qs-cv-lang-seg { display: none; }
}
@container qscv (min-width: 640px) {
  .qs-cv-ico .qs-cv-glyph { display: none; }
  .qs-cv-lang-cycle { display: none; }
}
/* tablet ve telefon: cihaz seçici yok (çekmece telefon boyutunda), her hedef 44 (03 §3.7), çubuk yine 44 */
.qs-cv[data-touch] .qs-cv-device { display: none; }
@media (max-width: 1023px), (pointer: coarse) {
  .qs-cv-bar .qs-ui-segmented { padding: 0; }
  .qs-cv-ico .qs-ui-segment { min-inline-size: var(--qs-hit); }
}

/* ---------- cihaz alanı ---------- */
.qs-cv-view { position: relative; flex: 1 1 auto; min-block-size: 0; overflow: hidden; }
.qs-cv-scroll { position: absolute; inset: 0; display: flex; overflow: auto; }
.qs-cv-scroll > .qs-ui-device { margin-block: auto; }
.qs-cv-stage:focus { outline: none; }
.qs-cv-stage:focus-visible { outline: var(--qs-focus-width) solid var(--qs-focus-color); outline-offset: calc(var(--qs-focus-width) * -1); }
.qs-cv-live { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
.qs-cv-hint {
  position: absolute; inset-block-end: var(--qs-sp-1); inset-inline: 0; margin: 0; display: none; text-align: center; pointer-events: none;
  font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); color: var(--qs-ink-2);
}
.qs-cv[data-clamped] .qs-cv-hint { display: block; }

/* ---------- seçim katmanı: sahnenin dışında, olay almaz; konum JS'ten (pick.js) ---------- */
.qs-pick-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.qs-pick-box {
  position: absolute; left: 0; top: 0; inline-size: var(--qs-pick-w, 0); block-size: var(--qs-pick-h, 0); box-sizing: border-box;
  border: 0; outline: 2px solid var(--qs-select-line); outline-offset: 0; border-radius: var(--qs-r-badge);   /* dış çizgi: öğenin içeriğini örtmez, kutu öğeyle bire bir */
}
.qs-pick-box[hidden] { display: none; }
.qs-pick-box[data-state="selected"] { outline-width: 3px; outline-color: var(--qs-select-line); }
.qs-pick-label {
  position: absolute; inset-block-end: calc(100% + 2px); inset-inline-start: -2px; max-inline-size: 240px; padding-inline: var(--qs-sp-2); box-sizing: border-box;
  block-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--qs-r-badge) var(--qs-r-badge) 0 0;
  background: var(--qs-select-line); color: var(--qs-on-accent); font-size: var(--qs-fs-help); line-height: 20px; font-weight: var(--qs-fw-medium);
}
.qs-pick-box[data-state="selected"] .qs-pick-label { display: none; }
.qs-pick-box[data-inside] .qs-pick-label { inset-block-end: auto; inset-block-start: 0; border-radius: 0 0 var(--qs-r-badge) var(--qs-r-badge); }
.qs-pick-box[data-end] .qs-pick-label { inset-inline-start: auto; inset-inline-end: -2px; }

/* EYP QR editör · studio/css/print.css
 * Sahibi: E16 — 03 §7; Dalga D2 (00 §7.101/§7.107). Görev: masa kartı baskısı (03 §3.5.7) ve alerjen tablosu çıktısı (03 §3.5.2).
 * Baskı bölümü ekranda hiç görünmez; yalnız @media print içinde, gövdenin öteki çocukları gizlenir. Renk yalnız siyah/beyaz (sistem renkleri
 * CanvasText/Canvas: yazıcıda siyah/beyaz); boyut ve aralık mm/pt (kâğıt ölçüsü, ekran değişkeni değil).
 * Sınıflar: .qs-print (kök) · .qs-print-cards/-page/-card* · .qs-print-allergens/-al-*.
 */
.qs-print { display: none; }

@page { size: A4; margin: 8mm; }
@page qs-landscape { size: A4 landscape; margin: 8mm; }

@media print {
  body > *:not(.qs-print) { display: none !important; }
  html, body { background: Canvas; color: CanvasText; block-size: auto; overflow: visible; }
  .qs-print { display: block; color: CanvasText; background: Canvas; font-family: var(--qs-font); font-size: 10pt; line-height: 1.3; }

  /* masa kartı: A4'e 4 (2×2) ya da 6 (2×3) kart, kesim çizgisi kesikli */
  .qs-print-page { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; block-size: 281mm; break-after: page; page-break-after: always; }
  .qs-print-page:last-child { break-after: auto; page-break-after: auto; }
  .qs-print-cards[data-per="4"] .qs-print-page { grid-template-rows: repeat(2, 1fr); }
  .qs-print-cards[data-per="6"] .qs-print-page { grid-template-rows: repeat(3, 1fr); }
  .qs-print-card { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3mm; padding: 6mm; text-align: center; border: 0.3mm dashed CanvasText; break-inside: avoid; overflow: hidden; }
  .qs-print-card-name { margin: 0; font-size: 16pt; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
  .qs-print-card-qr { inline-size: 70mm; block-size: 70mm; }
  .qs-print-cards[data-per="6"] .qs-print-card-qr { inline-size: 48mm; block-size: 48mm; }
  .qs-print-cards[data-per="6"] .qs-print-card-name { font-size: 13pt; }
  .qs-print-card-table { margin: 0; font-size: 22pt; font-weight: 700; line-height: 1.1; }
  .qs-print-cards[data-per="6"] .qs-print-card-table { font-size: 17pt; }
  .qs-print-card-scan { margin: 0; font-size: 9pt; }
  .qs-print-card-addr { margin: 0; font-size: 9pt; overflow-wrap: anywhere; }
  .qs-print-card-note { margin: 0; font-size: 9pt; }

  /* alerjen tablosu: A4 yatay (adlandırılmış sayfa; desteklemeyen tarayıcıda dikey kalır, tablo sığar) */
  .qs-print-allergens { page: qs-landscape; }
  .qs-print-title { margin: 0 0 2mm; font-size: 15pt; line-height: 1.2; }
  .qs-print-meta, .qs-print-legend { margin: 0 0 3mm; font-size: 9pt; }
  .qs-print-legend { margin: 3mm 0 0; }
  .qs-print-al-table { inline-size: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9pt; }
  .qs-print-al-table th, .qs-print-al-table td { border: 0.2mm solid CanvasText; padding: 1mm 1.2mm; text-align: center; }
  .qs-print-al-table thead { display: table-header-group; }
  .qs-print-al-row { break-inside: avoid; }
  .qs-print-al-table th.qs-print-al-name { inline-size: 42mm; text-align: start; font-weight: 400; overflow-wrap: anywhere; }
  .qs-print-al-col { block-size: 26mm; vertical-align: bottom; font-weight: 600; }
  .qs-print-al-col span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .qs-print-al-sec th { text-align: start; font-weight: 700; border-block-start-width: 0.5mm; }
  .qs-print-al-cell { font-size: 11pt; }
  .qs-print-al-note { text-align: start; font-style: italic; }
}

/* EYP QR editör · studio/css/screens/products.css
 * Sahibi: E8 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-products …);
 * değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 * Ürünler · liste (03 §3.5 #2): üstte arama + süzgeçler, araç satırı, sayaç, liste. Telefonda tek sütun, süzgeçler iki sütun.
 */
.qs-scr-products { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-products-top { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-products-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-products-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-2); }
.qs-scr-products-count { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-products-list { min-inline-size: 0; border-block-start: 1px solid var(--qs-line); }
.qs-scr-products-thumb { display: block; inline-size: 40px; block-size: 40px; border-radius: var(--qs-r-control); object-fit: cover; background: var(--qs-raised); }
.qs-scr-products-thumb--none { border: 1px dashed var(--qs-control-line); background: var(--qs-surface); }
.qs-scr-products-decl { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); overflow-wrap: anywhere; }
.qs-scr-products-copy, .qs-scr-products-add { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-products-copy > p { margin: 0; color: var(--qs-ink-2); }
.qs-scr-products .qs-ui-row-check { inline-size: 24px; block-size: 24px; }   /* masaüstü hedef ≥ 24 px (03 §3.8) */
.qs-scr-products-subprice { display: none; }
/* uzun ad ve yan rozet (Pasif, Beyan bekliyor) birlikte sığmazsa ad iki satıra iner, "…" ile kesilmez (masaüstünde de, kanvas yanındayken dar sütun) */
.qs-scr-products .qs-ui-row-title bdi { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
.qs-scr-products .qs-ui-row-sub { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 699px) {
  .qs-scr-products .qs-ui-row-meta { display: none; }
  .qs-scr-products-subprice { display: inline; }
  .qs-scr-products-thumb { inline-size: 44px; block-size: 44px; }
  .qs-scr-products-tools > .qs-ui-button { flex: 1 1 auto; }
  .qs-scr-products-count { font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
}
/* kısa etiketli düğme ("Seç") dokunma hedefinin altına düşmesin */
.qs-scr-products-tools [data-fk="select-mode"] { min-inline-size: var(--qs-hit); }

/* EYP QR editör · studio/css/screens/item.css
 * Sahibi: E9 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-item …);
 * değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 * Ürün denetçisi (03 §3.5.2): başlık + katlanır gruplar (durum, ad, fiyat, beyan, fotoğraf, yerleşim, zaman kuralı); tek sütun.
 */
.qs-scr-item { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-item-body { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-item-body .qs-ui-group-body { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-item-body .qs-ui-group-body[hidden] { display: none; }
.qs-scr-item-switches { display: flex; flex-direction: column; gap: var(--qs-sp-3); }
.qs-scr-item-note { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); overflow-wrap: anywhere; }
.qs-scr-item-history { display: flex; flex-wrap: wrap; gap: var(--qs-sp-1) var(--qs-sp-3); margin: 0; padding: 0; list-style: none; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-item-thumb { display: block; inline-size: 100%; max-inline-size: 240px; aspect-ratio: 4 / 3; border-radius: var(--qs-r-card); object-fit: cover; background: var(--qs-raised); }
.qs-scr-item-archived { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-2) var(--qs-sp-3); padding: var(--qs-sp-3); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); background: var(--qs-raised); color: var(--qs-ink-2); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-scr-item .qs-ui-media-grid:has(> .qs-ui-empty) { display: none; }   /* kitaplık boşken (yerel kip) boş-durum bloğu çıkmaz */
.qs-scr-item-body[inert] { opacity: .6; }
@media (max-width: 699px) {
  .qs-scr-item .qs-ui-crumb-link { min-inline-size: var(--qs-hit); }
  .qs-scr-item-note { font-size: var(--qs-fs-field); line-height: var(--qs-lh-field); }
  .qs-scr-item-thumb { max-inline-size: none; }
}
/* ad ve açıklama için tek dil seçimi */
.qs-scr-item-langbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-2) var(--qs-sp-3); }
.qs-scr-item-langbar > .qs-scr-item-note { margin: 0; }

/* EYP QR editör · studio/css/screens/products-table.css
 * Sahibi: E10 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-products-table …);
 * değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 * Ürünler · tablo: üstte arama + bölüm + süzgeç + dil sütunları, seçim çubuğu, sayaç, kaydırılan tablo. Katman gövdeleri (önizleme) kendi sınıfını taşır.
 */
.qs-scr-products-table { min-inline-size: 0; }
.qs-scr-products-table-root { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-products-table-top { min-inline-size: 0; }
.qs-scr-products-table-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-products-table-bar > .qs-ui-field { flex: 1 1 200px; max-inline-size: 280px; }
.qs-scr-products-table-langs { display: flex; align-items: center; gap: var(--qs-sp-2); }
.qs-scr-products-table-langs-label { color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-products-table-langbtns { display: inline-flex; gap: var(--qs-sp-1); }
.qs-scr-products-table-count { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-products-table-host { min-inline-size: 0; max-inline-size: 100%; }
.qs-scr-products-table-host .qs-ui-table { max-block-size: calc(100vh - 260px); min-block-size: 240px; }
.qs-scr-products-table-host .qs-ui-grid { table-layout: fixed; min-inline-size: 1326px; }
.qs-scr-products-table-host .qs-ui-grid-sel { inline-size: 36px; }
/* seçim kutusu masaüstü hedefi ≥ 24 px (03 §3.8) */
.qs-scr-products-table-host .qs-ui-grid-sel input[type="checkbox"] { inline-size: 24px; block-size: 24px; }
.qs-scr-products-table-host .qs-ui-grid td { overflow: hidden; text-overflow: ellipsis; }
.qs-scr-products-table-empty, .qs-scr-products-table-phone { min-inline-size: 0; }
.qs-scr-products-table-empty[hidden], .qs-scr-products-table-host[hidden] { display: none; }

/* katman gövdeleri: toplu fiyat ve yapıştırma önizlemesi */
.qs-scr-products-table-bp { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: min(720px, 100%); }
.qs-scr-products-table-bprow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--qs-sp-3); }
.qs-scr-products-table-note { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-scr-products-table-pvhost { min-inline-size: 0; }
.qs-scr-products-table-pv { max-block-size: 320px; overflow: auto; border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); background: var(--qs-surface); }
.qs-scr-products-table-pv table { inline-size: 100%; border-collapse: collapse; font-size: var(--qs-fs-table); line-height: var(--qs-lh-table); }
.qs-scr-products-table-pv th { position: sticky; inset-block-start: 0; padding: var(--qs-sp-1) var(--qs-sp-2); background: var(--qs-page); border-block-end: 1px solid var(--qs-line); color: var(--qs-ink-2); font-weight: var(--qs-fw-medium); text-align: start; white-space: nowrap; }
.qs-scr-products-table-pv td { padding: var(--qs-sp-1) var(--qs-sp-2); border-block-end: 1px solid var(--qs-line); vertical-align: top; overflow-wrap: anywhere; }
.qs-scr-products-table-pv tr[data-flag="bad"] td, .qs-scr-products-table-pv tr[data-flag="large"] td:last-child { background: var(--qs-st-error-bg); color: var(--qs-st-error-ink); }
.qs-scr-products-table-pv tr[data-flag="review"] td:last-child { background: var(--qs-st-instant-bg); color: var(--qs-st-instant-ink); }
.qs-scr-products-table-pvcol { color: var(--qs-ink-2); }
@media (max-width: 699px) { .qs-scr-products-table-bprow { grid-template-columns: minmax(0, 1fr); } }

/* EYP QR editör · studio/css/screens/products-case.css
 * Sahibi: E11 — 03 §7. Büyük harfi düzelt katmanı (03 §3.5.14). Yalnız bu ekranın kök sınıfı altında (.qs-scr-products-case …);
 * değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 */
.qs-scr-products-case { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: min(720px, 100%); }
.qs-scr-products-case-hint { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-products-case-all { display: flex; align-items: center; gap: var(--qs-sp-2); min-block-size: var(--qs-hit-desk); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); cursor: pointer; }
.qs-scr-products-case-check { inline-size: 18px; block-size: 18px; margin: 0; flex: none; accent-color: var(--qs-accent); }
.qs-scr-products-case-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; max-block-size: 360px; overflow: auto; border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); background: var(--qs-surface); }
.qs-scr-products-case-row { display: flex; flex-direction: column; gap: var(--qs-sp-1); padding: var(--qs-sp-2) var(--qs-sp-3); border-block-end: 1px solid var(--qs-line); }
.qs-scr-products-case-row:last-child { border-block-end: 0; }
.qs-scr-products-case-row[data-ok="false"] { background: var(--qs-st-error-bg); }
.qs-scr-products-case-head { display: flex; align-items: center; gap: var(--qs-sp-2); min-block-size: var(--qs-hit-desk); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-medium); cursor: pointer; }
.qs-scr-products-case-col { color: var(--qs-ink-2); font-weight: var(--qs-fw-regular); }
.qs-scr-products-case-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--qs-sp-3); }
.qs-scr-products-case-side { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.qs-scr-products-case-tag { color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-products-case-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; font-size: var(--qs-fs-table); line-height: var(--qs-lh-table); }
.qs-scr-products-case-note { margin: 0; color: var(--qs-st-published-ink); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-products-case-row[data-ok="false"] .qs-scr-products-case-note { color: var(--qs-st-error-ink); }
.qs-scr-products-case-summary { margin: 0; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-scr-products-case-kept { margin: 0; color: var(--qs-st-published-ink); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
@media (max-width: 699px) {
  .qs-scr-products-case-pair { grid-template-columns: minmax(0, 1fr); }
  .qs-scr-products-case-head, .qs-scr-products-case-all { min-block-size: var(--qs-hit); }
}
.qs-scr-products-case-dialog { inline-size: min(760px, 100%); }

/* EYP QR editör · studio/css/screens/products-allergens.css
 * Sahibi: Dalga D2 — alerjen matrisi ve besin tablosu ekranları (00 §7.102–104). Yalnız bu ekranların kök sınıfları altında
 * (.qs-scr-allergens …, .qs-scr-nutrition …); değişken ve bileşen sınıfı tanımlamaz. Değerler css/tokens.css değişkenlerinden.
 */
.qs-scr-allergens { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-allergens-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--qs-sp-3) var(--qs-sp-4); }
.qs-scr-allergens-top > .qs-ui-field { flex: 1 1 240px; max-inline-size: 360px; }
.qs-scr-allergens-tools { display: flex; align-items: center; gap: var(--qs-sp-3); margin-inline-start: auto; }
.qs-scr-allergens-hint, .qs-scr-allergens-count, .qs-scr-allergens-sel { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-allergens-why { color: var(--qs-st-instant-ink); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-allergens-check { inline-size: 24px; block-size: 24px; margin: 0; flex: none; accent-color: var(--qs-accent); }
.qs-scr-allergens-ok { display: inline-flex; align-items: center; gap: var(--qs-sp-2); min-block-size: var(--qs-hit-desk); font-size: var(--qs-fs-table); line-height: var(--qs-lh-table); cursor: pointer; }

/* masaüstü matris */
.qs-scr-allergens-wrap { border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); background: var(--qs-surface); }
.qs-scr-allergens-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--qs-fs-table); line-height: var(--qs-lh-table); }
.qs-scr-allergens-table th, .qs-scr-allergens-table td { padding: 3px 1px; border-block-end: 1px solid var(--qs-line); background: var(--qs-surface); text-align: start; vertical-align: middle; font-weight: var(--qs-fw-regular); }
.qs-scr-allergens-table thead th { position: sticky; inset-block-start: calc(-1 * var(--qs-sp-4)); z-index: 2; vertical-align: bottom; font-weight: var(--qs-fw-medium); background: var(--qs-surface); }
.qs-scr-allergens-colh { inline-size: 50px; block-size: 140px; padding-block: var(--qs-sp-2); text-align: center; }
.qs-scr-allergens-colh span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.qs-scr-allergens-name { min-inline-size: 170px; padding-inline: var(--qs-sp-2) !important; font-weight: var(--qs-fw-medium) !important; overflow-wrap: anywhere; }
.qs-scr-allergens-name > * { vertical-align: middle; }
.qs-scr-allergens-name .qs-scr-allergens-check { margin-inline-end: var(--qs-sp-2); }
.qs-scr-allergens-table thead .qs-scr-allergens-name { vertical-align: bottom; }
.qs-scr-allergens-status { min-inline-size: 88px; padding-inline: var(--qs-sp-2) !important; }
.qs-scr-allergens-status .qs-scr-allergens-why { display: block; max-inline-size: 140px; }
.qs-scr-allergens-sec th { padding: var(--qs-sp-2) var(--qs-sp-3); background: var(--qs-raised); color: var(--qs-ink-2); font-weight: var(--qs-fw-semibold); }
.qs-scr-allergens-cell { text-align: center !important; }
.qs-scr-allergens-pair { display: inline-flex; gap: 2px; }
.qs-scr-allergens-t { inline-size: 24px; block-size: 24px; padding: 0; border: 1px solid var(--qs-control-soft); border-radius: 6px; background: transparent; color: var(--qs-ink-2); font: inherit; font-size: 11px; font-weight: var(--qs-fw-semibold); cursor: pointer; }
.qs-scr-allergens-t:disabled { cursor: default; opacity: .7; }
.qs-scr-allergens-t[aria-pressed="true"][data-level="contains"] { background: var(--qs-accent); border-color: var(--qs-accent); color: var(--qs-on-accent); }
.qs-scr-allergens-t[aria-pressed="true"][data-level="trace"] { background: var(--qs-accent-soft); border-color: var(--qs-accent); color: var(--qs-accent-strong); }
.qs-scr-allergens-row[data-decl="unknown"] .qs-scr-allergens-t { border-style: dashed; }
.qs-scr-allergens-row[data-dirty="true"] > * { background: var(--qs-accent-soft); }
.qs-scr-allergens-act { min-inline-size: 176px; padding-inline: var(--qs-sp-2) !important; white-space: nowrap; }
.qs-scr-allergens-act > * { vertical-align: middle; }
.qs-scr-allergens-act .qs-scr-allergens-why { display: block; max-inline-size: 150px; }
@media (max-width: 1439px) {
  .qs-scr-allergens-wrap { overflow-x: auto; }
  .qs-scr-allergens-table thead th { position: static; }
  .qs-scr-allergens-table tbody th.qs-scr-allergens-name { position: sticky; inset-inline-start: 0; z-index: 1; }
}

/* yapışkan çubuk */
.qs-scr-allergens-bar { position: sticky; inset-block-end: calc(-1 * var(--qs-sp-5)); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-3); padding: var(--qs-sp-3) var(--qs-sp-4); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); background: var(--qs-surface); box-shadow: var(--qs-shadow-float); }
.qs-scr-allergens-bar[hidden] { display: none; }
.qs-scr-allergens-bar-n { font-weight: var(--qs-fw-medium); }
.qs-scr-allergens-bar-gap { flex: 1 1 0; }

/* fark ve toplu ekle katmanları */
.qs-scr-allergens-dialog { inline-size: min(640px, 100%); }
.qs-scr-allergens-diff, .qs-scr-allergens-bulk { display: flex; flex-direction: column; gap: var(--qs-sp-3); max-block-size: 60vh; overflow: auto; }
.qs-scr-allergens-prod { padding: var(--qs-sp-2) var(--qs-sp-3); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); }
.qs-scr-allergens-prod h3 { margin: 0 0 var(--qs-sp-1); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-scr-allergens-prod ul, .qs-scr-allergens-pv ul { margin: 0; padding: 0; list-style: none; }
.qs-scr-allergens-pv p { margin: 0 0 var(--qs-sp-1); }
.qs-scr-allergens-chg { margin-block: 2px; padding: 2px var(--qs-sp-2); border-radius: var(--qs-r-badge); font-size: var(--qs-fs-table); line-height: var(--qs-lh-table); }
.qs-scr-allergens-chg[data-kind="added"] { background: var(--qs-st-published-bg); color: var(--qs-st-published-ink); }
.qs-scr-allergens-chg[data-kind="raised"] { background: var(--qs-accent-soft); color: var(--qs-accent-strong); }
.qs-scr-allergens-chg[data-kind="removed"] { background: var(--qs-st-error-bg); color: var(--qs-st-error-ink); }
.qs-scr-allergens-chg[data-kind="lowered"] { background: var(--qs-st-instant-bg); color: var(--qs-st-instant-ink); }

/* telefon: kart listesi ve alttan sayfa */
.qs-scr-allergens-cards { display: flex; flex-direction: column; gap: var(--qs-sp-2); margin: 0; padding: 0; list-style: none; }
.qs-scr-allergens-card { display: flex; flex-direction: column; gap: 2px; inline-size: 100%; min-block-size: var(--qs-hit); padding: var(--qs-sp-3) var(--qs-sp-4); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); background: var(--qs-surface); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.qs-scr-allergens-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--qs-sp-2); font-weight: var(--qs-fw-medium); }
.qs-scr-allergens-card-name { min-inline-size: 0; overflow-wrap: anywhere; }
.qs-scr-allergens-card-sub, .qs-scr-allergens-card-sum, .qs-scr-allergens-sum { color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); overflow-wrap: anywhere; }
.qs-scr-allergens-sum { margin: 0 0 var(--qs-sp-2); }
.qs-scr-allergens-alist { display: flex; flex-direction: column; margin: 0 0 var(--qs-sp-3); padding: 0; list-style: none; }
.qs-scr-allergens-arow { display: flex; align-items: center; justify-content: space-between; gap: var(--qs-sp-3); min-block-size: var(--qs-hit); border-block-end: 1px solid var(--qs-line); }
.qs-scr-allergens-arow-name { flex: 1 1 0; min-inline-size: 0; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); overflow-wrap: anywhere; }
.qs-scr-allergens-chips { display: inline-flex; gap: var(--qs-sp-2); flex: none; }
.qs-scr-allergens-chip { min-inline-size: 72px; min-block-size: var(--qs-hit); padding-inline: var(--qs-sp-3); border: 1px solid var(--qs-control-soft); border-radius: var(--qs-r-control); background: transparent; color: var(--qs-ink); font: inherit; font-size: var(--qs-fs-body); cursor: pointer; }
.qs-scr-allergens-chip[aria-pressed="true"][data-level="contains"] { background: var(--qs-accent); border-color: var(--qs-accent); color: var(--qs-on-accent); }
.qs-scr-allergens-chip[aria-pressed="true"][data-level="trace"] { background: var(--qs-accent-soft); border-color: var(--qs-accent); color: var(--qs-accent-strong); }
.qs-scr-allergens-chip:disabled { cursor: default; opacity: .7; }
@media (max-width: 1023px) { .qs-scr-allergens-ok { min-block-size: var(--qs-hit); } }

/* besin değerleri tablosu (.qs-scr-nutrition…) */
.qs-scr-nutrition { min-inline-size: 0; }
.qs-scr-nutrition-root { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-nutrition-hint, .qs-scr-nutrition-count { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-nutrition-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-1) var(--qs-sp-3); }
.qs-scr-nutrition-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-nutrition-bar > .qs-ui-field { flex: 1 1 200px; max-inline-size: 280px; }
.qs-scr-nutrition-add { margin-inline-start: auto; }
.qs-scr-nutrition-host { min-inline-size: 0; max-inline-size: 100%; }
.qs-scr-nutrition-host .qs-ui-table { max-block-size: calc(100vh - 300px); min-block-size: 240px; }
.qs-scr-nutrition-host .qs-ui-grid { table-layout: fixed; }
.qs-scr-nutrition-host .qs-ui-grid-sel { inline-size: 44px; text-overflow: clip; }
.qs-scr-nutrition-host .qs-ui-grid-sel input[type="checkbox"] { inline-size: 24px; block-size: 24px; }
.qs-scr-nutrition-host .qs-ui-grid td { overflow: hidden; text-overflow: ellipsis; }
.qs-scr-nutrition-add[hidden], .qs-scr-nutrition-host[hidden], .qs-scr-nutrition-cards[hidden], .qs-scr-nutrition-empty[hidden], .qs-scr-nutrition-hint[hidden] { display: none; }
.qs-scr-nutrition-fill { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: min(420px, 100%); }
.qs-scr-nutrition-cards { display: flex; flex-direction: column; gap: var(--qs-sp-2); margin: 0; padding: 0; list-style: none; }
.qs-scr-nutrition-card { display: flex; flex-direction: column; gap: 2px; inline-size: 100%; min-block-size: var(--qs-hit); padding: var(--qs-sp-3) var(--qs-sp-4); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); background: var(--qs-surface); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.qs-scr-nutrition-card-name { font-weight: var(--qs-fw-medium); overflow-wrap: anywhere; }
.qs-scr-nutrition-card-sub, .qs-scr-nutrition-card-sum { color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); overflow-wrap: anywhere; }

/* EYP QR editör · studio/css/screens/menu.css
 * Sahibi: E12 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-menu …); menü ağacı, arşiv ve bölüm/üst bölüm denetçisi aynı kökü paylaşır.
 * Değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden. Hedef seçme ve ekleme diyaloğu ekranın dışında
 * (katman) çizildiği için .qs-scr-menu-pick / .qs-scr-menu-form kendi adlarıyla durur.
 */
.qs-scr-menu { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-menu-bar { display: flex; flex-wrap: wrap; gap: var(--qs-sp-2); align-items: center; justify-content: flex-end; }
.qs-scr-menu-archive-link {
  display: inline-flex; align-items: center; align-self: flex-start; min-block-size: var(--qs-hit-desk); color: var(--qs-accent-strong);
  font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); text-decoration: underline; text-underline-offset: 2px;
}
.qs-scr-menu-archive-link:focus-visible { outline: var(--qs-focus-width) solid var(--qs-focus-color); outline-offset: var(--qs-focus-offset); border-radius: var(--qs-r-badge); }
.qs-scr-menu-archive { margin: 0; padding: 0; list-style: none; }
.qs-scr-menu-inspector { display: flex; flex-direction: column; gap: var(--qs-sp-4); min-inline-size: 0; }
.qs-scr-menu-note { margin: 0; overflow-wrap: anywhere; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-menu-row { display: flex; flex-wrap: wrap; gap: var(--qs-sp-2); }
.qs-scr-menu-warn {
  display: flex; flex-direction: column; gap: var(--qs-sp-2); padding: var(--qs-sp-3); background: var(--qs-st-instant-bg); color: var(--qs-st-instant-ink);
  border: 1px solid var(--qs-line); border-radius: var(--qs-r-card);
}
.qs-scr-menu-warn p { margin: 0; overflow-wrap: anywhere; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-scr-menu-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--qs-sp-2); padding-block-end: var(--qs-sp-3); border-block-end: 1px solid var(--qs-line); min-inline-size: 0; }
.qs-scr-menu-group > .qs-ui-langfield { inline-size: 100%; }
.qs-scr-menu-pick .qs-ui-dialog-body { max-block-size: 60vh; overflow: auto; }
.qs-scr-menu-form { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
@media (max-width: 699px) {
  .qs-scr-menu-bar { justify-content: stretch; }
  .qs-scr-menu-bar > * { inline-size: 100%; }
  .qs-scr-menu-archive-link { min-block-size: var(--qs-hit); }
}
/* Ağaç satırında etiket satırın tam yüksekliğini taşır: dokunma hedefi satır kadar olur (kit etiketi satır yüksekliğinde bırakır) */
.qs-scr-menu .qs-ui-tree-label, .qs-scr-menu-pick .qs-ui-tree-label { align-self: stretch; display: flex; align-items: center; }
/* Odak halkası odaklanan düğümün kendisinde de görünür (kit halkayı yalnız satırda çizer); açık kapsayıcıda halka alt ağacı çevreler */
.qs-scr-menu .qs-ui-tree-item:focus-visible, .qs-scr-menu-pick .qs-ui-tree-item:focus-visible {
  outline: var(--qs-focus-width) solid var(--qs-focus-color); outline-offset: calc(var(--qs-focus-width) * -1); border-radius: var(--qs-r-control);
}
@media (max-width: 699px) {
  .qs-scr-menu .qs-ui-crumb-link { min-inline-size: var(--qs-hit); justify-content: center; }
}
/* bölümde ad ve grup adları için tek dil seçimi */
.qs-scr-menu-langbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-2) var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-menu-langbar > .qs-scr-menu-note { margin: 0; }
/* dar ekranda segment grubu tek satırda kalır, sığmazsa yatay kayar (yetim seçenek yok) */
@media (max-width: 699px) {
  .qs-scr-menu .qs-ui-segmented { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .qs-scr-menu .qs-ui-segment { flex: 0 0 auto; }
}

/* EYP QR editör · studio/css/screens/look.css
 * Sahibi: E13 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-look …); Tema ve Ayrıntı ekranları aynı kökü paylaşır (Düzen: look-layout.css).
 * Değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden. Galeri katmanı ekranın dışında çizildiği için
 * .qs-scr-look-gallery / -gal-group / -preview kendi adlarıyla durur.
 */
.qs-scr-look { display: flex; flex-direction: column; min-inline-size: 0; }
.qs-scr-look-body { display: flex; flex-direction: column; gap: var(--qs-sp-4); min-inline-size: 0; }
.qs-scr-look-block { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-look-h { margin: 0; font-size: var(--qs-fs-field); line-height: var(--qs-lh-field); font-weight: var(--qs-fw-semibold); color: var(--qs-ink); }
.qs-scr-look-h3, .qs-scr-look-gal-group .qs-scr-look-h3, .qs-scr-look-preview .qs-scr-look-h3 {
  margin: 0; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-semibold); color: var(--qs-ink);
}
.qs-scr-look-note { margin: 0; overflow-wrap: anywhere; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-look-link {
  display: inline-flex; align-items: center; align-self: flex-start; min-block-size: var(--qs-hit-desk); color: var(--qs-accent-strong);
  font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); text-decoration: underline; text-underline-offset: 2px;
}
.qs-scr-look-link:focus-visible { outline: var(--qs-focus-width) solid var(--qs-focus-color); outline-offset: var(--qs-focus-offset); border-radius: var(--qs-r-badge); }

/* Seçili tema kartı: önizleme solda, metin sağda (telefonda da yan yana: palet satırı kaydırmadan görünür, 03 §3.5.4) */
.qs-scr-look-current {
  display: flex; gap: var(--qs-sp-4); align-items: flex-start; padding: var(--qs-sp-3); background: var(--qs-surface);
  border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); min-inline-size: 0;
}
.qs-scr-look-thumb { flex: none; inline-size: calc(var(--qs-sp-7) * 2); border: 1px solid var(--qs-line); border-radius: var(--qs-r-control); overflow: hidden; background: var(--qs-raised); }
.qs-scr-look-current-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-look-kicker, .qs-scr-look-sub { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); overflow-wrap: anywhere; }
.qs-scr-look-name { margin: 0; font-size: var(--qs-fs-title); line-height: var(--qs-lh-title); font-weight: var(--qs-fw-semibold); overflow-wrap: anywhere; }

/* Palet kartı küçük resmi: dört rol rengi yan yana (renk veriden gelir: özel değişken, ham renk yok) */
.qs-scr-look .qs-ui-option-media:empty, .qs-scr-look-gallery .qs-ui-option-media:empty { display: none; }
/* Palet kartında şerit yassıdır; tema kartı küçük resmi dikeydir (kendi sınıfı) */
.qs-scr-look-palette .qs-ui-option-media { aspect-ratio: 3 / 1; }
.qs-scr-look-sw { display: flex; inline-size: 100%; block-size: 100%; }
.qs-scr-look-sw-chip { flex: 1 1 0; background: var(--qs-sw); }

.qs-scr-look-media { display: flex; flex-direction: column; align-items: flex-start; gap: var(--qs-sp-2); padding-block-end: var(--qs-sp-3); border-block-end: 1px solid var(--qs-line); min-inline-size: 0; }
.qs-scr-look-media > .qs-ui-media { inline-size: 100%; }
.qs-scr-look-media-img { max-inline-size: calc(var(--qs-sp-7) * 3); max-block-size: calc(var(--qs-sp-7) * 2); object-fit: contain; border: 1px solid var(--qs-line); border-radius: var(--qs-r-control); background: var(--qs-surface); }

/* Galeri katmanı (sheet gövdesi) */
.qs-scr-look-gallery { display: flex; flex-direction: column; gap: var(--qs-sp-4); min-inline-size: 0; }
.qs-scr-look-gal-group { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-look-gallery .qs-scr-look-thumb--card { inline-size: 100%; border: 0; border-radius: 0; background: var(--qs-raised); }
.qs-scr-look-gallery .qs-ui-option-media { aspect-ratio: auto; max-block-size: calc(var(--qs-sp-7) * 4); }
.qs-scr-look-preview { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-look-preview:empty { display: none; }
.qs-scr-look-lines { margin: 0; padding-inline-start: var(--qs-sp-5); color: var(--qs-ink); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); overflow-wrap: anywhere; }

/* Ayrıntı: seçenek grupları */
.qs-scr-look-field { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-look-cols { display: flex; flex-direction: column; gap: var(--qs-sp-3); }
.qs-scr-look-cols-row { display: flex; flex-direction: column; gap: var(--qs-sp-1); min-inline-size: 0; }
.qs-scr-look-cols-row > .qs-ui-segmented { align-self: flex-start; max-inline-size: 100%; }
.qs-scr-look-unused { margin: 0; padding-inline-start: var(--qs-sp-5); color: var(--qs-ink-2); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }

/* Misafirde bilgi gösterimi: ikon paketi kartında dört örnek ikon (renk sayfa mürekkebinden, çizgi/dolu dosyadan) */
.qs-scr-look-display { gap: var(--qs-sp-4); }
.qs-scr-look-icopack .qs-ui-option-media { aspect-ratio: auto; background: transparent; }
.qs-scr-look-ico { display: flex; flex-wrap: wrap; gap: var(--qs-sp-2); align-items: center; min-block-size: var(--qs-sp-5); color: var(--qs-ink); }
.qs-scr-look-ico-svg { inline-size: var(--qs-sp-5); block-size: var(--qs-sp-5); flex: none; }
.qs-scr-look-icopack .qs-ui-option-media > .qs-scr-look-ico { inline-size: 100%; block-size: auto; }

@media (max-width: 699px) {
  /* Resimsiz seçenek kartı telefonda dokunma hedefi kadar yüksek olur (≥ 44, 03 §3.6 K6) */
  .qs-scr-look .qs-ui-option, .qs-scr-look-gallery .qs-ui-option { min-block-size: var(--qs-hit); }
  .qs-scr-look-current { gap: var(--qs-sp-3); }
  .qs-scr-look-thumb { inline-size: calc(var(--qs-sp-7) * 1.5); }
  .qs-scr-look-link { min-block-size: var(--qs-hit); }
  .qs-scr-look-cols-row .qs-ui-segment { min-inline-size: var(--qs-hit); }
}

/* EYP QR editör · studio/css/screens/look-layout.css
 * Sahibi: E13 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-look-lay …; ortak gövde look.css'te .qs-scr-look).
 * Değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 */
.qs-scr-look-lay .qs-scr-look-lay-world { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-look-lay .qs-scr-look-field > .qs-ui-segmented { align-self: flex-start; max-inline-size: 100%; }
.qs-scr-look-lay .qs-ui-row-controls .qs-ui-button { max-inline-size: 100%; }
@media (max-width: 699px) {
  .qs-scr-look-lay .qs-scr-look-field > .qs-ui-segmented { align-self: stretch; }
}

/* EYP QR editör · studio/css/screens/look-mini.css
 * Görünüm › Ayrıntı seçenek kartlarının küçük önizlemesi (studio/js/screens/look-mini.js). Yalnız .qs-scr-look-mini… adları.
 * Renkler css/tokens.css değişkenlerinden; ölçüler --qs-mini-* (JS yazar). Şematik çizim: süs, bilgi taşımaz (aria-hidden).
 */
.qs-scr-look-detail .qs-ui-option-media { aspect-ratio: 3 / 2; }
.qs-scr-look .qs-ui-option-media:empty ~ .qs-ui-option-text { padding-inline-end: calc(24px + var(--qs-sp-2)); }
.qs-scr-look-mini { display: flex; flex-direction: column; justify-content: center; gap: var(--qs-mini-gap, 6px); box-sizing: border-box; padding: var(--qs-sp-2) var(--qs-sp-3); background: var(--qs-raised); }
.qs-scr-look-mini-row { display: flex; align-items: center; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-look-mini-col { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 6px; padding: var(--qs-sp-2) var(--qs-sp-3); min-block-size: 0; }
.qs-scr-look-mini-text { display: flex; flex: 1 1 0; flex-direction: column; gap: 4px; min-inline-size: 0; }
.qs-scr-look-mini-line { display: block; block-size: 5px; border-radius: 3px; background: var(--qs-switch-off); }
.qs-scr-look-mini-line[data-w="l"] { inline-size: 88%; }
.qs-scr-look-mini-line[data-w="m"] { inline-size: 58%; }
.qs-scr-look-mini-line[data-w="s"] { inline-size: 38%; background: var(--qs-control-soft); }

/* görsel kutusu: gerçek ürün fotoğrafı ya da renkli örnek şerit; ton süzgeci core/shared.css [data-qs-tone] değişkeninden */
.qs-scr-look-mini-pic { display: flex; flex: none; overflow: hidden; inline-size: var(--qs-mini-pic, 28px); aspect-ratio: 1 / 1; border-radius: var(--qs-mini-radius, 6px); background: var(--qs-select-soft); }
.qs-scr-look-mini-pic img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; filter: var(--qs-tone-filter, none); }
.qs-scr-look-mini-chip { flex: 1 1 0; filter: var(--qs-tone-filter, none); }
.qs-scr-look-mini-chip[data-c="a"] { background: var(--qs-st-error-ink); }
.qs-scr-look-mini-chip[data-c="b"] { background: var(--qs-st-instant-ink); }
.qs-scr-look-mini-chip[data-c="c"] { background: var(--qs-st-published-ink); }
.qs-scr-look-mini-chip[data-c="d"] { background: var(--qs-select); }
.qs-scr-look-mini-pic--big { inline-size: 52px; }
.qs-scr-look-mini-pic--band { inline-size: 100%; aspect-ratio: 5 / 1; border-radius: var(--qs-r-badge); }
.qs-scr-look-mini[data-kind="tone"] { padding: 0; }
.qs-scr-look-mini-pic--fill { inline-size: 100%; block-size: 100%; aspect-ratio: auto; border-radius: 0; }

/* yoğunluk: üç satır küçük kutuyla sığar */
.qs-scr-look-mini[data-kind="density"] { --qs-mini-pic: 12px; padding-block: var(--qs-sp-1); overflow: hidden; }
.qs-scr-look-mini[data-kind="density"] .qs-scr-look-mini-text { gap: 3px; }
.qs-scr-look-mini[data-kind="density"] .qs-scr-look-mini-line { block-size: 4px; }

/* gezinme */
.qs-scr-look-mini[data-kind="nav"] { padding: 0; gap: 0; justify-content: space-between; }
.qs-scr-look-mini-nav { display: flex; justify-content: center; padding: 6px; background: var(--qs-select-soft); }
.qs-scr-look-mini-dots { display: flex; align-items: center; gap: 6px; }
.qs-scr-look-mini-dot { display: block; flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--qs-select-line); }
.qs-scr-look-mini-dots--pill .qs-scr-look-mini-dot { inline-size: 20px; block-size: 6px; border-radius: 3px; }
.qs-scr-look-mini-dots--ico .qs-scr-look-mini-dot { inline-size: 9px; block-size: 9px; border-radius: 3px; border: 1.5px solid var(--qs-select-line); background: none; box-sizing: border-box; }

/* bölüm başlığı · kart · düğme · arama */
.qs-scr-look-mini-head { display: flex; flex-direction: column; gap: 4px; }
.qs-scr-look-mini-head .qs-scr-look-mini-line { block-size: 6px; background: var(--qs-ink-2); }
.qs-scr-look-mini-rule { display: block; inline-size: 30%; block-size: 2px; background: var(--qs-select-line); }
.qs-scr-look-mini-card { display: flex; flex-direction: column; gap: 4px; padding: 6px var(--qs-sp-2); border: 1px solid var(--qs-control-soft); border-radius: 6px; background: var(--qs-surface); }
.qs-scr-look-mini-btn { display: flex; align-self: flex-start; inline-size: 44%; padding: 5px var(--qs-sp-2); border-radius: 6px; background: var(--qs-select); }
.qs-scr-look-mini-btn .qs-scr-look-mini-line { inline-size: 100%; background: var(--qs-accent); }
.qs-scr-look-mini[data-kind="corner"][data-v="keskin"] .qs-scr-look-mini-card, .qs-scr-look-mini[data-kind="corner"][data-v="keskin"] .qs-scr-look-mini-btn { border-radius: 0; }
.qs-scr-look-mini[data-kind="corner"][data-v="yumusak"] .qs-scr-look-mini-card, .qs-scr-look-mini[data-kind="corner"][data-v="yumusak"] .qs-scr-look-mini-btn { border-radius: 10px; }
.qs-scr-look-mini-field { display: flex; align-items: center; gap: 6px; padding: 5px var(--qs-sp-2); border: 1px solid var(--qs-control-line); border-radius: 999px; background: var(--qs-surface); }
.qs-scr-look-mini-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--qs-sp-2); }
.qs-scr-look-mini-round { display: block; flex: none; inline-size: 16px; block-size: 16px; border: 1px solid var(--qs-control-line); border-radius: 50%; background: var(--qs-surface); box-sizing: border-box; }

/* misafirde bilgi: üstte ürün satırı, altta ürün ayrıntısı sayfası; işaret hangisindeyse orada görünür */
.qs-scr-look-mini[data-kind="info"] { justify-content: flex-start; padding-block-end: 0; }
.qs-scr-look-mini-sheet { display: flex; flex-direction: column; gap: 4px; margin-block-start: auto; padding: 6px var(--qs-sp-2); border: 1px solid var(--qs-control-soft); border-block-end: 0; border-radius: 8px 8px 0 0; background: var(--qs-surface); }
.qs-scr-look-mini-kcal { color: var(--qs-accent-strong); font-size: 9px; line-height: 10px; font-weight: var(--qs-fw-semibold); }
.qs-scr-look-mini-tbl { display: flex; flex-direction: column; gap: 3px; inline-size: 70%; }
.qs-scr-look-mini-tbl .qs-scr-look-mini-line { block-size: 3px; background: var(--qs-select-line); }

/* temanın ikon paketi */
.qs-scr-look-mini-icons { display: flex; align-items: center; justify-content: center; gap: var(--qs-sp-2); color: var(--qs-ink); }
.qs-scr-look-mini-icons > * { flex: none; inline-size: 22px; block-size: 22px; }

/* alerjen ikon paketi kartı kendi yüksekliğinde kalır; onay işareti örnek ikonların üstüne binmez */
.qs-scr-look-detail .qs-scr-look-icopack .qs-ui-option-media { aspect-ratio: auto; padding-inline-end: calc(24px + var(--qs-sp-2)); }

/* EYP QR editör · studio/css/screens/campaigns.css
 * Sahibi: E15 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-campaigns …); liste ve düzenleyici aynı kökü paylaşır.
 * Değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden. "+ Kampanya" diyaloğu ekranın dışında
 * (katman) çizildiği için .qs-scr-campaigns-form kendi adıyla durur.
 */
.qs-scr-campaigns { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-campaigns-bar { display: flex; flex-wrap: wrap; gap: var(--qs-sp-3); align-items: center; justify-content: space-between; min-inline-size: 0; }
.qs-scr-campaigns-note { margin: 0; overflow-wrap: anywhere; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-campaigns-limit { padding: var(--qs-sp-3); background: var(--qs-st-instant-bg); color: var(--qs-st-instant-ink); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); }
.qs-scr-campaigns-edit, .qs-scr-campaigns-fields { display: flex; flex-direction: column; gap: var(--qs-sp-4); min-inline-size: 0; }
.qs-scr-campaigns-live { display: flex; flex-wrap: wrap; gap: var(--qs-sp-2); align-items: center; }
.qs-scr-campaigns-live-state { display: inline-flex; flex-wrap: wrap; gap: var(--qs-sp-2); }
.qs-scr-campaigns-form { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-campaigns .qs-ui-list { margin: 0; padding: 0; list-style: none; }
/* Satırdaki anahtar etiketi görsel olarak gizlenir (adı düğmenin aria-label'ında); satır başlığa yer bırakır */
.qs-scr-campaigns .qs-ui-row-controls .qs-ui-switch-label {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.qs-scr-campaigns .qs-ui-row-controls .qs-ui-switch { min-inline-size: var(--qs-hit); justify-content: center; }
.qs-scr-campaigns .qs-ui-row-sub { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 699px) {
  .qs-scr-campaigns-bar > * { inline-size: 100%; }
  /* süzgeç segmentleri tek satırda kalır, sığmazsa yatay kayar (iki satıra kırılıp yetim seçenek bırakmaz) */
  .qs-scr-campaigns .qs-ui-segmented { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .qs-scr-campaigns .qs-ui-segment { flex: 0 0 auto; overflow: visible; text-overflow: clip; padding-inline: var(--qs-sp-2); }
  .qs-scr-campaigns .qs-ui-row-main { flex-wrap: wrap; row-gap: var(--qs-sp-1); }
  .qs-scr-campaigns .qs-ui-row-text { flex: 1 1 100%; }
  .qs-scr-campaigns .qs-ui-row-title bdi { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
  .qs-scr-campaigns .qs-ui-row-badges { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--qs-sp-1); }
}
/* kampanya başlığı ve metni için tek dil seçimi */
.qs-scr-campaigns-langbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-2) var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-campaigns-langbar > .qs-scr-campaigns-note { margin: 0; }

/* EYP QR editör · studio/css/screens/publish.css
 * Sahibi: E16 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-publish …);
 * değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 * Üç ekran ortak kökü paylaşır: Yayın › Değişiklikler, Sürümler, Bağlantı ve QR (03 §3.5.6–§3.5.7).
 */
.qs-scr-publish { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-publish-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-publish-status { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-semibold); color: var(--qs-ink); }
.qs-scr-publish-note { margin: 0; overflow-wrap: anywhere; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-publish-h { margin: var(--qs-sp-3) 0 0; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-semibold); color: var(--qs-ink); }
.qs-scr-publish-list { margin: 0; padding: 0; list-style: none; }
.qs-scr-publish-more { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }

/* denetim maddeleri */
.qs-scr-publish-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--qs-sp-2); }
.qs-scr-publish-check { min-inline-size: 0; background: var(--qs-surface); border: 1px solid var(--qs-line); border-radius: var(--qs-r-control); }
.qs-scr-publish-check[data-level="block"] { background: var(--qs-st-error-bg); color: var(--qs-st-error-ink); }
.qs-scr-publish-check[data-level="warn"] { background: var(--qs-st-instant-bg); color: var(--qs-st-instant-ink); }
.qs-scr-publish-check[data-level="ok"] { color: var(--qs-st-published-ink); }
.qs-scr-publish-chead { display: flex; align-items: flex-start; gap: var(--qs-sp-2); min-block-size: var(--qs-hit-desk); padding: var(--qs-sp-2) var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-publish-mark { flex: none; inline-size: 1.25em; text-align: center; font-weight: var(--qs-fw-semibold); }
.qs-scr-publish-ctext { min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-scr-publish-links { margin: 0; padding: 0 var(--qs-sp-3) var(--qs-sp-2) calc(var(--qs-sp-3) + 1.25em + var(--qs-sp-2)); list-style: none; display: flex; flex-direction: column; }
.qs-scr-publish-a {
  display: inline-flex; align-items: center; min-block-size: var(--qs-hit-desk); min-inline-size: 0; overflow-wrap: anywhere; color: var(--qs-accent-strong);
  font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); text-decoration: underline; text-underline-offset: 2px;
}
.qs-scr-publish-a:focus-visible { outline: var(--qs-focus-width) solid var(--qs-focus-color); outline-offset: var(--qs-focus-offset); border-radius: var(--qs-r-badge); }

/* ret ve yayın sonrası paneller */
.qs-scr-publish-fail, .qs-scr-publish-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--qs-sp-2); padding: var(--qs-sp-3); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); min-inline-size: 0; }
.qs-scr-publish-fail { background: var(--qs-st-error-bg); color: var(--qs-st-error-ink); }
.qs-scr-publish-done { background: var(--qs-st-published-bg); color: var(--qs-st-published-ink); }
.qs-scr-publish-fail p, .qs-scr-publish-done p { margin: 0; overflow-wrap: anywhere; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-scr-publish-fail ul { margin: 0; padding-inline-start: var(--qs-sp-5); overflow-wrap: anywhere; }
.qs-scr-publish-fail-title, .qs-scr-publish-done-title { font-weight: var(--qs-fw-semibold); }

/* bağlantı ve QR */
.qs-scr-publish-url-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-2); min-inline-size: 0; margin: 0; }
.qs-scr-publish-url {
  flex: 1 1 16rem; min-inline-size: 0; min-block-size: var(--qs-hit-desk); padding: 0 var(--qs-sp-3); font: inherit; font-size: var(--qs-fs-field);
  color: var(--qs-ink); background: var(--qs-surface); border: 1px solid var(--qs-control-line); border-radius: var(--qs-r-control); text-overflow: ellipsis;
}
.qs-scr-publish-url-row > .qs-scr-publish-a { flex: none; justify-content: center; min-inline-size: var(--qs-hit); padding-inline: var(--qs-sp-3); }
.qs-scr-publish-url:focus-visible { outline: var(--qs-focus-width) solid var(--qs-focus-color); outline-offset: var(--qs-focus-offset); }
.qs-scr-publish-opts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--qs-sp-4); min-inline-size: 0; }
.qs-scr-publish-opts > * { min-inline-size: 0; }
.qs-scr-publish-opt { display: flex; flex-direction: column; gap: var(--qs-sp-1); }
.qs-scr-publish-qr { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--qs-sp-3); }
.qs-scr-publish-qr img { display: block; inline-size: min(240px, 100%); block-size: auto; aspect-ratio: 1; background: var(--qs-g-0); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); }

@media (max-width: 699px) {
  .qs-scr-publish-bar > .qs-ui-button { inline-size: 100%; }
  .qs-scr-publish-a { min-block-size: var(--qs-hit); }
  .qs-scr-publish-chead { min-block-size: var(--qs-hit); }
  .qs-scr-publish-url { min-block-size: var(--qs-hit); }
}

/* EYP QR editör · studio/css/screens/palette.css
 * Sahibi: E18 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-palette …);
 * değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 * Kök sınıf, kipli katmanın kartındadır (S.ui.dialog). Masaüstünde üstte ortalı kart; telefonda tam genişlik ve tam yükseklik.
 */
.qs-scr-palette {
  align-self: start; margin-block-start: 12vh; padding: var(--qs-sp-3); gap: var(--qs-sp-2);
  inline-size: min(560px, 100%); max-block-size: min(560px, 76vh); overflow: hidden;
}
.qs-scr-palette .qs-ui-dialog-title {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.qs-scr-palette .qs-ui-dialog-body { min-block-size: 0; gap: var(--qs-sp-2); }
.qs-scr-palette .qs-scr-palette-body { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-block-size: 0; }
.qs-scr-palette .qs-scr-palette-input { inline-size: 100%; box-sizing: border-box; }
.qs-scr-palette .qs-scr-palette-list {
  display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none;
  min-block-size: 0; overflow-y: auto; overscroll-behavior: contain;
}
.qs-scr-palette .qs-scr-palette-list[data-empty="true"] { display: none; }
.qs-scr-palette .qs-scr-palette-row {
  display: flex; align-items: center; gap: var(--qs-sp-2); min-block-size: var(--qs-hit-desk); padding: var(--qs-sp-2) var(--qs-sp-3);
  border-radius: var(--qs-r-card); cursor: pointer; color: var(--qs-ink);
}
.qs-scr-palette .qs-scr-palette-row[aria-selected="true"] { background: var(--qs-accent-soft); outline: 1px solid var(--qs-select-line); outline-offset: -1px; }
.qs-scr-palette .qs-scr-palette-text { display: flex; flex-direction: column; flex: 1 1 auto; min-inline-size: 0; }
.qs-scr-palette .qs-scr-palette-title { font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-medium); overflow-wrap: anywhere; }
.qs-scr-palette .qs-scr-palette-sub { font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); color: var(--qs-ink-2); overflow-wrap: anywhere; }
.qs-scr-palette .qs-scr-palette-kind {
  flex: none; padding: 2px var(--qs-sp-2); border-radius: var(--qs-r-badge); background: var(--qs-soft); color: var(--qs-ink-2);
  font-size: var(--qs-fs-help); line-height: var(--qs-lh-help);
}
.qs-scr-palette .qs-scr-palette-note { margin: 0; padding: var(--qs-sp-2) var(--qs-sp-3); color: var(--qs-ink-2); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-scr-palette .qs-scr-palette-note:empty { display: none; }
.qs-scr-palette .qs-scr-palette-keys { margin: 0; padding-inline: var(--qs-sp-3); color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-palette .qs-scr-palette-close { display: none; }

@media (max-width: 699px) {
  .qs-scr-palette {
    position: fixed; inset: 0; align-self: stretch; z-index: 1; inline-size: 100%; block-size: 100%; max-block-size: none; margin: 0; border-radius: 0; padding: var(--qs-sp-3); overflow: hidden;
    display: flex; flex-direction: column; gap: var(--qs-sp-3);
  }
  .qs-scr-palette .qs-ui-dialog-body { flex: 1 1 auto; }
  .qs-scr-palette .qs-scr-palette-body { flex: 1 1 auto; }
  .qs-scr-palette .qs-scr-palette-input { font-size: var(--qs-fs-field); min-block-size: var(--qs-hit); }
  .qs-scr-palette .qs-scr-palette-row { min-block-size: var(--qs-hit); }
  .qs-scr-palette .qs-scr-palette-keys { display: none; }
  .qs-scr-palette .qs-scr-palette-close { display: inline-flex; align-self: stretch; justify-content: center; min-block-size: var(--qs-hit); }
}

/* EYP QR editör · studio/css/screens/import.css
 * Sahibi: E17 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-import …);
 * değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 * İçe aktarma sihirbazı (03 §3.5.10): adım şeridi, kaynak, sütun eşleme kartları, önizleme özeti + satır listesi, alt çubuk. Telefonda tek sütun.
 */
.qs-scr-import { display: flex; flex-direction: column; gap: var(--qs-sp-4); min-inline-size: 0; }
.qs-scr-import-body { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-import-title { margin: 0; font-size: var(--qs-fs-title); line-height: var(--qs-lh-title); font-weight: var(--qs-fw-semibold); }
.qs-scr-import-steps { display: flex; gap: var(--qs-sp-2); margin: 0; padding: 0; list-style: none; min-inline-size: 0; }
.qs-scr-import-step { display: flex; align-items: center; gap: var(--qs-sp-2); flex: 1 1 0; min-inline-size: 0; padding-block-end: var(--qs-sp-2); border-block-end: 2px solid var(--qs-line); color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-import-step[aria-current="step"] { border-block-end-color: var(--qs-accent); color: var(--qs-ink); font-weight: var(--qs-fw-medium); }
.qs-scr-import-step[data-done] { border-block-end-color: var(--qs-accent-soft); color: var(--qs-ink); }
.qs-scr-import-stepn { display: grid; place-items: center; flex: none; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--qs-raised); font-size: var(--qs-fs-help); }
.qs-scr-import-step[aria-current="step"] .qs-scr-import-stepn { background: var(--qs-accent); color: var(--qs-on-accent); }
@media (max-width: 699px) {
  .qs-scr-import-step > span:last-child { display: none; }
  .qs-scr-import-step[aria-current="step"] > span:last-child { display: inline; }
  .qs-scr-import-step[aria-current="step"] { flex: 3 1 0; }
}
.qs-scr-import-note { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); overflow-wrap: anywhere; }
.qs-scr-import-note[data-kind="error"] { color: var(--qs-st-error-ink); }
.qs-scr-import-note[data-kind="warn"] { padding: var(--qs-sp-2) var(--qs-sp-3); border-radius: var(--qs-r-control); background: var(--qs-st-instant-bg); color: var(--qs-st-instant-ink); }
.qs-scr-import-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-2); }
.qs-scr-import-tools:empty { display: none; }
.qs-scr-import textarea { min-block-size: 180px; font-family: var(--qs-font); }
/* sütun eşleme: her sütun bir kart (seçici + üç örnek değer) */
.qs-scr-import-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--qs-sp-3); margin: 0; padding: 0; list-style: none; }
.qs-scr-import-col { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; padding: var(--qs-sp-3); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); background: var(--qs-surface); }
.qs-scr-import-samples { display: flex; flex-direction: column; gap: var(--qs-sp-1); margin: 0; padding: 0; list-style: none; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-import-samples li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: var(--qs-sp-1) var(--qs-sp-2); border-radius: var(--qs-r-badge); background: var(--qs-raised); }
/* önizleme özeti */
.qs-scr-import-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--qs-sp-2); }
.qs-scr-import-stat { display: flex; flex-direction: column; gap: var(--qs-sp-1); min-inline-size: 0; padding: var(--qs-sp-3); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); background: var(--qs-surface); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); color: var(--qs-ink-2); }
.qs-scr-import-stat-n { color: var(--qs-ink); font-size: var(--qs-fs-display); line-height: 1.1; font-weight: var(--qs-fw-semibold); }
.qs-scr-import-stat[data-stat="error"] .qs-scr-import-stat-n { color: var(--qs-st-error-ink); }
.qs-scr-import-stat[data-stat="cand"] .qs-scr-import-stat-n { color: var(--qs-st-instant-ink); }
.qs-scr-import-errors { display: flex; flex-direction: column; gap: var(--qs-sp-2); padding: var(--qs-sp-3); border-radius: var(--qs-r-card); background: var(--qs-st-error-bg); color: var(--qs-st-error-ink); }
.qs-scr-import-errors h3 { margin: 0; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-semibold); }
.qs-scr-import-errors ul { display: flex; flex-direction: column; gap: var(--qs-sp-1); margin: 0; padding: 0; list-style: none; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-scr-import-errors li { overflow-wrap: anywhere; }
.qs-scr-import-list { min-inline-size: 0; border-block-start: 1px solid var(--qs-line); }
.qs-scr-import-list .qs-ui-row-check { inline-size: 24px; block-size: 24px; }   /* masaüstü hedef ≥ 24 px (03 §3.8) */
.qs-scr-import-list .qs-ui-row[data-state="out"] .qs-ui-row-main { opacity: .55; }
.qs-scr-import-row--cand { flex-wrap: wrap; }
.qs-scr-import-row--cand > .qs-ui-row-main { flex: 1 1 0; }
.qs-scr-import-cand { flex: 1 1 100%; padding-block: var(--qs-sp-1) var(--qs-sp-2); padding-inline: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-import-cand .qs-ui-segmented { display: flex; }
.qs-scr-import-cand .qs-ui-segment { flex: 1 1 0; min-inline-size: 0; white-space: normal; }
/* alt çubuk ve sonuç */
.qs-scr-import-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--qs-sp-2); padding-block-start: var(--qs-sp-3); border-block-start: 1px solid var(--qs-line); }
.qs-scr-import-result { margin: 0; font-size: var(--qs-fs-field); line-height: var(--qs-lh-field); overflow-wrap: anywhere; }
@media (max-width: 699px) {
  .qs-scr-import-bar { flex-direction: column-reverse; align-items: stretch; }
  .qs-scr-import-bar > .qs-ui-button { inline-size: 100%; }
  .qs-scr-import-tools > .qs-ui-button { flex: 1 1 auto; }
  .qs-scr-import .qs-ui-row-meta { display: none; }
  .qs-scr-import-list .qs-ui-row-title bdi { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
  .qs-scr-import-list .qs-ui-row-sub { white-space: normal; overflow-wrap: anywhere; }
  .qs-scr-import-list .qs-ui-row-main { flex-wrap: wrap; }
}

/* EYP QR editör · studio/css/screens/setup.css
 * Sahibi: E19 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-setup …);
 * değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 * İlk kurulum (03 §3.5.11): kabuksuz çatıda ortalanmış tek kart, üç adım şeridi, adım gövdesi, alt çubuk. Telefonda kart tam genişlik.
 */
.qs-scr-setup { display: flex; justify-content: center; min-inline-size: 0; padding-block: var(--qs-sp-4); }
.qs-scr-setup-card {
  inline-size: 100%; max-inline-size: 560px; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--qs-sp-4);
  padding: var(--qs-sp-5); background: var(--qs-surface); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card);
}
.qs-scr-setup-body { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-setup-title { margin: 0; font-size: var(--qs-fs-title); line-height: var(--qs-lh-title); font-weight: var(--qs-fw-semibold); }
.qs-scr-setup-steps { display: flex; gap: var(--qs-sp-2); margin: 0; padding: 0; list-style: none; min-inline-size: 0; }
.qs-scr-setup-step { display: flex; align-items: center; gap: var(--qs-sp-2); flex: 1 1 0; min-inline-size: 0; padding-block-end: var(--qs-sp-2); border-block-end: 2px solid var(--qs-line); color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-setup-step[aria-current="step"] { border-block-end-color: var(--qs-accent); color: var(--qs-ink); font-weight: var(--qs-fw-medium); }
.qs-scr-setup-step[data-done] { border-block-end-color: var(--qs-accent-soft); color: var(--qs-ink); }
.qs-scr-setup-stepn { display: grid; place-items: center; flex: none; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--qs-raised); font-size: var(--qs-fs-help); }
.qs-scr-setup-step[aria-current="step"] .qs-scr-setup-stepn { background: var(--qs-accent); color: var(--qs-on-accent); }
.qs-scr-setup-note, .qs-scr-setup-lead { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); overflow-wrap: anywhere; }
.qs-scr-setup-note[data-kind="error"] { color: var(--qs-st-error-ink); }
.qs-scr-setup-note[data-kind="warn"] { padding: var(--qs-sp-2) var(--qs-sp-3); border-radius: var(--qs-r-control); background: var(--qs-st-instant-bg); color: var(--qs-st-instant-ink); }
.qs-scr-setup-venue { margin: 0; font-weight: var(--qs-fw-medium); overflow-wrap: anywhere; }
.qs-scr-setup-label { margin: 0; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-medium); }
.qs-scr-setup-group { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-setup-switches { display: flex; flex-direction: column; gap: var(--qs-sp-1); }
.qs-scr-setup-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--qs-sp-3); }
.qs-scr-setup-choices { display: flex; flex-direction: column; gap: var(--qs-sp-3); margin: 0; padding: 0; list-style: none; }
.qs-scr-setup-choice { display: flex; flex-direction: column; align-items: flex-start; gap: var(--qs-sp-2); min-inline-size: 0; padding: var(--qs-sp-3); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); background: var(--qs-surface); }
.qs-scr-setup-choice-title { margin: 0; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-semibold); }
.qs-scr-setup-choice-text { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); overflow-wrap: anywhere; }
.qs-scr-setup-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--qs-sp-2); }
@media (max-width: 699px) {
  .qs-scr-setup { padding-block: 0; }
  .qs-scr-setup-card { padding: var(--qs-sp-4); border-inline: 0; border-radius: 0; }
  .qs-scr-setup-step > span:last-child { display: none; }
  .qs-scr-setup-step[aria-current="step"] > span:last-child { display: inline; }
  .qs-scr-setup-step[aria-current="step"] { flex: 3 1 0; }
  .qs-scr-setup-pair { grid-template-columns: minmax(0, 1fr); }
  .qs-scr-setup-bar { justify-content: stretch; }
  .qs-scr-setup-bar > * { flex: 1 1 auto; }
}

/* EYP QR editör · studio/css/screens/auth.css
 * Sahibi: E20 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-auth …);
 * değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 * Giriş, kayıt, şifre sıfırlama, davet (03 §3.5 #25–27, #29): kabuksuz çatıda ortalanmış tek kart; telefonda tam genişlik.
 */
.qs-scr-auth { display: flex; justify-content: center; min-inline-size: 0; padding-block: var(--qs-sp-4); }
.qs-scr-auth-card {
  inline-size: 100%; max-inline-size: 420px; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--qs-sp-4);
  padding: var(--qs-sp-5); background: var(--qs-surface); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card);
}
.qs-scr-auth-lead { margin: 0; overflow-wrap: anywhere; color: var(--qs-ink-2); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-scr-auth-form { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-auth-status { margin: 0; min-block-size: var(--qs-lh-body); overflow-wrap: anywhere; color: var(--qs-ink-2); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-scr-auth-status[data-error], .qs-scr-auth-lead[data-error] { color: var(--qs-st-error-ink); }
.qs-scr-auth-submit { inline-size: 100%; }
.qs-scr-auth-links { display: flex; flex-wrap: wrap; gap: var(--qs-sp-2) var(--qs-sp-4); }
.qs-scr-auth-link {
  display: inline-flex; align-items: center; min-block-size: var(--qs-hit-desk); color: var(--qs-accent-strong);
  font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); text-decoration: underline; text-underline-offset: 2px;
}
.qs-scr-auth-link:focus-visible { outline: var(--qs-focus-width) solid var(--qs-focus-color); outline-offset: var(--qs-focus-offset); border-radius: var(--qs-r-badge); }
@media (max-width: 699px) {
  .qs-scr-auth { padding-block: 0; }
  .qs-scr-auth-card { padding: var(--qs-sp-4); border-inline: 0; border-radius: 0; }
  .qs-scr-auth-link { min-block-size: var(--qs-hit); }
  .qs-scr-auth-status, .qs-scr-auth-lead { font-size: var(--qs-fs-field); line-height: var(--qs-lh-field); }
}

/* EYP QR editör · studio/css/screens/settings.css
 * Sahibi: E21 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-settings …); Ayarlar › İşletme ve Ayarlar › Paket aynı kökü paylaşır.
 * Değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden. Kullanım çubuğunun dolgusu --qs-scr-fill özel özelliğinden gelir
 * (ekran kendi çubuğunda yazar; yeni tasarım değişkeni değildir).
 */
.qs-scr-settings { display: flex; flex-direction: column; min-inline-size: 0; }
.qs-scr-settings-body { display: flex; flex-direction: column; gap: var(--qs-sp-5); min-inline-size: 0; }
.qs-scr-settings-block { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; padding-block-end: var(--qs-sp-4); border-block-end: 1px solid var(--qs-line); }
.qs-scr-settings-block:last-child { border-block-end: 0; }
.qs-scr-settings-head { display: flex; flex-wrap: wrap; gap: var(--qs-sp-2); align-items: center; justify-content: space-between; min-inline-size: 0; }
.qs-scr-settings-h { margin: 0; font-size: var(--qs-fs-field); line-height: var(--qs-lh-field); font-weight: var(--qs-fw-semibold); color: var(--qs-ink); }
.qs-scr-settings-note, .qs-scr-settings-contact { margin: 0; overflow-wrap: anywhere; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-settings-label { margin: 0 0 var(--qs-sp-2); color: var(--qs-ink); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-medium); }
.qs-scr-settings-switches { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-settings-seg, .qs-scr-settings-row { min-inline-size: 0; }
.qs-scr-settings-row { display: flex; flex-wrap: wrap; gap: var(--qs-sp-3); align-items: center; }
.qs-scr-settings-error, .qs-scr-settings-over {
  display: flex; gap: var(--qs-sp-2); align-items: flex-start; margin: 0; padding: var(--qs-sp-3); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card);
  font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); overflow-wrap: anywhere; min-inline-size: 0;
}
.qs-scr-settings-error { background: var(--qs-st-error-bg); color: var(--qs-st-error-ink); }
.qs-scr-settings-over { background: var(--qs-st-instant-bg); color: var(--qs-st-instant-ink); }
.qs-scr-settings-plan-name { margin: 0; font-size: var(--qs-fs-title); line-height: var(--qs-lh-title); font-weight: var(--qs-fw-semibold); color: var(--qs-ink); overflow-wrap: anywhere; }

/* Kullanım çubukları: etiket + sayı + (gerekirse) durum rozeti; çubuk renk dışında metinle de söylenir */
.qs-scr-settings-uses { display: flex; flex-direction: column; gap: var(--qs-sp-4); margin: 0; padding: 0; list-style: none; }
.qs-scr-settings-use { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-settings-use-top { display: flex; flex-wrap: wrap; gap: var(--qs-sp-2) var(--qs-sp-3); align-items: center; min-inline-size: 0; }
.qs-scr-settings-use-label { margin: 0; flex: 1 1 auto; color: var(--qs-ink); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); overflow-wrap: anywhere; }
.qs-scr-settings-use-count { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-scr-settings-meter { block-size: var(--qs-sp-2); background: var(--qs-raised); border: 1px solid var(--qs-line); border-radius: var(--qs-r-badge); overflow: hidden; }
.qs-scr-settings-meter-fill { display: block; block-size: 100%; inline-size: var(--qs-scr-fill, 0%); background: var(--qs-accent-strong); }
.qs-scr-settings-meter[data-level="near"] .qs-scr-settings-meter-fill { background: var(--qs-st-instant-ink); }
.qs-scr-settings-meter[data-level="full"] .qs-scr-settings-meter-fill, .qs-scr-settings-meter[data-level="over"] .qs-scr-settings-meter-fill { background: var(--qs-st-error-ink); }

/* Paketler tablosu: dört sütun, telefonda da sığar (uzun etiketler satır kırar) */
.qs-scr-settings-table { inline-size: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--qs-fs-table); line-height: var(--qs-lh-table); }
.qs-scr-settings-table th, .qs-scr-settings-table td { padding: var(--qs-sp-2); border-block-end: 1px solid var(--qs-line); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
.qs-scr-settings-table thead th { color: var(--qs-ink-2); font-weight: var(--qs-fw-medium); }
.qs-scr-settings-table thead th:first-child { inline-size: 40%; }
.qs-scr-settings-table tbody th { color: var(--qs-ink); font-weight: var(--qs-fw-medium); }
.qs-scr-settings .qs-ui-live-row { min-inline-size: 0; }
@media (max-width: 699px) {
  /* segment grubu tek satırda kalır, sığmazsa yatay kayar (yetim seçenek yok) */
  .qs-scr-settings .qs-ui-segmented { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .qs-scr-settings .qs-ui-segment { flex: 0 0 auto; overflow: visible; text-overflow: clip; }
  .qs-scr-settings-table th, .qs-scr-settings-table td { padding: var(--qs-sp-2) var(--qs-sp-1); }
}
/* Mekân: adres, saat ve Wi-Fi için tek dil seçimi */
.qs-scr-settings-langbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-2) var(--qs-sp-3); min-inline-size: 0; }

/* EYP QR editör · studio/css/screens/members.css
 * Sahibi: E22 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-members …); Mekân ekranının (E15) bağlantı satırları da burada (.qs-scr-venue-*;
 * Mekân'ın kendi stil dosyası yok, kökü Ayarlar'la ortaktır). Değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 */
.qs-scr-members { display: flex; flex-direction: column; min-inline-size: 0; }
.qs-scr-members-body { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-members-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-members-h { margin: var(--qs-sp-2) 0 0; font-size: var(--qs-fs-field); line-height: var(--qs-lh-field); font-weight: var(--qs-fw-semibold); color: var(--qs-ink); }
.qs-scr-members-head .qs-scr-members-h { margin: 0; }
.qs-scr-members-list { margin: 0; padding: 0; list-style: none; min-inline-size: 0; }
.qs-scr-members-note { margin: 0; overflow-wrap: anywhere; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-members-err { list-style: none; margin: 0; padding: 0; }
.qs-scr-members-error {
  display: block; margin: 0; padding: var(--qs-sp-2) var(--qs-sp-3); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card);
  background: var(--qs-st-error-bg); color: var(--qs-st-error-ink); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); overflow-wrap: anywhere;
}
.qs-scr-members-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-members-link {
  flex: 1 1 14rem; min-inline-size: 0; min-block-size: var(--qs-hit-desk); padding: 0 var(--qs-sp-3); font: inherit; font-size: var(--qs-fs-field);
  color: var(--qs-ink); background: var(--qs-surface); border: 1px solid var(--qs-control-line); border-radius: var(--qs-r-control); text-overflow: ellipsis;
}
.qs-scr-members-link:focus-visible { outline: var(--qs-focus-width) solid var(--qs-focus-color); outline-offset: var(--qs-focus-offset); }

/* Mekân › bağlantı satırları: tür + etiket + adres bir kartta; telefonda alt alta */
.qs-scr-venue-links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-venue-link {
  display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; padding: var(--qs-sp-3); background: var(--qs-surface);
  border: 1px solid var(--qs-line); border-radius: var(--qs-r-card);
}
.qs-scr-venue-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-venue-fields > * { min-inline-size: 0; }
.qs-scr-venue-rm { align-self: flex-start; }
@media (min-width: 700px) {
  .qs-scr-venue-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
}
@media (max-width: 699px) {
  .qs-scr-members-head > .qs-ui-button { inline-size: 100%; }
  .qs-scr-members-link { min-block-size: var(--qs-hit); }
}

/* EYP QR editör · studio/css/screens/domain.css
 * Sahibi: E23 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-domain …);
 * değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 */
.qs-scr-domain { display: flex; flex-direction: column; min-inline-size: 0; }
.qs-scr-domain-body { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-domain-block { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; padding: var(--qs-sp-4); background: var(--qs-surface); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); }
.qs-scr-domain-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--qs-sp-2) var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-domain-host { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--qs-fs-title); line-height: var(--qs-lh-title); font-weight: var(--qs-fw-semibold); color: var(--qs-ink); }
.qs-scr-domain-h { margin: 0; font-size: var(--qs-fs-field); line-height: var(--qs-lh-field); font-weight: var(--qs-fw-semibold); color: var(--qs-ink); }
.qs-scr-domain-h3 { margin: var(--qs-sp-2) 0 0; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-semibold); color: var(--qs-ink); }
.qs-scr-domain-note { margin: 0; overflow-wrap: anywhere; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-domain-block > .qs-scr-domain-note[role="status"] { color: var(--qs-ink); font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); }
.qs-scr-domain-a { align-self: flex-start; display: inline-flex; align-items: center; min-block-size: var(--qs-hit-desk); color: var(--qs-accent-strong); font-size: var(--qs-fs-body); overflow-wrap: anywhere; }
.qs-scr-domain-actions { display: flex; flex-wrap: wrap; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-domain-rec { display: flex; flex-direction: column; gap: var(--qs-sp-2); min-inline-size: 0; padding: var(--qs-sp-3); background: var(--qs-raised); border: 1px solid var(--qs-line); border-radius: var(--qs-r-control); }
.qs-scr-domain-type { margin: 0; font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); font-weight: var(--qs-fw-semibold); color: var(--qs-ink-2); letter-spacing: 0.04em; }
.qs-scr-domain-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-domain-val {
  flex: 1 1 14rem; min-inline-size: 0; min-block-size: var(--qs-hit-desk); padding: 0 var(--qs-sp-3); font: inherit; font-size: var(--qs-fs-field);
  color: var(--qs-ink); background: var(--qs-surface); border: 1px solid var(--qs-control-line); border-radius: var(--qs-r-control); text-overflow: ellipsis;
}
.qs-scr-domain-val:focus-visible { outline: var(--qs-focus-width) solid var(--qs-focus-color); outline-offset: var(--qs-focus-offset); }
@media (max-width: 699px) {
  .qs-scr-domain-block { padding: var(--qs-sp-3); }
  .qs-scr-domain-val { min-block-size: var(--qs-hit); }
  .qs-scr-domain-a { min-block-size: var(--qs-hit); }
  .qs-scr-domain-actions > .qs-ui-button { flex: 1 1 100%; }
}

/* EYP QR editör · studio/css/screens/report.css
 * Sahibi: E24 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-report …);
 * değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 * Çubuk uzunlukları ekranın çalışma zamanında yazdığı --qs-rp-w (yatay) ve --qs-rp-h (saat sütunu yüksekliği) özel özellikleridir (0–100 %).
 */
.qs-scr-report { display: flex; flex-direction: column; gap: var(--qs-sp-4); min-inline-size: 0; }
.qs-scr-report-body { display: flex; flex-direction: column; gap: var(--qs-sp-5); min-inline-size: 0; }
.qs-scr-report-bar { display: flex; flex-wrap: wrap; gap: var(--qs-sp-3); align-items: center; justify-content: space-between; min-inline-size: 0; }
.qs-scr-report-range { color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-report-note { margin: 0; overflow-wrap: anywhere; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-report-error { display: flex; flex-direction: column; gap: var(--qs-sp-3); align-items: flex-start; padding: var(--qs-sp-3); background: var(--qs-st-error-bg); color: var(--qs-st-error-ink); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); }
.qs-scr-report-error .qs-scr-report-note { color: inherit; }

.qs-scr-report-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--qs-sp-3); }
.qs-scr-report-tile { display: flex; flex-direction: column; gap: var(--qs-sp-1); min-inline-size: 0; padding: var(--qs-sp-3); background: var(--qs-surface); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card); }
.qs-scr-report-tile p { margin: 0; }
.qs-scr-report-tile-label { color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-report-tile-value { overflow-wrap: anywhere; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-semibold); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.qs-scr-report-tile-sub { color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }

.qs-scr-report-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--qs-sp-5); }
.qs-scr-report-block { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-report-h { margin: 0; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-semibold); }
.qs-scr-report-list { display: flex; flex-direction: column; gap: var(--qs-sp-3); margin: 0; padding: 0; list-style: none; }
.qs-scr-report-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--qs-sp-3); row-gap: var(--qs-sp-1); align-items: baseline; }
.qs-scr-report-row-name { min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--qs-fs-table); line-height: var(--qs-lh-table); }
.qs-scr-report-row-count { font-size: var(--qs-fs-table); line-height: var(--qs-lh-table); font-weight: var(--qs-fw-medium); }
.qs-scr-report-track { grid-column: 1 / -1; display: block; block-size: var(--qs-sp-2); background: var(--qs-soft); border-radius: var(--qs-r-badge); overflow: hidden; }
.qs-scr-report-bar-fill { display: block; block-size: 100%; inline-size: var(--qs-rp-w, 0%); background: var(--qs-select-line); border-radius: var(--qs-r-badge); }

.qs-scr-report-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: end; block-size: calc(var(--qs-sp-7) * 3); padding-block-end: var(--qs-sp-1); direction: ltr; }
.qs-scr-report-hour { display: flex; flex-direction: column; justify-content: flex-end; block-size: 100%; min-inline-size: 0; }
.qs-scr-report-hour-bar { display: block; block-size: var(--qs-rp-h, 0%); min-block-size: 0; background: var(--qs-select-line); border-radius: var(--qs-r-badge) var(--qs-r-badge) 0 0; }
.qs-scr-report-hour-tick { display: block; block-size: var(--qs-sp-4); overflow: visible; white-space: nowrap; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-report-details > summary { cursor: pointer; min-block-size: var(--qs-hit); display: flex; align-items: center; color: var(--qs-accent-strong); font-size: var(--qs-fs-help); }
.qs-scr-report-table { inline-size: 100%; border-collapse: collapse; font-size: var(--qs-fs-table); line-height: var(--qs-lh-table); }
.qs-scr-report-table th, .qs-scr-report-table td { padding: var(--qs-sp-1) var(--qs-sp-2); border-block-end: 1px solid var(--qs-line); text-align: start; }
.qs-scr-report-table td { text-align: end; }
.qs-scr-report-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 700px) {
  .qs-scr-report-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qs-scr-report-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* EYP QR editör · studio/css/screens/conflicts.css
 * Sahibi: E5 — 03 §7. Yalnız bu ekranın kök sınıfı altında (.qs-scr-conflicts …);
 * değişken ve bileşen sınıfı tanımlamaz (03 §4). Değerler css/tokens.css değişkenlerinden.
 * "Başka cihazda değişti" listesi (03 §5.2): çekmece/alttan sayfa gövdesi; satır = ad · alan, Senin / Şimdi, iki eylem.
 */
.qs-scr-conflicts { display: flex; flex-direction: column; gap: var(--qs-sp-3); min-inline-size: 0; }
.qs-scr-conflicts-hint { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-conflicts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--qs-sp-3); }
.qs-scr-conflicts-row {
  display: flex; flex-direction: column; gap: var(--qs-sp-2); padding: var(--qs-sp-3);
  background: var(--qs-surface); border: 1px solid var(--qs-line); border-radius: var(--qs-r-card);
}
.qs-scr-conflicts-head { display: flex; align-items: center; justify-content: space-between; gap: var(--qs-sp-2); min-inline-size: 0; }
.qs-scr-conflicts-name, .qs-scr-conflicts-open {
  min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); font-weight: var(--qs-fw-semibold); color: var(--qs-ink);
}
.qs-scr-conflicts-open {
  padding: 0; border: 0; background: none; text-align: start; cursor: pointer; font-family: inherit;
  min-block-size: var(--qs-hit-desk);
}
.qs-scr-conflicts-open:hover { color: var(--qs-accent-strong); text-decoration: underline; }
.qs-scr-conflicts-open:focus-visible { outline: var(--qs-focus-width) solid var(--qs-focus-color); outline-offset: var(--qs-focus-offset); border-radius: var(--qs-r-badge); }
.qs-scr-conflicts-note { margin: 0; color: var(--qs-st-instant-ink); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-conflicts-vals { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--qs-sp-2); }
.qs-scr-conflicts-vals > div { min-inline-size: 0; padding: var(--qs-sp-2); background: var(--qs-raised); border-radius: var(--qs-r-control); }
.qs-scr-conflicts-vals dt { color: var(--qs-ink-2); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-conflicts-vals dd { margin: 0; overflow-wrap: anywhere; font-size: var(--qs-fs-body); line-height: var(--qs-lh-body); color: var(--qs-ink); }
.qs-scr-conflicts-error { margin: 0; color: var(--qs-st-error-ink); font-size: var(--qs-fs-help); line-height: var(--qs-lh-help); }
.qs-scr-conflicts-actions { display: flex; flex-wrap: wrap; gap: var(--qs-sp-2); }
@media (max-width: 699px) {
  .qs-scr-conflicts-vals { grid-template-columns: 1fr; }
  .qs-scr-conflicts-actions > * { flex: 1 1 auto; }
  .qs-scr-conflicts-open { min-block-size: var(--qs-hit); }
}