/* The store's accent, in one place. Every olive in the storefront — button
   fills, badges, links, tinted panels, tinted borders, focus rings — reads
   one of these tokens, so the colour chosen in the admin panel (Özelleştirme
   → Renkler) reaches all of them at once. Linked first on every page and in
   the panel, ahead of the page stylesheets that use the tokens.

   The values here are the shades the pages were designed with; nothing looks
   different until an accent is chosen. theme.js then sets every token from
   the chosen colour with the same recipe (src/theme-rules.js): dark by 22%
   for the strong shade, and the accent mixed into the paper at 6 / 11 / 19 /
   26 / 45 / 62 % for the mist, the soft fill, the deeper tint, the light
   border, the mid border and the rule. Computed in the script rather than with
   color-mix() so that a browser without color-mix() still gets a complete,
   consistent set. */
:root {
  --accent: #646b46;
  --accent-strong: #50573a;
  --accent-mist: #f1f2e9;
  --accent-soft: #eaece1;
  --accent-tint: #dfe2d1;
  --accent-line: #d5d7c8;
  --accent-edge: #b8bca4;
  --accent-rule: #9c9f86;
  --accent-halo: #83916a20;
  --accent-wash: #5c643d0f;
  --accent-veil: #35402ed9;
  /* The paper (Özelleştirme → Renkler → Zemin tonu) and the neutrals every
     page paints on it: cards and fields lifted toward white, the warm bands
     and the hairlines sunk toward umber. On cream these are the pages' own
     values: the sheets painted some forty near-identical neutrals, unified
     here to eight, each within a few RGB units of the literal it replaced
     (the widest, a dialog border, moved seven). theme.js sets all of them from the chosen tone with
     the recipe in src/theme-rules.js, and re-derives the accent's tints
     against that paper. The -rgb triplets serve the translucent chips and
     the frosted header: rgb(var(--theme-paper-rgb) / .66). */
  --theme-paper: #f8f6f1;
  --theme-paper-rgb: 248 246 241;
  --theme-card: #fbfaf6;
  --theme-card-rgb: 251 250 246;
  --theme-field: #fffefa;
  --theme-band-soft: #f2f0e8;
  --theme-band: #f0eee5;
  --theme-band-deep: #edece3;
  --theme-line: #e1ddd3;
  --theme-line-rgb: 225 221 211;
  --theme-line-strong: #d3d0c4;
  /* Success is a state, like the rust of an error, and stays green whatever
     the accent — a terracotta accent would otherwise make a saved-address
     notice and a failed one the same box. Not derived, never overridden. */
  --ok-ink: #495b36;
  --ok-fill: #ebf0e1;
  --ok-line: #ced9bf;
  --ok-mark: #63704c;
}

/* The shape of the buttons (Özelleştirme → Düğmeler). Every primary and
   secondary button reads --button-radius with its own former radius as the
   fallback; today's look is the full pill, so the default renders exactly as
   before. theme.js puts data-button-shape on <html>; the admin sample strip
   carries the same attribute on itself. */
:root { --button-radius: 999px; }
[data-button-shape="round"] { --button-radius: 999px; }
[data-button-shape="soft"] { --button-radius: 10px; }
[data-button-shape="square"] { --button-radius: 0px; }

/* The corners of everything else (Özelleştirme → Köşeler → Kartlar,
   fotoğraflar, pencereler ve alanlar): cards, product images, panels,
   dialogs and drawers, fields, thumbnails. Each of their radii in the page
   stylesheets is its former literal scaled by --corner-scale
   (calc(11px * var(--corner-scale, 1))), so the round style renders
   exactly as before; soft halves every corner, square flattens them. The
   round value is declared too (like the round button) so that a sample
   carrying it inside a soft or square area keeps its own corners. Circles, pills and the buttons (which follow --button-radius) are
   untouched. theme.js puts data-corner-style on <html>; the panel's sample
   carries the attribute on itself. */
[data-corner-style="round"] { --corner-scale: 1; }
[data-corner-style="soft"] { --corner-scale: .5; }
[data-corner-style="square"] { --corner-scale: 0; }

/* The home sections the owner switched off (Özelleştirme → Ana sayfa) and
   every link that leads to one of them — in the header menus, the phone
   menu, the footer, the Koleksiyon menu — carry data-home-section with the
   section's id; theme.js lists the ids that are off in data-hidden-sections
   on <html> before the first paint, so nothing is painted and then removed.
   Important, because a menu's own display rule for its links (a footer
   column, the phone menu) is more specific than these two attributes. The
   catalog's own hiding of the empty featured shelf (app.js) composes. */
html[data-hidden-sections~="featured"] [data-home-section="featured"] { display: none !important; }
html[data-hidden-sections~="inspiration"] [data-home-section="inspiration"] { display: none !important; }
html[data-hidden-sections~="workshop"] [data-home-section="workshop"] { display: none !important; }
html[data-hidden-sections~="questions"] [data-home-section="questions"] { display: none !important; }
html[data-hidden-sections~="closing"] [data-home-section="closing"] { display: none !important; }

/* Direct WhatsApp contact sits above the measured purchase/compare bars. */
.site-whatsapp {
  position: fixed;
  z-index: 21;
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--compare-purchase-offset, 0px));
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 12px;
  border: 1px solid #ffffff5c;
  border-radius: 50%;
  background: #128c7e;
  color: #fff;
  box-shadow: 0 4px 18px #12352c33;
  text-decoration: none;
  touch-action: manipulation;
  transition: background .18s, box-shadow .18s;
}
.site-whatsapp > svg { display: block; width: 30px; height: 30px; fill: currentColor; stroke: none; }
.site-whatsapp:hover { color: #fff; background: #087567; box-shadow: 0 6px 22px #12352c44; }
.site-whatsapp:focus-visible { outline: 3px solid #128c7e; outline-offset: 4px; }
.site-whatsapp-label { position: absolute; right: calc(100% + 12px); padding: 9px 13px; border-radius: 7px; background: #fff; color: #24372f; box-shadow: 0 3px 16px #12352c24; font: 500 12px/1.6 var(--font-display-sans, Arial, sans-serif); white-space: nowrap; pointer-events: none; visibility: hidden; opacity: 0; }
.site-whatsapp:hover .site-whatsapp-label, .site-whatsapp:focus-visible .site-whatsapp-label { visibility: visible; opacity: 1; }
body.has-compare-tray .site-whatsapp { bottom: calc(var(--compare-tray-height, 90px) + var(--compare-purchase-offset, 0px) + 40px + env(safe-area-inset-bottom, 0px)); }
body.dialog-open .site-whatsapp, body.pp-dialog-open .site-whatsapp, body:has(dialog[open]) .site-whatsapp { display: none; }
body:has(.toast.visible, .store-toast:not([hidden]), .favorites-sync-notice:not([hidden]), .compare-control-status.is-visible, .pp-storage-note:not([hidden])) .site-whatsapp { visibility: hidden; }
@media (max-width: 760px) {
  .site-whatsapp { right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--compare-purchase-offset, 0px)); }
  body.has-compare-tray .site-whatsapp { bottom: calc(var(--compare-tray-height, 80px) + var(--compare-purchase-offset, 0px) + 16px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .site-whatsapp { transition: none; } }
@media print { .site-whatsapp { display: none; } }

/* Music stays opposite WhatsApp and above the same measured mobile bars. */
.site-music {
  position: fixed;
  z-index: 21;
  left: max(24px, env(safe-area-inset-left, 0px));
  bottom: max(var(--music-notice-bottom, 0px), calc(24px + env(safe-area-inset-bottom, 0px) + var(--compare-purchase-offset, 0px)));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  max-width: calc(100vw - 120px);
  padding: 10px 15px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--theme-paper, #f8f6f1);
  color: var(--accent-strong);
  box-shadow: 0 4px 18px #12352c1a;
  font: 500 12px/1.4 var(--font-display-sans, Arial, sans-serif);
  cursor: pointer;
  touch-action: manipulation;
}
.site-music > svg { display: block; flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.site-music > .site-music-pause, .site-music.is-playing > .site-music-play { display: none; }
.site-music.is-playing > .site-music-pause { display: block; }
.site-music.is-playing { background: var(--accent-soft); border-color: var(--accent); }
.site-music:hover { border-color: var(--accent); }
.site-music:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; }
body.has-compare-tray .site-music { bottom: max(var(--music-notice-bottom, 0px), calc(var(--compare-tray-height, 90px) + var(--compare-purchase-offset, 0px) + 40px + env(safe-area-inset-bottom, 0px))); }
body:has(dialog[open]) .site-music { display: none; }
@media (max-width: 760px) {
  .site-music { left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(var(--music-notice-bottom, 0px), calc(16px + env(safe-area-inset-bottom, 0px) + var(--compare-purchase-offset, 0px))); }
  body.has-compare-tray .site-music { bottom: max(var(--music-notice-bottom, 0px), calc(var(--compare-tray-height, 80px) + var(--compare-purchase-offset, 0px) + 16px + env(safe-area-inset-bottom, 0px))); }
}
@media print { .site-music { display: none; } }